@charset "UTF-8";
/* CSS Document */

main{
background-image: url("../images/topBg.webp");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
/*---------------
hero
---------------*/

/*---------------
#news
---------------*/
#news .box div{
background-color: #fff;
}
#news .box h2{
color: #112692;
letter-spacing: 0.3em;
font-weight: 600;
}
#news .box ul li{
letter-spacing: 0.1em;
border-bottom: dotted 2px #E6E6E6;
}
#news .box a.btn{
margin-left: auto;
}
/*---------------
#about
---------------*/
#about{
position: relative;
}
#about:before{
display: block;
content: "";
background-color: #112692;
position: absolute;
bottom: 0;
left: 0;
opacity: 0.8;
}
#about .first h2{
text-align: end;
font-weight: bold;
color: rgba(0,0,0,.0);
-webkit-text-stroke: 1px  #112692;
letter-spacing: 0.15em;
opacity: 0.5;
}
#about .first .flex{
position: relative;
display: flex;
justify-content: space-between;
z-index: 1;
}
#about .first .flex:before{
display: block;
content: "";
background-color: #fff;
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
#about .second{
position: relative;
}
#about .second h2{
position: absolute;
font-weight: bold;
color: rgba(0,0,0,.0);
-webkit-text-stroke: 1px  #fff;
letter-spacing: 0.15em;
transform-origin: bottom right;
transform: rotate(-90deg);
opacity: 0.7;
}
#about .second .flex{
display: flex;
justify-content: center;
position: relative;
z-index: 1;
}
#about .second .flex:before{
display: block;
content: "";
background-color: #fff;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
#about .flex div h3{
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.2rem;
}
#about .flex div p{
text-align: justify;
line-height: 1.8;
letter-spacing: 0.3rem;
}
/*---------------
#lineup
---------------*/
#lineup h2{
text-align: center;
color: #112692;
letter-spacing: 0.3em;
text-indent: 0.3em;
font-weight: 600;
text-shadow: 1px 1px 7px #fff,
-1px 1px 7px #fff,
1px -1px 7px #fff,
-1px -1px 7px #fff;
}
#lineup h2 span{
display: block;
color: #111;
letter-spacing: 0.1em;
text-indent: 0;
}
#lineup p{
text-align: center;
letter-spacing: 0.2em;
text-shadow: 1px 1px 7px #fff,
-1px 1px 7px #fff,
1px -1px 7px #fff,
-1px -1px 7px #fff;
}
#lineup a.btn{
margin: 0 auto;
}
#lineup ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#lineup ul li{
background-color: #fff;
}
#lineup ul li h3{
display: block;
text-align: center;
color: #fff;
background-color: #112692;
}
/*---------------
#contact
---------------*/
#contact .box > div{
background-color: #fff;
margin: 0 auto;
}
#contact .box div .gMap iframe{
width: 100%;
height: 100%;
}
#contact .box > div div p{
text-align: center;
letter-spacing: 0.2em;
}
#contact .box > div div a.tel{
display: block;
text-align: center;
color: #112692;
font-weight: 600;
letter-spacing: 0.1em;
}
#contact .box > div div a.tel:before{
display: inline-block;
font-family: "Font Awesome 5 Free";
content: "\f095";
font-weight: 600;
color: #111;
}
#contact .box > div div a.form{
display: block;
text-align: center;
color: #fff;
background-color: #112692;
border-radius: 10px;
margin: 0 auto;
letter-spacing: 0.2em;
width: 220px;
}

@media (max-width: 560px){
section:first-of-type{
padding-top: 40px;
}
section{
padding-bottom: 40px;
}
/*---------------
hero
---------------*/
	
/*---------------
#news
---------------*/
#news .box div{
width: 80%;
margin: 0 auto;
padding: 10px 20px 15px;
}
#news .box h2{
font-size: 2.0rem;
padding-bottom: 10px;
transform: translateX(-35px);
}
#news .box ul{
padding-bottom: 15px;
}
#news .box ul li{
font-size: 1.4rem;
padding: 0px 5px 10px;
}
/*---------------
#about
---------------*/
#about{
padding-bottom: 80px;
}
#about:before{
width: 100%;
height: 60%;
}
#about .first h2{
font-size: 15vw;
line-height: 0.7;
}
#about .first .flex:before{
width: 90%;
height: 95%;
}
#about .first .flex{
flex-direction: column;
padding-bottom: 30px;
}
#about .first .flex img{
width: 70%;
padding-bottom: 20px;
}
#about .first .flex div{
width: 80%;
padding-left: 15%;
}
#about .second h2{
top: -120px;
right: 80%;
font-size: 7rem;
}
#about .second .flex{
flex-direction: column-reverse;
align-items: flex-end;
}
#about .second .flex:before{
width: 90%;
height: 106%;
}
#about .second .flex:last-of-type div:first-of-type{
width: 80%;
padding-right: 5%;
}
#about .second .flex:last-of-type div.youtube{
width: 80%;
padding-bottom: 30px;
}
#about .flex div h3{
font-size: 2.0rem;
padding-bottom: 20px;
}
#about .flex div p{
font-size: 1.4rem;
}
/*---------------
#lineup
---------------*/
#lineup{
padding-top: 40px;
}
#lineup h2{
font-size: 2.0rem;
}
#lineup h2 span{
font-size: 1.4rem;
padding-bottom: 20px;
}
#lineup p{
font-size: 1.6rem;
padding-bottom: 15px;
}
#lineup a.btn{
margin-bottom: 40px;
}
#lineup ul li{
padding: 20px 10px;
width: calc(48% - 20px) ;
margin-bottom: 20px;
}
#lineup ul li img{
padding-bottom: 10px;
}
#lineup ul li h3{
font-size: 1.4rem;
padding: 3px 0;
}
/*---------------
#contact
---------------*/
#contact .box > div{
padding: 30px 15px;
width: 90%;
}
#contact .box div .gMap{
width: 100%;
height: 300px;
margin-bottom: 30px;
}
#contact .box > div div{

}
#contact .box > div div p{
font-size: 1.4rem;
padding-bottom: 15px;
}
#contact .box > div div a.tel{
font-size: 2.6rem;
padding-bottom: 10px;
}
#contact .box > div div a.tel:before{
padding-right: 15px;
}
#contact .box > div div a.form{
font-size: 1.4rem;
padding: 10px 0;
}
}

@media (min-width: 561px){
/*---------------
hero
---------------*/
	
/*---------------
#news
---------------*/
#news .box div{
padding: 20px 30px 25px;
}
#news .box h2{
font-size: 2.4rem;
padding-bottom: 15px;
transform: translateX(-55px);
}
#news .box ul{
padding-bottom: 25px;
}
#news .box ul li{
font-size: 1.8rem;
padding: 15px;
}
/*---------------
#about
---------------*/
#about{
padding-bottom: 120px;
}
#about:before{
width: 100%;
height: 60%;
}
#about .first .flex{
align-items: center;
}
#about .first .flex:before{
width: 90%;
height: 95%;
}
#about .first .flex img{
width: 50%;
}
#about .first .flex div{
width: 40%;
padding-right: 5%;
}
#about .second h2{
top: 0;
right: 91%;
font-size: 10rem;
}
#about .second .flex{
align-items: center;
}
#about .second .flex:before{
width: 90%;
height: 115%;
}
/*---------------
#lineup
---------------*/
#lineup{
padding-top: 60px;
}
#lineup h2{
font-size: 2.4rem;
}
#lineup h2 span{
font-size: 1.6rem;
padding-bottom: 40px;
}
#lineup p{
font-size: 1.8rem;
padding-bottom: 20px;
}
#lineup a.btn{
margin-bottom: 50px;
}
#lineup ul li{
padding: 30px 10px;
width: calc(23% - 20px) ;
}
#lineup ul li img{
padding-bottom: 20px;
}
#lineup ul li h3{
font-size: 1.5rem;
}
/*---------------
#contact
---------------*/
#contact .box > div{
display: flex;
justify-content: space-between;
align-items: center;
padding: 60px 30px;
}
#contact .box div .gMap{
width: calc(96% - 300px) ;
height: 300px;
}
#contact .box > div div{
width: 300px;
}
#contact .box > div div p{
padding-bottom: 15px;
}
#contact .box > div div a.tel{
font-size: 2.8rem;
padding-bottom: 15px;
}
#contact .box > div div a.tel:before{
padding-right: 15px;
}
#contact .box > div div a.form{
font-size: 1.5rem;
padding: 15px 0;
}
}

@media (min-width: 561px) and (max-width: 1024px){
section:first-of-type{
padding-top: 60px;
}
section{
padding-bottom: 60px;
}
/*---------------
#news
---------------*/
#news .box div{
width: 85%;
margin: 0 auto;
}
/*---------------
#about
---------------*/
#about .first h2{
font-size: 10rem;
}
#about .flex div h3{
font-size: 2.2rem;
padding-bottom: 30px;
}
#about .flex div p{
font-size: 1.6rem;
}
#about .second .flex{
justify-content: flex-end;
padding-top: 20px;
}
#about .second .flex:last-of-type div:first-of-type{
width: 35%;
padding-right: 7%;
}
#about .second .flex:last-of-type div.youtube{
width: 35%;
padding-right: 7%;
}
}

@media screen and (min-width: 1025px){
section:first-of-type{
padding-top: 100px;
}
section{
padding-bottom: 100px;
}
/*---------------
#about
---------------*/
#about .first h2{
font-size: 13rem;
}
#about .flex div h3{
font-size: 2.5rem;
padding-bottom: 50px;
}
#about .flex div p{
font-size: 1.8rem;
}
#about .second .flex:last-of-type div:first-of-type{
width: 30%;
padding-right: 5%;
}
#about .second .flex:last-of-type div.youtube{
width: 30%;
padding-left: 7%;
}
/*---------------
#contact
---------------*/
#contact .box > div{
width: 85%;
}
}