@charset "utf-8";

/*--------------共通--------------------*/
.margin30 {margin-bottom: 30px;}
.margin40 {margin-bottom: 40px;}
.margin50 {margin-bottom: 50px;}
.margin70 {margin-bottom: 70px;}

/*------nav------*/
nav.header_nav{
display: inherit;
}

nav.header_nav ul.nav_meun{
width: 40%;float: right;
padding: 1.5% 0;
z-index: 1000;
}

ul li{
font-size: 1.5rem;
list-style: none; 
}

nav.header_nav ul.nav_meun li a:hover{
border-bottom: 2px solid #6fb52c;
padding: 0 0 8% 0;
transition: 0.5s;
}

nav.side_nav{
display: none;
}


/*------side-----*/
.top_title{ 
position: fixed;
z-index: 1000;
width: 100px;
height: auto;
display: inherit;
margin: 0;
}

 h1.side_logo{
border-top: 1px solid#CCCCCC;
border-right: 1px solid#CCCCCC;
border-left: 1px solid#CCCCCC;
background: #fff;
padding: 50% 0 150%;

}

h1.side_logo .center_{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
font-size: 1.5rem;
margin: 30% 0 0 0;
letter-spacing: 0.5rem;
}

.top_title .titleBtn:hover{
opacity: 0.7;
transition: 0.8s;
}

h1.side_logo img{
width: 40%;
border-bottom: 1px solid #333333;
padding: 0 0 30%;
}
h1.header_logo {
display: none;

}



/*------予約バナー------*/
.reserve_col {
	padding-left: 120px;
}
.yoyakuBnr{
width: 400px;
margin: 2% auto 3%;
}

.yoyakuBnr:hover{
opacity: 0.6;
transition: 0.8s;
}

.service_tel a{
font-size: 200%;
}

.col_02 {
	width: 48%;
	margin-bottom: 3%;
}


/*------main------*/

.header_inner p{
line-height: 3.5rem;
}
.slider{
display: inherit;
}

br.reBr{
display: none;
}

.main_content{
margin-top: 3%;
}

.about_block{
width: 68%;margin: 0 auto;
}

.about_box{
border: 3px solid#669933;
background: #fff;
border-radius: 30px;
box-shadow: 6px 6px rgba(0,0,0,0.2);
padding: 20px 5px 10px;
width: 360px;
}

.about_inner{
margin: 0 auto;
}

.about_inner h4{
display: inline-block;
border-bottom: 1px solid;
margin: 0 auto;
padding: 0 0 2%;
}

.about_inner h4 img{
margin: 0 0 10%;
}


.step_block{
width: 80%;
margin: 0 auto;
}

.step_box{
width: 22%;
}

.step_arrow{
margin: 72px 0 0 ;
}

.step_arrow2{
display: none;
}


.about_box a:hover{
border-bottom: 2px solid #6fb52c;
padding: 0 0 2%;
transition: 0.5s;
}

/*------ガイド------*/
.guide_img img{
width: 100vw;
}

.guide_content{
   max-width: 850px;
   margin: 0 auto;
   width: 100%;
   padding-left: 120px;
}

.guide_main{
margin: 0 0 8%;
}


.guide_title{
background: #6FB52C;
height: 45px;
margin: 0 0 20px;
}

.guide_title:first-child{
margin: 0 0 10px;
}

.guide_title h3{ 
display: flex;
align-items: center;
color: #fff;
}

span.title_{ 
width: 0;
height: 0;
border-top: solid 22.5px transparent;
border-right: solid 10px transparent;
border-bottom: solid 22.5px transparent;
border-left: solid 22.5px #EDE6DB;
float: left;
left: 0;
}


.l_text{
position: relative;
padding: 10px 0 0 20px;  
}

.l_text:before{
background: #6fb52c;
content: "";
height: 1.5rem;
width: 1.5rem;
position: absolute;
left: 0;
top: 17px;
border-radius: 50px;   
}

.guide_bolck{
padding: 1% 0;
border-bottom: dashed 1px #9C9C9D;
}

.guide_bolck:last-child{
border-bottom: none;
padding: 2% 0 0 ;
}

.guide_left{
width: 10%;
}

.tel_inner{
border-bottom: 1px solid #6fb52c;
padding: 0 0 3%;
margin: 3% 0 ;
}
.sub_title{
font-size: 2.8rem;
}

.sub_title:last-child{
margin: 20px 0;
}

.guide_right{
margin: 0 0 0 1%;
width: 88%;
}

.guide_right dl dt{
font-size: 1.7rem;
font-weight: bold;
}

.guide_right dl dd{
font-size: 1.5rem;
margin: 0.5rem 0 0;
}


.guide_main table {
  border-collapse: collapse;
  border-spacing: 0;
	font-weight: bold;
	margin: 0;
	font-size: 15px;
}
td,th {
	padding: 0;
	
}

.table_center,
.table_center th{
	text-align: center;
}
.guide_main .table > thead {
	background: #ededed;
}
.guide_main .table > thead > tr >th {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-right:  1px solid #ddd;
	padding: 10px;
	font-size: 120%;
}
.table > tbody > tr >th{
	border-bottom: 1px solid #ddd;
}
.table > tbody > tr >td{
	padding: 10px;
	border-bottom: 1px solid #ddd;
	border-right:  1px solid #ddd;
	border-left:  1px solid #ddd;
}
.table > tbody > tr >td:last-child,
.table > thead > tr >th:last-child {
	border-right: none;
}


/*------レスポンシブ------*/

@media screen and (max-width:1200px){
	.guide_content{max-width: 80%;}
   .service_tel a{font-size: 150%;} 
/*nav*/
nav.header_nav ul.nav_meun{
width: 70%;
}  

/*side*/
.top_title h1.header_logo{
padding: 50% 0 100%;
}
    
/*main*/
.about_block,
.step_block{
width: 100%;
}   
}



@media screen and (max-width:1000px){
    .col_02 {
	width: 100%; 
	margin-bottom: 50px;
	text-align: center;}
	.reserve_col {padding: 0;}
/*side*/    
.top_title h1.header_logo{
padding: 50% 0 60%;
}  
    
/*予約バナー*/
.yoyakuBnr{
width: 350px;
margin: 30px auto 50px;
}

        
 /*main*/   
.about_block{
justify-content: center;
display: block;
}
    
.about_box{
margin: 5% auto;
}
    
.step_block{
justify-content: space-around;
width: 80%;
}
    
.step_box{
width: 220px;
} 
       
.guide_right{
margin: 0 0 0 2%;
}
       

}



@media screen and (max-width:768px){
  
/*side*/
.top_title{
display: none;
}
    
h1.header_logo {
display: inherit;
padding: 6% 0 2%; 
}

nav.header_nav{display: none;}
    
    
/*バーガーメニュー*/
nav.side_nav{
position: fixed;
    z-index: 1000;
    right: 0;
float: right;
margin: 6% 8% 0 0;
display: inherit;
}

    
ul.nav_inner{
 font-size: 1.6rem;
list-style: none;
 line-height: 5.0rem;
    }
    
ul.nav_inner li {
 list-style: none;
    padding: 0 0 0 10%;
    }
    
ul.nav_inner li a:hover{
border-bottom: 2px solid #6fb52c;
  padding: 0 0 2% 0;
  transition: 0.5s;
    }
    
ul.nav_inner{
  padding: 0;      
}
    
#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;
  width: 30px;
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: 90%;
  max-width: 250px;
  height: 100%;
  background: #fff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(105%);
  transform: translateX(105%);
}

/*チェックが入ったら表示*/
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

 
    
/*予約バナー*/


/*main*/
br.reBr{display: inherit;}    
    
.step_block{
justify-content: center;
display: block;
}
    
.step_box{
width: 80%;
margin: 0 auto;
} 
    
.step_arrow{
display: none;
}
    
.step_arrow2{
display: inherit;
margin: 15% 0;
}
    
.guide_img img{
object-fit: cover;
height: 200px;width: 100vw;
}
    
.guide_content{
	padding-left: 0;
}
    
.guide_left{
margin: 3% 0 0;
}  
   
.sub_title{
margin: 15px 0 0;
}  
.sub_title:last-child{
margin: 12px 0 0;
}    


}


@media screen and (max-width:480px){
     .guide_content{max-width: 90%;} 
	.service_tel a {font-size: 150%;}
	.reserve_tit img {width: 90%;} 

.service_tel li:hover{
color: #6fb52c;
}

    
/*main*/    
.about_box{
border: 3px solid#669933;
background: #fff;
border-radius: 30px;
box-shadow: 6px 6px rgba(0,0,0,0.2);
padding: 20px 20px 15px;width: 280px;
}
    
    
br.Br{
display: none;
}
    
main{
margin: 0 0 5% 0;
}
    
.step_arrow2{
margin: 10% 0;
}
 
.sub_title{
margin: 5px 0 0;
}  

.sub_title:last-child{
margin: 5px 0 0;
    }
    
.guide_img img{
object-fit: cover;
height: 155px;
width: 100vw;
}

    
}