@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;box-sizing:border-box; }
*, *:before, *:after { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-family: "Zen Maru Gothic", sans-serif;font-weight: bold;vertical-align:baseline;background:transparent;}
a {color: #4d4d4d;margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration: none;opacity: 1.0;transition-property: all;transition: 0.3s linear;}
a:hover {transition-property: all;transition: 0.3s linear;opacity: 0.6;}
a[href^="tel:"] {pointer-events: none;}
body {line-height: 1.6;	color: #4d4d4d;}
img{max-width: 100%;box-sizing: border-box;vertical-align: middle;height: auto !important;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
nav ul {list-style:none;}
ul {list-style: none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}
/* change colours to suit your needs */
ins {background-color:#ff9;color:#000;text-decoration:none;}
/* change colours to suit your needs */
mark {background-color:#ff9;color:#000; font-style:italic;font-weight:bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}
table {border-collapse:collapse;border-spacing:0;}
ol {padding-left: 20px;}
/* change border colour to suit your needs */
hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input, select {vertical-align:middle;}
@font-face {
  font-family: 'ZenMaruGothic';
  src: url('./ZenMaruGothic-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}
/*  共通 */
.fs12{font-size: 12px;}.fs18{font-size: 18px;}.fs20 {font-size: 20px;}.fs22{font-size: 22px;}.fs26{font-size: 26px;}.fs32 {font-size: 32px;}
.mb10{margin-bottom: 10px !important;}.mb20{margin-bottom: 20px !important;}.mb30{margin-bottom: 30px !important;}
.mb50 {margin-bottom: 50px !important;}.mb100{margin-bottom: 100px !important;}
.center {text-align: center;}.center_l {text-align: center;}.right {text-align: right;}.left {text-align: left;}
.flexbox {
	-webkit-display: flex;
	display: flex;
	-webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	width: 100%;
}
.c3 {width: 30%;}
.c3 img {height: auto !important;}
.sp_on {display: none;}
.text {line-height: 220%;}
.fcB {color: #004188;}

/* ヘッダー
------------------------------------------------------------*/
body {
	width: 100%;
	display: block;
	position: relative;
}
header {
	width: 95vw;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	background-color: #fff;
	border-radius: 0 0 20px 20px;
	box-shadow: 0px 0px 15px -5px #777777;
	padding: 10px 30px;
	z-index: 50;
}
header h1 {
	font-size: clamp(12px,calc(16/1920*100vw),16px);
	padding-right: 35px;
}
header .logo {
	display: block;
	width: clamp(200px,calc(300/1920*100vw),300px);
}
header .header_btn {
	position: absolute;
	top: 10px;
	right: 30px;
	display: flex;
	justify-content: flex-end;
	gap: clamp(5px,calc(20/1920*100vw),20px);
}
header .header_btn li {width: clamp(150px,calc(250/1920*100vw),250px);}
header .pc_menu {
	position: absolute;
	right: 30px;
	bottom: 20px;
}
header .pc_menu ul {
	display: flex;
	justify-content: flex-end;
	gap: clamp(10px,calc(30/1920*100vw),30px);
}
header .pc_menu ul li a {
	font-size: clamp(14px,calc(20/1920*100vw),20px);
	padding-bottom: 3px;
	background-image: linear-gradient(#e1717e, #e1717e);
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 0 3px;
	transition: background-size 0.5s;
}
header .pc_menu ul li a:hover {
	background-position: bottom left;
	background-size: 100% 3px;
	opacity: 1.0;
}


/* ナビゲーション
------------------------------------------------------------*/
/*固定追従時CSS*/
header .pc_menu.show ul{
	position:fixed;
	top:0;
	left:0;
	justify-content: center !important;
    align-items: center;
	background:rgba(255,255,255,0.9);
	height:60px;
	width:100%;
	border:1px solid #e1717e;
	border-radius: 0 0 10px 10px;
    transform: translateY(0);
    transition: transform 0.5s ease-out !important;
    z-index:999;
}
/* バーガーメニュー */
.hamburger {display: none;}
.hamburger {
	position: fixed;
	top: 5px;
	right: 5px;
	z-index: 99;
	width: 45px;
	height: 45px;
	border: none;
	background: #e1717e;
	border-radius: 10px;
	cursor: pointer;
}
.hamburger__line {
	position: absolute;
	left: 10px;
	width: 25px;
	height: 2px;
	background-color: #ffffff;
	transition: all .4s;
}
.hamburger__line:nth-of-type(1) {top: 13px;}
.hamburger__line:nth-of-type(2) {top: 22px;}
.hamburger__line:nth-of-type(3) {top: 31px;}
/* メニューオープン時 */
.hamburger.active .hamburger__line:nth-of-type(1) {transform: translateY(9px) rotate(-45deg);}
.hamburger.active .hamburger__line:nth-of-type(2) {opacity: 0;}
.hamburger.active .hamburger__line:nth-of-type(3) {transform: translateY(-9px) rotate(45deg);}
.nav {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	width: 300px;
	height: 100vh;
	background-color: #fff;
	box-shadow: -2px 0 4px rgba(0,0,0,.1);
	transform: translateX(108%);
	transition: transform .4s;
	z-index: 90;
}
.nav.active {transform: translateX(8%);}
.nav__list {
	margin: 0 0 20px;
	list-style: none;
	padding-top: 60px;
}
.nav__item {padding: 0 20px;}
.nav__link {
	display: block;
	padding: 10px 0;
	color: #004188;
	text-decoration: none;
	text-align: center;
	border-bottom: 2px solid #bedbed;
}
a.reservation_spbtn {
	width: 240px;
	display: block;
	margin: 0 auto 10px;
}
a.tel_spbtn {
	width: 240px;
	display: block;
	margin: auto;
}

/* 追従ボタン
------------------------------------------------------------*/
.fixed_btn {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 99;
}

/* contents
------------------------------------------------------------*/
.contents {
	width: 100%;
	padding: clamp(80px,calc(200/1920*100vw),200px) 0;
}
.innerS {
	max-width: 1200px;
	width: 90%;
	margin: auto;
}
.innerB {
	max-width: 1440px;
	width: 90%;
	margin: auto;
}
a.btnP {
	background-color: #e1717e;
	border-radius: 50px;
	text-align: center;
	color: #fff;
	padding: 8px clamp(30px,calc(50/1920*100vw),50px);
}
.title_area {
	margin-bottom: clamp(40px,calc(70/1920*100vw),70px);
	background-image: url("../images/line-contents.svg");
	background-repeat: repeat-y;
	background-size: clamp(20px,calc(40/1920*100vw),40px);
	background-position: top left;
	padding-left: clamp(40px,calc(60/1920*100vw),60px); 
}
.title_area h2 {
	color: #004188;
	font-size: clamp(18px,calc(40/1920*100vw),40px);
	margin-bottom: 10px;
}
.title_area p {font-size: clamp(14px,calc(24/1920*100vw),24px);}
#access {
	width: 100%;
	background-color: #bedbed;
	padding: clamp(80px,calc(150/1920*100vw),150px) 0 clamp(50px,calc(100/1920*100vw),100px);
}
#access h2 {
	text-align: center;
	color: #004188;
	font-size: clamp(18px,calc(30/1920*100vw),30px);
	margin-bottom: clamp(30px,calc(80/1920*100vw),80px);
}
#access .time_detail {
	max-width: 850px;
	width: 100%;
	background-color: #fff;
	border-radius: 10px;
	padding: clamp(10px,calc(30/1920*100vw),30px);
	margin: 0 auto clamp(30px,calc(50/1920*100vw),50px);
}
#access .time_detail img {
	display: block;
	margin: 0 auto 20px;
}
#access .time_detail p {
	text-align: center;
	color: #e1717e;
	margin-bottom: 20px;
}
#access .time_detail ul li {
	padding-left: 1em;
	text-indent: -1em;
}
#access .clinic_detail {margin-bottom: clamp(30px,calc(50/1920*100vw),50px);}
#access .clinic_detail dl {
	width: 100%;
	padding: clamp(10px,calc(20/1920*100vw),20px) 0;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #fff;
}
#access .clinic_detail dl dt {
	width: 220px;
	text-align: center;
	color: #125ca1;
	font-size: clamp(14px,calc(20/1920*100vw),20px);
}
#access .clinic_detail dl dd {
	width: calc(100% - 220px);
	font-size: clamp(14px,calc(20/1920*100vw),20px);
}
#access .map {
	width: 100%;
	height: clamp(250px,calc(350/1920*100vw),350px);
}
#access .map iframe{
	width: 100%;
	height:100%;
}
/* フッター
------------------------------------------------------------*/
footer {
	width: 100%;
	background-color: #125ca1;
}
footer .copyright {
	text-align: center;
	color: #fff;
	font-size: clamp(14px,calc(20/1920*100vw),20px);
	padding: clamp(10px,calc(15/1920*100vw),15px);
}

/*----------------------------------------------------------*/
/* ブレイクポイント
------------------------------------------------------------*/
/* 1024px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1024px){
	a[href^="tel:"]{pointer-events: auto;}.text {line-height: 180%;}
	.fs16,.fs18,.fs20 {font-size: 14px;}.fs22 {font-size: 16px;}
	.fs26,.fs32{font-size: 18px;}
	.mb100 {margin-bottom: 50px !important;}.mb50 {margin-bottom: 30px !important;}
	.hamburger , .nav {display: block;}
	header {
		width: 100%;
		border-radius: 0;
		padding: 10px;
	}
	header .header_btn {display: none;}
	header .pc_menu {display: none;}
	.fixed_btn li:first-child {display: none;}
	.fixed_btn li:last-child {
		width: 50px;
		height: 50px;
	}
}

/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){
	.sp_non {display: none;}
	.sp_on {display: block;}
	.center_l {text-align: left;}
	#access .clinic_detail dl {flex-wrap: wrap;}
	#access .clinic_detail dl dt {
		width: 100%;
		margin-bottom: 10px;
	}
	#access .clinic_detail dl dd {width: 100%;}
}
