@charset "UTF-8";
@media (max-width: 500px),
       (min-width: 501px) and (max-width: 1024px) and (orientation: portrait) {
  .pc{display:none;}
  .sp{display:block;}

  #topArea{position:relative; width:100%;height:auto; padding-top:140%;overflow: hidden; }
  #topArea div{position: absolute; top:0; left:0;z-index:1;}
  #topArea .title1{width:74%; top:0; left:0;z-index:11;}
  #topArea .title2{width:35%; top:34vw; left:auto; right:20.5vw; z-index:2;}
  #topArea .title3{width:70%; top:78vw; left:auto; right:0; z-index:5;}
  #topArea .top_boruto{width:25%;  top:18vw; left:auto; right:0;z-index:4;}
  #topArea .top_other{width:73.3%;  top:20vw; left:0;z-index:3;}
  #topArea .top_logo{width:65%; top:auto;bottom:0; left:0; right:0; margin:0 auto; z-index:2;}

.scroll-text {font-size: 2vw;   margin-bottom:0;}
 .scroll-arrow{font-size: 2vw}
   .scroll-indicator {bottom: 3vw;}

section#copyArea{ background: #000 url(../../_img/story_bg_sp.jpg) center top / cover no-repeat; }
#stage{ position:relative; width:100%; }

/* イントロエリア */
#introArea{
  height:100svh;display:grid;
  grid-template-rows: repeat(3, 1fr); overflow: hidden; 
}

#introArea > div { height:100%; }
#introArea .koma1 { width:75%; justify-self:center; top:-2%;}
#introArea .koma2 { width:60%; justify-self:center;   position: relative;
  top: -6vw;}
#introArea .koma3 { width:75%; justify-self:center;   position: relative;
  top: -6vw; left:auto;}
#introArea img{  width:100%; height:100%;object-fit: contain;  display:block;}

#zenouArea .koma2 {position: absolute; top:0;left:0; right: 0; margin:0 auto; width:45%;z-index:3;}
#zenouArea .koma3 {position: absolute; top: 1%;right: 2%;width: 33%; z-index:4;}
#zenouArea .koma4 {position: absolute; bottom: 1%;left: 0; right:0; margin:0 auto; width: 75%; z-index:5;}
#zenouArea .copy1{position: absolute; top: 27%;left:0; right:0;margin:0 auto; width: 25%; z-index:2;}
#zenouArea .lastBoruto{position: absolute;left: 0; right:0; margin:0 auto; width:70%; z-index:11;}
#zenouArea .lastLogo{width:40%;z-index:12;top: calc(50% + 25%); z-index:12;}
#zenouArea .lastLogo img{
  width: 100%; height: 100%;object-fit: contain;}
#zenouArea .last{position: relative;z-index:11;}
#zenouArea .last ul{width:100%; margin:0 auto;}

/* li = 1000px中央のコンテンツ */
#charaArea ul.main li { width:85%; margin:1rem auto; flex-wrap:wrap;}
/* icon */
#charaArea ul.main li .icon { width:100%; margin-bottom:1rem;position: relative;z-index:2;}
/* text */
#charaArea ul.main li .textBlock {width:100%;position: relative;z-index:1;}
#charaArea ul.main li .textBlock p{padding:0;}
#charaArea ul.main li:nth-child(even) p{padding: 0 ;}
#charaArea ul.main li .textBlock .copy{width:80%;margin:0 auto;}
/* li = 1000px中央のコンテンツ */
#charaArea ul.sub { width:100%;}
#charaArea ul.sub li{ width:90%; margin:0 auto 1rem;}
}
/* タブ縦だけ微調整 */
@media (min-width: 501px) and (max-width: 1024px) and (orientation: portrait) {
      #introArea .koma1 {width: 55%;}
      #introArea .koma2 {width: 40%;}
      #introArea .koma3 {width: 55%;}
  #topArea .top_logo {
        width: 35%;
        top: auto;
        bottom: 20vw;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 2;
    }
  #zenouArea .last ul{width:80%; margin:0 auto;}
  #zenouArea .koma2 {width: 33%; }
    #zenouArea .koma4 {width: 50%; }
  #stage ul{ width:75%; margin:0 auto;  }
#zenouArea .lastBoruto { position: absolute;top: 14rem;}
    #zenouArea .lastLogo {top: calc(50% + 29%);width: 30%;}
    #charaArea ul ,#charaArea ul.sub { width: 80%;}
        .scroll-text {font-size: 14px; margin-bottom: 0;}
        .scroll-arrow { font-size:14px;}
}