/* ============================================================ TRAVIZ — デザインシステム 経営者のためのクレジットカード×ファイナンス会員サイト 世界観: PREMIUM 紺 × 金（金属プレミアムカードの質感） 方針: 金は「細い線」で効かせる／余白を広く／見出し明朝・本文ゴシック ※ Google Fonts (Noto Serif JP / Noto Sans JP) は各HTMLので読込 ============================================================ */ :root{ /* --- カラートークン --- */ --navy:#0e1b33; /* ベース紺 */ --navy2:#16243f; /* グラデ・面の明るい紺 */ --gold:#cdb37e; /* アクセント金 */ --cream:#f4f0e6; /* 本文の生成り白 */ --muted:#c9d1dc; /* 副次テキスト */ --ink:#1a2436; /* 金地の上に置く濃紺文字 */ /* --- フォント --- */ --font-serif:'Noto Serif JP',serif; --font-sans:'Noto Sans JP',sans-serif; /* --- 線・余白・形 --- */ --line-gold:rgba(205,179,126,.27); /* 金の細罫（控えめ） */ --glass:rgba(255,255,255,.05); /* ガラス面 */ --radius:14px; --nav-h:64px; --ease:cubic-bezier(.22,.61,.36,1); } /* --- リセット --- */ *{box-sizing:border-box;margin:0} html{scroll-behavior:smooth} body{ background:var(--navy); color:var(--cream); font-family:var(--font-sans); line-height:1.7; font-weight:400; letter-spacing:.01em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* 金の細いセクション区切り（共通ユーティリティ） */ .rule-gold{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.45;margin:0} /* ============================================================ ナビゲーション（固定ヘッダー） 左: 金のTRAVIZロゴ ／ 右: 会員ログインボタン 半透明紺 + backdrop blur ============================================================ */ .nav{ position:fixed;top:0;left:0;right:0;z-index:100; height:var(--nav-h); display:flex;align-items:center;justify-content:space-between; padding:0 clamp(20px,5vw,56px); background:rgba(14,27,51,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line-gold); } .nav__logo{ font-family:var(--font-serif); font-size:1.35rem; font-weight:600; letter-spacing:.34em; /* 金属プレートのような字間 */ color:var(--gold); padding-left:.34em; /* 字間ぶんの視覚補正 */ } .nav__links{display:flex;align-items:center;gap:clamp(16px,3vw,34px)} .nav__link{ font-size:.86rem;color:var(--muted); transition:color .25s var(--ease); } .nav__link:hover{color:var(--cream)} /* ============================================================ ボタン ============================================================ */ .btn-gold,.btn-ghost{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--font-sans);font-size:.92rem;font-weight:500; letter-spacing:.04em; padding:.78em 1.7em;border-radius:999px; cursor:pointer;border:1px solid transparent; transition:transform .25s var(--ease),box-shadow .3s var(--ease), background .3s var(--ease),color .3s var(--ease); } /* 主要CTA：金地に濃紺文字（金属プレートの光沢） */ .btn-gold{ background:linear-gradient(135deg,#e3cf9f,var(--gold) 55%,#b89a63); color:var(--ink);font-weight:600; box-shadow:0 6px 22px -8px rgba(205,179,126,.5); } .btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(205,179,126,.62)} .btn-gold:active{transform:translateY(0)} /* 副次：金の枠線のみ */ .btn-ghost{ background:transparent;color:var(--gold); border-color:var(--line-gold); } .btn-ghost:hover{border-color:var(--gold);background:rgba(205,179,126,.08);transform:translateY(-2px)} /* LINE友だち追加：LINEブランドグリーン */ .btn-line{ display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-family:var(--font-sans);font-size:.92rem;font-weight:600; letter-spacing:.04em; padding:.78em 1.7em;border-radius:999px; cursor:pointer;border:1px solid transparent; background:#06C755;color:#fff; box-shadow:0 6px 22px -8px rgba(6,199,85,.55); transition:transform .25s var(--ease),box-shadow .3s var(--ease); } .btn-line:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(6,199,85,.65);color:#fff} .btn-line:active{transform:translateY(0)} .btn-line svg{width:1.15em;height:1.15em;flex:none} /* LINE誘導バンド */ .line-band{ text-align:center; background:linear-gradient(135deg,rgba(6,199,85,.10),rgba(6,199,85,.03)); border:1px solid rgba(6,199,85,.28); border-radius:20px; padding:2.6rem 1.6rem; } .line-band h2{margin:0 0 .6rem} .line-band p{margin:0 auto 1.6rem;max-width:38rem} .line-band__note{font-size:.82rem;color:var(--muted,#8a93a6);margin-top:1.1rem} /* キーボード操作時のフォーカス可視化（アクセシビリティ） */ a:focus-visible, .btn-gold:focus-visible, .btn-ghost:focus-visible, .btn-line:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; } /* ============================================================ ヒーロー ============================================================ */ .hero{ position:relative;overflow:hidden; background:linear-gradient(160deg,var(--navy),var(--navy2)); padding:clamp(120px,18vh,200px) clamp(20px,5vw,56px) clamp(80px,12vh,130px); text-align:center; } /* 上端にうっすら金のグロー（金属の反射） */ .hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 50% at 50% -8%,rgba(205,179,126,.16),transparent 70%); } .hero__inner{position:relative;max-width:880px;margin:0 auto} .hero__eyebrow{ display:inline-block; font-size:.74rem;letter-spacing:.42em;text-transform:uppercase; color:var(--gold);margin-bottom:1.6rem;padding-left:.42em; } .hero h1{ font-family:var(--font-serif); font-weight:600; font-size:clamp(2rem,5.2vw,3.5rem); line-height:1.32;letter-spacing:.02em; color:var(--cream); margin-bottom:1.5rem; } .hero h1 em{font-style:normal;color:var(--gold)} .hero__sub{ color:var(--muted); font-size:clamp(.96rem,1.6vw,1.12rem); max-width:620px;margin:0 auto 2.6rem; line-height:1.9; } .hero__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap} /* 1カラム固定のpillarsグリッド */ .pillars--single{grid-template-columns:1fr} /* カード幅に応じて自動折返し、モバイルは1カラム */ .pillars--auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} @media(max-width:820px){.pillars--auto{grid-template-columns:1fr}} /* セクション内のCTA行（左寄せ） */ .section-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:2.6rem} /* ============================================================ セクション ============================================================ */ .section{ max-width:1080px;margin:0 auto; padding:clamp(64px,10vh,108px) clamp(20px,5vw,40px); } .section-title{ font-family:var(--font-serif); font-weight:600; font-size:clamp(1.5rem,3.2vw,2.1rem); letter-spacing:.03em;color:var(--cream); margin-bottom:.7rem; } /* 見出し直下の金の細い下線 */ .section-title::after{ content:"";display:block;width:48px;height:2px; background:var(--gold);margin-top:.85rem;border-radius:2px; } .section-lead{color:var(--muted);max-width:600px;margin-bottom:3rem;line-height:1.9} /* ============================================================ 柱（3本柱）カード ============================================================ */ .pillars{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,26px); } /* 単独プラン表示（経営者クレカ顧問1枚）: 1カラム＋中央寄せで幅を絞る */ .pillars.pillars--single{grid-template-columns:1fr} #plans .pillars--single{max-width:560px;margin-left:auto;margin-right:auto} /* プラン下の補足（一般会員への導線） */ .plan-note{margin:1.8rem auto 0;max-width:560px;text-align:center;font-size:.88rem;opacity:.72;line-height:1.9} .plan-note a{color:var(--gold);text-decoration:underline;text-underline-offset:3px} .pillar-card{ position:relative; background:var(--glass); border:1px solid var(--line-gold); border-radius:var(--radius); padding:clamp(26px,3vw,34px); transition:transform .35s var(--ease),border-color .35s var(--ease), box-shadow .35s var(--ease),background .35s var(--ease); } .pillar-card:hover{ transform:translateY(-6px); border-color:rgba(205,179,126,.55); background:rgba(255,255,255,.07); box-shadow:0 20px 40px -22px rgba(0,0,0,.6); } .pillar-card__no{ font-family:var(--font-serif);font-size:.82rem; letter-spacing:.3em;color:var(--gold);opacity:.8; } .pillar-card h3{ font-family:var(--font-serif);font-weight:600; font-size:1.22rem;color:var(--cream); margin:.7rem 0 .8rem;letter-spacing:.02em; } .pillar-card p{color:var(--muted);font-size:.92rem;line-height:1.85} /* 会員限定カード：右上に小さな鍵バッジ（LP「会員限定コンテンツ」用） */ .pillar-card--locked{padding-top:clamp(34px,3.4vw,42px)} /* バッジぶん上余白を確保 */ .lock-badge{ position:absolute;top:clamp(18px,2vw,22px);right:clamp(18px,2vw,22px); display:inline-flex;align-items:center;gap:.35em; font-size:.68rem;font-weight:600;letter-spacing:.1em; padding:.3em .75em;border-radius:999px; color:var(--gold); border:1px solid rgba(205,179,126,.5); background:rgba(205,179,126,.1); white-space:nowrap; } /* ============================================================ 会員プランカード（LP「会員プラン」セクション用） pillar-card をベースに、上位プランを金枠で強調する ============================================================ */ .plan-card{display:flex;flex-direction:column} /* プラン名・価格表記 */ .plan-card__name{ font-family:var(--font-serif);font-weight:600; font-size:1.32rem;color:var(--cream); margin:.7rem 0 .3rem;letter-spacing:.02em; } .plan-card__price{color:var(--gold);font-size:.86rem;letter-spacing:.06em;margin-bottom:1rem} /* プランに含まれるトピックの一覧 */ .plan-card__list{list-style:none;padding:0;margin:.4rem 0 1.6rem;flex:1} .plan-card__list li{ color:var(--muted);font-size:.9rem;line-height:1.6; padding:.4em 0 .4em 1.3em;position:relative; border-bottom:1px solid rgba(255,255,255,.05); } .plan-card__list li::before{content:"―";position:absolute;left:0;color:var(--gold);opacity:.8} .plan-card .btn-gold,.plan-card .btn-ghost{align-self:flex-start;margin-top:auto} /* 上位（おすすめ）プラン：金枠で強調＋おすすめバッジ */ .plan-card--featured{ border-color:rgba(205,179,126,.55); background:rgba(205,179,126,.06); box-shadow:0 18px 44px -26px rgba(205,179,126,.4); } .plan-card__badge{ position:absolute;top:clamp(18px,2vw,22px);right:clamp(18px,2vw,22px); font-size:.66rem;font-weight:600;letter-spacing:.12em; padding:.32em .8em;border-radius:999px; color:var(--ink); background:linear-gradient(135deg,#e3cf9f,var(--gold) 55%,#b89a63); white-space:nowrap; } .plan-card--featured{padding-top:clamp(34px,3.4vw,42px)} /* バッジぶん上余白 */ /* ============================================================ タグ（柱／階層ラベル） ============================================================ */ .tag{ display:inline-flex;align-items:center; font-size:.72rem;font-weight:500;letter-spacing:.08em; padding:.34em .85em;border-radius:999px; border:1px solid var(--line-gold); background:rgba(255,255,255,.04); color:var(--muted); white-space:nowrap; } /* 柱・階層ごとの色違い（地色を薄く・文字と枠で識別） */ .tag-houjin{color:#cdb37e;border-color:rgba(205,179,126,.5);background:rgba(205,179,126,.1)} /* 法人 */ .tag-mile{color:#8fbcd9;border-color:rgba(143,188,217,.45);background:rgba(143,188,217,.1)} /* マイル */ .tag-kiso{color:#9fd6b4;border-color:rgba(159,214,180,.42);background:rgba(159,214,180,.1)} /* 基礎 */ .tag-keieisha{color:#d6b0a0;border-color:rgba(214,176,160,.45);background:rgba(214,176,160,.1)} /* 経営者 */ .tag-kojin{color:#b9a8d6;border-color:rgba(185,168,214,.45);background:rgba(185,168,214,.1)} /* 個人 */ /* ============================================================ 記事本文 ============================================================ */ .article{ max-width:720px;margin:0 auto; padding:clamp(96px,12vh,130px) clamp(20px,5vw,28px) 90px; line-height:1.9; } .article__meta{ display:flex;gap:.6rem;align-items:center;flex-wrap:wrap; margin-bottom:1.4rem;color:var(--muted);font-size:.82rem; } .article h1{ font-family:var(--font-serif);font-weight:600; font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.45; color:var(--cream);letter-spacing:.02em;margin-bottom:1.8rem; } .article h2{ font-family:var(--font-serif);font-weight:600; font-size:clamp(1.3rem,2.6vw,1.6rem);color:var(--gold); letter-spacing:.02em; margin:2.8rem 0 1.1rem;padding-bottom:.5rem; border-bottom:1px solid var(--line-gold); } .article h3{ font-family:var(--font-serif);font-weight:600; font-size:1.12rem;color:var(--cream); margin:2rem 0 .8rem;letter-spacing:.02em; } .article p{color:var(--cream);margin:1.1rem 0} .article a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} /* Q&Aページ: 各回答の下に置く「会員記事へ」の導線 */ .article p.qa-more{ margin:.9rem 0 0;padding:.7rem .9rem; font-size:.86rem;line-height:1.8; background:rgba(255,255,255,.03); border-left:2px solid var(--line-gold); border-radius:0 6px 6px 0; opacity:.85; } .article a:hover{opacity:.8} .article strong{color:var(--gold);font-weight:600} /* 箇条書き */ .article ul,.article ol{margin:1.1rem 0;padding-left:1.4rem} .article li{margin:.55rem 0;color:var(--cream)} .article ul li::marker{color:var(--gold)} .article ol li::marker{color:var(--gold);font-family:var(--font-serif)} /* 引用：金の左罫 */ .article blockquote{ margin:1.8rem 0;padding:.4rem 0 .4rem 1.4rem; border-left:3px solid var(--gold); color:var(--muted);font-style:italic; font-family:var(--font-serif);font-size:1.05rem;line-height:1.85; } /* 注目ボックス（callout） */ .callout{ margin:1.8rem 0;padding:1.3rem 1.5rem; background:rgba(205,179,126,.07); border:1px solid var(--line-gold); border-radius:var(--radius); } .callout__label{ display:block;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase; color:var(--gold);margin-bottom:.5rem; } .callout p{margin:.4rem 0;color:var(--cream)} .callout p:first-of-type{margin-top:0} /* 比較表：紺枠 */ .article table{ width:100%;border-collapse:collapse;margin:1.8rem 0; font-size:.9rem; border:1px solid var(--line-gold);border-radius:var(--radius); overflow:hidden; } .article th,.article td{ padding:.78em 1em;text-align:left; border-bottom:1px solid rgba(255,255,255,.07); border-right:1px solid rgba(255,255,255,.07); } .article th{ background:var(--navy2);color:var(--gold); font-weight:600;letter-spacing:.04em; font-family:var(--font-serif); } .article td{color:var(--cream)} .article tr:last-child td{border-bottom:0} .article th:last-child,.article td:last-child{border-right:0} .article tbody tr:hover td{background:rgba(255,255,255,.03)} /* ============================================================ 目次リスト（会員トップ / コンテンツINDEX） 各柱の記事を縦並びで一覧。公開済みは金の枠でホバー可、 準備中は淡くして非操作（pointer-events:none）にする。 ============================================================ */ .toc-list{ list-style:none;padding:0; margin:0 0 3rem; display:flex;flex-direction:column;gap:12px; } /* 1行（記事1件）。リンク要素・非リンク要素の両方を内包 */ .toc-item{ border:1px solid var(--line-gold); border-radius:var(--radius); background:var(--glass); transition:border-color .3s var(--ease),background .3s var(--ease), transform .3s var(--ease),box-shadow .3s var(--ease); } /* 公開済み記事：行全体をクリック領域に */ .toc-item__link{ display:flex;align-items:center;gap:1rem; padding:1rem clamp(16px,2.4vw,24px); } .toc-item:has(.toc-item__link):hover{ transform:translateX(4px); border-color:rgba(205,179,126,.55); background:rgba(255,255,255,.07); box-shadow:0 14px 30px -22px rgba(0,0,0,.6); } /* 準備中の行：非リンク要素を同じレイアウトで並べる */ .toc-item--soon{ display:flex;align-items:center;gap:1rem; padding:1rem clamp(16px,2.4vw,24px); opacity:.42; pointer-events:none; /* クリック不可 */ } /* 記事タイトル（伸縮して左を占有） */ .toc-item__title{ flex:1; font-family:var(--font-serif);font-weight:500; font-size:1.02rem;color:var(--cream);letter-spacing:.02em; } /* 準備中バッジ */ .toc-item__badge{ font-size:.7rem;letter-spacing:.14em; padding:.3em .8em;border-radius:999px; border:1px solid rgba(255,255,255,.18); color:var(--muted);white-space:nowrap; } @media(max-width:560px){ .toc-item__link,.toc-item--soon{flex-wrap:wrap;gap:.6rem} .toc-item__title{flex-basis:100%} } /* ============================================================ フッター ============================================================ */ .footer{ background:#0a1426; /* ベースより一段濃い紺 */ border-top:1px solid var(--line-gold); padding:clamp(40px,7vh,64px) clamp(20px,5vw,40px); text-align:center; } .footer__logo{ font-family:var(--font-serif);font-size:1.1rem; letter-spacing:.34em;color:var(--gold);padding-left:.34em; margin-bottom:1rem; } .footer__meta{color:var(--muted);font-size:.84rem;line-height:1.9;margin-bottom:1.1rem} .footer__copy{color:var(--muted);font-size:.76rem;letter-spacing:.04em} /* フッターの法務リンク（特商法・プライバシー・規約） */ .footer__links{margin-top:1.2rem;font-size:.8rem;line-height:1.9;color:var(--muted)} .footer__links a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--line-gold)} .footer__links a:hover{color:var(--cream);border-bottom-color:var(--gold)} /* フッターの商標・免責の注記（小さく・控えめ・中央寄せ） */ .footer__legal{max-width:680px;margin:1rem auto 0;color:var(--muted);font-size:.72rem;line-height:1.8;opacity:.85} /* 法務ページ（特商法・プライバシー・規約）の本文 */ .legal h2{font-family:var(--font-serif);color:var(--cream);font-size:1.1rem;margin:2.4rem 0 .8rem} .legal p,.legal li{color:var(--muted);line-height:1.9} .legal ul{margin:1rem 0;padding-left:1.4rem} .legal .legal-intro{margin-bottom:1.4rem} .legal .legal-note{margin-top:2.4rem;font-size:.8rem;color:var(--gold);opacity:.85} /* 法務ページの定義テーブル（紺枠・金見出し） */ .legal-table{width:100%;border-collapse:collapse;margin:1.8rem 0;font-size:.9rem; border:1px solid var(--line-gold);border-radius:var(--radius);overflow:hidden} .legal-table th,.legal-table td{padding:.85em 1.1em;text-align:left;border-bottom:1px solid var(--line-gold);vertical-align:top;line-height:1.8} .legal-table th{width:32%;background:rgba(205,179,126,.07);color:var(--gold);font-weight:600;white-space:nowrap} .legal-table td{color:var(--cream)} .legal-table tr:last-child th,.legal-table tr:last-child td{border-bottom:none} @media(max-width:560px){ .legal-table th{white-space:normal;width:38%} } /* ============================================================ 顧問LP（komon.html）用の小さな追加クラス ============================================================ */ /* チェックリスト（金のチェック付き・縦並び） */ .check-list{list-style:none;padding:0;margin:0 0 1.6rem;display:flex;flex-direction:column;gap:12px;max-width:680px} .check-list li{ position:relative; padding:1rem 1.3rem 1rem 3rem; border:1px solid var(--line-gold);border-radius:var(--radius); background:var(--glass);color:var(--cream);line-height:1.75; } .check-list li::before{ content:"✓";position:absolute;left:1.15rem;top:1rem; color:var(--gold);font-weight:600; } /* セクション直下でも使える金縁テーブル（.article table と同じ見た目） */ .table-gold{ width:100%;border-collapse:collapse;margin:1.8rem 0;font-size:.9rem; border:1px solid var(--line-gold);border-radius:var(--radius);overflow:hidden; } .table-gold th,.table-gold td{ padding:.78em 1em;text-align:left; border-bottom:1px solid rgba(255,255,255,.07); border-right:1px solid rgba(255,255,255,.07); } .table-gold th{ background:var(--navy2);color:var(--gold); font-weight:600;letter-spacing:.04em;font-family:var(--font-serif); } .table-gold td{color:var(--cream)} .table-gold tr:last-child td{border-bottom:0} .table-gold th:last-child,.table-gold td:last-child{border-right:0} /* 表・価格の注記（免責などを小さく） */ .table-note{color:var(--muted);font-size:.78rem;line-height:1.8;margin-top:-.6rem;max-width:680px} /* FAQ（開閉式・金縁） */ .faq{max-width:760px;display:flex;flex-direction:column;gap:12px} .faq details{ border:1px solid var(--line-gold);border-radius:var(--radius); background:var(--glass);padding:0 1.3rem; } .faq summary{ cursor:pointer;list-style:none; padding:1rem 0;display:flex;gap:.7em;align-items:baseline; font-family:var(--font-serif);font-weight:600;color:var(--cream);line-height:1.6; } .faq summary::-webkit-details-marker{display:none} .faq summary::before{content:"Q.";color:var(--gold);font-family:var(--font-serif);flex:none} .faq details p{color:var(--muted);font-size:.92rem;line-height:1.85;margin:0;padding:0 0 1.1rem} /* ============================================================ レスポンシブ（スマホ） ============================================================ */ @media(max-width:820px){ .pillars{grid-template-columns:1fr} /* 3カラム→1カラム */ .nav{padding:0 18px} .nav__logo{font-size:1.15rem;letter-spacing:.26em} .nav__links{gap:14px} .nav__link{display:none} /* 狭幅はログインのみ残す */ .hero__cta{flex-direction:column;align-items:center} .hero__cta .btn-gold,.hero__cta .btn-ghost{width:100%;max-width:300px} .article table{font-size:.82rem} .table-gold{font-size:.82rem} }