@charset "utf-8";

* {
    box-sizing: border-box;
    margin:0 auto;
    
}

h1{
    font-family: 'Hiragino Kaku Gothic ProN W6','ヒラギノ角ゴProN W6', sans-serif ;
}


h2{
    font-family: 'Hiragino Kaku Gothic ProN W6','ヒラギノ角ゴProN W6', sans-serif ;
}




p{
    font-family: 'Hiragino Kaku Gothic ProN W3','ヒラギノ角ゴProN W3', sans-serif ;
}

a{
    text-decoration: none;
}


header{
    width: 100%;
    height:60px ;

}

nav{
    width:100%;
    height:60px ;
    background-color:#403F3F ;
    justify-content: space-around;
}

main{
    width: 100%;
    margin:0 auto;
}

/* ul.gnav-list-1 {
    display:inline-block;
} */

ul.gnav-list-1 img{
    display:none;
  
}

ul.gnav-list-1{
    justify-content:space-between;
    width:100%;
    max-width: 1500px;
    margin:0 auto;
    padding:0;
    text-align: center;
   

}


ul.gnav-list-1 li{
    display:inline-block;
    font-family: 'Hiragino Kaku Gothic ProN W3','ヒラギノ角ゴProN W3', sans-serif ;
  

}

ul.gnav-list-1 li a{
    width: 100%;
    display:block;
    padding: 1.5em;
    color: rgb(130, 130, 130);
    font-size: 0.8em;
    text-decoration:none;
    margin-top:0.5%;
}

ul.gnav-list-1 li a:hover{
    color: rgb(255, 255, 255);

}

.sec1{
    display: flex;
    width:100%;
    height: 420px;
    margin:0 auto; 
}


.sec1-1{
    display: block;
    width:300px;
    height: 420px;
    margin:0 auto;
    text-align: center;
    
}
.sec1-1 h1{
    display: block;
    font-size: 1.2em;
    margin-top:42% ;
    margin-bottom: 10%;
    margin-left: 15%;
    margin-right: 13%;
    text-align: center;

}

.sec1-1 img {
    width:70%;
    display: block;
    margin:0 auto;
    
}

.sec1-1 a i {
    margin-top: 40px;
    font-size: 1.5em;
    color:rgb(215, 215, 215);
}




.sec1-2{
    overflow: hidden;
    display: block;
    width: 470px;
    height: 383px;
    margin-top:3.2%;
    text-align: center;
}

.sec1-2 img{
    width:100%;
    display: block;
    margin-right:0px;
    transition: 0.5s;
}

.sec1-2 img:hover{
    transform: scale(1.1, 1.1);

}


/*sec2*/

.sec2{
    display: flex;
    width:100%;
    height: 350px;
    margin:0 auto; 
    background-color: #F0F0F0;
}


.sec2-1{
    overflow: hidden;
    display: block;
    width:420px;
    height: 350px;
    margin:0 auto ;
   
   
}

.sec2-1 img {
    width:100%;
    display: block;
    margin-top:9%;
    transition: 0.5s;
    
}

.sec2-1 img:hover{
    transform: scale(1.1, 1.1);

}




.sec2-2 h2{
    display: block;
    font-size: 3em;
    margin-top:31% ;
    margin-bottom: 2%;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;

}

.sec2-2{
    display: block;
    width: 347px;
    height: 350px;
    margin:0 auto;
    text-align: center;
}

.sec2-2 p {
    font-size: 1em;
}

.sec2-2 a{
    text-decoration: none;
}

.ex {
    color: blue;
}


/*sec3*/

.sec3{
    display: flex;
    width:100%;
    height: 350px;
    margin:0 auto; 
}


.sec3-2{
    overflow: hidden;
    display: block;
    width:453px;
    height: 350px;
    margin:0 auto ;
   
   
}

.sec3-2 img {
    width:98%;
    display: block;
    margin-top:9%;
    transition: 0.5s;
    
}

.sec3-2 img:hover{
    transform: scale(1.1, 1.1);

}




.sec3-1 h2{
    display: block;
    font-size: 3em;
    margin-top:31% ;
    margin-bottom: 2%;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;

}

.sec3-1{
    display: block;
    width: 316px;
    height: 350px;
    margin:0 auto;
    text-align: center;
}

.sec3-1 p {
    font-size: 1em;
}

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

.ex {
    color: blue;
}

/*sec4*/

.sec4{
    display: flex;
    width:100%;
    height: 350px;
    margin:0 auto; 
    background-color: #F0F0F0;
}


.sec4-1{
    overflow: hidden;
    display: block;
    width:384px;
    height: 350px;
    margin:0 auto ;
   
   
}

.sec4-1 img {
    width:100%;
    display: block;
    margin-top:8%;
    transition: 0.5s;
    
}

.sec4-1 img:hover{
    transform: scale(1.1, 1.1);

}




.sec4-2 h2{
    display: block;
    font-size: 3em;
    margin-top:31% ;
    margin-bottom: 2%;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;

}

.sec4-2{
    display: block;
    width: 384px;
    height: 350px;
    margin:0 auto;
    text-align: center;
}

.sec4-2 p {
    font-size: 1em;
}

.sec4-2 a{
    text-decoration: none;
}

.ex {
    color: blue;
}


/*sec5*/

.sec5{
     display: flex;
    width:100%;
    height: 380px;
    margin:0 auto; 
}


.sec5-2{
   overflow: hidden;
    display: block;
    width:453px;
    height: 350px;
    margin:0 auto ;
   
   
}

/*
.sec5-2 img {
    width:98%;
    display: block;
    margin-top:7%;
    transition: 0.5s;
}

.sec5-2 img:hover{
    transform: scale(1.1, 1.1);

}*/


.sec5-2 video {
    width:98%;
    display: block;
    margin-top:13%;
    transition: 0.5s;
}

.sec5-2 video:hover{
    transform: scale(1.1, 1.1);

}


/* 
.video-container {

    position: relative;
    width: 100%;
    margin-top:13%;
    padding-top: 56.25%;  16:9 の比率を保つ魔法の数字 

}*/



/* 中のYouTube動画を外枠にぴったり合わせる */

/*
.video-container iframe {
  position: absolute;
  
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
*/





.sec5-1 h2{
    display: block;
    font-size: 2.2em;
    margin-top:40% ;
    margin-bottom: 2%;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;

}

.sec5-1{
      display: block;
    width: 316px;
    height: 350px;
    margin:0 auto;
    text-align: center;
}

.sec5-1 p {
    font-size: 1em;
}

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

.sec5-1 audio {
    height: 40px;
}




input{
     width:70px;
     font-size: 1.3em;
     margin-top: 10px;
 }

.top{
    color:rgb(232, 232, 232);
    
}




.ex {
    color: blue;
} 

/*sec6*/

.sec6{
    display: flex;
    width:100%;
    height: 350px;
    margin:0 auto; 
    background-color: #F0F0F0;
}


.sec6-1{
    overflow: hidden;
    display: block;
    width:392px;
    height: 350px;
    margin:0 auto ;
   
   
}

.sec6-1 img {
    width:100%;
    display: block;
    margin-top:13%;
    transition: 0.5s;
}

.sec6-1 img:hover{
    transform: scale(1.1, 1.1);

}




.sec6-2 h2{
    display: block;
    font-size: 3em;
    margin-top:31% ;
    margin-bottom: 2%;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;

}

.sec6-2{
    display: block;
    width: 376px;
    height: 350px;
    margin:0 auto;
    text-align: center;
}

.sec6-2 p {
    font-size: 1em;
}

.sec6-2 a{
    text-decoration: none;
}

.ex {
    color: blue;
}

/*sec7*/

.sec7{
    display: flex;
    width:100%;
    height: 350px;
    margin:0 auto; 
    /*background-color: #F0F0F0;*/
    
}


.sec7-2{
    overflow: hidden;
    display: block;
    width:394px;
    height: 350px;
    margin:0 auto ;
   
   
}

.sec7-2 img {
    width:100%;
    display: block;
    margin-top:12%;
    transition: 0.5s;
}

.sec7-2 img:hover{
    transform: scale(1.1, 1.1);

}




.sec7-1 h2{
    display: block;
    font-size: 3em;
    margin-top:29% ;
    margin-bottom: 2%;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;

}

.sec7-1{
    display: block;
    width: 374px;
    height: 350px;
    margin:0 auto;
    text-align: center;
}

.sec7-1 p {
    font-size: 1em;
}

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

.ex {
    color: blue;
}

/*sec8*/

.sec8{
    display: flex;
    width:100%;
    height: 350px;
    margin:0 auto; 
    background-color: #F0F0F0;
}


.sec8-1{
    overflow: hidden;
    display: block;
    width:392px;
    height: 350px;
    margin:0 auto ;
    /* background-color: #F0F0F0; */
   
   
}

.sec8-1 img {
    width:100%;
    display: block;
    margin-top:10%;
    transition: 0.5s;
}

.sec8-1 img:hover{
    transform: scale(1.1, 1.1);

}




.sec8-2 h2{
    display: block;
    font-size: 3em;
    margin-top:20% ;
    margin-bottom: 2%;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;

}

.sec8-2{
    display: block;
    width: 376px;
    height: 350px;
    margin:0 auto;
    text-align: center;
}

.sec8-2 p {
    font-size: 1em;
}

.sec8-2 a{
    text-decoration: none;
}

.ex {
    color: blue;
}




/*  
#sns{
    width:30%;
    background:#ffffff;
    padding: 4% 0;
}

#sns .wrapper{
    display:flex;
    justify-content: space-between;
} 

.sns-box{
    width:80%;
} */





/* footer ここから*/

footer{
    display:flex;
    width: 100%;
    margin:0 auto;
    background-color:#403F3F ;
}

address{
    font-family: 'Hiragino Kaku Gothic ProN W3','ヒラギノ角ゴProN W3', sans-serif ;
    font-style: normal;
    font-size: 0.8em;
    color: rgb(255, 255, 255);
    margin-top: 5px;
    line-height: 2em;
}

.footer-inner1{
    width: 100%;
    max-width: 50%;
    height:320px ;
    margin:0 auto;
    background-color:#403F3F ;
}

.footer-inner1 img{
    max-width: 50%;
    margin-top:45px;
}

.splan_name{
    margin-top:10px;
    font-size: 1.2em;
    color: white;
    font-family: 'Hiragino Kaku Gothic ProN W3','ヒラギノ角ゴProN W3', sans-serif ;
}

.footer-left{
    margin-left: 50%;

}
.copy{
    margin-top:70px;
    color: white;
    font-size: 0.8em;
    font-family: 'Hiragino Kaku Gothic ProN W3','ヒラギノ角ゴProN W3', sans-serif ;
}



.footer-inner2{
    width: 100%;
    max-width: 50%;
    height:320px ;
    margin:0 auto;
    background-color:#403F3F ;
}

.footer-nav{
    width: 100%;
    background-color:#403F3F ;
    margin-top :37px;
}
.footer-nav ul {
    margin-left: 2%;
    list-style: none;
}

.footer-nav ul li{
    width: 100%;
    display: inline-block;
    font-family: 'Hiragino Kaku Gothic ProN W3','ヒラギノ角ゴProN W3', sans-serif ;
    font-size: 0.9em;
    padding-top: 8px;
}

.footer-nav ul li a{
    text-decoration:none;
    justify-content: space-around;
    color: #F0F0F0;
}

/*.footer-nav ul li a .X{
    color:rgb(215, 215, 215);
    font-size: 1.5em;
}
/*.footer-nav ul li a .facebook{
    color:rgb(215, 215, 215);
    font-size: 1.5em;
}

/* footer ここまで*/