@charset "UTF-8";
/* ============================================================================
   add.css — 追加・調整用スタイル（最優先で適用される）
   ----------------------------------------------------------------------------
   ■ なぜこのファイルが最優先になるのか
     style.css は全体を `@layer app { ... }` で囲っている。
     カスケードレイヤーに属さない CSS は、レイヤー内の CSS より
     常に強い（詳細度に関係なく勝つ）というルールがあるため、
     このファイルは何も工夫しなくても style.css を上書きできる。

     → !important も、無理やり詳細度を上げるセレクタも不要。
     → style.css は原則さわらず、修正・調整はこのファイルに追記する。

   ■ 書き方の指針
     1. まず「A. 変数の上書き」を試す（色や幅は大半がここで直せる）
     2. 変数で足りないものだけ「B. 個別の上書き」に書く
     3. 案件が長期化して膨らんできたら、確定した内容を style.css へ戻す

   ■ 注意
     このファイル内に @layer は書かないこと。書くと優先度が下がる。
   ========================================================================= */


/* ============================================================================
   A. 変数の上書き
   ---------------------------------------------------------------------------
   コメントを外して値を変えるだけでサイト全体に反映される。
   （変数の一覧と初期値は assets/css/style.css の「1. 設計トークン」を参照）
   ========================================================================= */
:root {
  /* --- カラー ------------------------------------------------------------ */
  /* --c-pink:       #F7668D; */  /* メインピンク */
  /* --c-pink-start: #FF757A; */  /* ヘッダー／フッターのグラデ左端 */
  /* --c-pink-end:   #F7668D; */  /* ヘッダー／フッターのグラデ右端 */
  /* --c-brown:      #5D4038; */  /* 見出しの濃茶 */
  /* --c-text:       #333333; */  /* 本文 */

  /* --- レイアウト幅 ------------------------------------------------------ */
  /* --container:        1000px; */  /* 基本のコンテンツ幅 */
  /* --container-narrow:  940px; */  /* ご利用期間テーブルの幅 */

  /* --- 文字サイズ -------------------------------------------------------- */
  /* --fz-heading: 32px; */  /* セクション見出し */
  /* --fz-lead:    18px; */  /* リード文 */
  /* --fz-body:    16px; */  /* 本文 */
}


/* ============================================================================
   B. 個別の上書き
   ---------------------------------------------------------------------------
   ここから下に、ページ単位・要素単位の調整を追記していく。
   どこを直したか分かるよう、見出しコメントを付けて追記すること。
   ========================================================================= */

/* 例）スクロール追従（ヘッダーの固定）は assets/js/main.js の initStickyHeader() で
   全幅に対して実装済み。開始位置はメインビジュアル（.p-hero）の下端。
   出方・戻り方を変えたい場合は下のコメントを外して調整する
.l-header.is-fixed          { transition: transform .3s ease-in-out, opacity .3s ease-in-out; }
.l-header.is-fixed + .l-header__spacer { height: 75px; }
*/

/* 例）「旅しよう」のサムネイルに写真が入ったら高さ指定を外す
   現在は max-width 240px ＋ height 190px（767px 以下は aspect-ratio: 240/190）
.c-spot__thumb {
  height: auto;
  aspect-ratio: 240 / 190;
}
*/

/* 例）ヒーローの装飾（波形）のサイズを変えたい場合
   min() の第1項がデザイン原寸、第2項がヒーロー幅に対する比率。
   第1項を変えると 1400px 以上での大きさ、第2項を変えると縮み方が変わる
.p-hero__shape--top    { width: min(605px, 43.22%); }
.p-hero__shape--bottom { width: min(981px, 70.07%); }
*/

/* 例）リンク先が決まったら、ダミーの href="#" を置き換える。
   スタイルの調整だけならここ、URL は index.html を直接編集する */

/* 例）お知らせのバナーを出さない場合
   index.html の <section class="p-news" id="news"> に p-news--no-banner を足すと、
   バナーエリアが消えてお知らせが横幅いっぱいになる（CSS の追記は不要）。
   バナーの自動切り替えを止めるときは assets/js/main.js の initNewsBanner(true) を false に。 */

/* 例）お知らせ一覧のスクロール領域の高さを変えたい場合
   2件ぶん（176px）を超えるとスクロールバーが出る
.p-news__list { --news-list-height: 190px; }
*/

/* キャンペーン終了の告知を出す場合
   index.html の <div class="p-period"> に is-ended を足すと、
   ご利用期間のテーブルと注釈の上にグレーの膜と「キャンペーンは終了しました」が重なる。
     <div class="p-period is-ended">
   膜の濃さ（現在 .8）や文言のスタイルを変えたいときは、下の2行のコメントを外して調整する。
   ※ CSS のコメントは入れ子にできないので、この中にコメント記号を書かないこと
.p-period__end      { background: rgba(0, 0, 0, .7); }
.p-period__end-text { background: #D63216; font-size: 24px; }
*/

/* 例）「旅しよう」のラベルのボーダーを変えたい場合
   デザイン実測は 2px の #D9D9D9（--c-border）。太さを変えるときは
   height もボーダーぶん（上下 2×太さ）を足した値にする
.c-spot__badge { border-width: 2px; height: 35px; }
*/