@charset "utf-8";
/* =========================================================
   38NEXT 公式サイト  共通スタイル
   デザイン方針: 現行 38next.com LP に合わせる
   ゴールド × シャンパン × クリーム、温かみのあるブラウンの文字
   フォント: 見出し Noto Serif JP ／ 本文 Noto Sans JP ／
             飾り英字 Cormorant Garamond ／ 筆記体 Great Vibes
   モバイルファースト
   ========================================================= */

:root{
  --gold:#B8922A;
  --gold-light:#D4AC48;
  --gold-btn:#C9A84C;
  --gold-deep:#7E6320;
  --champagne:#F5E6C8;
  --cream:#FDF8F2;
  --cream-2:#FFFFFF;
  --cream-warm:#FBF1E4;
  --pearl-pink:#F4C2C2;
  --mint:#A8DDD3;
  --brown-dark:#2E1F10;
  --brown-mid:#5C3D20;
  --brown-light:#8A6540;
  --espresso:#1E1208;

  --line:rgba(184,146,42,.20);
  --line-soft:rgba(184,146,42,.14);
  --shadow-gold:0 8px 24px rgba(184,146,42,.12);
  --shadow-gold-lg:0 18px 44px rgba(184,146,42,.20);

  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --display:"Cormorant Garamond","Noto Serif JP",serif;
  /* ロゴ／ワードマーク専用: 大文字ローマン体・数字はライニング数字で 3 8 が揃う */
  --brand:"Cinzel","Cormorant Garamond","Noto Serif JP",serif;

  --wrap:66rem;
  --nav-h:57px;
  --r-card:16px;
  --r-panel:22px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--brown-dark);
  /* 背景に極薄のグラデーション（沖縄の光・静けさ） */
  background-color:var(--cream);
  background-image:
    radial-gradient(120% 55% at 50% 0%, rgba(212,172,72,.055), transparent 60%),
    linear-gradient(180deg, #FDF8F2 0%, #FBF3E7 100%);
  background-attachment:fixed;
  line-height:1.85;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* 日本語は文節の途中で改行しない（スマホでの見苦しい折返しを防ぐ）。
     どうしても入らない時だけ字間で折る */
  word-break:keep-all;
  overflow-wrap:anywhere;
  line-break:strict;
  /* 数字は全て「ライニング数字」に統一（Cormorant の既定オールドスタイル数字だと
     3・5・7・9 が下、6・8 が上にずれて大文字と揃わないため） */
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

/* ---- 共通レイアウト ---- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:24px}
/* 余白は広め（静けさ）。ただしスマホで間延びしすぎない下限にする */
.section{padding-block:clamp(60px,11vw,116px)}
.section--tint{background:var(--cream-2);border-block:1px solid var(--line-soft)}

/* ---- 世界観ブロック（本文を差し替えやすいよう単純構造） ---- */
.worldview{text-align:center;padding-block:clamp(32px,5vw,54px)}
.worldview__rule{display:block;width:1px;height:clamp(26px,5vw,42px);margin:0 auto 16px;background:linear-gradient(180deg,transparent,var(--gold),transparent)}
.worldview__line{font-family:var(--serif);font-size:clamp(1rem,2.2vw,1.14rem);letter-spacing:.09em;line-height:2;color:var(--brown-mid);padding-inline:8px;text-wrap:pretty}

h1,h2,h3,h4{
  font-family:var(--serif);font-weight:500;line-height:1.6;color:var(--brown-dark);
  letter-spacing:.04em;word-break:keep-all;overflow-wrap:break-word;
}

.h-lg{font-size:clamp(1.55rem,4.6vw,2.35rem);line-height:1.55}
.h-md{font-size:clamp(1.3rem,3.6vw,1.9rem)}
.h-sm{font-size:clamp(1.08rem,2.6vw,1.28rem)}

.eyebrow{
  font-family:var(--display);
  font-size:.8rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);
  display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:40px;height:1px;flex:none;background:linear-gradient(to right,transparent,var(--gold))}

.lead{font-size:1rem;color:var(--brown-mid);line-height:2;max-width:34rem;text-wrap:pretty}

.sec-head{max-width:40rem;margin-bottom:clamp(40px,6vw,58px);text-align:center;margin-inline:auto}
.sec-head .eyebrow{justify-content:center}
.sec-head .eyebrow::after{content:"";width:40px;height:1px;flex:none;background:linear-gradient(to left,transparent,var(--gold))}
.sec-head .lead{margin-inline:auto}

/* ---- ボタン（ゴールドボーダー＋透過背景 → ホバーでゴールド塗り） ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;
  padding:.9rem 2.2rem;
  font-family:var(--sans);font-size:.92rem;font-weight:500;letter-spacing:.11em;
  border-radius:100px;
  border:1.5px solid var(--gold);
  background:transparent;
  color:var(--gold-deep);
  box-shadow:none;
  cursor:pointer;
  transition:transform .3s ease,box-shadow .3s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover{
  background:var(--gold);border-color:var(--gold);color:var(--espresso);
  transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(184,146,42,.55);
}
.btn--ghost{color:var(--brown-mid);border-color:rgba(184,146,42,.5)}
.btn--ghost:hover{background:var(--gold);border-color:var(--gold);color:var(--espresso)}
/* 濃い背景（CTA帯・メニューパネル）上 */
.section--dark .btn,.section--dark .btn--ghost,
.cta-band .btn,.cta-band .btn--ghost,
.site-nav__cta .btn{
  background:transparent;color:var(--champagne);border-color:rgba(212,172,72,.55);
}
.section--dark .btn:hover,.section--dark .btn--ghost:hover,
.cta-band .btn:hover,.cta-band .btn--ghost:hover,
.site-nav__cta .btn:hover{
  background:var(--gold-light);border-color:var(--gold-light);color:var(--espresso);
}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.text-center .btn-row,.sec-head + .btn-row{justify-content:center}

/* ---- ヘッダー ---- */
.site-header{
  position:sticky;top:0;z-index:100;
  height:var(--nav-h);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(184,146,42,.18);
}
.site-header__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:100%;
  max-width:74rem;margin:0 auto;padding-inline:24px;
}
.brand{display:flex;flex-direction:column;line-height:1;flex:none}
.brand__mark{font-family:var(--brand);font-size:1.34rem;font-weight:600;letter-spacing:.12em;color:var(--brown-dark);font-feature-settings:"lnum" 1;font-variant-numeric:lining-nums;white-space:nowrap}
.brand__sub{font-size:.56rem;letter-spacing:.32em;color:var(--gold);margin-top:5px}

.nav-toggle{
  display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:44px;height:44px;margin-right:-6px;background:none;border:none;cursor:pointer;flex:none;
}
.nav-toggle span{display:block;width:22px;height:2px;border-radius:2px;background:var(--brown-dark);transition:transform .3s ease,opacity .3s ease}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.site-nav{
  position:fixed;top:var(--nav-h);right:0;z-index:99;
  background:var(--espresso);color:var(--champagne);
  min-width:min(80vw,300px);
  max-height:calc(100vh - var(--nav-h));
  max-height:calc(100dvh - var(--nav-h));
  overflow-y:auto;
  border-bottom-left-radius:var(--r-panel);
  box-shadow:0 18px 44px rgba(0,0,0,.3);
  transform:translateY(-10px);opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.nav-open .site-nav{opacity:1;transform:translateY(0);pointer-events:auto}
.site-nav__list{display:flex;flex-direction:column;padding:22px 30px}
.site-nav__list > li > a{
  display:block;padding:11px 0;
  font-family:var(--display);font-size:.98rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(245,230,200,.9);
}
.site-nav__list > li > a:hover,.site-nav__list a[aria-current="page"]{color:var(--gold-light)}
.site-nav__sub{margin:2px 0 6px;padding-left:2px}
.site-nav__sub a{
  display:block;padding:10px 0;
  font-family:var(--serif);font-size:.9rem;letter-spacing:.03em;color:rgba(245,230,200,.7);
}
.site-nav__sub a::before{content:"・";color:var(--gold-light);margin-right:2px}
.site-nav__sub a:hover{color:var(--champagne)}
.site-nav__cta{padding:8px 30px 26px}
.site-nav__cta .btn{width:100%}

/* ---- ヒーロー ---- */
.hero{
  position:relative;
  padding-block:clamp(66px,13vw,124px);
  text-align:center;
  /* 767px以下: スマホ用（縦長）画像 */
  background:
    linear-gradient(180deg,rgba(253,248,242,.40) 0%,rgba(253,248,242,.20) 44%,rgba(251,241,228,.58) 100%),
    url("/images/hero-mobile.jpg");
  background-size:cover;
  background-position:center;
}
@media (min-width:768px){
  /* 768px以上: PC用（横長）画像 */
  .hero{
    background:
      linear-gradient(180deg,rgba(253,248,242,.34) 0%,rgba(253,248,242,.16) 44%,rgba(251,241,228,.52) 100%),
      url("/images/hero-desktop.jpg");
    background-size:cover;
    background-position:center;
  }
}
.hero__inner{max-width:44rem;margin-inline:auto}
.hero__pretitle{font-family:var(--serif);font-size:.8rem;letter-spacing:.24em;color:var(--brown-dark);margin-bottom:2px;text-shadow:0 1px 2px rgba(253,248,242,.98),0 0 12px rgba(253,248,242,.96),0 0 24px rgba(253,248,242,.85)}
.hero .eyebrow{justify-content:center}
.hero .eyebrow::before{background:linear-gradient(to right,transparent,var(--gold))}
.hero .eyebrow::after{content:"";width:40px;height:1px;flex:none;background:linear-gradient(to left,transparent,var(--gold))}
.hero h1{margin:6px 0 0;text-shadow:0 2px 4px rgba(253,248,242,.96),0 0 26px rgba(253,248,242,.92),0 0 50px rgba(253,248,242,.7)}
/* ヒーローの英語サブテキスト（世界観） */
.hero__en{margin-top:14px;font-family:var(--display);font-style:italic;font-size:clamp(.92rem,2vw,1.1rem);letter-spacing:.14em;color:var(--gold-deep);text-shadow:0 1px 2px rgba(253,248,242,.98),0 0 12px rgba(253,248,242,.96),0 0 26px rgba(253,248,242,.85)}
.hero .lead{
  margin:18px auto 0;color:var(--brown-dark);
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict;text-wrap:pretty;
  text-shadow:0 1px 2px rgba(253,248,242,.98),0 0 14px rgba(253,248,242,.95),0 0 30px rgba(253,248,242,.8);
}
.hero .btn-row{justify-content:center;margin-top:30px}

/* ---- カード ---- */
.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr}

.card{
  background:var(--cream-2);
  border:1px solid var(--line-soft);
  border-radius:var(--r-card);
  padding:30px 26px;
  box-shadow:var(--shadow-gold);
  transition:transform .3s ease,box-shadow .3s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-gold-lg)}
.card__num{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--gold-deep)}
.card h3{margin:10px 0 8px}
.card p{font-family:var(--serif);font-size:.95rem;color:var(--brown-mid);line-height:1.95}
.card__link{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:14px;padding-block:8px;
  font-family:var(--display);font-size:.9rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);
}
.card__link::after{content:"→";transition:transform .25s ease}
.card:hover .card__link::after{transform:translateX(4px)}

.pillar__icon{width:48px;height:48px;color:var(--gold);margin-bottom:6px}
.pillar__icon svg{width:100%;height:100%}

/* ---- 価格・情報テーブル（ラベル / 値の定義リスト風） ---- */
.price-table{width:100%;max-width:32rem;margin-inline:auto;border-collapse:collapse;font-size:.95rem}
.price-table caption{text-align:left;color:var(--brown-mid);font-size:.88rem;margin-bottom:12px}
.price-table th,.price-table td{text-align:left;padding:14px 0;border-bottom:1px solid var(--line-soft);vertical-align:top;overflow-wrap:anywhere}
.price-table th{font-family:var(--serif);font-weight:500;color:var(--brown-dark);width:1%;white-space:nowrap;padding-right:24px}
.price-table td.price{font-family:var(--display);font-size:1.2rem;font-weight:600;color:var(--gold-deep);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}

/* ---- ステップ ---- */
.steps{display:grid;max-width:40rem;margin-inline:auto}
.step{display:flex;gap:20px;padding-block:22px;border-bottom:1px solid var(--line-soft)}
.step:last-child{border-bottom:none}
.step__n{
  flex:none;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.15rem;font-weight:600;
  background:linear-gradient(135deg,var(--gold-btn),var(--gold-light));color:var(--espresso);
}
.step h3{font-size:1.05rem;margin-bottom:4px}
.step p{font-family:var(--serif);font-size:.93rem;color:var(--brown-mid)}

/* ---- FAQ ---- */
.faq{display:grid;gap:10px;max-width:40rem;margin-inline:auto}
.faq details{background:var(--cream-2);border:1px solid var(--line-soft);border-radius:var(--r-card);padding:2px 22px}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:18px 32px 18px 0;font-family:var(--serif);font-size:.98rem;color:var(--brown-dark)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:14px;font-size:1.4rem;color:var(--gold-deep);transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details .a{padding:0 0 20px;font-family:var(--serif);font-size:.92rem;color:var(--brown-mid);line-height:1.95}

/* ---- お客様の声 ---- */
.voice{background:var(--cream-2);border:1px solid var(--line-soft);border-radius:var(--r-card);padding:28px 26px;box-shadow:var(--shadow-gold)}
.voice::before{content:"✦";display:block;color:var(--gold);font-size:.9rem;margin-bottom:10px}
.voice p{font-family:var(--serif);font-size:.96rem;color:var(--brown-mid);line-height:2}
.voice cite{display:block;margin-top:14px;font-style:normal;font-size:.83rem;color:var(--brown-light);letter-spacing:.03em}

/* ---- ノート ---- */
.note-box{
  background:var(--cream-2);border:1px solid var(--line-soft);border-radius:var(--r-panel);
  padding:24px 26px;font-family:var(--serif);font-size:.97rem;color:var(--brown-mid);line-height:1.95;
  max-width:40rem;margin-inline:auto;
}
.note-box a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}

/* ---- CTA 帯 ---- */
.cta-band{
  background:linear-gradient(160deg,var(--espresso) 0%,#3A2713 100%);
  color:var(--champagne);text-align:center;
}
.cta-band .eyebrow{justify-content:center;color:var(--gold-light)}
.cta-band .eyebrow::before{background:linear-gradient(to right,transparent,var(--gold-light))}
.cta-band .eyebrow::after{content:"";width:40px;height:1px;flex:none;background:linear-gradient(to left,transparent,var(--gold-light))}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(245,230,200,.82);max-width:32rem;margin:14px auto 0;font-family:var(--serif);text-wrap:pretty}
.cta-band .cta-sign{margin-top:14px;font-family:var(--brand);font-size:.95rem;letter-spacing:.1em;text-indent:.1em;color:var(--gold-light);font-feature-settings:"lnum" 1;font-variant-numeric:lining-nums}
.cta-band .btn-row{justify-content:center;margin-top:28px}

/* ---- フッター ---- */
.site-footer{background:var(--espresso);color:var(--champagne);padding-block:56px 32px}
.site-footer__top{display:grid;gap:34px}
.site-footer__brand .brand__mark{color:#fff}
.site-footer__tagline{font-family:var(--display);font-size:.82rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-light);margin-top:12px}
.site-footer__brand p{font-family:var(--serif);font-size:.9rem;margin-top:14px;max-width:24rem;color:rgba(245,230,200,.8)}
.site-footer__col h4{font-family:var(--display);font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);margin-bottom:10px}
.site-footer__col a{display:block;padding:9px 0;font-size:.88rem;color:rgba(245,230,200,.78)}
.site-footer__col a:hover{color:#fff}
.site-footer__bottom{
  margin-top:42px;padding-top:24px;border-top:1px solid rgba(245,230,200,.12);
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  font-size:.77rem;color:rgba(245,230,200,.5);
}

/* ---- リビール（JS が無い環境では常に表示） ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}
html:not(.js) .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* =========================================================
   スマホ（〜600px）：長い英字ラベルの折返し・余白・文字を調整
   ========================================================= */
@media (max-width:600px){
  /* 見出し上の英字ラベル：飾り線を上に1本だけにして中央で折返し可に */
  .sec-head .eyebrow,.hero .eyebrow,.cta-band .eyebrow{
    display:block;text-align:center;letter-spacing:.18em;text-indent:.18em;font-size:.74rem;line-height:1.7;
  }
  .sec-head .eyebrow::before,.hero .eyebrow::before{
    display:block;width:28px;height:1px;margin:0 auto 10px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
  }
  .cta-band .eyebrow::before{
    display:block;width:28px;height:1px;margin:0 auto 10px;
    background:linear-gradient(90deg,transparent,var(--gold-light),transparent);
  }
  .sec-head .eyebrow::after,.hero .eyebrow::after,.cta-band .eyebrow::after{display:none}
  .worldview__line{letter-spacing:.06em}
  .hero__pretitle{letter-spacing:.16em}
  .hero__en{letter-spacing:.08em}
  .cta-band .cta-sign{letter-spacing:.06em;text-indent:.06em}
  /* スマホでは本文の行間をやや詰めて読みやすく */
  .lead,.cta-band p,.card p,.note-box{line-height:1.9}
}

/* スマホ（〜520px）：ボタンは縦積み・全幅 */
@media (max-width:520px){
  .btn-row{flex-direction:column;align-items:center}
  .btn-row .btn{width:100%;max-width:20rem}
}

/* スマホ微調整（〜430px） */
@media (max-width:430px){
  .wrap{padding-inline:20px}
  .site-header__bar{padding-inline:20px}
  .card{padding:26px 22px}
  .faq details{padding:2px 18px}
  .note-box{padding:22px 20px}
}

/* =========================================================
   タブレット（min-width:600px）
   ========================================================= */
@media (min-width:600px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
}

/* =========================================================
   デスクトップ（min-width:900px）
   ========================================================= */
@media (min-width:900px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}

  /* ナビは現行 LP と同じく全幅でハンバーガー式。パネルだけ少し広げる */
  .site-nav{min-width:min(60vw,340px)}

  .hero__inner{max-width:46rem}
  .site-footer__top{grid-template-columns:1.4fr 1fr 1fr 1fr}
}