.yyk-head{
background-image: url(./img/top_img_bg.png);
background-position: center top;
overflow: hidden;
background-color: #fdf9f0;
height: 500px;
position: relative;
width: 100%;
}
.yyk_bg{
background: #fdf9f0;
width: 800px;
height: 500px;
margin: 0 auto;
}
.yyk_top_bg,.yyk_btm_bg{
width: 100%;
position: absolute;
background: rgba(68, 166, 138,0.3);
mix-blend-mode: multiply;
}
.yyk_top_bg{
height: 20px;
top: 0;
}
.yyk_btm_bg{
height: 30px;
bottom: 0;
}
.yyk_header_wrap{
width: 1100px;
height: 500px;
position: absolute;
transform: translate(-50%, 0);
top: 0;
left: 50%;
}
.yyk_header_co{
width: 1100px;
height: 450px;
position: relative;
}
.toptext_co {
font-size: 16px;
width: 670px;
background: #fff;
padding: 5.5em 0em 2em;
margin: 50px auto 0;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
text-align: center;
position: relative;
border-radius: 2em;
}
.fukidasi {
font-size: 1.8em;
right: -4em;
top: 0.6em;
padding: 0.3em 0.9em 0.1em;
position: absolute;
display: inline-block;
border: 4px solid #000;
border-radius: 50px;
background-color: #fff;
}
.fukidasi::before,.fukidasi::after {
content: "";
position: absolute;
bottom: 0;
left: 25%;
border-style: solid;
transform: skew(-25deg);
transform-origin: top;
}
.fukidasi::before { border-width: 20px 20px 0 0; border-color: #000000 transparent transparent; translate: -50% 100%; }
.fukidasi::after { border-width: 10.2px 11.2px 0 0; border-color: #fff transparent transparent; translate: calc(-50% - 0.4px) 100%; }
.subtext {
background: #db0304;
position: absolute;
font-size: 1.5em;
font-weight: bold;
padding: 0.4em 1em 0.3em;
left: -3em;
top: 0.5em;
width: fit-content;
color: #fff;
border-radius: 10px;
margin-bottom: 15px;
}
.yyk_title{
font-size: 3em;
font-weight: bold;
}
.yyk_h2{
font-size: 3.5em;
line-height: 1.2;
}
.top_ill01,.top_ill02,.top_ill03{position: absolute;}
.top_ill01{left: 0;bottom: 10px;}
.top_ill02{right: 160px;bottom: 40px;}
.top_ill03{right: 40px;bottom: 0;transform: rotate(-13deg);}

#bug-st-yyk section{padding: 4em 0;}
#bug-st-yyk section.bg{background: #fdf9f0;}

#bug-st-yyk .main{
color: #4c4c4c;
padding: 0;
max-width: unset;
width: 1100px;
}
.h2-text{
position: relative;
text-align: center;
font-size: 1.6em;
}
.h2-text::before {
margin-right: 10px;
content: '＼';
}
.h2-text::after {
margin-left: 10px;
content: '／';
}

.reserve_link_wrap{
width: 500px;
margin: 1em auto 0;
}
.reserve_link_wrap a{
font-size: 2.2em;
background: #ffedc2;
padding: 0.9em 0.8em 0.8em;
display: block;
text-align: center;
border-radius: 100px;
position: relative;
border: solid 7px #fbbe09;
box-shadow: 0px 7px 0 #fbbe09;
}
.reserve_link_wrap a::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f0da";
position: absolute;
right: 0.5em;
font-size: 1.7em;
top: 50%;
transform: translate(0%, -50%);
color: #ff6a48;
}
.reserve_link_wrap a:hover{
opacity: 1;
color: #fff;
background: #fbbe09;
box-shadow: none;
}
.reserve_link_wrap a:hover::before{color: #fff;}
.yoyaku_wrap{margin: 3em 0 0;}

.flex-wrap {
display: flex;
flex-wrap: wrap;
}

/* 困った------------------------------------------------------------*/
.problem{}
.problem{
background: #fff;
width: 800px;
margin: 0 auto 3em;
border-radius: 3em;
padding: 2em;
}
.problem_co{width: 100%;}
.problem_co.right{
justify-content: end;
align-items: flex-start;
}
.problem_co.left{align-items: flex-start;}

.problem_co img{
width: 80px;
border-radius: 50px;
}
.problem_co.right img{
background: #35a5fc;
margin: 2em 0 0 0.6em;
}
.problem_co.left img{
background: #fce635;
margin: 2em 0.6em 0 0;
order: 1;
}

/* 吹き出し本体 */
.balloon{
position: relative;
width: 55%;
padding: 15px;
background-color: #ddf2a1;
border-radius: 10px;
font-size: 1.3em;
}
/* 色付きの半円 */
.balloon::before{
content:'';
position:absolute;
display:block;
width:0;
height:0;
border-radius:50%;
transform:rotate(45deg);
bottom:-19px;
border-right: 25px solid #ddf2a1;
border-bottom: 20px solid #ddf2a1;
border-left:20px solid transparent;
border-top:20px solid transparent;
}
/* 白い半円 */
.balloon::after{
content:'';
position:absolute;
display:block;
width:0;
height:0;
border-radius:50%;
transform:rotate(45deg);
bottom:-20px;
border-right:20px solid #fff;
border-bottom:20px solid #fff;
border-left:20px solid transparent;
border-top:20px solid transparent;
}
.problem_co.right .balloon::before{ right:1em; }
.problem_co.right .balloon::after{ right:0em; }
.problem_co.left .balloon{order: 2;}
.problem_co.left .balloon::before{ left:0.5em; }
.problem_co.left .balloon::after{ left:-0.3em; }

p.h3_text{
text-align: center;
font-size: 1.7em;
color: #db0304;
font-weight: bold;
}
h3.h3_text{
text-align: center;
font-size: 2em;
margin: 0.5em 0 0.8em;}
.info_text{
text-align: center;
font-size: 1.2em;
line-height: 1.8;
}

.ill_co{position: relative}
.ill_lady,.ill_man{position: absolute;}
.ill_lady{
bottom: -1em;
left: -1em;
width: 200px;
}
.ill_man{
bottom: -5em;
right: 2em;
width: 220px;
}

/* 料金------------------------------------------------------------*/
.h3_title{
font-size: 2em;
background: #fff;
text-align: center;
/*width: 90%*/;
margin: 0 auto 1em;
padding: 0.6em;
color: #44a68a;
border: solid 4px;
box-shadow: 0px 5px 0 #44a68a;
border-radius: 50px;
}
.flex-wrap.size{
justify-content: center;
margin: 1.5em 0 5em;
}
.size_co{
background: #fff;
width: 40%;
text-align: center;
margin: 0 2%;
border-radius: 1em;
padding: 0 0 1em;
border: solid 1px #44a68a;
}
.size_co h4,.shop h4{
margin-bottom: 0;
background: #44a68a;
color: #fff;
border-radius: 6px 6px 0 0;
padding: 10px;
font-size: 1.4em;
}
.price{
font-size: 1.6em;
font-weight: bold;
background:#f7f7f7;
padding:0.6em 0 0.5em;
margin-bottom: 0.5em;
}
.price span{font-size: 0.7em;font-weight: normal;}
.size-img_S{padding: 2.7em 0;}
.size-img_M{padding: 1em 0;}

/* 店舗情報------------------------------------------------------------*/
.flex-wrap.shop{
width: 96%;
margin: 1em auto;
justify-content: space-between;
}
.shop h4{width: 100%;}
.l_col_info_f,.map_wrap_f{width: 49%;padding: 1em 1% 0;}
.l_shop_info,.l_shop_info_f{display: flex;flex-wrap: wrap;}
.l_shop_info dt,.l_shop_info_f dt{
font-weight: bold;
background: #bdded0;
padding: 0.5em;
margin-bottom: 2px;
text-align: center;
}
.l_shop_info dd,.l_shop_info_f dd{padding: 0.5em;}
.l_shop_info dt.dt1,.l_shop_info_f dt.dt1{width: 20%;}
.l_shop_info dd.dd1,.l_shop_info_f dd.dd1{width: calc(100% - 20%);}
.l_shop_info dt.dt2,.l_shop_info_f dt.dt2{
width: 100%;
color: #b49844;
background: #f7f4ec;
margin-top: 5px;
}
.l_shop_info dt.dt2.tel,
.l_shop_info_f dt.dt2.tel{color: #4c4c4c;background: #fff0ed;margin-top: 1em;}
.l_shop_info dd.dd2,.l_shop_info_f dd.dd2{width: 100%;}
.l_shop_info dd.dd2.tel,.l_shop_info_f dd.dd2.tel{padding: 0.5em 0.2em;}
.l_shop_info dd.dd2 .list-13 li,.l_shop_info_f dd.dd2 .list-13 li{margin-left: 1.4em;}
.map_wrap_f .map_area{width: 100%;height: 380px;}

/* 注意事項------------------------------------------------------------*/
.note_wrap{
width: 96%;
margin: 1em auto 0;
font-size: 1.1em;
}
.note_wrap .list-15{
width: 98%;
margin: 0 auto;
}
.flex-wrap.ng{}
.ng_co{
width: calc(100% / 3 - 2%);
margin: 1%;
background: #fff;
text-align: center;
padding: 0 1em 1em;
border-radius: 0.5em;
}
.ng_co ul{
text-align: left;
list-style: disc;
padding-left: 1em;
}
.ng_co li{}

/* よくある質問 ------------------------------------------- */
.qa_wrap {
width: 96%;
margin: 1em auto 0;
font-size: 1.1em;
}
.qa_wrap h4 {
border-bottom: solid 3px #bdded0;
position: relative;
padding: 0.5em 0 0.5em 1em;
background: #f1f1f1;
font-size: 1.2em;
}
.qa_wrap h4 span {color: #146dca; font-size: 1.5em; padding-right: 0.3em; }
.qa_wrap .qa-a { padding: 1em 1em 2em 1em; }
.qa_wrap .qa-a span {color: #ff6a48; font-size: 1.8em; font-weight: bold; padding-right: 5px; }

/* 予約ボタン ------------------------------------------- */
.flex-wrap.search_wrap {
width: 96%;
margin: 1em auto;
}
/*.search_wrap a{border: solid 1px #44a68a;}*/
.search_wrap a::before{color: #ff6a48;}

@media screen and (max-width: 767px) {
.yyk-head{height: 450px;background-size: 90%;}
.yyk_bg{height: 450px;width: 92%;}
.yyk_top_bg,.yyk_btm_bg{}
.yyk_top_bg{height: 15px;}
.yyk_btm_bg{height: 25px;}
.yyk_header_wrap{width: 100%;height: 450px;}
.yyk_header_co{width: 100%;height: 420px;}
.toptext_co {
width: 85%;
margin: 30px auto 0;
border-radius: 1em;
padding: 0.5em 0em 2em;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
position: unset;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.fukidasi {
font-size: 1.2em;
position: unset;
margin-bottom: 0.8em;
border: 3px solid #000;
order: 2;
}
.fukidasi::before,.fukidasi::after {display: none;}
.subtext {
font-size: 1.1em;
position: unset;
width: auto;
text-align: center;
order: 1;
padding: 0.4em 0.5em 0.3em;
margin-bottom: 0.5em;
}
.yyk_title{font-size: 1.6em;margin-bottom: 5px;order: 3;}
.yyk_h2{font-size: 2.2em;order: 4;}
.top_ill01{width: 200px;}
.top_ill02{width: 80px;right: 100px;bottom: 90px;}
.top_ill03{width: 90px;right: 10px;}

#bug-st-yyk section{}

#bug-st-yyk .main{width: 98%;}
.h2-text{font-size: 1.3em;}
.reserve_link_wrap{width: 75%;}
.reserve_link_wrap a{font-size: 1.6em;border: solid 5px #fbbe09;box-shadow: 0px 4px 0 #fbbe09;}

/* 困った------------------------------------------------------------*/
.problem{width: 95%;border-radius: 2em;padding: 1em 1em 0em;margin: 0 auto 5em;}
.problem_co{margin-bottom: 1em;}
.problem_co img{width: 60px;}
.problem_co.right img{margin: 0.5em 0 0 0;}
.problem_co.left img{margin: 0.5em 0 0 0;order: 2;}
.balloon{width: 85%;font-size: 1.1em;}
.problem_co.right .balloon::before{right: 4.5em;}
.problem_co.right .balloon::after{right: 3.5em;}
.problem_co.left .balloon{order: 1;}
.problem_co.left .balloon::before{left: 4em;}
.problem_co.left .balloon::after{left: 3.3em;}
h3.h3_text{font-size: 1.8em;line-height: 1.2;}
.info_text{font-size: 1.1em;}
.ill_lady{width: 80px;bottom: 10em;left: 0em;}
.ill_man{width: 90px;bottom: 12em;right: 0em;}

/* 料金------------------------------------------------------------*/
.h3_title{
font-size: 1.5em;
border: solid 3px;
box-shadow: 0px 4px 0 #44a68a;
margin: 0 auto 0.7em;
padding: 0.8em 0.6em 0.6em;
}
.size_co{width: 90%;border-radius: 10px;margin: 0 auto 1em;}
.size_co h4,.shop h4{font-size: 1.2em;}
.price{font-size: 1.5em;}
.size-img_S,.size-img_M{padding: 0.5em 0;}

/* 店舗情報------------------------------------------------------------*/
.l_col_info_f,.map_wrap_f{width: 98%;}

/* 注意事項------------------------------------------------------------*/
.ng_co{width: calc(100% / 1 - 2%);display: flex;padding: 0.5em;}
.ng_co img{width: 60px;height: 60px;margin-right: 10px;}
.ng_co li{float: left;margin-right: 2em;}

/* よくある質問 ------------------------------------------- */
.qa_wrap h4 {font-size: 1.1em;}
.qa_wrap h4 span {font-size: 1.4em;}
.qa_wrap .qa-a span {font-size: 1.4em;}

}