/* CSS Document */
html{ height:100%;}
body{ background:#fff; height:100%; color:#221814; position:relative;}
a{ color:#221814;}
h1,h2,h3,p{ line-height:1.4em;}
img{ max-width:100%; vertical-align:bottom;}
.sp{ display:none;}
p{ font-size:1.4rem; line-height:1.6em; margin:0 auto; font-weight:400; text-align:left; font-family: 'Noto Sans JP', serif;}
.center{ text-align:center;}
#top .sec2 h2.title,#top .sec2 .sec2_2 .details,#top table.ingredient,#privacy h2,#privacy h3,#contact dl{ font-family: 'Noto Sans JP', serif;}


/*トグルボタン*/
#menubtn{
	width:40px;
	height:41px;
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 3;
	border:1px solid #7d8488;
    border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */
	font-family:Arial, Helvetica, sans-serif;
	}
header #menubtn{display:none;}

#menubtn #menubtn_line{
    width: 40px;
    height:40px;
    position: absolute;
    top: 0px;
    right: 0px;
	
}
#menubtn #menubtn_line span {
    display: block;
    background: #7d8488;
    width:   23px;
    height: 2px;
    position: absolute;
    left: 9px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#menubtn p{color:#fff; position:absolute; bottom:3px; left:8px;}
#menubtn #menubtn_line span:first-child {
    top: 12px;
}
#menubtn #menubtn_line span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
}
#menubtn #menubtn_line span:last-child {
    bottom: 12px;
}
#menubtn.active #menubtn_line span:first-child {
    -webkit-transform: translateY(7px) rotate(45deg);
    -moz-transform: translateY(7px) rotate(45deg);
    -ms-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}
#menubtn.active #menubtn_line span:nth-child(2) {
    opacity: 0;
}
#menubtn.active #menubtn_line span:last-child {
    -webkit-transform: translateY(-7px) rotate(-45deg);
    -moz-transform: translateY(-7px) rotate(-45deg);
    -ms-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}


/*ヘッダー*/
.header_wrap{ width:100%; background:url(../images/line.png) no-repeat bottom center; background-size:100%;}
header { width:1000px; max-width:100%; margin:0 auto; position:relative; padding-bottom:15px;}
header .header_top{ display: flex; justify-content: space-between; }
header .logo{ width:285px; top:0; left:0; margin:25px auto 10px 25px; max-width:35%;}
header .nav_wrap{ width:100%; display: flex; justify-content: space-between; }
header nav {width:850px; max-width:90%; margin:50px auto 0;}
header ul.nav { display: flex; justify-content: space-between;}
header ul.nav li{ width:150px; font-size:1.6rem; line-height:1.4rem; padding:5px 10px; font-weight:500;}
header ul.nav li span{ font-size:1.2rem; display:block; font-family: 'Noto Sans JP', serif; margin-top:3px;}
header .tel{ width:260px; font-size:2.8rem; line-height:1.2em; max-width:30%;}

#navi_toggle{ width:100%; display:none; background:rgba(255,255,255,0.9); padding:30px; position:absolute; right:0; top:0; z-index:2; box-sizing: border-box;}
#navi_toggle ul{ margin:60px 0 0 0; font-weight: 900;}
#navi_toggle ul li{ font-size:1.4rem; margin:0px 0 30px; padding:3px 5px 2px 3px; text-align:left;}
#navi_toggle ul li span{ padding-left:10px;}


/*フッター*/
#footer_wrap { width:100%; max-width:100%; margin:0 auto; padding:40px 0; background:url(../images/line.png) no-repeat top center; background-size:100%;}
footer{ width:1000px; max-width:95%; margin:0 auto; overflow:hidden; display:flex; justify-content: space-between; flex-wrap: wrap; text-align:left; }
footer .left_box{ width:40%; padding:0; margin:0;}
footer .left_box h1.logo{ margin-bottom:30px;}
footer .left_box h2{ margin-bottom:10px; font-size:2.4rem; line-height:1.2em;}
footer .left_box p{font-size:1.4rem; line-height:1.4em; font-weight:500;}
footer .left_box .tel{ font-size:1.4rem;  padding-left:20px; position:relative; margin-top:10px;}
footer .left_box .tel:before{ content:""; width:20px; height:20px; position:absolute; left:0; top:-3px; background:url(../images/tel.png) no-repeat; background-size:cover;}

footer .right_box{ width:60%; font-size:1.4rem; line-height:1.2em; padding:0; }
footer .right_box ul{}
footer .right_box ul li{ text-align:right; padding:10px 25px;}
footer .right_box ul li span{ padding-left:5px;}
footer .right_box ul li.reserve_btn{margin:0 0 30px auto; text-align:center; padding:10px 10px;}

/*共通*/
h1.title{ font-size:2.6rem; line-height:1.4em; margin:100px auto 80px;}

/*トップページ*/
#top h1{ font-size:4rem; line-height:1.2em; margin-top:100px;}
#top h1 span{ font-size:1.8rem; line-height:1.2em; display:block; margin:40px auto 30px;}
#top .sec2 { width:740px; max-width:100%; margin:0 auto;}
#top .sec2 .sec2_0 p{ margin:100px auto; font-size:1.6rem;}
#top .sec2 .sec2_1 p{ margin:20px auto; font-size:1.6rem;}
#top .sec2 .sec2_1 h2{ font-size:3.0rem; line-height:1.2em;}
#top .sec2 .sec2_1 h2 span{ font-size:1.8rem;}
#top .sec2 .sec2_1,#top .sec2 .sec2_2,#top .sec2 .sec2_3,#top .sec2 .sec2_4{ border-bottom:1px solid #999; padding:30px 20px 30px 20px; box-sizing: border-box;}
#top .sec2 .sec2_2 .details{ width:680px; max-width:100%; margin:0 auto; display:flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start;}
#top .sec2 .sec2_2 .details div,#top .sec2 .sec2_2 .details img{ margin-bottom:20px;}
#top .sec2 .sec2_2 .details div{ width:calc(100% - 182px); text-align:left; }
#top .sec2 .sec2_2 .details h3{ font-size:1.4rem; line-height:1.4em; margin-bottom:5px;}
#top .sec2 .sec2_2 .details h3:before{ content:"□";}
#top .sec2 h2.title{ font-size:2.6rem; line-height:1.2em; margin:0px 0 40px; text-align:left;}
#top .sec2 .sec2_2 .details p.effect{ color:#9F7D42;}
#top .sec2 .sec2_4{ border-bottom:none;}
#top table.ingredient{ font-size:1.2em;}
#top table.ingredient th{ padding:5px 10px; text-align:center; background:#CCCCCC; border:1px solid #666; border-bottom:none;}
#top table.ingredient td{ padding:5px 10px; text-align:left; border:1px solid #666; border-bottom:none; white-space: nowrap; }

#top .ingredient_wrap{ width:100%; height:700px; overflow:scroll; margin:30px 0;}

#top .sec3 h1{ margin-bottom:50px;}
#top .sec3 .equipment_list{ width:1020px; max-width:100%; margin:0 auto 50px;  display:flex; justify-content: space-between; flex-wrap: wrap; align-items:stretch;}
#top .sec3 .equipment_list div{ width:324px; margin:0 15px 15px 0;}
#top .sec3 .equipment_list div img { border:1px solid #999;}
#top .sec3 .equipment_list div p{ padding:10px;}
#top .buy_banner{ width:320px; box-sizing:border-box; max-width:95%; margin:20px auto; padding:20px; background:#666666; color:#fff; font-size:2em; line-height:1.4em;}

#top .sec0 { padding-bottom:100px;}
#top .sec0 .mainimage{display:flex; justify-content:center; flex-wrap:wrap; align-items:center;}
#top .sec0 .mainimage img{ width:640px;}
#top .sec0 .mainimage h1{ padding:50px;}
#top .sec0 h2{  font-size: clamp(1.8rem, calc(2rem + 1.2vw), 3rem); letter-spacing:0.1em; line-height:1.6em; margin:100px auto 80px; text-align:center;}
#top .sec0 ul{ width:1200px; max-width:100%; margin:50px auto; display:flex; justify-content:center; flex-wrap:wrap;}
#top .sec0 ul li{ width:240px; margin:0;}

#about{ width:820px; max-width:90%; margin:0 auto;}
#about p{ margin:20px auto;}
#about dl{ width:420px; margin:60px auto; max-width:100%; font-size:1.5rem; line-height:1.8em; display:flex; justify-content: space-between; flex-wrap: wrap; align-items:stretch; text-align:left;}
#about dt{ width:90px; border-bottom:1px solid #999999; padding:10px; box-sizing: border-box;}
#about dd{ width:calc(100% - 90px); border-bottom:1px solid #999999; padding:10px; box-sizing: border-box;}
#about dt:last-of-type,#about dd:last-of-type{ border-bottom:none;}


#revitalization .sec1{width:1126px; max-width:100%;  margin:30px auto; text-align:left;}
#revitalization .sec1 p{ width:980px; max-width:100%; padding:20px; font-size:1.6rem; line-height:2em;}

#revitalization .sec2{ width:1000px; max-width:100%;  margin:30px auto; text-align:left;}
#revitalization .menber_wrap,#revitalization .menber_wrap2{display:flex; justify-content:center; flex-wrap: wrap;}
#revitalization .menber_wrap .menber { width:262px; margin:5px; background:#FDFAF7; padding:10px 30px;}
#revitalization .menber_wrap2 .menber { width:205px; margin:5px; background:#FDFAF7; padding:10px 10px;}
#revitalization .menber p{ font-size:1.8rem; line-height:1.4em; font-weight:600; padding:10px;}
#revitalization .menber span{ font-size:2.8rem; line-height:1.2em; display:block; margin-bottom:5px; letter-spacing:0.05em;}
#revitalization h2{ font-size:2.4em; line-height:1.6em; text-align:left; margin:60px auto 20px; border-bottom:1px solid #999999; padding:0 20px; letter-spacing:0.05em;}

#revitalization .sec3{ width:1000px; max-width:100%;  margin:30px auto 60px; text-align:left;}
#revitalization .sec3 p.price{ font-size:2.4em; line-height:1.4em; color: #000E3C; margin-bottom:30px; font-weight:bold;}
#revitalization .sec3 p{ font-size:1.6rem; line-height:1.8em; margin-bottom:40px;}
#revitalization h3 {
  display: inline-block;
  position: relative;
  height: 40px;/*リボンの高さ*/
  line-height: 40px;/*リボンの高さ*/
  text-align: center;
  padding: 0 30px;/*横の大きさ*/
  font-size: 18px;/*文字の大きさ*/
  background: #000E3C;/*塗りつぶし色*/
  color: #FFF;/*文字色*/
  box-sizing: border-box;
  margin:15px 0;
}


#revitalization h3:before, #revitalization h3:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}
#revitalization h3:before {
  top: 0;
  left: 0;
  border-width: 20px 0px 20px 15px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}

#revitalization h3:after {
  top: 0;
  right: 0;
  border-width: 20px 15px 20px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}




.gmap {
position: relative;
width:800px;
padding-bottom: 50%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 
 
 
a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}



#privacy { width:800px; max-width:90%; margin:60px auto;}
#privacy h2{ max-width:100%;  text-align:left; font-size:1.8rem; line-height:1.4em; margin:13px auto 16px;}
#privacy h3{ max-width:100%;  font-size:1.6rem; line-height:1.6em; text-align:left; margin:0 auto 5px;}
#privacy p{ max-width:100%; font-size:1.4rem; line-height:1.6em; text-align:left; margin-bottom:20px;}
#privacy .sec1 section{ margin-bottom:60px;}

#contact{ width:800px; max-width:90%; margin:60px auto 100px;}

#contact p{ font-size:1.4em; line-height:3em; }
@media screen and (max-width: 1033px){
#top .sec3 .equipment_list{justify-content:center;}
}


@media screen and (max-width: 960px){
header .nav_wrap,header ul.sns_nav{ display:none;}
header #menubtn{ display:block;}


}
@media screen and (max-width: 900px){


}
@media screen and (max-width: 780px){
}
/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
.spno{ display:none;}
}





/*600以下 */
@media screen and (max-width: 600px){










#footer_wrap{ padding:30px 0;}

footer .left_box{ width:100%; padding:0; margin:0;}
footer .logo{max-width:60%;}
footer .right_box{ width:100%;}
footer .right_box ul{margin:30px 0 ; }
footer .right_box ul li{ padding:8px 15px; text-align:left;}
footer .right_box ul li.reserve_btn{margin:0 0 30px 0;}

}

/*560以下 */
@media screen and (max-width: 560px){
header .logo{ margin:15px auto 10px 15px; max-width:60%;}







/*グーぐるマップ*/
.gmap {
position: relative;
width:480px;
padding-bottom: 70%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
	
}
/*414以下 iphone縦*/
@media screen and (max-width: 414px){
	
.spno2{ display:none;}






}