@charset "utf-8";
/* ============================================================
   Weppy.Co — entry.css
   /entry/ 専用。style.css の @layer に相乗りする（順序を壊さない）。

   設計の前提（2026-09-16 決定）
     ・全編を朝側（紙の面）で通す。料金・定員・審査という判断材料を
       読ませるページなので、可読性が最優先。
     ・右レールに計器は置かない（2026-09-16 決定）。
       最初は参加までの3ステップを出していたが、あれはページを読んだあとに
       起きることなのでスクロール量では測れず、ずっと01で止まっていた。
       次に章の索引にしたが、それは左の縦ラベルと同じことを言っているだけで、
       右にもう一度出す理由がなかった。言うことがないなら置かない。
       ※ --rail-clock はそのまま残す。右の余白は版面として要るし、
         ここを変えると全セクションの行分かれが動いてしまう。
     ・CTAは1つだけ。最終CTAに Amelia の予約カレンダーを埋め込み、
       途中のボタンはすべてそこへ送る（入口を増やさない）。
   ============================================================ */

@layer base {
  html { background: var(--paper); }
  .ent { background: var(--bg); color: var(--fg); }
  @media (min-width: 1100px) and (max-width: 1279px) { :root { --rail-clock: 150px; } }
  @media (min-width: 1280px) { :root { --rail-clock: 190px; } }
}

@layer component {

  /* 見出しブロックの「次に来るもの」は、どのセクションでも 44px 空ける
     （style.css の .hd は罫までしか間隔を持っていない） */
  .ent .hd > .body { margin-top: clamp(20px, 2.2vw, 30px); }
  .ent .hd + .body { margin-top: var(--sp-7); }
  .ent .stmt + .body { margin-top: clamp(36px, 3.6vw, 56px); }
  /* 本文の折り位置は広い版面のための調整。狭い幅では自然折り返しに任せる */
  @media (max-width: 420px) { .ent .brsp { display: none; } }
  @media (max-width: 760px) { .ent .brpc { display: none; } }
  .ent .hdr { opacity: 1; }
  .ent .hdr__sep { background: var(--rule-dot); }
  .ent .hdr__join:hover,
  .ent .hdr__join.is-current { background: var(--orange-700); border-color: var(--orange-700); color: #fff; }
  .ent .hdr__lnk:hover { color: var(--orange-700); }
  .ent .tags li { font-style: normal; font-size: 10px; letter-spacing: .06em;
    border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 4px 9px; color: var(--fg-muted); }

  /* ---------- 01 HERO -------------------------------------- */
  .sec--enthero { padding-block: clamp(96px, 9vw, 150px) var(--section-py); }
  .enthero__hd { max-width: 56rem; }
  .enthero__h {
    font-family: var(--font-gothic); font-weight: 700;
    font-size: clamp(2rem, 5.4vw, 4rem); line-height: 1.35; letter-spacing: .01em;
    color: var(--ink-800); margin-top: 12px; font-feature-settings: "palt" 1;
  }
  /* ロゴと同じオレンジ。ヘッダーの Weppy.Co も、トップのロゴも --orange-500。
     ページの他のアクセントは --orange-700 だが、ここはロゴの一部なので揃える。 */
  .enthero__h span,
  .sec--peer .hd h2 span { color: var(--orange-500); }

  .enthero__tag {
    margin-top: 18px; font-family: var(--font-mincho); font-weight: 600;
    font-size: clamp(1rem, 1.7vw, 1.25rem); line-height: 1.85; letter-spacing: .06em;
    color: var(--fg-muted);
  }

  /* 原稿の1行＝1行。ここは足さない場所なので、組み方も足さない。
     箇条書きの記号も番号も付けず、短文をそのまま積む。 */
  .enthero__b { position: relative; max-width: 40rem; margin-top: var(--sp-7); }

  /* 図 F-E1 は「絵」ではなく「地」。
     ヒーローの一文（一人でできることを増やしながら、一人で考えなくていい）を
     そのまま図にしたもので、半径が前半、周囲の点が後半を言っている。
     枠は付けない。右にはみ出させて大きく敷き、文字が乗る左側はマスクで消す。
     .sec は isolation:isolate なので z-index:-1 で「地の上・本文の下」に入る。 */
  /* 高さ基準で敷く。% の高さはセクションの高さに解決されるので、
     原稿が増減しても図はセクションいっぱいのまま追随する（幅で決めると
     背の高い画面でスカスカになり、狭い画面では横に溢れて円が画面外へ出る）。 */
  .enthero__bg {
    position: absolute; z-index: -1; pointer-events: none;
    inset-inline-end: -4%;
    inset-block-start: 5%;
    height: 94%; width: auto; aspect-ratio: 1;
    opacity: .8;
    -webkit-mask-image: linear-gradient(100deg, transparent 6%, rgba(0,0,0,.18) 26%, rgba(0,0,0,.72) 48%, #000 66%);
          mask-image: linear-gradient(100deg, transparent 6%, rgba(0,0,0,.18) 26%, rgba(0,0,0,.72) 48%, #000 66%);
  }
  /* 透かしの 20 と同じ場所に来ると、数字と格子が二重に見えて地がうるさくなる。
     地は図の方に任せて、このセクションだけ数字を薄くする。 */
  .sec--enthero > .wm { color: color-mix(in srgb, var(--wm-color) 55%, transparent); }

  /* 1列になる幅では、高さ基準だと図がセクションの縦長さに引きずられて
     横に出すぎる（900px で円の中心が画面の外に出た）。ここから下は
     「中心を版面の何％に置くか」で決める。幅が変わっても構図が動かない。 */
  @media (min-width: 700px) and (max-width: 999px) {
    .enthero__bg {
      --bgw: min(88vw, 720px);
      inset-inline-end: auto; inset-inline-start: calc(60% - var(--bgw) / 2);
      inset-block-start: 8%;
      width: var(--bgw); height: auto; aspect-ratio: auto; opacity: .58;
    }
  }
  /* スマホでは出さない。この幅だと図が本文の真下に丸ごと重なり、
     しかもラベルが端で切れて意味が読み取れない。
     「伝わらないのに邪魔をする地」は置かない方がいい（2026-09-16 決定）。 */
  @media (max-width: 699px) {
    .enthero__bg { display: none; }
  }

  @media (prefers-reduced-transparency: reduce) {
    .enthero__bg { opacity: .3; }
  }

  .enthero__l {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 2.0; color: #3E4854;
  }
  .enthero__l + .enthero__l { margin-top: 14px; }

  .enthero__st {
    margin-top: var(--sp-7);
    font-family: var(--head-font); font-weight: 700;
    font-size: clamp(1.375rem, 2.9vw, 2.125rem); line-height: 1.6; letter-spacing: .02em;
    color: var(--ink-800); font-feature-settings: "palt" 1;
  }

  /* 「審査があります」は隠さない。隠すと、話したあとで裏切ることになる。
     ただし脅かす大きさにもしない。原稿どおり、※つきの一行で置く。 */
  .enthero__note {
    margin-top: var(--sp-6); font-size: 13px; line-height: 1.8; color: var(--fg-dim);
  }

  .enthero__cta { margin-top: 22px; }
  .btn--ent { padding: 20px clamp(26px, 4vw, 48px); font-size: clamp(1rem, 1.7vw, 1.1875rem);
    background: var(--orange-700); color: #fff; box-shadow: var(--shadow-m); }
  .btn--ent:hover { background: var(--orange-800); }
  .btn--ent .cnr { border-color: rgba(255,255,255,.42); }

  /* ---------- 02 対象（5つ） -------------------------------- */
  .wl { margin-top: var(--sp-7); }
  .wl__i { display: grid; gap: clamp(14px, 2vw, 28px);
    padding: clamp(26px, 3vw, 40px) 0; border-top: 1px solid var(--rule); }
  .wl__i:first-child { border-top: 0; padding-top: 0; }
  @media (min-width: 760px) { .wl__i { grid-template-columns: 96px minmax(0,1fr); } }
  .wl__n { display: flex; align-items: center; gap: 12px; }
  .wl__n b { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; line-height: .9;
    letter-spacing: -.02em; color: var(--rule-dot); }
  .wl__n i { display: block; flex: 1 1 auto; height: 1px; background: var(--rule); }
  @media (min-width: 760px) { .wl__n { align-items: flex-start; } .wl__n i { display: none; } }
  .wl__b h3 { font-family: var(--head-font); font-weight: 700;
    font-size: clamp(1.1875rem, 2.2vw, 1.625rem); line-height: 1.55; color: var(--ink-800);
    font-feature-settings: "palt" 1; }
  .wl__b .body { margin-top: 16px; }
  .wl__b .body b { color: var(--ink-800); font-weight: 700; }
  .wl__b .tags { margin-top: 16px; }

  /* 心の声は鉤括弧ではなく、罫で囲って「声」として置く */
  .says { display: grid; gap: 0; margin-top: 18px; max-width: 32em;
    border-left: 2px solid var(--orange-200); }
  .says li { padding: 9px 0 9px 16px;
    font-family: var(--head-font); font-weight: 700;
    font-size: clamp(1.0625rem, 1.8vw, 1.25rem); color: var(--ink-700); }
  .says li::before { content: "「"; } .says li::after { content: "」"; }

  .acts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
  .acts li { font-size: 13px; letter-spacing: .02em; color: var(--ink-700);
    border: 1px solid var(--rule); border-radius: 999px; padding: 7px 14px; background: var(--paper-card); }
  .acts--col { max-width: 30em; }

  .gives { display: grid; gap: 0; margin-top: 18px; border-top: 1px solid var(--rule); max-width: 38em; }
  .gives li { padding: 12px 0 12px 22px; position: relative;
    font-size: var(--fs-lead); line-height: 1.8; color: var(--ink-700);
    border-bottom: 1px solid var(--rule); }
  .gives li::before { content: ""; position: absolute; left: 2px; top: 50%;
    width: 8px; height: 2px; background: var(--orange-600); transform: translateY(-50%); }

  .wl__q {
    margin-top: 22px;
    font-family: var(--head-font); font-weight: 700;
    font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.6; color: var(--orange-700);
    font-feature-settings: "palt" 1;
  }

  /* ---------- 03 仲間 --------------------------------------- */
  .mix { display: grid; gap: 0; margin-top: var(--sp-7);
    max-width: 44rem; margin-inline: auto; border-top: 1px solid var(--rule); }
  .mix li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0;
    border-bottom: 1px solid var(--rule); }
  .mix span { flex: none; font-size: 10px; letter-spacing: .14em; color: var(--fg-dim); }
  .mix p { font-size: var(--fs-lead); line-height: 1.8; color: var(--ink-700); }

  .sec--peer .stmt--after { text-align: center; margin-top: clamp(36px, 3.6vw, 56px); }
  /* 原稿どおり3行。style.css の .stmt--after br { display:none }（≤599px）は
     トップの dawn 用なので、ここでは折り位置を消さない。 */
  .ent .sec--peer .stmt--after br { display: revert; }

  .peer__ask {
    margin-top: var(--sp-7); text-align: center;
    font-family: var(--font-gothic); font-weight: 500;
    font-size: clamp(1.125rem, 1.9vw, 1.4375rem); line-height: 1.8; letter-spacing: .02em;
    color: var(--ink-700);
  }
  .peer__ask em { font-style: normal; font-weight: 700; color: var(--orange-700); }
  .peer__ask::before { content: ""; display: block; width: 40px; height: 1px;
    background: var(--rule-dot); margin: 0 auto var(--sp-6); }
  .peer__cta { margin-top: var(--sp-6); text-align: center; }

  /* ---------- 04 流れ --------------------------------------- */
  .book__grid { display: grid; gap: var(--block-gap); margin-top: var(--sp-7); }
  @media (min-width: 960px) {
    .book__grid { grid-template-columns: minmax(0,1fr) minmax(0,.92fr); gap: clamp(32px,3.6vw,64px); }
  }
  .talk { display: grid; gap: 0; border-top: 1px solid var(--rule); }
  .talk li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0;
    border-bottom: 1px solid var(--rule); }
  .talk span { flex: none; font-size: 10px; letter-spacing: .14em; color: var(--fg-dim); }
  .talk p { font-size: var(--fs-lead); line-height: 1.8; color: var(--ink-700); }
  .book__l .body { margin-top: 18px; }
  /* style.css の .pull は 23px・太字・明朝で、見出し級の大きさ。
     半分幅の段の中でそれをやると5行の塊になって、上の h2 と競合する。
     ここは補足なので、本文（16px）の一段上まで落とす。 */
  .book__l .pull {
    margin-top: var(--sp-6);
    font-family: var(--font-gothic); font-weight: 500;
    font-size: clamp(.9375rem, 1.35vw, 1.0625rem); line-height: 1.95; letter-spacing: .01em;
    color: #3E4854;
  }
  .book__l .pull b { font-weight: 700; color: var(--ink-800); }
  .book__en { display: block; margin-bottom: 16px; }

  .flowsteps { display: grid; gap: 0; }
  .flowsteps > li { position: relative; display: grid; grid-template-columns: 84px 1fr;
    gap: clamp(14px, 1.8vw, 24px); padding: 0 0 clamp(24px, 2.6vw, 34px) 0; }
  .flowsteps > li:last-child { padding-bottom: 0; }
  /* ステップをつなぐ縦線。最後には引かない */
  .flowsteps > li:not(:last-child)::before {
    content: ""; position: absolute; left: 41px; top: 34px; bottom: 6px; width: 1px;
    background: repeating-linear-gradient(180deg, var(--rule-dot) 0 3px, transparent 3px 7px);
  }
  .flowsteps__n { position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    width: 84px; padding: 10px 0;
    border: 1px solid var(--rule-dot); border-radius: var(--radius-m);
    background: var(--paper-card);
    font-size: 8.5px; letter-spacing: .18em; color: var(--fg-dim); }
  .flowsteps__n b { font-size: 20px; letter-spacing: 0; color: var(--orange-700); line-height: 1; }
  .flowsteps__b strong { display: block; font-size: clamp(1rem, 1.8vw, 1.1875rem);
    font-weight: 700; color: var(--ink-800); padding-top: 6px; }
  .flowsteps__b p { margin-top: 8px; font-size: 14px; line-height: 1.85; color: var(--fg-muted); }

  .book__cta { margin-top: var(--sp-8); text-align: center; }
  .book__note { margin-top: 14px; text-align: center; font-size: 10.5px;
    letter-spacing: .2em; color: var(--fg-dim); }

  /* ---------- 05 できること --------------------------------- */
  .cans { display: grid; gap: var(--grid-gap); margin-top: var(--sp-7); }
  @media (min-width: 900px) { .cans { grid-template-columns: repeat(3, minmax(0,1fr));
    gap: clamp(18px, 2vw, 28px); } }
  .can { display: flex; flex-direction: column;
    border: 1px solid var(--rule); border-radius: var(--radius-m); overflow: hidden;
    background: var(--paper-card); }
  .can > :not(.can__vis) { margin-inline: clamp(22px, 2.4vw, 30px); }
  .can > :last-child { margin-bottom: clamp(22px, 2.4vw, 30px); }

  /* トップページ s07 と同じ3枚。切り取り位置もあちらで詰めた値をそのまま使う
     （同じ写真を違う位置で切ると、2ページで別の写真に見える）。 */
  .can__vis { position: relative; height: clamp(132px, 15vw, 168px); overflow: hidden; }
  .can__vis img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .can--night .can__vis { background: #04060A; }
  .can--night .can__vis img { object-position: 18% 72%; }
  .can--face  .can__vis { background: #EFE7D6; }
  .can--face  .can__vis img { object-position: 50% 22%; }
  .can--warm  .can__vis img { object-position: 42% 38%; }
  .can__vis figcaption {
    position: absolute; right: 14px; top: 11px; z-index: 2;
    font-size: 11.5px; letter-spacing: .18em;
  }
  .can--night .can__vis figcaption { color: #FFFFFF; }
  .can--face  .can__vis figcaption { color: var(--ink-800); }
  .can--warm  .can__vis figcaption { color: var(--ink-800); }
  .can__n { margin-top: clamp(20px, 2.2vw, 26px); }
  .can__n { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; line-height: .9;
    letter-spacing: -.02em; color: var(--rule-dot); }
  .can h3 { margin-top: 14px; font-family: var(--head-font); font-weight: 700;
    font-size: clamp(1.0625rem, 1.9vw, 1.3125rem); line-height: 1.55; color: var(--ink-800);
    font-feature-settings: "palt" 1; }
  .can h3 em { font-style: normal; color: var(--orange-700); }
  .can .body { margin-top: 16px; font-size: 14px; }
  .can .acts { margin-top: 14px; }
  .can .acts li { font-size: 12px; padding: 5px 11px; }
  .whens { display: grid; gap: 0; margin-top: 16px; border-top: 1px solid var(--rule); }
  .whens li { padding: 11px 0; border-bottom: 1px solid var(--rule);
    font-size: 14px; line-height: 1.8; color: var(--ink-700); }
  .can__end { margin-top: auto; padding-top: 20px;
    font-size: clamp(.9375rem, 1.5vw, 1.0625rem); font-weight: 700; line-height: 1.75;
    color: var(--orange-800); }

  /* ---------- 06 料金・定員 --------------------------------- */
  .fee { display: grid; gap: var(--block-gap); margin-top: var(--sp-7); align-items: start; }
  @media (min-width: 900px) { .fee { grid-template-columns: minmax(0,1.3fr) minmax(0,.8fr);
    gap: clamp(30px, 3.4vw, 60px); } }
  .fee__t { border-top: 1px solid var(--rule-strong); }
  .fee__row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px;
    align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .fee__row dt { font-size: var(--fs-lead); color: var(--fg-muted); }
  .fee__row dd { display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: flex-end; column-gap: 8px; }
  .fee__amt { display: inline-flex; align-items: baseline; column-gap: 6px; white-space: nowrap; }
  .fee__row b { font-size: clamp(1.5rem, 2.8vw, 2.25rem); font-weight: 700; line-height: 1;
    color: var(--ink-800); }
  .fee__row dd span { font-size: var(--fs-lead); color: var(--fg-muted); }
  .fee__row em { flex-basis: 100%; text-align: right; font-style: normal; font-size: 12.5px;
    color: var(--fg-dim); margin-top: 6px; }
  .fee__row--main b { font-size: clamp(1.875rem, 3.4vw, 2.75rem); }
  /* 初月だけオレンジ。ページで金額にオレンジが乗るのはここ1か所だけにする */
  .fee__row--off { background: var(--orange-050);
    margin-inline: calc(var(--gutter) * -.3); padding-inline: calc(var(--gutter) * .3); }
  .fee__row--off b, .fee__row--off dd span { color: var(--orange-800); }
  .fee__row--off em { color: var(--orange-700); }
  .fee__badge { display: inline-block; font-size: 10.5px; letter-spacing: .12em; font-weight: 700;
    color: #fff; background: var(--orange-700); border-radius: var(--radius-s); padding: 5px 10px; }

  .fee__cap { border: 1px solid var(--rule); border-radius: var(--radius-m);
    background: var(--paper-card); padding: clamp(24px, 2.8vw, 34px); }
  .fee__cap .en { display: block; }
  .fee__num { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
  .fee__num b { font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 700; line-height: .9;
    letter-spacing: -.02em; color: var(--ink-800); }
  .fee__num span { font-size: var(--fs-lead); color: var(--fg-muted); }
  .fee__cap .body { margin-top: 16px; font-size: 14px; }

  /* ---------- 07 最終CTA ------------------------------------ */
  .sec--last {
    display: grid; place-items: center; text-align: center;
    padding-block: var(--section-py-lg);
    background: linear-gradient(168deg, var(--orange-700) 0%, var(--orange-800) 58%, var(--orange-900) 100%);
    color: #fff; overflow-x: hidden;
  }
  .sec--last .wm--cta { color: rgba(255,255,255,.085); left: clamp(12px, 3vw, 54px);
    bottom: -26px; font-size: clamp(110px, 15vw, 210px); }
  .last__in { position: relative; z-index: 1; width: 100%; max-width: 62rem; }
  .last__en { color: rgba(255,255,255,.72); }
  .last__h { font-family: var(--font-gothic); font-weight: 700;
    font-size: clamp(1.75rem, 4.4vw, 3.25rem); line-height: 1.42; color: #fff; margin-top: 14px; }
  .last__st { margin-top: 20px; font-family: var(--head-font); font-weight: 700;
    font-size: clamp(1.0625rem, 1.9vw, 1.375rem); line-height: 1.85; letter-spacing: .04em;
    color: rgba(255,255,255,.92); }

  .last__steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 0; margin-top: var(--sp-7); }
  .last__steps li { display: flex; align-items: baseline; gap: 8px; padding: 0 clamp(14px,2vw,26px);
    position: relative; }
  .last__steps li + li::before { content: "→"; position: absolute; left: calc(-.5em - 2px); top: 0;
    color: rgba(255,255,255,.5); font-size: 13px; }
  .last__steps b { font-size: 11px; letter-spacing: .14em; color: rgba(255,255,255,.66); }
  .last__steps span { font-family: var(--head-font); font-weight: 700; font-size: 15px; color: #fff; }

  /* Amelia の予約カレンダーを置く紙のカード。
     オレンジの面に Amelia の白いUIを直接置くと地色とぶつかるので、
     カードを一枚敷いて、その中を白い面にしておく。 */
  .booker { margin-top: var(--sp-7); background: var(--paper);
    border-radius: var(--radius-l); box-shadow: 0 24px 60px rgba(90,26,2,.28);
    padding: clamp(20px, 2.6vw, 34px); text-align: left; }
  .booker__hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
    font-family: var(--head-font); font-weight: 700;
    font-size: clamp(1.0625rem, 1.8vw, 1.25rem); color: var(--ink-800); }
  .booker__hd .mono { font-size: 9.5px; letter-spacing: .18em; color: var(--orange-700);
    border: 1px solid var(--orange-100); background: var(--orange-050);
    border-radius: var(--radius-s); padding: 4px 8px; }
  .booker__lead { margin-top: 10px; font-size: 14px; line-height: 1.85; color: var(--fg-muted); }
  .booker__slot { margin-top: 28px; }
  .booker__slot .amelia-v2-booking { width: 100%; }
  /* ショートコードが入る前の見え方（本番では中身が置き換わる） */
  .booker__ph { display: grid; place-items: center; min-height: clamp(280px, 34vw, 420px);
    border: 1px dashed var(--rule-dot); border-radius: var(--radius-m);
    font-size: 10.5px; letter-spacing: .24em; color: var(--fg-dim); }
  .booker__slot:not(:has(.booker__ph)) { min-height: 0; }
  .booker__note { margin-top: 16px; font-size: 10.5px; letter-spacing: .2em; color: var(--fg-dim); }
}

@layer utility {
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
  }
}

/* Amelia の style.css は @layer 外。カード内のデフォルト上下100pxをここで消す。 */
.ent .booker__slot .amelia-v2-booking #amelia-container.am-fs__wrapper {
  margin-block: 0;
}