@charset "UTF-8";
/* すべての要素に適用 */
* {
box-sizing: border-box;
}


/* ボディの設定 */

body {
  margin: 0;
  padding: 0;
}

.full-page {
  width: 100vw;
  height: 100vh;

  background: rgba(0,0,0,.3);
}





/* 上フェードイン・フェードアウトの設定 */

@keyframes slider_3{
　/* 非表示（不透明度0%）状態からフェードインを始める  */
  0%{
    opacity:0;
  }
  /* ここまでにフェードインを完了し、完全表示（不透明度100%）にする */
  4.76%{
    opacity:1;
  }
  /* ここまで完全表示（不透明度100%）の状態を維持したらフェードアウトを始める */
  33.33%{
    opacity:1;
  }
  /* ここまでにフェードアウトを完了し、非表示（不透明度0%）にする */
  42.85%{
    opacity:0;
  }
  /* 非表示（不透明度0%）状態を維持したまま終わる */
  100%{
    opacity:0;
  } 
}



/* ヘッダー画像の設定 */
header {
position: relative;
grid-column-start: left;
grid-column-end: right;
grid-row-start: header;
grid-row-end: main;
margin-bottom: 20%;
}
header img {
display: block;
width: 100%;
max-height: 100vh;
}




/*ヘッダーメニューの固定*/
margin: 0px; /* bodyの外側の余白を指定する */
padding: 0px /* 10px 50px 10px; bodyの内側余白を指定する(上:右:下:左) */
;
}
.Header{
position: fixed; /* ヘッダーを固定する */
top: 0; /* 上部から配置の基準位置を決める */
left: 0; /* 左から配置の基準位置を決める */
width: 100%; /* ヘッダーの横幅を指定する */
height: 35px; /* ヘッダーの高さを指定する */
padding: 15px; /* ヘッダーの余白を指定する(上下左右) */
background-color: #31a9ee; /* ヘッダーの背景色を指定する */
color: #000000; /* フォントの色を指定する */
}
.Contents{
	width: 100%; /* コンテンツの横幅を指定する */
overflow: auto; /* コンテンツの表示を自動に設定（スクロール） */
}






/*=========ページを読み込み時にふわっとさせる ===============*/
  body {
    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
    animation: fadeIn 1.5s ease 0s 1 normal;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }






/*=========ふわっとさせたい ===============*

.effect-fade {
　opacity : 0;
　transform : translate(0, 45px);
　transition : all 300ms;
}

.effect-fade.effect-scroll {
　opacity : 1;
　transform : translate(0, 0);
}




/*=========スクロールでふわっと表示画像 ===============*/

.scroll-up {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}







/*===============================================
画像を横から縦に並べる===============================================*/
div {
        font-size: 2rem;
        text-align: center;
        margin: 0px;
        padding: 0px;
      }

      .parent {
        background: #292929;
        display: flex;
      }

      .child {
        background: #f0f8ff;
        width: 150px;
      }

      @media screen and (max-width: 800px) {
        .parent {
          flex-wrap: wrap;
        }
      }

      @media screen and (max-width: 400px) {
        .parent {
          display: block;
        }
      }










/*=========文字の回り込み ===============*/
.section06 .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.section06 img {
  display: block;
  width: 30%;
  height: auto;
}

.section06 .box {
  width: 66%;
}

/*=========文字の回り込みつづき ===============*/
.wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.wrap:not(:last-child) {
  margin-bottom: 80px;
}

.wrap:nth-child(even) {
  flex-direction: row-reverse;
}

img {
  display: block;
  width: 30%;
  height: auto;
}



.textbox {
  width: 66%;
text-align: left;
font-size: 16px;
color: #333333;
line-height: 1.5;
font-family: serif;
}


.textbox01 {
  width: 90%;
text-align: right;

color: #333333;
line-height: 1.5;
font-family: serif;
}





















/* ナビゲーション */
nav {
position: absolute;
z-index: 9000;  
top: 0;
left: 0;
right: 0;
}
nav ul {
display: flex;
background: rgba(255,255,255,.7);
margin: 0;
list-style: none;
padding: 0;
font-size: 1.2rem;
}
nav li {
text-align: center;
padding: 10px 0;
width: 200px;
cursor: pointer;
transition: all 1s;
}
nav li:hover {
background: white;
}
/* ナビゲーションモバイル版 */
nav.open {
display: block;
}
/* メディアクエリ */
@media (max-width:840px) {
nav {
position: fixed;
display: none;
}
nav ul {
flex-direction: column;
height: 100vh;
padding-top: 40px;
background: rgba(255,255,255,.9);
}
nav li {
width: 100%;
padding: 20px;
}
}


/* メニューボタン */

.menubutton {
position: fixed;
top: 0;
left: 0;
cursor: pointer;
z-index: 100;
width: 40px;
height: 40px;
padding: 5px;
background: transparent;
display: none;
}
.menubutton i {
display: block;
width: 30px;
height: 5px;
background: white;
margin-bottom: 7.5px;
}
.menubutton i:last-child {
margin-bottom: 0;
}

/*三本線メニューボタン*/
.menubutton {
position:fixed;
  z-index: 100;/*ボタンを最前面に*/
  top:0px;
  right: 10px;
  cursor: pointer;
  z-index: 9999;
    width: 40px;
    height:40px;
display: none;
}

/*×に変化*/  
.menubutton span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    z-index: 9999;/*ボタンを最前面に*/
    left: 14px;
    height: 3px;
    border-radius: 2px;
  background-color: #666;
    width: 45%;
  }

.menubutton span:nth-of-type(1) {
  top:15px; 
}

.menubutton span:nth-of-type(2) {
  top:23px;
}

.menubutton span:nth-of-type(3) {
  top:31px;
}

.menubutton.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.menubutton.active span:nth-of-type(2) {
  opacity: 0;
}

.menubutton.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}


.menubutton i {
display: block;
width: 30px;
height: 5px;
background: #c0c0c0;
margin-bottom: 7.5px;
}

/* メディアクエリ */
@media (max-width:840px) {
.menubutton {
display: block;
}
}




















/* ショッピングカート中央 */
.margin-center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}



/* 人材基本方針の線 */
hr.style8 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}
hr.style8:after {
	content: '';
	display: block;
	margin-top: 2px;
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}




/* 画像を使った上に戻るボタン（リス） */
#pagetop {
    position:fixed;
    bottom:0px;
    right:50px;
}







/* 診療日の表 */
.open_time_table {
  display: block;
  border-collapse: collapse;
  /* overflow-x: scroll;で、
  スマホ画面幅に表が入りきらない場合は
  横スクロールしてくれます */
  margin-bottom:25px;
}
 .open_time {
  font-family: "Noto Serif JP",serif;
  display:flex;
  text-align:center;
  
  border-left: 1px solid #acacac;
  .time {
    height:40px;
    background-color: #f5f5f5;
    max-width: 26%;
    width:100%;
    line-height:36px;
    font-size:16px;
    @include mq(max-xxs) {
      max-width:28%;
    }
    @include mq(max-xxxs) {
      font-size:12px;
      max-width: 31%;
    }
  }
  /* 土曜の時間BOX */

.times {
    height:75px;
    background-color: #ffffff;
    max-width: 100％;
    width:99.6%;
    line-height:36px;
    font-size:16px;
    @include mq(max-xxs) {
      max-width:100%;
    }
    @include mq(max-xxxs) {
      font-size:12px;
      max-width: 31%;
    }
  }
  

  .day {
    font-size:16px;
    @include mq(max-xxxs) {
      font-size:12px;
    }
  }
  .box {
    width:100%;
    max-width:9.2%;
    line-height:36px;
    font-size:18px;
    background:#ffffff;
    @include mq(max-xxs) {
      max-width:9%;
    }
    @include mq(max-xxxs) {
      font-size:10px;
          max-width: 8%;
    }
  }
  div {
    border-right: 1px solid #acacac;
    border-top: 1px solid #acacac;
  }
  &.open_time_last {
    div {
      border-bottom: 1px solid #acacac;
    }
  }
 }












/* フッター */

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

body {
  background: #fff;
}

table {
  border-spacing: 0;
  border-collapse: separate;
}

ul {
  padding: 0;
  list-style: none;
}

p {
  margin: 0;
}

a {
  color: #66330e;
  text-decoration: none;
}

a:hover {
  opacity: 0.7;
}

hr {
  height: 1px;
  border: 0;
  border-top: 1px solid #e5e7eb;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.footer {
  font-size: 15px;
  color: #66330e;
  background: #fff;
}

.footer-navi-heading {
  font-weight: 600;
  color: #666666;
}

.footer-navi li {
  margin-bottom: 0.75rem;
  font-size: 14px;
text-align: right;
}

.footer-section-top {
  padding: 1rem;
}

.footer-table {
  margin-bottom: 2rem;
  width: 100%;
  height: 140px;
  background: #fff;
}

.footer-table tr {
  border-bottom: 1px solid #afb2bf;
}

.footer-table th,
td {
  text-align: center;
  border: 1px solid #fff;
}

.footer-table th {
  color: #a0522d;
  background: #eedcb3;
}

.footer-table th.th2 {
  color: #a0522d;
  background: #eedcb3;
}

.footer-table td {
  min-width: 30px;
 background: #eedcb3;
}

.footer-table td .maru {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid #ffffff;
  border-radius: 50%;
}

.footer-table svg {
  width: 24px;
}

.footer-map {
  width: 100%;
  max-height: 200px;
  border: 0;
}

.footer-section-bottom {
  padding: 3rem 2rem;
  color: #8b4513;
  background: #fff2cc;
}

.footer-address {
  margin-bottom: 2rem;
  text-align: center;
  font-style: normal;
}

.footer-address h2 {
  color: #66330e
;
}

.footer-address__tel {
  font-size: 30px;
  font-weight: 600;
}

.footer-copyright {
  padding: 1rem;
  line-height: 1;
  color: #fff;
  text-align: center;
  background: #deb887;
;
}

.footer-copyright a {
  color: #ffffff;
}

.footer-Privacypolicy {
  padding: 1rem;
  line-height: 1;
  color: #66330e;
  text-align: center;
  background: #fff2cc;
;
}


@media (min-width: 768px) {
  .md-justify-between {
    justify-content: space-between;
  }

  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg-flex {
    display: flex;
  }

  .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .footer-section-top {
    padding: 2rem;
  }

  .footer-address {
    margin-bottom: 0;
    text-align: left;
  }

  .footer-table {
    margin-bottom: 0;
    width: auto;
    min-width: 40%;
  }

  .footer-map {
    max-width: 27%;
    max-height: 140px;
  }
}


/* -------------------------------------------------- */
/*  MEDIA QUERIES                                     */
/*　端末に合わせてスライダーの高さを調整する                */
/* -------------------------------------------------- */

/*===============================================
画面の横幅が640pxまで
===============================================*/

@media screen and (max-width: 640px) {

.slider_1,.slider_2,.slider_3{
  height:330px; 
}

}

/*===============================================
画面の横幅が414pxまで（iPhone/Pixel）
===============================================*/

@media screen and (max-width: 414px) {

.slider_1,.slider_2,.slider_3{
  height:260px; 
}

}

/*===============================================
画面の横幅が375pxまで（iPhone11/Pixel）
===============================================*/

@media screen and (max-width: 375px) {

.slider_1,.slider_2,.slider_3{
  height:220px; 
}

}

/*===============================================
画面の横幅が390pxまで（iPhone12/Pixel）
===============================================*/

@media screen and (max-width: 375px) {

.slider_1,.slider_2,.slider_3{
  height:200px; 
}

}
/*===============================================
画面の横幅が428pxまで（iPhone13/Pixel）
===============================================*/

@media screen and (max-width: 375px) {

.slider_1,.slider_2,.slider_3{
  height:190px; 
}

}

/*===============================================
画面の横幅が360pxまで（Galaxy）
===============================================*/

@media screen and (max-width: 360px) {

.slider_1,.slider_2,.slider_3{
  height:230px; 
}

}

/*===============================================
画面の横幅が320pxまで（iPhone5/SE）
===============================================*/

@media screen and (max-width: 320px) {

.slider_1,.slider_2,.slider_3{
  height:200px; 
}

}