@charset "UTF-8";
html, body{
  overflow-x: hidden;
}
 body{background:#000;margin:0; padding:0;
  font-family: "dnp-shuei-nmincho-std", sans-serif;
font-weight: 400;font-style: normal;
  font-feature-settings: "palt";letter-spacing: 0.1rem;}
:root { font-size: clamp(12px, 14px + 1.25vw, 28px);}
*{box-sizing: border-box;}
.pc{display:block;}
.sp{display:none;}

ul, li{margin:0; padding:0; list-style:none;}
    img{width:100%; display:block;}
    #copyArea ul{margin:0;padding:0;}
    #copyArea li{ margin:0 ; padding:0; list-style:none;}

  #topArea{position:relative; width:100%;height:auto; padding-top:44%;overflow: hidden; }
  #topArea div{position: absolute; top:0; left:0;z-index:1;}
    #topArea .damyKV{width:100%; position: absolute; top:0; left:0;z-index:1;}
  #topArea .title1{width:42%; top:7.3%; left:30%;z-index:1;}
  #topArea .title2{width:19%; top:39%; left:auto; right:27%; z-index:2;}
  #topArea .title3{width:38%; top:auto; bottom:8%; left:40%; z-index:1;}

  #topArea .top_boruto{width:24%;  top:7%; left:auto; right:-0.5%;z-index:4;}
  #topArea .top_other{width:55.3%;  top:0; left:0;z-index:3;}
  #topArea .top_logo{width:11%; top:4%; left:auto; right:2%; margin:0 auto; z-index:2;}

  .scroll-indicator {margin-top:2rem;
  position: fixed;  bottom: 24px;
  left: 50%; z-index: 100;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  font-family: sans-serif;
  letter-spacing: 0.2em;
  pointer-events: none; 
}
#zenouArea .scroll-indicator{color:#000;bottom:0.4rem;}

.scroll-text {
  display: block;
  font-size: 12px;
  margin-bottom: 6px;
  opacity: 0.8;
}

/* ▼本体 */
.scroll-arrow {
  display: block;
  font-size: 14px;         /* ▼のサイズ */
  line-height: 1;
  animation: scrollDown 1.6s ease-in-out infinite;
}

/* アニメーション */
@keyframes scrollDown {
  0% {
    transform: translateY(0);
    opacity: 0.3;
  }
  50% {
    transform: translateY(8px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0.3;
  }
}

/* ストーリー部分 */
section#copyArea{width:100%; height:100svh;margin:0; background: #000 url(../../_img/story_bg_pc.jpg) center top / contain no-repeat; display:flex; justify-content: center; align-items: center; }
/* 8行＋重ね演出の基準箱 */
#stage{ position:relative; width:60%;mix-blend-mode: screen }

#introArea{
  height:100svh;display:flex;flex-direction: row-reverse;justify-content: center; overflow: hidden; 
}

/* イントロエリア */
#introArea > div { height:100%;}
#introArea .koma1 { width:31%; justify-self:start; position: relative;top:-20%;left: 1%;}
#introArea .koma2 { width:25%; justify-self:center;   position: relative;}
#introArea .koma3 { width:30%; justify-self:start;   position: relative;bottom:-20%;left:-1%;}

#introArea img{  width:100%; height:100%;object-fit: contain;  display:block;}

/* 全能エリア */
#zenouArea{
  position:relative; height:100svh; display:flex; justify-content:center; align-items:center;overflow: hidden;
  background:#000;color:#fff;}
#zenouArea .koma1 {position: absolute; top: 0;left: 0;width: 100%; height: 100%;z-index:0;}
#zenouArea .copy1{position: absolute; top: 27%;left:0; right:0;margin:0 auto; width:4rem; z-index:2;}
#zenouArea .koma2 {position: absolute; top:0;left:0; right: 0; margin:0 auto; width:10rem;z-index:3;}
#zenouArea .koma3 {position: absolute; top: 10%;left:0; right:0%;margin:0 auto; width:20%; z-index:4;}
#zenouArea .koma4 {position: absolute; bottom: 2%;left: 3%;  width: 34%; z-index:5;}

#zenouArea .lastBoruto{position: absolute;left: 0; right:0; margin:0 auto; width:23%; z-index:15;}
#zenouArea .lastLogo{position: absolute;left: 0; right:0; margin:0 auto; width:10%;top: calc(50% + 6rem); z-index:12;}
#zenouArea .last{position: relative;z-index:11;margin-top:-3rem;}
#zenouArea .last ul{width:44%; margin:0 auto;}
#zenouArea img{
  width: 100%; height: 100%;object-fit: cover;}
#zenouArea .whiteOut{position: absolute; top: 0;left: 0; width: 100%; height: 100%; z-index:10;background:#fff;  }

#afterZenou { padding-top: 5rem;background: #fff; }


  /* キャラ紹介エリア */
#charaArea{position:relative; height:auto;background:#FFF; padding-bottom:4rem; display:flex; flex-direction: column; align-items: center; gap:4rem; }

#charaArea ul {margin:0; padding:0; list-style:none; width:100%;}
/* li = 1000px中央のコンテンツ */
#charaArea ul.main li {
  max-width:1000px;
  margin:4rem auto;
  display:flex;
  align-items:center;
  position: relative; /* ← 疑似要素用 */
}

/* icon */
#charaArea ul.main li .icon {
  width:45%;
  position: relative;
  z-index:2;
}
#charaArea ul li .icon img{
  width:100%;
  display:block;
  border:5px solid #000;;
}
/* text */
#charaArea ul.main li .textBlock {
  width:55%;
  position: relative;
  z-index:1;
}
#charaArea ul.main li .textBlock .copy{width:65%;margin:0 auto;}
/* nameをアンカーにする */
#charaArea ul.main li .textBlock .name{
  position: relative;
  display: block;
  height: 1.5rem;          /* 帯の高さ */
  margin: 0.2rem 0 1rem;   /* ここで上下位置＝余白を調整 */
padding: 0.2rem 0 1.8rem;
  z-index: 1;              /* 中身（名前画像）を前に */
}

/* ▼ 帯（画面いっぱい） */
#charaArea ul.main li .textBlock .name::before{
  content:"";
  position:absolute;
  top: 0;
  bottom: 0;

  left: -100vw;   /* ここがポイント */
  right: -100vw;  /* ここがポイント */

  background:#000;
  z-index:-1;
}

/* name画像は中央 */
#charaArea ul.main li .textBlock .name img{
  width:11rem;
  display:block;
  margin:0 auto;
  position: relative;
  z-index: 1;
}
/* 偶数行だけ左右反転 */
#charaArea ul.main li:nth-child(even){
  flex-direction: row-reverse;
}
#charaArea ul.main li .textBlock p{padding:0 0 0 1.5rem ;font-size:0.7rem;line-height:1.2rem; letter-spacing: 0rem;}
#charaArea ul.main li:nth-child(even) p{padding:0 1.5rem 0 0 ;font-size:0.7rem;line-height:1.2rem; letter-spacing: 0rem;}

/* li = 1000px中央のコンテンツ */
#charaArea ul.sub {
  max-width:1000px;
  margin:0 auto;
  display:flex; flex-wrap: wrap;
  align-items:start;
}
/* icon */
#charaArea ul.sub li .icon {
  width:30%;
  position: relative;
  z-index:2;
}
#charaArea ul.sub li .textBlock {
  width:66%;margin:0 0 0 4%;
  position: relative;
  z-index:1;
}
/* icon */
#charaArea ul.sub li{
  width:48%; margin:0 1% 1rem;
  display:flex; flex-wrap: nowrap;
  align-items:center;
  position: relative; /* ← 疑似要素用 */
}
#charaArea ul.sub li .textBlock p{padding:0  ;font-size:0.5rem;line-height:0.8rem; letter-spacing: 0rem;}
#charaArea .icon { position: relative; overflow: hidden; }
#charaArea .icon .tile { backface-visibility: hidden; transform-style: preserve-3d; }

  /* コミックスエリア */
#bookArea{height:auto;background:#FFF; padding-bottom:2rem; display:flex; flex-direction: column; align-items: center;text-align: center; }
#bookArea img{ border:1px solid #000;}
#bookArea ul{max-width:700px; margin:0 auto;}
#bookArea ul li{ margin:2rem 0; }
#bookArea ul li p{ margin:0; padding:0;}
#bookArea ul li p.copy{font-size:1.55rem; line-height:1; margin:1rem 0 0; letter-spacing: 0;}
#bookArea ul li p.title{font-size:0.8rem; line-height:1; margin:0.5rem; letter-spacing: 0;}
#bookArea .shoei{width:10rem;margin:0 auto;}

.btn{width:10rem; display:block; margin:0 auto; background:#000; color:#fff; padding:0.1rem;font-size:0.7rem;text-decoration: none;border:1px solid #000;
  transition:  background-color .25s ease, color .25s ease,border-color .25s ease;}
.btn:hover{background:#FFF; color:#000;}

/* フッター */
footer {
  width: 100%;
  box-sizing: border-box;
  padding: 1rem;
  position: relative;
  z-index: 10;
  background: #000;
}
footer p {
  color: #FFF;
  font-size: 0.5rem;
  line-height: 1;
  text-align: center;
}
footer #snsBtn {
  font-size: 0;
  padding: 0 0 20px;
  text-align: center;
}
footer #snsBtn li {
  line-height: 1.83333;
  letter-spacing: 0;
  display: inline-block
}
footer #snsBtn li + li {
  margin-left: 15px
}
footer #snsBtn img {
  width: 50px;
  height: auto
}