@charset "UTF-8";

*{
 margin: 0;
 padding: 0;
}

body{
word-wrap: break-word;
max-width:100%;
background-image:url("images/bg.jpg");
background-repeat: no-repeat;
 background-size:cover;
background-position: center center;
}


html {
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size : 100%;
  line-height : 1.5;
  color: #000;
  
  scroll-behavior: smooth;
}

h1,h2,h3,h4,h5,h6 {
 margin-bottom : 1em;
}

h1 {
font-size : 36px; 
line-height : 1.2;
} /* 48px */

h2 {
font-size : 24px;
line-height : 1.2;
font-weight: normal;

} /* 48px */

h3 {
font-size : 24px;
line-height : 1.2;
font-family: 'M PLUS Rounded 1c', sans-serif;
} /* 24px */



ul, ol {
	  list-style : none;
	  }
img { 
         vertical-align : middle;
         max-width: 100%;
         height: auto;
         }

p{
    line-height: 1.5em;
    margin-bottom: 1em;
}


body{
text-align: left;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}


a{
 text-decoration: none;
 color:#424242;
 transition: 0.4s ease-in-out;  
}

a:hover {  
    opacity: 0.5;  
    filter: alpha(opacity=60);  
} 


/* text */

.left{
 text-align: left;
}

.right{
 text-align: right;
}

.center{
 text-align: center;
}

.bold{
 font-weight: bold;
}

.small{
 font-weight: normal;
 font-size: 0.8em;
}


.big{
 font-weight: bold;

}




/* header */
header{
background-image:url("images/bg_sp.jpg");
background-repeat: no-repeat;
 background-size:cover;
 width: 100%;
 color: #fff;
text-align: center;
 height:400px;
  display:table;
  text-align:center;

}

.header_in{
 display:table-cell;
  vertical-align:middle;
}



header h1{
font-size: 1.8em;
letter-spacing: 0.1em;
}

header p.catch{
letter-spacing: 0.1em;
}


p.button{
position: fixed; 
top: 0px;
right: 10px; 
width:250px;
background: red;
border-radius:0px 0px 10px 10px;
}

p.button a{
display: block;
padding: 0.2em 1em;
color: #fff;
}

header h1{
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.1em; 
}


.box{
padding-left: 1em;
padding-right: 1em;
padding-top: 4em;
padding-bottom: 6em;

}

.box h2{
letter-spacing: 0.1em; 
font-family: 'Shippori Mincho', serif;
margin-bottom: 0;
}

.box h2.title{
margin-bottom: 1em;
}

.box figure.line{
margin-bottom: 0.5em;
}

.box p{
line-height: 1.8em;
margin-bottom: 2em;
}

table{
width: 100%;
margin-bottom: 4em;
}

table th{
background: #D4D4D4;
padding: 0.5em 1em;
}
table td{
background: #F2F2F2;
padding: 0.5em 1em;
}


p.price{
margin-bottom: 0.2em;
font-size: 1.4em;
}

footer{
background: #141414;
color: #fff;
padding:4em 2em;
}

footer a{
color: #fff;
}

p.tel{
background: red;
text-align: center;
}

p.tel a{
display: block;
padding: 0.5em 1em;
color: #fff;
}

.googlemap{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 30%;
    margin-bottom: 2em;
}
.googlemap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

small p{
text-align: center;
font-size: 0.9em;
margin-top: 4em;
}




@media screen and (min-width:768px){
header{
background-image:url("images/bg_pc.jpg");
 height:800px;
}

header p{
font-size:1.2em;
}

header h1{
font-size: 2.3em;
letter-spacing: 0.1em;
}


p.button{
width:300px;
}

p.button a{
padding: 0.2em 1em;

}


.box h2{
font-size: 2em;
}

.box2{
padding-left: 25%;
}


footer h2{
font-size: 2em;
}


}

@media screen and (min-width:960px){
/*flex*/


.flex_container_pc{
flex-wrap:wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items:stretch;
}


.flex_re{
   display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.flex_center{
 justify-content: center;
  align-items: center;
}



.flex_half_pc{

width: 48%;
margin: 1%;
box-sizing: border-box;
}

header h1{
font-size: 2.8em;
letter-spacing: 0.1em;
}

p.button{
font-size: 1.4em;
width:350px;

}

p{
font-size: 1.2em;
}

footer p.tel{
width: 400px;

}

}

@media screen and (min-width:1200px){
.box1_left{
width: 60%;
box-sizing: border-box;
}

.box1_right{
width: 35%;
box-sizing: border-box;
}

.box2 figure.img3{
max-width:450px; 
}

.box_in{
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}

.box5{
margin-top: 5em;
margin-bottom: 5em;
padding-top: 4em;
padding-bottom: 4em;
}

}