@charset "UTF-8";

/* ============================================================
   DiversCafe — static build
   Tokens
   ============================================================ */
:root{
  --navy:#163B72;
  --navy-deep:#002C53;
  --abyss:#0B2244;
  --gold:#D9A50E;
  --gold-dark:#BE8D07;
  --red:#FF6162;
  --orange:#FE963E;
  --green:#00A822;
  --blue:#007DE9;
  --blue-btn:#0072BA;

  --ink:#2F2F2F;
  --ink-soft:#555;
  --muted:#8A8A8A;
  --line:#D8D8D8;
  --bg:#FFF;

  --f-sans:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --f-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-script:"Great Vibes",cursive;

  --header-h:70px;
  --container:1000px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   Reset / base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 10px);-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-sans);
  font-size:15px;
  line-height:2;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
iframe{border:0;display:block}

:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--navy);color:#fff;padding:12px 20px;
}
.skip-link:focus{left:0}

.container{width:min(100% - 48px, var(--container));margin-inline:auto}
.container--narrow{width:min(100% - 48px, 800px)}

/* ============================================================
   Header
   ============================================================ */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.08);
  padding-top:env(safe-area-inset-top,0px);
}
.header__inner{
  width:min(100% - 40px, 1340px);margin-inline:auto;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.header__logo img{width:168px}

.nav__list{display:flex;align-items:center;gap:clamp(16px,2.6vw,46px)}
.nav__list a{
  font-size:clamp(14px,1vw,16px);letter-spacing:.04em;color:#4A4A4A;
  padding:8px 2px;position:relative;transition:color .25s var(--ease);
}
.nav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--navy);transform:scaleX(0);transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav__list a:hover{color:var(--navy)}
.nav__list a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__list a.is-current{color:var(--navy);font-weight:500}

.burger{display:none;width:40px;height:40px;position:relative;flex:0 0 auto}
.burger span{
  position:absolute;left:9px;width:22px;height:2px;background:var(--navy);
  transition:transform .3s var(--ease),opacity .2s;
}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============================================================
   Wave divider
   ============================================================ */
.wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0;pointer-events:none}
.wave svg{width:100%;height:clamp(40px,5.5vw,78px);display:block}
.wave .wave-fill{fill:#fff}
.wave .wave-line{fill:none;stroke:#fff;stroke-width:2.5;opacity:.85}
.wave--navy .wave-fill{fill:var(--navy)}
.wave--navy .wave-line{stroke:var(--navy)}
.wave--abyss .wave-fill{fill:var(--abyss)}
.wave--abyss .wave-line{stroke:var(--abyss)}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  min-height:clamp(540px,80vh,840px);
  margin-top:var(--header-h);
  display:flex;align-items:center;
  overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;
  background:url("../img/hero.webp") center 40%/cover no-repeat;
  transform:scale(1.06);
  animation:heroZoom 2.4s var(--ease) forwards;
}
@keyframes heroZoom{to{transform:scale(1)}}

.hero__inner{
  position:relative;z-index:2;
  width:min(100% - 48px, var(--container));margin-inline:auto;
  padding-bottom:6vh;
}
.hero__title{
  font-family:var(--f-script);
  font-weight:400;
  font-size:clamp(52px,8.2vw,112px);
  line-height:1.1;
  color:#fff;
  text-shadow:0 4px 18px rgba(0,30,60,.55);
  opacity:0;transform:translateY(22px);
  animation:heroIn 1.1s .25s var(--ease) forwards;
}
.hero__rule{
  display:block;width:72px;height:2px;background:#fff;
  margin:clamp(18px,3vw,34px) 0 clamp(14px,2vw,22px) 6px;
  transform-origin:left;transform:scaleX(0);
  animation:ruleIn .8s .75s var(--ease) forwards;
}
.hero__lead{
  font-family:var(--f-serif);
  font-size:clamp(14px,1.45vw,19px);
  line-height:1.9;letter-spacing:.06em;color:#fff;
  text-shadow:0 2px 10px rgba(0,30,60,.5);
  margin-left:6px;
  opacity:0;transform:translateY(16px);
  animation:heroIn 1s .95s var(--ease) forwards;
}
@keyframes heroIn{to{opacity:1;transform:translateY(0)}}
@keyframes ruleIn{to{transform:scaleX(1)}}

/* ============================================================
   Section heading
   ============================================================ */
.heading{
  font-family:var(--f-serif);
  font-weight:500;
  font-size:clamp(16.6px,1.95vw,23px);
  letter-spacing:.12em;
  text-align:center;
  display:flex;align-items:center;justify-content:center;gap:clamp(19px,1.4vw,23px);
  margin-bottom:clamp(44px,6vw,80px);
}
.heading::before,.heading::after{
  content:"";height:1px;width:clamp(65px,10vw,166px);background:currentColor;opacity:.55;
}
.heading--light{color:#fff}

/* ============================================================
   Statement
   ============================================================ */
.statement{
  position:relative;
  padding:clamp(70px,10vw,130px) 0 clamp(110px,14vw,190px);
  text-align:center;
}
.statement__vertical{
  writing-mode:vertical-rl;
  text-align:start;   /* 縦書きでは text-align が「縦方向の揃え」になるため、
                         親の center を継承すると各行の先頭がずれて落ちる */
  /* Google Fonts 版の Noto Serif JP は縦書きの字送り情報が欠けており、
     文字が重なって表示される。ここだけ OS 標準の明朝を優先する */
  font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,
              "Noto Serif CJK JP","Noto Serif JP",serif;
  font-size:clamp(15px,1.5vw,19px);
  letter-spacing:.34em;
  line-height:2.1;
  margin:0 auto clamp(46px,7vw,86px);
  padding-top:30px;
  position:relative;
}
.statement__vertical::after{
  content:"";position:absolute;top:4px;left:0;right:0;
  height:1px;background:var(--ink);
}
.statement__body p{
  font-size:clamp(13px,1.1vw,15px);
  color:var(--ink-soft);
  letter-spacing:.06em;
  margin-bottom:.4em;
}

/* ============================================================
   Switch — 他店から移りたい方へ
   ============================================================ */
.switch{
  position:relative;
  background:var(--abyss);
  color:#fff;
  padding:clamp(76px,10vw,136px) 0 clamp(110px,14vw,190px);
  text-align:center;
  overflow:hidden;
}
.switch::before{
  content:"";position:absolute;inset:0;
  background:url("../img/instagram-bg.webp") center 30%/cover no-repeat;
  opacity:.5;
}
.switch::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    var(--abyss) 0%,
    rgba(11,34,68,.90) 16%,
    rgba(11,34,68,.86) 55%,
    rgba(22,59,114,.96) 92%,
    var(--navy) 100%);
}
.switch > .container{position:relative;z-index:2}

.switch__head{
  font-family:var(--f-serif);
  font-weight:500;
  font-size:clamp(22px,3.4vw,40px);
  line-height:1.7;letter-spacing:.09em;
  margin-bottom:clamp(18px,2.6vw,30px);
  text-shadow:0 2px 20px rgba(0,14,32,.6);
}
.switch__sub{
  font-size:clamp(13px,1.3vw,16px);
  line-height:2.1;letter-spacing:.06em;
  color:rgba(255,255,255,.82);
  margin-bottom:clamp(44px,6vw,76px);
}

/* --- 悩みチェックリスト --- */
.pains{
  display:grid;gap:10px;
  max-width:680px;margin:0 auto clamp(56px,8vw,96px);
  text-align:left;
}
.pain{
  position:relative;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(2px);
  padding:15px 20px 15px 56px;
  font-size:clamp(13px,1.35vw,16px);
  letter-spacing:.05em;line-height:1.8;
}
.pain::before{
  content:"";position:absolute;left:20px;top:50%;
  width:17px;height:17px;margin-top:-9px;
  border:1.5px solid rgba(255,255,255,.55);
}
.pain::after{
  content:"";position:absolute;left:24px;top:50%;
  width:11px;height:6px;margin-top:-5px;
  border-left:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
  transform:rotate(-45deg);
  opacity:0;transition:opacity .4s var(--ease);
}
.pains.is-in .pain::after{opacity:1}
.pains.is-in .pain:nth-child(1)::after{transition-delay:.35s}
.pains.is-in .pain:nth-child(2)::after{transition-delay:.55s}
.pains.is-in .pain:nth-child(3)::after{transition-delay:.75s}
.pains.is-in .pain:nth-child(4)::after{transition-delay:.95s}
.pains.is-in .pain:nth-child(5)::after{transition-delay:1.15s}

/* --- 8割 --- */
.stat{margin-bottom:clamp(50px,7vw,86px)}
.stat__num{
  font-weight:700;
  font-size:clamp(66px,13vw,160px);
  line-height:1;letter-spacing:.01em;
  color:#fff;
  text-shadow:0 4px 30px rgba(0,14,32,.5);
}
.stat__num span{
  font-family:var(--f-serif);
  font-weight:500;
  font-size:clamp(20px,3.2vw,40px);
  letter-spacing:.06em;
  vertical-align:.32em;
  margin:0 .12em;
}
.stat__label{
  font-size:clamp(12px,1.25vw,15px);
  line-height:2.1;letter-spacing:.06em;
  color:rgba(255,255,255,.86);
  margin-top:1.4em;
}

/* --- オーナーの言葉 --- */
.voice{
  max-width:620px;margin:0 auto clamp(56px,8vw,96px);
  padding:clamp(24px,3.5vw,38px) clamp(20px,3vw,40px);
  border-top:1px solid rgba(255,255,255,.25);
  border-bottom:1px solid rgba(255,255,255,.25);
}
.voice p{
  font-family:var(--f-serif);
  font-size:clamp(13px,1.35vw,16px);
  line-height:2.2;letter-spacing:.06em;
  color:rgba(255,255,255,.95);
}
.voice cite{
  display:block;margin-top:1.4em;
  font-style:normal;font-size:11px;letter-spacing:.14em;
  color:rgba(255,255,255,.6);
}

/* --- バーの空気（写真ストリップ） --- */
.bar-strip{
  margin:0 0 clamp(50px,7vw,86px);
}
.bar-strip__row{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(8px,1.2vw,16px);
}
.bar-strip__row img{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 30px rgba(0,10,26,.35);
}
.bar-strip figcaption{
  margin-top:clamp(16px,2.2vw,24px);
  font-size:12px;line-height:2;letter-spacing:.06em;
  color:rgba(255,255,255,.72);
}

/* --- 3ステップ --- */
.flow{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,40px);
  text-align:left;
  margin-bottom:clamp(50px,7vw,86px);
}
.flow__item{
  border-top:2px solid var(--gold);
  padding-top:20px;
}
.flow__no{
  display:block;
  font-family:var(--f-serif);
  font-size:11px;letter-spacing:.16em;
  color:var(--gold);line-height:2;
}
.flow__title{
  font-family:var(--f-serif);
  font-weight:500;
  font-size:clamp(15px,1.55vw,19px);
  letter-spacing:.06em;line-height:1.8;
  margin:.3em 0 .7em;
}
.flow__item p{
  font-size:12.5px;line-height:2;
  color:rgba(255,255,255,.8);
}

/* --- CTA --- */
.switch__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.btn--lg{padding:15px 38px;font-size:14px;letter-spacing:.1em}
.btn--ghost{
  border:1px solid rgba(255,255,255,.6);color:#fff;
}
.btn--ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}

.br-sp{display:none}

@media (max-width:860px){
  .switch{padding-top:clamp(60px,9vw,90px)}
  .switch::before{background-attachment:scroll}
  .br-sp{display:inline}
  .pain{padding:13px 16px 13px 48px;font-size:13.5px}
  .pain::before{left:16px}
  .pain::after{left:20px}
  .flow{grid-template-columns:1fr;gap:26px}
  .bar-strip__row{
    display:flex;gap:10px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin-inline:-20px;padding-inline:20px;
    scrollbar-width:none;
  }
  .bar-strip__row::-webkit-scrollbar{display:none}
  .bar-strip__row img{flex:0 0 82%;scroll-snap-align:center}
  .switch__cta{flex-direction:column;align-items:stretch}
  .btn--lg{text-align:center}
}

/* ============================================================
   Course
   ============================================================ */
.course{
  position:relative;
  background:var(--navy);
  color:#fff;
  padding:clamp(70px,9vw,120px) 0 clamp(110px,14vw,190px);
}
.course__item{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.5vw,64px);
  align-items:center;
  margin-bottom:clamp(44px,6vw,80px);
}
.course__item:last-child{margin-bottom:0}
.course__item--reverse .course__media{order:2}
.course__media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.course__title{
  font-family:var(--f-serif);
  font-weight:500;
  font-size:clamp(16px,1.55vw,18px);
  letter-spacing:.08em;
  margin-bottom:1em;
}
.course__text p{
  font-size:14px;line-height:1.95;color:rgba(255,255,255,.88);
  margin-bottom:1.6em;
}

.btn{
  display:inline-block;
  font-size:13px;letter-spacing:.08em;
  padding:9px 26px;
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.btn--gold{background:var(--gold);color:#fff}
.btn--gold:hover{background:var(--gold-dark);transform:translateY(-2px)}
.btn--insta{
  background:var(--navy);color:#fff;padding:12px 34px;border-radius:999px;
}
.btn--insta:hover{background:var(--navy-deep);transform:translateY(-2px)}

/* ============================================================
   Price
   ============================================================ */
.price{padding:clamp(70px,9vw,120px) 0 clamp(70px,9vw,110px)}

.plan{
  --c:var(--red);
  margin-bottom:clamp(70px,7.9vw,149px);
  scroll-margin-top:calc(var(--header-h) + 20px);
}
.plan:last-child{margin-bottom:0}
/* コースとコースの区切り。現行サイトと同じ、ごく薄い点線（8px間隔）。
   左右10pxだけ内側に入る（現行サイトの実測は幅980px／コンテナ1000px） */
.plan:not(:last-child)::after{
  content:"";
  display:block;
  height:3px;
  margin:clamp(50px,6.3vw,120px) 10px 0;
  background-image:radial-gradient(circle, #DEDEDE 1.4px, transparent 1.5px);
  background-size:8px 3px;
  background-repeat:repeat-x;
}
.plan--red{--c:var(--red)}
.plan--orange{--c:var(--orange)}
.plan--green{--c:var(--green)}
.plan--blue{--c:var(--blue)}

.plan__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2.1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(8px,2vw,28px);
  margin-bottom:clamp(34px,5vw,58px);
}
/* シルエットは幅と高さの両方に上限を置く。
   幅だけで決めると、正方形の画像（1000x1000）や縦長の画像（367x1000）が
   他より大幅に大きく表示されてしまうため */
.plan__vector{
  width:auto;height:auto;
  max-width:var(--vec-w,208px);
  max-height:var(--vec-h,210px);
}
.plan__vector--l{justify-self:end}
.plan__vector--r{justify-self:start}
/* 極端に縦長のシルエット（367x1000など）は、高さを揃えると
   横幅が細くなって小さく見えるため、高さの上限を広げて釣り合わせる */
.plan__vector--tall{max-height:var(--vec-h-tall,230px)}

.plan__core{text-align:center}
/* 現行サイトのスマホ表示に合わせた改行位置（PC／タブレットでは改行しない） */
.br-sp{display:none}
.plan__badge{
  display:block;
  width:min(370px,100%);
  margin-inline:auto;
  background:var(--c);color:#fff;font-weight:700;
  font-size:clamp(11.9px,1.12vw,15px);
  letter-spacing:.08em;
  padding:9px 20px;border-radius:999px;
  line-height:1.8;
}
.plan__sub{
  font-weight:500;
  font-size:clamp(14.7px,1.2vw,16px);
  letter-spacing:.06em;
  margin-top:1.1em;
}
.plan__price{
  font-weight:700;
  font-size:clamp(59.5px,6.6vw,110px);
  line-height:1.1;letter-spacing:.01em;
  color:var(--c);
  margin:.18em 0 .3em;
}
/* 現行サイトでは「細い下線」＋その下に手描き風の色付きストローク */
.plan__lead{
  position:relative;
  display:inline-block;
  font-weight:700;
  font-size:clamp(14px,1.5vw,21px);
  letter-spacing:.04em;
  border-bottom:1px solid var(--ink);
  padding-bottom:5px;
}
.plan__lead::after{
  content:"";
  position:absolute;left:2%;right:2%;top:100%;margin-top:0;
  height:8px;
  background:var(--c);
  -webkit-mask:var(--stroke) center/100% 100% no-repeat;
  mask:var(--stroke) center/100% 100% no-repeat;
  --stroke:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M2 6.6 C40 2.4 72 1 112 2.6 C162 4.6 210 7.6 250 7 C270 6.7 286 5.8 298 4.8 L298 8.8 C286 10 269 11 249 11.4 C204 12 154 9.4 107 7.8 C70 6.6 37 6.8 2 10.4 Z' fill='black'/></svg>");
}

/* --- steps --- */
.steps{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:center;
  gap:8px;
  margin-bottom:clamp(34px,5vw,58px);
}
.steps__item{
  position:relative;
  border:1px solid #4A4A4A;
  border-radius:8px;
  padding:16px 8px;
  text-align:center;
  font-family:var(--f-serif);
  background:#fff;
}
.steps__no{display:block;font-weight:500;font-size:clamp(12.6px,1.25vw,15px);letter-spacing:.12em;line-height:1.9}
.steps__label{display:block;font-weight:500;font-size:clamp(15.4px,1.3vw,17px);letter-spacing:.06em;line-height:1.9}
/* 所要時間などの補足。現行サイトでは上に点線の区切りが入り、
   本文だけゴシック体になる */
.steps__note{
  display:block;position:relative;
  font-family:var(--f-sans);
  font-size:13px;color:var(--muted);line-height:1.8;
  margin-top:14px;padding-top:14px;
}
.steps__note::before{
  content:"";position:absolute;top:0;left:16%;right:16%;height:3px;
  background-image:radial-gradient(circle, #3A3A3A 1.3px, transparent 1.4px);
  background-size:8px 3px;
  background-repeat:repeat-x;
}

/* STEP間の手描き矢印。
   既定では下の静止SVGを表示し、Lottie が読み込めたら
   JS がアニメーションに差し替える（読み込めなければ静止画のまま） */
.steps__arrow{
  width:clamp(26px,2.4vw,40px);
  aspect-ratio:60/26;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 26'><g fill='none' stroke='%232F2F2F' stroke-width='1.6' stroke-linecap='round'><path d='M6 15 C14 4, 24 4, 29 11 C32 15, 28 20, 25 17 C22 14, 27 9, 34 11 C39 12.5, 44 14, 50 14'/><path d='M44 9.5 L51 14 L44 18.5'/></g></svg>") center/contain no-repeat;
}
.steps__arrow.is-lottie{background:none}
.steps__arrow svg{display:block;width:100%;height:100%}

/* --- includes --- */
.includes{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,70px);
  text-align:center;
}
.includes__title{
  font-family:var(--f-serif);
  font-weight:500;
  font-size:clamp(12px,1.2vw,16px);
  letter-spacing:.08em;
  padding-bottom:10px;
  border-bottom:1px solid var(--ink);
  margin-bottom:14px;
}
.includes p{font-size:clamp(12px,1.15vw,14px);line-height:1.95;color:var(--ink-soft)}

/* ============================================================
   Contact
   ============================================================ */
.contact{padding:clamp(70px,9vw,120px) 0 clamp(80px,10vw,130px);background:#FDFDFD}
.contact__note{
  text-align:center;font-size:clamp(13px,1.05vw,14px);color:var(--ink-soft);
  margin-bottom:clamp(34px,5vw,54px);margin-top:-2.4em;
}

.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form__field{margin-bottom:18px}
.form__field label{
  display:block;font-size:12px;letter-spacing:.06em;color:var(--ink-soft);
  margin-bottom:6px;line-height:1.8;
}
.req{
  display:inline-block;margin-left:8px;
  font-size:10px;letter-spacing:.08em;
  background:var(--red);color:#fff;
  padding:1px 7px;border-radius:2px;vertical-align:2px;
}
.form__field input,
.form__field select,
.form__field textarea{
  width:100%;
  font:inherit;font-size:15px;
  padding:11px 14px;
  border:1px solid var(--line);
  background:#fff;color:var(--ink);
  border-radius:2px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.form__field textarea{resize:vertical;line-height:1.8;min-height:170px}
.form__field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%23666' d='M6 8 0 0h12z'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:10px;
  padding-right:38px;
}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus{
  border-color:var(--blue-btn);
  box-shadow:0 0 0 3px rgba(0,114,186,.14);
  outline:none;
}
.form__field input[aria-invalid="true"],
.form__field textarea[aria-invalid="true"]{border-color:var(--red)}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__error{
  color:var(--red);font-size:13px;margin-bottom:14px;
}
.form__submit{
  width:100%;
  background:var(--blue-btn);color:#fff;
  font-size:14px;letter-spacing:.1em;
  padding:14px;border-radius:2px;
  transition:background-color .25s var(--ease);
}
.form__submit:hover{background:#005C96}
.form__submit[disabled]{opacity:.55;cursor:progress}

/* ============================================================
   Instagram
   ============================================================ */
.insta{
  position:relative;
  padding:clamp(70px,9vw,120px) 0 clamp(80px,10vw,130px);
  background:url("../img/instagram-bg.webp") center/cover no-repeat fixed;
}
.insta::before{
  content:"";position:absolute;inset:0;
  background:rgba(238,240,241,.86);
}
.insta > .container{position:relative;z-index:1}
.insta__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(6px,1vw,14px);
  max-width:760px;margin-inline:auto;
}
.insta__cell{display:block;overflow:hidden;background:#fff}
.insta__cell img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform .5s var(--ease),opacity .3s;
}
.insta__cell:hover img{transform:scale(1.06);opacity:.9}
.insta__cta{text-align:center;margin-top:clamp(26px,4vw,44px)}

/* ============================================================
   Cafe / Location
   ============================================================ */
.cafe{padding:clamp(70px,9vw,120px) 0 clamp(70px,9vw,110px)}
.cafe__intro,
.cafe__owner,
.location{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,70px);
  align-items:center;
  margin-bottom:clamp(44px,6.5vw,90px);
}
.location{margin-bottom:0;scroll-margin-top:calc(var(--header-h) + 20px)}
.cafe__title{
  font-family:var(--f-serif);
  font-weight:500;font-size:clamp(16px,1.6vw,20px);
  letter-spacing:.08em;margin-bottom:1.2em;
}
.cafe__text p{
  font-size:13px;line-height:2.1;color:var(--ink-soft);
  margin-bottom:1.5em;
}
.cafe__text p:last-child{margin-bottom:0}
.cafe__photo img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* slider */
.slider{position:relative}
.slider__track{position:relative;aspect-ratio:4/3;overflow:hidden}
.slider__slide{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--ease);
}
.slider__slide.is-active{opacity:1}
.slider__dots{display:flex;justify-content:center;gap:9px;margin-top:14px}
.slider__dot{
  flex:0 0 auto;            /* 縮んで歪むのを防ぐ */
  width:7px;height:7px;padding:0;   /* button の既定 padding が効くと楕円になる */
  border-radius:50%;
  background:#C9C9C9;transition:background-color .25s;
}
.slider__dot.is-active{background:var(--navy)}

.location__map iframe{width:100%;aspect-ratio:4/3}
.location__title{
  font-weight:700;font-size:clamp(15px,1.5vw,18px);
  letter-spacing:.08em;margin-bottom:1.4em;
}
.location__info p{
  font-family:var(--f-serif);
  font-size:13px;line-height:2.2;letter-spacing:.04em;color:var(--ink-soft);
}
.location__info a{text-decoration:underline;text-underline-offset:3px}
.location__caption{font-size:11px;color:var(--muted)}

.sns{display:flex;gap:12px;margin-top:22px}
.sns__link{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  transition:transform .25s var(--ease),opacity .25s;
}
.sns__link svg{width:16px;height:16px;fill:#fff}
.sns__link--fb{background:#1877F2}
.sns__link--ig{background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7)}
.sns__link:hover{transform:translateY(-3px);opacity:.9}


/* ============================================================
   Partners
   ============================================================ */
.partners{padding:clamp(60px,8vw,100px) 0 clamp(70px,9vw,120px);background:#FAFAFA}
.partners__list{
  --logo-h:clamp(70px,8vw,100px);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,44px);
  text-align:center;
}
.partner > a{
  display:flex;align-items:center;justify-content:center;
  height:var(--logo-h);margin-bottom:16px;
}
/* max-height:100% はグリッド／フレックス内で解決されないことがあるため、
   枠と同じ実寸を指定して確実に収める */
.partner img{
  max-height:var(--logo-h);
  max-width:min(100%, var(--logo-w, 100%));
  width:auto;height:auto;object-fit:contain;
  transition:opacity .25s;
}
.partner > a:hover img{opacity:.75}
.partner__name{font-size:clamp(13px,1.05vw,15px);font-weight:700;letter-spacing:.04em;line-height:1.7}
/* 「西神奈川ダイビング事業者安全協議会」（17文字）が1列ぶんの幅に収まるよう、
   PCでの上限を13px→12pxに下げている。1000px幅のコンテナ・4列・gap44pxで
   1列=217pxなので、17×12=204px で余裕をもって1行に収まる。
   auto-phrase は、幅が足りないときに「会」だけが次行へ落ちるのを避けるため
   （対応していないブラウザでは無視されるだけで害はない） */
.partner__role{
  font-size:clamp(11.7px,.9vw,12px);
  color:var(--muted);line-height:1.8;
  word-break:auto-phrase;
}

/* ============================================================
   Footer / page top
   ============================================================ */
.footer{
  background:var(--navy-deep);color:#fff;
  text-align:center;font-size:12px;letter-spacing:.06em;
  padding:18px 20px calc(18px + env(safe-area-inset-bottom,0px));
}

.pagetop{
  position:fixed;right:18px;
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  z-index:90;
  width:42px;height:42px;border-radius:50%;
  background:var(--navy);display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.pagetop svg{width:20px;height:20px;fill:#fff}
.pagetop.is-visible{opacity:.92;visibility:visible;transform:translateY(0)}
.pagetop:hover{opacity:1}

/* ============================================================
   Motion — reveal + float
   ============================================================ */
.js-reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  will-change:opacity,transform;
}
.js-reveal.is-in{opacity:1;transform:none}

.float{animation:floatY 6s ease-in-out infinite}
.float--delay{animation-duration:7.4s;animation-delay:-2.2s}
@keyframes floatY{
  0%,100%{transform:translateY(-9px)}
  50%{transform:translateY(9px)}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .nav__list{gap:18px}
  .nav__list a{font-size:13px}
  .header__logo img{width:148px}
}

@media (max-width:860px){
  :root{--header-h:62px}

  .burger{display:block}
  .nav{
    position:fixed;inset:calc(var(--header-h) + env(safe-area-inset-top,0px)) 0 0 0;
    background:rgba(22,59,114,.97);
    display:grid;place-items:center;
    opacity:0;visibility:hidden;
    transition:opacity .35s var(--ease),visibility .35s;
    overscroll-behavior:contain;
  }
  .nav.is-open{opacity:1;visibility:visible}
  .nav__list{flex-direction:column;gap:6px}
  .nav__list a{
    color:#fff;font-size:17px;letter-spacing:.1em;
    padding:14px 40px;display:block;
  }
  .nav__list a::after{display:none}

  .container,.container--narrow{width:calc(100% - 40px)}

  .hero{min-height:clamp(440px,74vh,620px)}
  .hero__lead{font-size:13px}

  .statement__vertical{letter-spacing:.28em}

  .course__item{grid-template-columns:1fr;gap:20px}
  .course__item--reverse .course__media{order:0}
  .course__text{text-align:left}

  /* 現行サイトと同じく、左右のシルエットでサブコピーを挟む。
     .plan__core を display:contents にして、中の4要素を
     .plan__head のグリッドへ直接並べている */
  /* 1列のグリッドにして、2行目へシルエット2点とサブコピーを重ねて置く。
     列を分けると、左右でシルエットの幅が違うプランでサブコピーが
     中央からずれてしまうため（現行サイトも左右の絵とは独立に中央寄せ） */
  .plan__head{
    grid-template-columns:minmax(0,1fr);
    align-items:center;
    gap:6px;
    /* タブレット幅でもシルエットがサブコピーから離れすぎないよう、
       この固まりの横幅に上限を置く */
    max-width:420px;
    margin:0 auto clamp(28px,4.5vw,46px);
  }
  .plan__core{display:contents}
  .plan__vector{--vec-w:84px;--vec-h:72px;--vec-h-tall:116px}
  .plan__vector--l{grid-row:2;grid-column:1;justify-self:start}
  .plan__vector--r{grid-row:2;grid-column:1;justify-self:end}
  /* 現行サイトのスマホ表示ではバッジが本文幅いっぱいに広がる */
  .plan__badge{grid-row:1;grid-column:1;justify-self:center;width:min(268px,100%);padding:5px 10px;margin-bottom:6px}
  .plan__sub{grid-row:2;grid-column:1;justify-self:center;margin-top:0}
  .br-sp{display:inline}
  .plan__price{grid-row:3;grid-column:1;margin:0}
  .plan__lead{grid-row:4;grid-column:1;justify-self:center;margin-top:4px}

  /* 現行サイトのスマホ表示に合わせ、STEPボックスは本文幅より狭く・角丸 */
  .steps{grid-template-columns:1fr;gap:20px;justify-items:center}
  .steps__item{width:min(232px,100%);padding:10px 8px}
  .steps__arrow{width:30px;margin:0 auto;transform:rotate(90deg)}

  .includes{gap:22px}

  .form__row{grid-template-columns:1fr;gap:0}

  .insta{background-attachment:scroll}
  .insta__grid{grid-template-columns:repeat(3,1fr)}

  .cafe__intro,.cafe__owner,.location{grid-template-columns:1fr;gap:26px}
  .cafe__owner .cafe__text{order:2}

  /* 1列。横長のロゴが幅いっぱいまで伸びないよう、幅にも上限を置く */
  .partners__list{
    --logo-h:clamp(96px,30vw,124px);
    --logo-w:clamp(200px,62vw,250px);
    grid-template-columns:1fr;gap:44px;
  }

}

@media (max-width:480px){
  body{font-size:14px}
  .header__logo img{width:132px}
  .hero__title{font-size:clamp(44px,13vw,64px)}
  .plan__vector{--vec-w:72px;--vec-h:60px;--vec-h-tall:60px}
  /* スノーケリングは左が縦長・右が横長で見た目の大きさが揃わないため、
     このプランだけ個別に寸法を指定して釣り合わせる */
  #plan-snorkel .plan__vector{--vec-w:56px;--vec-h:50px;--vec-h-tall:92px}
}

/* ============================================================
   Accessibility — reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js-reveal{opacity:1;transform:none}
  .hero__title,.hero__lead{opacity:1;transform:none}
  .hero__rule{transform:scaleX(1)}
  .hero__bg{transform:none}
}

/* ============================================================
   Print
   ============================================================ */
@media print{
  .header,.pagetop,.wave,.insta{display:none}
  .hero{min-height:auto;margin-top:0}
  .js-reveal{opacity:1;transform:none}
}

/* ============================================================
   reCAPTCHA
   ============================================================ */
/* 右下に出る固定バッジを隠す（現行サイトと同じ扱い）。
   Googleの利用規約では、バッジを隠す場合は規約の表記を出すことになっているが、
   現行サイトも表記なしで運用しており、吉田さんの判断でそれに合わせている。
   表記を戻す場合は、index.html の送信ボタンの下に <p class="form__recaptcha"> を置き、
   ここに .form__recaptcha のスタイルを足す */
.grecaptcha-badge{visibility:hidden}