/* ==========================================================================
   Contact (お問い合わせ)
   ========================================================================== */
.contact {
  padding: 32px 0;
  background-color: var(--color-main);
}

.contact__head {
  text-align: center;
}

.contact__title {
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: 0.04em;
}

.contact__lead {
  margin-top: 8px;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-blue-text);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.contact__form {
  margin: 24px auto 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* .contact__field / label / input / textarea の基本スタイルは
   「フォームという役割」の共通コンポーネントとして
   css/components/form.css（.c-form-field / .c-form-label / .c-form-control）
   へ移動した。このLPのContactセクション固有の配置・意匠のみ、
   このファイルに残している。 */

.contact__submit {
  position: relative;
  /* z-index:0を明示し、position:relativeのローカルスタッキングコンテキストを確立。
     これがないと::before(z-index:-1)がこの要素内で背面に回らず、
     祖先側のスタッキングコンテキストまで抜けてしまい影が非表示になっていた。 */
  z-index: 0;
  align-self: center;
  margin-top: 8px;
  display: inline-flex;
  gap: 6px;
  width: 204px;
  height: 41px;
  /* SP版: ボタン本体の色は::afterに移した(下記コメント参照)ため、
     ここは透過にする。PC版はbox-shadow方式のためmedia query内で元の色に戻す。 */
  background-color: transparent;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  transition: opacity 0.2s ease;
}

.contact__submit::before {
  /* SP版: 右下にずれた濃いオレンジの背景装飾。
     CSSの仕様上、負のz-indexの子要素は「要素自身の背景色」より手前(上)に
     描画される。そのため::before(オフセットあり)とボタン自身の背景色(オフセット無し)
     を重ねると、重なり部分はこの::beforeの色が勝ってしまい、
     ボタン本体色ははみ出た上・左の隙間にしか見えない逆転現象が起きていた。
     対策として、ボタン本体の色は::afterに切り出し、同じz-index:-1でも
     ツリー順で::beforeの後に描画される::afterを上に乗せることで、
     「::before(濃いオレンジ・右下オフセット)の上に::after(薄いオレンジ・オフセット無し)」
     という正しい重なりにする。 */
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 100%;
  height: 100%;
  background-color: var(--color-accent-dark);
  z-index: -1;
}

.contact__submit::after {
  /* SP版: ボタン本体そのものの色(オフセット無し)。::beforeより後に描画されるため、
     重なり部分では::beforeの上に乗り、::beforeは右側・下側にのみはみ出て見える。 */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-accent);
  z-index: -1;
}

.contact__submit:hover {
  opacity: 0.85;
}

/* WordPressテーマ側のみの差分: 静的HTML版では<img src="...">だが、
   Contact Form 7の「フォーム」タブはPHPを実行できないため
   <?php echo ...; ?>で画像パスを解決できない。そのため送信ボタン内の
   矢印だけ<span aria-hidden="true">とCSS背景画像に変更している
   (幅・aspect-ratio・回転などの見た目の数値は静的HTML版と同一)。
   注意: displayプロパティはここでは指定しない。.pc-only/.sp-only
   (base/utilities.css)と同じ詳細度(0,1,0)のセレクタのため、
   ここで指定すると読み込み順の関係でPC/SP表示切り替えを
   上書きしてしまう。.contact__submit-arrowは.contact__submit
   (display:inline-flex)の子要素であり、flexの仕様上どの道
   ブロックレベル相当で扱われるため、displayの指定自体が不要。 */
.contact__submit-arrow {
  width: 12px;
  background-image: url("../../images/common/contact-submit-arrow.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.contact__submit-arrow.sp-only {
  /* SP版: 参照SVG(sp-arrow-triangle.svg)はwidth/height="100%"の上向き三角形で、
     幅のみ指定するとintrinsic sizeを持てず300x150にフォールバックし、
     12px幅×150px高さの縦長の白い装飾になっていた(newsセクションの矢印と同一原因)。
     aspect-ratioで高さを固定し、rotate(90deg)で上向き▲を右向き▶にする。
     .sp-onlyに限定しているため、PC版(.pc-only)の矢印には一切影響しない。 */
  aspect-ratio: 17.3205 / 15;
  transform: rotate(90deg);
  background-image: url("../../images/common/sp-arrow-triangle.svg");
}

/* .contact__form-message の基本UI（表示/非表示・成功/エラー色分け）も
   css/components/form.css（.c-form-message）へ移動した。 */

@media (min-width: 768px) {
  .contact {
    padding: 76px 0;
  }

  .contact__title {
    font-size: 3.2rem;
  }

  .contact__lead {
    margin-top: 16px;
    font-size: 2rem;
    color: var(--color-text);
  }

  .contact__form {
    margin-top: 48px;
    width: 822px;
    max-width: 100%;
    gap: 16px;
  }

  .contact__submit {
    margin-top: 8px;
    gap: 24px;
    width: 205px;
    height: 52px;
    font-size: 2.4rem;
    /* 「送信する」テキストがボタン内で下寄りに見える問題への対応。
       align-items:centerはテキストの行ボックス(font-size 24pxに対し
       line-height:normalで約35px)を中央揃えするが、Noto Sans JPは
       行ボックス内でのグリフの実描画位置が下寄りのため、行ボックス自体を
       中央に置いても文字は下に偏って見えていた(実測: 上余白26px/下は
       -9px=はみ出し)。line-height:0は行ボックスの余白(leading)だけを
       ゼロにし、グリフ自体の描画サイズには影響しないため、文字を上下中央に
       寄せられる(実測: 上下とも8.5pxで対称)。矢印(.contact__submit-arrow)は
       文字を含まない画像(背景画像)のため、line-heightの影響を受けず
       元の位置(上下とも15.88pxで対称)のまま変化しない。
       SP版は現象が出ていないため、PC(このmedia query内)のみに限定し、
       .c-cta-btn(6箇所共通)ではなく.contact__submitだけに適用している。 */
    line-height: 0;
    /* 上記line-height:0で「送信する ▶」はボタン中央線に対して数学的には
       上下対称(実測8.5px/8.5px)になっているが、右下にオフセットした
       box-shadow(5px 6px)の視覚的な重みにより、見た目上はまだわずかに
       下寄りに感じられる(box-shadowを含む見た目上のシルエット全体の
       中心は、実際のボタン矩形の中心よりわずかに下にあるため)。
       ボタン自体のwidth/height/位置/影は変更せず、内容だけをその分
       上へ寄せるため、flexコンテナのpadding-bottomで
       テキスト・矢印を「まとまりとして」均等に押し上げる
       (padding-bottomはflexアイテム全員を同じ量だけ均等に押し上げる
       ため、テキストと矢印の相対位置関係・矢印サイズは崩れない)。
       実測: padding-bottom 1pxにつき0.5px上へ移動するため、12pxで6px上へ移動
       させたところ、今度は逆に少し上寄りに見えるとの指摘があったため、
       7pxに調整(12pxから5px減=下方向へ約2.5px戻す。実測: テキスト上5px/下12px)。
       さらに約2px下げる指摘があったため3pxに調整(7pxから4px減=下方向へ
       約2px。実測: テキスト上7px/下10px)。 */
    padding-bottom: 3px;
    /* 「送信する ▶」のまとまりが背景装飾に対してやや左寄りに見えるとの
       指摘への対応。justify-content:centerで水平中央揃えされているが、
       box-sizing:border-boxのためpadding-leftを増やすとコンテンツ幅が
       その分狭まり、中央位置が右へずれる(padding-bottom同様、
       1pxにつき0.5px右へ移動)。ボタン自体のwidth/height/位置
       (border-boxのため外形サイズは不変)には影響しない。
       最初6pxで試したところ見た目の変化が小さすぎたため、
       14pxに変更(実測: テキスト開始位置・矢印終了位置とも
       元の位置から7pxずつ右へ移動)。その後、まだわずかに左寄りとの
       指摘があったため19pxへ再調整(14pxからさらに5px増=見た目で
       約2.5px追加で右へ移動)。さらに微調整として22px、
       続けて25pxへ変更(22pxからさらに3px増=見た目で約1.5px追加で右へ移動)。 */
    padding-left: 25px;
    /* PC版はSP用のtransparent化を打ち消し、本来の背景色+box-shadow方式に戻す */
    background-color: var(--color-accent);
    box-shadow: 5px 6px 0 var(--color-accent-dark);
  }

  .contact__submit::before {
    content: none;
  }

  .contact__submit::after {
    /* PC版はbox-shadowで表現しているため、SP用の::afterは不要 */
    content: none;
  }

  .contact__submit-arrow {
    /* 矢印がやや大きく見えるとの指摘のため、アスペクト比(19.6914:20.2611)は
       維持したまま、幅のみ19.6914px→17pxへ縮小(約13.7%減、高さは
       約20.26px→約17.49pxへ連動)。ボタン自体の幅・高さ・位置・
       背景色・影・文字サイズには影響しない。 */
    width: 17px;
    aspect-ratio: 19.6914 / 20.2611;
  }
}