/* J PLANNING — トップページ専用スタイル */
/* ヒーロー画像の上にヘッダーを重ねるため、既定(common.css)の白背景ヘッダーを
   「最初は透明・スクロールしたら白」に上書きする。他ページはcommon.cssの既定のまま。 */
header{
  background:transparent;
  box-shadow:none;
}
header.scrolled{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 #DADDE3;
}
.brand{color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.35); transition:color .4s ease, text-shadow .4s ease;}
header.scrolled .brand{color:#0B1638; text-shadow:none;}
header nav.gnav a{color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.35);}
header.scrolled nav.gnav a{color:#1C1F26; text-shadow:none;}
.menu-toggle{color:#fff;}
header.scrolled .menu-toggle{color:#1C1F26;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  height:100vh;
  min-height:640px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  background:#0d1a3a;
}
.hero-photo{
  position:absolute; inset:0; width:100%; height:100%;
  background:
    linear-gradient(180deg, rgba(11,22,56,0.15) 0%, rgba(11,22,56,0.55) 62%, rgba(9,16,40,0.92) 100%),
    url("../assets/hero_image.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  animation:heroFadeIn 1.6s ease forwards;
  transform:scale(1.08) translateY(0);
  will-change:transform;
}
.hero-sweep{
  position:absolute; top:-10%; left:58%;
  width:2px; height:140%;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,0.9), transparent);
  transform:rotate(18deg);
  opacity:0; filter:blur(0.3px);
  animation:sweepIn 1.8s .5s ease forwards;
}
.hero-inner{
  position:relative; z-index:2;
  width:100%; padding:0 5vw 92px;
  color:#fff;
}
.hero-kicker{
  font-size:12px; letter-spacing:0.5em; color:#7C93C4;
  margin-bottom:26px;
  opacity:0; animation:riseFade .9s .3s ease forwards;
}
.hero-title{
  margin:0;
  font-family:'Noto Serif JP',serif;
  color:#fff;
  font-size:clamp(30px, 4.6vw, 58px);
  font-weight:600; line-height:1.55; letter-spacing:0.02em;
}
.line-mask{display:block; overflow:hidden;}
.line-inner{display:block; transform:translateY(112%);}
.line-1{animation:lineUp 1.15s cubic-bezier(.19,1,.22,1) .5s forwards;}
.line-2{animation:lineUp 1.15s cubic-bezier(.19,1,.22,1) .68s forwards;}
.hero-rule{
  width:0; height:1px;
  background:linear-gradient(90deg,#7C93C4,rgba(124,147,196,0));
  margin:26px 0 0;
  animation:lineDraw 1.1s cubic-bezier(.19,1,.22,1) 1.55s forwards;
}
.hero-sub{
  margin:24px 0 0; max-width:560px;
  font-size:14.5px; color:rgba(255,255,255,0.78); letter-spacing:0.03em;
  opacity:0; animation:riseFade 1s 1.75s ease forwards;
}
.scroll-cue{
  position:absolute; right:5vw; bottom:44px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:rgba(255,255,255,0.65); font-size:10px; letter-spacing:0.3em;
}
.scroll-line{
  width:1px; height:52px;
  background:rgba(255,255,255,0.35);
  overflow:hidden; position:relative; display:block;
}
.scroll-drop{
  content:""; position:absolute; top:-100%; left:0;
  width:100%; height:100%; background:#fff;
  animation:cueDrop 2.4s ease-in-out infinite;
}

/* ---------- Section shell（トップページのみの上書き：中央寄せ・光量調整） ---------- */
.section{padding:150px 5vw;}
.section-inner{max-width:1120px; margin:0 auto;}
.center{text-align:center;}

.eyebrow{justify-content:center; margin-bottom:22px;}
.eyebrow::after{content:""; display:block; width:36px; height:1px; background:#7C93C4;}
.eyebrow.light{color:rgba(255,255,255,0.85);}
.eyebrow.light::before, .eyebrow.light::after{background:rgba(255,255,255,0.28);}

.section-title{
  margin:0 auto; text-align:center;
  font-size:clamp(24px, 2.6vw, 34px); font-weight:500;
  line-height:2; max-width:760px; letter-spacing:0.02em;
}
.section-title.light{color:#fff;}
.section-title .accent{color:#3B5590;}
.lead{text-align:center; margin:30px auto 0; color:#565C6B; font-size:14.5px; max-width:600px;}

.text-link.light{color:#7C93C4; border-color:#7C93C4;}

/* ---------- Business ---------- */
.biz-grid{
  margin-top:70px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(255,255,255,0.14);
}
.biz-card{background:#0B1638; padding:48px 34px; transition:background .4s ease;}
.biz-card:hover{background:#0F1E48;}
.biz-card .no{font-family:'Noto Serif JP',serif; font-size:13px; color:#7C93C4; letter-spacing:0.1em;}
.biz-card h3{margin:20px 0 0; color:#fff; font-family:'Noto Serif JP',serif; font-size:19px; font-weight:500;}
.biz-card p{margin:16px 0 0; font-size:13.5px; color:rgba(255,255,255,0.66); line-height:1.95;}
.biz-card .license-note{color:rgba(255,255,255,0.5);}
.biz-note{margin-top:56px; font-size:12px; color:rgba(255,255,255,0.4); text-align:center; letter-spacing:0.05em;}

/* ---------- Values ---------- */
.value-list{margin-top:70px; display:grid; grid-template-columns:repeat(3,1fr); gap:56px;}
.value-item{text-align:center; min-width:0;}
.value-icon{
  width:52px; height:52px; margin:0 auto 26px;
  border-radius:50%; border:1px solid #7C93C4;
  display:flex; align-items:center; justify-content:center;
}
.value-icon svg{width:20px; height:20px; stroke:#1A2A5E;}
.value-item h3{font-size:16px; font-weight:600; letter-spacing:0.06em; color:#0B1638;}
.value-item p{margin-top:14px; font-size:13.5px; color:#565C6B; white-space:nowrap;}

/* ---------- CTA ---------- */
.cta-section{padding-top:150px;}
.cta-box{
  max-width:1120px; margin:0 auto;
  border:1px solid #DADDE3; padding:80px 5vw; text-align:center;
}
.cta-box .section-title{font-size:clamp(22px,2.4vw,30px);}
.cta-box .lead{margin-top:18px;}
.cta-box .cta-btn{margin-top:40px; display:inline-flex; align-items:center; padding:17px 44px;}

@media (max-width:860px){
  .biz-grid, .value-list{grid-template-columns:1fr;}
  .value-list{gap:44px;}
  .section{padding:100px 6vw;}
  .value-item p{font-size:12.5px;}
}

@media (max-width:600px){
  .scroll-cue{display:none;}
  .hero-sub{max-width:100%;}
}