/* =========================================
   ikoi/place — Prototype Styles
   Fonts: Shippori Mincho（明朝）/ Noto Sans JP（ゴシック）/ Instrument Serif（数字）
   ========================================= */

:root {
  --color-text: #303135;
  --color-text-strong: #1a1a1a;
  --color-black: #333333;
  --color-border: #d5d7de;
  --color-white: #ffffff;
  --color-hero-bg: #ECF2F5;
  --color-btn-border: #919191;
  --color-bg: #ffffff;
  --color-muted: #888888;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
hr { border: none; }

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 40px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header__logo {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
}
.site-header__logo-img {
  width: 134px;
  height: 18px;
  display: block;
}
.site-header__title {
  font-family: 'Shippori Mincho', serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--color-text);
}
.site-header__nav {
  display: flex;
  gap: 24px;
  margin-left: auto;
}
.site-header__nav a {
  font-family: 'Shippori Mincho', serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.093em;
  color: var(--color-text);
}

/* ---------- View ---------- */
.view { display: block; }

/* =========================================
   診断ビュー
   ========================================= */
.diagnose-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: calc(100vh - 70px);
}

.diagnose-hero {
  padding: 80px 60px 60px;
  position: relative;
  overflow: hidden;
  background: var(--color-white);
}
.diagnose-hero__title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 38px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin: 0 0 28px;
  color: var(--color-text);
}
.diagnose-hero__lead {
  font-size: 13px;
  color: #555;
  line-height: 2;
  margin: 0 0 64px;
}

.brochure {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 32px 0 0;
  transform: rotate(-4deg);
  transform-origin: left center;
}
.brochure__card {
  flex: 1;
  background: #fff;
  border: 1px solid #e8e8e8;
  padding: 14px 14px 18px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  position: relative;
}
.brochure__card--1 { transform: translateY(8px); }
.brochure__card--2 { transform: translateY(-4px); }
.brochure__card--3 { transform: translateY(12px); }
.brochure__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #d8dfe2 0%, #b8c2c7 100%);
  margin-bottom: 12px;
  border-radius: 50%;
}
.brochure__card--2 .brochure__photo {
  border-radius: 0;
  background: linear-gradient(135deg, #c8b89a 0%, #a89878 100%);
}
.brochure__card--3 .brochure__photo {
  border-radius: 0;
  background: linear-gradient(135deg, #b5c4a8 0%, #8aa580 100%);
}
.brochure__name {
  font-family: 'Shippori Mincho', serif;
  font-size: 14px;
  letter-spacing: 0.15em;
  color: #333;
  margin-top: auto;
}
.brochure__watermark {
  position: absolute;
  bottom: -20px;
  left: 12px;
  font-family: 'Shippori Mincho', serif;
  font-size: 28px;
  letter-spacing: 0.4em;
  color: rgba(0,0,0,0.06);
  white-space: nowrap;
  pointer-events: none;
}

.diagnose-form {
  padding: 64px 60px 80px;
  background: var(--color-white);
  border-left: 1px solid var(--color-border);
  overflow-y: auto;
}

.question { margin-bottom: 44px; }
.question__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.question__no {
  font-family: 'Shippori Mincho', serif;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: #999;
}
.question__text {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: var(--color-text);
  line-height: 1.6;
}
.question__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.4;
  font-family: inherit;
}
.chip:not(.chip--selected):hover {
  border-color: #888;
  background: #fafafa;
}
.chip--selected {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}
.chip--selected:hover {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}

.diagnose-form__footer {
  margin-top: 48px;
  display: flex;
  justify-content: flex-end;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 4px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  background: transparent;
  transition: all 0.15s ease;
  min-width: 120px;
}
.btn-spinner {
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.7;
  animation: btn-spinner-rotate 0.7s linear infinite;
}
@keyframes btn-spinner-rotate {
  to { transform: rotate(360deg); }
}
.btn--primary {
  background: var(--color-text);
  color: #fff;
}
.btn--primary:hover:not(:disabled) { background: #000; }
.btn--primary:disabled {
  background: #cccccc;
  cursor: not-allowed;
}
.btn--dark {
  background: var(--color-text);
  color: #fff;
}
.btn--dark:hover { background: #000; }
.btn--outline {
  background: #fff;
  color: var(--color-black);
  border-color: var(--color-btn-border);
}
.btn--outline:hover { background: #fafafa; }

/* ダーク CTA リンクボタン（この施設について詳しく知る） */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--color-black);
  color: #fff;
  height: 44px;
  padding: 0 20px 0 22px;
  border-radius: 4px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  transition: background 0.15s ease;
}
.btn-cta:hover { background: #000; }
/* 矢印は指定SVGの形状（細い線＋上側の鏃）をマスクで描画。色はボタン文字色を継承 */
.btn-cta__arrow {
  width: 22px;
  height: 5px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='5'%20viewBox='0%200%2022%205'%20fill='none'%3E%3Cpath%20d='M0%204.375H20L15.5%200.375'%20stroke='%23000'%20stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='5'%20viewBox='0%200%2022%205'%20fill='none'%3E%3Cpath%20d='M0%204.375H20L15.5%200.375'%20stroke='%23000'%20stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* =========================================
   結果ビュー
   ========================================= */
.view--result {
  background: var(--color-white);
}

.result-breadcrumb {
  display: flex;
  justify-content: center;
  padding: 56px 0 40px;
}
.result-breadcrumb__label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}

/* --- Hero（チケット + プラン情報） --- */
.result-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 0 24px 40px;
}
.result-hero__inner {
  background: var(--color-hero-bg);
  border-radius: 8px;
  width: 100%;
  max-width: 920px;
  padding: 80px 60px;
  display: grid;
  grid-template-columns: auto 320px;
  grid-template-areas:
    "card main"
    "card note";
  column-gap: 77px;
  row-gap: 32px;
  align-items: center;
  justify-content: center;
}
.result-hero__inner > .ticket-frame { grid-area: card; align-self: center; }
.result-hero__inner > .plan-info { grid-area: main; align-self: end; }
.result-hero__inner > .place-note { grid-area: note; align-self: start; }

/* ticket-frame: 画像保存時のキャプチャ範囲。
   bgはhero色と同色なのでレイアウト上は不可視。負marginでレイアウトはずらさない */
.ticket-frame {
  padding: 20px;
  margin: -20px;
  background: var(--color-hero-bg);
  flex-shrink: 0;
  display: flex;
}

/* ---------- Ticket ---------- */
.ticket {
  width: 296px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  flex-shrink: 0;
  position: relative;
  --notch-y: 594px;
  --notch-r: 11px;
  /* マスクで三角(V字)の切り欠きを実形状として切る → drop-shadowがその形状に沿う。
     左右の頂点(apex)を起点に、左は西向き・右は東向きの90°くさびを透明化する。
     --notch-r が食い込みの深さ（＝半分の高さ）。 */
  -webkit-mask:
    conic-gradient(from 0deg at var(--notch-r) var(--notch-y), #000 225deg, transparent 225deg, transparent 315deg, #000 315deg),
    conic-gradient(from 0deg at calc(100% - var(--notch-r)) var(--notch-y), #000 45deg, transparent 45deg, transparent 135deg, #000 135deg);
  -webkit-mask-composite: source-in;
  mask:
    conic-gradient(from 0deg at var(--notch-r) var(--notch-y), #000 225deg, transparent 225deg, transparent 315deg, #000 315deg),
    conic-gradient(from 0deg at calc(100% - var(--notch-r)) var(--notch-y), #000 45deg, transparent 45deg, transparent 135deg, #000 135deg);
  mask-composite: intersect;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.13));
}
.ticket__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 4px;
}
.ticket__photo {
  width: 264px;
  height: 264px;
  margin: 32px auto 0;
  background-color: #e7e7e3;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  flex-shrink: 0;
}
.ticket__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 28px 28px 28px;
  flex: 1;
}
.ticket__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.ticket__label-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.ticket__label-line {
  flex: 1 0 0;
  height: 1px;
  background: var(--color-border);
}
.ticket__label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 0;
  white-space: nowrap;
}
.ticket__title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 0;
}
.text-phrase {
  white-space: nowrap;
}
/* 折り返された行全体を包むブロック。幅は最長行にフィットするため、
   親要素の text-align でこのブロックごと中央寄せ等ができる */
.phrase-lines {
  display: inline-block;
  width: fit-content;
}
.ticket__facility {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}
.ticket__facility-en {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 350;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 4px 0 0;
}
.ticket__hr {
  border-top: 1px dashed #d0d0d0;
  width: 100%;
  margin: 0;
  height: 0;
}
.ticket__qr-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  width: 100%;
}
.ticket__qr-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #717480;
  margin: 0;
  flex: 1;
  text-align: left;
}
.ticket__qr-date {
  width: 12px;
  /* 回転後テキストの視覚高さに合わせる。qr-row の align-items:flex-end と
     組み合わせることで、日付テキストの下端がタグライン最終行の下端に揃う */
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ticket__qr-date span {
  display: inline-block;
  transform: rotate(-90deg);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--color-text);
  white-space: nowrap;
}


/* ---------- Plan Info ---------- */
.plan-info {
  width: 320px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.plan-info__caption {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
  padding: 0 8px;
  text-align: center;
  position: relative;
}
/* 折り返された行同士は左揃え（.phrase-lines のブロック自体は上の text-align:center で中央寄せ） */
.plan-info__caption .phrase-lines {
  text-align: left;
}
/* 括弧は右カラム幅いっぱいに固定。中のテキストは右揃え */
.plan-info__caption::before,
.plan-info__caption::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 16px;
}
.plan-info__caption::before {
  top: -14px;
  left: -6px;
  border-top: 1px solid var(--color-text);
  border-left: 1px solid var(--color-text);
}
.plan-info__caption::after {
  bottom: -14px;
  right: -6px;
  border-bottom: 1px solid var(--color-text);
  border-right: 1px solid var(--color-text);
}
.plan-info__title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  color: var(--color-text);
  margin: 32px 0 0;
}
.plan-info__facility-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
  line-height: 1.3;
}
.plan-info__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-text);
  stroke-width: 1.5;
}
.plan-info__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.plan-info__facility-name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--color-text);
}
.plan-info__intro {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.0625em;
  color: var(--color-text);
  margin: 12px 0 0;
  text-align: justify;
}

/* PLACE NOTE（施設背景の補足ボックス）。配置は result-hero__inner の Grid 側で制御 */
.place-note {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  padding: 20px 22px;
}
.place-note__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.place-note__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text);
  stroke-width: 1.5;
}
.place-note__icon svg { width: 100%; height: 100%; display: block; }
.place-note__label {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--color-black);
}
.place-note__body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 0;
  text-align: justify;
}

/* 結果ヒーロー下のCTA（この施設について詳しく知る） */
.result-hero__cta {
  min-width: 360px;
}

/* ---------- 結果アクション ---------- */
.result-cta {
  display: flex;
  justify-content: center;
  width: 100%;
}
.result-actions {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.result-actions__group {
  display: flex;
  gap: 20px;
}
.result-actions .btn { min-width: 118px; }

/* =========================================
   おすすめの視点・過ごし方
   ========================================= */
.viewpoints {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 56px 24px;
}
.viewpoints__head {
  width: 100%;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.viewpoints__title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
  text-align: center;
}
.viewpoints__hr {
  border-top: 1px solid var(--color-border);
  width: 100%;
  max-width: 920px;
  margin: 0;
}
.viewpoints__list {
  list-style: none;
  /* セクションgap(40px)に+24pxして、上下ボーダー↔画像の間隔を64pxにする。
     ボタン(フッター)↔下ボーダーはgapのまま40pxで一貫させる。 */
  margin: 24px 0;
  padding: 0;
  width: 100%;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.viewpoint {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.viewpoint__photo {
  width: 320px;
  height: 240px;
  flex-shrink: 0;
  background-color: #d8dfe2;
  background-image: linear-gradient(135deg, #d8dfe2 0%, #b8c2c7 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
}
.viewpoint__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.viewpoint__header {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.viewpoint__no {
  font-family: 'Instrument Serif', 'Shippori Mincho', serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  color: var(--color-text);
}
.viewpoint__title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 38px;
  color: var(--color-text);
  margin: 0;
}
.viewpoint__text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.0625em;
  color: var(--color-text);
  margin: 0;
  text-align: justify;
}
.viewpoints__footer {
  display: flex;
  justify-content: center;
}
/* PC/タブレット（横並び時）は偶数番目を左右反転し、写真の左右を交互（ジグザグ）にする。
   モバイル（縦積み・max-width:680px）には効かせない。 */
@media (min-width: 681px) {
  .viewpoint:nth-child(even) { flex-direction: row-reverse; }
  /* 画像とテキストを上下方向に中央揃え */
  .viewpoint { align-items: center; }
  /* テキスト : 画像 ＝ 5.5 : 4.5 の横幅比率（PC・タブレット共通。gapは別途） */
  .viewpoint__body { flex: 5.5 1 0; }
  .viewpoint__photo { flex: 4.5 1 0; width: auto; height: auto; aspect-ratio: 4 / 3; }
}

/* =========================================
   地図セクション（地図はダミー／本番は Maps Embed API）
   ========================================= */
.map-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px 96px;
}
.map-section__name,
.map-section__address,
.map-section__map,
.map-section__footer {
  width: 100%;
  max-width: 920px;
}
.map-section__name {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.4;
  color: var(--color-text);
  margin: 0;
}
.map-section__address {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: #8a8a84;
  margin: 6px 0 0;
}
.map-section__map {
  margin-top: 20px;
  border-radius: 6px;
  overflow: hidden;
  height: 360px;
}
/* 埋め込み地図をモノクロ表示（キー不要の暫定対応。CSSフィルタで見た目のみ灰色化）*/
.map-section__map iframe { filter: grayscale(1); }
.map-section__map--dummy {
  background: #e7e7e3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #9a9a93;
}
.map-section__pin { width: 28px; height: 28px; stroke-width: 1.5; }
.map-section__pin svg { width: 100%; height: 100%; display: block; }
.map-section__dummy-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.map-section__footer {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* =========================================
   フッター
   ========================================= */
.site-footer {
  background: var(--color-white);
  margin-top: 0;
}
.site-footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 160px 40px 64px;
}
.site-footer__brand { display: inline-flex; }
.site-footer__brand-logo {
  width: 179px;
  height: 24px;
  display: block;
}
.site-footer__tagline {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--color-text);
  margin: 0;
}
.site-footer__bottom {
  border-top: 1px solid var(--color-border);
  padding: 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.site-footer__official {
  display: inline-flex;
  align-items: center;
}
.site-footer__official-logo {
  width: 158px;
  height: 17px;
  display: block;
}
.site-footer__copy {
  font-family: 'Shippori Mincho', serif;
  font-size: 11.6px;
  line-height: 21px;
  letter-spacing: 0.041em;
  color: var(--color-text);
  margin: 4px 0 0;
}

/* =========================================
   レスポンシブ
   ========================================= */
@media (max-width: 960px) {
  .site-header { height: 56px; padding: 0 24px; }
  .site-header__logo { left: 24px; }

  .diagnose-layout { grid-template-columns: 1fr; }
  .diagnose-hero { padding: 48px 28px 32px; }
  .diagnose-hero__title { font-size: 28px; }
  .brochure { transform: rotate(-2deg) scale(0.9); }
  .diagnose-form {
    padding: 32px 28px 48px;
    border-left: none;
    border-top: 1px solid var(--color-border);
  }

  /* 縦積み：本文（見出し・施設名・タイトル・導入文）→ カード → PLACE NOTE の順 */
  .result-hero__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "card"
      "note";
    column-gap: 0;
    row-gap: 40px;
    padding: 56px 32px;
  }
  .result-hero__inner > .ticket-frame { justify-self: center; align-self: auto; }
  .result-hero__inner > .plan-info { align-self: auto; justify-self: center; }
  .plan-info__title { font-size: 22px; line-height: 1.5; }
  /* デスクトップ(26px/1.6)と同じ比率を維持しつつ、最長文言が収まる範囲で縮小 */
  .plan-info__caption { font-size: 24px; line-height: 1.6; }

  .viewpoints__title { font-size: 26px; }
  .viewpoint { gap: 28px; }
  /* 画像サイズは min-width:681px の 6:4 比率に委ねる（固定幅は指定しない） */
  .viewpoint__no { font-size: 48px; }
  .viewpoint__title { font-size: 20px; line-height: 1.5; }

  .result-actions { flex-direction: column; gap: 12px; align-items: stretch; width: 100%; max-width: 360px; }
  .result-actions__group { gap: 12px; }
  .result-actions .btn { flex: 1; min-width: 0; }

  .site-footer__top { padding: 96px 24px 48px; }
}

/* タブレット帯（縦積み）：本文とPLACE NOTEをカードと同じく中央寄せ・幅統一し、左寄せの中途半端さを解消 */
@media (min-width: 521px) and (max-width: 960px) {
  .result-hero__inner > .place-note { width: min(100%, 340px); justify-self: center; }
}

@media (max-width: 680px) {
  /* SP: 番号→見出し→写真→本文 の縦積み・中央寄せ。
     body を display:contents で平坦化し、order で並べ替える。 */
  .viewpoint { flex-direction: column; gap: 16px; text-align: center; align-items: stretch; }
  .viewpoint__body { display: contents; }
  .viewpoint__header { order: 1; flex-direction: column; align-items: center; gap: 6px; }
  .viewpoint__no { font-size: 40px; color: var(--color-text); }
  .viewpoint__title { font-size: 20px; line-height: 1.5; }
  .viewpoint__photo { order: 2; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .viewpoint__text { order: 3; }
  .map-section__map { height: 280px; }
}

@media (max-width: 520px) {
  .site-header__nav { display: none; }
  /* 狭幅では中央のタイトルが左ロゴと干渉するため右寄せにする */
  .site-header { justify-content: flex-end; }
  .diagnose-hero__title { font-size: 24px; }

  /* チケットは296pxで固定（縮ませない） */
  .ticket { width: 296px; min-width: 296px; max-width: 296px; }
  .ticket__title { font-size: 28px; }

  /* 水色背景を画面幅いっぱいに（フルブリード）。
     横paddingは0にしてチケット(296px)は中央寄せのまま */
  .result-hero { padding: 0; }
  .result-hero__inner {
    border-radius: 0;
    width: 100%;
    max-width: none;
    padding: 32px 0;
  }

  /* テキスト・ボタンは画面端から24pxのゆとり（視点セクションと同じ）。
     ※チケットは320px固定のため、24pxは内側テキストにだけ適用する */
  .plan-info { width: 100%; padding: 0 24px; }
  .plan-info__title { font-size: 22px; }
  .viewpoints__title { font-size: 22px; }
  /* PLACE NOTE は plan-info の外なので、ここで左右の余白を確保 */
  .place-note { margin: 0 24px; }
  .result-actions { max-width: none; padding: 0 24px; }
}

/* =========================================
   イントロビュー
   ========================================= */
.intro {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 88px 24px 96px;
}
.intro__eyebrow {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 0 0 26px;
}
.intro__title {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 27px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  margin: 0 0 28px;
  color: var(--color-text);
}
.intro__lead {
  font-size: 16px;
  line-height: 2.1;
  color: #5a5d63;
  letter-spacing: 0.04em;
  margin: 0 0 40px;
  max-width: 620px;
}
/* リード文を2ブロックに分けたときの間隔。40pxは段落間として広すぎるので詰める */
.intro__lead--first { margin-bottom: 16px; }
.intro__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-text);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  letter-spacing: 0.12em;
  padding: 16px 44px;
  border-radius: 4px;
  transition: background 0.15s, transform 0.1s;
}
.intro__btn:hover { background: #000; }
.intro__btn:active { transform: translateY(1px); }

/* 施設サムネイルの自動横スクロール（無限ループ）。Figma 3954-8977 のレイアウト参考 */
.facilities-marquee {
  overflow: hidden;
  width: 100%;
  margin: 0 0 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.facilities-marquee__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  /* 複製した2セット分を等速で -50% ループ＝継ぎ目のない円環スクロール */
  animation: facilities-scroll 60s linear infinite;
}
.facilities-marquee__item {
  flex: 0 0 auto;
  width: 220px;
  height: 220px;
  margin-right: 32px; /* gapではなくmarginで等間隔にして -50% ループのズレを防ぐ */
}
.facilities-marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@keyframes facilities-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .facilities-marquee__track { animation: none; }
}
/* 矢印は指定SVGの形状（細い線＋上側の鏃）をマスクで描画。太さ1px、色はボタン文字色を継承。
   span内の「→」テキストは font-size:0 で非表示にする。 */
.intro__btn-arrow {
  display: inline-block;
  width: 22px;
  height: 5px;
  font-size: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='5'%20viewBox='0%200%2022%205'%20fill='none'%3E%3Cpath%20d='M0%204.375H20L15.5%200.375'%20stroke='%23000'%20stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='5'%20viewBox='0%200%2022%205'%20fill='none'%3E%3Cpath%20d='M0%204.375H20L15.5%200.375'%20stroke='%23000'%20stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* =========================================
   診断ビュー（ステップ型）
   ========================================= */
.step {
  max-width: 680px;
  margin: 0 auto;
  /* 画面いっぱいに広げるが、背の高い画面では上限800pxで止めて下の余白を抑える（上寄せは維持） */
  min-height: min(calc(100vh - 70px), 800px);
  display: flex;
  flex-direction: column;
  padding: 32px 24px 56px;
}

/* 進捗 */
.prog { margin-top: 8px; }
.prog__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.prog__count {
  font-family: 'Shippori Mincho', serif;
  letter-spacing: 0.08em;
}
.prog__now { font-size: 26px; color: var(--color-text); }
.prog__sep { font-size: 16px; color: var(--color-muted, #8a8d93); margin: 0 4px; }
.prog__all { font-size: 16px; color: var(--color-muted, #8a8d93); }
.prog__remain { font-size: 14px; color: var(--color-muted, #8a8d93); letter-spacing: 0.08em; }
.prog__bar { display: flex; gap: 6px; }
.prog__seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--color-border, #e4e6e9);
  transition: background 0.3s ease;
}
.prog__seg.done { background: var(--color-text); }
.prog__seg.current { background: var(--color-text); }

/* 戻る */
.step-back {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: var(--color-muted, #8a8d93);
  letter-spacing: 0.06em;
  padding: 4px 0;
  transition: color 0.15s;
}
.step-back:hover { color: var(--color-text); }
/* Q1（戻る無効）はボタンの高さごと畳んで上詰めにする。
   ただし進捗バーとの隙間は、戻るボタンがある時（margin-top:28px）と同じくらいに保つ */
.step-back:disabled { display: none; }
.step-back:disabled + .q { padding-top: 28px; }
.step-back__arrow { font-size: 14px; }

/* 質問 */
.q {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px 0 24px;
}
.q__no {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px;
  letter-spacing: 0.22em;
  color: var(--color-muted, #8a8d93);
  margin-bottom: 14px;
}
.q__text {
  font-family: 'Shippori Mincho', serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  margin: 0 0 40px;
  color: var(--color-text);
}
.opts { display: flex; flex-direction: column; gap: 12px; }
.opt {
  width: 100%;
  text-align: left;
  padding: 18px 22px;
  border: 1px solid var(--color-border, #e4e6e9);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.5;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.opt:not(.opt--selected):hover { border-color: #b9bcc1; background: #fafbfc; }
.opt__mark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border, #e4e6e9);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.opt__mark::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.15s;
}
.opt--selected,
.opt--selected:hover {
  background: var(--color-text);
  border-color: var(--color-text);
  color: #fff;
}
.opt--selected .opt__mark { border-color: #fff; }
.opt--selected .opt__mark::after { background: #fff; }
@media (max-width: 600px) {
  .intro__eyebrow { font-size: 40px; }
  .intro__title { font-size: 22px; }
  .q__text { font-size: 23px; margin-bottom: 28px; }
}

/* ===== 一時非表示：ヘッダー・フッター（あとで復活可）=====
   この1ブロックを丸ごと削除すれば元の表示に戻る。
   ヘッダーを消した分、全画面（イントロ／質問／結果）の上端余白を同じ高さ足して見た目の位置を保つ。 */
.site-header,
.site-footer__top,
.site-footer__bottom { display: none; }
.view { padding-top: 64px; } /* 非表示ヘッダー分（PC 64px） */
@media (max-width: 960px) {
  .view { padding-top: 56px; } /* 非表示ヘッダー分（モバイル 56px） */
}
/* ===== 一時非表示ここまで ===== */

/* ===== シェア先選択モーダル（share-modal.js）===== */
.sm-lock { overflow: hidden; }
.sm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 22, 28, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  -webkit-tap-highlight-color: transparent;
}
/* 埋め込み時：縦長iframeの中央=画面外を避け、ドキュメント先頭起点で上寄せ（JSでmargin-topを付与）*/
.sm-overlay--anchored {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  min-height: 100%;
  height: auto;
  align-items: flex-start;
}
.sm-modal {
  width: min(360px, 100%);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(20, 22, 28, 0.16);
  padding: 20px 20px 16px;
  animation: sm-pop 0.16s ease-out;
}
@keyframes sm-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sm-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 0;
}
.sm-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  margin: -6px -6px -6px 0;
  border: 0;
  background: transparent;
  color: #8a8d94;
  cursor: pointer;
  border-radius: 6px;
}
.sm-close:hover { background: #f2f3f5; color: var(--color-text); }
.sm-list { display: flex; flex-direction: column; gap: 4px; }
.sm-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 12px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  color: var(--color-text);
  text-align: left;
  transition: background 0.12s;
}
.sm-item:hover { background: #f6f7f8; }
.sm-item:focus-visible { outline: 2px solid #b9bcc1; outline-offset: -2px; }
.sm-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  color: var(--color-text);
  flex-shrink: 0;
}
.sm-toast {
  height: 0;
  overflow: hidden;
  text-align: center;
  font-size: 13px;
  color: #6b6e76;
  opacity: 0;
  transition: opacity 0.2s, height 0.2s;
}
.sm-toast.is-show { height: 20px; opacity: 1; margin-top: 8px; }

/* スマホ：画面下部からのボトムシート（単体表示時。埋め込み時はアンカー優先）*/
@media (max-width: 520px) {
  .sm-overlay:not(.sm-overlay--anchored) {
    align-items: flex-end;
    padding: 0;
  }
  .sm-overlay:not(.sm-overlay--anchored) .sm-modal {
    width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 20px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    animation: sm-slideup 0.2s ease-out;
  }
}
@keyframes sm-slideup { from { transform: translateY(100%); } to { transform: none; } }