@charset "utf-8"; /* ============================================================================= nishikawa ご利用ガイド ─ トンマナ統合スタイル（オンラインショップ下層用） ご利用ガイドトップの意匠に、下層（/guide/onlineshop）の既存マークアップを揃えます。 ■ 使い方 1. に本ファイルを読み込む（既存CSS群のあとに追加） 2. あわせて左メニュー(.leftmenuframe_) と 目次カード のHTMLを追加（統合手順.md 参照） ■ 構成 [A] 共通コンポーネント（左メニュー / ページ見出し / 目次カード） ─ トップの guide_style.css を本ページでも読み込む場合は [A] は不要です。 重複を避けるため、その場合 [A] ブロックごと削除してください。 [B] freepage（既存下層マークアップ）のトンマナ再スタイル … 本ファイルの主目的 ============================================================================= */ :root{ --nk-red:#c8161d; --ink:#1c1a18; --body:#3a3733; --muted:#8a847d; --line:#e6e2dc; --line-strong:#d8d3cc; --card:#f5f3f0; --card-hover:#efeae3; --radius:10px; --radius-sm:6px; --pill:999px; } /* ============================================================================= [A] 共通コンポーネント ※guide_style.css を併読する場合はこのブロックを削除 ============================================================================= */ /* ---- 2カラムレイアウト（トップと同じ leftmenuframe_ + mainframe_）---- */ .contents_{display:flex;gap:40px;align-items:flex-start} .leftmenuframe_{flex:0 0 236px;width:236px;position:sticky;top:96px} .mainframe_{flex:1 1 auto;min-width:0} @media (max-width:768px){ .contents_{display:block} .leftmenuframe_{position:static;width:auto;flex:none;margin-bottom:24px} } /* ---- 左メニュー ---- */ .block-guide-side-category--open-button{display:none} @media (max-width:768px){ .block-guide-side-category--open-button{ display:block;width:100%;background:var(--ink);color:#fff;border:0;border-radius:var(--pill); font-family:inherit;font-weight:700;font-size:15px;padding:15px 20px;cursor:pointer; } .block-guide-side-category{display:none} .block-guide-side-category.is-open-sp{display:block;margin-top:12px} } .block-guide-side-category--frame{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff} .block-guide-side-category--frame-unit{border-bottom:1px solid var(--line)} .block-guide-side-category--frame-unit:last-child{border-bottom:0} .block-guide-side-category--frame-button{ width:100%;text-align:left;background:none;border:0;cursor:pointer;text-decoration:none;display:block; font-family:inherit;font-weight:700;font-size:15px;color:var(--ink); padding:16px 40px 16px 18px;position:relative;letter-spacing:.03em;line-height:1.5; } .block-guide-side-category--frame-button::after{ content:"";position:absolute;right:18px;top:50%;width:8px;height:8px; border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink); transform:translateY(-70%) rotate(-45deg);transition:transform .25s; } .js-toggle.is-open .block-guide-side-category--frame-button::after{transform:translateY(-30%) rotate(45deg)} .block-guide-side-category--frame-content{overflow:hidden;max-height:0;transition:max-height .3s ease} .js-toggle.is-open .block-guide-side-category--frame-content{max-height:900px} .block-guide-side-category--list{list-style:none;margin:0;padding:0 0 8px} .block-guide-side-category--link{ display:block;text-decoration:none;color:var(--body);font-size:13.5px;line-height:1.5; padding:9px 18px 9px 30px;position:relative;transition:background .15s,color .15s; } .block-guide-side-category--link::before{content:"";position:absolute;left:18px;top:15px;width:5px;height:5px;border-radius:50%;background:var(--nk-red)} .block-guide-side-category--link:hover{background:var(--card);color:var(--ink)} .block-guide-side-category--item.is-current .block-guide-side-category--link{color:var(--ink);font-weight:700;background:var(--card)} /* ---- ページ見出し ---- */ .block-guide-title{font-size:34px;font-weight:700;color:var(--ink);margin:0 0 16px;letter-spacing:.04em;line-height:1.35} .block-guide-lead{margin:0 0 44px} .block-guide-lead p{margin:0;font-size:15px;color:var(--body)} @media (max-width:768px){.block-guide-title{font-size:26px}} /* ---- 目次カード（トップの「オンラインショップ」グリッド）---- */ .block-guide-category--list{list-style:none;margin:0 0 48px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .block-guide-category--link{ display:flex;flex-direction:column;align-items:center;gap:14px;text-decoration:none; background:var(--card);border:1px solid transparent;border-radius:var(--radius); padding:26px 12px 20px;height:100%;transition:background .18s,border-color .18s,transform .18s;color:var(--ink); } .block-guide-category--link:hover{background:#fff;border-color:var(--line-strong);transform:translateY(-2px)} .block-guide-category--icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink)} .block-guide-category--icon img,.block-guide-category--icon svg{width:100%;height:100%;object-fit:contain} .block-guide-category--text{font-size:13px;font-weight:500;line-height:1.5;text-align:center;color:var(--ink)} @media (max-width:900px){.block-guide-category--list{grid-template-columns:repeat(3,1fr)}} @media (max-width:768px){ .block-guide-category--list{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:36px} .block-guide-category--link{flex-direction:row;justify-content:flex-start;text-align:left;padding:18px 16px;gap:14px} .block-guide-category--icon{width:34px;height:34px;flex:0 0 34px} .block-guide-category--text{text-align:left} } /* ============================================================================= [B] freepage（既存マークアップ）のトンマナ再スタイル ============================================================================= */ .freepage--head{display:none} /* 旧h1は block-guide-title に置換 */ .freepage--frame1000{max-width:none} .freepage--wrap{color:var(--body);font-size:16px;line-height:1.9} /* セクション大見出し h2 → 赤ドットマーカー */ .freepage--box{margin:0 0 56px;scroll-margin-top:96px} .freepage--box > h2{ display:flex;align-items:center;gap:14px;font-size:24px;font-weight:700;color:var(--ink); margin:0 0 24px;padding:0 0 18px;border-bottom:1px solid var(--line);letter-spacing:.04em;line-height:1.4; } .freepage--box > h2::before{ content:"";flex:0 0 auto;width:9px;align-self:stretch;min-height:1.4em;border-radius:1px; background-image:radial-gradient(var(--nk-red) 42%,transparent 46%); background-size:4.5px 4.5px;background-position:center; } .freepage--inner .freepage--box{margin:0 0 32px} .freepage--inner .freepage--box > h2{border-bottom:0;padding-bottom:0} /* 中見出し h3 / 小見出し h4 */ .freepage--inner h3{ font-size:18px;font-weight:700;color:var(--ink);line-height:1.6; margin:36px 0 14px;padding:0 0 0 14px;border-left:3px solid var(--nk-red);letter-spacing:.03em; } .freepage--inner h3:first-child{margin-top:0} .freepage--inner h3.text--red{color:var(--nk-red)} .freepage--inner h4{font-size:15.5px;font-weight:700;color:var(--ink);margin:24px 0 10px;line-height:1.6} .freepage--inner h4.font_normal{font-weight:500;color:var(--body);border-bottom:1px dashed var(--line-strong);padding-bottom:8px} /* 本文・テキスト装飾 */ .freepage--inner p{margin:0 0 14px;font-size:15px} .freepage--inner .ttl_{font-weight:700;color:var(--ink);margin-bottom:6px} .font_bold{font-weight:700} .text--red{color:var(--nk-red)} .text-link{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} .text-link:hover{color:var(--nk-red)} /* リスト */ .freepage--list{list-style:none;margin:0 0 18px;padding:0} .freepage--list li{position:relative;padding:0 0 0 18px;margin:0 0 8px;font-size:14.5px;line-height:1.8} .freepage--list li::before{content:"";position:absolute;left:2px;top:.85em;width:6px;height:6px;border-radius:50%;background:var(--line-strong)} .freepage--list .indent-2{padding-left:2em;text-indent:-1em} .freepage--list .indent-2::before{display:none} .freepage--list_2{border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:16px 18px;list-style:none;margin:0 0 18px;background:#fbfaf8} .freepage--list_2 li{position:relative;padding-left:16px;margin-bottom:6px;font-size:14px} .freepage--list_2 li::before{content:"";position:absolute;left:2px;top:.85em;width:5px;height:5px;border-radius:50%;background:var(--muted)} .freepage--list_2 .indent{padding-left:1em;text-indent:-1em} /* 手順フロー（画像＋テキスト） */ .guide-flow{margin:0 0 8px} .guide-flow .flow{display:flex;gap:28px;align-items:flex-start;padding:22px;margin:0 0 16px;background:var(--card);border-radius:var(--radius)} .guide-flow .flow .image{flex:0 0 300px;max-width:300px} .guide-flow .flow .image img{border-radius:var(--radius-sm);background:#fff} .guide-flow .flow .image + .image{margin-left:16px} .guide-flow .flow .text{flex:1 1 auto;min-width:0} .guide-flow .flow .text .ttl_{margin-bottom:6px} @media (max-width:768px){ .guide-flow .flow{flex-direction:column;gap:14px;padding:16px} .guide-flow .flow .image{flex:none;max-width:100%;width:100%} } /* 動画サムネイル（既存 .movie-thum の枠色をトンマナに寄せる） */ .movie-box p{font-weight:700;font-size:15px;color:var(--ink)} .movie-thum{border:1px solid var(--line) !important;border-radius:var(--radius);overflow:hidden} /* 会員特典リスト（guide-entry-list） */ .guide-entry-list{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .guide-entry-list li{background:var(--card);border-radius:var(--radius);padding:22px 20px;margin:0} .guide-entry-list .img_{width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin:0 0 14px;overflow:hidden} .guide-entry-list .img_ img{width:28px;height:28px;object-fit:contain} .guide-entry-list .name_{font-weight:700;color:var(--ink);font-size:15px;margin:0 0 8px;line-height:1.5} .guide-entry-list .text_{font-size:13.5px;color:var(--body);margin:0;line-height:1.8} @media (max-width:768px){.guide-entry-list{grid-template-columns:1fr}} /* 大型配送：対応エリアグリッド（content-list） */ .content-list{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:16px 0;padding:0;list-style:none} .content-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 12px;text-align:center;font-size:13.5px;color:var(--ink);font-weight:500} .content-item::before{display:none !important} @media (max-width:768px){.content-list{grid-template-columns:repeat(2,1fr) !important}} /* ボタン（トップ準拠の黒ピル） */ .action-buttons{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:28px 0} .btn,.link-btn03{ display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative; font-family:inherit;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer; background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:var(--pill); padding:15px 40px 15px 32px;min-width:260px;line-height:1.4;text-align:center;transition:background .2s,color .2s; } .btn::after,.link-btn03::after{ content:"";position:absolute;right:24px;top:50%;width:7px;height:7px; border-right:2px solid currentColor;border-top:2px solid currentColor;transform:translateY(-50%) rotate(45deg); } .btn:hover,.link-btn03:hover{background:#fff;color:var(--ink)} .link-btn03 span{display:block} /* 遷移リンク系（link-btn03）は白地の枠線ボタンに */ .freepage--box .link-btn03{background:#fff;color:var(--ink)} .freepage--box .link-btn03:hover{background:var(--card)} /* アコーディオン（ギフト包装：.js-acodion-ttl + .hide-block） */ .js-acodion-ttl{ cursor:pointer;position:relative;border-left:0 !important;border:1px solid var(--line) !important; border-radius:var(--radius-sm);background:var(--card);padding:16px 52px 16px 18px !important;margin:14px 0 0 !important; } .js-acodion-ttl::after{content:"";position:absolute;right:20px;top:50%;width:12px;height:2px;background:var(--ink);transition:transform .2s} .js-acodion-ttl::before{content:"";position:absolute;right:25px;top:50%;width:2px;height:12px;background:var(--ink);transform:translateY(-50%);transition:opacity .2s} .js-acodion-ttl.is-active::before{opacity:0} .js-acodion-ttl span{font-size:13px;color:var(--muted);font-weight:500} /* 締め導線（任意でトップと同様の導線を末尾に配置する場合） */ .guide-closing{border-top:1px solid var(--line);margin-top:24px;padding-top:40px;text-align:center} .guide-closing p{font-size:14px;margin:0 0 20px}