/*
 * parts/plan/plan.css
 * ---------------------------------------------------------------
 * 新しい共通パーツ(parts/plan/)のデザインです。
 * 既存CSSとぶつからないように、クラス名はすべて「plan-」で始めています。
 * (ボタンの .btn-stitch / .btn-line と、固定バーの .application は、既存の golfs.css・headerfooter.css のものをそのまま使います)
 *
 * 目次
 *   1. 色
 *   2. ファーストビュー(写真・タイトル・期間・料金・バッジ)
 *   3. おすすめポイント(カード)
 *   4. 申込の流れ・よくある質問
 *   5. 料金一覧(表)
 *   6. モデルスケジュール(1日ずつのカード・時系列)
 *   7. ゴルフ(コースのカード)
 *   8. ホテル
 *   9. 施設(クリックして開く)
 *   10. フッターの左右の余白
 *   11. 固定バーの下の空き
 *   12. LINE・お申し込みボタンの文字を上下中央に
 *   13. 上のメニュー(固定・移動先の位置)
 * ---------------------------------------------------------------
 */

/* 1. 色 ---------------------------------------------------------- */
:root {
  --plan-green: #1b5e3b;       /* メインの緑 */
  --plan-green-soft: #eef3ef;  /* 薄い緑(背景) */
  --plan-line: #c9d6cc;        /* 枠線 */
  --plan-text-sub: #5b6760;    /* 補足の文字 */
}

/* 2. ファーストビュー --------------------------------------------- */
/* 写真(スマホでは一番上。高さを抑えて、料金とお申し込みボタンが1画面目に残るようにする) */
.plan-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
@media (max-width: 991.98px) {
  .plan-hero { padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 0; }
  .plan-hero img { max-height: 32vh; }   /* スマホでは画面の約3分の1まで */
}

.plan-place { color: var(--plan-text-sub); }

.plan-h1 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: .25rem;
}

.plan-subtitle {
  color: var(--plan-text-sub);
  margin-bottom: .75rem;
}

.plan-term {
  margin-bottom: .75rem;
  font-weight: 700;
  color: var(--plan-green);
}
.plan-term span + span::before { content: "・"; }

/* 料金カード */
.plan-price {
  background: var(--plan-green-soft);
  border: 2px solid var(--plan-green);
  border-radius: 10px;
  padding: 1rem;
}
.plan-price-head {
  margin: 0 0 .5rem;
  font-size: .9rem;
  color: var(--plan-text-sub);
}

/* 泊数タブ(2泊3日 / 3泊4日) */
.plan-tabs { gap: .5rem; margin-bottom: .75rem; }
.plan-tabs .nav-link {
  border: 1.5px solid var(--plan-green);
  border-radius: 8px;
  color: var(--plan-green);
  background: #fff;
  font-weight: 700;
  padding: .4rem 1.2rem;
}
.plan-tabs .nav-link.active {
  background: var(--plan-green);
  color: #fff;
}

.plan-price-list { margin: 0; }
.plan-price-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .35rem 0;
  border-bottom: 1px dotted var(--plan-line);
}
.plan-price-list dt { font-weight: 400; margin: 0; }
.plan-price-list dd { margin: 0; text-align: right; }
.plan-price-list strong {
  font-size: 1.4rem;
  color: var(--plan-green);
}
.plan-price-golf {
  margin: .5rem 0 0;
  font-size: .9rem;
  color: var(--plan-green);
  font-weight: 700;
}
.plan-price-notes {
  margin: .75rem 0 0;
  padding-left: 1.2rem;
  font-size: .85rem;
  color: var(--plan-text-sub);
}

/* お申し込みボタン(幅いっぱい) */
.plan-btn-block {
  display: block;
  margin: 0 5px;
  text-align: center;
}

/* 特徴バッジ */
.plan-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.plan-badges li {
  border: 1px solid var(--plan-green);
  background: var(--plan-green-soft);
  color: var(--plan-green);
  border-radius: 999px;
  padding: .2rem .8rem;
  font-size: .85rem;
  font-weight: 700;
}

/* ゴルフ場・ホテルの行 */
.plan-facts > div {
  display: flex;
  gap: 1rem;
  padding: .3rem 0;
  border-top: 1px solid var(--plan-line);
  font-size: .9rem;
}
.plan-facts dt { flex: 0 0 5.5em; font-weight: 700; margin: 0; }
.plan-facts dd { margin: 0; }

/* 3. おすすめポイント(カード) ------------------------------------- */
.plan-lead { line-height: 1.8; margin-bottom: 1.5rem; }   /* 紹介文とカードの間の余白 */
.plan-card {
  background: #fff;
  border: 1px solid var(--plan-line);
  border-radius: 10px;
  padding: 1.4rem 1.5rem;        /* 枠と文章の余白 */
}
.plan-card p { line-height: 1.8; }
.plan-card-img {                 /* カードの画像(見出しと説明の間) */
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  margin: .25rem 0 1rem;
}
.plan-card-head {            /* 番号と見出しを横に並べる */
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .9rem;
}
.plan-card-no {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  border-radius: 50%;
  background: var(--plan-green);
  color: #fff;
  font-weight: 700;
}
.plan-card-title { font-size: 1.1rem; font-weight: 700; margin: 0; }

/* 4. 申込の流れ・よくある質問 -------------------------------------- */
.plan-flow {
  list-style: none;
  counter-reset: plan-step;
  padding: 0;
  margin: 1rem 0;
  display: grid;
  gap: .75rem;
}
@media (min-width: 835px) {
  .plan-flow { grid-template-columns: repeat(4, 1fr); }
}
.plan-flow li {
  counter-increment: plan-step;
  background: var(--plan-green-soft);
  border: 1px solid var(--plan-line);
  border-radius: 10px;
  padding: .8rem 1rem .8rem 3rem;
  position: relative;
}
.plan-flow li::before {
  content: counter(plan-step);
  position: absolute;
  left: .8rem;
  top: .8rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--plan-green);
  color: #fff;
  display: flex;                 /* 数字を丸の真ん中(上下左右)に置く */
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 700;
}
.plan-flow strong { display: block; line-height: 1.8rem; margin-bottom: .5rem; }   /* 丸(高さ1.8rem)と、見出しの上下の中心をそろえる */   /* 見出しと説明の間の余白(パソコン・スマホ共通) */
.plan-flow span { display: block; font-size: .9rem; line-height: 1.7; color: var(--plan-text-sub); }

.plan-faq details {
  border: 1px solid var(--plan-line);
  border-radius: 8px;
  padding: .75rem 1rem;
  margin-bottom: .5rem;
  background: #fff;
}
.plan-faq summary { font-weight: 700; cursor: pointer; }
.plan-faq details p { margin: .5rem 0 0; }

/* 5. 料金一覧(表) ------------------------------------------------ */
.plan-fee-head { font-size: 1.1rem; font-weight: 700; margin: .5rem 0; }
.plan-fee-table { border: 1px solid var(--plan-line); text-align: center; }
.plan-fee-table thead th {
  background: var(--plan-green);
  color: #fff;
  font-weight: 700;
  border-color: var(--plan-green);
  vertical-align: middle;
}
.plan-fee-table tbody th { text-align: left; background: var(--plan-green-soft); font-weight: 700; }
.plan-fee-table tbody th small { display: block; font-weight: 400; color: var(--plan-text-sub); }
.plan-fee-table td, .plan-fee-table th { padding: .8rem .6rem; vertical-align: middle; }
.plan-fee-table td strong { font-size: 1.15rem; color: var(--plan-green); white-space: nowrap; }
.plan-fee-table td span { display: block; font-size: .85rem; color: var(--plan-text-sub); }

/* 6. モデルスケジュール ------------------------------------------ */
.plan-day {
  background: #fff;
  border: 1px solid var(--plan-line);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
}
.plan-day-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 700;
}
.plan-day-no {
  background: var(--plan-green);
  color: #fff;
  border-radius: 999px;
  padding: .1rem .8rem;
  font-size: .9rem;
}
/* 縦の時系列(点と線) */
.plan-timeline { list-style: none; margin: 0; padding: 0 0 0 1.2rem; border-left: 2px solid var(--plan-line); }
.plan-timeline li { position: relative; padding: 0 0 .8rem .4rem; line-height: 1.7; }
.plan-timeline li:last-child { padding-bottom: 0; }
.plan-timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1.2rem - 6px);
  top: .55rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--plan-green);
}
.plan-time { color: var(--plan-green); }
.plan-schedule-note { margin-top: 1rem; color: var(--plan-text-sub); font-size: .9rem; }

/* 7. ゴルフ(コースのカード) -------------------------------------- */
.plan-club-name { font-size: 1.25rem; font-weight: 700; margin: .5rem 0 .25rem; }
.plan-club-summary { color: var(--plan-text-sub); margin-bottom: 1rem; }

/* スマホ: 横スクロール(次のカードが少し見える) / パソコン: 3枚を横に並べる */
.plan-courses { display: flex; gap: 1rem; }
.plan-courses-scroll {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .5rem;
  -webkit-overflow-scrolling: touch;
}
.plan-course {
  flex: 0 0 86%;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--plan-line);
  border-radius: 10px;
  overflow: hidden;
}
@media (min-width: 992px) {
  .plan-courses-scroll { overflow: visible; }
  .plan-course { flex: 1 1 0; min-width: 0; }
  .plan-scroll-hint { display: none; }
}
.plan-course-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.plan-course-body { padding: 1rem 1.2rem 1.2rem; }
.plan-course-name { font-size: 1.1rem; font-weight: 700; margin: 0 0 .5rem; }
.plan-course-body p { line-height: 1.8; }
.plan-scroll-hint { text-align: center; font-size: .85rem; color: var(--plan-text-sub); margin: .25rem 0 1rem; }

/* 折りたたみ(名物ホール・スコアカード・動画・申込FAQ共通の見た目) */
.plan-fold details {
  border-top: 1px solid var(--plan-line);
  padding: .6rem 0;
}
.plan-fold summary { font-weight: 700; cursor: pointer; color: var(--plan-green); }
.plan-fold details p { margin: .5rem 0 0; font-size: .95rem; }
.plan-movie { margin-top: .6rem; aspect-ratio: 16 / 9; }
.plan-movie iframe { width: 100%; height: 100%; border: 0; }

/* スコアカード(Blue・White・Redのティー別) */
.plan-scorecard { font-size: .8rem; text-align: center; margin: .6rem 0 0; white-space: nowrap; }
.plan-scorecard th, .plan-scorecard td { padding: .25rem .35rem; }
.plan-tee-par   { background: #e9ecef; }
.plan-tee-blue  { background: #dbe7f7; }
.plan-tee-white { background: #f8f9fa; }
.plan-tee-red   { background: #f8dede; }

/* 8. ホテル -------------------------------------------------------- */
.plan-hotel-name { margin-bottom: 1rem; }   /* ホテル名と写真の間の余白(パソコン・スマホ共通) */
.plan-hotel-hero { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.plan-hotel-lead h4 { font-size: 1.1rem; font-weight: 700; margin-top: 0; }
.plan-hotel-lead p { line-height: 1.8; }
.plan-facility { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1rem 0 1.5rem; }
.plan-facility figure { margin: 0; }
.plan-facility img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.plan-facility figcaption { text-align: center; font-size: .85rem; color: var(--plan-text-sub); margin-top: .25rem; }

.plan-room {
  background: #fff;
  border: 1px solid var(--plan-line);
  border-radius: 10px;
  padding: 1.2rem 1.4rem 1.4rem;
}
.plan-room-name { font-size: 1.15rem; font-weight: 700; margin: 0 0 1rem; padding-left: .7rem; border-left: 5px solid var(--plan-green); }
.plan-room-main { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; }
.plan-room-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .6rem; }
.plan-room-thumbs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.plan-room-thumbs-3 { grid-template-columns: 1fr 1fr 1fr; }   /* 小さい写真が3枚のとき */
.plan-room + .plan-room { margin-top: 1.5rem; }            /* 枠付きブロックが続くときの間隔 */
.plan-room p { line-height: 1.8; }
.plan-specs { margin: 1rem 0 0; }
.plan-specs > div { display: flex; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--plan-line); }
.plan-specs dt { flex: 0 0 4.5em; font-weight: 700; margin: 0; }
.plan-specs dd { margin: 0; }

/* 9. 施設(クリックして開く) --------------------------------------- */
.plan-acc-lead { color: var(--plan-text-sub); font-size: .9rem; margin-bottom: .75rem; }
.plan-acc details {
  background: #fff;
  border: 1px solid var(--plan-line);
  border-radius: 10px;
  margin-bottom: .75rem;
  overflow: hidden;
}
.plan-acc summary {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: 1rem 3rem 1rem 1.2rem;     /* 右の空きに「＋」を置く */
  cursor: pointer;
  list-style: none;
  position: relative;
}
.plan-acc summary::-webkit-details-marker { display: none; }
.plan-acc summary::after {
  content: "＋";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--plan-green);
  font-weight: 700;
}
.plan-acc details[open] summary { background: var(--plan-green-soft); }
.plan-acc details[open] summary::after { content: "－"; }
.plan-acc-name { font-size: 1.1rem; font-weight: 700; }
.plan-acc-sub { font-size: .85rem; color: var(--plan-text-sub); }
.plan-acc-body { padding: 1rem 1.2rem 1.2rem; }
.plan-acc-body p { line-height: 1.8; }
.plan-acc-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
.plan-acc-imgs-one { grid-template-columns: 1fr; }
.plan-acc-imgs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.plan-acc-imgs-one img { aspect-ratio: 16 / 9; }

/* 10. フッターの左右の余白 ------------------------------------------
   既存フッターは、枠のクラス名が "contaier"(containerの綴り違い)で、左右の余白が付いていません。
   共通のフッターは他のページでも使うので触らず、新レイアウトのページだけ、ここで余白を付けます。 */
.simple_footer-top .contaier { padding-left: 1rem; padding-right: 1rem; }

/* 11. 固定バーの下の空き(フッターがバーに隠れないように) ----------- */
.plan-bar-spacer { height: 6.5rem; }

/* 12. LINE・お申し込みボタンの文字を上下中央に -----------------------
   2つのボタンは文字の大きさが違い、横に並べると高さがそろって、小さい文字が上に寄っていました。
   ボタンの中身を flex にして、どちらの文字も上下の中央に置き、文字の大きさ・高さもそろえます。 */
#application .btn-line,
#application .btn-stitch,
.application .btn-line,
.application .btn-stitch {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 1.1rem;        /* 2つのボタンの文字の大きさをそろえる */
  line-height: 1.4;
  padding-top: .6rem;
  padding-bottom: .6rem;
}

/* 13. 上のメニュー(固定・移動先の位置) ---------------------------------
   メニューは画面の上に固定されるので、リンクで移動したとき、見出しがメニューの下に隠れないようにします。 */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
.plan-nav { box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
@media (min-width: 992px) { html { scroll-padding-top: 4.5rem; } }