@charset "UTF-8";
/* 齊藤 誠也が紐解くナチュラルワインの世界（live-20261203） */

:root{
  --paper:#F5F1E6;      /* 生成り */
  --white:#FCFBF7;
  --sand:#E7DECB;       /* ベージュ */
  --sage:#8C977C;       /* くすんだグリーン */
  --moss:#45533F;       /* 深い葉の緑 */
  --ink:#2E3428;        /* 本文 */
  --ink-soft:#5D6455;
  --line:#D6CCB6;
  --on-moss:#F7F4EC;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,"Noto Sans JP","Noto Sans CJK JP",sans-serif;
  --wrap:1080px;
  --gutter:clamp(20px,5vw,48px);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--gothic);font-size:16px;line-height:2;letter-spacing:.04em;line-break:strict;word-break:auto-phrase;font-feature-settings:"palt" 0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.nw{display:inline-block}            /* 意味のまとまりで改行させる */
.br-pc{display:none}
.sep::before{content:"\3000"}
@media (min-width:768px){.br-pc{display:inline}.br-sp{display:none}.sep{display:block}.sep::before{content:none}}

/* 見出し */
.h2{font-family:var(--mincho);font-weight:600;font-size:clamp(24px,3.4vw,34px);line-height:1.7;letter-spacing:.08em;margin:0 0 1.4em;color:var(--moss);text-wrap:balance}
.h2-en{display:block;font-family:var(--mincho);font-size:13px;letter-spacing:.2em;color:var(--sage);margin-bottom:.6em;font-weight:500}
.lead{font-family:var(--mincho);font-size:clamp(17px,2vw,20px);line-height:2.1;letter-spacing:.08em}
.body p+p{margin-top:1.2em}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.8em;min-height:60px;padding:0 2.4em;border-radius:0;background:var(--moss);color:var(--on-moss);text-decoration:none;font-weight:700;letter-spacing:.12em;font-size:16px;transition:background .25s}
.btn:hover{background:#36422F}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--sage);outline-offset:3px}
.btn small{font-weight:400;font-size:12px;opacity:.85;letter-spacing:.06em}

/* ── ファーストビュー（背景画像＋HTMLテキスト重ね） ──
   文字サイズ・字間は --u（背景画像の基準幅に対する1px）で指定し、画像と一緒に拡大縮小する
   PC：20261203_12.jpg（基準 1500×643）／スマホ：20261203_13.jpg（基準 1000×652） */
.hero{position:relative;width:100%;margin:0 auto;overflow:hidden;container-type:inline-size;line-height:1;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;font-feature-settings:normal}
.hero img{display:block;width:100%;height:auto}
.hero > *:not(img){position:absolute;margin:0;text-align:center;white-space:nowrap}
.hero .hero-school{color:#111111;font-weight:500;line-height:1}
.hero .hero-person-title{color:#666666}
.hero .hero-person-name{font-weight:600}
.hero .hero-person-copy{font-weight:500}
.hero .hero-main-title{color:#583300;font-weight:600}
.hero .hero-description{color:#111111;font-weight:600;line-height:1.55}
.hero .hero-lecturer{color:#ffffff}
.hero .hero-lecturer-label{font-weight:400}
.hero .hero-lecturer-name{font-weight:500}
.hero .hero-lecturer-cred{font-weight:500;letter-spacing:.02em}
.hero .hero-lecturer-cred sup{font-size:.6em;vertical-align:top;position:relative;top:-.1em;margin-left:.05em}

/* PC版（基準 1500×643） */
.hero--pc{max-width:1500px;--u:calc(100vw / 1500)}
@supports (width:1cqw){.hero--pc{--u:calc(100cqw / 1500)}}
.hero--pc .hero-school{left:23%;top:6.5%;width:28%;font-size:calc(25 * var(--u));letter-spacing:calc(4 * var(--u))}
.hero--pc .hero-person-title{left:23%;top:13%;width:29%}
.hero--pc .hero-person-name{font-size:calc(43 * var(--u));letter-spacing:calc(1 * var(--u))}
.hero--pc .hero-person-copy{font-size:calc(31 * var(--u));letter-spacing:0}
.hero--pc .hero-main-title{left:10%;top:24%;width:55%}
.hero--pc .hero-natural{font-size:calc(59 * var(--u));letter-spacing:calc(5 * var(--u))}
.hero--pc .hero-world{font-size:calc(48 * var(--u));letter-spacing:calc(1 * var(--u))}
.hero--pc .hero-description{left:18%;top:43%;width:39%;font-size:calc(27 * var(--u));letter-spacing:calc(1 * var(--u))}
.hero--pc .hero-lecturer{left:38%;top:79%;transform:translateX(-50%);text-shadow:0 2px 5px rgba(0,0,0,.45)}
.hero--pc .hero-lecturer-label{font-size:calc(23 * var(--u))}
.hero--pc .hero-lecturer-name{font-size:calc(30 * var(--u));margin-left:calc(18 * var(--u))}
.hero--pc .hero-lecturer-cred{font-size:calc(22 * var(--u));margin-left:calc(14 * var(--u))}

/* スマホ版（基準 1000×652） */
.hero--sp{display:none;max-width:1000px;--u:calc(100vw / 1000)}
@supports (width:1cqw){.hero--sp{--u:calc(100cqw / 1000)}}
.hero--sp .hero-school{left:21%;top:6.5%;width:35%;font-size:calc(21 * var(--u));letter-spacing:calc(3 * var(--u))}
.hero--sp .hero-person-title{left:20%;top:12%;width:37%}
.hero--sp .hero-person-name{font-size:calc(35 * var(--u));letter-spacing:calc(1 * var(--u))}
.hero--sp .hero-person-copy{font-size:calc(26 * var(--u));letter-spacing:0}
.hero--sp .hero-main-title{left:7%;top:20%;width:64%}
.hero--sp .hero-natural{font-size:calc(51 * var(--u));letter-spacing:calc(4 * var(--u))}
.hero--sp .hero-world{font-size:calc(42 * var(--u));letter-spacing:calc(1 * var(--u))}
.hero--sp .hero-description{left:13%;top:34%;width:48%;font-size:calc(22 * var(--u));letter-spacing:calc(.7 * var(--u))}
.hero--sp .hero-lecturer{left:38%;top:76%;transform:translateX(-50%);text-shadow:0 2px 5px rgba(0,0,0,.5)}
.hero--sp .hero-lecturer-label{font-size:calc(22 * var(--u))}
.hero--sp .hero-lecturer-name{font-size:calc(29 * var(--u));margin-left:calc(18 * var(--u))}
.hero--sp .hero-lecturer-cred{font-size:calc(21 * var(--u));margin-left:calc(13 * var(--u))}

@media (max-width:767px){
  .hero--pc{display:none}
  .hero--sp{display:block}
}

/* 開催情報バンド（演出なし・常時表示） */
.info{background:var(--moss);color:var(--on-moss)}
.info__in{display:grid;gap:22px;padding-block:34px}
.info dl{margin:0;display:grid;gap:14px}
.info dl>div{display:grid;grid-template-columns:5.5em 1fr;align-items:baseline;gap:8px}
.info dt{font-size:13px;letter-spacing:.14em;opacity:.75}
.info dd{margin:0;font-family:var(--mincho);font-size:18px;letter-spacing:.06em;line-height:1.6}
.info dd b{font-size:24px;font-weight:600;white-space:nowrap}
.info .d-year{font-size:.8em}
.info .d-num{font-size:1.2em}
.info .d-unit{font-size:.8em}
.info .d-tax{font-size:.8em}
.info .btn{background:var(--paper);color:var(--moss);width:100%}
.info .btn:hover{background:#fff}
@media (min-width:900px){
  .info__in{padding-block:40px}
  .info dl{grid-template-columns:auto auto auto;justify-content:start;gap:40px}
  .info dd{white-space:nowrap}
  .info dl>div{grid-template-columns:auto;gap:2px}
  .info .btn{width:auto;justify-self:start;white-space:nowrap}
}
@media (min-width:1100px){
  .info__in{grid-template-columns:1fr auto;align-items:center}
}

/* セクション共通 */
.sec{padding-block:clamp(80px,12vw,140px)}
.sec--white{background:var(--white)}
.sec--sand{background:var(--sand)}

/* リード（サブキャッチ） */
.intro-lead{text-align:center}
.intro-lead .lead{font-size:clamp(17px,2.3vw,22px)}
.intro-lead .lead strong{font-weight:600;color:var(--moss)}

/* 導入 */
.split{display:grid;gap:44px;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:72px}.split--rev .split__media{order:-1}}
.split__media{margin:0}
.split__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.split__media img.intro-photo{object-position:72% 60%}
.q{font-family:var(--mincho);font-weight:600;font-size:clamp(24px,3.6vw,36px);line-height:1.7;letter-spacing:.06em;color:var(--moss);margin:0 0 1.2em}

/* 写真の帯 */
.band{height:clamp(240px,42vw,520px);overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover}

/* 講座プログラム */
.program__head{max-width:720px}
.steps{list-style:none;margin:56px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:3.2em 1fr;gap:12px 20px;padding:32px 0;border-bottom:1px solid var(--line)}
.step__no{font-family:var(--mincho);font-size:30px;line-height:1.2;color:var(--sage);font-weight:500}
.step h3{font-family:var(--mincho);font-weight:600;font-size:20px;letter-spacing:.08em;margin:0 0 .4em;color:var(--moss);line-height:1.6}
@media (max-width:899px){.step>p{grid-column:2}}
@media (min-width:900px){.step{grid-template-columns:5em 16em 1fr;align-items:baseline;padding:40px 0}.step h3{margin:0}}
.program__close{margin-top:56px;font-family:var(--mincho);font-size:clamp(18px,2.2vw,22px);line-height:2;letter-spacing:.06em;color:var(--moss);text-align:center}

/* こんな方におすすめ */
.recommend{display:grid;gap:40px}
@media (min-width:900px){.recommend{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:72px;align-items:start}}
.level{border:1px solid var(--line);border-radius:4px;padding:28px 28px 30px;background:var(--paper)}
.level__label{font-size:13px;letter-spacing:.14em;color:var(--sage);margin-bottom:.4em}
.level__val{font-family:var(--mincho);font-size:19px;line-height:1.8;color:var(--moss);font-weight:600}
.checks{list-style:none;margin:0;padding:0}
.checks li{position:relative;padding:20px 0 20px 2.2em;border-bottom:1px dashed var(--line);line-height:1.9}
.checks li:first-child{border-top:1px dashed var(--line)}
.checks li::before{content:"";position:absolute;left:.2em;top:1.55em;width:1.05em;height:.6em;border-left:2px solid var(--sage);border-bottom:2px solid var(--sage);transform:rotate(-45deg)}

/* 講座でお届けするもの */
.kit{position:relative;background:var(--white)}
.kit__photo img{width:100%;height:clamp(260px,52vw,420px);object-fit:cover;object-position:20% 50%}
.kit__body{padding:48px var(--gutter) 0;max-width:var(--wrap);margin-inline:auto}
@media (min-width:900px){
  .kit{min-height:640px;display:flex;align-items:center}
  .kit__photo{position:absolute;inset:0}
  .kit__photo img{height:100%;object-position:0% 50%}
  .kit__body{position:relative;width:100%;padding:0 var(--gutter);display:flex;justify-content:flex-end}
  .kit__card{width:min(480px,46%);background:rgba(252,251,247,.9);backdrop-filter:blur(4px);padding:52px 48px;border-radius:4px}
}
.kit__items{list-style:none;margin:0;padding:0}
.kit__items li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font-family:var(--mincho);font-size:19px;color:var(--moss);font-weight:600}
.kit__items li span{font-family:var(--gothic);font-size:14px;color:var(--ink-soft);font-weight:400}
.kit__note{margin-top:20px;font-size:14px;color:var(--ink-soft);line-height:1.9}

/* テイスティングワイン */
.sec--wines{padding-top:clamp(64px,9vw,110px)}
#wines-title{font-weight:400;font-size:clamp(20px,2.6vw,26px)}
.wines-photo{margin:8px 0 0}
.wines-photo img{width:100%;height:auto;border-radius:4px}
.wines-photo figcaption{margin-top:8px;font-size:12px;line-height:1.6;color:var(--ink-soft);text-align:right}

/* 講師からのコメント */
.comment__quote{font-family:var(--mincho);font-size:clamp(16px,1.8vw,18px);line-height:2.3;letter-spacing:.06em;margin:0}
.comment__quote p+p{margin-top:1.4em}
.comment__sign{margin-top:28px;font-size:14px;color:var(--ink-soft);letter-spacing:.1em}
.comment .split__media img{aspect-ratio:3/4}

/* 講師紹介 */
.profile{display:grid;gap:40px}
@media (min-width:900px){.profile{grid-template-columns:300px 1fr;gap:64px;align-items:start}}
.profile__photo img{width:100%;max-width:300px;aspect-ratio:1/1.08;object-fit:cover;border-radius:4px}
.profile__name{font-family:var(--mincho);font-size:30px;font-weight:600;letter-spacing:.14em;color:var(--moss);margin:0;line-height:1.5}
.profile__roman{font-family:var(--mincho);font-size:15px;color:var(--sage);letter-spacing:.12em;margin-bottom:22px}
.creds{list-style:none;margin:0 0 28px;padding:16px 0;border-block:1px solid var(--line);font-size:14px;line-height:2}

/* 開催概要 */
.overview{max-width:840px;margin-inline:auto}
.ov-table{width:100%;border-collapse:collapse;font-size:15px}
.ov-table th,.ov-table td{padding:20px 0;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;line-height:1.9}
.ov-table tr:first-child th,.ov-table tr:first-child td{border-top:1px solid var(--line)}
.ov-table th{width:8.5em;font-weight:500;color:var(--sage);letter-spacing:.12em;font-size:14px;padding-right:1em}
.ov-table td strong{font-family:var(--mincho);font-size:19px;font-weight:600;color:var(--moss)}
@media (max-width:599px){.ov-table th,.ov-table td{display:block;width:auto;border:0;padding:0}.ov-table th{padding-top:18px}.ov-table td{padding:4px 0 18px;border-bottom:1px solid var(--line)}.ov-table tr:first-child th{border-top:1px solid var(--line)}.ov-table tr:first-child td{border-top:0}}
.notes{margin-top:48px;background:var(--paper);border-radius:4px;padding:28px clamp(22px,4vw,40px)}
.notes h3{font-family:var(--mincho);font-size:18px;color:var(--moss);margin:0 0 .8em;letter-spacing:.08em}
.notes ul{margin:0;padding-left:1.2em;font-size:14px;line-height:2}
.notes li+li{margin-top:.5em}
.cta-center{text-align:center;margin-top:56px}

/* クロージング */
.closing{position:relative;min-height:clamp(480px,70vw,720px);display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden}
.closing img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.closing::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,42,30,.15),rgba(35,42,30,.55))}
.closing__in{position:relative;z-index:1;padding:80px var(--gutter)}
.closing__text{font-family:var(--mincho);font-weight:600;font-size:clamp(24px,3.6vw,38px);line-height:1.8;letter-spacing:.1em;margin-bottom:40px;text-shadow:0 1px 18px rgba(0,0,0,.25)}
.closing .btn{background:var(--paper);color:var(--moss)}

.footer{padding:40px var(--gutter) 120px;text-align:center;font-size:12px;color:var(--ink-soft)}
@media (min-width:900px){.footer{padding-bottom:40px}}
.footer__school{margin-bottom:20px;font-size:13px;line-height:1.9}
.footer__name{font-family:var(--mincho);font-size:15px;font-weight:600;color:var(--moss);letter-spacing:.08em}
.footer__school a{color:inherit;text-underline-offset:3px}

/* 追従申込ボタン */
.fixed-cta{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(245,241,230,.94);backdrop-filter:blur(6px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s}
.fixed-cta.is-show{transform:none}
.fixed-cta .btn{width:100%;min-height:54px}
@media (min-width:900px){
  .fixed-cta{left:auto;right:28px;bottom:28px;background:none;border:0;padding:0;backdrop-filter:none}
  .fixed-cta .btn{width:auto;box-shadow:0 8px 24px rgba(46,52,40,.22)}
}

/* フェードアップ（JS有効かつ動きを減らす設定でない場合のみ） */
.reveal-on [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal-on [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal-on [data-reveal]{opacity:1;transform:none;transition:none}
  .fixed-cta{transition:none}
}

/* === /lpc/ 注文フォーム連携（本番化で追記） === */
#orderForm{line-height:1.75;letter-spacing:normal;word-break:normal;line-break:auto;font-feature-settings:normal}
:where(#orderForm),:where(#orderForm) *,:where(#orderForm) *::before,:where(#orderForm) *::after{box-sizing:revert}
:where(#orderForm) img{display:revert;max-width:revert}
:where(#orderForm) a{color:revert}
:where(#orderForm) p{margin:revert}
.lp-amazonpay{text-align:center;padding:30px 20px;background:#fff}
.lp-amazonpay p{font-size:15px;color:#555;margin:0 0 14px;letter-spacing:normal}
.lp-amazonpay a{display:inline-block;background:#f0c14b;color:#111;font-weight:bold;font-size:16px;padding:14px 32px;border-radius:8px;text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.12);letter-spacing:normal}