/* ==========================================================================
   トップページ（index.html）
   ========================================================================== */

/* ---------- メインビジュアル（スライドショー） ---------- */
.top-hero { position: relative; height: 648px; }
.top-hero__slides { position: absolute; inset: 0 0 1px; overflow: hidden; background: #fff; }
.top-hero__slides .slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1s ease;
}
.top-hero__slides .slide.is-active { opacity: .5; } /* 元サイトと同じく写真を半透明にして白を透かす */
.top-hero__text { position: absolute; top: 108px; left: calc(max(40px, 5.5%) - 37px); width: 560px; } /* 見出しの左端＝画面幅の 5.5%（1280px で約 70px） */
.top-hero__title {
  position: absolute; left: 37px; top: 33px; width: 513px;
  font-size: 72px; line-height: 84.96px; font-weight: 500; color: #000;
  text-shadow: #fff -1px -1px 0, #fff -1px 1px 0, #fff 1px 1px 0, #fff 1px -1px 0;
}
.top-hero__lead { position: absolute; left: 42px; top: 324px; width: 393px; font-size: 16px; line-height: 27.2px; }

/* ---------- 仲間を募集しています ---------- */
.top-recruit { background: var(--c-gray); padding: 43px 40px 44px; }
.top-recruit__box { position: relative; height: 520px; background: #fff; overflow: hidden; }
.top-recruit__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; opacity: .5; }
.top-recruit__slant { position: absolute; top: 0; right: 492px; width: 115px; height: 100%; fill: #fff; }
.top-recruit__panel { position: absolute; top: 0; right: 0; width: 500px; height: 100%; background: #fff; }
.top-recruit__title {
  position: absolute; right: 53px; top: 93px; width: 477px; text-align: right;
  font-size: 33px; line-height: 52.8px; letter-spacing: 1.65px; font-weight: 700;
}
.top-recruit__title em { font-style: normal; font-size: 40px; letter-spacing: 2px; color: var(--c-red2); }
.top-recruit__lead { position: absolute; right: 58px; top: 233px; width: 389px; text-align: right; font-size: 16px; line-height: 22.4px; }
.top-recruit__lead p + p { margin-top: 22.4px; }
.top-recruit__btn { position: absolute; right: 58px; top: 372px; }

/* ---------- 先輩インタビュー（カード） ---------- */
.icards { padding: 0 73px 53px; }
.icards__row { display: grid; grid-template-columns: 549.8fr 553.2fr; column-gap: 31px; }
.icards__row + .icards__row { margin-top: 42px; }
.icard { position: relative; height: 456px; background: #480f0f; overflow: hidden; }
.icard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.icard__box { position: absolute; left: 0; bottom: 0; width: 337px; height: 208px; background: rgba(255,255,255,.9); }
.icard__title {
  position: absolute; left: 30px; top: calc(29px + (36px - var(--ts) * 1.2) / 2);
  font-size: var(--ts); line-height: 1.2; font-weight: 500; white-space: nowrap;
}
.icard__dept { position: absolute; left: 27px; top: 81px; font-size: 12px; line-height: 20.4px; white-space: nowrap; }
.icard__desc { position: absolute; left: 27px; top: 109.4px; width: 275px; font-size: 14px; line-height: 23.8px; font-weight: 500; }
.icard__links { position: absolute; left: 27px; top: 157px; display: flex; gap: 26px; }

/* ---------- 働きやすさ（4つのアイコン） ---------- */
.top-perks { background: var(--c-gray); height: 191px; }
/* 4つを横に並べて中央に。画面が狭くなっても重ならないように、アイコンと文字は横並びで間隔だけ縮める */
.perks { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 72px); height: 100%; padding: 0 30px; }
.perk { display: flex; align-items: center; gap: 16px; }
.perk__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 56px; }
.perk__icon svg { width: 100%; height: 100%; }
.perk__text { font-size: 20px; line-height: 24px; font-weight: 500; white-space: nowrap; }
.perk--1 .perk__icon svg { width: 38px; height: 56px; }
.perk--2 .perk__icon svg { width: 52px; height: 36px; }
.perk--3 .perk__icon svg { width: 46px; height: 42px; }
.perk--4 .perk__icon svg { width: 47px; height: 44px; }

/* ---------- Culture（ギャラリー） ---------- */
.top-culture { position: relative; height: 1321.6px; }
.top-culture__vline1 { top: 218px; height: 194px; }
.top-culture__vline2 { top: 889px; height: 194px; }
.top-culture__lead { position: absolute; left: 50%; top: 1110px; width: 618px; margin-left: -309px; text-align: center; font-size: 16px; line-height: 28.8px; }
.top-culture__btn { position: absolute; left: 50%; top: 1205px; translate: -50% 0; }

.gallery { --u: 1px; position: absolute; left: 39px; right: 39px; top: 303px; height: calc(680 * var(--u)); z-index: 1; }
/* 写真がゆっくり右から左へ流れ続ける（js/main.js が動かす）。同じ並びを2つつなげて切れ目なくループ。
   マウスでドラッグ・指でスワイプ・トラックパッドの横スクロールで、手で動かすこともできる */
.gallery__viewport { width: 100%; height: 100%; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.gallery.is-dragging .gallery__viewport { cursor: grabbing; }
.gallery__belt { display: flex; width: max-content; height: 100%; will-change: transform; }
.gallery__track { position: relative; flex: none; width: calc(var(--gw, 3042) * var(--u)); height: 100%; margin-right: calc(12 * var(--u)); }
.gallery img { -webkit-user-drag: none; pointer-events: none; }
.gallery__item {
  position: absolute; overflow: hidden;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
/* 乗せると少し暗くなり、中央に「＋」（クリック・タップで拡大） */
.gallery__item { cursor: pointer; }
.gallery__item img { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s;
  background: rgba(20,22,26,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='23' fill='%23fff'/%3E%3Cpath d='M24 15v18M15 24h18' stroke='%231f2226' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 50% 50% / 48px no-repeat;
}
.gallery__item:hover::after, .gallery__item:focus-visible::after { opacity: 1; }
.gallery__item:focus-visible { outline: 3px solid var(--c-red2); outline-offset: -3px; }

/* ---------- 療育方法（水色の帯） ---------- */
.top-method { padding-bottom: 48px; }
.top-method__band { position: relative; height: 850px; background: var(--c-teal-d); color: #fff; }
.top-method__logo { position: absolute; left: 50%; top: 157px; width: 206px; height: 206px; margin-left: -103px; object-fit: cover; }
.top-method__title { position: absolute; left: 50%; top: 374px; width: 824px; margin-left: -412px; text-align: center; font-size: 40px; line-height: 52px; font-weight: 500; }
.top-method__btn { position: absolute; left: 50%; top: 516px; translate: -50% 0; }
.top-method__note { position: absolute; left: 50%; top: 604px; width: 600px; margin-left: -300px; text-align: center; font-size: 14px; line-height: 25.2px; font-weight: 500; }

/* ==========================================================================
   スマホ
   ========================================================================== */
@media (max-width: 699px) {
  .top-hero { height: 296.2px; }
  .top-hero__slides { inset: 0 0 auto; height: 207px; }
  .top-hero__text { left: 0; top: 0; width: 320px; }
  .top-hero__title { left: 18px; top: 76px; width: 189px; font-size: 33px; line-height: 38.94px; }
  .top-hero__lead { left: 17px; top: 219px; width: 286px; font-size: 12px; line-height: 20.4px; text-align: center; }

  .top-recruit { background: none; padding: 0; height: 352px; position: relative; }
  .top-recruit__box { position: static; height: auto; background: none; overflow: visible; }
  .top-recruit__box::before { content: ""; position: absolute; left: 0; top: 0; width: 320px; height: 170px; background: #fff; }
  .top-recruit__bg { left: 0; top: 0; right: auto; bottom: auto; width: 320px; height: 170px; z-index: 1; }
  .top-recruit__slant { display: none; }
  .top-recruit__panel { left: 23px; right: auto; top: 140px; width: 280px; height: 169.9px; z-index: 2; }
  .top-recruit__title { right: auto; left: 25px; top: 16px; width: 232px; text-align: center; font-size: 16px; line-height: 25.6px; letter-spacing: .8px; }
  .top-recruit__title em { font-size: 17px; letter-spacing: .85px; }
  .top-recruit__lead { right: auto; left: -6px; top: 79.7px; width: 286px; text-align: center; font-size: 12px; line-height: 16.8px; }
  .top-recruit__lead p + p { margin-top: 16.8px; }
  .top-recruit__btn { right: auto; left: 50%; top: 166px; translate: -50% 0; }

  .icards { padding: 25px 0 13px; }
  .icards__row { display: block; }
  .icards__row + .icards__row { margin-top: 0; } /* カード同士の間隔をすべて同じに */
  .icard { height: auto; background: none; overflow: visible; margin-bottom: 14px; }
  .icard__img { position: relative; inset: auto; height: 250.6px; background: #480f0f; }
  .icard__box { position: relative; left: 20px; bottom: auto; width: 280px; height: auto; margin-top: -70px; padding: 22px 0 4px 23px; background: #fff; box-shadow: 0 14px 30px -18px rgba(0,0,0,.35); } /* 写真に重なる白いカード */
  .icard__title, .icard__dept, .icard__desc, .icard__links { position: static; }
  .icard__title { font-size: var(--ts-sp); }
  .icard__dept { margin-top: 12px; }
  .icard__desc { width: 235px; margin-top: 7.5px; font-size: var(--ds-sp); line-height: 1.7; }
  .icard__links { margin: 0; gap: 18px; }
  .icards__row:last-child .icard:last-child { margin-bottom: 28px; }

  .top-perks { height: auto; padding: 44px 0 40px; }
  .perks { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 0; padding: 0; }
  .perk { flex-direction: column; gap: 12px; }
  .perk__icon { width: 60px; height: 46px; }
  .perk__text { font-size: 14px; line-height: 16.8px; text-align: center; }
  .perk--1 .perk__icon svg { width: 60px; height: 44px; }
  .perk--2 .perk__icon svg { width: 50px; height: 45px; }
  .perk--3 .perk__icon svg { width: 40px; height: 45px; }
  .perk--4 .perk__icon svg { width: 45px; height: 39px; }

  .top-culture { height: 631px; }
  .top-culture .sec-head { height: 121.1px; }
  .top-culture .sec-head__title { top: 49px; width: 196px; margin-left: -98px; }
  .top-culture .sec-head__line { top: 59px; width: 135px; }
  .top-culture .sec-head__line--l { left: -35px; }
  .top-culture .sec-head__line--r { left: 220px; }
  .top-culture__vline1 { top: 108.1px; height: 332px; left: 159px; }
  .top-culture__vline2 { display: none; }
  .gallery { --u: .3853px; left: 0; right: 0; top: 143.1px; }
  .gallery__item::after { background-size: 32px; }
  .top-culture__lead { top: 452.1px; width: 280px; margin-left: -140px; font-size: 12px; line-height: 21.6px; }
  .top-culture__btn { top: 534px; }

  .top-method { padding-bottom: 0; }
  .top-method__band { height: 362px; }
  .top-method__logo { top: 52px; width: 96px; height: 96px; margin-left: -49px; }
  .top-method__title { top: 150px; width: 287px; margin-left: -144px; font-size: 14px; line-height: 18.2px; }
  .top-method__btn { top: 200px; }
  .top-method__note { top: 260px; width: 300px; margin-left: -150px; font-size: 10px; line-height: 18px; }
}

/* ---------- 水色の帯の上下の白い山形（元サイトの「区切り」デザイン） ---------- */
.divider { position: absolute; left: 0; right: 0; height: 140px; pointer-events: none; z-index: 0; }
.divider--top { top: -2px; transform: scaleY(-1); }
.divider--bottom { bottom: -2px; transform: scaleX(-1); } /* 2px はみ出させて、帯の端に水色の細い線が残らないように */
.divider span {
  position: absolute; left: -2px; right: -2px; height: 80px;
  background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 100 1920 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m0 300 503.884-200L1920 300H0z'/%3E%3C/svg%3E") 50% 100% / 100% 100% repeat-x;
}
.divider--bottom span { background-position: calc(50% - 5px) 100%; }
.divider span:nth-child(1) { top: 0; opacity: .25; }
.divider span:nth-child(2) { top: 20px; opacity: .333333; }
.divider span:nth-child(3) { top: 40px; opacity: .5; }
.divider span:nth-child(4) { top: 60px; height: 82px; opacity: 1; }
.top-method__band > :not(.divider) { z-index: 1; }
@media (max-width: 699px) {
  /* スマホも山形を表示（大きさを小さく）。中身は少し下げて重ならないように */
  .divider { height: 56px; }
  .divider span { height: 32px; }
  .divider span:nth-child(2) { top: 8px; } .divider span:nth-child(3) { top: 16px; }
  .divider span:nth-child(4) { top: 24px; height: 33px; }
}

/* ---------- スマホの文字サイズ（全ページ共通の基準）----------
   本文 11.5px ／ 補足 10〜11px ／ 小見出し・質問 13px ／ 見出し 16.5〜17px ／ ページの題 18px */
@media (max-width: 699px) {
  .top-hero__lead, .top-recruit__lead, .top-culture__lead { font-size: 11.5px; line-height: 1.8; }
  .top-recruit__lead p + p { margin-top: 1em; }
  .top-recruit__title { font-size: 15px; line-height: 1.6; }
  .top-recruit__title em { font-size: 16px; }
  .icard__title { font-size: 17px; }
  .icard__dept { font-size: 10px; letter-spacing: .02em; }
  .icard__desc { font-size: 11px; line-height: 1.75; }
  .perk__text { font-size: 12.5px; line-height: 1.4; }
  .top-method__title { font-size: 13px; line-height: 1.5; }
}

/* ---------- よくあるご質問（クリックで答えが開く） ---------- */
.top-faq { position: relative; padding-bottom: 40px; scroll-margin-top: 20px; }
.qa-list { max-width: 900px; margin: -30px auto 0; padding: 0 30px; }
.qa { border-bottom: 1px solid #e2e2e2; }
.qa:first-child { border-top: 1px solid #e2e2e2; }
.qa__q {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 30px; column-gap: 18px; align-items: center;
  padding: 22px 6px; cursor: pointer; list-style: none; font-size: 17px; line-height: 1.6; font-weight: 500;
  transition: color .3s;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { color: var(--c-red2); }
.qa__mark {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-red2); color: #fff; font-size: 16px; line-height: 1; font-weight: 500;
}
.qa__mark--a { background: #fff; color: var(--c-teal-d); box-shadow: inset 0 0 0 1px var(--c-teal-d); }
/* 右の「＋」。開くと「－」になる */
.qa__icon { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #cfcfcf; transition: background-color .3s, border-color .3s; }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: #333; transition: transform .35s cubic-bezier(.2,.8,.2,1), background-color .3s; }
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon { background: var(--c-red2); border-color: var(--c-red2); }
.qa[open] .qa__icon::before, .qa[open] .qa__icon::after { background: #fff; }
.qa[open] .qa__icon::after { transform: rotate(0deg); }
.qa__a {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; align-items: start;
  padding: 0 54px 26px 6px; font-size: 15px; line-height: 1.9;
}
.qa__a .qa__txt { padding-top: 6px; }
.qa__a p + p { margin-top: 1em; }
.qa[open] .qa__a { animation: k-qa .45s cubic-bezier(.2,.8,.2,1); }
@keyframes k-qa { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 699px) {
  .top-faq { padding-bottom: 24px; }
  .top-faq .sec-head { height: 100px; }
  .qa-list { margin: 0 20px; padding: 0; }
  .qa__q { grid-template-columns: 28px minmax(0, 1fr) 24px; column-gap: 10px; padding: 16px 0; font-size: 13px; }
  .qa__mark { width: 28px; height: 28px; font-size: 12px; }
  .qa__icon { width: 24px; height: 24px; }
  .qa__icon::before, .qa__icon::after { width: 9px; margin-left: -4.5px; }
  .qa__a { grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; padding: 0 0 18px; font-size: 11.5px; line-height: 1.8; }
  .qa__a .qa__txt { padding-top: 5px; }
}

/* ---------- 写真の拡大表示（js/main.js が作る） ---------- */
.lb { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: rgba(14,15,18,.92); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s; }
.lb.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lb__fig { position: absolute; inset: 9% 7% 12%; margin: 0; display: flex; align-items: center; justify-content: center; }
.lb__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); transition: opacity .25s; }
.lb.is-loading .lb__img { opacity: 0; }
.lb__btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); color: #fff; transition: background-color .3s, border-color .3s; }
.lb__btn:hover { background: var(--c-red2); border-color: var(--c-red2); }
.lb__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lb__close { top: 22px; right: 22px; }
.lb__prev { left: 22px; top: calc(50% - 26px); }
.lb__next { right: 22px; top: calc(50% - 26px); }
.lb__prev svg { transform: scaleX(-1); }
.lb__count { position: absolute; left: 0; right: 0; bottom: 22px; pointer-events: none; text-align: center; font-size: 13px; letter-spacing: .2em; color: rgba(255,255,255,.75); }
html.lb-open { overflow: hidden; }
@media (max-width: 699px) {
  .lb__fig { inset: 12% 3% 16%; }
  .lb__btn { width: 40px; height: 40px; }
  .lb__close { top: 12px; right: 12px; }
  .lb__prev { left: 8px; top: auto; bottom: 14px; }
  .lb__next { right: 8px; top: auto; bottom: 14px; }
  .lb__count { bottom: 26px; font-size: 11px; }
}