/* layout.css — header/footer/main等のレイアウト構造 */

header.site,footer.site{flex-shrink:0;}
.wrap{max-width:1100px;margin:0 auto;padding:0 40px;}
header.site{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:var(--bg);
  border-bottom:1px solid transparent;
  padding:16px 0;
  transition:border-color .2s ease;
}
header.site.scrolled{border-bottom-color:var(--border);}
header.site .wrap{
  max-width:none;
  padding:0 32px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
}
nav.main{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
nav.main a{
  font-size:14px;
  color:var(--fg);
  white-space:nowrap;
}
nav.main a:last-child{
  border-left:1px solid var(--border);
  padding-left:20px;
}
nav.main a.current{font-weight:700;color:#6180e5;}
.header-cta{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 auto;margin-left:auto;}
/* 1000〜1199px（iPad横など）：中央固定のナビだと右のボタンと重なるため、
   ロゴとボタンの間に並べ、間隔と文字を少し詰める */
@media (min-width:1000px) and (max-width:1199px){
  header.site .wrap{gap:20px;}
  nav.main{position:static;transform:none;margin-left:auto;gap:14px;flex-wrap:nowrap;}
  nav.main a{font-size:13px;}
  nav.main a:last-child{padding-left:14px;}
  .header-cta{margin-left:0;}
}
.nav-toggle{display:none;position:relative;flex:0 0 auto;}
.nav-toggle summary{
  display:flex;
  list-style:none;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid var(--border);
  border-radius:4px;
  cursor:pointer;
  color:var(--fg);
}
.nav-toggle summary svg{width:18px;height:18px;}
@media (max-width:999px){
  body{padding-top:54px;}
  header.site{padding:10px 0;}
  header.site .wrap{
    padding:0 12px;
    flex-wrap:nowrap;
    gap:6px;
  }
  header.site .logo{font-size:13px;order:1;gap:7px;}
  header.site .logo-mark{height:32px;}
  header.site .logo-text{font-size:11px;}
  .header-cta{order:2;gap:4px;margin-left:auto;}
  .nav-toggle{display:block;order:3;margin-left:4px;flex:0 0 auto;}
  .nav-toggle summary{width:32px;height:32px;}
  .nav-toggle summary svg{width:16px;height:16px;}
  .header-cta .btn{flex:0 0 auto;text-align:center;}
  /* ボタンとバーガーの高さを32pxにそろえる */
  .header-cta .btn.small{display:inline-flex;align-items:center;height:32px;padding:0 8px;font-size:11px;line-height:1;}
  nav.main{display:none;order:4;}
  .nav-toggle[open] ~ nav.main{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:0;
    position:fixed;
    top:54px;
    left:0;
    right:0;
    bottom:0;
    transform:none;
    background:var(--bg);
    border-top:1px solid var(--border);
    padding:4px 20px;
    overflow-y:auto;
    z-index:99;
  }
  .nav-toggle[open] ~ nav.main a{
    font-size:15px;
    padding:14px 0;
    border-bottom:1px solid var(--border);
    white-space:normal;
  }
  .nav-toggle[open] ~ nav.main a:last-child{
    border-left:none;
    padding-left:0;
    margin-left:0;
    border-bottom:none;
  }
}
@media (max-width:360px){
  header.site .wrap{padding:0 8px;gap:4px;}
  header.site .logo-text{display:none;}
  header.site .logo-mark{height:28px;}
  .header-cta .btn.small{padding:0 6px;font-size:10px;}
}
main{flex:1 0 auto;padding:48px 0 72px;}
.hero-band{
  width:100%;
  margin-top:-48px;
  padding:48px 0 88px;
  /* ファーストビューの背景：白地の上に、ぼかした歪な丸のグラデーションを3つ、
     ランダムな位置・大きさ・色相で、重なるように出しては消す（script.js が .hero-blob を生成） */
  position:relative;
  overflow:hidden;
  background:#fff;
}
.hero-band > .wrap{position:relative;z-index:1;}
.hero-blob{
  /* --x / --y / --s / --h / --r / --rot は script.js がランダムに設定する */
  --x:50%;--y:50%;--s:480px;--h:225;
  --r:48% 52% 55% 45% / 46% 54% 50% 50%;
  --rot:0deg;
  --ar:1;
  position:absolute;
  z-index:0;
  left:var(--x);
  top:var(--y);
  width:var(--s);
  /* 縦横比（--ar）と8か所の角丸をランダムにして、歪な丸にする */
  aspect-ratio:var(--ar);
  border-radius:var(--r);
  pointer-events:none;
  /* 彩度・明るさは固定し、色相（--h）だけを変える。形が見えるよう外側まで色を残し、blur でふちをぼかす */
  background:radial-gradient(circle at 45% 42%,hsla(var(--h),72%,64%,.16) 0%,hsla(var(--h),72%,64%,.09) 55%,hsla(var(--h),72%,64%,.035) 100%);
  filter:blur(calc(var(--s) * .05));
  /* 2つが重なったところで色が混ざるように乗算で重ねる（白地なので背景は変わらない） */
  mix-blend-mode:multiply;
  opacity:0;
  transform:translate(-50%,-50%) rotate(var(--rot)) scale(.9);
  /* じんわり出て消える。表示中も形（border-radius）と向きがゆっくり変わる */
  transition:opacity 4s ease-in-out,transform 12s ease-out,border-radius 8s ease-in-out;
}
.hero-blob.is-visible{opacity:1;transform:translate(-50%,-50%) rotate(var(--rot)) scale(1);}
@keyframes hero-gradient-move{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.hero{padding:0;margin:0;}
.hero-grid{display:flex;align-items:center;gap:56px;}
.hero-visual{flex:0 0 340px;}
/* PC：イラストを右端から少し左に寄せる（画面幅1000pxで0px → 1200px以上で60px。境目で急に動かないよう幅に比例させる） */
@media (min-width:1000px){ .hero-visual{margin-right:clamp(0px, calc((100vw - 1000px) * .3), 60px);} }
/* イラストは背景透過PNG（hero-illustration-transparent.png）を使い、元の色のまま背景画像に重ねる */
.hero-visual img{width:100%;height:auto;display:block;}
.hero-text{flex:1 1 auto;min-width:0;}
.sp-br{display:none;}
@media (max-width:700px){ .sp-br{display:inline;} }
@media (max-width:700px){
  .hero-band{padding:22px 0 44px;}
  .hero-grid{flex-direction:column;gap:14px;}
  .hero-visual{flex:0 0 auto;width:230px;order:-1;align-self:center;}
  .hero-text{text-align:center;}
  .hero p.sub{margin-left:auto;margin-right:auto;}
  /* SP時：文節単位で改行し、文の区切りで改行する */
  .hero p.sub .phrase,.card p .phrase{display:inline-block;}
  /* 見出しの1行が画面幅に収まらない場合は、文節の切れ目で改行する */
  .theme-headline .headline-line{white-space:normal;}
  .theme-headline .phrase{display:inline-block;}
  .hero .cta-row{justify-content:center;}
}
.cta-row{margin-top:36px;display:flex;gap:12px;flex-wrap:nowrap;white-space:nowrap;}
/* 折り返さずに横1列で収まるよう、999px以下はボタンを少し詰める */
@media (max-width:999px){
  .cta-row{gap:8px;}
  .cta-row .btn{padding:10px 14px;font-size:13px;}
}
/* 701〜999px（タブレット）：本文とイラストの間隔を少し詰める */
@media (min-width:701px) and (max-width:999px){
  .hero-grid{gap:32px;}
}
#trial-form{border-top:none;}
.roadmap-band{background:none;padding:0;overflow:hidden;border-top:none;}
.roadmap-band section{margin-bottom:0;}
#trial-form section{margin-top:32px;}
.about-band{background:#6180e5;padding:0;overflow:hidden;border-radius:0;margin:0;}
.about-band > .wrap > section > h2{color:#fff;}
.about-band > .wrap > section > p{color:rgba(255,255,255,.9);}
@media (max-width:700px){
  /* SP時の上余白（デフォルト48pxより少し詰める） */
  .about-band > .wrap > section:first-child{margin-top:32px;}
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px;}
@media (max-width:700px){
  .plan-grid{grid-template-columns:1fr;}
}
.detail-section{margin-top:56px;padding-top:40px;border-top:1px solid var(--border);}
.detail-section h2{margin-bottom:28px;}
.detail-section > h2{margin-bottom:8px;}
.detail-section .page-lead{margin-bottom:28px;}
.section-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px;}
@media (max-width:700px){
  .section-list{grid-template-columns:1fr;}
}
.trial-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:start;}
@media (max-width:700px){
  .trial-grid{grid-template-columns:1fr;}
}
.trial-form-block{margin-top:48px;}
.roadmap-steps{display:flex;position:relative;margin-top:48px;}
.roadmap-steps::before{
  content:"";
  position:absolute;
  top:72.9px; /* 線の中心(高さ3px)を丸の中心(74.4px)に合わせる */
  left:calc(100%/6);
  right:calc(100%/6);
  height:3px;
  background:#6180e5;
  z-index:0;
}
.roadmap-steps .step{flex:1;position:relative;z-index:1;text-align:center;padding:0 16px;}
@media (max-width:700px){
  .roadmap-steps{margin-top:28px;}
  .roadmap-steps::before{top:55.5px;height:2px;} /* 線の中心を丸の中心(56.5px)に合わせる */
  .roadmap-steps .step{padding:0 4px;}
  /* component.css より後勝ちさせるため .roadmap-steps を付けて詳細度を上げる */
  .roadmap-steps .step-num{font-size:20px;line-height:1.1;}
  .roadmap-steps .step-label{font-size:10px;line-height:1.75;letter-spacing:.1em;}
  .roadmap-steps .step-dot{width:10px;height:10px;margin:8px auto 0;border-width:2px;box-shadow:0 0 0 1.5px #6180e5;}
  .roadmap-steps .step-icon{width:44px;height:44px;margin:16px auto 10px;}
  .roadmap-steps .step-icon svg{width:22px;height:22px;}
  .roadmap-steps .step-text strong{font-size:13px;}
  .roadmap-steps .step-text span{font-size:10.5px;margin-top:3px;}
}
.concept-photo-band{overflow:hidden;}
.story-band{background:rgba(77,107,209,.06);padding:56px 0;}
.timeline{display:flex;gap:28px;flex-wrap:wrap;margin:20px 0 32px;}
footer.site{
  border-top:1px solid #ddd;
  padding:48px 0;
  font-size:13px;
  color:#000;
  background:#fff;
}
footer.site nav a{margin-right:16px;color:#000;}
footer.site nav a:last-child{
  border-left:1px solid rgba(0,0,0,.3);
  padding-left:16px;
  margin-left:4px;
}
footer.site .copy{margin-top:14px;color:#000;}
footer.site .copy a{color:#000;text-decoration:none;}
footer.site .footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
footer.site .footer-logo-link{display:inline-flex;flex:0 0 auto;}
footer.site .footer-logo{height:32px;width:auto;}
@media (max-width:600px){
  footer.site .footer-inner{justify-content:flex-start;}
}