/*
 * top.css — トップページ（index.html）固有のレイアウト。tokens.css・base.css・pages.css の後に読む。
 * 白地と薄い緑の帯を交互に置き、写真は大きめ、余白は広め。区切りは余白と罫1本（影・カードの枠は使わない）。
 */

/* ---------- 画面遷移：スタッフの写真だけが動く（受け側の staff.html にも同じ宣言が要る） ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
::view-transition-group(photo-s1),
::view-transition-group(photo-s2),
::view-transition-group(photo-s3) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
::view-transition-old(photo-s1), ::view-transition-new(photo-s1),
::view-transition-old(photo-s2), ::view-transition-new(photo-s2),
::view-transition-old(photo-s3), ::view-transition-new(photo-s3) {
  height: 100%;
  object-fit: cover;
}

/* ---------- 節の共通 ---------- */
.page-top .band { padding-inline: 0; }           /* .container が左右の余白を持つ */
.sect { padding-block: clamp(var(--space-7), 2rem + 3vw, var(--space-8)); }   /* スマホ 48px・PC 72px */
.sect__title {
  margin-block-end: var(--space-5);
  font-size: clamp(calc(var(--fs-body) * 1.3333), 1rem + 1.5vw, var(--fs-step));
  line-height: var(--lh-heading);
  letter-spacing: 0;
  color: var(--sugi);
}
.page-top main :is(p, dd, li, summary) { word-break: auto-phrase; }
.sect__more { margin-block-start: var(--space-4); }

/* ==========================================================
 * 1. 最初の画面：スマホは 文字 → ボタン → 写真。PC は左に文字とボタン、右に写真
 * ========================================================== */
.hero { display: grid; gap: var(--space-5); padding-block: var(--space-5) var(--space-7); }
.hero__text { min-width: 0; }
.hero__title { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0; }
.hero__kind { display: block; font-size: var(--fs-display); line-height: 1.3; color: var(--sugi); }
.hero__tasks { display: block; margin-block-start: var(--space-2); font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.hero__price { margin-block-start: var(--space-4); font-size: var(--fs-body); line-height: 1.5; }
.hero__yen { margin-inline: 0.15em; font-size: var(--fs-figure); color: var(--ochre-text); font-variant-numeric: tabular-nums; }
.hero__who { margin-block-start: var(--space-2); font-size: var(--fs-body); line-height: 1.7; }

.hero__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.hero__btn { padding-inline: var(--space-4); }

.hero__img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-control);
  background: var(--mist);
}

/* 背の低いスマホ（375×667 など）：上の余白と行間を詰めて、主ボタンを最初の画面に入れる */
@media (max-width: 959px) and (max-height: 720px) {
  .hero { gap: var(--space-4); padding-block-start: var(--space-4); }
  .hero__tasks { margin-block-start: var(--space-1); }
  .hero__price { margin-block-start: var(--space-3); }
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas: "text img" "actions img";
    grid-template-rows: auto 1fr;
    column-gap: var(--space-7);
    row-gap: var(--space-6);
    align-items: center;
    padding-block: var(--space-7) var(--space-8);
  }
  .hero__text { grid-area: text; align-self: end; }
  .hero__actions { grid-area: actions; align-self: start; grid-template-columns: auto auto; justify-content: start; }
  .hero__btn { padding-inline: var(--space-7); }
  .hero__img { grid-area: img; aspect-ratio: 4 / 3; }
  .hero__tasks { margin-block-start: var(--space-3); }
  .hero__price { margin-block-start: var(--space-5); }
}

/* ==========================================================
 * 2. できること：写真の下に作業名と具体例。スマホも2列にして、写真を低く（縦に長くしない）
 * ========================================================== */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); }
.services__img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-control);
  background: var(--paper);
}
.services__name { margin-block: var(--space-2) var(--space-1); font-size: var(--fs-body); line-height: var(--lh-heading); letter-spacing: 0; }
.services__ex { font-size: var(--fs-small); line-height: 1.6; }
@media (min-width: 600px) {
  .services { column-gap: var(--space-5); row-gap: var(--space-6); }
  .services__img { aspect-ratio: 4 / 3; }
  .services__name { margin-block-start: var(--space-3); font-size: var(--fs-lead); }
  .services__ex { font-size: var(--fs-body); line-height: 1.7; }
}
@media (min-width: 1040px) {
  .services { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================
 * 3. お約束 / 6. ご利用の流れ（罫で区切った行を積む）
 * ========================================================== */
.promise__row, .steps__row { padding-block: var(--space-4); border-top: 1px solid var(--line); }
.promise__row:first-child, .steps__row:first-child { border-top: 0; padding-block-start: 0; }
.promise__name, .steps__name { margin-block-end: var(--space-1); font-size: var(--fs-lead); font-weight: 700; line-height: var(--lh-heading); letter-spacing: 0; color: var(--sugi); }
@media (min-width: 760px) {
  .promise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-6); }
  .promise__row { padding-block: 0; border-top: 0; }
  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-6); }
  .steps__row { padding-block: 0; border-top: 0; }
}

/* PC：流れは左に手順を積み、右に写真（文字だけの帯を続けない） */
.flow__img { display: none; }
@media (min-width: 960px) {
  .container.flow { max-width: var(--page-max); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--space-7); align-items: center; }
  .flow .steps { display: block; }
  .flow .steps__row { padding-block: var(--space-4); border-top: 1px solid var(--line); }
  .flow .steps__row:first-child { border-top: 0; padding-block-start: 0; }
  .flow__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-control); background: var(--paper); }
}

/* ==========================================================
 * 4. 料金
 * ========================================================== */
.price { width: 100%; max-width: 28rem; border-collapse: collapse; }
.price th, .price td { padding-block: var(--space-3); border-top: 1px solid var(--line); font-size: var(--fs-ui); text-align: start; }
.price tr:last-child :is(th, td) { border-bottom: 1px solid var(--line); }
.price th { font-weight: 500; }
.price td { text-align: end; }
.price__yen { font-size: var(--fs-figure); font-weight: 700; line-height: 1.2; color: var(--ochre-text); font-variant-numeric: tabular-nums; }
.price__facts { margin-block-start: var(--space-5); font-size: var(--fs-body); line-height: 1.7; }
.price__facts > div + div { margin-block-start: var(--space-3); }
.price__facts dt { font-weight: 700; color: var(--sugi); }
/* PC：左に表、右にお支払いの要点（右半分を空けない） */
@media (min-width: 960px) {
  .price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-8); align-items: start; }
  .price { max-width: none; }
  .price__facts { margin-block-start: 0; }
}

/* ==========================================================
 * 5. スタッフ：写真は3人とも同じ枠（正方形）
 * スマホは写真を左の固定幅に、PC は等幅の3列に。文の長さで写真の大きさが変わらないようにする
 * ========================================================== */
.staff { display: grid; gap: var(--space-6); }
.staff__item {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: start;
}
.staff__photo { display: block; border-radius: var(--radius-control); overflow: hidden; }
.staff__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--mist); }
.staff__body { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.staff__name { font-size: var(--fs-lead); line-height: var(--lh-heading); letter-spacing: 0.02em; color: var(--sugi); }
.staff__san { margin-inline-start: 0.1em; font-size: var(--fs-small); }
.staff__facts { margin-block-start: var(--space-2); font-size: var(--fs-small); line-height: 1.6; }
.staff__facts dt { font-weight: 700; color: var(--mute); }
.staff__facts dd + dt { margin-block-start: var(--space-1); }
.staff__btn { width: 100%; margin-block-start: auto; font-size: var(--fs-ui); }
.staff__facts { margin-block-end: var(--space-3); }
.staff__days, .staff__hours { display: block; }   /* 曜日と時間は別の行（時間の途中で折り返さない） */
.staff__hours { white-space: nowrap; }
.staff__note { margin-block-start: var(--space-2); }
@media (min-width: 760px) {
  .staff { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-5); }
  .staff__item { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: var(--space-4); }
  .staff__facts { font-size: var(--fs-body); }
}

/* ==========================================================
 * 7. よくある質問（抜粋。開閉）
 * ========================================================== */
.qa { max-width: 48rem; border-top: 1px solid var(--line); }
.qa__item { border-bottom: 1px solid var(--line); }
.qa__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 3.5rem;
  padding-block: var(--space-3);
  font-size: var(--fs-ui);
  font-weight: 700;
  line-height: var(--lh-ui);
  cursor: pointer;
  list-style: none;
}
.qa__item summary::-webkit-details-marker { display: none; }
.qa__item summary::after {
  content: "";
  flex: none;
  width: 0.6em;
  height: 0.6em;
  margin-inline-end: var(--space-2);
  border-right: var(--border) solid var(--sugi);
  border-bottom: var(--border) solid var(--sugi);
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--dur-quick) var(--ease-out);
}
.qa__item[open] summary::after { transform: translateY(0.15em) rotate(-135deg); }
.qa__item summary:hover { color: var(--sugi); }
.qa__item p { padding-block-end: var(--space-4); }

/* ==========================================================
 * 7. よくある質問 / 対応エリア / お知らせ：PC は左に質問、右にエリアとお知らせ
 * ========================================================== */
.info__side { display: grid; gap: clamp(var(--space-7), 2rem + 3vw, var(--space-8)); margin-block-start: clamp(var(--space-7), 2rem + 3vw, var(--space-8)); }
@media (min-width: 960px) {
  .info { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--space-8); align-items: start; }
  .info__side { gap: var(--space-7); margin-block-start: 0; }
}
.area__text { max-width: var(--measure); font-size: var(--fs-body); line-height: 1.8; }
/* 罫は上下とも .news__item が持つ（一番上の線と各行の線の長さを揃える） */
.news { max-width: 48rem; }
.news__item { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-bottom: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.6; }
.news__item:first-child { border-top: 1px solid var(--line); }
.news__item time { font-size: var(--fs-small); color: var(--mute); font-variant-numeric: tabular-nums; }

/* ==========================================================
 * 8. 締め：予約と電話。PC は中央に寄せる
 * ========================================================== */
.closing { padding-block: var(--space-8); }
.closing__inner { display: grid; justify-items: start; gap: var(--space-3); }
.closing .sect__title { margin-block-end: 0; }
.closing__btn { padding-inline: var(--space-8); }
/* 電話番号の置き場所：番号が入る枠を点線で見せる（架空の番号は出さない） */
.closing__tel {
  margin-block-start: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: var(--border) dashed var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--paper);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--ink);
}
.closing__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
@media (max-width: 639px) { .closing__btn, .closing__tel { width: 100%; } }
@media (min-width: 640px) {
  .closing__inner { justify-items: center; text-align: center; }
  .closing__links { justify-content: center; }
}