/* ======================================
   About Page Styles
   Short Story Layout
   ====================================== */

/* ===== Page wrapper ===== */
.about{
  padding: 0;
}

/* ===== HERO (minimal entrance) ===== */
.about-hero{
  min-height: 40vh;
  display: grid;
  place-items: center;
  padding: 0 var(--pad-sp);
}

.about-hero__eyebrow{
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.22em;
  opacity: 0.45;
}

/* ===== Body (short story) ===== */
.about-body{
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--pad-sp);
}

/* 段落基本 */
.about-body p{
  margin: 0 0 2.2em;
  line-height: 2.1;
  letter-spacing: 0.02em;
}

/* 最後の段落だけ余韻を残す */
.about-body p:last-child{
  margin-bottom: 0;
  padding-bottom: 24px;
}

/* ===== Divider (breathing space) ===== */
.about-divider{
  width: 1px;
  height: 56px;
  margin: 64px auto;
  background: rgba(31,31,31,0.10);
}

/* ===== Footer spacing (exit of story) ===== */
.site-footer{
  padding: 56px 0 34px; /* baseより少しタイト */
  margin-top: 120px;   /* 物語の余韻 */
}

/* ===== Responsive ===== */
@media (min-width: 768px){

  .about-hero{
    min-height: 44vh;
    padding: 0 var(--pad-pc);
  }

  .about-body{
    padding: 0 var(--pad-pc);
  }

  .about-divider{
    margin: 72px auto;
  }

  .site-footer{
    margin-top: 140px;
  }
}

/* ===== Reduce motion ===== */
@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.about-next{
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--pad-sp);
}

.about-next__lead{
  margin: 0 0 18px;
  line-height: 2.0;
  opacity: 0.75;
}

@media (min-width: 768px){
  .about-next{
    padding: 0 var(--pad-pc);
  }
}
.about-next__lead{
  text-align: center;
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}

/* =========================
   ABOUT HERO - color grading
   TOPの夜トーンに寄せる
========================= */

body.about .hero {
  position: relative;
  overflow: hidden;
}

/* 温かみ＋夜の深みレイヤー */
body.about .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(20, 15, 10, 0.45) 0%,
      rgba(30, 20, 15, 0.35) 40%,
      rgba(0, 0, 0, 0.55) 100%
    );
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* 少し暖色寄りにする */
body.about .hero img {
  filter:
    brightness(0.85)
    contrast(1.05)
    saturate(1.05)
    sepia(0.12);
}
/* ===== About Hero ===== */
.hero-about{
  height: 60vh;
  min-height: 420px;

  background: url("../assets/img/hero_about_room.jpg") center / cover no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-about__title{
  font-size: 12px;
  letter-spacing: .12em;
  opacity: .7;
}

/* ===== About Hero Fog ===== */
.hero-about {
  position: relative;
  height: 60vh;
  background: url("../assets/img/hero_about_room.jpg") center / cover no-repeat;
}

.hero-about::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.55),
      rgba(255,255,255,0.75)
    );
}

/* ===== About Main Text Spacing ===== */
.about .content {
  padding-top: 96px;
}

/* ===== About Hero ===== */
.hero-about{
  position: relative;
  height: 60vh; /* 60〜65vhがちょうどいい */
  background: url("../assets/img/hero_about_room.jpg") center / cover no-repeat;
  overflow: hidden;
}

/* 白いモヤ（弱め） */
.hero-about::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(247,246,242,0.22),
    rgba(247,246,242,0.40)
  );
  pointer-events:none;
}

/* 影の空気（薄い）＝温度を戻す */
.hero-about::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(
    1200px 600px at 55% 35%,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.10) 55%,
    rgba(0,0,0,0.18) 100%
  );
  pointer-events:none;
}

/* hero と本文の間に余白（確実版） */
.hero-about{
  margin-bottom: 84px; /* 60〜120で調整 */
}

/* さらに「次のブロック」にも保険で余白 */
.hero-about + *{
  margin-top: 0;              /* 既存marginの暴れ防止 */
  padding-top: 0;             /* 既存paddingの暴れ防止 */
}