/* ============================================================ Latris サイト共通スタイル (S371: CSS を web/public/css に集約) 1. 共通 — デザイントークン (:root) とリセット 2. LP — … /index.html 3. 会員ページ — … /app/*.html (旧 app/style.css) LP と会員ページは body / h2 / p / a / .btn / .wrap / .brand などの 基本ルールが違うため、各セクションのセレクタは :where(.lp-page) / :where(.app-page) で囲って互いに干渉しないようにしてある。 :where() は詳細度 0 なので、セクション内の優先順位と、後から読む session.css などページ別 CSS との優先順位は集約前とまったく同じ。 ルールを足すときも同じ接頭辞を付けること (付け忘れると相手のページに漏れる)。 ============================================================ */ /* ---------- 1. 共通: デザイントークン + リセット ---------- */ :root{ --red:#7B1F2F; --red-deep:#6A1928; --red-dark:#521321; ---red-icon:#F5EDEF; -red-tag:#7B343F; --red-circle-line:#D2B2B6; --red-bg-color:#F2E8E2; --red-soft:#F4E9EA; --gold:#B08A4F; --gold-ink:#7D5C2E; --gold-figure-border:#D2AB70; --gold-tag-border:#B88A6F; --gold-tag-font:#F1E7D4; --gold-soft:#E8DCC3; --gold-pale:#F2EADB; --cream:#F6F1E7; --cream-2:#FAF6EE; --white:#fff; --ink:#14100F; --ink-2:#2B2626; --body:#574E49; --muted:#6B615C; --faint:#8C837D; --line:#E7E0D4; --line-2:#EFEAE0; --footer:#2A161B; --sans:"Noto Sans JP",system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif; --shadow:0 2px 14px rgba(60,40,30,.06); --shadow-2:0 8px 34px rgba(60,40,30,.10); --wrap:1120px; } *{box-sizing:border-box} /* ==================== 2. LP (/index.html) ==================== */ html:where(.lp-page){scroll-behavior:smooth;scroll-padding-top:88px} :where(.lp-page) body{margin:0;background:var(--white);color:var(--body);font-family:var(--sans);font-size:15px;line-height:1.85; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} :where(.lp-page) img{max-width:100%;display:block} :where(.lp-page) a{color:var(--red)} :where(.lp-page) h1,:where(.lp-page) h2,:where(.lp-page) h3,:where(.lp-page) h4{color:var(--ink-2);line-height:1.5;margin:0;font-weight:700} :where(.lp-page) p{margin:0} :where(.lp-page) .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} /* ---------- header ---------- */ :where(.lp-page) .hd{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(10px); border-bottom:1px solid var(--line-2)} :where(.lp-page) .hd .in{max-width:1320px;margin:0 auto;padding:13px 13px;display:flex;align-items:center;gap:10px} :where(.lp-page) .brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none} :where(.lp-page) .brand svg{width:44px;height:44px;flex:none} :where(.lp-page) .brand .nm{display:flex;flex-direction:column;line-height:1} :where(.lp-page) .brand .ja{font-family:var(--serif);font-size:23px;font-weight:700;color:var(--ink);letter-spacing:.12em} :where(.lp-page) .brand .en{font-size:10.5px;font-weight:500;color:var(--gold-ink);letter-spacing:.3em;margin-top:5px} :where(.lp-page) .brand-sub{font-size:12px;color:var(--muted);padding-left:14px;border-left:1px solid var(--line);flex:none} :where(.lp-page) .nav{display:flex;gap:13px;margin-right:6px;margin-left:auto;font-size:13.5px;font-weight:500} :where(.lp-page) .nav a{color:var(--ink-2);text-decoration:none;white-space:nowrap} :where(.lp-page) .nav a:hover{color:var(--red)} :where(.lp-page) .hd-cta{display:flex;gap:9px;align-items:center;flex:none;margin-left:0} :where(.lp-page) .burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:6px; width:40px;height:36px;cursor:pointer;color:var(--ink-2);font-size:16px} /* ---------- buttons ---------- */ :where(.lp-page) .btn{display:inline-flex;align-items:center;gap:11px;padding:11px 22px;border-radius:7px;font-size:13.5px; font-weight:700;text-decoration:none;border:1px solid transparent;white-space:nowrap;font-family:inherit;flex:none} :where(.lp-page) .btn.pri{background:var(--red);color:#fff;padding: 5px 11px;} :where(.lp-page) .btn.ghost{background:#fff;color:var(--ink-2);border-color:var(--gold);padding: 5px 11px;} :where(.lp-page) .btn.big{padding:17px 30px;font-size:15px;border-radius:8px;align-items:flex-start} :where(.lp-page) .btn .tx{display:flex;flex-direction:column;gap:3px;text-align:left;line-height:1.4} :where(.lp-page) .btn .tx small{font-size:11.5px;font-weight:400;opacity:.85} :where(.lp-page) .btn .ic{width:20px;height:20px;flex:none;margin-top:2px} /* coming-soon（サービス化前：押せない状態を明示） */ :where(.lp-page) .btn.soon{cursor:default;position:relative} :where(.lp-page) .btn.pri.soon{background:#B98E96} :where(.lp-page) .btn.ghost.soon{color:var(--faint);border-color:var(--line);background:#FCFAF6} :where(.lp-page) .soon-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;padding:2px 8px; border-radius:999px;background:rgba(255,255,255,.24);margin-left:2px} :where(.lp-page) .btn.ghost .soon-tag{background:var(--gold-pale);color:var(--gold-ink)} /* ---------- section furniture ---------- */ :where(.lp-page) .sec{padding:70px 0} :where(.lp-page) .sec.cream{background:var(--cream)} :where(.lp-page) .sec.cream2{background:var(--cream-2)} :where(.lp-page) .eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold-ink); font-size:11.5px;font-weight:700;letter-spacing:.26em;margin-bottom:20px} :where(.lp-page) .eyebrow::before,:where(.lp-page) .eyebrow::after{content:"";width:26px;height:1px;background:var(--gold)} :where(.lp-page) .h2{font-size:34px;text-align:center;letter-spacing:.01em;line-height:1.45} :where(.lp-page) .lead{max-width:840px;margin:20px auto 0;text-align:center;color:var(--muted);font-size:14.5px} :where(.lp-page) .red{color:var(--red)} /* ---------- hero ---------- */ :where(.lp-page) .hero{position:relative;overflow:hidden;background: #F6F1E7 url(../assets/bg_FV.svg) no-repeat center top;} :where(.lp-page) .hero .wrap{position:relative;z-index:2;padding-top:52px;padding-bottom:20px} :where(.lp-page) .badge{display:inline-block;background:var(--red-bg-color); border-left:3px solid var(--gold);border-radius: 0 3px 3px 0;padding:8px 18px 8px 14px;font-size:13px;font-weight:700;color:var(--red); margin-bottom:26px} :where(.lp-page) .hero h1{font-size:53px;line-height:1.2;letter-spacing:.005em;color:#000;font-weight:700} :where(.lp-page) .hero h1 .red{color:var(--red)} :where(.lp-page) .hero-lead{margin-top:26px;max-width:600px;font-size:15px;line-height:2} :where(.lp-page) .hero-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;max-width:870px} :where(.lp-page) .hero-card{background:rgba(255,255,255,.86);border:1px solid var(--line-2);border-radius:8px;padding:14px 16px} :where(.lp-page) .hero-card .t{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--ink-2);margin-bottom:7px} :where(.lp-page) .hero-card .t .ic{width:26px;height:26px;border: 1px solid var(--red-circle-line);border-radius:50%;background:var(--red-soft);display:grid;place-items:center;flex:none} :where(.lp-page) .hero-card p{font-size:12px;line-height:1.65;color:var(--muted)} :where(.lp-page) .hero-btns{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap} /* ---------- overview diagram ---------- */ :where(.lp-page) .ovw{background:var(--cream-2);border-radius:10px;padding:46px 40px 40px;margin-top:38px;border:1px solid var(--line-2)} :where(.lp-page) .ovw-h{display:flex;align-items:center;justify-content:center;gap:16px;font-family:var(--serif);font-size:27px; font-weight:700;color:var(--ink);margin-bottom:34px} :where(.lp-page) .ovw-h::before,:where(.lp-page) .ovw-h::after{content:"";width:52px;height:1px;background:var(--gold);position:relative} :where(.lp-page) .ovw-grid{display:grid;grid-template-columns:1.95fr auto .56fr auto 1.16fr;gap:13px;align-items:stretch} :where(.lp-page) .panel{background:#fff;border:1px solid var(--line);border-radius:9px;padding:16px} :where(.lp-page) .panel-t{font-size:13px;font-weight:700;color:var(--ink-2);text-align:center;margin-bottom:14px} :where(.lp-page) .mini-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} :where(.lp-page) .mini{border:1px solid var(--line-2);border-radius:7px;padding:12px 11px;background:var(--cream-2)} :where(.lp-page) .mini .mt{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ink-2);margin-bottom:8px;white-space:nowrap} :where(.lp-page) .mini p{font-size:11px;line-height:1.7;color:var(--muted)} :where(.lp-page) .chip{display:inline-block;white-space:nowrap;font-size:10px;border:1px solid var(--gold-soft);background:#fff;border-radius:4px; padding:3px 8px;margin-top:6px;color:var(--gold-ink)} :where(.lp-page) .ovw-grid>.panel:first-child{display:flex;flex-direction:column} :where(.lp-page) .ovw-grid>.panel:first-child .mini-row{margin:auto 0} :where(.lp-page) .mcp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0 6px} :where(.lp-page) .mcp .ar{color:var(--gold);font-size:20px;line-height:1} :where(.lp-page) .mcp b{font-size:13px;color:var(--ink-2);letter-spacing:.04em} :where(.lp-page) .mcp span{font-size:11px;color:var(--muted)} :where(.lp-page) .wg-card{background:radial-gradient(120% 130% at 72% 42%,#8A2334 0%,#6A1928 46%,#521321 100%); border-radius:9px;padding:22px;color:#fff;position:relative;overflow:hidden;min-height:230px; display:flex;flex-direction:column} :where(.lp-page) .wg-card .wgt{position:relative;font-family:var(--serif);font-size:22px;font-weight:700;text-align:center; letter-spacing:.01em} :where(.lp-page) .wg-card .wgd{position:relative;font-size:12px;line-height:1.8;color:#F0DCDF;margin-top:10px} :where(.lp-page) .wg-tags{position:relative;display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:14px} :where(.lp-page) .wg-tags span{background: var(--red-tag);font-size:12px;font-weight: bold;border:1px solid var(--gold-tag-border);border-radius:999px;padding:4px 11px;color: var(--gold-tag-font);} :where(.lp-page) .layers{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:22px 18px 18px;position:relative} :where(.lp-page) .layers-lab{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#fff;padding:0 12px; font-size:12.5px;font-weight:700;color:var(--red)} :where(.lp-page) .layers-row{display:grid;grid-template-columns:repeat(5,1fr);gap:9px} :where(.lp-page) .layer{background:var(--cream-2);border:1px solid var(--line-2);border-radius:7px;padding:13px 10px;text-align:center} :where(.lp-page) .layer .n{width:23px;height:23px;border-radius:50%;background:var(--gold);color:#fff;font-size:12px;font-weight:700; display:grid;place-items:center;margin:0 auto 9px} :where(.lp-page) .layer .lt{font-size:12.5px;font-weight:700;color:var(--ink-2)} :where(.lp-page) .layer.core{background:var(--red-deep);border-color:var(--red-deep)} :where(.lp-page) .layer.core .lt{color:#fff} :where(.lp-page) .layer.core .n{background:#fff;color:var(--red-deep)} :where(.lp-page) .layer .core-tag{display:inline-block;margin-top:8px;font-size:10.5px;font-weight:700;background:var(--gold); color:#fff;border-radius:3px;padding:2px 9px} :where(.lp-page) .ovw-foot{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px; font-size:19px;font-weight:700;color:var(--ink)} /* 左右の線: 文字側の端に小さな丸（線=gold-soft、丸=gold）。線は 1px、丸は 7px、丸と線の間に 3px の隙間 */ :where(.lp-page) .ovw-foot::before,:where(.lp-page) .ovw-foot::after{content:"";width:96px;height:7px;flex:none;background-repeat:no-repeat; background-image:radial-gradient(circle,var(--gold) 0 2.5px,transparent 3.2px),linear-gradient(var(--gold-soft),var(--gold-soft)); background-size:7px 7px,calc(100% - 10px) 1px} :where(.lp-page) .ovw-foot::before{background-position:right center,left center} :where(.lp-page) .ovw-foot::after{background-position:left center,right center} /* ---------- problem ---------- */ :where(.lp-page) .cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px} :where(.lp-page) .pcard{background:var(--cream-2);border:1px solid var(--line-2); border-radius:5px;padding:22px 20px} :where(.lp-page) .pcard .ic{width:34px;height:34px;border-radius:50%;border: 1px solid var(--gold);background:var(--gold-pale);display:grid;place-items:center;margin-bottom:15px} :where(.lp-page) .pcard h3{font-size:15px;margin-bottom:10px} :where(.lp-page) .pcard p{font-size:12.5px;line-height:1.85;color:var(--muted)} :where(.lp-page) .serif-block{text-align:center;margin-top:64px;font-family:var(--serif);color:var(--ink)} :where(.lp-page) .serif-block .l1{font-size:26px;letter-spacing:.03em} :where(.lp-page) .serif-block .l2{font-size:26px;letter-spacing:.03em;margin-top:38px} :where(.lp-page) .serif-block .l3{font-size:28px;font-weight:700;color:var(--red);margin-top:38px;letter-spacing:.02em} :where(.lp-page) #trust .pcard{background:#fff} /* ---------- concept ---------- */ :where(.lp-page) .def{max-width:720px;margin:26px auto 0;background:#fff;border:1px solid var(--line);border-radius:7px; padding:15px 20px;display:flex;gap:16px;align-items:flex-start} :where(.lp-page) .def b{color:var(--gold-ink);font-size:13px;flex:none;padding-top:1px} :where(.lp-page) .def p{font-size:12.5px;color:var(--muted);line-height:1.8} :where(.lp-page) .vs{display:grid;grid-template-columns:1fr 70px 1fr;gap:0;align-items:start;margin-top:46px} :where(.lp-page) .vs-arrow{display:grid;place-items:center} :where(.lp-page) .vs-arrow span{width:34px;height:34px;border-radius:50%;background:#fff;box-shadow: 0 1px 3px rgba(60, 40, 30, .05); display:grid;place-items:center;color:var(--red);font-size:14px;font-weight: bold} :where(.lp-page) .tag-pill{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:6px 16px;background:#fff; border:1px solid var(--line);color:var(--ink-2)} :where(.lp-page) .tag-pill.on{background:var(--red-deep);border-color:var(--red-deep);color:#fff} :where(.lp-page) .vs h3{font-family:var(--serif);font-size:20px;margin:14px 0 16px} :where(.lp-page) .fake-search{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px} :where(.lp-page) .fake-input{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px; padding:10px 18px;color:var(--muted);font-size:13px;background:var(--cream-2)} :where(.lp-page) .fake-list{list-style:none;padding:0;margin:14px 0 0} :where(.lp-page) .fake-list li{padding:12px 2px;border-bottom:1px solid var(--line-2);font-size:13px;color:#4A5A78; text-decoration:underline;text-underline-offset:3px} :where(.lp-page) .vs-note{font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.8} :where(.lp-page) .vs-note.on{color:var(--ink-2);font-weight:700} :where(.lp-page) .wg-big{background:#6A1928 url(../assets/bg_World_Graph_Same_Structure.svg) no-repeat center/cover;border-radius:8px; padding:34px 30px;color:#fff;position:relative;overflow:hidden;min-height:298px;display:flex;flex-direction:column; justify-content:flex-end} :where(.lp-page) .zone.cloud .wg-big{background: url(../assets/bg_World_Graph_Latris_Engine.svg) no-repeat top / cover;} :where(.lp-page) .wg-big h4,:where(.lp-page) .wg-big p,:where(.lp-page) .wg-big .wg-tags{position:relative} :where(.lp-page) .wg-big h4{font-family:var(--serif);font-size:31px;font-weight:700;color:#fff} :where(.lp-page) .wg-big p{font-size:13px;line-height:1.9;color:#EEDBDD;margin-top:12px;max-width:520px} :where(.lp-page) .wg-big .wg-tags{margin-top:20px;padding-top:0} /* 2 カラム時は fake-search を wg-big と同じ 2:1 に揃え、リスト行を等分で伸縮させる */ @media(min-width:1101px){ :where(.lp-page) .fake-search{aspect-ratio:2/1;display:flex;flex-direction:column} :where(.lp-page) .fake-list{flex:1;display:flex;flex-direction:column;min-height:0} :where(.lp-page) .fake-list li{flex:1;display:flex;align-items:center;padding:0 2px;min-height:0} } /* wg-cols: World Graph 図解カード。図形は背景 SVG(600x300)に含まれ、テキストだけを同じ座標系の SVG で重ねる */ :where(.lp-page) .wg-big.wg-cols{padding:0;min-height:0;aspect-ratio:2/1;display:block} :where(.lp-page) .wg-cols{container-type:inline-size} :where(.lp-page) .wg-cols .wg-head{position:absolute;left:2.5%;top:8%;width:40%} :where(.lp-page) .wg-cols .wg-head h4{font-family:var(--sans);font-size:4.67cqw;font-weight:700;letter-spacing:.01em;line-height:1.2;white-space:nowrap} :where(.lp-page) .wg-cols .wg-head p{margin-top:1.6cqw;font-size:2.17cqw;color:#F0DCDF;line-height:1.5;max-width:none} :where(.lp-page) .wg-cols .wg-diagram{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible} :where(.lp-page) .wg-diagram text{font-family:var(--sans)} :where(.lp-page) .wg-diagram .wg-cap{fill:#fff;font-size:9.5px;font-weight:500} :where(.lp-page) .wg-diagram .wg-key{fill:#fff;font-size:9.5px;font-weight:700} :where(.lp-page) .wg-diagram .wg-dim{fill:#B08A4F;font-size:9px;font-weight:500} :where(.lp-page) .wg-diagram .wg-box{fill:#F6F1E7} :where(.lp-page) .wg-diagram .wg-box-t{fill:#6A1928;font-size:12.5px;font-weight:700} /* ---------- sample report ---------- */ :where(.lp-page) .q-card{background:linear-gradient(105deg,#7B1F2F,#5F1725);border-radius:9px;padding:30px 32px;color:#fff; margin-top:44px} :where(.lp-page) .q-card .lab{display:inline-block;background:var(--gold-pale);color:var(--red-deep);font-size:11.5px;font-weight:700; border-radius:999px;padding:4px 13px} :where(.lp-page) .q-card h3{font-family:var(--serif);font-size:25px;color:#fff;margin:16px 0 12px;font-weight:700} :where(.lp-page) .q-card p{font-size:12.5px;color:#EDD9DC;line-height:1.9} :where(.lp-page) .tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin-top:26px} :where(.lp-page) .tab{background:#fff;border:1px solid var(--line);border-radius:7px;padding:14px 8px;text-align:center;cursor:pointer; font-family:inherit;transition:.15s} :where(.lp-page) .tab .n{width:27px;height:27px;border-radius:50%;background:var(--cream);color:var(--muted);font-size:13px; font-weight:700;font-family: serif;display:grid;place-items:center;margin:0 auto 8px} :where(.lp-page) .tab .lt{font-size:13px;font-weight:700;color:var(--ink-2)} :where(.lp-page) .tab .core-tag{display:inline-block;margin-top:7px;font-size:10.5px;font-weight:700;background:var(--red-deep); color:#fff;border-radius:3px;padding:2px 9px} :where(.lp-page) .tab.core{background:#F7EEF0;border-color:#EFDDE1} :where(.lp-page) .tab.core .n{background: #fff;font-family: serif} :where(.lp-page) .tab[aria-selected="true"]{border-color:var(--red);border-width:2px;padding:13px 7px} :where(.lp-page) .tab[aria-selected="true"] .n{background:var(--red-deep);color:#fff} :where(.lp-page) .tab[aria-selected="true"] .lt{color:var(--red)} :where(.lp-page) .tp{background:var(--cream-2);border:1px solid var(--line-2);border-radius:9px;padding:30px 32px;margin-top:22px} :where(.lp-page) .tp[hidden]{display:none} :where(.lp-page) .tp h3{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:20px;color:var(--ink)} :where(.lp-page) .tp h3 .n{width:26px;height:26px;border-radius:50%;border:1px solid var(--red);color:var(--red);font-size:12px; display:grid;place-items:center;font-family:var(--sans);flex:none} :where(.lp-page) .tp .d{font-size:13px;color:var(--body);margin-top:14px;line-height:1.9} :where(.lp-page) .tp .note{display:flex;gap:12px;background:#FBF4E6;border:1px solid var(--gold-soft);border-radius:6px; padding:14px 17px;margin-top:18px;font-size:12.5px;color:var(--body);line-height:1.8} :where(.lp-page) .tp .note .ic{color:var(--gold);flex:none;margin-top:2px} :where(.lp-page) .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:18px} :where(.lp-page) .scard{background:#fff;border:1px solid var(--line-2);border-radius:7px;padding:17px 18px} :where(.lp-page) .scard h4{font-size:13.5px;margin-bottom:9px} :where(.lp-page) .scard p{font-size:12.5px;color:var(--muted);line-height:1.8} :where(.lp-page) .foot-note{text-align:center;font-size:12.5px;color:var(--muted);margin-top:24px} :where(.lp-page) .center{display:flex;justify-content:center;margin-top:26px} /* ---------- after the report ---------- */ :where(.lp-page) .ask{display:flex;align-items:center;gap:16px;justify-content:center;background:#fff;border:1px solid var(--gold-soft); border-radius:7px;padding:15px 22px;margin:34px auto 0;max-width:800px} :where(.lp-page) .ask .lab{background:var(--gold-pale);color:var(--gold-ink);font-size:11.5px;font-weight:700;border-radius:999px; padding:5px 13px;flex:none} :where(.lp-page) .ask p{font-size:14px;font-weight:700;color:var(--ink-2)} :where(.lp-page) .duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px} :where(.lp-page) .dbox{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 24px} :where(.lp-page) .dbox.on{border:2px solid var(--red);padding:21px 23px} :where(.lp-page) .dh{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line-2)} :where(.lp-page) .dh .who{font-size:12.5px;font-weight:700;border-radius:999px;padding:5px 13px;background:#fff;border:1px solid var(--line);color:var(--ink-2)} :where(.lp-page) .dh .who.on{background:var(--red-deep);border-color:var(--red-deep);color:#fff} :where(.lp-page) .dh small{font-size:11.5px;color:var(--muted)} :where(.lp-page) .dbox p{font-size:13px;line-height:1.75;margin-top:15px} :where(.lp-page) .dbox ul{margin:12px 0 0;padding:0;list-style:none} :where(.lp-page) .dbox ul li{font-size:13px;padding:4px 0 4px 18px;position:relative;color:var(--body)} :where(.lp-page) .dbox ul li::before{content:"–";position:absolute;left:0;color:var(--muted)} :where(.lp-page) .dbox .end{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line-2);margin-top:16px;padding-top:14px} :where(.lp-page) .dbox .end.on{color:var(--red);font-weight:700;border-top-color:#EFDDE1} :where(.lp-page) .dchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;font-weight: bold} :where(.lp-page) .dchips span{font-size:11.5px;border:1px solid var(--line);border-radius:999px;padding:4px 11px;color:var(--muted)} :where(.lp-page) .after3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px} :where(.lp-page) .after3 .scard h4{font-size:13.5px} /* ---------- comparison table ---------- */ :where(.lp-page) .tw{margin-top:44px;overflow-x:auto;border-radius:8px;box-shadow:var(--shadow)} :where(.lp-page) table{border-collapse:collapse;width:100%;min-width:820px;background:#fff} :where(.lp-page) th,:where(.lp-page) td{padding:15px 18px;font-size:13px;text-align:center;border-bottom:1px solid var(--line-2)} :where(.lp-page) thead th{background:var(--cream-2);color:var(--ink-2);font-weight:700} :where(.lp-page) thead th:last-child{background:var(--red-deep);color:#fff} /* 列幅: 一般LLM列を狭め、ラトリス列を広く（比較項目 150px / 検索エンジン 残り / 一般LLM 24% / ラトリス 40%） */ :where(.lp-page) thead th:nth-child(2){width:20%} :where(.lp-page) thead th:nth-child(3){width:25%} :where(.lp-page) thead .th-sub{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:3px} :where(.lp-page) tbody th{background:var(--cream-2);color:var(--ink-2);font-weight:700;text-align:center;width:150px} :where(.lp-page) tbody td:last-child{background:#FBF1F2;color:var(--red);font-weight:700} :where(.lp-page) tbody tr:last-child th,:where(.lp-page) tbody tr:last-child td{border-bottom:0} /* ---------- how it works ---------- */ :where(.lp-page) .how-sub{text-align:center;font-size:14px;font-weight:700;color:var(--ink-2);margin-top:14px} :where(.lp-page) .pills{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px} :where(.lp-page) .pill{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;padding:9px 18px; font-size:12.5px;color:var(--body);background:#fff} :where(.lp-page) .zone{border:1px dashed var(--gold);border-radius:9px;padding:20px;margin-top:24px;background:#FDFBF6} :where(.lp-page) .zone .zt{font-size:13px;font-weight:700;color:var(--red);margin-bottom:14px} :where(.lp-page) .zone.cloud{border-style:solid;border-color:var(--line);background:#FDF9F4} :where(.lp-page) .zone-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} :where(.lp-page) .zbox{background:#fff;border:1px solid var(--line-2);border-radius:7px;padding:16px 18px;display:flex;gap:13px} :where(.lp-page) .zbox .ic{width:34px;height:34px;border-radius:50%;background:var(--gold-pale);display:grid;place-items:center;flex:none} :where(.lp-page) .zbox .zh{display:flex;align-items:center;gap:9px;flex-wrap:wrap} :where(.lp-page) .zbox b{font-size:14px;color:var(--ink-2)} :where(.lp-page) .zbox .sm{font-size:11.5px;color:var(--muted)} :where(.lp-page) .zbox p{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.75} :where(.lp-page) .zbox .lo{font-size:10.5px;font-weight: bold;border:1px solid var(--gold-ink);background:var(--gold-pale);color:var(--gold-ink); border-radius:4px;padding:2px 8px} :where(.lp-page) .mcp-mid{display:flex;align-items:center;justify-content:center;gap:9px;margin:22px 0;font-size:13px;color:var(--ink-2)} :where(.lp-page) .mcp-mid b{letter-spacing:.04em} :where(.lp-page) .mcp-mid span{color:var(--muted);font-size:12px} :where(.lp-page) .mcp-mid .ar{color:var(--red);display:inline-flex;align-items:center} /* 左: 下向き矢印 / 右: 上向き矢印 の 2 本 */ :where(.lp-page) .mcp-mid .ar svg{display:block} /* ---------- getting started ---------- */ :where(.lp-page) .steps{display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr;gap:0;margin-top:44px;align-items:stretch} :where(.lp-page) .step{background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:22px 24px;box-shadow:var(--shadow)} :where(.lp-page) .step .n{width:29px;height:29px;border-radius:50%;background:var(--red-deep);color:#fff;font-size:13px;font-weight:700; display:grid;place-items:center;margin-bottom:14px} :where(.lp-page) .step h3{font-size:14.5px;margin-bottom:10px} :where(.lp-page) .step p{font-size:12.5px;color:var(--muted);line-height:1.85} :where(.lp-page) .step-ar{display:grid;place-items:center;color:var(--gold);font-size:15px} :where(.lp-page) .checks{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px} :where(.lp-page) .check{display:flex;gap:13px;border:1px solid var(--gold);border-radius:8px;padding:17px 20px;background:#fff} :where(.lp-page) .check .ic{width:27px;height:27px;border-radius:50%;background:var(--gold-tag-font);display:grid;place-items:center; color:var(--gold-ink);flex:none;font-size:13px} :where(.lp-page) .check b{font-size:13.5px;color:var(--ink-2)} :where(.lp-page) .check p{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.8} /* ---------- use cases ---------- */ :where(.lp-page) .uc{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px} :where(.lp-page) .ucard{background:var(--cream-2);border:1px solid var(--line-2);border-radius:9px;padding:26px 28px} :where(.lp-page) .ucard .uh{display:flex;align-items:center;gap:14px} :where(.lp-page) .ucard .ic{width:38px;height:38px;border-radius:50%;border:1px solid #D8BCC1;background:#fff;display:grid;place-items:center;flex:none} :where(.lp-page) .ucard h3{font-family:var(--serif);font-size:19px} :where(.lp-page) .ucard p{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.9} :where(.lp-page) .ucard .ex{border-top:1px solid var(--line);margin-top:18px;padding-top:14px} :where(.lp-page) .ucard .ex b{font-size:12px;color:var(--gold-ink)} :where(.lp-page) .ucard .ex .tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px} :where(.lp-page) .ucard .ex .tags span{font-size:12px;font-weight: bold;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;color:var(--body)} /* ---------- carousel ---------- */ :where(.lp-page) .carw{position:relative;margin-top:40px} :where(.lp-page) .car{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; padding:6px 2px 18px;-ms-overflow-style:none;scrollbar-width:none} :where(.lp-page) .car::-webkit-scrollbar{display:none} :where(.lp-page) .ccard{flex:0 0 clamp(280px,32%,360px);scroll-snap-align:start;border:1px solid var(--line-2); border-radius:5px;padding:26px 26px 24px;box-shadow:var(--shadow); /* 上端の赤ラインは枠線の内側に背景として描く（デザイン準拠）。角丸に沿って上側だけ丸まり、下辺は直線。border-top 3px → 1px 分、padding-top を +2px */ background:linear-gradient(var(--red),var(--red)) top/100% 4px no-repeat #fff} :where(.lp-page) .ccard .tg{display:inline-block;background:var(--gold-pale);color:var(--gold-ink);font-size:11.5px;font-weight:700; border-radius:4px;padding:4px 12px} :where(.lp-page) .ccard h3{font-size:17px;margin:14px 0 16px} :where(.lp-page) .crow{display:grid;grid-template-columns:64px 1fr;gap:12px;margin-bottom:12px} :where(.lp-page) .crow .k{font-size:11.5px;font-weight:700;border-radius:4px;padding:4px 0;text-align:center;height:fit-content; background:var(--cream);color:var(--body)} :where(.lp-page) .crow .k.p{background:var(--red-soft);color:var(--red)} :where(.lp-page) .crow p{font-size:12.5px;color:var(--muted);line-height:1.8} :where(.lp-page) .carnav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff; border:1px solid var(--line);color:var(--red);font-size:15px;cursor:pointer;box-shadow:var(--shadow-2);z-index:3; display:grid;place-items:center} :where(.lp-page) .carnav.prev{left:-14px}:where(.lp-page) .carnav.next{right:-14px} /* カルーセルバー: 見た目は 6px、上下 6px の余白をクリック/ドラッグの当たり判定に含める */ :where(.lp-page) .carbar{height:6px;padding:6px 0;box-sizing:content-box;background:var(--gold-soft);background-clip:content-box;border-radius:999px; margin:0 6px;cursor:pointer;touch-action:none;user-select:none} :where(.lp-page) .carbar i{display:block;height:6px;background:var(--gold);border-radius:999px;width:28%;cursor:grab} /* ---------- pricing ---------- */ :where(.lp-page) .price{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;margin-top:44px} :where(.lp-page) .pmain{border:1px solid var(--line-2);border-radius:6px;padding:37px 36px 34px; /* 上端の赤ラインは .ccard と同じく枠線の内側に背景として描く。border-top 4px → 1px 分、padding-top を +3px */ background:linear-gradient(var(--red),var(--red)) top/100% 4px no-repeat var(--cream-2)} :where(.lp-page) .pnum{display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap} :where(.lp-page) .pnum .s{font-size:15px;font-weight:700;color:var(--ink-2)} :where(.lp-page) .pnum .b{font-size:56px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.1} :where(.lp-page) .pnum .u{font-size:15px;font-weight:700;color:var(--ink-2)} :where(.lp-page) .pnum .pu{font-size:13px;color:var(--muted);border-left:1px solid var(--line);padding-left:10px;margin-left:2px} :where(.lp-page) .plist{list-style:none;padding:22px 0 0;margin:20px 0 0;border-top:1px solid var(--line)} :where(.lp-page) .plist li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--body);padding:7px 0} :where(.lp-page) .plist li::before{content:"✓";color:var(--gold);font-weight:700;flex:none} :where(.lp-page) .ptrial{background:var(--gold-pale);border-radius:6px;padding:30px 32px} :where(.lp-page) .ptrial h3{font-size:16px;margin-bottom:16px} :where(.lp-page) .ptrial ul{list-style:none;padding:0;margin:0} :where(.lp-page) .ptrial li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--body);padding:7px 0} :where(.lp-page) .ptrial li::before{content:"✓";color:var(--red);font-weight:700;flex:none} :where(.lp-page) .pcustom{border:1px solid var(--gold);border-radius:7px;padding:26px 30px;margin-top:22px;display:grid; grid-template-columns:1fr 210px;gap:26px;align-items:center;background:#fff} :where(.lp-page) .pcustom .lab{display:inline-block;border:1px solid var(--gold);border-radius:4px;padding:4px 12px;font-size:11.5px; font-weight:700;color:var(--gold-ink)} :where(.lp-page) .pcustom h3{font-size:19px;margin:12px 0 12px} :where(.lp-page) .pcustom p{font-size:13px;color:var(--muted);line-height:1.9} :where(.lp-page) .pcustom .sm{font-size:12px;color:var(--faint);margin-top:12px;line-height:1.8} :where(.lp-page) .pright{border-left:1px solid var(--line);padding-left:26px;text-align:center} :where(.lp-page) .pright .ask-p{font-size:24px;font-weight:700;color:var(--red);margin-bottom:14px} /* ---------- faq ---------- */ :where(.lp-page) .faq{max-width:830px;margin:44px auto 0;display:flex;flex-direction:column;gap:10px} :where(.lp-page) .qa{background:#fff;border:1px solid var(--line-2);border-radius:7px;box-shadow:var(--shadow)} :where(.lp-page) .qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:15px;padding:17px 22px} :where(.lp-page) .qa summary::-webkit-details-marker{display:none} :where(.lp-page) .qa .qi{width:26px;height:26px;border-radius:50%;background:var(--red-deep);color:#fff;font-size:12px;font-weight:700; display:grid;place-items:center;flex:none;font-family:var(--serif)} :where(.lp-page) .qa .qt{font-size:14px;font-weight:700;color:var(--ink-2);flex:1} /* 矢印: .fsel::after と同じ丸線端の SVG mask（HTML の「⌄」は font-size:0 で不可視化） */ :where(.lp-page) .qa .ch{width:12px;height:8px;font-size:0;background-color:var(--red);transition:transform .2s;flex:none; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} :where(.lp-page) .qa[open] .ch{transform:rotate(180deg)} :where(.lp-page) .qa .ans{padding:0 22px 22px 63px;font-size:13px;color:var(--body);line-height:1.95} /* ---------- final CTA ---------- */ :where(.lp-page) .cta{background:#6A1928 url(../assets/bg_Final_CTA.svg) no-repeat center/cover;color:#fff; position:relative;overflow:hidden;padding:64px 0} :where(.lp-page) .cta .wrap{position:relative;display:grid;grid-template-columns:1fr;gap:36px;justify-items:center} /* S373: 見出しの下にフォームを縦積み */ :where(.lp-page) .cta .ctx{text-align:center;max-width:760px} :where(.lp-page) .cta .lab{font-size:12.5px;font-weight:700;color:#E8C9CE} :where(.lp-page) .cta h2{font-family:var(--serif);font-size:30px;color:#fff;line-height:1.6;margin-top:16px;font-weight:700} :where(.lp-page) .cta p{font-size:14px;color:#EBD5D8;margin-top:20px;line-height:2} /* ---------- footer ---------- */ :where(.lp-page) .ft{background:var(--footer);color:#C9BDBF;padding:34px 0 26px;font-size:12.5px} :where(.lp-page) .ft .brand svg{width:34px;height:34px} :where(.lp-page) .ft .top{display:flex;align-items:center;gap:40px;flex-wrap:wrap} :where(.lp-page) .ft .brand .ja{color:#fff;font-size:21px} :where(.lp-page) .ft .brand .fsub{font-size:11.5px;color:#B8A9AB;margin-top:6px;letter-spacing:.02em} :where(.lp-page) .ft .brand .en{color:var(--gold-soft)} :where(.lp-page) .ft nav{display:flex;gap:22px;flex-wrap:wrap;margin-left:8px} :where(.lp-page) .ft nav a{color:#D8CDCE;text-decoration:none} :where(.lp-page) .ft nav a:hover{color:#fff} :where(.lp-page) .ft .contact{margin-left:auto;text-align:left;line-height:1.7;display:flex;gap:10px;align-items:flex-start} :where(.lp-page) .ft .contact svg{margin-top:5px;flex:none} :where(.lp-page) .ft .contact b{color:#fff;font-weight:700;font-size:13.5px} :where(.lp-page) .ft .contact a{color:#fff;text-decoration:none} :where(.lp-page) .ft .contact a:hover b{text-decoration:underline;text-underline-offset:3px} :where(.lp-page) .ft .contact span{color:#9C8E90;font-size:11.5px} :where(.lp-page) .ft .bot{border-top:1px solid rgba(255,255,255,.1);margin-top:22px;padding-top:16px;display:flex; justify-content:space-between;gap:20px;flex-wrap:wrap;color:#9C8E90;font-size:12px} :where(.lp-page) .ft .legal{display:flex;gap:24px;flex-wrap:wrap} :where(.lp-page) .ft .legal a{color:#D8CDCE;text-decoration:underline;text-underline-offset:3px} /* ---------- responsive ---------- */ @media(max-width:1100px){ :where(.lp-page) .nav{display:none} :where(.lp-page) .hd .in{padding:11px 18px} :where(.lp-page) .ovw-grid{grid-template-columns:1fr;gap:14px} :where(.lp-page) .mcp{flex-direction:row;gap:10px;padding:4px 0} :where(.lp-page) .vs{grid-template-columns:1fr;gap:26px} :where(.lp-page) .vs-arrow{display:none} :where(.lp-page) .steps{grid-template-columns:1fr;gap:14px} :where(.lp-page) .step-ar{display:none} :where(.lp-page) .price{grid-template-columns:1fr} :where(.lp-page) .cta .wrap{grid-template-columns:1fr;gap:34px} :where(.lp-page) .carnav{display:none} } @media(max-width:880px){ :where(.lp-page) .hd-cta .btn{display:none} :where(.lp-page) .hd .in{gap:14px;padding:11px 16px} } @media(max-width:900px){ :where(.lp-page) .cards4{grid-template-columns:1fr 1fr} :where(.lp-page) .uc{grid-template-columns:1fr} :where(.lp-page) .duo{grid-template-columns:1fr} :where(.lp-page) .after3,:where(.lp-page) .cards3{grid-template-columns:1fr} :where(.lp-page) .checks,:where(.lp-page) .zone-grid{grid-template-columns:1fr} :where(.lp-page) .pcustom{grid-template-columns:1fr} :where(.lp-page) .pright{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:22px} :where(.lp-page) .layers-row{grid-template-columns:repeat(2,1fr)} :where(.lp-page) .tabs{grid-template-columns:repeat(2,1fr)} :where(.lp-page) .hero-cards{grid-template-columns:1fr} } @media(max-width:640px){ :where(.lp-page) .sec{padding:68px 0} :where(.lp-page) .hero .wrap{padding-top:56px;padding-bottom:72px} :where(.lp-page) .hero h1{font-size:32px} :where(.lp-page) .h2{font-size:24px} :where(.lp-page) .serif-block .l1,:where(.lp-page) .serif-block .l2{font-size:19px} :where(.lp-page) .serif-block .l3{font-size:20px} :where(.lp-page) .ovw{padding:26px 16px} :where(.lp-page) .ovw-h{font-size:20px} :where(.lp-page) .ovw-h::before,:where(.lp-page) .ovw-h::after{width:20px} :where(.lp-page) .ovw-foot{font-size:15px} :where(.lp-page) .ovw-foot::before,:where(.lp-page) .ovw-foot::after{width:34px} :where(.lp-page) .cards4{grid-template-columns:1fr} :where(.lp-page) .mini-row{grid-template-columns:1fr} :where(.lp-page) .pnum .b{font-size:42px} :where(.lp-page) .cta h2{font-size:24px} :where(.lp-page) .q-card,:where(.lp-page) .tp,:where(.lp-page) .pmain,:where(.lp-page) .ptrial,:where(.lp-page) .pcustom,:where(.lp-page) .soonbox{padding-left:20px;padding-right:20px} :where(.lp-page) .brand-sub{display:none} :where(.lp-page) .ft .contact{margin-left:0;text-align:left} :where(.lp-page) .qa .ans{padding-left:22px} } /* ========== v0.4 additions ========== */ /* header */ :where(.lp-page) .hd-cta .login{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;margin-left:6px;white-space:nowrap} :where(.lp-page) .hd-cta .login:hover{color:var(--red)} /* floating download card */ :where(.lp-page) .fpop{position:fixed;right:26px;bottom:26px;width:298px;background:#fff;border:1px solid var(--gold-soft);border-radius:8px; box-shadow:var(--shadow-2);overflow:hidden;z-index:70} :where(.lp-page) .fpop-x{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--line); color:var(--muted);font-size:15px;line-height:1;cursor:pointer;z-index:2;display:grid;place-items:center} :where(.lp-page) .fpop-img{position:relative;height:146px;background:#EDEAE6} :where(.lp-page) .fpop-img img{width:100%;height:100%;object-fit:cover} :where(.lp-page) .fpop-badge{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;background:var(--red-deep);color:#fff; font-size:11px;font-weight:700;border-radius:3px;padding:4px 9px} :where(.lp-page) .fpop-badge i{width:6px;height:6px;border-radius:50%;background:var(--gold)} :where(.lp-page) .fpop-body{padding:16px 16px 18px} :where(.lp-page) .fpop-body h4{font-size:14.5px;line-height:1.55;color:var(--ink)} :where(.lp-page) .fpop-body p{font-size:11.5px;color:var(--muted);margin-top:8px} :where(.lp-page) .fpop-body .btn{width:100%;justify-content:center;margin-top:12px;padding:11px 14px;font-size:13px} /* overview (illustration) */ :where(.lp-page) .ovw{background:none;border:0;padding:0;margin-top:34px} :where(.lp-page) .ovw-h{margin-bottom:26px} :where(.lp-page) .ovw-h::before,:where(.lp-page) .ovw-h::after{width:110px;background:var(--gold-soft)} :where(.lp-page) .ovw-h::before{background:linear-gradient(90deg,transparent,var(--gold))} :where(.lp-page) .ovw-h::after{background:linear-gradient(90deg,var(--gold),transparent)} :where(.lp-page) .ovw-img{width:100%;height:auto;display:block} :where(.lp-page) .ovw-foot{margin-top:40px;font-size:19px} /* personal graph */ :where(.lp-page) .pg-ph{width:64px;height:56px;background:#D9D9D9;margin:0 auto 26px} :where(.lp-page) .lead.wide{max-width:840px} :where(.lp-page) .pg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px} :where(.lp-page) .pgcard{background:#fff;border:1px solid var(--gold-soft);border-radius:6px;padding:18px 18px 16px} :where(.lp-page) .pgcard h4{font-size:14px;margin-bottom:7px} :where(.lp-page) .pgcard p{font-size:12px;color:var(--muted);line-height:1.75} :where(.lp-page) .pg-note{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:26px;font-size:12.5px;color:var(--muted)} /* after the report */ :where(.lp-page) .after-foot{text-align:center;font-size:13px;color:var(--body);margin-top:36px} :where(.lp-page) .after-foot a{font-weight:700;margin-left:12px;text-underline-offset:3px} /* comparison visual */ :where(.lp-page) .cmp-vis{max-width:890px;margin:44px auto 0;background:var(--cream-2);border:1px solid var(--line);border-radius:10px;padding:12px; display:grid;grid-template-columns:1fr 92px 1fr;gap:6px;align-items:stretch} :where(.lp-page) .cv-box{background:#F1EAE0;border-radius:8px;padding:16px 18px;display:grid;grid-template-columns:1fr 150px;gap:12px;align-items:center} :where(.lp-page) .cv-box.on{background:radial-gradient(120% 130% at 70% 40%,#8A2334 0%,#6A1928 50%,#521321 100%);color:#fff} :where(.lp-page) .cv-t b{display:block;font-size:13.5px;color:var(--ink-2)} :where(.lp-page) .cv-t span{display:block;font-size:11px;color:var(--muted);margin-top:4px} :where(.lp-page) .cv-t em{display:inline-block;font-style:normal;font-size:11px;font-weight:700;background:#E6DED1;color:var(--body);border-radius:999px;padding:3px 12px;margin-top:10px} :where(.lp-page) .cv-box.on .cv-t b{color:#fff} :where(.lp-page) .cv-box.on .cv-t span{color:#F0DCDF} :where(.lp-page) .cv-box.on .cv-t em{background:none;color:#E8C46B;padding:0;font-size:12px} :where(.lp-page) .cv-scatter,:where(.lp-page) .cv-hub{width:100%;height:auto} :where(.lp-page) .cv-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--red);font-size:11px;font-weight:700} :where(.lp-page) .cv-arrow i{display:block;width:56px;height:2px;background:var(--gold);position:relative} :where(.lp-page) .cv-arrow i::after{content:"";position:absolute;right:-1px;top:-5px;border:6px solid transparent;border-left:8px solid var(--gold);border-right:0} /* how it works foot */ :where(.lp-page) .how-foot{text-align:center;font-size:13px;color:var(--muted);margin-top:34px;line-height:1.95} /* pricing */ :where(.lp-page) .plist li.gap{margin-top:22px} :where(.lp-page) .plist li b{color:var(--ink);font-weight:700} :where(.lp-page) .pright .btn{padding:10px 16px} /* final CTA form */ :where(.lp-page) .formbox{background:#fff;border-radius:6px;color:var(--body);box-shadow:var(--shadow-2);overflow:hidden;width:100%;max-width:760px} /* S373: 会社名 | 部署名 だけ PC で 2 列に。他は 1 行ずつ。スマホは 1 列 */ :where(.lp-page) .frow{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} :where(.lp-page) .fform{padding:20px 30px 26px} :where(.lp-page) .fl{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--ink-2);margin:0 0 9px} :where(.lp-page) .fl .req{background:var(--red-deep);color:#fff;font-size:10.5px;font-weight:700;border-radius:3px;padding:2px 8px} :where(.lp-page) .fl .opt{background:var(--gold-pale);color:var(--gold-ink);font-size:10.5px;font-weight:700;border-radius:3px;padding:2px 8px} :where(.lp-page) .fform input,:where(.lp-page) .fform select{width:100%;font-family:inherit;font-size:14px;color:var(--ink-2);background:var(--cream-2); border:1px solid var(--line);border-radius:5px;padding:13px 15px;margin-bottom:16px;appearance:none;-webkit-appearance:none} :where(.lp-page) .fform textarea{width:100%;font-family:inherit;font-size:14px;line-height:1.7;color:var(--ink-2);background:var(--cream-2); border:1px solid var(--line);border-radius:5px;padding:12px 15px;margin-bottom:6px;resize:vertical;min-height:96px} :where(.lp-page) .fform input::placeholder,:where(.lp-page) .fform textarea::placeholder{color:var(--faint)} :where(.lp-page) .fform input:focus,:where(.lp-page) .fform select:focus,:where(.lp-page) .fform textarea:focus{outline:2px solid var(--gold-soft);border-color:var(--gold)} /* S373: デモ依頼フォーム — 文字数表示・honeypot (画面外) ・送信結果・注記 */ :where(.lp-page) .fcount{text-align:right;font-size:11.5px;color:var(--muted);margin:0 0 14px} :where(.lp-page) .fhp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} :where(.lp-page) .btn.fsub:disabled{opacity:.6;cursor:default} :where(.lp-page) .fmsg{font-size:12.5px;line-height:1.7;margin:10px 0 0;min-height:0;color:var(--muted)} :where(.lp-page) .fmsg:empty{display:none} :where(.lp-page) .fmsg.err{color:var(--red-deep)} :where(.lp-page) .cta .fnote{font-size:11.5px;color:var(--muted);line-height:1.7;margin:12px 0 0} :where(.lp-page) .cta .fnote a{color:var(--gold-ink);text-decoration:underline} :where(.lp-page) .fsel{position:relative} /* 下向き矢印: border では線端を丸くできないため、stroke-linecap:round の SVG を mask にして描く（色は background-color） */ :where(.lp-page) .fsel::after{content:"";position:absolute;right:14px;top:20px;width:12px;height:8px;background-color:var(--ink-2);pointer-events:none; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat} :where(.lp-page) .btn.fsub{width:100%;justify-content:center;padding:8px 11px;font-size:13.5px;line-height:inherit;cursor:pointer;margin-top:4px} /* 文字サイズ・行間 (button は既定が normal なので継承させる) はヘッダーの「デモを依頼する」(.btn.pri) と同じ。上下余白だけ 8px に広げる */ :where(.lp-page) .fchk{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px 22px} :where(.lp-page) .fchk li{font-size:11.5px;color:var(--muted);display:flex;gap:6px;align-items:center} :where(.lp-page) .fchk li::before{content:"✓";color:var(--gold-ink);font-size:11px} /* 受付完了パネル (S373。S363 の「準備中」パネルを流用) */ :where(.lp-page) .fprep{padding:34px 30px 32px;text-align:center} :where(.lp-page) .fprep-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;padding:4px 14px;border-radius:999px;background:var(--gold-pale);color:var(--gold-ink)} :where(.lp-page) .fprep b{display:block;font-size:16px;color:var(--ink-2);margin-top:14px} :where(.lp-page) .cta .fprep p{font-size:13px;color:var(--muted);line-height:1.9;margin-top:10px} :where(.lp-page) .fprep-btn{width:100%;justify-content:center;padding:13px 20px;font-size:14px;cursor:pointer;margin-top:18px;font-family:inherit} :where(.lp-page) .cta .lab{color:#E8C46B} :where(.lp-page) .cta .wrap{gap:40px} :where(.lp-page) .cta p{color:#F0DCDF} /* spacing tune vs v0.4 */ :where(.lp-page) #overview{padding:62px 0 96px} :where(.lp-page) .ovw{margin-top:18px} :where(.lp-page) .ovw-h{margin-bottom:22px} :where(.lp-page) .ovw-foot{margin-top:44px} :where(.lp-page) #pgraph{padding:58px 0 62px} :where(.lp-page) .pg-grid{margin-top:26px} :where(.lp-page) .pg-note{margin-top:24px} :where(.lp-page) #how{padding-top:56px} :where(.lp-page) .after-foot{margin-top:30px} /* ========== overview diagram (旧 overview.css を統合) ========== */ /* ========================================================== ラトリスの全体構成 — 図解パーツ（HTML + inline SVG） 基準: デザイン 1440px 幅での実寸（px 固定）。親で transform: scale() 可。 ========================================================== */ :where(.lp-page) .ov{--ov-bg:#FFFDFA;--ov-line:#E0D1BD;--ov-ink:#1E1A18;--ov-gold-ink:#6D4A24; --ov-wine-deep:#861A35;--ov-pink:#FAF1EE;--ov-pink-line:#E5C5C6;--ov-cream:#FBF5ED;--ov-note:#FBF2E6; font-family:var(--sans);color:var(--ov-ink);line-height:1.3} :where(.lp-page) .ov *{box-sizing:border-box} /* ---- panel: あなたの手元（ローカル） ---- */ :where(.lp-page) .ov-local{position:relative;width:400px;height:287px;border:1px solid #DEC9AD; background:var(--ov-bg) url(../assets/illust_men_thinking.svg) no-repeat left 7px bottom 7px/142px auto; border-radius:10px;box-shadow:0 3px 0 rgba(127,85,48,.05)} :where(.lp-page) .ov-local .ttl{position:absolute;left:0;right:0;top:15px;text-align:center;font-size:15px;font-weight:700;letter-spacing:.02em} :where(.lp-page) .ov-card{position:absolute;z-index:2;background:#fff;border:1px solid var(--ov-line);border-radius:8px;box-shadow:0 3px 0 rgba(106,64,40,.05)} :where(.lp-page) .ov-ic{width:26px;height:26px;border-radius:50%;background:var(--ov-pink);border:1px solid var(--ov-pink-line);display:grid;place-items:center;flex:none} :where(.lp-page) .ov-ic.cream{background:var(--ov-cream)} /* 一文の問い */ :where(.lp-page) .ov-q{left:7px;top:47px;width:116px;height:52px;display:flex;align-items:center;gap:6px;padding:0 8px 0 9px;border-color:#E2D1BB;box-shadow:none} :where(.lp-page) .ov-q .ov-ic{position:relative;overflow:visible} :where(.lp-page) .ov-q b{font-size:13.5px;font-weight:700;white-space:nowrap} /* Claude */ :where(.lp-page) .ov-cl{left:133px;top:47px;width:133px;height:216px;padding:10px 9px} :where(.lp-page) .ov-cl .ov-hd{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700} :where(.lp-page) .ov-cl .bub{position:relative;border-radius:7px} :where(.lp-page) .ov-cl .bub.ai{margin:12px 4px 0 5px;height:40px;background:linear-gradient(135deg,#F7EEE3,#EADBCA);padding:9px 9px 0} :where(.lp-page) .ov-cl .bub.ai i{display:block;height:3px;border-radius:2px;background:#B8A897;margin-bottom:6px;width:86%} :where(.lp-page) .ov-cl .bub.ai i:nth-child(3){width:62%;margin-bottom:0} :where(.lp-page) .ov-cl .bub.me{margin:12px 3px 0 9px;height:50px;background:linear-gradient(135deg,#A93B54,#8F263F);padding:11px 11px 0} :where(.lp-page) .ov-cl .bub.me i{display:block;height:2.6px;border-radius:2px;background:#fff;opacity:.92;margin-bottom:6.4px;width:70%} :where(.lp-page) .ov-cl .bub.me i:nth-child(2){width:90%}:where(.lp-page) .ov-cl .bub.me i:nth-child(3){width:78%}:where(.lp-page) .ov-cl .bub.me i:nth-child(4){width:55%;margin-bottom:0} :where(.lp-page) .ov-cl .av{position:absolute;right:-6px;top:-8px;width:18px;height:18px;border-radius:50%;background:#D997A5;border:1px solid #fff; display:grid;place-items:center} :where(.lp-page) .ov-cl .inp{position:absolute;left:8px;right:8px;bottom:9px;height:22px;border:1px solid #D8C4A8;border-radius:5px; display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 9px;font-size:11px;font-weight:700;color:var(--ov-gold-ink);letter-spacing:.05em} /* Personal Graph（S368: LP デザイン更新 — カード背景を #971E3C に。Figma 234:7117 に合わせ、見出しは白・アイコン下地は淡桃・注記枠は金茶） */ :where(.lp-page) .ov-pg{left:275px;top:47px;width:118px;height:216px;padding:10px 6px;background:#971E3C;color:#fff} :where(.lp-page) .ov-pg .ov-hd{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;line-height:1.15} :where(.lp-page) .ov-pg .graph{display:block;margin:6px auto 0} :where(.lp-page) .ov-pg .note{position:absolute;left:5px;right:5px;bottom:8px;height:40px;background:var(--ov-note);border:1px solid #CAA768; border-radius:6px;display:grid;place-items:center;text-align:center;font-size:12px;font-weight:700;line-height:1.4;color:#5C4428} /* 思考の吹き出し（人物イラストは .ov-local の背景） */ :where(.lp-page) .ov-think{position:absolute;z-index:1;left:80px;top:98px} /* ========================================================== 全体図コンテナ (1090x540) ========================================================== */ :where(.lp-page) .ov-full{position:relative;width:1090px;height:540px} /* 高さは配線 SVG(.ov-wire-pc) と同じ 540。タブレット幅では .ovw-fig が overflow-y:hidden なので、ここより下の線は切れる */ :where(.lp-page) .ov-row1{position:absolute;left:0;top:0;width:640px;height:287px} /* ローカル + MCP + エンジンの入れ物。PC では等倍なので配置に影響しない */ /* スマホ専用の部品は PC では隠す */ :where(.lp-page) .ov-mcp .ov-mcp-sp,:where(.lp-page) .ov-mcp2-v,:where(.lp-page) .ov-wire-sp{display:none} :where(.lp-page) .ov-full .ov-local{position:absolute;left:2px;top:0} /* MCP 双方向（左） */ :where(.lp-page) .ov-mcp{position:absolute;left:403px;top:128px;width:62px;display:flex;flex-direction:column;align-items:center;gap:6px} :where(.lp-page) .ov-mcp b{font-size:15px;font-weight:700;color:var(--ov-ink);letter-spacing:.02em;line-height:1} :where(.lp-page) .ov-mcp span{font-size:11px;font-weight:700;color:#3A2E24;line-height:1} :where(.lp-page) .ov-mcp2{position:absolute;left:621px;top:128px} /* ラトリス・エンジン */ :where(.lp-page) .ov-engine{position:absolute;left:465px;top:32px;width:155px;height:238px;background:#fff;border:1px solid #DFCEB8;border-radius:8px; box-shadow:0 3px 0 rgba(106,64,40,.06);text-align:center} :where(.lp-page) .ov-engine .ttl{font-size:13.5px;font-weight:700;color:var(--ov-ink);margin-top:9px;letter-spacing:.01em} :where(.lp-page) .ov-engine .ov-funnel{display:block;margin:2px auto 0} /* World Graph */ :where(.lp-page) .ov-wg{position:absolute;padding-top:5px;left:653px;top:0;height:287px;border-radius:10px;overflow:hidden; background:linear-gradient(135deg,#7B172E,#611222);box-shadow:0 3px 0 rgba(73,16,31,.12)} :where(.lp-page) .ov-wg .net{margin: 0 10px 10px 10px;} :where(.lp-page) .ov-wg .ttl{text-align:center;color:#fff;font-size:26px; font-family:Arial,"Helvetica Neue",Helvetica,var(--sans);letter-spacing:.005em;line-height: 1.2;} /* 5層レポート帯 */ :where(.lp-page) .ov-band{position:absolute;left:60px;top:347px;width:980px;height:180px;border:1px solid #D8BD98;border-radius:10px; background:linear-gradient(180deg,#FFFDF9,#F8F1E4);box-shadow: 0 2px 0 rgba(60, 40, 30, .05);} :where(.lp-page) .ov-band-lab{position:absolute;left:50%;top:-16px;transform:translateX(-50%);background:#FFFDF9;border: 1px solid #EADFCE;border-radius:999px;padding:4px 18px; font-size:17px;font-weight:700;color:#861A35;box-shadow: 0 2px 0 rgba(60, 40, 30, .05);white-space:nowrap;line-height:1.4;z-index:3} /* .ov-layer 自身 = 1px のグラデーション枠（角丸に追従）。::before = 背景グラデーション（inset:1px で枠を見せる） */ :where(.lp-page) .ov-layer{position:absolute;isolation:isolate;top:22px;height:142px;border-radius:9px;text-align:center;color:var(--ov-ink); background:linear-gradient(to bottom,#ffffff,#DFC7A79E);box-shadow:0 2px 0 rgba(60,40,30,.05)} :where(.lp-page) .ov-layer::before{content:"";position:absolute;inset:1px;border-radius:8px;z-index:-1; background:linear-gradient(135deg,#FFFDF9 0%,#FBF5ED 10%,#F4EADF 100%)} :where(.lp-page) .ov-layer.g1{left:12px;width:155px} :where(.lp-page) .ov-layer.g1 .lic{margin: 22px auto 0} :where(.lp-page) .ov-layer.g2{left:187px;width:180px} :where(.lp-page) .ov-layer.g5{left:765px;width:200px} :where(.lp-page) .ov-layer.g5 .lhead{margin: 2px auto 15px auto} /* core は box-shadow を使わず、::after を「同じ形に切った影」として 2px 下に敷く（box-shadow は clip-path に追従しないため） */ :where(.lp-page) .ov-layer.core{color:#fff;background:none;box-shadow:none} :where(.lp-page) .ov-layer.core::before{inset:0;border-radius:inherit;background:linear-gradient(135deg,#981B3A 0%,#86142F 46%,#711126 100%)} :where(.lp-page) .ov-layer.core::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-2;transform:translateY(2px); background:rgba(60,40,30,.05)} :where(.lp-page) .ov-layer.core::before,:where(.lp-page) .ov-layer.core::after{clip-path:var(--cut)} /* カットの形は --cut で一元管理（::before の背景と ::after の影の両方に効く） */ :where(.lp-page) .ov-layer.c3{left:387px;width:180px;border-radius:9px 9px 6px 9px;--cut:polygon(0 0,95% 0,100% 100%,0 100%)} :where(.lp-page) .ov-layer.c4{left:565px;width:180px;border-radius:9px 9px 9px 6px;--cut:polygon(0 0,100% 0,100% 100%,5% 100%)} /* 番号バッジと図を包むヘッダ。上辺のハイライト線（border-top）を角丸に沿わせるため独立させている */ :where(.lp-page) .ov-layer .lhead{position:relative;padding-top: 5px;border-top:0.8px solid #fff;margin:2px auto 0 auto;width:92%} /* c3 は上辺右側がカットされているため、lhead の左端(4%)は固定したまま右端だけ 94% に詰める（幅 92%→90%） */ :where(.lp-page) .ov-layer.c3 .lhead{width:90%;margin-left:4%} :where(.lp-page) .ov-layer .num{position:absolute;left:5px;top:8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center; font-size:13px;font-weight:700;background:linear-gradient(135deg,#C9A063,#B3833E,#916226);color:#fff;box-shadow: 2px 2px 0 rgba(60, 40, 30, .05)} /* 数字の上の光沢の弧: 縁から 2px 内側の円(::before)に border-top だけ色を付ける。円の角丸で両端が自然にすぼまる。 --num-arc-inset = 縁からの距離、--num-arc-w = 弧の太さ。core(3・4)は白バッジなので弧なし */ :where(.lp-page) .ov-layer .num{--num-arc-inset:2px;--num-arc-w:1px} :where(.lp-page) .ov-layer .num::before{content:"";position:absolute;inset:var(--num-arc-inset);border-radius:50%;pointer-events:none; border:var(--num-arc-w) solid transparent;border-top-color:#F4DFB9} :where(.lp-page) .ov-layer.core .lhead{border-top-color:#C95C75; margin: 1px auto 12px 4%} :where(.lp-page) .ov-layer.core .lic{margin-top: 17px} :where(.lp-page) .ov-layer.core .num{background:#fff;color:#7E1C35;box-shadow:2px 2px 0 rgba(79,11,27,.10)} :where(.lp-page) .ov-layer.core .num::before{content:none} :where(.lp-page) .ov-layer.core .lt{margin-top:10px} :where(.lp-page) .ov-layer .lic{display:block;margin:7px auto 0;overflow:visible} :where(.lp-page) .ov-layer .lt{font-size:14px;font-weight:700;margin-top:4px;letter-spacing:.02em} :where(.lp-page) .ov-layer.g2 .lt,:where(.lp-page) .ov-layer.g5 .lt{font-size:14px} :where(.lp-page) .ov-layer .ls{font-size:12px;font-weight: bold;color:#5D4B3A;margin-top:2px;letter-spacing:.01em} :where(.lp-page) .ov-layer .lp{display:inline-block;margin-top: 2px;font-size:12px;font-weight:700;color:#851630;background:#FBF3E6;border:1px solid var(--gold-figure-border); border-radius:999px;padding:1px 9px;line-height:1.5} /* 外枠 = border。内側上辺のハイライト線は 1px 高さの背景レイヤーで描き、枠の内側から上 1px・左右 1px 内側（位置 1px 1px、幅 calc(100% - 2px)）に置いて枠との間に隙間を作る */ :where(.lp-page) .ov-layer .ct{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:118px;height:28px;line-height:26px;font-size:14px;font-weight:700;color:#fff; border:0.5px solid #D2A45D; background: linear-gradient(#E9C98F, #E9C98F) 0.6px 0.6px / calc(100% - 2px) 0.6px no-repeat, linear-gradient(90deg, #A46F35, #B98A50, #9F6A31); box-shadow:2px 2px 0 rgba(60,40,30,.05)} :where(.lp-page) .ov-layer.c3 .ct{left:calc(50% - 4px)} :where(.lp-page) .ov-layer.c4 .ct{left:calc(50% + 4px)} /* 矢印は文字「›」でなく、SVG の折れ線を mask にして描く（フォントのグリフは先端が丸いため）。 折れ線の端 = stroke-linecap:round（上辺・下辺の端が丸い）、折れ目 = stroke-linejoin:miter（先端が尖る）。 .ov-chev = 位置決め用の箱（旧グリフの 26px 箱と同寸）、::before = 山形本体。色は background で指定。 形を変えるときは --chev-mask 内の SVG を編集: points = 3 頂点（上端 / 先端 / 下端）、stroke-width = 線の太さ。 viewBox 1 単位 = 1px（--chev-w/--chev-h と一致させる）。旧グリフのインク位置に合わせ left:1px top:5px */ /* 影は箱(.ov-chev)側に filter:drop-shadow で付ける。::before に box-shadow を付けると箱の矩形に影が付き、かつ mask で影ごと切られるため */ :where(.lp-page) .ov-chev{position:absolute;top:56px;width:26px;height:26px;--chev-w:10px;--chev-h:16px;filter:drop-shadow(2px 2px 0 rgba(60,40,30,.05)); --chev-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpolyline points='2.5,2.2 8.3,8 2.5,13.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='miter'/%3E%3C/svg%3E")} :where(.lp-page) .ov-chev::before{content:"";position:absolute;left:1px;top:5px;width:var(--chev-w);height:var(--chev-h);background:#B28238; -webkit-mask:var(--chev-mask) 0 0/100% 100% no-repeat;mask:var(--chev-mask) 0 0/100% 100% no-repeat} /* 矢印ごとの横位置（ov-layer の g1/g2… に倣い o1/o2/o3。o1 = 1→2 の間、o2 = 2→3 の間、o3 = 4→5 の間） */ :where(.lp-page) .ov-chev.o1{left:170px} :where(.lp-page) .ov-chev.o2{left:370px} :where(.lp-page) .ov-chev.o3{left:749px} /* オーバーレイ配線・ラベル */ :where(.lp-page) .ov-wire{position:absolute;left:0;top:0;pointer-events:none;z-index:4} :where(.lp-page) .ov-ret-lab{position:absolute;left:77px;top:313px;background:#FFFAF4;border-radius:999px;padding:2px 12px;font-size:12px;font-weight:700;color:var(--ov-wine-deep); line-height:1.6;z-index:5} /* index.html への組み込み */ :where(.lp-page) .ovw-fig{width:1090px;margin:0 calc((100% - 1090px) / 2)} /* ========== responsive (SP / tablet) — PC 版を元に生成。細部は追って調整 ========== */ /* --- ハンバーガー / モバイルメニュー（共通定義。表示は下のメディアクエリで切替） --- */ :where(.lp-page) .burger span{display:block;width:18px;height:2px;background:var(--ink-2);margin:3px auto;border-radius:1px;transition:transform .2s,opacity .2s} :where(.lp-page) .hd.open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)} :where(.lp-page) .hd.open .burger span:nth-child(2){opacity:0} :where(.lp-page) .hd.open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)} :where(.lp-page) .mnav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-2); padding:10px 20px 22px;display:flex;flex-direction:column;max-height:calc(100vh - 64px);overflow:auto} :where(.lp-page) .mnav[hidden]{display:none} :where(.lp-page) .mnav .nav-l{display:block;padding:13px 4px;border-bottom:1px solid var(--line-2);color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500} :where(.lp-page) .mnav .btn{justify-content:center;margin-top:12px;padding:13px 20px} :where(.lp-page) .mnav .btn:first-of-type{margin-top:18px} :where(.lp-page) .mnav .login{text-align:center;margin:14px 0 0;font-size:13px} @media(min-width:1101px){:where(.lp-page) .mnav{display:none!important}} /* --- タブレット以下: v0.4 追加分で上書きされていたルールの再適用 + 図解の縮尺 --- */ @media(max-width:1139px){ :where(.lp-page) .ovw-fig{width:auto;margin:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;--s:1} :where(.lp-page) .ovw-fig .ov-full{zoom:var(--s)} /* transform ではなく zoom（縮小後のサイズでレイアウトされるため SVG テキストの描画ずれが起きない） */ :where(.lp-page) .ovw-fig.is-scroll::after{content:"← 横にスクロールできます →";display:block;position:sticky;left:0;text-align:center;font-size:11px;color:var(--muted);padding-top:8px} } @media(max-width:1100px){ :where(.lp-page) .burger{display:block;margin-left:0} :where(.lp-page) .hd-cta{margin-left:auto} :where(.lp-page) .cta .wrap{grid-template-columns:1fr;gap:34px} :where(.lp-page) .pg-grid{grid-template-columns:repeat(2,1fr)} :where(.lp-page) .ovw-foot{font-size:17px} } /* --- スマートフォン --- */ @media(max-width:767px){ html:where(.lp-page){scroll-padding-top:64px} :where(.lp-page) .wrap{padding:0 20px} /* header */ :where(.lp-page) .hd .in{padding:9px 16px;gap:10px} :where(.lp-page) .brand svg{width:34px;height:34px} :where(.lp-page) .brand .ja{font-size:19px} :where(.lp-page) .brand .en{font-size:9px;margin-top:4px} :where(.lp-page) .brand-sub{display:none} :where(.lp-page) .hd-cta{display:none} :where(.lp-page) .burger{margin-left:auto} /* section furniture */ :where(.lp-page) .sec{padding:40px 0} :where(.lp-page) #overview{padding:0 0 40px 0} :where(.lp-page) #pgraph{padding:40px 0} :where(.lp-page) #how{padding-top:40px} :where(.lp-page) .eyebrow{font-size:10.5px;letter-spacing:.2em;margin-bottom:14px} :where(.lp-page) .h2{font-size:22px;line-height:1.5} :where(.lp-page) .h2 br{display:none} :where(.lp-page) .lead{font-size:13.5px;margin-top:14px;text-align:left} /* hero */ :where(.lp-page) .hero{background: #F6F1E7 url(../assets/bg_FV.svg) no-repeat right 30% top} :where(.lp-page) .hero .wrap{padding-top:36px;padding-bottom:50px} :where(.lp-page) .badge{font-size:11.5px;padding:7px 12px 7px 10px;margin-bottom:18px;line-height:1.6} :where(.lp-page) .hero h1{font-size:31px;line-height:1.3} :where(.lp-page) .hero-lead{font-size:14px;margin-top:18px;line-height:1.9} :where(.lp-page) .hero-cards{margin-top:22px;gap:10px} :where(.lp-page) .hero-btns{flex-direction:column;gap:10px;margin-top:22px} :where(.lp-page) .hero-btns .btn.big{width:100%;justify-content:flex-start;padding:14px 18px;white-space:normal} /* floating card → 下部バー */ :where(.lp-page) .fpop{left:12px;right:12px;bottom:12px;width:auto;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-radius:8px} :where(.lp-page) .fpop-img{display:none} :where(.lp-page) .fpop-body{padding:0;flex:1;display:flex;align-items:center;gap:10px;order:1;min-width:0} :where(.lp-page) .fpop-body h4{font-size:12px;line-height:1.45;flex:1;min-width:0} :where(.lp-page) .fpop-body h4 br{display:none} :where(.lp-page) .fpop-body p{display:none} :where(.lp-page) .fpop-body .btn{width:auto;flex:none;margin-top:0;padding:9px 12px;font-size:12px} :where(.lp-page) .fpop-x{position:static;order:2;width:24px;height:24px;font-size:14px;flex:none} /* overview */ :where(.lp-page) .ovw{margin-top:14px} :where(.lp-page) .ovw-h{font-size:19px;gap:10px;margin-bottom:13px} :where(.lp-page) .ovw-h::before,:where(.lp-page) .ovw-h::after{width:36px} :where(.lp-page) .ovw-foot{font-size:15px;margin-top:0;gap:10px;text-align:center} :where(.lp-page) .ovw-foot::before,:where(.lp-page) .ovw-foot::after{width:24px;flex:none} /* problem */ :where(.lp-page) .cards4{margin-top:28px;gap:12px} :where(.lp-page) .pcard{padding:18px 16px} :where(.lp-page) .serif-block{margin-top:44px} :where(.lp-page) .serif-block .l1,:where(.lp-page) .serif-block .l2{font-size:17px;line-height:1.7} :where(.lp-page) .serif-block .l2{margin-top:22px} :where(.lp-page) .serif-block .l3{font-size:19px;margin-top:22px;line-height:1.6} /* concept */ :where(.lp-page) .def{flex-direction:column;gap:6px;padding:14px 16px;margin-top:20px} :where(.lp-page) .vs{margin-top:30px;gap:20px} :where(.lp-page) .vs h3{font-size:18px;margin:12px 0 12px} :where(.lp-page) .fake-search{padding:16px} :where(.lp-page) .wg-big{padding:26px 20px;min-height:0} :where(.lp-page) .wg-big h4{font-size:24px} :where(.lp-page) .wg-big p{font-size:12.5px} /* スマホ: 2:1 のまま縮小するため、文字だけ一回り大きくして可読性を確保 */ :where(.lp-page) .wg-big.wg-cols{aspect-ratio:2/1;padding:0} :where(.lp-page) .wg-cols .wg-head h4{font-size:5.4cqw} :where(.lp-page) .wg-cols .wg-head p{font-size:2.9cqw;margin-top:1.8cqw} :where(.lp-page) .wg-diagram .wg-cap,:where(.lp-page) .wg-diagram .wg-key{font-size:12.5px} :where(.lp-page) .wg-diagram .wg-dim{font-size:11.5px} :where(.lp-page) .wg-diagram .wg-box{x:212px;width:376px} :where(.lp-page) .wg-diagram .wg-box-t{font-size:15.5px;x:400px} /* personal graph */ :where(.lp-page) .pg-ph{margin-bottom:18px} :where(.lp-page) .pg-grid{grid-template-columns:1fr;gap:10px;margin-top:20px} :where(.lp-page) .pgcard{padding:16px 16px 14px} :where(.lp-page) .pg-note{text-align:left;justify-content:flex-start;align-items:flex-start;font-size:12px} /* sample report */ :where(.lp-page) .q-card{padding:22px 20px;margin-top:28px} :where(.lp-page) .q-card h3{font-size:19px;line-height:1.5} :where(.lp-page) .tabs{display:flex;overflow-x:auto;gap:8px;margin-top:20px;padding:2px 2px 8px;scrollbar-width:none} :where(.lp-page) .tabs::-webkit-scrollbar{display:none} :where(.lp-page) .tab{flex:0 0 auto;min-width:118px;padding:11px 10px} :where(.lp-page) .tab[aria-selected="true"]{padding:10px 9px} :where(.lp-page) .tab .lt{font-size:12.5px} :where(.lp-page) .tp{padding:20px 16px;margin-top:14px} :where(.lp-page) .tp h3{font-size:17px} :where(.lp-page) .cards3{gap:10px} :where(.lp-page) .scard{padding:15px 16px} /* after the report */ :where(.lp-page) .ask{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 16px;margin-top:24px} :where(.lp-page) .ask p{font-size:13.5px} :where(.lp-page) .duo{gap:14px;margin-top:20px} :where(.lp-page) .dbox,:where(.lp-page) .dbox.on{padding:18px 16px} :where(.lp-page) .dh{flex-wrap:wrap;gap:8px} :where(.lp-page) .after3{gap:10px;margin-top:18px} :where(.lp-page) .after-foot{text-align:left} :where(.lp-page) .after-foot a{display:inline-block;margin-left:0;margin-top:6px} /* comparison */ :where(.lp-page) .cmp-vis{grid-template-columns:1fr;gap:8px;padding:10px;margin-top:28px} :where(.lp-page) .cv-box{grid-template-columns:1fr 110px;padding:14px} :where(.lp-page) .cv-arrow{flex-direction:row;gap:10px;padding:2px 0} :where(.lp-page) .cv-arrow i{transform:rotate(90deg);width:28px} :where(.lp-page) .tw{margin-top:28px} :where(.lp-page) .tw::after{content:"← 横にスクロールできます →";display:block;position:sticky;left:0;text-align:center;font-size:11px;color:var(--muted);padding:8px 0 2px;background:#fff} :where(.lp-page) th,:where(.lp-page) td{padding:12px 12px;font-size:12px} :where(.lp-page) tbody th{width:110px} /* how it works */ :where(.lp-page) .how-sub{font-size:13.5px} :where(.lp-page) .pills{gap:8px} :where(.lp-page) .pill{padding:8px 14px;font-size:12px} :where(.lp-page) .zone{padding:16px 14px;margin-top:20px} :where(.lp-page) .zbox{padding:14px} :where(.lp-page) .mcp-mid{margin:16px 0} :where(.lp-page) .how-foot{text-align:left} :where(.lp-page) .how-foot br{display:none} /* getting started */ :where(.lp-page) .steps{margin-top:28px;gap:10px} :where(.lp-page) .step{padding:18px 18px} :where(.lp-page) .checks{gap:10px;margin-top:18px} :where(.lp-page) .check{padding:14px 16px} /* use cases */ :where(.lp-page) .uc{gap:14px;margin-top:28px} :where(.lp-page) .ucard{padding:20px 18px} :where(.lp-page) .ucard h3{font-size:17px} /* carousel */ :where(.lp-page) .carw{margin-top:28px} :where(.lp-page) .car{gap:12px;padding:4px 0 14px} :where(.lp-page) .ccard{flex:0 0 86%;padding:20px 18px} :where(.lp-page) .ccard h3{font-size:16px} :where(.lp-page) .crow{grid-template-columns:58px 1fr;gap:10px} :where(.lp-page) .foot-note{text-align:left;font-size:12px} /* pricing */ :where(.lp-page) .price{gap:14px;margin-top:28px} :where(.lp-page) .pmain{padding:27px 18px 24px} :where(.lp-page) .pnum .b{font-size:40px} :where(.lp-page) .pnum .pu{border-left:0;padding-left:0;margin-left:0;width:100%;text-align:center} :where(.lp-page) .ptrial{padding:22px 18px} :where(.lp-page) .pcustom{padding:20px 18px;margin-top:14px;gap:18px} :where(.lp-page) .pcustom h3{font-size:17px} :where(.lp-page) .pright{padding-top:18px} :where(.lp-page) .pright .ask-p{font-size:20px} /* pricing 下の CTA: 縦積み・同じ幅・同じ高さ（grid の 1fr 行で高さを揃える。現在は「デモを依頼する」の 1 つ） */ :where(.lp-page) #pricing .center{display:grid;grid-auto-rows:1fr;margin-top:22px} :where(.lp-page) #pricing .center .btn.big{width:100%;justify-content:flex-start;align-items:center;padding:14px 18px;white-space:normal} :where(.lp-page) #contact .btn.pri{height: 45px} /* faq */ :where(.lp-page) .faq{margin-top:28px;gap:8px} :where(.lp-page) .qa summary{padding:14px 16px;gap:10px} :where(.lp-page) .qa .qt{font-size:13.5px;line-height:1.6} :where(.lp-page) .qa .ans{padding:0 16px 16px 16px;font-size:12.5px} /* final CTA */ :where(.lp-page) .cta{padding:48px 0} :where(.lp-page) .cta .wrap{gap:26px} :where(.lp-page) .cta h2{font-size:22px;margin-top:12px} :where(.lp-page) .cta h2 br{display:none} :where(.lp-page) .cta p{font-size:13.5px;margin-top:14px;line-height:1.9} :where(.lp-page) .fform{padding:18px 18px 22px} :where(.lp-page) .frow{grid-template-columns:1fr} :where(.lp-page) .fprep{padding:26px 18px 24px} :where(.lp-page) .fform input,:where(.lp-page) .fform select,:where(.lp-page) .fform textarea{font-size:16px;padding:12px 14px} /* iOS の自動ズーム回避に 16px */ :where(.lp-page) .fchk{gap:4px 14px} /* footer */ :where(.lp-page) .ft{padding:30px 0 86px} /* 下部の資料バー(約64px)ぶんを含む */ :where(.lp-page) .ft .top{flex-direction:column;align-items:flex-start;gap:16px} :where(.lp-page) .ft .brand .fsub{padding: 3px 0} :where(.lp-page) .ft nav{margin-left:0;gap:10px 16px} :where(.lp-page) .ft .contact{margin-left:0} :where(.lp-page) .ft .bot{flex-direction:column;gap:12px;margin-top:18px} :where(.lp-page) .ft .legal{gap:10px 16px} } /* ========== 全体構成図 スマホ版（PC と同じ DOM を 400px 基準で再配置。複製なし） ========== */ @media(max-width:767px){ :where(.lp-page) .ovw-fig{max-width:400px;margin:0 auto;overflow:visible} :where(.lp-page) .ovw-fig.is-scroll::after{display:none} :where(.lp-page) .ov-full{width:400px;height:932px} /* PC 用 / スマホ用の部品を切替 */ :where(.lp-page) .ov-mcp .ov-mcp-pc,:where(.lp-page) .ov-mcp2:not(.ov-mcp2-v),:where(.lp-page) .ov-wire-pc{display:none} :where(.lp-page) .ov-mcp .ov-mcp-sp,:where(.lp-page) .ov-mcp2-v,:where(.lp-page) .ov-wire-sp{display:block} /* 1. 1 行目 = ローカル 0..425 / MCP 427.. / エンジン 492..647 を 0.6 倍 → 384px 幅（右辺の配線 x=394 と重ねない） */ :where(.lp-page) .ov-full .ov-row1{zoom:.6} :where(.lp-page) .ov-full .ov-row1 .ov-local{left:0;width:425px} :where(.lp-page) .ov-full .ov-row1 .ov-local .ttl{font-size:18px} :where(.lp-page) .ov-full .ov-row1 .ov-local .ov-q{width:122px} :where(.lp-page) .ov-full .ov-row1 .ov-local .ov-q b{font-size:14px} :where(.lp-page) .ov-full .ov-row1 .ov-local .ov-cl{left:138px;height:224px} :where(.lp-page) .ov-full .ov-row1 .ov-local .ov-cl .bub.ai{margin:22px 4px 0 5px} :where(.lp-page) .ov-full .ov-row1 .ov-local .ov-cl .ov-hd{font-size:15px} :where(.lp-page) .ov-full .ov-row1 .ov-local .ov-pg{left:282px;width:130px;height:224px} :where(.lp-page) .ov-full .ov-row1 .ov-local .ov-pg .ov-hd{font-size:15px} :where(.lp-page) .ov-full .ov-row1 .ov-local .ov-pg .note{font-size:14px;height:45px} :where(.lp-page) .ov-full .ov-row1 .ov-mcp{left:427px} :where(.lp-page) .ov-full .ov-mcp b{font-size:16px} :where(.lp-page) .ov-full .ov-mcp span{font-size:14px} :where(.lp-page) .ov-full .ov-row1 .ov-engine{left:492px} :where(.lp-page) .ov-full .ov-engine .ttl{font-size:16px} /* 2. エンジン ↕ World Graph（矢印幅 12px、中心 341px） */ :where(.lp-page) .ov-full .ov-mcp2-v{left:335px;top:166px} :where(.lp-page) .ov-full .ov-wg{left:36%;top:205px;width:60%;height:auto} :where(.lp-page) .ov-full .ov-wg .net{width:calc(100% - 20px);height:auto} /* 左右 10px の margin ぶんを差し引いて収める */ :where(.lp-page) .ov-full .ov-wg .ttl{font-size:14px} /* 3. 5層レポート帯: ①② / ③④ / ⑤（中央） の 3 行 */ :where(.lp-page) .ov-full .ov-band{left:14px;top:418px;width:374px;height:500px} :where(.lp-page) .ov-full .ov-band-lab{font-size:14px} :where(.lp-page) .ov-full .ov-layer{height: 142px} :where(.lp-page) .ov-full .ov-layer.g1{left:12px;top:22px; width:165px;} :where(.lp-page) .ov-full .ov-layer.g1 .lic{margin:21px auto 0} :where(.lp-page) .ov-full .ov-chev.o1{display:none} :where(.lp-page) .ov-full .ov-layer.g2{left:195px;top:22px;width:165px;} :where(.lp-page) .ov-full .ov-layer.g2 .lic{margin: 7px auto 5px 38px;} :where(.lp-page) .ov-full .ov-layer.g2 .ls{font-size:11px} :where(.lp-page) .ov-full .ov-layer.g2 .lp{font-size:11px} :where(.lp-page) .ov-full .ov-layer.c3{left:12px;top:178px;width:172px} :where(.lp-page) .ov-full .ov-layer.c4{left:188px;top:178px;width:172px} :where(.lp-page) .ov-full .ov-layer.g5{left:106px;top:344px} :where(.lp-page) .ov-full .ov-chev.o2,:where(.lp-page) .ov-full .ov-chev.o3{display:none} /* 4. ラベル */ :where(.lp-page) .ov-full .ov-ret-lab{left:19px;top:183px} } /* ---------- personal graph (role) : #pgraph-role (S359) ---------- */ :where(.lp-page) .sec.pgr{padding-bottom:0} :where(.lp-page) .pgr-lead{max-width:none} :where(.lp-page) .pgr-grid{display:grid;grid-template-columns:242px minmax(0,1fr) 236px;column-gap:56px;margin-top:38px;align-items:start} :where(.lp-page) .pgr-col{position:relative;min-width:0} :where(.lp-page) .pgr-step{font-size:16px;font-weight:700;color:var(--ink-2);padding-bottom:7px;border-bottom:1px solid var(--gold-soft);display:flex;align-items:center;gap:10px} :where(.lp-page) .pgr-step b{color:var(--red);font-size:17px;letter-spacing:.02em} /* 01 */ :where(.lp-page) .pgr-chath{display:flex;align-items:center;gap:9px;margin-top:22px;font-size:14px;color:var(--ink-2)} :where(.lp-page) .pgr-chath svg{width:20px;height:20px;color:var(--ink-2)} :where(.lp-page) .pgr-msg{display:flex;align-items:center;gap:8px;margin-top:16px} :where(.lp-page) .pgr-msg.a{margin-top:20px} :where(.lp-page) .pgr-av{width:34px;height:34px;border-radius:50%;background:var(--gold-soft);color:#8A6A3A;display:grid;place-items:center;flex:none} :where(.lp-page) .pgr-av svg{width:16px;height:16px} :where(.lp-page) .pgr-av.me{background:#DDC9C9;color:var(--red)} :where(.lp-page) .pgr-bub{position:relative;font-size:12.5px;color:var(--ink-2);padding:11px 12px;border-radius:8px;line-height:1.4;white-space:nowrap} :where(.lp-page) .pgr-msg.q .pgr-bub{background:#fff;box-shadow:var(--shadow-2)} :where(.lp-page) .pgr-msg.a .pgr-bub{background:var(--gold-pale)} :where(.lp-page) .pgr-msg.a .pgr-bub::after{content:"";position:absolute;right:-6px;bottom:0;border-style:solid;border-width:0 0 12px 12px;border-color:transparent transparent var(--gold-pale) transparent} :where(.lp-page) .pgr-docs{position:relative;display:flex;gap:10px;margin-top:48px} :where(.lp-page) .pgr-doc{width:92px;height:142px;flex:none;filter:drop-shadow(0 2px 4px rgba(60,40,30,.12))} :where(.lp-page) .pgr-docpg{fill:#fff} :where(.lp-page) .pgr-docfold{fill:#E9E2D7} :where(.lp-page) .pgr-doct{font-family:var(--sans);font-size:13px;font-weight:700;fill:var(--ink-2)} :where(.lp-page) .pgr-docln{fill:#DAD6D0} :where(.lp-page) .pgr-pie{fill:#C4BEB6} /* arrows */ :where(.lp-page) .pgr-arrow{position:absolute;display:flex;flex-direction:column;align-items:flex-end;gap:6px} :where(.lp-page) .pgr-arrow span{font-size:11px;color:var(--muted);white-space:nowrap} :where(.lp-page) .pgr-arrow svg{display:block;height:16px} :where(.lp-page) .pgr-arrow.a1{right:-47px;top:-24px} :where(.lp-page) .pgr-arrow.a1 svg{width:70px} :where(.lp-page) .pgr-arrow.a2{left:-50px;top:253px} /* S373: a1 の矢印 (書類の上 -24px) と同じ高さに */ :where(.lp-page) .pgr-arrow.a2 svg{width:44px} /* 02 */ :where(.lp-page) .pgr-net{position:relative;aspect-ratio:500/420;margin-top:0; background:url(../assets/bg_Network_Personal_Graph.svg) no-repeat center / 92.4% auto} :where(.lp-page) .pgr-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible} :where(.lp-page) .pgr-svg text{font-family:var(--sans)} :where(.lp-page) .pgr-stk{fill:#FDFBF6;stroke:var(--gold-soft);stroke-width:1} :where(.lp-page) .pgr-face{fill:#fff;stroke:var(--gold-soft);stroke-width:1} :where(.lp-page) .pgr-ico{fill:none;stroke:var(--red-deep);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} :where(.lp-page) .pgr-jp{fill:var(--ink-2);font-size:14px;font-weight:700} :where(.lp-page) .pgr-en{fill:var(--muted);font-size:11px} :where(.lp-page) .pgr-bizface{fill:url(#pgrBiz);stroke:var(--red);stroke-width:1.5} :where(.lp-page) .pgr-bizico{fill:none;stroke:var(--red);stroke-width:1.6;stroke-linejoin:round} :where(.lp-page) .pgr-bizjp{fill:var(--red);font-size:22px;font-weight:700} :where(.lp-page) .pgr-bizen{fill:var(--red);font-size:14px;font-weight:500} :where(.lp-page) .pgr-x{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round} :where(.lp-page) .pgr-coreico{fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} :where(.lp-page) .pgr-coretxt{fill:#fff;font-size:15px;font-weight:700} :where(.lp-page) .pgr-cap{text-align:center;font-size:15px;color:var(--ink-2);margin-top:6px} /* 03 */ :where(.lp-page) .pgr-ask{position:relative;margin-top:28px;background:var(--gold-pale);border-radius:8px;padding:15px 18px;font-size:14px;color:var(--ink-2)} :where(.lp-page) .pgr-ask::after{content:"";position:absolute;left:10px;bottom:-9px;border-style:solid;border-width:10px 0 0 12px;border-color:var(--gold-pale) transparent transparent transparent} :where(.lp-page) .pgr-report{margin-top:22px;background:#fff;border:1px solid var(--gold-soft);border-radius:6px;padding:22px 20px 26px;box-shadow:var(--shadow)} :where(.lp-page) .pgr-rh{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--gold-soft)} :where(.lp-page) .pgr-rh svg{width:30px;height:30px;flex:none} :where(.lp-page) .pgr-rh b{font-size:16px;line-height:1.45;color:var(--red)} :where(.lp-page) .pgr-pts{list-style:none;padding:0;margin:14px 0 0} :where(.lp-page) .pgr-pts li{position:relative;padding-left:20px;font-size:14px;color:var(--ink-2);line-height:2.1} :where(.lp-page) .pgr-pts li::before{content:"";position:absolute;left:1px;top:11px;width:9px;height:9px;border-radius:50%;background:var(--gold)} :where(.lp-page) .pgr-lines{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-2);display:grid;gap:8px} :where(.lp-page) .pgr-lines i{display:block;height:6px;border-radius:3px;background:#DAD6D0} :where(.lp-page) .pgr-lines i.s{width:72%} :where(.lp-page) .pgr-note{margin: 20px 0 70px 0} @media(max-width:1100px){ :where(.lp-page) .pgr-grid{grid-template-columns:220px minmax(0,1fr) 220px;column-gap:44px} :where(.lp-page) .pgr-arrow.a1{right:-30px} :where(.lp-page) .pgr-arrow.a2{left:-42px} :where(.lp-page) .pgr-arrow.a2 svg{width:36px} } @media(max-width:960px){ :where(.lp-page) .pgr-grid{grid-template-columns:1fr;row-gap:40px;max-width:520px;margin-left:auto;margin-right:auto} :where(.lp-page) .pgr-arrow{display:none} :where(.lp-page) .pgr-docs{margin-top:28px} } @media(max-width:767px){ :where(.lp-page) .pgr-grid{margin-top:26px;row-gap:34px} :where(.lp-page) .pgr-net{margin-left:-6px;margin-right:-6px} :where(.lp-page) .pgr-cap{font-size:13.5px} :where(.lp-page) .pgr-note{margin: 20px 0 30px 0;text-align:left;justify-content:flex-start;align-items:flex-start;font-size:12px} :where(.lp-page) .pgr-bub{white-space:normal} /* S373: 「01 伝える」もスマホでは横幅いっぱいに — 吹き出しは残り幅を使う。書類 2 枚は最大 100px・PC と同じ間隔で左詰め */ :where(.lp-page) .pgr-msg .pgr-bub{flex:1 1 auto} :where(.lp-page) .pgr-doc{flex:1 1 0;width:auto;height:auto;max-width:100px} /* 2 枚の間隔は PC と同じ 10px (左詰め) */ } /* ==================== 3. 会員ページ (/app/*.html) ==================== */ html:where(.app-page){scroll-behavior:smooth;scroll-padding-top:60px} /* S364: 会員ページ内アンカー (ヘッダーナビ) のスムーズスクロール。S367: 余白はヘッダーの高さ (61px) ぴったりに。大きいと直前のセクション (クリーム地) が上に覗く */ :where(.app-page) [hidden]{display:none!important} :where(.app-page) body.loading .top,:where(.app-page) body.loading .foot{visibility:hidden} /* S367: ログイン判定中 (どの画面を出すか決まるまで) はヘッダー/フッターを描かない */ :where(.app-page) body{margin:0;font-family:"Noto Sans JP",system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;background:#f6f7f9;color:#222} :where(.app-page) .top{position:sticky;top:0;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 22px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid #EFEAE0} /* S364: LP と同じ画面上部固定 */ /* ロゴ: LP (/index.html) の .brand と同じ配色・寸法 (S358) */ :where(.app-page) .hd-l{display:flex;align-items:center;gap:14px;min-width:0} :where(.app-page) .brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;color:#7B1F2F} :where(.app-page) .brand svg{width:32px;height:32px;flex:none} :where(.app-page) .brand .nm{display:flex;flex-direction:column;line-height:1} :where(.app-page) .brand .ja{font-size:19px;font-weight:700;color:#14100F;letter-spacing:.14em} :where(.app-page) .brand .en{font-size:9px;font-weight:500;color:#7D5C2E;letter-spacing:.34em;margin-top:4px} :where(.app-page) .brand-sub{font-size:12px;color:#6B615C;padding-left:14px;border-left:1px solid #E7E0D4;white-space:nowrap} :where(.app-page) .who{font-size:13px;color:#667;text-align:right;word-break:break-all} @media (max-width:480px){:where(.app-page) .brand-sub{display:none}:where(.app-page) .top{padding:10px 16px}:where(.app-page) .who{min-width:0;font-size:11.5px;line-height:1.35}} :where(.app-page) .wrap{max-width:560px;margin:32px auto;padding:0 16px} :where(.app-page) .card{background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.06);padding:28px 30px;margin-bottom:18px} :where(.app-page) h2{font-size:17px;margin:0 0 12px} :where(.app-page) p{font-size:14px;line-height:1.7;margin:0 0 12px} :where(.app-page) .sub{color:#667;font-size:13px} :where(.app-page) label{display:block;font-size:13px;margin:10px 0 4px;color:#445} :where(.app-page) input{width:100%;padding:9px 10px;border:1px solid #ccd;border-radius:6px;font-size:14px;margin-top:4px} :where(.app-page) .btn{display:inline-block;margin-top:14px;padding:10px 18px;border:0;border-radius:6px;background:#9b1b30;color:#fff;font-size:14px;cursor:pointer;text-decoration:none} :where(.app-page) .btn.ghost{background:#fff;color:#9b1b30;border:1px solid #9b1b30} :where(.app-page) .btn[disabled]{opacity:.5;cursor:default} :where(.app-page) .row{display:flex;gap:10px;flex-wrap:wrap} :where(.app-page) .msg{font-size:13px;margin-top:12px;min-height:1em} :where(.app-page) .msg.err{color:#c0392b}:where(.app-page) .msg.ok{color:#1e8e3e} :where(.app-page) .status{font-weight:600}:where(.app-page) .status.ok{color:#1e8e3e}:where(.app-page) .status.ng{color:#c0392b} :where(.app-page) a{color:#9b1b30} :where(.app-page) .plan{font-size:15px}:where(.app-page) .plan b{font-size:22px;margin-left:6px} :where(.app-page) .btn:hover{background:#7d1526}:where(.app-page) .btn.ghost:hover{background:#fbf1f3} :where(.app-page) textarea{width:100%;padding:9px 10px;border:1px solid #ccd;border-radius:6px;font-size:14px;margin-top:4px;font-family:inherit;line-height:1.6;resize:vertical} :where(.app-page) .h3{font-size:14px;margin:22px 0 8px;color:#445} :where(.app-page) .list{list-style:none;padding:0;margin:0} :where(.app-page) .list li{padding:10px 0;border-top:1px solid #eef0f4;font-size:14px;line-height:1.6} :where(.app-page) .list li a{word-break:break-all} :where(.app-page) .badge{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;margin-right:8px;background:#eef0f4;color:#445;vertical-align:middle} :where(.app-page) .badge.received{background:#eef0f4;color:#445} :where(.app-page) .badge.queued,:where(.app-page) .badge.reviewing{background:#fff4e0;color:#8a5a00} :where(.app-page) .badge.approved{background:#e6f4ea;color:#1e6e35} :where(.app-page) .badge.merged{background:#1e8e3e;color:#fff} :where(.app-page) .badge.rejected{background:#fdecea;color:#b3261e} :where(.app-page) .note{margin-top:4px} :where(.app-page) .notes{padding-left:18px;margin:8px 0 0}:where(.app-page) .notes li{margin:4px 0;line-height:1.6}:where(.app-page) code{background:#f1f2f6;padding:1px 4px;border-radius:3px;font-size:12px} /* S363: カード登録の確認事項・同意 / 解約アンケート / 紹介コード */ :where(.app-page) input[type=checkbox]{width:auto;margin:0;padding:0;flex:none} :where(.app-page) .terms{margin:14px 0 0;border:1px solid #eceef3;border-radius:8px;padding:2px 14px} :where(.app-page) .terms div{display:grid;grid-template-columns:118px 1fr;gap:10px;padding:9px 0;border-top:1px solid #f0f1f5;font-size:13.5px;line-height:1.6} :where(.app-page) .terms div:first-child{border-top:0} :where(.app-page) .terms dt{color:#667} :where(.app-page) .terms dd{margin:0} :where(.app-page) .agree{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:14px 0 0;line-height:1.6;color:#334;cursor:pointer} :where(.app-page) .agree input{margin-top:5px} :where(.app-page) .checks{display:grid;gap:6px;margin:8px 0 6px} :where(.app-page) .check{display:flex;gap:10px;align-items:flex-start;margin:0;padding:9px 12px;border:1px solid #e6e8ef;border-radius:6px;font-size:14px;color:#223;cursor:pointer;line-height:1.5} :where(.app-page) .check:hover{background:#fafbfc} :where(.app-page) .check:has(input:checked){border-color:#9b1b30;background:#fbf1f3} :where(.app-page) .check input{margin-top:4px} :where(.app-page) .btn.danger{background:#fff;color:#b3261e;border:1px solid #b3261e} :where(.app-page) .btn.danger:hover{background:#fdecea} :where(.app-page) .notice{background:#fbf6ea;border-radius:6px;padding:10px 12px;font-size:13px;margin:12px 0 0} :where(.app-page) .steps{margin:12px 0 0;padding-left:20px;line-height:1.8} :where(.app-page) #ref-info{margin-top:4px} /* フッター: 特商法表示へのリンク (S361) */ :where(.app-page) .foot{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;padding:26px 16px 34px;border-top:1px solid #EFEAE0;background:#fff;font-size:12.5px} :where(.app-page) .foot a{color:#6B615C;text-decoration:none} :where(.app-page) .foot a:hover{color:#9b1b30} /* S364: 未ログイン画面 (デザイン「01 ログイン」)。ヘッダー/フッターを隠し、LP と同じクリーム地に単独カードを置く */ :where(.app-page) body.auth{background:#F6F1E7;min-height:100vh;display:flex;flex-direction:column} :where(.app-page) body.auth .top,:where(.app-page) body.auth .foot{display:none} :where(.app-page) body.auth .wrap{max-width:none;margin:0 auto;padding:0 16px;flex:1;display:flex;flex-direction:column;justify-content:center} /* S366: 幅は各カードが持つ (width + margin auto) */ :where(.app-page) .auth-card{width:440px;max-width:100%;padding:34px 40px 30px;border-radius:8px;box-shadow:0 4px 24px rgba(60,40,30,.08);margin:20px auto} /* S366: 共通カード (ログイン・会員登録・承認完了)。メール確認は 480px、お支払い方法の登録は 560px に上書き。スマホは 100% */ :where(.app-page) .auth-logo{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:22px} :where(.app-page) .auth-logo svg{width:44px;height:44px;flex:none} :where(.app-page) .auth-logo .wm{font-size:21px;font-weight:700;letter-spacing:.04em;color:#4A1B26;line-height:1} :where(.app-page) .auth-logo .wm b{color:#D9A441;font-weight:700} :where(.app-page) .auth-title{font-size:18px;font-weight:700;color:#2B2626;text-align:center;margin:0 0 20px} :where(.app-page) .auth .pane label{font-size:13px;font-weight:700;color:#2B2626;margin:16px 0 0} :where(.app-page) .auth .pane label:first-of-type{margin-top:0} :where(.app-page) .auth .pane input{margin-top:8px;padding:12px 14px;background:#FAF6EE;border:1px solid #E7E0D4;border-radius:4px;font-size:14px;color:#14100F} :where(.app-page) .auth .pane input::placeholder{color:#8C837D} :where(.app-page) .auth .pane input:focus{outline:none;border-color:#B08A4F;box-shadow:0 0 0 3px rgba(176,138,79,.15)} :where(.app-page) .btn.wide{display:block;width:100%;margin-top:22px;padding:12px 16px;text-align:left;border-radius:4px;background:#6A1928;font-weight:700} :where(.app-page) .btn.wide:hover{background:#521321} :where(.app-page) .auth-link{text-align:center;margin:20px 0 0;font-size:12.5px} :where(.app-page) .auth-link a,:where(.app-page) .auth-alt a{color:#7D5C2E;text-decoration:underline;text-underline-offset:3px} :where(.app-page) .auth-alt a{font-weight:700} :where(.app-page) .auth-hr{border:0;border-top:1px solid #E7E0D4;margin:22px 0 20px} :where(.app-page) .auth-alt{text-align:center;font-size:11.5px;color:#6B615C;margin:0 -32px;line-height:1.7;white-space:nowrap} :where(.app-page) .auth-alt a{white-space:nowrap} :where(.app-page) .auth .steps{margin-top:16px} /* S366: 会員登録 (デザイン「00 会員登録」) */ :where(.app-page) .auth-lead{text-align:center;font-size:12.5px;color:#6B615C;line-height:1.7;margin:-8px 0 20px} :where(.app-page) .auth .field-note{font-size:11px;color:#6B615C;margin:6px 0 0;line-height:1.5} :where(.app-page) .auth .agree{margin-top:18px;font-size:12.5px;color:#2B2626;align-items:center} :where(.app-page) .auth .agree input{margin:0;width:18px;height:18px;flex:none;accent-color:#6A1928} :where(.app-page) .auth .agree a{color:#7D5C2E;text-decoration:underline;text-underline-offset:3px} :where(.app-page) .btn.wide.center{text-align:center} /* S366: メール確認待ち (デザイン「02 メール認証(送信完了)」) */ :where(.app-page) .verify-icon{width:56px;height:56px;border-radius:50%;background:#F3E7D3;color:#6A1928;margin:0 auto 18px;display:flex;align-items:center;justify-content:center} :where(.app-page) .verify-icon svg{width:24px;height:24px} :where(.app-page) .verify-steps{background:#FAF6EE;border-radius:6px;padding:16px 18px;margin:20px 0 0;font-size:12.5px;color:#2B2626;line-height:1.8;list-style:decimal inside} :where(.app-page) .verify-note{text-align:center;font-size:11.5px;color:#6B615C;margin:18px 0 0} :where(.app-page) .verify-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px;margin:14px 0 0;font-size:12.5px} :where(.app-page) .verify-actions a{color:#7D5C2E;text-decoration:none;white-space:nowrap} :where(.app-page) .verify-actions a:hover{text-decoration:underline;text-underline-offset:3px} :where(.app-page) .verify-change{margin-top:18px} :where(.app-page) .verify-change .btn.wide{margin-top:14px} :where(.app-page) .verify-card .auth-hr{margin-top:20px} :where(.app-page) .verify-card .auth-alt{white-space:normal;margin:0} :where(.app-page) .verify-card{width:480px} /* 手順 1〜3 を 1 行に収めるため、デザインと同じ 480px 幅 */ :where(.app-page) .verify-steps{padding:16px 20px} /* S366: 承認完了 (デザイン「02b メール認証(承認完了)」) */ :where(.app-page) .verified-icon{background:#B08A4F;color:#6A1928} :where(.app-page) #v-verified .auth-lead{margin-bottom:0} :where(.app-page) #v-verified .auth-back a::before{content:none} /* S366: お支払い方法の登録 (デザイン「03 クレジットカード登録」)。カードはデザインと同じ 560px 幅 */ :where(.app-page) .pay-card{width:560px;padding:38px 40px 34px} /* デザインと同じ 560px 幅 */ :where(.app-page) .pay-title{font-size:18px;font-weight:700;color:#2B2626;margin:0 0 18px} :where(.app-page) .pay-plan{background:#FAF6EE;border-radius:6px;padding:14px 18px;font-size:13.5px;color:#2B2626;line-height:1.7} :where(.app-page) .pay-plan b{margin-right:10px} :where(.app-page) .pay-plan small{display:block;font-size:12px;color:#6B615C} :where(.app-page) .pay-field{margin-top:20px} :where(.app-page) .pay-field label{display:block;font-size:13px;font-weight:700;color:#2B2626;margin:0 0 8px} :where(.app-page) .pay-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} :where(.app-page) .pay-input{display:block;width:100%;box-sizing:border-box;min-height:46px;margin:0;padding:13px 14px;background:#FAF6EE;border:1px solid #E7E0D4;border-radius:4px;font-size:14px;color:#14100F;font-family:inherit} :where(.app-page) .pay-input.focus,:where(.app-page) input.pay-input:focus{outline:none;border-color:#B08A4F;box-shadow:0 0 0 3px rgba(176,138,79,.15)} :where(.app-page) .pay-input.invalid{border-color:#c0392b} :where(.app-page) .pay-input .pay-fallback{width:100%;margin:0;padding:0;border:0;background:transparent;font-size:14px;color:#14100F;font-family:inherit} :where(.app-page) .pay-input .pay-fallback::placeholder,:where(.app-page) input.pay-input::placeholder{color:#8C837D} :where(.app-page) .pay-input .pay-fallback:disabled{opacity:1;-webkit-text-fill-color:#8C837D} :where(.app-page) .pay-terms{margin-top:22px;border-color:#E7E0D4} :where(.app-page) .pay-terms div{grid-template-columns:110px 1fr;font-size:12.5px;border-top-color:#F0EAE0} :where(.app-page) .pay-agree{font-size:12.5px;color:#2B2626;margin-top:14px;align-items:center} :where(.app-page) .pay-agree input{margin:0;width:18px;height:18px;flex:none;accent-color:#6A1928} :where(.app-page) .pay-agree a{color:#7D5C2E;text-decoration:underline;text-underline-offset:3px} :where(.app-page) #v-payment .btn.wide{margin-top:20px} :where(.app-page) #v-payment .btn.wide:disabled{background:#C7B9BC;cursor:not-allowed} :where(.app-page) .pay-note,:where(.app-page) .pay-problem-text{font-size:12.5px;color:#6B615C;line-height:1.7;margin:12px 0 0} :where(.app-page) .pay-problem-text{margin-top:18px;color:#2B2626} :where(.app-page) .pay-secure{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;color:#6B615C;line-height:1.6;margin:16px 0 0} :where(.app-page) .pay-secure svg{width:14px;height:14px;flex:none;color:#6A1928;margin-top:2px} :where(.app-page) .pay-refresh{text-align:center;font-size:11.5px;margin:14px 0 0} :where(.app-page) .pay-refresh a{color:#7D5C2E;text-decoration:none} :where(.app-page) .pay-refresh a:hover{text-decoration:underline} :where(.app-page) #v-payment .auth-back a::before{content:none} @media (max-width:680px){:where(.app-page) .pay-card{padding:28px 22px 24px}} @media (max-width:640px){:where(.app-page) .auth-card,:where(.app-page) .verify-card,:where(.app-page) .pay-card{width:100%}} /* スマホは画面幅いっぱい */ @media (max-width:480px){:where(.app-page) .pay-row{grid-template-columns:1fr;gap:0}} :where(.app-page) .auth .btn.wide.center + .auth-alt{margin-top:22px} :where(.app-page) .auth .msg{text-align:center} :where(.app-page) .auth .msg:empty{display:none} :where(.app-page) .auth-back{text-align:center;margin:22px 0 20px;font-size:12.5px} /* S366: 下 20px (カード下のリンクが画面端に付かないように) */ :where(.app-page) .auth-back a{color:#6B615C;text-decoration:none} :where(.app-page) .auth-back a:hover{color:#7B1F2F} @media (max-width:480px){:where(.app-page) .auth-card{padding:28px 22px 24px}:where(.app-page) body.auth .wrap{justify-content:flex-start;padding-top:40px}:where(.app-page) .auth-alt{margin:0;white-space:normal}} /* ---------- S364: 会員ホーム (デザイン「04 オンボーディング(会員ホーム)」) ---------- */ /* ヘッダー: ロゴマーク + LATRIS ワードマーク + 会員ページ + ナビ */ :where(.app-page) .brand .wm{font-size:19px;font-weight:700;letter-spacing:.04em;color:#4A1B26;line-height:1} :where(.app-page) .brand .wm b{color:#D9A441} :where(.app-page) .brand-sub{color:#B08A4F;font-weight:700;border-left:0;padding-left:4px} :where(.app-page) .hnav{display:none;gap:22px;flex-wrap:wrap;justify-content:flex-end;font-size:13.5px} :where(.app-page) .hnav a{color:#2B2626;text-decoration:none;white-space:nowrap} :where(.app-page) .hnav a:hover{color:#7B1F2F} :where(.app-page) .hnav a.on{color:#7B1F2F;font-weight:700} /* S367: 現在いる項目 (設定・解約手続きの各ページ) */ :where(.app-page) body.home .top{padding:14px 40px;border-bottom:1px solid #E8DCC3} :where(.app-page) body.home .hnav{display:flex} :where(.app-page) body.home .who{display:none} :where(.app-page) body.home{background:#fff;color:#574E49} :where(.app-page) body.home .wrap{max-width:none;margin:0;padding:0} /* セクション */ :where(.app-page) .hs{padding:70px 0} :where(.app-page) .hs.cream{background:#F6F1E7} :where(.app-page) .hs.cream2{background:#FAF6EE} :where(.app-page) .hw{max-width:1120px;margin:0 auto;padding:0 24px} :where(.app-page) .hw.narrow{max-width:760px} :where(.app-page) .hw.narrow .card{margin-top:22px} :where(.app-page) .acct-logout{margin-top:20px} /* S364: アカウントカード内、パスワード変更ボタンとログアウトの間隔 */ :where(.app-page) .hs .eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;color:#7D5C2E;font-size:11.5px;font-weight:700;letter-spacing:.26em;margin-bottom:18px} :where(.app-page) .hs .eyebrow::before,:where(.app-page) .hs .eyebrow::after{content:"";width:26px;height:1px;background:#B08A4F} :where(.app-page) .hs .h2{font-size:26px;font-weight:700;text-align:center;color:#14100F;letter-spacing:.01em;line-height:1.45;margin:0} :where(.app-page) .hs .lead{max-width:840px;margin:16px auto 0;text-align:center;color:#6B615C;font-size:13.5px;line-height:1.8} :where(.app-page) .hs.hero{padding:70px 0 20px;text-align:center} :where(.app-page) .hs.hero h1{font-size:30px;font-weight:700;color:#14100F;margin:0;letter-spacing:.02em} :where(.app-page) .hs.hero .sub{font-size:14px;color:#6B615C;margin:12px 0 0} /* ステップ 3 枚 */ :where(.app-page) .hsteps{display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr;align-items:stretch;margin-top:30px} :where(.app-page) .hstep{background:#fff;border:1px solid #E7E0D4;border-radius:8px;padding:22px 24px;box-shadow:0 2px 14px rgba(60,40,30,.06)} :where(.app-page) .hstep .n{width:29px;height:29px;border-radius:50%;background:#6A1928;color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center;margin-bottom:14px} :where(.app-page) .hstep h3{font-size:14.5px;font-weight:700;color:#14100F;margin:0 0 8px} :where(.app-page) .hstep p{font-size:12.5px;color:#6B615C;line-height:1.85;margin:0} :where(.app-page) .hstep-ar{display:grid;place-items:center;color:#B08A4F;font-size:18px} :where(.app-page) .hcenter{text-align:center;margin:28px 0 0} :where(.app-page) .hcenter .btn{margin:0;padding:12px 26px;border-radius:6px;background:#7B1F2F;font-weight:700;font-size:14px} :where(.app-page) .hcenter .btn:hover{background:#6A1928} :where(.app-page) .hlink{margin-top:14px;font-size:12.5px} :where(.app-page) .hlink a{color:#7D5C2E;text-decoration:underline;text-underline-offset:3px} /* ダウンロードボタン (S367: Windows / Mac の 2 つ並び。ロゴ + 2 行ラベル) */ :where(.app-page) .hdl{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:30px} :where(.app-page) .hdl-btn{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;min-width:212px;padding:12px 22px;border-radius:6px;background:#6A1928;color:#fff;font-size:12.5px;font-weight:700;line-height:1.45;text-align:center;text-decoration:none} :where(.app-page) .hdl-btn:hover{background:#521321} :where(.app-page) .hdl-logo{width:16px;height:16px;flex:none} :where(.app-page) .hlink{margin-top:20px;font-size:12.5px;text-align:center} :where(.app-page) .hlink a{color:#7D5C2E;text-decoration:underline;text-underline-offset:3px} :where(.app-page) .hlink code{word-break:break-all;user-select:all} /* ラトリスの育て方 (S367: 6 ステップ + プロンプト) */ :where(.app-page) .loop{border:1px solid #E7E0D4;border-radius:8px;background:#fff;margin-top:30px;overflow:hidden} :where(.app-page) .lp{display:flex;gap:16px;padding:22px 22px 24px;border-top:1px solid #E7E0D4} :where(.app-page) .lp:first-child{border-top:0} :where(.app-page) .lp-n{width:29px;height:29px;border-radius:50%;background:#6A1928;color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center;flex:none;margin-top:-2px} :where(.app-page) .lp-b{flex:1;min-width:0} :where(.app-page) .lp-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} :where(.app-page) .lp-h h3{font-size:14.5px;font-weight:700;color:#14100F;margin:0;line-height:1.5} :where(.app-page) .lp-t{flex:none;font-size:11.5px;font-weight:700;color:#7D5C2E;background:#F2EADB;border-radius:999px;padding:3px 14px;white-space:nowrap} :where(.app-page) .lp-b > p{font-size:12.5px;color:#574E49;line-height:1.85;margin:6px 0 0} :where(.app-page) .lp-pause{background:#F2EADB;border-top:1px solid #E7E0D4;padding:20px 24px;text-align:center} :where(.app-page) .lp-pause b{display:block;font-size:14px;color:#14100F;margin-bottom:6px} :where(.app-page) .lp-pause p{font-size:12.5px;color:#574E49;line-height:1.85;margin:0} /* プロンプトカード (S367: 旧 prompts.css の .pc を移植。全文はコピー、画面は 1 行の抜粋 + 全文を見る) */ :where(.app-page) .pc{background:#fff;border:1px solid #B08A4F;border-radius:6px;padding:18px 20px 16px;margin-top:16px} :where(.app-page) .pc-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px} :where(.app-page) .pc .cp{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;color:#7D5C2E} :where(.app-page) .pc h4{font-size:14px;font-weight:700;color:#14100F;margin:3px 0 0} :where(.app-page) .pc-copy{margin:0;padding:10px 16px;border-radius:6px;background:#7B1F2F;font-size:13px;font-weight:700;white-space:nowrap;flex:none} :where(.app-page) .pc-copy:hover{background:#6A1928} :where(.app-page) .pc-copy.done{background:#B08A4F} :where(.app-page) .pc-pv{font-size:12.5px;color:#6B615C;margin:14px 0 0;line-height:1.7} :where(.app-page) .pc-more{background:none;border:0;padding:0;margin-left:10px;font:inherit;font-size:12px;color:#7D5C2E;text-decoration:underline;text-underline-offset:3px;cursor:pointer} :where(.app-page) .pc-more:hover{color:#7B1F2F} :where(.app-page) .pp{margin:14px 0 0;background:#FAF6EE;border-radius:4px;padding:14px 16px;font-family:inherit;font-size:13px;line-height:1.9;color:#2B2626;white-space:pre-wrap;word-break:break-word} :where(.app-page) .pc-note{font-size:12px;color:#6B615C;margin:12px 0 0;line-height:1.7} /* 入れる資料は、厳選して (S367: 3 枚。1 枚目だけ金の枠) */ :where(.app-page) .hsel{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px} :where(.app-page) .hsc{background:#fff;border:1px solid #E7E0D4;border-radius:8px;padding:22px 22px 20px} :where(.app-page) .hsc.first{border-color:#B08A4F} :where(.app-page) .hsc .lb{display:block;font-size:11.5px;font-weight:700;color:#7D5C2E} :where(.app-page) .hsc h3{font-size:14.5px;font-weight:700;color:#14100F;margin:6px 0 12px} :where(.app-page) .hsc ul{list-style:none;padding:0;margin:0} :where(.app-page) .hsc li{font-size:12.5px;color:#574E49;line-height:1.75;padding:2px 0} :where(.app-page) .hsc li::before{content:"・"} :where(.app-page) .hsc p{font-size:12.5px;color:#6B615C;line-height:1.75;margin:12px 0 0} :where(.app-page) .hnote{display:flex;align-items:center;justify-content:center;gap:9px;margin:26px 0 0;font-size:12.5px;color:#6B615C} :where(.app-page) .hnote.left{justify-content:flex-start;margin-top:22px} /* business 以外の部屋 (S367: 8 部屋のカード + ラリーの例 + 注記 2 枚) */ :where(.app-page) #rooms .h2{margin-top:6px} :where(.app-page) #loop .lead{max-width:1000px} :where(.app-page) .rooms{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px} :where(.app-page) .room{background:#fff;border:1px solid #E7E0D4;border-radius:8px;padding:16px 18px} :where(.app-page) .room b{display:block;font-size:14px;font-weight:700;color:#14100F} :where(.app-page) .room .ok{color:#7B1F2F;margin-left:2px} :where(.app-page) .room p{font-size:12px;color:#6B615C;line-height:1.7;margin:5px 0 0} :where(.app-page) .rally{background:#fff;border:1px solid #E7E0D4;border-radius:8px;padding:22px 24px 20px;margin-top:16px} :where(.app-page) .rally > b{display:block;font-size:14.5px;color:#14100F} :where(.app-page) .rally-lead{font-size:12.5px;color:#6B615C;margin:8px 0 12px;line-height:1.7} :where(.app-page) .rally-log{margin:0} :where(.app-page) .rally-log div{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:5px 0;font-size:12.5px;line-height:1.7} :where(.app-page) .rally-log dt{font-weight:700;color:#7D5C2E} :where(.app-page) .rally-log dt.c{color:#7B1F2F} :where(.app-page) .rally-log dd{margin:0;color:#574E49} :where(.app-page) .rally-note{font-size:12.5px;color:#574E49;margin:12px 0 0;line-height:1.7} :where(.app-page) .rnotes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:16px} :where(.app-page) .rnote{background:#fff;border:1px solid #E7E0D4;border-radius:8px;padding:20px 22px 18px} :where(.app-page) .rnote b{display:block;font-size:13.5px;color:#14100F;margin-bottom:6px} :where(.app-page) .rnote p{font-size:12.5px;color:#574E49;line-height:1.8;margin:0} /* 活用セッション */ :where(.app-page) .hsess{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px} :where(.app-page) .hses{background:#fff;border:1px solid #E8DCC3;border-radius:8px;padding:22px 22px 20px} :where(.app-page) .hses .tag{display:inline-block;font-size:11px;font-weight:700;color:#7D5C2E;background:#F2EADB;border-radius:4px;padding:3px 9px} :where(.app-page) .hses h3{font-size:14.5px;font-weight:700;color:#14100F;line-height:1.55;margin:12px 0 8px} :where(.app-page) .hses p{font-size:12.5px;color:#6B615C;line-height:1.75;margin:0 0 12px} :where(.app-page) .hses .more{font-size:12.5px;font-weight:700;color:#7B1F2F;text-decoration:none} :where(.app-page) .hses .more:hover{text-decoration:underline} :where(.app-page) .hses .more.soon{color:#8C837D;cursor:default} /* S367: 全文ページが未作成のセッションは「Comming Soon」の文字だけ (リンクなし) */ :where(.app-page) .hfoot-note{text-align:center;font-size:12px;color:#6B615C;margin:26px 0 0} /* お困りのときは */ :where(.app-page) .hs.help{padding:44px 0 40px;text-align:center} :where(.app-page) body.subpage .hs.help{background:#fff} /* S367: 設定などの下層ページは本文がクリーム地なので、ここだけ白にして TOP と同じ見え方に */ :where(.app-page) .hs.help b{font-size:15px;color:#14100F} :where(.app-page) .hs.help p{font-size:13px;color:#6B615C;margin:8px 0 0} @media (max-width:960px){ :where(.app-page) body.home .top{padding:12px 20px} :where(.app-page) .hnav{gap:14px;font-size:12.5px} :where(.app-page) .hsteps{grid-template-columns:1fr;gap:12px} :where(.app-page) .hstep-ar{display:none} :where(.app-page) .hsel,:where(.app-page) .hsess,:where(.app-page) .rnotes{grid-template-columns:1fr} :where(.app-page) .rooms{grid-template-columns:1fr 1fr} :where(.app-page) .hs{padding:48px 0} :where(.app-page) .hs .h2{font-size:22px} :where(.app-page) #rooms .lead br{display:none} } @media (max-width:640px){ :where(.app-page) .lp{flex-direction:column;gap:10px;padding:18px 16px 20px} :where(.app-page) .lp-h{flex-direction:column;gap:6px} :where(.app-page) .pc{padding:15px 14px 13px} :where(.app-page) .pc-h{flex-direction:column;align-items:stretch} :where(.app-page) .pc-copy{align-self:flex-start} :where(.app-page) .pp{padding:12px 13px;font-size:12.5px} :where(.app-page) .rooms{grid-template-columns:1fr} :where(.app-page) .rally-log div{grid-template-columns:48px 1fr} :where(.app-page) .hdl-btn{width:100%} } /* S364: スマホのハンバーガーメニュー (LP の .burger / .mnav と同じ作り。会員ホームのみ) */ :where(.app-page) .burger{display:none;margin-left:auto;background:none;border:1px solid #E7E0D4;border-radius:6px;width:40px;height:36px;cursor:pointer;color:#2B2626;font-size:16px;flex:none} :where(.app-page) .burger span{display:block;width:18px;height:2px;background:#2B2626;margin:3px auto;border-radius:1px;transition:transform .2s,opacity .2s} :where(.app-page) .top.open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)} :where(.app-page) .top.open .burger span:nth-child(2){opacity:0} :where(.app-page) .top.open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)} :where(.app-page) .mnav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid #E7E0D4;box-shadow:0 8px 34px rgba(60,40,30,.10);padding:10px 20px 22px;display:flex;flex-direction:column;max-height:calc(100vh - 64px);overflow:auto} :where(.app-page) .mnav[hidden]{display:none} :where(.app-page) .mnav .nav-l{display:block;padding:13px 4px;border-bottom:1px solid #EFEAE0;color:#2B2626;text-decoration:none;font-size:15px;font-weight:500} @media (min-width:1101px){:where(.app-page) .mnav{display:none!important}} @media (max-width:1100px){ :where(.app-page) body.home .hnav{display:none} :where(.app-page) body.home .burger{display:block} :where(.app-page) body.home .brand-sub{display:none} } /* S365: お問い合わせセクション (デザイン「09 お問い合わせ(会員)」) */ :where(.app-page) .hw.narrow .card.inq{margin-top:0} /* 枠は #settings のアカウントカードと同じ .card を使う */ :where(.app-page) .inq h2{margin:0} :where(.app-page) .inq-lead{font-size:13px;color:#574E49;margin:14px 0 22px;line-height:1.7} :where(.app-page) .inq label{display:block;font-size:13px;font-weight:700;color:#2B2626;margin:18px 0 0} :where(.app-page) .inq label:first-of-type{margin-top:0} :where(.app-page) .inq label small{display:block;font-size:11px;font-weight:400;color:#8C837D;margin-top:6px} :where(.app-page) .inq input,:where(.app-page) .inq textarea,:where(.app-page) .inq select{width:100%;margin-top:8px;padding:12px 14px;background:#FAF6EE;border:1px solid #E7E0D4;border-radius:4px;font-size:14px;font-weight:400;color:#14100F;font-family:inherit} :where(.app-page) .inq input::placeholder,:where(.app-page) .inq textarea::placeholder{color:#8C837D} :where(.app-page) .inq input:focus,:where(.app-page) .inq textarea:focus,:where(.app-page) .inq select:focus{outline:none;border-color:#B08A4F;box-shadow:0 0 0 3px rgba(176,138,79,.15)} :where(.app-page) .inq textarea{resize:vertical;line-height:1.7} :where(.app-page) .inq-sel{position:relative;display:block} :where(.app-page) .inq-sel select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer} :where(.app-page) .inq-sel::after{content:"";position:absolute;right:16px;top:calc(50% + 4px);width:7px;height:7px;border-right:1.5px solid #574E49;border-bottom:1.5px solid #574E49;transform:translateY(-50%) rotate(45deg);pointer-events:none} :where(.app-page) .inq-to{margin-top:18px;background:#FAF6EE;border-radius:4px;padding:12px 16px;font-size:12.5px;color:#574E49;line-height:1.7} :where(.app-page) .inq-to b{display:block;color:#14100F;font-size:13px} :where(.app-page) .inq .btn{margin-top:18px;padding:12px 18px;border-radius:4px;background:#6A1928;font-weight:700;font-size:14px} :where(.app-page) .inq .btn:hover{background:#521321} :where(.app-page) .inq-note{font-size:12.5px;color:#574E49;margin:16px 0 0;line-height:1.7} :where(.app-page) .inq .msg{margin-top:10px} :where(.app-page) .inq .msg:empty{display:none}