/* ===== FV（白ベース・左テキスト・右ブロブ） ===== */
#hero-section {
  position: relative;
  z-index: 50;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: transparent;
  display: flex;
  flex-direction: column;
  padding-top: 72px;
  padding-bottom: clamp(40px, 5vh, 80px);
  box-sizing: border-box;
}

/* 白オーバーレイ（円形の穴で宇宙を覗かせる） */
#hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 2;
  -webkit-mask-image: radial-gradient(circle at var(--hole-x, 70%) var(--hole-y, 50%), transparent var(--hole-r, 200px), #fff calc(var(--hole-r, 200px) + 1px));
  mask-image: radial-gradient(circle at var(--hole-x, 70%) var(--hole-y, 50%), transparent var(--hole-r, 200px), #fff calc(var(--hole-r, 200px) + 1px));
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hero-title {
  margin-top: clamp(40px, 10vh, 120px);
  margin-bottom: 32px;
}


.hero-title__line {
  display: block;
  font-family: "Zen Kaku Gothic New", "Roboto", sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.hero-sub {
  font-family: "Zen Kaku Gothic New", "Roboto", sans-serif;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 400;
  color: #444;
  letter-spacing: 0.04em;
  line-height: 2;
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeSlideUp 0.8s ease-out 1.2s forwards;
}

.hero-en {
  font-family: "Roboto", sans-serif;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 300;
  color: #aaa;
  letter-spacing: 0.08em;
  line-height: 1.8;
  opacity: 0;
  animation: fadeSlideUp 0.8s ease-out 1.5s forwards;
}

/* --- 宇宙飛行士 --- */
.hero-astronaut {
  position: absolute;
  bottom: 9%;
  right: 14%;
  width: clamp(180px, 22vw, 360px);
  height: auto;
  opacity: 0;
  animation: astroPopUp 0.8s ease-out 0.3s forwards, astroFloat 6s ease-in-out 1.1s infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes astroPopUp {
  0% { opacity: 0; transform: translateY(60px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes astroFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-12px) rotate(2deg); }
  66% { transform: translateY(6px) rotate(-1.5deg); }
}

/* --- FV内の星座（モバイル用、デスクトップ非表示） --- */
.hero-constellation {
  display: none;
}

/* --- 惑星Canvas --- */
.hero-planet {
  position: absolute;
  top: calc(50% + 20px);
  right: -3%;
  transform: translateY(-50%);
  width: clamp(500px, 55vw, 900px);
  height: clamp(500px, 55vw, 900px);
  z-index: 5;
  opacity: 0;
  animation: fadeIn 1s ease-out 0.1s forwards;
  overflow: hidden;
  border-radius: 50%;
}

/* --- FV円内の流れ星（ロード時1回） --- */
.hero-shooting-star {
  position: absolute;
  height: 1px;
  background: linear-gradient(270deg, rgba(255,255,255,0.9), rgba(255,255,255,0));
  border-radius: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.hero-shooting-star--1 {
  top: 30%;
  left: 60%;
  width: 90px;
  transform: rotate(-35deg);
  animation: shoot 6s ease-in 0.8s 1 forwards;
}

.hero-shooting-star--2 {
  top: 55%;
  left: 35%;
  width: 60px;
  transform: rotate(-35deg);
  animation: shoot 7s ease-in 1.5s 1 forwards;
}

#planet-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 4;
  pointer-events: none;
  display: none;
}

.hero-scroll {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  gap: 8px;
  margin-top: auto;
  margin-left: calc((100% - min(1100px, 100%)) / 2 + 1rem);
  opacity: 0;
  animation: fadeIn 1s ease-out 2s forwards;
}

.hero-scroll span {
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: #aaa;
  text-transform: uppercase;
}

.hero-scroll__line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, #bbb, transparent);
  animation: scrollPulse 2.5s ease-in-out infinite alternate;
}

/* ===== intro section（全画面フェード） ===== */
#intro {
  position: relative;
  height: 200vh;
}

.intro-fixed-bg {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, #0d1525 0%, #060c18 40%, #030810 100%);
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  contain: layout style paint;
}

.intro-spacer {
  height: 100vh;
}

.intro-fixed-content {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 72px;           /* ヘッダー高さ分ずらす */
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity;
}

.intro-content {
  position: relative;
  z-index: 10;
}

/* CSS星空 */
.intro-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: opacity;
  contain: layout style;
}

.intro-stars::before,
.intro-stars::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  opacity: 0.4;
}

.intro-stars::before {
  width: 1px;
  height: 1px;
  box-shadow:
    24px 30px #fff, 120px 80px #fff, 250px 50px rgba(255,255,255,0.8),
    380px 120px #fff, 510px 40px rgba(255,255,255,0.6), 640px 90px #fff,
    770px 60px rgba(255,255,255,0.7), 900px 130px #fff, 1030px 25px #fff,
    1160px 110px rgba(255,255,255,0.8), 1290px 70px #fff, 1420px 140px #fff,
    55px 180px rgba(255,255,255,0.6), 185px 220px #fff, 315px 190px #fff,
    445px 250px rgba(255,255,255,0.7), 575px 200px #fff, 705px 260px #fff,
    835px 210px rgba(255,255,255,0.8), 965px 240px #fff, 1095px 190px #fff,
    1225px 270px rgba(255,255,255,0.6), 1355px 230px #fff, 1485px 180px #fff,
    80px 320px #fff, 210px 360px rgba(255,255,255,0.7), 340px 340px #fff,
    470px 380px #fff, 600px 310px rgba(255,255,255,0.8), 730px 370px #fff,
    860px 330px #fff, 990px 390px rgba(255,255,255,0.6), 1120px 350px #fff,
    1250px 310px #fff, 1380px 400px rgba(255,255,255,0.7), 40px 440px #fff,
    170px 480px #fff, 300px 450px rgba(255,255,255,0.8), 430px 500px #fff,
    560px 460px #fff, 690px 520px rgba(255,255,255,0.6), 820px 470px #fff,
    950px 510px #fff, 1080px 440px rgba(255,255,255,0.7), 1210px 490px #fff,
    1340px 530px #fff, 1470px 460px rgba(255,255,255,0.8), 100px 580px #fff,
    230px 620px rgba(255,255,255,0.6), 360px 590px #fff, 490px 640px #fff,
    620px 570px rgba(255,255,255,0.7), 750px 630px #fff, 880px 600px #fff,
    50px 700px #fff, 200px 740px rgba(255,255,255,0.7), 400px 710px #fff,
    600px 760px rgba(255,255,255,0.8), 800px 720px #fff, 1000px 750px #fff,
    1200px 700px rgba(255,255,255,0.6), 1400px 770px #fff,
    1540px 45px rgba(255,255,255,0.8), 1660px 110px #fff, 1780px 70px rgba(255,255,255,0.7),
    1880px 35px #fff, 1560px 195px rgba(255,255,255,0.6), 1700px 160px #fff,
    1830px 220px rgba(255,255,255,0.8), 1920px 180px rgba(255,255,255,0.7),
    1520px 310px #fff, 1650px 340px rgba(255,255,255,0.7), 1790px 290px #fff,
    1900px 360px rgba(255,255,255,0.6), 1570px 440px rgba(255,255,255,0.8),
    1710px 480px #fff, 1840px 450px rgba(255,255,255,0.7), 1550px 570px #fff,
    1680px 600px rgba(255,255,255,0.8), 1810px 560px rgba(255,255,255,0.6),
    1910px 530px #fff, 1530px 680px rgba(255,255,255,0.7), 1670px 720px #fff,
    1800px 690px rgba(255,255,255,0.8), 1890px 750px rgba(255,255,255,0.6);
  animation: starTwinkle 2s ease-in-out infinite alternate;
}

.intro-stars::after {
  width: 2px;
  height: 2px;
  box-shadow:
    80px 60px rgba(200,220,255,0.9), 320px 100px rgba(255,240,220,0.8),
    560px 45px rgba(200,220,255,0.7), 800px 130px rgba(255,240,220,0.9),
    1040px 70px rgba(200,220,255,0.8), 1280px 110px rgba(255,240,220,0.7),
    160px 200px rgba(200,220,255,0.8), 400px 240px rgba(255,240,220,0.9),
    640px 180px rgba(200,220,255,0.7), 880px 260px rgba(255,240,220,0.8),
    1120px 210px rgba(200,220,255,0.9), 1360px 250px rgba(255,240,220,0.7),
    240px 340px rgba(200,220,255,0.9), 480px 370px rgba(255,240,220,0.8),
    720px 310px rgba(200,220,255,0.7), 960px 380px rgba(255,240,220,0.9),
    1200px 350px rgba(200,220,255,0.8), 1440px 330px rgba(255,240,220,0.7),
    50px 470px rgba(200,220,255,0.8), 290px 510px rgba(255,240,220,0.9),
    530px 450px rgba(200,220,255,0.7), 770px 530px rgba(255,240,220,0.8),
    1010px 480px rgba(200,220,255,0.9), 1250px 520px rgba(255,240,220,0.7),
    140px 650px rgba(200,220,255,0.8), 420px 690px rgba(255,240,220,0.9),
    700px 670px rgba(200,220,255,0.7), 980px 710px rgba(255,240,220,0.8),
    1260px 660px rgba(200,220,255,0.9),
    1540px 80px rgba(200,220,255,0.8), 1720px 150px rgba(255,240,220,0.9),
    1880px 100px rgba(200,220,255,0.7), 1600px 280px rgba(255,240,220,0.8),
    1760px 330px rgba(200,220,255,0.9), 1900px 260px rgba(255,240,220,0.7),
    1550px 450px rgba(200,220,255,0.8), 1700px 500px rgba(255,240,220,0.9),
    1850px 420px rgba(200,220,255,0.7), 1580px 620px rgba(255,240,220,0.8),
    1740px 680px rgba(200,220,255,0.9), 1870px 640px rgba(255,240,220,0.7);
  animation: starTwinkle 2.5s ease-in-out 0.5s infinite alternate;
}

.intro-stars--2::before {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  box-shadow:
    200px 80px rgba(180,210,255,0.9), 600px 120px rgba(255,230,200,0.8),
    1000px 60px rgba(180,210,255,0.7), 1400px 140px rgba(255,230,200,0.9),
    400px 280px rgba(180,210,255,0.8), 800px 320px rgba(255,230,200,0.7),
    1200px 250px rgba(180,210,255,0.9), 100px 420px rgba(255,230,200,0.8),
    500px 460px rgba(180,210,255,0.7), 900px 400px rgba(255,230,200,0.9),
    1300px 480px rgba(180,210,255,0.8), 300px 580px rgba(255,230,200,0.7),
    700px 640px rgba(180,210,255,0.9), 1100px 600px rgba(255,230,200,0.8),
    1520px 100px rgba(180,210,255,0.8), 1750px 200px rgba(255,230,200,0.9),
    1880px 350px rgba(180,210,255,0.7), 1620px 480px rgba(255,230,200,0.8),
    1800px 550px rgba(180,210,255,0.9), 1560px 680px rgba(255,230,200,0.7);
  animation: starTwinkle 3s ease-in-out 1s infinite alternate;
}

.intro-stars--2::after { display: none; }

.intro-stars--3::before {
  width: 2px;
  height: 2px;
  box-shadow:
    150px 90px rgba(255,255,255,0.5), 450px 150px rgba(255,255,255,0.4),
    750px 50px rgba(255,255,255,0.6), 1050px 170px rgba(255,255,255,0.5),
    1350px 80px rgba(255,255,255,0.4), 300px 250px rgba(255,255,255,0.6),
    600px 300px rgba(255,255,255,0.5), 900px 220px rgba(255,255,255,0.4),
    1200px 290px rgba(255,255,255,0.6), 100px 380px rgba(255,255,255,0.5),
    400px 430px rgba(255,255,255,0.4), 700px 350px rgba(255,255,255,0.6),
    1000px 410px rgba(255,255,255,0.5), 1300px 370px rgba(255,255,255,0.4),
    200px 550px rgba(255,255,255,0.5), 500px 610px rgba(255,255,255,0.6),
    800px 570px rgba(255,255,255,0.4), 1100px 630px rgba(255,255,255,0.5),
    1520px 120px rgba(255,255,255,0.5), 1700px 250px rgba(255,255,255,0.6),
    1850px 170px rgba(255,255,255,0.4), 1580px 400px rgba(255,255,255,0.5),
    1760px 480px rgba(255,255,255,0.6), 1900px 560px rgba(255,255,255,0.4),
    1640px 640px rgba(255,255,255,0.5), 1820px 710px rgba(255,255,255,0.6);
  animation: starTwinkle 1.5s ease-in-out 0.3s infinite alternate;
}

.intro-stars--3::after { display: none; }

/* 追加星レイヤー（キラキラ感UP） */
.intro-stars--4::before {
  width: 1px;
  height: 1px;
  box-shadow:
    60px 45px #fff, 190px 115px rgba(255,255,255,0.9), 330px 25px #fff,
    470px 95px rgba(255,255,255,0.7), 610px 155px #fff, 740px 35px rgba(255,255,255,0.8),
    880px 125px #fff, 1020px 55px rgba(255,255,255,0.9), 1150px 145px #fff,
    1300px 75px rgba(255,255,255,0.7), 45px 275px #fff, 175px 335px rgba(255,255,255,0.8),
    305px 285px #fff, 435px 345px rgba(255,255,255,0.9), 565px 265px #fff,
    695px 355px rgba(255,255,255,0.7), 825px 295px #fff, 955px 365px rgba(255,255,255,0.8),
    1085px 275px #fff, 1215px 325px rgba(255,255,255,0.9), 1345px 365px #fff,
    110px 455px rgba(255,255,255,0.8), 260px 495px #fff, 420px 425px rgba(255,255,255,0.9),
    580px 505px #fff, 730px 445px rgba(255,255,255,0.7), 890px 475px #fff,
    1050px 525px rgba(255,255,255,0.8), 1190px 435px #fff, 1330px 505px rgba(255,255,255,0.9),
    70px 595px #fff, 230px 635px rgba(255,255,255,0.7), 390px 575px #fff,
    550px 655px rgba(255,255,255,0.8), 710px 605px #fff, 870px 665px rgba(255,255,255,0.9),
    1030px 585px #fff, 1180px 645px rgba(255,255,255,0.7), 1340px 615px #fff,
    1480px 555px rgba(255,255,255,0.8), 160px 725px #fff, 350px 695px rgba(255,255,255,0.9),
    540px 755px #fff, 730px 705px rgba(255,255,255,0.7), 920px 745px #fff,
    1110px 715px rgba(255,255,255,0.8), 1290px 765px #fff, 1460px 695px rgba(255,255,255,0.9),
    1550px 85px rgba(255,255,255,0.8), 1690px 55px #fff, 1820px 135px rgba(255,255,255,0.7),
    1580px 305px #fff, 1730px 265px rgba(255,255,255,0.9), 1870px 385px rgba(255,255,255,0.8),
    1540px 505px rgba(255,255,255,0.7), 1710px 545px #fff, 1860px 475px rgba(255,255,255,0.9),
    1600px 665px rgba(255,255,255,0.8), 1770px 725px #fff, 1900px 655px rgba(255,255,255,0.7);
  animation: starTwinkle 1.8s ease-in-out 0.4s infinite alternate;
}

.intro-stars--4::after {
  width: 1px;
  height: 1px;
  box-shadow:
    95px 160px rgba(255,255,255,0.6), 245px 140px rgba(255,255,255,0.5),
    395px 200px rgba(255,255,255,0.7), 545px 130px rgba(255,255,255,0.6),
    695px 210px rgba(255,255,255,0.5), 845px 150px rgba(255,255,255,0.7),
    995px 195px rgba(255,255,255,0.6), 1145px 165px rgba(255,255,255,0.5),
    1295px 205px rgba(255,255,255,0.7), 1445px 135px rgba(255,255,255,0.6),
    130px 390px rgba(255,255,255,0.5), 280px 410px rgba(255,255,255,0.7),
    430px 370px rgba(255,255,255,0.6), 580px 420px rgba(255,255,255,0.5),
    730px 380px rgba(255,255,255,0.7), 880px 430px rgba(255,255,255,0.6),
    1030px 360px rgba(255,255,255,0.5), 1180px 400px rgba(255,255,255,0.7),
    1330px 440px rgba(255,255,255,0.6), 1480px 390px rgba(255,255,255,0.5),
    65px 540px rgba(255,255,255,0.7), 215px 570px rgba(255,255,255,0.6),
    365px 520px rgba(255,255,255,0.5), 515px 560px rgba(255,255,255,0.7),
    665px 530px rgba(255,255,255,0.6), 815px 580px rgba(255,255,255,0.5),
    1560px 150px rgba(255,255,255,0.6), 1720px 190px rgba(255,255,255,0.5),
    1870px 130px rgba(255,255,255,0.7), 1600px 370px rgba(255,255,255,0.6),
    1780px 410px rgba(255,255,255,0.5), 1900px 350px rgba(255,255,255,0.7),
    1540px 540px rgba(255,255,255,0.6), 1690px 580px rgba(255,255,255,0.5),
    1840px 520px rgba(255,255,255,0.7);
  animation: starTwinkle 2.2s ease-in-out 0.7s infinite alternate;
}

/* うしかい座（Boötes） */
.intro-constellation {
  position: absolute;
  width: clamp(150px, 16vw, 240px);
  height: auto;
  top: 15%;
  right: 16%;
  pointer-events: none;
  opacity: 0.85;
}

/* 星座線 */
.constellation-lines path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1;
  stroke-linecap: round;
}

/* 星 */
.constellation-stars circle {
  fill: #fff;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
  animation: starTwinkle 2s ease-in-out infinite alternate;
}
.constellation-stars circle:nth-child(2) { animation-duration: 1.8s; animation-delay: 0.2s; }
.constellation-stars circle:nth-child(3) { animation-duration: 2.5s; animation-delay: 0.6s; }
.constellation-stars circle:nth-child(4) { animation-duration: 2.2s; animation-delay: 0.4s; }
.constellation-stars circle:nth-child(5) { animation-duration: 1.5s; animation-delay: 0.8s; }
.constellation-stars circle:nth-child(6) { animation-duration: 2.8s; animation-delay: 0.3s; }
.constellation-stars circle:nth-child(7) { animation-duration: 1.9s; animation-delay: 1s; }
.constellation-stars circle:nth-child(8) { animation-duration: 2.1s; animation-delay: 0.5s; }
.constellation-stars circle:nth-child(9) { animation-duration: 2.5s; animation-delay: 0.3s; }
.constellation-stars circle:nth-child(10) { animation-duration: 1.8s; animation-delay: 0.9s; }
.constellation-stars circle:nth-child(11) { animation-duration: 2.4s; animation-delay: 0.1s; }
.constellation-stars circle:nth-child(12) { animation-duration: 1.6s; animation-delay: 0.7s; }
.constellation-stars circle:nth-child(13) { animation-duration: 2.2s; animation-delay: 0.3s; }

/* Arcturus（α星） */
.constellation-stars .star-arcturus {
  fill: rgb(230, 160, 100);
  filter: drop-shadow(0 0 4px rgba(230, 160, 100, 0.8));
  animation-duration: 6s;
  animation-delay: 0s;
}

/* 流れ星 */
.shooting-star {
  position: absolute;
  width: 80px;
  height: 1px;
  background: linear-gradient(270deg, rgba(255,255,255,0.8), rgba(255,255,255,0));
  border-radius: 1px;
  opacity: 0;
  transform: rotate(-35deg);
}

.shooting-star--1 {
  top: 15%;
  left: 20%;
  width: 100px;
  animation: shoot 6s ease-in 1s infinite;
}
.shooting-star--2 {
  top: 35%;
  left: 55%;
  width: 70px;
  animation: shoot 8s ease-in 4s infinite;
}
.shooting-star--3 {
  top: 22%;
  left: 75%;
  width: 90px;
  animation: shoot 7s ease-in 6.5s infinite;
}
.shooting-star--4 {
  top: 50%;
  left: 35%;
  width: 60px;
  animation: shoot 9s ease-in 2.5s infinite;
}

@keyframes shoot {
  0% {
    opacity: 0;
    transform: rotate(-35deg) translateX(0);
  }
  2% {
    opacity: 1;
  }
  6% {
    opacity: 0;
    transform: rotate(-35deg) translateX(-200px);
  }
  100% {
    opacity: 0;
    transform: rotate(-35deg) translateX(-200px);
  }
}

@keyframes starTwinkle {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

/* introテキスト（固定コンテンツ内） */

#intro h2 {
  margin-bottom: 48px;
  letter-spacing: 0.07em;
  color: #fff;
}

.intro-box {
  text-align: center;
}

.intro-box p {
  line-height: 2;
  color: #fff;
}

.intro-box p:nth-of-type(1),
.intro-box p:nth-of-type(2) {
  margin-bottom: 28px;
}

/* ===== service section ===== */
#service {
  position: relative;
  z-index: 100;
  padding: 120px 0;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

#service h2 {
  color: #1a1a1a;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 2rem;
}

.t-box__service {
  text-align: center;
  margin-bottom: 72px;
}

.t-box__service p {
  color: #888;
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: 0.04em;
}

.grid-wrapper__service {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
  margin-bottom: 80px;
}

.grid-box__service {
  padding: 2.5rem 2rem;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  text-align: left;
}

.grid-box__num {
  font-family: "Roboto", "Zen Kaku Gothic New", sans-serif;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #bbb;
  font-weight: 400;
  display: block;
  margin-bottom: 1rem;
}

.grid-box__service h3 {
  font-family: "Roboto", "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(15px, calc(0.9vw + 6px), 18px);
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.grid-box__service .service-sub {
  font-size: clamp(12px, calc(0.7vw + 5px), 14px);
  color: #244268;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-bottom: 0;
}

.illust-box__service {
  margin: 1.5rem 0;
}

.img-placeholder {
  width: 100%;
  height: 180px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-family: "Roboto", "Zen Kaku Gothic New", sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  font-weight: 300;
}

.img-placeholder img{
  width: 100%;
  height: 180px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-family: "Roboto", "Zen Kaku Gothic New", sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  font-weight: 300;
  object-fit: cover;
}

.grid-box__desc {
  font-size: clamp(12px, calc(0.7vw + 5px), 14px);
  color: #666;
  line-height: 2;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.end-text__service {
  text-align: center;
  margin-bottom: 48px;
}

.end-text__service p {
  color: #555;
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: 0.04em;
}

.detail-btn-box {
  text-align: center;
}

.detail-btn-box a {
  display: inline-block;
  background: none;
  border: 1px solid #1a1a1a;
  color: #1a1a1a;
  padding: 1rem 4rem;
  font-family: "Roboto", "Zen Kaku Gothic New", sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.detail-btn-box a:hover {
  background: #244268;
  color: #fff;
  border-color: #244268;
}

/* ===== FAQ preview section ===== */
#faq-preview {
  position: relative;
  z-index: 100;
  padding: 120px 0;
  background: #f8f8f8;
  border-top: 1px solid #e5e5e5;
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

#faq-preview h2 {
  color: #1a1a1a;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 3rem;
}

.faq-preview-list {
  max-width: 780px;
  margin: 0 auto 60px;
}

.faq-preview-item {
  padding: 28px 0;
  border-bottom: 1px solid #e5e5e5;
}

.faq-preview-item:first-child {
  border-top: 1px solid #e5e5e5;
}

.faq-preview-num {
  font-family: "Roboto", "Zen Kaku Gothic New", sans-serif;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #bbb;
  font-weight: 400;
  display: block;
  margin-bottom: 8px;
}

.faq-preview-item h3 {
  font-size: clamp(14px, calc(0.8vw + 6px), 16px);
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0.04em;
  line-height: 1.8;
  margin-bottom: 8px;
}

.faq-preview-item p {
  font-size: clamp(12px, calc(0.7vw + 5px), 14px);
  color: #666;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.02em;
}

/* ===== pricing section ===== */
#pricing {
  position: relative;
  z-index: 100;
  padding: 120px 0;
  background: #f8f8f8;
  border-top: 1px solid #e5e5e5;
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

#pricing h2 {
  color: #1a1a1a;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 2rem;
}

.pricing-lead {
  text-align: center;
  margin-bottom: 72px;
}

.pricing-lead p {
  color: #888;
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: 0.04em;
}

/* 縦スタック */
.pricing-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #e5e5e5;
}

.pricing-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}

.pricing-card__head {
  padding: 3rem 2.5rem;
  border-right: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pricing-card__label {
  font-family: "Roboto", "Zen Kaku Gothic New", sans-serif;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #bbb;
  font-weight: 400;
  display: block;
  margin-bottom: 1rem;
}

.pricing-card__title {
  font-size: clamp(14px, calc(0.8vw + 6px), 17px);
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0.04em;
  line-height: 1.7;
  margin-bottom: 1.2rem;
}

.pricing-card__price {
  font-family: "Roboto", "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(32px, calc(2.5vw + 10px), 42px);
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
  line-height: 1.2;
}

.pricing-card__price span {
  font-size: 14px;
  font-weight: 400;
  color: #888;
  letter-spacing: 0.04em;
}

.pricing-card__note {
  font-size: 12px;
  color: #aaa;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-bottom: 0;
  line-height: 1.8;
}

.pricing-card__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
}

.pricing-card__col {
  padding: 2.5rem;
}

.pricing-card__col:first-child {
  border-right: 1px solid #f0f0f0;
}

.pricing-card__sub {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.pricing-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing-card__list li {
  padding-left: 1.2em;
  position: relative;
  font-size: clamp(12px, calc(0.7vw + 5px), 14px);
  color: #555;
  line-height: 2.4;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.pricing-card__list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: #ccc;
}

.pricing-card__list--option li {
  color: #999;
}

.pricing-card__list--option li::before {
  content: "+";
  color: #ccc;
}

/* ===== company section ===== */
#company {
  position: relative;
  z-index: 100;
  padding: 120px 0;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

#company h2 {
  color: #1a1a1a;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 3rem;
}

.company-table {
  max-width: 780px;
  margin: 0 auto;
  border-top: 1px solid #e5e5e5;
}

.company-table__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  border-bottom: 1px solid #e5e5e5;
}

.company-table__row dt {
  padding: 20px 24px;
  font-size: clamp(12px, calc(0.7vw + 5px), 14px);
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0.04em;
  line-height: 1.8;
  border-right: 1px solid #e5e5e5;
}

.company-table__row dd {
  padding: 20px 24px;
  font-size: clamp(12px, calc(0.7vw + 5px), 14px);
  font-weight: 400;
  color: #666;
  letter-spacing: 0.02em;
  line-height: 1.8;
  margin: 0;
}

/* ===== アニメーション ===== */
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* ===== レスポンシブ ===== */
@media screen and (max-width: 768px) {
  /* --- FV モバイル：縦並び（テキスト → 穴+飛行士 → Scroll） --- */
  #hero-section {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: clamp(72px, 12vh, 100px);
    padding-bottom: 24px;
    overflow: hidden;
  }

  .hero-content {
    height: auto;
    max-width: 100%;
    padding: 0 24px;
    text-align: center;
    flex: none;
  }

  .hero-title {
    margin-top: 0;
    margin-bottom: clamp(8px, 2vh, 20px);
  }

  .hero-title__line {
    font-size: clamp(24px, 7vw, 36px);
  }

  .hero-sub {
    font-size: clamp(11px, 3.2vw, 14px);
    line-height: 1.8;
    margin-bottom: clamp(8px, 2vh, 20px);
  }

  .hero-sub br {
    display: none;
  }

  .hero-en {
    font-size: clamp(10px, 2.8vw, 13px);
  }

  .hero-en br {
    display: none;
  }

  .hero-planet {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 80vw;
    height: 80vw;
    max-width: 400px;
    max-height: 400px;
    margin: clamp(8px, 2vh, 24px) auto 0;
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: 1;
    overflow: visible;
  }

  .hero-constellation {
    display: block;
    position: absolute;
    width: 55%;
    height: auto;
    top: 5%;
    left: 15%;
    opacity: 0.85;
    z-index: 1;
    pointer-events: none;
  }

  .hero-constellation .constellation-lines path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 1;
    stroke-linecap: round;
  }

  .hero-constellation .constellation-stars circle {
    fill: #fff;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
    animation: starTwinkle 2s ease-in-out infinite alternate;
  }

  .hero-constellation .star-arcturus {
    fill: rgb(230, 160, 100);
    filter: drop-shadow(0 0 4px rgba(230, 160, 100, 0.8));
    animation-duration: 6s;
  }

  .hero-astronaut {
    width: clamp(220px, 60vw, 300px);
    bottom: 0;
    right: -15%;
  }

  .hero-scroll {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    padding-top: 16px;
  }

  #planet-canvas {
    display: none !important;
  }

  /* intro テキスト改行調整 */
  .intro-box p br {
    display: none;
  }

  #intro h2 {
    font-size: clamp(14px, 4vw, 18px);
  }

  .grid-wrapper__service {
    grid-template-columns: 1fr;
  }

  #service {
    padding: 80px 0;
  }

  .t-box__service {
    margin-bottom: 48px;
  }

  .grid-wrapper__service {
    margin-bottom: 48px;
  }

  .grid-box__service {
    padding: 2rem 1.5rem;
  }

  .img-placeholder {
    height: 140px;
  }

  #pricing {
    padding: 80px 0;
  }

  .pricing-card {
    grid-template-columns: 1fr;
  }

  .pricing-card__head {
    padding: 2rem 1.5rem;
    border-right: none;
    border-bottom: 1px solid #f0f0f0;
  }

  .pricing-card__body {
    grid-template-columns: 1fr;
  }

  .pricing-card__col {
    padding: 1.5rem;
  }

  .pricing-card__col:first-child {
    border-right: none;
    border-bottom: 1px solid #f0f0f0;
  }

  #company {
    padding: 80px 0;
  }

  .company-table__row {
    grid-template-columns: 120px 1fr;
  }

  .company-table__row dt,
  .company-table__row dd {
    padding: 16px 16px;
  }
}

/* --- 極小画面 (320px〜) --- */
@media screen and (max-width: 374px) {
  #hero-section {
    padding-top: 68px;
    padding-bottom: 16px;
  }

  .hero-content {
    padding: 0 16px;
  }

  .hero-scroll {
    padding-top: 8px;
  }

  .hero-scroll span {
    font-size: 9px;
  }

  .hero-scroll__line {
    height: 20px;
  }

  .hero-planet {
    max-width: 240px;
    max-height: 240px;
  }
}