/* フォントは build.js の で preconnect + link して読む。 ここで @import すると CSS → フォントCSS → フォント本体 の直列待ちになり、 初期表示がまるごと遅れる。 */ /* ============================================================ あなたは私にとって — スタイル パステル基調・角丸・跳ねる動き。ライトテーマに振り切った設計。 ============================================================ */ :root { --paper: #FFFBF7; --paper-2: #FFF3EC; --ink: #4A3F55; --ink-soft: #7A6E88; /* コントラスト比 4.5:1（WCAG AA）を紙・白カードの両方で満たす値。 元の #A79BB4 は 2.6:1 しかなく、補足文がほぼ読めなかった。 */ --mute: #7B6A8D; --line: #F0E4DC; --pink: #FF8FA8; --peach: #FFB59E; --mint: #7FD8C0; --sky: #8FC9F0; --lav: #B9A6EC; --butter: #FFD98A; --accent: #FF6F91; /* accent を背景に敷いたときに乗せる文字色。白（2.65:1）では読めないため、 ブランドのピンクは一切変えずに文字側を濃くして 4.74:1 にしている。 */ --on-accent: #3A2F45; --accent-ink: #D82B58; /* リンクと強調。白背景で 4.5:1 を満たす */ --radius: 28px; --radius-sm: 18px; --shadow: 0 10px 30px rgba(120, 90, 110, .10); --shadow-lg: 0 20px 50px rgba(120, 90, 110, .16); --font: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; /* ヒーローの見切れカードで横スクロールを出さない */ background: var(--paper); color: var(--ink); font-family: var(--font); font-weight: 500; line-height: 1.9; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ---------- 背景のパステルblob ---------- */ .blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: drift 22s ease-in-out infinite; } .blob-1 { width: 42vw; height: 42vw; background: var(--pink); top: -12vw; left: -10vw; } .blob-2 { width: 38vw; height: 38vw; background: var(--sky); top: 24vh; right: -14vw; animation-delay: -7s; } .blob-3 { width: 34vw; height: 34vw; background: var(--butter); bottom: -8vw; left: 18vw; animation-delay: -14s; } @keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(3vw, -4vh) scale(1.08); } 66% { transform: translate(-3vw, 3vh) scale(.94); } } /* ---------- レイアウト ---------- */ .wrap { width: min(100% - 2.4rem, 44rem); margin-inline: auto; } .section { padding-block: clamp(2rem, 5vw, 3.2rem); } .stack { display: flex; flex-direction: column; gap: 1.2rem; } .center { text-align: center; align-items: center; } /* ---------- タイポ ---------- */ h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.4; text-wrap: balance; letter-spacing: .01em; } h1 { font-size: clamp(1.9rem, 6.5vw, 3rem); } h2 { font-size: clamp(1.35rem, 4.5vw, 1.9rem); } h3 { font-size: 1.1rem; } p { margin: 0; } a { color: var(--accent-ink); } .eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .14em; /* 淡いピンクのままだと 2.6:1。小さく字間も広いので特に読めない */ color: var(--accent-ink); text-transform: uppercase; } .lede { color: var(--ink-soft); font-size: 1.02rem; } .small { font-size: .84rem; color: var(--mute); line-height: 1.8; } /* ---------- ボタン ---------- キャンディ／ステッカー路線で統一。グラデ＋白フチ＋上のツヤ＋ふわっと浮く影。 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 1.05rem 2.4rem; font: inherit; font-weight: 800; font-size: 1.05rem; color: var(--on-accent); background: linear-gradient(160deg, #FFB49F 0%, #FF808F 54%, #F96A8E 100%); border: 2px solid rgba(255,255,255,.7); border-radius: 999px; box-shadow: 0 12px 22px -8px rgba(230,96,112,.45), 0 3px 7px rgba(230,96,112,.18), inset 0 2px 1px rgba(255,255,255,.6), inset 0 -3px 5px rgba(230,96,112,.20); cursor: pointer; text-decoration: none; transition: transform .14s ease, box-shadow .22s ease, filter .2s ease; } .btn:hover { transform: translateY(-2px); filter: saturate(1.05) brightness(1.03); box-shadow: 0 17px 28px -8px rgba(230,96,112,.5), 0 4px 9px rgba(230,96,112,.2), inset 0 2px 1px rgba(255,255,255,.6), inset 0 -3px 5px rgba(230,96,112,.20); } .btn:active { transform: translateY(1px); box-shadow: 0 5px 12px -5px rgba(230,96,112,.45), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -2px 4px rgba(230,96,112,.18); } .btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; } .btn[disabled] { opacity: .5; cursor: not-allowed; filter: grayscale(.2); transform: none; box-shadow: 0 6px 14px -8px rgba(230,96,112,.3), inset 0 2px 1px rgba(255,255,255,.5); } .btn[disabled]:hover { transform: none; filter: grayscale(.2); } /* 白いサブボタン（ステッカー風）。 */ .btn-ghost { background: #fff; color: var(--ink); border: 2px solid var(--line); box-shadow: 0 10px 20px -8px rgba(120,90,110,.28), inset 0 2px 1px rgba(255,255,255,.9); } .btn-ghost:hover { filter: none; transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 14px 24px -8px rgba(120,90,110,.32), inset 0 2px 1px #fff; } .btn-ghost:active { transform: translateY(1px); box-shadow: 0 5px 12px -5px rgba(120,90,110,.28), inset 0 2px 1px rgba(255,255,255,.9); } .btn-sm { padding: .7rem 1.5rem; font-size: .92rem; box-shadow: 0 8px 16px -7px rgba(230,96,112,.4), inset 0 1.5px 1px rgba(255,255,255,.55); } .btn-sm.btn-ghost { box-shadow: 0 8px 16px -7px rgba(120,90,110,.26), inset 0 1.5px 1px rgba(255,255,255,.9); } /* ---------- カード ---------- */ .card { background: #fff; border-radius: var(--radius); padding: clamp(1.4rem, 5vw, 2.2rem); box-shadow: var(--shadow); } /* ---------- キャラクター挿絵 ---------- 節と節のあいだに置くポーズ違いのイラスト。白背景の絵なので、 丸い白カードに載せて紙の背景に馴染ませる。少し傾けて手作り感を出す。 */ /* 結果カードの主役イラスト（絵文字の代わり）。透過PNG。 画像は正方形に正規化済みで周囲に余白があるぶん、幅を大きめに取る。 下端の余白（キャンバス比10%）は負のマージンで詰める。 */ .type-hero { width: min(290px, 74%); height: auto; display: block; margin: .1rem auto -2rem; filter: drop-shadow(0 8px 10px rgba(90,60,25,.16)); } /* セクション見出しの上に置く一枚。横長の情景イラストなので幅広で中央に。 */ .section-illust { display: flex; justify-content: center; margin: .4rem 0 -.4rem; } .section-illust img { width: min(380px, 88%); height: auto; display: block; filter: drop-shadow(0 8px 10px rgba(90,60,25,.14)); } /* ---------- 入力 ---------- */ .field { width: 100%; padding: 1.05rem 1.3rem; font: inherit; font-size: 1.15rem; font-weight: 700; color: var(--ink); background: #fff; /* 透明枠だと「ただの箱」に見えて入力欄だと気づきにくい。はっきりピンクの枠にし、 さらにゆっくり明滅させて「ここに入力」を促す。入力・フォーカスで明滅は止める。 */ border: 3px solid #FFC2CE; border-radius: var(--radius-sm); text-align: center; animation: fieldInvite 2.4s ease-in-out infinite; } @keyframes fieldInvite { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,111,145,0); border-color: #FFC2CE; } 50% { box-shadow: 0 0 0 5px rgba(255,111,145,.16); border-color: var(--accent); } } .field::placeholder { color: var(--mute); font-weight: 500; } .field:focus, .field:not(:placeholder-shown) { border-color: var(--accent); background: #fff; animation: none; } /* 枠線の色が変わるだけだと、色の差が見えづらい環境で今どこにいるかわからない。 ボタンや丸と同じく、キーボード操作のときははっきり縁を出す。 */ .field:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } /* ---------- ヒーロー ---------- */ /* ヒーロー全体（本文＋左右のキャラ＝絶対配置も .hero 基準）をほんの少し下げる。 margin-top なら中の要素ごと一緒に下がる。 */ .hero { margin-top: clamp(.75rem, 2vw, 1.75rem); padding-block: clamp(1.2rem, 3.5vw, 2.4rem) clamp(1.6rem, 4vw, 3rem); text-align: center; position: relative; } /* PCのファーストビューでは、もう少しだけ下げて中央寄りに（本文もキャラも一緒に下がる）。 */ @media (min-width: 64rem) { .hero { margin-top: clamp(2.4rem, 4vw, 4rem); } } /* ロゴ〜CTA〜注意書きは、背面の紙吹雪より前面に出す。 （紙吹雪 .hero-deco と左右のキャラ .hero-guests は z-index:0 で背面） */ .hero > :not(.hero-deco):not(.hero-guests) { position: relative; z-index: 1; } /* ---------- 紙吹雪＋キラキラ（CSSだけの装飾） ---------- 画像を使わず、小さな丸と四つ星をヒーロー全面に散らしてふわふわ動かす。 位置・色・大きさ・アニメ開始タイミングは各要素の --x/--y/--c/--s/--d で指定。 */ .hero-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .cf { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); background: var(--c); /* 文字（ロゴ・見出し）の背面に来ても読みづらくならないよう控えめに。 */ opacity: .4; animation: cfFloat 7s var(--d, 0s) ease-in-out infinite; } .cf.dot { border-radius: 50%; } /* 四つ星。とがった十字型に切り抜く */ .cf.spk { clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: .5; } @keyframes cfFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(18deg); } } @media (prefers-reduced-motion: reduce) { .cf { animation: none; } } /* 狭い画面では散らしすぎると窮屈。数を絞って軽くする */ @media (max-width: 40rem) { .cf:nth-child(2n) { display: none; } } .hero h1 { font-size: clamp(1.35rem, 5.8vw, 2.4rem); text-wrap: initial; line-height: 1.35; } .hero h1 .hl { color: var(--accent); } /* カードに焼かれるブランドフレーズ。h1 とは「あなた」の指す相手が 入れ替わるので、カードの言葉だと分かる形で見せる。 */ .hero-sub { margin-top: .9rem; font-size: 1.02rem; font-weight: 700; color: var(--mute); line-height: 1.7; } .hero-sub b { color: var(--accent-ink); } /* ---------- ヒーローの完成カード（主役） ---------- 中央カードをくっきり、左右を奥に見切れさせる。背後に黄色いハローを敷いて カード周りだけ明るくし、視線を集める。 */ .hero-cards { position: relative; display: grid; place-items: center; margin: 1.3rem auto .3rem; width: min(248px, 64vw); isolation: isolate; } .hero-cards::before { /* カード裏の光のハロー */ content: ""; position: absolute; z-index: 0; width: 128%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--butter) 0%, transparent 72%); opacity: .7; } .hc { border-radius: 20px; box-shadow: 0 14px 34px rgba(90,60,25,.20); display: block; } .hc-center { position: relative; z-index: 3; width: 100%; height: auto; animation: heroFloat 5.5s ease-in-out infinite; } .hc-side { position: absolute; z-index: 1; width: 82%; height: auto; top: 6%; opacity: .95; filter: saturate(.98); } .hc-l { transform: translateX(-48%) rotate(-9deg); } .hc-r { transform: translateX(48%) rotate(9deg); } @keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .hc-center { animation: none; } } .hero-cta { margin-top: 1.6rem; } /* CTA は世界観で唯一の高彩度。背景ピンクに埋もれないよう、はっきり出す。 */ .btn-hero { font-size: 1.15rem; letter-spacing: .02em; padding: 1.15rem 2.8rem; border-radius: 999px; color: var(--on-accent); border: 2px solid rgba(255,255,255,.7); /* ピンク〜コーラルのグラデ＋上のツヤ（inset白）＋下の陰影で、 マスコットと同じキャンディ／ステッカー感を出す。 */ background: linear-gradient(160deg, #FFB49F 0%, #FF808F 54%, #F96A8E 100%); box-shadow: 0 14px 26px -8px rgba(230,96,112,.50), 0 3px 8px rgba(230,96,112,.20), inset 0 2px 1px rgba(255,255,255,.65), inset 0 -4px 6px rgba(230,96,112,.22); transition: transform .14s ease, box-shadow .22s ease, filter .2s ease; } .btn-hero:hover { transform: translateY(-2px); filter: saturate(1.05) brightness(1.03); box-shadow: 0 20px 32px -8px rgba(230,96,112,.55), 0 4px 10px rgba(230,96,112,.22), inset 0 2px 1px rgba(255,255,255,.65), inset 0 -4px 6px rgba(230,96,112,.22); } .btn-hero:active { transform: translateY(2px); box-shadow: 0 6px 14px -6px rgba(230,96,112,.45), inset 0 2px 1px rgba(255,255,255,.55), inset 0 -2px 4px rgba(230,96,112,.20); } .hero-note { margin-top: .8rem; font-size: .82rem; font-weight: 700; color: var(--mute); } /* ---------- ヒーロー左右のマスコット ---------- 中央カラム(44rem)の左右にできる余白へ、キャラを2体立たせて寂しさを消す。 .hero を基準に絶対配置し、列の外側（right/left:100%）へ押し出すので、 画面が広いほど自然に外側へ離れ、本文には一切かぶらない。 余白が足りない画面（=列の左右にキャラを置けない幅）では丸ごと隠す。 */ .hero-guests { display: none; } @media (min-width: 64rem) { .hero-guests { display: block; } .hero-guest { position: absolute; width: clamp(250px, 23vw, 350px); /* 横長ジオラマ。以前の立ち姿より大きめ */ height: auto; z-index: 0; /* 本文カラムの外なので重ならない。party.png より奥 */ pointer-events: none; filter: drop-shadow(0 14px 20px rgba(90,60,25,.14)); animation: heroFloat 6.5s ease-in-out infinite; } /* 列の左端・右端のすぐ外側へ。上下2体ずつ積む。 透過PNGの余白ぶん(1.5rem)だけ列側に寄せて、間延びを防ぐ。 */ .hero-guest-l1, .hero-guest-l2 { right: calc(100% - 1.5rem); } .hero-guest-r1, .hero-guest-r2 { left: calc(100% - 1.5rem); } .hero-guest-l1 { top: clamp(.5rem, 2vh, 2.5rem); } .hero-guest-r1 { top: clamp(.5rem, 2vh, 2.5rem); animation-delay: -1.6s; } /* 下段の2体（タヌキ・リス）は少し小さく、内側へ寄せて視線をCTAへ流す。 */ .hero-guest-l2 { top: clamp(13rem, 30vh, 18rem); animation-delay: -3.2s; width: clamp(215px, 20vw, 305px); right: calc(100% - 3.5rem); } .hero-guest-r2 { top: clamp(13rem, 30vh, 18rem); animation-delay: -4.8s; width: clamp(215px, 20vw, 305px); left: calc(100% - 3.5rem); } } /* スマホでも、スクロール前からキャラが見えるように。下の左右の隅から 小さくのぞかせる（本文の背面 z-index:0 なので文字は上に乗る）。 デスクトップの4体は多すぎるので、上段の2体だけ使う。 */ @media (max-width: 63.99rem) { /* スマホでは絶対配置をやめ、サブテキストとボタンの間に横並びで大きく置く。 全身が見えるので被写体が隠れる問題も起きない。ボタンはキャラの下に出る。 */ .hero-guests { display: flex; justify-content: center; align-items: flex-end; width: 100%; margin: 1rem 0 .3rem; } .hero-guest { position: static; width: 47vw; height: auto; opacity: .97; filter: drop-shadow(0 8px 14px rgba(90,60,25,.14)); animation: none; } .hero-guest-l2, .hero-guest-r2 { display: none; } .hero-guest-l1 { margin-right: -3vw; } /* 中央で少し詰める */ .hero-guest-r1 { margin-left: -3vw; } /* 文字の圧を下げるため、ファーストビューの補足文はスマホでは省く。 */ .hero-note { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-guest { animation: none; } } /* ---------- サンプルカード（例示） ---------- 診断で作れるカードの実例を3枚、横に並べる。狭い画面では縦積み。 */ .sample-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.7rem, 2vw, 1.4rem); margin-top: 1.2rem; width: 100%; } .sample-card { margin: 0; } .sample-card img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: var(--shadow-lg); } @media (max-width: 40rem) { /* スマホでは3枚横並びだと文字が読めない。1枚ずつ縦に積んで大きく見せる */ .sample-cards { grid-template-columns: 1fr; max-width: 20rem; margin-inline: auto; } } /* ---------- ステップ ---------- */ .steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } .step { background: #fff; border-radius: var(--radius-sm); padding: 1.3rem; box-shadow: var(--shadow); } .step-n { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; margin-bottom: .6rem; background: var(--accent); color: var(--on-accent); border-radius: 50%; font-weight: 800; font-size: .95rem; } /* ---------- クイズ ---------- */ .progress-bar { height: 12px; background: var(--paper-2); border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--butter)); border-radius: 999px; transition: width .35s cubic-bezier(.34,1.3,.64,1); } .progress-meta { display: flex; justify-content: space-between; font-size: .82rem; font-weight: 700; color: var(--mute); } .q-text { font-size: clamp(1.25rem, 5vw, 1.7rem); font-weight: 800; text-align: center; line-height: 1.55; } /* 5段階スケール。上下に選択肢の文章、間に丸を5つ。 縦に5つ並べるより視線移動が少なく、24問でも疲れにくい。 */ .pole { font-size: clamp(.98rem, 3.6vw, 1.1rem); font-weight: 800; text-align: center; padding: .7rem 1rem; border-radius: var(--radius-sm); line-height: 1.6; } .pole-a { background: #FFF0F3; color: #C43E62; } .pole-b { background: #EDF4FB; color: #35719E; } .scale { display: flex; align-items: center; justify-content: center; /* 丸5つ＋隙間4つが1行に収まる限界が狭い。隙間を先に詰めて、 丸そのものが flex に縮められる（＝最小タップ領域を割る）のを避ける。 */ gap: clamp(.35rem, 2.5vw, 1rem); padding-block: .3rem; } .dot { border: 4px solid; border-radius: 50%; background: #fff; cursor: pointer; padding: 0; transition: transform .12s ease, background .12s ease; } .dot:hover { transform: scale(1.18); } .dot:active { transform: scale(.9); } .dot:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } /* 固定pxで組むと、5つ並べた合計が画面幅を超えた瞬間に flex が全部を縮め、 一番小さい丸が最小タップ領域（44px）を割る。実測で 44px → 43px になった。 幅に応じて縮む形にして、狭い画面でも「どちらともいえない」を44px以上に保つ。 （24問で一番押される選択肢が、一番押しにくいのは本末転倒なので） */ .dot-a2 { width: clamp(50px, 14vw, 58px); aspect-ratio: 1; border-color: #F2718F; } .dot-a1 { width: clamp(46px, 12vw, 50px); aspect-ratio: 1; border-color: #F7A8B8; } .dot-0 { width: clamp(44px, 11vw, 46px); aspect-ratio: 1; border-color: var(--line); } .dot-b1 { width: clamp(46px, 12vw, 50px); aspect-ratio: 1; border-color: #97BEDD; } .dot-b2 { width: clamp(50px, 14vw, 58px); aspect-ratio: 1; border-color: #5590BE; } .dot-a2:hover { background: #FFEDF1; } .dot-a1:hover { background: #FFF5F7; } .dot-0:hover { background: var(--paper-2); } .dot-b1:hover { background: #F3F8FC; } .dot-b2:hover { background: #EAF2F9; } .scale-hint { text-align: center; font-size: .8rem; color: var(--mute); font-weight: 700; } .q-enter { animation: slideIn .3s cubic-bezier(.34,1.4,.64,1) backwards; } @keyframes slideIn { from { opacity: 0; transform: translateX(24px); } } .checkpoint { text-align: center; font-weight: 800; color: var(--accent); animation: pop .4s cubic-bezier(.34,1.56,.64,1) backwards; } /* ---------- 結果カード ---------- */ .result-hero { text-align: center; } .type-card { position: relative; border-radius: var(--radius); padding: clamp(1.8rem, 6vw, 2.8rem) clamp(1.2rem, 5vw, 2rem); background: var(--t-soft, var(--paper-2)); box-shadow: var(--shadow-lg); overflow: hidden; text-align: center; } .type-card::after { content: ''; position: absolute; inset: 6px; border: 2px dashed rgba(255,255,255,.75); border-radius: calc(var(--radius) - 8px); pointer-events: none; } .type-code { display: inline-block; padding: .25rem .9rem; background: var(--t-color, var(--accent)); color: #fff; border-radius: 999px; font-size: .82rem; font-weight: 800; letter-spacing: .12em; } .type-emoji { font-size: clamp(4.5rem, 20vw, 7rem); line-height: 1; display: block; margin: .6rem 0 .2rem; } .type-name { font-size: clamp(1.5rem, 6vw, 2.2rem); color: var(--t-color, var(--ink)); } .type-catch { font-weight: 700; color: var(--ink-soft); } .to-from { display: flex; justify-content: center; gap: 1.6rem; font-weight: 700; font-size: .95rem; color: var(--ink-soft); flex-wrap: wrap; } .points { display: grid; gap: .7rem; } .point { display: grid; grid-template-columns: 1.6rem 1fr; gap: .7rem; align-items: start; background: #fff; border-radius: var(--radius-sm); padding: .9rem 1.1rem; box-shadow: var(--shadow); font-weight: 700; font-size: .96rem; } .point b { color: var(--t-color, var(--accent)); } .axis-row { display: grid; gap: .6rem; } .axis-item { display: grid; grid-template-columns: 4.5rem 1fr; gap: .8rem; align-items: center; font-size: .9rem; font-weight: 700; } .axis-track { position: relative; height: 10px; background: var(--paper-2); border-radius: 999px; } .axis-dot { position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: var(--t-color, var(--accent)); border: 3px solid #fff; transform: translate(-50%, -50%); box-shadow: var(--shadow); } .axis-ends { display: flex; justify-content: space-between; font-size: .74rem; color: var(--mute); font-weight: 500; } /* ---------- 常設ヘッダー ---------- */ .site-head { position: sticky; top: 0; z-index: 10; padding: .7rem clamp(1rem, 4vw, 1.6rem); background: rgba(255, 251, 247, .82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .brand { display: inline-flex; align-items: center; text-decoration: none; } /* ロゴはHTMLに直接埋め込んだSVG。背景は透過で、ページのフォントがそのまま効く */ .brand .logo-svg { height: clamp(34px, 9vw, 46px); width: auto; display: block; transition: transform .15s ease; } .brand:hover .logo-svg { transform: scale(1.04); } /* 右上のページ内リンク。1ページが長いので、読みたいところへ直接行けるようにする */ .site-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-nav { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; justify-content: flex-end; } .nav-link { padding: .45rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--mute); text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease; } .nav-link:hover { background: var(--paper-2); color: var(--ink); } .nav-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; } /* ヒーローのCTAと同じキャンディ／ステッカー路線を、ヘッダー用に小さく。 */ .nav-cta { margin-left: .35rem; padding: .5rem 1.15rem; color: var(--on-accent); border: 1.5px solid rgba(255,255,255,.75); background: linear-gradient(160deg, #FFB49F 0%, #FF808F 54%, #F96A8E 100%); box-shadow: 0 6px 13px -4px rgba(230,96,112,.45), inset 0 1.5px 1px rgba(255,255,255,.6), inset 0 -2px 3px rgba(230,96,112,.20); transition: transform .14s ease, box-shadow .2s ease, filter .2s ease; } .nav-cta:hover { color: var(--on-accent); filter: saturate(1.05) brightness(1.03); transform: translateY(-1px); background: linear-gradient(160deg, #FFB49F 0%, #FF808F 54%, #F96A8E 100%); box-shadow: 0 9px 17px -4px rgba(230,96,112,.5), inset 0 1.5px 1px rgba(255,255,255,.6), inset 0 -2px 3px rgba(230,96,112,.20); } .nav-cta:active { transform: translateY(1px); box-shadow: 0 3px 8px -3px rgba(230,96,112,.4), inset 0 1px 1px rgba(255,255,255,.5); } /* 画面が狭いと目次が2段になってヘッダーが太る。狭いときはCTAだけ残す */ @media (max-width: 40rem) { .nav-link:not(.nav-cta) { display: none; } } /* 固定ヘッダーのぶん、アンカーで飛んだ見出しが隠れないようにする */ [id] { scroll-margin-top: 5rem; } /* ---------- 前回の続き ---------- */ .resume { max-width: 26rem; margin: 1.6rem auto 0; padding: 1rem 1.2rem; background: #fff; border-radius: var(--radius-sm); border: 2px dashed var(--accent); box-shadow: var(--shadow); } .resume p { font-size: .92rem; margin-bottom: .8rem; } .resume-btns { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; } /* ---------- 読み上げにだけ渡す文字 ---------- 目では見えないが、ラベルや見出しとして機能させたいもの。 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* フォーカスを移すために tabindex を付けた見出しに、点線の枠を出さない。 移動先はスクロール位置でわかるので、見た目のノイズだけ消す。 */ [tabindex="-1"]:focus { outline: none; } .hero-logo { width: min(88%, 18rem); height: auto; display: block; margin: 0 auto 1.4rem; } /* ---------- 関係別の付き合い方 ---------- */ .rel-list { display: grid; gap: .9rem; } .rel { background: #fff; border-radius: var(--radius-sm); padding: 1.2rem 1.35rem; box-shadow: var(--shadow); border-top: 5px solid var(--t-color, var(--accent)); } .rel-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; } .rel-head i { font-style: normal; font-size: 1.4rem; } .rel-head b { font-size: 1.02rem; font-weight: 800; } .rel p { color: var(--ink-soft); font-size: .95rem; } /* 結果ページの読み物パート */ .kw-row { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } .kw { padding: .4rem 1rem; background: #fff; border-radius: 999px; font-size: .86rem; font-weight: 700; color: var(--ink-soft); box-shadow: var(--shadow); } .card.highlight { background: var(--t-soft, var(--paper-2)); border: 3px solid var(--t-color, var(--accent)); font-size: 1.02rem; font-weight: 700; line-height: 2; } /* 読み物パートは段落が続くので、間隔を明示する */ .card p + p { margin-top: 1.1rem; } .card.unsaid { background: #fff; border-left: 8px solid var(--t-color, var(--accent)); line-height: 2; } .share-row { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; } /* 保存・コピーは手動の保険。主役のシェアボタンと差をつけ、小さなテキストで置く。 */ .share-sub { display: flex; gap: .5rem; align-items: center; justify-content: center; } .share-sub-sep { color: var(--mute); } .btn-text { font: inherit; font-weight: 700; font-size: .9rem; color: var(--accent-ink); background: none; border: 0; padding: .3rem .2rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .btn-text:hover { filter: brightness(1.1); } .btn-text:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; } /* ---------- 「次はあなたの番」＝募集ハブへの導線 ---------- 独立した箱にすると浮くので、上に罫線を引くだけにして、 共有エリアの続きとして自然に見せる。 */ .recruit-cta { gap: .5rem; width: 100%; margin-top: 1.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); } .recruit-cta b { font-size: 1.05rem; } /* ---------- 一覧 ---------- */ /* 4×4 固定。狭い画面では2列に落とす（中途半端な3×5＋1を避ける） */ .type-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); } @media (max-width: 560px) { .type-grid { grid-template-columns: repeat(2, 1fr); } } .type-chip { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit; background: #fff; border-radius: var(--radius-sm); overflow: hidden; padding-bottom: .9rem; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; } .type-chip:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(90,60,25,.16); } /* 立ち絵はタイプ色の背景に。正方形の枠に収めてカードの大きさを揃える */ .type-chip-art { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: end center; /* 背景の色味を少し濃く：上から下へタイプ色をしっかり効かせる */ background: linear-gradient(180deg, var(--s, #f4f0ea) 0%, var(--c, #d8b98a) 190%); } .type-chip-art img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; display: block; } .type-chip-art i { font-style: normal; font-size: 2.8rem; align-self: center; } .type-chip b { font-size: .92rem; font-weight: 800; margin-top: .6rem; line-height: 1.25; } .type-chip-catch { font-size: .68rem; color: var(--mute); margin: .2rem .5rem 0; line-height: 1.3; } .type-chip small { font-size: .64rem; letter-spacing: .1em; font-weight: 800; margin-top: .35rem; color: var(--c, var(--mute)); opacity: .8; } /* ---------- 広告枠 ---------- 結果を見せる前に広告を挟まないこと。離脱の最大要因になる。 */ .ad-slot { min-height: 100px; display: grid; place-items: center; background: var(--paper-2); border-radius: var(--radius-sm); color: var(--mute); font-size: .78rem; font-weight: 700; } /* 広告タグが入るまでは枠ごと消す。「広告枠」と書かれた空箱が並ぶサイトは、 AdSense の審査で「未完成」「価値の低いコンテンツ」と判定される。 */ .ad-slot:empty { display: none; } /* ---------- FAQ ---------- */ details.faq { background: #fff; border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; box-shadow: var(--shadow); } details.faq + details.faq { margin-top: .7rem; } details.faq summary { font-weight: 800; cursor: pointer; list-style: none; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: '＋'; float: right; color: var(--accent); } details.faq[open] summary::after { content: '−'; } details.faq p { margin-top: .7rem; color: var(--ink-soft); font-size: .93rem; } /* ---------- フッター ---------- */ footer { border-top: 2px dashed var(--line); margin-top: 3rem; padding-block: 2.2rem 3rem; } .foot-links { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: center; font-size: .86rem; font-weight: 700; } .foot-links a { color: var(--ink-soft); text-decoration: none; } .foot-links a:hover { color: var(--accent-ink); } /* ---------- 記事ページ（規約・ポリシー） ---------- */ .doc { background: #fff; border-radius: var(--radius); padding: clamp(1.4rem, 5vw, 2.4rem); box-shadow: var(--shadow); } .doc h2 { margin-top: 2rem; font-size: 1.2rem; } .doc h2:first-child { margin-top: 0; } .doc p, .doc li { color: var(--ink-soft); font-size: .95rem; } .doc ul { padding-left: 1.2rem; } /* 意味のかたまりを行またぎで割らせない。狭い画面で「仕／事相手」のような 割れ方をすると、一気に素人くさく見える。入りきらないときだけ折る。 */ .nw { display: inline-block; } /* キーボードだけで使う人が、毎ページ先頭のロゴと目次を通り抜けずに 本文へ入れるようにする。普段は隠れていて、Tab したときだけ出る。 */ .skip { position: absolute; left: 50%; top: .5rem; transform: translateX(-50%); z-index: 10; padding: .7rem 1.4rem; background: #fff; color: var(--ink); font-weight: 800; border-radius: 999px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; } .skip:focus { opacity: 1; pointer-events: auto; outline: 3px solid var(--ink); outline-offset: 3px; } .hidden { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }