/**
 * NOYA DESIGN STUDIO — TOPページ ABOUTセクション
 *
 * ブロック構成(ブロックエディタでの組み方):
 *   Group.nd-about
 *     Group.nd-about__inner
 *       Group.nd-about-main (+ js-nd-about-reveal)
 *         Group.nd-about-main__header
 *           Heading(H2).nd-about-main__title  … 「私について」
 *           Paragraph.nd-about-main__title-en … 「ABOUT」
 *         Group.nd-about-main__content
 *           Group.nd-about-profile
 *             Group.nd-about-profile__row (×4)
 *               Paragraph.nd-about-profile__row-label … 「NAME」等
 *               Paragraph.nd-about-profile__row-value … 「NOYA」等
 *         カスタムHTML.nd-about-main__social      … SNSアイコン3つ
 *
 * WordPressのGroupブロックは、実際の子要素が直下ではなく
 * .wp-block-group__inner-containerの中に入る。そのため、内側の
 * 並び(flex/grid)を指定するルールは、外側(.wp-block-group)と
 * 内側の入れ子コンテナの両方に対応する形で書いている
 * (WORKS/PHILOSOPHY/SERVICEと同じ方針)。
 */

:root {
  --about-black: #111315;
  --about-gray: #646762;
  --about-accent: #B7E000;
  --about-white: #F7F7F4;

  --about-label-size: 14px;
  --about-body-size: 17px;

  --about-main-width: 780px;

  /*
   * ボックスを中央から左へずらす量。.nd-about-mainと表示
   * アニメーション(.js-nd-about-reveal)が同じ要素に同居しており、
   * transformは複数ルールから値を合成できない(後勝ちで丸ごと
   * 上書きされる)ため、両方のtransformにこの変数を含める必要が
   * あり、値を1箇所で管理している。
   */
  --about-main-shift: clamp(-220px, -10vw, -70px);
}

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


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

.nd-about {
  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(--about-black);
  background-color: var(--about-white);
}


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

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

  width: 100%;

  margin: 0;

  /* TOPページ セクション共通の左右余白基準(WORKS/PHILOSOPHY/SERVICEと同じ) */
  padding:
    clamp(48px, 5.5vw, 88px)
    calc(var(--nd-page-edge, clamp(18px, 2.2vw, 38px)) + var(--nd-content-gap, 0px));
}

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


/* ==================================================
   03. メインボックス(カード)
================================================== */

.nd-about-main {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  max-width: var(--about-main-width);
  margin: 0 auto;
  min-width: 0;

  /* 中央配置(margin:0 auto)を保ったまま、transformで左へ寄せる */
  transform: translateX(var(--about-main-shift));

  padding:
    clamp(40px, 4.6vw, 68px)
    clamp(38px, 4.8vw, 72px)
    clamp(38px, 4.4vw, 62px);

  border: 3px solid var(--about-black);
  background: var(--about-white);
}

/* SWELL側のブロック装飾が::before/::afterで飾り(色つきバー等)を追加してくるため明示的に打ち消す */
.nd-about-main::before,
.nd-about-main::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
}


/* ==================================================
   04. 見出し(JPタイトル + EN表記)
================================================== */

.nd-about-main__header {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  margin: 0 0 clamp(44px, 4.8vw, 70px);
  padding: 0;

  border: 0 !important;
  background: transparent !important;
}
.nd-about-main__header.wp-block-group {
  display: block;
  margin: 0 0 clamp(44px, 4.8vw, 70px);
}
.nd-about-main__header.wp-block-group > .wp-block-group__inner-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* SWELLの見出しブロック既定デザイン(左に太いライム色の線)を打ち消す。SERVICE/PHILOSOPHYと同じ対処 */
.nd-about.nd-about .nd-about-main__title,
html body .nd-about.nd-about .nd-about-main__title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-image: none !important;
  box-shadow: none !important;
  color: var(--about-black) !important;
  background: transparent !important;
  background-image: none !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: -0.05em !important;
  white-space: nowrap;
  text-shadow: none !important;
}

/* SWELLが見出しに::before/::afterで追加してくる装飾バーを無効化 */
.nd-about-main__header::before,
.nd-about-main__header::after,
.nd-about.nd-about .nd-about-main__title::before,
.nd-about.nd-about .nd-about-main__title::after {
  content: none !important;
  display: none !important;
  position: static !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
  transform: none !important;
  animation: none !important;
}

.nd-about-main__title-en {
  flex: none;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--about-gray);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .12em;
  white-space: nowrap;
}


/* ==================================================
   05. プロフィール情報
================================================== */

.nd-about-main__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

.nd-about-profile {
  display: flex;
  flex-direction: column;
  row-gap: clamp(18px, 1.8vw, 27px);
  margin: 0;
  padding: 0;
}
.nd-about-profile.wp-block-group {
  display: block;
}
.nd-about-profile.wp-block-group > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  row-gap: clamp(18px, 1.8vw, 27px);
}

.nd-about-profile__row {
  display: grid;
  grid-template-columns: clamp(104px, 10vw, 138px) minmax(0, 1fr);
  column-gap: clamp(22px, 2.6vw, 36px);
  align-items: start;
  margin: 0;
  padding: 0;
}
.nd-about-profile__row.wp-block-group {
  display: block;
}
.nd-about-profile__row.wp-block-group > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: clamp(104px, 10vw, 138px) minmax(0, 1fr);
  column-gap: clamp(22px, 2.6vw, 36px);
  align-items: start;
}

.nd-about-profile__row-label,
.nd-about-profile__row-value {
  margin: 0 !important;
  padding: 0 !important;
}

.nd-about-profile__row-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: max-content;
  min-width: clamp(104px, 10vw, 138px);

  padding: 8px 13px 7px !important;

  border: 1px solid var(--about-black);
  color: var(--about-black) !important;
  background: transparent !important;

  font-family: "Barlow Condensed", sans-serif !important;
  font-size: var(--about-label-size) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.nd-about-profile__row-value {
  color: var(--about-black) !important;
  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: var(--about-body-size) !important;
  font-weight: 400 !important;
  line-height: 1.88 !important;
  letter-spacing: 0.035em;
}


/* ==================================================
   06. SNS
================================================== */

.nd-about-main__social {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: clamp(28px, 3.2vw, 40px);
}

.nd-about-main__social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  color: var(--about-black);
  background: transparent;
  text-decoration: none !important;
  transform: translate3d(0, 0, 0);
  transition: color 200ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nd-about-main__social svg {
  display: block;
  width: 22px;
  height: 22px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nd-about-main__social-dot {
  fill: currentColor;
  stroke: none;
}

.nd-about-main__x-icon,
.nd-about-main__x-icon path,
.nd-about-main__note-icon,
.nd-about-main__note-icon path {
  fill: currentColor !important;
  stroke: none !important;
}

.nd-about-main__social a:hover,
.nd-about-main__social a:focus-visible {
  color: var(--about-accent) !important;
  transform: translate3d(0, -2px, 0);
}

.nd-about-main__social a:focus-visible {
  outline: 2px solid var(--about-accent);
  outline-offset: 4px;
}


/* ==================================================
   07. 表示アニメーション(他セクションと同じ方式)
================================================== */

/*
 * このtransformは.nd-about-mainの左寄せ(--about-main-shift)と
 * 同じ要素に適用される。translateXとtranslate3dを1つのtransform
 * にまとめて指定することで、「左寄せ」と「表示アニメーション」を
 * 同時に成立させている(分けて書くと後勝ちで上書きされる)。
 */
.js-nd-about-reveal {
  opacity: 1;
  transform: translateX(var(--about-main-shift)) translate3d(0, 0, 0);
}

.js-nd-about-reveal.is-about-pending {
  opacity: 0;
  transform: translateX(var(--about-main-shift)) translate3d(0, 44px, 0);
  transition: none;
}

.js-nd-about-reveal.is-about-visible {
  opacity: 1;
  transform: translateX(var(--about-main-shift)) translate3d(0, 0, 0);
  transition:
    opacity 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* JavaScript停止時は3秒後に安全表示する */
.js-nd-about-reveal.is-about-pending {
  animation: ndAboutSafetyReveal 1ms linear 3s forwards;
}
.js-nd-about-reveal.is-about-visible {
  animation: none;
}
@keyframes ndAboutSafetyReveal {
  to { opacity: 1; transform: translateX(var(--about-main-shift)) translate3d(0, 0, 0); }
}

/* Gutenberg編集画面だけの完成状態表示。公開画面には影響しない。transform:noneにすると左寄せ分も消えるため左寄せだけ残す */
.editor-styles-wrapper .nd-about .js-nd-about-reveal.is-about-pending {
  opacity: 1 !important;
  transform: translateX(var(--about-main-shift)) !important;
  animation: none !important;
}
.editor-styles-wrapper .nd-about .js-nd-about-reveal.is-about-pending * {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* 「動きを減らす」設定は演出だけを止めるためのもので、左寄せという配置自体は残す */
@media (prefers-reduced-motion: reduce) {
  .js-nd-about-reveal,
  .js-nd-about-reveal.is-about-pending,
  .js-nd-about-reveal.is-about-visible {
    opacity: 1 !important;
    transform: translateX(var(--about-main-shift)) !important;
    transition: none !important;
    animation: none !important;
  }
}


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

@media (max-width: 959px) {
  .nd-about-main {
    max-width: 100%;
  }

  /*
   * .nd-about-main自体にtransform:noneを指定しても打ち消せない。
   * 表示アニメーションの状態クラス(.is-about-pending /
   * .is-about-visible)が付くと、そちらのtransform指定
   * (詳細度0,2,0)が.nd-about-main単体への指定(詳細度0,1,0)より
   * 強く、常に後者を上書きしてしまうため。transformを打ち消すの
   * ではなく、大元の変数--about-main-shiftをこの画面幅では0に
   * する(この変数を参照する全箇所に、詳細度に関係なく反映される)。
   */
  :root {
    --about-main-shift: 0px;
  }
}


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

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

  .nd-about-main {
    padding: 30px 24px 34px;
    border-width: 2px;
  }

  .nd-about-main__header,
  .nd-about-main__header.wp-block-group {
    margin-bottom: 36px;
  }

  .nd-about.nd-about .nd-about-main__title,
  html body .nd-about.nd-about .nd-about-main__title {
    font-size: 30px !important;
    white-space: normal;
  }

  .nd-about-profile__row,
  .nd-about-profile__row.wp-block-group > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
    row-gap: 7px;
  }

  .nd-about-profile__row-label {
    min-width: 112px;
    padding: 8px 12px 7px !important;
    font-size: 14px !important;
  }

  .nd-about-profile__row-value {
    font-size: 15px !important;
    line-height: 1.82 !important;
  }
}