@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#0B0C0E;
  --ink-2:#18191C;
  --steel:#6E7480;
  --silver:#C9CDD3;
  --silver-2:#9AA0A8;
  --paper:#ECEBE7;
  --paper-2:#D9D8D3;
  --line:#2A2C30;
  --white:#FFFFFF;
  --accent:#C1272D;
  --accent-dim:#5A1518;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:90px;}
body{font-family:'Noto Sans JP',sans-serif;background:var(--paper);color:var(--ink);line-height:1.7;overflow-x:hidden;}
h1,h2,h3,.disp{font-family:'Oswald','Noto Sans JP',sans-serif;letter-spacing:.02em;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

.contours{position:absolute;inset:0;background-image:
  repeating-radial-gradient(circle at 78% 30%, transparent 0 34px, rgba(255,255,255,.035) 34px 36px),
  repeating-radial-gradient(circle at 78% 30%, transparent 0 70px, rgba(255,255,255,.03) 70px 72px);
  pointer-events:none;}

header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(11,12,14,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.08);}
.navrow{display:flex;align-items:center;justify-content:space-between;height:72px;color:var(--white);}
.brand{display:flex;align-items:center;gap:10px;font-size:15px;}
.brand .mark{width:34px;height:34px;border-radius:2px;display:flex;align-items:center;justify-content:center;font-family:'Oswald';font-weight:700;color:var(--ink);font-size:16px;position:relative;z-index:2;}
.brand small{display:block;font-size:10px;letter-spacing:.15em;color:var(--silver-2);font-weight:400;margin-top:1px;}

.mark-wrap{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mark-ring{position:absolute;top:0;left:0;width:44px;height:44px;transform:rotate(-90deg);}
.mark-ring circle{
  fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:119.4;
  stroke-dashoffset:119.4;
  animation:draw-ring 3.2s ease-in-out infinite;
  filter:drop-shadow(0 0 3px rgba(193,39,45,.7));
}
@keyframes draw-ring{
  0%{stroke-dashoffset:119.4;opacity:0;}
  8%{opacity:1;}
  55%{stroke-dashoffset:0;opacity:1;}
  75%{stroke-dashoffset:0;opacity:1;}
  95%{opacity:0;}
  100%{stroke-dashoffset:119.4;opacity:0;}
}

.quick-links{display:flex;align-items:center;gap:10px;}

.burger{width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;}
.burger span{display:block;width:24px;height:2px;background:var(--white);transition:transform .25s,opacity .25s;}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.is-open span:nth-child(2){opacity:0;}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{position:fixed;inset:0;z-index:99;background:rgba(11,12,14,.97);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:0 24px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;}
.mobile-menu.is-open{opacity:1;transform:translateY(0);pointer-events:auto;}
.mobile-menu nav{display:flex;flex-direction:column;gap:2px;width:100%;max-width:1120px;margin:0 auto;}
.mobile-menu nav a{
  color:var(--white);font-family:'Oswald';font-size:clamp(28px,6vw,44px);font-weight:600;
  padding:16px 0;border-bottom:1px solid var(--line);letter-spacing:.02em;display:flex;align-items:center;justify-content:space-between;
}
.mobile-menu nav a .idx{font-family:'JetBrains Mono';font-size:13px;color:var(--steel);}
.mobile-menu nav a.is-entry{color:var(--accent);}

.hero{
  position:relative;
  color:var(--white);
  overflow:hidden;
  padding: 400px 0px 50px 0px;
}
.hero-photo{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:var(--ink); /* 動画読み込み前の下地色 */
   z-index:0;
}
.hero-photo::before{
  /* 文字を読みやすくするためのグラデーション（動画の上に重ねる） */
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(100deg, rgba(11,12,14,.92) 18%, rgba(11,12,14,.55) 55%, rgba(11,12,14,.15) 100%);
}
.hero-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-hose{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  pointer-events:none;
}
.hero-hose #hosePath{
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  animation:hoseDraw 1.5s cubic-bezier(.65,0,.35,1) forwards .3s;
}
@keyframes hoseDraw{ to{ stroke-dashoffset:0; } }
.hero h1{overflow:hidden;}
.hero h1 .line{
  display:block;
  opacity:0;
  transform:translateY(30px);
  animation:lineIn .85s cubic-bezier(.16,.84,.44,1) forwards;
}
.hero h1 .line-1{animation-delay:1.0s;}
.hero h1 .line-2{animation-delay:1.25s;}
@keyframes lineIn{ to{opacity:1;transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){
  .hero-hose #hosePath{animation:none;}
  .hero h1 .line{animation:none;opacity:1;transform:none;}
}
.hero-grid{position:relative;z-index:2;text-align:left;display:flex;flex-direction:column;flex:1;justify-content:flex-end;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono';font-size:12px;letter-spacing:.12em;color:var(--silver);border:1px solid var(--accent-dim);padding:5px 12px;border-radius:20px;margin-bottom:22px;}
.eyebrow::before{content:"";width:6px;height:6px;background:var(--accent);border-radius:50%;animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}
.hero h1{font-size:clamp(34px,5vw,56px);font-weight:700;line-height:1.28;margin-bottom:22px;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero p{font-size:15px;color:#9EA4AC;max-width:340px;margin-bottom:34px;}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;}
.btn-primary{background:var(--silver);color:var(--ink);padding:15px 28px;font-size:13px;font-weight:700;letter-spacing:.05em;border-radius:2px;display:inline-flex;align-items:center;gap:10px;}
.btn-accent{background:var(--accent);color:var(--white);padding:15px 28px;font-size:13px;font-weight:700;letter-spacing:.05em;border-radius:2px;display:inline-flex;align-items:center;gap:10px;justify-content:center;}

section{padding:86px 0;}

.reveal{

opacity:0;
transform:translateY(60px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;
transform:none;

}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal{
      animation: reveal-in ease-out both;
      animation-timeline: view();
      animation-range: entry 0% cover 55%;
    }
  }
}
@keyframes reveal-in{
  from{opacity:0;transform:translateY(44px);}
  to{opacity:1;transform:translateY(0);}
}
.sec-head{margin-bottom:44px;max-width:100%;}
.sec-tag{font-family:'JetBrains Mono';font-size:12px;color:var(--steel);letter-spacing:.1em;margin-bottom:10px;}
.sec-tag::before{content:"";display:inline-block;width:14px;height:1px;background:var(--accent);margin-right:8px;vertical-align:middle;}
.video-dark .sec-tag, .entry-section .sec-tag{color:var(--silver);}
.sec-head h2{font-size:clamp(26px,3.4vw,36px);font-weight:600;color:var(--ink);}
.sec-head p{color:var(--steel);margin-top:12px;font-size:14.5px;}
.video-dark .sec-head p, .entry-section .sec-head p{color:#B9BFC8;}

.media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:24px;justify-content:flex-start;}
@media(max-width:660px){.media-grid{grid-template-columns:minmax(0,300px);}}
.media-card{background:var(--white);border:1px solid var(--paper-2);border-radius:4px;overflow:hidden;display:block;}
.media-cover{aspect-ratio:3/3.6;overflow:hidden;background:var(--paper);}
.media-cover img{width:100%;height:100%;object-fit:contain;display:block;}
.media-meta{padding:20px 22px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--paper-2);}
.media-meta .name{font-size:13px;font-weight:700;}
.media-meta .spec{font-size:11px;color:var(--steel);font-family:'JetBrains Mono';margin-top:3px;}
.meta-arrow{width:28px;height:28px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink);flex-shrink:0;transition:background .2s ease,color .2s ease;}
.media-card:hover .meta-arrow{background:var(--accent);color:var(--white);}

.video-dark{background:var(--ink);color:var(--white);}
.hero-video{display:block;position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:linear-gradient(120deg,var(--ink-2),#2E3238 60%,var(--ink));margin-bottom:40px;border:1px solid var(--line);}
.hero-video .thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero-video::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(11,12,14,.9) 0%,rgba(11,12,14,.15) 45%,rgba(11,12,14,.35) 100%);pointer-events:none;}
.hero-video .tag{position:absolute;top:20px;left:20px;z-index:2;font-family:'JetBrains Mono';font-size:11px;background:var(--accent);color:var(--white);padding:4px 10px;border-radius:2px;letter-spacing:.08em;}
.playbtn{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;}
.playbtn::after{content:"";border-left:14px solid var(--white);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px;}
.hero-video .vinfo{position:absolute;left:30px;bottom:26px;right:30px;z-index:2;}
.hero-video .vinfo .vtitle{font-family:'Oswald';font-size:20px;font-weight:600;}
.hero-video .vinfo .vspec{font-family:'JetBrains Mono';font-size:11px;color:var(--silver-2);margin-top:4px;}

.shorts-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:760px){.shorts-row{grid-template-columns:repeat(2,1fr);}}
.short-card{aspect-ratio:9/16;border-radius:6px;position:relative;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;padding:14px;background:linear-gradient(160deg,#f5f5f5,var(--ink));}
.short-card .thumb{position:absolute;top: 50%;left:50%;transform:translate(-50%,-50%);max-width: 100%;max-height:100%;width: auto;height: auto;z-index:0;}
.short-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(11,12,14,.85) 0%,rgba(11,12,14,.05) 40%,rgba(11,12,14,.4) 100%);pointer-events:none;}
.short-card .s-top,
.short-card .s-play,
.short-card .s-bottom{position:relative;z-index:2;}
.short-card .s-top{display:flex;justify-content:space-between;font-family:'JetBrains Mono';font-size:10px;color:var(--silver-2);}
.short-card .s-play{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.4);align-self:center;display:flex;align-items:center;justify-content:center;}
.short-card .s-play::after{content:"";border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px;}
.short-card .s-bottom .s-title{font-size:12.5px;font-weight:700;line-height:1.4;}
.short-card .s-bottom .s-dur{font-family:'JetBrains Mono';font-size:10px;color:var(--silver-2);margin-top:6px;}

.stations{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media(max-width:900px){.stations{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.stations{grid-template-columns:1fr;}}
.station-card{background:var(--white);border:1px solid var(--paper-2);padding:22px;border-radius:4px;}
.station-card .s-num{font-family:'JetBrains Mono';font-size:11px;color:var(--steel);}
.station-card h4{font-family:'Oswald';font-size:18px;margin:8px 0 10px;}
.station-card p{font-size:12.5px;color:var(--steel);}
.station-card.hq-card{background:var(--ink);border-color:var(--ink);position:relative;overflow:hidden;}
.station-card.hq-card::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--accent);}
.station-card.hq-card .s-num{color:var(--accent);}
.station-card.hq-card h4{color:var(--white);}
.station-card.hq-card p{color:var(--silver-2);}

.entry-section{background:var(--ink);color:var(--white);position:relative;}
.entry-panel{border:1px solid var(--line);border-radius:6px;padding:44px;background:rgba(255,255,255,.02);display:grid;grid-template-columns:1.1fr .9fr;gap:44px;}
@media(max-width:760px){.entry-panel{grid-template-columns:1fr;padding:28px;}}
.entry-steps{list-style:none;counter-reset:step;}
.entry-steps li{counter-increment:step;padding:16px 0 16px 42px;position:relative;border-bottom:1px solid var(--line);font-size:13.5px;color:#C4C7CC;}
.entry-steps li:last-child{border-bottom:none;}
.entry-steps li::before{content:counter(step);position:absolute;left:0;top:14px;width:26px;height:26px;border:1px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono';font-size:11px;color:var(--accent);}
.entry-cta{display:flex;flex-direction:column;justify-content:center;gap:18px;}
.entry-cta .ec-label{font-family:'JetBrains Mono';font-size:11px;color:var(--silver-2);letter-spacing:.1em;}
.entry-cta .ec-title{font-family:'Oswald';font-size:24px;font-weight:600;}
.entry-cta .ec-note{font-size:12.5px;color:#B9BFC8;}
.entry-cta .btn-primary{justify-content:center;}
.entry-left{display:flex;flex-direction:column;}
.entry-info-btn{align-self:flex-start;margin-top:22px;}
.btn-entry{margin-right: 20px; margin-bottom: 10px;}
@media(max-width:760px){.entry-info-btn{align-self:stretch;justify-content:center;}}

.float-cta{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:90;
  display:flex;
  flex-direction:row;
  gap:10px;
  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
  transition:opacity .45s ease, transform .45s ease;
}
.float-cta.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.float-cta a{
  font-size:12.5px;
  padding:13px 22px;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}
@media(max-width:560px){
  .float-cta{right:16px;bottom:16px;}
  .float-cta a{padding:11px 18px;font-size:12px;}
}

footer{background:var(--paper-2);color:var(--steel);padding:50px 0 30px;font-size:12.5px;border-top:1px solid var(--line);}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:30px;}
.foot-grid .fb{font-family:'Oswald';color:var(--ink);font-size:18px;margin-bottom:8px;}
.footer-btn{font-size:12px;padding:10px 20px;}
.footer-btn.btn-primary{border:1px solid var(--steel);}
footer .copy{border-top:1px solid #C7C6C1;padding-top:20px;font-family:'JetBrains Mono';font-size:11px;}

.btn-primary,
.btn-accent{
    position:relative;
    overflow:hidden;
}

.btn-primary::before,
.btn-accent::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:70%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );
    transition:.8s;
}
/* ボタンが光る */
.btn-primary:hover::before,
.btn-accent:hover::before{
    left:130%;
}
/* カードが浮く */
.station-card,
.media-card{
    transition:.35s;
}

.station-card:hover,
.media-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.18);
}
/* Hero画像がゆっくりズーム */
.hero-bg-video{
    animation:heroZoom 18s ease-in-out infinite alternate;
}

@keyframes heroZoom{

0%{
transform:scale(1);
}

100%{
transform:scale(1.08);
}

}
/* 背景に流れる線 */
.hero::before{

content:"";
position:absolute;
inset:0;

background:

repeating-linear-gradient(
90deg,
transparent 0,
transparent 80px,
rgba(255,255,255,.03) 81px
);

animation:gridMove 12s linear infinite;

}

@keyframes gridMove{

from{

transform:translateX(0);

}

to{

transform:translateX(80px);

}

}
/* ボタンが跳ねる */
.btn-primary:hover,
.btn-accent:hover{

transform:translateY(-4px) scale(1.03);

box-shadow:0 10px 25px rgba(0,0,0,.25);

}
.hero::after{
    content:"";
    position:absolute;

    width:450px;
    height:450px;

    left:calc(var(--x,50%) - 225px);
    top:calc(var(--y,50%) - 225px);

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,255,255,.35) 0%,
        rgba(255,255,255,.15) 35%,
        transparent 70%
    );

    filter:blur(40px);

    pointer-events:none;

    z-index:1;

    transition:left .08s linear,top .08s linear;
}