@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 #main_photo {
margin-top: 20px;
}


#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 h3 > *{
display: inline-block;
vertical-align: middle;
}
#whats .inner article .text h3 .logo{
width: 120px;
margin: 0px;
}
#whats .inner article .text h3 .logo img{
display: block;
}
#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%;
}


#other_menu section{
border-top: solid 5px #fff;
}
#other_menu section:first-child{
border-top: none;
}
#other_menu section a{
display: block;
text-decoration: none;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
color: #fff;
padding: 60px 0;
}
#other_menu #gallery a{
background-image: url("../../images/inquiry_bg.jpg");
background-image: -webkit-image-set(url("../../images/inquiry_bg.jpg") 1x, url("../../images/inquiry_bg@2x.jpg") 2x);
}
#other_menu #voice a{
background-image: url("../../images/voice_bg.jpg");
background-image: -webkit-image-set(url("../../images/voice_bg.jpg") 1x, url("../../images/voice_bg@2x.jpg") 2x);
}
#other_menu a em{
font-size: 6vw;
letter-spacing: .25em;
margin-bottom: 10px;
}




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


/* 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 #main_photo {
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;
}


#other_menu {
display: flex;
flex-wrap: wrap;
}
#other_menu section{
width: 50%;
border-top: none;
}
#other_menu #gallery{
border-right: solid 5px #fff;
}
#other_menu section a{
padding: 150px 0;
}
#other_menu a em{
font-size: 40px;
margin-bottom: 20px;
}
#other_menu a h2{
font-size: 20px;
}


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








}