/* =========================================================
   theme.css — ゴルフお任せプランLP 配色テーマ
   配色は tachibana.com/sp/turtlebay.html のスクリーンショット
   から実測したカラーコードを使用(2026-07-11抽出)。
   変更はこの :root の変数を書き換えるだけで全体に反映。
   ========================================================= */
:root{
  --theme-primary:   #0098E0;  /* 見出し・h4帯 = タイトル青(実測 #0098E0前後) */
  --theme-primary-d: #0072B0;  /* ボタンhover等の濃色 */
  --theme-accent:    #F8F058;  /* 蛍光マーカー = 黄色マーカー(実測) */
  --theme-accent-2:  #9CCBF8;  /* 水色マーカー(実測 #98C8F8前後) */
  --theme-number:    #0098E0;  /* 番号チップ */
  --theme-button:    #0098E0;  /* 申込ボタン */
  --theme-bg-soft:   #DCEFFE;  /* 薄色セクション背景(実測) */
  --theme-bg-main:   #F4FAFF;  /* メインビジュアル下地 */
}

/* ---- 配色の上書き ---- */

h3{ color: var(--theme-primary); }
h3:after{ background: var(--theme-primary); }
.border-box.border{ border-color: var(--theme-primary); }
h4{ background: var(--theme-primary); }




a.button{ background: var(--theme-button); border-color: var(--theme-button); }
a.button::after{ background: var(--theme-primary-d); }
a.button:hover{ border-color: var(--theme-primary-d); }

/* ---- コースカード:写真の円形を解除(角丸なし) ---- */
.achievement .one-half figure img{ border-radius: 0; }

/* ---- コースカードのラベル:円形→マーカー風の帯(文字数可変に対応) ---- */
.achievement .one-half span{
  width: auto;
  height: auto;
  line-height: 1.6;
  padding: 2px 12px;
  border-radius: 0;
}

/* ---- メインビジュアル:背景写真(軽量jpg)+中央配置 ---- */
#mainVis{
  background: var(--theme-bg-main) url(../img/top/bg_main.jpg) center top / cover no-repeat;
  background-image: image-set(url(../img/top/bg_main.webp) type("image/webp"), url(../img/top/bg_main.jpg) type("image/jpeg"));
}


/* スマホ幅は元々中央(width:86%; margin:0 auto)のため変更なし */

/* =========================================================
   タイポグラフィ調整 (2026-07-11)
   - 見出しh3: 3.8rem(PC) / スマホは7vw
   - 本文ベース: 1.6rem / weight 400
   ========================================================= */
body{ font-size: 1.6rem; font-weight: 400; }

h3{ font-size: 7vw; }
h4{ font-size: 2rem; }

.txt-center p,
.benefit dd,
#voice-area .one-third dl dd,
.achievement .one-half dl dt,
#state-area figcaption,
.entry-box p{ font-size: 1.6rem; }


@media only screen and (min-width: 813px){body{ font-size: 1.6rem; }
  h3{ font-size: 3.6rem; }
  h3 span{ font-size: 1.4rem; }
  h4{ font-size: 2.2rem; }
  }


/* h3拡大に伴う下線位置の調整(英字ラベルの直下を維持) */
h3:after{ top: 32px; }

/* =========================================================
   レイアウト調整 v6 (2026-07-11)
   turtlebayカンプに合わせて写真を大きく表示
   ========================================================= */

/* ---- コースカード: 横並びサムネ→写真大判の縦積みカード(2列グリッドは維持) ---- */
.achievement .one-half figure{
  float: none;
  width: 100%;
  padding-left: 0;
}
.achievement .one-half figure img{
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  display: block;
}
.achievement .one-half dl {
  float: none;
  width: 100%;
}



/* ラベルを写真左上に重ねる */
.achievement .one-half span{
  top: 8px;
  left: 8px;
  z-index: 2;
}

/* ---- 当日の流れ: 3カラム(横並び)・写真は列幅いっぱい ---- */
#state-area figure img{
  width: 100%;
  height: auto;
  display: block;
}
#state-area figcaption{
  font-size: 1.5rem;
  padding-top: 6px;
  text-align: left;
}

/* ---- FAQ: 1問ずつ囲みのアコーディオン(details/summary・JS不要) ---- */
.faq-item {
  border: 1px solid var(--theme-primary);
  max-width: 820px;
  margin: 0 auto 14px;
  text-align: left;
}

.faq-item summary{
  list-style: none;
  cursor: pointer;
  /* チップ分を左paddingで確保し、折返しテキストが下に回り込まないようにする */
  padding: 16px 48px 16px 66px;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--theme-primary);
  position: relative;
  line-height: 1.6;
}
.faq-item summary::-webkit-details-marker{ display: none; }
/* 開閉マーク: 2本バー構成。閉=＋、開くと縦棒が90度回転して横棒に重なり1本に見える */
.faq-item summary::before,
.faq-item summary::after{
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--theme-primary);
}
.faq-item summary::after{
  transform: rotate(90deg);
  transition: transform .3s ease;
}
.faq-item[open] summary::after{ transform: rotate(0deg); }
.faq-item summary span,
.faq-item .faq-a span{
  position: absolute;
  left: 18px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: var(--theme-number);
  color: #fff;
}
.faq-item summary span{
  top: 50%;
  transform: translateY(-50%);  /* 行数によらず常に上下中央 */
}
.faq-item .faq-a span{ top: 14px; }
.faq-item .faq-a{
  overflow: hidden;      /* 開閉アニメーション用(高さのみアニメ) */
  position: relative;
}
.faq-item .faq-a-in{
  padding: 14px 18px 18px 66px;   /* 左paddingでチップ分を確保(回り込み防止) */
  font-size: 1.6rem;
  line-height: 1.9;
  border-top: 1px dashed #cfe3f2;
}
.faq-item .faq-a span{ background: var(--theme-accent-2); color: #1a3a55; }
.faq-item .faq-a a{ color: var(--theme-primary); text-decoration: underline; }


/* ---- ご注意事項(申込み下・小さめテキスト) ---- */
.caution-note{
  max-width: 720px;
  margin: 30px auto 0;
  text-align: left;
  font-size: 1.3rem;
  line-height: 1.9;
  color: #555;
}
.caution-note .caution-title{
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--theme-primary);
  margin-bottom: 6px;
}
.caution-note ul{ margin: 0; padding-left: 1.4em; }
.caution-note li{ list-style: disc; margin-bottom: 2px; }
.caution-note a{ color: var(--theme-primary); text-decoration: underline; }
.caution-note i, .benefit.faq i.tbd{
  font-style: normal;
  color: #C25B2A;
  font-size: 0.85em;
  margin-left: 4px;
}


/* ---- ロゴ: 横長比率(約7.8:1)に合わせて表示幅を調整 ---- */


footer img{ width: 260px; }
@media only screen and (min-width: 813px){footer img{ width: 340px; }}


/* ---- 当日の流れ: 時計+STEP番号ヘッダーと進行矢印 ---- */
.tl-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.tl-step{
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: var(--theme-primary);
  color: #fff;
  font-weight: 600;
  flex: none;
}
.tl-head .clock{
  width: 46px;
  height: 46px;
  flex: none;
}
.tl-time{
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--theme-primary);
  line-height: 1.3;
}
/* PC: 右向き矢印で左→右の進行を明示 */
@media only screen and (min-width: 813px){#state-area figure.one-third{ position: relative; }
  /* 矢印は画像ラッパー(.tl-img)基準で top:50% → 計算不要で常に画像の垂直中央 */
  #state-area .tl-img{ position: relative; }
  #state-area figure.one-third:not(:last-child) .tl-img::after{
    content: "▶";
    position: absolute;
    right: -12%;              /* DevTools実測: 画像間ギャップの中央 */
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-primary);
    font-size: 2.2rem;
    line-height: 1;
  }}

/* SP(縦積み): 下向き矢印 */
@media only screen and (max-width: 812px) {
#state-area figure.one-third:not(:last-child)::after {
  display: block;
  text-align: center;
  color: var(--theme-primary);
  font-size: 2rem;
  margin-top: 16px;
}
}



/* ---- コースカード v14: 白カード化+キャッチ/説明/特徴タグ ---- */
.achievement .one-half {
  border-bottom: none;
  box-shadow: 0 6px 20px rgba(0, 90, 150, .12);
  padding-bottom: 20px;
  overflow: hidden;
}

.achievement .one-half dl{ padding: 16px 18px 0; }
.course-catch{
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--theme-primary);
  line-height: 1.5;
  margin: 8px 18px 6px;
}
.course-desc{
  font-size: 1.5rem;
  line-height: 1.9;
  margin: 0 18px 12px;
}
.course-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 18px;
  padding: 0;
}
.course-tags li{
  list-style: none;
  background: var(--theme-bg-soft);
  color: var(--theme-primary);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 99px;
  white-space: nowrap;
}
.course-tags li::before{ content: "#"; margin-right: 2px; opacity: .55; }
@media only screen and (min-width: 813px){.achievement .one-half{ margin-bottom: 40px; }}



/* ---- コース名表記 v14.2: 英語(小)+日本語正式名(大) ---- */
.achievement .one-half dl dt{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;   /* 英字用 */
  font-size: 1.3rem;
  letter-spacing: .08em;
  color: #8a9aa5;
}
.achievement .one-half dl dd{
  font-size: 2rem;            /* SP: 長い正式名の折返しを考慮して控えめ */
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 20px;
}
@media only screen and (min-width: 813px){.achievement .one-half dl dd{ font-size: 2.4rem; }}


/* ---- 「コース例」ラベル: 白文字+ブルー背景で視認性向上 ---- */
.achievement .one-half span{
  background: var(--theme-primary);
  color: #fff;
}

/* ---- 本文強調: 太字+下線 ---- */
strong.u-line{
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--theme-primary);
}

/* 100vw全幅要素によるわずかな横スクロール発生を防止 */
body{ overflow-x: hidden; }

/* ---- コースカードのカルーセル(全幅・センターモード・ループ) ---- */
.course-carousel{
  position: relative;
  /* .contentsの幅制限を突き抜けて画面幅いっぱいに */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.course-carousel .achievement{
  display: flex;
  flex-wrap: nowrap;
  column-gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;              /* Firefox */
  padding: 10px 0 24px;
}
.course-carousel .achievement::-webkit-scrollbar{ display: none; }
.course-carousel .achievement .one-half{
  flex: 0 0 80vw;                      /* SP: 1枚+左右見切れ */
  width: auto;
  margin: 10px 0;
  scroll-snap-align: center;           /* 選択カードを中央に */
}
@media only screen and (min-width: 813px){.course-carousel .achievement .one-half{
    flex: 0 0 clamp(340px, 30vw, 460px);  /* 通常3枚+両端見切れ、大画面で最大4枚 */
    margin: 10px 0;
  }}

/* 左右の矢印 */
.cc-arrow{
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--theme-primary);
  font-size: 3rem;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 90, 150, .25);
  transition: background .15s, color .15s;
  padding: 0;
}
.cc-arrow:hover{ background: var(--theme-primary); color: #fff; }
.cc-prev{ left: 16px; }
.cc-next{ right: 16px; }
@media only screen and (max-width: 812px){.cc-arrow{ width: 40px; height: 40px; font-size: 2.4rem; line-height: 36px; }
  .cc-prev{ left: 6px; }
  .cc-next{ right: 6px; }}

/* インジケータ(ドット) */
.cc-dots{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.cc-dots button{
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background: #b9d9ef;
  cursor: pointer;
  padding: 0;
  transition: background .15s, transform .15s;
}
.cc-dots button.active{
  background: var(--theme-primary);
  transform: scale(1.25);
}

/* ---- 申込みセクションの整理 ---- */
.entry-items{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
}
.entry-items li{
  list-style: none;
  background: var(--theme-bg-soft);
  color: var(--theme-primary);
  font-size: 1.6rem;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 99px;
}
.entry-items li span{ margin-right: 4px; }
.entry-note{
  color: #555;
  margin-top: 25px;
  line-height: 1.9;
}
.entry-box p.entry-addr {
  /* .entry-box p(1.7rem)より2段階小さく */
  color: #777;
  margin-top: 10px;
  line-height: 1.9;
}

.entry-box p.entry-addr b{ color: var(--theme-primary); font-size: 1.5rem; }
@media only screen and (min-width: 813px){.entry-box a.button{ width: 340px; line-height: 56px; font-size: 1.8rem; }}


/* ---- 申込ボタンの矢印を上下中央に(元CSSのmargin-top:-20px固定値を補正) ---- */
a.button:before{
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
}

/* ---- セクション背景: 画像パターンを廃止し、ハワイの空と海のグラデーションへ ---- */
/* PLAN・FAQ(bg-01): 上からやわらかな陽射し、空から海へ沈むブルー */


/* ENTRY: 海から砂浜へ。下部に夕陽の照り返しをうっすらと */


/* ---- お任せプラン ５つのポイント: アイコン+番号見出し+説明の5カラム ---- */
.points-title{
  text-align: center;
  font-size: 2rem;
  color: #111;
  letter-spacing: .05em;
  line-height: 1.6;
  margin: 0 0 30px;
}
.points-title span{
  display: inline-block;
  position: relative;
  z-index: 1;
  font-weight: 500;
  line-height: 1.45;
  padding: 0 6px;
}
.points-title span::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: .08em;             /* 文字の下端に重ねる蛍光マーカー */
  width: 100%;
  height: .5em;
  background: var(--theme-accent);
  z-index: -1;
}
.points{
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 14px;
  row-gap: 30px;             /* はみ出しバッジ分の縦間隔 */
  padding-top: 16px;         /* 1段目のはみ出し分 */
}
.pt{
  background: #F4FAFE;
  padding: 42px 16px 20px;   /* バッジ内側半分+アイコンとの間隔 */
  text-align: center;
}
.pt-icon svg{
  width: 100px;
  height: 100px;
  display: inline-block;
}
.pt-head{
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 10px 0 8px;
}
.pt{ position: relative; container-type: inline-size; }
/* 見出し(最長10字)がカード幅で必ず1行に収まるよう、枠幅に追従させる(2026-07-14) */
.pt-head{ font-size: min(1.7rem, 1.35vw); }           /* fallback: cq非対応ブラウザ用 */
@supports (container-type: inline-size){
  .pt-head{ font-size: min(1.7rem, 9.6cqw); white-space: nowrap; }
}
.pt-no{
  /* カード上辺に半分はみ出すバッジ */
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  line-height: 32px;
  background: var(--theme-primary);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
  border-radius: 50%;             /* 円形バッジ */
}
.pt-desc{
  font-size: 1.4rem;
  line-height: 1.85;
  color: #444;
  text-align: left;
}
@media only screen and (min-width: 813px){.points{ grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .points-title{ font-size: 2.4rem; }}

@media only screen and (min-width: 480px) and (max-width: 812px){.points{ grid-template-columns: 1fr 1fr; }
  .pt:last-child{ grid-column: 1 / -1; }}


/* ---- 申込みボックス: プラン詳細と同形式(枠+ブルー帯見出し) ---- */
.entry-box.border-box{ padding: 0 25px 30px; }
.entry-box.border-box{
  max-width: 820px;        /* FAQと同じ幅に */
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 813px){.entry-box.border-box{ padding: 80px 32px 40px; }  /* h4帯分の上余白(DevTools調整 94→80px) */}

/* SP: 帯見出しを枠の端まで届かせる */
@media only screen and (max-width: 812px){.entry-box.border-box h4{ width: auto; margin: 0 -25px 20px; }}


/* ---- コンテンツ幅の拡大とカード拡大 (2026-07-11) ---- */
@media only screen and (min-width: 813px){/* 幅を1280pxまで拡大。min-width固定(1080px)を撤廃し、
     813〜1280pxは可変にして小さめ画面での見切れも解消 */
  .container .contents{
    min-width: 0;
    max-width: 1280px;
  }
}

/* 5つのポイント: 中間幅では3カラム(3+2)、広い画面で5カラム */
@media only screen and (min-width: 813px) and (max-width: 1079px){.points{ grid-template-columns: repeat(3, 1fr); }}

@media only screen and (min-width: 1080px){.points{ grid-template-columns: repeat(5, 1fr); }}



/* =========================================================
   全体背景 v23: セクションごとの塗り分けをやめ、
   ページ全体をひと続きの淡いグラデーション(ぼかしブロブ)に。
   MoneyForwardクラウド with AI のLPを参考。
   ========================================================= */
#wrapper{ background: transparent; }
body{ background: #FBFDFF; }
/* ページ全高に1枚敷く連続レイヤー。
   注: 元CSSで body{height:100%} のため body基準だと1画面分しか伸びない。
   全コンテンツを包む #wrapper(height:auto) に敷く */
#wrapper{ position: relative; }
#wrapper::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background:
    /* ドキュメント全体に沿って上→下へ蛇行させる色だまり(間に白の抜け) */
    radial-gradient(46vw 640px at 8% 2%,    rgba(0, 152, 224, .42), transparent 55%),
    radial-gradient(42vw 560px at 94% 10%,  rgba(122, 212, 255, .50), transparent 52%),
    radial-gradient(48vw 660px at 86% 30%,  rgba(96, 200, 132, .34), transparent 55%),
    radial-gradient(42vw 560px at 4% 44%,   rgba(0, 190, 205, .28), transparent 55%),
    radial-gradient(44vw 600px at 92% 60%,  rgba(255, 205, 130, .38), transparent 52%),
    radial-gradient(42vw 560px at 6% 74%,   rgba(120, 214, 160, .30), transparent 55%),
    radial-gradient(46vw 620px at 90% 88%,  rgba(122, 212, 255, .40), transparent 52%),
    radial-gradient(50vw 680px at 40% 100%, rgba(0, 152, 224, .32), transparent 55%);
}

/* セクションの塗り分けを解除(ひと続きの背景を見せる) */
.bg-01{ background: none; }
.bg-gry{ background: none; }
.bg-entry{ background: none; }

/* 背景が淡くなったぶん、浮かせる要素に最低限の白を保証 */
.border-box{ background: #fff; }
.faq-item{ background: #fff; }
.achievement .one-half{ background: #fff; }

/* フッターは白のまま(ページの終端として軽く区切る) */
footer{ background: rgba(255, 255, 255, .7); }

/* ポイント1: 支給イラストアイコン */
.pt-icon img{
  width: 100px;
  height: 100px;
  object-fit: contain;
  display: inline-block;
}


/* =========================================================
   フォント修正: 游ゴシック(Macで細く描画され太字が効きにくい)を
   Noto Sans JP + ヒラギノ優先のスタックに変更
   ========================================================= */
body{
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "メイリオ", Meiryo, sans-serif;
}

.entry-box .entry-items{
  margin-bottom: 14px;        /* ボタン自体のmargin-top15pxと合わせ約29pxに */
}

/* =========================================================
   ファーストビュー v24: 長文を圧縮し、価格とCTAを主役に
   ========================================================= */
/* scroll-behavior:smooth は jQuery animate(scrollTop) と競合するため削除(JSでスムース制御) */

/* 白パネルをCSS側で保証(内容量が変わっても収まる) */

















/* =========================================================
   申込み見出し「下記３点を記載の上、〜」: 統合定義
   (分散していた4箇所のルールをここに一本化)
   ========================================================= */
.entry-box .points-title{
  margin: 0 0 30px;
  font-size: 2.2rem;
  color: #111;
  letter-spacing: .05em;
  line-height: 1.6;
}
.entry-box .points-title span{
  display: inline-block;
  position: relative;
  z-index: 1;
  font-weight: 500;              /* 700→500 ミディアム(DevTools調整) */
  line-height: 1.45;
  padding: 0 6px;
}
.entry-box .points-title span::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: .08em;             /* 文字の下端に重ねる蛍光マーカー */
  width: 100%;
  height: .5em;
  background: var(--theme-accent);
  z-index: -1;
}
@media only screen and (min-width: 813px){.entry-box .points-title{ font-size: 2.4rem; }  /* 3rem→2.4rem(DevTools調整) */}


/* =========================================================
   v25: サイトヘッダー追加 + ファーストビューの高さ圧縮
   ========================================================= */
.site-header{
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #E3EEF6;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
.sh-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* 元CSSの a 色指定に勝つため詳細度を上げ、色はグローなしの白文字 */
.site-header a.sh-cta{
  display: inline-block;
  background: var(--theme-primary);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1;
  padding: 10px 26px 11px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition: opacity .2s, transform .2s;
  letter-spacing: 0.05em;
}
.site-header a.sh-cta:hover{
  opacity: .85;
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}
@media only screen and (max-width: 812px){.sh-cta{ font-size: 1.3rem; padding: 10px 18px; }}

.sh-logo{ display: inline-block; }
.sh-logo img {
  display: block;
}




/* ---- FVの高さを抑える(100vh固定を撤廃し、内容に沿った高さへ) ---- */
@media only screen and (min-width: 813px) {
#mainVis {
  height: auto;
  max-height: none;
  background-attachment: scroll;
  background-size: cover;
  background-position: center 35%;
}
/* パネル内のコンパクト化 */
}



/* =========================================================
   v25.1: サイズ修正(参照サイト実測: ヘッダー68px / FV約390px)
   ========================================================= */
/* 元CSSの header{height:60px/120px, margin-bottom:20px} を打ち消す */
header.site-header{
  height: auto;
  margin: 0;
}
/* fixedヘッダー分、本文を押し下げる(PC 68px / SP 58px) */
body{ padding-top: 68px; }


/* ページ内リンクの着地位置をヘッダー分ずらす */
#entry{ scroll-margin-top: 80px; }
/* 参照サイト実測(.brand-logo 高さ36px / ヘッダー68px)に合わせる */
.sh-inner{ padding: 16px 20px; }
.sh-logo img{ height: 36px; width: auto; }   /* 36 + 16×2 = 68px */



/* FV: パネルを左右2カラム化して高さを約390pxに圧縮 */
@media only screen and (min-width: 813px){#mainVis{
    padding: 32px 0 36px;
    min-height: 500px;
    display: flex;
    align-items: center;   /* min-heightで余白が出た際はパネルを上下中央に */
  }
  
  
  
  
  

                /* 左寄せ */
  
  
  
  

  
  }


/* 下マージン30px: 元CSSの .container .contents p:not(:last-child){margin-bottom:10px}
   (詳細度0,3,1)に勝つよう、セレクタを強化して確実に適用(PLAN/ENTRY共通) */
.container .contents p.points-title{
  margin-bottom: 30px;
}

/* ---- FAQ: ホバーでクリック可能なことを明示 ---- */
.faq-item summary{
  transition: background .15s, color .15s;
}
@media (hover: hover){.faq-item summary:hover{
    background: #EFF8FE;                       /* 行全体を淡ブルーに */
  }
  .faq-item summary:hover::before{
    transform: scale(1.25);                    /* 横棒を少し拡大 */
  }
  .faq-item summary:hover::after{
    transform: rotate(90deg) scale(1.25);      /* 縦棒(回転を維持したまま拡大) */
  }
  .faq-item[open] summary:hover::after{
    transform: rotate(0deg) scale(1.25);
  }}

/* キーボード操作時のフォーカスも同様に可視化 */
.faq-item summary:focus-visible{
  outline: 2px solid var(--theme-primary);
  outline-offset: -2px;
  background: #EFF8FE;
}

/* ---- スクロール表示アニメーション: fadeInのみ(UPなし) ---- */
/* ---- animate.css統合(v40_1): 旧css/animate.cssの全内容。リクエスト1本削減 ---- */
/* animate.css 最小版: 本LPで使用する animated + fadeIn のみを抽出
   (元は全アニメーション定義入りの56KB。未使用定義を削除) */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---- スクロールリビール(IntersectionObserver / WOW.js代替 v40) ----
   head早期スクリプトが html に .js-reveal を付与(IO対応ブラウザのみ)。
   非対応・JS無効時はマーカーが付かず従来どおり即時表示される。 */
.js-reveal .wow{ visibility: hidden; animation-name: none; }
.js-reveal .wow.is-revealed{ visibility: visible; animation-name: fadeIn; }

@media (prefers-reduced-motion: reduce){.wow{ animation: none !important; visibility: visible !important; }}


/* ---- REASON: ハワイでゴルフならTachibanaの理由(3カラム) ---- */
.reasons{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media only screen and (min-width: 813px){.reasons{ grid-template-columns: repeat(3, 1fr); gap: 24px; }}

.rs{
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 90, 150, .10);
  padding: 0 0 28px;
  text-align: center;
  overflow: hidden;
}
.rs-photo{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 6px;
}
.rs-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rs-head{
  font-size: 1.8rem;
  font-weight: 700;
  margin: 14px 24px 10px;
}
.rs-desc{
  font-size: 1.45rem;
  line-height: 1.95;
  text-align: left;
  color: #444;
  margin: 0 24px;
}


/* ---- ページトップへ戻るボタン(右下固定)。
       元CSSの p#page-top a (黒30px・fixed) に勝つよう同要素セレクタで上書き ---- */
p#page-top{
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
p#page-top.is-visible{
  opacity: 1;
  visibility: visible;
}
p#page-top a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  line-height: 1;
  background: var(--theme-primary);
  border-radius: 50%;
  text-decoration: none;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;   /* 固定ヘッダー(1000)より下 */
  transition: transform .2s, filter .2s;
}
p#page-top a:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
}
p#page-top svg{ width: 26px; height: 26px; display: block; }
@media only screen and (max-width: 812px){p#page-top a{ width: 48px; height: 48px; right: 16px; bottom: 16px; }
  p#page-top svg{ width: 22px; height: 22px; }}


/* ---- KV背景のクロスフェードスライド ---- */
#mainVis{
  position: relative;
  overflow: hidden;
}
.kv-slides{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.kv-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.kv-slide.is-active{ opacity: 1; }
.kv-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}


/* =========================================================
   SP検証(2026-07-11)による修正: 375px幅でのヘッダー収まり
   ========================================================= */
@media only screen and (max-width: 812px){.sh-inner{ padding: 12px 14px; gap: 10px; }
  .sh-logo img{ height: 24px; width: auto; }          /* 幅約188px */
  .site-header a.sh-cta{ font-size: 1.2rem; padding: 9px 14px; }
  /* ヘッダー実高 24+24+1=49px に合わせて本文押し下げを再調整 */
  body{ padding-top: 49px; }
  #entry{ scroll-margin-top: 60px; }
  /* ヒーロー価格はSPで一段階縮小(横幅っぱいを防ぐ) */
  }


/* =========================================================
   SP見出しのvwベース再設計(2026-07-11)
   - 不自然な位置での改行を防ぐため、サイズはvw基準+remキャップ
   - .nb: 意味の切れ目でのみ折り返すためのユニット
   ========================================================= */
.nb{ display: inline-block; font-weight: inherit; }
/* h3内では英字ラベル(h3 span: block/1.3rem/margin)のスタイルを打ち消す */
h3 span.nb{
  display: inline-block;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  line-height: inherit;
}

@media only screen and (max-width: 812px) {
/* セクション見出し: 7vw→6vwに縮小し、14文字が1行に収まる設計
     (393px: 23.6px / 360px: 21.6px)。remキャップでタブレット肥大を防止 */
h3{
    font-size: min(6.2vw, 3.8rem);
    line-height: 1.35;
  }
/* 青帯見出し(プラン詳細/お申込みは〜) */
h4{ font-size: min(4.6vw, 2.2rem); }
/* ヒーローのキャッチ(黄マーカー) */
/* 黄マーカー見出し(5つのポイント/下記3点〜) */
/* REASONカード見出し */
.rs-head{ font-size: min(4.2vw, 1.8rem); }
/* FAQ質問文 */
}



/* =========================================================
   SPのborder-box内側余白(2026-07-11)
   元CSSはSPで padding-bottom:20px のみ → 左右上の余白を確保
   ========================================================= */
@media only screen and (max-width: 812px){.border-box{
    padding: 0 16px 24px;
  }
  /* 青帯(h4)は枠の端まで届かせる(entry-boxと同じ手法) */
  .border-box > h4{
    width: auto;
    margin: 0 -16px 22px;
  }
  /* entry-boxは独自padding(0 25px 30px)を維持しているため帯も-25pxのまま(既存指定) */
  /* ポイントカード同士の縦間隔を少し広げる */
  .points{ row-gap: 34px; }}


/* =========================================================
   5つのポイント: SPを2カラム化(2026-07-11)
   ========================================================= */
@media only screen and (max-width: 479px){/* 従来1列 → 2列に */
  .points{ grid-template-columns: repeat(2, 1fr); column-gap: 10px; }}

@media only screen and (max-width: 812px){.pt{ padding: 36px 8px 16px; }
  .pt-icon svg{ width: 72px; height: 72px; }
  .pt-head{ font-size: min(1.5rem, 3.3vw); }          /* fallback */
  @supports (container-type: inline-size){
    .pt-head{ font-size: min(1.5rem, 9.6cqw); }
  }
  .pt-desc{ font-size: 1.2rem; line-height: 1.7; }
  /* 5枚目(奇数余り)は全幅にして収まりを整える */
  .points .pt:nth-child(5){ grid-column: 1 / -1; }}


/* =========================================================
   SP微調整第2弾(2026-07-11): カルーセル縮小/タイムライン縦線/
   FAQ縮小/申込みの改行整理
   ========================================================= */
@media only screen and (max-width: 812px) {
/* --- ② コースカード: 縦長解消のため文字を一段縮小 --- */
.achievement .one-half dl{ padding: 12px 14px 0; }
.achievement .one-half dl dt{ font-size: min(3.4vw, 1.4rem); }
.achievement .one-half dl dd{ margin-bottom: 15px; }  /* DevTools実測(2026-07-11) SP: 20px→15px */
.course-catch{ font-size: min(3.4vw, 1.4rem); line-height: 1.5; margin-left: 14px; margin-right: 14px; }
.course-desc{ font-size: 1.3rem; line-height: 1.8; margin: 0 14px 10px; }
.course-tags{ margin: 0 14px; }
/* --- ③ 当日の流れ: 縦線タイムライン化 --- */
#state-area figure.one-third{
    position: relative;
    padding-left: 52px;
    margin-bottom: 28px;
  }
/* 縦の接続線(次のステップまで届かせる)。最後のステップは線なし */
#state-area figure.one-third:not(:last-child)::before{
    content: "";
    position: absolute;
    left: 17px;               /* バッジ中心(19px)に合わせる */
    top: 10px;
    bottom: -28px;            /* margin-bottom分も跨いで次へ */
    width: 3px;
    border-radius: 2px;
    background: var(--theme-accent-2);
  }
/* ステップ番号バッジを線上に配置 */
#state-area .tl-step{
    position: absolute;
    left: 1px;
    top: 4px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #fff;  /* 線との重なりを白フチで整理 */
    z-index: 1;
  }
/* ▼矢印は縦線に置き換えたため廃止 */
#state-area figure.one-third:not(:last-child)::after{ content: none; }
.tl-time{ font-size: min(4.2vw, 1.7rem); }
.tl-head .clock{ width: 40px; height: 40px; }
/* --- ④ FAQ: 文字サイズを一段縮小 --- */
.faq-item summary{ font-size: min(4vw, 1.6rem); padding: 14px 42px 14px 58px; }
.faq-item summary span,
  .faq-item .faq-a span{ left: 14px; }
.faq-item .faq-a-in{
    font-size: 1.3rem;
    padding: 14px 16px 16px 58px;  /* summaryと左端を揃える */
  }
/* --- ⑤ 申込み: 黄マーカー見出しを1行収まりに/本文は左寄せで自然な折返しに --- */
.points-title span,
  .entry-box .points-title span{ font-size: min(4.6vw, 2rem); }
.entry-box p{
    text-align: left;
    line-height: 1.8;
  }
}



/* =========================================================
   SP微調整第3弾(2026-07-11)
   ========================================================= */
@media only screen and (max-width: 812px) {
/* --- ポイント見出し: 太字で統一(700) --- */
.pt-head{ font-weight: 700; }
/* --- カルーセル: ゴルフ場名(和名)が折り返さないサイズに ---
     最長「ロイヤル・クニア・カントリークラブ」16字
     カード幅80vw - dl左右padding28px → 16字が収まる上限 ≒ 4.5vw */
.achievement .one-half dl dd{ font-size: min(4.2vw, 1.8rem); line-height: 1.4; }
/* --- タグはさらに小さく --- */
.course-tags li{ font-size: min(2.8vw, 1.1rem); padding: 3px 9px; }
/* --- 申込みボックスの黄マーカー見出し: 中央揃え+下余白 --- */
.container .contents p.points-title {
  margin-bottom: 20px;
  text-align: center;
}

/* --- 本文系テキストをSPでは1.5remに --- */
.txt-center p,
  .benefit dd,
  #voice-area .one-third dl dd,
  .achievement .one-half dl dt,
  #state-area figcaption,
  .entry-box p{ font-size: 1.5rem; }
}



/* =========================================================
   SP余白調整(2026-07-11): 見出し直下の空きすぎを解消
   ========================================================= */
@media only screen and (max-width: 812px){/* 元テンプレートの margin-top:25px が h3のmargin-bottomと二重になっていた */
  #state-area .one-third{ margin-top: 0; }
  /* ステップ間は margin-bottom:28px のみに一本化 */}


/* =========================================================
   申込みチップ①②③をSPでも1行に(2026-07-11)
   ========================================================= */
@media only screen and (max-width: 812px){.entry-items{
    flex-wrap: nowrap;        /* 3つを同じ列に固定 */
    gap: 6px;
  }
  .entry-items li{
    white-space: nowrap;
    font-size: min(3.1vw, 1.3rem);
    padding: 7px 9px;
  }}


/* =========================================================
   「５つのポイント」の5を強調(2026-07-11) PC/SP共通
   ========================================================= */
.points-title .num-big{
  font-style: normal;
  font-weight: 700;
  font-size: 1.7em;            /* 親サイズ基準なのでPC/SPどちらも比率で拡大 */
  line-height: 1;
  vertical-align: -0.08em;     /* ベースラインを揃えて浮きを防ぐ */
  margin: 0 -0.06em;           /* 両脇をカーニングで詰める */
  letter-spacing: normal;      /* 親の.05emを打ち消し */
  color: var(--theme-primary);
}
/* PCのみ: 「5」をさらに大きく(2026-07-11指定) */
@media only screen and (min-width: 813px){
  .points-title .num-big{
    font-size: 2.4em;
    margin: 0 -0.08em 0 -0.23em;
  }
}

/* =========================================================
   SP: ポイントカードのアイコン上下余白を圧縮(2026-07-11)
   ========================================================= */
@media only screen and (max-width: 812px){.pt{ padding-top: 30px; }              /* 36px → 30px */
  .pt-icon svg{
    display: block;                       /* inline-block由来の行間の隙間を除去 */
    margin: 0 auto;
  }
  .pt-head{ margin: 6px 0 6px; }          /* 10px 0 8px → 上下6px */}


/* =========================================================
   カルーセル: コース名 英語(dt)と日本語(dd)の間に余白(2026-07-11)
   ========================================================= */
.achievement .one-half dl dt{ margin-bottom: 4px; }

/* =========================================================
   申込みボックスの本文サイズ最終調整(2026-07-11)
   entry-addr=1.3rem (entry-noteのfont-sizeは継承に統一)
   ========================================================= */
.entry-box p.entry-addr{ font-size: 1.3rem; }

/* PLAN導入文と後続要素の間隔(2026-07-11) SPのみ */
@media only screen and (max-width: 812px){
  .txt-center{ margin: 0 auto 20px; }
}

/* コースカード: タグ上マージン(2026-07-11) */
@media only screen and (max-width: 812px){
  .course-tags{ margin-top: 12px; }
}


/* =========================================================
   KVバナー(2026-07-11): テキストパネル廃止→画像バナーへ
   - PC: 1100×400のバナーをKV中央に配置
   - SP: KV自体を100vw×100vwの正方形にし、バナーで全面を占有
   - 画像は img/top/banner_pc.png / banner_sp.png を差し替え
   ========================================================= */
#mainVis .kv-banner{
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#mainVis .kv-banner img{
  display: block;
  width: 1100px;
  max-width: 94%;   /* 1100px未満のウィンドウでもはみ出さない */
  height: auto;
}
@media only screen and (max-width: 812px){
  #mainVis{
    width: 100%;
    height: 100vw;            /* KV自体を正方形に */
  }
  #mainVis .kv-banner{
    height: 100%;
  }
  #mainVis .kv-banner img{
    width: 100%;
    max-width: none;
    height: 100%;             /* 100vw×100vwの正方形バナー */
    object-fit: cover;
  }
}

/* FontAwesome非読込時の矢印代替 */
a.button:before{content:"\203A" !important; font-family:inherit !important; font-size:1.8rem;}