@charset "UTF-8";
/* ==========================================================================
   Claude Code 勉強会 LP
   構成: 1) 変数 / 2) ベース / 3) 背景 / 4) 共通パーツ
        5) ヒーロー / 6) 各セクション / 7) アニメーション / 8) レスポンシブ
   ========================================================================== */

/* ---------- 1. 変数（色・余白・角丸はここを変えれば全体に効きます） ---------- */
:root{
  /* 文字色 */
  --ink:        #21232c;
  --ink-soft:   #5a5f70;
  --ink-mute:   #63687a;   /* 小さい文字でもコントラストを確保 */
  /* 背景・パネル */
  --paper:      #f3f1ec;
  --panel:      rgba(255,255,255,.72);
  --panel-solid:#ffffff;
  --line:       rgba(33,35,44,.10);
  /* アクセント（Claudeを思わせる温かいオレンジ ＋ 未来感のあるブルー） */
  --accent:     #d9714e;
  --accent-2:   #6668cf;
  --accent-3:   #56b6a4;
  /* レイアウト */
  --maxw:       880px;
  --radius:     28px;
  --pad-sec:    clamp(76px, 13vw, 150px);
  /* フォント */
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
               "Yu Gothic", Meiryo, sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP",
                "Times New Roman", serif;
  --font-en: "Helvetica Neue", Arial, "Segoe UI", sans-serif;
  /* スクロール進捗 0 → 1（JSが更新。背景の変化に使用） */
  --sp: 0;
}

/* ---------- 2. ベース ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.95;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,p,ul,ol,figure,blockquote{ margin:0; padding:0; }
ul,ol{ list-style:none; }
a{ color:inherit; }
b,strong{ font-weight:700; }
em{ font-style:normal; }
::selection{ background:rgba(217,113,78,.22); }

/* キーボードフォーカスを見やすく */
a:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:4px;
  border-radius:6px;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:#fff; padding:12px 18px; border-radius:0 0 12px 0; font-size:14px;
}
.skip-link:focus{ left:0; }

/* ---------- 3. 固定背景（奥行きの土台） ---------- */
.bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.bg__base{
  position:absolute; inset:-10%;
  background:
    radial-gradient(120% 80% at 50% -10%, #fdfcfa 0%, #f4f2ed 45%, #eceae5 100%);
}
/* ぼんやり光る球体。ゆっくり漂い、スクロール量(--sp)でも少し動きます */
.bg__orb{
  position:absolute; border-radius:50%;
  filter:blur(70px);
  opacity:.5;
  will-change:transform;
}
.bg__orb--1{
  width:56vw; height:56vw; left:-14vw; top:-8vw;
  background:radial-gradient(circle at 35% 35%, rgba(217,113,78,.55), rgba(217,113,78,0) 70%);
  transform:translate3d(0, calc(var(--sp) * -90px), 0);
  animation:drift1 24s ease-in-out infinite alternate;
}
.bg__orb--2{
  width:60vw; height:60vw; right:-18vw; top:18vh;
  background:radial-gradient(circle at 60% 40%, rgba(102,104,207,.42), rgba(102,104,207,0) 70%);
  transform:translate3d(0, calc(var(--sp) * 140px), 0);
  animation:drift2 30s ease-in-out infinite alternate;
}
.bg__orb--3{
  width:52vw; height:52vw; left:2vw; bottom:-16vw;
  background:radial-gradient(circle at 50% 50%, rgba(86,182,164,.38), rgba(86,182,164,0) 70%);
  transform:translate3d(0, calc(var(--sp) * -120px), 0);
  animation:drift3 27s ease-in-out infinite alternate;
}
.bg__orb--4{
  width:38vw; height:38vw; right:6vw; bottom:6vh;
  background:radial-gradient(circle at 50% 50%, rgba(255,196,140,.42), rgba(255,196,140,0) 70%);
  transform:translate3d(0, calc(var(--sp) * -60px), 0);
  animation:drift1 21s ease-in-out infinite alternate-reverse;
}
/* うっすらした方眼（未来感の隠し味） */
.bg__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(33,35,44,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33,35,44,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 60% at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 40%, #000 0%, transparent 78%);
  opacity:.55;
}
/* 紙のようなノイズ（外部画像を使わず SVG で軽量に） */
.bg__noise{
  position:absolute; inset:0; opacity:.30; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
}
@keyframes drift1{ to{ translate:4vw 3vh; } }
@keyframes drift2{ to{ translate:-5vw 4vh; } }
@keyframes drift3{ to{ translate:3vw -4vh; } }

/* ---------- 4. 共通パーツ ---------- */
.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:50; }
.progress__bar{
  display:block; height:100%; width:100%;
  transform:scaleX(var(--sp)); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity:.75;
}

.sec{ padding:0 20px var(--pad-sec); }

/* セクションの背景写真（半透明パネルの裏に敷く） */
.sec--photo{ position:relative; }
.sec__photo{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
  /* 上下を透明に抜いて、ページの背景へ溶かす（境目の線をつくらない） */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 15%, #000 80%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 15%, #000 80%, transparent 100%);
}
.sec__photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 46%;
  opacity:.40;
  filter:saturate(.5) sepia(.18) brightness(1.10);
}
/* 写真の上にかける、うすい紙色のベール */
.sec__photo::after{
  content:""; position:absolute; inset:0;
  background:rgba(243,241,236,.34);
}
.sec--photo .panel{ position:relative; z-index:1; }
.panel{
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(44px, 6vw, 84px) clamp(24px, 5.4vw, 76px);
  background:var(--panel);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--radius);
  backdrop-filter:blur(20px) saturate(1.35);
  -webkit-backdrop-filter:blur(20px) saturate(1.35);
  box-shadow:
    0 1px 2px rgba(33,35,44,.04),
    0 12px 28px -12px rgba(33,35,44,.14),
    0 40px 80px -40px rgba(33,35,44,.30);
}
/* パネル上端のハイライト（浮遊感） */
.panel::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0) 38%);
  opacity:.8;
}
.panel > *{ position:relative; }

/* パネルを外して、背景の上に直接置くセクション（ページに強弱をつける） */
.panel--open{
  background:none;
  border-color:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding:clamp(20px, 3vw, 40px) clamp(12px, 3vw, 40px);
}
.panel--open::before{ display:none; }
/* 背景が透けるぶん、罫線はほんの少し濃く */
.panel--open .day-item,
.panel--open .day-item:first-child{ border-color:rgba(33,35,44,.14); }
.panel--open .h2{ font-size:clamp(28px, 6vw, 46px); }
.sec--open{ padding-top:clamp(10px, 2vw, 30px); }

.eyebrow{
  font-family:var(--font-en);
  font-size:11px; font-weight:600; letter-spacing:.28em;
  color:var(--ink-mute); text-transform:uppercase; line-height:1.6;
}
.eyebrow--sec{ margin-bottom:18px; }

.h2{
  font-size:clamp(26px, 5.4vw, 42px);
  font-weight:700; line-height:1.5; letter-spacing:.02em;
  font-feature-settings:"palt" 1;
  margin-bottom:clamp(30px, 5vw, 52px);
}

/* ボタン */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  text-decoration:none; font-weight:700; letter-spacing:.06em;
  border-radius:999px; line-height:1;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease, background-color .35s ease, color .35s ease;
}
.btn__arrow{ transition:transform .35s cubic-bezier(.2,.8,.3,1); }
.btn:hover .btn__arrow{ transform:translateX(5px); }

.btn--ghost{
  padding:16px 30px; font-size:14px;
  color:var(--ink);
  background:rgba(255,255,255,.62);
  border:1px solid rgba(33,35,44,.14);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.btn--ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(33,35,44,.35); }

.btn--main{
  padding:24px 44px; font-size:clamp(15px, 3.6vw, 18px);
  color:#fff;
  background:linear-gradient(100deg, var(--accent) 0%, #c9603f 55%, var(--accent-2) 165%);
  box-shadow:0 14px 30px -12px rgba(217,113,78,.65), 0 2px 6px rgba(33,35,44,.10);
}
.btn--main:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -14px rgba(217,113,78,.7); }
.btn--main:active{ transform:translateY(0); }

/* 強調テキスト（マーカー） */
.mk{
  background:linear-gradient(transparent 56%, rgba(217,113,78,.30) 56%);
  color:inherit; padding:0 .1em;
}

.big-line{
  font-size:clamp(22px, 4.6vw, 34px);
  font-weight:700; line-height:1.75; letter-spacing:.02em;
  font-feature-settings:"palt" 1;
  margin:clamp(34px, 5vw, 56px) 0 18px;
}
.big-line em{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.big-line--strong{ font-size:clamp(24px, 5.6vw, 40px); }
.lead-note{ color:var(--ink-soft); font-size:clamp(13.5px, 3.4vw, 15px); }

/* ---------- 5. ヒーロー ---------- */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:68px 22px 48px;
  position:relative;
}
/* ヒーローの背景写真 */
.hero__photo{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
.hero__photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
  opacity:.42;
  filter:saturate(.78) brightness(1.04) contrast(.95);
}
/* 明るいベール。中央は特に明るくして文字を読みやすく、
   下は紙の色に溶かして次のセクションへつなげる */
.hero__photo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(56% 44% at 50% 44%,
      rgba(250,249,246,.95) 0%, rgba(250,249,246,.66) 52%, rgba(250,249,246,.06) 100%),
    linear-gradient(180deg,
      rgba(243,241,236,.52) 0%, rgba(243,241,236,.34) 42%,
      rgba(243,241,236,.88) 86%, rgba(243,241,236,1) 100%);
}
.hero__inner{ max-width:760px; position:relative; z-index:1; }
.hero .scroll-cue{ position:relative; z-index:1; }
.hero__title{
  font-size:clamp(34px, 8.4vw, 66px);
  font-weight:800; line-height:1.3; letter-spacing:.005em;
  font-feature-settings:"palt" 1;
  margin:14px 0 22px;
}
.hero__title .line{ display:block; }
.hero__lead{
  font-size:clamp(17px, 4.4vw, 24px);
  font-weight:700; line-height:1.85;
  margin-bottom:10px;
}
.hero__note{ color:var(--ink-soft); font-size:clamp(13px, 3.4vw, 15px); }

.hero__date{
  margin:clamp(26px, 4vw, 36px) auto clamp(20px, 3vw, 26px);
  display:inline-block; padding:18px 32px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.8);
  border-radius:20px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -30px rgba(33,35,44,.5);
}
.date__day{
  font-family:var(--font-en);
  font-size:clamp(32px, 7.4vw, 46px); font-weight:300; letter-spacing:.02em; line-height:1.1;
}
.date__day em{ font-size:.42em; font-weight:600; letter-spacing:.22em; margin-left:.5em; vertical-align:.32em; }
.date__time{
  font-family:var(--font-en);
  font-size:clamp(14px, 3.6vw, 17px); font-weight:400; letter-spacing:.18em;
  margin-top:8px; color:var(--ink-soft);
}
.date__place{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  font-size:11px; letter-spacing:.2em; color:var(--ink-mute);
  margin-top:12px; padding-top:13px; border-top:1px solid var(--line);
}
/* 主催コミュニティ名 */
.date__community{
  font-size:11.5px; letter-spacing:.1em; color:var(--ink-soft); font-weight:600;
  line-height:1.5;
}

.scroll-cue{
  margin-top:clamp(22px, 4.4vh, 44px);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  text-decoration:none;
}
.scroll-cue__txt{
  font-family:var(--font-en); font-size:10px; letter-spacing:.3em; color:var(--ink-mute);
}
.scroll-cue__line{
  width:1px; height:44px; background:linear-gradient(var(--ink-mute), transparent);
  position:relative; overflow:hidden;
}
.scroll-cue__line::after{
  content:""; position:absolute; left:0; width:1px; height:16px; background:var(--accent);
  animation:cue 2.1s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes cue{
  0%   { top:-16px; opacity:0; }
  25%  { opacity:1; }
  100% { top:44px; opacity:0; }
}

/* 日本語の改行を文節単位に（未対応ブラウザでは無視されます） */
.q-card, .can-txt, .cta-text, .q-close, .lead-note, .day-body small, .demo__result,
.manifest__quote, .manifest__next{
  word-break:auto-phrase;
}

/* ---------- 6. 各セクション ---------- */
/* 共感セクション：頭に浮かんだことを、吹き出しで */
.q-list{
  display:flex; flex-direction:column;
  gap:clamp(22px, 3.4vw, 32px);
}
.q-card{
  position:relative;
  align-self:flex-start;
  max-width:min(82%, 540px);
  padding:clamp(17px, 2.6vw, 22px) clamp(22px, 3.4vw, 30px);
  background:#fff;
  border:1px solid rgba(33,35,44,.06);
  border-radius:26px 26px 26px 10px;
  box-shadow:
    0 2px 3px rgba(33,35,44,.03),
    0 16px 28px -20px rgba(33,35,44,.5);
  font-size:clamp(15px, 3.8vw, 18px);
  line-height:1.8;
  letter-spacing:.02em;
  transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s ease;
}
/* 吹き出しのしっぽ（小さな丸を2つ） */
.q-card::before,
.q-card::after{
  content:""; position:absolute;
  background:#fff; border:1px solid rgba(33,35,44,.06);
  border-radius:50%;
}
.q-card::before{ width:13px; height:13px; left:16px;  bottom:-9px; }
.q-card::after { width:7px;  height:7px;  left:6px;   bottom:-21px; }

/* 偶数番目は右側に。会話のようなリズムをつくる */
.q-card:nth-child(even){
  align-self:flex-end;
  border-radius:26px 26px 10px 26px;
}
.q-card:nth-child(even)::before{ left:auto; right:16px; }
.q-card:nth-child(even)::after { left:auto; right:6px;  }

.q-card b{ font-weight:700; }
.q-card:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 3px rgba(33,35,44,.03), 0 22px 34px -20px rgba(33,35,44,.55);
}
.q-close{
  margin-top:clamp(30px, 5vw, 46px);
  font-size:clamp(15px, 3.8vw, 18px); font-weight:700; line-height:1.9;
}

/* できることリスト */
.can-list{ display:grid; gap:2px; }
.can-item{
  position:relative; overflow:hidden;
  display:flex; align-items:baseline; gap:clamp(14px, 3vw, 24px);
  padding:22px 4px; border-bottom:1px solid var(--line);
  font-size:clamp(15.5px, 4vw, 20px); line-height:1.7;
}
.can-num, .can-txt{ position:relative; z-index:1; }

/* 行の背景に薄く敷く、成果物のかたち */
.can-art{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:min(40%, 250px);
  display:flex; flex-direction:column; justify-content:center; gap:9px;
  color:var(--ink); opacity:.16;
  pointer-events:none; z-index:0;
  /* 文字のある左側に向かって消えていくように */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 55%);
}
.can-art i{ display:block; height:9px; border-radius:4px; background:currentColor; }
.can-art .w65{ width:65%; }

/* ホームページらしいかたち：ナビ ＋ メインビジュアル ＋ 並んだセクション
   ※ クラス名は a- を付けて、ページ本体のクラス（.hero など）と衝突させない */
.can-art--site{ gap:7px; }
.can-art--site .a-nav{
  display:flex; align-items:center; gap:6px;
  height:auto; background:none; border-radius:0;
}
.can-art--site .a-nav b{ display:block; border-radius:3px; background:currentColor; }
.can-art--site .a-nav .a-logo{ width:26px; height:8px; margin-right:auto; }
.can-art--site .a-nav .a-lk{ width:14px; height:5px; }
.can-art--site .a-visual{ height:22px; border-radius:5px; }
.can-art--site .a-cols{
  display:flex; gap:6px; height:auto; background:none; border-radius:0;
}
.can-art--site .a-cols b{ display:block; flex:1; height:14px; border-radius:4px; background:currentColor; }
.can-art--site .a-cols b:nth-child(2){ background:var(--accent); }
.can-art .pill{ height:15px; width:38%; border-radius:999px; background:var(--accent); }
.can-art .pill--sm{ width:30%; }
.can-art .field{
  height:18px; border-radius:5px;
  background:none; border:2px solid currentColor;
}
/* 繰り返し作業＝同じかたちが並ぶ */
.can-art--loop{ gap:7px; }
.can-art--loop i{ height:7px; }
.can-item:first-child{ border-top:1px solid var(--line); }
.can-num{
  font-family:var(--font-en); font-size:12px; letter-spacing:.16em;
  color:var(--accent); flex:none; font-weight:600;
}
/* 成果物の名前に、うっすらマーカーを重ねて拾いやすくする */
.can-item--more{ color:var(--ink-soft); font-size:clamp(14px, 3.5vw, 17px); }
.can-item--more .can-num{ color:var(--ink-mute); }

.can-txt b{
  font-weight:700;
  background:linear-gradient(transparent 64%, rgba(217,113,78,.20) 64%);
  padding:0 .06em;
}

/* ミニデモ（プロンプト → このページ） */
.demo{
  margin:clamp(34px, 5vw, 52px) 0 0;
  padding:clamp(24px, 4.4vw, 38px);
  border-radius:20px;
  background:linear-gradient(150deg, rgba(102,104,207,.09), rgba(217,113,78,.09));
  border:1px solid rgba(255,255,255,.7);
  text-align:center;
}
.demo__cap{
  font-size:11px; letter-spacing:.22em; color:var(--ink-mute);
  margin-bottom:16px; font-weight:600;
}
.demo__prompt{
  display:inline-block; text-align:left; max-width:560px;
  background:#fff; border-radius:16px 16px 16px 4px;
  padding:20px 24px;
  font-size:clamp(13.5px, 3.5vw, 15.5px); line-height:1.85;
  box-shadow:0 10px 24px -16px rgba(33,35,44,.5);
}
.demo__prompt-head{ font-weight:700; }

/* 指示の中身（ゴール／コンテキスト） */
.demo__brief{ display:grid; gap:12px; margin-top:14px; }
.demo__brief-row{
  display:grid; grid-template-columns:auto 1fr; gap:.9em; align-items:start;
}
.demo__brief dd{ margin:0; color:var(--ink-soft); line-height:1.85; }
.demo__tag{
  justify-self:start; margin-top:.28em;
  padding:4px 11px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; line-height:1.5;
  color:#fff; white-space:nowrap;
}
.demo__tag--goal{ background:var(--accent); }
.demo__tag--ctx{ background:var(--accent-2); }

.demo__hint{
  margin-top:14px;
  font-size:clamp(11.5px, 3vw, 12.5px); letter-spacing:.06em; color:var(--ink-mute);
}
.demo__arrow{ color:var(--accent); font-size:20px; margin:14px 0 10px; }

/* ブラウザ風の枠 */
.demo__window{
  max-width:560px; margin:6px auto 0;
  border-radius:12px; overflow:hidden;
  background:#fff;
  border:1px solid rgba(33,35,44,.10);
  box-shadow:
    0 2px 4px rgba(33,35,44,.05),
    0 26px 50px -26px rgba(33,35,44,.55);
}
.demo__bar{
  display:flex; align-items:center; gap:6px;
  padding:9px 12px;
  background:linear-gradient(#fbfaf8, #f2f0ec);
  border-bottom:1px solid rgba(33,35,44,.07);
}
.demo__dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(33,35,44,.15); flex:none;
}
.demo__dot:first-child{ background:rgba(217,113,78,.45); }
.demo__file{
  margin-left:8px; padding:3px 14px;
  font-family:var(--font-en); font-style:normal;
  font-size:10.5px; letter-spacing:.08em; color:var(--ink-mute);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(33,35,44,.07);
  border-radius:999px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.demo__shot{ display:block; width:100%; height:auto; }

.demo__result{
  margin-top:clamp(20px, 3vw, 26px);
  font-size:clamp(15px, 4vw, 20px); font-weight:700; letter-spacing:.02em;
}

/* 当日の流れ */
.day-list{ display:grid; gap:0; }
.day-item{
  display:flex; gap:clamp(16px, 3.4vw, 30px);
  padding:24px 4px; border-bottom:1px solid var(--line);
}
.day-item:first-child{ border-top:1px solid var(--line); }
.day-num{
  font-family:var(--font-en); font-size:clamp(20px, 4.6vw, 30px); font-weight:200;
  color:var(--accent); line-height:1.35; flex:none; letter-spacing:.02em;
}
.day-body{ display:block; }
.day-body b{ display:block; font-size:clamp(15px, 3.9vw, 19px); line-height:1.65; font-weight:700; }
.day-body small{
  display:block; color:var(--ink-soft);
  font-size:clamp(12.5px, 3.2vw, 14px); line-height:1.85; margin-top:6px;
}
.day-note{ margin-top:16px; font-size:12.5px; color:var(--ink-mute); letter-spacing:.06em; }

/* 予定をひっくり返すブロック */
.manifest{
  position:relative; overflow:hidden;
  margin-top:clamp(38px, 5.4vw, 60px);
  padding:clamp(32px, 4.8vw, 56px) clamp(26px, 4.4vw, 52px);
  border-radius:22px;
  background:linear-gradient(158deg, rgba(217,113,78,.11) 0%, rgba(255,255,255,.34) 46%, rgba(102,104,207,.11) 100%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 20px 44px -30px rgba(33,35,44,.45);
}
.manifest > *{ position:relative; }

.manifest__eyebrow{
  font-size:clamp(14px, 3.6vw, 17px); font-weight:700; letter-spacing:.12em;
  color:var(--ink-soft); margin-bottom:6px;
}
.manifest__head{
  font-size:clamp(25px, 5.8vw, 40px); font-weight:800; line-height:1.6; letter-spacing:.01em;
  font-feature-settings:"palt" 1;
}
/* 「決めきっていません。」に手描き風のラインを引く */
.manifest__head em{
  position:relative; white-space:nowrap;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.manifest__head em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:3px;
  border-radius:3px;
  background:linear-gradient(90deg, rgba(217,113,78,.55), rgba(102,104,207,.45));
}

.manifest__quote{
  margin:clamp(26px, 3.8vw, 38px) 0 0;
  padding-left:clamp(16px, 2.6vw, 26px);
  border-left:2px solid var(--accent);
  font-family:var(--font-serif);
  font-size:clamp(16.5px, 4.3vw, 23px);
  font-weight:400; line-height:2.15; letter-spacing:.07em;
  color:var(--ink);
}
.manifest__quote strong{ font-weight:600; color:var(--accent); }

.manifest__next{
  display:flex; align-items:baseline; gap:.7em;
  margin-top:clamp(24px, 3.4vw, 34px);
  padding-top:clamp(18px, 2.6vw, 24px);
  border-top:1px solid var(--line);
  font-size:clamp(13.5px, 3.4vw, 15px); line-height:1.9;
  color:var(--ink-soft);
}
.manifest__next-icon{
  flex:none; color:var(--accent); font-weight:700;
  animation:nudge 2.6s ease-in-out infinite;
}
@keyframes nudge{
  0%, 62%, 100%{ transform:translateX(0); }
  76%          { transform:translateX(5px); }
}

/* CTA */
.sec--cta .panel{ text-align:center; }
.panel--cta{
  background:linear-gradient(170deg, rgba(255,255,255,.86), rgba(255,255,255,.66));
}
.h2--cta{ font-size:clamp(27px, 6.4vw, 46px); line-height:1.45; margin-bottom:clamp(26px, 4vw, 38px); }
.cta-text{
  font-size:clamp(14px, 3.6vw, 16.5px); line-height:2.05; color:var(--ink-soft);
  margin-bottom:18px;
}
.cta-btn-wrap{ margin-top:clamp(34px, 5vw, 48px); }
.cta-note{ margin-top:18px; font-size:12px; color:var(--ink-mute); letter-spacing:.06em; }

/* 回答の締切 */
.cta-deadline{
  display:inline-flex; align-items:center; gap:.6em;
  margin-top:clamp(32px, 4.6vw, 46px);
  padding:9px 20px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(217,113,78,.30);
  font-size:13px; letter-spacing:.08em; color:var(--ink-soft);
}
.cta-deadline::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); flex:none;
}
.cta-deadline strong{ color:var(--accent); font-weight:700; font-size:14.5px; }
.cta-deadline[hidden]{ display:none; }
/* 締切バッジがある場合は、ボタンとの間隔を詰める */
.cta-deadline + .cta-btn-wrap{ margin-top:clamp(16px, 2.4vw, 22px); }

/* 回答したあとのイメージ */
.cta-after{
  margin-top:clamp(28px, 4vw, 38px);
  padding-top:clamp(22px, 3vw, 28px);
  border-top:1px solid var(--line);
  font-size:clamp(13px, 3.3vw, 14.5px);
  line-height:2;
  color:var(--ink-soft);
}
.cta-after b{ color:var(--ink); font-weight:700; }

/* 最後のメッセージ */
.last{
  min-height:78svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:80px 22px 60px;
}
.last__msg{
  font-family:var(--font-serif);
  font-size:clamp(23px, 6.2vw, 44px);
  font-weight:400; line-height:1.85; letter-spacing:.06em;
  font-feature-settings:"palt" 1;
}
.last__msg .line{ display:block; }
.last__date{
  margin-top:clamp(38px, 6vw, 56px);
  font-family:var(--font-en);
  font-size:clamp(15px, 3.8vw, 19px); font-weight:300; letter-spacing:.2em; line-height:2.1;
  color:var(--ink-soft);
}
.last__date em{ font-size:.68em; letter-spacing:.24em; margin-left:.4em; }

.foot{
  text-align:center; padding:36px 22px 56px;
  border-top:1px solid var(--line);
  max-width:var(--maxw); margin:0 auto;
}
.foot__line{
  font-size:11px; letter-spacing:.16em; color:var(--ink-mute);
  line-height:2;
}
.foot__sep{ margin:0 .5em; opacity:.6; }
.foot__small{ font-size:12px; color:var(--ink-mute); margin-top:8px; letter-spacing:.06em; }

/* ---------- 7. スクロールアニメーション ---------- */
.r{
  opacity:0;
  transform:translateY(26px);
  transition:
    opacity .95s cubic-bezier(.16,.8,.28,1),
    transform .95s cubic-bezier(.16,.8,.28,1),
    filter .95s ease;
  transition-delay:var(--d, 0s);
  filter:blur(4px);
}
.r--card{ transform:translateY(34px) scale(.985); }
.r.is-in{
  opacity:1;
  transform:none;
  filter:none;
}

/* ---------- 8. レスポンシブ ---------- */
@media (max-width:768px){
  :root{ --radius:20px; }
  body{ line-height:1.9; }
  .sec{ padding-left:14px; padding-right:14px; }
  .panel{
    padding:40px 22px;
    background:rgba(255,255,255,.82); /* スマホは可読性優先で少し濃く */
  }
  .bg__grid{ background-size:44px 44px; opacity:.4; }
  .bg__orb{ filter:blur(52px); opacity:.45; }
  .hero{ padding:76px 20px 64px; }
  .hero__photo img{ opacity:.32; object-position:center 45%; }
  .sec__photo img{ opacity:.28; }
  .hero__date{ padding:20px 26px; }
  .q-card{ max-width:90%; padding:16px 20px; border-radius:22px 22px 22px 8px; }
  .q-card:nth-child(even){ border-radius:22px 22px 8px 22px; }
  .can-art{ width:50%; opacity:.09; gap:7px; }
  .can-art i{ height:7px; }
  .can-art .pill{ height:12px; }
  .can-art .field{ height:14px; border-width:1.5px; }
  .can-art--site .a-visual{ height:17px; }
  .can-art--site .a-cols b{ height:11px; }
  .btn--main{ width:100%; justify-content:center; padding:22px 24px; }
  .demo__prompt{ display:block; }
  .demo__brief-row{ grid-template-columns:1fr; gap:.5em; }
  .demo__tag{ margin-top:0; }
}
/* 改行制御：スマホだけで改行したい箇所 */
@media (min-width:769px){
  .sp-br{ display:none; }
}

/* 画面の高さが低いPC（ノートPCなど）では、ファーストビューを少し圧縮して
   スクロールの誘導まで1画面に収める */
@media (min-width:769px) and (max-height:820px){
  .hero{ padding:44px 22px 32px; }
  .hero__title{ font-size:clamp(32px, 4.6vw, 52px); margin:12px 0 18px; }
  .hero__date{ margin:22px auto 18px; padding:15px 28px; }
  .date__day{ font-size:40px; }
  .scroll-cue{ margin-top:18px; }
}

/* 大画面ではパネルの浮遊感をより強く */
@media (min-width:1200px){
  .panel{
    box-shadow:
      0 1px 2px rgba(33,35,44,.04),
      0 18px 40px -18px rgba(33,35,44,.16),
      0 60px 110px -50px rgba(33,35,44,.36);
  }
}

/* ---------- アクセシビリティ：動きを減らす設定への対応 ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .r{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .bg__orb{ animation:none !important; transform:none !important; }
  .scroll-cue__line::after{ animation:none; top:0; opacity:.6; }
  .manifest__next-icon{ animation:none; }
  .btn,.q-card{ transition:none; }
  *{ scroll-behavior:auto !important; }
}