@charset"utf-8";

body {
  max-width: 2000px;
 
  margin: 0 auto;
  background-repeat: round;
  position: relative;
  font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
  
  
}
/*-----------------------------------------メニューバー------------------------------------------------------------*/

#menu-cb {
display: none;
}

#menu-icon {
  display: none;
}


#global_navi {
  width: 100%;
  max-height: 5vh;
  height: 100%;
}

#global_navi ul{
  
  list-style: none;
  max-width: 100%;
  width: 100%;
  margin-bottom: 0;
  padding: 0;
  margin-top: 0;
  
  
}

#global_navi ul li {
 width : 14.285%;
  float: left;
  text-align: center;
  display: inline;
  margin: 0;
  position: relative;
  
  height: 5vh;
   
}

#global_navi ul li a{
  display: block;
  height: 100%;
  background:  rgba(255, 255, 255, .8);
  color: #888;
  text-decoration: none;
  
}

#global_navi ul .current a{
  
  color: #888;
  
}

#global_navi ul li a:hover {
  
  opacity: 0.7;
}

#global_navi ul:hover > .current a{
  
  color: #888;
  border: 0;
}


ul#normal {
  
  
  top: 100%;
  list-style: none;  
  position: absolute; 
  top: 100%;  
  left: 0; 
  margin: 0;  
  padding: 0; 

  

}

ul#normal li {
  float: none;
  width: 100%;
  
 
}

ul#normal li a {
  display: block;
  color: #888; 
  padding: 13px 15px; 
  text-align: center; 
  position: relative;
  
  z-index:900;
  
 
 
 

}



ul#normal li:first-child > a {
  border-top: 0;
}

ul#normal1 li:first-child > a {
  border-top: 0;
}

ul#normal2 li:first-child > a {
  border-top: 0;
}

#flip > li{ 
  perspective: 400px;  
  
} 

#flip > ul {
  
}

#flip li ul{ 
  visibility: hidden; 
  transform: rotateX(-90deg); 
  transform-origin: 50% 0; 
  transition: .3s; 
  
  
} 


#flip li:hover ul{ 
  visibility: visible; 
  transform: rotateX(0);  
  
} 




ul#normal1 {
   top: 100%;
  list-style: none;  
  position: absolute; 
  top: 100%;  
  left: 0; 
  margin: 0;  
  padding: 0; 


}

ul#normal1 li {
  float: none;
  width: 100%;
 
  
 
}

ul#normal1 li a {
  display: block;
  color: #888; 
  padding: 13px 15px; 
  text-align: center;
  position: relative;
  z-index:900;
}



ul#normal1 li:first-child > a {
  border-top: 0;
}




ul#normal2 {
  
  
  
  
   top: 100%;
  
  list-style: none;  
  position: absolute; 
  z-index: 9999;
  top: 100%;  
  left: 0; 
  margin: 0;  
  padding: 0; 

  

}

ul#normal2 li {
  float: none;
  width: 100%;
  
  
 
}

ul#normal2 li a {
  display: block;
  color: #888; 
  padding: 13px 15px; 
  text-align: center;
  position: relative;
  z-index: 900;
 
 

}



ul#normal2 li:first-child > a {
  border-top: 0;
}









/*------------------------------naviの見出し-------------------------------------------*/

#sunyou_navi {
  display: block;
  background: rgba(255, 255, 255, .8);
  z-index: 9999;
  width: 100%;
  height: 18vh;
  position: relative;
  
}

#sunyou_navi h1 {
  color: #888;
  font-size: 30px;
  padding: 0;
  margin: 0 0 0 15px;
  border: 0;
  font-weight: bolder;
  max-height: 7vh;
  height: 100%;
  padding-top: 3vh;
  padding-left: 4.7%;
  padding-bottom: 3vh;
  letter-spacing: 0.15em;
  margin-left: 0;
}

#sunyou_navi span {
  font-size: 15px;
  font-weight: lighter;
}





/*-----------------パンくずリスト---------------------------------*/
#breadcrump a {
   font-weight: bolder;
   font-size: 22px;
   text-decoration: none;
}

#breadcrump a:visited {
    color: black
}

#breadcrump a:hover {
    color: orange;
    font-size: 30px;
}






/*------------------------内容----------------------------------*/

#stage {
  width: 100%10
}

#wrapper {
  
  position: relative;
}

#wrapper h1 {
 text-align: center;
  font-size: 40px;
  letter-spacing: 0.3em;
  text-shadow: 1.5px 1.5px 2px rgba(25,25,25,0.75),
    -1.5px 1.5px 2px rgba(25,25,25,0.75),
    1.5px -1.5px 2px rgba(25,25,25,0.75),
    -1.5px -1.5px 2px rgba(25,25,25,0.75);
  color: #ffffff;
  margin-bottom: 0;

}

/*------------------------写真----------------------------------*/
#stage1 { 
  max-width: 85%;
  width: 100%;
  height:60%;
  position:relative;
  z-index: 0;
}

/* ラジオボタンを非表示 */
#r1,#r2,#r3,#r4 { display:none; }

/* サムネイルの初期位置 */
.t_img1,.t_img2,.t_img3,.t_img4 {
  position:absolute;
  max-width:5%;
  width: 100%;
  height: 6vh;
  overflow: hidden;
}
.t_img1 { top:0;left:0; }
.t_img1 img { top:0;left:0; }

.t_img2 { top: 10vh;left:0; }
.t_img2 img { top: 10vh;left:0; }

.t_img3 { top: 20vh;left:0; }
.t_img3 img { top: 20vh;left:0; }

.t_img4 { top: 30vh;left:0; }
.t_img4 img { top: 30vh;left:0; }


/*-----------------------------------サムネイルの大きさを決める------------------------------*/
.t_img1 img,.t_img2 img,.t_img3 img,.t_img4 img { 
  width:100%;
  height: 6vh;
  float: left;
}

.t_img1 img:hover , .t_img2 img:hover , .t_img3 img:hover, .t_img4 img:hover {
  -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}



/*---------写真を置いておく場所----------*/
.item1,.item2,.item3,.item4,.item1_2,.item2_2,.item3_2,.item4_2 {
    position:absolute;  
   
    
}


.item1,.item1_2 { top:0;left:0; }
.item2,.item2_2 { top:65px;left:0; }
.item3,.item3_2 { top:130px;left:0; }
.item4,.item4_2 { top:195px;left:0; }
.item1:hover,.item2:hover,.item3:hover,.item4:hover { cursor:pointer; }
.item1 img,.item2 img,.item3 img,.item4 img,.item1_2 img,.item2_2 img,.item3_2 img,.item4_2 img { width:100%; }
.item1 img:hover,.item2 img:hover,.item3 img:hover,.item4 img:hover { opacity:0; }


/* 写真表示部 */
.screen img { 
  margin-left:15%; 
  width: 85%;
  height: 60vh;
}



/*------------------------サムネイルの動き----------------------------------*/




/*-------------------シリーズ１-------------------------------*/
#p1_1 { transition:all 2s  0.9s ease-in-out ; }
#p1_2 { transition:all 2s  0.8s ease-in-out ; }
#p1_3 { transition:all 2s  0.7s ease-in-out ; }
#p1_4 { transition:all 2s  0.6s ease-in-out ; }
#p1_5 { transition:all 2s  0.5s ease-in-out ; }
#p1_6 { transition:all 2s  0.4s ease-in-out ; }
#p1_7 { transition:all 2s  0.3s ease-in-out ; }
#p1_8 { transition:all 2s  0.2s ease-in-out ; }
#p1_9 { transition:all 2s  0.1s ease-in-out ; }
#p1_10 { transition:all 2s  0.0s ease-in-out ; }




/*-------------------シリーズ2------------------------------------*/
#p2_1 { transition:all 2s 0.5s ease-in-out ; }
#p2_2 { transition:all 2s  0.4s ease-in-out ; }
#p2_3 { transition:all 2s  0.3s ease-in-out ; }
#p2_4 { transition:all 2s  0.2s ease-in-out ; }
#p2_5 { transition:all 2s  0.1s ease-in-out ; }
#p2_6 { transition:all 2s  0.0s ease-in-out ; }







/*-------------------シリーズ3------------------------------------*/
#p3_1 { transition:all 2s  0.8s ease-in-out ; }
#p3_2 { transition:all 2s  0.7s ease-in-out ; }
#p3_3 { transition:all 2s  0.6s ease-in-out ; }
#p3_4 { transition:all 2s  0.5s ease-in-out ; }
#p3_5 { transition:all 2s  0.4s ease-in-out ; }
#p3_6 { transition:all 2s  0.3s ease-in-out ; }
#p3_7 { transition:all 2s  0.2s ease-in-out ; }
#p3_8 { transition:all 2s  0.1s ease-in-out ; }
#p3_9 { transition:all 2s  0.0s ease-in-out ; }



/*-------------------シリーズ4------------------------------------*/
#p4_1 { transition:all 2s  0.3s ease-in-out ; }
#p4_2 { transition:all 2s  0.2s ease-in-out ; }
#p4_3 { transition:all 2s  0.1s ease-in-out ; }






/*--------------------------------------------------------サムネイルが動く場所の設定1-------------------------------------------------------------------*/
#r1:checked ~ #p1_1 { top:0;left: 100%; }
#r1:checked ~ #p1_2 { top:6vh;left: 100%; }
#r1:checked ~ #p1_3 { top:12vh;left: 100%; }
#r1:checked ~ #p1_4 { top:18vh;left: 100%; }
#r1:checked ~ #p1_5 { top:24vh;left: 100%; }
#r1:checked ~ #p1_6 { top:30vh;left: 100%; }
#r1:checked ~ #p1_7 { top:36vh;left: 100%; }
#r1:checked ~ #p1_8 { top:42vh;left: 100%; }
#r1:checked ~ #p1_9 { top:48vh;left: 100%; }
#r1:checked ~ #p1_10 { top:54vh;left: 100%; }

/*----------------------------------------二列目-----------------------------------------*/
#r1:checked ~ #p1_11{ top:0;left: 105%; }
#r1:checked ~ #p1_12{ top:6vh;left: 105%; }
#r1:checked ~ #p1_13{ top:12vh;left: 105%; }
#r1:checked ~ #p1_14{ top:18vh;left: 105%; }
#r1:checked ~ #p1_15{ top:24vh;left: 105%; }
#r1:checked ~ #p1_16{ top:30vh;left: 105%; }
#r1:checked ~ #p1_17{ top:36vh;left: 105%; }
#r1:checked ~ #p1_18{ top:42vh;left: 105%; }
#r1:checked ~ #p1_19{ top:48vh;left: 105%; }
#r1:checked ~ #p1_20{ top:54vh;left: 105%; }

/*----------------------------------------三列目-----------------------------------------*/
#r1:checked ~ #p1_21{ top:0;left: 110%; }
#r1:checked ~ #p1_22{ top:6vh;left: 110%; }
#r1:checked ~ #p1_23{ top:12vh;left: 110%; }
#r1:checked ~ #p1_24{ top:18vh;left: 110%; }
#r1:checked ~ #p1_25{ top:24vh;left: 110%; }
#r1:checked ~ #p1_26{ top:30vh;left: 110%; }
#r1:checked ~ #p1_27{ top:36vh;left: 110%; }
#r1:checked ~ #p1_28{ top:42vh;left: 110%; }
#r1:checked ~ #p1_29{ top:48vh;left: 110%; }
#r1:checked ~ #p1_30{ top:54vh;left: 110%; }


/*--------------------------------------------------------サムネイルが動く場所の設定2------------------------------------------------------------------*/

#r2:checked ~ #p2_1 { top:0;left: 100%; }                                     
#r2:checked ~ #p2_2 { top:6vh;left: 100%; }                                   
#r2:checked ~ #p2_3 { top:12vh;left: 100%; }                                   
#r2:checked ~ #p2_4 { top:18vh;left: 100%; }                                  
#r2:checked ~ #p2_5 { top:24vh;left: 100%; }                                   
#r2:checked ~ #p2_6 { top:30vh;left: 100%; }                                    
#r2:checked ~ #p2_7 { top:36vh;left: 100%; }                                   
#r2:checked ~ #p2_8 { top:42vh;left: 100%; }                                     
#r2:checked ~ #p2_9 { top:48vh;left: 100%; }                                 
#r2:checked ~ #p2_10 { top:54vh;left: 100%; }   


/*----------------------------------------二列目-----------------------------------------*/
#r2:checked ~ #p2_11{ top:0;left: 105%; }
#r2:checked ~ #p2_12{ top:6vh;left: 105%; }
#r2:checked ~ #p2_13{ top:12vh;left: 105%; }
#r2:checked ~ #p2_14{ top:18vh;left: 105%; }
#r2:checked ~ #p2_15{ top:24vh;left: 105%; }
#r2:checked ~ #p2_16{ top:30vh;left: 105%; }
#r2:checked ~ #p2_17{ top:36vh;left: 105%; }
#r2:checked ~ #p2_18{ top:42vh;left: 105%; }
#r2:checked ~ #p2_19{ top:48vh;left: 105%; }
#r2:checked ~ #p2_20{ top:54vh;left: 105%; }

/*----------------------------------------三列目-----------------------------------------*/
#r2:checked ~ #p2_21{ top:0;left: 110%; }
#r2:checked ~ #p2_22{ top:6vh;left: 110%; }
#r2:checked ~ #p2_23{ top:12vh;left: 110%; }
#r2:checked ~ #p2_24{ top:18vh;left: 110%; }
#r2:checked ~ #p2_25{ top:24vh;left: 110%; }
#r2:checked ~ #p2_26{ top:30vh;left: 110%; }
#r2:checked ~ #p2_27{ top:36vh;left: 110%; }
#r2:checked ~ #p2_28{ top:42vh;left: 110%; }
#r2:checked ~ #p2_29{ top:48vh;left: 110%; }
#r2:checked ~ #p2_30{ top:54vh;left: 110%; }
  
  
  

/*--------------------------------------------------------サムネイルが動く場所の設定3------------------------------------------------------------------*/




#r3:checked ~ #p3_1 { top:0;left: 100%; }                                     
#r3:checked ~ #p3_2 { top:6vh;left: 100%; }                                   
#r3:checked ~ #p3_3 { top:12vh;left: 100%; }                                   
#r3:checked ~ #p3_4 { top:18vh;left: 100%; }                                  
#r3:checked ~ #p3_5 { top:24vh;left: 100%; }                                   
#r3:checked ~ #p3_6 { top:30vh;left: 100%; }                                    
#r3:checked ~ #p3_7 { top:36vh;left: 100%; }                                   
#r3:checked ~ #p3_8 { top:42vh;left: 100%; }                                     
#r3:checked ~ #p3_9 { top:48vh;left: 100%; }                                 
#r3:checked ~ #p3_10 { top:54vh;left: 100%; }   

/*----------------------------------------二列目-----------------------------------------*/
#r3:checked ~ #p3_11 { top:0;left: 105%; }
#r3:checked ~ #p3_12 { top:6vh;left: 105%; }
#r3:checked ~ #p3_13 { top:12vh;left: 105%; }
#r3:checked ~ #p3_14 { top:18vh;left: 105%; }
#r3:checked ~ #p3_15 { top:24vh;left: 105%; }
#r3:checked ~ #p3_16 { top:30vh;left: 105%; }
#r3:checked ~ #p3_17 { top:36vh;left: 105%; }
#r3:checked ~ #p3_18 { top:42vh;left: 105%; }
#r3:checked ~ #p3_19 { top:48vh;left: 105%; }
#r3:checked ~ #p3_20 { top:54vh;left: 105%; }

/*----------------------------------------三列目-----------------------------------------*/
#r3:checked ~ #p3_21 { top:0;left: 110%; }
#r3:checked ~ #p3_22 { top:6vh;left: 110%; }
#r3:checked ~ #p3_23 { top:12vh;left: 110%; }
#r3:checked ~ #p3_24 { top:18vh;left: 110%; }
#r3:checked ~ #p3_25 { top:24vh;left: 110%; }
#r3:checked ~ #p3_26 { top:30vh;left: 110%; }
#r3:checked ~ #p3_27 { top:36vh;left: 110%; }
#r3:checked ~ #p3_28 { top:42vh;left: 110%; }
#r3:checked ~ #p3_29 { top:48vh;left: 110%; }
#r3:checked ~ #p3_30 { top:54vh;left: 110%; }




/*--------------------------------------------------------サムネイルが動く場所の設定4------------------------------------------------------------------*/

#r4:checked ~ #p4_1 { top:0;left: 100%; }                                     
#r4:checked ~ #p4_2 { top:6vh;left: 100%; }                                   
#r4:checked ~ #p4_3 { top:12vh;left: 100%; }                                   
#r4:checked ~ #p4_4 { top:18vh;left: 100%; }                                  
#r4:checked ~ #p4_5 { top:24vh;left: 100%; }                                   
#r4:checked ~ #p4_6 { top:30vh;left: 100%; }                                    
#r4:checked ~ #p4_7 { top:36vh;left: 100%; }                                   
#r4:checked ~ #p4_8 { top:42vh;left: 100%; }                                     
#r4:checked ~ #p4_9 { top:48vh;left: 100%; }                                 
#r4:checked ~ #p4_10 { top:54vh;left: 100%; }   

/*----------------------------------------二列目-----------------------------------------*/
#r4:checked ~ #p4_11 { top:0;left: 105%; }
#r4:checked ~ #p4_12 { top:6vh;left: 105%; }
#r4:checked ~ #p4_13 { top:12vh;left: 105%; }
#r4:checked ~ #p4_14 { top:18vh;left: 105%; }
#r4:checked ~ #p4_15 { top:24vh;left: 105%; }
#r4:checked ~ #p4_16 { top:30vh;left: 105%; }
#r4:checked ~ #p4_17 { top:36vh;left: 105%; }
#r4:checked ~ #p4_18 { top:42vh;left: 105%; }
#r4:checked ~ #p4_19 { top:48vh;left: 105%; }
#r4:checked ~ #p4_20 { top:54vh;left: 105%; }

/*----------------------------------------三列目-----------------------------------------*/
#r4:checked ~ #p4_21 { top:0;left: 110%; }
#r4:checked ~ #p4_22 { top:6vh;left: 110%; }
#r4:checked ~ #p4_23 { top:12vh;left: 110%; }
#r4:checked ~ #p4_24 { top:18vh;left: 110%; }
#r4:checked ~ #p4_25 { top:24vh;left: 110%; }
#r4:checked ~ #p4_26 { top:30vh;left: 110%; }
#r4:checked ~ #p4_27 { top:36vh;left: 110%; }
#r4:checked ~ #p4_28 { top:42vh;left: 110%; }
#r4:checked ~ #p4_29 { top:48vh;left: 110%; }
#r4:checked ~ #p4_30 { top:54vh;left: 110%; }










/*------------------------他のを押したときに隠れておくように設定-----------------------------------*/
.item1:checked ~ .photo2,.item1:checked ~ .photo3,.item1:checked ~ .photo4 { opacity: 0; z-index: -1;}
.item2:checked ~ .photo1,.item2:checked ~ .photo3,.item2:checked ~ .photo4 { opacity: 0; z-index: -1;}
.item3:checked ~ .photo1,.item3:checked ~ .photo2,.item3:checked ~ .photo4 { opacity: 0; z-index: -1;}
.item4:checked ~ .photo1,.item4:checked ~ .photo2,.item4:checked ~ .photo3 { opacity: 0; z-index: -1;}


/*------------土台の場所-------------*/
.photo1,.photo2,.photo3,.photo4 { 
  opacity:0;
  position: absolute;  
  top:0;
  left: 15%;
  max-width: 85%;
  width:100%;
  transition:all 1s ease;
  -webkit-transition:all 1s ease;
  height: 60vh;
}


/*---------------------------------クリック時に写真を表示する-----------------------------------*/
:target {
    opacity:1;
}


/*--------------------------------写真の大きさ-----------------------------------------------*/
.photo1 img,.photo2 img,.photo3 img,.photo4 img {
    width: 100%;
    height: 60vh;
}




.item1,.item2,.item3,.item4 {
  display: block;
  width: 15%;
  background-color:white;
  color:#888;
  height: 10vh;
  text-align: left;
  font-size: 20px;
  
  
}


.item1 {
  top: 0;
  left: 0;
}

.item2 {
  top: 10vh;
  left: 0;
}

.item3 {
  top: 20vh;
  left: 0;
}

.item4 {
  top: 30vh;
  left: 0;
}



.item1:hover,.item2:hover,.item3:hover,.item4:hover {
  color: orange;
  
}



#sunyou-footer_navi {
  width: 100%;
  height: 75px;
  margin-bottom: 0;
  display: inline-block;
  background-color: rgba(25,25,25,0.75);
  position: absolute;
  bottom: 0;

    
}


#sunyou-footer_navi ul {
    width: 100%;
    margin-left: 0;
    float: left;
    padding: 0;
    
}

#sunyou-footer_navi ul li {
    display: inline;
    width: 14%;;
    float: left;
    overflow: hidden;
    
}

#sunyou-footer_navi ul li a {
  display: block;
  
  padding: 5%;
  text-align: center;
  text-decoration: none;
  color: white;
    
    
}

#sunyou-footer_navi ul li a:visited {
    color: #fff;
    
}

#sunyou-footer_navi ul li a:hover {
    border-bottom: solid white 5px;
    
}