/* ============================================================
   rental-car-test.css — らくらく島旅 (/rental-car-test/) ページ固有CSS
   二次リリース⑥ 2026-08-14
   ・共通部品(sub-hero/page-intro/onsen-section-heading/anchor-nav/
     feature-block/spec-table-inline/btn-outline/related-section/is-bg-*)は
     /css/style.01f19af3.css と /css/shodoshima-kanko.fc315dbd.css 側。
     ここは番号付きポイント箱・写真グリッド・名所カード・CTA小物のみ。
   ・★本適用時: このファイルの中身で css/rental_car.css を置き換え、
     rental-car-test.css は削除する(公開中ガワページとの共存のための別名。
     詳細は 指示書-Code-二次リリース-06らくらく島旅.md)
   ============================================================ */

/* --- フロント案内・電話CTA (#rentacar) --- */
.rc-contact-note {
  margin-top: 20px;
  font-size: clamp(0.875rem, 0.75rem + 0.33vw, 0.9375rem);
  line-height: 1.9;
  color: var(--c-text-muted);
}
.rc-tel {
  margin-top: 8px;
}
.rc-tel a {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.28rem + 0.39vw, 1.75rem);
  letter-spacing: 0.06em;
  color: var(--c-text);
}
.rc-tel-note {
  margin-left: 8px;
  font-size: clamp(0.875rem, 0.75rem + 0.33vw, 0.9375rem);
  color: var(--c-text-muted);
}

/* --- 4つのポイント: 番号付き cream 箱 (#points)
       番号はCSSカウンタで自動採番(旧ページの字種混在を解消) --- */
.point-list {
  counter-reset: rc-point;
  list-style: none;
  max-width: 860px;
  margin: 48px auto 0;
  padding: 0 50px;
  display: grid;
  gap: 16px;
}
.point-item {
  counter-increment: rc-point;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--c-bg-cream);
  border-radius: var(--radius-sm);
  padding: 24px 28px;
}
.point-item::before {
  content: counter(rc-point);
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 500;
}
.point-title {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(1rem, 0.97rem + 0.13vw, 1.125rem);
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--c-text);
  margin-bottom: 6px;
}
.point-text {
  font-size: clamp(0.875rem, 0.45rem + 0.88vw, 1rem);
  line-height: 1.875;
  letter-spacing: 0.04em;
  color: var(--c-text-light);
  word-break: auto-phrase;
}

/* --- ドライブイメージ写真2点 (#points) --- */
.rc-photo-grid {
  max-width: 1000px;
  margin: 48px auto 0;
  padding: 0 50px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.rc-photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.rc-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- カーシェア (#carshare) --- */
.rc-toyota-logo {
  display: block;
  margin-top: 24px;
  width: 212px;
  max-width: 60%;
  height: auto;
}
.rc-carshare-cta {
  margin-top: 24px;
}

/* --- 島の名所カード (#spots / cream帯)
       画像/名称/公式サイトボタンの3行を subgrid で行揃え --- */
.rc-spots-lead {
  max-width: 860px;
  margin: 36px auto 0;
  padding: 0 50px;
  text-align: center;
  font-size: clamp(0.875rem, 0.45rem + 0.88vw, 1rem);
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--c-text-light);
  word-break: auto-phrase;
}
.rc-spot-grid {
  max-width: var(--container-width);
  margin: 48px auto 0;
  padding: var(--container-pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 30px;
}
.rc-spot-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0;
  background: #fff;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
.rc-spot-main {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: 0;
  color: inherit;
}
.rc-spot-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-bg-gray);
}
.rc-spot-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.rc-spot-main:hover .rc-spot-image img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .rc-spot-main:hover .rc-spot-image img { transform: none; }
}
.rc-spot-name {
  padding: 16px 20px 10px;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: clamp(0.9375rem, 0.91rem + 0.13vw, 1.0625rem);
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--c-text);
  transition: color 0.3s;
}
.rc-spot-main:hover .rc-spot-name { color: var(--c-accent); }
.rc-spot-official {
  justify-self: start;
  align-self: end;
  margin: 0 20px 18px;
  padding: 6px 14px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: clamp(0.8125rem, 0.75rem + 0.33vw, 0.9375rem);
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  transition: color 0.3s, border-color 0.3s;
  white-space: nowrap;
}
.rc-spot-official::after {
  content: "→";   /* 2026-08-14 チェックバック: 斜め上矢印(↗)→他ページ同様の右矢印へ */
  margin-left: 4px;
  font-size: 0.75em;
}
.rc-spot-official:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
}

/* --- セクション末尾の回遊ボタン --- */
.section-cta {
  margin-top: 56px;
  text-align: center;
}

/* --- SP --- */
@media (max-width: 767px) {
  .point-list { padding: 0 20px; gap: 12px; }
  .point-item { padding: 18px 16px; gap: 14px; }
  .point-item::before { width: 32px; height: 32px; font-size: 1.0625rem; }
  .rc-photo-grid { padding: 0 20px; gap: 12px; }
  .rc-spots-lead { padding: 0 20px; }
  .rc-spot-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 12px;
  }
  .rc-spot-name { padding: 12px 12px 6px; }
  .rc-spot-official { margin: 0 12px 14px; padding: 5px 12px; }
  .rc-toyota-logo { margin-top: 20px; }
  .section-cta { margin-top: 44px; }
}


/* --- セクション下端の余白 (2026-08-14 チェックバック対応) ---
   .l-section は共通CSSに定義が無く、余白は中身の部品任せのため、
   最後の子が margin のみのセクションは次セクションと密着していた。
   ページ側で一律に下パディングを確保する(帯セクションは帯の内側余白になる)。
   feature-block が最後のセクションは自前の下60pxを打ち消して計100pxに揃える。 */
.l-section.section-anchor { padding-bottom: 100px; }
.l-section.section-anchor > .feature-block:last-child { padding-bottom: 0; }
@media (max-width: 767px) {
  .l-section.section-anchor { padding-bottom: 64px; }
}

/* --- MVの背景位置 (#sub-hero・このページだけ)
       素材 rental-car-hero-v3.webp は黄色い車が左下にある。共通CSSの既定は .sub-hero-bg { background-position: center }。
       高さは style.css の body:has(.sub-hero) 上書きで PC 600px / SP 380px。cover の切れ方は
       幅 < 高さ×2.30 (=1380px@600px) なら左右が切れ、以上なら上下が切れる。
       bottom = 上下が切れる広い画面で車(下端)を残す(2026-09-08・元は index.html の inline style)。
       left 25% = 左右が切れる SP〜タブレット〜1380px未満で画像の左寄り(車)を見せる。
       1380px以上は左右の余りが0なので center と同じ見え方 → 全幅1本で足りる(SP専用のメディアクエリは不要)。
       (2026-09-10 hoshi指示・SAGYO_FORM_WEB-1018。当初SPだけ→同日タブレットも欠けるため全幅へ) --- */
.sub-hero .sub-hero-bg { background-position: left 25% bottom; }

/* --- MVの注記 (#sub-hero) PC=左下 / SP=右下
       素材に焼き込まれていた「※画像はイメージです。」を、cover で切れないよう
       HTMLテキストへ出した(2026-08-26 hoshi判断)。.sub-hero-content が z-index:1 なので 2 に載せる。
       PCは右下→左下(left:20px)へ(2026-09-10 hoshi指示・右下は明るい木々の上で読みにくい)。SPは右下のまま。
       font-size は PC 15px / SP 12px(注記の下限ルール = PC15px未満禁止・SPは12〜14px可) --- */
.sub-hero .sub-hero-note {
  position: absolute;
  left: 20px;
  bottom: 14px;
  z-index: 2;
  margin: 0;
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}
@media (max-width: 767px) {
  .sub-hero .sub-hero-note {
    left: auto;
    right: 14px;
    bottom: 10px;
    font-size: 12px;
  }
}