@charset "UTF-8";

/* =================================================================
   sub.css - サブページ固有スタイル
   ================================================================= */

/* ----- Page Hero（F+ 生成りのフラット帯） ----- */
.page-hero {
  background: var(--color-bg-section);
  padding: var(--space-2xl) 0;
  position: relative;
}

/* ヒーロー帯・花弁ドットは全ページ共通で藤色（施設名のシグネチャ）に統一 */
.page-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-ajisai);
}

.page-hero__title {
  color: var(--color-heading);
  font-size: var(--text-3xl);
  font-weight: 600;
  font-family: var(--font-serif);
  letter-spacing: 0.04em;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

.page-hero__title::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50% 0 50% 50%;
  transform: rotate(45deg);
  background: var(--color-ajisai);
  flex-shrink: 0;
}

/* ----- Sub-page Section Title ----- */
.sub-section-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-heading);
  letter-spacing: 0.04em;
  margin: var(--space-2xl) 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.sub-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 56px;
  height: 2px;
  background: var(--color-emphasis);
}

.sub-section-title:first-child {
  margin-top: 0;
}

/* ----- Content Headings ----- */
.section-heading {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary-dark);
  margin: var(--space-xl) 0 var(--space-sm);
  padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
  border-left: 4px solid var(--color-primary);
  border-radius: 2px;
}

/* ----- Content Spacing ----- */
.sub-content {
  padding: var(--space-2xl) 0;
  position: relative;
  counter-reset: step;
}

.sub-content p {
  margin-bottom: var(--space-sm);
}

.sub-content p:last-child {
  margin-bottom: 0;
}

/* 高齢の読み手向けに本文の読み幅を制限（表・地図・画像は対象外） */
.sub-content > .inner > p,
.sub-content > .inner > .bullet-list,
.sub-content > .inner > ol {
  max-width: 42em;
}

.sub-content ol {
  margin: var(--space-lg) 0;
  padding-left: 1.5em;
  list-style: decimal;
}

.sub-content ol li {
  margin-bottom: var(--space-sm);
  line-height: var(--leading-normal);
}

/* Bullet list (ul with disc markers) */
.bullet-list {
  margin: var(--space-sm) 0 var(--space-lg);
  padding-left: 1.5em;
  list-style: disc;
}

.bullet-list li {
  margin-bottom: var(--space-xs);
  line-height: var(--leading-normal);
}

/* ----- Info List (definition list) ----- */
.info-list {
  margin: var(--space-lg) 0;
}

.info-list > div {
  display: flex;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.info-list > div:last-child {
  border-bottom: none;
}

.info-list dt {
  width: 160px;
  flex-shrink: 0;
  font-weight: 600;
  color: var(--color-heading);
}

/* お問い合わせページ: 電話・メールを高齢者が押しやすい44pxタップ領域に */
.info-list--contact dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 6px;
  margin-left: -6px;
  font-weight: 600;
}

.info-list--contact dd a[href^="tel:"] {
  font-size: var(--text-lg);
  letter-spacing: 0.02em;
}

/* 電話番号などの補足（受付時間等） */
.info-list__note {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ----- Facility Info Box ----- */
.facility-info {
  background: var(--color-bg-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0 var(--space-lg);
}

.facility-info p {
  margin: var(--space-xs) 0;
}

/* ----- Access Map ----- */
.access-map {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  margin: var(--space-lg) 0;
}

.access-route {
  margin-top: var(--space-md);
}

.map-iframe {
  border: 0;
  border-radius: var(--radius-md);
  width: 400px;
  height: 300px;
  max-width: 100%;
}

/* ----- Price / Extra Tables ----- */
.price-table,
.extra-table {
  width: 100%;
  font-size: var(--text-sm);
  margin: var(--space-md) 0 var(--space-lg);
}

.price-table th,
.price-table td,
.extra-table th,
.extra-table td {
  border: 1px solid var(--color-table-border);
  padding: var(--space-sm) var(--space-md);
}

.price-table th,
.extra-table th {
  background: var(--color-table-header);
  color: #fff;
  font-weight: 600;
  text-align: center;
}

.price-table td.label,
.price-table th.label,
.extra-table td.label,
.extra-table th.label {
  text-align: left;
  background: var(--color-table-stripe);
  color: var(--color-text);
  font-weight: 500;
}

/* 金額と区分ラベルは一かたまりで読ませる（折返し破綻を防ぐ。表は .table-wrap で横スクロール） */
.price-table td {
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.price-table td.group,
.price-table th.group,
.extra-table td.group,
.extra-table th.group {
  background: var(--color-table-stripe);
  color: var(--color-text);
  vertical-align: middle;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.price-table .section-header {
  background: var(--color-bg-section);
  font-weight: 700;
}

.extra-table td {
  text-align: right;
}

/* 横スクロールの手がかり（既定は非表示・モバイルのみ表示） */
.table-scroll-hint {
  display: none;
}

/* ----- Service List ----- */
.service-list {
  margin: var(--space-md) 0 var(--space-lg);
}

.service-list table {
  width: 100%;
  font-size: var(--text-sm);
}

.service-list td,
.service-list th {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
}

.service-list td.item,
.service-list th.item {
  width: 60%;
  text-align: left;
  font-weight: 500;
}

.service-list td.cost {
  width: 40%;
  text-align: right;
}

/* ----- Doc List ----- */
.doc-list {
  margin: 0 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.doc-list li {
  list-style: none;
}

.doc-link,
.doc-link:visited,
.doc-link:hover,
a.doc-link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}

.doc-link:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  background: var(--color-primary-light);
  color: var(--color-text);
  text-decoration: none;
}

.doc-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--color-accent);
}

.doc-link__text {
  flex: 1;
  font-weight: 500;
  line-height: var(--leading-tight);
}

.doc-badge {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-doc-badge);
  background: rgba(165, 96, 60, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ----- Note ----- */
.note {
  font-size: var(--text-sm);
  color: var(--color-note);
  margin: var(--space-xs) 0 var(--space-lg);
}

/* ----- Step Heading (flow page・番号つきステップ) ----- */
.step-heading {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-full);
  padding: 8px 24px 8px 8px;
}

.step-heading::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 1.1rem;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-table-header);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----- Floor Section (institution page) ----- */
.floor-section {
  display: flex;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.floor-plan {
  flex: 5;
  min-width: 0;
}

.floor-plan img {
  width: 100%;
  max-height: calc(100% - 64px);
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* 明るい写真・白線の案内図が生成り地に溶けないよう、外側ヘアラインで額装 */
.floor-plan img,
.floor-photos a,
.gallery a {
  box-shadow: 0 0 0 1px rgba(var(--color-wood-dark-rgb), 0.12);
}

.floor-photos {
  flex: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.floor-photos img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

.floor-photos a {
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
}


/* ----- Gallery ----- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.gallery a {
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
}


/* ----- Video Container ----- */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: var(--space-lg) 0;
  border-radius: var(--radius-md);
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ----- Indent ----- */
.indent {
  padding-left: 1em;
}

/* =================================================================
   Responsive: Phone (max-width: 767px)
   ================================================================= */
@media (max-width: 767px) {
  .sub-content::before,
  .sub-content::after {
    display: none;
  }

  .page-hero {
    padding: var(--space-lg) 0;
  }

  .page-hero__title {
    font-size: var(--text-2xl);
  }

  .floor-section {
    flex-direction: column;
  }

  .floor-plan,
  .floor-photos {
    width: 100%;
  }

  .floor-photos {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .floor-photos a {
    flex: 1;
    min-width: 120px;
  }

  .table-wrap {
    position: relative;
    margin: var(--space-md) calc(-1 * var(--padding-container));
    padding: 0 var(--padding-container);
    /* 左右端のスクロール影（スクロールで自己隠蔽） */
    background:
      linear-gradient(to right, var(--color-bg-white) 30%, rgba(255, 253, 248, 0)) left / 40px 100% no-repeat local,
      linear-gradient(to left, var(--color-bg-white) 30%, rgba(255, 253, 248, 0)) right / 40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(46, 36, 27, 0.18), transparent) left / 16px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(46, 36, 27, 0.18), transparent) right / 16px 100% no-repeat scroll;
  }

  .table-scroll-hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: right;
    margin: 0 0 4px;
  }

  .access-map {
    flex-direction: column;
  }

  .access-map iframe {
    width: 100%;
    height: 250px;
  }

  .info-list > div {
    flex-direction: column;
  }

  .info-list dt {
    width: auto;
    margin-bottom: 2px;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}