/* ══════════════════════════════════════════════════════════ 中医学現在地チェック構造・パーツ … PROJECT F 診断をモデリング色・トーン … meguri LMS（墨＋砂金・細ウェイト・余白多め） ══════════════════════════════════════════════════════════ */ :root { /* meguri のブランド */ --sumi: #3A3A37; /* 墨（メイン） */ --sumi-2: #5C5C56; --gold: #C4A35A; /* 砂金（アクセント＝旧・蛍光イエローの位置） */ --gold-2: #A98944; --gold-pale: #EFE3C7; /* マーカー用 */ --gold-mist: #FAF7F1; /* 極淡 */ --beige: #E8E4DC; /* ライン */ /* 緑は meguri HP のブランド色をそのまま使う（https://meguri-hp.pages.dev の --sage 系）砂金＝導線／緑＝中医学・達成／朱＝痛みの3色で役割を分ける */ --moss: #6B8E4E; /* 若草（meguri HP の --sage） */ --moss-2: #527038; /* 濃い若草（--sage-dark） */ --moss-pale: #C8D5B9; /* 淡い若草（--sage-light） */ --moss-mist: #E8F0E1; /* 極淡（--sage-muted） */ --sage: #C8D5B9; /* イラスト用 */ --gray: #999999; --gray-2: #B9B3A6; --white: #FFFFFF; --cream: #FAFAF8; --brown: #5A4632; /* 濃いブラウン（吹き出しの枠） */ /* ゴール（体質の読み手マスター）の地色。ここ1行で色が変わる #B06D7C くすみピンク（今これ）／ #C08290 もっと明るいピンク #A85C6B 薄紅／ #7D434D 蘇芳（えんじ寄り） #445C33 深い苔／ #5A4632 生薬の茶／ #3A3A37 墨 */ --goal-bg: #B06D7C; --crit: #A8674A; /* 数字用・くすんだ朱 */ --crit-mist: #F7EFE9; --r: 14px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--white); color: var(--sumi); font-family: "Noto Sans JP", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; font-size: 16px; font-weight: 400; line-height: 2.05; letter-spacing: .03em; -webkit-font-smoothing: antialiased; } /* ─── 背景パターン ────────────────────────────────── の部分を書き換えると柄が変わります bg-dots … 水玉（モデリング先と同じ構造・砂金色） bg-seigaiha … 青海波（和柄・「めぐり」の意匠） bg-grid … 細格子（和紙の簾） bg-none … 模様なし濃さは --bg-ink（0 で消える / 1 で最大）で調整 ───────────────────────────────────────────────── */ :root { --bg-ink: .55; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--bg-ink); /* 中央（文字が乗る帯）を薄く、左右の余白を濃くして読みやすさを守る */ -webkit-mask-image: linear-gradient(to right, #000 0%, #000 20%, rgba(0,0,0,.22) 40%, rgba(0,0,0,.22) 60%, #000 80%, #000 100%); mask-image: linear-gradient(to right, #000 0%, #000 20%, rgba(0,0,0,.22) 40%, rgba(0,0,0,.22) 60%, #000 80%, #000 100%); } /* 水玉 */ body.bg-dots::before { background-image: radial-gradient(var(--gold-pale) 1.7px, transparent 1.8px); background-size: 22px 22px; background-position: 0 0; } /* 青海波 */ body.bg-seigaiha::before { background-color: transparent; background-image: radial-gradient(circle at 50% 100%, transparent 0 21%, var(--gold-pale) 21% 23%, transparent 23% 41%, var(--gold-pale) 41% 43%, transparent 43% 61%, var(--gold-pale) 61% 63%, transparent 63%), radial-gradient(circle at 0% 100%, transparent 0 21%, var(--gold-pale) 21% 23%, transparent 23% 41%, var(--gold-pale) 41% 43%, transparent 43% 61%, var(--gold-pale) 61% 63%, transparent 63%), radial-gradient(circle at 100% 100%, transparent 0 21%, var(--gold-pale) 21% 23%, transparent 23% 41%, var(--gold-pale) 41% 43%, transparent 43% 61%, var(--gold-pale) 61% 63%, transparent 63%); background-size: 64px 32px; } /* 細格子 */ body.bg-grid::before { background-image: linear-gradient(to right, var(--gold-pale) 1px, transparent 1px), linear-gradient(to bottom, var(--gold-pale) 1px, transparent 1px); background-size: 28px 28px; } body.bg-none::before { display: none; } /* スマホは余白が無く柄が文字に近づくので、さらに薄く */ @media (max-width: 560px) { :root { --bg-ink: .38; } } /* アイコンは線画で統一。太さ・端の形を1か所で決める */ .icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .ic { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* 本文カラム。読みやすさを落とさず、モデリング先くらいの幅に広げる */ .app { max-width: 860px; margin: 0 auto; padding: 0 32px; } @media (max-width: 560px) { .app { padding: 0 20px; } } .screen { display: none; } .screen.active { display: block; } /* ─── 共通 ─────────────────────────────────────────── */ /* 砂金マーカー */ .mark { background: linear-gradient(transparent 62%, var(--gold-pale) 62%); padding: 0 .12em; } .mark-sm { background: linear-gradient(transparent 66%, var(--gold-pale) 66%); padding: 0 .1em; } /* 手書き風 */ .hero-script, .sec-script, .final-script { font-family: "Sacramento", cursive; color: var(--gold); font-size: 32px; line-height: 1.25; text-align: center; font-weight: 400; } /* 英字ラベル */ .sec-en, .block-en, .sc-en { font-family: "Cormorant Garamond", serif; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); font-size: 12px; text-align: center; } /* ピル */ .pill { display: inline-block; border: 1px solid var(--beige); color: var(--sumi-2); background: var(--white); border-radius: 100px; padding: 5px 15px; font-size: 12px; font-weight: 400; letter-spacing: .05em; white-space: nowrap; } /* メインボタン（砂金塗り＋墨のオフセット影） */ /* ページで一番押してほしいものなので、迷いようがない大きさにする */ .btn-start { display: block; width: 100%; background: var(--gold); border: 2px solid var(--gold-2); border-radius: 14px; padding: 26px 20px 30px; cursor: pointer; font-family: inherit; box-shadow: 6px 6px 0 var(--sumi); transition: transform .12s, box-shadow .12s; } .btn-start:active { transform: translate(4px,4px); box-shadow: 2px 2px 0 var(--sumi); } .btn-en { display: block; font-family: "Cormorant Garamond", serif; font-weight: 600; letter-spacing: .42em; font-size: 14px; color: var(--white); opacity: .92; margin-bottom: 4px; } .btn-jp { display: block; font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 27px; letter-spacing: .16em; color: var(--white); line-height: 1.5; } /* 所要・条件の注記。塗らずに線で囲んで、CTAの主張を邪魔しない */ .specpill { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin: 0 auto 20px; padding: 11px 22px; border: 1.5px solid var(--gold-2); border-radius: 100px; background: var(--white); color: var(--gold-2); font-size: 14px; font-weight: 500; letter-spacing: .1em; white-space: nowrap; } .specpill .clock { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .specpill i { font-style: normal; opacity: .45; font-weight: 400; } @media (max-width: 400px) { .btn-start { padding: 22px 16px 26px; } .btn-jp { font-size: 23px; letter-spacing: .12em; } .specpill { font-size: 12.5px; gap: 7px; padding: 10px 16px; letter-spacing: .06em; } .specpill .clock { width: 16px; height: 16px; } } /* ─── ヒーロー ─────────────────────────────────────── */ .hero { position: relative; padding: 40px 0 44px; text-align: center; } .stripe-deco { position: absolute; top: 0; left: -20px; right: -20px; height: 10px; background: repeating-linear-gradient(-45deg, var(--gold-pale) 0 5px, transparent 5px 11px); } .kicker { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 12px; color: var(--sumi-2); letter-spacing: .16em; margin: 30px 0 20px; } .kicker-badge { border: 1px solid var(--gold); color: var(--gold); border-radius: 100px; padding: 1px 11px; font-size: 11px; letter-spacing: .12em; } .hero-title { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 38px; line-height: 1.6; letter-spacing: .08em; margin-bottom: 10px; } .hero-script { margin-bottom: 30px; } /* 感情のフック（一番先に目に入る一文）*/ .hero-hook { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 20px; line-height: 2.1; letter-spacing: .05em; margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--beige); } .hero-lede { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 17px; line-height: 2.05; letter-spacing: .06em; color: var(--sumi-2); margin-bottom: 18px; } .hero-lede b { font-weight: 400; font-size: 21px; color: var(--gold-2); } .hero-note { font-size: 12px; color: var(--gray); line-height: 2; margin-bottom: 24px; } .hero-illust { margin: 0 0 28px; } .hero-illust img { width: 100%; border-radius: var(--r); display: block; } .badge-row { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 28px; } /* ─── セクション ───────────────────────────────────── */ .sec { background: var(--white); border: 1px solid var(--beige); border-radius: var(--r); padding: 38px 22px; margin-bottom: 20px; } .sec-script { margin-bottom: 22px; } .sec-en { margin-bottom: 12px; } .sec-h { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 22px; line-height: 1.85; letter-spacing: .08em; text-align: center; margin-bottom: 18px; } .sec-lead { font-size: 14.5px; color: var(--gray); line-height: 2.05; margin-bottom: 24px; } .sec-lead.center { text-align: center; margin-bottom: 20px; } /* ── メリハリ型の見出し（筆記体ラベル → 帯見出し → 濃いリード）── 節の入口で一度しっかり強く出して、本文との落差を作る型。 */ .sec-script.left { text-align: left; margin-bottom: 12px; font-size: 30px; line-height: 1.1; } .sec-h.band { display: block; text-align: left; font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 23px; line-height: 1.6; letter-spacing: .06em; color: var(--sumi); background: var(--gold-pale); padding: 11px 16px; margin-bottom: 20px; border-radius: 3px; } .sec-lead.strong { color: var(--sumi); font-weight: 500; font-size: 15px; line-height: 2.1; } .sec-lead.strong b { font-weight: 500; background: linear-gradient(transparent 62%, var(--gold-pale) 62%); padding: 0 .1em; } /* ─── 吹き出し ───────────────────────────────────── PROJECT F の bubble-row をそのまま移植（寸法も同じ）。色だけ濃紺 → 墨＋砂金に置き換えている。 */ .talk { display: flex; flex-direction: column; gap: 16px; } .bubble-row { display: flex; align-items: flex-end; gap: 12px; } .bubble-row.me { justify-content: flex-end; } /* アイコン 60px・2px の輪郭。すべての吹き出しに付ける */ .bubble-avatar { width: 60px; height: 60px; flex: 0 0 60px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold-2); background: var(--white); } .bubble-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; } .bubble { background: var(--white); border: 1.5px solid var(--gold-2); border-radius: 16px 16px 16px 4px; padding: 15px 19px; font-size: 15.5px; font-weight: 500; line-height: 1.95; letter-spacing: .02em; } .bubble.strong { font-weight: 700; } .bubble b { font-weight: 700; background: linear-gradient(transparent 62%, var(--gold-pale) 62%); } /* 読み手側の吹き出し */ .bubble-row.me .bubble { background: var(--gold-mist); border-radius: 16px 16px 4px 16px; } .talk-name { font-size: 11.5px; color: var(--gray); letter-spacing: .12em; margin: 0 0 -8px 72px; } /* 狭い画面ではアイコンが場所を取りすぎるので少し縮める */ @media (max-width: 400px) { .bubble-avatar { width: 50px; height: 50px; flex: 0 0 50px; } .bubble-row { gap: 10px; } .bubble { padding: 13px 16px; font-size: 15px; } .talk-name { margin-left: 60px; } } /* ─── 招待カード（これから何をするか） ────────────── 語りかけ（感情）から 4段の階段（構造）へ渡す踊り場。吹き出しではなく1枚のカードにして「案内」の顔を持たせる ───────────────────────────────────────────────── */ .invite { position: relative; overflow: hidden; background: var(--white); border: 1.5px solid var(--gold-2); border-radius: 16px; padding: 34px 26px 28px; box-shadow: 0 2px 0 var(--gold-pale); } /* 上辺に薄いゴールドの帯を差して「別格の一枚」に見せる */ .invite::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 3px; background: var(--gold); border-radius: 0 0 3px 3px; } .invite-en { font-family: "Cormorant Garamond", serif; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); text-align: center; line-height: 1.4; } .invite-h { margin-top: 10px; text-align: center; color: var(--sumi); letter-spacing: .02em; } /* 前フリ（状況説明）と誘い（行動）で、大きさと重さを分ける */ .invite-h-sub { display: block; font-size: 17px; font-weight: 500; line-height: 1.8; color: var(--sumi-2); letter-spacing: .03em; } /* 講座の核になる言葉。鉤括弧と字の大きさで用語として立たせ、線は引かない（装飾はカード内で「砂金のマーカー1種類」だけに絞って調和させる） */ .invite-h-sub .kw { display: inline-block; font-size: 22px; font-weight: 500; line-height: 1.75; color: var(--sumi); letter-spacing: .03em; } .invite-h-main { display: block; margin-top: 14px; font-size: 24px; font-weight: 500; line-height: 1.75; color: var(--sumi); letter-spacing: .03em; background: linear-gradient(transparent 66%, var(--gold-pale) 66%); background-repeat: no-repeat; background-position: 50% 0; background-size: calc(100% - 2px) 100%; padding: 0 .18em; } .invite-h ruby rt { font-size: .42em; font-weight: 400; color: var(--sumi-2); } /* イラスト + テキストの2カラム。狭い画面では縦積み */ .invite-body { display: grid; grid-template-columns: 146px 1fr; gap: 20px; align-items: center; margin-top: 26px; } .invite-fig { margin: 0; text-align: center; } .invite-fig img { width: 146px; height: auto; display: block; border-radius: 14px; border: 1px solid var(--gold-pale); background: var(--gold-mist); } .invite-fig figcaption { margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: var(--sumi-2); letter-spacing: .04em; } .invite-fig figcaption small { display: block; font-size: 10.5px; color: var(--gray); } .invite-text p { font-size: 14.5px; line-height: 2.0; } .invite-text p + p { margin-top: 14px; } .invite-text b { font-weight: 500; background: linear-gradient(transparent 64%, var(--gold-pale) 64%); } .invite-turn { padding-top: 14px; border-top: 1px dashed var(--beige); } .invite-turn .was { color: var(--gray); text-decoration: line-through; text-decoration-color: var(--beige); } .invite-turn .now { background: none; color: var(--moss-2); font-weight: 500; } /* 体験の中身を 01-03 で予告する */ .invite-list { list-style: none; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--beige); display: flex; flex-direction: column; gap: 14px; } .invite-list li { display: flex; gap: 12px; align-items: flex-start; } .invite-list .n { flex: 0 0 auto; font-family: "Cormorant Garamond", serif; font-size: 15px; color: var(--gold-2); letter-spacing: .06em; line-height: 1.9; padding-top: 1px; } .invite-list li > span:last-child { font-size: 14px; line-height: 1.95; } .invite-list b { font-weight: 500; color: var(--sumi); } /* 参加のハードルを下げる小さな但し書き */ .invite-meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .invite-meta span { font-size: 11.5px; letter-spacing: .04em; color: var(--sumi-2); background: var(--gold-mist); border: 1px solid var(--gold-pale); border-radius: 100px; padding: 4px 13px; line-height: 1.7; } @media (max-width: 480px) { .invite { padding: 30px 18px 24px; } .invite-h-sub { font-size: 15px; } .invite-h-sub .kw { font-size: 19px; } .invite-h-main { font-size: 20.5px; } .invite-body { grid-template-columns: 1fr; gap: 16px; margin-top: 22px; } .invite-fig img { width: 150px; margin: 0 auto; } .invite-text p { font-size: 14px; } } /* ─── 4段の階段 ────────────────────────────────────── */ /* ヒーローの主役ビジュアル。左右いっぱいに広げて印象を出す */ .hero-illust { position: relative; margin: 26px -32px 24px; } .hero-illust img { width: 100%; display: block; border-radius: 0; } .hero-illust-cap { display: inline-flex; align-items: center; margin-top: -14px; padding: 11px 22px; background: var(--white); border: 1.5px solid var(--gold-2); border-radius: 100px; font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 14.5px; letter-spacing: .02em; color: var(--sumi); line-height: 1.7; box-shadow: 3px 3px 0 var(--gold-pale); } .hero-illust-cap b { color: var(--pink, #B06D7C); font-weight: 700; } @media (max-width: 480px) { .hero-illust { margin: 20px -20px 20px; } .hero-illust-cap { font-size: 12.5px; padding: 9px 16px; } } .stair-illust { margin-bottom: 20px; } .stair-illust img { width: 100%; border-radius: var(--r); display: block; } /* 4段＝縦の流れ。丸数字を線でつないで「順番」を見せる */ .stair { list-style: none; position: relative; padding: 4px 0 0; } .stair-step { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 0 0 26px 0; } .stair-step:last-child { padding-bottom: 0; } /* つなぎ線 */ .stair-step::before { content: ""; position: absolute; left: 18px; top: 34px; bottom: 0; width: 1px; background: var(--beige); } .stair-step:last-child::before { display: none; } .stair-dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-mist); border: 1.5px solid var(--gold); color: var(--gold-2); position: relative; z-index: 1; } .stair-dot .ic { width: 20px; height: 20px; } /* 順番はアイコンに譲って、名前の頭へ小さく */ .stair-no { font-family: "Cormorant Garamond", serif; font-weight: 600; font-style: normal; font-size: 13px; letter-spacing: .08em; color: var(--gold-2); margin-right: 9px; vertical-align: .12em; } .stair-body { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; } /* 段の名前と役割を1行に並べる。「観察 ─ 材料を集める」の主従を横で見せる */ .stair-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .stair-name { font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 20px; line-height: 1.5; letter-spacing: .12em; color: var(--sumi); } .stair-name ruby rt { font-size: .38em; font-weight: 400; letter-spacing: .04em; } .stair-sub { font-size: 11.5px; color: var(--gold-2); letter-spacing: .1em; line-height: 1.7; border: 1px solid var(--gold-pale); border-radius: 100px; padding: 2px 10px; background: var(--gold-mist); } .stair-desc { font-size: 13.5px; color: var(--sumi-2); line-height: 1.95; } .stair-desc b { font-weight: 500; color: var(--sumi); background: linear-gradient(transparent 64%, var(--gold-pale) 64%); } /* ゴール */ .stair-step.goal { padding-bottom: 0; } /* ゴールの印だけ冠にして、4段の丸数字とは別格に見せる */ .stair-step.goal .stair-dot { background: var(--goal-bg); border-color: var(--goal-bg); color: var(--gold); width: 42px; height: 42px; box-shadow: 0 0 0 3px var(--gold-mist); } .stair-step.goal .stair-dot svg { display: block; } .stair-step.goal .stair-body { background: var(--goal-bg); border-radius: 12px; padding: 15px 18px; margin-top: -3px; } .goal-name { font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 20px; letter-spacing: .11em; color: var(--white); line-height: 1.55; } .goal-name ruby rt { font-size: .36em; font-weight: 400; letter-spacing: .04em; } .goal-sub { font-size: 12px; color: rgba(255,255,255,.82); letter-spacing: .04em; margin-top: 5px; line-height: 1.8; } .stair-note { margin-top: 20px; font-size: 13px; text-align: center; color: var(--gray); line-height: 2; } .stair-note b { color: var(--sumi); font-weight: 400; background: linear-gradient(transparent 64%, var(--gold-pale) 64%); } /* ─── 結果カードのサンプル ─────────────────────────── 「1枚のカードが届く」感を出すため、台紙（sc-panel）の上に本体（samplecard）を載せる二重構造。 */ .sc-panel { position: relative; background: var(--gold-mist); border-radius: 18px; padding: 26px 16px; } .sample-tag { position: absolute; top: -13px; right: 14px; background: var(--gold); border-radius: 100px; padding: 5px 18px; font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 11px; letter-spacing: .24em; color: var(--white); box-shadow: 0 2px 8px rgba(196,163,90,.35); } .samplecard { position: relative; background: var(--white); border-radius: 6px; padding: 30px 20px 26px; text-align: center; box-shadow: 0 4px 20px rgba(58,58,55,.07); } /* 賞状のような四隅の飾り罫 */ .sc-corner { position: absolute; width: 16px; height: 16px; } .sc-corner.tl { top: 10px; left: 10px; border-top: 1.5px solid var(--gold); border-left: 1.5px solid var(--gold); } .sc-corner.tr { top: 10px; right: 10px; border-top: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); } .sc-corner.bl { bottom: 10px; left: 10px; border-bottom: 1.5px solid var(--gold); border-left: 1.5px solid var(--gold); } .sc-corner.br { bottom: 10px; right: 10px; border-bottom: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); } .sc-en { margin-bottom: 16px; font-size: 10.5px; } /* 絵文字ではなく、段の頭文字をあしらった円章 */ .sc-medal { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%; background: var(--gold-mist); border: 1.5px solid var(--gold); box-shadow: 0 0 0 4px var(--white), 0 0 0 5.5px var(--gold-pale); } .sc-medal { color: var(--gold-2); } .sc-medal .ic { width: 28px; height: 28px; stroke-width: 1.5; } .sc-title { font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 19px; line-height: 1.75; letter-spacing: .05em; color: var(--sumi); } /* 段位を1文字で見せる。カードの視線の落ち先 */ .sc-rank { margin: 12px 0 16px; line-height: 1; } .sc-rank-no { display: block; font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 46px; color: var(--gold); line-height: 1.05; letter-spacing: .02em; font-variant-numeric: lining-nums; } .sc-rank-lb { display: block; margin-top: 4px; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 11px; letter-spacing: .26em; color: var(--sumi-2); font-variant-numeric: lining-nums; } /* 「できていない量」ではなく「これから伸びる幅」を見せるブロック。バーは全体＝これから／濃い部分＝いま、で伸びしろが面積になる */ .sc-growth { background: var(--gold-mist); border: 1px solid var(--gold-pale); border-radius: 12px; padding: 18px 18px 18px; margin-top: 8px; } /* 「伸びしろ」がこのカードの主役なので、ラベルを帯にして立たせる */ .sc-growth-lb { display: inline-block; background: var(--gold); color: var(--white); border-radius: 100px; padding: 5px 16px; font-size: 12px; font-weight: 500; letter-spacing: .14em; line-height: 1.7; box-shadow: 0 2px 6px rgba(196,163,90,.28); } .sc-growth-name { font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 24px; letter-spacing: .16em; color: var(--sumi); line-height: 1.5; margin-top: 10px; } .growth-bar { height: 10px; border-radius: 5px; margin-top: 12px; background: repeating-linear-gradient(-45deg, var(--gold-pale) 0 4px, var(--white) 4px 8px); border: 1px solid var(--gold-pale); position: relative; overflow: hidden; } .growth-bar i { position: absolute; top: 0; left: 0; bottom: 0; width: var(--v, 20%); background: var(--gold); border-radius: 5px 0 0 5px; } .growth-legend { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; letter-spacing: .1em; line-height: 1.6; } .growth-legend .a { color: var(--gold-2); } .growth-legend .b { color: var(--sumi-2); } .sc-growth-txt { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--gold-pale); font-size: 12.5px; line-height: 1.95; color: var(--sumi-2); letter-spacing: .02em; } .sc-growth-txt b { font-weight: 500; color: var(--sumi); } .sc-bars { display: flex; flex-direction: column; gap: 9px; text-align: left; margin: 22px 0 20px; padding: 18px 4px 0; border-top: 1px solid var(--beige); } .scb { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 12px; font-size: 12px; color: var(--sumi-2); letter-spacing: .08em; } .scb span ruby rt { font-size: .5em; letter-spacing: 0; } /* i が下地（4段ぶん同じ長さ）、::before が実際の伸び具合 */ .scb i { display: block; height: 6px; border-radius: 3px; background: var(--beige); position: relative; } .scb i::before { content:""; position: absolute; top: 0; left: 0; bottom: 0; width: var(--v, 50%); background: var(--sumi-2); border-radius: 3px; } .scb.stuck { color: var(--gold-2); font-weight: 500; } .scb.stuck i::before { background: var(--gold); } .sc-foot { padding-top: 16px; border-top: 1px solid var(--beige); font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 15px; letter-spacing: .1em; color: var(--sumi); } .sc-foot-en { margin-top: 5px; font-family: "Noto Serif JP", serif; font-size: 11.5px; letter-spacing: .18em; color: var(--gold-2); } @media (max-width: 480px) { .sc-panel { padding: 24px 12px; } .samplecard { padding: 28px 15px 24px; } .sc-title { font-size: 17px; } .sc-rank-no { font-size: 40px; } } /* ─── この体験のこと（1枚のカードに統合）───────────── 節を分けずに枠でくくると「1つの説明書」として読める。小見出しは枠にまたがる帯タグで、読む単位の切れ目を作る。 */ .aboutcard { position: relative; border: 1.5px solid var(--gold); border-radius: 14px; padding: 30px 20px 26px; overflow: hidden; } /* 生薬の枝葉のあしらい。カードの空いた隅に置く共通パーツ。 --os で大きさ、--orot で傾き、位置は .orn-tr / tl / br / bl で指定。読ませるものではないので、濃さは 3〜5割に抑える */ .orn { position: absolute; width: var(--os, 74px); height: var(--os, 74px); color: var(--gold); pointer-events: none; } .orn .orn-sprig { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: var(--oop, .38); transform: rotate(var(--orot, 14deg)); } .orn .orn-spark { position: absolute; color: var(--gold); } .orn .orn-spark.s1 { width: 13px; height: 13px; top: 6px; left: -6px; opacity: .55; } .orn .orn-spark.s2 { width: 8px; height: 8px; top: 40px; left: 2px; opacity: .38; } .orn-tr { top: 6px; right: 14px; } .orn-tl { top: 6px; left: 14px; } .orn-br { bottom: 6px; right: 14px; } .orn-bl { bottom: 6px; left: 14px; } /* 左置きは左右を反転して、枝の向きが内側を向くようにする */ .orn-tl .orn-sprig, .orn-bl .orn-sprig { transform: rotate(var(--orot, 14deg)) scaleX(-1); } .orn-tl .orn-spark.s1, .orn-bl .orn-spark.s1 { left: auto; right: -6px; } .orn-tl .orn-spark.s2, .orn-bl .orn-spark.s2 { left: auto; right: 2px; } @media (max-width: 480px) { .orn { --os: 58px; } .orn-tr, .orn-tl { top: 4px; } .orn-br, .orn-bl { bottom: 4px; } .orn-tr, .orn-br { right: 10px; } .orn-tl, .orn-bl { left: 10px; } } .tag-band { display: inline-block; background: var(--gold-pale); border-radius: 4px; padding: 5px 14px; font-size: 13px; font-weight: 500; letter-spacing: .14em; color: var(--sumi); line-height: 1.7; margin-bottom: 16px; } .ac-lead { font-size: 16px; line-height: 1.95; letter-spacing: .02em; } .ac-lead b { font-weight: 500; color: var(--sumi); background: linear-gradient(transparent 64%, var(--gold-pale) 64%); } .ac-body { margin-top: 14px; font-size: 14px; line-height: 2.05; color: var(--sumi-2); letter-spacing: .02em; } .ac-body em { font-style: normal; font-weight: 500; color: var(--sumi); background: linear-gradient(transparent 64%, var(--gold-pale) 64%); } .ac-div { border: 0; border-top: 1px dashed var(--gold-pale); margin: 24px 0 22px; } /* ─── 結果で届くもの ───────────────────────────────── */ /* ─── 結果で届くもの ───────────────────────────────── ①② は体験そのもの、③④ はあなた自身のこと。役割が違うので、見出しで2つに分けて見せる */ .gets-lb { display: inline-block; margin: 0 0 12px; font-size: 13px; font-weight: 500; letter-spacing: .12em; line-height: 1.7; color: var(--gold-2); border-bottom: 2px solid var(--gold-pale); padding-bottom: 3px; } .gets-lb.mark { color: var(--sumi); border-bottom-color: var(--gold); } .gets + .gets-lb { margin-top: 28px; } .gets { list-style: none; display: flex; flex-direction: column; gap: 16px; } .gets li { position: relative; padding-left: 42px; } .gets li b { display: block; width: fit-content; font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 18px; color: var(--sumi); letter-spacing: .04em; line-height: 1.6; } .gets li > span:last-child { display: block; margin-top: 4px; font-size: 13.5px; color: var(--sumi-2); line-height: 1.85; letter-spacing: .02em; } .gets .n { position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-mist); border: 1px solid var(--gold-pale); font-family: "Noto Serif JP", serif; font-size: 14px; color: var(--gold-2); } /* ③④＝伸び代のほうを主役に */ .gets.you .n { background: var(--gold); border-color: var(--gold); color: var(--white); } .gets.you li b { font-size: 19px; background: linear-gradient(transparent 66%, var(--gold-pale) 66%); padding: 0 .1em; } @media (max-width: 480px) { .gets li b { font-size: 16.5px; } .gets.you li b { font-size: 17.5px; } } /* ─── 行き先（Before / After）───────────────────────── */ .ac-goal { margin: 26px 0 12px; font-size: 14.5px; font-weight: 500; color: var(--sumi); letter-spacing: .04em; } .zones { display: grid; grid-template-columns: 1fr 30px 1fr; align-items: stretch; gap: 6px; } .zone { border-radius: 10px; padding: 16px 10px; text-align: center; display: flex; flex-direction: column; justify-content: center; } .zone.from { background: var(--white); border: 1.5px solid var(--beige); } .zone.to { background: var(--goal-bg); color: var(--white); } .zone-name { font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 14.5px; line-height: 1.6; letter-spacing: .08em; } .zone.to .zone-name { color: var(--white); } .zone-sub { font-size: 11px; line-height: 1.85; margin-top: 6px; opacity: .8; } .zone-arrow { display: grid; place-items: center; color: var(--gold); font-size: 16px; } @media (max-width: 480px) { .aboutcard { padding: 26px 15px 22px; } .ac-lead { font-size: 15px; } .ac-body { font-size: 13.5px; } .gets li { font-size: 13px; } } /* ─── 最終CTA ──────────────────────────────────────── */ .finalcta { position: relative; overflow: hidden; background: var(--white); border: 1.5px solid var(--gold); border-radius: var(--r); padding: 36px 22px 38px; text-align: center; margin-bottom: 26px; } .final-script { margin-bottom: 4px; } .final-jp { font-size: 12px; letter-spacing: .34em; color: var(--gray); margin-bottom: 22px; } .final-note { margin-top: 18px; font-size: 12.5px; line-height: 2; } .foot { border-top: 1px solid var(--beige); padding: 24px 0 40px; display: flex; justify-content: space-between; align-items: baseline; } .foot-brand { font-family: "Cormorant Garamond", serif; font-weight: 500; letter-spacing: .42em; font-size: 15px; color: var(--gold); } .foot-txt { font-size: 11px; color: var(--gray-2); letter-spacing: .06em; } /* ─── 設問画面 ─────────────────────────────────────── モデル元の構成：番号＋英字 → パート名（マーカー）→ 導入文 → ショウコさんの一言 → 設問カード（丸つき選択肢） ─────────────────────────────────────────────── */ .quiz-header { padding: 28px 0 0; } .progress-bar { height: 3px; background: var(--beige); border-radius: 2px; overflow: hidden; } .progress-fill { height: 100%; width: 0; background: var(--gold); transition: width .35s ease; } .q-dots { display: flex; gap: 4px; justify-content: center; margin-top: 14px; } .q-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--beige); transition: background .25s, transform .25s; } .q-dots span.done { background: var(--gold-pale); } .q-dots span.now { background: var(--gold); transform: scale(1.4); } /* パートの見出し */ .q-head { padding: 30px 0 0; } .q-eyebrow { display: flex; align-items: baseline; gap: 12px; } .q-no { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 17px; letter-spacing: .16em; color: var(--gold-2); } .q-script { font-family: "Sacramento", cursive; font-size: 26px; color: var(--gold); line-height: 1.2; } .q-part-h { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 22px; letter-spacing: .12em; margin-top: 4px; } .q-partlead { font-size: 13.5px; color: var(--gray); line-height: 1.95; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--beige); } /* ショウコさんの一言 */ .q-coach { display: flex; gap: 12px; align-items: flex-start; background: var(--gold-mist); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; padding: 16px 16px; margin: 18px 0 22px; } .qc-avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold-2); background: var(--white); } .qc-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .qc-name { font-size: 11.5px; letter-spacing: .1em; color: var(--gold-2); margin-bottom: 5px; } .qc-msg { font-size: 14.5px; line-height: 1.9; font-weight: 500; } /* 設問カード */ .q-card { background: var(--white); border: 1px solid var(--beige); border-radius: var(--r); padding: 24px 20px 26px; } .q-count { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 13px; letter-spacing: .12em; color: var(--gold-2); padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--beige); } .q-lead { font-size: 13.5px; letter-spacing: .1em; color: var(--gold-2); line-height: 1.95; white-space: pre-wrap; margin-bottom: 14px; } .q-text { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 19px; line-height: 1.95; letter-spacing: .05em; margin-bottom: 20px; } .q-hint { font-size: 13px; color: var(--gold-2); line-height: 1.85; background: var(--gold-mist); border-radius: 8px; padding: 12px 14px; margin-bottom: 18px; } .q-emphasis { font-family: "Noto Serif JP", serif; font-size: 15.5px; line-height: 2; letter-spacing: .04em; white-space: pre-wrap; text-align: center; color: var(--sumi); padding: 18px 12px; margin-bottom: 20px; border-top: 1px solid var(--beige); border-bottom: 1px solid var(--beige); } /* 選択肢（丸つき）*/ .q-answers { display: flex; flex-direction: column; gap: 10px; } .btn-answer { display: flex; align-items: center; gap: 13px; width: 100%; background: var(--white); border: 1px solid var(--beige); border-radius: 100px; padding: 15px 18px; font-family: inherit; color: var(--sumi); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; } .ba-radio { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; border: 1.5px solid var(--gold-pale); background: var(--white); position: relative; transition: border-color .15s; } .ba-label { font-size: 15px; font-weight: 500; line-height: 1.7; } .btn-answer:active { background: var(--gold-mist); border-color: var(--gold); } .btn-answer:active .ba-radio { border-color: var(--gold); } /* 前回の回答 */ .btn-answer.chosen { border-color: var(--gold); background: var(--gold-mist); } .btn-answer.chosen .ba-radio { border-color: var(--gold-2); } .btn-answer.chosen .ba-radio::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--gold-2); } .btn-answer.chosen::after { content: "前回"; margin-left: auto; flex: none; font-size: 10.5px; color: var(--gold-2); letter-spacing: .06em; } /* 設問の下：輪郭のピル型ボタン＋操作の案内 */ .q-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 46px; } .btn-pill-out { background: var(--white); border: 1.5px solid var(--gold-2); border-radius: 100px; padding: 12px 22px; font-family: "Noto Serif JP", serif; font-size: 14px; letter-spacing: .08em; color: var(--gold-2); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; } .btn-pill-out:disabled { opacity: .28; cursor: default; } .q-foot-note { font-size: 12px; color: var(--gray-2); letter-spacing: .06em; } @media (hover: hover) { .btn-pill-out:not(:disabled):hover { background: var(--gold-2); color: var(--white); } } @media (max-width: 400px) { .q-foot { gap: 8px; } .btn-pill-out { padding: 11px 18px; font-size: 13.5px; } .q-foot-note { font-size: 11.5px; } } @media (max-width: 400px) { .qc-avatar { width: 38px; height: 38px; flex: 0 0 38px; } .q-card { padding: 20px 16px 22px; } .btn-answer { padding: 14px 15px; gap: 11px; } .ba-label { font-size: 14.5px; } } /* ─── 結果画面 ─────────────────────────────────────── */ .result-hero { text-align: center; padding: 44px 0 30px; } .result-emoji { font-size: 46px; line-height: 1.2; margin: 14px 0 0; } .result-step { display: inline-block; background: var(--gold); color: var(--white); font-size: 11.5px; letter-spacing: .12em; padding: 2px 15px; border-radius: 100px; margin: 12px 0 12px; } .result-title { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 27px; line-height: 1.7; letter-spacing: .09em; } .result-tagline { font-size: 14px; color: var(--gray); margin-top: 10px; } .block { background: var(--white); border: 1px solid var(--beige); border-radius: var(--r); padding: 34px 22px; margin-bottom: 18px; } .block-en { margin-bottom: 8px; font-size: 10.5px; } .block-h { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 17px; line-height: 1.8; letter-spacing: .09em; text-align: center; margin-bottom: 18px; } .block-lead { font-size: 13px; color: var(--gray); text-align: center; margin-bottom: 22px; } .para { font-size: 15.5px; line-height: 2.15; white-space: pre-wrap; } .para + .para { margin-top: 16px; } .dim { color: var(--gray); font-size: 13.5px; } .block-number { text-align: center; background: var(--crit-mist); border-color: var(--crit); } .num-label { font-size: 13px; color: var(--sumi-2); line-height: 1.95; } .num-big { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 44px; color: var(--crit); line-height: 1.55; letter-spacing: .04em; margin: 4px 0; } .num-note { font-size: 13px; color: var(--gray); } .num-sub { font-size: 13px; color: var(--gray); margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--crit); line-height: 2; } .num-sub:empty { display: none; } .steps { display: flex; flex-direction: column; gap: 7px; } .steprow { display: block; padding: 16px 15px; border-radius: 10px; background: var(--white); border: 1px solid var(--beige); } /* 通過した段＝緑。つまずいた段＝砂金。まだの段＝グレー */ .steprow.ok { background: var(--moss-mist); border-color: var(--moss-pale); } .steprow.stuck { background: var(--gold-pale); border-color: var(--gold); } .step-no { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 10px; letter-spacing: .14em; color: var(--gray-2); } .steprow.ok .step-no { color: var(--moss); } .steprow.stuck .step-no { color: var(--gold-2); } /* 通過した段に「通過」の小ラベル（✓は字形が環境で崩れるため文字にする） */ .steprow.ok .step-name small::after { content: "通過"; display: inline-block; margin-left: 7px; padding: 0 6px; border: 1px solid var(--moss-pale); border-radius: 100px; background: var(--white); color: var(--moss); font-size: 9.5px; letter-spacing: .08em; vertical-align: 1px; } .step-name { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 15px; line-height: 1.5; letter-spacing: .08em; } .step-name small { display: block; font-family: "Noto Sans JP", sans-serif; font-size: 10.5px; color: var(--gray); letter-spacing: .04em; } .steprow.stuck .step-name small { color: var(--gold-2); } .step-meter { height: 4px; background: rgba(58,58,55,.1); border-radius: 3px; overflow: hidden; } .step-meter i { display: block; height: 100%; background: var(--gray-2); } .steprow.ok .step-meter i { background: var(--moss); } .steprow.stuck .step-meter i { background: var(--gold-2); } .step-val { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 11px; color: var(--gray-2); text-align: right; } .steprow.ok .step-val { color: var(--moss); } .steprow.stuck .step-val { color: var(--gold-2); } .callout { margin-top: 18px; padding: 17px 19px; background: var(--gold-mist); border-radius: 10px; border-left: 2px solid var(--gold); } .block-reframe { background: var(--gold-mist); } /* 「次の一歩」＝前に進む方向なので緑 */ .block-next { background: var(--moss-mist); border-color: var(--moss); } .block-next .block-h, .block-next .block-en { color: var(--moss-2); } .block-asset { background: var(--sumi); border-color: var(--sumi); } .block-asset .block-h { color: var(--gold); } .block-asset .para { color: #EAE7E0; } .quote { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 17px; line-height: 2; letter-spacing: .08em; color: var(--white); white-space: pre-wrap; text-align: center; } /* あの人は、どちらに近いのか */ .block-person { background: var(--gold-mist); border: 1.5px dashed var(--gold); text-align: center; } .yp-regulars { font-size: 13.5px; color: var(--gold-2); letter-spacing: .08em; margin-bottom: 12px; } .block-person .block-h { margin-bottom: 18px; } .yp-body { text-align: center; } .yp-freq { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--gold); font-size: 13.5px; line-height: 1.95; color: var(--gray); white-space: pre-wrap; } /* ─── タイプ別CTA ──────────────────────────────────── */ .block-cta { background: var(--white); border: 1.5px solid var(--gold); } .cta-type { font-family: "Noto Serif JP", serif; font-size: 15.5px; line-height: 2; letter-spacing: .05em; white-space: pre-wrap; text-align: center; background: var(--white); border: 1px dashed var(--gold); border-radius: 10px; padding: 15px 16px; margin-bottom: 18px; } .cta-videos { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 20px 0 22px; } .cta-videos li { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: baseline; padding: 12px 14px; background: var(--white); border: 1px solid var(--beige); border-radius: 10px; } .cv-day { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 11px; letter-spacing: .12em; color: var(--gold); } .cv-title { font-size: 13px; line-height: 1.85; color: var(--sumi-2); } .cta-note { margin-top: 14px; font-size: 11.5px; color: var(--gray); text-align: center; } .btn-secondary { display: block; width: 100%; background: var(--gold); color: var(--white); border: 1px solid var(--gold-2); border-radius: var(--r); padding: 15px; font-size: 15px; font-family: inherit; cursor: pointer; letter-spacing: .08em; box-shadow: 3px 3px 0 var(--sumi); } .btn-secondary:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--sumi); } .btn-text { display: block; width: 100%; background: none; border: none; color: var(--gray-2); padding: 12px; font-size: 13px; font-family: inherit; cursor: pointer; letter-spacing: .06em; } .result-actions { margin-top: 30px; display: flex; flex-direction: column; gap: 4px; } .disclaimer { margin: 26px 0 44px; text-align: center; font-size: 11px; color: var(--gray-2); line-height: 2; } /* ─── 集計中の画面 ─────────────────────────────────── */ .loading { min-height: 82vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; } .load-mark { position: relative; width: 60px; height: 60px; margin-bottom: 22px; } .load-mark svg { display: block; transform: rotate(-90deg); } .lc-track { stroke: var(--beige); } .lc-spin { stroke: var(--gold); animation: lcspin 1.1s linear infinite; transform-origin: 50% 50%; } @keyframes lcspin { to { transform: rotate(360deg); } } .load-leaf { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; } .load-en { font-family: "Cormorant Garamond", serif; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; font-size: 12px; color: var(--gold); margin-bottom: 12px; } .load-msg { font-family: "Noto Serif JP", serif; font-size: 16px; letter-spacing: .06em; color: var(--sumi-2); min-height: 2.4em; transition: color .3s; } .load-msg.done { color: var(--sumi); } .load-steps { display: flex; gap: 7px; margin-top: 20px; } .load-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--beige); transition: background .3s, transform .3s; } .load-dot.on { background: var(--gold); transform: scale(1.25); } /* ─── 設問画面の補助 ───────────────────────────────── */ .q-dots { display: flex; gap: 4px; justify-content: center; margin-top: 14px; } .q-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--beige); transition: background .25s, transform .25s; } .q-dots span.done { background: var(--gold-pale); } .q-dots span.now { background: var(--gold); transform: scale(1.4); } /* 前の回答が残っている選択肢 */ .btn-answer.chosen { border-color: var(--gold); background: var(--gold-mist); box-shadow: 3px 3px 0 var(--gold-pale); } .btn-answer.chosen::after { content: "前回の回答"; float: right; margin-left: 10px; font-size: 10.5px; color: var(--gold-2); letter-spacing: .06em; } /* ─── スクロールで浮かび上がる ─────────────────────── */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } /* ─── フォーカス・ホバー ───────────────────────────── */ button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; } @media (hover: hover) { .btn-answer:hover { border-color: var(--gold); background: var(--gold-mist); } .btn-start:hover { filter: brightness(1.04); } .btn-secondary:hover { filter: brightness(1.04); } .btn-text:hover { color: var(--sumi-2); } } /* ─── 2人に渡せるもの ─────────────────────────────── */ .plan-head { text-align: center; padding: 46px 0 26px; } .plan-h { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 22px; line-height: 1.85; letter-spacing: .1em; margin: 10px 0 12px; } .plan-lead { font-size: 14px; color: var(--gray); } .plan-body { display: flex; flex-direction: column; gap: 18px; } .plan-card { background: var(--white); border: 1.5px solid var(--gold-2); border-radius: var(--r); overflow: hidden; } .pc-head { background: var(--gold-mist); padding: 24px 20px 20px; border-bottom: 1.5px solid var(--gold-2); text-align: center; } .pc-who { font-family: "Noto Serif JP", serif; font-size: 19px; letter-spacing: .14em; line-height: 1.5; } .pc-type { display: inline-block; margin-top: 6px; padding: 2px 13px; border: 1px solid var(--gold); border-radius: 100px; font-size: 12.5px; color: var(--gold-2); letter-spacing: .06em; } .pc-sub { font-size: 13px; color: var(--gray); margin-top: 6px; } .pc-label { font-size: 11.5px; letter-spacing: .14em; color: var(--gold-2); margin-bottom: 10px; } .pc-why { background: var(--moss-mist); padding: 18px 20px; border-bottom: 1px solid var(--beige); } .pc-why .pc-label { color: var(--moss); } .pc-why-txt { font-size: 14.5px; line-height: 2; white-space: pre-wrap; } .pc-sec { padding: 18px 20px; border-bottom: 1px solid var(--beige); } .pc-foods { display: flex; flex-wrap: wrap; gap: 6px; } .pc-food { display: inline-block; background: var(--gold-mist); border: 1px solid var(--beige); border-radius: 100px; padding: 4px 12px; font-size: 13px; } .pc-note { margin-top: 12px; font-size: 13px; color: var(--gray); line-height: 1.9; } .pc-care { list-style: none; display: flex; flex-direction: column; gap: 12px; } .pc-care li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; } .pc-mark { font-size: 10.5px; text-align: center; letter-spacing: .04em; border-radius: 100px; padding: 3px 0; line-height: 1.5; } .pc-care li.ok .pc-mark { background: var(--moss-pale); color: var(--moss-2); } .pc-care li.ng .pc-mark { background: var(--crit-mist); color: var(--crit); } .pc-care-txt { font-size: 14.5px; line-height: 1.85; } .pc-reason { display: block; font-style: normal; margin-top: 3px; font-size: 12.5px; color: var(--gray); line-height: 1.8; } .pc-reason::before { content: "→ "; } .pc-word { padding: 18px 20px; background: var(--gold-mist); } .pc-word-txt { font-family: "Noto Serif JP", serif; font-size: 15.5px; line-height: 1.95; letter-spacing: .04em; } /* 体験の山場。ページ内の「到達点」の色（--goal-bg）で揃える */ .plan-close { margin-top: 22px; background: var(--goal-bg); color: var(--white); border-radius: var(--r); padding: 28px 22px; text-align: center; } .plan-close-h { font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 17px; line-height: 1.85; letter-spacing: .08em; color: var(--white); margin-bottom: 16px; } .plan-close-p { font-size: 14.5px; line-height: 2.05; white-space: pre-wrap; color: rgba(255,255,255,.88); } .plan-next { margin: 26px 0 48px; } /* 用語の注釈 */ .plan-note { margin-top: 14px; background: var(--white); border: 1px solid var(--beige); border-left: 3px solid var(--gold); border-radius: 0 var(--r) var(--r) 0; padding: 20px 20px; } .plan-note-h { font-size: 13px; letter-spacing: .08em; color: var(--gold-2); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--beige); } .plan-note-p { font-size: 14px; line-height: 2.05; white-space: pre-wrap; color: var(--sumi-2); } /* 痛みのメカニズム */ .pc-pain { background: var(--crit-mist); padding: 20px; border-bottom: 1px solid var(--beige); } .pc-pain .pc-label { color: var(--crit); } .pc-pain-h { font-family: "Noto Serif JP", serif; font-size: 17px; letter-spacing: .08em; line-height: 1.6; margin-bottom: 12px; } .pc-term { display: inline-block; margin-left: 10px; padding: 2px 10px; border: 1px solid var(--crit); border-radius: 100px; font-family: "Noto Sans JP", sans-serif; font-size: 11.5px; color: var(--crit); letter-spacing: .04em; vertical-align: 3px; } .pc-pain-b { font-size: 14.5px; line-height: 2; white-space: pre-wrap; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed var(--crit); } .pc-traits { list-style: none; display: flex; flex-direction: column; gap: 8px; } .pc-traits li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.85; } .pc-traits li::before { content: ""; position: absolute; left: 3px; top: .85em; width: 5px; height: 5px; border-radius: 50%; background: var(--crit); } .pc-contrast { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--crit); font-size: 13px; line-height: 1.9; color: var(--sumi-2); } /* ─── 2人の紹介 ───────────────────────────────────── */ .case-head { padding: 44px 0 22px; } /* 顔を左に置いて、名前と訴えを右に流す。 2人が「別の人」だと一目で分かるようにするための配置 */ .case-card { background: var(--white); border: 1.5px solid var(--gold-2); border-radius: var(--r); padding: 20px 20px 18px; margin-bottom: 12px; display: grid; grid-template-columns: 72px 1fr; gap: 22px; align-items: start; } .case-face { position: relative; grid-row: 1 / 3; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--gold-mist); border: 1.5px solid var(--gold-pale); margin-top: 2px; } .case-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } /* 2枚のあいだに挟んで、「訴えが一致している」ことを目で見せる */ .case-same { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; color: var(--gold-2); } .case-same::before, .case-same::after { content: ""; flex: 1; height: 1px; background: var(--gold-pale); } .case-same span { font-size: 12px; letter-spacing: .14em; white-space: nowrap; border: 1px solid var(--gold-pale); background: var(--gold-mist); border-radius: 100px; padding: 4px 14px; line-height: 1.7; } .case-who { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--beige); } @media (max-width: 400px) { .case-card { grid-template-columns: 60px 1fr; gap: 16px; padding: 18px 16px 16px; } .case-face { width: 60px; height: 60px; } } .case-who b { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 20px; letter-spacing: .12em; } .case-who span { font-size: 13px; color: var(--gray); } .case-line { font-size: 15px; line-height: 1.95; } .case-note { text-align: center; margin: 24px 0 26px; font-size: 14.5px; line-height: 2.05; color: var(--gray); } /* LP（読む）から体験（やる）へバトンを渡す一行。問いのあとに必ず緩和を置いて、身構えさせないようにする */ .case-ask { margin: 34px 0 18px; font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 23px; line-height: 1.75; letter-spacing: .05em; text-align: center; color: var(--sumi); } .case-relief { font-size: 13px; line-height: 2.15; text-align: center; color: var(--gray); margin-bottom: 28px; } .case-relief b { display: inline-block; margin-top: 2px; font-weight: 400; color: var(--sumi); background: linear-gradient(transparent 64%, var(--gold-pale) 64%); } @media (max-width: 480px) { .case-ask { font-size: 20px; } } .case-note b { color: var(--sumi); font-weight: 400; background: linear-gradient(transparent 62%, var(--gold-pale) 62%); } #screen-case .btn-start { margin-bottom: 48px; } /* ─── 2人の答えを見せる画面 ───────────────────────── */ .reveal-head { text-align: center; padding: 44px 0 26px; } .reveal-h { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 22px; letter-spacing: .12em; margin-top: 10px; } .reveal-body { display: flex; flex-direction: column; gap: 14px; } .rv { background: var(--white); border: 1.5px solid var(--gold-2); border-radius: var(--r); padding: 24px 22px 22px; } .rv-label { font-size: 13.5px; letter-spacing: .12em; color: var(--gold-2); padding-bottom: 13px; margin-bottom: 16px; border-bottom: 1px solid var(--beige); } .rv-row { display: grid; grid-template-columns: 108px 1fr; gap: 14px; align-items: center; } .rv-row + .rv-row { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--beige); } .rv-who { display: flex; align-items: center; gap: 10px; font-family: "Noto Serif JP", serif; font-size: 15.5px; font-weight: 500; color: var(--sumi); letter-spacing: .06em; } /* 名前の頭に置く小さい顔。2人の紹介と同じ絵 */ .who-face { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--gold-mist); border: 1.5px solid var(--gold-pale); } .who-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .rv-txt { font-size: 16px; line-height: 1.95; } /* 差が出ない項目 */ .rv-same { border-color: var(--beige); background: var(--cream); } .rv-same .rv-label { color: var(--gray); } .rv-note { margin-top: 12px; font-size: 13px; color: var(--gray); } /* 答え合わせ */ .rv-answer { background: var(--moss-mist); border: 1.5px solid var(--moss); border-radius: var(--r); padding: 20px 18px; font-size: 15px; line-height: 2; white-space: pre-wrap; } /* ショウコさんの一言 */ .rv-shoko { background: var(--gold-mist); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; padding: 15px 17px; font-size: 14.5px; line-height: 1.95; white-space: pre-wrap; color: var(--sumi-2); } .reveal-next { margin: 26px 0 48px; } .q-lead { font-size: 13.5px; letter-spacing: .1em; color: var(--gold-2); line-height: 1.95; white-space: pre-wrap; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--beige); } /* 設問の下に置く一言（感情のフック）*/ .q-emphasis { font-family: "Noto Serif JP", serif; font-size: 16px; line-height: 2.05; letter-spacing: .05em; white-space: pre-wrap; text-align: center; color: var(--sumi); padding: 20px 16px; margin: 4px 0 24px; border-top: 1px solid var(--beige); border-bottom: 1px solid var(--beige); } /* 設問のヒント */ .q-hint { font-size: 13px; color: var(--gold-2); line-height: 1.85; background: var(--gold-mist); border-radius: 8px; padding: 10px 14px; margin: -14px 0 24px; } /* 4段の記録（判定ではなく出来事として見せる） */ .sr-top { display: grid; grid-template-columns: 48px 1fr 62px; align-items: center; gap: 10px; } .sr-line { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--beige); font-size: 13.5px; line-height: 1.9; color: var(--sumi-2); } .steprow.stuck .sr-line { color: var(--sumi); } .steprow.ok .sr-line { color: var(--moss-2); } /* まだ見えていない世界 */ .block-scope { background: var(--gold-mist); border-color: var(--gold); } .scope-body { display: flex; flex-direction: column; gap: 16px; } .scope-item { display: grid; grid-template-columns: 68px 1fr; gap: 14px; align-items: start; background: var(--white); border: 1px solid var(--beige); border-radius: 10px; padding: 16px 16px; } .sc-n { font-family: "Noto Serif JP", serif; font-size: 21px; color: var(--gold-2); line-height: 1.4; letter-spacing: .02em; text-align: center; } .sc-lb { font-size: 11.5px; letter-spacing: .1em; color: var(--gray); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--beige); } .sc-bd { font-size: 14px; line-height: 1.95; white-space: pre-wrap; } /* ─── ふりがな ───────────────────────────────────── 行間が詰まらないよう、ルビの分だけ余裕を持たせる */ ruby { ruby-position: over; } rt { font-size: .46em; font-weight: 400; letter-spacing: .04em; color: var(--gray); transform: translateY(.15em); } /* 濃い地の上ではふりがなも白系にしないと読めない */ .block-asset rt, .plan-close rt, .gr-after rt { color: rgba(255,255,255,.72); } .pc-type rt { color: var(--gold); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .reveal { opacity: 1; transform: none; } } @media (max-width: 480px) { .sec-script.left { font-size: 26px; margin-bottom: 10px; } .sec-h.band { font-size: 19px; padding: 10px 13px; } .sec-lead.strong { font-size: 14px; } .stair-name { font-size: 18px; } .stair-desc { font-size: 13px; } } /* ─── 各画面の下部に置く「1つ前に戻る」 ───────────── 行き止まりの画面を作らないための共通フッター */ .screen-foot { display: flex; justify-content: center; margin: 18px 0 40px; } /* 「体験」は有料の体験レッスンと読まれやすいので、決断する場所（CTA・冒頭・注記）に必ず無料と書く */ .invite-meta span.free { background: var(--gold); border-color: var(--gold); color: var(--white); font-weight: 500; letter-spacing: .16em; } /* 提案カードの見出し。ここが2人を並べて見比べる場所なので、顔をいちばん大きく出して「誰の話か」を迷わせない */ .pc-who { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 21px; } .pc-who .who-face { width: 68px; height: 68px; border-width: 2px; } @media (max-width: 400px) { .rv-row { grid-template-columns: 92px 1fr; gap: 11px; } .who-face { width: 38px; height: 38px; } .pc-who { font-size: 19px; gap: 12px; } .pc-who .who-face { width: 58px; height: 58px; } } /* ─── 伸びしろ（結果ページの主役）───────────────── 「できていない」を数えるのではなく、いまの力に中医学を足すと何が増えるかを左右で見せる */ .block-growth .block-h { white-space: pre-line; } .gr-lead { margin-bottom: 22px; } .gr-lead .em, .gr-you .em { font-weight: 500; color: var(--sumi); background: linear-gradient(transparent 64%, var(--gold-pale) 64%); } .gr-compare { display: grid; grid-template-columns: 1fr; gap: 10px; } .gr-col { border-radius: 12px; padding: 18px 18px 16px; } .gr-col-h { font-size: 12px; letter-spacing: .12em; line-height: 1.7; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid currentColor; } .gr-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; } .gr-col li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.85; letter-spacing: .02em; } .gr-col li::before { content: ""; position: absolute; left: 2px; top: .78em; width: 6px; height: 6px; border-radius: 50%; } /* いま：白地。持っているものを否定しない */ .gr-now { background: var(--white); border: 1.5px solid var(--beige); color: var(--gray); } .gr-now .gr-col-h { color: var(--sumi-2); border-color: var(--beige); } .gr-now li { color: var(--sumi-2); } .gr-now li::before { background: var(--beige); } /* 中医学を足したあと：到達点の色 */ .gr-after { background: var(--goal-bg); color: var(--white); } .gr-after .gr-col-h { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.3); } .gr-after li { color: var(--white); } .gr-after li::before { background: rgba(255,255,255,.7); } .gr-plus { display: flex; align-items: center; gap: 10px; margin: 2px 0; } .gr-plus::before, .gr-plus::after { content: ""; flex: 1; height: 1px; background: var(--gold-pale); } .gr-plus span { font-size: 12.5px; letter-spacing: .12em; white-space: nowrap; background: var(--gold); color: var(--white); border-radius: 100px; padding: 5px 16px; line-height: 1.7; } /* 迷った段ごとの一言。ここだけ「あなた」の話に降りる */ .gr-you { margin-top: 22px; padding: 18px 18px 16px; background: var(--gold-mist); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; } .gr-you-h { font-size: 11.5px; letter-spacing: .16em; color: var(--gold-2); margin-bottom: 8px; line-height: 1.7; } .gr-you .para { font-size: 14.5px; line-height: 2; } .gr-close { margin-top: 18px; text-align: center; font-family: "Noto Serif JP", serif; font-weight: 500; font-size: 17px; letter-spacing: .06em; color: var(--sumi); } @media (min-width: 520px) { .gr-compare { grid-template-columns: 1fr auto 1fr; align-items: stretch; } .gr-plus { flex-direction: column; margin: 0; } .gr-plus::before, .gr-plus::after { width: 1px; height: auto; flex: 1; } .gr-plus span { writing-mode: horizontal-tb; font-size: 11.5px; padding: 5px 12px; } } /* 結果ページ上部の戻り口。主役ではないので文字リンク相当に留める */ .result-topback { padding: 20px 0 4px; } .btn-linkback { background: none; border: 0; cursor: pointer; font-family: "Noto Serif JP", serif; font-size: 13px; letter-spacing: .06em; color: var(--gold-2); line-height: 1.8; padding: 6px 2px; } @media (hover: hover) { .btn-linkback:hover { color: var(--sumi); } } /* 幅を広げたぶん、長文が横に伸びすぎないよう読み幅を残す */ .sec-lead, .ac-body, .credit, .block-lead, .para { max-width: 700px; } .sec-lead.center, .block-lead { margin-left: auto; margin-right: auto; } /* ─── ヒーローの見出し（キービジュアルと同じ組み方に揃える）─── バナーで見たものが、そのままLPの一番上に出るようにする */ .hero-head { position: relative; text-align: left; padding-top: 6px; } .hero-badge { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 3; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--white); border: 3px solid var(--gold-2); font-family: "Noto Serif JP", serif; font-weight: 700; font-size: 27px; letter-spacing: .1em; color: var(--gold-2); box-shadow: 4px 4px 0 var(--gold-pale); } .hero-ttl { font-family: "Noto Serif JP", serif; font-weight: 700; color: var(--sumi); letter-spacing: .03em; } .hero-ttl span { display: block; width: fit-content; background: var(--gold-pale); padding: 5px 18px; line-height: 1.3; box-shadow: 5px 5px 0 rgba(196,163,90,.22); } .hero-ttl .s1 { font-size: 42px; margin: 0 0 11px 108px; } .hero-ttl .s2 { font-size: 60px; margin: 0 0 0 auto; } .hero-sub { display: block; width: fit-content; margin: 16px 0 0 auto; padding: 8px 26px; background: var(--white); border: 2px solid var(--gold-2); border-radius: 100px; font-family: "Noto Serif JP", serif; font-weight: 600; font-size: 17px; letter-spacing: .24em; color: var(--gold-2); line-height: 1.7; box-shadow: 4px 4px 0 var(--gold-pale); } .hero-sub ruby rt { font-size: .42em; letter-spacing: .04em; font-weight: 400; } /* フックの頭に、もとの見出しを一行だけ残す */ .hook-q { display: block; margin-bottom: 12px; font-size: 17px; letter-spacing: .04em; color: var(--gold-2); font-weight: 500; } @media (max-width: 560px) { .hero-badge { width: 68px; height: 68px; font-size: 20px; border-width: 2.5px; } .hero-ttl .s1 { font-size: 27px; margin: 0 0 8px 78px; padding: 4px 12px; } .hero-ttl .s2 { font-size: 38px; padding: 4px 12px; } .hero-sub { font-size: 14px; padding: 7px 18px; letter-spacing: .18em; } .hook-q { font-size: 14.5px; } } /* ─── ヒーロー：キービジュアルの画像をそのまま置く ─── バナーとLPの見た目を完全に一致させるため、画像1枚で構成する */ .hero-kv { display: block; width: 100%; height: auto; margin: 0 -32px 26px; width: calc(100% + 64px); border-radius: 0; } @media (max-width: 560px) { .hero-kv { margin: 0 -20px 20px; width: calc(100% + 40px); } } /* ─── 結果の見本（キービジュアルから切り出した1枚）─── 判断する直前に「何が手に入るか」をもう一度、絵で見せる */ .ac-result { margin: 22px 0 26px; } .ac-result img { width: 100%; display: block; border-radius: 12px; border: 1px solid var(--beige); } .ac-result figcaption { margin-top: 10px; text-align: center; font-size: 12.5px; letter-spacing: .06em; color: var(--gray); line-height: 1.8; }