@charset "utf-8"; @import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap"); /* ========================================================================== ちたまるNavi 予約ページ 専用CSS -------------------------------------------------------------------------- ■ 大原則 ・このファイルのスタイルは すべて #reservation 配下のみに効かせる。 （他ページのCSSと絶対に干渉させないため） ○ #reservation .foo { ... } ○ #reservation > .bar + .baz { ... } × .foo { ... } ← 禁止（サイト全体に漏れる） × #reservation, .foo { ... } ← 禁止（カンマ区切りで外に漏れる） ・文字サイズ・フォント・基本色などサイトデザインの基本スタイルは 共通CSS（style.css / style2022.css）をそのまま活かす。 ここでは「このページ固有の見た目」だけを追加する。 ■ 役割分担（重要） ・レイアウト（段組・並び・余白の骨格）は **UIkit のクラスで組む**。 uk-container / uk-grid / uk-child-width-1-4@m / uk-width-*@m / uk-flex / uk-margin-* など → HTML側にクラスを書く。本ファイルで float や flex を再発明しない。 ・色・装飾（背景色、罫線、角丸、影、アイコン、ホバー表現、 フォントの色/太さなど）は **本ファイルに書く**。 ・UIkitに無い数値（デザイン固有のガター幅など）だけ、 UIkitクラスに対する上書きとして本ファイルで調整する。 例）#reservation .uk-grid { margin-left: -31px; } #reservation .uk-grid > * { padding-left: 31px; } ・読み込み順は 共通CSS → 本ファイル。詳細度も #id 付きで高いため !important は原則不要（例外は下記「注意点」4 の h1 のみ）。 ■ 読み込み （index.html の 内、style2022.css の後） ■ ブレークポイント サイト側のJSが読み込み時の screen.width を見て viewport を出し分ける。 PC : width=1400 固定 → 1400px幅前提の固定レイアウトで書く SP : width=device-width → @media screen and (max-width:767px) で上書き ※ 共通CSSには 959px / 1200px / 1250px 等の @media が大量に残っているが、 PC側 viewport が 1400 に固定される以上それらは常に同じ判定になるため 実質「死んだブレークポイント」。767px（必要なら640px）だけ意識すればよい。 ■ 横幅（実測値） #reservation および親の .contents.page は **幅もpaddingも一切持っていない**（＝画面幅いっぱいに広がる）。 サイト標準の段組に揃えるには下記いずれか。 (a) #reservation の中で
を使う (b) 本ファイルの .rsv-container を使う（(a)と同じ寸法） いずれも コンテンツ幅 1180px ＋ 左右padding 25px ＝ 要素幅 1230px（中央寄せ） SPでは 左右padding 10px・box-sizing:border-box。 ■ 共通CSSとの衝突・注意点（実際のコードで確認済み） 1. body img { width:100% } … style.css:46 → #reservation 内の も自動で親幅いっぱいに伸びる。 サイズを固定したい画像は親の幅を決めるか width を明示上書きする。 2. img { pointer-events:none } … style2022.css:21 a > img { pointer-events:auto } … style2022.css:24 → で包んでいない はクリック/ホバーを受け付けない。 画像にJSでクリック処理を付けるなら で囲うか下記で上書きする。 3. box-sizing:border-box はグローバル未設定 → 本ファイル冒頭で #reservation 配下にのみリセット済み。 4. h1 { font-size:2em !important } … style.css:124 → h1 のサイズ変更だけは #reservation h1{ font-size:XXpx !important } が必要。 （そもそも h1 はページ見出しで1回のみ使う想定） 5. a { color:#464646; word-break:break-all } … style.css:237 → 無地リンクは本文と同じグレー。長い英字は途中で強制改行される。 6. CSS変数（--*）は共通CSS側に一切ない。 本ファイルでは衝突回避のため --rsv- 接頭辞で独自定義する。 7. 流用できる共通パーツで「祖先条件なしにそのまま使えるもの」は実質 .viewbtn … 白地/黒枠/角丸25pxのピル型ボタン（hoverでオレンジ反転） .viewbtn.orange で最初からオレンジ地 .honbunblock … 本文用ブロック（line-height:2em / color:#222） の2つ。見出し(h2)やセクション囲み(.cntsblock)はページ種別ごとの 専用実装なので #reservation では流用せず自前で書く。 8. パンくず（.page .breadcrumb）は SP（～767px）では display:none。 ========================================================================== */ /* ========================================================================== 0. スコープ内リセット / トークン ========================================================================== */ #reservation, #report-detail, #top, #reservation *, #reservation *::before, #reservation *::after { box-sizing: border-box; } #reservation #closeup .swiper-button-next, #reservation .pagenation a { box-sizing: initial; } /* 例外は .uk-container だけ。 UIkit 3.6.19 は * へのグローバル指定を持たず、box-sizing を個別に振っている。 [class*=uk-width] → border-box [class*=uk-child-width]>* → border-box .uk-container → content-box ← ここだけ逆 上のリセット(#reservation *)は詳細度(1,0,0)でUIkitの(0,1,0)に勝ってしまうため、 .uk-container だけUIkit本来の content-box に戻す。 （content-box のとき 内容1180px + padding25px×2 = 要素1230px。 border-box にすると内容が1130pxに縮み、他ページと横幅が揃わなくなる） ※ uk-width / uk-child-width は UIkit も border-box なので、上のリセットのままで正しい。 ここで [class*="uk-"] を一括で content-box に戻すとグリッドが破綻するので絶対にやらない。 */ #reservation .uk-container { box-sizing: content-box; } #reservation , #report-detail , #top { /* --- サイト共通カラー（共通CSSから抽出） --- */ --rsv-orange: #ff6200; /* ブランドカラー */ --rsv-orange-light: #ff8c43; /* 明るいオレンジ（差し色/hover） */ --rsv-brown: #7b6049; /* サブカラー（タグ・パンくず文字） */ --rsv-text: #464646; /* 基本文字色 */ --rsv-text-sub: #707070; /* 補助文字・罫線 */ --rsv-line: #d9d9d9; /* 薄い罫線 */ --rsv-bg-cream: #fff9f5; /* オフホワイト背景 */ --rsv-bg-beige: #f6f0e9; /* ベージュ背景 */ /* --- このページ固有の色（Figmaから抽出。PDFはカラープロファイルでズレるため不採用） --- */ --rsv-panel-bg: #f7f1e7; /* 検索パネル背景 */ --rsv-pill-bg: #af5714; /* 「エリアで選択」等のピルラベル */ --rsv-card-border: #bab6b6; /* カード枠 */ --rsv-foot-bg: #fce5d6; /* カード下部 予約ボタン帯 */ --rsv-ph: #ffffff; /* カテゴリアイコンのプレースホルダ */ --rsv-detail-rule: #bcbcbc; /* 詳細ページ 予約ボタンの上下罫線 */ /* --- 地図の3状態 --- */ --rsv-map-base: #fbb03b; /* 通常 */ --rsv-map-hover: #ff6200; /* 単体ホバー（サイトのブランドカラーと同一） */ --rsv-map-group: #ff6200; /* 北部/南部のグループホバー（#f7931eから濃いオレンジに変更） */ --rsv-map-region-bg: #ffffff; /* 北部/南部ラベルの地 */ --rsv-map-region-bg-on: #fee7c4; /* 同 ホバー時 */ /* --- レイアウト --- */ --rsv-container: 1180px; /* コンテンツ幅（uk-container と同値） */ --rsv-gutter: 25px; /* PC左右padding */ --rsv-gutter-sp: 10px; /* SP左右padding */ --rsv-card-gutter: 31px; /* カード一覧のガター（UIkit既定40pxをデザイン値に上書き） */ } /* ========================================================================== 1. 共通コンテナ サイト標準の uk-container と同じ寸法。
で使う（uk-container を直接使ってもよい） ========================================================================== */ #reservation .rsv-container { max-width: calc(var(--rsv-container) + var(--rsv-gutter) * 2); margin: 0 auto; padding: 0 var(--rsv-gutter); } /*-- 半透明オーバーレイ＋スピナー --*/ /* body > * { opacity: 1; } body.is-loading-anim-in > *:not(.loading-wrap) { opacity: 0; } .loading-wrap { position: fixed; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; background: #ACACAC; z-index: 9999; } .loading-wrap.is-visible { opacity: 1; visibility: visible; } .loading-spinner { width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } */ /*-- フローティングボタン（ページ上部＝検索条件へ戻るボタン） --*/ #reservation .rsv-filter-float { position: fixed; bottom: 24px; right: 16px; left: auto; transform: none; z-index: 100; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } #reservation .rsv-filter-float.is-visible { opacity: 1; visibility: visible; } #reservation .rsv-filter-float a { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--rsv-pill-bg); border-radius: 10px; width: 60px; height: 60px; padding: 8px 6px; overflow: visible; transition: background 0.2s ease, box-shadow 0.2s ease; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.25); } #reservation .rsv-filter-float a::before { content: ''; flex-shrink: 0; width: 10px; height: 10px; border-top: 2.5px solid #fff; border-right: 2.5px solid #fff; transform: rotate(-45deg); background: none; margin-bottom: 6px; } #reservation .rsv-filter-float__label { color: #fff; font-size: 10px; font-weight: bold; line-height: 1.3; text-align: center; padding: 0; opacity: 1; } @media (hover: hover) { #reservation .rsv-filter-float a:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.4); transform: scale(1.05); } } /* ========================================================================== 2. キービジュアル（検索パネル） ※v2デザインで全面的に変更 -------------------------------------------------------------------------- v1 → v2 の変更点 ・パネル背景が 1180px の角丸ボックス → **画面幅いっぱい（フルブリード）** ・見出しが左カラム内 420×51 → **2カラムの上に中央寄せ 698×83** ・カテゴリが素のグレー四角 → **白い角丸カード**の中にアイコンとラベル ・地図はサイズ据え置き(500×638)で位置のみ移動 デザイン実測（1440幅キャンバス / パネル上端 y160 を 0 とした値） 見出し +50 698×83 中央 ピル1 +200 36高 説明文 +265 1行 ピル2 +384 36高 カテゴリ +445 100×109 × 4列2行（列間25 / 行間31） 地図 +199 500×638 右寄せ パネル高 887 ========================================================================== */ #reservation .rsv-search { /* フルブリード：#reservation は幅を持たないので、そのまま画面幅いっぱいになる */ background: var(--rsv-panel-bg); padding-top: 30px; padding-bottom: 40px; } #reservation .rsv-search .rsv-label , #reservation .rsv-search .rsv-cat__name , #reservation .rsv-search .rsv-map { font-family: fot-tsukuardgothic-std, "Zen Maru Gothic", serif; } #reservation .rsv-search__inner { max-width: 1120px; /* デザイン：1440 − 左右160 */ margin: 0 auto; /*padding: 0 20px;*/ } /* --- 見出し（画像） --- 共通CSSの body img{width:100%} で伸びてしまうため実寸を明示する。 h1 の font-size:2em !important は中身が画像なので影響なし。 */ #reservation .rsv-search__ttl { margin: 0 0 50px; text-align: center; line-height: 1; } #reservation .rsv-search__ttl img { display: block; /* inline のままだとベースライン分2pxの余白が出る */ width: 550px; max-width: 100%; height: auto; /* margin: 0 auto; */ } /* --- 「エリアで選択」「カテゴリーから探す」のピルラベル --- */ #reservation .rsv-label { display: inline-block; margin: 0; padding: 10px 20px; border-radius: 999px; background: var(--rsv-pill-bg); color: #fff; font-size: 16px; font-weight: 700; line-height: 1; } #reservation .rsv-label-cat-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 40px; /* 説明文の下端から */ } #reservation .rsv-label-cat-header .rsv-label--2nd { margin-top: 0; } #reservation .rsv-search__lead { /* margin: 20px 0 0 20px;*/ margin: 20px; font-size: 16px; line-height: 1; } /* --- カテゴリー（白い角丸カード） --- */ #reservation .rsv-cat { /* 内容の左端を inner+20px に合わせる（uk-grid の負マージン25pxを相殺） */ margin: 15px 0 0 -5px; max-width: 610px; list-style: none; } #reservation .rsv-cat > * { padding-left: 15px; /* デザインの列間 */ margin-top: 0; } /* 行間はJS非依存にするため nth-child で取る。 UIkitのJSが付ける .uk-grid-margin（既定30px）は二重adding防止のため打ち消す。 */ #reservation .rsv-cat > .uk-grid-margin { margin-top: 0; } #reservation .rsv-cat > *:nth-child(n+6) { margin-top: 15px; /* デザインの行間 */ } #reservation .rsv-cat__item { display: block; height: 109px; /* アイコン上の10pxは padding で確保する。 ico 側に margin-top を持たせると、li が flex アイテムで マージン相殺が外に抜けて li だけ10px高くなり、行間がずれる。 */ padding-top: 10px; background: var(--rsv-ph); border-radius: 8px; text-align: center; text-decoration: none; } @media screen and (max-width: 767px) { #reservation .rsv-cat__item { height: 100%; padding-bottom: 4px; } } #reservation .rsv-cat__ico { display: block; /* width: 65px; */ max-width: 90%; /* height: 65px; */ margin: 0 auto; background: var(--rsv-ph); position: relative; } #reservation .rsv-cat__ico img { width: 100%; height: 100%; object-fit: contain; } #reservation .rsv-cat__name { display: block; margin-top: 11px; font-size: 12px; line-height: 1; color: #000; /*white-space: nowrap;*/ } #reservation .rsv-cat__name { position: absolute; bottom: 0; left: 0; right: 0; margin-top: 0; padding: 8px 2px; } /* --- カテゴリーアイコン：ホバー／選択中 --- */ #reservation .rsv-cat__item { cursor: pointer; transition: background .2s ease, outline-color .2s ease; position: relative } @media (hover: hover) { #reservation .rsv-cat__item:hover { /* background: var(--rsv-bg-cream); */ outline: 2px solid var(--rsv-orange); outline-offset: -2px; } } #reservation .rsv-cat__item:focus-visible, #reservation .rsv-cat__item.is-selected { /* background: var(--rsv-bg-cream); */ outline: 2px solid var(--rsv-orange); outline-offset: -2px; z-index: 1; } #reservation .rsv-cat__item.is-selected .rsv-cat__name { color: var(--rsv-orange); font-weight: 700; white-space: nowrap; } /* チェックボックス風（未選択時も常時表示） */ #reservation .rsv-cat__item::after { content: ''; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; background: #fff; border: 2px solid #ccc; border-radius: 3px; box-sizing: border-box; display: block; text-align: center; line-height: 14px; font-size: 13px; font-weight: bold; color: #fff; } /* 選択時：チェックマーク表示 */ #reservation .rsv-cat__item.is-selected::after { content: '✓'; background: #af5714; border-color: #af5714; } /* --- カテゴリー選択/解除ボタン --- */ #reservation .rsv-genre-btns { display: flex; gap: 5px; align-items: center; } #reservation .rsv-genre-all { padding: 6px 16px; border: 1px solid var(--rsv-orange); border-radius: 50px; background: var(--rsv-orange); color: #fff; font-size: 13px; cursor: pointer; transition: background 0.2s, border-color 0.2s; } #reservation .rsv-genre-all:hover { background: var(--rsv-orange-light); border-color: var(--rsv-orange-light); } #reservation .rsv-genre-clear { display: none; padding: 6px 16px; border: 1px solid var(--rsv-pill-bg); border-radius: 50px; background: transparent; color: var(--rsv-pill-bg); font-size: 13px; cursor: pointer; transition: background 0.2s, color 0.2s; } #reservation .rsv-genre-clear.is-visible { display: inline-block; } @media screen and (max-width: 767px) { #reservation .rsv-label-cat-header { flex-direction: column; align-items: stretch; flex-wrap: nowrap; /* PC の flex-wrap: wrap を打ち消す */ gap: 10px; } /* ラベル(rsv-label)のSP order:1 をラッパー内でリセットしてラベルを先頭に固定 */ #reservation .rsv-label-cat-header .rsv-label--2nd { order: 0; } #reservation .rsv-label-cat-header .rsv-genre-btns { order: 1; margin-top: 10px; } /* 「すべて解除」は display:none でなく visibility:hidden に切り替え → 常にレイアウト上に存在するのでボタンの有無でサイズが変わらない */ #reservation .rsv-genre-clear { display: block; visibility: hidden; pointer-events: none; } #reservation .rsv-genre-clear.is-visible { display: block; visibility: visible; pointer-events: auto; } /* flex:1 で2ボタンが均等に50%ずつ */ #reservation .rsv-genre-all, #reservation .rsv-genre-clear { flex: 1; text-align: center; } } /* --- スクロール誘導（SP のみ：エリア選択後→カテゴリへ誘導） --- */ @keyframes rsvBounce { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(45deg) translate(3px, 3px); } } @keyframes rsvPulseRing { 0% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 0px rgba(200, 96, 42, 0.5); } 70% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 14px rgba(200, 96, 42, 0); } 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 0px rgba(200, 96, 42, 0); } } #reservation .rsv-scroll-guide { display: none; } @media screen and (max-width: 767px) { #reservation .rsv-scroll-guide { display: flex; flex-direction: column; align-items: center; gap: 6px; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 99; padding: 12px 24px; border: 2px solid var(--rsv-pill-bg); background: var(--rsv-pill-bg); box-shadow: 0 4px 16px rgba(0,0,0,0.3); border-radius: 24px; cursor: pointer; white-space: nowrap; opacity: 1; visibility: visible; transition: opacity 0.3s, visibility 0.3s; animation: rsvPulseRing 1.8s ease-out infinite; } #reservation .rsv-scroll-guide.is-hidden { opacity: 0; visibility: hidden; } #reservation .rsv-scroll-guide__arrow { width: 14px; height: 14px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(45deg); animation: rsvBounce 1.2s ease-in-out infinite; } #reservation .rsv-scroll-guide__label { font-size: 13px; color: #fff; font-weight: bold; line-height: 1; } } /* --- 検索ボタン --- */ #reservation .rsv-search-btn-wrap { text-align: right; margin-top: 30px; max-width: 640px; } #reservation .rsv-search-btn { padding: 12px 40px; border: none; border-radius: 50px; background: #ff6200; color: #fff; font-size: 15px; font-weight: bold; cursor: pointer; transition: background 0.2s; } #reservation .rsv-search-btn::before { content: ''; display: inline-block; width: 16px; height: 16px; background: url('/assets/img/common/ico_search_white.svg') no-repeat center / contain; margin-right: 8px; vertical-align: middle; } #reservation .rsv-search-btn:hover { background: #d95000; } @media screen and (max-width: 767px) { #reservation .rsv-search-btn-wrap { margin-left: 0; text-align: center; margin-right: 0px; } #reservation .rsv-search-btn { width: 100%; } } #reservation .rsv-cat__item, #reservation .rsv-map__area, #reservation .rsv-map__region { touch-action: manipulation; } /* --- 地図（デザイン500px → PCで縦が収まらないため370pxに縮小。768pxまでは比率を保って縮める） --- ※UIkitの @m は960pxで、こちらのSP切替は767px。その間(768〜959px)で UIkitの列指定だけが外れて崩れるため、HTML側は @m ではなく @s(640px) を使い、 幅は固定値ではなく上限%を併用して 768px まで滑らかに縮むようにしている。 */ #reservation .rsv-search__col--map { /* 地図(.rsv-map)の max-width と必ず同じ値にすること。 ここだけ大きいと、右寄せの地図との間に左側の余白が空いてしまう。 */ width: 510px; max-width: 46.5%; padding-left: 50px; } #reservation .rsv-map { position: relative; /* イラストの配置基準 */ width: 100%; max-width: 350px; margin-left: 10%; } /* ========================================================================== 2-2. 地図まわりのイラスト6点 ★あとから差し替え・移動できる作り -------------------------------------------------------------------------- ■ 画像を変えたいとき assets/img/reservation/map_deco_〇〇.png を差し替えるだけ（HTML修正不要） 別ファイル名にする場合は index.html の src を変更 ■ 位置・大きさを変えたいとき 下の .rsv-map__deco--〇〇 の left / top / width を変えるだけ すべて地図(.rsv-map)に対する％なので、画面幅が変わっても比率を保つ PCとSPで別々の値を持たせてある（SPは 99章を参照） ■ 値の由来：PC=Figma実測 / SP=マップ検索_SP.pdf 実測 ========================================================================== */ #reservation .rsv-map__deco { position: absolute; height: auto; pointer-events: none; /* 地図のタップ/ホバーを邪魔しない */ user-select: none; } /* top の値は SVG側の地図本体 translate(0,28) に合わせて一律 +4pt（28 ÷ 688 ≒ 4.07%）している */ #reservation .rsv-map__deco--kayak { left: 0%; top: 20%; width: 19%; } /* カヤック */ #reservation .rsv-map__deco--bbq { left: 20%; top: 82%; width: 20%; } /* BBQ */ #reservation .rsv-map__deco--airplane { left: 6%; top: 52%; width: 19%; } /* セントレア */ #reservation .rsv-map__deco--grape { left: 79%; top: 17%; width: 22%; } /* ぶどう */ #reservation .rsv-map__deco--fishing { left: 79%; top: 59%; width: 22%; } /* 釣り */ #reservation .rsv-map__deco--strawberry { left: 75%; top: 40%; width: 22%; } /* いちご */ #reservation .rsv-map__deco--wave1 { left: 0%; top: 37%; width: 20%; } /* 波1 */ #reservation .rsv-map__deco--wave2 { left: 58%; top: 68%; width: 18%; } /* 波2 */ #reservation .rsv-map__deco--wave3 { left: 0%; top: 78%; width: 22%; } /* 波3 */ #reservation .rsv-map__deco--wave4 { left: 50%; top: 94%; width: 20%; } /* 波4 */ #reservation .rsv-map__svg { display: block; width: 100%; height: auto; } /* SPでタップしたときに選択がハイライトされるのでタップ領域を分かりやすく */ #reservation .rsv-map__area, #reservation .rsv-map__region { -webkit-tap-highlight-color: transparent; } /* 各エリア（市町） */ #reservation .rsv-map__area { cursor: pointer; } #reservation .rsv-map__shape { fill: var(--rsv-map-base); stroke: #fff; stroke-width: 2.5; transition: fill .3s ease; /* SPタップ時の変色もこの値 */ } #reservation .rsv-map__label { fill: #000; pointer-events: none; /* ラベル文字はホバー判定に影響させない */ } /* 未選択エリア：グレー → 黄色（ベース色を維持） */ #reservation .rsv-map__area.is-dimmed .rsv-map__shape { fill: var(--rsv-map-base); } /* ベース画像から切り抜いて重ねたラベル（南知多町） */ #reservation .rsv-map__label-img { pointer-events: none; } /* ① 単体ホバー（PC）／ 単体タップ選択（SP） */ @media (hover: hover) { #reservation .rsv-map__area:hover .rsv-map__shape { fill: var(--rsv-map-hover); } } #reservation .rsv-map__area:focus-visible .rsv-map__shape, #reservation .rsv-map__area.is-selected .rsv-map__shape { fill: var(--rsv-map-hover); } /* クリックで選択解除した直後、カーソルがまだエリア上に残っている間は ホバー判定を一時的に無効化する（JS: fncSrchArea が付与、mouseleaveで解除）。 色の定義自体は変更せず、選択もホバーもしていない通常時の色（--rsv-map-base）をそのまま使う。 ※:hover と同じ詳細度のため、CSSの記述順で必ずこちらを後に置くこと。 */ #reservation .rsv-map__area.rsv-map__area--hover-hold .rsv-map__shape { fill: var(--rsv-map-base); } /* 北部/南部ラベル */ #reservation .rsv-map__region { cursor: pointer; } #reservation .rsv-map__region-box { fill: var(--rsv-map-region-bg); stroke: var(--rsv-orange); stroke-width: 1.5; transition: fill .3s ease; } #reservation .rsv-map__region-txt { fill: var(--rsv-orange); font-size: 20px; font-weight: 700; letter-spacing: .15em; text-anchor: middle; dominant-baseline: central; pointer-events: none; } @media (hover: hover) { #reservation .rsv-map__region:hover .rsv-map__region-box { fill: var(--rsv-map-region-bg-on); } } #reservation .rsv-map__region:focus-visible .rsv-map__region-box, #reservation .rsv-map__region.is-selected .rsv-map__region-box { fill: var(--rsv-map-region-bg-on); } /* クリックで選択解除した直後、カーソルがまだラベル上に残っている間は ホバー判定を一時的に無効化する（JS: fncSrchArea が付与、mouseleaveで解除）。 個別エリアの .rsv-map__area--hover-hold と同じ考え方。 ※:hover と同じ詳細度のため、CSSの記述順で必ずこちらを後に置くこと。 */ #reservation .rsv-map__region.rsv-map__region--hover-hold .rsv-map__region-box { fill: var(--rsv-map-region-bg); } /* ② グループホバー 北部/南部ラベルは SVG内でエリアより前に置いてあるので、 一般兄弟結合子( ~ )だけで連動できる（JS不要） ※「知多半島全域」ラベルだけは .rsv-map__body（地図を下げるための g）の外にあり エリアと兄弟にならないため、兄弟の子孫を辿る形で書く */ @media (hover: hover) { #reservation .rsv-map__region[data-group="all"]:hover ~ .rsv-map__body .rsv-map__area .rsv-map__shape, #reservation .rsv-map__region[data-group="north"]:hover ~ .rsv-map__area[data-group="north"] .rsv-map__shape, #reservation .rsv-map__region[data-group="south"]:hover ~ .rsv-map__area[data-group="south"] .rsv-map__shape { fill: var(--rsv-map-group); } } #reservation .rsv-map__region[data-group="all"]:focus-visible ~ .rsv-map__body .rsv-map__area .rsv-map__shape, #reservation .rsv-map__region[data-group="north"]:focus-visible ~ .rsv-map__area[data-group="north"] .rsv-map__shape, #reservation .rsv-map__region[data-group="south"]:focus-visible ~ .rsv-map__area[data-group="south"] .rsv-map__shape, /* SPタップ：JSが .is-group-selected を付ける */ #reservation .rsv-map__area.is-group-selected .rsv-map__shape { fill: var(--rsv-map-group); } /* 北部/南部/知多半島全域を解除した直後、カーソルがまだラベル上に残っている間は 連動して光っていた市町側もホバー判定を一時的に無効化する（JS: fncSrchArea が付与）。 .rsv-map__area--hover-hold 単体（詳細度3）だと、上の「② グループホバー」（詳細度6）に 負けて上書きできないため、同じセレクタ構造に .rsv-map__area--hover-hold を足して 詳細度で確実に上回るようにしている（!important は使わない）。 */ @media (hover: hover) { #reservation .rsv-map__region[data-group="all"]:hover ~ .rsv-map__body .rsv-map__area.rsv-map__area--hover-hold .rsv-map__shape, #reservation .rsv-map__region[data-group="north"]:hover ~ .rsv-map__area[data-group="north"].rsv-map__area--hover-hold .rsv-map__shape, #reservation .rsv-map__region[data-group="south"]:hover ~ .rsv-map__area[data-group="south"].rsv-map__area--hover-hold .rsv-map__shape { fill: var(--rsv-map-base); } } /* ========================================================================== 3. セクション見出し（「おすすめの体験」「おすすめ記事一覧」） 修正版デザイン v2 で追加。左寄せ＋右上にオレンジの装飾マーク。 サイト共通の h2（英字＋日本語の2段・中央寄せ）とは別物なので自前で実装する。 ========================================================================== */ #reservation .rsv-ttl { display: inline-block; position: relative; margin: 0; padding-right: 28px; /* 装飾マーク分（テキスト右端から8px + マーク20px） */ font-family: fot-tsukuardgothic-std, "Zen Maru Gothic", sans-serif; font-size: 26px; /* 実測 25.6px/字 */ font-weight: 700; line-height: 1; letter-spacing: 0; color: var(--rsv-brown); /* #7b6049 */ } #reservation .rsv-ttl::after { content: ""; position: absolute; right: 0; top: -14px; /* 実測：文字上端より14px上 */ width: 20px; height: 25px; background: url(/assets/img/reservation/ico_ttl_mark.svg) no-repeat center / contain; } /* --- 見出し＋該当件数（体験施設一覧） PHPの出力順（見出し→一覧ループ→件数）を変えずに、 CSS Grid の grid-area で見出しの横に件数を配置する。 --- */ #reservation #rsv-taiken .top-cnts__inner { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "heading count" "list list"; align-items: baseline; column-gap: 12px; } #reservation #rsv-taiken .top-cnts__inner > .rsv-ttl { grid-area: heading; } #reservation #rsv-taiken .top-cnts__inner > .newpost__list { grid-area: list; } #reservation #rsv-taiken .rsv-result-count { grid-area: count; margin: 0; padding-left: 10px; font-size: 20px; font-weight: 700; color: var(--rsv-text-sub); } /* ========================================================================== 3-2. カード（おすすめの体験 / 2カラムカード） -------------------------------------------------------------------------- ★サイト既存のカードパーツ .list__cnts をそのまま使う。 マークアップはCMSが出力する /parts/index/xxx/list.html と同一。 ページラッパーに id="top" が付いているので、 .list__cnts の基本スタイル（画像・タグ・タイトル・本文）は既存CSSが効く。 ここに書くのは「今回のデザインで増えた分」だけ： ① カード枠 … 既存は #top #newpost 限定なので、別セクションにも同じ値を当てる ② クーポン帯 … .rsv-coupon（新規） ③ 予約ボタン … .rsv-reserve / .rsv-btn-reserve（新規） ④ 本文サイズ … 既存は style2022.css の 11px !important。デザインは14px ⑤ 横並び（2カラムカード）… .rsv-yoko を足すだけで横型になる ========================================================================== */ /* ① カード枠：既存 #top #newpost .list__cnts__inner と同じ値 */ #reservation #rsv-taiken .list__cnts__inner , #top #newpost .list__cnts__inner { display: flex; flex-direction: column; height: 100%; padding: 10px; border: 1px solid var(--rsv-card-border); background: #fff; box-sizing: border-box; } #reservation #rsv-taiken .text, #reservation #rsv-yoko .text , #top #newpost .text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } /* ② クーポン帯（画像の下端に重ねる。クーポンがある場合のみ出力する想定） */ #reservation .list__cnts .img { position: relative; } #reservation .rsv-coupon { position: absolute; left: 0; right: 0; bottom: 0; height: 20.1%; display: flex; align-items: center; justify-content: center; background: var(--rsv-orange); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; z-index: 1; } /* ③ 予約ボタン。カードの下端に寄せ、カードのpaddingを打ち消して全幅の帯にする */ .rsv-reserve { margin: auto -10px -10px; padding: 7px 15px; background: var(--rsv-foot-bg); box-shadow: inset 0 2px 2px rgba(0, 0, 0, .15); } .rsv-reserve .rsv-btn-reserve { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 20px; border: 1px solid var(--rsv-orange); border-radius: 5px; background: #fff; box-shadow: 0 3px 1.5px rgba(0, 0, 0, .15); color: var(--rsv-orange); font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; } /* 共通CSSの body img{width:100%} に負けないよう実寸を明示 */ .rsv-reserve .rsv-btn-reserve__ico { width: 16px; height: 16px; flex: 0 0 16px; } .rsv-btn-reserve:hover { background: var(--rsv-orange); color: #fff; } .rsv-btn-reserve:hover .rsv-btn-reserve__ico { filter: brightness(0) invert(1); } /* 予約ボタンアイコン */ .rsv-reserve .rsv-btn-reserve::before { content: ''; display: inline-block; width: 16px; height: 16px; background-image: url('/assets/img/reservation/ico_calendar.svg'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; margin-right: 4px; /* spanとの間隔 */ } .rsv-btn-reserve:hover::before { filter: brightness(0) invert(1); } /* 空の .place が19px分の隙間を作るので消す。 （.about / .cap は既存CSSが空のとき display:none にしてくれるが .place だけ残る） ※ .title の min-height:4.2em（3行分を確保）は既存カードの仕様なのでそのまま。 実データのタイトルは2〜3行になるため、カードの高さが揃う。 */ #reservation .list__cnts .text .place:empty { display: none; } /* ④ 本文（.honbun）。既存は style2022.css で 11px !important のためデザイン値に上書き */ #reservation #rsv-taiken .text .honbun, #reservation #rsv-yoko .text .honbun { margin-top: 10px !important; font-size: 14px !important; line-height: 1.35 !important; } /* --- セクションの余白 --- */ #reservation #rsv-taiken, #reservation #rsv-yoko, #reservation #newpost { padding: 80px 0 80px 0; } #reservation #rsv-taiken .rsv-ttl, #reservation #rsv-yoko .rsv-ttl, #reservation #newpost .rsv-ttl { margin-bottom: 52px; } /* デザインのガターは31px（UIkit既定40pxを上書き） */ #reservation #rsv-taiken .newpost__list > div[uk-grid] { margin-left: calc(var(--rsv-card-gutter) * -1); } #reservation #rsv-taiken .newpost__list > div[uk-grid] > .list__cnts { padding-left: var(--rsv-card-gutter); } #reservation #rsv-taiken .newpost__list > div[uk-grid] > .uk-grid-margin { margin-top: 0; } #reservation #rsv-taiken .newpost__list > div[uk-grid] > .list__cnts:nth-child(n+5) { margin-top: 31px; } /* ========================================================================== 3-3. 2カラムカード（横型） -------------------------------------------------------------------------- カードのマークアップは縦型とまったく同じ .list__cnts。 横並びにするのは .rsv-yoko を足すだけ。 ※セクションID(#rsv-yoko)の方が詳細度が高くなるため、 横型の指定にもIDを含めている。別のセクションで使う場合は そのセクションIDに読み替えてコピーしてください。 デザイン実測 2列版: カード574×206 / 余白15 / 画像231 / 画像↔文字25 全幅版: カード1180×304 / 余白20 / 画像350 / 画像↔文字50 ========================================================================== */ #reservation #rsv-yoko .list__cnts__inner { display: flex; flex-direction: row; align-items: center; height: 100%; padding: 15px; border: 1px solid var(--rsv-card-border); background: #fff; box-sizing: border-box; } #reservation #rsv-yoko .img { flex: 0 0 231px; width: 231px; align-self: flex-start; } #reservation #rsv-yoko .text { margin-left: 25px; } /* 横型では予約ボタンの帯は出さず、ボタン単体を置く */ #reservation #rsv-yoko .rsv-reserve { margin-top: 19px; padding: 0; background: none; box-shadow: none; } #reservation #rsv-yoko .rsv-btn-reserve { width: 292px; max-width: 100%; } /* #report-detail: カードをgridで組み直す .rsv-reserve が .text の外（.list__cnts__inner の直接の子）のため grid-area で位置を制御し、ボタンを右カラム下端に配置する */ #report-detail .affiliate .list__cnts[type="shp"] .list__cnts__inner { display: grid; grid-template-columns: 231px 1fr; grid-template-areas: "img text" "img btn"; grid-template-rows: 1fr auto; gap: 0; box-sizing: border-box; } #report-detail .list__cnts[type="shp"] .text { width: auto; } #report-detail .img { grid-area: img; } #report-detail .text { grid-area: text; } #report-detail .rsv-reserve { grid-area: btn; margin-top: 19px; background: none; box-shadow: none; padding: 0; padding-bottom: 1em; padding-right: 1em; } #report-detail .rsv-btn-reserve { max-width: 100%; } /* --- 全幅（1列）版 --- */ #reservation #rsv-yoko .rsv-yoko--wide .list__cnts__inner { padding: 20px; } #reservation #rsv-yoko .rsv-yoko--wide .img { flex-basis: 350px; width: 350px; } #reservation #rsv-yoko .rsv-yoko--wide .text { margin-left: 50px; } /* --- 2列のガター（デザイン31px） --- */ #reservation .rsv-yoko__grid { margin-top: 31px; margin-left: calc(var(--rsv-card-gutter) * -1); } #reservation .rsv-yoko__grid > .list__cnts { padding-left: var(--rsv-card-gutter); } #reservation .rsv-yoko__grid > .uk-grid-margin { margin-top: 0; } /* ========================================================================== 99. SP （～959px） ========================================================================== */ @media (max-width: 959px) { #reservation #rsv-taiken .uk-grid-stack { padding: 0 25px; } } /* ========================================================================== 99. SP （～767px） ========================================================================== */ @media screen and (max-width: 767px) { #reservation .rsv-container { max-width: none; width: 100%; padding: 0 var(--rsv-gutter-sp); } /* 共通CSS(style.css)はSPで .uk-container を border-box にしているので合わせる */ #reservation .uk-container { box-sizing: border-box; } /* --- キービジュアル（検索パネル） --- SPデザイン実測（マップ検索_SP.pdf / パネル上端 y69 を 0 とした値） タイトル +35 299×36 中央 ピル1 +106 36高 説明文 +167 2行 地図 +241 ピル2 +819 カテゴリ +875 3列（PCは4列） パネル高 1287 ★PCと並び順が違う：SPは 地図が説明文の直後・カテゴリより前 に入る */ #reservation .rsv-search { padding: 35px 0 63px; } #reservation .rsv-search__inner { padding: 0 10px; } #reservation .rsv-search__ttl { margin-bottom: 36px; margin: 0 0 30px; } #reservation .rsv-search__ttl img { width: 350px; margin: 0 auto; } /* SPの並べ替え。 display:contents で左カラムの入れ物を消し、中身を直接の子にしてから order で並べる。 こうするとPC側のUIkitの2カラム構造をそのまま残せる。 */ #reservation .rsv-search__row { display: flex; flex-direction: column; margin-left: 0; } #reservation .rsv-search__col--main, #reservation .rsv-search__col--map { display: contents; } #reservation .rsv-label { order: 0; margin-top: 0; } #reservation .rsv-search__lead { order: 1; margin: 20px 0 0; line-height: 1.6; } #reservation .rsv-map { order: 2; } #reservation .rsv-search__col--map { order: 3; } #reservation .rsv-label-cat-header { order: 4; margin-top: 20px; } #reservation .rsv-cat { order: 5; margin-top: 21px; } #reservation .rsv-search-btn-wrap { order: 7; margin-top: 40px; margin-left: 0; } /* SPデザインはカテゴリが3列（PCは4列） */ #reservation .rsv-cat { margin-left: -12px; max-width: none; } #reservation .rsv-cat > * { width: 33.3333%; padding-left: 12px; } #reservation .rsv-cat > .uk-grid-margin, #reservation .rsv-cat > *:nth-child(n+5) { margin-top: 0; } #reservation .rsv-cat > *:nth-child(n+4) { margin-top: 12px; } /* 地図：SPデザインでは画面幅より少し大きく置いて左右にはみ出させている （SVGの余白部分がはみ出すだけで、半島やラベルは画面内に収まる） */ #reservation .rsv-search__col--map { width: 100%; max-width: none; /* PC側の max-width:46% を解除 */ overflow: hidden; /* ページ全体に横スクロールを出さない */ padding-left: 0px; } #reservation .rsv-map { width: 100%; max-width: none; padding-top: 15px; margin-left: auto; } /*#reservation .rsv-map__svg { width: 90%; margin: 0px auto 0; }*/ /* イラストの位置・大きさはSPデザインの実測値（PCとは別値） top は SVG側の地図本体 translate(0,28) に合わせて一律 +4pt している */ #reservation .rsv-map__deco--kayak { left: 12%; top: 18%; width: 14%; } #reservation .rsv-map__deco--bbq { left: 18%; top: 89%; width: 15%; } /* 下端が見切れるため +4pt の対象外 */ #reservation .rsv-map__deco--airplane { left: 12%; top: 56%; width: 16%; } #reservation .rsv-map__deco--grape { left: 78%; top: 17%; width: 18%; } #reservation .rsv-map__deco--fishing { left: 75%; top: 61%; width: 18%; } #reservation .rsv-map__deco--strawberry { left: 73%; top: 40%; width: 18%; } #reservation .rsv-map__deco--wave1 { left: 10%; top: 35%; width: 15%; } #reservation .rsv-map__deco--wave2 { left: 58%; top: 66%; width: 15%; } #reservation .rsv-map__deco--wave3 { left: 10%; top: 74%; width: 17%; } #reservation .rsv-map__deco--wave4 { left: 50%; top: 94%; width: 15%; } #reservation .rsv-map__region[data-group="north"] { transform: translateX(35px) translateY(-35px); } #reservation .rsv-map__region[data-group="south"] { transform: translateX(35px) translateY(100px); } /* 「カテゴリーから探す」スクロール時にSP固定ヘッダーで隠れないようオフセット確保 */ #reservation .rsv-label--2nd { scroll-margin-top: 70px; } /* --- セクション見出し（SPは20px / PCは26px） --- */ #reservation .rsv-ttl { font-size: 20px; padding-right: 27px; } #reservation .rsv-ttl::after { top: -9px; } #reservation #rsv-taiken .rsv-result-count { font-size: 16px; } /* --- カード・記事一覧の左右余白 --- デザインは 見出し11px / カード・記事38px と別の値になっている。 共通CSSのSP指定 body .uk-container{padding:10px !important} を上書きするため ここだけ !important が必要。 */ #reservation .rsv-list .uk-container, #reservation .rsv-newpost .uk-container { padding-left: 38px !important; padding-right: 38px !important; } #reservation .rsv-list .rsv-ttl, #reservation .rsv-newpost .rsv-ttl { margin-left: -27px; /* 見出しだけ画面左から11pxの位置に戻す */ } /* --- カード（おすすめの体験 / 2カラムカード） --- */ #reservation #rsv-taiken, #reservation #rsv-yoko, #reservation #newpost { padding-bottom: 40px; } #reservation #rsv-taiken .rsv-ttl, #reservation #rsv-yoko .rsv-ttl, #reservation #newpost .rsv-ttl { margin-bottom: 25px; } /* SPは1列 */ #reservation #rsv-taiken .newpost__list > div[uk-grid] { margin-left: -15px; } #reservation #rsv-taiken .newpost__list > div[uk-grid] > .list__cnts { /*width: 100%;*/ padding-left: 15px; margin-top: 15px; } /*#reservation #rsv-taiken .newpost__list > div[uk-grid] > .list__cnts:nth-child(n+5) { margin-top: 0; } #reservation #rsv-taiken .newpost__list > div[uk-grid] > .list__cnts:nth-child(n+2) { margin-top: 15px; }*/ /* 2カラムカードもSPは1列。横並びをやめて画像を上に回り込ませる */ #reservation .rsv-yoko__grid { margin-top: 15px; margin-left: 0; } #reservation .rsv-yoko__grid > .list__cnts { width: 100%; padding-left: 0; } #reservation .rsv-yoko__grid > .list__cnts:nth-child(n+2) { margin-top: 15px; } /* 横型カードもSPは縦積み（画像が上に回り込む）。 PC側の指定がセクションID込みなので、こちらもIDを付けて詳細度を合わせる。 */ #reservation #rsv-yoko .list__cnts__inner, #reservation #rsv-yoko .rsv-yoko--wide .list__cnts__inner { flex-direction: column; align-items: stretch; padding: 10px; } #reservation #rsv-yoko .img, #reservation #rsv-yoko .rsv-yoko--wide .img { flex: 0 0 auto; width: 100%; } #reservation #rsv-yoko .text, #reservation #rsv-yoko .rsv-yoko--wide .text { margin-left: 0; } #reservation #rsv-yoko .rsv-btn-reserve { width: 100%; } #reservation #rsv-yoko .rsv-reserve { margin-top: 15px; } } /* ========================================================================== 99. SP （～640px） ========================================================================== */ @media (max-width: 640px) { #reservation #rsv-taiken .rsv-ttl { padding-left: 8px; } #reservation #rsv-taiken .rsv-ttl-stack { padding-left: 15px; } #reservation #rsv-taiken .uk-grid { padding: 0 8px; } #reservation #rsv-taiken .uk-grid-stack { padding: 0 15px; } } /* ========================================================================== 5. 詳細ページ（ショップ＆スポット）の「予約する」ボタン -------------------------------------------------------------------------- ベース: https://www.chitamaru.jp/s/rasberrypie/ 既存の .titleblock の中、電話番号と更新日の間に入れる。 ■ スコープ このファイルの大原則どおり、**すべて #reservation 配下**に書く。 詳細ページ側では、追加するボタンを
…
で括るだけ。既存のセレクタ（.titleblock / .tel / .date / #shopnews-detail 等）は 一切上書きしないので、現状のコードと混ざりません。 ※ .rsv-detail は「詳細ページに置いた #reservation」であることを示す修飾クラス。 マップ検索ページの #reservation とスタイルが混ざらないよう分けています。 デザイン実測（Figma 44:2 / 1440幅） 上下の罫線 1px #bcbcbc（本文カラム幅いっぱい） 電話↓罫線 30px 罫線↓ボタン 15px ボタン 241×50 / 枠1px #ff6200 / 角丸7px アイコン 20×20、文字との間隔 8px 文字 16px / #ff6200 ボタン↓罫線 15px 罫線↓更新日 29px ========================================================================== */ /* 更新日（.date）は既存CSSで position:absolute かつ margin:20px 0。 .date 自体を上書きせずにデザインの29pxにするため、 こちら側のラッパーで不足分の9pxを padding で稼ぐ（9 + 既定20 = 29px）。 padding はマージン相殺が起きないので確実。 */ #reservation.rsv-detail { padding-bottom: 9px; } #reservation .rsv-detail-reserve { margin: 30px 0 0; padding: 15px 0; border-top: 1px solid var(--rsv-detail-rule); border-bottom: 1px solid var(--rsv-detail-rule); text-align: center; /* 親（.titleblock）の指定に依存しないよう明示 */ } #reservation .rsv-btn-detail { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 241px; max-width: 100%; height: 50px; border: 1px solid var(--rsv-orange); border-radius: 7px; background: #fff; color: var(--rsv-orange); font-size: 16px; font-weight: 700; line-height: 1; text-decoration: none; } /* 共通CSSの body img{width:100%}（style.css:46）に負けないよう実寸を明示 */ #reservation .rsv-btn-detail__ico { width: 20px; height: 20px; flex: 0 0 20px; } @media (hover: hover) { #reservation .rsv-btn-detail:hover { background: var(--rsv-orange); color: #fff; } #reservation .rsv-btn-detail:hover .rsv-btn-detail__ico { filter: brightness(0) invert(1); /* オレンジのSVGを白へ */ } } /* --- SP（～767px）-------------------------------------------------------- ★2026-08-18 更新 SPデザイン（詳細ページ_SP01.pdf / SP02.pdf）が支給され、 「予約する」は**画面下部の固定バー**に入ることが確定した。 デザインではタグ（駐車場／禁煙）の直下にボタンは無いので、 SPではこのページ内ボタンを非表示にする（＝固定バーに一本化）。 ▼ページ内にも残したい場合は、下の display:none の1行を消すだけ。 残す場合の見た目（横幅100%／最大300px／14px）も下に残してある。 */ @media screen and (max-width: 767px) { #reservation.rsv-detail { display: none; /* ←ページ内の「予約する」を出す場合はこの1行を削除 */ padding-bottom: 0; /* SPは .date 既定の20pxのまま */ } #reservation .rsv-detail-reserve { margin-top: 20px; padding: 12px 0; } #reservation .rsv-btn-detail { width: 100%; max-width: 300px; font-size: 14px; /* SPのみ 16px → 14px */ } /* 文字を14pxに落とした分、アイコンも1段小さくして釣り合いを取る */ #reservation .rsv-btn-detail__ico { width: 18px; height: 18px; flex: 0 0 18px; } } /* ========================================================================== 6. 詳細ページ SP画面下部の固定バー（パターンA / パターンB） -------------------------------------------------------------------------- デザイン: 詳細ページ_SP01.pdf（＝パターンA） / 詳細ページ_SP02.pdf（＝パターンB） ベース : https://www.chitamaru.jp/s/rasberrypie/ パターンA … ［予約する］ ← ピンクの帯（1段目） ［保存］［共有］［電話番号］ ← 既存の固定バーそのまま（2段目） パターンB … ［保存］［共有］［電話する］［予約する］ ← 1段に4つ ■ スコープについて（このファイルの大原則の例外） 固定バーは既存の .userbtn（CMS出力）そのものなので #reservation の中に 入れられない。そこで **バーに id="rsv-spbar" を1つ足して**、 このセクションのセレクタは必ず #rsv-spbar … （PC側の打ち消し） #shopnews-detail #rsv-spbar …（SP側の上書き） のどちらかで始める。id が無いページには絶対に効かないので、 「他ページのCSSと干渉させない」という大原則は守られている。 SP側で #shopnews-detail を併記しているのは詳細度合わせのため。 既存の固定バーのCSSが .page#shopnews-detail .userbtn ul li.tel a → (id1, class3, element3) と書かれており、#rsv-spbar だけ（id1, class1, element3）では負ける。 id を2つにすると (id2, …) となって確実に勝てる。!important は不要。 ※そもそも既存の「SPで固定バーになる」CSS自体が #shopnews-detail 限定なので、 このセクションが同じ条件なのは仕様どおり。 ■ 色を変えたいとき（緑バージョン等） 下の --rsv-bar-accent を1行変えるだけでA/B両方の「予約する」が変わる。 ■ デザイン実測（375px幅・詳細ページ_SP01/SP02.pdf） ＜共通＞ バー上端 1px #B4B4B4／内側 padding 10px／ボタン高さ 50px ＜A＞ 帯 高さ58px（padding10px＋ボタン38px）／帯色 #e32e6d 帯の内側に 上向きの影 15%黒／ボタン 345×38・角丸6px 枠 白40%／地 白15%／アイコン18px＋文字16px（間隔7px） 2段目（保存・共有・電話番号）は**既存のまま**＝CSS変更なし ＜B＞ 保存30 -8- 共有30 -24- 電話する120 -7- 予約する120（計339・中央寄せ） ピル 120×50・角丸6px／電話 #ff8c43／予約 #e32e6d アイコン 電話21×26・カレンダー22×22／文字14px（間隔6px） ========================================================================== */ #rsv-spbar { /* --- 色（ここだけ変えれば全体が変わる） --- */ --rsv-bar-accent: #e32e6d; /* 「予約する」の色。緑版なら #22a939 等に差し替え */ --rsv-bar-tel: #ff8c43; /* 「電話」の色。既存の固定バーと同じ値 */ --rsv-bar-radius: 6px; /* 角丸。既存の電話ボタンと同じ値 */ --rsv-orange: #ff6200; /* ブランドカラー */ --rsv-foot-bg: #fce5d6; /* カード下部 予約ボタン帯 */ } /* --- PC（768px～）------------------------------------------------------ PCの .userbtn は本文右上の「保存／共有」だけ。 PCの「予約する」は .titleblock 内（5章）にあるので、こちらは出さない。 ※Aは ul の外（div）、Bは ul の中（li）に置くので両方を指定する。 */ #rsv-spbar > .rsv-spbar__reserve, #rsv-spbar > ul > li.rsv-spbar__reserve { display: none; } /* --- SP（～767px）------------------------------------------------------ */ @media screen and (max-width: 767px) { /* ===== A/B 共通 ===== */ #shopnews-detail #rsv-spbar > .rsv-spbar__reserve, #shopnews-detail #rsv-spbar > ul > li.rsv-spbar__reserve { display: block; box-sizing: border-box; } /* ボタン本体（A＝帯の中の1本 / B＝右端のピル） */ #shopnews-detail #rsv-spbar .rsv-spbar__btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 50px; border-radius: var(--rsv-bar-radius); background: var(--rsv-bar-accent); color: #fff; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; /* 極端に狭い端末でもラベルを2行にしない */ } /* アイコン。共通CSSの body img{width:100%}（style.css:46）に負けないよう実寸を明示。 カレンダーは #ff6200 のSVGしか無いので、フィルタで白にする （新規アセットを増やさないため。5章のホバー処理と同じ手法）。 */ #shopnews-detail #rsv-spbar .rsv-spbar__ico { flex: none; filter: brightness(0) invert(1); } /* 電話アイコン（ico_tel_white.svg）は元から白なのでフィルタ不要 */ #shopnews-detail #rsv-spbar .rsv-spbar__ico--tel { filter: none; } /* ===== パターンA：1段目に帯 ===== */ /* 帯。ul の**外**（.userbtn の直下・ul の前）に置いた
。 .userbtn の padding:10px をマイナスマージンで打ち消して画面幅いっぱいにする。 ※ul の中（li）に入れて flex-wrap で2段にする手もあるが、そうすると 狭い端末（320px等）で2段目まで折り返してしまうため、外に出している。 こうすれば2段目は既存のバーとまったく同じ挙動のまま。 */ #shopnews-detail #rsv-spbar.rsv-spbar--a > .rsv-spbar__reserve { margin: -10px -10px 10px; /* 上と左右のpaddingを打ち消し／下は2段目との間隔 */ padding: 10px 15px; background: var(--rsv-foot-bg); box-shadow: inset 0 2px 2px rgba(0, 0, 0, .15); } #shopnews-detail #rsv-spbar.rsv-spbar--a .rsv-spbar__btn { gap: 7px; height: 38px; border: 1px solid var(--rsv-orange); border-radius: 5px; background: #fff; box-shadow: 0 3px 1.5px rgba(0, 0, 0, .15); color: var(--rsv-orange); font-size: 16px; font-weight: 700; line-height: 1; } #shopnews-detail #rsv-spbar.rsv-spbar--a .rsv-spbar__ico { width: 18px; height: 18px; } /* 2段目（保存・共有・電話番号）は既存のまま。ここでは何も指定しない。 */ /* 固定バー（rsv-spbar--a）分の高さを「SHOPページtopへ」ボタンの下に確保 */ #shopnews-detail .viewbtn.back.member { margin-bottom: 120px; } } /* --- #report-detail カード SP（～767px）----------------------------------- PCの 231px を 150px に縮めて横2カラムを維持する。 grid-template-areas は PC と同じ（img 左・text+btn 右）のまま。 .rsv-btn-reserve は右列の幅に合わせて 100% 表示。 */ @media screen and (max-width: 767px) { #report-detail .affiliate.list .list__cnts__inner .text { width: 100%; } #report-detail .affiliate .list__cnts[type="shp"] .list__cnts__inner { grid-template-columns: 150px 1fr; gap: 0 12px; } #report-detail .rsv-reserve { margin-top: 10px; } #report-detail .rsv-btn-reserve { max-width: 100%; } #report-detail .list__cnts[type="shp"] .place{ display: none; } } /* --- fontサイズ変更（サンプル）-----------------------------------*/ .list__cnts[type="shp"] .text .title a{ font-size: 18px; } /* --- VIEW MORE：おすすめの体験 初期5件表示 -----------------------------------*/ #rsv-taiken .taiken-grid--collapsed > *:nth-child(n+5) { display: none; } #rsv-taiken .taiken-grid--collapsed ~ .pagenation { display: none; }