@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');


/* E L E M E N T */
html{font-size: 62.5%;}
html,body,ul,li,dl,dt,dd,ol,h1,h2,h3,h4,h5,iframe,section,p,table,form,a,img,header,footer,hr,div{padding:0; margin:0; box-sizing: border-box; font-weight:normal;}
html{width:100%; height:100%; overflow-y:scroll;}
body {font-family: 'Noto Sans JP', sans-serif; font-weight: normal; font-size:1.6rem; font-size:16px; color:#333; line-height:200%; min-width: 900px;} 
table{font-size:1.6rem; font-size:16px; border-collapse:collapse; /*border-collapse:separate; border-spacing:1px;*/}
th,td{border: solid 1px #333; padding:5px; text-align: left;}
th{background:#d3eaf5;}
td{background: #fff;}
li{list-style:none;}
img{border:0; vertical-align:top; max-width: 100%; height: auto;}/* 場合によってvertical-align */
img.img-with100{width:100%; height:auto;}
hr{height:0; margin:1.5em auto; border:none; border-top:1px solid #cccccc; clear:both;}
a {font-size:100%; vertical-align:baseline; background:transparent;}
@media (hover: hover) and (pointer: fine) {a img:hover{filter: alpha(opacity=60); -moz-opacity:0.60; opacity:0.60;}}
p {padding: 0 0 30px 0;}
h1 {font-size: 16px; text-align: center;}
h2 {font-weight: bold; font-size: 24px; position: relative; text-align: center; padding-top:30px; padding-bottom: 70px; color: #c09d78;}
h2:after {position: absolute; content: ""; background-color: #c09d78; width: 50px; height: 1px; bottom: 40px; left: 50%; transform: translateX(-50%);}
h3 {font-size: 20px; font-weight: bold;}
h3.category {font-weight: bold; font-size: 1. 2em; color: #c09d78; margin-top: 70px; padding:1em; text-align:left; border-top:6px double #ece2d6; border-bottom: 6px double #ece2d6;}/* 受診案内ページの追加見出し */
h4 {font-size: 18px; font-weight: bold;}

/* ヘッダエリア */
	/* ハンバーガーメニュー */
	.drawer-hidden {display: none;}
	.drawer-open {display: flex; height: 60px; width: 60px; justify-content: center; align-items: center; position: fixed; z-index: 100; cursor: pointer; top:10px; right: 10px;}

	/* HMアイコン */
	.drawer-open span,
	.drawer-open span:before,
	.drawer-open span:after {content: ''; display: block; height: 3px; width: 25px; border-radius: 3px; background: #333; transition: 0.5s; position: absolute;}

	/* HM三本線のうち一番上の棒の位置調整 */
	.drawer-open span:before {bottom: 8px;}

	/* HM三本線のうち一番下の棒の位置調整 */
	.drawer-open span:after {top: 8px;}

	/* HMアイコンがクリックされたら真ん中の線を透明にする */
	#drawer-check:checked ~ .drawer-open span {background: rgba(255, 255, 255, 0);}

	/* HMアイコンがクリックされたらアイコンが×印になように上下の線を回転 */
	#drawer-check:checked ~ .drawer-open span::before {bottom: 0; transform: rotate(45deg);}
	#drawer-check:checked ~ .drawer-open span::after {top: 0; transform: rotate(-45deg);}
  
	/* HMメニューのデザイン*/
	.drawer-content {width: 30%; height: 100%; position: fixed; top: 0; left: 100%; z-index: 99; background: rgba(255,255,255,0.9); transition: .5s; margin-left: 70%; padding: 60px 0px 0px 30px;}
	.drawer-item img{width: 30px; vertical-align: middle; padding-right: 10px;}

	/* HMアイコンがクリックされたらメニューを表示 */
	#drawer-check:checked ~ .drawer-content {left: 0;}

#logo {margin-left: 20px; padding-top: 20px; width: 400px;}
#topimg {background: #fff; transition: 1s; }
#lower-topimg{display:flex; align-items: center; justify-content: center; height: 170px; background-image: url("../img/lower-topimg.webp"); background-repeat: no-repeat; background-size: cover; box-shadow:0px 0px 5px 0px rgba(236, 226, 214, 1) inset;}
#lower-topimg h1 {text-align: center; font-size: 24px; line-height: 120%; color:#333; width: 100%; }

/* フッターエリア */
footer{margin-top: 30px; width: 100%; padding:30px; background:#d6effb; text-align:left; font-size: 13px;}

/* その他ID */
#time{width: 500px; margin: 0 auto 30px auto;}
#time td,th{text-align: center;}
#gmap{width: 500px; height: 500px; margin-left: auto; margin-right: auto;}
#map{width: 500px; height: 500px; margin-left: auto; margin-right: auto;}


/* リスト */
#home-list li {width: 50%; display: inline-block; padding: 0 20px;}
#pankuzu {background:#fff; padding: 0 20px 0 0; text-align: right;}
#pankuzu li{display:inline; font-size: 12px; background: url(../img/arrow.svg) no-repeat right center; padding-right:15px;}
li#act{background:none; padding-right:0;}
.inline-b li{display:inline-block; margin: 3px;}
.bg-arrow li{ background:url(../img/arrow.svg) no-repeat right center; padding-right:10px;}
.circle {margin-left:1em;}
.circle li{list-style:disc; padding-bottom:10px;}

.qa dt{background:#d6effb; display: block; padding: 5px 10px; margin-bottom: 10px;}

.qa dt .dl-icon {display: inline-block; width: 20px; text-align: center; font-weight: bold; margin-left: 10px;
  transition: transform 0.3s ease; 
}
.qa dt.open .dl-icon {
  transform: rotate(180deg); /* マイナス記号に */
}
.qa dd {display: none; border:#d6effb solid 3px; border-radius: 15px; margin-bottom: 30px; padding: 1.5em;}


/* カラム */
.w1200{max-width: 1200px; width: 100%;}
.w600{max-width: 600px;  width: 100%;}/* 携帯では100 */
.box3{width: 33.3%;}/* 携帯では50と100 */
.box4{width: 25%;}/* 携帯では33.33と50 */
.width50{width: 50%;}/* 携帯では100% */
.width-fit{width:fit-content;}
.pc{display:inherit;}
.sp{display:none;}
.r20{border-radius: 20px;}
.r10{border-radius: 10px;}
.r5{border-radius: 5px;}

.width30{width: 30%;}/* 携帯では100% */
.width70{width: 70%;}/* 携帯では100% */
.width20{width: 20%;}/* 携帯では100% */
.width80{width: 80%;}/* 携帯では100% */


/* フレックスボックス */
.fbox {display:flex; flex-wrap: wrap; justify-content: center;}
.fbox2 {display:flex; flex-wrap: wrap; justify-content: space-between;}
.fbox-c-10 {display: flex; flex-wrap: wrap; justify-content:center; gap: 10px;}
.fbox-l-10 {display: flex; flex-wrap: wrap; justify-content:left; gap: 10px;}
.fbox-c-50 {display: flex; flex-wrap: wrap; justify-content:center; gap: 50px;}/* 携帯ではgap30px */
.box2-even {width: calc((100% - 10px) / 2);}/* 携帯では100 */
.box3-even {width: calc((100% - 20px) / 3);}/* 携帯では100 */
.box4-even {width: calc((100% - 30px) / 4);}/* 携帯では1つと2つ */
.box4-even-gap50 {width: calc((100% - 150px) / 4);}/* 携帯では2つ */

/* マージン・パディング */
.mp0{margin: 0; padding: 0;}
.m-auto{margin-left: auto; margin-right: auto;}
.margin5{margin: 5px;}
.margin10{margin: 10px;}
.margin-t30{margin-top: 30px;}
.margin-t50{margin-top: 50px;}
.margin-t70{margin-top: 70px;}
.margin-t100{margin-top: 100px;}
.margin-b30{margin-bottom: 30px;}
.padding-t15{padding-top: 15px;}
.padding-t30{padding-top: 30px;}
.padding-t50{padding-top: 50px;}
.padding-t70{padding-top: 70px;}
.padding-t100{padding-top: 100px;}
.padding-t150{padding-top: 150px;}
.padding-l1em{padding-left: 1em;}
.padding-w10{padding-left: 10px; padding-right: 10px;}
.padding-w20{padding-left: 20px; padding-right: 20px;}
.padding05em{padding: 0.5em;}
.padding1em{padding: 1em;}
.padding5px{padding: 5px;}
.padding10px{padding: 10px;}

/* COLOR - TEXT */
.txt-c{text-align:center;}
.txt-r{text-align:right;}
.txt-l{text-align:left;}
.txt-cl{text-align:center;}/* 携帯ではleft */
.spbr {display: none;}/* 携帯ではテキスト改行 */
.siz12 {font-size:1.2rem; font-size:12px;}
.siz14 {font-size:1.4rem; font-size:14px;}
.siz20 {font-size:2rem; font-size:20px;}
.siz22 {font-size:2.2rem; font-size:22px;}
.siz24 {font-size:2.4rem; font-size:24px;}
.siz28 {font-size:2.8rem; font-size:28px;}

.annotation {font-size: 14px; line-height: 24px;}
.bold {font-weight: bold; }
.small {font-size:0.8em;}
.big {font-size:1.3em;}

.red{color:#ef8384;}
.blue{color: #1d5dbd;}
.white{color: #fff;}
.maincolor{color: #76caf2; font-weight: bold; }
.subcolor{color: #c09d78; font-weight: bold; }
.darkblue{color: #0079d1;}

/* 背景 */
.bg-red{background: #cf0000; color: #fff;}
.bg-blue{background: #1d5dbd; color: #fff;}
.bg-green{background: #1d8309; color: #fff;}
.bg-oudoiro{background: #838100; color: #fff;}
.bg-brown{background: #794501; color: #fff;}
.bg-perple{background: #6d01c5; color: #fff;}
.bg-maincolor{background: #d3eaf5; color: #333;}
.bg-subcolor{background: #ece2d6; color: #333;}
.bg-gray{background: #efefef;}

/* ボーダー */
.bd-none{border-bottom: none;}
.bd1{border-right: dashed 5px #fff;}
.bd2{border-bottom: #0e67ec solid 2px;}
.bd3{border: #ece2d6 solid 2px; box-sizing: border-box;}
.bd3-maincolor{border: #d6effb solid 2px; box-sizing: border-box;}
.bd-red{border: #ef8384 solid 1px; box-sizing: border-box; border-radius:30px;}
.bd-darkblue{border-bottom: #0079d1 solid 1px;}
.bd-gray{border: #cccccc  solid 1px; box-sizing: border-box;}
.bd-subcolor{border-bottom: #ece2d6 solid 2px;}
.bd-left-red {border-left: solid 4px #ef8384;}


/* L I N K */
/* imgの指定はELEMENTのところ、#g-menuの指定は上部ヘッダメニューのところ */
a:link{color:#333;}
a:visited{color:#333;}
a:hover{color:#c09d78; text-decoration:underline;}
a:focus{color:#c09d78; text-decoration:underline;}
a:active{color:#c09d78; text-decoration:none;}

a.b-link1{color: #fff; text-decoration: none; display: block; padding: 0.8em 1.2em; font-weight: bold; text-align: center; background: #c09d78; border-radius: 30px; border:solid 2px #c09d78;}
.b-link1:active {filter: alpha(opacity=60); -moz-opacity:0.60; opacity:0.60;}
@media (hover: hover) and (pointer: fine) {.b-link1:hover{background: #fff; color: #c09d78; border:solid 2px #c09d78; transition : 1s;}}

a.b-link2{color: #333; display: block; border:solid 2px #e6d8c9; border-radius: 30px; padding: 0.8em 1.2em; text-align: center; background: #e6d8c9; text-decoration: none;}
.b-link2:active {filter: alpha(opacity=60); -moz-opacity:0.60; opacity:0.60;}
@media (hover: hover) and (pointer: fine) {.b-link2:hover{background: #dfcebb; border:solid 2px #dfcebb; transition : 0.5s;}}

a.b-link3{color: #333; display: block; border:solid 2px #dfcebb; border-radius: 5px; padding: 0.8em 1.2em; background: #fff; text-decoration: none;}
.b-link3:active {filter: alpha(opacity=60); -moz-opacity:0.60; opacity:0.60;}
@media (hover: hover) and (pointer: fine) {.b-link3:hover{background: #ece2d6; transition : 1s;}}

a.b-link4{color: #333; display: block; border:solid 2px #76caf2; border-radius: 30px; padding: 0.8em 1.2em; background: #fff; text-decoration: none;}
.b-link4:active {filter: alpha(opacity=60); -moz-opacity:0.60; opacity:0.60;}
@media (hover: hover) and (pointer: fine) {.b-link4:hover{background: #d5ebf6; transition : 1s;}}

a.lk1:link{color:#fff; text-decoration:underline;}
a.lk1:visited{color:#fff; text-decoration:underline;}
a.lk1:hover{filter: alpha(opacity=60); -moz-opacity:0.60; opacity:0.60;}
a.lk1:focus{filter: alpha(opacity=60); -moz-opacity:0.60; opacity:0.60;}
a.lk1:active{filter: alpha(opacity=60); -moz-opacity:0.60; opacity:0.60;}


/* メインビジュアル切り替え */
.pc {display: block !important;}
.sp {display: none !important;}

/* 下部固定メニュー */

#fixed-menu {position: fixed; width: 500px; right: 0px; bottom: 0px; font-size: 0; opacity: 1; z-index: 100;}
#fixed-menu ul {display: flex; list-style: none; height: 65px;}
#fixed-menu li:nth-child(1) {background: #59bff0; width: 30%;}
#fixed-menu li:nth-child(2) {background: #76caf2; width: 24%;}
#fixed-menu li:nth-child(3) {background: #59bff0; width: 30%;}
#fixed-menu li:nth-child(4) {background: #c09d78; width: 16%;}
#fixed-menu li a {margin:auto; text-align: center; display:block; padding-top: 0px;}

/* フッターメニュー */
.footer-menu {display:inline-block; padding: 10px; line-height: 13px; font-size: 13px;}

/* h2装飾 */
.subEng {text-align: center; font-size: 45px; color: #f6f0eb; margin-bottom: -12px; font-weight: bold;}

/* スクロールボックス */
.scrollbox {max-width: 1200px; width: 100%; height: 290px; border: 1px solid #cccccc; overflow-y: scroll; padding: 20px;}

/* プロフィールページのイラスト調整 */
.profileimg {width:100%;}

/* youtubeフレームと配置画像の大きさ調整 */
.frame {width: 100%; height: auto; aspect-ratio: 16 / 9; max-width: 600px; display: block; margin: auto;}
.frameimg {width: 100%; height: auto; max-width: 600px; display: block; margin: auto;}


/* TOPページクリニック画像 */
.fbox-clinicimg {display:flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 80%; margin: auto;}/* 携帯では100% */
.clinicimg {width: calc((100% -  40px) / 3);}

/* 価格表 */
.table-p {width: 100%; border-collapse: collapse; border-spacing: 0; color: #333; font-size: 16px;}
.table-p th {border: 1px solid #ccc; box-sizing: border-box; vertical-align: middle; padding: 10px;}
.table-p td {border: 1px solid #ccc; box-sizing: border-box; vertical-align: top; padding: 10px;}