@charset "utf-8";

/*ブレイクポイント*/

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

html{
font-size:17px;
}

body{
font-family:sans-serif;
}

ul{
list-style:none;
}

a{
text-decoration:none;
color:#000;
}

/* header */

header{
height:40px;
border-bottom:5px solid #f15a24;
}

/* メインの画像 */

#main-img{
width:100%;
max-width:1200px;
height:630px;
margin:0 auto;
padding:10px;
background:url(img/main.jpg);
background-position:60% 0%;
display:flex;
flex-direction:column;
justify-content:center;
text-shadow:1px 1px 3px #fff;
}

#main-img h2{
font-size:1.5rem;
margin-bottom:70px;
}

#main-img h2 span{
font-size:1.7rem;
color:#f15a24;
}


#main-img a{
display:block;
width:280px;
font-weight:bold;
background:rgba(255, 255, 255, 0.5);
border:4px solid #f15a24;
padding:7px;
text-align:center;
border-radius:10px;
position:relative;
}

#main-img a span{
color:#f15a24;
}

#main-img a::after{
content:">";
position:absolute;
top:7px;
right:10px;
color:#f15a24;
}

@media screen and (min-width:600px){

#main-img h2{
font-size:2rem;
}

#main-img h2 span{
font-size:2.2rem;
}

}

@media screen and (min-width:1000px){

#main-img h2{
font-size:2.5rem;
}

#main-img h2 span{
font-size:2.7rem;
}

}


/* ３つのポイント */

#point{
text-align:center;
font-weight:bold;
}

#point h3,#q-a h3{
font-size:1.1rem;
width:90%;
max-width:380px;
height:45px;
line-height:45px;
color:#fff;
background:#f15a24;
border-radius:10px;
margin:0 auto;
position:relative;
top:-20px;
text-align:center;
}

#point img{
width:80%;
max-width:460px;
}

#point li span{
display:block;
font-size:1.3rem;
color:#f15a24;
}

#point li{
margin-bottom:30px;
}

#point ul{
margin:30px auto 0;
}

@media screen and (min-width:600px){

#point h3,#q-a h3{
font-size:1.3rem;
height:55px;
line-height:55px;
}

}

@media screen and (min-width:1000px){

#point ul{
display:flex;
max-width:1000px;
}

#point img{
width:100%;
}

}

/* よくあるご質問 */

#q-a{
margin:70px 0 30px;
padding:0 20px 20px;
text-align:center;
background:#B3B3B3;
}

#q-a section{
max-width:1000px;
margin:0 auto 20px;
padding:10px;
background:#fff;
}

#q-a h4{
height:40px;
line-height:40px;
border-bottom:2px solid #B3B3B3;
margin-bottom:20px;
}


#q-a section:nth-child(2) h4::before{
content:'Q.1 ';
color:#f15a24;
}

#q-a section:nth-child(3) h4::before{
content:'Q.2 ';
color:#f15a24;
}

#q-a section:nth-child(4) h4::before{
content:'Q.3 ';
color:#f15a24;
}

/*----------------------------*/

#q-a img{
width:100%;
max-width:380px;
}

.answer{
font-size:1.3rem;
font-weight:bold;
margin-bottom:20px;
}

.answer span{
color:#f15a24;
}

#q-a a,#close a{
box-sizing:content-box;
display:block;
width:90%;
max-width:300px;
height:40px;
line-height:40px;
text-align:center;
margin:0 auto;
color:#f15a24;
font-weight:bold;
background:#fff;
border:4px solid #f15a24;
border-radius:10px;
position:relative;
}

#q-a a::after,#close a::after{
content:'>';
position:absolute;
top:0;
right:5px;
}

@media screen and (min-width:1000px){

#q-a{
text-align:left;
}

#q-a section{
padding:30px;
}

.qa-fb{
display:flex;
flex-wrap:wrap;

flex-direction:row-reverse;
}

#q-a img{
width:380px;
height:180px;
}

.qa-fb div{


width:calc(100% - 380px);
}

}

/* オンライン予約 */

#online{
text-align:center;
font-weight:bold;
}

#online h3{
color:#f15a24;
}

#online img{
width:75%;
max-width:430px;
}

#online ul{
max-width:860px;
margin:30px auto;
}

#online li{
margin-bottom:50px;
}

@media screen and (min-width:600px){

#online h3{
font-size:1.5rem;
}

}

@media screen and (min-width:1000px){

#online ul{
display:flex;
}

}


#close{
text-align:center;
background:#FFDFD1;
padding:50px 0;
}

#close h3{
font-size:1.3rem;
margin-bottom:30px;
}

#close img{
width:100%;
max-width:314px;
}

/* footer */

footer{
text-align:center;
padding-top:200px;
border-top:5px solid #f15a24;
}

footer p{
background:#444;
padding:10px;
color:#fff;
}