/* ===== tokens ===== */
:root {
  --brand: #0a8a4d;
  /* 深緑（サイト基調色） */
  --ink: #1f2937;
  --text: #334155;
  --muted: #6b7280;
  --line: #e5e7eb;
  --bg: #f6f8f7;
  --white: #fff;
  --gold: #b88c2a;
  --maxw: 1080px;
  --radius: 14px;
  --shadow: 0 8px 28px rgba(0, 0, 0, .08);
  --space: clamp(16px, 2.5vw, 28px);
  --h1: clamp(28px, 4.5vw, 44px);
  --h2: clamp(24px, 3.2vw, 35px);
  --lead: clamp(15px, 2.2vw, 18px);
}

.site-header .container {
  max-width: 1200px;
}

/* ===== reset (最小限) ===== */
* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0
}

body {
  color: var(--ink);
  line-height: 1.75;
  background: #fff;
}

a {
  color: var(--brand);
  text-decoration: none
}

a:hover {
  opacity: .9
}

/* ===== common ===== */
.sub-container {
  max-width: var(--maxw);
  margin: auto;
  padding: 0 var(--space);
}

.sub-cta__inner {
  text-align: center;
}

.sub-section {
  padding: clamp(32px, 6vw, 64px) 0
}

.sub-section--light {
  background: var(--bg)
}

/* ===== スクロールフェードインアニメーション ===== */
body.js-ready .fade-target {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

body.js-ready .fade-target.fade-in {
  opacity: 1;
  transform: translateY(0);
}

body.js-ready .sub-cta {
  opacity: 1;
  transform: none;
  transition: none;
}

body.js-ready .sub-cta .sub-cta__inner {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

body.js-ready .sub-cta.fade-in .sub-cta__inner {
  opacity: 1;
  transform: translateY(0);
}

.sub-sec-title {
  font-size: var(--h2);
  margin: 0 0 14px;
  letter-spacing: .02em
}

.sub-sec-sub {
  font-size: .75em;
  color: var(--brand);
  margin-left: .4em
}

.sub-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px
}

/* ===== header band ===== */
.sub-page-header {
  position: relative;
  overflow: hidden;
  margin-top: -84px;
  padding-top: 84px;
}

.sub-page-header .sub-container {
  padding-top: 12px;
  padding-bottom: 12px;
}

.sub-hero-img {
  width: 100%;
  position: relative;
  top: 0;
}

.sub-hero-img .pc_only,
.sub-hero-img .sp_only {
  width: 100%;
  height: auto;
  display: block;
}

.sub-hero-img .sp_only {
  display: none;
}

.sub-hero-content {
  position: absolute;
  top: 60%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: left;
  width: 100%;
  padding: 0 var(--space);
  color: #fff;
}

.sub-hero-content .sub-title {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.sub-hero-content .sub-sub {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.sub-hero-content .sub-lead {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ===== hero animation ===== */
.sub-hero-content .sub-title,
.sub-hero-content .sub-sub,
.sub-hero-content .sub-lead {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 2s ease-out, transform 2s ease-out;
}

.sub-hero-content .sub-title.animate-in,
.sub-hero-content .sub-sub.animate-in,
.sub-hero-content .sub-lead.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.sub-breadcrumb {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px
}

.sub-breadcrumb a {
  color: var(--muted)
}

.sub-title {
  margin: .1em 0;
  font-size: var(--h1)
}

.sub-sub {
  color: var(--brand);
  font-weight: 600;
  margin-top: -6px
}

.sub-lead {
  color: var(--text);
  font-size: var(--lead);
  margin: 12px 0 18px
}

.sub-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

/* ===== buttons ===== */
.sub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  letter-spacing: .02em;
  transition: .2s
}

.sub-btn--brand {
  background: var(--brand);
  color: #fff
}

.sub-btn--line {
  background: #fff;
  border-color: var(--line);
  color: var(--ink)
}

.sub-btn--gold {
  background: linear-gradient(180deg, #d7b45c, #b88c2a);
  color: #fff;
  border: 0;
  box-shadow: 0 6px 20px rgba(184, 140, 42, .25)
}

.sub-cta-row--center {
  justify-content: center
}

.sub-sec-title--invert {
  color: #fff
}

.sub-cta {
  /*background: linear-gradient(180deg, rgba(10, 138, 77, .94), rgba(10, 138, 77, .88)), url("../img/cta-bg.jpg") center/cover no-repeat;*/
  background: #0b3a2b;
  color: #fff
}

.sub-cta__desc {
  opacity: .95;
  margin-bottom: 12px
}

/* ===== cards (items) ===== */
.sub-cards {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
}

.sub-card {
  display: flex;
}

.sub-card>div {
  display: flex;
  flex-direction: column;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 0;
  overflow: visible;
  transition: .18s;
  width: 100%;
  position: relative;
}

.sub-card>div:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow)
}

/* 吹き出し */
.sub-card>div[data-tooltip] {
  position: relative;
}

.sub-card>div[data-tooltip]:hover::before,
.sub-card>div[data-tooltip].tooltip-active::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  white-space: normal;
  width: 260px;
  max-width: calc(100vw - 40px);
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  opacity: 0;
  animation: tooltipFadeIn 0.2s ease-out forwards;
}

.sub-card>div[data-tooltip]:hover::after,
.sub-card>div[data-tooltip].tooltip-active::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
  z-index: 101;
  opacity: 0;
  animation: tooltipFadeIn 0.2s ease-out forwards;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 1200px) {

  .sub-card>div[data-tooltip]:hover::before,
  .sub-card>div[data-tooltip].tooltip-active::before {
    width: calc(100vw - 40px);
    max-width: 180px;
  }
}

/* スマホ版：吹き出しを画面内に収める */
@media (max-width: 768px) {
  .sub-card>div[data-tooltip] {
    --tooltip-left: 50%;
    --tooltip-right: auto;
    --tooltip-transform: translateX(-50%);
  }

  /* スマホ版ではホバーではなく、クラスで制御 */
  .sub-card>div[data-tooltip]:hover::before,
  .sub-card>div[data-tooltip]:hover::after {
    display: none;
  }

  .sub-card>div[data-tooltip].tooltip-active::before {
    /* JavaScriptで計算した位置を使用 */
    left: var(--tooltip-left, 50%);
    right: var(--tooltip-right, auto);
    transform: var(--tooltip-transform, translateX(-50%));
    width: calc(100vw - 40px);
    max-width: 200px;
    /* 画面端で見切れないように、左右のマージンを確保 */
    margin-left: 0;
    margin-right: 0;
    display: block;
  }

  .sub-card>div[data-tooltip].tooltip-active::after {
    /* 吹き出し本体と同じ位置に調整 */
    left: var(--tooltip-left, 50%);
    right: var(--tooltip-right, auto);
    transform: var(--tooltip-transform, translateX(-50%));
    display: block;
  }
}

.sub-card__icon {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin: 0;
  flex-shrink: 0;
}

.sub-card__ttl {
  font-weight: 700;
  padding: 12px 14px 4px;
  margin: 0;
}

.sub-card__sub {
  font-size: 12px;
  color: var(--muted);
  padding: 0 14px;
  margin: 0;
}

.sub-card__txt {
  font-size: 14px;
  color: var(--text);
  padding: 8px 14px 14px;
  margin: 0;
  line-height: 1.6;
  flex-grow: 1;
}

/* ============ Flow base ============ */
.flow {
  --maxw: 1080px;
  --gap: clamp(18px, 3vw, 28px);
  --radius: 16px;
  --shadow: 0 12px 34px rgba(0, 0, 0, .12);
  --ink: #1f2937;
  --muted: #6b7280;
  --brand: #0a8a4d;
  padding: clamp(28px, 5vw, 56px) 16px;
  background: #f8faf9;
}

.flow .container {
  max-width: var(--maxw);
  margin: 0 auto;
}




/* ============ Step ============ */
.flow-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--gap);
  margin: clamp(80px, 6vw, 120px) 0 clamp(160px, 10vw, 220px);
  position: relative;
}

.flow-step__media {
  margin: 0;
  overflow: hidden;
  box-shadow: var(--shadow);
  /* 任意：比率固定。必要なければ削除 */
  aspect-ratio: 16 / 9;
}

.flow-step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 半被せのカード */
.flow-step__card {
  background: #fff;
  box-shadow: var(--shadow);
  padding: clamp(18px, 2.4vw, 28px);
  translate: 0 50%;
  /* 画像に少し被せる */
  margin-left: -17%;
  position: relative;
  z-index: 2;
}

.flow-step:nth-child(even) .flow-step__card {
  /* 偶数行は左右反転の見た目と被せ方向を逆に */
  margin-left: 0;
  margin-right: -17%;
}

.flow-step__num {
  font: 700 clamp(18px, 2.5vw, 23px)/1.1 ui-sans-serif, system-ui, sans-serif;
  color: var(--brand);
  letter-spacing: .08em;
  margin: 0 0 8px;
}

.flow-step__hdg {
  margin: 0 0 6px;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.35;
  color: var(--ink);
}

.flow-step__txt {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

/* 交互レイアウト（偶数行で左右入れ替え） */
.flow-step:nth-child(even) {
  grid-template-columns: 1fr 1fr;
}

.flow-step:nth-child(even) .flow-step__media {
  order: 2;
}

.flow-step:nth-child(even) .flow-step__card {
  order: 1;
  margin-left: 0;
  margin-right: -17%;
}

/* 奇数（ステップ1と3）のカードを写真に被せる */
.flow-step:nth-child(odd) .flow-step__card {
  margin-left: -17%;
  margin-right: 0;
}

/* ============ SP ============ */
@media (max-width: 768px) {
  .flow-step {
    grid-template-columns: 1fr !important;
    gap: 14px;
    margin-bottom: 20px;
  }

  /* 写真は上、カードは下に配置（デフォルト） */
  .flow-step__media {
    order: 1;
    aspect-ratio: 5 / 3;
  }

  .flow-step__card {
    order: 2;
    translate: 0 0;
    margin: 24px auto 0;
    max-width: min(520px, calc(100% - 20px));
    width: 100%;
    padding: clamp(16px, 5vw, 24px);
  }

  .flow-step__hdg {
    font-size: clamp(16px, 4vw, 20px);
  }

  .flow-step__txt {
    font-size: clamp(13px, 3.6vw, 15px);
  }

  /* ステップ1と3をステップ2と同じレイアウトに */
  .flow-step:nth-child(odd) .flow-step__media {
    order: 1;
  }

  .flow-step:nth-child(odd) .flow-step__card {
    order: 2;
    translate: 0 0;
    margin: 24px auto 0;
    max-width: min(520px, calc(100% - 20px));
  }

  /* ステップ2のレイアウト（基準） */
  .flow-step:nth-child(even) .flow-step__media {
    order: 1;
  }

  .flow-step:nth-child(even) .flow-step__card {
    order: 2;
    translate: 0 0;
    margin: 24px auto 0;
    max-width: min(520px, calc(100% - 20px));
  }

  #step1 {
    margin-top: 50px !important;
  }

  .flow-step__card::before,
  .flow-step__card::after {
    inset-inline: 0;
  }
}

@media (max-width: 520px) {
  .flow-step__card {
    margin: 20px auto 0;
    max-width: calc(100% - 16px);
    padding: clamp(14px, 6vw, 22px);
  }

  .flow-step__hdg {
    font-size: clamp(15px, 5vw, 18px);
  }

  .flow-step__txt {
    font-size: clamp(12px, 4vw, 14px);
  }
}

/* ===== brands ===== */
.sub-brandlist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0
}

.sub-brandlist li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  background: #fff;
  font-size: 14px
}

/* ===== float cta (SP) ===== */
.sub-float {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  gap: 8px;
  justify-content: center;
  padding: 8px;
  background: rgba(255, 255, 255, .92);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(6px);
  z-index: 30
}

.sub-float__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: 700
}

.sub-float__btn--line {
  background: #f4f7f5;
  border-color: #e0e8e3;
  color: #0a4b2e
}

/* ===== responsive ===== */
@media (max-width: 1024px) {
  .sub-cards {
    grid-template-columns: repeat(4, 1fr)
  }
}

@media (max-width: 768px) {
  .sub-steps {
    grid-template-columns: 1fr
  }

  .sub-cards {
    grid-template-columns: repeat(3, 1fr)
  }

  .sub-hero-img .pc_only {
    display: none;
  }

  .sub-hero-img .sp_only {
    display: block;
  }
}

@media (max-width: 560px) {
  .sub-cards {
    grid-template-columns: repeat(2, 1fr)
  }

  .sub-float {
    display: flex
  }

  body {
    padding-bottom: 72px
  }

  /* SP固定CTA分の余白 */
}

@media (max-width:480px) {}

.footer-area {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
}

.site-header scrolled {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
}

/* ===== tips ===== */
.sub-tips {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 40px);
  padding-top: 30px;
}

.sub-tip {
  text-align: left;
}

.sub-tip__ttl {
  position: relative;
  margin: 0 0 clamp(12px, 2vw, 16px) 0;
  font-weight: 700;
  text-align: left;
}

.sub-tip__ttl span {
  font-size: clamp(18px, 3vw, 22px);
  display: inline-block;
  position: relative;
}

.sub-tip__ttl::before {
  content: "";
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--brand) 0%, var(--brand) 29.3%, rgba(150, 150, 150, .2) 29.3%, rgba(150, 150, 150, .2) 100%);
  position: absolute;
  bottom: -8px;
  left: 0;
}

.sub-tip__txt {
  color: var(--text);
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.8;
  margin: 0;
  text-align: left;
}

/* ===== id & payment ===== */
.sub-cols {
  display: grid;
  gap: 16px
}

.sub-cols--2 {
  grid-template-columns: 1fr 1fr
}

.sub-cols .sub-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 24px;
  display: block;
}

.sub-cols .sub-card__title {
  font-size: 18px;
  margin: .2em 0 .6em;
  font-weight: 700
}

.sub-cols .sub-list {
  list-style: none;
  margin: 10px 0;
  padding-left: 0
}

.sub-cols .sub-list li {
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0
}

.sub-cols .sub-list li:last-child {
  border-bottom: none
}

.sub-cols .sub-card__note {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px
}

/* ===== responsive (tips/cols) ===== */
@media (max-width: 640px) {
  .sub-cols--2 {
    grid-template-columns: 1fr
  }
}

.sub-faq {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  padding: 1em 1.2em;
  margin-top: 2em;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
}

.sub-faq summary {
  position: relative;
  font-weight: 700;
  font-size: 1.1em;
  cursor: pointer;
  list-style: none;
  padding-right: 1.5em;
  color: #222;
}

/* デフォルトの矢印を消す */
.sub-faq summary::-webkit-details-marker {
  display: none;
}

/* ＋アイコン */
.sub-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 700;
  font-size: 1.4em;
  line-height: 1;
  color: var(--brand, #009541);
  transition: transform 0.2s ease;
}

/* 開いたら−に変化 */
.sub-faq[open] summary::after {
  content: "−";
  transform: rotate(0deg);
}

/* 開閉時のフェード演出 */
.sub-faq[open] ul,
.sub-faq[open] h4 {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* カテゴリ見出し */
.sub-faq__cat {
  font-size: 1.05em;
  font-weight: 700;
  margin: 1em 0 .3em;
  color: var(--brand, #009541);
  border-left: 4px solid var(--brand, #009541);
  padding-left: .5em;
}

/* リスト */
.sub-list {
  margin: 0 0 1em 1.2em;
  padding: 0;
  list-style: disc;
  color: #444;
  line-height: 1.6;
}

.sp_only {
  display: none;
}

@media (max-width: 768px) {
  .sp_only {
    display: block;
  }

  .pc_only {
    display: none;
  }
}

/* Access */
.access-summary {
  margin: 16px 0 28px;
}

.access-summary__name {
  font-weight: 600;
  font-size: clamp(16px, 2.4vw, 20px);
}

.access-summary__text {
  margin: 6px 0;
}

.access-summary__links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.map-wrap {
  margin: 20px 0 8px;
}

.map-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow, 0 8px 28px rgba(0, 0, 0, .08));
  background: #f3f4f6;
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-note {
  color: var(--muted, #6b7280);
  font-size: 0.95rem;
  margin-top: 6px;
}

.access-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
  margin-top: 24px;
  justify-content: center;
  /* ← 親が中央に並べる */
  align-items: stretch;
}

@media (max-width: 768px) {
  .access-cards {
    grid-template-columns: min(100%, 560px);
  }

  .access-cards>.access-card {
    margin-inline: auto;
  }
}

@media (max-width: 520px) {
  .access-card {
    width: calc(100% - 24px);
    margin-inline: auto;
  }

  .access-dl {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  .access-dl dt {
    margin-top: 8px;
  }

  .access-dl dt:first-of-type {
    margin-top: 0;
  }

  .nowrap {
    white-space: normal;
  }
}

.access-card {
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  padding: clamp(13px, 2.5vw, 22px);
  box-shadow: var(--shadow, 0 8px 28px rgba(0, 0, 0, .06));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
}

.access-card__title {
  color: var(--brand, #009541);
  font-size: clamp(16px, 2.6vw, 20px);
  margin: 0 0 8px;
  text-align: left;
}

.access-card__body p {
  margin: 6px 0 10px;
  font-size: clamp(14px, 2.6vw, 18px);

}

.access-card__body {
  width: min(100%, 520px);
  /* 480→520で余白の窮屈さを緩和 */
  margin: 0 auto;
}

.access-card__body>* {
  width: 100%;
}

.access-card__body .access-dl {
  width: 100%;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 12px;
}

.access-points {
  padding-left: 1.2em;
  list-style: disc;
  font-size: clamp(14px, 2.4vw, 18px);

}

.access-dl {
  display: grid;
  grid-template-columns: 96px 1fr;
  /* 120→96でdtを詰める */
  column-gap: 10px;
  /* 12→10 */
  row-gap: 6px;
}

.access-dl dt {
  color: var(--muted, #6b7280);
  line-height: 1.7;
  font-size: clamp(14px, 2.6vw, 18px);

}

.access-dl dd {
  line-height: 1.8;
  margin: 0;
  font-size: clamp(14px, 2.6vw, 18px);
}

.nowrap {
  white-space: nowrap;
}

.access-dl dt,
.access-dl dd {
  overflow-wrap: anywhere;
  /* 日本語でも強制改行OK */
  word-break: normal;
  line-break: loose;
}

@media (max-width:520px) {
  .access-dl .nowrap {
    white-space: normal !important;
  }
}

/* アクセス概要ボックス内だけ、読みやすい明朝へ */
.access-summary.access-page {
  font-family:
    "BIZ UDMincho", "BIZ UD明朝",
    "Yu Mincho Demibold", "游明朝 Demibold",
    "Hiragino Mincho ProN", "ヒラギノ明朝 ProN",
    "Yu Mincho", "游明朝",
    "Noto Serif JP",
    serif;
}


/* ===== dt 幅を可変に（最小～中身の最大） ===== */
.access-card__body .access-dl {
  display: grid;
  grid-template-columns: minmax(5.5em, max-content) 1fr;
  column-gap: 8px;
  row-gap: 6px;
}

/* ラベルの整列を安定させる（左右揃え） */
.access-card__body .access-dl dt {
  justify-self: start;
  line-height: 1.7;
  margin: 0;
  white-space: nowrap;
}


.access-card__body .access-dl dd {
  margin: 0;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

/* 幅がかなり狭い端末は1列に落として読みやすさ優先 */
@media (max-width: 520px) {
  .access-card__body .access-dl {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  .access-card__body .access-dl dt {
    white-space: normal;
    /* 1列化時は折り返し可 */
    margin-top: 13px;
  }

  .access-card__body .access-dl dt:first-of-type {
    margin-top: 0;
  }
}

/* ===== SP: カードを100%幅に ===== */
@media (max-width: 768px) {
  .access-cards {
    grid-template-columns: 1fr;
    /* 1列 */
    justify-content: stretch;
    /* 余計な中央寄せを殺す */
  }

  .access-cards>.access-card {
    width: 100%;
    /* ← これだけでOK */
    margin-inline: 0;
    /* 中央寄せの余白を消す */
  }

  .access-card__body {
    width: 100%;
    /* 内側の最大幅制限を外す */
    max-width: none;
  }
}

/* 520px以下での旧ルールを打ち消し（calc(100% - 24px)等を上書き） */
@media (max-width: 520px) {
  .access-cards>.access-card {
    width: 100%;
    margin-inline: 0;
  }
}

.access-card__body p,
.access-dl dd {
  overflow-wrap: anywhere;
}


/* ============ Thanks ============ */
.thanks-message {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 32px);
  margin: clamp(16px, 4vw, 32px) 0;
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.9;
}

.thanks-message p {
  margin: 0 0 1.2em;
}

.thanks-message p:last-child {
  margin-bottom: 0;
}

.thanks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(20px, 4vw, 36px);
}

.thanks-actions .sub-btn {
  min-width: 220px;
}

.thanks-contact {
  padding: clamp(18px, 3.5vw, 28px);
  border-radius: 16px;
  border: 1px solid rgba(10, 138, 77, 0.15);
  background: rgba(10, 138, 77, 0.05);
  text-align: center;
}

.thanks-contact h2 {
  margin: 0 0 12px;
  font-size: clamp(18px, 2.8vw, 24px);
  color: var(--brand);
}

.thanks-contact__tel {
  font-size: clamp(20px, 3.2vw, 28px);
  font-weight: 700;
  margin: 0 0 8px;
}

.thanks-contact__tel a {
  color: inherit;
}

.thanks-contact__note {
  margin: 0;
  color: var(--muted);
  font-size: clamp(13px, 2.1vw, 15px);
}

@media (max-width: 540px) {
  .thanks-actions {
    flex-direction: column;
  }

  .thanks-actions .sub-btn {
    width: 100%;
  }

  #thanks-title {
    font-size: 26px;
  }
}

.reserve-form {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 36px);
}

.reserve-form__fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(18px, 3vw, 26px);
}

.reserve-field label,
.reserve-field__label {
  font-weight: 700;
  color: var(--ink);
  display: block;
  margin-bottom: 8px;
}

.reserve-field input[type="text"],
.reserve-field input[type="tel"],
.reserve-field input[type="email"],
.reserve-field input[type="date"],
.reserve-field input[type="time"],
.reserve-field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-size: 15px;
  font-family: inherit;
  background: #fafafa;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.reserve-field input:focus,
.reserve-field input[type="time"]:focus,
.reserve-field textarea:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 138, 77, 0.15);
  background: #fff;
}

.reserve-field textarea {
  min-height: 160px;
  resize: vertical;
}

.reserve-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.reserve-dates {
  display: grid;
  gap: 16px;
}

.reserve-date {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.reserve-date__title {
  font-weight: 700;
  min-width: 90px;
}

.reserve-date__inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.reserve-date__inputs input {
  flex: 1 1 160px;
  min-width: 140px;
}

.reserve-date__inputs input[type="date"]::-webkit-datetime-edit {
  color: transparent;
}

.reserve-date__inputs input[type="date"]::-webkit-datetime-edit-year-field,
.reserve-date__inputs input[type="date"]::-webkit-datetime-edit-month-field,
.reserve-date__inputs input[type="date"]::-webkit-datetime-edit-day-field,
.reserve-date__inputs input[type="date"]::-webkit-datetime-edit-text {
  color: transparent;
}

.reserve-date__inputs input[type="date"]:focus::-webkit-datetime-edit,
.reserve-date__inputs input[type="date"]:valid::-webkit-datetime-edit {
  color: inherit;
}

.reserve-date__inputs input[type="date"]:-ms-input-placeholder {
  color: transparent;
}

.reserve-date__inputs input[type="date"]:focus:-ms-input-placeholder,
.reserve-date__inputs input[type="date"]:valid:-ms-input-placeholder {
  color: inherit;
}

.reserve-date__inputs input[type="date"] {
  color: transparent;
}

.reserve-date__inputs input[type="date"]:focus,
.reserve-date__inputs input[type="date"]:valid {
  color: inherit;
}

.reserve-date__inputs input[type="date"]:focus::-webkit-datetime-edit-year-field,
.reserve-date__inputs input[type="date"]:focus::-webkit-datetime-edit-month-field,
.reserve-date__inputs input[type="date"]:focus::-webkit-datetime-edit-day-field,
.reserve-date__inputs input[type="date"]:focus::-webkit-datetime-edit-text,
.reserve-date__inputs input[type="date"]:valid::-webkit-datetime-edit-year-field,
.reserve-date__inputs input[type="date"]:valid::-webkit-datetime-edit-month-field,
.reserve-date__inputs input[type="date"]:valid::-webkit-datetime-edit-day-field,
.reserve-date__inputs input[type="date"]:valid::-webkit-datetime-edit-text {
  color: inherit;
}

.reserve-date__inputs input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1;
}

.reserve-date__inputs select {
  flex: 1 1 160px;
  min-width: 140px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-size: 15px;
  font-family: inherit;
  background: #fafafa;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.reserve-date__inputs select:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 138, 77, 0.15);
  background: #fff;
}

@media (max-width: 520px) {
  .reserve-date__inputs {
    flex-direction: column;
    gap: 8px;
  }
}

.reserve-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.reserve-option input[type="radio"] {
  accent-color: var(--brand);
}

.reserve-option:hover,
.reserve-option:has(input[type="radio"]:checked) {
  border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(10, 138, 77, 0.15);
}

.reserve-field--checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
}

.reserve-field--checkbox input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.reserve-submit {
  justify-self: center;
  padding: 14px 34px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, #d7b45c, #b88c2a);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(184, 140, 42, 0.25);
  transition: transform .2s ease, filter .2s ease;
}

.reserve-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.required {
  color: #e11d48;
  font-size: .95em;
}

@media (max-width: 560px) {
  .reserve-options {
    flex-direction: column;
    align-items: stretch;
  }

  .reserve-option {
    border-radius: 14px;
  }
}