@charset "utf-8";

/* ============================================================
   naka2 ページ共通
============================================================ */
#main {
  font-family: var(--font-hiragino);
  font-feature-settings: "palt";
}

/* ============================================================
   ページリード（ホログラフィック）
   TODO: img/naka2/ に hero_bg.webp（PC/Tab/SP）と
         panel_01〜03.webp を配置してください
============================================================ */
.n2-lead {
  position: relative;
  width: 100%;
}
.n2-lead__kv {
  display: block;
  width: 100%;
  height: auto;
}
/* .u-visually-hidden は css/style.css に共通化 */
.n2-lead__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.n2-lead__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.n2-lead__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 124rem;
  margin: 0 auto;
  padding: 0 5rem 6rem;
}
.n2-lead__txt {
  color: var(--color-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.n2-lead__label {
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  margin-bottom: 0.8rem;
  opacity: 0.85;
}
.n2-lead__sub {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
  opacity: 0.9;
}
.n2-lead__ttl {
  font-size: 10rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.n2-lead__panels {
  display: flex;
  gap: 2rem;
  align-items: flex-end;
}
.n2-lead__panel {
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.n2-lead__panel--01 { width: 18rem; }
.n2-lead__panel--02 { width: 22rem; }
.n2-lead__panel--03 { width: 16rem; }
.n2-lead__panel img {
  width: 100%;
  display: block;
}

/* ============================================================
   本文エリア
============================================================ */
.n2-body {
  position: relative;
  z-index: 1;
  margin-top: -50vw; /* KVの白い三角に本文を重ねる（テキスト開始位置を上げる） */
  padding: 10rem 0 13.5rem;
}
.n2-body__content {
  margin: 0 auto;
  width: 70rem;
  max-width: 90%;
}
.n2-body__inner {
  margin: 0 2.5rem;
}

/* メイン見出し */
.n2-body__head {
  margin-bottom: 8rem;
  text-align: center;
}
.n2-body__ttl {
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  transform: skewX(-6deg);
  display: inline-block;
}
/* タイトルは3行を個別ブロックにして行間を実測で揃える
   （CDPの下と、(…)〜「について」の間の余白が見た目で同じになるよう調整） */
.n2-body__ttl-line {
  display: block;
  line-height: 1.15;
}
/* 「(クリエイティブデザインプロセス)」だけ小さく（1366px時 14px） */
.n2-body__ttl-sub {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  margin: 1.1rem 0 1.2rem;
}
.n2-body__ttl-en {
  margin-top: 1rem;
  font-size: 1.6rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.08em;
  color: #666;
}
/* 英文タイトルも和文と同じく中央揃え。
   SPの `.n2-body__inner p { text-align: justify }` に負けるため、親クラスを足して詳細度を上げる。 */
.n2-body__head .n2-body__ttl-en {
  text-align: center;
}

/* サブ見出し */
.n2-body__lead {
  margin-bottom: 3.6rem;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transform: skewX(-6deg);
  display: inline-block;
}

/* 本文 */
.n2-body__inner p {
  margin-bottom: 3.4rem;
  line-height: 2.08;
  letter-spacing: 0.03em;
  word-wrap: break-word;
  font-feature-settings: "palt";
}

/* 記事途中のバナーは .inline-banner（css/style.css）に統一した。
   以前ここにあった .n2-banner は廃止。ページ専用CSSでは定義しないこと */

/* 4段階見出し */
.n2-body__stages-ttl {
  margin: 6rem 0 4rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-feature-settings: "palt";
}

/* 4段階リスト */
.n2-stages {
  margin-bottom: 5rem;
}
.n2-stages__dt {
  margin-bottom: 1.6rem;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-left: 3px solid var(--color-text);
  padding-left: 1.2rem;
}
.n2-stages__dt .hiragino {
  font-size: 1.8rem;
}
/* 「第N階層」に続く「は」は一段小さく（カンプ準拠） */
.n2-stages__dt-suffix {
  font-size: 1.4rem;
  font-weight: 400;
  margin-left: 0.2rem;
}
.n2-stages__dd {
  margin: 0 0 4rem 1.5rem;
}
.n2-stages__dd p {
  margin-bottom: 2rem;
  line-height: 2.08;
  letter-spacing: 0.03em;
  font-feature-settings: "palt";
}

/* ============================================================
   装飾グラフィック（ホログラフィック・左右の端に見切れで配置）
   flow上はゼロ高のアンカー。中の画像だけを絶対配置し、
   calc(50% - 50vw) で中央カラムの幅に関係なくビューポート端に密着させる。
============================================================ */
.n2-deco {
  position: relative;
  height: 0;
  z-index: -1;
  pointer-events: none;
}
.n2-deco picture {
  position: absolute;
  top: 0;
  display: block;
}
.n2-deco img {
  display: block;
  width: 100%;
  height: auto;
}
.n2-deco--left picture {
  left: calc(50% - 50vw);
  width: 38.2rem;
  margin-top: -18rem;
}
.n2-deco--right picture {
  right: calc(50% - 50vw);
  width: 33.3rem;
  margin-top: -14rem;
}

/* ============================================================
   画像のリンクアイコン（白丸＋別ウィンドウで開くマーク）
============================================================ */
.n2-linkicon {
  position: absolute;
  right: 2.4rem;
  bottom: 2.2rem;
  z-index: 2;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}
.n2-linkicon svg {
  width: 1.8rem;
  height: 1.8rem;
  display: block;
}

/* プレースホルダー（画像差し替え予定） */
.n2-placeholder {
  margin: 4rem -2.5rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #e8e8e8;
  min-height: 20rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.n2-placeholder a {
  display: block;
  position: relative;
  width: 100%;
  align-self: stretch;
  min-height: inherit;
}
.n2-placeholder img {
  width: 100%;
  display: block;
}
/* 画像がない場合のフォールバック */
.n2-placeholder img[src=""] ,
.n2-placeholder img:not([src]) {
  display: none;
}

/* バナーリストのスタイルは css/style.css に共通化 */

/* ============================================================
   レスポンシブ：タブレット（768〜1023px）
============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .n2-lead { height: auto; }
  .n2-lead__inner { padding: 0 3rem 4rem; }
  .n2-lead__ttl { font-size: 7rem; }
  .n2-lead__panel--01 { width: 13rem; }
  .n2-lead__panel--02 { width: 16rem; }
  .n2-lead__panel--03 { width: 12rem; }

  .n2-body { padding: 7rem 0 10rem; }
  .n2-body__ttl { font-size: 3rem; }
  .n2-body__lead { font-size: 2rem; }
  .n2-body__inner p { font-size: 1.32rem; line-height: 2.09; }

}

/* ============================================================
   レスポンシブ：SP（〜767px）
============================================================ */
@media (max-width: 767px) {
  .n2-lead { height: auto; }
  .n2-lead__inner {
    padding: 0 2rem 3rem;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 3rem;
  }
  .n2-lead__ttl { font-size: 5.5rem; }
  .n2-lead__panels {
    width: 100%;
    gap: 1.2rem;
  }
  .n2-lead__panel { border-radius: 1.4rem; }
  .n2-lead__panel--01 { width: 30%; }
  .n2-lead__panel--02 { width: 38%; }
  .n2-lead__panel--03 { width: 26%; }

  .n2-body { padding: 5rem 0 10rem; }
  .n2-body__content {
    margin: 0 1.9rem;
    width: auto;
    max-width: none;
  }
  .n2-body__inner { margin: 0; }
  .n2-body__head { margin-bottom: 5rem; }
  .n2-body__ttl { font-size: 2.6rem; }
  .n2-body__ttl-en { font-size: 1.4rem; }
  .n2-body__lead { font-size: 1.8rem; }
  .n2-body__inner p { line-height: 2; text-align: justify; }

  /* 本文の白座布団：SPは装飾グラフィックが本文の下を通るため、
     行ごとに白を敷いて可読性を確保する（不透明度100%・行に密着）。
     背景が白い箇所では見た目が変わらないので、本文全体に一律で敷く。 */
  .n2-pad {
    background: var(--color-white);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .n2-body__stages-ttl { font-size: 1.6rem; }
  .n2-stages__dt { font-size: 1.5rem; }
  .n2-stages__dt .hiragino { font-size: 1.5rem; }
  .n2-placeholder { margin: 3rem 0; border-radius: 2rem; }

  /* 装飾グラフィック：SP用素材のサイズに合わせる */
  .n2-deco--left picture { width: 37.4rem; margin-top: -14rem; }
  .n2-deco--right picture { width: 19.4rem; margin-top: -10rem; }

  /* リンクアイコン：SPは一回り小さく */
  .n2-linkicon {
    right: 1.2rem;
    bottom: 1.1rem;
    width: 1.8rem;
    height: 1.8rem;
  }
  .n2-linkicon svg { width: 1rem; height: 1rem; }

}