@charset "utf-8";

/* article-4「その衝撃で」専用 */
.n4-main {
  font-family: var(--font-hiragino);
  font-feature-settings: "palt";
  color: #353b47;
  overflow: hidden;
}
.n4-top,
.n4-middle {
  position: relative;
  background-color: #5a52fe;
}
.n4-top {
  min-height: 0;
  padding-top: 58vw;
  padding-bottom: 3rem;
}
.n4-top__bg {
  position: absolute;
  inset: 0 0 auto;
  height: 148vw;
  background-image: image-set(url(../img/naka4/back01.webp) 1x,
                              url(../img/naka4/back01@2x.webp) 2x);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  pointer-events: none;
}
.n4-top__content,
.n4-middle__content {
  position: relative;
  z-index: 1;
}
/* 本文カラム幅・文字サイズは全記事共通（article-3 と同値）。デザインに合わせて縮めないこと（KENTA指示） */
.n4-body__content {
  width: 54.6rem;
  max-width: 90%;
  margin: 0 auto;
}
.n4-body__inner {
  margin: 0 2.5rem;
}
.n4-body__inner > p {
  margin-bottom: 3.4rem;
  line-height: 2.08;
  letter-spacing: .03em;
  word-wrap: break-word;
  font-feature-settings: "palt";
  color: #353b47;
}
.n4-mark {
  display: inline;
  background: #fff;
  color: #353b47;
  padding: .15em .4em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.n4-lead-mark {
  display: inline;
  background: #fff;
  color: #353b47;
  padding: .15em .4em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.n4-body__inner > p:last-child { margin-bottom: 0; }
.n4-lead {
  margin-bottom: 7rem;
  text-align: center;
  color: #353b47;
}
.n4-lead__ttl {
  display: inline-block;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
  /* 文字だけ斜めにする（KENTA指示：座布団はまっすぐ）。
     skewX だと白い座布団ごと傾くため、斜体の合成に切り替えた */
  font-style: oblique 6deg;
}
.n4-lead__en {
  margin-top: 1.4rem;
  font-size: 1.4rem;
  font-style: italic;
  letter-spacing: .06em;
}
/* 本文末 → 白セクションまでの余白（KENTA指示で従来 355px の 1/3 に）。
   以前は .n4-middle__content の min-height で高さを決めていたため、
   画面幅によって余白が伸びたりSPで本文がはみ出したりしていた。高さは中身に任せ、余白は padding で持つ */
.n4-middle {
  padding-top: 3rem;
  padding-bottom: 15.2rem;
}
.n4-middle__bg {
  position: absolute;
  inset: 0;
  background-image: image-set(url(../img/naka4/back02.webp) 1x,
                              url(../img/naka4/back02@2x.webp) 2x);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  pointer-events: none;
}
.n4-middle .inline-banner {
  margin-top: 5.6rem;
  margin-bottom: 5.6rem;
}
/* ============================================================
   「最新の研究成果」〜フッター
   レイアウトは article-3（css/naka3.css）と同じ値を使い、色だけ差し替える（KENTA指示）。
   article-3 は地色 #4a84d8、このページは白地。数値を変えるときは naka3.css と揃えること
============================================================ */
body {
  background-color: #fff;
}
#footer {
  padding: 0 1.95rem 6.27rem;
  background: none;
  color: var(--color-text);
  position: relative;
}
#footer::before {
  content: '';
  position: absolute;
  left: 1.95rem;
  right: 1.95rem;
  bottom: 4.2rem;
  height: 8.6rem;
  border-radius: 0 0 var(--radius-header) var(--radius-header);
  background: rgba(0, 0, 0, 0.15);
  filter: blur(1.3rem);
  pointer-events: none;
}
.footer__wrap {
  padding-bottom: 9.03rem;
  background: #fff;
}
/* article-3 は上のイラスト下端から % で離しているが、このページは青→白の切り替えから離す。
   見た目の距離（行送りの余白込み）が article-3 と同じ約112px（1366基準）になる値 */
.n4-cards-ttl {
  margin: 7.2rem 0 7.07rem;
  text-align: center;
  font-size: 3.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text);
}
.n4-cards-ttl span {
  display: inline-block;
  transform: skewX(-7deg);
}
.banner-list {
  margin-bottom: 18.9rem;
}
.n3-footer-line {
  margin: 0 auto 7.82rem;
  width: 88.7%;
  max-width: 121.1rem;
  height: 0;
  border: 0;
  border-top: 1px solid #e6e6e6;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .n4-body__content { max-width: 89.3%; }
  .n4-body__inner > p { font-size: 1.32rem; line-height: 2.09; }
  .n4-lead { margin-bottom: 5.5rem; }
  .n4-lead__ttl { font-size: 2rem; }
  /* article-3 では本文と同じ p の指定が効いて 1.32rem・行間2.09 になっている。見た目を揃える */
  .n4-lead__en { font-size: 1.32rem; line-height: 2.09; }
  .n4-cards-ttl { margin: 5.2rem 0 5.7rem; font-size: 3.1rem; }
  .banner-list { margin-bottom: 14.9rem; }
  .n3-footer-line { margin-bottom: 5.8rem; }
  #footer { padding: 0 1.7rem 5rem; }
  #footer::before { left: 1.7rem; right: 1.7rem; bottom: 3.4rem; height: 6.9rem; filter: blur(1rem); }
  .footer__wrap { padding-bottom: 7rem; }
}
@media (max-width: 767px) {
  .n4-top { padding-top: 113vw; padding-bottom: 1rem; }
  .n4-top__bg { height: 144vw; }
  .n4-body__content { width: auto; max-width: none; margin: 0 1.9rem; }
  .n4-body__inner { margin: 0; }
  .n4-body__inner > p {
    line-height: 2;
    text-align: justify;
  }
  .n4-lead { margin-bottom: 4.5rem; }
  /* 20px（KENTA指示 2026-09-24）。「その衝撃で」で改行し、2行目は1行に収める */
  /* 375px幅でも .06em の字間だと2行目が数px足りず「す。」だけ落ちたため、SPは字間を詰める。
     375px未満は画面幅に合わせて縮め、2行目が1行に収まる状態を保つ */
  .n4-lead__ttl { font-size: min(2rem, 5.334vw); line-height: 1.65; letter-spacing: 0; }
  .n4-lead__en { margin-top: 1.2rem; font-size: 1rem; line-height: 2; }
  .n4-middle { padding-top: 1rem; padding-bottom: 9.5rem; }
  /* 「君へ。」バナー裏のイラストを170px上へ（KENTA指示 2026-09-24・180px上げてから10px戻した） */
  .n4-middle__bg { top: -17rem; }
  .n4-middle .inline-banner { margin: 3.6rem 0; }
  .n4-cards-ttl { margin: 3.9rem 0 4.4rem; font-size: 2.6rem; }
  .banner-list { margin-bottom: 11rem; }
  .n3-footer-line { width: auto; margin: 0 1.9rem 4.6rem; max-width: none; }
  #footer { padding: 0 1.5rem 2.2rem; }
  #footer::before { left: 1.5rem; right: 1.5rem; bottom: 1.2rem; height: 4.7rem; filter: blur(0.7rem); }
  .footer__wrap { padding-bottom: 2.4rem; }
}