@charset "UTF-8";
/* -------------------- */
/* base
/* -------------------- */

body{
width: auto;
margin: 0;
padding: 0;
font-family: 'Noto Sans JP', sans-serif !important;
height: 100%;
background: #eeefef;

}

/* N */
a,
a:link,
a:visited {
text-decoration:none;
color:#3B3B3B;

}
a:hover {
text-decoration:none;
color:#3B3B3B;
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
}

hr{
border: solid 3px #dcdcdc;
width: 100%;
margin: 45px 0 ;
}

.dotted-line {
  border: none;
  border-top: 5px dotted #e5ddb0; 
  width: 580px;
  margin: 0px auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

.sp{
display: none;
}

.pc{
display: block;
}

.wrap{
  width: auto;
  background: #eeefef;
  margin: 0 auto;
  padding: 0 auto;

}

 main{
  width: auto;
  margin: 0 auto;  
  background-color: #fff;
  max-width: 750px;
  height: 100%;
  overflow: hidden;
   padding: 0 auto;
}

.logo{
  text-align: center;
  margin: 0 auto;
}

.logo img{
  width: 218px;
  margin: 16px auto;
}

h1 {
font-size: 46px;
font-family: 'Noto Serif JP ', serif !important;
color: #000;
font-weight: 700;
text-align: center;
margin-bottom: 0px;
margin-top: 0px;
 font-feature-settings: "halt";
}

.topimg{
  width: 100%;
} 

.topimg img{
  width: 100%;
  height: auto;
  object-fit: contain;
}



/* モーダルエリア*/
/*infoエリアをはじめは非表示*/
#info{
	display: none;
}

/*モーダルの横幅を変更したい場合*/
.modaal-container{
    max-width: 674px;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}
/* モーダルエリアここまで*/

.modaal-container {
    width: 100%;
     max-width: 647px;
    border-radius: 0;
    border-radius: 50px;
}

/* モーダル内 */

.pop_incontents{
  width: 100%;
  text-align: center;
  max-width: 615px;
padding: 30px 0;
margin: 0 auto;

}

.pop_incontents img{
  width: 90%;
  max-width: 450px;
  object-fit: contain;
}

.pop_intext{
font-size: 23px;
    font-weight: 500;
    color: #53a547;
    font-family: "Noto Sans", sans-serif !important;
    text-align: center;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;

}

.pop_inlinebox{
  width: auto;
  border-radius: 30px;
  background: #ebf3eb;
  max-width: 540px;
  min-height: 74px;
color: #54a546;
font-size: 27px;
text-align: center;
font-weight: 500;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
    margin: 0 auto;
}

.pop_inimg{
  background-image: url(../img/pop_img.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 135px;
  height: 83px;
position: relative;
    top: 40px;
    left: 470px;
}



.text_pbox{
width: auto;
max-width: 580px;
font-size: 25px;
line-height: 44px;
margin: 0 auto;
font-feature-settings: "halt";
margin-top: 20px;
}

.under_color02{
 background-image: url(../img/under.png);
 background-repeat: no-repeat;
}  

.pop_inpink{
 width: auto;
 font-size: 60px;
  font-family: "Google Sans Flex", "Noto Sans JP";
color: #f22253;
font-weight: 600;
}

.pinktext_n{
 width: auto;
 font-size: 48px;
 font-family: 'Noto Sans JP', sans-serif !important;
color: #f22253;
font-weight: 600;
}

.pinktext_s{
 width: auto;
 font-size: 29px;
 font-family: 'Noto Sans JP', sans-serif !important;
color: #f22253;
font-weight: 600;
}
.zei{
margin: 0;
padding: 0;
position: relative;
top:30px;
left:-23px;
color: #f22253;
font-weight: 400;
font-size: 13px;
}
.font_black2 {
    color: #000;
    font-size: 48px;
    font-family: "Google Sans Flex", "Noto Sans JP";
    font-weight: 600;
}


.g_gbox{
  background-color: #f2f2f2;
    clip-path: polygon(100% 0, 100% 70%, 50% 100%, 0 70%, 0 0);
    padding-bottom: 50px;
    padding-top: 20px;
    margin: 0 auto;
    margin: 50px auto;
    width: auto;
    min-height: 250px;
}

.o_gbox{
  background-color: #f7efe5;
    clip-path: polygon(100% 0, 100% 95%, 50% 100%, 0 95%, 0 0);
    padding-bottom: 160px;
    padding-top: 60px;
    margin: 0 auto;
    margin: 50px auto;
    width: auto;
    min-height: 250px;

   
}

.line_box{
     background: linear-gradient(180deg, #8dc474 0%, #8dc474 50%, #70b550 50%, #70b550 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 695px;
    height: 115px;
    border-radius: 100px;
    box-shadow: 2px 3.5px 2.8px 1px rgba(204, 202, 202, 0.9);
    margin: 0 auto;
    border: 1px solid #fff;
}

.line_box p{
     font-size: 48px;
    color: #fff;
    font-weight: 600;
    font-family: 'Noto Sans JP', sans-serif !important;
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.2);
    letter-spacing: 3px;

    position: relative;
    top: -15px;
}

.line_box p::after{
  content: url(../img/line_logo.png);
  width: 86px;
  height: 84px;
      position: relative;
    top: 20px;
    left: 30px;
}
 
.line_box:hover {
  opacity: 0.8;
}

/* top */
.top_coment{
  font-size: 24px;
  color: #fff;
  font-weight: 400;
  background-color: #40c1da;
  text-align: center;
  height: 45px;
  line-height: 45px;
}
.top_contents{
font-size: 30px;
font-family: 'Noto Serif JP ', serif !important;
color: #595858;
font-weight: 700;
text-align: center;

}

/* telbox */
.tel_box{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 695px;
    height: 115px;
    border-radius: 100px;
    box-shadow: 2px 3.5px 2.8px 1px rgba(204, 202, 202, 0.9);
    margin: 0 auto;
    border: 4px solid #aeaeae;
    margin-bottom: 13px;
    margin-top: 13px;
  }

.tel_box p{
 font-weight: 700;
   font-family: "Google Sans Flex", "Noto Sans JP";
   font-size: 74px;
   color: #000;
    position: relative;
    top: -12px;
    left: -5px;
    letter-spacing: 2px;

  }

.tel_box p::before{
  content: url(../img/tel_img.png);
  width: 86px;
  height: 86px;
   position: relative;
  top: 20px;
    left: -24px;
}

.tel_box p::after{
  content: url(../img/arrow_g.png);
  width: 19px;
      position: relative;
left:31px;
top:-13px;
}
.tel_contents{
font-size: 30px;
font-family: 'Noto Serif JP ', serif !important;
color: #595858;
font-weight: 700;
text-align: center;
margin-top: 57px;
padding-bottom: 30px;

}

/* bluebox */
.bluebox{
       background-image: linear-gradient(169deg, rgb(130, 166, 228) 8%, rgba(60, 101, 173, 1) 29%);
     max-width: 695px;
    height: 115px;
    border-radius: 100px;
    box-shadow: 2px 3.5px 2.8px 1px rgba(204, 202, 202, 0.9);
    margin: 0 auto;
    margin: 30px auto 15px ;
  
}

.bluebox p{
     font-size: 45px;
    color: #fff;
    font-weight: 500;
    font-family: 'Noto Sans JP', sans-serif !important;
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.2);
    letter-spacing: 0px;
   position: relative;
      top:20px;
      margin-top: 0px;
      text-align: center;

}

.bluebox p::after{
  content: url(../img/arrow_b.png);
  width: 86px;
  height: 84px;
      position: relative;
      left:33px;
      top:5px;

}

/* nayami */
.nayamibox{
width: auto;
max-width: 695px;
margin: 0 auto;
display: block;

}
.caption{
font-weight: 700;
   font-family: "Google Sans Flex", "Noto Sans JP";
   font-size: 36px;
   color: #3cb5cd;
   text-align: center;
}

.caption02 {
    font-weight: 700;
    font-family: "Google Sans Flex", "Noto Sans JP";
    font-size: 36px;
    color: #ef9403;
    text-align: center;
}

.nayamibox .inbox{
width: 695px;
height: 120px;
background: #e0f1f2;
border-radius: 20px;
box-shadow: 2.3px 3.5px 0.8px 2.3px rgb(211 209 209 / 90%);
margin: 20px auto;
background-image: url(../img/check.png);
background-repeat: no-repeat;
background-position: 40px 30px;
display: flex;
    align-items: center;
    justify-content: flex-end;
}

.nayamibox .inbox .text{
width: auto;
max-width: 520px;
overflow: hidden;
font-size: 34px;
color: #000;
text-align: left;
float: right;
margin-right: 32px;
}
.nayamibox .img{
text-align: center;
}
.s_font{
font-family: "Google Sans Flex", "Noto Sans JP";
font-weight: 400;
color: #595858;
font-size: 23px;
text-align: center;
}

/* LINE見出し */

.title__ttl {
    position: relative;
    text-align: center;
    display: block;
    width: fit-content;
    line-height: 1.2;
    margin: 35px auto 10px;
    padding: 0 1rem;
}


.title__ttl__main {
  font-size: 27px;
    font-weight: 500;
    color: #000;
    font-family: "Noto Sans", sans-serif !important;
   
}

.title__ttl::before, .title__ttl::after {
    content: "";
    position: absolute;
    bottom: 0;
   width: 2.5px;
    height: 2rem;
    background-color: #000;
}
.title__ttl::before {
    transform: rotate(-40deg);
    left: 0;
}
.title__ttl::after {
    transform: rotate(40deg);
    right: 0;
}


/* greenbox */
.greenbox{
      background-image: linear-gradient(169deg, rgba(56, 172, 185, 1) 36%, rgba(43, 137, 152, 1) 66%);
     max-width: 695px;
    height: 115px;
    border-radius: 100px;
    box-shadow: 2px 3.5px 2.8px 1px rgba(204, 202, 202, 0.9);
    margin: 0 auto;
    margin: 30px auto 15px ;
  
}

.greenbox p{
     font-size: 45px;
    color: #fff;
    font-weight: 500;
    font-family: 'Noto Sans JP', sans-serif !important;
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.2);
    letter-spacing: 0px;
   position: relative;
      top:20px;
      text-align: center;
      margin-top: 0px;

}

.greenbox p::after{
  content: url(../img/arrow_down.png);
  width: 86px;
  height: 84px;
      position: relative;
      left:53px;
      top:5px;

}

/* about_contents */

.about_contents{
  width:auto;
  max-width: 695px;
  overflow: hidden;
  margin: 0 auto;

}

.about_contents .img{
text-align: center;
}

.about_p{
font-size: 30px;
line-height: 52px;
font-family: 'Noto Sans JP', sans-serif !important;
width: auto;
max-width: 695px;
text-align: justify;


}


.g_text{
  font-family: 'Noto Serif JP ', serif !important;
  color: #1695b9;
  font-size: 36px;
  text-align: center;

}

/* g_bbox */
.g_bbox{
  background-color: #40c1da;
    clip-path: polygon(100% 0, 100% 95%, 50% 100%, 0 95%, 0 0);
    padding-bottom: 50px;
    padding-top: 20px;
    margin: 0 auto;
    margin: 50px auto 0;
    width: auto;
    min-height: 250px;
    overflow: hidden;
    padding-bottom: 60px;
  
}
.p_soudan{
 font-family: 'Noto Serif JP ', serif !important;
  color: #fff;
  font-size: 46px;
  text-align: center;
  font-weight: 700;
  font-feature-settings: "halt";
}

.flow_contents{
  width: auto;
  max-width: 695px;
  overflow: hidden;
  margin: 0 auto;

}

.flow_contents .img{
text-align: center;
}


.flow_contents .inbox{
      width: 695px;
    height: 120px;
    background: #fff;
    border-radius: 20px;
    margin: 5px auto;
    display: flex;
    align-items: center;
    padding: 3% 0%;
    margin-bottom: 12px;

}

.flow_contents .inbox .circle_number {
width: 80px;
  height: 80px;
   background-color: #40c1da;
  border-radius: 50%;
  text-align: center;
  box-sizing: border-box;
  font-family:Arial, Helvetica, sans-serif !important;
  font-weight: 600;
  float: left;
display: flex;
align-items: center;
justify-content: center;
  font-size: 50px;
  color: #fff;
  margin-left: 30px;

}

.flow_contents .inbox .text{
width: auto;
max-width: 510px;
overflow: hidden;
font-size: 34px;
color: #000;
text-align: justify;
float: right;
margin-right: 32px;
line-height: 52px;
margin-left: 30px;
font-feature-settings: "halt";
}

/* 予約見出し */

.title__ttr {
    position: relative;
    text-align: center;
    display: block;
    width: fit-content;
    line-height: 1.2;
    margin: 35px auto 35px;
    padding: 0 1rem;
    margin-top: 64px;
}


.title__ttr__main {
  font-size: 36px;
    font-weight: 400;
    color: #fff;
    padding: 0 6px;
    font-family: "Noto Sans", sans-serif !important;
   
}

.title__ttr::before, .title__ttr::after {
    content: "";
    position: absolute;
    bottom: 0;
   width: 2.5px;
    height: 2.5rem;
    background-color: #fff;
}
.title__ttr::before {
    transform: rotate(-40deg);
    left: 0;
}
.title__ttr::after {
    transform: rotate(40deg);
    right: 0px;
}

.about_text{
  font-size: 47px;
  font-weight: 700;
  font-family: serif;
font-family: "Noto Sans", sans-serif !important;
color: #fff;
text-align: center;
margin: 64px 0;
}

.inq_contents{
  width: auto;
  max-width: 695px;
  margin: 0 auto;
  margin-top: 20px;
}

.inq_contents .q_inbox{
width: auto;
max-width: 695px;
margin-top: 30px;
}

.inq_contents .q_inbox02{
width: auto;
max-width: 695px;
margin-top: 50px;
}

/* comentbox */
.inq_contents .comentbox {
  position: relative;
  top:-15px;
  display: inline-block;
  width: 695px;
  margin-top: 26px;
  border-radius: 42px;
  background-color: #e0f1f2;
 }

.inq_contents .comentbox p{
  padding: 5%;
text-align: justify;
  font-size: 34px;
  line-height: 52px;
  font-weight: 400;
  color: #000;
  font-family: "Noto Sans", sans-serif !important;
  font-feature-settings: "halt";
  margin: 0;
 
}
.inq_contents .comentbox::after {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  border-style: solid;
  border-width: 0 12px 26px 12px;
  border-color: transparent transparent #e0f1f2;
  translate: -50% -100%;
}

.inq_contents .comentbox02 {
  position: relative;
  top:-15px;
  display: inline-block;
  width: 695px;
  margin-top: 60px;
  border-radius: 42px;
  background-color: #e0f1f2;
 }

.inq_contents .comentbox02 p{
  padding: 5%;
text-align: justify;
  font-size: 34px;
  line-height: 52px;
  font-weight: 400;
  color: #000;
  font-family: "Noto Sans", sans-serif !important;
  font-feature-settings: "halt";
  margin: 0;
 
}
.inq_contents .comentbox02::after {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  border-style: solid;
  border-width: 0 12px 26px 12px;
  border-color: transparent transparent #e0f1f2;
  translate: -50% -100%;
}


.inq_contents .title{
font-size: 34px;
font-weight: 500;
color: #1695b9;
text-align: left;
  text-indent: -2.5em;
  padding-left: 2.5em;
  line-height: 12px;

}

.inq_contents .title::before{
  content: url(../img/q_img.png);
  vertical-align: middle;
  padding-right: 5px;
  margin-right: 10px;
}


/* voice */
.voice_contents{
width: auto;
max-width: 750px;
overflow: hidden;
display: block;
margin: 0 auto;
text-align: center;
}

.voice_contents .v_inbox{
  width:auto;
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 700px;
  margin: 0 auto ;
  margin-top: 50px;
}

.voice_contents .v_inbox .voicebox{
width: auto;
margin: 20px 0;
}

.voice_contents .v_inbox img{
  width:86px;
  height: 86px;
  vertical-align: top;
  margin-top: 0;
}

.voice_contents .vr_coment {
  position: relative;
  display: inline-block;
  width: 560px;
  margin-left: 10px;
  padding: 16px;
  border-radius: 10px;
  background-color: #fff;
  text-align: left;
  font-size: 28px;
  font-weight: 300;
  line-height: 1.5;
  color: #000000;

}

.voice_contents .vr_coment::after {
  content: "";
  position: absolute;
  top: 25%;
  left: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #fff transparent transparent;
  translate: -100% -50%;
}

.voice_contents .vr_coment p{
  width: auto;
  text-align: justify;
  margin: 0 auto;
  padding: 1%;
   font-feature-settings: "halt";

}

.voice_contents .vr_coment02 {
  position: relative;
  display: inline-block;
  width: 560px;
 margin-right: 10px;
  padding: 16px;
  border-radius: 10px;
  background-color: #fff;
  text-align: left;
  font-size: 28px;
  font-weight: 300;
  line-height: 1.5;
  color: #000000;

}

.voice_contents .vr_coment02::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  border-style: solid;
  border-width: 10px 0 10px 10px;
 border-color: transparent transparent transparent #fff;
  translate: 100% -50%;
}

.voice_contents .vr_coment02 p{
  width: auto;
  text-align: justify;
  margin: 0 auto;
  padding: 1%;
   font-feature-settings: "halt";

}

.shadow{
filter: drop-shadow(3px 3px 4px #dadada);
}

.voice_contents img{
margin-top: 30px;
}

/* pop_contents */
.pop_contents{
width: auto;
text-align: center;
margin-bottom: 80px;
}

.p_inbox{
  width: auto;
  overflow: hidden;
  max-width: 674px;
  border-radius: 50px;
  background-color: #fff;
  box-shadow: 0px 2px 9px 1px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  display: block;
  padding-top: 20px;
}

.p_inbox .box01{
 width: auto;
 max-width:  580px;
background-color:#e5ddb0 ;
font-size: 36px;
 font-family: 'Noto Serif JP ', serif !important;
 font-weight: 700;
 display: flex;
vertical-align: middle;
 align-items: center;
  justify-content: center;
  margin: 0 auto;

}

.p_inbox .textbox{
width: auto;
max-width: 580px;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
margin-top: 20px;
}

.p_inbox .lbox{
width: auto;
max-width: 416px;
font-size: 26px;
line-height: 45px;
text-align: justify;
 font-feature-settings: "halt";
 font-weight: normal;
 margin-bottom: -100px;
}

.p_inbox .lbox02{
width: auto;
font-size: 26px;
line-height: 45px;
text-align: justify;
 font-feature-settings: "halt";
 font-weight: normal;
}
.p_inbox .textbox img{
width: 95px;
height:  102px;
position: relative;
top:15px;
left: 70px;

}


.font_w{
  color: #fff;
  font-size: 0.8em;
 font-family:Arial, Helvetica, sans-serif !important;
}

.f_small{
  font-size: 23px;
   font-family: "Noto Sans", sans-serif !important;
   font-weight: 500;
   text-align: justify;
   font-feature-settings: "halt";
   margin-top: 15px;
}

.font_110{
  color: #000;
  font-size: 1.2em;
   font-family: 'Noto Serif JP ', serif !important;
}

.font_110_2{
  color: #000;
  font-size: 1.1em;
   font-family: "Noto Sans", sans-serif !important;
}

.font_108{
  color: #000;
  font-size: 1.08em;
    font-family: "Noto Sans", sans-serif !important;

}

.font_110_b{
  color: #000;
  font-size: 1.31em;
    font-family: "Noto Sans", sans-serif !important;
    font-weight: 700;
}

.font_pink{
  color: #f22253;
  font-size: 45px;
  font-family: "Google Sans Flex", "Noto Sans JP";

}

.font_black{
  color: #000;
  font-size: 45px;
  font-family: "Google Sans Flex", "Noto Sans JP";

}
.under_color{
 background: linear-gradient(transparent 50%, #e5ddb0 50%);}

.pop_text{
font-size: 20px;
    font-weight: 500;
    color: #53a547;
    font-family: "Noto Sans", sans-serif !important;
    text-align: center;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 20px;
        position: relative;
   
     }

.p_linebox{
  border-radius: 30px;
  background: #ebf3eb;
 width: 580px;
  height: 98px;
color: #54a546;
font-size: 27px;
text-align: center;
font-weight: 500;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-bottom: 30px;
    margin-top: -50px;
}

.popimg{
  background-image: url(../img/pop_img.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 135px;
  height: 83px;
position: relative;
top:0px;
left:520px;
}
.presentimg{
 background-image: url(../img/present_img.png);
 background-repeat: no-repeat;
 width: 122px;
 height: 122px;
 position: relative;
 top:-50px;
 left: 532px;
}

/* pop見出し */

.title__ttp {
    position: relative;
    text-align: center;
    display: block;
    width: fit-content;
    line-height: 1.2;
    margin: 35px auto 10px;
    padding: 0 1rem;
}


.title__ttp__main {
  font-size: 27px;
    font-weight: 500;
    color: #53a547;
    font-family: "Noto Sans", sans-serif !important;
    font-feature-settings: "halt";
   
}

.title__ttp::before, .title__ttp::after {
    content: "";
    position: absolute;
    bottom: 0;
   width: 2.5px;
    height: 2rem;
    background-color: #53a547;
}
.title__ttp::before {
    transform: rotate(-40deg);
    left: 0;
}
.title__ttp::after {
    transform: rotate(40deg);
    right: 0;
}


/* com_contents */
.com_contents{
  width:auto;
  max-width: 695px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 50px;

}

.com_p{
font-size: 30px;
line-height: 52px;
font-family: 'Noto Sans JP', sans-serif !important;
width: auto;
font-weight: 400;
max-width: 695px;
text-align: justify;
 font-feature-settings: "halt";
}

.access_contents{
 width: auto;
 max-width: 695px;
 font-size: 34px;
  font-family: "Google Sans Flex", "Noto Sans JP";
 text-align: left;
 margin: 0 auto;
 margin-top: 30px;
 line-height: 62px;
 font-weight: 400;
}

.privacy{
  width: 700px;
font-size: 16px;
line-height: 28px;
font-family: 'Noto Sans JP', sans-serif !important;
text-align: justify;
color: #717071;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 76px;
}

.copy{
  font-size: 18px;
 text-align: center;
 color: #595858;
 margin-bottom: 150px;
}


/* モーダルpopin見出し */

.pop_top {
    width: 100%;
    max-width: 540px;
    line-height: 1.2;
    padding: .5rem;
    background-color: #e5ddb0;
     font-size: 34px;
    font-weight: 500;
    color: #000;
    font-family: "Noto Sans", sans-serif !important;
    margin: 0 auto;
    margin-bottom: 20px;
}

.modaal-content-container {
    padding: 0px;}

.about img{
  width: 100%;
  object-fit: contain;
  margin-bottom: 15px;
}



    

/* 750px以下の画面幅 */
@media (max-width: 750px) {

main{
  width: auto;
  margin: 0 auto;  
  background-color: #fff;
  max-width: 375px;
  height: 100%;
  overflow: hidden;
   padding: 0 auto;
}

.logo{
  text-align: center;
  margin: 0 auto;
}

.logo img{
  width: 120px;
margin: 14px auto 5px;
}

h1 {
font-size: 24px;
font-weight: 900;
}
.sp{
display: block;
}

.pc{
display: none;
}


/* top */
.top_coment{
  font-size: 16px;
   height: 30px;
  line-height: 28px;
  font-weight: 700;
}
.top_contents{
font-size: 18px;
margin-top: 15px;
font-weight: 700;
}

.g_gbox{
    background-color: #f2f2f2;
    clip-path: polygon(100% 0, 100% 70%, 50% 100%, 0 70%, 0 0);
    padding-bottom: 50px;
    padding-top: 20px;
     margin: 0px auto;
    width: auto;
    min-height: 0px;
}


/* LINE見出し */

.title__ttl {
    position: relative;
    text-align: center;
    display: block;
    width: fit-content;
    line-height: 1.2;
    margin: 0px auto 10px;
    padding: 0 0.8rem;
}


.title__ttl__main {
  font-size: 16px;
 font-feature-settings: "halt";
 font-weight: 700;
}

.title__ttl::before, .title__ttl::after {
    content: "";
    position: absolute;
    bottom: 0;
   width: 1.2px;
    height: 1.2rem;
    background-color: #000;
}
.title__ttl::before {
    transform: rotate(-30deg);
    left: 0;
}
.title__ttl::after {
    transform: rotate(30deg);
    right: 0;
}

.line_box{
    max-width: 350px;
    height: 80px;
    border-radius: 100px;
}

.line_box p{
     font-size: 29px;
       position: relative;
    top: -6px;
     left: 5px;
    margin: 0 auto;
}
.line_box p::after{
  content: url(../img/line_logo_sp.png);
  width: 45px;
  height: 43px;
   position: relative;
    top: 8px;
    left: 10px;
}

/* telbox */
.tel_box{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 350px;
    height: 58px;
    border-radius: 100px;
    box-shadow: 2px 3.5px 2.8px 1px rgba(204, 202, 202, 0.9);
    margin: 0 auto;
    border: 2px solid #aeaeae;
    margin-bottom: 5px;
    margin-top: 5px;
  }

.tel_box p{
 font-weight: 900;
   font-family: "Google Sans Flex", "Noto Sans JP";
   font-size: 38px;
   color: #000;
    position: relative;
    top: -5px;
    left: 0px;
    letter-spacing: 2px;

  }

.tel_box p::before{
  content: url(../img/tel_img_sp.png);
  width: 86px;
  height: 86px;
   position: relative;
  top: 10px;
    left: -7px;
}

.tel_box p::after{
  content: url(../img/arrow_g_sp.png);
  width: 10px;
      position: relative;
left:12px;
top:-7px;
}

.s_font {
    font-family: "Google Sans Flex", "Noto Sans JP";
    font-weight: 400;
    color: #595858;
    font-size: 16px;
    text-align: center;
}
.tel_contents{
font-size: 18px;
font-family: 'Noto Serif JP ', serif !important;
color: #595858;
font-weight: 700;
text-align: center;
margin-top: 10px;
padding-bottom: 0px;

}

 /* モーダルpopin見出し */

 
.pop_top {
    width: 100%;
    max-width: 276px;
    line-height: 1.2;
    padding: 0.6em 0.4rem;
    font-size: 18px;
    margin-bottom: 0px;
  font-weight: 600;
  }

.modaal-container {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: auto;
    text-align: left;
    color: #000;
    max-width: 308px;
    border-radius: 27px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
    cursor: auto;
}

.pop_incontents img {
      width: 240px;
 margin: 0 auto;
 margin-top: 7px; 
 margin-left: 15px;
 margin-bottom: -20px;
}

.pop_intext{
font-size: 13.5px;
    font-weight: 900;

}
.f_small {
font-size: 14px;
font-weight: 900;
text-align: justify;
display: flex;
justify-content: center;
 margin-bottom: 18px;
}
.pop_inlinebox{
  width: auto;
  border-radius: 30px;
  background: #ebf3eb;
  max-width: 290px;
  min-height: 70px;
color: #54a546;
font-size: 18px;
text-align: center;
font-weight: 900;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
    margin: 0 auto;
    margin-top: -23px;
}

.pop_inimg{
  background-image: url(../img/pop_img_sp.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 86px;
  height: 53px;
position: relative;
    top: 0px;
    left: 213px;
    z-index: 999;
}

.text_pbox{
width: auto;
max-width: 310px;
font-size: 16px;
margin-top: 0px;
line-height: 33px;
}

.under_color02{
 background-image: url(../img/under.png);
 background-repeat: no-repeat;
}  

.pop_inpink{
 font-size: 39px;
  font-feature-settings: "halt";
}
.pinktext_n{
 font-size: 30px;
  position: relative;
 top:-1px;
  font-feature-settings: "halt";
}
.pinktext_s{
 font-size: 18px;
 }

.zei{
margin: 0;
padding: 0;
position: relative;
top:22px;
left:-10px;
color: #f22253;
font-weight: 400;
font-size: 8px;
}

.font_black2 {
font-size: 31px;
    
}
.font_110_b{
font-size: 18px;
font-weight: 700;
}

/* bluebox */
.bluebox{
       background-image: linear-gradient(169deg, rgb(130, 166, 228) 8%, rgba(60, 101, 173, 1) 29%);
     max-width: 350px;
    height: 70px;
    margin-top: 12px;
  
}

.bluebox p{
 font-size: 24px;
 top:17px;


}

.bluebox p::after{
  content: url(../img/arrow_b_sp.png);
  width: 21px;
  height: 21px;
      position: relative;
      left: 3px;
      top:0%;

}

hr{
border: solid 2px #dcdcdc;
width: 100%;
margin: 30px 0 ;
}

.caption {
    font-family: "Google Sans Flex", "Noto Sans JP";
    font-size: 18px;
    margin-bottom: 18px;

}

.nayamibox .inbox{
width: 350px;
height: 70px;
background: #e0f1f2;
 border-radius: 8px;
box-shadow: 1px 3.5px 0.8px 1px rgb(211 209 209 / 90%);
margin: 10px auto;
background-image: url(../img/check_sp.png);
background-repeat: no-repeat;
background-position: 19px 21px;
display: flex;
align-items: center;
justify-content: flex-end;
}

.nayamibox .inbox .text{
width: auto;
max-width: 270px;
overflow: hidden;
font-size: 18px;
color: #000;
text-align: left;
float: right;
margin-right: 18px;
}
.nayamibox .img{
text-align: center;
margin-top: -15px;
}

/* greenbox */
.greenbox{
     background-image: linear-gradient(169deg, rgba(56, 172, 185, 1) 36%, rgba(43, 137, 152, 1) 66%);
     max-width: 350px;
    height: 70px;
          margin: 0 auto ;
            margin-top: 12px;
            margin-bottom: 40px;
  
}

.greenbox p{
 font-size: 24px;
 top:17px;


}

.greenbox p::after{
  content: url(../img/arrow_down_sp.png);
  width: 21px;
  height: 21px;
      position: relative;
      left: 16px;
      top:　1px;

}

/* about_contents */

.about_contents{
  width:auto;
  max-width: 695px;
  overflow: hidden;
  margin: 0 auto;

}

.about_contents .img{
text-align: center;
}

.about_p{
font-size: 16px;
line-height: 27px;
font-family: 'Noto Sans JP', sans-serif !important;
width: auto;
max-width: 345px;
text-align: justify;
margin: 0 auto;
margin-bottom: 20px;

}

.g_text{
 font-size: 20px;
 margin-bottom: 10px;
  font-feature-settings: "halt";

}

.g_bbox {
    background-color: #40c1da;
    clip-path: polygon(100% 0, 100% 95%, 50% 100%, 0 95%, 0 0);
    padding-bottom: 50px;
    padding-top: 0px;
    margin: 0 auto;
    margin: 27px auto 0;
    width: auto;
    min-height: 250px;
    overflow: hidden;
    padding-bottom: 60px;
    margin-bottom: 20px;
}

.p_soudan {
    font-size: 24px;
}

.flow_contents .inbox {
    width: 350px;
    height: 80px;
    background: #fff;
    border-radius: 10px;
    margin: 5px auto;
    display: flex;
    align-items: center;
    padding: 0% 0%;
    margin-bottom: 5px;
}

.flow_contents .inbox .text {
    width: auto;
    max-width: 265px;
    overflow: hidden;
    font-size: 18px;
    color: #000;
    text-align: justify;
    float: right;
    margin-right: 0px;
    line-height: 26px;
    margin-left: 12px;
    font-feature-settings: "halt";
}

.flow_contents .inbox .circle_number {
    width: 40px;
    height: 40px;
    background-color: #40c1da;
    border-radius: 50%;
    text-align: center;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 600;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    color: #fff;
    margin-left: 17px;
}

/* 予約見出し */

.title__ttr {
    position: relative;
    text-align: center;
    display: block;
    width: fit-content;
    line-height: 1.2;
    margin: 10px auto 20px;
    padding: 0 1rem;
    margin-top: 30px;
    
}


.title__ttr__main {
  font-size: 18px;
  padding: 0; 
  font-weight: 800;
 
}

.title__ttr::before, .title__ttr::after {
    content: "";
    position: absolute;
    bottom: 0;
   width: 1px;
    height: 1.5rem;
    background-color: #fff;
}
.title__ttr::before {
    transform: rotate(-40deg);
    left: 0;
}
.title__ttr::after {
    transform: rotate(40deg);
    right: 0px;
}

.about_text {
font-size: 24px;
margin: 20px 0;
line-height: 34px;
margin-bottom: 0;
font-weight: 800;
}

/* comentbox */

.inq_contents {
    width: auto;
    max-width: 375px;
    margin: 0 auto;
    margin-top: 20px;
    padding-bottom: 10px;
}

.inq_contents .comentbox {
  position: relative;
  top:-15px;
  display: inline-block;
  width: 350px;
  margin-top: 35px;
  border-radius: 30px;
  background-color: #e0f1f2;

 }

.inq_contents .comentbox p{
  padding: 5%;
text-align: justify;
  font-size: 18px;
  line-height: 27px;
  font-weight: 400;
  color: #000;
  font-family: "Noto Sans", sans-serif !important;
  font-feature-settings: "halt";
  margin: 0;
 
}
.inq_contents .comentbox::after {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  border-style: solid;
         border-width: 0 8px 17px 8px;
  border-color: transparent transparent #e0f1f2;
  translate: -50% -100%;
}

.inq_contents .q_inbox {
    width: auto;
    max-width: 350px;
    margin-top: 30px;
    margin: 0 auto;
}

.inq_contents .title{
font-size: 20px;
font-weight: 700;
color: #1695b9;
text-align: left;
  text-indent: -2.5em;
  padding-left: 2.5em;
  line-height: 20px;

}

.inq_contents .title::before{
  content: url(../img/q_img_sp.png);
  vertical-align: middle;
  padding-right: 5px;
  margin-right: 10px;
}

.inq_contents .comentbox02 {
  position: relative;
  top:-15px;
  display: inline-block;
  width: 350px;
  margin-top: 45px;
  border-radius: 30px;
  background-color: #e0f1f2;
 }

.inq_contents .comentbox02 p{
  padding: 5%;
text-align: justify;
  font-size: 18px;
  line-height: 27px;
  font-weight: 400;
  color: #000;
  font-family: "Noto Sans", sans-serif !important;
  font-feature-settings: "halt";

 
}
.inq_contents .comentbox02::after {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  border-style: solid;
  border-width: 0 8px 17px 8px;
  border-color: transparent transparent #e0f1f2;
  translate: -50% -100%;
}


.inq_contents .q_inbox02{
width: auto;
max-width: 350px;
margin-top: 0px;
margin: 0 auto;
}

.o_gbox {
 background-color: #f7efe5;
 clip-path: polygon(100% 0, 100% 95%, 50% 100%, 0 95%, 0 0);
 padding-bottom: 61px;
 padding-top: 28px;
 margin: 0 auto;
 margin: 11px auto;
 width: auto;
 min-height: 244px;
}


.caption02 {
    font-weight: 900;
    font-family: "Google Sans Flex", "Noto Sans JP";
    font-size: 18px;
    color: #ef9403;
    text-align: center;
}

.voice_contents .v_inbox .voicebox {
    width: auto;
    margin: 10px 0;
    display: flex;
}
.voice_contents img {
    margin-top: 10px;
    width: 97%;
    object-fit: contain;
}

.voice_contents .v_inbox {
    width: auto;
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 350px;
    margin: 0 auto;
    margin-top: 0px;
}

.voice_contents .v_inbox img {
    width: 43px;
    height: 43px;
    vertical-align: top;
    margin-top: 0;
}

.voice_contents .vr_coment {
  position: relative;
  display: inline-block;
  width: 282px;
  margin-left: 10px;
  padding: 8px;
  border-radius: 10px;
  background-color: #fff;
  text-align: justify;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #000000;

}

.voice_contents .vr_coment::after {
  content: "";
  position: absolute;
  top: 25%;
  left: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #fff transparent transparent;
  translate: -100% -50%;
}

.voice_contents .vr_coment p{
  width: auto;
  text-align: justify;
  margin: 0 auto;
  padding: 1%;
   font-feature-settings: "halt";

}

.voice_contents .vr_coment02 {
  position: relative;
  display: inline-block;
  width: 282px;
 margin-right: 10px;
  padding: 8px;
  border-radius: 10px;
  background-color: #fff;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #000000;

}

.voice_contents .vr_coment02::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  border-style: solid;
  border-width: 10px 0 10px 10px;
 border-color: transparent transparent transparent #fff;
  translate: 100% -50%;
}

.voice_contents .vr_coment02 p{
  width: auto;
  text-align: justify;
  margin: 0 auto;
  padding: 1%;
   font-feature-settings: "halt";

}

.pop_contents{
width: auto;
text-align: center;
margin-bottom: 80px;

}

.pop_text {
    font-size: 14px;
    font-weight: 700;
    color: #53a547;
    font-family: "Noto Sans", sans-serif !important;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 10px;
    position: relative;
    left: 0px;
        font-feature-settings: "halt";
}

.popimg {
    background-image: url(../img/pop_img_sp02.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100px;
    height: 61px;
    position: relative;
    top: 0px;
    left: 224px;
    z-index: 1;
}
.p_inbox {
    width: auto;
    overflow: hidden;
    max-width: 340px;
    border-radius: 25px;
    background-color: #fff;
    box-shadow: 0px 2px 9px 1px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
    display: block;
    padding-top: 20px;
    margin-bottom: -50px;

}

.p_inbox .box01 {
    width: 300px;
    background-color: #e5ddb0;
    font-size: 19px;
    font-family: 'Noto Serif JP ', serif !important;
    font-weight: 700;
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
       font-feature-settings: "halt";
}

.title__ttp {
    position: relative;
    text-align: center;
    display: block;
    width: fit-content;
    line-height: 1.2;
    margin: 6px auto 10px;
    padding: 0 1rem;
}


.title__ttp__main {
  font-size: 17px;
    font-weight: 700;
    color: #53a547;
    font-family: "Noto Sans", sans-serif !important;
    font-feature-settings: "halt";
   
}

.title__ttp::before, .title__ttp::after {
    content: "";
    position: absolute;
    bottom: 0;
   width: 1.5px;
    height: 1rem;
    background-color: #53a547;
}
.title__ttp::before {
    transform: rotate(-40deg);
    left: 0;
}
.title__ttp::after {
    transform: rotate(40deg);
    right: 0;
}

.font_108{
  color: #000;
  font-size: 18px;
    font-family: "Noto Sans", sans-serif !important;
    font-weight: 900;
    line-height: 20px;
}
.font_pink {
    color: #f22253;
    font-size: 26px;
    font-family: "Google Sans Flex", "Noto Sans JP";
    font-weight: 700;
}

.p_inbox .textbox{
width: auto;
max-width: 293px;
display: block;
margin: 0 auto;
margin-top: 20px;
}

.p_inbox .lbox{
width: auto;
max-width: 293px;
font-size: 16px;
line-height: 28px;
text-align: justify;
 font-feature-settings: "halt";
 font-weight: 500;
 margin: 0 auto;
 margin-bottom: -15px;
}

.p_inbox .lbox02{
width: auto;
max-width: 293px;
font-size: 16px;
line-height: 28px;
text-align: justify;
 font-feature-settings: "halt";
 font-weight: 500;
 margin: 0 auto;
 margin-top: -20px;

}

.p_inbox .textbox img{
width: 48px;
height:  48px;
position: relative;
top:4px;
left: 0px;

}
.p_linebox {
width: 300px;
background: #ebf3eb;
height: 70px;
 color: #54a546;
font-size: 18px;
text-align: center;
font-weight: 700;
 display: flex;
 justify-content: center;
 align-items: center;
 border-radius: 20px;
 margin-top: -20px;
     
}

.dotted-line {
    border: none;
    border-top: 5px dotted #e5ddb0;
    width: 293px;
    margin: 0px auto;
    margin-top: 20px;
    margin-bottom: 40px;
}
.font_black {
    color: #000;
    font-size: 26px;
    font-family: "Google Sans Flex", "Noto Sans JP";
    font-weight: 700;
}

.presentimg{
 background-image: url(../img/present_img_sp.png);
 background-repeat: no-repeat;
 width: 37px;
 height: 40px;
 position: relative;
 top:25px;
 left: 268px;
}

.com_p {
    font-size: 18px;
    line-height: 31px;
    font-family: 'Noto Sans JP', sans-serif !important;
    width: auto;
    font-weight: 500;
    max-width: 340px;
    text-align: justify;
    font-feature-settings: "halt";
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
}

.access_contents {
    width: auto;
    max-width: 350px;
    font-size: 16px;
    font-family: "Google Sans Flex", "Noto Sans JP";
    text-align: left;
    margin: 0 auto;
    margin-top: 30px;
    line-height: 28px;
    font-weight: 500;
}

.privacy {
    width: 350px;
    font-size: 14px;
    line-height: 24px;
    font-family: 'Noto Sans JP', sans-serif !important;
    text-align: justify;
    color: #717071;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 40px;
}
.copy {
    font-size: 16px;
    text-align: center;
    color: #595858;
    margin-bottom: 30px;
    margin-top: 10px;
}

}


/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	       background-image: linear-gradient(145deg, rgb(56, 172, 185) , rgba(43, 137, 152, 1) );
	border-radius: 50%;
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: #777;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 30px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }




}