@charset "UTF-8";
/* =========================================================================
   contact.css — Contact V1（Figma 実体フレーム 16069:21993・1440×5392）
   縦方向はローカル差（次要素Y −（前要素Y＋高さ））で積む。値は Figma px ÷ 10 = rem。
   共通部品（Locations / Before-After / FAQ）への contact 固有の上書きは、各ブロックの末尾に
   「override」と明記してまとめてある（common.css は編集しない）。
   ========================================================================= */

/* ---------- ヘッダー V2（明るい背景・y=10） ---------- */
.contact-top { padding-top: 1rem; }

/* ---------- ヒーロー（ページ地色） ---------- */
.c-hero { width: 107rem; margin-inline: auto; }
.c-hero__row { display: flex; align-items: center; justify-content: space-between; margin-top: 9rem; }  /* ヘッダー下端 95 → 写真 185 */
.c-hero__text { width: 47.16rem; }
.c-hero__title { width: 47.16rem; }
.c-hero__desc { margin-top: 1.6rem; white-space: pre-wrap; }   /* 原稿ママ：ipsum と laboris の間は二重スペース */
.c-hero__btn { display: flex; width: fit-content; margin-top: 2.6rem; }
.c-hero__photo { width: 53.2527rem; height: 35.8332rem; border-radius: 2.2rem; overflow: hidden; flex-shrink: 0; }
.c-hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* 連絡先（アイコン付き4つ）：幅と間隔は Figma の実測（等間隔ではない） */
.c-info { display: flex; align-items: center; height: 5.6rem; margin-top: 4.366rem; }   /* 写真下端 543.33 → 586.99 */
.c-info__item { display: flex; align-items: center; flex-shrink: 0; }
.c-info__item--1 { width: 23.044rem; --c-info-gap: 1.458rem; }
.c-info__item--2 { width: 24.744rem; margin-left: 3.256rem; --c-info-gap: 1.752rem; }
.c-info__item--3 { width: 17.938rem; margin-left: 4.156rem; --c-info-gap: 1.552rem; }
.c-info__item--4 { width: 29.431rem; margin-left: 4.162rem; --c-info-gap: 1.545rem; }
.c-info__icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 5.2854rem; height: 5rem; background: var(--color-neutral-100);
  border: 0.5px solid var(--color-c-info-border); border-radius: 0.8rem;
  box-shadow: 0 0.4rem 0.4rem var(--color-c-info-shadow);
}
.c-info__icon img { width: 3.3rem; height: 3.3rem; }
.c-info__text { display: flex; flex-direction: column; gap: 0.2rem; margin-left: var(--c-info-gap); font-size: 1.4rem; line-height: 1.25; letter-spacing: 0; }
.c-info__label { font-weight: 400; color: var(--color-neutral-600); letter-spacing: 0; }
.c-info__value { font-weight: 500; color: var(--color-neutral-800); letter-spacing: 0; }
.c-info__item--2 .c-info__value { width: 17.71rem; }
a.c-info__value:hover { color: var(--color-primary-400); }

:root {
  --color-c-info-border: #ebeef4;   /* 連絡先アイコン箱の枠線（Figma 裸値） */
  --color-c-info-shadow: #f2f2ee;   /* 同 影 */
  --color-input-placeholder: #8a9cbe; /* Neutrals Colors/300（プレースホルダ） */
}

/* ---------- 予約フォーム（紺・1440×779.869・角丸16） ---------- */
.book {
  width: 144rem; margin: 10.741rem auto 0;        /* 連絡先下端 642.99 → 750.4 */
  padding: 12rem 0; background: var(--color-neutral-800); border-radius: var(--radius-card);
}
.book__inner { display: flex; align-items: center; padding-left: 23.357rem; }   /* カード x=233.63（セクション x=0.06） */
.book-form {
  width: 51.9439rem; height: 53.9869rem; flex-shrink: 0;
  padding: 4.994rem 0 0 4.171rem;
  background: var(--color-neutral-100); border-radius: var(--radius-card);
}
.book-form__grid { display: grid; grid-template-columns: 20.2rem 20.2rem; column-gap: 3.2rem; row-gap: 1.6rem; }
.field { display: flex; flex-direction: column; gap: 0.8rem; }
.field__label { font-size: 1.4rem; line-height: 1.6rem; font-weight: 500; color: var(--color-neutral-800); }
.field__control {
  display: block; width: 100%; height: 4.2rem; margin: 0;
  padding: 0.5rem 0.5rem 0.5rem 1.1rem; /* border 1 + 11 = Figma pl12 (Figma padding is measured from the outer edge) */
  background: var(--color-neutral-100); border: 1px solid var(--color-input-border); border-radius: 0.8rem;
  box-shadow: var(--shadow-input);
  font-size: 1.4rem; line-height: 1.25; font-weight: 400; letter-spacing: 0; color: var(--color-neutral-800);
  outline-offset: 0;
}
.field__control::placeholder { color: var(--color-input-placeholder); opacity: 1; }
.field__control:focus { border-color: var(--color-primary-100); }
.field__select { position: relative; }
.field__select select { appearance: none; -webkit-appearance: none; padding-right: 3.2rem; cursor: pointer; }
.field__select select:invalid { color: var(--color-input-placeholder); }
.field__select select option { color: var(--color-neutral-800); }
.field__select img { position: absolute; right: 0.9rem; top: 1.3rem; width: 1.6012rem; height: 1.6012rem; pointer-events: none; }
.field--message { margin-top: 1.903rem; }         /* 3段目下端 230 → 249.03 */
.field__control--area {
  width: 43.6rem; height: 10rem; padding: 1.2rem 1.3rem; /* border 1 + = Figma 13/14 */ resize: none;
  font-size: 1.4rem; line-height: 2.2rem; letter-spacing: var(--ls-default);
}
.book-form__submit { display: flex; width: fit-content; margin-top: 2.4rem; }
.book-form__send { display: flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 0.8rem; background: var(--color-neutral-800); }
.book-form__send img { width: 2rem; height: 2rem; }

.book__text { width: 38.494rem; margin-left: 7.058rem; }    /* カード右端 753.07 → 823.65 */
.book__title { width: 28.1rem; margin-left: 0.191rem; }
.book__desc { margin-top: 1.7rem; color: var(--color-text-on-dark); }

/* ---------- Come and visit（共通 Locations） ---------- */
.visit { margin-top: 12rem; }
.visit__head { display: flex; align-items: flex-end; padding-left: 18.563rem; }
.visit__title { width: 39.8rem; flex-shrink: 0; }
.visit__buttons { margin-left: 26.6rem; }          /* ボタン群 x=849.63（右端 1281.63＝Figmaママ） */
.visit__slider { margin-top: 2.9rem; }
/* override（contact の Figma 実測）：トラック開始 x=-14.38、行間 70 */
.visit .locations__track { margin-left: -1.438rem; }
.visit .contact-rows { gap: 7rem; }

/* ---------- ビフォー・アフター（白・1440×744.48・角丸16） ---------- */
.c-ba {
  width: 144rem; margin: 12.3rem auto 0;          /* 連絡先の行 下端 2319.5 → 2442.5 */
  padding: 12.132rem 0 12rem; background: var(--color-neutral-100); border-radius: var(--radius-card);
}

/* ---------- FAQ（ページ地色・1070.06×516.25） ---------- */
.c-faq { display: flex; justify-content: space-between; align-items: flex-start; width: 107.006rem; margin: 12rem auto 0; }
.c-faq__side { width: 47rem; flex-shrink: 0; }
.c-faq__title { width: 39.8rem; margin: 1.167rem 0 0 0.259rem; }
.c-faq__desc { width: 39.747rem; margin-top: 1.5rem; }
.c-faq__btn { display: flex; width: fit-content; margin: 2.6rem 0 0 -1.041rem; }  /* Figmaママ：ボタンは列の左端より 10.41px 左 */
.c-faq__box {
  height: 21.775rem; margin-top: 5.983rem; padding: 3.744rem 0 0 2.359rem;
  background: var(--color-primary-200); border-radius: var(--radius-card);
}
.c-faq__box-title { font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 500; color: var(--color-neutral-800); white-space: nowrap; }
.c-faq__box-desc { width: 41.135rem; margin-top: 1.16rem; }
.c-faq__mail { display: flex; width: fit-content; margin-top: 1.846rem; padding: 1.2rem 2rem; border: 0; background: var(--color-neutral-100); }
.c-faq__mail:hover { background: var(--color-primary-300); }
/* override（contact の Figma 実測）：間隔 16 / 11.625 / 16、左余白 29.53、開いた項目の位置 */
.c-faq__list { width: 57rem; gap: 1.6rem; }
.c-faq__list .faq-item:nth-child(3) { margin-top: -0.4375rem; }
.c-faq__list .faq-item__q { padding-left: 2.953rem; }
.c-faq__list .faq-item.is-open:has(.faq-item__a) .faq-item__q { align-items: flex-start; padding-top: 4.066rem; padding-bottom: 0.8rem; }
.c-faq__list .faq-item.is-open:has(.faq-item__a) .faq-item__icon { margin-top: -0.6rem; }
.c-faq__list .faq-item.is-open:not(:has(.faq-item__a)) .faq-item__q { padding-bottom: 3.444rem; }  /* 回答文の無い項目（Figmaに回答なし）は開いても高さを保つ */
.c-faq__list .faq-item__a { padding: 0 10rem 4.734rem 2.953rem; }

/* ---------- SNS（紺・下端はフッターの下に潜る＝見える部分は下角なし） ---------- */
.social {
  width: 144rem; margin: 12rem auto 0;
  padding: 12rem 0; background: var(--color-neutral-800); border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.social__inner { display: flex; align-items: flex-start; padding-left: 18.519rem; }
.social__photo { width: 30.1677rem; height: 50.5311rem; flex-shrink: 0; border-radius: var(--radius-card-lg); overflow: hidden; }
.social__photo img { width: 100%; height: 100%; object-fit: cover; }
.social__photo--2 { margin-left: 2.403rem; }
.social__text { width: 40.15rem; margin-left: 4.112rem; padding-top: 13.765rem; }
.social__title { width: 40.06rem; }
.social__desc { margin-top: 1.2rem; color: var(--color-text-on-dark); }
.social__btn { display: flex; width: fit-content; margin-top: 3.204rem; }

main + .site-footer { margin-top: 0; }             /* SNS の紺の直下にフッター（y=4688.54） */

/* =========================================================================
   SP（<1024px）— SP カンプなし：index の SP 規約に合わせた1カラム
   ========================================================================= */
@media (max-width: 1023px) {
  .c-hero { width: auto; margin-inline: var(--sp-inset); }
  .c-hero__row { flex-direction: column; align-items: stretch; gap: 3.2rem; margin-top: 3.2rem; }
  .c-hero__text, .c-hero__title { width: auto; }
  .c-hero__photo { width: 100%; height: auto; aspect-ratio: 532.527 / 358.332; }
  .c-info { flex-direction: column; align-items: flex-start; gap: 1.6rem; height: auto; margin-top: 3.2rem; }
  .c-info__item, .c-info__item:nth-child(n) { width: auto; margin-left: 0; --c-info-gap: 1.4rem; }
  .c-info__item--2 .c-info__value { width: auto; }

  .book { width: auto; margin: var(--space-section) 0.8rem 0; padding: var(--space-section) 0; }
  .book__inner { flex-direction: column-reverse; align-items: stretch; gap: 3.2rem; padding: 0 var(--sp-inset); }
  @supports (padding-inline: max(1px, 2px)) {
    .book__inner { padding-inline: max(1.6rem, calc((100vw - 1.6rem - 72rem) / 2)); }
  }
  .book__text, .book__title { width: auto; margin-left: 0; }
  .book-form { width: 100%; height: auto; padding: 2.4rem 2rem 2.8rem; }
  .book-form__grid { grid-template-columns: 1fr; row-gap: 1.6rem; }
  .field__control--area { width: 100%; }

  .visit { margin-top: var(--space-section); }
  .visit__head { flex-direction: column; align-items: flex-start; gap: 2rem; padding: 0 var(--sp-inset); }
  .visit__title { width: auto; }
  .visit__buttons { margin-left: 0; }
  .visit__slider { margin-top: 2.4rem; }
  .visit .locations__track { margin-left: 0; }
  .visit .contact-rows { gap: 1.6rem; margin-top: 2.4rem; margin-inline: var(--sp-inset); }

  .c-ba { width: auto; margin: var(--space-section) 0.8rem 0; padding: var(--space-section) 0; }
  .c-ba .before-after { margin-inline: var(--sp-inset); }
  @supports (margin-inline: max(1px, 2px)) {
    .c-ba .before-after { margin-inline: max(1.2rem, calc((100vw - 1.6rem - 72rem) / 2)); }
  }

  .c-faq { flex-direction: column; gap: 3.2rem; width: auto; margin: var(--space-section) var(--sp-inset) 0; }
  .c-faq__side { width: 100%; }
  .c-faq__title, .c-faq__desc { width: auto; margin-left: 0; }
  .c-faq__title { margin-top: 0; }
  .c-faq__btn { margin-left: 0; margin-top: 2.4rem; }
  .c-faq__box { height: auto; margin-top: 3.2rem; padding: 2.4rem 2rem; }
  .c-faq__box-title { white-space: normal; }
  .c-faq__box-desc { width: auto; }
  .c-faq__mail { margin-top: 1.6rem; }
  .c-faq__list { width: 100%; }
  .c-faq__list .faq-item:nth-child(3) { margin-top: 0; }
  .c-faq__list .faq-item__q,
  .c-faq__list .faq-item.is-open:not(:has(.faq-item__a)) .faq-item__q,
  .c-faq__list .faq-item.is-open:has(.faq-item__a) .faq-item__q { align-items: center; padding: 2rem; }
  .c-faq__list .faq-item.is-open:has(.faq-item__a) .faq-item__q { padding-bottom: 1rem; }
  .c-faq__list .faq-item.is-open:has(.faq-item__a) .faq-item__icon { margin-top: 0; }
  .c-faq__list .faq-item__a { padding: 0 2rem 2rem; }

  .social { width: auto; margin: var(--space-section) 0.8rem 0; padding: var(--space-section) 0; }
  .social__inner { flex-wrap: wrap; gap: 1.2rem; padding: 0 var(--sp-inset); }
  .social__photo, .social__photo--2 { width: calc((100% - 1.2rem) / 2); max-width: 30.1677rem; height: auto; aspect-ratio: 301.677 / 505.311; margin-left: 0; }
  .social__text { width: 100%; margin: 2rem 0 0; padding-top: 0; }
  .social__title { width: auto; }
  .social__btn { margin-top: 2.4rem; }
}