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

/* 中身-モバイルファースト======================================================================================================== */

#top_copy .logo{
margin-bottom: 10px;
}
#top_copy h2{
font-size: 7.5vw;
text-align: center;
margin-bottom: 10px;
}
#top_copy #movie {
margin-top: 20px;
}
#top_copy #movie video{
width: 100%;
vertical-align: top;
}


#whats .title{
width: 100%;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
display: flex;
flex-direction: column;
justify-content: center;
}
#whats .title h2::after{
content: "";
display: block;
width: 2px;
height: 50px;
background-color: #111;
margin-right: 10px;
}
#whats .title em{
font-size: 30px;
}
#whats .inner article{
margin-top: 40px;
}
#whats .inner article .photo{
margin-bottom: 10px;
}
#whats .inner article .text h3{
font-size: 24px;
margin-bottom: 10px;
}
#whats .inner article .text p{
margin-bottom: 10px;
}
#whats .inner article .text .flex{
display: flex;
justify-content: space-between;
}
#whats .inner article .text .flex .common_btn{
width: 49%;
}


#contact a{
display: block;
text-decoration: none;
background-color: #111;
color: #fff;
text-align: center;
padding: 20px 40px;
}
#contact a p{
font-size: 20px;
margin-top: 10px;
}



#under_cap{
margin-top: 40px;
font-size: 12px;
}

/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){

#top_copy{
text-align: center;
}
#top_copy .logo{
margin-bottom: 40px;
}
#top_copy .logo img{
width: 500px;
}
#top_copy h2{
font-size: 40px;
margin-bottom: 20px;
}
#top_copy p{
font-size: 20px;
}
#top_copy #movie {
margin-top: 60px;
}


#whats .title h2{
font-size: 20px;
}
#whats .title em{
font-size: 36px;
}
#whats .inner article{
margin-top: 100px;
display: flex;
align-items: center;
}
#whats .inner article:nth-child(even){
flex-direction: row-reverse;
}
#whats .inner article .photo{
margin-bottom: 0px;
}
#whats .inner article:nth-child(odd) .photo{
margin-right: 60px;
}
#whats .inner article:nth-child(even) .photo{
margin-left: 60px;
}
#whats .inner article .text{
flex: 1;
}
#whats .inner article .text h3{
font-size: 40px;
margin-bottom: 20px;
}
#whats .inner article .text p{
margin-bottom: 20px;
}
#whats .inner article .text .common_btn{
text-align: left;
}
#whats .inner article .text .flex .common_btn{
width: 48%;
}
#whats .inner article .text .flex .common_btn a{
min-width: 10px;
display: block;
}


#contact{
text-align: center;
}
#contact a{
display: inline-block;
padding: 40px 100px;
}
#contact a .logo{
width: 220px;
}


#under_cap{
margin-top: 100px;
text-align: center;
}





}