* {box-sizing: border-box;}/*widthを設定した時paddingなどを含めてのサイズにする　ないと全体が100%時にpaddingがあると次の行に行ってしまう*/
::selection {background: #60dec996;}/*文字選択時のカラー変更*/
html, body {
  height: 100%;/*両方ないとtab-contentが横に表示されない*/
  background-color: #edf9f9;
  color:rgb(6, 36, 36);
  font-family: 'M PLUS 1p', sans-serif;
  margin: 0;/*default 8px*/
}
a{text-decoration:none;}
a:link, a:visited, a:link{color:rgb(6, 36, 36);}/*a href linkの色を変化しないようにする*/

@media only screen and (max-width: 820px){
  a:link, a:visited, a:link, a:hover{background-color: #ffffff00;}
}

.sawarabimincho{ font-family: "Sawarabi Mincho";}
/*.yuji{font-family: 'Yuji Syuku', serif;}
font-family: 'Kaisei Decol', serif;
*/
.webfont{font-family: 'Kaisei Decol', serif}
.webfont2{font-family: "flirt-script-regular", sans-serif;font-weight: 400;font-style:normal;}

.font08{font-size: 0.8rem;}
.font09{font-size: 0.9rem;}
.font1{font-size: 1.0rem;}
.font4{font-size: 42px;}

h1{font-size: 2rem;}
h2{font-size: 1.2rem;margin:auto;}
h3{font-size: 1rem;}

/*start nav*/
nav {/*<nav>タグで囲っていたがz-indexの値がうまくいじれずタブがクリックできなくなったため<nav>タグを削除*/
  width: 100%;
  height: 20rem;/*後で変更*/
  position: fixed;/*relativeだとtop-bannerの下にheight分の空白ができた*/
  top:0;left:0;right:0;bottom: 0;/*absolute(fixed)にしたので追加　上部にずっとあるイメージ*/
  overflow: hidden;
  z-index:100;/*ここにもこれ入れないと上に出てこないが上すぎるとタブが押せなくなるのでタブを上げた*/
}

.nav_bottun {
  width: 46px;
  height: 46px;
  /*border: 1px solid white;*/
  right: 36px;
  top: 16px;
  border-radius: 50%;
  position: fixed;
  cursor: pointer;
  z-index: 2500;
  background-color: #23b6bcda;
}
.nav_span1, .nav_span2, .nav_span3 {
  background-color: #ffffff;/*#23b6bc*/
  position: fixed;
  right: 42px;
  z-index: 3000;
  border-radius: 1px;
}

/*枠がない時に色を変えて目立つようにしていた*/
.nav_span1.change-color, .nav_span2.change-color, .nav_span3.change-color {/*jsでcoloredクラスがついた時に色変更*/
  background-color: #23b6bc;
  transition: 0.5s;
}

.nav_span1 {/*checkbox span label ul 全て同じ階層に置きたい(~間接セレクタの書き方)のでdivで囲えず 1つ1つ端からの距離を計算*/
  width: 36px; height: 1.8px; top: 34px;
}
.nav_span2 {
  width: 30px; height: 1.3px; top: 39px;
}
.nav_span3 {
  width: 24px; height: 0.8px; top: 44px;
}
#nav_checkbox:checked ~ .nav_bottun .nav_span1 {/*この書き方ができたのでspanはlabelの中に入れられた*/
  animation: nav_span1 1.2s ease forwards;/*easeは始まりと終わりを滑らかに　forwordで終了時の状態で固定*/
}
#nav_checkbox:checked ~ .nav_bottun .nav_span2 {
  animation: nav_span2 1.2s ease forwards;
}
#nav_checkbox:checked ~ .nav_bottun .nav_span3 {
  animation: nav_span3 1.2s ease forwards;
}
@keyframes nav_span2 {
  0% { background-color: #ffffff;}
  50% { background-color: #ffffff; }
  51% { background-color: #ffffff00;}
  100% { background-color: #ffffff00;}
}
@keyframes nav_span1 {
  0% { background-color: #ffffff;}
  50% { width:36px;height:1.3px;transform: translateY(5px); background-color: #ffffff;}
  100% { width:30px;height:2px;transform: rotate(225deg) translateY(-6px) translateX(-1px); background-color: #ffffff;}
}
@keyframes nav_span3 {
  0% { background-color: #ffffff;}
  50% { width:36px;height:1.3px;transform: translateY(-5px); background-color: #ffffff;}
  100% { width:30px;height:2px;transform: rotate(-225deg) translateY(6px) translateX(-1px); background-color: #ffffff;}
}

#nav_checkbox {
  display: none;/*チェックボックスを隠す*/
}
.nav_ul {
  width: 100%;
  height: 100%;
  background-color: #edf9f9e8;
  margin: 0;
  padding: 0;
  text-align: center;
  list-style: none;
  position: fixed;
  top: -100%;
  right: 0;/*画面外へ*/
  transition: 0.5s;
  z-index: 2500;
  overflow:hidden;
  overflow-y: auto;
}
#nav_checkbox:checked ~ .nav_ul {
  top: 0;
  z-index: 1500;
}


.yoyakunav_bottun {
  width: 4rem;
  height: 2.6rem;
  font-size: 0.8rem;
  border: 1px 1px 1px 0 solid white;
  left: 0;
  bottom: 20px;
  position: fixed;
  cursor: pointer;
  z-index: 2000;
  background-color: #23b6bcda;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
/*
.yoyakunav_bottun::before{
  position:absolute;
  content:"";
  bottom:2px;right:2px;
  width: 0;height: 0;
  border-left: 8px solid transparent;
  border-top: 8px solid transparent;
  border-right: 8px solid white;
}
*/
#yoyakunav_checkbox {
  display: none;/*チェックボックスを隠す*/
}
.yoyakunav_ul {
  width: 300%;
  height: 100%;
  background-color: #edf9f9e8;
  margin: 0;
  padding: 0;
  text-align: center;
  list-style: none;
  position: fixed;
  top:0;
  left: -300%;
  transition: 0.5s;
  z-index: 1000;
  overflow:hidden;
  display: flex;
  flex-direction: row;
}

#yoyakunav_checkbox:checked ~ .yoyakunav_ul {
  left: -000%;
  z-index: 1000;
}
.yoyakunav_page1{width:calc(100%/3);background-color: #b1de5c;}
.yoyakunav_page2{width:calc(100%/3);background-color: #4441de;}
.yoyakunav_page3{width:calc(100%/3);background-color: #f68f66;}












.wakuareanav,.wakuareanav2{/*枠からはみ出した部分を消すための領域　広く用意*/
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  top: -80px;
  -webkit-user-select: none;/*タブ上の文字を選択不可に*/
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}
.wakunav{
  position:absolute;
  width: 600px;
  height: 600px;
  right: -200px;
  top:-180px;
}
.wakunav2{
  position:absolute;
  width: 400px;
  height: 400px;
  left: -200px;
  bottom:10px;
}
.wakunav img,.wakunav2 img{
  width: 100%;
  animation:240s linear infinite rotation;
}

@media only screen and (max-width: 820px){
  .wakunav{width: 400px;height:400px;top:-100px;right:-160px;}
  .wakunav2{width: 300px;height:300px;bottom:5%;left:-120px;}
}
/*end nav*/














.top-banner-area{
  position: relative;width: 100%;padding-top: calc(100% * 1120 / 1920);
}
/*padding-topを%で指定すると親要素のwidthをベースにするのを利用し
top-banner-areaを縦横の比が一定のdivにする*/




.top-banner {
  position: absolute;width: 100%;height: 100%;
  top:0;left:0;right:0;bottom:0;
}
#mainvisual{width: 100%;height: 100%;}/*必要*/
/* .top-banner img {
  width: 100%;
} */
.top-banner_logo {
  position: absolute;
  width: 22%;
  left:2%;
  padding-top:2.5%;/*画像の横幅を基準にするためpadding-top*/
  -webkit-user-select: none;/*タブ上の文字を選択不可に*/
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}

#banner-wave_upper, #banner-wave_lower {
  position: absolute;
  width: 100%;
  top:0;left:0;
  z-index: 20;
}

.top-banner_logo img {
  width: 100%;
}
.icon-insta, .icon-line {
  position: fixed;
  width: 37px;
  height: 37px;
  top: 20px;
  z-index: 3000;
  cursor: pointer;
  -webkit-user-select: none;/*タブ上の文字を選択不可に*/
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}
.icon-insta{right: 13rem;}
.icon-line{right: 8rem;}
.icon-insta img, .icon-line img {
  width: 100%;
}

@media only screen and (max-width: 820px){
  .main-wrapper{display: none;}
  .nav_bottun{right: 20px;}/*right36*/
  .nav_span1, .nav_span2, .nav_span3{right:25px}/*right41*/
  .icon-insta{right: 7.8rem;}
  .icon-line{right: 4.8rem;}
}


.logo-area{width: 30%;margin:auto;max-width: 200px;}
.logo-area img{width:100%;height: 100%;}






.concept-area{
  width: 100%;
  margin: 2px auto 1rem;
}
.concept_title {
  width: 10.5rem;
  text-align: center;
  vertical-align: middle;
  margin:auto;
  font-size: 1rem;
  color: #23b6bc;
  border: solid 1px #23b6bc;
  border-radius: 1.2rem;
  padding: 0.2rem;
}
.concept_message-area{
  width: 100%;
  position: relative;/*ないとflowing-textのabsoluteが画面全体にかかってしまう*/
  overflow: hidden;/*flowing-textに設定していて失敗*/
}
.concept_message {
  position:relative;
  width: 100%;
  margin: 1rem auto 1rem;
  text-align: center;
  font-size: 0.9rem;
  z-index: 30;/*z-indexはposition(static以外)を指定しないと動作しない 他にも親要素に制限されたりtransformなどの影響も受ける*/
}
.flowing-text1, .flowing-text2 {
  display:inline;
  width: 100%;/*これを設定しないと二つの速度がズレた*/
  position: absolute;
  margin: auto;
  color: #bde9eb;
  font-size: 4.4rem;
  /*overflow: hidden;ここに設定して失敗　親要素に設定すべき*/
  top: 2%;/*親がrelative子がabsolute margin:auto top right bottom left全て0 with height設定 以上全て必要？*/
  right: 0;
  left: 0;
  bottom: 0;
  white-space : nowrap;
  /*transform: scaleY(2); ::beforeや::afterでは動かなかったが動いた　display inlineでは効かないらしい*/
}
.flowing-text1 {
  animation: flowing-text 20s linear infinite;
}
.flowing-text2 {
  left:110%;
  animation: flowing-text 20s linear infinite;
}
@keyframes flowing-text {
  0% { transform: translateX(0); }/*※青()内の数字は自分自身の大きさが基準*/
  100% { transform: translateX(-110%); }/*2のleftの%と合わせるとループしてるように見える*/
}
@media only screen and (max-width: 1160px) {/*重ならないよう調節　もう一段階あってもよいかも*/
  .flowing-text1 {animation: flowing-text 30s linear infinite;}
  @keyframes flowing-text {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-320%); }
  }
  .flowing-text2 {display: none;}
}
@media only screen and (max-width: 820px) {
.flowing-text1,.flowing-text2{top:10%;}
}
/*疑似要素でやると画面幅が狭くなると消えてしまった
.flowing-text::before,
.flowing-text::after {
  content: "NATURAL + LUXURY + RELAX";
  position: absolute;
  width: 100%;
  height: auto;
  color: #bde9eb;
  font-size: 4.4rem;
  font-family: 'Marcellus', serif;
  line-height: 1.0;
  text-align: center;
  white-space: nowrap;/*折り返しを防ぐ*
  display: inline-block;
  z-index: -1;
}
.flowing-text::before {
  left: 0;
  animation: flowing-text 40s linear infinite;
}
.flowing-text::after {
  left: 110%;
  animation: flowing-text 40s linear infinite;
}
@keyframes flowing-text {
  0% { transform: translateX(0); }
  100% { transform: translateX(-110%); }/*afterの数値と合わせるとループしてるように見える*
}
@media screen and (max-width: 480px) {
.flowing-text {
    padding: 40px 10vw;
}
}
*/


.omiseimg-back {
  position: relative;
  width: 100%;
}
.omiseimg-area {
  position: relative;
  width:  98%;
  display: flex;
  flex-direction: row;
  justify-content: center;/*一見同列の横並びに見えるように*/
  margin: 3rem auto 5rem;
  z-index: 10;
}
.omiseimg {
  margin: auto;
}
.omiseimg img {
  display: block;
  width: 95%;
  height:auto;
  margin: auto;
}



.wakuarea1{/*枠からはみ出した部分を消すための領域　広く用意*/
  position: absolute;
  width: 100%;
  height: 700px;
  overflow: hidden;
  z-index: 0;
  top: -80px;
  -webkit-user-select: none;/*タブ上の文字を選択不可に*/
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}
.waku1 {
  position:absolute;
  width: 600px;
  height: 600px;
  right: -300px;
  top:20px;
}
.waku1 img{
  width: 100%;
  animation:240s linear infinite rotation;
}
@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}

@media only screen and (max-width: 820px){
  .omiseimg-area{flex-direction: column;margin-bottom:2rem;}
  .omiseimg_upper,.omiseimg_lower{width:85%;margin:0 0.5rem;}
  .omiseimg_upper{margin-right:auto;}
  .omiseimg_lower{margin-left:auto;}
  .omiseimg{width: 50%;}
  .waku1{right:-520px;}
  .waku1 img{width: 35%;}
}



.campaignarea{position: relative;min-width: 300px;width: 50%;max-width: 900px;
  z-index: 20;margin: 2rem auto; cursor: pointer;
}
.campaignarea img{width: 100%;height: auto;}


@media only screen and (max-width: 820px){
  .campaignarea{width: 80%;}
}


/*main menu*/
#_ {/*tabクリック時ジャンプ先　少し上まで表示させる　一瞬表示されるため目立たない名前*/
  position: absolute;
  width: 100%;
  top: -50px;
}

.main-wrapper {
  position: relative;
  width: 95%;
  min-height: 800px;
  margin:2rem auto 1rem;
  display: flex;
  flex-direction: row;
}

.tab-area {
  width: 220px;
  display: flex;
  flex-direction: column;
}
.tab-area.fixed{position:fixed;top:0;}
.tab-area.fixedf{justify-content: end;}

.tab-button {
  color: #a6aeae;
  white-space: nowrap;
  font-size: 28px;/*1.8remだったが、windowsと合わせるためここだけpx*/
  text-align: left;
  cursor: pointer;
  background-color: #edf9f900;/*buttonデフォルトの色を透明に*/
  border: none;/*デフォルトの枠も消す*/
  border-radius: 4px 0 0 4px;
  margin: 3px -1px 0 1px;
  padding: 10px 5px;
  -webkit-user-select: none;/*タブ上の文字を選択不可に*/
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}
.tab-button.is-active {
  color: #23b6bc;/*RGB96222200新カラー#60dec8*/
}

.wakuarea2{
  position: absolute;
  width: 100%;
  height: 500px;
  /*overflow: hidden;左端は無くて大丈夫?*/
  -webkit-user-select: none;/*タブ上の文字を選択不可に*/
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  z-index: -1;
}
.waku2 {
  position: absolute;
  width: 450px;
  height: 450px;
  left: -250px;
  top: 450px;
}
.waku2 img{
  width: 100%;
  animation:200s linear infinite rotation;
}





.content{width:100%;display: none;}
.content.is-show {display: block;}


.content-area {
  width: calc(100% - 220px);/* - ボタン幅 */
  margin-left:auto;/*タブが移動したときにも右寄せするため*/
}





.content_menu, .content-wrapper_column {
  width: 100%;
  height: auto;
  background-color: #d3f0f2;
  box-shadow: 0 0 5px 8px #d3f0f2;/*ぼかしx y blur-radius広がり大きいほど広く薄く spread拡張範囲*/
}

.content_menu{margin:1rem auto;}
.content-wrapper_row {display: flex;flex-direction: row;}
.content-wrapper_column {display: flex;flex-direction: column;margin:1rem auto;}

.row{
  display: flex;
  flex-direction: row;
}
.column{
  display: flex;
  flex-direction: column;
}

.content_textarea {
  width: 50%;
  min-width: 320px;
  margin: 1.8rem 2rem 2rem 2rem;
}

.content_textonly{
  position:relative;
  width: 100%;
}

.content_title {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 1rem auto;
  text-align: center;
  color:#23b6bc;
}
.subtitle {
  font-size: 1.2rem;
  margin-top: 1.8rem;
}
.underline {
  width: 400px;
  border-bottom: 1px solid #23b6bc;
  margin: 0.5rem 0 1rem 0;
}
.bold{font-weight: bold;}
.right{margin-left:auto;text-align: right;}

.point_PC{width: 70%;margin:auto;}
.text, .text_textonly, .point {
  font-size: 0.8rem;
}
.text_textonly{
  width: 80%;
  margin: auto;
}
.large{font-size:1rem;}
.abitlarge{font-size: 0.85rem;}
.centered{display:block;text-align: center;margin:auto;}
.marker{background:linear-gradient(transparent 50%, #ff6 90%);}
.indented{padding-left: 0.8rem;}

.content_title_row{width:90%;justify-content: space-between;margin:1rem auto;}
.text_textonly_left{width: 100%;}
.content_omiseimg5{width: 40%;min-width:180px;margin:auto;}
.content_omiseimg5 img{width: 100%;}


.point {
  position: relative;
  margin: 4rem 0 0;
  border: solid 1px #23b6bc;
  border-radius: 1.2rem;
  padding: 1rem;
}
.point::before {
  position: absolute;
  content:"Point";
  color: #23b6bc;
  border: solid 1px #23b6bc;
  border-bottom: none;
  left: 30px;
  top: -23px;
  border-radius: 18px 18px 0 0;
  padding: 0 10px;
  
}










.taikyoku{position:relative;width:140px;height:140px;margin:auto;}
.taikyoku_outercircle{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;
border:5px solid #23b6bc;}
.taikyoku_square{width:100%;height:50%;top:0;left:0;}
.taikyoku_innercircle_kampo,.taikyoku_innercircle_sinkyu{
  position:absolute;width:50%;height:50%;border-radius:50%;top:25%;
  display:flex;align-items:center;justify-content:center;font-size: 1.2rem;}
  .taikyoku_innercircle_kampo{left:0;color:white;}
  .taikyoku_innercircle_sinkyu{right:0;color:#23b6bc;}
.taikyoku_batu,.taikyoku_batu2{position:absolute;width:10%;height:10%;top:45%;left:45%;
display:flex;align-items:center;justify-content:center;font-size: 1.2rem;color:#454545;}
.taikyoku_batu2{font-size:1.4;font-weight:bold;color:#d3f0f2;}
.taikyoku_outercircle,.taikyoku_innercircle_kampo{background-color: #23b6bc;}
.taikyoku_square,.taikyoku_innercircle_sinkyu{background-color: white;}
@media only screen and (max-width: 820px){
  .taikyoku{width:120px;height:120px}
  .taikyoku_innercircle_kampo,.taikyoku_innercircle_sinkyu{font-size:1rem;}
}









.nagare {
  position: relative;
  text-align: center;
  width: 96%;
  margin:1rem auto;
  font-size: 0.8rem;
}
.nagare_title{
  width:7rem;
  margin: 2.5rem auto 1rem;
  text-align: center;
  font-size: 1.2rem;
  color:#23b6bc;
}
.nagare_course{
  display: inline-block;/*幅を字幅を基準にしたいのと、marginをつけたいためinline-block*/
  padding:0.5rem;
  border-radius: 10px;
  background-color: #edf9f9;
  box-shadow: 0 0 3px 2px #edf9f9;
  margin:0.5rem auto;
  font-size: 0.9rem;
  font-weight: bold;
}
.nagare_menu-title{
  font-size: 0.9rem;
  font-weight: bold;
}


.nagare_row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin:auto;
}
.nagare_uti{
  width:32%;
  margin-right: 4%;/*nagare_sotoのスペースと合わせた*/
  flex-direction: column;}
.nagare_soto{width: 68%;display: flex;flex-direction:column;}/*4%をスペース*/

.tab-label_soto{width: 47%;position:relative;}
/*
.nagare_waku_soto{width: 47%;}/*(32/68)%*/


.nagare_waku_soto1, .nagare_waku_soto2, .nagare_waku_uti{
  position: relative;
  border-radius: 10px;
  background-color: #edf9f9;
  box-shadow: 0 0 3px 2px #edf9f9;
}
.nagare_waku_soto1:hover, .nagare_waku_soto2:hover, .nagare_waku_uti:hover {
  cursor:pointer;
	background-color:#60dec933;/*ホバー時*/
}

.nagare_soto_spacer{width: 2%;}

.yojo{
  position: relative;
  width: 36%;
  margin:auto;
  border-radius: 10px;
  background-color: #edf9f9;
  box-shadow: 0 0 3px 2px #edf9f9;

}

.tap {
  position: absolute;
  width: 50px;
  height: auto;
  top: 40px;
  right: -10px;
  transform: rotate(-15deg);
}

.tap img {width: 100%; height:100%;}




.arrow-zone{
  position:relative;
  width: 73%;
  height: 80px;
  margin:0 auto;
}
.arrow1{/*縦線*/
  position: relative;
  display: block;
  margin:0.5rem auto;
  width: 4px;
  height: 25px;
  border-radius: 5px;
  background-color: #23b6bc;
}
.arrow2{/*横線*/
  position: relative;
  margin:-12px auto ;
  left:0;
  width: calc(100% - 20px);/*スペース必要*/
  height: 4px;
  border-radius: 5px;
  background-color: #23b6bc;
}
.arrow3{
  position:absolute;
  display: block;
  margin:0.5rem auto;
  width: 4px;
  height: 25px;
  left:10px;
  top:15px;
  border-radius: 5px;
  background-color: #23b6bc;
}
.arrow4{
  position:absolute;
  display: block;
  margin:0.5rem auto;
  width: 4px;
  height: 25px;
  right:10px;
  top:15px;
  border-radius: 5px;
  background-color: #23b6bc;
}
/*.arrow3::before, .arrow4::before {
  content: "";
  position: absolute;
  bottom: 3px;
  left: -1px;
  display: block;
  width: 12.5px;
  height: 5px;
  border-radius: 5px;
  background-color: #23b6bc;
  transform: rotate(-45deg);
}
.arrow3::after, .arrow4::after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: -1px;
  display: block;
  width: 12.5px;
  height: 5px;
  border-radius: 5px;
  background-color: #23b6bc;
  transform: rotate(45deg);
}
*/



.arrow {
  position: relative;
  display: block;
  margin:0.5rem auto;
  width: 4px;
  height: 25px;
  border-radius: 5px;
  background-color: #23b6bc;
}
.arrow::before,.arrow3::before,.arrow4::before{
  content: "";
  position: absolute;
  bottom: 3px;
  left: -1px;
  display: block;
  width: 12.5px;
  height: 4px;
  border-radius: 5px;
  background-color: #23b6bc;
  transform: rotate(-45deg);
}
.arrow::after,.arrow3::after,.arrow4::after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: -1px;
  display: block;
  width: 12.5px;
  height: 4px;
  border-radius: 5px;
  background-color: #23b6bc;
  transform: rotate(45deg);
}

.plus,.plus_big{
  position: relative;
  display: block;
  margin:0.65rem auto;
  width: 4px;
  height: 20px;
  border-radius: 5px;
  background-color: #23b6bc;
}
.plus::before,.plus_big::before{
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 4px;
  top:8px;
  left:-8px;
  border-radius: 5px;
  background-color: #23b6bc;
}
.plus_big{
  width: 4px;
  height: 30px;
}
.plus_big::before{
  width: 30px;height:4px;
  top:13px;
  left:-13px;}



.namikakko {
  position: relative;
  margin: 1.2rem auto 1rem;
  left:0;
  width: calc(100% - 25px);/*スペース必要*/
  height: 3px;
  border-radius: 5px;
  background-color: #23b6bc;
}
.namikakko::before {
  content: "";
  position: absolute;
  bottom: 2.5px;
  left: -10px;
  display: block;
  width: 12.5px;
  height: 3px;
  border-radius: 5px;
  background-color: #23b6bc;
  transform: rotate(30deg);  
}
.namikakko::after {
  content: "";
  position: absolute;
  bottom: 2.5px;
  right: -10px;
  display: block;
  width: 12.5px;
  height: 3px;
  border-radius: 5px;
  background-color: #23b6bc;
  transform: rotate(-30deg);  
}








.content_imgarea {
  width: calc(100% - 50%);
  min-width: 300px;
  position: relative;
  z-index: 10;
}












.content_imgarea_yoko1,.content_imgarea_yoko2{
  position:absolute;
  width: 55%;
min-width: 160px;}
.content_imgarea_yoko1{top:10%;left:40%;}
.content_imgarea_yoko2{top:70%;left:10%;}








.img_waku1,.img_waku2,.img_waku3,.img_waku4,
.content_imgarea_maru1,.content_imgarea_maru2{
  position:absolute;
  width:22vw;height:22vw;/*画面幅に対する割合*/
  max-width: 340px;
  max-height: 340px;
  min-width: 140px;
  min-height: 140px;
  border-radius: 100%;
}

.content_imgarea_maru1,.content_imgarea_maru2{width:16vw;height:16vw}
.content_imgarea_maru1{top:30%;left:10%;}
.content_imgarea_maru2{top:45%;left:50%;}



.img_waku1{top:5%;left:-5%;}
.img_waku2{top:25%;left:35%;}
.img_waku3{top:45%;left:-5%;}
.img_waku4{top:65%;left:35%;}
.img_waku1 img,.img_waku2 img,.img_waku3 img,.img_waku4 img,
.content_imgarea_maru1 img,.content_imgarea_maru2 img{
  width: 100%;margin:auto;
}

.content_imgarea_img1,.content_imgarea_img2,
.content_imgarea_img3,.content_imgarea_img4,
.content_imgarea_img{
  position:absolute;
  width: 80%;
  height: 80%;
  border-radius: 100%;
  top: 5%;bottom: 5%;left: 5%;right: 5%;
  margin:auto;
  overflow: hidden;
  z-index: -1;
}

.content_imgarea_img1::after, .content_imgarea_img2::after,
.content_imgarea_img3::after, .content_imgarea_img4::after,
.content_imgarea_img::after{/*ぼかし*/
	position: absolute;
	content: '';
	top: 0;bottom: 0;left: 0;right: 0;
  border-radius: 100%;
	box-shadow: inset 0 0 10px 12px #d3f0f2;/*画像の疑似要素をぼかすときは、spread幅を元のぼかし範囲より小さくしたほうが良さそう(3px 2px)*/
}

.content_imgarea_img1 img,.content_imgarea_img2 img,
.content_imgarea_img3 img,.content_imgarea_img4 img,
.content_imgarea_img img{
  display: inline-block;
  width: 100%;
}


.img_wakuplus{position:relative;margin:auto;width:100%;}
.img_waku{position:relative;z-index:100;}/*z-indexはposition必要*/
.img_waku img{width: 100%;margin:auto;}

.img_withwakuyoko,.img_withwakuyoko_big,.img_withwakuyoko_small{
  position:absolute;
  width: 85%;height: 80%;
  border-radius: 10%;
  top: 6%;bottom: 6%;left: 8%;right: 8%;
  margin:auto;
  overflow: hidden;
  z-index:1;
  }
  .img_withwakuyoko_big{top:3%;}
  .img_withwakuyoko_small{top:0;}
.img_withwakuyoko::after,.img_withwakuyoko_small::after{
  position: absolute;
  content: '';
  top: 0;bottom: 0;left: 0;right: 0;
  border-radius: 10%;
  box-shadow: inset 0 0 8px 5px #d3f0f2;/*画像の疑似要素をぼかすときは、spread幅を元のぼかし範囲より小さくしたほうが良さそう(3px 2px)*/
}
.img_withwakuyoko_big::after {
  position: absolute;
  content: '';
  top: 0;bottom: 0;left: 0;right: 0;
  border-radius: 10%;
  box-shadow: inset 0 0 10px 10px #d3f0f2;/*画像の疑似要素をぼかすときは、spread幅を元のぼかし範囲より小さくしたほうが良さそう(3px 2px)*/
}
.img_withwakuyoko img,.img_withwakuyoko_big img,.img_withwakuyoko_small img{width: 100%;}

.about_img{width: 80%;margin:auto;}

.about_img_wakunasi{
  position:relative;
  width: 100%;
  border-radius: 25px;
  overflow: hidden;
}
.about_img_wakunasi::after{
  position: absolute;
  content: '';
  border-radius: 25px;
  top: 0;bottom: 0;left: 0;right: 0;
  box-shadow: inset 0 0 8px 5px #d3f0f2;
}

.about_img_wakunasi img{width: 100%;}


.img_wakuplus{position:relative;margin:auto;width:100%;}
.img_waku{position:relative;z-index:100;}/*z-indexはposition必要*/
.img_waku img{width: 100%;margin:auto;}

.img_withwaku{
  position:absolute;
  width: 80%;height: 80%;
  border-radius: 100%;
  top: 5%;bottom: 5%;left: 5%;right: 5%;
  margin:auto;
  overflow: hidden;
  z-index:1;
  }
.img_withwaku::after {
  position: absolute;
  content: '';
  top: 0;bottom: 0;left: 0;right: 0;
  border-radius: 100%;
  box-shadow: inset 0 0 4px 5px #d3f0f2;/*画像の疑似要素をぼかすときは、spread幅を元のぼかし範囲より小さくしたほうが良さそう(3px 2px)*/
}
.img_withwaku img{width: 100%;}

.about_img{width: 40%;margin:auto;}











/*kampo*/
.chushutu_img{position:absolute;width: 150px;bottom:0;right:-130px;}
.chushutu_img img{width: 100%;}

.relative{position: relative;}

.menu-imgarea{position:relative;width: 100%;display:flex;flex-direction:row;justify-content: center;}
.menu-imgarea_left{width: 60%;white-space: nowrap;}
.menu-imgarea_right{width: 35%;margin:auto;}
.menu-imgarea_right img{width: 80%;left:0;margin:auto;}







.kampo-illust1{position:relative;width:80%;top:30%;margin:auto;}
.kampo-illust2{position:relative;width:50%;top:20%;margin:auto;}
.kampo-illust1 img, .kampo-illust2 img{width: 100%;}
/*end kampo*/


/*hari*/
.zetsumyaku-wrapper, .harisymptoms-wrapper, .hariapproach-wrapper{
  width: 100%;margin:2rem auto;justify-content: space-between;}
.zetsumyaku{width: 30%;margin:auto;text-align:center;}
.zetsumyaku_img, .harisymptoms_img{width:100%;margin:auto;}
.harisymptoms_img2{width: 120%;margin:auto;}
.zetsumyaku_img img, .harisymptoms_img img{width: 100%;}
.harisymptoms_img2 img{width: 100%;}

.harisymptoms{width: 23%;margin-top:auto;text-align:center;}/*margin-top:autoで下揃え*/
.harisymptoms_img_withwaku{width: 100%;}

.hariapproach-wrapper{align-items: center;margin:0 auto;}
.hariapproach{width: 40%;margin:auto;text-align: center;background-color: #edf9f9;
  padding: 1rem; border-radius: 15px;}





.arrow-zone-hari{
  position:relative;
  width: 82%;
  height: 80px;
  margin:3rem auto 0;
}

.arrowhari1,.arrowhari2,.arrowhari3,.arrowhari4,.arrowhari5{/*縦棒*/
  position:absolute;
  display: block;
  margin:0.5rem auto;
  width: 4px;
  height: 25px;
  top:-30px;
  border-radius: 5px;
  background-color: white;
}
.arrowhari1{left:10px;}.arrowhari2{left:34%;}
.arrowhari3{right:34%;}.arrowhari4{right:10px;}

.arrowhari5{/*縦棒long*/
  position:relative;
  display: block;
  margin:0.5rem auto;
  width: 4px;
  height: 50px;
  top:0px;
  border-radius: 5px;
  background-color: white;
}
.arrowhari5::before,.arrowhari5::after{
  content: "";
  position: absolute;
  bottom: 3px;
  display: block;
  width: 12.5px;
  height: 4px;
  border-radius: 5px;
  background-color: white;
  
}
.arrowhari5::before{left:-1px;transform: rotate(-45deg);}
.arrowhari5::after{right:-1px;transform: rotate(45deg);}

.white, .white::before, .white::after{background-color: white;}
.colored{color:#23b6bc;font-size:1rem;}
.nowrap{white-space: nowrap;}
.small{font-size: 0.8rem;}
/*end hari*/


/*biyou*/
.biyousymptoms-wrapper{width:90%;display:flex;flex-direction:column;margin:2rem auto 2rem 0;}
.biyousymptoms-row{width:100%;display:flex;flex-direction:row;
  justify-content:space-around;margin:0.5rem auto;}
.biyousymptoms1,.biyousymptoms2,.biyousymptoms3,
.biyousymptoms4,.biyousymptoms5,.biyousymptoms6{
  display:block;width: 80px;height:80px;border-radius:50%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;/*中心揃え*/
  color:white;
}
.biyousymptoms1{background-color:#cd9f8a;box-shadow: 0 0 3px 3px #cd9f8a;}
.biyousymptoms2{background-color:#cae49a;box-shadow: 0 0 3px 3px #cae49a;}
.biyousymptoms3{background-color:#bf8dce;box-shadow: 0 0 3px 3px #bf8dce;}
.biyousymptoms4{background-color:#fda4ac;box-shadow: 0 0 3px 3px #fda4ac;}
.biyousymptoms5{background-color:#f6a570;box-shadow: 0 0 3px 3px #f6a570;}
.biyousymptoms6{background-color:#e8ce58;box-shadow: 0 0 3px 3px #e8ce58;}

.biyou_imgarea_hihu{ width: 70%; margin:auto;}
.biyou_imgarea_hihu img{width: 100%;}

.touhi-img{width: 90%;display:flex;flex-direction:row;justify-content:space-around;margin:auto;}
.touhi{width: 40%;}

.img_right{position:absolute;width: 100px;right:0;top:0;}

/*end biyou*/







.tab-area-phone{position:relative;width: 40%;display:flex;flex-direction:column;margin:auto;}
.tab-phone_row{width:100%;display:flex;flex-direction:row;}
.tab-phone1,.tab-phone2,.tab-phone3,.tab-phone4,.tab-phone5,.tab-phone6,.tab-phone7,.tab-phone8,.tab-phone-spacer{
  position:relative;width:40%;padding-top:calc(40%*200/300);
  margin:0.5rem auto;/*topbanner同様padding-topが親要素のwidthを基準にするのを利用*/
  border:solid 2px white;
  cursor: pointer;
}
.tab-phone-spacer{border:none;cursor:none;}
.tab-phone_img{position:absolute;width:100%;height:auto;top:0;right:0;left:0;bottom:0;cursor: pointer;}
.tab-phone_img img{width:100%;height:100%;opacity: 0.3;}
.tab-phone_message{
  position:absolute;width:100%;height:36%;top:32%;z-index: 100;
  display: flex;flex-direction: column;justify-content: center;align-items: center;
  font-size:1.1rem;font-weight: bold;
  filter: drop-shadow(0px 0px 2px #ffffff);
  background-color: #ffffff8f;/*#ffffff2a*/white-space: nowrap;cursor: pointer;
}
.tab-phone_message::before{
  position:absolute;
  content:"";
  bottom:2px;right:2px;
  width: 0;height: 0;
  border-left: 8px solid transparent;
  border-top: 8px solid transparent;
  border-right: 8px solid #23b6bc;
}
.tab-phone_title{
  position:absolute;
  top:-2rem;left:0;
  font-size:1.8rem;
  color:#7bd3d7;
}

.wakuarea3{
  position: absolute;
  width: 100%;
  height: 500px;
  /*overflow: hidden;左端は無くて大丈夫?*/
  -webkit-user-select: none;/*タブ上の文字を選択不可に*/
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  z-index: 0;
}
.waku3 {
  position: absolute;
  width: 450px;
  height: 450px;
  left: -180px;
  top: 60px;
}
.waku3 img{
  width: 60%;
  animation:200s linear infinite rotation;
}


/*phone*/
.main-wrapper-phone,.phone-only,.back-button-phone{display: none;}

@media only screen and (max-width: 820px){
  .main-wrapper{display: none;}
  .pc-only{display: none;}

  .back-button-phone{display:block;position:fixed;bottom:20px;right:20px;
  width:46px;height:46px;
  border-radius:50%;cursor: pointer;z-index:1000;
  background-color: #23b6bcda;/*buttonデフォルトの色を透明に*/
  border: none;/*デフォルトの枠も消す*/
}
  .back-button-phone_arrow1{position:absolute;left:23px;top:11px;}
  .back-button-phone_arrow2{position:absolute;left:23px;top:19px;}
  .back-button-phone_arrow1::before,.back-button-phone_arrow1::after,
  .back-button-phone_arrow2::before,.back-button-phone_arrow2::after{
    content: "";position: absolute;margin: auto;
    width: 2.4px;height: 16px;border-radius: 1.2px;
    background-color:#edf9f9;
  }
  .back-button-phone_arrow1::before,.back-button-phone_arrow2::before
  {transform: rotate(45deg);left:-6px;}
  .back-button-phone_arrow1::after,.back-button-phone_arrow2::after
  {transform: rotate(-45deg);right:-6px;}



  .main-wrapper-phone{display:block;position:relative;width:100%;}
  .phone-only{display: inline;}
  .bar-phone{position:relative;width:90%;border-bottom: 1px solid #23b6bc;margin: 2rem auto;}

  .tab-area-phone{width: 90%;}
  .phone_text{width: 92%;font-size:0.8rem;margin:auto;}
  .phone_wide{width: 96%;margin:auto;}
  .content_title{font-size: 1.3rem;}
  .underline{width: 70%;}
  .font-small{font-size:0.8rem;}
  .chushutu_img{position:absolute;width: 150px;bottom:-100px;right:0;}

  .about_img{width: 80%;}

  .hariapproach{width: 44%;padding:0.5rem;}
  .biyousymptoms-wrapper{margin:1rem auto;}
  .biyou_imgarea_hihu{width:100%;}
  .bg-deep{background-color:#d3f0f2;box-shadow: 0 0 5px 8px #d3f0f2;}
  .bg-light{background-color:#edf9f9;box-shadow: 0 0 5px 8px #edf9f9;}
}
/*end phone*/









.footer {
  position: relative;
  width: 100%;
  background-color: #edf9f9;
  /*overflow: hidden;*/
  z-index: -10;
}

#footer-wave{
  position: absolute;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
   -webkit-filter: blur(8px);
  -moz-filter: blur(8px);
  -o-filter: blur(8px);
  -ms-filter: blur(8px);
  filter: blur(8px);
}
.footer_column{
  display: flex;
  flex-direction: column;
}

.footer_logo {/*footer 上の段*/
  padding-top: 30%;
  height: 300px;
  z-index: 20;
}
.footer_logo img {
  position: absolute;
  width: 35%;
  min-width: 280px;
  top: 5%;
  left: 10%;
  display: block;/*左に寄ってしまうのを回避するためmargin:autoを適用する目的*/
  margin: auto;
}

.footer_row {
  height: 100%;
  margin-bottom: 0.2rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

/*.footer_leftspace {
  width: 44%;
}*/
.footer_message {
  padding-left: 0.8rem;
  width: 26%;
  min-width: 270px;
  font-size: 0.7rem;
  display: flex;
  flex-direction: column;
  z-index: 30;
}

#map, #tel, #mail{
  text-decoration: none;
  color: initial;
  cursor: pointer;
}
.address-area{
  display: flex;
}
.adress_sentence {
  display: flex;
  flex-direction: column;
}
.address_sentence_lower{color: #23b6bc;font-weight: bold;cursor: pointer;}
.address-area img{
  margin-left: 0.3rem;
  width: 2rem;
}

.telnum-area, .email-area{
  display: flex;
  align-items: center;/*justify-contentは横に整頓するとき*/
  margin-bottom: 0.5rem;
}
.telnum-area img, .email-area img{
  margin-right: 0.5rem;
  width: 1.4rem;
}
.telnum, .email{
  color: #23b6bc;
  font-size: 0.8rem;
  font-weight: bold;
  text-decoration: none;
}



.copyright {
  height: 1.6rem;
  display: block;
  text-align: center;
  margin: 0.8rem auto 1rem;
  font-size: 0.8rem;
}

.wrapper{z-index: 9999;}

@media only screen and (max-width: 820px) {
  .footer_logo{height:370px;padding-top:0}
  .footer_logo img{min-width: 180px;left:0;top:190px;}
  .footer_row{flex-direction: column;margin-left:10%;}
  .footer_message{margin-bottom: 0.8rem;}
  .wakuarea4{position:absolute;
    width: 100%;height: 500px;
    overflow: hidden;
    z-index: 500;
    top: -80px;
    -webkit-user-select: none;/*タブ上の文字を選択不可に*/
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .waku4{position: absolute;
    width: 350px;height: 350px;
    right: -250px;top: 90px;
  }
  .waku4 img{width: 60%;animation:300s linear infinite rotation;}
}




/*recruit後で消去*/
.recruit-img-area{
  width: 40%;
  margin: 2rem auto;
}
.recruit-img-area img {
  width: 100%;
  height: 100%;
}
.recruit-area{
  width: 90%;
  margin: 2rem auto;
}
.boss_message{width: 50%;margin: 0 auto 0 0;}
.boss_message img{width: 100%;height: 100%;}
/*end recruit後で消去*/

/*staff*/
.staff-wrapper{width:100%;display:flex;flex-direction:column;}

.staff-pagetitle{font-size:1.8rem;color:#23b6bc;text-align:center;margin:0.8rem auto;}
.staff-selectmessage{font-size: 0.8rem;text-align:center;margin:1rem auto 0.6rem;}
.staff-selectarea{width: 100%;display:flex;flex-direction:row;justify-content:center;margin:0 auto;background-color: #edf9f9a8;/*wakuで見えづらくなるのでぼかす*/}
.staff-selection{width:140px;height:40px;
  display:flex;align-items:center;justify-content: center;margin:0 0.8rem 5px;padding:0 10px 10px;}
.staff-selection img{width: 70%;max-width:3rem;margin: auto;
  -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;pointer-events: none;
}

.staff-selection.staff-selection-active{background-color:#d3f0f2;
  border-top-left-radius:10px;border-top-right-radius:10px;box-shadow: 0 0 5px 8px #d3f0f2;
}

.staff-content-colored{width:100%;background-color:#d3f0f2;box-shadow: 0 0 5px 8px #d3f0f2;padding:1rem 0;margin:auto;}


.staff-row{position:relative;width:100%;display:flex;flex-direction:row;justify-content:space-between;}

.staff-imgarea_column,.staff-imgarea_column_yumemiku,.staff-profile,.staff-message,.staff-motto,.staff-treatment,.staff-spacer{position:relative;width: 46%;margin:0 auto;}

.staff-profile,.staff-content_yumemiku,.staff-message,.staff-motto,.staff-treatment,.accordion-wrapper{
  background-color:white;box-shadow: 0 0 5px 8px white;font-size: 0.8rem;margin:2rem auto;padding:0.5rem;
}
.staff-content_yumemiku{position:relative;width: 100%;}

.staff-subtitle{font-size:1.2rem;color:#23b6bc}
.staff-subtitle2,.staff-subtitle3{position:absolute;font-size:36px;color:#23b6bc;top:-36px;right:0;}
.staff-subtitle3{top:-42px;}

.staff-profile span,.staff-content_yumemiku span{position:relative;left:0.8rem;}
.staff-profile span:before,.staff-content_yumemiku span:before{ 
  position:absolute;
  content:"";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color:#23b6bc;
  top:6px;
  left:-0.8rem;
}


.staff-char{width: 100px;}
.staff-char img{width: 100%;}

.staff-imgarea_column,.staff-imgarea_column_yumemiku{display:flex;flex-direction:column;justify-content:start;}
.staff-imgarea_row{display:flex;flex-direction:row;justify-content:space-evenly;align-items: end;}

.staff-imgarea{position:relative;margin: auto auto;}/*margin: 10% auto auto*/

.staff-imgarea_maru{
  position:relative;
  width:28vw;height:28vw;/*画面幅に対する割合*/
  max-width: 300px;max-height: 300px;
  border-radius: 100%;
  margin:auto;
}
.staff-imgarea_maru-small{
  position:relative;
  width:14vw;height:14vw;/*画面幅に対する割合*/
  max-width: 150px;max-height: 150px;
  border-radius: 100%;
  margin:auto;
}

.staff-imgarea_maru img,.staff-imgarea_maru-small img{
  position:absolute;
  width: 100%;height:100%;margin:auto;
  top:0;bottom:0;left:0%;right:0;
  z-index: 2;
}

.staff-imgarea_img{
  position:absolute;
  width: 80%;
  height: 80%;
  border-radius: 100%;
  top: 5%;bottom: 5%;left: 5%;right: 5%;
  margin:auto;
  overflow: hidden;
  z-index: 1;
}

.staff-imgarea_img::after{/*ぼかし*/
	position: absolute;
	content: '';
	top: 0;bottom: 0;left: 0;right: 0;
  border-radius: 100%;
	box-shadow: inset 0 0 10px 12px #d3f0f2;/*画像の疑似要素をぼかすときは、spread幅を元のぼかし範囲より小さくしたほうが良さそう(3px 2px)*/
  z-index: 3;
}
.staff-imgarea_img img{
  display: inline-block;
  width: 100%;
}
.staff-imgarea_mikurin,.staff-imgarea_yumekichi{position:absolute;width:80px;top:60%;z-index: 30;}
.staff-imgarea_mikurin img,.staff-imgarea_yumekichi img{width:100%;}
.staff-imgarea_mikurin{left:10%;}
.staff-imgarea_yumekichi{right:10%;}


.staff-subimgarea{display:flex;flex-direction:row;justify-content:space-evenly;}
.staff-subimg{width: 35%;}
.staff-subimg img{width:100%;}

.staff-content{width:100%;display: none;}
.staff-content.staff-is-show,.staff-content.staff-is-show-p{display: block;}

.staff-qanda{width: 100%;}
.qanda1,.qanda2{width:100%;display:flex;flex-direction:row;}
.qanda2{background-color: #edf9f9;}/*#d3f0f2  #edf9f9*/
.qnum{width: 2.4rem;}
.anum{width: 1.4rem;color:#23b6bc;margin-left:0.2rem;}
.qanda-q{width:25%;}
.qanda-a{position:relative;width:75%;color:#23b6bc;}

.staffname{position:absolute;height:0.95rem;left:-0.17rem;top:0.08rem;
  -webkit-user-select: none;/*タブ上の文字を選択不可に*/-moz-user-select: none;-ms-user-select: none;user-select: none;pointer-events: none
}
.staffname img{width: 100%;}

/*for accordion*/
.accordion-wrapper,.accordion-wrapper_tencho-column{
  width: 96%;
  padding: 0;
  margin:2rem auto;
}
.accordion_content{
  height: 0;
  padding: 0;
  overflow: hidden;
  transition: .5s;
  margin:0;
}
.accordionBtn{
  position: relative;
  border: none;
  width: 100%;
  background-color: inherit;
  cursor: pointer;
  text-align: center;
  padding: 15px 0 15px 20px;
}
.accordionBtn::before,
.accordionBtn::after{
  content:"";
  position: absolute;
  top: 50%;
  width: 1.5px;
  height: 8px;
  background-color: #23b6bc;
  transition: .5s;
}
.accordionBtn::before{
  transform: translateY(-50%) rotate(-45deg);
  right: calc(50% - 7rem + 35px);
}
.accordionBtn::after{
  transform: translateY(-50%) rotate(45deg);
  right: calc(50% - 7rem + 30px);
}
.accordion.active button::before{
  transform: translateY(-50%) rotate(-135deg);
  transition:.5s;
}
.accordion.active button::after{
  transform: translateY(-50%) rotate(135deg);
  transition:.5s;
}
.accordion_content{ overflow-y: auto; }/*.accordion-wrapper.activeだと100Questionが消えてしまう*/





@media only screen and (max-width: 820px) {
.staff-selectarea{width: 100%;padding:0;}
.staff-selection{padding:0;}
.staff-row{flex-direction: column;}
.staff-imgarea_column,.staff-imgarea_column_yumemiku,.staff-profile,.staff-message,
.staff-motto,.staff-treatment,.staff-spacer{position:relative;width: 92%;}
.staff-imgarea_column{height:500px;}
.staff-imgarea_column_yumemiku{height:720px;}
.staff-imgarea_maru{width:56vw;height:56vw;max-width: 300px;max-height: 300px;}
.staff-imgarea_mikurin,.staff-imgarea_yumekichi{width:70px;}
.staff-qanda{font-size: 0.7rem;}
.staffname{height:0.84rem;left:-0.14rem;top:0.06rem;}
}

/*end staff*/

/*tencho-column*/
.column-blog_title-area{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;}
.content_title_column-blog{font-size: 1.6rem;font-weight: bold;margin:1rem auto 2rem;text-align: center;color:#23b6bc;}

.column-blog_selectarea{width: 100%;height: 2rem;display: flex;flex-direction: row;justify-content: center;margin: 0 auto 2rem;}
.column-blog_select{padding:0.4rem;font-size: 1.2rem;color:#a9a9a9;cursor: pointer;margin: auto 2rem;}
.column-blog_select_active{border:solid 2px #23b6bc;color:white;background-color:#23b6bc;}

.column-blog_content{display: none;position: relative;}
.column-blog_content_active{display: block;}


.tencho-column_title_img{position:absolute;width: 150px;top:-6rem;right:0.6rem;}.tencho-column_title_img img{width: 100%;}
@media only screen and (max-width: 820px) {
  .tencho-column_title_img{top:-1rem;}
}
.tencho-column_flex-wrap{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;margin:auto;}
.tencho-column{width:300px;border-radius:10px;transition:0.5s;margin:1rem 0.5rem;}
.tencho-column:hover{transform: scale(1.12, 1.12);transition:0.5s;}

.tencho-column_thumbnail_img{width: 100%;margin:auto;}.tencho-column_thumbnail_img img{width:100%;}

/*.tencho-column_title{width:50%;font-size:0.9rem;margin:0 2% 0 3%;color:white;background-color:#23b6bc;border-radius:2rem;padding:5px 10px;transition:0.5s;}
.tencho-column_info{width:7rem;font-size:0.8rem;font-weight:normal;font-style:italic;white-space:nowrap;}
.column-link{width:4rem;height:2rem;font-size:0.8rem;color:#23b6bc;font-weight:bold;background-color:#edf9f9;border-radius:5px;text-align:center;display:flex;align-items: center;white-space:nowrap;transition:0.5s;}
.tencho-column:hover .column-link{width:6rem;font-size:1.3rem;transform:translate(-0.5rem, 0);color:white;background-color:#23b6bc;transition:0.5s;}/*hover時に子要素を独立して変化させる方法*/
/*.tencho-column:hover .tencho-column_title{color:rgb(6, 36, 36);background-color:#edf9f9;transition:0.5s;}*/

.accordion-wrapper_tencho-column{width:100%;}
.tencho-column_past{height:1.5rem;font-weight:bold;display:flex;display:flex;justify-content:center;align-items:center;white-space:nowrap;}

@media only screen and (max-width: 820px) {
  .tencho-column_title_img{width: 20%;}
  .tencho-column{width: 80%;}
}

/* end tencho-column*/

/* others */
.accordion-wrapper_tab{width: 100%;}
.accordionBtn_column{padding:0;}/* 上野accordionBtnを訂正*/
.tab-others{
  color: #a6aeae;
  white-space: nowrap;
  font-size: 28px;/*1.8remだったが、windowsと合わせるためここだけpx*/
  text-align: left;
  cursor: pointer;
  background-color: #edf9f900;/*buttonデフォルトの色を透明に*/
  border: none;/*デフォルトの枠も消す*/
  border-radius: 4px 0 0 4px;
  margin: 3px -1px 0 1px;
  padding: 10px 5px;
  -webkit-user-select: none;/*タブ上の文字を選択不可に*/
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}
.tab-button_others_items{font-size:22px;margin-left:2rem;padding:0;}

/*staff-blog*/
.staff-blog{position: relative;width: 85%;margin: 1rem auto 1rem 15%;}
.staff-blog::before{position:absolute;content: "⇒";left:-1.4rem;top:0;
  color:#23b6bc;font-size: 1.2rem;font-weight: bold;
}
.staff-blog_title{
  display:inline;/*文字があるところだけに下線引きたい*/
  color:#23b6bc;font-size: 1rem;
  /* text-decoration: underline #23b6bc;
  text-underline-offset: 0.3rem; */

  border-bottom: 0.06rem solid #23b6bc;
  padding-bottom: 0.2rem;
  /* text-decoration: none; もとの下線を消す */
  font-size: 0.8rem;
}






/* end others */


/* for slider */
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
  margin:8rem auto;
}
.slider img {
  width:55vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
  height:auto;
}
.slider .slick-slide {
transform: scale(0.8);/*左右の画像のサイズを80%に*/
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
opacity: 0.5;/*透過50%*/
}
.slider .slick-slide.slick-center{
transform: scale(1);/*中央の画像のサイズだけ等倍に*/
opacity: 1;/*透過なし*/
}


.slider {
  position:relative;
z-index: 1;
/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

.slider-item01 {
  background:url(./images/koe/koeA.jpg);
}

.slider-item02 {
  background:url(../img/img_02.jpg);
}

.slider-item03 {
  background:url(../img/img_03.jpg);
}

.slider-item {
  width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  background-repeat: no-repeat;/*背景画像をリピートしない*/
  background-position: center;/*背景画像の位置を中央に*/
  background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}



/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
  position: absolute;/*絶対配置にする*/
  top: 42%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 3px solid #23b6bc;/*矢印の色*/
  border-right: 3px solid #23b6bc;/*矢印の色*/
  height: 20px;
  width: 20px;
}

.slick-prev {/*戻る矢印の位置と形状*/
  left: -2%;
  transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
  right: -2%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/
.slick-dots {
  text-align:center;
  margin:20px 0 0 0;
}
.slick-dots li {
  display:inline-block;
  margin:0 5px;
}
.slick-dots button {
  color: transparent;
  outline: none;
  width:16px;/*ドットボタンのサイズ*/
  height:16px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:#edf9f9;/*ドットボタンの色*/
}
.slick-dots .slick-active button{
  background: #23b6bc;/*ドットボタンの現在地表示の色*/
}
/* end for slider */

.recruit_img-area{width:80%;display:flex;flex-direction:row;justify-content:space-around;margin:auto;}
.recruit_img{width:32%;margin:auto;}.recruit_img img{width:100%;}
@media only screen and (max-width: 820px) {
  .recruit_img-area{width:96%;}
}








/*
              ##############
              ##
              ##############
                          ##
              ##############
*/

/*yoyaku*/



/*tab menu*/
.yoyaku-wrapper {
  width:100%;
  margin:2rem auto;
  display: flex;
  flex-direction: column;
}

.yoyaku-tab-area {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  background-color: #edf9f9a8;/*wakuで見えづらくなるのでぼかす*/
  box-shadow: 0 0 5px 8px #edf9f9a8;

}
.yoyaku-tab{
  width: 25%;
  background-color: #edf9f900;
  display: flex;
  justify-content: center;
  align-items: center;
  margin:0 auto 0.5rem;
}
.yoyaku-tab-button {
  width: 100%;
  color: #a6aeae;
  white-space: nowrap;
  font-size: 24px;/*windowsと合わせるためpx 1.6rem 1.6rem*16くらい*/
  text-align: center;
  cursor: pointer;
  background-color: #edf9f900;/*buttonデフォルトの色をなくす*/
  border: none;/*デフォルトの枠も消す*/
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 10px 5px;
  -webkit-user-select: none;/*タブ上の文字を選択不可に*/
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}
.active-tab {
  height: 100%;
  color: #23b6bc;/*RGB96222200新カラー#60dec8*/
  background-color:#d3f0f2;
  box-shadow: 0 0 5px 8px #d3f0f2;
}
.widepc-only{display: block;}
.widephone-only{display: none;}
@media only screen and (max-width: 1024px) {
  .widepc-only{display: none;}
  .widephone-only{display:block;}
  .yoyaku-tab-button{font-size: 1.2rem;}
  .phone_tabtitle{margin-top:-2rem;}
}








.yoyaku-content {
  width: 100%;
  background-color: #d3f0f2;
  box-shadow: 0 0 5px 8px #d3f0f2;/*ぼかしx y blur-radius広がり大きいほど広く薄く spread拡張範囲*/
}


.yoyaku-menu-wrapper_column, .yoyaku-menu-wrapper_row {
  width: 100%;
  height: auto;
  display: flex;
}
.yoyaku-menu-wrapper_column {flex-direction: column;}
.yoyaku-menu-wrapper_row {flex-direction: row;}

@media only screen and (max-width: 820px){
  .yoyaku-menu-wrapper_row {flex-direction: column;}
}

.tab-label-content{
  margin-top: -1rem;/*タブとメニューの文字の高さ合わせ*/
  cursor: pointer;
  -webkit-user-select: none;/*タブ上の文字を選択不可に*/
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;        
}

.bold{font-weight: bold;}




.timeselect-wrapper{
  position: relative;
  width: 70%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin:1rem auto 0.5rem;
  font-size: 0.8rem;
}
.timeselect_message{
  text-align:center;font-size:0.8rem;font-weight:bold;
  margin:1rem auto -0.5rem;
}
.timeselect-button{
  width: 5rem;
  display: flex;
  justify-content: center;
  text-align: center;
  color:#a9a9a9;
  background-color: #a9a9a900;
  border:none;
  cursor: pointer;
  white-space: nowrap;
  margin:0 0.6rem;
  padding: 0.5rem;
}
.timeselect-button.timeselect-active{
  color:white;
  background-color: #23b6bc;
  border: 2px solid white;
  border-radius: 10%;
}









/*calarea*/
.menu_calarea{
  width: 70%;
  margin:0.5rem auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
@media only screen and (max-width: 820px){
  .menu_calarea{width: 94%;}
}

.tab_menu-title{
  font-size: 1.2rem;
  text-align: center;
  margin: 2rem 0 0;
}
@media only screen and (max-width: 820px){
  .tab_menu-title{margin:0.8rem 0 0;}
}
.tab_menu-title_attention{
  font-family: 'M PLUS 1p';
  font-size:0.9rem;
  margin:auto;
  text-align: center;
}
.tab_menu-title_attention2{
  font-family: 'M PLUS 1p';
  font-size: 1rem;
  text-align: center;
  color:#db441a;
}

.cal-month-area{display: flex;flex-direction: row;}
@media only screen and (max-width: 820px){
  .cal-month-area{margin:-0.4rem 0 -0.6rem;}
}
.cal-month-area_monthyear{
  text-align: center;
  padding-top: 0.2rem;/*buttonと高さ合わせる*/
  font-size: 1.2rem;
  margin:0 5% 1rem 5%;
  white-space: nowrap;
}

.monthbutton{
  text-align: center;
  width: 3rem;
  margin:0 5% 1rem 5%;
}
.lastmonthbutton, .nextmonthbutton {
  position:relative;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0 0.4rem;
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  color:#edf9f9;
  background-color: #23b6bc;/*#d3f0f2;*/
  display: flex;
  align-items: center;
  justify-content: center;
}
.lastmonthbutton span,.nextmonthbutton span{
  font-size: 1rem;
}


.menu_cal{
  position: relative;
  width: 95%;
  height: 90%;
  margin: auto auto 0.5rem;
}


.calendar {
  width: 100%;
  /*table-layout: fixed;/*テーブルの幅を固定する為の記述*/
  /*border-collapse: collapse;/*defaultでテーブルのborderの間にスペースが入っているものを削除*/
  margin-bottom:2rem;
}
@media only screen and (max-width: 820px){
  .calendar{margin-bottom: 0.5rem;}
}
.cal_column{display:flex;flex-direction:column;}
.cal_row{display:flex;flex-direction:row;}

.cal_head {
  width: calc(100%/7);
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0;
  font-size:0.9rem;
  margin:0.1rem;
  white-space: nowrap;
}
.cal-label{width: calc(100%/7);cursor:pointer;margin:0.1rem;}/*label for cal_cell*/
.cal_cell{
  width: 100%;
  height: 60px;
}
@media only screen and (max-width: 820px){
  .cal_head{height: 30px;}
  .cal_cell{height: 55px;}
}
.filled, .cal_head{/*曜日と日付の基本色*/
  background-color: #edf9f9;
  box-shadow: 0 0 3px 3px #d3f0f2;
  border-radius: 2px;
}
.filled{
  cursor: pointer;
  -webkit-user-select: none;/*タブ上の文字を選択不可に*/
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

.today{
  background-color: #e4a171;
  box-shadow: 0 0 3px 3px #d3f0f2;
  border-radius: 2px;
}
.clicked {
  background-color: #23b6bc;/*#52f2f76d*/
  box-shadow: 0 0 3px 3px #d3f0f2;
  border-radius: 2px;
}
.gray {
  background-color: rgb(222, 222, 222);
  box-shadow: 0 0 3px 3px #d3f0f2;
  border-radius: 2px;
}

.monthdaybutton {
  border: none;
  background-color: #ffffff00;
  font-size: 1.6rem;
  cursor: pointer;/*ここにこれがないと全体ボタン全体に適応できなかった*/
}

.cal_uppercell{height: 40%; padding: 0.2rem 0 0.2rem 0.4rem;}
.cal_lowercell{height: 60%;text-align: center;display:flex;justify-content: center; align-items: center;}
.sun {color: red;}
.sat {color: blue;}
.marubatu{font-size: 1.6rem;}
.maru {color:#23b6bc;}
.basecolored{
  color:rgb(6, 36, 36);
}
.whitecolored {/*.whiteだと、バックもwhiteになる　.whiteというのがそもそもあるぽ*/
  color:white;
}



.cal-attention {
  font-size: 0.8rem;
  margin: 0 auto 1.6rem;
}
.cal-attention div span{
  font-size: 0.8rem;
}
.cal-attention div {
  display: flex;
  align-items: center;/*○×が浮き上がるのをなるべく揃えた*/
}

.wide-attention {
  font-size: 0.8rem;
  margin: 2rem 0 4rem 10%;
}
.wide-attention span{position:relative;}
.wide-attention span::before{
  position: absolute;
  content: "※";
  font-size: 0.8rem;
  font-weight: bold;
  color:#23b6bc;
  left: -1rem;
}
/*end calarea*/









/*start timetable*/
.menu_timetable{
  width: 30%;
  margin:0 auto;
  display: flex;/*margin:auto;とか入れるとサイズが最小になる？*/
  flex-direction: column;
  align-items: start;
}
@media only screen and (max-width: 820px){
  .menu_timetable{width: 65%;}
}

.timetable_day-area {/*日付表示部分*/
  width: 70%;
  height: 2rem;
  font-size: 1.2rem;
  text-align: center;
  margin: 0 auto 1.7rem;
  padding-top: 0.6rem;
  white-space: nowrap;
}
.timetable_staff{height:10%;text-align: center;margin:1rem 0;}
.timetable-area{width: 100%;}

.timetable-wrapper{height:90%;margin: 0 auto 2rem;
display: flex; flex-direction: column;}

/*.timetable-wrapper_column {width:9rem;display:flex;flex-direction:column;margin:auto;}*/

.timetable-wrapper_row {display:flex;flex-direction:row;}

.rsvtimebutton{/*buttonのdefault枠や色をリセット*/
  border: none;
  background-color: #ffffff00;
  cursor: pointer;
}
.timetable_oneday{
  position: relative;
  width: 80%;
  min-width:9.5rem;
  height:1.6rem;
  display: flex;flex-direction: row;
  align-items: center;
  background-color: #edf9f9;
  z-index: 0;
  margin:0.1rem auto;
  cursor: pointer;
}
.timetable_oneday:before{
position: absolute;
border: 0.5px dashed #23b6bc;/*破線の太さ・色*/
content: '';
display: block;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin:2px;
z-index: -1;
border-radius:3px;
}

.timetable_oneday_id_clicked{
  position: relative;
  width: 80%;
  min-width:9.5rem;
  height:1.6rem;
  display: flex;flex-direction: row;
  align-items: center;
  background-color: #23b6bc;
  z-index: 0;
  margin:0.1rem auto;
  cursor: pointer;
}
.timetable_oneday_id_clicked:before{
position: absolute;
border: 0.5px dashed white;/*破線の太さ・色*/
content: '';
display: block;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin:2px;
z-index: -1;
border-radius:3px;
}




.timetable_clocktime{
  width: 30%;
  font-size:0.8rem;
  white-space: nowrap;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  margin: 0 1rem 0 0.5rem;
}

.timetable_outercell, .timetable_innercell{
  height: 1.4rem;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items:center;
}
.timetable_outercell{width: 60%;}
.timetable_innercell{
  white-space: nowrap;
  border-radius: 5px;
  cursor: pointer;
  -webkit-user-select: none;/*タブ上の文字を選択不可に*/
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}
.timetable_innercell_batu{margin:0.4rem; margin-left:0.36rem;}/*margin-leftは○と中心を合わせるため*/
.timetable_innercell,.timetable_innercell_batu{
  display: flex;align-items: center;
}
.timetable_innercell span,.timetable_innercell_batu span{display:block;font-size: 0.8rem;}
/*
.timetable_innercell_upper {height: 55%; font-size: 0.8rem;}
.timetable_innercell_lower {font-size: 0.7rem; color: #23b6bc;}
*/

.tab{
  display: flex;
  flex-direction: column;
}



/*end timetable*/










/* start rsv form */
.rsv-area{
  position: relative;
  width: 94%;
  margin: 3rem auto 2rem;
  background-color: #edf9f9;
  /*box-shadow: 0 0 3px 3px #edf9f9;*/
  z-index: 0;/*必要*/
}
.rsv-area:before{
  position: absolute;
  border: 0.5px dashed #23b6bc;/*破線の太さ・色*/
  content: '';
  display: block;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin:5px;
  z-index: -1;
}

.rsv-inner-area{/*画面サイズにより拡大縮小する部分*/
  width: 65%;
  max-width: 800px;
  margin:auto;
}

.rsv_title{font-size:1.1rem;text-align:center;margin:2rem auto 1rem;}
.rsv_datetime {
  margin: 1.4rem auto 2rem;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}
.rsv_timeselect_message{
  text-align:center;font-size:0.9rem;font-weight:bold;
  margin: -0.2rem auto 0;
}


.rsv_information{
  width: 80%;
  font-size: 1.1rem;
  display: flex;
  justify-content:space-between;
  align-items: center;
  margin: 20px auto 40px;
  text-align: center;
}
.rsv_information_block{
  display: flex;
  flex-direction: column;
  text-align: end;
}

.warning{
  text-align: center;
  font-size: 1rem;
  color:#e4a171;
  margin-bottom:0.8rem;
}
.rsv_complete{
  text-align: center;
  font-size:1rem;
  font-weight: bold;
  margin-top: 5rem;
  margin-bottom: 3rem;
}

.rsv_input {
  margin-bottom: 20px;
}

.radio {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items:center;
  justify-content: space-between;
  margin: 0.8rem auto 0.8rem;
  font-size: 1rem;
  font-weight: bold;
  white-space: nowrap;
}
.radio_title{width: 50%;}
.radio_select{width: 50%;justify-content: space-between;}
@media only screen and (max-width: 820px){
  .radio{flex-direction: column;}
  .radio_title{display:flex;flex-direction: row;margin:0 auto 0 0;}
  .radio_select{margin:0 auto 1rem;justify-content: space-evenly;}
}

.inputradio {
  margin-left: 20px;
  margin-bottom: 20px;
  margin-top: 1rem;
}


.menu_message {
  width: 70%;
  margin: -1rem auto 1rem;
  font-size: 0.9rem;
}

.symptoms {
  width: 100%;
  font-size: 1rem;
  font-weight: bold;
  margin: 1.6rem auto 0;
  display: flex;
  align-items: center;
}
.inputsymptoms {
width: 100%;
margin-top: 1rem;
margin-bottom: 1.6rem;
border: none;
border-bottom: solid 1px #23b6bc;
outline: none;
font-size: 1rem;
resize: none;
cursor: text;
background-color: #edf9f9;
}
.inputsymptoms::placeholder {
  color: #a9a9a9;
  background-color: #edf9f9;
}
.inputsymptoms::-ms-input-placeholder {/*edge用の書き方上のと,でつなぐとうまくいかず*/
  color: #a9a9a9;
}

input[type="radio"] {
	accent-color: #23b6bc;/*radio buttonの色の変え方　ブラウザによって見え方は異なる*/
}


.group {
  width: 100%;
  margin: auto;
  position: relative;
}
.inputlabel {
  position: absolute;
  top: 7px;
  font-size: 1rem;
  color: #a9a9a9;
  cursor: text;
  transition: 0.2s;
}
.inputtext {
  width: 100%;
  background: linear-gradient(to bottom,transparent 96%,#23b6bc 4%) no-repeat;
  background-position: -2000px 0;
  background-size: 100% 100%;
  display: block;
  padding: 5px 0;
  margin: 1.8rem auto 0;
  border: none;
  border-bottom: solid 1px #23b6bc;
  font-size: 1rem;
  transition: all 0.3s;
}

.inputtext:focus,
.inputtext:valid {
  background-position: 0 0;
  outline: none;
}
.inputtext:focus ~ label,
.inputtext:valid ~ label {
  top: -0.9rem;
  color: #23b6bc;
  font: bold 0.8rem Robot;/*Robotがないと入力時に小さくならず*/
}

.message {
  width: 100%;
  height: 140px;
  padding: 9px;
  margin-top: 40px;
  border: 1px solid #23b6bc;
  border-radius: 12px;
  outline: none;
  font-size: 1rem;
  resize: none;
  background-color: #edf9f9;
}
#message::placeholder{/*textareaの初期値色を変えるidなので#でアクセス*/
  color: #a9a9a9;
}


.rsv_topmessage {
  width: 80%;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  margin: 1rem auto;
  /*text-decoration: wavy underline rgba(52, 194, 184, 0.5)*/
  white-space: nowrap;
}

.rsv_message {
  position: relative;
  width: 100%;
  font-size: 0.8rem;
  margin: 0 auto 2rem 0.8rem;
}
.rsv_message span::before{
  position: absolute;
  content: "※";
  font-size: 0.8rem;
  font-weight: bold;
  color:#23b6bc;
  left: -1.2em;
}




.bigbutton {
  display: block;
  background: #23b6bc;
  width: 220px;
  height: 50px;
  margin: 20px auto;
  border: none;
  border-radius: 10px;
  box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  font-size: 1.3rem;
  font-weight: bold;
  margin: 2rem auto 2rem;
}
.bigbutton:hover, .bigbutton:active{
  transform: translateY(-3px);
}
::selection {
  background: #23b6bc;
  color: white;
}
input:-webkit-autofill {/*defaultでautocomplete入力時にbackgroundが水色になるのを変更*/
  box-shadow: 0 0 0 1000px #edf9f9 inset;
}

.pc-only{display: block;}
.phone-only{display:none;}

@media only screen and (max-width: 820px) {/*スマホで見た時文字の大きさ調節*/
.pc-only{display: none;}
.phone-only{display:block;}
.rsv-inner-area{width: 90%;}
.rsv_title{width:90%;font-size: 1rem;}
.rsv_datetime{font-size: 1.1rem;}
.underline{width:90%;}
.rsv_information{width:95%;font-size:0.8rem;}
.radio{width:95%;font-size:0.8rem;margin: 0 auto 0;}
.inputlabel,.inputtext,.inputsymptoms{font-size: 0.9rem;}
.message{font-size: 0.8rem;}
.menuradio{width:90%;}
.menu_message{width:90%;font-size:0.8rem;}
.symptoms{font-size:0.8rem;margin-top:1rem;}
.rsv_topmessage{width:98%;font-size:0.9rem}
.rsv_message{width:90%;font-size: 0.8rem;}
.group{width:95%;}
.inputtext{background-position: -800px 0;/*overしてればなんでもいいのかも*/
  background-size: 100% 100%;}
}


.vegas-animation-myAnimation {
    animation: myAnimation ease-out;
}

@keyframes myAnimation {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.vegas-animation-myAnimationUp {
    animation: myAnimationUp ease-out;
    transform-origin: bottom center;
}

@keyframes myAnimationUp {
    0% {
        transform: scale(1.2) translate(0, 10%);
        /* background-size: 110%;
        background-position: 50% 10%; */
    }
    100% {
        transform: scale(1.1) translate(0, 0);
        /* background-size: 100%;
        background-position: 50% 50%; */
    }
}

.vegas-animation-myAnimationUpRight {
    animation: myAnimationUpRight ease-out;
    transform-origin: bottom left;
}


@keyframes myAnimationUpRight {
    0% {
        transform: scale(1.2) translate(-10%, 10%);
        /* background-size: 110%;
        background-position: 90% 10%; */
    }
    100% {
        transform: scale(1.1) translate(0, 0);
        /* background-size: 100%;
        background-position: 50% 50%; */
    }
}