:root{ /* 配色案「09」Cream × Dark Teal 基準 #FBF6EF / #E6DDD2 / #BFC8C7 / #0F3D4A / #082A33 */ --ivory:#F3EEE1; /* ベース：クリーム */ --paper:#FBF6EF; /* カード・明るい面 */ --rose:#9FABA6; /* アクセント：くすみセージグレー（#BFC8C7系を濃度調整） */ --rose-deep:#7F8D88; --rose-soft:#DCDFD7; --rose-pale:#EEEAE0; /* サブ背景：淡いグレージュ */ --sage-pale:#ECEFE8; /* サブ背景：ごく淡いセージ */ --pink:#C6CDC8; --green:#0F3D4A; /* ボタン・重要見出し：ダークティール */ --green-deep:#082A33; --text:#3E4340; --text-soft:#8B9089; --line:#E4E0D4; --serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif; --sans:"Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans JP",sans-serif; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;} body{ font-family:var(--sans); color:var(--text); background:var(--ivory); font-size:15px; line-height:2; letter-spacing:.03em; overflow-x:hidden; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none;} .wrap{max-width:1040px;margin:0 auto;padding:0 22px;} /* ---------- motion ---------- スクロール表示アニメーションはJS動作時のみ有効（のインラインスクリプトが html に .js を付与）。JS無効・読み込み失敗時は .js が付かず本文は常時表示される。 さらに app.js 側の初期化が失敗した場合も、インライン側のフォールバックが load後2.5秒で全 .fade に .show を付与する（20260722・表示漏れ対策）。 */ .js .fade{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s ease;} .js .fade.show{opacity:1;transform:none;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .js .fade{opacity:1;transform:none;transition:none;} } /* ---------- header ---------- */ header{ position:sticky;top:0;z-index:50; background:rgba(253,251,248,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .header-inner{ max-width:1040px;margin:0 auto; display:flex;align-items:center;justify-content:space-between; padding:15px 22px; } /* ヘッダー左上はブランド名テキスト表示（20260810）。Mモノグラム単体（assets/logo/logo.svg）から変更。 ワードマークの正式ロゴデータは存在しないため「正式ロゴ画像」としては扱わず、 サイト内で使用済みの表現（明朝＝var(--serif)＋広めの字間）を流用する。Webフォント追加なし。 フッター（.footer-logo）は従来どおり正式Mモノグラムのまま。 */ .logo{ display:flex;align-items:center; font-family:var(--serif);font-size:19px;letter-spacing:.3em; line-height:1;color:var(--green-deep);white-space:nowrap; } .gnav{display:none;} .header-cta{ font-size:12px;letter-spacing:.08em; background:var(--green);color:#fff; padding:10px 20px;border-radius:999px; display:inline-flex;align-items:center;gap:6px; transition:background .3s; white-space:nowrap;flex-shrink:0; } .header-cta:hover{background:var(--green-deep);} /* ---------- buttons ---------- */ .btn-line{ display:inline-flex;align-items:center;justify-content:center;gap:10px; background:var(--green);color:#fff; font-size:15px;letter-spacing:.1em; min-height:54px; padding:15px 48px;border-radius:999px; box-shadow:0 8px 22px rgba(15,61,74,.16); transition:background .35s,transform .35s,box-shadow .35s; } .btn-line:hover{ background:var(--green-deep);transform:translateY(-1px); box-shadow:0 10px 26px rgba(15,61,74,.2); } .btn-line svg{flex-shrink:0;} .btn-note{ font-size:12px;color:var(--text-soft); margin-top:14px;letter-spacing:.04em;line-height:1.9; } /* ---------- first view ---------- 完成済み3Dビジュアル（実画像）をheroに統合。 スマホ：テキスト上〜中央左、画像は絶対配置でhero右下〜下部に重ねる。 PC：左テキスト、右画像。境界はグラデーションで溶かし、縦積み・分断はしない。 */ .fv{ position:relative;overflow:hidden; background:#F3EBE0; /* スマホ用画像の上端色と同一 */ padding:58px 22px 96px; } /* 画像はhero全面の背景。テキストはその上に重ねる */ .fv-img{ /* スマホ：幅100%・上端固定（コピーとパネルの高さ合わせを安定させる）。 画像は縦に長く作ってあり、ヒーローが伸びても下端に継ぎ目が出ない */ position:absolute;left:0;top:0;z-index:0; width:100%;height:auto;max-width:none; display:block; } /* 上部にごく淡いスクリムを重ね、文字の可読性を確保（境界線は出ない） */ .fv-fade{ position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg, rgba(243,235,224,.7) 0%, rgba(243,235,224,.35) 26%, rgba(243,235,224,0) 48%); } .fv-copy-block{ position:relative;z-index:2; max-width:1040px;margin:0 auto;text-align:left; } .fv-label{ display:inline-block; font-size:11.5px;letter-spacing:.08em;color:var(--text); background:rgba(255,255,255,.92); border:1px solid var(--line); padding:8px 17px;border-radius:999px; margin-bottom:26px; box-shadow:0 3px 10px rgba(140,128,108,.1); } .fv-copy{ font-family:var(--serif); font-size:22px;line-height:1.8;letter-spacing:.06em; color:var(--text);margin-bottom:18px;font-weight:500; /* スマホ：右側のパネルと共存するため左約60%に収める */ max-width:240px; } .fv-lead{ font-size:13px;line-height:2.1;color:var(--text-soft); margin-bottom:30px;max-width:235px; /* スマホ：パネル左端と重ねない */ } .fv-cta-row{margin-bottom:16px;} /* スマホ：CTAはコンパクトに（グラスを隠さない幅） */ .fv .btn-line{ min-height:50px; padding:14px 24px; font-size:14px; } .fv-doctor-note{ display:inline-flex;align-items:center;gap:9px; font-size:12px;color:var(--text-soft);letter-spacing:.06em; background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.9); padding:9px 20px;border-radius:999px; } /* ---------- 巨大な有機的色面（背景の主役。ページ内4箇所のみ） ---------- ・画面外へはみ出す ・非対称 ・カーブは大きく緩やか ・波と認識させない */ .blob{position:absolute;pointer-events:none;z-index:0;} .blob-gw-taupe{ top:60px;right:-58vw;width:115vw;height:820px; background:#E4DACB; border-radius:61% 39% 47% 53% / 42% 55% 45% 58%; transform:rotate(7deg); opacity:.7; } .blob-flow-sage{ top:-120px;left:-62vw;width:125vw;height:880px; background:#DCE2DE; border-radius:39% 61% 55% 45% / 60% 41% 59% 40%; transform:rotate(-5deg); } .blob-cta-greige{ bottom:-300px;left:-25vw;width:150vw;height:680px; background:#E8E5DC; border-radius:57% 43% 40% 60% / 47% 61% 39% 53%; transform:rotate(-3deg); } /* 色面の上に載るコンテンツ */ .fv .fv-copy-block, .gateway .wrap, .flow .wrap, .final-cta > *:not(.blob){position:relative;z-index:1;} /* ---------- gateway（BEAUTY / WOMEN / MEN） ---------- */ .gateway{background:var(--paper);padding:70px 0 76px;position:relative;overflow:hidden;} .gw-grid{display:grid;grid-template-columns:1fr;gap:14px;max-width:920px;margin:0 auto;} .gw-card{ position:relative; border:1px solid var(--line); border-radius:22px; padding:36px 28px 72px; text-align:left; transition:border-color .35s,box-shadow .35s,transform .35s; display:block; overflow:hidden; } /* 巨大な半透明の頭文字（静かな装飾） */ .gw-card::after{ content:attr(data-letter); position:absolute;right:-10px;bottom:-42px; font-family:var(--serif); font-size:150px;line-height:1; color:rgba(15,61,74,.05); pointer-events:none; } .gw-card:hover{ border-color:var(--rose); box-shadow:0 14px 30px rgba(150,156,150,.16); transform:translateY(-3px); } .gw-card.beauty{background:#F4ECDD;} /* 淡いトープ寄り */ .gw-card.women{background:#F3ECE6;} /* ごく淡いピンクベージュ */ .gw-card.men{background:#EBEFEA;} /* 淡いセージグレー */ .gw-en{ font-family:var(--serif); font-size:20px;letter-spacing:.24em; color:var(--green);margin-bottom:6px; } .gw-title{ font-size:13.5px;font-weight:600;letter-spacing:.06em; color:var(--text);margin-bottom:8px; } .gw-desc{ font-size:12px;color:var(--text-soft);line-height:1.9; margin-bottom:14px; } /* 代表例（カタログ化しない・少数のみ） */ .gw-list{ list-style:none; display:grid;grid-template-columns:1fr 1fr;gap:7px 14px; margin-bottom:18px; } .gw-list li{ font-size:11.5px;color:var(--text);letter-spacing:.03em; padding-left:13px;position:relative;line-height:1.6; } .gw-list li::before{ content:"";position:absolute;left:0;top:9px; width:4px;height:4px;border-radius:50%; background:var(--rose); } .gw-go{ position:absolute;right:20px;bottom:18px; width:40px;height:40px;border-radius:50%; background:var(--green);color:#fff; display:flex;align-items:center;justify-content:center; font-size:15px; box-shadow:0 6px 14px rgba(15,61,74,.22); transition:background .3s,transform .3s; z-index:1; } .gw-card:hover .gw-go{background:var(--green-deep);transform:translateX(2px);} .gw-note{ display:inline-block; font-size:10.5px;letter-spacing:.06em;color:var(--text-soft); background:rgba(255,255,255,.7); border:1px solid var(--line); padding:3px 10px;border-radius:999px; margin-bottom:10px; } /* 目的別クイックナビ */ .quicknav{max-width:860px;margin:40px auto 0;text-align:center;} .quicknav p{ font-size:12px;letter-spacing:.14em;color:var(--text-soft); margin-bottom:16px; } .quicknav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;} .quicknav-links a{ font-size:12px;letter-spacing:.05em;color:var(--text); background:#fff; border:1px solid var(--line); padding:10px 18px;border-radius:999px; transition:border-color .3s,color .3s; } .quicknav-links a:hover{border-color:var(--rose);color:var(--green);} /* ---------- section base ---------- */ section{padding:88px 0;} .sec-eyebrow{ text-align:center;font-size:11px;letter-spacing:.32em; color:var(--rose);margin-bottom:12px; } .sec-title{ text-align:center;font-family:var(--serif); font-size:25px;letter-spacing:.16em;font-weight:500; color:var(--green-deep);margin-bottom:16px;line-height:1.8; } .sec-lead{ text-align:center;font-size:13.5px;color:var(--text-soft); max-width:600px;margin:0 auto 52px; } .divider{ display:flex;align-items:center;justify-content:center;gap:8px; margin:0 auto 30px; } .divider::before,.divider::after{ content:"";width:26px;height:1px;background:var(--rose);opacity:.6; } .divider i{ width:5px;height:5px;background:var(--rose); transform:rotate(45deg);display:block; } /* ---------- about ---------- */ .about{background:var(--paper);} .about-body{ max-width:620px;margin:0 auto; font-size:14px;line-height:2.4; text-align:center; } .about-points{ max-width:620px;margin:44px auto 0; display:grid;gap:12px;list-style:none; } .about-points li{ background:var(--ivory); border:1px solid var(--line); border-radius:14px; padding:16px 22px; font-size:13px;line-height:1.9; display:flex;gap:14px;align-items:flex-start; } .about-points li::before{ content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%; background:var(--rose);margin-top:10px; } /* ---------- reasons ---------- */ .reasons{background:var(--paper);} .reason-grid{ display:grid;grid-template-columns:1fr 1fr;gap:14px; max-width:780px;margin:0 auto; } .reason-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 20px;text-align:center; } .reason-card .icon{ width:50px;height:50px;margin:0 auto 16px; display:flex;align-items:center;justify-content:center; background:var(--rose-pale);border-radius:50%; } .reason-card h3{ font-size:14px;font-weight:600;letter-spacing:.06em; margin-bottom:8px;color:var(--green-deep); } .reason-card p{font-size:12px;color:var(--text-soft);line-height:1.9;} /* ---------- categories ---------- */ .categories{background:var(--paper);} .cat-grid{ display:grid;grid-template-columns:1fr 1fr;gap:13px; } .cat-card{ position:relative; background:linear-gradient(175deg,#FFFFFF 0%,var(--ivory) 100%); border:1px solid var(--line); border-radius:20px; padding:26px 14px 20px; text-align:center; display:flex;flex-direction:column;align-items:center; transition:border-color .35s,box-shadow .35s,transform .35s; overflow:hidden; } .cat-card::before{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:44px;height:3px;border-radius:0 0 4px 4px; background:var(--rose-soft); transition:width .35s,background .35s; } .cat-card:hover{ border-color:var(--rose); box-shadow:0 12px 28px rgba(150,156,150,.18); transform:translateY(-3px); } .cat-card:hover::before{width:100%;background:var(--rose);} .cat-icon{ width:58px;height:58px;margin-bottom:14px; display:flex;align-items:center;justify-content:center; background:#fff; border:1px solid var(--rose-soft); border-radius:50%; box-shadow:0 3px 10px rgba(150,156,150,.12); } .cat-card h3{ font-family:var(--serif); font-size:15px;font-weight:600;letter-spacing:.06em; color:var(--text);margin-bottom:7px;line-height:1.5; } .cat-card p{ font-size:11.5px;color:var(--text-soft);line-height:1.75; margin-bottom:14px;flex-grow:1; } .cat-more{ font-size:11.5px;letter-spacing:.1em;color:var(--green); display:inline-flex;align-items:center;gap:5px; border-bottom:1px solid transparent; transition:border-color .3s; } .cat-card:hover .cat-more{border-color:var(--green);} .cat-more::after{content:"›";font-size:14px;} .cat-note{ text-align:center;font-size:12px;color:var(--text-soft); margin-top:28px; } /* ---------- price ---------- */ .price{background:var(--paper);} .price-grid{ display:grid;grid-template-columns:1fr;gap:16px; max-width:760px;margin:0 auto; } .price-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px 24px; } .price-card-head{ display:flex;align-items:center;gap:12px; padding-bottom:16px;margin-bottom:18px; border-bottom:1px solid var(--rose-soft); } .price-card-head i{ flex-shrink:0;width:8px;height:8px;background:var(--rose); transform:rotate(45deg);display:block; } .price-card-head h3{ font-family:var(--serif); font-size:16px;font-weight:600;letter-spacing:.1em; color:var(--green-deep); } .price-card ul{list-style:none;} .price-card li{ display:flex;align-items:baseline;gap:10px; padding:9px 0; font-size:13px;line-height:1.7; } .price-card li + li{border-top:1px dashed var(--line);} .price-name{flex-shrink:1;} .price-dots{ flex-grow:1; border-bottom:1px dotted var(--rose-soft); transform:translateY(-4px); min-width:16px; } .price-value{ flex-shrink:0; font-size:13px;letter-spacing:.03em; color:var(--text); white-space:nowrap; } .price-value small{ font-size:10.5px;color:var(--text-soft);margin-right:3px; } .price-notes{ max-width:760px;margin:30px auto 0; background:#fff; border:1px solid var(--rose-soft); border-radius:16px; padding:22px 24px; } .price-notes ul{list-style:none;display:grid;gap:8px;} .price-notes li{ font-size:12px;color:var(--text-soft);line-height:1.9; padding-left:18px;position:relative; } .price-notes li::before{ content:"";position:absolute;left:0;top:11px; width:9px;height:1px;background:var(--rose); } /* ---------- subscription ---------- */ .subscription{background:var(--paper);} .sub-box{ max-width:720px;margin:0 auto; background: radial-gradient(ellipse 90% 80% at 50% 0%, rgba(214,213,201,.22), transparent 70%), var(--ivory); border:1px solid var(--rose-soft); border-radius:24px; padding:44px 26px; text-align:center; } .sub-lead{ font-size:13.5px;line-height:2.2;color:var(--text); max-width:540px;margin:0 auto 30px; } .sub-points{ display:grid;grid-template-columns:1fr;gap:12px; max-width:520px;margin:0 auto 32px; } .sub-point{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 20px; display:flex;align-items:center;gap:14px; text-align:left; } .sub-point .icon{ flex-shrink:0; width:40px;height:40px;border-radius:50%; background:var(--rose-pale); display:flex;align-items:center;justify-content:center; } .sub-point p{font-size:13px;line-height:1.8;} .sub-note{ font-size:12px;color:var(--text-soft);line-height:1.95; max-width:540px;margin:26px auto 0; } /* ---------- flow ---------- */ .flow{background:var(--paper);position:relative;overflow:hidden;} .flow-list{max-width:580px;margin:0 auto;position:relative;} .flow-list::before{ content:"";position:absolute;left:23px;top:28px;bottom:72px; width:1px;background:var(--rose);opacity:.45; } .flow-item{ position:relative; display:flex;gap:20px;align-items:flex-start; padding:16px 0; } .flow-num{ flex-shrink:0;width:46px;height:46px;border-radius:50%; background:#fff;border:1px solid var(--rose); color:var(--rose-deep); display:flex;align-items:center;justify-content:center; font-family:var(--serif);font-size:16px; position:relative;z-index:1; box-shadow:0 3px 8px rgba(150,156,150,.15); } .flow-body h3{ font-size:14.5px;font-weight:600;color:var(--green-deep); letter-spacing:.05em;margin-bottom:5px;padding-top:9px; } .flow-body p{font-size:12.5px;color:var(--text-soft);line-height:1.95;} .flow-cta{text-align:center;margin-top:48px;} /* ---------- FAQ ---------- */ .faq{background:var(--paper);} .faq-list{max-width:700px;margin:0 auto;} .faq-item{ border:1px solid var(--line); border-radius:16px; background:#fff; margin-bottom:13px;overflow:hidden; transition:border-color .3s; } .faq-item.open{border-color:var(--rose-soft);} .faq-q{ width:100%;text-align:left;border:none;background:none; font-family:var(--sans);font-size:13.5px;font-weight:600; color:var(--text);letter-spacing:.03em;line-height:1.8; padding:20px 50px 20px 22px;position:relative;cursor:pointer; } .faq-q::before{ content:"Q";font-family:var(--serif);color:var(--rose); margin-right:12px;font-size:16px; } .faq-q::after{ content:"";position:absolute;right:22px;top:50%; width:9px;height:9px; border-right:1.5px solid var(--rose); border-bottom:1.5px solid var(--rose); transform:translateY(-70%) rotate(45deg); transition:transform .35s; } .faq-item.open .faq-q::after{transform:translateY(-30%) rotate(-135deg);} .faq-a{max-height:0;overflow:hidden;transition:max-height .45s ease;} .faq-a-inner{ margin:0 22px 22px;padding-top:16px; font-size:13px;color:var(--text-soft);line-height:2.05; border-top:1px dashed var(--line); } .faq-a-inner::before{ content:"A";font-family:var(--serif);color:var(--green); margin-right:12px;font-size:15px; } /* ---------- trust ---------- */ .trust{background:var(--paper);} .trust-box{ max-width:700px;margin:0 auto; background:#fff; border:1px solid var(--rose-soft); border-radius:20px; padding:40px 28px; } .trust-box ul{list-style:none;display:grid;gap:16px;} .trust-box li{ font-size:13px;line-height:2.05; padding-left:24px;position:relative; } .trust-box li::before{ content:"";position:absolute;left:0;top:12px; width:11px;height:1px;background:var(--rose); } /* ---------- final CTA ---------- */ .final-cta{ position:relative;overflow:hidden; background:var(--paper); text-align:center; padding:96px 22px 120px; } .final-cta .fv-copy{font-size:22px;margin-bottom:16px;} .final-cta .sec-lead{margin-bottom:40px;} /* ---------- footer ---------- */ footer{ background:var(--green-deep);color:#EDE7DF; padding:60px 22px 120px; font-size:12.5px;letter-spacing:.04em; } .footer-inner{max-width:1040px;margin:0 auto;} .footer-brand{margin-bottom:38px;} /* フッターのブランド表示はヘッダー（.logo）と同じ考え方でテキスト表示（20260811）。 Mモノグラム画像（assets/logo/logo.svg）から変更。既存のテキスト用指定をそのまま使用する。 */ .footer-logo{ font-family:var(--serif);font-size:20px;letter-spacing:.32em; color:#fff;line-height:1.4; } .footer-logo small{ display:block;font-family:var(--sans); font-size:9px;letter-spacing:.22em;opacity:.7;margin-top:2px; } .footer-desc{ font-size:12px;line-height:2;opacity:.85; max-width:480px;margin-top:14px; } .footer-cols{ display:grid;grid-template-columns:1fr 1fr;gap:30px; padding:34px 0; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); margin-bottom:28px; } .footer-cols h4{ font-size:11px;letter-spacing:.2em;color:var(--pink); font-weight:600;margin-bottom:14px; } .footer-cols ul{list-style:none;display:grid;gap:9px;} .footer-cols a{opacity:.85;transition:opacity .3s;font-size:12px;} .footer-cols a:hover{opacity:1;text-decoration:underline;} .footer-note{font-size:11.5px;line-height:2.1;opacity:.75;} .copyright{margin-top:18px;font-size:10.5px;opacity:.5;letter-spacing:.08em;} /* ---------- sticky mobile CTA ---------- */ .sticky-cta{ position:fixed;left:0;right:0;bottom:0;z-index:60; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(253,251,248,.94); backdrop-filter:blur(10px); border-top:1px solid var(--line); display:flex;justify-content:center; transform:translateY(110%); transition:transform .4s ease; } .sticky-cta.visible{transform:none;} .sticky-cta .btn-line{ width:100%;max-width:420px; min-height:48px; padding:12px 20px;font-size:13.5px; box-shadow:0 4px 14px rgba(15,61,74,.18); } /* ---------- responsive ---------- */ @media (min-width:768px){ body{font-size:15.5px;} .fv{padding:120px 22px 140px;min-height:640px;display:flex;align-items:center;} .fv-img{top:0;bottom:auto;left:auto;right:0;width:100%;height:100%;object-fit:cover;object-position:right center;} .fv-fade{background:linear-gradient(90deg,rgba(243,235,224,.92) 0%,rgba(243,235,224,.6) 34%,rgba(243,235,224,0) 62%);} .fv-copy-block{width:100%;max-width:1040px;margin:0 auto;} .fv .btn-line{min-height:54px;padding:15px 48px;font-size:15px;} .fv-copy{font-size:38px;max-width:none;} .fv-lead{font-size:14.5px;max-width:440px;} /* 768〜1023px（タブレット）はナビ非表示のまま「ロゴ＋LINEボタン」の簡潔な ヘッダー構成にする（20260722指示）。通常ナビは1024px以上でのみ表示。 */ section{padding:108px 0;} .sec-title{font-size:29px;} .gw-grid{grid-template-columns:1.3fr 1fr 1fr;align-items:stretch;} .gw-card{padding:34px 28px 30px;} .reason-grid{grid-template-columns:repeat(4,1fr);} .cat-grid{grid-template-columns:repeat(4,1fr);gap:18px;} .cat-card{padding:32px 18px 24px;} .price-grid{grid-template-columns:1fr 1fr;} .price-card{padding:32px 30px;} .sub-box{padding:56px 60px;} .sub-points{grid-template-columns:1fr;} .footer-cols{grid-template-columns:repeat(3,1fr);} footer{padding-bottom:64px;} .sticky-cta{display:none;} } @media (min-width:1024px){ .gnav{ display:flex;gap:24px; font-size:12.5px;letter-spacing:.1em;color:var(--text-soft); } .gnav a{transition:color .3s;} .gnav a:hover{color:var(--green-deep);} } /* ===== 追加：全ページ共通コンポーネント ===== */ /* 下層ページヒーロー */ .page-hero{ position:relative;overflow:hidden; background: radial-gradient(ellipse 80% 60% at 80% 0%, rgba(255,255,252,.85), transparent 62%), linear-gradient(168deg,#FAF5EC 0%,#F1EBDD 100%); padding:72px 22px 64px; } .page-hero .wrap{max-width:1040px;} .ph-label{ display:inline-block;font-size:11px;letter-spacing:.26em;color:var(--rose-deep); border-bottom:1px solid var(--rose-soft);padding-bottom:7px;margin-bottom:22px; } .ph-title{ font-family:var(--serif);font-size:25px;line-height:1.75;letter-spacing:.08em; color:var(--text);font-weight:500;margin-bottom:18px; } .ph-lead{font-size:13.5px;line-height:2.15;color:var(--text-soft);margin-bottom:30px;max-width:560px;} .ph-cta{margin-bottom:14px;} /* 悩みチップ */ .concern-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;max-width:760px;margin:0 auto;} .concern{ background:#fff;border:1px solid var(--line);border-radius:14px; padding:16px 14px;text-align:center; font-size:12.5px;letter-spacing:.04em;color:var(--text); display:block;text-decoration:none; } a.concern{transition:border-color .3s,box-shadow .3s;} a.concern:hover{border-color:var(--rose);box-shadow:0 8px 18px rgba(150,156,150,.12);} /* 悩み→関連する選択肢（BEAUTY「気になる悩みから探す」拡張ガイド） */ .concern-guide{max-width:760px;margin:22px auto 0;display:flex;flex-direction:column;gap:12px;} .concern-guide-group{ background:#fff;border:1px solid var(--line);border-radius:16px; padding:18px 20px; } /* 悩みボタン（.concern → #concern-spots等）からのアンカー遷移時、stickyヘッダー （実測74.8px・PC/SP共通）に見出しが隠れないよう、薬剤カード（.prod[id]）と同じ 86pxだけスクロール位置を上にずらす。JSによる補正は行わない。 */ .concern-guide-group[id]{scroll-margin-top:86px;} .concern-guide-group h3{ font-size:13.5px;font-weight:600;letter-spacing:.05em;color:var(--green-deep); margin-bottom:10px; } .concern-guide-list{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0;} .concern-guide-list a{ font-size:11.5px;letter-spacing:.03em;color:var(--green-deep); background:var(--sage-pale);border-radius:999px;padding:5px 12px; text-decoration:none;display:inline-block; } /* タイプ解説ミニカード（ピルって何が違う？など） */ .type-grid{display:grid;grid-template-columns:1fr;gap:12px;max-width:760px;margin:0 auto;} .type-card{ background:#fff;border:1px solid var(--line);border-radius:16px; padding:20px 22px; } .type-card h3{ font-size:14px;font-weight:600;letter-spacing:.05em;color:var(--green-deep); margin-bottom:6px; } .type-card h3 small{ font-weight:400;font-size:11px;color:var(--text-soft);margin-left:8px;letter-spacing:.03em; } .type-card p{font-size:12.5px;color:var(--text-soft);line-height:1.9;} /* 商品カード */ .prod-grid{display:grid;grid-template-columns:1fr;gap:14px;max-width:860px;margin:0 auto;} .prod{ background:#fff;border:1px solid var(--line);border-radius:18px; padding:24px 22px;display:flex;flex-direction:column; } /* アンカー遷移（#single-cinal等）でstickyヘッダー（実測74.8px・PC/SP共通）にカード上端が 隠れないよう、ヘッダー高さ＋余白ぶんだけスクロール位置を上にずらす。 JSによるオフセット補正は行わず、このCSSのみで制御する。 */ .prod[id]{scroll-margin-top:86px;} .prod h3{ font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:.05em; color:var(--text);margin-bottom:6px;line-height:1.6; } .prod .p-desc{font-size:12.5px;color:var(--text-soft);line-height:1.9;margin-bottom:12px;} .p-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;} .p-tags span{ font-size:10.5px;letter-spacing:.04em;color:var(--green-deep); background:var(--sage-pale);border-radius:999px;padding:4px 11px; } .p-tags span.off{background:#F4ECDD;color:#8A6D3B;} .p-price{ border-top:1px dashed var(--line);padding-top:12px;margin-top:auto; } .p-price .row{ display:flex;justify-content:space-between;align-items:baseline; font-size:12.5px;padding:5px 0; } .p-price .row .term{color:var(--text-soft);} .p-price .row .val{letter-spacing:.03em;} .p-price .row .val small{font-size:10px;color:var(--text-soft);margin-right:2px;} .price-tbd{font-size:12px;color:var(--text-soft);} .p-more{ margin-top:14px;font-size:12px;letter-spacing:.1em;color:var(--green); display:inline-flex;align-items:center;gap:8px; } .p-more::before{content:"";width:22px;height:1px;background:var(--green);} .p-note{max-width:860px;margin:22px auto 0;font-size:11.5px;color:var(--text-soft);line-height:1.9;} /* サブセクション見出し */ .subsec{max-width:860px;margin:0 auto 18px;} .subsec h3{ font-family:var(--serif);font-size:17px;letter-spacing:.1em;font-weight:600; color:var(--green-deep);display:flex;align-items:center;gap:14px; } .subsec h3::after{content:"";flex:1;height:1px;background:var(--line);} .subsec p{font-size:12.5px;color:var(--text-soft);margin-top:8px;line-height:1.9;} .subsec + .prod-grid, .subsec + .type-grid{margin-bottom:40px;} /* 比較テーブル（ED） */ .compare-wrap{max-width:860px;margin:0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch;} table.compare{ width:100%;border-collapse:separate;border-spacing:0; background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden; font-size:12px;min-width:520px; } table.compare th, table.compare td{ padding:12px 14px;text-align:left;border-bottom:1px solid var(--line); } table.compare thead th{ background:var(--sage-pale);color:var(--green-deep); font-size:11px;letter-spacing:.08em;font-weight:600;white-space:nowrap; } table.compare tbody tr:last-child td{border-bottom:none;} table.compare td .val small{font-size:10px;color:var(--text-soft);} /* 定期便（共通） */ .subsc-feats{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px;margin:0 auto 30px;} .subsc-feats li{ list-style:none;background:#fff;border:1px solid var(--line);border-radius:12px; padding:13px 10px;text-align:center;font-size:12px;letter-spacing:.03em; } /* 安心して（共通4項目） */ .assure-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;max-width:860px;margin:0 auto;} .assure{ background:#fff;border:1px solid var(--line);border-radius:16px; padding:24px 18px;text-align:center; } .assure .icon{ width:46px;height:46px;margin:0 auto 12px;border-radius:50%; background:var(--rose-pale);display:flex;align-items:center;justify-content:center; } .assure h3{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--green-deep);margin-bottom:6px;} .assure p{font-size:11.5px;color:var(--text-soft);line-height:1.85;} /* 料金について */ .price-about{max-width:640px;margin:0 auto;text-align:center;} .price-about p{font-size:13.5px;line-height:2.2;margin-bottom:14px;} .price-about .pa-note{ font-size:12px;color:var(--text-soft);border-top:1px dashed var(--line); padding-top:16px;margin-top:10px;line-height:1.9; } /* ブランドステートメント */ .about-statement{text-align:left;max-width:560px;margin:0 auto;} .about-statement p{font-size:13.5px;line-height:2.35;margin-bottom:22px;} .about-statement p:last-child{margin-bottom:0;} @media (min-width:768px){.about-statement{text-align:center;max-width:640px;}} /* MEN入口カード */ .entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;max-width:760px;margin:0 auto;} .entry{ display:block;background:#fff;border:1px solid var(--line);border-radius:18px; padding:26px 20px;transition:border-color .3s,box-shadow .3s; } .entry:hover{border-color:var(--rose);box-shadow:0 10px 22px rgba(150,156,150,.14);} .entry .en{font-family:var(--serif);font-size:17px;letter-spacing:.22em;color:var(--green);margin-bottom:4px;} .entry .jp{font-size:12.5px;color:var(--text-soft);} /* ゲートウェイ4枚目（WEIGHT） */ .gw-card.weight{background:#F0EEE6;} @media (min-width:768px){ .page-hero{padding:96px 22px 88px;} .ph-title{font-size:34px;} .concern-grid{grid-template-columns:repeat(3,1fr);} .type-grid{grid-template-columns:1fr 1fr;} .prod-grid{grid-template-columns:1fr 1fr;} .assure-grid{grid-template-columns:repeat(4,1fr);} .subsc-feats{grid-template-columns:repeat(4,1fr);max-width:760px;} .gw-grid.four{grid-template-columns:1.25fr 1fr 1fr 1fr;} } /* フッター：リンクを持たないテキスト項目（提携医療機関）を、リンク項目と同じ 12px・淡色（opacity .85）・同一line-heightに揃える。liはbodyの15pxを継承して リンク（12px）より大きく表示されていたため、li自体を12pxに統一する。 */ .footer-cols li{font-size:12px;} .footer-partner{opacity:.85;} /* 診療の流れ：縦線を「リスト全体に1本」から「各ステップ間の区間線」へ変更（20260713指示）。 旧実装（.flow-list::before の連続線・bottom:72px固定）は最終ステップの本文の高さ次第で 丸5の下に線がはみ出すため廃止。各.flow-itemの丸の直下（padding16px＋丸46px＝62px）から 次のステップの丸の上端（次itemの16px地点＝bottom:-16px）までを1本ずつ引き、 最終ステップには線を出さない。丸・数字・本文の配置は変更しない。 */ .flow-list::before{content:none;} .flow-item::before{ content:"";position:absolute;left:23px;top:62px;bottom:-16px; width:1px;background:var(--rose);opacity:.45; } .flow-item:last-child::before{content:none;} /* フッター「料金について」（index.html#price）の着地補正： stickyヘッダー（実測74.8px・PC/SP共通）に見出しが隠れないようにする。 */ #price{scroll-margin-top:86px;} /* ===== BEAUTY SPファーストビュー（画像先行型・20260719）===== 構成: コピー → 余白 → メイン画像 → 余白 → CTA → 安心ポイント。 CTAは同一ページ内の美容内服セット(#sets)へスムーズスクロール（html{scroll-behavior:smooth}と #setsのscroll-margin-top:86pxは既存定義を利用）。 PC(768px以上)は従来のpage-heroをそのまま表示し、SP用FVは非表示＝PC表示への影響なし。 */ .fv-beauty{background:#fff;padding:44px 0 10px;} .fvb-copy{padding:0 26px;} .fvb-copy h1{font-family:var(--serif);font-weight:600;font-size:29px;line-height:1.55;letter-spacing:.05em;color:#243330;} .fvb-copy p{margin-top:16px;font-size:14px;line-height:2.05;letter-spacing:.03em;color:var(--text-soft);} .fvb-hero{margin-top:28px;background:#F6EFE7;} .fvb-hero img{display:block;width:100%;height:auto;} .fvb-cta{padding:30px 22px 8px;} .fvb-cta a{ display:flex;align-items:center;justify-content:center; min-height:58px;border-radius:999px; background:var(--green);color:#fff; font-size:15.5px;font-weight:600;letter-spacing:.05em; box-shadow:0 10px 26px rgba(15,61,74,.24); transition:background .3s; } .fvb-cta a:hover{background:var(--green-deep);} .fvb-points{list-style:none;margin:8px 0 0;padding:2px 26px 38px;} .fvb-points li{ display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:21px 2px;border-bottom:1px solid #ECE7DC;line-height:1.9; } .fvb-points li:last-child{border-bottom:none;} .fvb-points span{font-size:12px;letter-spacing:.14em;color:var(--rose-deep);flex-shrink:0;} .fvb-points b{font-size:16.5px;font-weight:500;letter-spacing:.04em;color:var(--text);} .beauty-pc-hero{display:none;} @media (min-width:768px){ .fv-beauty{display:none;} .beauty-pc-hero{display:block;} } /* ===== BEAUTY SPファーストビュー 430px以下（20260721）===== 〜430pxのみ、のmedia属性で横長オリジナル素材（女性・花・グラス・錠剤シート・ MIRELIAポーチがすべて収まる1080×720、トリミングなし・縦横比維持）に切り替える。 横長素材のためコピーは画像に重ねず、431〜767pxと同じコピー先行の縦積み構成とし、 文字が顔・花・ポーチと重ならないようにする（旧・モック切り抜き画像とコピー重ね表示は 20260721指示で使用終了）。431px以上は従来どおり変更なし（431〜767px: 従来SP構成＋従来画像、 768px以上: page-hero）。.fvb-brは狭幅（320px等）でh1・説明文が不自然な位置で 折り返されるのを防ぐ改行（h1を3行・説明文を4行に固定）。 */ .fvb-br{display:none;} @media (max-width:430px){ .fvb-br{display:inline;} /* ヘッダー直下の余白を44px→18pxに詰め、ファーストビューで写真の見える量を増やす （20260722指示。430px以下のみ。写真・CTA・テキスト・構成は不変） */ .fv-beauty{padding-top:18px;} } /* ===== BEAUTY「美容内服という選択肢」（20260721改修：支給イラスト実使用）===== 中央イラスト（choice_center.jpg）にHTMLラベルを重ね、3カードは支給サークルイラスト＋ HTMLテキスト。PC=左右2カラム（左:リード文/右:イラスト）＋3列カード、 SP=見出し→イラスト→説明文→カード縦積み（DOM順: visual→intro、PCでintroを左に配置）。 */ .b-choice{background:#fff;} .bc-grid{display:grid;gap:26px;margin-top:34px;align-items:center;} .bc-visual{position:relative;margin:0 auto;max-width:560px;} .bc-visual img{display:block;width:100%;height:auto;} .bc-cap{position:absolute;top:34%;width:34%;text-align:center;display:flex;flex-direction:column;gap:2px;} .bc-cap-l{left:1.5%;} .bc-cap-r{right:1.5%;} .bc-cap b{font-family:var(--serif);font-weight:600;font-size:clamp(11px,3.5vw,15.5px);letter-spacing:.08em;color:#3D5A50;} .bc-cap i{font-style:normal;font-size:clamp(9.5px,2.9vw,12.5px);letter-spacing:.06em;color:#5F6F66;} .bc-intro{max-width:560px;margin:0 auto;} .bc-catch{font-family:var(--serif);font-size:19px;line-height:1.95;letter-spacing:.05em;color:var(--text);font-weight:500;} .bc-catch em{font-style:normal;color:#4E6259;} .bc-text{margin-top:16px;font-size:14px;line-height:2.15;letter-spacing:.02em;color:#616861;} .bc-points{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:16px;} .bc-point{ display:flex;flex-direction:column;align-items:center;text-align:center; background:#fff;border:1px solid #EDE7DC;border-radius:16px;padding:28px 20px 26px; box-shadow:0 8px 22px rgba(140,128,110,.07); } .bc-illust{width:min(150px,42%);height:auto;border-radius:50%;} .bc-head{display:flex;align-items:center;gap:10px;margin-top:18px;} .bc-ico{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--rose-deep);color:#fff;display:flex;align-items:center;justify-content:center;} .bc-point h3{font-family:var(--serif);font-size:16px;letter-spacing:.06em;color:var(--text);font-weight:600;line-height:1.6;} .bc-rule{display:block;width:38px;height:1.5px;background:#CBB68F;margin:13px auto 11px;} .bc-point p{font-size:13px;line-height:1.9;letter-spacing:.02em;color:#616861;} @media (min-width:768px){ .bc-catch{font-size:22px;} .bc-points{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;} } /* 左右2カラムは1024px以上のみ（768〜1023pxはタブレット扱いで縦積み・イラスト最大560px。 2カラムだとイラスト列が約256pxまで縮み、ラベルの折返し・位置ずれが起きるため） */ @media (min-width:1024px){ .bc-grid{grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:48px;} .bc-visual{order:2;} .bc-intro{order:1;margin:0;} .bc-cap b{font-size:15px;} .bc-cap i{font-size:12px;} } /* ===== BEAUTY PC版ヒーロー（20260721新設・20260722タブレット対応）===== .beauty-pc-hero配下＝768px以上のみ表示。 768〜1023px（タブレット）: 左右2カラムは使わず「見出し・説明文・CTA→大きな写真」の縦積み。 写真は最大640pxで中央配置（全要素が自然に見える幅・引き伸ばしなし）。 1024px以上（PC）: 左=テキスト/右=写真の2カラム（20260721承認済みの構成のまま）。 */ .bph{padding:64px 22px 60px;} .bph .wrap{max-width:1120px;} .bph-grid{display:grid;gap:34px;align-items:center;} .bph-photo{max-width:640px;margin:0 auto;} .bph-photo img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 18px 44px rgba(120,110,95,.16);} @media (min-width:768px){ .bph{padding:64px 22px 60px;} .bph .ph-lead{margin-bottom:26px;} } @media (min-width:1024px){ .bph{padding:72px 22px 68px;} .bph-grid{grid-template-columns:minmax(340px,440px) minmax(0,1fr);gap:56px;} .bph-photo{max-width:none;margin:0;} } /* ===== BEAUTY 美容内服セットカードのニュアンスカラー（20260721）===== 白背景の強弱ではなくMIRELIAのニュアンスカラー（エクリュ→グレージュ→サンド→トープ）で セットごとに淡く差を付け、美肌プレミアムのみ少し濃いトープで特別感を出す。 境界線は薄く・シャドウは弱く柔らかく・角丸をやや大きく・カード間隔は均等16px。 文字は淡色地でもコントラストを確保（説明・価格ラベルを濃いめのグレーに）。 */ #sets .prod-grid{gap:16px;} #sets .prod{ border:1px solid rgba(178,166,148,.32);border-radius:20px; box-shadow:0 6px 18px rgba(140,128,110,.07); } #sets .prod:nth-child(1){background:#F8F6F3;} #sets .prod:nth-child(2){background:#F6F1EC;} #sets .prod:nth-child(3){background:#F2EEE9;} #sets .prod:nth-child(4){background:#EEE8E2;} #sets .prod:nth-child(5){background:#E7DDD4;} #sets .prod .p-desc{color:#5E6660;} #sets .p-price{border-top-color:rgba(150,138,120,.45);} #sets .p-price .row .term{color:#5E6660;} /* TOP「料金について」のカテゴリボタン遷移先（各カテゴリページの薬剤・料金一覧セクション先頭）と、 MEN入口メニューの遷移先（#aga/#ed）の着地補正。 */ #sets,#drugs,#aga,#ed{scroll-margin-top:86px;} .k-embossed{ --serif:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif; --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",sans-serif; --text-soft:#616861; /* ivory上でコントラスト比4.5:1以上を確保 */ } /* キーボード操作時のみ表示されるフォーカス（全ページ共通のa11y基盤・通常閲覧では不可視） */ a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:3px;} /* ===== 共通コンポーネント（グローバル定義・下層ページ共有。ページ固有の上書きは modifier/スコープで） ===== */ /* 刻印罫見出し：細い全幅罫＋短いティール罫の二重線（FVプレートの二重枠に由来）。 小ラベルは置かず、見出し・余白・刻印罫のみで階層を作る。 本体は静的な基底部品として維持する：ページ固有のモーション・罫線伸長・装飾は ここに追記せず、必ず body.p-women 等のページスコープ側に実装すること （TOP側は下の .k-top スコープの固定ルールで、詳細度により保護されている） */ .khead{max-width:860px;margin:0 auto 34px;position:relative;padding-bottom:18px;border-bottom:1px solid var(--line);} .khead::after{content:"";position:absolute;left:0;bottom:-4px;width:72px;height:1px;background:var(--green);} .khead h2{font-family:var(--serif);font-size:23px;letter-spacing:.14em;font-weight:500;color:var(--green-deep);line-height:1.75;} .khead .k-lead{font-size:13px;color:var(--text-soft);margin-top:12px;line-height:2;} /* カテゴリ目次（カードでなく罫線の目次組） */ .k-cat{background:var(--paper);} .toc-list{max-width:860px;margin:0 auto;border-top:1px solid var(--line);} .toc-item{ display:block;position:relative; padding:24px 44px 24px 2px; border-bottom:1px solid var(--line); transition:background .3s; } .toc-item::after{ content:"\2192";position:absolute;right:8px;top:50%;transform:translateY(-50%); color:var(--green);font-size:15px;transition:transform .3s; } .toc-item:hover{background:rgba(255,255,255,.55);} .toc-item:hover::after{transform:translate(4px,-50%);} .toc-en{font-family:var(--serif);font-size:15px;letter-spacing:.3em;color:var(--green);display:block;margin-bottom:6px;} .toc-jp{display:block;font-size:14px;font-weight:600;letter-spacing:.05em;color:var(--text);margin-bottom:4px;} .toc-desc{display:block;font-size:12.5px;color:var(--text-soft);line-height:1.9;} /* 安心の根拠（アイコンカード→罫線付き本文リスト）。list-style/paddingのリセットは