:root{
  --ink:#15315f;
  --deep:#07143c;
  --blue:#77c7ff;
  --aqua:#dff7ff;
  --pink:#ffd7ec;
  --gold:#f5d88b;
  --glass:rgba(255,255,255,.68);
  --glass-strong:rgba(255,255,255,.82);
  --line:rgba(123,195,255,.38);
  --shadow:0 24px 70px rgba(20,80,160,.18);
  --shadow2:0 36px 110px rgba(20,70,160,.24)
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',system-ui,sans-serif;
  color:var(--ink);
  background:#f6fcff;
  overflow-x:hidden
}

a{
  color:inherit
}

.wrap{
  width:min(1180px,92vw);
  margin:auto
}


/* ========================================
   Layered background system
======================================== */

.stars{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-8;
  background:
    radial-gradient(
      circle at 62% 42%,
      rgba(255,255,255,.9),
      transparent 0 16%,
      transparent 34%
    ),
    radial-gradient(
      circle at 12% 9%,
      rgba(117,205,255,.42),
      transparent 27%
    ),
    radial-gradient(
      circle at 85% 12%,
      rgba(255,210,235,.46),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #07143d 0%,
      #123b7d 32%,
      #dff5ff 74%,
      #fff 100%
    )
}

.stars:before,
.stars:after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    url('../img/bg/spark-field.png'),
    radial-gradient(#fff 1px,transparent 1.5px),
    radial-gradient(rgba(136,213,255,.72) 1px,transparent 1.5px);
  background-size:
    760px 760px,
    94px 94px,
    148px 148px;
  background-position:
    0 0,
    20px 10px,
    60px 42px;
  animation:starDrift 42s linear infinite;
  opacity:.82;
  pointer-events:none
}

.stars:after{
  filter:blur(1px);
  opacity:.45;
  animation-duration:70s;
  transform:scale(1.08)
}

.aurora{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-7;
  overflow:hidden
}

.aurora:before{
  content:"";
  position:absolute;
  left:-18%;
  right:-18%;
  top:4%;
  height:62vh;
  background:url('../img/bg/aurora-ribbon.png') center/100% 100% no-repeat;
  opacity:.72;
  filter:blur(2px);
  animation:auroraFloat 18s ease-in-out infinite alternate;
  pointer-events:none
}

.aurora:after{
  content:"";
  position:absolute;
  inset:0;
  background:url('../img/bg/glass-prisms.png') right 7% top 12%/58vw auto no-repeat;
  opacity:.28;
  animation:prismFloat 20s ease-in-out infinite alternate;
  pointer-events:none
}

body:before,
body:after{
  content:"";
  position:fixed;
  pointer-events:none;
  z-index:-6;
  opacity:.72;
  filter:blur(.2px)
}

body:before{
  left:-160px;
  bottom:7vh;
  width:56vw;
  height:26vw;
  background:url('../img/bg/cloud-soft-01.png') center/contain no-repeat;
  animation:cloudOne 56s linear infinite
}

body:after{
  right:-140px;
  top:47vh;
  width:44vw;
  height:22vw;
  background:url('../img/bg/cloud-soft-02.png') center/contain no-repeat;
  opacity:.48;
  animation:cloudTwo 68s linear infinite
}


/* ========================================
   Animations
======================================== */

@keyframes starDrift{
  to{
    background-position:
      0 -760px,
      20px -84px,
      60px -106px
  }
}

@keyframes auroraFloat{
  0%{
    transform:translate3d(-2%,0,0) rotate(-3deg) scale(1.02)
  }
  100%{
    transform:translate3d(3%,5%,0) rotate(2deg) scale(1.08)
  }
}

@keyframes prismFloat{
  to{
    transform:translate3d(-2%,3%,0);
    opacity:.36
  }
}

@keyframes cloudOne{
  0%{
    transform:translateX(0)
  }
  50%{
    transform:translateX(110px)
  }
  100%{
    transform:translateX(0)
  }
}

@keyframes cloudTwo{
  0%{
    transform:translateX(0)
  }
  50%{
    transform:translateX(-120px)
  }
  100%{
    transform:translateX(0)
  }
}

@keyframes floatUp{
  0%,100%{
    transform:translateY(0)
  }
  50%{
    transform:translateY(-12px)
  }
}

@keyframes softPulse{
  0%,100%{
    opacity:.55;
    transform:scale(1)
  }
  50%{
    opacity:.82;
    transform:scale(1.05)
  }
}


/* ========================================
   Navigation
======================================== */

.nav{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(18px);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.72),
      rgba(255,255,255,.52)
    );
  border-bottom:1px solid rgba(255,255,255,.5);
  box-shadow:0 8px 36px rgba(8,40,100,.08)
}

.nav .inner{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.brand{
  font-family:serif;
  font-size:29px;
  letter-spacing:.08em;
  color:#3269ba;
  text-decoration:none;
  text-shadow:0 0 24px rgba(255,255,255,.75)
}

.brand small{
  display:block;
  font-family:sans-serif;
  font-size:10px;
  letter-spacing:.24em
}

.menu{
  display:flex;
  gap:22px;
  align-items:center
}

.menu a{
  text-decoration:none;
  color:var(--deep);
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em
}

.menu a:hover{
  color:#2c9ce8
}


/* ========================================
   Hero
======================================== */

.hero{
  min-height:calc(100vh - 76px);
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:36px;
  align-items:center;
  padding:48px 0 80px;
  position:relative
}

.hero:before{
  content:"";
  position:absolute;
  inset:8% -8% 1% 20%;
  background:
    radial-gradient(
      circle at 55% 48%,
      rgba(255,255,255,.92) 0 20%,
      rgba(152,221,255,.24) 30%,
      rgba(255,210,235,.16) 46%,
      transparent 63%
    );
  z-index:-1;
  animation:softPulse 8s ease-in-out infinite;
  pointer-events:none
}

.hero:after{
  content:"";
  position:absolute;
  inset:10% -6% 6% 46%;
  background:url('../img/bg/glass-prisms.png') center/cover no-repeat;
  opacity:.22;
  z-index:-1;
  mix-blend-mode:screen;
  pointer-events:none
}

.hero-copy{
  position:relative;
  z-index:2
}

.hero-copy .kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.74);
  padding:9px 16px;
  border-radius:999px;
  font-weight:900;
  color:#397fd1;
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px)
}

h1{
  font-family:serif;
  font-size:clamp(42px,7vw,92px);
  line-height:1.05;
  margin:26px 0 18px;
  color:#fff;
  text-shadow:
    0 2px 0 rgba(79,136,205,.32),
    0 0 22px rgba(52,167,255,.65),
    0 18px 50px rgba(5,35,95,.34)
}

.lead{
  font-size:18px;
  line-height:2;
  font-weight:800;
  color:#15315f;
  text-shadow:0 1px 18px rgba(255,255,255,.9)
}


/* ========================================
   Buttons
======================================== */

.btns{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:28px;
  position:relative;
  z-index:20
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.86);
  color:#1d5db2;
  backdrop-filter:blur(12px);
  transition:.22s;
  position:relative;
  z-index:21;
  pointer-events:auto;
  cursor:pointer
}

.btn:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow2)
}

.btn.primary{
  background:linear-gradient(135deg,#3ca6ff,#7bdcff);
  color:white
}


/* ========================================
   Hero Art
======================================== */

.hero-art{
  position:relative;
  min-height:720px;
  display:flex;
  align-items:flex-end;
  justify-content:center
}

.halo{
  position:absolute;
  width:min(720px,78vw);
  height:min(720px,78vw);
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.96) 0 35%,
      rgba(146,214,255,.24) 42% 60%,
      rgba(255,210,235,.14) 61%,
      transparent 68%
    );
  box-shadow:
    inset 0 0 90px rgba(118,194,255,.28),
    0 0 120px rgba(88,189,255,.22);
  bottom:36px;
  animation:softPulse 10s ease-in-out infinite;
  pointer-events:none
}

.hero-art:before{
  content:"";
  position:absolute;
  inset:auto 3% 0 3%;
  height:180px;
  background:url('../img/bg/cloud-soft-01.png') center/contain no-repeat;
  opacity:.65;
  z-index:1;
  pointer-events:none
}

.hero-art img{
  position:relative;
  z-index:2;
  max-height:720px;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 35px 35px rgba(50,100,150,.25))
}

.float-card{
  position:absolute;
  right:0;
  bottom:74px;
  width:300px;
  z-index:3;
  animation:floatUp 7s ease-in-out infinite
}


/* ========================================
   Glass / Cards
======================================== */

.glass{
  background:var(--glass);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:var(--shadow);
  border-radius:28px;
  backdrop-filter:blur(18px)
}

.card{
  padding:24px
}

.section{
  padding:86px 0;
  position:relative
}

.section-title{
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:28px
}

h2{
  font-family:serif;
  font-size:clamp(32px,4vw,54px);
  margin:0;
  color:#2866bb;
  text-shadow:0 10px 34px rgba(255,255,255,.9)
}

.sub{
  font-weight:900;
  color:#73a6d8;
  letter-spacing:.2em
}

.grid{
  display:grid;
  gap:22px
}

.grid.two{
  grid-template-columns:1fr 1fr
}

.grid.three{
  grid-template-columns:repeat(3,1fr)
}

.grid.four{
  grid-template-columns:repeat(4,1fr)
}

.panel{
  padding:28px;
  border-radius:30px;
  background:var(--glass-strong);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
  position:relative;
  overflow:hidden
}

.panel:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.42),
      transparent 32%,
      rgba(125,205,255,.12)
    );
  pointer-events:none
}

.panel h3{
  font-size:24px;
  margin:0 0 12px;
  color:#275fb1;
  position:relative
}

.panel p,
.panel li{
  line-height:1.9;
  position:relative
}

.tag{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:#e9f7ff;
  color:#3378bf;
  font-weight:800;
  font-size:12px;
  margin:4px;
  position:relative
}


/* ========================================
   Images
======================================== */

.image-stage{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:420px;
  background:
    radial-gradient(
      circle at 50% 40%,
      white,
      rgba(221,246,255,.75)
    );
  border-radius:28px;
  overflow:hidden
}

.image-stage img{
  max-height:520px;
  max-width:100%;
  object-fit:contain
}

.thumbs{
  display:grid;
  grid-template-columns:
    repeat(auto-fit,minmax(140px,1fr));
  gap:18px
}

.thumb{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.72);
  border-radius:24px;
  min-height:230px;
  display:flex;
  align-items:end;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 12px 38px rgba(42,102,180,.12);
  transition:.25s;
  backdrop-filter:blur(12px);
  position:relative
}

.thumb:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(255,255,255,.96),
      rgba(129,207,255,.17) 56%,
      transparent
    );
  pointer-events:none
}

.thumb:hover{
  transform:translateY(-6px)
}

.thumb img{
  position:relative;
  max-height:260px;
  max-width:100%;
  object-fit:contain
}


/* ========================================
   News
======================================== */

.news{
  display:grid;
  gap:12px
}

.news-row{
  display:grid;
  grid-template-columns:120px 80px 1fr;
  gap:18px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  align-items:center
}

.badge{
  background:#86ccff;
  color:white;
  border-radius:999px;
  padding:5px 10px;
  font-size:11px;
  font-weight:900;
  text-align:center
}


/* ========================================
   Links
======================================== */

.link-grid{
  display:grid;
  grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));
  gap:14px
}

.link-card{
  padding:18px;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.84);
  border-radius:20px;
  text-decoration:none;
  color:var(--ink);
  font-weight:900;
  display:flex;
  justify-content:space-between;
  box-shadow:0 10px 30px rgba(42,102,180,.10);
  backdrop-filter:blur(10px);
  transition:.2s;
  position:relative;
  z-index:10;
  pointer-events:auto
}

.link-card:hover{
  transform:translateY(-3px)
}


/* ========================================
   Footer
======================================== */

.footer{
  background:
    linear-gradient(
      180deg,
      rgba(223,244,255,.82),
      rgba(199,234,255,.94)
    );
  padding:44px 0;
  text-align:center;
  color:#356ba8;
  border-top:1px solid rgba(255,255,255,.7)
}


/* ========================================
   Page Hero
======================================== */

.page-hero{
  padding:72px 0 36px
}

.page-hero .panel{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  align-items:center
}

.page-hero img{
  max-height:420px;
  justify-self:center
}


/* ========================================
   Movie Box
======================================== */

.movie-box{
  aspect-ratio:16/9;
  border-radius:24px;
  background:
    linear-gradient(
      135deg,
      #17417d,
      #6dbfff
    );
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-size:52px;
  box-shadow:
    inset 0 0 80px rgba(255,255,255,.15),
    var(--shadow);
  position:relative;
  overflow:hidden
}

.movie-box:before{
  content:"";
  position:absolute;
  inset:0;
  background:url('../img/bg/spark-field.png') center/cover;
  opacity:.22;
  pointer-events:none
}


/* ========================================
   Responsive
======================================== */

@media(max-width:900px){

  .menu{
    display:none
  }

  .hero{
    grid-template-columns:1fr;
    padding-top:28px
  }

  .hero-art{
    min-height:540px
  }

  .hero-art img{
    max-height:540px
  }

  .float-card{
    position:relative;
    right:auto;
    bottom:auto;
    width:auto;
    margin-top:-60px
  }

  .grid.two,
  .grid.three,
  .grid.four,
  .page-hero .panel{
    grid-template-columns:1fr
  }

  .news-row{
    grid-template-columns:1fr
  }

  .hero-copy{
    text-align:center
  }

  .btns{
    justify-content:center
  }

  h1{
    color:#244f9e;
    text-shadow:
      0 0 30px rgba(255,255,255,.9),
      0 16px 42px rgba(66,151,230,.32)
  }

  body:before{
    width:88vw;
    height:42vw
  }

  body:after{
    width:72vw;
    height:36vw
  }
}


@media(max-width:520px){

  .brand{
    font-size:23px
  }

  .hero-art{
    min-height:460px
  }

  .hero-art img{
    max-height:470px
  }

  .section{
    padding:56px 0
  }

  .card,
  .panel{
    padding:20px
  }

  h1{
    font-size:46px
  }

  .aurora:before{
    height:50vh;
    top:8%;
    opacity:.55
  }
}


/* ========================================
   Image protection
   Deterrent only, not absolute prevention
======================================== */

img{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  pointer-events:none
}


/*
  ??????????
*/
.hero-art,
.thumb,
.image-stage{
  position:relative
}


/*
  ????????

  ??:
  .page-hero .panel::after ??????
  YouTube???????????????
*/
.hero-art::after,
.thumb::after,
.image-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  background:transparent
}


/*
  Hero??????????
  ????????????
*/
.hero-art .float-card{
  pointer-events:auto;
  position:relative;
  z-index:7
}

.hero-art .float-card *{
  pointer-events:auto
}


/* ========================================
   Click safety
   ??????????????????
======================================== */

a,
button,
.btn,
.btns,
.link-card,
.menu,
.menu a{
  pointer-events:auto
}

.page-hero .btns{
  position:relative;
  z-index:20
}

.page-hero .btn{
  position:relative;
  z-index:21;
  pointer-events:auto
}

.movie-panel,
.movie-panel * {
  pointer-events: auto !important;
}

.movie-panel::before,
.movie-panel::after {
  pointer-events: none !important;
}

.youtube-link,
.movie-link {
  position: relative !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.movie-link {
  text-decoration: none;
}
/* ========================================
   Final click fix for movie page
   2026-07-06
======================================== */
.movie-panel{
  position:relative !important;
  overflow:hidden;
}

.movie-panel,
.movie-panel .movie-copy,
.movie-panel .btns,
.movie-panel .btn,
.movie-panel .movie-box,
.movie-panel .movie-box span{
  pointer-events:auto !important;
}

.movie-panel::before,
.movie-panel::after,
.movie-box::before,
.movie-box::after{
  pointer-events:none !important;
}

.movie-copy{
  position:relative !important;
  z-index:30 !important;
}

.youtube-link{
  position:relative !important;
  z-index:999999 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

.movie-link{
  position:relative !important;
  z-index:25 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  text-decoration:none !important;
}

.movie-link span{
  position:relative;
  z-index:2;
  pointer-events:none;
}

/* 画像保護レイヤーは画像エリアだけに限定。通常ページ内リンクにはかけない */
.page-hero .panel::after,
.movie-panel::after{
  content:none !important;
  display:none !important;
}