@charset "UTF-8";

/* ============================================
   plan_sp.css（ご宿泊プラン SP版 - 色のみCSS変数化）
   
   【概要】
   - 840px以下で読み込まれるスマートフォン用CSS
   - ご宿泊プランページ専用のスタイル定義
   
   【前提条件】
   public_all.cssで定義されたCSS変数（色）を使用
   このファイルはpublic_all.cssの後に読み込むこと
   
   【セクション構成】
   0. リセット・共通設定
   1. ヒーローエリア（トップビジュアル）
   2. プランセクション（料金表）
   3. 予約ボタンエリア
   4. 町内連携プラン
   5. 他のプランセクション
   6. 下部リンクセクション
   7. レスポンシブ調整（640px以下、415px以下）
   ============================================ */


/* ============================================
   0. リセット・共通設定
   ============================================ */

/* --- ボックスサイズ統一 --- */
* {
  box-sizing: border-box;
}

/* --- 画像の基本設定 --- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}



/* ============================================
   1) ヒーロー（#page-top-section）
  ============================================ */

/* --- ヒーロー全体 --- */
#page-top-section {
  width: 100%;
  background: var(--color-bg-main);
  display: flex;
  flex-direction: column;
  padding-top: 60px;        /* 固定ヘッダー分 */
  padding-bottom: 40px;
  margin: 0 0 36px 0; 
  border-bottom: 1px solid var(--color-border-main);
}

/* --- 写真を先頭に配置 --- */
#page-top-section .section-harf:last-child {
  order: 1;
  width: 100%;
}

/* --- テキストエリア --- */
#page-top-section .section-harf:first-child {
  order: 2;
  width: 100%;
  padding: 30px 40px 0px;
}

/* --- メイン画像のトリミング --- */
#page-top-section .img-top {
  width: 100%;
  height: 250px;
  overflow: hidden;
  background: var(--color-bg-black);
}

#page-top-section .img-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 80%;
}

/* --- パンくずナビゲーション --- */
.section-stay1-Link {
  padding-top: 0px;
  font-size: 0.7rem;
  font-weight: 500; 
  color: var(--color-text-muted);
}

.section-stay1-Link a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color .15s ease;
}

.section-stay1-Link a:hover {
  color: var(--color-text-main);
}

/* --- 見出しエリア --- */
.contents-heading {
  margin-top: 20px;
  margin-bottom: 30px;
  padding-bottom: 4px;
  border-bottom: none;
}

/* --- ページタイトル --- */
.TOP-page-title {
  font-size: 1.9rem;
  font-weight: 700;
}

.TOP-page-title-p {
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.06rem;
}

/* --- SP用キャッチコピー --- */
.TOP-page-read {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 10px 0 20px;
}

/* --- 本文 --- */
.TOP-page-p {
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: justify;
}

/* --- 補足テキスト（小） --- */
.TOP-small-text {
  font-size: 0.7rem;
  font-weight: 400;
}

/* <span>改行の高さを指定する */
.spacer {
  display: block;
  height: 8px;
}



/* ============================================
   2) ご宿泊プラン（#plan-section）
   ============================================ */
#plan-section {
  width: 100%;
  background: var(--color-bg-beige);
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
}

/* ---------- スライド写真 ---------- */
/* スライドコンテナ - 高さ190px、相対位置指定 */
#plan-section .container {
  height: 190px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* 画像上の暗めオーバーレイ */
#plan-section .container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  pointer-events: none;
  z-index: 2;
}

/* 各スライド画像の共通設定 */
#plan-section .container .image {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center 60%;
  animation-name: image-switch-animation;
  animation-duration: 16s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: both;
  z-index: 1;
  will-change: opacity;
}

/* 画像ソースの指定 */
#plan-section .container .src1 { background-image: url("../../img/plan/P_img-plan-1.jpg"); }
#plan-section .container .src2 { background-image: url("../../img/plan/P_img-plan-2.jpg"); }
#plan-section .container .src3 { background-image: url("../../img/plan/P_img-plan-3.jpg"); }
#plan-section .container .src4 { background-image: url("../../img/plan/P_img-plan-4.jpg"); }

/* 表示タイミング（4秒ごとに切り替え） */
#plan-section .container .image{ animation-delay: calc(var(--i) * 4s); }

/* キーフレームアニメーション
   16秒で1周、各画像が4秒間表示（25%）
   0-2%: フェードイン（0.32秒）
   2-25%: 表示（3.68秒）
   25-35%: フェードアウト（1.6秒）
   35-100%: 非表示（他の画像が表示される時間）
*/
@keyframes image-switch-animation {
  0%   { opacity: 0; }
  2%   { opacity: 1; }
  25%  { opacity: 1; }
  35%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- PC用プランはSPで完全に消す ---------- */
.plan-inner {
  display: none;
}


/* ---------- SP専用プラン表 - 左右余白を20pxに統一 ---------- */
.sp-plan-sheet {
  width: 100%;
  padding: 18px 50px 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.sp-block { 
  width: 100%; 
}

/* タイトル - 左にバー、右にテキスト */
.sp-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.2rem;
  font-weight: 700;
}

/* タイトル左の色付きバー */
.sp-bar {
  width: 8px;
  height: 1.2rem;
  background: var(--color-accent-main);
  flex-shrink: 0;
}

/* タイトルの補足テキスト（小文字） */
.sp-sub {
  font-size: 0.7rem;
  font-weight: 500;
}

/* サブタイトル */
.sp-subttl {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: -3px;
  margin-left: 8px;
}

/* 料金行 - 左右にテキスト、中央に点線 */
.sp-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0px 0px 10px;
  font-size: 0.9rem;
  position: relative;
}

/* 料金行左側（プラン名） */
.sp-left {
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
  margin-left: 7px;
}

/* 料金行右側（金額） */
.sp-right { 
  white-space: nowrap;
  font-size: 0.9rem; 
  font-weight: 600;
}

/* 料金行中央の点線 */
.sp-dots {
  flex: 1;
  border-bottom: 2px dotted var(--color-text-main);
  transform: translateY(-2px);
}

/* 注意書き */
.sp-note {
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 8px 0px 0px 15px;
}

/* 詳細情報エリア */
.sp-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 10px;
  font-weight: 500;
  font-size: 0.8rem;
}

/* （税込）などの小さめ文字 */
.price-small {
  font-size: 0.7rem;
  margin-left: 0px;
  font-weight: 400;
}

/* 詳細情報の各行 */
.sp-detail-row {
  display: flex;
  gap: 12px;
}

/* 詳細情報の左側ラベル */
.sp-detail-row span:first-child {
  min-width: 200px;
  font-weight: 700;
}


/* ============================================
   2-1. プラン詳細情報のレスポンシブ対応（416px〜640px）
   ============================================ */
@media screen and (max-width: 640px) and (min-width: 416px) {
	
  /* プラン全体の余白調整 */
  .sp-plan-sheet {
    padding: 18px 35px 0;
    gap: 26px;
  }

  /* 詳細情報エリア - ラベル幅を調整 */
  .sp-detail {
    gap: 10px;
    margin-left: 10px;
  }

  /* 詳細情報の各行 - ラベル幅を狭める */
  .sp-detail-row {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: flex-start;
  }

  /* 詳細情報のラベル - 幅を130pxに縮小 */
  .sp-detail-row span:first-child {
    min-width: 130px;
    max-width: 130px;
    flex-shrink: 0;
    font-weight: 700;
  }

  /* 詳細情報の内容 */
  .sp-detail-row span:nth-child(2) {
    flex: 1;
    font-weight: 500;
    line-height: 1.5;
  }
}


/* ============================================
   2-1. プラン詳細情報のレスポンシブ対応（840px以下）
   ============================================ */
@media screen and (max-width: 840px) {

  #plan-section { padding-bottom: 40px; }
  /* プラン全体の余白調整 */
  .sp-plan-sheet {
    padding: 18px 0px 0;
    gap: 26px;
  }

  /* タイトル */
  .sp-title {
    gap: 7px;
    padding: 0 30px;
  }

  .sp-bar {
    width: 7px;
  }

  /* サブタイトル */
  .sp-subttl {
    margin-left: 7px;
    margin-bottom: -2px;
    padding: 0 30px;
  }

  /* 料金行 */
  .sp-row {
    margin: 4px 0px 0px 8px;
    padding: 0 30px;
  }


  /* 注意書き */
  .sp-note {
    margin: 8px 0px 0px 14px;
    line-height: 1.55;
    padding: 0 30px;
  }

  /* 詳細情報エリア - 縦並びレイアウトに変更 */
  .sp-detail {
    gap: 0px;
    margin: 0px;
    width: 100%;
  }

  /* 詳細情報の各行 - シンプルな全幅デザイン */
  .sp-detail-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
	margin-left: 15px;
	margin-right: 15px;
    padding: 5px 30px;
    background: none;
    border-left: none;
    border-bottom: none;
  }

  .sp-detail-row:last-child {
    border-bottom: none;
  }

  /* 詳細情報のラベル（左側） */
  .sp-detail-row span:first-child {
    max-width: 800px;
    width: 100%;
    font-weight: 700;
    color: var(--color-accent-main);
    padding-bottom: 3px;
    border-bottom: 1px solid  #666;
    letter-spacing: 0.02em;
  }

  /* 詳細情報の内容（右側） */
  .sp-detail-row span:nth-child(2) {
    width: 100%;
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-text-main);
    padding: 0px;
    border-top: none;
 }

  /* 駐車場の補足（※自転車も駐輪可）*/
  .sp-detail-row span:nth-child(3) {
    font-weight: 400;
    color: var(--color-text-main);
    margin-top: -5px;
    padding: 0em;
    text-indent: 0em;
  }
}


/* ============================================
   3. プラン下部ボタン（予約専用WEB／LINE）
   ============================================ */

/* ボタンエリア - 中央揃えで縦並び（alfa.htmlスタイルに統一） */
#plan-button-area {
  width: 100%;
  background: var(--color-bg-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: 0 40px;
  margin: 0 0 var(--spacing-xl);
}

/* ボタン共通設定（alfa.htmlスタイルに統一） */
.plan-button,
.line-button {
  width: 100%;
  max-width: 400px;
  padding: 12px var(--spacing-xl);
  font-size: var(--font-size-large);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-pill);
  transition: var(--transition-normal);
  box-shadow: 0 4px 12px var(--color-border-soft);
  display: block;
  cursor: pointer;
}

/* ------------------------------
   ■ 黒ボタン（予約専用WEB）
   ------------------------------ */
.plan-button {
  background: var(--color-btn-dark);
  color: var(--color-bg-main);
}

.plan-button:hover {
  background: var(--color-btn-dark-hover);
  transform: translateY(-2px);
}

/* ------------------------------
   ■ LINEボタン（alfa.htmlスタイルに統一）
   ------------------------------ */
.line-button {
  background: #06C755;
  color: var(--color-bg-main);
}

.line-button:hover {
  background: #05B04D;
  transform: translateY(-2px);
}


/* ============================================
   4) 町内連携プラン
   ============================================ */
   
/* 冬季限定プラン・町内連携プラン共通 */
.another-plan-sec {
  background: var(--color-bg-main);
  padding: 40px 40px;
  margin: 40px 0;
}

#another-plan-sec {
  background: var(--color-bg-main);
  padding: 40px 40px;
}

/* 見出し - 中央揃え */
.section-heading {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid #000;
}

.another-plan-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ゴルフ場画像 - アスペクト比16:9で表示 */
.golf-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0px;
}

/* カニ場画像 - アスペクト比16:9で表示 */
.kani-img {
  width: 100%;
  object-fit: cover;
  border-radius: 0px;
}

/* ゴルフプラン見出し */
.otoku-plan-text {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0px 0 10px;
}

/* ゴルフプラン説明文 */
.otoku-plan-read {
  font-size: 0.85rem;
  line-height: 1.8;
  text-align: justify;
  margin-bottom: 15px;
}

/* お問い合わせ情報 */
.small-text {
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05rem;
  margin: auto 0px;
}

.tell-text {
  color: var(--color-text-muted);
  text-decoration: none;
}

.tell-text:hover {
  color: var(--color-text-main);
}


/* ====================================================
   ▼ ゴルフバナー（緑枠＋黄色＋内側緑）完全版
   - ホバーした瞬間に３層が同時に反応する
   ==================================================== */

/* 外枠（濃い緑） */
.golf-btn-frame {
  width: 100%;
  display: flex;
  margin: 20px 0px 0px;
  border-radius: 14px;
  background-color: #0E5A3C;
  transition: 0.25s ease;
}

/* 黄色の外側バナー */
.banner {
  width: 100%;
  display: flex;
  margin: 10px;
  background-color: #C38C00;
  padding: 1.5px;
  text-decoration: none;
  mask:
    radial-gradient(circle at 0 0, transparent 15px, black 15px) 0 0,
    radial-gradient(circle at 100% 0, transparent 15px, black 15px) 100% 0,
    radial-gradient(circle at 0 100%, transparent 15px, black 15px) 0 100%,
    radial-gradient(circle at 100% 100%, transparent 15px, black 15px) 100% 100%;
  mask-size: 50% 50%;
  mask-repeat: no-repeat;
  transition: 0.25s ease;
}

/* 内側の緑エリア（文字を載せる部分） */
.banner-1 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0E5A3C;
  color: var(--color-bg-main);
  font-size: 1.2em;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 10px;
  mask:
    radial-gradient(circle at 0 0, transparent 15px, black 15px) 0 0,
    radial-gradient(circle at 100% 0, transparent 15px, black 15px) 100% 0,
    radial-gradient(circle at 0 100%, transparent 15px, black 15px) 0 100%,
    radial-gradient(circle at 100% 100%, transparent 15px, black 15px) 100% 100%;
  mask-size: 50% 50%;
  mask-repeat: no-repeat;
  transition: 0.25s ease;
}

/* ============================================
   ▼ ホバー反応をすべて golf-btn-frame に統一
   これにより “完全に同時に” 色変化が起こる
   ============================================ */

.golf-btn-frame:hover {
  background-color: #147048; /* 外枠の緑 → 明るく変化 */
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.golf-btn-frame:hover .banner {
  background-color: #E5A500; /* 黄色も同時に変化 */
}

.golf-btn-frame:hover .banner-1 {
  background-color: #147048; /* 内側緑も同時に変化 */
}


/* ====================================================
   表（実施期間／対象プラン／予約方法）
   ==================================================== */

.list-area {
  margin-top: 12px;
  margin-bottom: 8px;
  font-size: 0.8rem;
  border-top: 1px solid #666;
  padding-top: 0px;
}

.list {
  border-bottom: 1px solid #666;
  display: flex;
}

/* 左ラベル */
.list-label {
  width: 100px;
  background: var(--color-bg-beige);
  font-weight: 700;
  text-align: center;
}

/* ラベルと本文のパディング */
.list-label,
.list-text {
  padding: 10px 15px;
}

/* 本文 */
.list-text {
  flex: 1;
  text-align: justify;
}

/* ラベル文字 */
.plan-label-font {
  font-size: 0.75rem;
  font-weight: 600;
}

.list-label .plan-letterfont,
.list-text .plan-letterfont {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.025rem;
}

/* ============================================
   5) 下部リンク（縦積み）- 画像オーバーレイスタイル
   ============================================ */
.three-image-section {
  display: flex;
  flex-direction: column;
}

/* 各画像カード - 高さ220px、相対位置 */
.img-card {
  position: relative;
  height: 150px;
  overflow: hidden; 
  cursor: pointer;
  border-bottom: 1px solid #fff;
}

/* カード内画像 */
.img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* 暗いオーバーレイ */
.img-card .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  transition: 0.3s ease;
}

/* タイトルテキスト */
.img-card h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  z-index: 5;
  border-bottom: solid 1px #fff;
  padding-bottom: 5px; 
  pointer-events: none;
  opacity: 1;
  transition: opacity .35s ease, transform .35s ease;
}

/* ホバー効果 */
.img-card:hover .overlay {
  background: rgba(0,0,0,0.3);
}

.img-card:hover img {
  transform: scale(1.05);
}




/* ============================================
   7. レスポンシブ調整 415px以下：小画面向け調整
   ============================================ */
@media screen and (max-width: 415px) {
  
  /* --- プランボタンエリア（alfa.htmlスタイルに統一） --- */
  #plan-button-area {
    gap: 15px;
    padding: 0 var(--spacing-md);
  }

  .plan-button, .line-button { 
    max-width: 100%;
    padding: 12px var(--spacing-lg);
  }

  /* --- プランセクション --- */
  #plan-section { padding-bottom: 30px; }

  .otoku-plan-read br { display: none; }
	
  /* --- 他のプランセクション --- */
  #winter-plan-sec { padding: 0px 30px; }
  #town-plan-sec { padding: 0px 30px; }
  /* タイトル */
  .sp-title { font-size: 1rem; }

  /* タイトルの補足テキスト */
  .sp-sub { font-size: 0.65rem; }

  /* （税込）などの小さめ文字 */
  .price-small { font-size: 0.6rem; }

  /* 料金行左側（プラン名） */
  .sp-left { font-size: 0.8rem; margin-left: 3px; }

  /* 料金行右側（金額） */
  .sp-right { font-size: 0.8rem; }

  .sp-subttl { font-size: 0.8rem; }

  .sp-plan-sheet { padding: 18px 0px; }

  /* --- バナー --- */
  .banner-1 { font-size: 0.9rem; }

  /* --- セクション見出し --- */
  .section-heading { font-size: 1.2rem; margin-bottom: 20px; }
  .otoku-plan-text { font-size: 1.2rem; }
	
  /* 左ラベル */
  .list-label { width: 89px; }
	
  /* ラベルと本文のパディング */
  .list-label,.list-text { padding: 8px 13px; }

}

/* ============================================
   END OF FILE
   ============================================ */