@charset "UTF-8";
/* =========================================================
   一般社団法人大家支援アドバイザー認定協会
   style.css
   ---------------------------------------------------------
   Breakpoint : 768px  (768px以上=PCデザイン / 767px以下=SPデザイン)
   PC設計幅   : 1440px  /  コンテンツ幅 1300px・1080px
   SP設計幅   : 390px   /  左右余白 20px
   ========================================================= */

/* ---------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------- */
:root{
  --navy:        #203A5F;
  --green:       #2F7D31;   /* ロゴの緑 */
  --green-light: #37903B;   /* ホバー時の中心色 */
  --gold:        #CAA149;   /* ロゴの金（現状は未使用）*/
  --pale:        #EEF3FB;
  --cream:       #FBF6EA;
  --gray-bg:     #F7F7F7;
  --text:        #333333;
  --accent:      #1856AE;
  --badge-line:  #648BC3;
  --rule:        #D5DCE6;
  --rule-strong: #203A5F;
  --fv-veil:     rgba(223,236,254,.92);

  --font-ja: "IBM Plex Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-en: "Overpass", var(--font-ja);

  --w-wide:   1300px;
  --w-narrow: 1080px;
  --gutter:   50px;

  --sec-gap:  100px;   /* セクション間 上下 */
}

/* ---------------------------------------------------------
   2. Reset / base
   --------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:120px; }
body{
  margin:0;
  font-family:var(--font-ja);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  letter-spacing:0;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  text-size-adjust:100%;
}
h1,h2,h3,h4,p,figure,dl,dd,ol,ul{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img{ max-width:100%; height:auto; display:block; border:0; }
a{ color:inherit; text-decoration:none; transition:opacity .25s ease, background-color .25s ease; }
a:hover{ opacity:.7; }
/* キーボード操作時だけ、はっきりしたフォーカス枠を出す */
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
em{ font-style:normal; }
hr{ border:0; }

/* ---------------------------------------------------------
   3. Layout helpers
   --------------------------------------------------------- */
.container{
  width:min(var(--w-wide), 100% - var(--gutter) * 2);
  margin-inline:auto;
}
.container--narrow{ width:min(var(--w-narrow), 100% - var(--gutter) * 2); }

/* セクション見出し ------------------------------------------------ */
.sec-title{ display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.sec-title__en{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-en); font-weight:500;
  font-size:clamp(18px, 1.806vw, 26px);
  line-height:1;
}
.sec-title__mark{ width:clamp(16px, 1.389vw, 20px); height:auto; }
.sec-title__ja{
  font-weight:700; line-height:1.2;
  font-size:clamp(32px, 2.917vw, 42px);
}

/* ---------------------------------------------------------
   4. Header
   --------------------------------------------------------- */
.header{
  position:sticky; top:0; z-index:100;
  background:#fff;
  padding:18px var(--gutter) 17px;
  transition:box-shadow .3s ease, padding .3s ease;
}
/* スクロールすると影が付き、少しコンパクトになる */
.header.is-scrolled{
  box-shadow:0 2px 16px rgba(32,58,95,.10);
  padding-top:12px; padding-bottom:11px;
}
.header__inner{
  width:min(1340px, 100%);
  margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.header__logo{ display:flex; flex-direction:column; align-items:flex-start; }
.header__logo img{ width:clamp(180px, 17.22vw, 248px); }
.header__name{
  font-weight:600; line-height:1.7;
  font-size:clamp(14px, 1.25vw, 18px);
  white-space:nowrap;
}
.gnav__list{ display:flex; align-items:center; gap:clamp(20px, 2.778vw, 40px); }
.gnav__list a{
  position:relative; display:inline-block;
  padding-bottom:5px;
  font-weight:600; line-height:1.7;
  font-size:clamp(14px, 1.111vw, 16px);
  letter-spacing:.05em;
  white-space:nowrap;
  transition:color .3s ease;
}
/* 下線が左から伸びて、離すと右へ引っ込む */
.gnav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1.5px; background:var(--navy);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .4s cubic-bezier(.65,0,.35,1);
}
.gnav__list a:hover,
.gnav__list a:focus-visible{ opacity:1; color:var(--navy); }
.gnav__list a:hover::after,
.gnav__list a:focus-visible::after{ transform:scaleX(1); transform-origin:left center; }

.header__logo{ transition:opacity .3s ease; }
.header__logo:hover{ opacity:.75; }
.hamburger{ display:none; }

/* ---------------------------------------------------------
   5. FV
   --------------------------------------------------------- */
.fv{ position:relative; overflow:hidden; height:min(690px, 47.917vw); }
.fv__bg{ position:absolute; inset:0; }
.fv__photo{
  position:absolute; inset:0;
  background:url("../img/fv-bg.jpg") center/cover no-repeat;
  transform-origin:center center;
  animation:fv-zoom 28s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes fv-zoom{
  from{ transform:scale(1); }
  to  { transform:scale(1.09); }
}
.fv__veil{ position:absolute; inset:0; background:var(--fv-veil); }
.fv__blob{ position:absolute; border-radius:50%; }
.fv__blob--a{
  width:387px; height:387px; left:74.5%; top:65.4%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.85), rgba(233,242,255,0) 70%);
}
.fv__blob--b{
  width:552px; height:552px; left:-28.7%; top:-8%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.8), rgba(233,242,255,0) 70%);
}

.fv__inner{
  position:relative;
  width:min(1440px, 100%);
  height:100%;
  margin-inline:auto;
}
.fv__copy{ position:absolute; left:12.5%; top:23.77%; width:43.4%; }
.fv__lead{
  display:flex; align-items:flex-end; flex-wrap:nowrap;
  font-weight:700; line-height:1.5;
  font-size:clamp(18px, 2.639vw, 38px);
  letter-spacing:.03em;
}
.fv__lead > *{ flex:0 0 auto; white-space:nowrap; }
.fv__lead > :last-child{ margin-right:-.03em; }
.dotted{
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.dotted::before{
  content:"";
  display:block; width:85%; height:6px;
  background:radial-gradient(circle, var(--text) 0 2.5px, transparent 3px) 0 0 / 33.333% 100% repeat-x;
}
.dotted--4::before{ background-size:25% 100%; }
.dotted--3::before{ background-size:33.333% 100%; }
.fv__rule{ display:block; width:100%; height:min(16px, 1.111vw); margin-top:6px; }
.fv__rule path{ stroke-dasharray:700; }
.fv__title{
  margin-top:18px;
  font-weight:700; line-height:1.5;
  font-size:clamp(28px, 3.889vw, 56px);
  letter-spacing:.03em;
  text-indent:0;
}
.fv__title span{ display:block; }
.fv__title em{ color:var(--accent); }

.fv__collage{
  position:absolute; left:55.83%; top:12.46%;
  width:39.31%; height:80.29%;
}
/* 写真は書き出し時点で角丸マスク（半径7px相当）が焼き込まれているため、
   それより少し大きい8pxで切り抜いて白い角が出ないようにしている */
.fv__pic{ position:absolute; overflow:hidden; border-radius:8px; }
.fv__pic-in{ display:block; width:100%; height:100%; }
.fv__pic img{ width:100%; height:100%; object-fit:cover; }
.fv__pic--a{ left:12.54%; top:0;      width:87.46%; height:67.69%; }
/* 集合写真（--a）の座っている列が隠れないよう、当初の45.13%から少し下げている */
.fv__pic--b{ left:0;      top:57.00%; width:49.12%; height:35.74%; }
.fv__pic--c{ left:78.27%; top:70.40%; width:34.10%; height:29.60%; }

/* --- スクロール誘導 ------------------------------------------- */
.fv__scroll{
  position:absolute; left:50%; bottom:0;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  animation:fv-in 1s cubic-bezier(.22,.61,.36,1) 1.5s both;
}
.fv__scroll span{
  font-family:var(--font-en); font-weight:500;
  font-size:12px; letter-spacing:.18em;
  color:var(--navy);
  writing-mode:vertical-rl;
}
.fv__scroll i{
  display:block; width:1px; height:64px;
  background:rgba(32,58,95,.22);
  position:relative; overflow:hidden;
}
.fv__scroll i::after{
  content:""; position:absolute; inset:0;
  background:var(--navy);
  animation:fv-scroll-line 2.4s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes fv-scroll-line{
  0%        { transform:translateY(-100%); }
  55%, 100% { transform:translateY(100%); }
}

/* --- オープニング演出 ----------------------------------------- */
/* fill-mode:both で「遅延中は開始状態のまま」になるため、
   JSなしでも成立する。アニメーション非対応環境では通常表示。 */
@keyframes fv-in{
  from{ opacity:0; transform:translateY(22px); }
  to  { opacity:1; transform:none; }
}
@keyframes fv-pic-in{
  from{ opacity:0; transform:translateY(30px) scale(.965); }
  to  { opacity:1; transform:none; }
}
@keyframes fv-dots-in{
  from{ clip-path:inset(0 100% 0 0); }
  to  { clip-path:inset(0 0 0 0); }
}
@keyframes fv-rule-draw{
  from{ stroke-dashoffset:700; }
  to  { stroke-dashoffset:0; }
}

.fv-in{ animation:fv-in .9s cubic-bezier(.22,.61,.36,1) both; }
.fv-in--1{ animation-delay:.15s; }
.fv-in--2{ animation-delay:.55s; }
.fv-in--3{ animation-delay:.70s; }
.fv-in--4{ animation-delay:.85s; }

.dotted--4::before{ animation:fv-dots-in .48s steps(4) .50s both; }
.dotted--3::before{ animation:fv-dots-in .36s steps(3) .64s both; }
.fv__rule path{ animation:fv-rule-draw 1.1s ease .45s both; }

/* --- 写真の登場 ＋ ゆるやかな浮遊 ------------------------------ */
.fv__pic-in{ animation:fv-pic-in 1s cubic-bezier(.22,.61,.36,1) both; }
.fv__pic--a .fv__pic-in{ animation-delay:.45s; }
.fv__pic--b .fv__pic-in{ animation-delay:.62s; }
.fv__pic--c .fv__pic-in{ animation-delay:.79s; }

/* 3枚とも「静止位置（0）」から動き出す。開始値をずらすと、
   ディレイ明けにその差分だけカクッと飛んでしまうため。
   周期と振れ幅を変えることで、動きが揃わないようにしている。 */
@keyframes fv-float-a{ from{ transform:translateY(0); } to{ transform:translateY(-11px); } }
@keyframes fv-float-b{ from{ transform:translateY(0); } to{ transform:translateY(-8px);  } }
@keyframes fv-float-c{ from{ transform:translateY(0); } to{ transform:translateY(-7px);  } }
.fv__pic{ will-change:transform; }
.fv__pic--a{ animation:fv-float-a 7.0s ease-in-out 1.5s infinite alternate; }
.fv__pic--b{ animation:fv-float-b 8.6s ease-in-out 1.7s infinite alternate; }
.fv__pic--c{ animation:fv-float-c 6.2s ease-in-out 1.6s infinite alternate; }

/* ---------------------------------------------------------
   6. Message
   --------------------------------------------------------- */
.message{ padding-block:var(--sec-gap) 0; }
.message .sec-title{ margin-bottom:clamp(40px, 4.17vw, 60px); }

/* 代表者 */
.person{ position:relative; margin-bottom:clamp(40px, 4.17vw, 60px); }
.person__panel{
  position:absolute; top:0; right:0;
  width:62.5%; height:100%;
  background:var(--navy);
  border-radius:10px 0 0 10px;
}
.person__inner{
  position:relative;
  width:min(var(--w-wide), 100% - var(--gutter) * 2);
  margin-inline:auto;
  display:flex; align-items:flex-start; gap:2.3%;
  padding-block:40px;
}
.person__photo{ flex:0 0 46.15%; border-radius:10px; overflow:hidden; }
.person__photo img{ width:100%; aspect-ratio:600 / 500; object-fit:cover; object-position:center top; }
.person__body{ flex:0 0 51.55%; padding-top:clamp(24px, 6.74vw, 97px); color:#fff; }
.person__name{
  font-weight:700; line-height:1.7;
  font-size:clamp(24px, 2.431vw, 35px);
  display:flex; align-items:baseline; flex-wrap:wrap; gap:16px;
}
.person__name span{ font-size:clamp(14px, 1.25vw, 18px); }
.person__rule{ height:1px; background:rgba(255,255,255,.5); margin:clamp(16px, 2.08vw, 30px) 0; }
.person__titles{ display:flex; flex-direction:column; gap:8px; }
.person__titles li{ font-weight:500; line-height:1.7; font-size:clamp(14px, 1.25vw, 18px); }

/* カード */
.card{ border-radius:10px; padding:clamp(32px, 4.17vw, 60px) 24px; }
.card + .card{ margin-top:clamp(32px, 4.17vw, 60px); }
.card--blue{ background:var(--pale); }
.card--cream{ background:var(--cream); }
.card__inner{ max-width:800px; margin-inline:auto; }
.card__title{
  font-weight:700; line-height:1.7;
  font-size:clamp(22px, 2.222vw, 32px);
  margin-bottom:24px;
}
.card__list{ display:flex; flex-direction:column; gap:16px; }
.card__list li{
  position:relative; padding-left:1.5em;
  font-weight:500; line-height:1.7; font-size:clamp(15px, 1.25vw, 18px);
}
.card__list li::before{
  content:""; position:absolute; left:.45em; top:.72em;
  width:6px; height:6px; border-radius:50%; background:var(--text);
}
.card__text{ display:flex; flex-direction:column; gap:16px; }
.card__text p{ font-weight:500; line-height:2; font-size:clamp(15px, 1.25vw, 18px); }
.card__text > div > p + p{ margin-top:0; }

/* ---------------------------------------------------------
   7. Programs
   --------------------------------------------------------- */
.programs{
  margin-top:var(--sec-gap);
  background:var(--gray-bg);
  padding-block:clamp(64px, 8.33vw, 120px);
}
.programs .sec-title{ margin-bottom:clamp(40px, 4.17vw, 60px); }
.courses{ display:flex; flex-direction:column; gap:clamp(48px, 5.56vw, 80px); }
.course + .course{ border-top:1px solid var(--rule); padding-top:clamp(48px, 5.56vw, 80px); }

.course__head{ display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-bottom:16px; }
.course__name{
  position:relative; padding-left:26px;
  font-weight:700; line-height:1.7;
  font-size:clamp(21px, 2.222vw, 32px);
}
.course__name::before{
  content:""; position:absolute; left:0; top:.62em;
  width:10px; height:10px; border-radius:50%; background:var(--navy);
}
.course__by{
  position:relative; padding-left:68px;
  font-weight:500; line-height:1.7;
  font-size:clamp(15px, 1.389vw, 20px);
}
.course__by::before{
  content:""; position:absolute; left:0; top:50%;
  width:60px; height:1px; background:var(--text);
}
.course__body{ display:flex; align-items:flex-start; justify-content:space-between; gap:clamp(24px, 4.17vw, 60px); }
.course__shot{ flex:0 0 47.38%; border-radius:10px; overflow:hidden; }
.course__shot a{ display:block; }
.course__shot a:hover{ opacity:1; }
.course__shot img{ width:100%; transition:transform .5s ease; }
.course__shot a:hover img,
.course__shot a:focus-visible img{ transform:scale(1.04); }
.course__text{ flex:0 0 48%; }
.course__lead{
  font-weight:700; line-height:1.7;
  font-size:clamp(20px, 1.667vw, 24px);
  margin-bottom:10px;
}
.course__text p{ line-height:1.7; font-size:clamp(15px, 1.25vw, 18px); }
.course__text p + p{ margin-top:.4em; }

.btn{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  width:min(350px, 100%); height:70px; margin-top:20px;
  background:var(--navy); color:#fff;
  border-radius:50px;
  font-weight:700; font-size:clamp(17px, 1.389vw, 20px); letter-spacing:.05em;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
/* 中心からロゴの緑が円形に広がる（角が出ないよう円で拡大させる）*/
.btn::before{
  content:""; position:absolute; left:50%; top:50%; z-index:0;
  width:125%; aspect-ratio:1 / 1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--green-light) 0%, var(--green) 62%);
  transform:translate(-50%, -50%) scale(0);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.btn:hover, .btn:focus-visible{
  opacity:1;
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(47,125,49,.32);
}
.btn:hover::before,
.btn:focus-visible::before{ transform:translate(-50%, -50%) scale(1); }
.btn:active{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(47,125,49,.28); }

.btn__label{ position:relative; z-index:1; }

/* 矢印が右上へ抜け、代わりの矢印が左下から入ってくる */
.btn__arrow{
  position:absolute; right:20px; z-index:1;
  width:26px; height:26px; overflow:hidden;
}
.btn__arrow svg{
  position:absolute; left:0; top:0; width:26px; height:26px;
  transition:transform .45s cubic-bezier(.65,0,.35,1);
}
.btn__arrow svg:last-child{ transform:translate(-120%, 120%); }
.btn:hover .btn__arrow svg:first-child,
.btn:focus-visible .btn__arrow svg:first-child{ transform:translate(120%, -120%); }
.btn:hover .btn__arrow svg:last-child,
.btn:focus-visible .btn__arrow svg:last-child{ transform:translate(0, 0); }

/* ---------------------------------------------------------
   8. Photo band
   --------------------------------------------------------- */
.band{ margin-top:clamp(64px, 7.64vw, 110px); overflow:hidden; }
/* 同じ組み写真を2つ並べ、1つ分だけ左へ動かして無限ループさせる。
   トラック幅 = 2タイル分（max-content）なので、-50% でちょうど1タイル分進む。 */
.band__track{
  display:flex; width:max-content;
  will-change:transform;
  animation:band-scroll 85s linear infinite;
}
/* 写真6枚を並べるため、1タイルは画面幅の約1.46倍。高さは従来と同じ（33.6vw相当）*/
.band__inner{ position:relative; flex:0 0 auto; width:145.833vw; aspect-ratio:2100 / 484; }
@keyframes band-scroll{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}
.band__pic{ position:absolute; overflow:hidden; border-radius:14px; }
.band__pic img{ width:100%; height:100%; object-fit:cover; }
.band__pic--1{ left:0;       top:13.02%; width:17.48%; height:70.87%; z-index:3; }
.band__pic--2{ left:19.76%;  top:0;      width:15.14%; height:47.73%; z-index:1; }
.band__pic--3{ left:30.48%;  top:15.91%; width:22.24%; height:84.09%; z-index:2; }
.band__pic--4{ left:54.71%;  top:11.57%; width:12.76%; height:47.73%; z-index:1; }
.band__pic--5{ left:63.33%;  top:30.99%; width:19.05%; height:55.17%; z-index:2; }
.band__pic--6{ left:80.00%;  top:4.13%;  width:18.57%; height:53.72%; z-index:3; }

/* ---------------------------------------------------------
   9. About
   --------------------------------------------------------- */
.about{ padding-block:clamp(64px, 6.25vw, 90px) 0; }
.about .sec-title{ margin-bottom:clamp(40px, 4.17vw, 60px); }
.spec{ display:flex; flex-direction:column; }
.spec__row{
  display:flex; align-items:flex-start; gap:16px;
  padding:0 24px 30px;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.spec__row::after{
  content:""; position:absolute; left:0; bottom:-1px;
  width:244px; height:1px; background:var(--rule-strong);
}
.spec__row + .spec__row{ padding-top:30px; }
.spec dt{
  flex:0 0 220px;
  font-weight:600; line-height:1.7; font-size:clamp(15px, 1.25vw, 18px);
  color:var(--navy);
}
.spec dd{ flex:1 1 auto; min-width:0; line-height:1.7; font-size:clamp(15px, 1.25vw, 18px); }
.purpose{ display:flex; flex-direction:column; gap:10px; counter-reset:purpose; }
.purpose li{
  position:relative; padding-left:32px;
  counter-increment:purpose;
}
.purpose li::before{
  content:counter(purpose) "."; position:absolute; left:0; top:0;
  width:28px;
}

/* ---------------------------------------------------------
   10. Footer
   --------------------------------------------------------- */
.footer{
  margin-top:clamp(72px, 8.33vw, 120px);
  padding-block:clamp(48px, 5.28vw, 76px) clamp(48px, 5.56vw, 80px);
  background:linear-gradient(100deg, #E7ECF7 0%, #EEF1F8 30%, #F5F3F0 62%, #FBF6E7 100%);
}
.footer__inner{
  width:min(var(--w-narrow), 100% - var(--gutter) * 2);
  margin-inline:auto;
  text-align:center;
}
.footer__logo{ width:clamp(110px, 10.42vw, 150px); margin:0 auto 24px; }
.footer__name{
  font-weight:600; line-height:1.7;
  font-size:clamp(20px, 1.806vw, 26px);
  margin-bottom:clamp(40px, 4.86vw, 70px);
}
.footer__cols{
  display:flex; justify-content:center; gap:clamp(40px, 8.5vw, 122px);
  text-align:left;
}
.footer__col{ flex:0 0 auto; min-width:0; }
.footer__col h3{ font-weight:700; line-height:1.7; font-size:clamp(15px, 1.25vw, 18px); }
.footer__col p{ line-height:1.7; font-size:clamp(15px, 1.25vw, 18px); }
.footer__mail{ font-weight:600; font-size:clamp(18px, 1.528vw, 22px) !important; margin-top:4px; }
.footer__mail a{
  position:relative; display:inline-block;
  background-image:linear-gradient(var(--navy), var(--navy));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1.5px;
  transition:background-size .4s cubic-bezier(.65,0,.35,1), color .3s ease;
}
.footer__mail a:hover{ opacity:1; color:var(--navy); background-size:100% 1.5px; }
.footer__hours{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  margin-top:6px;
  font-size:clamp(13px, 1.111vw, 16px) !important;
}
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:76px; height:28px; padding:0 10px;
  border:2px solid var(--badge-line); border-radius:50px;
  color:var(--accent); font-weight:600; font-size:14px; line-height:1;
}

.copyright{ background:var(--text); padding:38px 20px; }
.copyright p{
  color:#fff; font-size:13px; line-height:30px; text-align:center;
}

/* ---------------------------------------------------------
   11. SP drawer
   --------------------------------------------------------- */
.spmenu{
  position:fixed; inset:0; z-index:200;
  background:linear-gradient(160deg, #EDF0F8 0%, #F2F2F6 45%, #F7F4EC 75%, #FAF7EA 100%);
  display:flex; flex-direction:column;
  opacity:0; transition:opacity .3s ease;
}
.spmenu[hidden]{ display:none !important; }
.spmenu.is-open{ opacity:1; }
.spmenu__bar{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:12px 20px; background:#fff;
}
.spmenu__logo{ display:flex; flex-direction:column; gap:5px; }
.spmenu__logo img{ width:166px; }
.spmenu__name{ font-weight:600; font-size:14px; line-height:1.3; }
.spmenu__close{ width:32px; height:32px; color:var(--text); }
.spmenu__close svg{ width:100%; height:100%; }
.spmenu__nav{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; }
.spmenu__nav ul{ display:flex; flex-direction:column; gap:38px; text-align:center; }
.spmenu__nav a{
  position:relative; display:inline-block; padding-bottom:6px;
  font-weight:600; font-size:17px; line-height:1.7;
}
.spmenu__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1.5px; background:var(--navy);
  transform:scaleX(0); transform-origin:center;
  transition:transform .35s cubic-bezier(.65,0,.35,1);
}
.spmenu__nav a:active::after{ transform:scaleX(1); }
body.is-locked{ overflow:hidden; }

/* ---------------------------------------------------------
   12. スクロール表示（ふわっと出るアニメーション）
   JSが動く環境でだけ隠す。JS無効でも内容は必ず表示される。
   --------------------------------------------------------- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1);
}
.js [data-reveal].is-visible{ opacity:1; transform:none; }

/* ---------------------------------------------------------
   13. ページトップへ戻るボタン
   --------------------------------------------------------- */
.totop{
  position:fixed; right:clamp(16px, 2.08vw, 30px); bottom:clamp(16px, 2.08vw, 30px);
  z-index:150;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  border-radius:50%;
  background:var(--navy); color:#fff;
  box-shadow:0 4px 16px rgba(32,58,95,.25);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease, background-color .25s ease;
}
.totop.is-shown{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:#2c4d7a; }
.totop svg{ width:24px; height:24px; }

/* =========================================================
   SP  (767px 以下)
   ========================================================= */
@media screen and (max-width:767px){
  :root{
    --gutter:20px;
    --sec-gap:80px;
  }
  html{ scroll-padding-top:100px; }
  body{ font-size:15px; }

  .container,
  .container--narrow{ width:calc(100% - var(--gutter) * 2); }

  /* 見出し */
  .sec-title{ gap:8px; }
  .sec-title__en{ gap:8px; font-size:18px; }
  .sec-title__mark{ width:16px; }
  .sec-title__ja{ font-size:32px; }

  /* Header */
  .header{ padding:12px 20px; }
  .header__logo img{ width:166px; }
  .header__name{
    font-size:14px; line-height:1.3; white-space:normal;
    margin-top:5px;
  }
  .gnav{ display:none; }
  .hamburger{
    display:flex; flex-direction:column; justify-content:space-between;
    width:32px; height:20px; flex:0 0 auto;
  }
  .hamburger span{ display:block; width:100%; height:1.5px; background:var(--text); border-radius:2px; }

  /* FV */
  .fv{ height:auto; min-height:750px; }
  .fv__inner{ height:auto; padding:80px 20px 0; }
  .fv__copy{ position:static; width:auto; }
  .fv__lead{ font-size:min(21px, 5.4vw); letter-spacing:.03em; }
  .fv__rule{ width:100%; height:12px; }
  .fv__title{
    margin-top:12px; font-size:min(37px, 9.4vw); letter-spacing:.03em;
    white-space:nowrap;
  }
  .fv__blob--a{ width:287px; height:287px; left:40.5%; top:74%; }
  .fv__blob--b{ width:261px; height:261px; left:-31.5%; top:-11%; }

  .fv__collage{
    position:relative; left:auto; top:auto;
    width:100%; height:auto; margin-top:44px; aspect-ratio:390 / 322;
  }
  /* SPは縦に余白が少ないため、スクロール誘導は出さない */
  .fv__scroll{ display:none; }
  .fv__pic{ border-radius:8px; }
  .fv__pic--a{ left:15.7%; top:0;     width:73.8%; height:67.7%; }
  .fv__pic--b{ left:0;     top:55.5%; width:41.5%; height:35.7%; }
  .fv__pic--c{ left:71.2%; top:70.5%; width:28.8%; height:29.6%; }

  /* Message */
  .message{ padding-top:var(--sec-gap); }
  .message .sec-title{ margin-bottom:24px; }

  .person{ margin-bottom:40px; }
  .person__panel{ width:100%; height:calc(100% - 150px); top:auto; bottom:0; border-radius:0; }
  .person__inner{
    display:block; width:100%; padding:0 0 40px;
  }
  .person__photo{ border-radius:0; }
  .person__photo img{ aspect-ratio:390 / 300; }
  .person__body{ padding:28px 20px 0; }
  .person__name{ font-size:22px; gap:10px; }
  .person__name span{ font-size:14px; }
  .person__rule{ margin:16px 0; }
  .person__titles li{ font-size:14px; }

  .card{ padding:32px 20px; border-radius:10px; }
  .card__title{ font-size:22px; margin-bottom:16px; }
  .card__list li,
  .card__text p{ font-size:15px; }
  .card__text p{ line-height:1.9; }

  /* Programs */
  .programs{ padding-block:90px 80px; }
  .programs .sec-title{ margin-bottom:50px; }
  .courses{ gap:60px; }
  .course + .course{ padding-top:60px; }

  .course__head{ display:block; margin-bottom:16px; }
  .course__name{ font-size:21px; padding-left:24px; }
  .course__name::before{ width:8px; height:8px; top:.7em; }
  .course__by{ margin-top:4px; padding-left:48px; font-size:17px; }
  .course__by::before{ width:40px; }

  .course__body{ display:block; }
  .course__shot{ margin-bottom:20px; }
  .course__text{ width:100%; }
  .course__lead{ font-size:20px; }
  .course__text p{ font-size:15px; }
  .btn{ width:100%; font-size:20px; }

  /* Band */
  .band{ margin-top:80px; }
  .band__track{ animation-duration:48s; }
  .band__inner{ width:150vw; aspect-ratio:585 / 286; }
  .band__pic{ border-radius:10px; }
  .band__pic--1{ left:0.85%;  top:48.95%; width:30.77%; height:46.50%; z-index:3; }
  .band__pic--2{ left:6.84%;  top:1.40%;  width:24.79%; height:36.71%; z-index:1; }
  .band__pic--3{ left:33.33%; top:6.29%;  width:36.75%; height:70.98%; z-index:2; }
  .band__pic--4{ left:71.79%; top:58.74%; width:19.66%; height:33.57%; z-index:1; }
  .band__pic--5{ left:68.38%; top:6.99%;  width:27.35%; height:37.41%; z-index:1; }
  .band__pic--6{ left:34.19%; top:61.19%; width:28.21%; height:36.71%; z-index:3; }

  /* About */
  .about{ padding-top:80px; }
  .about .sec-title{ margin-bottom:32px; }
  .spec__row{ display:block; padding:0 0 24px; }
  .spec__row + .spec__row{ padding-top:24px; }
  .spec__row::after{ width:120px; }
  .spec dt{ font-size:16px; margin-bottom:6px; }
  .spec dd{ font-size:15px; }
  .purpose li{ padding-left:28px; }
  .purpose li::before{ width:24px; }

  /* Footer */
  .footer{ margin-top:80px; padding-block:56px 64px; }
  .footer__inner{ width:calc(100% - 40px); }
  .footer__logo{ width:110px; margin-bottom:16px; }
  .footer__name{ font-size:20px; margin-bottom:40px; }
  .footer__cols{ display:block; }
  .footer__col + .footer__col{ margin-top:28px; }
  .footer__col h3{ font-size:16px; }
  .footer__mail{ font-size:19px !important; }
  .footer__hours{ font-size:14px !important; }

  .copyright{ padding:24px 20px; }
  .copyright p{ font-size:11px; line-height:1.8; }

  .totop{ width:48px; height:48px; }
  .totop svg{ width:20px; height:20px; }
}

/* =========================================================
   モーション配慮
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
  /* 動きを止める設定でも内容は必ず見えるようにする */
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .fv-in,
  .fv__pic-in,
  .fv__scroll{ opacity:1 !important; transform:none !important; }
  .fv__scroll{ transform:translateX(-50%) !important; }
  .dotted::before{ clip-path:none !important; }
  .fv__rule path{ stroke-dashoffset:0 !important; }
}