/* ============================================================================
   PALE HOUR — pages.css
   下層ページ共通（About / Program / Voice / Journal / FAQ / Contact / Privacy / Legal）
   ========================================================================== */

/* ---------------- 下層ページの空気（淡いペールブルー→アイボリー） ---------------- */
body.page-sub{
  background:linear-gradient(to bottom, var(--mist-blue) 0, var(--ivory) 640px);
}

/* ---------------- ページヒーロー ---------------- */
.page-hero{
  padding:calc(var(--header-h) + clamp(64px, 10vw, 120px)) 0 clamp(48px, 7vw, 84px);
}
.page-hero .eyebrow{display:block; margin-bottom:1.4em}
.page-hero__title{
  font-family:var(--serif-jp); font-weight:500;
  font-size:clamp(1.8rem, 4.6vw, 2.8rem); line-height:1.65;
}
.page-hero__lead{margin-top:2em; max-width:38em; color:var(--ink-soft); line-height:2.25}

/* Aboutヒーロー：左テキスト＋右に青フルロゴ */
.page-hero__flex{display:flex; align-items:center; justify-content:space-between; gap:clamp(30px, 5vw, 80px)}
.page-hero__logo{flex:none; margin:0}
.page-hero__logo img{width:clamp(150px, 19vw, 225px); height:auto; display:block}
@media (max-width: 780px){
  .page-hero__flex{flex-direction:column; align-items:flex-start}
  .page-hero__logo{margin:26px auto 0}
  .page-hero__logo img{width:min(180px, 48vw)}
}

/* 写真つきヒーロー帯（ページによって使用） */
.photo-band{position:relative; overflow:hidden}
.photo-band img{width:100%; height:clamp(240px, 44vw, 460px); object-fit:cover}
.photo-band--tint::after{content:""; position:absolute; inset:0; background:rgba(38,58,87,.08)}

/* ---------------- About ---------------- */
.statement{max-width:660px}
.statement + .statement{margin-top:clamp(44px, 6vw, 70px)}
.statement h3{font-family:var(--serif-en); font-size:.8rem; letter-spacing:.42em; text-transform:uppercase; color:var(--indigo); font-weight:400}
.statement .statement__jp{margin-top:1.2em; font-family:var(--serif-jp); font-size:clamp(1.2rem, 2.4vw, 1.55rem); line-height:2.05}
.statement .statement__body{margin-top:1.4em; color:var(--ink-soft); line-height:2.25}

.about-story{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px, 6vw, 90px); align-items:center}
.about-story__photo img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius)}
@media (max-width: 820px){
  .about-story{grid-template-columns:1fr}
  .about-story__photo{max-width:400px}
}

.values-light .value{border-top-color:var(--hair); color:var(--ink)}
.values-light .value__icon{color:var(--indigo)}
.values-light .value__text{color:var(--ink-soft)}
.values-light .value__num{color:var(--ink-soft); opacity:1}

.owner-box{
  max-width:640px; padding:clamp(28px, 4vw, 44px);
  background:var(--white); border:1px solid var(--hair); border-radius:var(--radius);
  color:var(--ink-soft); line-height:2.15; font-size:.92rem;
}

/* CTA帯（写真の上・全ページ共通で使える） */
.cta-band{position:relative; overflow:hidden; text-align:center; color:var(--ink-light)}
.cta-band__bg{position:absolute; inset:0; z-index:-1}
.cta-band__bg img{width:100%; height:100%; object-fit:cover}
.cta-band__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(23,36,58,.66), rgba(23,36,58,.5))}
/* ロゴエンブレムの透かし（オーバーレイの上・文字の下） */
.cta-band__bg::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:url(../images/common/logo-emblem-white.png) center/auto 76% no-repeat;
  opacity:.13;
}
.cta-band .inner{padding:clamp(84px, 12vw, 150px) var(--gutter)}
.cta-band h2{font-family:var(--serif-jp); font-size:clamp(1.4rem, 3.4vw, 2rem); line-height:1.9}
.cta-band p{margin-top:1.4em; color:var(--ink-light-soft); letter-spacing:.1em}
.cta-band .btn{margin-top:2.6em; border-color:rgba(255,255,255,.5); color:var(--ink-light)}
.cta-band .btn:hover{border-color:rgba(246,238,224,.8)}
.cta-band .hero__note{color:var(--ink-light-soft)}

/* ---------------- Program（ファネル＝成長のプロセス） ---------------- */
.flow{position:relative; max-width:640px; margin-top:clamp(40px,5vw,60px)}
.flow::before{
  content:""; position:absolute; left:17px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(to bottom, var(--pale-blue), var(--indigo));
}
.flow__step{position:relative; padding:0 0 clamp(30px,4vw,44px) 60px}
.flow__step:last-child{padding-bottom:0}
.flow__dot{
  position:absolute; left:10px; top:.45em; width:15px; height:15px; border-radius:50%;
  background:var(--ivory); border:1px solid var(--indigo);
}
.flow__step--now .flow__dot{background:var(--indigo)}
.flow__stage{font-family:var(--serif-en); font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:var(--indigo)}
.flow__name{margin-top:.3em; font-family:var(--serif-jp); font-size:1.1rem; letter-spacing:.08em}
.flow__text{margin-top:.6em; font-size:.9rem; line-height:2.05; color:var(--ink-soft); max-width:32em}

.prg-detail{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.6vw,30px)}
.prg-detail .pcard{grid-column:auto; background:var(--white)}
@media (max-width: 720px){ .prg-detail{grid-template-columns:1fr} }

/* ---------------- Journal 一覧 ---------------- */
.feature-card{
  display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(30px,5vw,70px); align-items:center;
  margin-bottom:clamp(50px,7vw,90px);
}
.feature-card .jcard__thumb{aspect-ratio:16/10}
@media (max-width: 780px){ .feature-card{grid-template-columns:1fr; gap:26px} }
.cat-nav{display:flex; flex-wrap:wrap; gap:10px 14px; margin:0 0 clamp(34px,5vw,50px)}
.cat-nav span{
  font-family:var(--serif-en); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  border:1px solid var(--hair); border-radius:100px; padding:.5em 1.3em; color:var(--ink-soft);
}

/* ---------------- 記事詳細 ---------------- */
.article{max-width:720px; margin-inline:auto}
.article__cat{font-family:var(--serif-en); font-size:.72rem; letter-spacing:.38em; text-transform:uppercase; color:var(--indigo)}
.article__title{margin-top:.8em; font-family:var(--serif-jp); font-size:clamp(1.6rem,4vw,2.3rem); line-height:1.8}
.article__hero{margin:clamp(34px,5vw,50px) 0}
.article__hero img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius)}
.toc{
  margin:clamp(34px,5vw,50px) 0; padding:clamp(22px,3vw,32px) clamp(24px,3.4vw,38px);
  background:var(--mist-blue); border-radius:var(--radius);
}
.toc h2{font-family:var(--serif-en); font-size:.74rem; letter-spacing:.4em; text-transform:uppercase; color:var(--indigo); font-weight:400}
.toc ol{margin-top:1.2em; counter-reset:toc}
.toc li{counter-increment:toc; margin-bottom:.4em}
.toc a{
  display:inline-flex; gap:1em; padding:.3em 0; font-size:.9rem; color:var(--ink-soft);
  transition:color .3s ease;
}
.toc a::before{content:counter(toc, decimal-leading-zero); font-family:var(--serif-en); color:var(--indigo)}
.toc a:hover{color:var(--charcoal)}
.article__body h2{
  margin:2.6em 0 1em; padding-top:1.6em; border-top:1px solid var(--hair);
  font-family:var(--serif-jp); font-size:1.3rem; line-height:1.9;
}
.article__body p{margin-bottom:1.8em; line-height:2.3; color:#454E5A}
.article__body blockquote{
  margin:2.4em 0; padding:1.6em 2em;
  border-left:2px solid var(--indigo); background:var(--white); border-radius:0 var(--radius) var(--radius) 0;
  font-family:var(--serif-jp); line-height:2.2; color:var(--charcoal);
}
.article__cta{
  margin-top:clamp(50px,7vw,80px); padding:clamp(34px,5vw,50px);
  text-align:center; background:var(--pale-blue); border-radius:var(--radius);
}
.article__cta p{line-height:2.1; color:var(--indigo)}
.article__cta .btn{margin-top:1.8em}
.related{margin-top:clamp(60px,8vw,100px)}
.related h2{font-family:var(--serif-en); font-size:.8rem; letter-spacing:.42em; text-transform:uppercase; color:var(--indigo); font-weight:400; margin-bottom:2em}
.article__back{margin-top:clamp(44px,6vw,64px); text-align:center}

/* ---------------- Contact ---------------- */
.contact-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(44px,7vw,100px); align-items:start}
@media (max-width: 820px){ .contact-grid{grid-template-columns:1fr; gap:50px} }
.contact-side p{color:var(--ink-soft); line-height:2.25}
.contact-side .tlink{margin-top:2em}
.contact-form{background:var(--white); border:1px solid var(--hair); border-radius:var(--radius); padding:clamp(28px,4vw,48px)}
.form-status{
  display:none; margin-top:1.6em; padding:1.2em 1.5em; border-radius:var(--radius);
  background:var(--mist-blue); color:var(--indigo); font-size:.9rem; line-height:2;
}
.form-status.is-shown{display:block}

/* ---------------- Privacy / Legal ---------------- */
.legal-doc{max-width:720px}
.legal-doc h2{
  margin:2.8em 0 .9em; font-family:var(--serif-jp); font-size:1.12rem; letter-spacing:.08em;
  padding-top:1.4em; border-top:1px solid var(--hair);
}
.legal-doc h2:first-of-type{margin-top:1.6em}
.legal-doc p{margin-bottom:1.4em; line-height:2.2; color:#454E5A}
.legal-doc dl{display:grid; grid-template-columns:minmax(9em,auto) 1fr; gap:.9em 2em; margin-top:2em}
.legal-doc dt{color:var(--indigo); letter-spacing:.08em}
.legal-doc dd{margin:0; line-height:2.05; color:#454E5A}
@media (max-width: 560px){
  .legal-doc dl{grid-template-columns:1fr; gap:.2em}
  .legal-doc dd{margin-bottom:1.2em}
}
.legal-doc .rev{margin-top:3em; font-size:.82rem; color:var(--ink-soft)}

/* ---------------- Voice ページ ---------------- */
.voice-note{max-width:640px; color:var(--ink-soft); line-height:2.25}
/* 実際の掲載時に使うカード（テンプレ） */
.vcard{
  background:var(--white); border:1px solid var(--hair); border-radius:var(--radius);
  padding:clamp(26px,3.4vw,40px); max-width:640px; margin-bottom:26px;
}
.vcard__text{font-family:var(--serif-jp); line-height:2.3}
.vcard__meta{margin-top:1.4em; font-size:.8rem; letter-spacing:.14em; color:var(--ink-soft)}