/**
 * NOYA DESIGN STUDIO — CONTACT誘導セクション(全ページ共通コンポーネント)
 *
 * 複数のページに挿入して使う「同期パターン」のため、CSS・JSの
 * 読み込みを特定ページ限定にせず、サイト全体で読み込む
 * (functions.php側もそれに合わせている)。
 *
 * ブロック構成(ブロックエディタでの組み方)は、お渡しする
 * 「CONTACTセクション構築ガイド」を参照。
 */

.nd-contact {
  --contact-black: #111315;
  --contact-white: #F7F7F4;
  --contact-accent: #B7E000;
  --contact-container-width: 1120px;
}

.nd-contact,
.nd-contact *,
.nd-contact *::before,
.nd-contact *::after {
  box-sizing: border-box;
}


/* ==================================================
   01. セクション全体(ライム背景の全幅バー)
================================================== */

.nd-contact {
  position: relative;

  display: block;

  width: 100vw;
  max-width: 100vw;

  margin: 0 0 0 calc(50% - 50vw) !important;
  padding: 0;

  overflow: visible;
  overflow-x: clip;

  border: 0 !important;

  color: var(--contact-black);
  background: var(--contact-accent);
}


/* ==================================================
   02. セクション本文(余白)
================================================== */

.nd-contact__inner {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  padding:
    clamp(56px, 7vw, 96px)
    calc(var(--nd-page-edge, clamp(18px, 2.2vw, 38px)) + var(--nd-content-gap, 0px));
}
.nd-contact__inner.wp-block-group {
  display: block;
  padding:
    clamp(56px, 7vw, 96px)
    calc(var(--nd-page-edge, clamp(18px, 2.2vw, 38px)) + var(--nd-content-gap, 0px));
}
.nd-contact__inner.wp-block-group > .wp-block-group__inner-container {
  display: flex;
  align-items: center;
  justify-content: center;
}


.nd-contact__container {
  width: min(100%, var(--contact-container-width));
  margin: 0 auto;
}


/* ==================================================
   03. メインレイアウト(左:文章 / 右:ボタン)
================================================== */

.nd-contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 410px);
  column-gap: clamp(42px, 8vw, 142px);
  align-items: center;
  width: 100%;
}
.nd-contact__layout.wp-block-group {
  display: block;
}
.nd-contact__layout.wp-block-group > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 410px);
  column-gap: clamp(42px, 8vw, 142px);
  align-items: center;
}


/* ==================================================
   04. 左側:見出し + 案内文
================================================== */

.nd-contact__copy {
  width: 100%;
  min-width: 0;
}

.nd-contact__header {
  width: min(100%, 560px);
  margin: 0 0 clamp(30px, 3.5vw, 48px);
}
.nd-contact__header.wp-block-group {
  display: block;
  margin: 0 0 clamp(30px, 3.5vw, 48px);
}

/* min-height・paddingはSERVICEの見出し枠と同じ値。横幅だけはCONTACT独自の2カラムレイアウトの都合で560px */
.nd-contact__heading-frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  width: 100%;
  min-height: 86px;

  padding: 18px clamp(22px, 2.2vw, 34px);

  border: 3px solid var(--contact-black);
  background: transparent;
}
.nd-contact__heading-frame.wp-block-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 86px;
  padding: 18px clamp(22px, 2.2vw, 34px);
  border: 3px solid var(--contact-black);
  background: transparent;
}
.nd-contact__heading-frame.wp-block-group > .wp-block-group__inner-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

/* SWELLの見出しブロック既定デザインを打ち消す(SERVICE/ABOUTと同じ対処) */
.nd-contact.nd-contact .nd-contact__title,
html body .nd-contact.nd-contact .nd-contact__title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--contact-black) !important;
  background: transparent !important;
  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: clamp(26px, 2.6vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -.05em !important;
  text-shadow: none !important;
}
.nd-contact__title::before,
.nd-contact__title::after,
.nd-contact__heading-frame::before,
.nd-contact__heading-frame::after {
  content: none !important;
  display: none !important;
}

/*
 * 見出し右側の英字ラベル。背景がライム地のため、
 * 他セクションのグレーではなく黒の半透明でコントラストを確保する。
 */
.nd-contact__title-en {
  flex: none;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(17, 19, 21, .6);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .12em;
  white-space: nowrap;
}

.nd-contact__message {
  width: min(100%, 540px);
  padding-left: clamp(2px, 0.4vw, 6px);
}
.nd-contact__message.wp-block-group {
  display: block;
}

.nd-contact__text,
.nd-contact__note {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--contact-black) !important;
  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.9 !important;
  letter-spacing: 0.035em !important;
}
.nd-contact__note {
  margin-top: 7px !important;
}


/* ==================================================
   05. 右側:ボタン
================================================== */

.nd-contact__action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.nd-contact__action.wp-block-group {
  display: block;
}
.nd-contact__action.wp-block-group > .wp-block-group__inner-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/*
 * ボタン自体の見た目(枠線・文字・矢印)はサイト共通の
 * .nd-buttonコンポーネントをそのまま使う。ここではCONTACT
 * セクションだけの例外(背景が既にライムのため、共通のライム色
 * ホバーだと輪郭が消えてしまう)だけを上書きする。
 */
.nd-contact .nd-button {
  --nd-button-max-width: 410px;
}

html body .nd-contact .nd-button::before {
  background: var(--contact-black);
  transform-origin: left center;
}

html body .nd-contact .nd-button {
  transition:
    border-color 240ms ease,
    color 300ms ease,
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

html body .nd-contact .nd-button__arrow {
  transition:
    border-color 300ms ease,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

html body .nd-contact .nd-button:hover,
html body .nd-contact .nd-button:focus-visible {
  color: var(--contact-white) !important;
}

html body .nd-contact .nd-button:hover .nd-button__arrow,
html body .nd-contact .nd-button:focus-visible .nd-button__arrow {
  border-left-color: var(--contact-white);
  transform: translate3d(5px, 0, 0);
}


/* ==================================================
   06. 表示アニメーション
================================================== */

.js-nd-contact-reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.js-nd-contact-reveal.is-contact-pending {
  opacity: 0;
  transform: translate3d(0, 38px, 0);
  transition: none;
  animation: ndContactSafetyReveal 1ms linear 5s forwards;
}

.js-nd-contact-reveal.is-contact-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  animation: none;
  transition:
    opacity 1060ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--contact-delay, 0ms),
    transform 1320ms cubic-bezier(0.22, 1, 0.36, 1) var(--contact-delay, 0ms);
}

@keyframes ndContactSafetyReveal {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Gutenberg編集画面だけの完成状態表示。公開画面には影響しない。 */
.editor-styles-wrapper .nd-contact .js-nd-contact-reveal.is-contact-pending,
.editor-styles-wrapper .nd-contact .js-nd-contact-reveal.is-contact-pending * {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .js-nd-contact-reveal,
  .js-nd-contact-reveal.is-contact-pending,
  .js-nd-contact-reveal.is-contact-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}


/* ==================================================
   07. 1099px以下
================================================== */

@media (max-width: 1099px) {
  .nd-contact__layout,
  .nd-contact__layout.wp-block-group > .wp-block-group__inner-container {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 370px);
    column-gap: clamp(42px, 5vw, 72px);
  }
}


/* ==================================================
   08. タブレット(959px以下)
================================================== */

@media (max-width: 959px) {
  .nd-contact__layout,
  .nd-contact__layout.wp-block-group > .wp-block-group__inner-container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(46px, 7vw, 66px);
  }
  .nd-contact__layout {
    width: min(100%, 760px);
    margin: 0 auto;
  }

  .nd-contact__copy {
    width: 100%;
  }

  .nd-contact__action,
  .nd-contact__action.wp-block-group > .wp-block-group__inner-container {
    justify-content: flex-end;
  }
}


/* ==================================================
   09. スマートフォン(767px以下)
================================================== */

@media (max-width: 767px) {
  .nd-contact__inner,
  .nd-contact__inner.wp-block-group {
    padding:
      clamp(40px, 8vw, 52px)
      var(--nd-page-edge, clamp(18px, 2.2vw, 38px));
  }

  .nd-contact__header,
  .nd-contact__header.wp-block-group {
    margin-bottom: 28px;
  }

  .nd-contact__heading-frame,
  .nd-contact__heading-frame.wp-block-group {
    min-height: 68px;
    padding: 13px 18px;
    border-width: 2px;
  }

  .nd-contact.nd-contact .nd-contact__title,
  html body .nd-contact.nd-contact .nd-contact__title {
    font-size: 26px !important;
  }

  .nd-contact__text,
  .nd-contact__note {
    font-size: 15px !important;
    line-height: 1.85 !important;
  }

  .nd-contact__layout,
  .nd-contact__layout.wp-block-group > .wp-block-group__inner-container {
    row-gap: 38px;
  }

  .nd-contact__action {
    width: 100%;
  }
}


/* ==================================================
   13. 「edge+本文」2カラム構成のページに置いた場合の補正
   (/how-to-order/・/service/ など)

   01.のfull-bleed処理(margin: 0 0 0 calc(50% - 50vw))は
   「直近の親要素が画面中央に対して左右対称に配置されている」
   ことを前提にした計算式。/how-to-order/・/service/の本文カラム
   (幅min(100%, 1120px)・左揃え)はこの前提が成り立たないため、
   本文カラムの左寄せ分を打ち消す補正を1280px以上にだけ適用する
   (1280px未満は本文幅の前提が崩れるため無補正のままでよい)。

   margin-left =
     (100vw - 本文最大幅) / 2        … 画面全体を基準にした
                                          本来の中央寄せ分
     - var(--nd-page-edge)            … 本文カラム自体が
     - var(--nd-content-gap)            既に左へ寄っている分を
                                          相殺

   この2カラム構成を使う新しいページが増えた場合も、そのページの
   外枠クラスをこのセレクタに追記するだけで同じ補正を適用できる。
================================================== */
@media (min-width: 1280px) {
  .nd-order-page__content .nd-contact,
  .nd-service-page__content .nd-contact {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left:
      calc(
        (100vw - var(--nd-order-content, var(--nd-service-content, 1120px))) / 2
        - var(--nd-page-edge, 0px)
        - var(--nd-content-gap, 0px)
      ) !important;
    margin-right: 0 !important;
  }
}