.ramen-wrap{--c-red:#c40000;--c-black:#111;--c-gray:#666;--bg:#fafafa;font-size:16px;line-height:1.7} .ramen-container{max-width:1080px;margin:0 auto;padding:0 16px} .ramen-sec{padding:48px 0} .ramen-sec.alt{background:var(--bg)} .ramen-h2{font-size:1.6rem;margin:0 0 12px} .ramen-lead{color:var(--c-gray);margin:0 0 20px} .ramen-grid{display:grid;gap:18px} @media(min-width:980px){.ramen-grid{grid-template-columns:1.1fr .9fr}} .ramen-card{background:#fff;border:1px solid #eee;border-radius:14px;padding:18px;box-shadow:0 8px 22px rgba(0,0,0,.05)} .ramen-badges{margin:6px 0 0} .ramen-badge{display:inline-block;background:#fff3f3;border:1px solid #ffd7d7;color:#b00000;border-radius:999px;padding:4px 10px;margin:0 6px 6px 0;font-size:.9rem;font-weight:700} .ramen-gallery{display:grid;gap:12px;margin-top:12px} @media(min-width:720px){.ramen-gallery{grid-template-columns:1fr 1fr}} .ramen-ph{position:relative;padding-bottom:66%;border-radius:12px;overflow:hidden;background:#000} .ramen-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ramen-ph figcaption{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:8px;background:rgba(0,0,0,.55);color:#fff;font-size:.85rem} .ramen-menugrid{display:grid;gap:12px;margin-top:10px} @media(min-width:700px){.ramen-menugrid{grid-template-columns:1fr 1fr}} .ramen-item{background:#fff;border:1px solid #eee;border-radius:12px;padding:12px} .ramen-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px} .ramen-btn{display:inline-block;padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none} .ramen-btn-red{background:var(--c-red);color:#fff} .ramen-btn-gray{background:#222;color:#fff} .ramen-note{color:#777;font-size:.92rem} /* =============================== がってんラーメン：メニューページ ・ヒーローは動画背景（自動再生/ミュート/ループ/モバイル対応） ・セクションごとにアンカーリンク（タブ風ナビ） ・カードグリッドはレスポンシブ（3→2→1列） ・アクセシビリティ配慮：alt、aria、prefers-reduced-motion、scroll-margin ・運用メモ：画像/動画URLはWordPressメディアのパスに差し替え可 =============================== */ /*======== がってんラーメン：メニューページ（動画ヒーロー＆整形済み） ======== */ /* ========================================================= カラートークンとベース設定 - 全体の色や文字サイズ、行間などの初期設定 - :root ではなく .gm-wrap に束ねて、他ページとクラス分離 ========================================================= */ .gm-wrap{ --accent:#c40000; /* コーポレート赤（アクセントカラー） */ --ink:#111; /* 文字色の基本 */ --muted:#666; /* 補助テキスト用 */ --chip:#f9f9f9; /* バッジ/タグの下地などに使用想定 */ --edge:#eee; /* 枠線・区切り線 */ font-size:16px; line-height:1.8; } .gm-container{ max-width:1080px; margin:0 auto; padding:0 16px } /* ================= ヒーロー（動画背景） ================= - 背景に