/*
 * フロントLP（front-page.php）専用スタイル。
 * v171 01_top.html の <style> インラインブロックをそのまま移植。
 * ヒーロー・特集ストリップ・パッケージカード・関係人口フォト・CTA帯はこのファイルでのみ定義される
 * （共通の components.css には含まれない）。is_front_page() のときだけ読み込む。
 */

.hero {
  position: relative;
  min-height: 660px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}
.hero-media { position: absolute; inset: 0; z-index: 0; background: #0F2733; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.2s ease, transform 6s ease;
}
.hero-slide.is-active { opacity: 1; transform: scale(1); }
.hero-slide.s1 { background: linear-gradient(160deg, #2E5A6E 0%, #16374A 60%, #0F2733 100%); }
.hero-slide.s2 { background: linear-gradient(160deg, #C7B79B 0%, #A98F68 60%, #7C6A4A 100%); }
.hero-slide.s3 { background: linear-gradient(160deg, #6E5566 0%, #3E3C57 55%, #232A3E 100%); }
.hero-slide.s4 { background: linear-gradient(160deg, #5C8262 0%, #375845 55%, #20362B 100%); }
.hero-slide.s5 { background: linear-gradient(160deg, #E4B583 0%, #C98A6E 50%, #7E5A6A 100%); }
.hero-kv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-kv-caption {
  position: absolute; z-index: 2;
  left: 50%; transform: translateX(-50%); bottom: 58px;
  font-size: var(--fs-12); font-weight: 500; color: rgba(255,255,255,0.72);
  background: rgba(15,39,51,0.4); border: 1px dashed rgba(255,255,255,0.35);
  border-radius: 999px; padding: 6px 16px; white-space: nowrap;
  max-width: 90%; overflow: hidden; text-overflow: ellipsis;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(105deg, rgba(11,30,40,0.80) 0%, rgba(11,30,40,0.48) 45%, rgba(11,30,40,0.15) 100%),
    linear-gradient(0deg, rgba(11,30,40,0.55), transparent 45%);
}
.hero-dots {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 26px;
  display: flex; justify-content: center; gap: 10px;
}
.hero-dots button {
  width: 9px; height: 9px; padding: 0; border: none; border-radius: 999px;
  background: rgba(255,255,255,0.4); cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.hero-dots button.is-active { width: 26px; background: #fff; }
/* 押せる的を広げる。背景を content-box に限るので、見た目の点は 9px のまま。

   ユーザーテストで3名が「スライドが自動で切り替わるだけで、手動では選べない」と答えた。
   実際は押せば切り替わる（実測）。9px の点はマウスでも的が小さく、
   そもそも押せる部品だと思われていなかった。 */
.hero-dots button {
  padding: 12px 4px;
  background-clip: content-box;
  box-sizing: content-box;
}
/* 指で押せる大きさ（44px）を確保する。 */
@media (max-width: 860px) {
  .hero-dots button { padding: 18px 4px; }
}
.hero .wrap { position: relative; z-index: 2; padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
/* ドットは絶対配置なので、本文が折り返して伸びると最終行に食い込む。
   スマホ幅では説明文が3行になり、実測で本文の下端 425px にドットの上端 418px が
   重なっていた（ユーザーテストの「KV切り替えボタンが文章と重なる」）。
   本文の側に、ドットの帯（高さ45px＋下余白26px）ぶんの逃げを作る。 */
@media (max-width: 860px) {
  .hero .wrap { padding-bottom: calc(var(--sp-8) + 56px); }
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.75); text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 999px;
  padding: 6px 16px; margin-bottom: var(--sp-5);
}
.hero h1 { font-size: var(--fs-52); line-height: 1.3; font-weight: 900; max-width: 720px; }
.hero p.lead {
  margin-top: var(--sp-5); font-size: var(--fs-17); color: rgba(255,255,255,0.86);
  max-width: 620px; line-height: 1.9; text-wrap: pretty;
}

.feature-strip { background: var(--c-bg-alt); border-bottom: 1px solid var(--c-border); }
.feature-strip .grid-4 { padding: var(--sp-6) 0; }
.feature-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  text-align: center; font-size: var(--fs-13); font-weight: 700; color: var(--c-navy);
}
.feature-item .icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface); border: 1px solid var(--c-border); font-size: var(--fs-22);
}

.package-cards { padding: var(--sp-9) 0; }
.package-card { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.package-card .price-tag { font-size: var(--fs-13); color: var(--c-ink-soft); font-weight: 500; }
.package-card h3 { font-size: var(--fs-22); }
.package-card ul { margin: 0; padding-left: 20px; font-size: var(--fs-14); color: var(--c-ink-soft); line-height: 2; }
/* ボタンをカードの下端へ寄せる。
   2枚のカードは同じ高さに伸びるが、箇条書きの数が違う（基本4行／オプション3行）。
   ボタンが本文のすぐ後ろに続くと、行数の少ないほうだけ1行ぶん（実測28px）高い位置に付き、
   横に並べたときに揃わない。auto にして余りを上の余白へ送る。 */
.package-card .btn { margin-top: auto; }

/* デジタル島民会議。買う話（宿・パッケージ・法人）が終わったあと、島ガイドの前に置く枠。
   地は生成り（--c-bg）のまま。前後の .b2b と .island-guide（--c-bg-alt）に挟まれるので、
   ここで色を足すと帯が3本続いて、どこが区切りか分からなくなる。 */
.council-intro { padding: var(--sp-9) 0; }
.council-eyebrow {
  font-size: var(--fs-13); font-weight: 700; letter-spacing: 0.08em;
  color: var(--c-teal); margin: 0 0 var(--sp-2);
}
.council-lead {
  max-width: 720px; margin-top: var(--sp-3);
  color: var(--c-ink-soft); line-height: 1.9; text-wrap: pretty;
}
.council-points {
  list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
}
.council-points li {
  padding: var(--sp-5);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
}
/* 3枚は説明であってリンクではない。島ガイドのカードと同じ見た目にすると
   押せるものだと誤解されるので、hover の持ち上げは付けない。 */
.council-points h3 { font-size: var(--fs-16); color: var(--c-navy); line-height: 1.5; margin: 0 0 var(--sp-2); }
.council-points p { margin: 0; font-size: var(--fs-14); color: var(--c-ink-soft); line-height: 1.9; }
.council-note { margin-top: var(--sp-4); font-size: var(--fs-12); color: var(--c-ink-soft); line-height: 1.8; }
.council-cta {
  margin-top: var(--sp-6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
}
.council-cta-note { font-size: var(--fs-13); color: var(--c-ink-soft); }

/* 島ガイド（外部リンク）。ここにあった写真3枚の帯（.strip-photos / .photo-grid）と
   差し替えたので、その2クラスは使い手が居なくなり削除した。
   .ph-photo 自体はパッケージ写真と宿詳細のギャラリーで生きているので残っている。 */
.island-guide { padding: var(--sp-8) 0; background: var(--c-bg-alt); }
.island-guide-lead {
  max-width: 720px; margin-top: var(--sp-3);
  color: var(--c-ink-soft); line-height: 1.9; text-wrap: pretty;
}
.island-guide-list {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4);
}
/* カード全体をリンクにする。文字だけを的にすると押しにくいため。 */
.island-guide-card {
  display: flex; flex-direction: column; gap: 6px;
  height: 100%; padding: var(--sp-5);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.island-guide-card:hover { border-color: var(--c-teal); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.island-guide-card:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 2px; }
.island-guide-card .ig-title { font-size: var(--fs-16); font-weight: 700; color: var(--c-navy); line-height: 1.5; }
.island-guide-card .ig-desc { font-size: var(--fs-13); color: var(--c-ink-soft); line-height: 1.8; }
/* 押す前に「どこへ出て行くのか」を見せる。 */
.island-guide-card .ig-host {
  display: flex; align-items: center; gap: 5px; margin-top: auto; padding-top: var(--sp-2);
  font-size: var(--fs-12); color: var(--c-ink-soft); letter-spacing: 0.02em;
}
.island-guide-note { margin-top: var(--sp-4); font-size: var(--fs-12); color: var(--c-ink-soft); line-height: 1.8; }

.cta-band { background: var(--c-brand-surface); color: #fff; padding: var(--sp-8) 0; text-align: center; }
.cta-band h2 { font-size: var(--fs-30); }
.cta-band p { margin-top: var(--sp-3); color: rgba(255,255,255,0.75); }
.cta-band .btn-primary { margin-top: var(--sp-6); background: var(--c-inverse-btn-bg); color: var(--c-inverse-btn-ink); }
.cta-band .btn-primary:hover { background: var(--c-inverse-btn-bg-hover); }

@media (max-width: 860px) {
  .hero h1 { font-size: var(--fs-34); }
  .hero { min-height: auto; }
  /* 狭い画面では1列。2列のままだと日本語のタイトルが1文字ずつ折り返す。 */
  .island-guide-list { grid-template-columns: 1fr; }
  /* 3列のままだと1枚あたり100px前後になり、本文が読めない。 */
  .council-points { grid-template-columns: 1fr; }
}