/* CSS Document */
*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box; height:100%;
}
body{ background:#fff; height:100%; color:#221814; position:relative; font-family: "Zen Kaku Gothic New", sans-serif;}
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.6rem; line-height:1.8em; margin:0 auto; font-weight:400; text-align:left;}
.center{ text-align:center;}

/*トグルボタン*/
#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 { width:1200px; max-width:95%; margin:0 auto; position:relative; padding-bottom:15px;}
header .header_top{display:flex; justify-content: space-between; flex-wrap:wrap; align-items: flex-end;}
header .header_top .left_box{display:flex; justify-content: space-between; flex-wrap:wrap; align-items: flex-end;}
header .logo{ padding:25px 10px 0px 0px; font-family: "Libre Baskerville", serif; font-weight:500; font-size:clamp(2.6rem, 1.6736rem + 2.11vw, 4.2rem);}
header .logo span{ display:block; text-align:right; margin:0; line-height:1em; font-size:1.4rem;}
header p{ padding:0 10px 10px 10px; margin:0; line-height:1.2em; font-size:1.4rem;}
header .trial_banner{ text-align:center; font-size:clamp(1.8rem, 1.4528rem + 0.79vw, 2.4rem); line-height:1.4em; background:#45AED6; color:#fff; padding:10px 25px; border-radius:10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -moz-border-radius: 10px; }
header .trial_banner span{ display:block; font-size:1.4rem; line-height:1.4em;}
header .trial_banner:hover{ background:#75CAEE;}


/*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:#45AED6; color:#fff;}
footer{ width:1000px; max-width:95%; margin:0 auto; }
footer .logo{ padding:25px 20px 10px 20px; width:200px; font-family: "Libre Baskerville", serif; font-weight:500; font-size:clamp(2.6rem, 1.6736rem + 2.11vw, 4.2rem); text-align:left;}
footer .logo span{ display:block; text-align:right; margin:0; line-height:1em; font-size:1.4rem;}
footer a{ color:#fff;}
footer p{ margin:10px 0 20px;}



/*共通*/
h1.title{}
.col_box{display:flex; justify-content:center; flex-wrap:wrap;}
.wrap{ width:1200px; max-width:100%; margin:0 auto;}
/*トップページ*/
.main_image{ font-family: "Zen Old Mincho", serif; margin:0 auto; padding-top:50%; position:relative; background:url(../images/mainimage.jpg) no-repeat; background-position:right; background-size:cover;}
.main_image .text_box{ position:absolute; top:0; left:0; }
.main_image h1{margin:100px 50px 50px; font-size: clamp(2.2rem, calc(2.2rem + 1.2vw), 3.8rem); line-height:1.4em; text-align:left;}
.main_image h1 span{font-size:clamp(1.4rem, 1.4528rem + 0.79vw, 2.4rem); display:block; line-height:1.6em;}
.main_image .name{ color:#fff; position:absolute; right:0px; bottom:0px; margin:30px;}
.main_image .trial_banner{ width:380px; margin:0 auto; background:rgba(255,255,255,0.5); border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -moz-border-radius: 50px; }
.main_image .trial_banner p{ font-size:clamp(1.8rem, 1.568rem + 0.53vw, 2.2rem); line-height:1.4em; padding:15px; text-align:center;}


@media screen and (min-width: 1200px){
	.main_image{padding-top:700px;}
}
@media screen and (max-width: 900px){
	.main_image{ padding-top:60%;}
}
@media screen and (max-width: 700px){
	.main_image{ padding-top:90%; background-position:right -60px top;}
	.main_image h1{margin:20px 30px;}
	.main_image .text_box{ top:auto; left:0; bottom:50px; }
}
@media screen and (max-width: 460px){
	.main_image{ padding-top:120%; background-position:right -60px bottom;}
	.main_image h1{margin:20px 20px;}
	.main_image .text_box{top:auto; left:0; bottom:0px; }
}
@media screen and (max-width: 320px){
	.main_image h1{ font-size:2.2rem;}

}

.title{ width:1200px; max-width:100%; margin:50px auto; background:#45AED6; color:#fff; display:flex; flex-wrap:wrap; justify-content: left; align-items:center;}
.title img{ max-width:400px;}
.title h1{ padding:30px 40px; text-align:left; font-size:clamp(1.8rem, 1.4528rem + 0.79vw, 2.4rem);}

.title2{ margin:80px auto 50px; font-family: "Libre Baskerville", serif; font-weight:400; font-size:clamp(2.6rem, 1.6736rem + 2.11vw, 4.2rem);}
.title2 span{ display:block; line-height:1em; font-size:1.4rem;}

.text1{  font-size:clamp(1.8rem, 1.4528rem + 0.79vw, 2.4rem); color:#1692C7; line-height:1.6em; font-family: "Zen Old Mincho", serif; text-align:center;}
.text2{  font-size:clamp(1.8rem, 1.4528rem + 0.79vw, 2.4rem); color:#C95F7C; line-height:1.6em; font-family: "Zen Old Mincho", serif;}

@media screen and (max-width: 660px){
.title{  margin:30px auto; display:block;}
.title img{ width:100%; max-width:100%;}

}

.sec1 h3{ max-width:90%; margin:80px auto 50px;}
.sec1 h4{ width:900px; max-width:90%; margin:0 auto 0; text-align:left; font-size:clamp(1.6rem, 1.3552rem + 0.56vw, 1.8rem);}

.sec1 p{ width:900px; max-width:90%;}
.sec1 p.text2{ margin:100px auto;}
.sec1 .cf{ border-top:1px solid #999; border-bottom:1px solid #999; padding:40px 0;}
.sec1 .cf dl{ width:900px; max-width:90%; margin:30px auto; font-size:1.4rem; line-height:1.4em; text-align:left; display:flex; justify-content: space-between; flex-wrap:wrap;}
.sec1 .cf dt{ width:300px; color:#1692C7; padding:5px 10px;}
.sec1 .cf dt:before{ content:"□"; padding-right:5px;}
.sec1 .cf dd{ width:calc(100% - 300px); padding:5px 10px;}

.sec1 .price dl{ width:900px; max-width:90%; margin:30px auto; font-size:1.6rem; line-height:1.4em; text-align:left; display:flex; justify-content: space-between; flex-wrap:wrap;}
.sec1 .price dt{ width:100px; color:#1692C7; padding:5px 10px;}
.sec1 .price dt:before{ content:"■"; padding-right:5px;}
.sec1 .price dd{ width:calc(100% - 100px); padding:5px 10px;}
.sec1 .price dd span{ color:#1692C7;}
.sec1 .price p{ font-size:1.4rem; line-height:1.2em;}
.sec1 .price_image{ margin:40px auto; display:flex; justify-content:center; flex-wrap:wrap; font-size:clamp(2.6rem, 1.6736rem + 2.11vw, 4.2rem); align-items:center;}
.sec1 .price_image img{ margin:10px;}
.sec1 .price_image div{ padding:20px; color:#C95F7C; font-weight:bold;}

@media screen and (max-width: 660px){
.sec1 .price dl{ display:block;}
.sec1 .cf dt{ width:100%; }
.sec1 .cf dd{ width:100%;}
.sec1 .price dd{  width:100%; padding:5px 10px;}

}


.sec2{ padding-bottom:100px;}
.sec2>p{ width:1000px; max-width:90%; margin:50px auto;}
.sec2 p span.fb{ font-weight:bold;}

.sec2 .example{ width:900px; max-width:100%; margin:0 auto; justify-content:center}
.sec2 .col_box div{ width:450px; max-width:100%; padding:30px;}
.sec2 .col_box div h2{ font-size:clamp(1.6rem, 1.3552rem + 0.56vw, 1.8rem); line-height:1.4em; margin:20px auto 10px; color:#fff; background:#C95F7C; padding:10px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -moz-border-radius: 4px; }
.sec2 .col_box  p.ex{  font-size:clamp(1.6rem, 1.368rem + 0.53vw, 2rem);}
.sec2 .col_box  p.ex span{ font-size:1.6rem;}
.sec2 .col_box  p{ font-size:1.6rem; line-height:1.6em; padding:10px 0;}
.sec2 .col_box  p.note{  color:#C95F7C; font-size:1.4rem; line-height:1.2em;}

.sec2_3{ padding-bottom:100px;border-bottom:1px solid #999; }
.sec2_3 p{ width:1000px; max-width:90%; margin:50px auto 50px;}

.sec3{ border-bottom:1px solid #999; padding-bottom:100px;}
.sec3 .title{ margin:0 auto;}
.sec3>p{ width:1000px; max-width:90%; margin:50px auto 0;}
.sec3 p span.fb{ font-weight:bold; color:#C95F7C;}

.sec4 { width:1000px; max-width:90%; margin:0 auto;}
.sec4 .point{ width:700px; max-width:100%; display:flex; justify-content: center; flex-wrap:wrap; margin:0 auto 50px;}
.sec4 .point div{ font-size:clamp(1.8rem, 1.4528rem + 0.79vw, 2.4rem); line-height:1.4em; color:#fff; background:#45AED6; padding:10px 25px; margin:10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -moz-border-radius: 10px;}
.sec4 h2{ width:250px; max-width:95%; font-size:clamp(1.6rem, 1.3552rem + 0.56vw, 1.8rem); line-height:1.4em; margin:20px auto 10px 0; color:#fff; background:#C95F7C; padding:10px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -moz-border-radius: 4px; }
.sec4 p{ font-size:clamp(1.8rem, 1.4528rem + 0.79vw, 2.4rem);}
.sec4 p.detail{ font-size:1.6rem;}

.sec4 .col_box{ align-items:center; margin:50px auto;}
.sec4 .col_box .left_box{ width:700px; max-width:70%; padding:20px;}
.sec4 .col_box .left_box p{ text-align:left;}
.sec4 .col_box .right_box{ width:300px; max-width:30%;}
.sec4 .col_box .right_box img{  object-fit: cover; border-radius:50%;}
@media screen and (max-width: 500px){
.sec4 .col_box{ display:block;}
.sec4 .col_box .left_box{ max-width:100%; padding:20px;}
.sec4 .col_box .right_box{ max-width:100%; margin:0 auto;}
}
.sec5{ background:#eee; padding:50px 10px;}
.sec5 p{ text-align:center;}


.thanks{ margin:100px auto; max-width:90%;}
.thanks h1{ margin:0 auto 30px}
.thanks p{ width:800px; max-width:100%; margin:50px auto;}


.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){
}


@media screen and (max-width: 960px){
header .nav_wrap{ 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 0px 10px; 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;}






}