:root{
	--header-copy: 20px;
	--header-height-sp: 60px;
	--header-height-sp-sc: 50px;
	--header-height-pc: 80px;
	--header-height-pc-sc: 56px;
	--gNav-main-height-sp: 56px;
	--gNav-main-height-pc: 54px;
	--gNav-main-2-height-pc: 0;
	--gNav-sub-height-sp: 48px;
	--gNav-sub-height-pc: 32px;
	--iconMenu-size: 70%;
	--page-title-height-sp:40vw;
	--page-title-height-pc:30vw;
}

#wrapper{
	overflow-x:clip
}

.anchor{
	position: relative;
	margin-top:-50px;
	padding-top:50px;
	display:block;
	visibility:hidden;
}

.others #top_clinic_info{
	display:none;
}

/********** Header **********/
#header{
	background:var(--color-w);
	border-bottom:1px solid #ddd;
	transition:all .4s ease-in-out;
	z-index:120;
	#headerCopy{
		height:var(--header-copy);
		line-height:var(--header-copy);
	}
	#headerMain{
		height:var(--header-height-sp);
		#logoArea{
			height:78%;
			#logoImg{
				transition:all .4s ease-in-out;
				max-width:256px;
			}
		}
	}
}


/********** Page Title **********/
#pageTitleWrap{
	height:var(--page-title-height-sp);
	max-height:360px;
}
#pageTitle,
#pageTitleSub{
	z-index:2
}

/********** Navigation **********/
/** #navToggle **/
#navToggle{
	z-index:50;
	#iconMenu{
		vertical-align:middle;
		width:var(--iconMenu-size);
		height:var(--iconMenu-size);
		.line{
			left:0;
			width:100%;
			height:2px;
			opacity:1;
			will-change:transform;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden
		}
		.line-1{top:4px;}
		.line-2{top:calc(50% - 1px);}
		.line-3{bottom:3px;}

	}
}
/** #gNavWrap **/
#gNavWrap{
	padding:.4em;
	top:var(--header-height-sp);
	right:0;
	z-index:40;
	width:100%;
	height:calc(100% - var(--header-height-sp));
	overflow-y:auto;
	visibility:hidden;
	transition:all .4s ease-in-out,padding .4s ease-in-out;
	transform:translateX(100%);
	will-change:transform;
	-webkit-overflow-scrolling:touch;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	#glovalNav{
		border:1px solid rgb(244,231,208);
		border-bottom:none;
		padding:0;
		.menu-item-has-children.isActive::after{
			content:"\f0d8";
		}
		.menu-item{
			display:block;
			&>a{
				display:flex;
				align-items:center;
				padding:0 .8em;
				border-bottom:1px solid rgb(244,231,208);
			}
			.sub-menu{
				padding:0;
				>.menu-item>a,
				>.menu-item-has-children::after{
					background:var(--color-w);
					height:0;
					line-height:0;
					opacity:0;
				}
				.menu-item{
					&a{
						border-bottom:0 solid var(--bg-alpha-0);
					}
				}
				>.menu-item{
					&>a{
						padding:0 0 0 1.6em;
					}
				}
				.menu-item-has-children a{
					padding-right:calc(var(--gNav-sub-height-sp) + .2em);
				}
				.menu-item-has-children::after{
					width:var(--gNav-sub-height-sp);
					border-left:1px solid var(--color-02);
					font-size:1.2em;
				}
			}
		}
		>.menu-item{	/** 第1階層のみ **/
			&>a{
				height:var(--gNav-main-height-sp);
				line-height:1;
			}
			&>a::before{
				content:"\f0da";
				padding-right:.4em;
			}
		}
		>.menu-item-has-children{
			&>a{
				padding-right:var(--gNav-main-height-sp);
			}
		}
		.menu-item-has-children::after{
			content:"\f0d7";
			position:absolute;
			z-index:2;
			top:0;
			right:0;
			cursor:pointer;
		}
		>.menu-item-has-children::after{
			width:var(--gNav-main-height-sp);
			height:calc(var(--gNav-main-height-sp) - 1px);
			line-height:1;
			border-left:1px solid var(--color-w);
			font-size:1.2em
		}
	}
}
#gNavWrap.isVisible{
	visibility:visible;
	transform:translateX(0);
}
.menu_span{
	font-size:.8em;
}
.menu_span::before{
	content:"-";
	margin:0 .4em;
}
.headerType-h2 #gNavWrap{
	top:calc(var(--header-height-sp) + var(--header-copy));
}
#slide_topics_wrap{
	width:100%;
}
.slide_topics_title_right a{
	border-radius:1.2em;
}
#slide_topics_arrow{
	font-size:1.4em;
	width:2.4em;
}
#slide_topics_inner{
	padding:.4em 3em .4em .4em;
	border-radius:2em;
}
.slide_topics_title_left{
	border-radius:2em;
}
@media all and (min-width:768px),print{
	#gNavWrap{
		max-width:50%
	}
}
@media all and (min-width:992px),print{

	.anchor{
		margin-top:-110px;
		padding-top:110px;
	}
	.others #top_clinic_info{
		display:block;
	}

	#slide_topics_wrap{
		width:440px;
		border-radius:1em;
		overflow:hidden;
		border:1px solid #fff;
	}
	#slide_topics_arrow{
		width:2.4em;
	}
	#slide_topics_inner{
		padding:.8em 3em .8em .8em;
		border-radius:0;
	}

	.slide_topics_title_left{
		border-radius:2em;
	}

/********** Header **********/
	#header{
		#headerMain{
			height:var(--header-height-pc);
		}
	}
	#home #header{
		position:fixed!important;
		background:none;
		border-bottom:1px solid rgba(255,255,255,0);
	}
	#home.scroll #header{
		background:var(--color-w);
		border-bottom:1px solid #ddd;
	}
	.stickyPos3 #header{
		background:none;
	}
	#sub-column #logoImg_2{
		transition:all .4s ease-in-out;
		width:100%;
		height:auto;
	}

/********** Page Title **********/
	#pageTitleWrap{
		height:var(--page-title-height-pc);
	}
/** #gNavWrap **/
	#gNavWrap{
		padding:0;
		top:var(--header-height-pc);
		transition:all .4s ease-in-out;
		max-width:360px;
		border:none;
		border-left:1px solid var(--color-01);
	}
	#gNavWrap.pos-lg-sticky,
	#gNavWrap.pos-lg-sticky.isVisible,
	#gNavWrap.pos-lg-sta,
	#gNavWrap.pos-lg-sta.isVisible{
		visibility:visible;
		transform:translateX(0);
		overflow-y:visible;
		max-width:100%;
		border:none;
		#glovalNav{
			border:none;
			>.menu-item{
				&>a{
					-ms-flex-direction:column!important;
					flex-direction:column!important;
					-ms-flex-pack:center!important;
					justify-content:center!important;
					border-bottom:none;
					text-align:center
				}
				&>a::before{
					content:none;
					padding:0;
				}
				>.sub-menu{
					position:absolute!important;
					left:0!important;
					width:200px!important;
					min-width:calc(100% + 1px);
				}
			}
			.menu-item-has-children>a{
					padding-right:2em;
			}
			.menu-item-has-children::after{
				border:none;
				width:2em;
				line-height:1;
				font-size:1em;
			}
		}
	}
	#gNavWrap.pos-lg-sticky,
	#gNavWrap.pos-lg-sticky.isVisible{
		top:var(--header-height-pc);
		#glovalNav{
			>.menu-item>a,
			>.menu-item-has-children::after{
				height:var(--gNav-main-height-pc);
			}
			>.menu-item{
				>a{
					border-left:1px solid var(--color-w);
				}
			}
		}
	}
	#wrapper.container #gNavWrap.pos-lg-sticky,
	#wrapper.container #gNavWrap.pos-lg-sticky.isVisible,
	#wrapper.container #gNavWrap.pos-lg-sta,
	#wrapper.container #gNavWrap.pos-lg-sta.isVisible{
		#glovalNav{
			>.menu-item:first-child{
				> &a{
					border-left:none;
				}
			}
		}
	}
	#gNavWrap.pos-lg-sta,
	#gNavWrap.pos-lg-sta.isVisible,
	#gNavWrap.pos-lg-sta #glovalNav>.menu-item,
	#gNavWrap.pos-lg-sta #glovalNav>.menu-item>a,
	#gNavWrap.pos-lg-sta #glovalNav>.menu-item-has-children::after{
		width:auto!important;
		height:32px
	}
	#wrapper #gNavWrap #glovalNav li#menu-item-21{
		width:50%!important;
	}
	.menu_span{
		margin:.2em 0 0;
	}
	.menu_span::before{
		content:"-";
		margin:0 .1em 0 0;
	}
	.menu_span::after{
		content:"-";
		margin:0 0 0 .1em;
	}

	.stickyPos3 #gNavWrap,
	.stickyPos3 #gNavWrap.isVisible{
		position:static!important
	}
	#gNavWrap.pos-lg-sta #glovalNav>.menu-item-has-children::after{
		padding-right:.8em;
	}
	.stickyPos3 #gNavWrap{
		visibility:visible;
		transform:translateX(0);
		overflow-y:visible;
		max-width:100%;
		border:none;
		border-top:1px solid var(--color-02);
	}
	.headerType-h2 #gNavWrap{
		top:calc(var(--header-height-pc) + var(--header-copy));
	}
}
@media all and (min-width:1200px),print{
	#slide_topics_wrap{
		width:576px;
	}
	#gNavWrap.pos-lg-sticky #glovalNav{
		border-right:1px solid #fff
	}
	#wrapper.container #gNavWrap.pos-lg-sticky #glovalNav{
		border-right:none
	}

}

@media all and (min-width:1440px),print{
	#gNavWrap #glovalNav{
		border-right:1px solid #fff!important
	}
	.scroll #gNavWrap.pos-lg-sticky,
	.scroll #gNavWrap.pos-lg-sticky.isVisible{
		#glovalNav{
			>.menu-item>a,
			>.menu-item-has-children::after{
				height:44px;
			}
		}
	}

}

