/* ==================================================
   01. CONTACT共通変数
================================================== */

.nd-contact {
  --contact-black:
    var(--nd-black, #111315);

  --contact-white:
    var(--nd-white, #F7F7F4);

  --contact-blue:
    var(--nd-blue, #2357ff);

  --contact-line:
    rgba(17, 17, 17, 0.34);

  --contact-accent:
    #b7e000;

  --contact-edge:
    var(
      --nd-page-edge,
      clamp(18px, 2.2vw, 38px)
    );

  --contact-rail-width:
    var(
      --nd-rail-width,
      clamp(156px, 10.8vw, 210px)
    );

  --contact-rail-sticky-top:
    var(
      --nd-rail-sticky-top,
      clamp(170px, 28vh, 290px)
    );

  --contact-container-width:
    1120px;
}


/* ==================================================
   02. ボックスサイズ
================================================== */

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


/* ==================================================
   03. セクション全体
================================================== */

.nd-contact {
  position: relative;

  display: grid;

  grid-template-columns:
    var(--contact-edge)
    var(--contact-rail-width)
    minmax(0, 1fr);

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

  min-height:
    clamp(520px, 66vh, 680px);

  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);
}


/* ==================================================
   04. 左レール
================================================== */

.nd-contact-rail {
  position: relative;
  z-index: 2;

  grid-column: 2;
  grid-row: 1;

  align-self: stretch;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  border: 0;
  border-right:
    1px solid
    var(--contact-line);

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


.nd-contact-rail__sticky {
  position: sticky;

  top:
    var(--contact-rail-sticky-top);

  display: flex;
  justify-content: center;

  width: 100%;

  pointer-events: none;
}


.nd-contact-rail__label {
  display: block;

  margin: 0;
  padding: 0;

  color:
    var(--contact-black);

  font-family:
    "Barlow Condensed",
    sans-serif
    !important;

  font-size:
    clamp(82px, 6vw, 104px)
    !important;

  font-weight:
    600
    !important;

  line-height:
    0.9
    !important;

  letter-spacing:
    0.08em
    !important;

  white-space: nowrap;

  writing-mode:
    vertical-rl;

  text-orientation:
    mixed;
}


/* ==================================================
   05. セクション本文
================================================== */

.nd-contact__inner {
  grid-column: 3;
  grid-row: 1;

  display: flex;
  align-items: center;

  width: 100%;
  min-width: 0;

  margin: 0;

  padding:
    clamp(74px, 7vw, 112px)
    clamp(44px, 6.5vw, 112px)
    clamp(78px, 7.5vw, 120px);
}


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

  margin:
    0
    auto;
}


/* ==================================================
   06. メインレイアウト
================================================== */

.nd-contact__layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(340px, 410px);

  column-gap:
    clamp(70px, 8vw, 142px);

  align-items: center;

  width: 100%;
}


/* ==================================================
   07. 左側
================================================== */

.nd-contact__copy {
  width:
    min(100%, 620px);
}


.nd-contact__header {
  width:
    min(100%, 560px);

  margin:
    0
    0
    clamp(30px, 3.5vw, 48px);
}


.nd-contact__heading-frame {
  display: flex;
  align-items: center;

  width: 100%;

  /*
   * PHILOSOPHY・WORKS・SERVICEなどの
   * 見出しフレームと同等の高さへ統一する。
   */
  height: 82px;
  min-height: 82px;

  padding:
    12px
    clamp(20px, 2vw, 28px);

  border:
    3px solid
    var(--contact-black);

  background:
    transparent;
}


.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(36px, 3.4vw, 46px)
    !important;

  font-weight:
    700
    !important;

  line-height:
    1.12
    !important;

  letter-spacing:
    -0.055em
    !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__message {
  width:
    min(100%, 540px);

  padding-left:
    clamp(2px, 0.4vw, 6px);
}


.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:
    clamp(15px, 1.08vw, 17px)
    !important;

  font-weight:
    500
    !important;

  line-height:
    1.9
    !important;

  letter-spacing:
    0.035em
    !important;
}


.nd-contact__note {
  margin-top:
    7px
    !important;
}


/* ==================================================
   08. 右側ボタン
================================================== */

.nd-contact__action {
  align-self: center;

  width: 100%;

  justify-content: flex-end;
}


/*
 * 通常時のフレーム・文字・矢印は、
 * サイト共通ボタンコンポーネントをそのまま使用する。
 */
.nd-contact
.nd-button {
  --nd-button-max-width:
    410px;
}


/*
 * CONTACTだけは背景自体が#B7E000のため、
 * 共通の#B7E000ホバーではボタンの輪郭が弱くなる。
 *
 * このセクションだけ、
 * 黒い面が右から左へ展開するアニメーションへ変更する。
 * ボタンのサイズ・枠線・文字・矢印形状は変更しない。
 */
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);
}


/*
 * 共通ボタンと同じ矢印移動は維持する。
 * 黒背景へ切り替わることで、CONTACT背景上でも明確に見える。
 */
html body
.nd-contact
.nd-button:hover
.nd-button__arrow,

html body
.nd-contact
.nd-button:focus-visible
.nd-button__arrow {
  transform:
    translate3d(5px, 0, 0);
}


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

.js-nd-contact-reveal {
  --contact-delay: 0ms;

  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),

    transform
      1320ms
      cubic-bezier(0.22, 1, 0.36, 1)
      var(--contact-delay);
}


@keyframes ndContactSafetyReveal {
  to {
    opacity: 1;

    transform:
      translate3d(0, 0, 0);
  }
}


/* ==================================================
   10. 1100px未満
================================================== */

@media (max-width: 1099px) {

  .nd-contact__layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, 370px);

    column-gap:
      clamp(42px, 5vw, 72px);
  }

}


/* ==================================================
   11. タブレット
================================================== */

@media (max-width: 959px) {

  .nd-contact {
    display: block;

    width: 100%;
    max-width: 100%;

    min-height: auto;

    margin: 0 !important;
  }


  .nd-contact-rail {
    display: none;
  }


  .nd-contact__inner {
    display: block;

    width: 100%;

    margin: 0;

    padding:
      clamp(72px, 10vw, 102px)
      clamp(34px, 7vw, 68px)
      clamp(78px, 10vw, 110px);
  }


  .nd-contact__layout {
    grid-template-columns:
      minmax(0, 1fr);

    row-gap:
      clamp(46px, 7vw, 66px);

    width:
      min(100%, 760px);

    margin:
      0
      auto;
  }


  .nd-contact__copy {
    width: 100%;
  }


  .nd-contact__action {
    justify-content: flex-end;
  }

}


/* ==================================================
   12. スマートフォン
================================================== */

@media (max-width: 767px) {

  .nd-contact__inner {
    padding:
      66px
      clamp(22px, 6vw, 38px)
      78px;
  }


  .nd-contact__header {
    margin-bottom: 28px;
  }


  .nd-contact__heading-frame {
    height: 68px;
    min-height: 68px;

    padding:
      10px
      18px;

    border-width: 2px;
  }


  .nd-contact__title {
    font-size:
      clamp(30px, 9vw, 38px)
      !important;
  }


  .nd-contact__text,
  .nd-contact__note {
    font-size:
      15px
      !important;

    line-height:
      1.85
      !important;
  }


  .nd-contact__layout {
    row-gap: 38px;
  }


  .nd-contact__action {
    width: 100%;
  }

}


/* ==================================================
   13. 管理バー表示時
================================================== */

@media (min-width: 960px) {

  body.admin-bar
  .nd-contact-rail__sticky {
    top:
      calc(
        var(--contact-rail-sticky-top)
        + 32px
      );
  }

}


/* ==================================================
   14. 動きを減らす設定
================================================== */

@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;
  }

}