/* ============================================================ lp.css — 全LP共通のデザイン ※ 色を変えたいときは、この下の「配色設定」だけ触ればOKです。 ============================================================ */ /* ------------------------------------------------------------ 配色設定 その1：ピンク（初期設定） ------------------------------------------------------------ */ :root, [data-theme="pink"] { --bg: #fde7ee; /* ページの背景色 */ --bg-card: #ffffff; /* カードの背景色 */ --text: #1f1a1d; /* 文字色 */ --text-sub: #8b7f86; /* 補足文字の色 */ --line: #f3d3de; /* 区切り線の色 */ --btn-1: #ff2d8b; /* メインボタン グラデ左 */ --btn-2: #ff6aa8; /* メインボタン グラデ右 */ --btn-text: #ffffff; /* メインボタンの文字色 */ --btn-sub-bg: #ffffff; /* サブボタンの背景 */ --btn-sub-text: #d81b73; /* サブボタンの文字 */ --shadow: 0 4px 14px rgba(216, 27, 115, .12); --radius: 16px; /* 角丸の大きさ */ --maxw: 520px; /* コンテンツの最大幅（スマホ基準） */ } /* ------------------------------------------------------------ 配色設定 その2：ダーク （使うときは index.html の に data-theme="dark" と書く） ------------------------------------------------------------ */ [data-theme="dark"] { --bg: #0e0f13; --bg-card: #171922; --text: #f2f3f7; --text-sub: #a2a7b8; --line: #2a2e3c; --btn-1: #ff3d7f; --btn-2: #ff7a3d; --btn-text: #ffffff; --btn-sub-bg: #232736; --btn-sub-text: #eaecf5; --shadow: 0 6px 18px rgba(0, 0, 0, .35); } /* ------------------------------------------------------------ ここから下は基本的に触らなくて大丈夫です ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; word-break: break-word; overflow-wrap: anywhere; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; -webkit-tap-highlight-color: transparent; } .lp-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 16px 14px calc(40px + env(safe-area-inset-bottom)); } /* ---- ヘッダー（丸アイコン＋名前） ---- */ .lp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .lp-avatar { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--bg-card); border: 2px solid #fff; box-shadow: var(--shadow); } .lp-name { font-size: 20px; font-weight: 800; line-height: 1.3; margin: 0; } .lp-bio { font-size: 13px; color: var(--text-sub); margin: 2px 0 0; white-space: pre-wrap; } /* ---- ヒーロー（動画 or 画像） ---- */ .lp-hero { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #111; border-radius: 12px; overflow: hidden; margin-bottom: 18px; display: block; } .lp-hero video, .lp-hero img { width: 100%; height: 100%; object-fit: contain; display: block; } .lp-hero--cover video, .lp-hero--cover img { object-fit: cover; } .lp-hero__play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .28); backdrop-filter: blur(2px); cursor: pointer; padding: 0; } .lp-hero__play::before { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent #fff; transform: translateX(4px); } .lp-hero__play:active { background: rgba(255, 255, 255, .45); } .lp-hero-link { display: block; text-decoration: none; } /* ---- 公開前チェック（自分のPCで見たときだけ表示されます） ---- */ .lp-devnote { max-width: var(--maxw); margin: 12px auto; padding: 12px 14px; border: 2px solid #e11d48; border-radius: 12px; background: #fff1f2; color: #7f1d1d; font-size: 13px; line-height: 1.6; } .lp-devnote ul { margin: 8px 0 0; padding-left: 1.2em; } .lp-devnote li { margin-bottom: 4px; } .lp-todo { outline: 2px dashed #e11d48; outline-offset: 2px; } /* ---- セクション見出し ---- */ .lp-section-title { font-size: 19px; font-weight: 800; margin: 0 0 12px; line-height: 1.4; } /* ---- 大きい見出し・リード文（シンプル構成用） ---- */ .lp-title { font-size: 24px; line-height: 1.45; font-weight: 800; margin: 0 0 12px; } .lp-lead { font-size: 15px; color: var(--text-sub); margin: 0 0 22px; white-space: pre-wrap; } .lp-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-card); color: var(--btn-sub-text); margin-bottom: 10px; } /* ---- 横長ボタン ---- */ .lp-buttons { display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; } .lp-btn { display: block; text-decoration: none; text-align: center; padding: 18px 18px; min-height: 62px; border-radius: var(--radius); font-weight: 800; font-size: 17px; line-height: 1.35; background: linear-gradient(135deg, var(--btn-1), var(--btn-2)); color: var(--btn-text); box-shadow: var(--shadow); transition: transform .12s ease, opacity .12s ease; } .lp-btn:active { transform: scale(.985); opacity: .9; } .lp-btn--sub { background: var(--btn-sub-bg); color: var(--btn-sub-text); border: 1px solid var(--line); } .lp-btn__sub { display: block; font-size: 12px; font-weight: 600; opacity: .9; margin-top: 4px; } /* ---- サムネ付きリスト ---- */ .lp-items { display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; } .lp-item { display: flex; align-items: center; gap: 11px; text-decoration: none; background: var(--bg-card); border-radius: 14px; padding: 9px 11px 9px 9px; box-shadow: var(--shadow); transition: transform .12s ease; } .lp-item:active { transform: scale(.99); } /* サムネの大きさを変えたいときは、この width を調整してください（例 32% / 44%） */ .lp-item__thumb { width: 40%; max-width: 168px; height: auto; aspect-ratio: 16 / 9; flex: 0 0 auto; border-radius: 10px; object-fit: cover; background: var(--line); } .lp-item__label { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--text); } .lp-item__sub { display: block; font-size: 12px; font-weight: 500; color: var(--text-sub); margin-top: 2px; } .lp-item__go { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--btn-text); background: linear-gradient(135deg, var(--btn-1), var(--btn-2)); border-radius: 999px; padding: 8px 13px; white-space: nowrap; } /* ---- 注意書き・フッター ---- */ .lp-notes { border-top: 1px solid var(--line); padding: 18px 0 0; margin: 0; list-style: none; } .lp-notes li { font-size: 13px; color: var(--text-sub); margin-bottom: 8px; padding-left: 1em; text-indent: -1em; } .lp-notes li::before { content: "・"; } .lp-footer { margin-top: 22px; font-size: 12px; color: var(--text-sub); text-align: center; } /* ---- PCで見たとき（中央に寄せるだけ） ---- */ @media (min-width: 640px) { .lp-wrap { padding-top: 40px; } .lp-title { font-size: 27px; } } @media (prefers-reduced-motion: reduce) { .lp-btn, .lp-item { transition: none; } } /* ---- LP一覧（トップページ用） ---- */ .lp-index-item { display: block; text-decoration: none; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; } .lp-index-item b { display: block; font-size: 16px; } .lp-index-item span { font-size: 13px; color: var(--text-sub); }