@charset "UTF-8";
/* =============================================================================
   Contact — Page-specific CSS（Issue-017 / `/contact/` 以外には配信しない）
   -----------------------------------------------------------------------------
   設計順序（CLAUDE.md §11）:
     Global Design Token（rebuild.css :root）
       → Global Component（.l-inner / .section / .sec-eyebrow / .sec-title /
                            .cta / .cta--primary / .link-inline）
         → Page-specific（本ファイル / prefix `ct-`）
   前提:
     - `rebuild.css` の後に読み込む（deps: wp-diversity-rebuild）
     - `.page-id-*` セレクタを作らない
     - `!important` を使わない
     - gradient / box-shadow を使わない（contact-css-migration-v1 §7）
   Rev.2 対応（HD-017-07〜10）:
     - Route 1 mailto CTA / Route 2 アドレスコピー / Route 3 フォーマットコピー
     - `.ct-copy[hidden]` = Progressive Enhancement の初期状態
     - `.ct-template__text`（<pre>）は pre-wrap で横 overflow を出さない
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Section Rhythm（Page-specific）
   -----------------------------------------------------------------------------
   `.section` を Global セレクタにしない。`class="section"` は他ページでも使われて
   おり、素の `.section` を Global 化すると Regression になる。
   company.css / products-list.css / curble-chair.css / records.css と同一の役割。
   -------------------------------------------------------------------------- */
.page-contact .section {
  padding: var(--sp-sec) var(--sp-gutter);
}

.page-contact .section-rule {
  max-width: var(--w-page);
  margin-inline: auto;
  height: 1px;
  background: var(--c-line);
}

/* -----------------------------------------------------------------------------
   S01 Hero
   -------------------------------------------------------------------------- */
.page-contact .ct-hero {
  padding: clamp(40px, 5.2vw, 80px) var(--sp-gutter) clamp(36px, 4.4vw, 68px);
}

.ct-hero__title {
  margin: 0 0 var(--sp-md);
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-head);
  letter-spacing: .06em;
  color: var(--c-text-strong);
}

.ct-hero__lead {
  max-width: var(--w-measure);
  margin: 0 0 var(--sp-md);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-text);
}

.ct-hero__reply {
  max-width: var(--w-measure);
  margin: 0;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
}

/* -----------------------------------------------------------------------------
   S02 Inquiry Guidance（C-18）
   カード UI を使わない。罫線区切りの縦 1 列（AI-017-09）
   -------------------------------------------------------------------------- */
.ct-types__lead {
  max-width: var(--w-measure);
  margin: 0 0 var(--sp-lg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-2);
}

.ct-type {
  padding-block: var(--sp-md);
  border-top: 1px solid var(--c-line);
}

.ct-type:last-of-type {
  border-bottom: 1px solid var(--c-line);
}

/* Primary（法人）だけ左罫線で優先度を示す。面・影・角丸を使わない */
.ct-type--primary {
  padding-left: var(--sp-sm);
  border-left: 2px solid var(--c-primary);
}

.ct-type__title {
  margin: 0 0 6px;
  font-size: var(--fs-h3-group);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: .04em;
  color: var(--c-text-strong);
}

.ct-type__desc {
  max-width: var(--w-measure);
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-2);
}

/* -----------------------------------------------------------------------------
   S03 Email Contact — Primary Conversion Point（3 経路）
   -------------------------------------------------------------------------- */
.page-contact .ct-mail {
  background-color: var(--c-bg-sub);
}

.ct-mail__lead {
  max-width: var(--w-measure);
  margin: 0 0 var(--sp-lg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-2);
}

/* Route 1 / Route 2 --------------------------------------------------------- */
.ct-mail__box {
  max-width: 640px;
  padding: var(--sp-md);
  background-color: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 4px;
}

.ct-mail__label {
  margin: 0 0 6px;
  font-size: var(--fs-meta);
  letter-spacing: .08em;
  color: var(--c-text-faint);
}

/* 可視アドレス。22 文字の分割不能 ASCII のため overflow-wrap は必須 */
.ct-mail__address {
  margin: 0 0 var(--sp-md);
  font-family: var(--f-mono);
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ct-mail__address a {
  display: inline-block;
  min-height: var(--tap);
  color: var(--c-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--c-link-underline-strong);
}

.ct-mail__address a:visited {
  color: var(--c-primary);
  border-bottom-color: var(--c-link-underline-strong);
}

.ct-mail__address a:hover,
.ct-mail__address a:active {
  color: var(--c-primary-dark);
  border-bottom-color: currentColor;
}

.ct-mail__address a:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  color: var(--c-primary-dark);
}

/* CTA とコピーボタンの並び。320px では縦積み */
.ct-mail__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm);
  margin: 0;
}

.ct-mail__cta {
  max-width: 100%;
}

.ct-mail__note {
  max-width: var(--w-measure);
  margin: var(--sp-sm) 0 0;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
}

/* Route 3 Inquiry Template -------------------------------------------------- */
.ct-template__title {
  margin: var(--sp-lg) 0 var(--sp-sm);
  font-size: var(--fs-h3-group);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: .04em;
  color: var(--c-text-strong);
}

.ct-template__guide {
  max-width: var(--w-measure);
  margin: 0 0 var(--sp-sm);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-2);
}

/*
 * <pre> は「そのまま貼り付ける整形済みテキスト」の意味論（AI-017-19）。
 * white-space: pre-wrap で改行を保持しつつ、はみ出す行だけ折り返す。
 * overflow-x: auto（横スクロール）は使わない。
 */
.ct-template__text {
  max-width: 640px;
  margin: 0 0 var(--sp-sm);
  padding: var(--sp-md);
  background-color: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  font-family: var(--f-sans);
  font-size: var(--fs-body-s);
  line-height: 1.9;
  color: var(--c-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

.ct-template__actions {
  margin: 0;
}

.ct-template__note {
  max-width: var(--w-measure);
  margin: var(--sp-sm) 0 0;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
}

/* Copy control（Progressive Enhancement）------------------------------------ */
/* JS が clipboard 手段を確認できるまで表示しない。!important は使わない */
.ct-copy[hidden] {
  display: none;
}

.ct-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 14px;
  background-color: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--fs-body-s);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-primary);
  cursor: pointer;
}

.ct-copy:hover,
.ct-copy:active {
  border-color: var(--c-primary);
  color: var(--c-primary-dark);
}

.ct-copy:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  color: var(--c-primary-dark);
}

/* feedback。空文字でも高さを確保し、表示・非表示で行が跳ねないようにする */
.ct-copy__status {
  min-height: 1.6em;
  margin: 6px 0 0;
  font-size: var(--fs-body-s);
  line-height: 1.6;
  color: var(--c-text-muted);
}

/* -----------------------------------------------------------------------------
   S04 FAQ（C-15 / <details>）
   -------------------------------------------------------------------------- */
.ct-faq__item {
  border-top: 1px solid var(--c-line);
}

.ct-faq__item:last-child {
  border-bottom: 1px solid var(--c-line);
}

.ct-faq__q {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding-block: var(--sp-sm);
  padding-right: 28px;
  position: relative;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-head);
  color: var(--c-text-strong);
  cursor: pointer;
  list-style: none;
}

/* 既定マーカーを消し、装飾は CSS の責任で描く（C-06） */
.ct-faq__q::-webkit-details-marker {
  display: none;
}

.ct-faq__q::after {
  content: "";
  position: absolute;
  right: 6px;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--c-text-muted);
  border-bottom: 1.5px solid var(--c-text-muted);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.ct-faq__item[open] > .ct-faq__q::after {
  transform: rotate(-135deg);
}

.ct-faq__q:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

.ct-faq__a {
  max-width: var(--w-measure);
  margin: 0 0 var(--sp-md);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-2);
}

/* -----------------------------------------------------------------------------
   S05a Company / S05b Privacy
   -------------------------------------------------------------------------- */
.ct-company__text,
.ct-privacy__text {
  max-width: var(--w-measure);
  margin: 0 0 var(--sp-md);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-2);
}

.ct-company__link,
.ct-privacy__link {
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Responsive
   token の clamp() を優先し、media query は最小限にとどめる。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
  /* CTA とコピーボタンを縦積みにし、320px でも溢れさせない */
  .ct-mail__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ct-mail__actions .cta,
  .ct-mail__actions .ct-copy {
    width: 100%;
  }
}