/* =========================
   12_components_sections.css
   Sections / Dividers (Wave & Asym Curve)
   ✅ 区切り余白は section.content の gap に統一
========================= */

/* =========================================================
   Wave Divider（汎用）
   - 疑似要素で外側に波を描く
   - “記事間の余白”は作らない（gapに任せる）
   - 波の分だけ内側paddingで安全に確保する
========================================================= */
.section-wave,
.section-wave-top,
.section-wave-bottom {
  position: relative;

  --wave-size: 181px;
  --wave-height: 24px; /* PC */

  --wave-fill: transparent;

  --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='181' height='24' viewBox='0 0 181 24'%3E%3Cpath fill='%23000' d='M0 24 C 45.25 22 45.25 2 90.5 2 C 135.75 2 135.75 22 181 24 L 181 0 L 0 0 Z'/%3E%3C/svg%3E");
}

.section-wave::before,
.section-wave::after,
.section-wave-top::before,
.section-wave-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--wave-height);
  pointer-events: none;
  z-index: 5;

  background: var(--wave-fill);

  -webkit-mask-image: var(--wave-mask);
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: var(--wave-size) var(--wave-height);

  mask-image: var(--wave-mask);
  mask-repeat: repeat-x;
  mask-size: var(--wave-size) var(--wave-height);
}

/* 位置 */
.section-wave::before {
  top: 0;
  transform: translateY(-100%) rotate(180deg);
}
.section-wave::after {
  bottom: 0;
  transform: translateY(100%);
}
.section-wave-top::before {
  top: 0;
  transform: translateY(-100%) rotate(180deg);
}
.section-wave-bottom::after {
  bottom: 0;
  transform: translateY(100%);
}

/* ✅ うっすら線対策（サブピクセルの隙間を潰す） */
.section-wave::before,
.section-wave-top::before {
  transform: translateY(calc(-100% + 1px)) rotate(180deg);
}
.section-wave::after,
.section-wave-bottom::after {
  transform: translateY(calc(100% - 1px));
}

/* =========================================================
   ✅ ここが重要：区切り余白（margin）はやめる
   代わりに、波がはみ出す分だけ内側paddingを確保する
========================================================= */
.section-wave,
.section-wave-top,
.section-wave-bottom {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.section-wave {
  padding-top: calc(var(--wave-height) + 48px);
  padding-bottom: calc(var(--wave-height) + 48px);
}
.section-wave-top {
  padding-top: calc(var(--wave-height) + 48px);
}
.section-wave-bottom {
  padding-bottom: calc(var(--wave-height) + 48px);
}

/* 背景色連動 */
.bg-pink.section-wave,
.bg-pink.section-wave-top,
.bg-pink.section-wave-bottom {
  --wave-fill: var(--pink);
}
.bg-white.section-wave,
.bg-white.section-wave-top,
.bg-white.section-wave-bottom {
  --wave-fill: var(--white);
}
.bg-blue.section-wave,
.bg-blue.section-wave-top,
.bg-blue.section-wave-bottom {
  --wave-fill: var(--blue);
}
.bg-yellow.section-wave,
.bg-yellow.section-wave-top,
.bg-yellow.section-wave-bottom {
  --wave-fill: var(--yellow);
}

/* =========================================================
   Asym Curve Divider（1回だけ：山→谷）
   - 繰り返さない
   - “記事間の余白”は作らない（gapに任せる）
   - カーブ分は内側paddingで確保
========================================================= */
.section-asycurve,
.section-asycurve-top,
.section-asycurve-bottom {
  position: relative;

  --ac-height: 90px; /* PC */
  --ac-fill: transparent;

  --ac-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='90' viewBox='0 0 1000 90' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 90 C 180 10 320 10 500 45 C 700 90 820 90 1000 45 L 1000 0 L 0 0 Z'/%3E%3C/svg%3E");
}

.section-asycurve::before,
.section-asycurve::after,
.section-asycurve-top::before,
.section-asycurve-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--ac-height);
  pointer-events: none;
  z-index: 5;

  background: var(--ac-fill);

  -webkit-mask-image: var(--ac-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;

  mask-image: var(--ac-mask);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

/* 位置 */
.section-asycurve::before {
  top: 0;
  transform: translateY(-100%) rotate(180deg);
}
.section-asycurve::after {
  bottom: 0;
  transform: translateY(100%);
}
.section-asycurve-top::before {
  top: 0;
  transform: translateY(-100%) rotate(180deg);
}
.section-asycurve-bottom::after {
  bottom: 0;
  transform: translateY(100%);
}

/* ✅ 区切り余白（margin）は無し */
.section-asycurve,
.section-asycurve-top,
.section-asycurve-bottom {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ✅ カーブ分は内側paddingで確保 */
.section-asycurve {
  padding-top: calc(var(--ac-height) + 48px);
  padding-bottom: calc(var(--ac-height) + 48px);
}
.section-asycurve-top {
  padding-top: calc(var(--ac-height) + 48px);
}
.section-asycurve-bottom {
  padding-bottom: calc(var(--ac-height) + 48px);
}

/* 背景色連動 */
.bg-pink.section-asycurve,
.bg-pink.section-asycurve-top,
.bg-pink.section-asycurve-bottom {
  --ac-fill: var(--pink);
}
.bg-white.section-asycurve,
.bg-white.section-asycurve-top,
.bg-white.section-asycurve-bottom {
  --ac-fill: var(--white);
}
.bg-blue.section-asycurve,
.bg-blue.section-asycurve-top,
.bg-blue.section-asycurve-bottom {
  --ac-fill: var(--blue);
}
.bg-yellow.section-asycurve,
.bg-yellow.section-asycurve-top,
.bg-yellow.section-asycurve-bottom {
  --ac-fill: var(--yellow);
}

/* =========================
   Header / Hero max-width
========================= */

/* ヘッダー内側 */
.site-header .header-inner {
  max-width: 1480px;
  margin-inline: auto;
}

/* Hero の中身だけ制限（背景は全幅のまま） */
.hero-inner {
  max-width: 1480px;
  margin-inline: auto;
}

/* =========================
   Section: LOCATION
========================= */

/* =========================
   Section: LOCATION（v3 / clean）
   置き換え場所：12_components_sections.css の LOCATION 一式を丸ごと差し替え
   PC：左右 1:1 固定 / SP：縦積み
========================= */

.location .location__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 44px;
}

/* ---------- 上段：テーブル + MAP（左右 1:1 & 高さ揃え） ---------- */
.location .location__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 1:1 */
  gap: 40px;
  align-items: stretch; /* 高さを揃える */
}

.location .location__table,
.location .location__map {
  min-width: 0;
}

/* table（折り返しが変にならないように） */
.location .location__table {
  display: flex; /* 高さ追従 */
}

.location .location__table table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.location .location__table tr {
  border-bottom: 1px solid var(--border-soft);
}

.location .location__table td {
  padding: 12px 8px;
  vertical-align: top;
  line-height: 1.8;

  overflow-wrap: normal;
  word-break: break-word; /* 長いURL等だけ折る */
}

.location .location__table td:first-child {
  width: 7.5em;
  font-weight: 700;
  white-space: nowrap;
}

/* map（右カラム=50%の中で高さ100%フィット） */
.location .location__map {
  border-radius: var(--radius-20);
  overflow: hidden;
  background: #fff;
  position: relative;
  height: 100%;
  aspect-ratio: auto; /* 比率固定しない（高さ合わせ優先） */
}

.location .location__map iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
  min-width: 0 !important; /* 旧CSSの min-width 対策 */
}

/* ---------- 下段：案内カード + 写真（左右 1:1） ---------- */
.location .location__bottom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "note  large"
    "small large";
  gap: 28px 40px;
  align-items: stretch; /* ← ここを変更 */
}

/* 右の大写真：高さ基準 */
.location .location__photo--large {
  grid-area: large;
  height: 100%; /* ← 追加 */
}

/* 大写真の画像も高さ100% */
.location .location__photo--large img {
  height: 100%;
  object-fit: cover;
}

/* 案内カード */
.location .location__note {
  grid-area: note;
  background: #fff;
  border-radius: var(--radius-20);
  padding: 28px;
  text-align: center; /* カード全体は中央 */
}

/* 箇条書きブロックは中央配置 */
.location .location__bullets {
  margin: 0 auto 16px; /* ← ブロックを中央に */
  padding: 0;
  list-style: none;

  display: inline-block; /* ← 幅を中身基準に */
  text-align: left; /* ← 中身は左寄せ */
}

/* li */
.location .location__bullets li {
  position: relative;
  padding-left: 20px;
  line-height: 1.8;
  font-weight: 700;
}

/* 丸装飾 */
.location .location__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(242, 177, 173, 0.9);
}

.location .location__note-text {
  margin: 0;
  line-height: 1.9;
  font-weight: 700;
}

/* 写真 */
.location .location__photo {
  margin: 0;
}

.location .location__photo img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--radius-20);
  object-fit: cover;
}

/* 右の大写真：2段ぶち抜き（縦長安定） */
.location .location__photo--large {
  grid-area: large;
  aspect-ratio: 5 / 5;
}

/* 左下の小写真 */
.location .location__photo--small {
  grid-area: small;
  aspect-ratio: 17 / 10;
}

/* location セクションは下線なし */
.location a {
  text-decoration: underline dotted;
  text-decoration-color: #fff;
}

.location a:hover {
  text-decoration: underline;
  text-decoration-color: #fff;
}

/* ---------- Responsive（SP：縦積み） ---------- */
@media (max-width: 900px) {
  .location .location__inner {
    gap: 28px;
  }

  .location .location__top {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }

  /* SPのMAPは見やすい比率に固定 */
  .location .location__map {
    aspect-ratio: 16 / 10;
    height: auto;
  }

  .location .location__map iframe {
    position: absolute;
    inset: 0;
  }

  .location .location__bottom {
    grid-template-columns: 1fr;
    grid-template-areas:
      "note"
      "large"
      "small";
    gap: 18px;
  }

  /* SPはカード内も左寄せに */
  .location .location__note {
    text-align: left;
  }
  .location .location__bullets {
    justify-items: start;
  }
}
/* =========================
   404 PAGE
========================= */

.error-inner {
  text-align: center;
  padding: 80px 20px;
}

.error-text {
  margin-bottom: 40px;
  line-height: 1.9;
  font-weight: 700;
}

.error-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}