.page-container { width: min(1260px, calc(100% - 128px)); margin-inline: auto; }
.page-banner { position: relative; min-height: 350px; overflow: hidden; background: #f3f9fb; }
.page-banner > img { position: absolute; right: 0; top: 0; height: 100%; width: 60%; object-fit: cover; }
.page-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#f1faff 0%,rgba(255,255,255,.97) 29%,rgba(255,255,255,.88) 40%,transparent 67%); }
.page-banner .page-container { position: relative; z-index: 1; padding-block: 42px; }
.page-eyebrow { color: var(--color-accent); font-size: var(--size-note); margin: 0 0 5px;  font-weight: var(--weight-label);}
.page-banner-title { font-size: 44px; line-height: 1.4; color: var(--color-ink); margin: 0 0 18px; font-weight: 700; }
.page-banner-title span { color: var(--color-accent); }
.page-banner p:last-child { max-width: 640px; font-size: var(--size-body); line-height: 1.8; margin: 0;  font-weight: var(--weight-body); color: var(--color-text);}
.breadcrumbs { padding-block: 13px; font-size: var(--size-note); color: var(--color-muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li + li::before { content: '\203A'; margin-right: 10px; }
.page-section { padding-block: 42px; }
.page-title { text-align: center; margin-bottom: 24px; }
.page-title h2 { margin: 0; color: var(--color-ink); font-size: var(--size-section); line-height: 1.4;  font-weight: var(--weight-heading);}
.page-intro { text-align: center; color: var(--color-muted); margin: 0 0 28px;  font-size: var(--size-body); font-weight: var(--weight-body);}
.company-message { background: #effaff; padding-block: 40px; }
.company-message .page-container { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.company-message h2 { margin: 0 0 18px; }
.company-message p { margin: 0 0 28px; font-size: var(--size-body);  font-weight: var(--weight-body);}
.company-message p:last-child { margin: 0; }
.company-message img { width: 100%; aspect-ratio: 1.78; object-fit: cover; }
.philosophy-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 32px; }
.philosophy-grid article { text-align: center; padding-inline: 24px; position: relative; }
.philosophy-grid article + article::before { content:''; position:absolute; left:0; top:40px; bottom:15px; width:1px; background:var(--color-line); }
.philosophy-grid img { width: 85px; height: 85px; object-fit: contain; margin: 0 auto 14px; }
.philosophy-grid h3 { font-size: 26px; margin: 0 0 5px; color: var(--color-ink); }
.philosophy-grid p { margin: 0; font-size: var(--size-body); }
.company-info-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: stretch; }
.company-info-grid > img { width:100%; height:100%; object-fit:cover; }
.info-table { width:100%; border-collapse:collapse; font-size:16px; }
.info-table th,.info-table td { border:1px solid var(--color-line); padding:8px 20px; text-align:left; font-weight:400; }
.info-table th { background:#eaf5f9; width:150px; white-space:nowrap; }
.access-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:56px; align-items:center; }
.access-grid iframe { width:100%; height:220px; border:0; }
.access-grid p { margin:0 0 20px; }
.access-grid a { color:var(--color-accent); }
.provisional-note { border-left:3px solid var(--color-accent); background:#eefaff; padding:12px 18px; font-size:14px; margin:0 0 24px; color:#516473; }
.sample-label { display:inline-block; color:#526776; background:#edf6f9; font-size:12px; padding:2px 8px; margin:0 0 8px; }
.flow-section,.faq-section { background:#f7f8f9; }
.flow-list { margin:0; padding:0 0 0 44px; list-style:none; }
.flow-step { position:relative; display:grid; grid-template-columns:1fr 36%; background:white; margin-bottom:18px; min-height:160px; align-items:center; }
.flow-step::before { content:''; position:absolute; left:-25px; top:50%; height:calc(100% + 18px); width:1px; background:var(--color-accent); }
.flow-step:last-child::before { display:none; }
.step-number { position:absolute; top:50%; transform:translateY(-50%); left:-55px; width:66px; height:66px; display:grid; place-items:center; background:var(--color-accent); color:white; border-radius:50%; font-size:28px; }
.step-icon { width:100px; height:100px; object-fit:contain; margin:auto; }
.step-copy { min-width:0; padding:20px 26px 20px 42px; }
.step-copy h3 { font-size: 22px; margin:0 0 7px; line-height:1.5; color:var(--color-ink);  font-weight: var(--weight-heading);}
.step-copy p { margin:0; font-size: var(--size-body); line-height:1.8; color: var(--color-text);  font-weight: var(--weight-body);}
.step-photo { width:100%; height:100%; object-fit:cover; }
.faq-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:32px; }
.filter-sidebar { align-self:start; display:grid; }
.filter-sidebar button { border:0; border-bottom:1px solid var(--color-line); padding:20px; text-align:left; background:white; color:var(--color-ink); cursor:pointer; }
.filter-sidebar button::after { content:'\203A'; float:right; color:var(--color-accent); }
.filter-sidebar button[aria-pressed=true] { color:white; background:var(--color-accent); }
.filter-sidebar button[aria-pressed=true]::after { color:white; }
.faq-item { margin-bottom:14px; background:white; overflow:hidden; }
.faq-item summary { cursor:pointer; list-style:none; display:flex; gap:20px; align-items:center; padding:14px 22px; color:var(--color-ink); font-size:21px; font-weight:700; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::before { content:'Q'; flex:0 0 42px; height:42px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--color-accent); font-weight:400; }
.faq-toggle-icon { position:relative; flex:0 0 20px; width:20px; height:20px; margin-left:auto; color:var(--color-accent); }
.faq-toggle-icon::before,.faq-toggle-icon::after { content:''; position:absolute; left:0; top:9px; width:20px; height:2px; background:currentColor; transition:transform .26s ease,opacity .26s ease; }
.faq-toggle-icon::after { transform:rotate(90deg); }
.faq-item.is-expanded .faq-toggle-icon::before { transform:rotate(180deg); }
.faq-item.is-expanded .faq-toggle-icon::after { transform:rotate(180deg); opacity:0; }
@media(prefers-reduced-motion:reduce) { .faq-toggle-icon::before,.faq-toggle-icon::after { transition:none; } }
.faq-answer { background:#eff9fd; padding:18px 28px 20px 84px; font-size:16px; }
.faq-answer p { margin:0; }
.listing-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom:28px; }
.listing-head h2 { color:var(--color-ink); font-size: var(--size-section); margin:0;  font-weight: var(--weight-heading);}
.filter-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.filter-tabs button { min-width:110px; padding:10px 18px; border:1px solid var(--color-line); border-radius:3px; background:white; color:var(--color-ink); cursor:pointer; font-size: var(--size-note); transition:background-color .25s,color .25s;  font-weight: var(--weight-label);}
.filter-tabs button[aria-pressed=true] { background:var(--color-accent); border-color:var(--color-accent); color:white; }
.filter-tabs button:hover { background:#eaf8fc; color:var(--color-ink); }
.listing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.listing-card { background:white; border:1px solid #eef1f3; }
.listing-card > a { display:block; }
.listing-card img { width:100%; aspect-ratio:2.25; object-fit:cover; }
.listing-body { padding:16px 20px 20px; }
.listing-body h3 { color:var(--color-ink); font-size: var(--size-card-title); margin:0 0 8px; line-height:1.5;  font-weight: var(--weight-heading);}
.listing-body p { color: var(--color-text); font-size: var(--size-body); line-height:1.7; margin:0 0 10px;  font-weight: var(--weight-body);}
.subpage-cta { background:#eef9fe; padding-block:38px; position:relative; overflow:hidden; }
.subpage-cta > img { position:absolute; right:0; top:0; height:100%; width:27%; object-fit:cover; }
.subpage-cta .page-container { display:grid; grid-template-columns:1.2fr 1fr; position:relative; gap:40px; align-items:center; padding-right:20%; }
.subpage-cta h2 { color:var(--color-ink); font-size:28px; line-height:1.5; margin:0 0 12px; }
.subpage-cta p { margin:0; font-size:16px; }
.subpage-cta .contact-actions { flex-direction:column; gap:14px; align-items:stretch; }
.subpage-cta .contact-actions a { min-width:0; width:100%; }
.subpage-cta .contact-actions small { text-align:center; font-size:12px; }
.detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:44px; padding-block:36px 64px; }
.detail-article h1 { color:var(--color-ink); font-size:40px; line-height:1.5; margin:14px 0; }
.detail-article h2 { margin:30px 0 14px; }
.page-title h2,
.company-message h2,
.listing-head h2,
.detail-article h2,
.contact-page-methods h2 {
  color:var(--color-ink);
  font-size:var(--size-section);
  font-weight:var(--weight-heading);
  line-height:1.4;
}
.page-title h2::after,
.company-message h2::after,
.listing-head h2::after,
.detail-article h2::after,
.detail-sidebar h2::after,
.contact-page-methods h2::after {
  content:'';
  display:block;
  width:var(--heading-rule-width);
  height:var(--heading-rule-height);
  margin:12px 0 17px;
  background:var(--color-accent);
}
.page-title h2::after,
.contact-page-methods h2::after { margin-inline:auto; }
.detail-article p { color: var(--color-text); font-size: var(--size-body); line-height:1.9;  font-weight: var(--weight-body);}
.detail-article.privacy-policy { max-width:960px; margin-inline:auto; }
.detail-article.privacy-policy ul { padding-left:1.5em; line-height:1.9; }
.detail-article.privacy-policy li + li { margin-top:6px; }
.detail-article.privacy-policy a { color:var(--color-accent); }
.privacy-contact { margin-block:24px; }
.privacy-contact > div { display:grid; grid-template-columns:130px minmax(0,1fr); gap:16px; padding-block:14px; border-bottom:1px solid var(--color-line); }
.privacy-contact dt { font-weight:var(--weight-label); }
.privacy-contact dd { margin:0; overflow-wrap:anywhere; }
@media(max-width:560px) { .privacy-contact > div { grid-template-columns:1fr; gap:6px; } }
.detail-article > img { width:100%; height:auto; margin:20px 0; }
.detail-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-block:36px; }
.detail-pair img { width:100%; aspect-ratio:1.7; object-fit:cover; }
.work-photo-pair { margin-block:20px; }
.work-photo-pair img { height:auto; aspect-ratio:auto; object-fit:contain; }
.voice-page-grid .voice-card { padding-left:26px; }
.voice-page-grid .voice-card > .category-tag { margin-left:62px; }
.voice-page-grid .voice-card > h3 { margin-top:12px; }
.voice-page-grid .voice-card > p:not(:last-child) { font-size: var(--size-body-compact); line-height:1.9; margin:12px 0 16px;  color: var(--color-text); font-weight: var(--weight-body);}
.detail-nav { display:flex; gap:18px; justify-content:space-between; margin-top:42px; flex-wrap:wrap; }
.outline-button { border:1px solid var(--color-accent); color:var(--color-accent); padding:12px 25px; display:inline-flex; justify-content:center; align-items:center; gap:12px; transition:color .25s,background-color .25s;  font-size: var(--size-body); font-weight: var(--weight-label);}
.outline-button:hover { background:var(--color-accent); color:white; opacity:1; text-decoration:none; }
.detail-sidebar { align-self:start; border:1px solid var(--color-line); }
.detail-sidebar h2 { font-size:19px; background:#eff9fd; color:var(--color-ink); margin:0; padding:12px 20px; }
.sidebar-item { display:flex; align-items:center; gap:16px; padding:18px; border-bottom:1px solid var(--color-line); font-size:16px; }
.sidebar-item img { width:90px; height:80px; object-fit:cover; }
.sidebar-item span { flex:1; }
.sidebar-item span:last-child:not(:first-of-type) { flex:0 0 auto; color:var(--color-accent); }
.map-wrapper { position:relative; min-height:220px; background:#eff6f8; }
.map-wrapper iframe { position:relative; z-index:1; }
.map-fallback { position:absolute; inset:0; display:grid; place-items:center; padding:20px; text-align:center; }
.subpage-cta .contact-actions { position:relative; }
.subpage-cta:not(.recruit-band) { background: #f3f8fb url("../images/cta-background-provided.webp") center / 100% auto no-repeat; }
.subpage-cta:not(.recruit-band) > img { display:none; }
.subpage-cta .contact-actions svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; flex-shrink:0; }
.subpage-cta .phone-button svg { fill:none; }
.pagination { display:flex; justify-content:center; gap:16px; margin-top:36px; }
.pagination a,.pagination span { display:grid; place-items:center; min-width:38px; height:38px; }
.pagination [aria-current] { color:white; background:var(--color-accent); }
.staff-card img { aspect-ratio:1.64; }
.staff-name { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.staff-name small { font-size: var(--size-note); font-weight:400; color: var(--color-muted); }
.recruit-band .page-container { padding-right:0; padding-left:30%; grid-template-columns:1fr auto; }
.recruit-band > img { right:auto; left:0; }
.empty-filter { display:none; padding:40px; text-align:center; }
[hidden] { display:none !important; }
.contact-page-methods { display:grid; grid-template-columns:1fr; gap:40px; text-align:center; }
.contact-page-methods p { font-size:15px; }
.contact-area { background:var(--color-bg); }
.area-prefectures { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; padding:0; gap:20px; }
.area-prefectures li { padding:24px 12px; background:white; text-align:center; font-size:24px; font-weight:700; }
.area-prefectures span { display:block; font-size: var(--size-note); color: var(--color-muted); font-weight:400; }
.contact-form { max-width:850px; margin:auto; scroll-margin-top:110px; }
.contact-field { display:grid; grid-template-columns:210px minmax(0,1fr); gap:20px; padding-block:20px; border-bottom:1px solid var(--color-line); align-items:start; }
.contact-field label { padding-top:10px; font-weight:500; }
.contact-field label span { color:var(--color-accent); font-size:12px; margin-left:10px; }
.contact-field input,.contact-field textarea { width:100%; min-width:0; border:1px solid #c9d5dc; border-radius:3px; padding:12px; font:inherit; background:white; }
.contact-field textarea { resize:vertical; }
.contact-field input:focus,.contact-field textarea:focus { outline:2px solid var(--color-accent); outline-offset:2px; }
.contact-form > .primary-button { display:flex; margin:28px auto 0; cursor:pointer; transition:color .25s, background-color .25s; }
.contact-form > .primary-button:hover { color:var(--color-accent); background:white; }
@media(max-width:700px) { .contact-page-methods { grid-template-columns:1fr; gap:20px; } .area-prefectures { grid-template-columns:1fr 1fr; gap:12px; } .contact-field { grid-template-columns:1fr; gap:8px; } }
button:focus-visible,summary:focus-visible,a:focus-visible { outline:2px solid var(--color-accent); outline-offset:4px; }
@media(max-width:1100px) {
  .page-container { width:calc(100% - 64px); }
  .page-banner-title { font-size:38px; }
  .company-message .page-container { gap:32px; }
  .detail-layout { grid-template-columns:minmax(0,1fr) 260px; gap:28px; }
  .subpage-cta .page-container { padding-right:12%; }
  .flow-step { grid-template-columns:1fr 32%; }
}
@media(max-width:900px) {
  .page-container { width:calc(100% - 44px); }
  .page-banner-title { font-size:32px; }
  .page-banner > img { width:100%; opacity:.4; }
  .page-banner::after { background:linear-gradient(90deg,#f3fbff,rgba(255,255,255,.5)); }
  .page-banner { min-height:300px; }
  .company-message .page-container,.company-info-grid,.access-grid { grid-template-columns:1fr; gap:28px; }
  .company-info-grid > img { height:auto; aspect-ratio:1.6; }
  .philosophy-grid { grid-template-columns:1fr; gap:32px; }
  .philosophy-grid article + article::before { display:none; }
  .flow-list { padding-left:28px; }
  .flow-step { grid-template-columns:1fr; }
  .step-number { left:-38px; width:48px; height:48px; font-size:21px; }
  .flow-step::before { left:-14px; }
  .step-icon { width:65px; height:65px; }
  .step-photo { grid-column:1/-1; aspect-ratio:2.4; }
  .step-copy { padding:22px 18px 22px 30px; }
  .step-copy h3 { font-size: 22px;  font-weight: var(--weight-heading);}
  .faq-layout,.detail-layout { grid-template-columns:1fr; }
  .filter-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .listing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .subpage-cta .page-container { grid-template-columns:1fr; padding-right:0; }
  .subpage-cta:not(.recruit-band) { background-size:cover; }
  .subpage-cta > img { opacity:.18; width:100%; }
  .subpage-cta .contact-actions { max-width:420px; }
  .recruit-band .page-container { padding-left:0; }
  .detail-sidebar { width:100%; }
}
@media(max-width:560px) {
  .page-banner-title { font-size:29px; }
  .page-banner p:last-child,.company-message p,.philosophy-grid p,.step-copy p { font-size:15px; }
  .page-banner p br,.company-message p br { display:none; }
  .page-title h2 { font-size: var(--size-section);  font-weight: var(--weight-heading);}
  .listing-grid { grid-template-columns:1fr; }
  .filter-tabs { gap:6px; }
  .filter-tabs button { min-width:0; font-size: var(--size-note); padding:8px 12px;  font-weight: var(--weight-label);}
  .info-table { font-size:14px; }
  .info-table th,.info-table td { padding:9px 10px; }
  .info-table th { width:94px; white-space:normal; }
  .faq-item summary { font-size:17px; gap:12px; padding:12px; }
  .faq-answer { padding:18px; font-size:15px; }
  .detail-article h1 { font-size:28px; }
  .detail-pair { grid-template-columns:1fr; }
  .subpage-cta h2 { font-size:24px; }
  .detail-nav .outline-button { width:100%; }
}
