@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box;-webkit-appearance: none;-webkit-text-size-adjust: 100%;}
*:before, *:after {box-sizing: border-box;}
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, p, blockquote, pre,em, img, strong,b,dl, dt, dd, ol, ul, li,fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td,canvas, details,figure,footer, header, hgroup, menu, nav, section, summary,mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align: baseline;background: transparent;font-weight: normal;font-style: normal;}
img{max-width: 100%;height:auto !important;vertical-align: middle;}
ul {list-style: none;}
ol {padding-left: 20px;}
a {color: #008ac8;vertical-align:baseline;background:transparent;text-decoration: none;}
a:hover{transition-property: all;transition: 0.2s linear;opacity: 0.8;}
a[href^="tel:"] {pointer-events: none;}
a.link{text-decoration:underline;}
mark {background: linear-gradient(transparent 70%, #B1DDF1 0%);}
hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input, select {vertical-align:middle;}

/* 共通 */
body {margin:0 auto;font-feature-settings: "palt";font-family:"Zen Kaku Gothic New",'Hiragino Sans','Meiryo','Hiragino Kaku Gothic ProN',;font-weight: 400; color: #333333;line-height: 1.6;font-size:clamp(1rem, 0.932rem + 0.24vw, 1.125rem); }
.target{scroll-margin-top: 120px;scroll-behavior: smooth;}

.inner-box,.inner-box2,.inner-top{width:95%;max-width:1500px;padding:clamp(2.5rem, -1.25rem + 7.81vw, 5rem) 0; margin:auto;}
.inner-box2{padding:clamp(1.25rem, -0.625rem + 3.91vw, 2.5rem) 0 clamp(2.5rem, -1.25rem + 7.81vw, 5rem);}
.inner-top{padding:80px 0 clamp(2.5rem, -1.25rem + 7.81vw, 5rem);}
.mb20{margin-bottom:clamp(0.938rem, 0.61rem + 0.68vw, 1.25rem)!important;}/*最小15*/
.mb40{margin-bottom:clamp(1.25rem, -0.625rem + 3.91vw, 2.5rem)!important;}/*最小20*/
.mb60{margin-bottom:clamp(1.875rem, -0.938rem + 5.86vw, 3.75rem)!important;}/*最小30*/
.mb80{margin-bottom:clamp(2.5rem, -0.123rem + 5.46vw, 5rem)!important;}/*最小40*/
.mb100{margin-bottom:clamp(3.125rem, -1.563rem + 9.77vw, 6.25rem)!important;}/*最小50*/
.fs20{font-size:clamp(1.125rem, 0.938rem + 0.39vw, 1.25rem);}/*最小18*/
.fs22{font-size:clamp(1.125rem, 0.863rem + 0.55vw, 1.375rem)!important; ;}/*最小18*/
.fs24{font-size:clamp(1.125rem, 0.964rem + 0.57vw, 1.5rem) !important; }/*最小18*/
.fc_navy{color:#192350;}
.fcb{color:#2350b5;}
.fcbl{color:#000000;}
.bg_g{background:#e6f2ce;}
.center,.center_l{text-align: center;}
.right{text-align: right;}
.bold{font-weight:700;}
.sp_on{display:none;}
.flexbox{
	display: flex;
    flex-wrap: wrap;
	row-gap:max(1.5em,30px);
	margin:auto;
}
.flexbox.c2{column-gap: 3%;row-gap:60px;}
.flexbox.c3{column-gap: 2.75%;row-gap:60px;}
.flexbox.c4{column-gap: 2%;row-gap:60px;}
.c2{justify-content: space-between;}
.c2 > *{width: 48.5%;}
.c3 > *{width: 31.5%;}
.c4 > *{width:23.5%;}
.c2 img ,.c3 img,.c4 img{display:block; align-content: flex-start ;margin:0 auto 20px;}

/*見出し*/
h2,h3,h4{color:#192350;}
.tih2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF;
    padding: 20px 0;
    text-align: center;
    font-size:clamp(1.25rem, 0.857rem + 0.82vw, 1.625rem);/*最小20最大26px*/
}

.tih2::before,
.tih2::after {
    content: "";
    flex: 1; /* 自動で伸縮 */
    height: 1px;
    background: #192350;
    margin: 0 clamp(1.25rem, -2.684rem + 8.2vw, 5rem) 0 0;/*最小20最大80px*/
}
.tih2::after {margin: 0 0 0 clamp(1.25rem, -2.684rem + 8.2vw, 5rem);}/*最小20最大80px*/

h3.lineb,h3.linebarrow{
    border-bottom:1px solid #192350;
    padding:10px 0 ;
    font-size:clamp(1.125rem, 1.018rem + 0.38vw, 1.375rem);/*最小18最大22px*/
    text-align: center;
    margin-bottom: clamp(0.938rem, 0.282rem + 1.37vw, 1.563rem);
}
h3.linebarrow{position:relative;}
h3.linebarrow a{display:block;width:100%; color: #192350;padding-right: 30px;}
h3.linebarrow a::after{ content: ""; position: absolute;  right: 0;  top: 53%;  transform: translateY(-50%);  width: 20px;  height: 20px;  background: url("../images/arrow.webp") no-repeat center / contain;}
h3.line2c {position: relative; margin-bottom: 20px;}
h3.line2c::after {content: "";display: block; height: 3px;margin-top:0.5em;  background: linear-gradient(to right, #008ac8 20%, #d1d8e5 20%);}

/*箇条書き*/
ul.list li {position: relative; padding-left: 15px;}
ul.list li:not(:last-child){margin-bottom:0.3rem;}
ul.list li::before {
  content: "";
  background-image: url("../images/li-circle.webp"); 
  background-size: 6px 6px; 
  background-repeat: no-repeat;
  position: absolute;
  left: 0; 
  top: 12px;
  width: 6px;
  height: 6px;
}
/*左サイドの英語表記*/
.designtext{position:relative;}
.designtext::before{position:absolute; font-family: "Merriweather", serif; font-size:clamp(1.875rem, -5.744rem + 9.52vw, 4.375rem);writing-mode:vertical-rl;display: block; width:clamp(2.188rem, -6.384rem + 10.71vw, 5rem); height: 750px;color:#ced0db;z-index: -1;}

/* ヘッダー
------------------------------------------------------------*/
header{position: absolute;width:100%;background: rgba(255, 255, 255, 0.9); border-radius: 0 0 20px 20px; z-index: 999;}
.inner-header{width:clamp(61.563rem, 6.089rem + 86.59vw, 110rem);margin: auto;position: relative;padding:10px 0;}
h1{font-size:14px;position: absolute;right:0;}
.logo img{width:clamp(15.625rem, 5.563rem + 15.71vw, 25rem);}
.tel{position:absolute;bottom:0;right:0;width:clamp(12.5rem, 5.389rem + 11.1vw, 19.125rem);}
/*サイドバナー*/
.side-nav{position:fixed;inset-inline-end: 0;top:15vh;z-index: 99; width:clamp(1.875rem, 0.957rem + 1.91vw, 2.75rem);}/*最大44px最小30px*/
.side-nav li:not(:last-child){margin-bottom:10px;}

/* ナビゲーション
------------------------------------------------------------*/
/* pcnav */
/*固定追従時CSS*/
.pcnav #nav.fixed{
	position:fixed;
	top:0;
	left:0;
	inset:0;
	margin: 0 auto;
	justify-content: center;
	background:rgba(255,255,255,1.0);
	height:60px;
	width:100%;
	border:1px solid #192350;
	border-radius: 0 0 10px 10px;
    font-size:clamp(1rem, 0.738rem + 0.55vw, 1.25rem);
	animation: slideDownFade 0.4s ease-out;
}
@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*----固定追従用ここまで*/
.hamburger-button,.hamburger-input,.hamburger-button {display: none;}
.pcnav .drawer-nav{font-size:clamp(1rem, 0.866rem + 0.21vw, 1.125rem);width:min(1280px 67vw);margin:0 auto;text-align: center;}
.pcnav .drawer-nav > li{display: inline-block;	position: relative;}
.pcnav .drawer-nav > li:nth-last-child(-n+4){display:none;}
.pcnav .drawer-nav a,.pcnav .drawer-nav span{
	display:block;
	color:#000;
	padding:10px 1vw;
}
.pcnav .drawer-nav >li a:hover,.pcnav .drawer-nav > span:hover{
	color: #008ac8;
}
.pcnav .subnav::after{content:"";display:block; background-image:url("../images/gnav_arrow.webp"); background-position:center bottom;height:5px; background-repeat: no-repeat;}
.pcnav .subnav:hover::after{visibility: hidden;}

/*ドロップダウンメニュー*/
.pcnav .subnav > ul{display:none; /* 下層メニューを非表示 */}
.pcnav .subnav:hover > ul{
	position: absolute;
	top: 100%; /* 親項目の直下に配置 */
	left:50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width:clamp(37.5rem, -25.306rem + 98.04vw, 53.125rem);
	border-width:0 2px 2px 2px;
	border-style:  solid;
	border-color: #008ac8;
	border-radius: 0 0 10px 10px;
	background:#f6f2ee;
	padding:20px 10px;
	z-index: 999!important;
}
.pcnav a + span.panel{display:none;}

.pcnav .subnav > ul li{
	border-bottom:1px dotted #008ac8;
	width:49%;
	font-size:clamp(1rem, 0.498rem + 0.78vw, 1.125rem);
}
.pcnav .subnav > ul li{
	border-bottom:1px dotted #008ac8;
	width:49%;
	font-size:clamp(1rem, 0.498rem + 0.78vw, 1.125rem);
}
.pcnav .subnav > ul a:hover{background-color:#008ac8;color:#FFF;}

/* ドロワー */
@media screen and (max-width: 1025px) {
	.hamburger-input {display: none;}
	.hamburger-mark {
		background-color: #2350b5; /* カスタム */
		display: block;
		height: 1px; /* カスタム */
		transition: 0.3s; /* カスタム */
		width: 30px; /* カスタム */
	}
	.drawer .drawer-nav {
		position: fixed;
		top:0;
		transform: translateY(-100%); /* 縦Y・横Xカスタム */
	}
	#hamburger:checked ~ ul.drawer-nav {
		position:fixed;
		top:0;
		bottom:inherit;
		width: 100%!important;
		inset:0;
		height: 100%;
		margin:auto;
		padding:50px 0px 0;
		background:rgba(255, 255, 255,1.0); /* カスタム */
		transform: translateY(0%); /* 縦Y・横Xカスタム */
		transition: 0.5s;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		z-index: 9998;
	}
	.hamburger-button {
		position: fixed;
		top:5px;
		right:5px;
		align-items: center;
		background-color: #f6f2ee; /* カスタム */
		border: 1px solid #2350b5; /* カスタム */
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 7px; /* カスタム */
		height:clamp(3.75rem, 3.261rem + 1.74vw, 4.375rem); /* カスタム */
		width: clamp(3.75rem, 3.261rem + 1.74vw, 4.375rem); /* カスタム */
		border-radius: 5px;
	}
	.hamburger-button span:last-child {position:absolute;bottom:0; left:50%; transform: translateX(-50%);font-size:11px; color:#192350;}
	#hamburger:checked ~ .hamburger-button{position: fixed;top:5px;right:5px;z-index: 9999;}
	#hamburger:checked	~ .hamburger-button	.hamburger-mark:nth-of-type(1) {transform:translate(4px, -3px) rotate(45deg); transform-origin: 0%;}
	#hamburger:checked ~ .hamburger-button .hamburger-mark:nth-of-type(2) {opacity: 0;}
	#hamburger:checked ~ .hamburger-button .hamburger-mark:nth-of-type(3) {transform:translate(4px, 3px) rotate(-45deg); transform-origin: 0%;}
	#hamburger:checked ~ .hamburger-button span:last-child{display:none;}
	.drawer-nav > li:not(:nth-last-child(-n+4)){border-bottom:1px solid #ccc;}
	.drawer-nav > li:not(:nth-last-child(-n+4)) a,.drawer-nav span{display:block;text-align: left;padding:10px !important;color:#192350;}/*子階層*/
	.drawer-nav > li:nth-last-child(-n+4)  {text-align: center;margin-top:20px;}
	.drawer-nav li li a,.drawer-nav li li span{display:block;font-weight: normal;font-size:16px;border-bottom: 1px dotted #192350; padding:10px 0;}/*孫階層*/
	/*開閉パネル*/
	.drawer-nav a.pc{display:none !important;}
	.subnav ul {
		display: none;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.subnav.open ul {display: block;background:#e5f3f9;width:100%;}
	.subnav .panel {cursor: pointer;}
	/* ボタンに記号を追加 */
	.subnav .panel::after {
		content: "＋";
		margin-left: 0.5em;
		font-weight: bold;
		transition: transform 0.3s ease;
	}
	/* 開いているときは「−」に変更 */
	.subnav.open .panel::after {content: "−";}
	.open .panel {background:#2350b5;color:#FFF;}
}
/* フッター
------------------------------------------------------------*/
footer{border-top:5px solid #008ac8;}
footer .copy{text-align:center;background:#008ac8;padding:15px 0;color:#FFF;}
footer h2{font-size: clamp(1.25rem, 0.857rem + 0.82vw, 1.625rem);}
footer h2::after{content:"Medical hours ＆ Access"; font-family:"Merriweather", serif; color:#ced0db; display: block;}
footer .flexbox div:first-child{max-width:648px;}
.dlist {border: 1px solid #ebf6fb;border-radius: 5px;overflow: hidden;}
.dlist div{display:flex; flex-wrap: wrap;border-bottom: 1px solid #ebf6fb;}
.dlist dt, .dlist dd {padding: 15px;}
.dlist dt {background: #008ac8;color: #FFF;width: 10rem;}
.dlist dd{width:calc(100% - 10rem);}
.map iframe{width:100%;height: 100%; border-radius: 15px;}
.sns img{display:inline;margin:15px;}
#pagetop {
	position:fixed;
	bottom:20px;
	right:20px;
	opacity: 0;
	transition: 0.8s ease;
	pointer-events: none;
	z-index: 99!important;
}
#pagetop a:hover {opacity: 0.5;}
#pagetop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* 1536px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1536px){
    /*左サイド英語表記*/
    .designtext::before{position: inherit;text-align: center; font-size:clamp(1rem, 0.315rem + 2.43vw, 1.875rem);writing-mode:inherit;display: block; width:100%; height:auto;color:#ced0db;z-index: -1;}
    .tih2{padding-top:5px;}
}
/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	/* 共通 
	--------------------------------------*/
	.center_l{text-align: inherit;}
	a[href^="tel:"] {pointer-events: auto;}
	.sp_on{display: block !important;}
	.sp_non{display: none !important;}
	/* ヘッダー
	--------------------------------------*/
	.inner-header{width:100%;padding:5px 10px;}
	h1{position:inherit;}
	.tel{display: none;}
	/*右サイド固定ボタン*/
	.side-nav{display:none;}

    /* フッター
	--------------------------------------*/
	footer .flexbox > div{width:100% !important;}
	footer .copy{padding:10px 0;font-size: 14px;}
    footer .flexbox div:first-child{max-width:100%;}
    .map iframe{height:500px;border-radius: 10px;}
	#pagetop {bottom:20px;right:5px;}
	#pagetop img{width:38px;height: auto;}
}
/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
	.c2 > *{width: 100%;}
	.c3 > *{width: 48.5%;}
	.c4 > *{width:31.5%;}
    .flexbox.c2{row-gap:30px; }
	.flexbox.c3{column-gap: 3%; row-gap:30px; }
	.flexbox.c4{column-gap: 2.75%;row-gap:30px; }
}
/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){
	h1{margin-right:65px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    h2,h3,h4{font-weight: 700;}
	/* 共通 */
	.sp_on{display: inherit;}
	.sp_non{display: none;}
	.c3 > *{width: 100%;}
	.c4 > *{width:48.5%;}
	.flexbox.c4{column-gap: 3%;}
	.c2,.c3,.c4{row-gap: 15px;}
    .flexbox img{width:80%;margin:0 auto 20px;border-radius: 10px;}
    .designtext::before{color:#B5B8C9;}
    /*ヘッダー*/
    header{border-radius:0 0 5px 5px;}
    .menu li{width:100%;}
	/* フッター*/
    footer .flexbox > img{width:100%;}
    .dlist dt, .dlist dd {width:100%;}
    footer .sns img{width:inherit; margin:15px;}
}