/* ==========================================================
   NOYA DESIGN STUDIO — TOP PHILOSOPHY セクション

   WordPress標準ブロック(グループ・段落)で構成する。Groupブロック
   の実際の子要素は.wp-block-group__inner-containerという1段階
   内側の箱に入るため、グリッド/flexで複数の子要素を並べる箇所は
   外側(.wp-block-group)と内側の入れ子コンテナの両方に同じ
   レイアウト指定を追加している。
========================================================== */

.nd-philosophy {
  --ph-black: #111315;
  --ph-gray: #646762;
  --ph-line: #D9DAD5;
  --ph-accent: #B7E000;
  --ph-bg: #F7F7F4;

  /* TOPページ セクション共通の左右余白基準(/how-to-order/と同じ値) */
  --nd-page-edge: clamp(18px, 2.2vw, 38px);
  --nd-content-gap: clamp(36px, 5vw, 90px);

  position: relative;

  /* edge+本文の2カラムグリッドは使わない。左右の余白は.nd-philosophy__inner側のpaddingだけで決める */
  display: block;

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

  min-height: auto;

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

  overflow-x: clip;

  color: var(--ph-black);
  background: var(--ph-bg);
}

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


/* ==================================================
   本文コンテナ
================================================== */

.nd-philosophy__inner {
  position: relative;

  width: 100%;
  max-width: calc(1760px - var(--nd-page-edge));
  min-width: 0;

  margin: 0 auto 0 0;

  /* 左右: /how-to-order/基準(--nd-page-edge+--nd-content-gap)。右側だけ基準より広め */
  padding:
    clamp(19px, 2.2vh, 27px)
    clamp(64px, 7.5vw, 130px)
    clamp(23px, 2.7vh, 37px)
    calc(var(--nd-page-edge) + var(--nd-content-gap));
}


/* ==================================================
   見出し(サイズ・余白ともWORKSセクションの見出しボックスと共通)
================================================== */

.nd-philosophy__header {
  margin: 0 0 clamp(52px, 5.8vh, 68px);
  padding: 0;
  border: 0 !important;
}

.nd-philosophy__heading-frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  width: min(100%, 680px);
  min-height: 86px;

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

  border: 3px solid var(--ph-black);
  background: var(--ph-bg);
}

.nd-philosophy__title-en {
  flex: none;

  color: var(--ph-gray);

  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .12em;
  white-space: nowrap;
}

.nd-philosophy__header::before,
.nd-philosophy__header::after,
.nd-philosophy__heading-frame::before,
.nd-philosophy__heading-frame::after,
.nd-philosophy__title::before,
.nd-philosophy__title::after {
  content: none !important;
  display: none !important;
}

.nd-philosophy.nd-philosophy .nd-philosophy__title,
html body .nd-philosophy.nd-philosophy .nd-philosophy__title {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  color: var(--ph-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;
}


/* ==================================================
   本体: 左(コピー)+右(本文) 2カラム
================================================== */

.nd-philosophy__stage {
  display: grid;
  grid-template-columns: minmax(360px, .86fr) minmax(0, 1.14fr);
  grid-template-areas: "copy body";
  column-gap: clamp(24px, 2.8vw, 44px);
  align-items: start;

  width: min(100%, 1360px);
  margin: 0 0 0 clamp(2px, .6vw, 10px);
}

.nd-philosophy__stage.wp-block-group {
  display: block;
}
.nd-philosophy__stage.wp-block-group > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(360px, .86fr) minmax(0, 1.14fr);
  grid-template-areas: "copy body";
  column-gap: clamp(24px, 2.8vw, 44px);
  align-items: start;
}


/* ---- 左: コピー(黒い帯2行) ---- */

.nd-philosophy__main-copy {
  grid-area: copy;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1.3vw, 19px);

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

  margin: 0 !important;
  padding: 0 !important;

  color: var(--ph-black) !important;
  background: transparent !important;

  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: clamp(22px, 1.8vw, 26px) !important;
  font-weight: 700 !important;
  line-height: 1.42 !important;
  letter-spacing: -.045em !important;
}

/* [ブロック化対応] flexは外側・内側の両方に指定して問題ない。 */
.nd-philosophy__main-copy.wp-block-group > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 1.3vw, 19px);
}

.nd-philosophy__copy-line {
  position: relative;
  overflow: hidden;

  display: block;
  width: max-content;
  max-width: 100%;

  margin: 0 !important;
  padding: clamp(6px, .6vw, 9px) clamp(10px, 1vw, 16px) clamp(7px, .7vw, 10px);

  color: var(--ph-bg) !important;
  background: var(--ph-black) !important;
  white-space: nowrap;
}

/*
 * 帯と同じ箱の上に、ページ背景と同じ色の覆い(::after)を重ね、
 * 初期状態では帯を完全に覆っておく。演出が始まると、この覆いを
 * 右方向(translateX(0)→101%)へスライドさせ、帯が左側から
 * 徐々に見えてくる「ワイプ」演出にしている。
 */
.nd-philosophy__copy-line::after {
  content: "";
  position: absolute;
  inset: 0;

  background: var(--ph-bg);

  transform: translateX(0);
  transition: transform 720ms cubic-bezier(.22, 1, .36, 1);
}


/* ---- 右: 本文 ---- */

.nd-philosophy__body {
  grid-area: body;
  width: 100%;
  max-width: 760px;
  min-width: 0;
}

.nd-philosophy__principle-text,
.nd-philosophy__closing {
  width: 100%;
  max-width: 45em;

  margin: 0 0 clamp(22px, 2.2vw, 30px) !important;
  padding: 0 !important;
  border: 0 !important;

  color: var(--ph-black) !important;
  background: transparent !important;

  font-family: "IBM Plex Sans JP", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.78 !important;
  letter-spacing: .03em !important;
}

.nd-philosophy__closing {
  margin-bottom: 0 !important;

  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.72 !important;
  letter-spacing: .025em !important;
}


/* ==================================================
   見出し・本文の登場演出
   (section要素の is-noya-philosophy-ready / -active を
   JS側が付け外しする。仕組み自体はPHILOSOPHY従来版と同じ)
================================================== */

.nd-philosophy.is-noya-philosophy-ready:not(.is-noya-philosophy-active)
.nd-philosophy__heading-frame {
  opacity: 0;
  transform: translate3d(0, 46px, 0);
}

.nd-philosophy.is-noya-philosophy-ready .nd-philosophy__heading-frame {
  transition:
    opacity 1000ms cubic-bezier(.22, .61, .36, 1),
    transform 1200ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.nd-philosophy.is-noya-philosophy-ready.is-noya-philosophy-active
.nd-philosophy__heading-frame {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/*
 * 左側の帯(copy-line)は上のワイプ演出専用のため、
 * ここでのフェード+ズレの対象からは外している。
 */
.nd-philosophy.is-noya-philosophy-ready:not(.is-noya-philosophy-active)
.nd-philosophy__principle-text,
.nd-philosophy.is-noya-philosophy-ready:not(.is-noya-philosophy-active)
.nd-philosophy__closing {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

.nd-philosophy.is-noya-philosophy-ready .nd-philosophy__principle-text,
.nd-philosophy.is-noya-philosophy-ready .nd-philosophy__closing {
  transition:
    opacity 700ms cubic-bezier(.22, .61, .36, 1),
    transform 780ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.nd-philosophy.is-noya-philosophy-ready.is-noya-philosophy-active
.nd-philosophy__principle-text,
.nd-philosophy.is-noya-philosophy-ready.is-noya-philosophy-active
.nd-philosophy__closing {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 帯(copy-line)のワイプ演出タイミング。旧版のフェード開始と同じ160ms/260ms。 */
.nd-philosophy.is-noya-philosophy-ready .nd-philosophy__copy-line--01::after {
  transition-delay: 160ms;
}
.nd-philosophy.is-noya-philosophy-ready .nd-philosophy__copy-line--02::after {
  transition-delay: 260ms;
}

.nd-philosophy.is-noya-philosophy-ready.is-noya-philosophy-active
.nd-philosophy__copy-line::after {
  transform: translateX(101%);
}

/* 本文側のタイミング */
.nd-philosophy.is-noya-philosophy-ready .nd-philosophy__principle-text.nd-philosophy__principle--01 {
  transition-delay: 560ms;
}
.nd-philosophy.is-noya-philosophy-ready .nd-philosophy__principle-text.nd-philosophy__principle--02 {
  transition-delay: 820ms;
}
.nd-philosophy.is-noya-philosophy-ready .nd-philosophy__closing {
  transition-delay: 1080ms;
}


/* ==================================================
   レスポンシブ
================================================== */

@media (max-width: 1199px) {
  .nd-philosophy { min-height: auto; }

  .nd-philosophy__stage {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "body";
    row-gap: clamp(52px, 6vw, 72px);
    width: 100%;
    margin-left: 0;
  }
  .nd-philosophy__stage.wp-block-group > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "body";
    row-gap: clamp(52px, 6vw, 72px);
  }

  .nd-philosophy__main-copy,
  .nd-philosophy__body { width: min(100%, 760px); }
  .nd-philosophy__body { margin-left: auto; }
}

@media (max-width: 959px) {
  .nd-philosophy {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
  }
  .nd-philosophy__inner {
    width: 100%;
    max-width: none;
    padding:
      clamp(33px, 4.2vw, 44px)
      clamp(20px, 5vw, 48px)
      clamp(37px, 4.6vw, 50px);
  }
  .nd-philosophy__heading-frame { width: 100%; }
}

@media (max-width: 767px) {
  .nd-philosophy__header { margin-bottom: 54px; }
  .nd-philosophy__heading-frame { min-height: 68px; padding: 13px 18px; }
  .nd-philosophy.nd-philosophy .nd-philosophy__title,
  html body .nd-philosophy.nd-philosophy .nd-philosophy__title {
    font-size: 26px !important;
  }

  .nd-philosophy__stage { row-gap: 48px; }

  .nd-philosophy__main-copy {
    gap: 10px;
    font-size: clamp(15px, 4.2vw, 18px) !important;
  }
  .nd-philosophy__principle-text {
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 14px !important;
  }
  .nd-philosophy__closing { font-size: 13px !important; }
}

@media (max-width: 390px) {
  .nd-philosophy__inner { padding-left: 18px; padding-right: 18px; }
  .nd-philosophy__main-copy { font-size: clamp(14px, 4vw, 16px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .nd-philosophy.is-noya-philosophy-ready .nd-philosophy__heading-frame,
  .nd-philosophy.is-noya-philosophy-ready .nd-philosophy__principle-text,
  .nd-philosophy.is-noya-philosophy-ready .nd-philosophy__closing {
    transform: none !important;
    transition-duration: 260ms !important;
  }
  .nd-philosophy.is-noya-philosophy-ready .nd-philosophy__copy-line::after {
    transition-duration: 1ms !important;
  }
}


/* ==================================================
   Gutenberg編集画面だけの完成状態表示
   公開画面には影響しません。
================================================== */
.editor-styles-wrapper .nd-philosophy__heading-frame,
.editor-styles-wrapper .nd-philosophy__principle-text,
.editor-styles-wrapper .nd-philosophy__closing {
  opacity: 1 !important;
  transform: none !important;
}
.editor-styles-wrapper .nd-philosophy__copy-line::after {
  transform: translateX(-101%) !important;
}