/* ALT サイト共通: レスポンシブ / モバイル対応 既存レイアウトはインラインスタイル中心のため、上書きには !important を使用しています。 開閉状態は で表現します（mobile-nav.js が付与）。 */ /* ハンバーガーボタンはデスクトップでは非表示 */ [data-nav-toggle]{ display:none; } /* ===== タブレット（〜900px）: 多カラムを2カラムへ ===== */ @media (max-width: 900px){ [data-r-col="3"]{ grid-template-columns:1fr 1fr !important; } [data-r-col="4"]{ grid-template-columns:1fr 1fr !important; } } /* ===== モバイル（〜768px）===== */ @media (max-width: 768px){ /* 外側の左右余白を圧縮 */ [data-alt-root] section{ padding-left:20px !important; padding-right:20px !important; } [data-alt-root] header > div{ padding-left:20px !important; padding-right:20px !important; } [data-alt-root] footer{ padding-left:22px !important; padding-right:22px !important; } /* カード等の内側余白を圧縮 */ [data-r-pad]{ padding-left:24px !important; padding-right:24px !important; } /* ハンバーガーボタン表示 */ [data-nav-toggle]{ display:flex !important; position:fixed; top:15px; right:16px; z-index:70; width:46px; height:46px; align-items:center; justify-content:center; background:#ffffff; border:1px solid rgba(20,24,31,.08); border-radius:50%; box-shadow:0 6px 20px -8px rgba(20,24,31,.4); cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; } [data-nav-toggle] span{ position:absolute; width:20px; height:2px; background:#14181f; border-radius:2px; transition:transform .3s ease, opacity .2s ease, background .2s ease; } [data-nav-toggle] span:nth-child(1){ transform:translateY(-6px); } [data-nav-toggle] span:nth-child(3){ transform:translateY(6px); } /* 開いているとき: ボタンを×印に */ html.alt-nav-open [data-nav-toggle]{ background:transparent; border-color:transparent; box-shadow:none; } html.alt-nav-open [data-nav-toggle] span{ background:#ffffff; } html.alt-nav-open [data-nav-toggle] span:nth-child(1){ transform:rotate(45deg); } html.alt-nav-open [data-nav-toggle] span:nth-child(2){ opacity:0; } html.alt-nav-open [data-nav-toggle] span:nth-child(3){ transform:rotate(-45deg); } /* ヘッダーナビをフルスクリーンのオーバーレイに */ [data-nav]{ position:fixed !important; inset:0 !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:8px !important; background:rgba(10,13,20,.98) !important; transform:translateX(100%); transition:transform .35s cubic-bezier(.22,.61,.36,1); z-index:60; } html.alt-nav-open [data-nav]{ transform:none !important; } [data-nav] a{ color:#ffffff !important; opacity:1 !important; font-size:20px !important; font-weight:700 !important; padding:16px 24px !important; border-radius:12px !important; } } /* ===== スマホ（〜600px）: 全カラムを1カラムへ ===== */ @media (max-width: 600px){ [data-r-col]{ grid-template-columns:1fr !important; } }