@charset "utf-8";

/*------------------------------------------------------------------------------
Css name: common.css
Css info: 共通スタイル
------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------
 基本
--------------------------------------------------------------------------*/
@-ms-viewport　/*IE でスクロールバーがコンテンツに重なるのを避ける*/
	{
	width: auto !important;
	initial-scale: 1 !important;
	}

html{
	height:100%;
	overflow-y:scroll; 
	overflow-x:hidden;
	scroll-margin-top:100px;
	scroll-behavior:smooth; /* スムーススクロール */
	}
html.open{overflow:hidden;}

body{
	height:100%;
	margin:0px;
	padding:0px;
	font-family: 'Zen Maru Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';
	font-weight:normal;
	font-style:normal;
	font-display:swap;
	font-size:16px;
	color:#534741;
	background:#f4f7f7;
	position: relative;
	}

article, aside, dialog, figure, footer,header,hgroup, nav, section { display: block; }

body *,
body p{
	line-height:1.6;
	margin:0px;
	padding:0px;
	}

table, th, td, th{
	border-collapse:collapse;
	border-spacing:0;
	font-weight:normal;
	font-size:1em;
	}

table,div,ol,ul,dl,dt,dd{
	margin:0px;
	padding:0px;
	list-style-type:none;
	-ms-zoom: normal;/*IE8*/
	}
	li{
		margin:0px;
		padding:0px;
		}

textarea,input{
	font-size:1em;
	}

/*For modern browsers 回り込みの解除*/
.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
	clear:both;
	}

.f-lef{
	float:left;
	}

.f-rig{
	float:right;
	}

.cen{
	text-align:center;
	}

.rig{
	text-align:right;
	}

.lef{
	text-align:left;
	}

h1,h2,h3,h4,h5,h6,small{
	font-size:100%;
	line-height:100%;
	margin:0px;
	padding:0px;
	}

em{
	font-style:normal;
	}
	
hr {
	display:none;
	}

img,table {	/*イメージ・テーブル線消し*/
	border:0px;
	}

img{
	max-width: 100%;
	vertical-align: bottom;	/*Strict時の画像下のスキマを埋める(Firefox)*/
	image-rendering: -webkit-optimize-contrast;/*Chrome*/
	}

address{
	font-style:normal;
	}

a{
	color:#534731;
	text-decoration:none;
	}
a:hover{
	opacity: 0.7;
	-ms-filter:"alpha(opacity=70)";
	-moz-opacity: 0.7;
	text-decoration:none;
	}
	.underline{
		text-decoration:underline;
		} 

/*
@media (min-width: 1000px) {
a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
}
} */

@media screen and (max-width:959px){/*スマホ用指定*/
	br.pc{
		display:none;
	}
	.pconly{
		display:none !important;
	}
}
@media print, screen and (min-width:960px){/*PC用指定*/
	br.sp{
		display:none;
	}
	.sponly{
		display:none !important;;
	}
}

/*------------------------------------------------------------------------
 レイアウト
--------------------------------------------------------------------------*/

@media screen and (max-width:959px){/*スマホ・タブレット用指定*/

	#home-header{
		width:calc(100% - 48px);
		box-sizing: border-box;
		padding:0;
		margin:0 24px;
		}

	.page-header{
		width:calc(100% - 48px);
		box-sizing: border-box;
		padding:0;
		margin:0 24px;
		}
}
@media print, screen and (min-width:960px){/*PC用指定*/
		
	#home-header{
		width:calc(100% - 80px);
		height:100vh;
		box-sizing: border-box;
		padding:0;
		margin:0 40px;
		}

	.page-header{
		width:calc(100% - 80px);
		box-sizing: border-box;
		padding:0;
		margin:0 40px;
		}
}

@media screen and (max-width:959px){/*スマホ・タブレット用指定*/

.content-wrapper{
	width:100%;
	padding:0;
	margin:0;
	position: relative;
	}
	.content-in{
		box-sizing: border-box;
		padding:0 24px;
		}
}
@media print, screen and (min-width:960px) and (max-width:1299px){/*PC用指定*/

.content-wrapper{
	width:100%;
	padding:0;
	margin:0;
	position: relative;
	}
	.content-in {
		box-sizing: border-box;
		width: 850px;
		margin: 0 auto;
		padding:0 24px;
		position: relative;
		}
}
@media print, screen and (min-width:1300px){/*PC用指定*/

.content-wrapper{
	width:100%;
	padding:0;
	margin:0;
	position: relative;
	}
	.content-in{
		max-width:1280px;
		box-sizing: border-box;
		width: 850px;
		margin: 0 auto;
		margin:0 auto;
		position: relative;
		}
}

@media screen and (max-width:959px){/*スマホ・タブレット用指定*/

#footer-box{
	width:100%;
	padding:0;
	margin:0;
	position: relative;
	}
	#footer-box-in{
		text-align:center;
		box-sizing: border-box;
		padding:50px 24px 12px;
		}
}
@media print, screen and (min-width:960px){/*PC用指定*/

#footer-box{
	width:100%;
	padding:0;
	margin:0;
	position: relative;
	}
	#footer-box-in{
		text-align:center;
		width:100%;
		max-width:1280px;
		box-sizing: border-box;
		padding:50px 0 12px;
		margin:0 auto;
		}
}

/*------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/

/*--- home-header ------------------------------*/
@media screen and (max-width:959px){/*スマホ・タブレット用指定*/
	
	#header-top-sp{
		padding:24px 0;
	}
	#header-top-sp a {
		display: inline-block;
	}
	#header-top-sp .logo{
		max-width: 240px;
	}
	#header-top-caption { display: none; }

	/* home mv */
	#home-header-mv{
		box-sizing: border-box;
		border-radius: 20px;
		position: relative;
		margin-bottom: 24px;
		}
		#home-header-mv .caption{
			position: absolute;
			text-align: center;
			width: 100%;
			top: 20%;
			color: #ffffff;
			font-size: clamp(24px, 2.4vw, 24px);
			line-height: 2.0em;
		}
		#home-header-mv img{
			border-radius: 20px;
		}

	/* page mv */
	#page-header-mv{
		box-sizing: border-box;
		border-radius: 20px;
		position: relative;
		margin-bottom: 24px;
		}
		.page-header #page-ttl{
			position: absolute;
			text-align: center;
			width: 100%;
			top: 30%;
			color: #ffffff;
			font-size: clamp(24px, 2.4vw, 24px);
			font-weight: 400;
			letter-spacing: 0.1em;
			line-height: 2.0em;
		}
		#page-header-mv img{
			border-radius: 20px;
		}
}
@media print, screen and (min-width:960px){/*PC用指定*/
	
	#header-top-sp { display: none; }

	#header-top-caption .txt-s1{
		color: #5e66aa;
		text-align: right;
		line-height: 40px;
	}

	/* home mv */
	#home-header-mv{
		background-image: url("../images/home-header_bg.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top center;
		box-sizing: border-box;
		border-radius: 20px;
		height: calc(100% - 200px); /* bottom margin100 + header caption40px + 余白 */
		padding:0;
		margin:0;
		position:relative;
		}
		#home-header-mv .caption{
			color: #ffffff;
			font-size: clamp(32px, 3.2vw, 34px);
			line-height: 2.0em;
			padding-top: 20%;
			/* padding-top: calc(50% - 230px); *//* 余白140px + captionの高さ180pxの半分90px = 230px */
			padding-left: 70px;
		}

	/* page mv */
	#gairai #page-header-mv { background-image: url("../images/gairai-header_bg.jpg"); }
	#houmon #page-header-mv { background-image: url("../images/houmon-header_bg.jpg"); }

	#page-header-mv{
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top center;
		box-sizing: border-box;
		border-radius: 20px;
		height: 330px;
		padding:0;
		margin:0;
		margin-bottom: 80px;
		position:relative;
		}
		.page-header #page-ttl{
			color: #ffffff;
			font-size: clamp(40px, 4.0vw, 40px);
			font-weight: 400;
			letter-spacing: 0.1em;
			line-height: 2.0em;
			padding-top: 130px;
			padding-left: 64px;
		}
}


/*------------------------------------------------------------------------
サイドナビ
--------------------------------------------------------------------------*/

@media screen and (max-width:959px){/*スマホ・タブレット用指定*/

	#sidenav {
		display: none;
	}
}
@media print, screen and (min-width:960px){/*PC用指定*/

	#sidenav {
		position: fixed;
		padding: 50px 30px 50px 40px;
		border-top-left-radius: 100px;
		right: 0;
		top: 100px;
		height: 100vh;
		background: #f4f7f7;
		z-index: 101;
		}
		#home #sidenav {
			height: calc(100vh - 100px);
		}
		.page  #sidenav {
			top: 80px;
		}

		#sidenav.shade {
			box-shadow: 0px 5px 15px 0px rgba(47, 50, 104, 0.1);
		}

		/* ロゴ */
		#sidenav a.logo {
			display: block;
			margin-bottom: 50px;
		}
		#sidenav .logo img {
			width: 170px;
		}

		/* リンクリスト */
		#sidenav .lis-nav {
			margin-bottom: 20px;
		}
		#sidenav .lis-nav li{
			margin-bottom: 10px;
			}
			#sidenav .lis-nav li a{
				background: #ffffff;
				color: #5e66aa;
				color: #5e66aa;
				border-radius: 24px;
				padding: 8px 20px;
				width: 120px;
				display: inline-block;
			}

		#sidenav .lis-nav li span {
			display: inline-block;
			width: 40px;
			}
			#sidenav .lis-nav li img {
			}
			#sidenav .lis-nav li.item-01 img { width: 26px; height: auto; }
			#sidenav .lis-nav li.item-02 img { width: 20px; height: auto; }
			#sidenav .lis-nav li.item-03 img { width: 22px; height: auto; }

		/* sns */
		#sidenav .sns-box {
			text-align: center;
		}
		#sidenav .sns-box a {
			display: inline-block;
			margin: 0 8px;
			}
			#sidenav .sns-box a.fb img{
				width: 30px;
				height: auto;
			}
			#sidenav .sns-box a.line img{
				width: 32px;
				height: auto;
			}
}


/*--- ハンバーガー ------------------------------*/
.menu-trigger {
	position: relative;
	display:block;
	width: 60px;
	height: 42px;
	cursor: pointer;
	margin: 0 auto 40px;
	}
	@media screen and (max-width:959px){/*スマホ・タブレット用指定*/

		.menu-trigger {
			display:inline-block;
			float: right;
			margin: 0 auto;
		}
	}
	.menu-trigger p {
		text-align: center;
		font-size: clamp(14px, 1.5vw, 15px);
		color: #5e66aa;
		position: relative;
		line-height: 1;
	}
	.menu-trigger > span.bar {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
		}
	.menu-trigger > span.bar:nth-of-type(1),
	.menu-trigger > span.bar:nth-of-type(2),
	.menu-trigger > span.bar:nth-of-type(3){
		position: absolute;
		left: 0;
		right: 0;
		width: 60px;
		height: 2px;
		background: #5e66aa;
		margin: auto;
		}
	.menu-trigger > span.bar:nth-of-type(1) { top: 20px; }
	.menu-trigger > span.bar:nth-of-type(2) { top: 30px; }
	.menu-trigger > span.bar:nth-of-type(3) { top: 40px; }
	/* OPEN時 */

	.menu-trigger-open {
    float: none;
	}
	.menu-trigger-open > span.bar:nth-of-type(1) {
		-webkit-transform: translate(-50%,-50%) rotate(20deg);
		transform: translate(-50%,-50%) rotate(20deg);
    top: 34px;
    left: 32px;
		}
	.menu-trigger-open > span.bar:nth-of-type(2) {
		opacity: 0;
		}
	.menu-trigger-open > span.bar:nth-of-type(3) {
		-webkit-transform: translate(-50%,-50%) rotate(-20deg);
		transform: translate(-50%,-50%) rotate(-20deg);
    top: 34px;
    left: 32px;
		}


/*--- グローバルナビ ------------------------------*/
#globalNavi.open  {
	 /* #global-nav top + #mobile-head height */
	-moz-transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	display: block;
}

#globalNavi {
	position: fixed;
	top: 0;
	right: 0;
	background: #e4ebf0;
	width: 100%;
	z-index: 103;
	/* 開いていないときは画面外に配置 */
	right: -100%;
	-webkit-transition: 1.5s ease-in-out;
	-moz-transition: 1.5s ease-in-out;
	transition: 1.5s ease-in-out;
	display: none;
	}
	
@media screen and (max-width:959px){/*スマホ・タブレット用指定*/

	#globalNavi {
		height: 100%;
		overflow: auto;
		padding-bottom: 200px;
	}
}
@media print, screen and (min-width:960px){/*PC用指定*/

	#globalNavi {
		height: 100vh;
	}
}

/* side（閉じるボタン） */
@media screen and (max-width:959px){/*スマホ・タブレット用指定*/

	#gnav-sidenav {
		position: relative;
		text-align: right;
		padding: 18px 24px;
		}
}
@media print, screen and (min-width:960px){/*PC用指定*/

	#gnav-sidenav {
		position:fixed;
		padding-top:340px;
		right: 0;
		top: 0;
		width:240px;
		height:100vh;
		background: #f4f7f7;
		}
		#home #gnav-sidenav {
			height: calc(100vh - 100px);
		}
}

/* メイン */
@media screen and (max-width:959px){/*スマホ・タブレット用指定*/

	#gnav-main {
		height: 100%;
		padding: 40px 24px;
		overflow: auto;
		}
		/* 右エリアコンテンツ順序入れ替え */
		#gnav-main .item-box .item-rig {
			display: flex;
			flex-flow: column wrap;
			flex-direction: column-reverse;
			max-width: 400px;
			margin: 0 auto;
		}
}
@media print, screen and (min-width:960px){/*PC用指定*/

	#gnav-main {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
		height: 100vh;
		margin-left: -240px; /* サイドバーの分右に */
		}
		#gnav-main .item-box {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			}
			#gnav-main .item-box .item-lef { margin-right: 40px; }
			#gnav-main .item-box .item-rig { margin-left: 40px; max-width: 400px; }
}

		/* MENU リスト */
		#gnav-main .item-box .lis-s1 dt {
			color: #5e66aa;
			margin-bottom: 10px;
			}
			#gnav-main .item-box .lis-s1 dt a { color: #5e66aa; }
			#gnav-main .item-box .lis-s1 dt a:hover { color: #f5756f; }
			
		#gnav-main .item-box .lis-s1 dd {
			border-bottom: 1px solid #b7c7e4;
			padding-bottom: 24px;
			margin-bottom: 30px;
			}
			#gnav-main .item-box .lis-s1 dd a {
				color: #534741;
				position: relative;
			}
			#gnav-main .item-box .lis-s1 dd a::after{
				content: '/';
				position: relative;
				padding-left: 4px;
				padding-right: 4px;
				}
				#gnav-main .item-box .lis-s1 dd a:last-child::after{
					content: none;
				}
	@media screen and (max-width:959px){/*スマホ・タブレット用指定*/

			#gnav-main .item-box .lis-s1 dt {
				font-size: clamp(18px, 1.8vw, 18px);
			}
			#gnav-main .item-box .lis-s1 dd a {
				font-size: clamp(12px, 1.2vw, 12px);
			}
	}
	@media print, screen and (min-width:960px){/*PC用指定*/

			#gnav-main .item-box .lis-s1 dt {
				font-size: clamp(20px, 2.0vw, 20px);
			}
			#gnav-main .item-box .lis-s1 dd a {
				font-size: clamp(14px, 1.4vw, 14px);
			}
	}

/* 診療時間表 */
#gnav-main .item-box .lis-timetable {
	border: 1px solid #c4c7ea;
	border-radius: 8px;
	font-size: clamp(14px, 1.4vw, 14px);
	margin-bottom: 16px;
	}
	#gnav-main .item-box .lis-timetable li {
		padding-left: 14px;
		padding-right: 14px;
	}
	/* ttl */
	#gnav-main .item-box .lis-timetable .row-ttl {
		color: #fff;
		background: #5e66aa;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}
	#gnav-main .item-box .lis-timetable .item-ttl {
		width: 90px;
		display: inline-block;
		padding-right: 14px;
		}
		#gnav-main .item-box .lis-timetable .row-item .item-ttl {
			color: #5e66aa;
			text-align: right;
		}

@media screen and (max-width:959px){/*スマホ・タブレット用指定*/

	#gnav-main .item-box .lis-timetable .item-ttl {
		width: 70px;
	}
	#gnav-main .item-box .lis-timetable .row-item .item-ttl {
		width: 80px;
	}
	#gnav-main .item-box .lis-timetable .item-ttl .to {
		display: inline-block;
		padding: 0;
	}
}
@media print, screen and (min-width:960px){/*PC用指定*/

	#gnav-main .item-box .lis-timetable .item-ttl {
		width: 90px;
		}
	#gnav-main .item-box .lis-timetable .item-ttl .to {
		display: inline-block;
		padding: 0 4px;
	}
}

/* item */
#gnav-main .item-box .lis-timetable .row-item {
	background: #fff;
	}
	#gnav-main .item-box .lis-timetable .row-am p {
		border-bottom: 1px solid #c4c7ea;
	}
	#gnav-main .item-box .lis-timetable .row-pm {
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
	}

	#gnav-main .item-box .lis-timetable .item {
		display: inline-block;
		position: relative;
		}
		/* ※※※ */
		#gnav-main .item-box .lis-timetable .item .notes{
			position: absolute;
			top:6px;
			right: 0px;
			font-size: 8px;
		}
		
@media screen and (max-width:959px){/*スマホ・タブレット用指定*/

	#gnav-main .item-box .lis-timetable .item {
		padding: 6px;
	}
}
@media print, screen and (min-width:960px){/*PC用指定*/

	#gnav-main .item-box .lis-timetable .item {
		padding: 10px;
		width: 12px;
	}
}

/* text */
#gnav-main .txt-s1 {
	margin-bottom: 30px;
}
@media screen and (max-width:959px){/*スマホ・タブレット用指定*/

	#gnav-main .txt-s1 {
		font-size: 14px;
	}
}

/* リンクリスト */
#gnav-main .lis-nav {
	margin-bottom: 20px;
}

#gnav-main .lis-nav li.link-box{
	margin-bottom: 20px;
	margin-right: 20px;
	display: inline-block;
	}
	#gnav-main .lis-nav li.link-box a{
		background: #ffffff;
		color: #5e66aa;
		border-radius: 24px;
		display: inline-block;
	}

#gnav-main .lis-nav li.link-box span {
	display: inline-block;
	width: 40px;
	}
	#gnav-main .lis-nav li.link-box img {
	}
	#gnav-main .lis-nav li.item-01 img { width: 26px; height: auto; }
	#gnav-main .lis-nav li.item-02 img { width: 20px; height: auto; }
	#gnav-main .lis-nav li.item-03 img { width: 22px; height: auto; }

@media screen and (max-width:959px){/*スマホ・タブレット用指定*/

	#gnav-main .lis-nav {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
	}
	#gnav-main .lis-nav li.link-box a{
		padding: 8px 16px;
		width: 110px;
		}
}
@media print, screen and (min-width:960px){/*PC用指定*/

	#gnav-main .lis-nav li.link-box a{
		padding: 8px 20px;
		width: 120px;
		}
}
/* sns */
#gnav-main .sns-box {
	display: inline-block;
	width: 160px;
	text-align: center;
}
#gnav-main .sns-box a {
	display: inline-block;
	margin: 0 8px;
	}
	#gnav-main .sns-box a.fb img{
		width: 30px;
		height: auto;
	}
	#gnav-main .sns-box a.line img{
		width: 32px;
		height: auto;
	}


/*------------------------------------------------------------------------
フッター
--------------------------------------------------------------------------*/
footer{
	background:#ffffff;
	position: relative;
	z-index: 102;
}

/*--- logo ------------------------------*/
@media screen and (max-width:959px){/*スマホ・タブレット用指定*/
		
	#footer-box01 {
		margin-bottom: 50px;
	}
	#footer-box01 .logo{
		width: 94%;
		max-width: 420px;
		height: auto;
	}
}
@media print, screen and (min-width:960px){/*PC用指定*/

	#footer-box01 {
		margin-bottom: 24px;
	}
	#footer-box01 .logo{
		height: 88px;
		width: auto;
		max-width: 80%;
	}
}

/*--- address ------------------------------*/
@media screen and (max-width:959px){/*スマホ・タブレット用指定*/
	
	#footer-box02 {
		margin-bottom: 24px;
	}
}
@media print, screen and (min-width:960px){/*PC用指定*/

	#footer-box02 {
		margin-bottom: 24px;
	}
}

/*--- sns ------------------------------*/
@media screen and (max-width:959px){/*スマホ・タブレット用指定*/
	
	#footer-box03 {
		margin-bottom: 24px;
	}
}
@media print, screen and (min-width:960px){/*PC用指定*/

	#footer-box03 {
		margin-bottom: 50px;
	}
}

#footer-box03 a {
	display: inline-block;
	color: #5e66aa;
	border: 2px solid #5e66aa;
	border-radius: 32px;
	margin: 0 8px;
}
@media screen and (max-width:959px){/*スマホ・タブレット用指定*/
	
	#footer-box03 a{
		min-width: 100px;
		padding: 4px;
		font-size: clamp(14px, 1.6vw, 16px);
		font-weight: bold;
	}
}
@media print, screen and (min-width:960px){/*PC用指定*/

	#footer-box03 a{
		min-width: 140px;
		padding: 8px;
		font-size: clamp(16px, 1.6vw, 16px);
		font-weight: bold;
	}
}

/*--- copyright ------------------------------*/
#copyright{
	color: #5e66ad;
	font-size: clamp(14px, 1.4vw, 14px);
	text-align: center;
}
