/* ============================================================================
   PALE HOUR — home.css
   トップページ専用：スクロールで夜→夜明け→朝へ変化する空（診断LPと同じ世界観）
   ＋ Hero / Concept / Values / Program / Voice / Journal / FAQ&Contact
   ========================================================================== */

body.page-home{background:#0E1524}

/* ----------------------------------------------------------------------------
   FIXED ATMOSPHERE — 空と海（スクロールで夜→朝へ）※この演出は確定・変更しない
   -------------------------------------------------------------------------- */
.sky{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#0B1220}
.sky__layer{position:absolute; inset:0; will-change:opacity}
.l-night{opacity:1;    background:linear-gradient(to bottom,#0D1422 0%,#131D30 22%,#1B2740 40%,#243350 54%,#2B3A56 60%,#334260 61.5%,#213047 62.6%,#121B2D 78%,#0B1120 100%)}
.l-twilight{opacity:0; background:linear-gradient(to bottom,#1A2134 0%,#243350 24%,#35496B 44%,#4A6389 56%,#6A85A6 61%,#93AAC6 62.4%,#4D6488 63.6%,#2D3F5E 80%,#1C2942 100%)}
.l-blue{opacity:0;     background:linear-gradient(to bottom,#2C3F5F 0%,#3E5575 26%,#5C789F 48%,#89A5C4 58%,#B3CADE 61.4%,#D6E5F0 62.6%,#8099BD 64%,#4A6489 80%,#33486A 100%)}
.l-dawn{opacity:0;     background:linear-gradient(to bottom,#4B5A78 0%,#7F8CA4 24%,#B3B2AD 44%,#D8C3A6 55%,#E7D3B4 60.4%,#F5E7D0 62.4%,#CEBA9F 64%,#8A93A6 80%,#606F8C 100%)}
.l-day{opacity:0;      background:linear-gradient(to bottom,#AAC3DB 0%,#C8DAEB 24%,#E6EFF7 46%,#F2EDE2 58%,#F8F2E8 61.4%,#DDE8F1 63.4%,#C3D5E6 76%,#ABC2D9 100%)}

.sky__stars{position:absolute; inset:0 0 40% 0; opacity:1;
  background-image:radial-gradient(1.2px 1.2px at 12% 20%,rgba(255,255,255,.9),transparent 60%),
    radial-gradient(1px 1px at 28% 12%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1.4px 1.4px at 46% 26%,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(1px 1px at 63% 9%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 22%,rgba(255,255,255,.8),transparent 60%),
    radial-gradient(1px 1px at 88% 14%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1px 1px at 36% 6%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1.1px 1.1px at 55% 18%,rgba(255,255,255,.7),transparent 60%);
  animation:twinkle 6s ease-in-out infinite}
.sky__sun{position:absolute; left:50%; top:62%; width:min(46vw,340px); aspect-ratio:1;
  transform:translate(-50%,26vh); opacity:0; will-change:transform,opacity;
  background:radial-gradient(circle at 50% 50%, #F4E6CF 0 14%, rgba(244,223,184,.5) 30%, rgba(244,223,184,0) 62%)}
.sky__horizon{position:absolute; left:0; right:0; top:62%; height:1px; opacity:.5;
  background:linear-gradient(90deg,transparent,rgba(246,238,224,.75) 50%,transparent);
  animation:hzbreathe 8s ease-in-out infinite}
.sky__sea{position:absolute; left:-20%; right:-20%; top:63%; bottom:0; opacity:.5;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 2px, transparent 2px 10px);
  mask-image:linear-gradient(to bottom, transparent, #000 30%, transparent);
  animation:seashift 18s linear infinite, wavebob 8s ease-in-out infinite}
/* 霧（診断LPと同じ・薄明〜ブルーの時間に漂う） */
.sky__fog{position:absolute; left:-20%; right:-20%; top:50%; height:26vh; opacity:0;
  background:radial-gradient(60% 100% at 50% 50%, rgba(210,222,229,.5), transparent 70%);
  filter:blur(6px); animation:drift 26s ease-in-out infinite}
/* 太陽の海面反射 */
.sky__reflection{position:absolute; left:50%; top:62%; width:min(30vw,230px); height:34vh; transform:translateX(-50%); opacity:0;
  background:linear-gradient(to bottom, rgba(246,238,224,.5), rgba(246,238,224,0) 80%);
  filter:blur(3px); mask-image:repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 8px);
  animation:refsway 12s ease-in-out infinite}
/* 岸辺の暗がり */
.sky__shore{position:absolute; left:0; right:0; bottom:0; height:16vh; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(13,19,33,.42), rgba(13,19,33,.1) 55%, transparent);
  mask-image:linear-gradient(to top,#000 60%,transparent)}
/* 波の泡の線 */
.sky__foam{position:absolute; left:-10%; right:-10%; bottom:13vh; height:2px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(226,236,244,.5),rgba(255,255,255,.34),rgba(226,236,244,.5),transparent);
  filter:blur(1.2px); opacity:.55; animation:foam 9s ease-in-out infinite}
.grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes hzbreathe{0%,100%{opacity:.4}50%{opacity:.62}}
@keyframes seashift{to{background-position-x:12px}}
@keyframes wavebob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(3%)}}
@keyframes refsway{0%,100%{transform:translateX(-50%) translateX(-4px)}50%{transform:translateX(-50%) translateX(5px)}}
@keyframes foam{0%,100%{opacity:.35; transform:translateY(0) scaleX(.97)}50%{opacity:.72; transform:translateY(-3px) scaleX(1.02)}}
@media (prefers-reduced-motion: reduce){
  .sky__stars,.sky__horizon,.sky__sea,.sky__fog,.sky__reflection,.sky__foam{animation:none}
}

/* ----------------------------------------------------------------------------
   Content shell — 文字色モード（夜帯＝明るい文字／朝帯＝濃い文字）
   -------------------------------------------------------------------------- */
.page{position:relative; z-index:2}
.m-light{color:var(--ink-light)}
.m-light .eyebrow{color:var(--ink-light-soft)}
.m-light .soft{color:var(--ink-light-soft)}
.m-light .sec-title{color:var(--ink-light)}
.m-light .sec-lead{color:var(--ink-light-soft)}
.m-light :where(h1,h2,h3){text-shadow:0 2px 40px rgba(10,16,30,.4)}
.m-dark{color:var(--ink)}
.m-dark .eyebrow{color:var(--indigo)}
/* 可読性スクリム（固定の空の上でも文字が沈まない・ごく淡く） */
.hsec{position:relative}
.hsec::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none}
.m-light.hsec::before{background:radial-gradient(120% 80% at 40% 46%, rgba(9,15,28,.34), rgba(9,15,28,.08) 60%, transparent 80%)}
.m-dark.hsec::before{background:radial-gradient(130% 86% at 50% 46%, rgba(250,250,248,.62), rgba(250,250,248,.22) 60%, transparent 82%)}

/* ----------------------------------------------------------------------------
   01 Hero — 画面いっぱいの夜明けの海（写真＋動く空がとけ合う）
   -------------------------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  align-items:safe center;   /* 画面が低い時は中央でなく上から並べ、ヘッダーとの重なりを防ぐ */
  padding-block:calc(var(--header-h) + clamp(40px, 7vh, 84px)) 110px;
}
/* PC：下部のScroll表示と干渉しないよう、コピーの下に余白を厚く確保 */
@media (min-width: 961px){
  .hero{padding-bottom:190px}
}
.hero__photo{
  position:absolute; inset:0; z-index:-1; overflow:hidden;
  mask-image:linear-gradient(to bottom, #000 72%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent 100%);
}
.hero__photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 60%;
  animation:heroScale 40s ease-in-out infinite alternate;
}
/* 写真の上に夜の色 → 時間とともに静かに明けていく */
.hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(13,20,34,.78), rgba(19,29,48,.55) 55%, rgba(13,20,34,.62));
  animation:heroDawn 26s ease-out forwards;
}
@keyframes heroScale{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes heroDawn{
  0%{opacity:1}
  100%{opacity:.45}
}
@media (prefers-reduced-motion: reduce){
  .hero__photo img{animation:none}
  .hero__veil{animation:none; opacity:.55}
}
.hero__inner{max-width:560px}
.hero__title{
  font-family:var(--serif-jp); font-weight:500;
  font-size:clamp(2.1rem, 6vw, 3.5rem); line-height:1.6; letter-spacing:.06em;
}
/* 余白は文字サイズ基準(em)でなく画面高さ基準：スマホの見え方は維持しつつPCで自然に */
.hero__sub{margin-top:clamp(26px, 4.5vh, 46px); line-height:2.3; letter-spacing:.08em; color:var(--ink-light-soft); font-size:clamp(.95rem,1.4vw,1.05rem)}
.hero__cta{margin-top:clamp(38px, 7vh, 68px)}
.hero__cta .btn{border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.08)}
.hero__cta .btn:hover{border-color:rgba(246,238,224,.75)}
.hero__note{display:block; margin-top:1.4em; font-family:var(--serif-en); font-size:.76rem; letter-spacing:.34em; color:var(--ink-light-soft)}
.hero__scroll{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--serif-en); font-size:.66rem; letter-spacing:.4em; color:var(--ink-light-soft);
}
.hero__scroll::after{content:""; width:1px; height:52px; background:linear-gradient(to bottom, currentColor, transparent)}
/* PC：コピーの列と重ならないよう右下へ */
@media (min-width: 961px){
  .hero__scroll{left:auto; right:var(--gutter); transform:none}
}
/* 高さの低いウィンドウでは出さない（重なりの原因を断つ） */
@media (max-height: 660px){
  .hero__scroll{display:none}
}

/* ----------------------------------------------------------------------------
   02 Concept — 左コピー / 右静物写真の非対称
   -------------------------------------------------------------------------- */
.concept__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(40px, 7vw, 100px); align-items:center;
}
.concept__title{
  font-family:var(--serif-jp); font-size:clamp(1.7rem, 4vw, 2.5rem);
  line-height:1.85; font-weight:500;
}
.concept__body{margin-top:2.4em; line-height:2.35; color:var(--ink-light-soft); max-width:36em}
.concept__body + .concept__body{margin-top:1.8em}
.concept__refrain{margin-top:2.4em; font-family:var(--serif-jp); line-height:2.5; letter-spacing:.1em}
.concept__link{margin-top:3em}
.m-light .tlink{color:var(--pale-blue)}
.concept__photo{position:relative}
.concept__photo img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius);
}
.concept__photo figcaption{
  margin-top:1.2em; font-family:var(--serif-en); font-size:.68rem; letter-spacing:.34em;
  color:var(--ink-light-soft); text-transform:uppercase;
}
@media (max-width: 860px){
  .concept__grid{grid-template-columns:1fr; gap:44px}
  .concept__photo{order:2; max-width:420px}
}

/* ----------------------------------------------------------------------------
   03 Values — 4つの価値（細い藍色の線画アイコン）
   -------------------------------------------------------------------------- */
.values__grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(20px, 3vw, 40px)}
.value{
  padding:clamp(26px, 3vw, 38px) clamp(20px, 2.4vw, 30px);
  border-top:1px solid rgba(255,255,255,.24);
}
.value__icon{width:44px; height:44px; margin-bottom:22px}
.value__icon *{stroke:currentColor; opacity:.85}
.value__num{font-family:var(--serif-en); font-size:.72rem; letter-spacing:.3em; opacity:.65}
.value__name{margin-top:.5em; font-family:var(--serif-jp); font-size:1.2rem; letter-spacing:.14em}
.value__text{margin-top:1.1em; font-size:.9rem; line-height:2.05; color:var(--ink-light-soft)}
@media (max-width: 900px){ .values__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 480px){ .values__grid{grid-template-columns:1fr} }

/* ----------------------------------------------------------------------------
   04 Program — 4カード（同サイズで並べすぎない：先頭を主役に）
   -------------------------------------------------------------------------- */
.program__grid{display:grid; grid-template-columns:repeat(12, 1fr); gap:clamp(16px, 2vw, 26px)}
.pcard{
  grid-column:span 4;
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.32); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.44); border-radius:var(--radius);
  padding:clamp(26px, 3vw, 38px);
  transition:transform .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.pcard:hover{transform:translateY(-2px); border-color:rgba(246,238,224,.66); box-shadow:0 18px 50px -30px rgba(120,150,190,.5)}
.pcard--main{grid-column:span 8; background:rgba(255,255,255,.4)}
.pcard__tag{
  align-self:flex-start; font-size:.68rem; letter-spacing:.3em;
  color:var(--indigo); border:1px solid rgba(62,85,117,.3); border-radius:100px; padding:.4em 1.1em;
  background:rgba(255,255,255,.25);
}
.pcard__num{margin-top:1.6em; font-family:var(--serif-en); font-size:.76rem; letter-spacing:.3em; color:var(--ink-soft)}
.pcard__name{margin-top:.4em; font-family:var(--serif-jp); font-size:1.18rem; letter-spacing:.1em}
.pcard__text{margin-top:1em; font-size:.9rem; line-height:2.05; color:var(--ink-soft); flex:1}
.pcard__link{margin-top:1.8em}
.pcard__soon{margin-top:1.8em; font-size:.74rem; letter-spacing:.26em; color:var(--ink-soft)}
.program__note{margin-top:2.2em; font-size:.86rem; color:var(--ink-soft); letter-spacing:.06em}
.program__more{margin-top:3em}
@media (max-width: 980px){ .pcard, .pcard--main{grid-column:span 6} }
@media (max-width: 640px){ .pcard, .pcard--main{grid-column:span 12} }

/* ----------------------------------------------------------------------------
   05 Voice（掲載準備中）
   -------------------------------------------------------------------------- */
.voice__pending{
  max-width:560px; padding:clamp(30px,4vw,46px);
  background:rgba(255,255,255,.3); backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid rgba(255,255,255,.44); border-radius:var(--radius);
  color:#454E5A; line-height:2.15; font-size:.92rem;
}

/* ----------------------------------------------------------------------------
   06 Journal — サムネイル一覧
   -------------------------------------------------------------------------- */
.journal__grid{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,2.4vw,30px)}
.jcard{grid-column:span 4; display:flex; flex-direction:column}
.jcard--wide{grid-column:span 8}
.jcard--wide .jcard__thumb{aspect-ratio:16/9}
.jcard__thumb{
  overflow:hidden; border-radius:var(--radius); aspect-ratio:3/2; background:var(--pale-blue);
}
.jcard__thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s ease, opacity 1.4s ease;
}
.jcard:hover .jcard__thumb img{transform:scale(1.03)}
.jcard__cat{margin-top:1.3em; font-family:var(--serif-en); font-size:.68rem; letter-spacing:.36em; text-transform:uppercase; color:var(--indigo)}
.jcard__title{margin-top:.6em; font-family:var(--serif-jp); font-size:1.04rem; line-height:1.9; letter-spacing:.06em}
.jcard__soon{margin-top:.7em; font-size:.7rem; letter-spacing:.28em; color:var(--ink-soft)}
.journal__more{margin-top:3.2em}
@media (max-width: 900px){
  .jcard, .jcard--wide{grid-column:span 6}
}
@media (max-width: 600px){
  .jcard, .jcard--wide{grid-column:span 12}
  .journal__grid{gap:34px}
}

/* ----------------------------------------------------------------------------
   07 FAQ & Contact — 2カラム（背景に静かな海霧の写真）
   -------------------------------------------------------------------------- */
.fc{position:relative; overflow:hidden}
.fc__bg{position:absolute; inset:0; z-index:-2}
.fc__bg img{width:100%; height:100%; object-fit:cover}
.fc__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(248,247,243,.72), rgba(248,247,243,.6))}
.fc__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(44px, 7vw, 110px); align-items:start}
@media (max-width: 860px){ .fc__grid{grid-template-columns:1fr; gap:64px} }

/* FAQ アコーディオン */
.faq-list{border-top:1px solid var(--hair)}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:baseline; gap:1.2em;
  padding:1.35em .2em; min-height:44px;
  font-size:.96rem; letter-spacing:.06em; line-height:1.9;
  transition:color .3s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--indigo)}
.faq-item summary::before{content:"Q"; font-family:var(--serif-en); letter-spacing:0; color:var(--indigo); flex:none}
.faq-item summary::after{
  content:""; margin-left:auto; flex:none; width:9px; height:9px; align-self:center;
  border-right:1px solid var(--indigo); border-bottom:1px solid var(--indigo);
  transform:rotate(45deg); transition:transform .4s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-item .faq-a{
  display:flex; gap:1.2em; padding:0 .2em 1.6em;
  font-size:.9rem; line-height:2.1; color:var(--ink-soft);
}
.faq-item .faq-a::before{content:"A"; font-family:var(--serif-en); color:var(--ink-soft); flex:none}
.fc__contact .sec-lead{margin-top:1.2em}
.fc__contact .btn{margin-top:2.4em}

/* ----------------------------------------------------------------------------
   LPの空気に寄せる調整（2026-07-11ユーザー要望）
   -------------------------------------------------------------------------- */
/* セクションの間合い＝LPと同じゆったりした呼吸 */
.page-home .section{padding-block:clamp(110px, 18vh, 210px)}

/* 濃紺ソリッドのボタン→LPと同じ「ガラス（昼帯用の淡い光）」に */
.page-home .btn-solid{
  background:rgba(255,255,255,.4); color:var(--ink-dark);
  border:1px solid rgba(46,60,84,.3);
  backdrop-filter:blur(8px) saturate(1.3); -webkit-backdrop-filter:blur(8px) saturate(1.3);
}
.page-home .btn-solid:hover{
  background:rgba(255,255,255,.55); border-color:rgba(62,85,117,.6);
  box-shadow:0 18px 50px -22px rgba(180,200,224,.6);
}

/* home のフッター＝LPと同じく夜の海の写真に深い藍を重ねる */
.page-home .site-footer{position:relative; overflow:hidden; border-top:1px solid rgba(255,255,255,.08); background:transparent}
.page-home .site-footer::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(to bottom, rgba(10,16,30,.9), rgba(10,16,30,.76)),
             url("../images/common/sea-sunrise.jpg") center/cover no-repeat;
}
.page-home .site-footer > .wrap{position:relative; z-index:1}