/* ============================== AIRMAX ランディングページ — LINE導線の案 #1〜#6 style.css → style-v2.css → style-v3.css → style-base.css → style-order.css のあとに読み込む差分。index.html（採用した案#4）と比較用の v1〜v6 が読み込む。どの案かはで切り替える。共通部品（LINEボタン・LINEセクション・フッターのLINE）はここにまとめ、案ごとの違いは末尾の [data-plan] ブロックだけに閉じる。色は既存のトークンを使う。LINE の緑だけは LINE の指定色（#06C755）。 ============================== */ :root { --line: #06c755; --line-dark: #05a948; --line-soft: #eaf9f0; --line-shadow: 0 8px 26px rgba(6, 140, 60, 0.28); } /* ============================== 案の見分け用ラベル（確認用。採用時は外す） ============================== */ .plan-tag { position: fixed; top: 10px; left: 10px; z-index: 70; padding: 5px 10px; border-radius: 999px; background: rgba(10, 21, 38, 0.82); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; backdrop-filter: blur(6px); pointer-events: none; } .plan-tag b { color: var(--line); margin-right: 6px; } /* ============================== ヒーロー：電話とLINEを並べる ============================== */ .hero-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 28px; } .hero-actions .btn-call { margin-top: 0; } /* .btn-call と同じ骨格の LINE ボタン。写真の上でも沈まないよう影を添える */ .btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 280px; padding: 14px 32px; border-radius: var(--radius); background: var(--line); color: #fff; text-decoration: none; box-shadow: var(--line-shadow); transition: background 0.15s, transform 0.2s; } .btn-line:hover, .btn-line:active { background: var(--line-dark); } .btn-line-icon { width: 30px; height: 30px; flex-shrink: 0; } .btn-line-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; } .btn-line-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; opacity: 0.92; } .btn-line-main { font-size: 1.3rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; } /* 電話ボタン（案#4〜）は #0 と同じ見た目（style.css / style-v2.css / style-v3.css の .btn-call）。 LINE ボタンの下に並べるだけで、色・形・大きさは変えない */ @media (min-width: 640px) { .hero-actions { flex-direction: row; justify-content: center; align-items: stretch; } .btn-line { min-width: 0; } } /* ============================== ご利用の流れ：STEP3 のLINEリンク ============================== */ .step-line { color: var(--line-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* ============================== LINEでできること（案#3〜）ほかのセクションと同じ「丸い縁で重なる面」にそろえる ============================== */ .section-line { position: relative; z-index: 1; margin-top: calc(var(--lap) * -1); border-top-left-radius: var(--lap); border-top-right-radius: var(--lap); box-shadow: var(--shadow-lap); padding: 80px 0 calc(80px + var(--lap)); background: var(--color-bg-alt); } @media (max-width: 600px) { .section-line { padding: 56px 0 calc(56px + var(--lap)); } } .section-line .section-eyebrow { color: var(--line-dark); } /* メニュー5つ：トーク画面下のリッチメニューと同じ並びで見せる */ .line-menu { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; } .line-menu-item { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 14px 16px; background: var(--color-bg); border-radius: 16px; box-shadow: var(--shadow-soft); } .line-menu-emoji { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--line-soft); font-size: 1.35rem; } .line-menu-label { font-weight: 700; font-size: 0.98rem; line-height: 1.4; } .line-menu-desc { margin: 2px 0 0; font-size: 0.82rem; line-height: 1.6; color: var(--color-text-light); } @media (min-width: 640px) { .line-menu { grid-template-columns: 1fr 1fr; } .line-menu-item:first-child { grid-column: 1 / -1; } } /* LINEならではの利点 3つ。電話にできないことだけを書く */ .line-merits { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .line-merits li { padding: 7px 14px; border-radius: 999px; background: var(--color-bg); border: 1px solid var(--color-border); font-size: 0.85rem; font-weight: 600; color: var(--color-text); } .line-merits li::before { content: '✓'; color: var(--line-dark); font-weight: 800; margin-right: 6px; } /* 友だち追加の方法：スマホ→ボタン、PC→QR、読めない人→ID */ .line-join { margin-top: 32px; padding: 24px 20px 22px; background: var(--color-bg); border-radius: 20px; box-shadow: var(--shadow-soft-lg); text-align: center; } .line-join-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 16px; } .line-join .btn-line { width: 100%; min-width: 0; max-width: 360px; } .line-join-pc { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--color-border-strong); text-align: left; } .line-qr { width: 108px; height: 108px; flex-shrink: 0; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; padding: 6px; } .line-join-pc p { margin: 0; font-size: 0.85rem; line-height: 1.7; color: var(--color-text-light); } .line-join-id { margin: 14px 0 0; font-size: 0.82rem; color: var(--color-text-light); } .line-join-id code { padding: 2px 8px; border-radius: 6px; background: var(--color-bg-alt); font-weight: 700; color: var(--color-text); font-family: inherit; } .line-join-note { margin: 12px 0 0; font-size: 0.78rem; color: var(--color-text-light); } /* ============================== 試算のあとのバナー：電話にLINEを並べる ============================== */ .sim-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .sim-cta-line { display: inline-flex; align-items: center; gap: 8px; padding: 16px 28px; border-radius: 999px; background: var(--line); color: #fff; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; text-decoration: none; box-shadow: var(--line-shadow); } .sim-cta-line svg { width: 22px; height: 22px; } /* ============================== CTA：電話の下（案#4〜は上）にLINEの箱 .cta-phone と同じ骨格で、色だけ緑 ============================== */ .cta-line { display: block; max-width: 520px; margin: 16px auto 0; border: 2px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg); text-decoration: none; transition: box-shadow 0.15s; } .cta-line:hover { box-shadow: 0 4px 16px rgba(6, 199, 85, 0.22); } .cta-line-head { display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--line); color: #fff; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.14em; padding: 9px 16px; } .cta-line-head::before, .cta-line-head::after { content: ''; width: 20px; height: 1px; background: rgba(255, 255, 255, 0.75); box-shadow: 0 5px 0 rgba(255, 255, 255, 0.75), 0 -5px 0 rgba(255, 255, 255, 0.75); } .cta-line-body { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 18px 16px; color: var(--color-text); } .cta-line-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--line); color: #fff; display: flex; align-items: center; justify-content: center; } .cta-line-icon svg { width: 22px; height: 22px; } .cta-line-text { display: flex; flex-direction: column; line-height: 1.3; } .cta-line-main { font-size: 1.35rem; font-weight: 800; } .cta-line-sub { font-size: 0.8rem; color: var(--color-text-light); } .cta-feature-icon--line { background: var(--line) !important; } /* ============================== フッター：LINE を Instagram の隣に。QR も置く ============================== */ .footer-contact--line { color: var(--line-dark); } .footer-line { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px auto 0; padding: 14px 16px; max-width: 360px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 14px; text-align: left; } .footer-line .line-qr { width: 84px; height: 84px; padding: 4px; } .footer-line p { margin: 0; font-size: 0.8rem; line-height: 1.65; color: var(--color-text-light); } .footer-line p b { display: block; color: var(--color-text); font-size: 0.9rem; margin-bottom: 2px; } /* ============================== 固定バー：案#4〜は LINE を左（先）に ============================== */ [data-plan="4"] .sticky-cta, [data-plan="5"] .sticky-cta { flex-direction: row-reverse; } /* ============================== 案#5：LINE注文の流れと「いまどこ」表示（構想） ============================== */ .line-flow { margin-top: 30px; padding: 22px 18px 20px; background: var(--color-bg); border-radius: 20px; box-shadow: var(--shadow-soft); } .line-flow-title { margin: 0 0 4px; font-size: 0.98rem; font-weight: 700; text-align: center; } .line-flow-lead { margin: 0 0 18px; font-size: 0.82rem; color: var(--color-text-light); text-align: center; } .line-flow-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; } .line-flow-track::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 14px; height: 2px; background: var(--color-border-strong); } .line-flow-step { position: relative; text-align: center; font-size: 0.72rem; line-height: 1.5; color: var(--color-text-light); } .line-flow-step::before { content: ''; display: block; width: 28px; height: 28px; margin: 0 auto 8px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-border-strong); position: relative; z-index: 1; } .line-flow-step.is-done::before { background: var(--line); border-color: var(--line); } .line-flow-step.is-now { color: var(--color-text); font-weight: 700; } .line-flow-step.is-now::before { border-color: var(--line); box-shadow: 0 0 0 5px var(--line-soft); } .line-flow-msg { margin: 18px 0 0; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--line-soft); font-size: 0.82rem; line-height: 1.7; color: var(--color-text); } .line-flow-msg small { display: block; color: var(--color-text-light); font-size: 0.72rem; margin-top: 4px; } /* ============================== 案#6：右端の縦タブ（SP）と、PCでは右端タイル ============================== */ .line-tab { /* 縦書き（writing-mode）は環境によって漢字の縦組みが崩れるため使わない。横書きの札を右下の角を軸に90度回して、右端に掛ける */ position: fixed; right: 0; top: 54%; /* 右上の角を軸に回すので、札はここから上へ伸びる */ z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 11px; border-radius: 0 0 10px 10px; /* 回転後に画面側を向く辺（回転前の下辺）を丸める */ background: var(--line); color: #fff; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; white-space: nowrap; text-decoration: none; box-shadow: var(--line-shadow); transform: rotate(90deg); transform-origin: 100% 0; /* 右上の角を軸に時計回り。文字は上から下へ読める */ } .line-tab svg { width: 18px; height: 18px; flex: none; transform: rotate(-90deg); /* 札ごと回した分を戻して、吹き出しの向きを正しく */ } .line-tiles { display: none; } @media (min-width: 1200px) { [data-plan="6"] .sticky-cta, [data-plan="6"] .line-tab { display: none !important; } .line-tiles { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 10px; width: 132px; } .line-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; border-radius: 12px; color: #fff; text-decoration: none; text-align: center; font-size: 0.72rem; font-weight: 700; line-height: 1.4; box-shadow: 0 8px 22px rgba(10, 21, 38, 0.22); } .line-tile svg { width: 22px; height: 22px; } .line-tile--tel { background: var(--color-accent); } .line-tile--line { background: var(--line); } .line-tile--qr { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); padding: 10px 8px 8px; } .line-tile--qr .line-qr { width: 96px; height: 96px; border: 0; padding: 0; } .line-tile small { font-weight: 600; opacity: 0.85; } }