@charset "UTF-8";
/* 臨時設定ページの高さを作る */
.h800 {
  height: 400px;
  background-color: #ccc;
}
/* 臨時設定余白スライダーボタン実装するなら下記クラス付divごと外す */
.yohaku{
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0.5rem;
  text-align: center;
  color: hsla(36, 25%, 30%, 0.507);
  font-size: 0.8rem;
}
/* base ほぼどのサイトでも共通 ------------------------------------------*/
/* フォントなどはサイトごとに変える */
/* html {
  height: 100%;
} */
body {
  font-family: "Osaka-mono", "Helvetica", "MS Gothic", "monospace","メイリオ";
  /* -webkit-font-smoothing: antialiased; */
  background: #e8e3e0;
  color: #5f5039;
  transition: background-color 0.5s; /* 色変化をスムーズに */
}
article,
aside,
main,
section {
  outline: 0;
  vertical-align: baseline;
  background: transparent;
}
body {
  color: #5f5039;
  height: 100%;
  transition: background-color 0.5s; /* 色変化j-s適応時 */
}
/* マージン中央寄せ */
header,
main,
nav,
footer,
section,
#wrapper,
.ly_inner,
.main-top,
#slide,
.ma0at {
  margin: 0 auto;
}
/* header *,
.sticky span,
ul * ,section,p, span *{
  box-sizing: border-box;
} */
body *{
  box-sizing: border-box;
}

header,
main {
  width: 100%;
}
img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
/* iframeは地図用なのでこのサイトでは全体設定に記載 */
iframe {
  width: 100%;
  max-width: 100%;
  /*height:auto;*/
}
a{
  text-decoration: none;
  color: #796E65;
}
button{
	background-color:transparent;
}
section p {
  width: 100%;
  padding: 1.8rem;
  line-height: 1.4;
}
/*ナビ*//*ナビバーの背景色や文字色は旧ファイルでは指定していない*/
nav {
  /*width: clamp(900px, 78%, 1000px);*/
  /* max-width: 1024px; 128x8 */
  max-width: 1176px; /*168x7*/
}
nav ul {
  display: flex;
  justify-content: space-around;
  padding: 0.6rem 9px 0 5px;
  list-style: none;
}
nav ul li {
  display: block;
  text-align: center;
  padding: 0.8rem 0.5rem;
  cursor: pointer;
  transition: all .4s; /*変化速度は全て0.4s*/
   }
nav ul li:first-child {
  padding: 1rem 0.5rem;
}
nav ul li a {
  /*font-size: min(1rem, 18px);*/
  color: #796E65;
  font-weight: 900;
}
/* nav ul li a br {} */
nav ul li:hover {
  background: white; 
  border-radius:0.8rem;
}
/* ナビここまで */
/* baseここまで------------------------------------------ */
/* サイト全体設定base2------------------------------------------ */
section {
  margin-bottom: 6rem;
}

/* 見出しタグ関連--- */
h2, h3, h4 {
  
  text-align: center;
}
h2 {
  line-height: 1.4;
}
h3 {
  line-height: 1.1;
}

.h2_span, .h3_span {
  display: inline-block;
  color: #796E65;
  border-bottom: solid 5px #BDD974;
  margin-bottom: 1.2rem;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}
.h2_span {
  padding-top: 2rem;
  padding-bottom: 0.2rem;
}

/*トップページではコロナ対策以外のh3*/
.h3_base {
  color: #796E65;
  padding: 1.5rem 0.2rem 0.2rem 0.2rem;
}
/* 見出しタグ関連ここまで--- */
/* base2ここまで------------------------------------------ */
/* wrapper--- */
#wrapper{
  width: 100%;
  max-width: 1280px;
	/*100vw*/
  min-width: 500px;
  position: relative;
  /* background-color: #FFF; */
}
/* wrapperここまで--- */
/* header */
.header_top {
  display: block;
  display: flex;
  justify-content: space-between; /* 左右に配置 */
  align-items: center;
  /* align-items: flex-start; */
  width: 100%;
  /* position:relative; */
}
/* header_topの背景 */
.header_top::before {
  margin: 0;
  padding: 0.5rem 0 0.5rem 0;
  position: absolute;
  content: " ";
 
  background-color: #fff;
  width: 100%;
  height: 5rem;
  z-index: -1;
  border-radius: 0 0 2rem 2rem;
}
/* flexで三等分にして2番目を中央寄にしたかったがそれぞれの幅が＞＞＞ノートに記載 */
/* 実験的に実装するのはOK、元のデザインとは異なる */
/* .header_top::after { 
display: block;
  width: 15px;
  height: 15px;
  content: "";
  margin: 0;
  padding: 0;
  background-color: #41afad;
} */
.header_logo {
  width: min(40vw, 200px);
  margin-left: 2%;
}
.header_text0 {
  /* margin-left: auto; */
  margin: 0;
  padding: 0.5rem 1rem 0 0;
  width: auto;
  /* align-self:right; */
  /* flex: 1 1 0; */
}
header div.header_logo h1 {
  width: 100%;
  /* text-align: center; */
  margin: 0;
  /* margin-left: auto; */
  padding: 0;
}
footer {
  width: 100%;
  padding: 1rem;
  text-align: center;
  background: #BDD974;
  color: white;
  font-weight: 900;
}
/* --------- */
/*コロナ対策*/
.infection_control {
  position: relative;
  background-color: #fff;
  border-radius: 21px;
  width: min(80%, 1024px);
  padding: 30px;
  margin-bottom: 30px;
}
.infection_control div {
  padding: 0 0 1.4rem 0;
}
.infection_control p{
  padding: 0 0 0 1.2rem;
}
.infection_control p a{
  font-weight: bold;
  text-decoration: underline;
}
.infection_control p a:hover{
  background-color: #BDD974;
}
.ly_flex {
  display: flex;
}
/* 上下の中央寄せも設定 */
/* 重複書きしていた icons */
.icons {
  max-width: 300px;
  /* display: flex; */
  /* align-items: center; */
  max-height: 15rem;
  margin-top: auto;
  margin-bottom: auto;
  
  /* ↓→ margintopbottom auto */
  /* vertical-align: middle; */
}

.infection_control::after {
  position: absolute;
  bottom: -2rem;
  right: -2rem;
  display: block;
  border-radius: 18px;
  content: "";
  width: 6rem;
  height: 6rem;
}
/* --- */
/*コンセプトスタイル*/
.concept {
  width: 100%;
  background: linear-gradient(to bottom, #e8e3e0 0%, #e8e3e0 50%, #ffffff 50%, #ffffff 100%);
  padding-top: 1rem;
}
.concept_base {
  display: block;
  overflow: hidden;
  width: min(100%, 1278px);
  margin: 0 auto;
}
/*float解除。基盤セレクタにoverflow: hidden;も設置*/
.concept_base::after {
  display: block;
  content: "";
  clear: both;
  font-size: 0;
}
.concept_base h2 {
  float: right;
  display: block;
  width: 50%;
}
.concept_base h2 span {
  text-align: center;
}
.concept_img {
  /*position: relative;*/
  display: block;
  width: 50%;
  padding-top: 4rem;
  float: left;
}
section.concept div.concept_img img {
  border-top-right-radius: 21px;
  border-bottom-right-radius: 21px;
}
@media(min-width:980px){
  .concept_img img {
    border-bottom-left-radius: 21px;
    border-top-left-radius: 21px;
    max-width: 95%;
    padding: 30px 0 30px 0;
  }
}
.concept_text {
  float: right;
  display: block;
  width: 50%;
}
section.concept div span.button{
  display: block;
  width: 12rem;
  
  background-color: #BDD974;
  border-radius: 21px;
  text-align: center;
}
section.concept div span.button a {
  display: block;
  padding: 1rem;
  width: 100%;
  text-align: center;
}
section.concept div span.button a:hover {
  background-color: #cfeb89;
  color: white;
  /* ↓継承しなかった */
  border-radius: 21px;
}
.concept_img::after {
  position: relative;
  bottom: 4rem;
  left: 90%;
  display: block;
  border-radius: 21px;
  content: "";
  width: 7.5vw;
  height: 7.5vw;
}
/*------*/
/*院長あいさつ*/
/* section.greeting >> .greeting */
.greeting {
  /* width: min(80vw, 1024px); */
  width: 100%;
  display: grid;
/* margin-left: 12vw; */
/* margin-right: auto; */
  /* position: relative; */
  /* background-color: bisque; */
  /* grid-template-columns: 2rem, 1fr, 2rem, 2rem, 2rem, 2rem, 2rem, 2rem, 2rem; */
  /* grid-template-columns: 10%, 10%, 10%, 10%, 10%, 10%, 10%, 10%, 10%; */
  grid-template-columns: 10%, 10%, 1fr, 10%;
  /* grid-template-rows: 2rem, 2rem, 2rem, 2rem, 2rem, 2rem, 2rem, 2rem, 2rem; */
  /* grid-template-rows: 2rem, 3rem, 3rem, 3rem, 3rem, 10rem, 2rem; */
  grid-auto-rows: 3rem;
  
  /*width: clamp(800px, 100%, 1200px);*/
  /* おそらくmin-heigthの影響でレイアウトが崩れる */
  /* min-height: 700px; */
}
/*院長あいさつ 挨拶テキスト部*/
.padd{
  padding: 0 1rem;
}
.greeting div:nth-of-type(1) {
  /* width: 60% >> width: 100% */
  width: 100%;
  height: 100%;
  border-radius: 21px;
  background: #E8E3E0;
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 11;
  /* position: absolute;
  top: 3em;
  right: 50px; */
}
/*section.greeting div:nth-of-type(1) p*/
.greetng_txt {
  width: 80%;
  padding-left: 20%;
  border-radius: 21px;
  /* min-height: 500px; */
}
/*院長挨拶 div２から4はimg。最大幅は親のsectionの幅1000pxのパーセンテージ*/
.greeting div:nth-of-type(2) img, .greeting div:nth-of-type(3) img, .greeting div:nth-of-type(4) img {
  border-radius: 21px;
  position: relative; /*box-shadowを有効にするために追記*/
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
  
}
.greeting div:nth-of-type(2) {
  width: 25vw;
  height: 100%;
  border-radius: 21px;
  /* position: absolute;
  top: 18%; 
  left: 12%;  */
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 1;
  /* grid-row-end: 5; */
  transform: translateY(-12%);
  z-index: 10;
}
.greeting div:nth-of-type(3) {
  width: 30vw;
  height: 100%;
  border-radius: 21px;
  /* position: absolute;
  bottom: -30px;
  left: 30%; */
  /* grid-column-start: 4; */
  /* grid-column-end: 8; */
  /* grid-row-start: 6; */
  /* grid-row-end: 6; */
  /* transform: translateY(70%); */
  z-index: 30;
}
.greeting div:nth-of-type(4) {
  width: 25vw;
  border-radius: 21px;
  /* position: absolute;
  bottom: -5%;
  right: 30px;  */
  /* grid-column-start: 5;
  grid-row-start: 6; */
  /* transform: translateY(40%); */
  z-index: 50;
}
/* .greeting div:nth-of-type(2)::before{
	display: block;
	content: "";
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 12px;
	position: absolute;
	top:-1.5rem;
  left:-1.5rem;
  z-index: 90;
} */
/* ０５０１ */
/*特徴*/
section.features {
  /*width: clamp(600px, 95%, 1200px);*/
  width: min(90%, 1152px);
}
.features_flex {
  display: flex;
  flex-wrap: wrap;
}
.features_flex div {
  /*(50-47)X2=6*/
  flex-basis: 47%;
  border-radius: 21px;
  background: #E8E3E0;
  margin-bottom: 20px;
}
.features_flex div:nth-child(odd) {
  margin-left: 1%;
  margin-right: 4%;
}
.features_flex div {
  display: flex;
  padding: 1rem;
}
.features_flex div p {
  padding: 5%;
}
.features_flex div img {
  width: 14vw;
  height: 13vw;
  /*width: min(18vw, 182px);
  height: min(16vw, 167px); */ /*ブラウザ「幅」で対応*/
}
/*施術メニュー*/
section.treatment {
  /*width: min(70%, 1200px);*/
  /*width: clamp(900px, 70%, 1100px);*/
  width: min(80%, 1024px);
  margin-right: auto;
  margin-left: 0;
  /*position: relative;*/
  /*display: flex;*/
  padding-right: 1rem;
  padding-left: 5rem; /* 5rem*/
  border-radius: 21px;
  /* border-top-right-radius: 21px;
  border-bottom-right-radius: 21px; */
  background: #E8E3E0;
}
.treatment_base {
  position: relative;
  /*width:900px;*/
  /*height: max(36vw, 450px);*/ /*470px*/
  min-height: 490px;
}
.treatment_base h2 {
  width: 90%;
  text-align: left;
  padding-left: 2rem;
  padding-bottom: 70px;
}
.treatment_base h2::after {
  content: "MENU No.";
  display: block;
  font-size: 0.9rem;
}
div.treatment_slider {
  display: block;
  /*width: min(60%, 539px); */
  width: min(43vw, 550px);
  border-radius: 21px;
  position: absolute;
  top: 80px;
  /*right: -31vw;*/ /*40px*/
  left: min(35vw, 500px);
}
.slider_text {
  width: min(36vw, 480px); /*500px*/
  padding: 15px 5px 15px 5px;
}
.slider_txh {
  display: inline-block;
  text-align: left;
  font-size: 1.2rem;
  line-height: 1.2;
  border-bottom: 2px solid #796E65;
  padding-bottom: 2px;
  color: #796E65;
  font-weight: 900;
}
.slider_txh + p {
  padding: 21px 3px;
}
.slider_text ul li span a {
  text-decoration: underline;
}
.treatment_base > span{
	display: inline-block;
	position: absolute;
  bottom: 30px;
  right: max(-6vw, -10rem);
	/*left:min(55vw, 800px);*/
}
.treatment_base > span a.button2 {
  display: inline-block;
  /*position: absolute;
  bottom: 30px;
  right: -70px;*/
  border-radius: 21px;
  padding: 0.8rem 2rem;
  text-align: center;
  background-color: #BDD974;
  /*color: white;
  font-size: 0.8rem;
  font-weight: 900;*/
	/*white-space:nowrap;*/
}
.treatment_base > span a.button2 > span{
	display: inline-block;
	color:#FFFFFF;
	font-size: 1rem;
	font-weight: 900;
}
/*.treatment_base > span a.button2 br.btnnobr{
	display: none;
	width: 0;
}*/
a.button2:hover {
  color: #BDD974;
  background: #EBF4D5;
}
a.button2 {
  white-space: nowrap; /*レスポンシブでは変更する*/
}
/*right: 34%;from410px*/
.treatment_base::after {
  position: absolute;
  top: 30px;
  left: 34vw;
  display: block;
  border-radius: 18px;
  content: "";
  width: 8vw;
  height: 8vw;
  z-index: 50;
}
/*施術メニューslider02*/
div.treatment_slider span {
  display: block;
  width: 100%;
  position: relative;
  border-radius: 21px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
}
.treatment_base .slick-dotted.slick-slider {
  margin-bottom: 0;
}
.slider02 {
  width: 100%;
  padding: 0;
}
.slider02 img {
  border-radius: 21px;
}
.slidedots02 {
  position: absolute;
  top: 3rem;
  left: -80% !important; /*-500px*/
  padding-inline-start: 2px;
}
.slidedots02 li {
  display: inline-block;
  margin: 0 5px;
}
.slidedots02 li button {
  /* position: absolute;*/
  width: 24px;
  height: 24px;
  border-radius: 12px;
  text-align: center;
  line-height: 24px;
  color: #796E65;
  font-size: 1rem;
  border: none;
  background: white; /*規定で背景の指定あり*/
  padding: 0;
}
.slidedots02 li.slick-active button {
  color: white;
  background: #BDD974;
}
/*.slider02 button{
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}*/
.slide-arrow {
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  border-radius: 15px !important; /**/
  background: #BDD974 !important;
  box-shadow: 2px 2px 2px rgba(60, 60, 60, 0.2); /**/
  border: none;
}
/*left arrow*/
.next-arrow {
  left: -40px !important;
  z-index: 90; /*テキストスライダーと重なるため*/
}
/*right arrow*/
.prev-arrow {
  right: -40px;
}
.prev-arrow::after, .next-arrow::after {
  /*margin-left: 10px;親要素をrelativeにできないので*/
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  text-align: center;
  /*z-index: 20;*/
}
.prev-arrow::after {
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.next-arrow::after {
  border-left: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/*slidedots02対応ナビテキスト*/
.trsl02text {
  display: block;
  padding: 0 !important;
  /*width: 500px;*/
  /*margin: 0 auto;*/
}
.trsl02text li {
  opacity: 0;
  /*text-align: center;*/
  animation-delay: 0.5s;
  animation-duration: 1.0s;
  animation-fill-mode: both;
}
.trsl02text li.slick-active {
  animation-name: open;
}
@keyframes open {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*jQuery用CSS設定ここまで*/
/*症例別メニュー*/
section.case {
  /*幅を900px未満にするとflexがずれる*/
  /* width: min(90%, 1200px);*/
  width: min(100%, 1278px);
}
.case_flex {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /*aroundだと子要素が一つのみの際中央に寄る*/
  align-content: space-around;
  padding: 0 16px;
}
.case_flex figure {
  position: relative;
  flex-basis: 30%; /*33%*/
  border-radius: 15px;
  margin: 0 8px 24px 8px;
  /*padding: 0 8px 0 8px;*/
}
.case_flex figure:nth-of-type(3n) {
  margin-right: 0px;
}
.case_flex figure a img {
  border-radius: 15px;
}
.case_flex figure figcaption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
}
.case_flex figure figcaption h4 {
  white-space: nowrap;
  color: white;
  font-size: 1.8rem;
  padding: 0 0 0.5rem 0;
}
.case_flex figure figcaption span {
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  color: white;
  font-size: 0.8em;
  text-decoration: underline;
  /*border-bottom: solid 1px white;*/
  text-align: center;
  line-height: 1.1;
}
/* はじめての方*/
/*section.first_visit > div*/
div.first_visit_base {
  position: relative;
  display: block;
  width: min(80%, 1024px);
  min-height: 400px;
  margin-left: auto;
  padding-left: 20px;
  background: #EBF4D5;
  border-top-left-radius: 21px;
  border-bottom-left-radius: 21px;
}
/*section.first_visit > div > div*/
div.fst_visit_img {
  display: block;
  width: min(45vw, 576px);
  /*width: clamp(300px, 40vw, 600px);*/
  position: absolute;
  bottom: -3.7vw; /*-48px*/
  left: -14vw; /*-64px*/
  border-radius: 21px;
}
div.fst_visit_img img {
  display: block;
  border-radius: 21px;
  position: relative;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
}
.fst_visit_img::before {
  display: inline-block;
  position: absolute;
  bottom: -2vw; /*25*/
  /*bottom: calc(-3vw - 10px);*/
  right: -2vw;
  border-radius: 18px;
  content: "";
  width: 11vw;
  height: 11vw;
  z-index: 20;
}
.fst_visit_tx {
  display: block;
  width: 50%;
  margin-left: auto;
  /*paddin-left:300px;*/
  padding-right: 2rem;
}





/*------*/
/* JQuery関連 */
/* sticky ------------*/
.sticky {
  /* fixedでbodyからどれだけ内側よりか？ */
  position: fixed;
  z-index: 999;
  top:8rem;
  /* right:3vw; */
  left: calc(97vw - 100px);
}
.sticky span {
  display: block;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  padding-top: 2.2rem;
  text-align: center;
}
/* .sticky span a{ */
/* display: block; */
/* text-align: center; */
/* } */
.sticky span.web_rsv {
  background-color: #3fcee0;
}
.sticky span.line_rsv {
  background-color: #06c755;
}
/*stickyここまで*/
/* slider */
#slide {
  width: 80%;
  max-width: 900px;
}
#slide ul {
  display: block;
  position: relative;
  max-width: 100%;
}

#slide li {
  /* position: absolute; */
  max-width: 100%;
  border-radius: 20px;
  display: block;
}
#slide li img {
  display: block;
  height: auto;
  border-radius: 20px;
}
/* #slide::after{
  content: " ";
  display: block;
  clear: both;
} */
/* header::after{
  content: " ";
  display: block;
  clear: both;
} */
/* ボタンクリアフィックス効かない>>relative+absoluteで後続の兄弟要素も回り込んでる */
/* #button::after{
  content: " ";
  display: block;
  clear: both;
} */

/* #button {
  padding-top: 35%;
    text-align: center;
}

#button ul {
  display: inline-block;
}

#button ul li {
  float: left;
  margin-right: 15px;
}

#button ul li:last-child {
  margin-right: 0;
}

#button ul li a {
  text-decoration: none;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: #a8dcdb;
}

#button ul li a.target {
  background: #41afad;
} */
/* end slider */