@charset "utf-8";
/* CSS Document */
body {
  font-family: 'Kiwi Maru', serif;
  font-size: 16px;
  line-height: 1.5;
  color: #110B0A;
  background-color: #fffaf0 /*#f0ffff*/ ;
}
img {
  max-width: 100%;
}
/*====ここからトップ====*/

h1, h2, nav {
  text-transform: capitalize;
}
h2 {
  font-size: 1.7rem;
  text-align: center;
  margin-top: 30px;
	margin-bottom: 20px;
  font-weight: bold;
}
main {
  margin: 20px;
}
.header {
  height: 200px;
}
.header-logo {
  box-sizing: border-box;
  width: 180px;
  padding: 10px;
  position: absolute;
  left: 5vw;
  top: -10;
  /* margin-bottom: 10px;*/
  z-index: 99;
}
.tel {
  display: block;
  /*position: absolute;
    right: 10px;
    top: 10px;*/
  width: 200px;
  margin: 10px auto;
  padding: 10px;
  border-radius: 8% 8% 8% 8% / 30% 30% 30% 30%;
  text-align: center;
  background: #228EA6;
  color: #fff;
}
.tel:hover {
  background-color: #fff;
  color: #228EA6;
  font-weight: bold;
  transition: .5s;
}
.onlySp {
  height: 100px;
}
/*header .innerWrap {
  height: 90px;
  background: #E5989B;
}*/
.onlyPc {
  display: none;
}
.first-view {
  margin: 10px auto;
  text-align: center;
}
.first-view-text {
  display: block;
  margin: 10px 10px;
  padding: 10px 0;
  /*border-radius: 39% 37% 43% 33% / 35% 40% 35% 47% ;*/
  background: #228EA6;
  align-self: center;
}
h1 {

  text-align: center;
  
  font-size: 1.3rem;

  color: #fff;

}

/*-----スライダーcssここから-------*/
.img-frame {
  position: relative;
  width: 95%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 39% 37% 43% 33% / 35% 40% 35% 47%;
}

.img-01, .img-02, .img-03 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.img-01 {
  background-image: url("../images/alvan-nee-1VgfQdCuX-4-unsplash.jpg");
  animation: slide-animation-01 15s infinite;
  background-position: 50% 70%;
}
.img-02 {
  background-image: url("../images/sikun_20220402-180657-2_TP_V.jpg");
  animation: slide-animation-02 15s infinite;
}
.img-03 {
  background-image: url("../images/susipakuAB678APP91029_TP_V.jpg");
  animation: slide-animation-03 15s infinite;
  background-position: center;
}
@keyframes slide-animation-01 {
  0% {
    opacity: 1;
    transform: scale(1.0);
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0;
    transform: scale(1.15);
  }
  90% {
    opacity: 0
  }
  100% {
    opacity: 1;
    transform: scale(1.0);
  }
}
@keyframes slide-animation-02 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
    transform: scale(1.1);
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0;
    transform: scale(1.0);
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide-animation-03 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
    transform: scale(1.0);
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}
/*-----スライダーcssここまで-------*/ 」 .topPage h2 {
  font-size:
    clamp(30px, 7.5vw, 48px);
  /*36px;*/
  font-weight: 700;
  text-align: center;
  margin: 60px 0 30px;
  color: #563734;
}
.consultation-time {
  text-align: center;
  border: solid 1px;
  margin: 10px auto;
  font-size: 0.8em;
  background-color: #fff;
}
.consultation-time th {
  text-align: center;
  background-color: #228EA6;
  color: #fff;
  ;
}
.consultation-time td {
  vertical-align: middle;
}
.consultation-time img {
  width: 7vw;
}
.coment p {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px;
}
.coment img {
  border-radius: 10%;
}
.medical-treatment ul {
  margin: 20px auto;
}
.medical-treatment ul li {
  display: flex;
  justify-content: space-evenly;
  margin: 20px auto;
  padding: 10px;
}
.medical-treatment ul li p {
  align-self: center;
}
.medical-treatment img {
  object-fit: contain;
  height: 10vh;
}
.logo {
  padding: 20px;
}
.map {
  max-width: 90vw;
}
h3 {
  font-size: 1.4rem;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.button {
  width: 150px;
  /*border: solid #f00;*/
  text-align: center;
  margin: 20px auto 50px;
  padding: 10px 0;
  border-radius: 20px;
  background-color: #E5989B;
  color: #fff;
  font-size: 20px;
}
.button a {
  display: block;
}
.button:hover {
  box-shadow: 10px 10px 0px 0px rgb(245, 215, 216);
  /* font-size: 24px;*/
  /*     background-color:#fff;
  color:  #E5989B;*/
  transition: 0.8s;
}


/*=========footerここから=========*/
footer .innerWrap {
  /*display: flex;*/
  justify-content: space-evenly;
  align-self: center;
  background: /* #AD6F69 */ #228EA6;
  height: 180px;
  margin-top: 40px ;
  position: relative;
}
footer p {
  background: /*#AD6F69*/ #228EA6;
  color: #fff;
  text-align: center;
}
/*.footer-logo {
 
  box-sizing: border-box;
  width: 150px;
  
  position: absolute;
  left: 5%;
  top: 40%;
 
}*/
footer .menu {
  /*  width: 100px;*/
  /* padding-left: 20vw;*/
  padding-top: 10px;
  /* display: flex;*/
  margin: 10px auto;
  position: absolute;
    left:45%;
  top: 0%;
}
/*  footer .menu li{  
    margin-top: 30px;
}*/
footer .menu li a {
  box-sizing: border-box;
  color: #fef4f4;
  padding: 0 5px;
  /* border: solid #f00;*/
}
footer .menu li a:hover {
  background-color: #fef4f4;
  color: /*#AD6F69*/ #228EA6;
  /*   background-color: #d6b7b4;*/
  /*  color: #fffaf0;*/
  transition: .5s;
}
/*=========ハンバーガーメニューここから=========*/
/* メニューを画面上部に固定表示しています */
.gMenu {
  position: fixed;
  right: 0;
  top: 30;
  width: 100%;
  z-index: 99;
}
/* メニューアイコンを画面右上に固定しています */
.gMenu .menu-icon {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 12px;
  padding-top: 5px;
  height: 12px;
}
/* メニューアイコン（三本線）の真ん中の線です */
.gMenu .menu-icon .navicon {
  background: #ffc107; /* 色は自由に変更可能です */
  display: block;
  height: 2px; /* 太さ */
  width: 31px; /* 長さ */
  position: relative;
  transition: background .4s ease-out; /* 形が変わる時のアニメーション */
}
/* メニューアイコン（三本線）の上と下の線を疑似要素で追加 */
.gMenu .menu-icon .navicon::before, .gMenu .menu-icon .navicon::after {
  background: #ffc107; /* 色は自由に変更可能です */
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .4s ease-out; /* 形が変わる時のアニメーション */
  width: 100%;
}
.gMenu .menu-icon .navicon::before {
  top: 10px;
} /* 位置を上にずらしています */
.gMenu .menu-icon .navicon::after {
  top: -10px;
} /* 位置を下にずらしています */
/* 表示されるメニューです */
.gMenu .menu {
  background-color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  max-height: 0; /* ★最初は高さを0にして非表示状態に */
  transition: max-height .6s; /* 表示されるときのアニメーション */
  text-align: center;
}
/* メニュー部分のデザインです */
.gMenu .menu li:first-of-type {
  padding-top: 50px;
}
.gMenu .menu li a {
  display: block;
  padding: 24px 20px;
  text-decoration: none;
  text-transform: uppercase;
}
.gMenu .menu li a:hover {
  background-color: /*#d6b7b4*/ #b0e0e6;
  color: #fffaf0;
  transition: .5s;
}
/* チェックボックスは常に非表示です */
.gMenu .menu-btn {
  display: none;
}
/* ▼▼▼以下はチェックボックスがONの時の状態です▼▼▼ */
.gMenu .menu-btn:checked ~ .menu {
  max-height: 600px; /* ★チェックボックスがオンの時高さを338pxにして表示させます */
  transition: max-height .6s;
}
/* メニューボタンの中央の線を非表示に */
.gMenu .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
/* メニューボタンの上下の線を45度傾けて✕印を作ります */
.gMenu .menu-btn:checked ~ .menu-icon .navicon::before {
  transform: rotate(-45deg);
  top: 0;
}
.gMenu .menu-btn:checked ~ .menu-icon .navicon::after {
  transform: rotate(45deg);
  top: 0;
}
/* サイトに合わせてオリジナルカスタマイズ */
.gMenu .menu-icon {
  top: 26px;
}
.gMenu .menu-icon .navicon, .gMenu .menu-icon .navicon::before, .gMenu .menu-icon .navicon::after {
  background: #333333;
}
/*=========ハンバーガーメニューここまで=========*/
@media screen and (min-width: 640px) {
  .first-view {
    width: 70vw;
    height: 60vh;
    /* margin: 30px auto;*/
    text-align: center;
  }
  /*      .img-frame{
   position: relative;
         left: 10vw;
       
   width: 70vw;
        height: 40vh;} */
  .img-frame {
    position: relative;
    width: 80vw;
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 0 auto;
    /* overflow: hidden;
   margin: 0 auto;
    border-radius: 39% 37% 43% 33% / 35% 40% 35% 47% ;*/
  }
  h2 {
    font-size: 1.7rem;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
    font-weight: bold;
  }
  .consultation-time th {
    padding: 10px;
    ;
  }
  .consultation-time img {
    width: 5vw;
    margin: 10px;
  }
  .coment {
    display: flex;
  }
  .coment img {
    width: 45vw;
  }
  .coment p {
    align-self: center;
    padding: 30px 15px;
    /*margin-right: 10px;*/
  }
  .medical-treatment ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .medical-treatment ul li {
    display: block;
    /* border: solid 1px #f00;*/
    width: 30vw;
    margin: 10px;
  }
  .medical-treatment li img {
    object-fit: contain;
    height: 20vh;
    width: 60%;
    margin: 10px auto;
    display: block;
  }
  .medical-treatment li p {
    text-align: center;
    padding: 20px;
  }
  .info ul {
    /*border: solid 1px #f00;*/
    margin: 20px auto;
  }
  .map {
    width: 100%;
  }
  .about {
    display: flex;
    margin-top: 20px;
  }
  .address {
    width: 30vw;
    align-self: center;
  }
}
/*=========ここからPC=========*/
@media screen and (min-width: 920px) {
  .onlyPc {
    display: block;
  }
  .onlySp {
    display: none;
  }
  /*  heder .deMenu{
        max-width: 70vw;
    }*/
  /*----headerここから----*/
  header .deMenu {
    background-color: #f0ffff;
  }
  header .deMenu ul { /*継承のセレクタheaderの中のnavの中のulを指定する。半角空白でつないでいく。*/
    display: flex; /*横並びになる。*/
    justify-content: flex-end;
    /* justify-content: center;*/ /*主軸方向で配置させる。*/
    border-top: 2px solid #7c5d48;
    border-bottom: 2px solid #7c5d48;
    /* background-color: rgba(255, 255, 255, 0.42);*/
    padding: 25px 0 20px; /*上12px 左右0 下10px*/
  }
  header .deMenu ul li {
    margin: 0 20px;
  }
  header .deMenu ul li a {
    padding: 10px 10px;
    font-size: 0.9rem;
    font-weight: bold; /*文字を太文字にする。*/
    color: #7c5d48;
    transition: .5s; /*hoverを遅らせる0.5s（0.5秒）*/
  }
  header .deMenu ul li a:hover { /*マウスを当てた時*/
    text-decoration: underline double; /*下線を二重で入れる。*/
    background-color: #7c5d48;
    color: #fff;
  }
  /*----headerここまで----*/
  main {
    max-width: 70vw;
    margin: 0 auto 50px;
  }
  .first-view {
    width: 70vw;
    height: 80vh;
    display: flex;
    position: relative;
    /* border: solid 1px #f00;*/
    margin-bottom: 20px;
  }
  .img-frame {
    position: relative;
    left: 25vw;
    width: 40vw;
    aspect-ratio: 4 / 3;
    margin: 20px 10px;
  }
  .first-view-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30vw;
    height: 40vh;
    /*   padding: 150px 100px;*/
    border-radius: 50%;
    background: #228EA6;
    align-self: center;
    position: absolute;
    left: 10px;
    top: 30vh;
  }
  .first-view-text h1 {
    /* display: block;*/
    text-align: center;
    /* width:30vw;
        height: 40vh;*/
    font-size: 1.5rem;
    /* background: #228EA6;*/
    color: #fff;
    /* margin: 100px;*/
    /* padding: 100px;*/
    /* border-radius:50%;*/
  }
  h2 {
    font-size: 1.7rem;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 20px;
    font-weight: bold;
  }
  .coment img {
    width: 35vw;
  }

  footer {
    position: relative;
  }
 /* footer .innerWrap {
    display: flex;*/
    /*justify-content: space-around;*/
/*  }*/
/*  footer nav {
    
    align-items: center;
  }*/
/*  .footer-logo {
    width: 200px;
    position: absolute;
    top: 35%;
  }*/
/*  footer .menu li {
        display: flex;
    justify-content: space-around;
  }*/
    
    
    
     footer .menu { 
    display: flex; 
    justify-content: flex-end;
    /* justify-content: center;*/ /*主軸方向で配置させる。*/
    padding: 25px 0 20px; /*上12px 左右0 下10px*/
  }
  footer .menu li {
    margin: 50px 10px;
  }
 /* footer .menu {*/
      /*width: 90vw;*/
  /*  display: flex;
    justify-content: space-evenly;
    position: absolute;
    top: 40%;*/
/* left:45%;*/
  /*  margin: 0 auto;*/
    /*justify-content: flex-end;*/
 /* }*/
  footer .menu li a {
   /* color: #fef4f4;*/
    padding: 10px 10px;
     
  }
}