@charset "UTF-8";

html {
   /* font-family: 'Noto Sans JP', sans-serif; */
       font-family: 'M PLUS 1p', sans-serif;
     }
@media only screen and (max-width: 768px) {
 body {
   width: 85%;
   margin: 0 auto;
 }
}
   
.pop {
   font-family: 'poppins', sans-serif;
}

header {
   max-width: 1120px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;

}

.logo {
   width: 200px;
   height: 80px;
   display: flex;
   align-items: center;
}
.logo img {
   width: 100%; 
}
.btn {
   width: 50px;
   height: 50px;
   border: 1px solid #000;
   border-radius: 3px;
   cursor: pointer;
   z-index: 9999;
   position: relative;
}
.btn span {
   display: inline-block;
   width: 50%;
   height: 2px;
   background-color: #000;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   position: absolute;
   transform: all .6s;
}
.btn span:nth-of-type(1){
   top: 15px;
}
.btn span:nth-of-type(2){
   top: 23px;
}
.btn span:nth-of-type(3){
   top: 31px;
}
/* メイン */
#menu {
   width: 100%;
   height: 15vh;
   background-color: #ffffff;
   z-index: 999;
   position: fixed;
   top: -100%;
   left: 0;
   transform: all .6s;
}
#menu ul {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   list-style: none;
   text-align: center;
}
#menu ul li a {
   display: inline-block;
   text-decoration: none;
   color: #000;
   padding: 10px;
}
/* アクティブがついているとき */
#menu.is-active {
   top: 0;
}
.btn.is-active span:nth-of-type(1){
   transform: translate(-11px,8px) rotate(-45deg);
}
.btn.is-active span:nth-of-type(2){
   display: none;
}
.btn.is-active span:nth-of-type(3){
   transform: translate(-11px,-8px) rotate(45deg);
}
@media only screen and (max-width: 768px) {
#menu {
   width: 100%;
   height: 50vh;
   background-color: #ffffff;
   z-index: 999;
   position: fixed;
   top: -100%;
   left: 0;
   transform: all .6s;
}
}

/* ヘッダー */
.container {
   widows: 90%;
   max-width: 1120px;
   margin: 0 auto;
   position: relative;
}
.flex {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: center;
} 
header {
   padding: 27px 0;
}
.logo {
   font-size: 20px;
   font-weight: 700;
   letter-spacing: -0.04em;
   }
.logo span {
   color: #000;
}
.header_menu li {
   margin-left: 20px;
}
#menu .header_menu li a {
   transition: .3s;
}
/* マウスフォバー */
#menu .header_menu li a:hover {
   color: #80BAAA;
   transition: .3s;
}
/* ヘッダー固定 */
header {
   position: fixed;
   width: 100%;
   height: 70px;
   background-color: #ffffff;
   top: 0;
   left: 70px;
   z-index: 10;
}
main {
   margin: 80px auto 0;
}

@media only screen and (max-width: 768px) {
/* ヘッダー固定 */
header {
   position: fixed;
   width: 100%;
   height: 70px;
   background-color: #ffffff;
   top: 0;
   left: 0px;
   z-index: 10;
}
}

* メイン */
#hero {
   background-image: url(../images/img1.jpg);
   background-position: center;
   background-size: cover;
   height: 540px;
   border-radius: 30px;
   display: flex;
   align-items: center;

    /* 下の余白 */
   margin-bottom: 120px;  
   overflow: hidden;
   }

.hero_inner {
   z-index: 2;
   color: #ffffff;
   width: 100%;
   text-align: center;
}
.hero_inner p {
   font-size: 20px;
   font-weight: 500;
   margin-bottom: 16px;
}

/* スライドショーの文字 */
.hero_inner h2 {
   position: absolute;
   top: 50%;
   left: 50%;
   font-size: 24px;
   font-weight: 500;
   color: white;
	-webkit-text-stroke: 1px #F8F8F8;
	text-shadow: 0px 1px 4px #23430C;
   transform: translateX(-50%);
   width: 100%;
 }
 .hero_inner h1 {
   position: absolute;
   top: 40%;
   left: 50%;
   font-size: 30px;
   color: white;
	-webkit-text-stroke: 1px #F8F8F8;
	text-shadow: 0px 1px 4px #23430C;
   font-weight: 500;
   letter-spacing: 5px;
   transform: translateX(-50%);
   width: 100%;
   padding-bottom: 100px;
 }

@media only screen and (max-width: 768px) {
#hero {
      height: 340px;
}
.hero_inner p {
   font-size: 15px;
}
.hero_inner h1 {
   font-size: 20px;
   font-weight: 500;
   color: white;
	-webkit-text-stroke: 1px #F8F8F8;
	text-shadow: 0px 1px 4px #23430C;
   
} 
.hero_inner h2 {
   font-size: 12px;
   font-weight: 500;
   color: white;
	-webkit-text-stroke: 1px #F8F8F8;
	text-shadow: 0px 1px 4px #23430C;
 }
}

/* スライドショー */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
/* header {
   width: 100%;
   height: 70px;
   background: #333;
} */
.mv {
   width: 100%;
   height: 500px;
   position: relative;
}
.item {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
      /* img-changeという名前のアニメーションを15秒かけて実行続ける */
   animation: img-change 15s infinite;
   opacity: 0;
}
.item:nth-child(1) {
   animation-delay: 0s;
}
.item:nth-child(2) {
   animation-delay: 5s;
}
.item:nth-child(3) {
   animation-delay: 10s;
}
.item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

@keyframes img-change {
   0% {
opacity: 0;
}
   10% {
     opacity: 1;
}
   20% {
opacity: 1;
}
   30% {
opacity: 1;
}
   40% {
opacity: 0;
}
   100% {
opacity: 0;
}
}

/* インフォメーション */
#information {
   margin-top: 120px;
}
.title {
   font-size: 28px;
   font-weight: 500;
   color: #80BAAA;
   margin-bottom: 40px;
}
#information h3 {
   font-size: 18px;
   font-weight: 500;
   margin-bottom: 8px;
   width: 60%;
   padding: 14px 0;
   border-bottom: solid 2px #5d627b;
}
.information{
   font-size: 24px;
   font-weight: 700;
   color: #3f312b;
   margin-bottom: 40px;
   margin-top: 50px;
}
#information .text {
   line-height: 2;
   font-size: 16px;
}
.heading {
   font-family: 'hancing Script', cursive;
   font-size: 100px;
   font-weight: 500;
   color: #80BAAA;
   opacity: 0.1;
   position: absolute;
   top: 0;
   right: 0;
   transform: translatey(-30%);
   z-index: -1;
}
@media only screen and (max-width: 768px) {
#information h3 {
   width: 100%;
   font-size: 15px;
}
.heading {
   font-family: 'hancing Script', cursive;
   font-size: 70px;
   font-weight: 300;
}
}

/* ご挨拶 */
#greeting {
   margin-top: 120px;
}
.title {
   font-size: 28px;
   font-weight: 500;
   color: #80BAAA;
   margin-bottom: 40px;
}
#greeting .text {
   line-height: 2;
   font-family: 16px;
}
#greeting .text {
   padding: 0.5em 1em;
   margin: 2em 0;
   color: #5d627b;
   background: white;
   border-top: solid 8px #5d627b;
   box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
   margin: 8; 
   padding: 8;
   width: 1000px;
   box-shadow: 3px 3px 4px gray;
}

.greeting_inner {
   margin-bottom: 40px;
   position: relative;
}
@media only screen and (max-width: 768px) {
   #greeting .text {
   box-shadow: 2px 2px 3px gray;
   width: 100%;
   }
}


/* ドクター */
#doctor {
    margin-top: 120px;
}
.title {
   font-size: 28px;
   font-weight: 500;
   color: #80BAAA;
   margin-bottom: 40px;
}
#doctor h3 {
   font-size: 24px;
   font-weight: 600;
   margin-bottom: 60px;
}
.doctor_inner {
    margin-bottom: 40px;
    position: relative;
}
.column-45 {
   width: 45%;
}
.column-50 {
   width: 45%;
}
#doctor .text {
   line-height: 2;
   font-size: 16px;
}
#doctor .text {
   padding: 0.5em 1em;
   margin: 2em 0;
   color: #5d627b;
   background: white;
   border-top: solid 8px #5d627b;
   box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
   margin: 8; 
   padding: 8;
   box-shadow: 3px 3px 4px gray;
}
#doctor img {
   border-radius: 20px;
}
.doctor-img {
   background-position: center;
   background-size: cover;
   height: 300px;
   border-radius: 20px;
}

@media only screen and (max-width: 768px) {
#doctor .column-45 {
   width: 100%;
   margin-bottom: 30px;
}
#doctor .column-50 {
   width: 100%;
}
#doctor h3 {
   font-size: 17px;
}
#doctor .text {
   width: 100%;
}
}

/* 診療内容 */
#medical {
   margin-bottom: 120px;
}
.title {
   font-size: 28px;
   font-weight: 500;
   color: #80BAAA;
   margin-bottom: 40px;
}
#medical h3 {
   font-size: 24px;
   font-weight: 600;
   margin-bottom: 60px;
}
.medical_inner {
   margin-bottom: 40px;
   position: relative;
}
.column-50 {
   width: 45%;
}
#medical .text {
   line-height: 2;
   font-size: 16px; 
   padding: 0.5em 1em;
   margin: 2em 0;
   color: #5d627b;
   background: white;
   border-top: solid 8px #5d627b;
   box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
   margin: 8; 
   padding: 8;
   box-shadow: 3px 3px 4px gray;
   }

#medical img {
   border-radius: 20px;
}
.medical-img {
   background-position: center;
   background-size: cover;
   height: 300px;
   border-radius: 20px;
}

@media only screen and (max-width: 768px) {
#medical .column-45 {
   width: 100%;
   margin-bottom: 30px;
}
#medical .column-50 {
   width: 100%;
}
#medical h3 {
   font-size: 17px;
}
#medical .text {
   box-shadow: 2px 2px 3px gray; 
}
}

/* お知らせ */
#news {
   margin-bottom: 120px;
}
.news_inner {
   margin-bottom: 40px;
   position: relative;
}
#news .row {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 64px;
}
#news .col {
   width: 45%;
   margin-bottom: 10px;
   
}
.title {
   font-size: 28px;
   font-weight: 500;
   color: #80BAAA;
   margin-bottom: 40px;
}
#news h3 {
   font-size: 24px;
   font: #000044;
   font-weight: 600;
   margin-bottom: 60px;
}
#news p a {
   color: #80BAAA;
}
#news a {
   color: #ffffff;
}
#news p {
   font-size: 14px;
   line-height: 1.8;
   padding-top: 4px;
}
#news a [
   font-size: 14px;
   line-height: 1.6;
]
#news h4 {
   font-size: 18px;
}
/* お知らせ腺 */
#news hr {
   border: solid 1px #000044;
   margin: 0 auto 40px;
}
.button {
   display: inline-block;
   border: solid 1px #eeeeee;
   background-color: #5d627b;
   padding: 5px 10px 5px;
   border-radius: 80px;
   font-size: 14px;
   font-weight: 500;
}
#news .text {
   
   font-size: 16px;
}

@media only screen and (max-width: 768px) {
   /* ニュース */
#news .row {
   flex-wrap: wrap;
   gap: 24px 0;
   margin-bottom: 48px;
}
#news .col {
   width: 100%;
}
.heading {
   font-size: 20px;
   margin-bottom: 14px;
}
h3 {
   font-size: 12pt;
   font-weight: 700;
}
.text {
   font-size: 15px;
}
}

/* 診療時間 */
#service {
   margin-bottom: 120px;
}
.service_inner {
   margin-bottom: 40px;
   position: relative;
}
#service .container h2 {
   font-size: 36px;
   font-weight: 700;
}
#service .container h2 span {
   color: #f39800;
}
#service.container .heading {
   font-size: 24px;
   font-weight: 700;
   color: #f39800;
   margin-bottom: 60px;
}
#service .container .text {
   line-height: 1.8;
   margin-bottom: 44px;
}
#service .container .row {
   display: flex;
   justify-content: space-between;
}
#service .container .col {
   width: 32%;
   text-align: center;
}
#service .container .bg {
   text-align: center;
   background-color: #fff9ee;
   width: 220px;
   height: 220px;
   border-radius: 100%;
   position: relative;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   margin-bottom: 20px;
   box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);
}
#service .container img {
   height: 140px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) 
   translateY(-50%);
}
#service .container h3 {
   text-align: center;
   font-weight: 700;
   font-size: 20px;
   margin-bottom: 60px;
   color: #000044;
}
#service .container .text2 {
   font-size: 15px;
   line-height: 1.8;
   text-align: center;
   margin-top: 10px;
}
#service .container .text {
   font-size: 25px;
}
#service .container h2 {
   font-size: 30px;
}
#service a {
   color: #80BAAA;
}

@media only screen and (max-width: 768px) {
/* 診療時間 */
#service {
   padding: 0 0 50px 0;
}
#service .container .row {
   flex-wrap: wrap;
       gap: 24px;
}
#service .container .col {
   width: 100%;
}
#service .container .bg {
   width: 200px;
   height: 200px;
}
}

/* 診療担当 */
#table {
   margin-bottom: 120px;
   table-layout: fixed;
}
.table_inner {
   margin-bottom: 40px;
   position: relative;
}
#table {
   width: 100%;
   border-collapse: collapse;         /*全体枠線 枠線かぶったらかぶらないように*/
}
#table th:nth-child(1) {
   width: 15%;
   box-sizing: border-box;
}
#table th:nth-child(2) {
   width: 10%;
   box-sizing: border-box;
}
#table th:nth-child(3) {
   width: 10%;
   box-sizing: border-box;
}
#table th:nth-child(4) {
   width: 10%;
   box-sizing: border-box;
}
.title {
   font-size: 30px;
   font-weight: 500;
   color: #80BAAA;
   margin-bottom: 40px;
}
#table h3 {
   font-size: 24px;
   font-family: 700;
   margin-bottom: 60px;
   text-align: left;
}

/* 枠線 */
td,th {
   border: 1px solid #3f312b;
   width: 130px;
   padding: 8px;
   text-align: center;
}
thead {
   background: #5d627b;
   color: #ffffff;
}
@media only screen and (max-width: 768px) {
/* 担当表 */
#table {
   display: block;
   overflow-x: scroll;
   white-space: nowrap;
   margin-left: 10px;
}
}

 /* マップ */
#access {
   margin-bottom: 120px;
}
.access_inner {
   margin-bottom: 40px;
   position: relative;
}
#access {
   margin-top: 100px;
}
#access p a {
   color: #80baaa;
   }  
.container .row {
display: flex;
justify-content: baseline;
align-items: center;
}
.container .col {
   width: 50%;
}
.access {
   background-color: #f7f7ff;
}
.access .col:first-child {
   padding: 16px 47px 16px 10%;
}
.access_text {
   text-align: left;
   color: #000000;
   font-size: 30px;
   font-weight: 700;
   text-align: left;
   margin-bottom: 40px;
}
.access h2 {
   text-align: left;
   color: #000000;
   margin-bottom: 30px;
}
.access .text {
   color: #556b2f;
   font-size: 18px;
   line-height: 1.7;
   margin-bottom: 32px;
}

@media only screen and (max-width: 768px) {
.access .row {
   flex-wrap: wrap;
}
.access .col {
   width: 100%;
} 
}
  /* フッター */
footer {
   text-align: center;
   margin: 90px 0;
}
.copyright {
   font-size: 12px;
   margin-top: 40px;
}

/* 横スクロール禁止 */
html,body {
   overflow-x: hidden;
}