html, body {margin: 0; overflow-x: hidden;}


/* ※※※※※　　　　　　　　　　※※※※※ */
/* ※※※※※　　ローディング　　※※※※※ */
/* ※※※※※　　　　　　　　　　※※※※※ */

.nowloading{display: flex;}

#loader-bg {
  display: none; position: fixed;
  width: 100%;  height: 100%;
  top: 0px; left: 0px;
  background: #FFFFFF;
  z-index: 10;}

#loader {
  display: none;
  position: fixed;
  top: 45%; left: 40%;
  width:30%; height:5%;
  text-align: center;
  font-size:2.4rem;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  text-align: center;
  color: #000000;
  z-index: 11;}


.loading11{ animation: anime11 1s;animation-iteration-count: infinite; opacity:0; margin-left:-0.5rem}
@keyframes anime11 {0% {margin-top:-5rem; opacity:0}   30%{margin-top:0rem; opacity:1;} 31%{margin-top:-0.5rem} 50%{margin-top:-2rem; opacity:0;} 100% { margin-top:-5rem; opacity:0 ;} }

.loading12{ animation: anime12  1s;animation-iteration-count: infinite; animation-delay: 0.1s; opacity:0; margin-left:-1rem;}
@keyframes anime12 {0% {margin-top:-5rem; opacity:0}   30%{margin-top:0rem; opacity:1;} 31%{margin-top:-0.5rem} 50%{margin-top:-2rem; opacity:0;} 100% { margin-top:-5rem; opacity:0 ;} }

.loading13{ animation: anime13  1s;animation-iteration-count: infinite; animation-delay: 0.2s; opacity:0; margin-left:-0.8rem;}
@keyframes anime13  {0% {margin-top:-5rem; opacity:0}   30%{margin-top:0rem; opacity:1;} 31%{margin-top:-0.5rem} 50%{margin-top:-2rem; opacity:0;} 100% { margin-top:-5rem; opacity:0 ;} }
    


/* ※※※※※　　トップ画像　　※※※※※ */

.top-img{
background:#ffffff;
width:100%;
height:450px;
position:fixed;
top:30px;
z-index:-5;
}

.soryuu4{
font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
top:8.5rem;
margin-left:4rem;
animation: soryuu4 1.5s forwards;
  font-weight: 800;
  color: transparent;
  font-size:60px;
  background: url("https://soryuu4.com/material/origin_img/top/space.jpg") repeat;
  background-position: 40% 50%;
  -webkit-background-clip: text;
  position:relative;
  line-height:90px;
}

@keyframes soryuu4 {
　0% {filter: blur(7px) ;}　  
      100% {filter: blur(0px) }  
    }

.img-001{
height:60%;   
position:absolute; right:10%;
bottom:0; z-index:7;
animation: img-001 4s infinite;
}

.img-002{
height:100%;   
position:absolute; right:0;
bottom:0; z-index:6;
transform: translateX(20%);
animation: img-001 3.1s infinite;
}

.img-003{
height:1.5rem;   
position:absolute; right:35%;
bottom:18%; z-index:6;
animation: img-001 3s infinite;
}

.img-004{
height:100%;   
position:absolute; right:0;
bottom:0; z-index:2;
animation: img-002 12s infinite;
}

.img-005{
height:90%;   
position:absolute; right:25%;
bottom:0; z-index:5;
animation: img-001 2.3s infinite;
}


@keyframes img-001{
   0% {transform:scale(1);}
   30% {transform:scale(1.007);}
 100% {transform:scale(1);}
}

@keyframes img-002{
    0%{filter: contrast(100%)hue-rotate(0deg);}
    50%{filter: contrast(80%) hue-rotate(360deg);}
    100%{filter: contrast(100%) hue-rotate(0deg);}
}


/* ※※※※※　　メインコンテンツ　　※※※※※ */

.all-block{
width:100%;
background:#FFFFFF;
margin-top:420px;
z-index: -4;
}






/* ※※※※※　　　　　  　　　※※※※※ */
/* ※※※※※　　紹介画像　　※※※※※ */
/* ※※※※※　　　　　  　　　※※※※※ */




.all-sns{
display:flex; min-width:900px;
width;100%; height:650px;
background:#FFFFFF;
margin-bottom:2rem;
padding:2rem 8rem 1rem 8rem;
}

.left-sns{display: block; width:100%; background:#FFFFFF;}

.top-syoukai{
width:40rem; font-size:1rem;
height:30rem;
margin-top:1.2rem;
margin-bottom:2rem;
display: flex;
}

.top-syoukai1{
height:36rem; 
margin-top:-6rem;
margin-left:-2rem;
z-index:2;
position:relative;
user-select: none;
pointer-events: none;
}

/*　　スライドショー　設定　　*/

.photo-show { 
    height: 25.9rem; /*表示したい大きさ*/
    position: relative; margin-left:-2rem;
    width: 25.9rem; /*表示したい大きさ、height と合わせる*/
    display: block;
}

.photo-show a{
cursor:pointer;
transition:0.3s;
position: absolute;
}



.photo-show a img { max-width: 100%; transition:0.3s;
box-shadow: 0px 5px 30px rgba(0,0,0,.4);}

.photo-show a :hover{
opacity:0.7; transform: scale(1.01); 
box-shadow: 0px 10px 45px rgba(0,0,0,.2);}


.img-cover-top{
background:#BBEEEE;
width:100%; height:10%;
}

.photo-show a .type-1
{animation: show-1 15s infinite; position: relative;}
.photo-show a .type-2
{animation: show-2 15s infinite; position: relative;}
.photo-show a .type-3
{animation: show-3 15s infinite; position: relative;}




@keyframes show-1{
    0% {opacity:0; z-index:0;  transform: translateX(100%); transform: scale(0);}
    1%  {opacity:1; z-index:1; transform: translateX(0%);transform: scale(1);}
    30% {opacity:1; z-index:1; transform: translateX(0%);transform: scale(1);}
    33.3%  {opacity:0; z-index:0;  transform: translateX(-100%);  transform: scale(0);}
    100%{opacity:0; z-index:0; transform: translateX(-100%);  transform: scale(0);}
 }

@keyframes show-2 {
    0% {opacity:0; z-index:0;  transform: translateX(100%); transform: scale(0);}
    30%  {opacity:0; z-index:0;  transform: translateX(100%); transform: scale(0);}
    33.4%   {opacity:1; z-index:1; transform: translateX(0%);transform: scale(1);}
    64%  {opacity:1; z-index:1; transform: translateX(0%);transform: scale(1);}
    66.6%  {opacity:0; z-index:0;  transform: translateX(-100%); transform: scale(0);}
    100%{opacity:0; z-index:0;  transform: translateX(-100%); transform: scale(0);}
 }

@keyframes show-3 {
    0% {opacity:0; z-index:0;  transform: translateX(100%);transform: scale(0);}
    65%  {opacity:0; z-index:0;  transform: translateX(100%);transform: scale(0);}
    66.7%   {opacity:1; z-index:1; transform: translateX(0%);transform: scale(1);}
    97%  {opacity:1; z-index:1; transform: translateX(0%);transform: scale(1);}
    100%{opacity:0; z-index:0;  transform: translateX(-100%);transform: scale(0);}
 }





.top-syoukai p{
color:#FFFFFF;
background:#2AA3E5;
position:relative;
padding:0.5rem;
width:25.9rem;
text-align: center;
top:24.8rem;
font-size:1.5rem;
animation: jouhou 3s infinite;
z-index: 3;
font-family:"arial";
user-select: none;
transform:skewX(-10deg);
}

@keyframes jouhou {
    0% {opacity:0; transform: translateX(100%)skewX(-10deg);}
    5% {opacity:0;}
    10% {opacity:1; transform: translateX(0%)skewX(-10deg);}
    90% {opacity:1; transform: translateX(0%)skewX(-10deg);}
100% {opacity:0; transform: translateX(-100%)skewX(-10deg);}
 }



/* ※※※※※　　sns　　※※※※※ */

.sns{
height:5rem;
width:5rem;
border-radius:50%;
transition:0.3s;
position:absolute;
}

.sns-rink{display: flex; text-decoration: none; }

.sns:hover{
height:8rem; width:8rem;
margin:-1.5rem 0 0 -1.5rem;    
}

.sns img{
width:auto; height:2rem;  
margin:1.5rem 0 0 1.5rem;   
transition:0.3s;
user-select: none;
}

.sns:hover > img{
width:auto; height:2rem;  
margin:3rem 0 0 3rem;
transform: rotateY( 360deg ) ;
}

.twitter{   background:#22A1EA;  left:10rem;}
.facebook{background:#29279D;  left:17rem;}
.google{   background:#FF4000;   left:24rem;}
.line{       background:#2BC626;   left:31rem;}
.hatena{   background:#1C66E6;   left:38rem;}
.pocket{    background:#D82414;  left:45rem;}



.right-sns{width:15rem; height:30rem; margin-left:1rem;}

.fantia-cover{
background:#FFFFFF;
width:15.75rem; height:17.8rem;
z-index:2;
position:absolute;
margin-top:16.75rem;
border-top:solid 1px #B3B2AF;
}

.twitter-soryuu{
width:15rem;
position:absolute;
z-index: 3;
margin-top:-17.5rem;
}



/* ※※※※※　　　　　　　　　　　　　　　　　　　　　　※※※※※ */
/* ※※※※※　　第１ブロック（スペシャル・イラスト）　　※※※※※ */
/* ※※※※※　　　　　　　　　　　　　　　　　　　　　　※※※※※ */

.block-1.delighter{
transition: all .4s ease-out;
opacity: 0;  transform: rotateY(270deg);
height:100vh; background:#DDDDDD;
display: flex;
      }

.block-1.delighter.started {
opacity:1;  transform: rotateY(360deg);}

.block-1.delighter.started.ended {
 transform: rotateY(270deg); opacity:0;} 

     .block-1 a{text-decoration: none;}




.block-1 .plan{
background-size:cover; background-repeat: no-repeat;
overflow: hidden;  transition:0.3s; width:50%;

}

.block-1 .plan:hover{opacity:0.9;}





.block-1 .plan .top img{height:100%;object-fit: contain;}

a .top{
height:75%; width:100%;
color:#FFFFFF; display: flex;
justify-content: space-between;
}

a .top img{
height:100%;
object-fit: contain;
margin-left:1rem;    
}

a .bottom{
height:25%; width:100%;
background:rgba(0,0,0,0.6);  
color:#FFFFFF; padding-left:5rem;
padding-top:1.4rem;
}


.plan h2{
font-size:2.7rem;    
font-weight:600;
margin-top:9rem;
letter-spacing: -1px;
line-height:4.5rem;
text-shadow:0px 30px 30px rgba(0,0,0,.7) ;
font-family:'Hiragino Kaku Gothic Pro'; 
animation: plan 3s infinite; 
color:#EEEEEE;
}


@keyframes plan{
    40%{filter: brightness(100%); }   
    50%{filter: brightness(150%);}   
    60%{filter: brightness(100%); transform: scale(1);
    text-shadow:0px 30px 30px rgba(0,0,0,.7) ;}   
}



.plan .back{
position: absolute;
top:0;  z-index:-1;  
animation:back-img 15s infinite;
width:50%; height:100%;
}

@keyframes back-img{
    30%{filter: saturate(100%) hue-rotate(0deg);}    
    50%{filter: saturate(80%) hue-rotate(40deg);}  
    70%{filter: saturate(100%)hue-rotate(0deg); }  
}

.top-nomal h2{
margin-right:5rem;
animation:nomal-h2 12s infinite;}

@keyframes nomal-h2{
    46.5%{transform: scale(1) translateX(0%);
    text-shadow:0px 30px 30px rgba(0,0,0,.7) ;}
    
    50%{ transform: scale(1.5) translateX(0vw);
    text-shadow:0px 60px 60px rgba(0,0,0,.7) ;
    opacity:1;}
    
    60%{ transform: scale(1.5) translateX(-50vw);
    text-shadow:0px 60px 60px rgba(0,0,0,.7) ;
    opacity:1;}
    
    71%{ transform: scale(1.5) translateX(-50vw);
    text-shadow:0px 60px 60px rgba(0,0,0,.7) ;
    opacity:0;}    

    72%{ transform: scale(1.5)  translateX(50vw);
    text-shadow:0px 60px 60px rgba(0,0,0,.7) ;
    opacity:0;}
    
    76.5%{ transform: scale(1.5)  translateX(0vw);
    text-shadow:0px 60px 60px rgba(0,0,0,.7) ;
    opacity:1;}
    
    80%{ transform: scale(1)  translateX(0vw);
    text-shadow:0px 30px 30px rgba(0,0,0,.7) ;
    opacity:1;}
    
   100%{transform: scale(1) translateX(0%);
    text-shadow:0px 30px 30px rgba(0,0,0,.7) ;}
    
    }

.top-nomal img{margin-left:1rem;}

.nomal-back{
background-image:url(https://soryuu4.com/material/origin_img/top/space2.jpg);
left:0;
}





.top-special h2{
margin-left:4rem;
animation:special-h2 12s infinite;
animation-delay: 6s}

@keyframes special-h2{
    46.5%{transform: scale(1) translateX(0%);
    text-shadow:0px 30px 30px rgba(0,0,0,.7) ;}
    
    50%{ transform: scale(1.5) translateX(0vw);
    text-shadow:0px 60px 60px rgba(0,0,0,.7) ;
    opacity:1;}
    
    60%{ transform: scale(1.5) translateX(50vw);
    text-shadow:0px 60px 60px rgba(0,0,0,.7) ;
    opacity:1;}
    
    71%{ transform: scale(1.5) translateX(50vw);
    text-shadow:0px 60px 60px rgba(0,0,0,.7) ;
    opacity:0;}    

    72%{ transform: scale(1.5)  translateX(-50vw);
    text-shadow:0px 60px 60px rgba(0,0,0,.7) ;
    opacity:0;}
    
    76.5%{ transform: scale(1.5)  translateX(0vw);
    text-shadow:0px 60px 60px rgba(0,0,0,.7) ;
    opacity:1;}
    
    80%{ transform: scale(1)  translateX(0vw);
    text-shadow:0px 30px 30px rgba(0,0,0,.7) ;
    opacity:1;}
    
   100%{transform: scale(1) translateX(0%);
    text-shadow:0px 30px 30px rgba(0,0,0,.7) ;}
    
}

.special-back{background-image:url(https://soryuu4.com/material/origin_img/top/space3.jpg);
right:0;}



.product{
width:100%;
display: flex;　position:relative;
}

.product a{
text-decoration: none;    
}

.product_1{
background:#F7F7F7;
width:40%; height:300px;
margin-left:10%;
position:relative;
}

.product_2{
background:#F7F7F7;
width:30%; height:300px;
margin-left:5%;
position:relative;
}

.product_2_1{
padding:10% 10% 25px 10%;    
border-bottom:solid 0.5px #888888;
}

.product_2_2 a{
background:#FFFFFF;
left:25%;
padding:0.5rem 2rem;
font-size:1.5rem;
position:absolute; bottom:50px;
box-shadow:0px 0px 10px rgba(0,0,0,0.3);
border-radius:20px;
color:#484848;
}

.product_top{
width:80%; padding: 30px 10% 15px 10%;
border-bottom:solid 0.5px #888888;
}

.product_bottom{
position:absolute;
bottom:50px; margin-left:10%;
}

.rink{
font-size:2rem;   top:120px;
position:absolute;
background:#FFFFFF;
padding:1rem 1.5rem;
border-radius:5%;
font-weight:100;
box-shadow:0px 0px 10px rgba(0,0,0,0.3);
}

.rink:hover{

}

.dl_rink{left:10%; color:#0174DF; transition:0.3s;}

.dl_rink:hover{
transform: translateY(-10px) scale(1.1);
box-shadow:0px 20px 30px rgba(0,0,0,0.2);
background:#0174DF; color:#FFFFFF;}

.fan_rink{right:15%; color:#FF8000; transition:0.3s;}

.fan_rink:hover{
transform: translateY(-10px) scale(1.1);
box-shadow:0px 20px 30px rgba(0,0,0,0.2);
background:#FF8000; color:#FFFFFF;}




/* ※※※※※　　　　　　　　　　　　　　　　　　　　　　※※※※※ */
/* ※※※※※　　第2ブロック（novel）　　※※※※※ */
/* ※※※※※　　　　　　　　　　　　　　　　　　　　　　※※※※※ */


.block-2.delighter{
       transition: all .5s ease-out;
      transform: translateX(-100%);
      opacity: 1; 
      }


   .block-2.delighter.started {
      transform: none;
      opacity: 1; }

   .block-2.delighter.started.ended {opacity:0;}

 .joshizumo{
width:94%;
margin:3% 0 0 3%;
height:400px;
background:#FFFFFF;    
box-shadow:0px 0px 20px 1px rgba(0,0,0,0.4);
display:flex;
}
        
        
        
        .joshizumo .title{
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        font-size:3.2rem;
        font-weight:700;
        margin-top:2.5rem; 
        }
        
        .title rt{
        font-size:0.8rem;   
        }
    
         
        .joshizumo  img{
        height:350px; 
        margin-top:30px;
        margin-left:4.5rem;
        }
        
        
        .naiyou{
        margin-left:4rem;  
        margin-top:1rem;
        font-family:"arial";
        display: flex;
        }
        
        .naiyou-syousai{
        box-shadow:0px 0px 10px 1px rgba(0,0,0,0.2);  
        padding:0.2rem 9rem 1rem 1.5rem;    
        }
        
        .naiyou-syousai a{
        text-decoration: none;
        color:#DBA901;
        letter-spacing:0rem;
        transition:0.3s;
        font-weight: 600;
        }
        
        .naiyou-syousai a:hover{
        color: #E52323;  
        
        }
        
        .left .kome{
        color:#999999;
        font-size:0.8rem;
        }
        

        
        .naiyou .right a{
        background :#E52323;  
        position: absolute;
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        width:200px;
        height:400px;
        right:3%; margin-top:-1rem;
        transition:0.3s;
        text-decoration: none;
        }
        
        .naiyou .right a:hover{
        background :#FFBF00;   
        color:#E52323;  
        }
        
        a .honpen-in{
        color:#FFFFFF;   
        text-align: center;
        font-size:5rem;
        line-height: 110%;
        margin-top:4rem;
        }
        
        .yajirusi{
        color:#FFFFFF;
        font-size:4rem;
        animation: yaji 2s  infinite forwards;
        text-align: center;
        margin-top:1rem;
        }
        
                @keyframes yaji {
       0% { opacity: 0; margin-left:-2rem; }
      20% { opacity: 1;margin-left:0rem; }
      90% { opacity: 1;margin-right:0rem;}
     100% { opacity: 0; margin-right:-2rem; }
     }  
        
a span {
  display: inline-block;
}
a:hover span {
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
  transition: .6s;
}
a:hover span:nth-of-type(1) {
  -webkit-transition-delay: .02s;
  transition-delay: .02s;
}
a:hover span:nth-of-type(2) {
  -webkit-transition-delay: .04s;
  transition-delay: .04s;
}
a:hover span:nth-of-type(3) {
  -webkit-transition-delay: .06s;
  transition-delay: .06s;
}
a:hover span:nth-of-type(4) {
  -webkit-transition-delay: .08s;
  transition-delay: .08s;
}
a:hover span:nth-of-type(5) {
  -webkit-transition-delay: .10s;
  transition-delay: .10s;
}
        
a:hover span:nth-of-type(6) {
  -webkit-transition-delay: .12s;
  transition-delay: .12s;
}
        
a:hover span:nth-of-type(7) {
  -webkit-transition-delay: .12s;
  transition-delay: .12s;
}
a:hover span:nth-of-type(8) {
  -webkit-transition-delay: .14s;
  transition-delay: .14s;
}
a:hover span:nth-of-type(9) {
  -webkit-transition-delay: .16s;
  transition-delay: .16s;
}
a:hover span:nth-of-type(10) {
  -webkit-transition-delay: .18s;
  transition-delay: .18s;
}
a:hover span:nth-of-type(11) {
  -webkit-transition-delay: .20s;
  transition-delay: .20s;
}
        
a:hover span:nth-of-type(12) {
  -webkit-transition-delay: .22s;
  transition-delay: .22s;
}

        
        .koushinhind{
        font-size:1rem;   
        color:#E52323;
        margin-bottom:1rem;
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        font-weight:600;
        }
        
        
                            .koushin{ 
                             border-style: solid;
                             border-width: 200px 200px 0 0;
                             border-color: #E52323 transparent;
                             position: absolute; 
                            }
        
                            .koushin-in{
                            transform: rotate(-45deg);
                            position:absolute;
                            color:#FFFFFF;
                            width:150px;
                            top:-11.5rem; left:-0.5rem;
                            font-size:2rem; font-weight:500;
                            text-align: center;
                            line-height: 125%
                            }


.novel{
height:700px; width:100%;
background:#84C25E;
margin-top:2rem;
position: relative;
}

.novel-top{
display: flex;    
}

.novel-1{
left:4rem; top:100px;
position:absolute;
}

.novel-1 h1{
color:#FFFFFF;  
font-size:6rem;
}

.novel-1 p{
color:#FFFFFF;
font-size:1.2rem;
}

.novel-2 a {
background:#FFFFFF;
border-radius:50%;
padding:60px;
position:absolute; top:200px; right:20%;
color:#84C25E;
text-decoration: none;
font-size:3rem; transition:0.3s;
}

.novel-2 a:hover{
transform:scale(1.3);
box-shadow: 0px 30px 40px rgba(0,0,0,0.3)
}




.city1-1{
 opacity:0.5; width:100%; 
animation:city1 40s infinite linear;
bottom:15px; position:absolute;  
filter:blur(3px);}

.city1-2{
opacity:0.5; width:100%; 
animation:city2 40s infinite linear;
bottom:15px; position:absolute; 
filter:blur(3px);}

.city2-1{
width:100%; 
animation:city1 20s infinite linear;
bottom:0; position:absolute;

}

.city2-2{
width:99.9%; 
animation:city2 20s infinite linear;
bottom:0; position:absolute; 
}

.city3{ opacity:0.4;
height:10px; width:auto;
position: absolute; bottom:180px; right:0;
animation:city3 20s infinite linear;
}

@keyframes city1{
    0%{transform: translate(0%);}
100%{transform: translate(-100%);}
}

@keyframes city2{
    0%{transform: translate(100%);}
100%{transform: translate(0%);}
}

@keyframes city3{
    0%{transform: translate(0%); opacity:1;}
30%{transform: translate(-100vw); opacity:1;}
31%{opacity: 0;}
100%{opacity: 0;}
}











/* ※※※※※　　　　　　　　　　　　　　　　　　　　　　※※※※※ */
/* ※※※※※　　第3ブロック（novel）　　※※※※※ */
/* ※※※※※　　　　　　　　　　　　　　　　　　　　　　※※※※※ */

.block-3.delighter{
       transition: all .5s ease-out;
      transform: translateX(-100%);
      opacity: 1;  display: none;
      }


   .block-3.delighter.started {
      transform: none;
      opacity: 1; }

   .block-3.delighter.started.ended {opacity:0;}

.slide{
width:100%;   height:70rem;
background:#A4A4A4;
}