@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-blue:       #33257D; */  /* メインカラー */
  /* --c-blue-start: #2054AF; */  /* ヘッダー／フッターのグラデ左端 */
  /* --c-blue-end:   #212071; */  /* ヘッダー／フッターのグラデ右端 */
  /* --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; }
*/


/* 260915 OTAバナー　4つ並びサイズへ */
.p-ota {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    margin: 55px -22px 0;
}



/* ===== 260924 added ===== */

/* 修正: staynaviリンクボタンデザイン */
#open_staynavi{
   text-align: center;

}
#open_staynavi a {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: none;
   border: 1px solid var(--c-blue-soft);
   background-color: var(--c-blue-soft) ;
   color: var(--c-blue);
   padding: 10px 20px;
   border-radius: var(--radius-pill);
   font-weight: bold;
   cursor: pointer;
   margin-top: 30px;
}
#open-staynavi a:hover { 
/*               opacity: .85; transform: translateY(-2px);*/
   opacity: .85; ;
}

   @media (max-width: 768px) {
      #open-staynavi {
         min-width: 100% !important;
         max-width: 340px;
         padding: 10px 20px !important;
         font-size: 15px !important;
         gap: 8px;
         margin-top: 1.5rem;
         }
      .area-map-modal-resize {
         display: none;
      }
   }





  /* サブボタンのラッパー（配置エリア） */
  #apply01 .c-panel__sub-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-top: 24px !important;
    margin-bottom: 32px !important;
    width: 100% !important;
  }

  /* 薄ブルーのピル型サブボタン本体 */
  #apply01 .c-btn-sub {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 22px !important;
    background-color: #e5effb !important; /* 淡いブルー */
    color: #244189 !important;            /* 濃いネイビー */
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    border-radius: 9999px !important;     /* ピルカプセル形状 */
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* ホバー・フォーカス時の挙動 */
  #apply01 .c-btn-sub:hover,
  #apply01 .c-btn-sub:focus {
    background-color: #d6e6f9 !important;
    color: #1c336b !important;
    text-decoration: none !important;
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
  }

  /* 矢印アイコンの間隔と太さ */
  #apply01 .c-btn-sub__arrow {
    margin-right: 6px !important;
    font-weight: 700 !important;
    display: inline-block !important;
  }

  /* 外部リンクSVGアイコンの配置・サイズ調整 */
  #apply01 .c-btn-sub .c-btn__icon {
    margin-left: 6px !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: -2px !important;
  }

  /* スマホ（レスポンシブ）表示調整 */
  @media screen and (max-width: 767px) {
    #apply01 .c-panel__sub-actions {
      margin-top: 18px !important;
      margin-bottom: 24px !important;
      gap: 10px !important;
    }
    #apply01 .c-btn-sub {
      font-size: 12.5px !important;
      padding: 9px 16px !important;
      line-height: 1.4 !important;
    }
  }
/* /260924 修正: staynaviリンクボタンデザイン */