@charset "utf-8";
/* CSS Document */
body {
	min-width: 320px;
}
.pc .sp {
	display: none;
}
.pc .pc {
	display: inherit;
}

@media(max-width:768px) {
	.sp .sp {
		display: inherit;
	}
	.sp .pc {
		display: none;
	}
	
	body.hidden {
		overflow: hidden;
	}
	.pagetop {
		right: 4%;
		z-index: 500;
	}
	/* ---------------------------------
		header
	--------------------------------- */
	#headerArea {
		border-bottom: none;
	}
	#headerArea #header {
		width: 100%;
		border-bottom: #97c730 2px solid;
	}
	#headerArea #headerLeft {
		width: auto;
		margin-left: 4%;
	}
	#headerArea #headerRight {
		width: auto;
		margin-right: 55px;
	}
	#headerArea #logo02 {
		margin-right: 0;
	}
	#topnavWrap {
		height: 74px;
		position: fixed;
		top: 47px;
		left: -100%;
		z-index: 999;
		transition: left 0.3s ease;
	}
	#topnavWrap.on {
		left: 0;
		transition: left 0.3s ease;
	}
	#headerArea #top_two {
		width: 100%;
	}
	#headerArea #top_two .spWrap {
		margin: 5px auto 0;
		float: none;
	}
	#headerArea #top_two #topnav {
		float: none;
		margin: 10px auto 5px;
	}
	#headerArea #top_two #topnav ul {
		display: flex;
		justify-content: center;
	}
	#gnaviArea {
		height: auto;
		min-height: 100%;
		background: #fff;
		position: fixed;
		top: 121px;
		left: -100%;
		z-index: 999;
		transition: left 0.3s ease;
	}
	#gnaviArea::after {
		content: '';
		display: none;
		width: calc(100% + 46px);
		height: 100%;
		background: rgba(255,255,255,0.6);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 990;
	}
	#gnaviArea.on {
		left: 0;
		transition: 0.3s ease;
	}
	#gnaviArea.on::after {
		display: block;
		transition-duration: 0.5s ease;
	}
	#gnaviArea #gnaviAreaInner {
		width: 100%;
		position: relative;
	}
	#gnaviArea.on #gnaviAreaInner {
		height: calc(100vh - (121px + 46px));
		overflow-x: hidden;
		overflow-y: scroll;
	}
	#gnaviArea #gnaviAreaInner ul {
	}
	#gnaviArea #gnaviAreaInner > ul > li {
		width: 100%;
		height: auto;
		margin-right: 0;
		border-bottom: 1px solid #eee;
	}
	.gnavBg01,
	.gnavBg02,
	.gnavBg03,
	.gnavBg04 {
		width:auto;
		height: auto;
		background: none;
		padding: 12px 20px 12px 4%;
		position: relative;
		z-index: 0;
	}
	.gnavBg01:hover,
	.gnavBg04:hover {
		cursor: default;
	}
	.gnavBg02::before,
	.gnavBg03::before {
		content: '';
		display: block;
		width: 0;
		height: 100%;
		background: #f1fbff;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		transition: width 0.3s ease;
	}
	/*
	.gnavBg02:hover::before,
	.gnavBg03:hover::before {
		width: 100%;
		transition: 0.3s ease;
	}
	*/
	/*
	.gnavBg02 span,
	.gnavBg03 span {
		color: #29b7ec;
	}
	*/
	.gnavBg01 span,
	.gnavBg02 span,
	.gnavBg03 span,
	.gnavBg04 span {
		display: block;
		font-size: 14px;
	}
	#gnaviArea .gnavBg01:hover,
	#gnaviArea .gnavBg02:hover,
	#gnaviArea .gnavBg03:hover,
	#gnaviArea .gnavBg04:hover {
		background: none;
		text-decoration: none;
	}
	/*
	#gnaviArea .gnavBg02:hover,
	#gnaviArea .gnavBg03:hover {
		color: #29b7ec;
	}
	*/
	.headSubToggle {
		display: block;
		width: 46px;
		height: 46px;
		background: #fff;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10;
		cursor: pointer;
	}
	.headSubToggle:hover {
		background: #e1f5fd;
	}
	.headSubToggle.active {
		background: #e1f5fd;
	}
	.headSubToggle::before,
	.headSubToggle::after {
		content: '';
		display: block;
		background: #29b7ec;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		transform: rotate(0);
	}
	.headSubToggle::before {
		width: 12px;
		height: 2px;
		opacity: 1;
		transition: opacity 0.3s ease;
	}
	.headSubToggle::after {
		width: 2px;
		height: 12px;
		border: none;
		transform: rotate(0);
		transition:  transform 0.3s ease;
	}
	.headSubToggle.active::before {
		opacity: 0;
		transition: 0.3s ease;
	}
	.headSubToggle.active::after {
		transform: rotate(90deg);
		transition: 0.3s ease;
	}
	#gnaviArea #gnaviAreaInner > ul > li ul.sllideDown {
		display: none;
		width: 100%;
		height: auto!important;
		background: #e1f5fd;
		position: relative;
		top: 0;
	}
	#gnaviArea #gnaviAreaInner > ul > li ul.sllideDown.on {
		display: block;
	}
	#gnaviArea #gnaviAreaInner > ul > li ul.sllideDown > li {
		padding: 0;
		border: none;
	}
	#gnaviArea #gnaviAreaInner > ul > li ul.sllideDown > li + li {
		border-top: 1px solid #c7e7f4;
	}
	#gnaviArea #gnaviAreaInner > ul > li ul.sllideDown > li:hover {
		background: none;
	}
	#gnaviArea #gnaviAreaInner > ul > li ul.sllideDown > li a {
		display: block;
		padding: 12px 20px 12px 4%;
		background: #e1f5fd;
		position: relative;
		z-index: 0;
	}
	#gnaviArea #gnaviAreaInner > ul > li ul.sllideDown > li a::before {
		content: '';
		display: block;
		width: 0;
		height: 100%;
		background: #f1fbff;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		transition: width 0.3s ease;
	}
	#gnaviArea #gnaviAreaInner > ul > li ul.sllideDown > li a::after {
		content: '';
		display: block;
		box-sizing: border-box;
		width: 7px;
		height: 7px;
		border-top: 2px solid #29b7ec;
		border-right: 2px solid #29b7ec;
		transform: rotate(45deg);
		position: absolute;
		top: 0;
		right: 21px;
		bottom: 0;
		margin: auto;
	}
	#gnaviArea #gnaviAreaInner > ul > li ul.sllideDown > li a:hover {
		text-decoration: none;
		/* color: #29b7ec; */
	}
	/*
	#gnaviArea #gnaviAreaInner > ul > li ul.sllideDown > li a:hover::before {
		width: 100%;
		transition: 0.3s ease;
	}
	*/
	
	.headToggle {
		display: block;
		width: 45px;
		height: 45px;
		background: rgba(255,255,255,.8);
		position: fixed;
		top: 0;
		right: 00;
		z-index: 1000;
	}
	.headToggle span {
		display: block;
		width: 20px;
		height: 2px;
		background: #29b7ec;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
	}
	.headToggle span:nth-child(1) {
		top: 15px;
		transform: rotate(0);
		transition: transform 0.3s ease;
	}
	.headToggle span:nth-child(2) {
		top: 22px;
		opacity: 1;
		transition: opacity 0.3s ease;
	}
	.headToggle span:nth-child(3) {
		bottom: 14px;
		transform: rotate(0);
		transition: transform 0.3s ease;
	}
	.headToggle.active span:nth-child(1) {
		top: 21px;
		transform: rotate(45deg);
		transition: 0.3s ease;
	}
	.headToggle.active span:nth-child(2) {
		opacity: 0;
		transition: 0.3s ease;
	}
	.headToggle.active span:nth-child(3) {
		bottom: 22px;
		transform: rotate(-45deg);
		transition: 0.3s ease;
	}
	
	
	/* ---------------------------------
		footer
	--------------------------------- */
	#footerInner {
		width: 92%;
		padding: 20px 0;
	}
	#footerInner a:hover {
		text-decoration: none;
		/* color: #29b7ec; */
	}
	#footerInner .footercel {
		float: none;
		width: auto!important;
		background: rgba(255,255,255,.8);
		margin-right: 0!important;
	}
	.footcol {
		display: none;
		margin-bottom: 0;
		background: #e1f5fd;
	}
	.footcol.open {
		display: block;
	}
	#footerInner .footercel#footercel01 > .footTi {
		border-top: none;
	}
	.footTi {
		margin-bottom: 0;
		padding: 0;
		border-bottom: none;
		border-top: 1px solid #c9e1eb;
		font-size: inherit;
		position: relative;
	}
	.footTi a,
	.footTi span {
		display: block;
		padding: 12px 0 12px 12px;
	}
	.footTi a {
		background: none;
		position: relative;
		color: #29b7ec;
		z-index: 0;
	}
	.footTi a::before {
		content: '';
		display: block;
		width: 0;
		height: 100%;
		background: #f1fbff;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		transition: width 0.3s ease;
	}
	/*
	.footTi a:hover::before {
		width: calc(100% - 46px);
		transition: 0.3s ease;
	}
	*/
	.footTi br {
		display: none;
	}
	.footBlock01 {
		display: block;
		width: auto;
	}
	#footercel01 .footBlock01 + .footBlock01 {
		border-top: 1px solid #c7e7f4;
	}
	.footnav02 + .footnav02 {
		border-top: 1px solid #c7e7f4;
	}
	.footnav02 {
		margin-bottom: 0;
		padding-left: 0;
		/* border-top: 1px solid #e0f0f6; */
		background: none;
		font-weight: normal;
		position: relative;
	}
	.footnav03 {
		margin-top: 0;
		padding-left: 0;
		border-top: 1px solid #c7e7f4;
		background: none;
		font-weight: normal;
		font-size: inherit;
	}
	.footnav01 {
		display: none;
		padding-left: 0;
		background: #c7e7f4;
	}
	.footnav01.open {
		display: block;
	}
	.footcol > .footnav02:first-child,
	.footcol > .footBlock01:first-child >.footnav02:first-child {
		border-top: none;
	}
	.footnav01 > li {
		background: none;
		margin-bottom: 0;
		padding-left: 0;
	}
	.footnav01 > li + li {
		border-top: 1px solid #b6dded;
	}
	.footnav01 > li > a::after {
		border-color: #29b7ec;
	}
	.footcol a {
		display: block;
		padding: 12px 20px 12px 12px;
		position: relative;
		z-index: 0;
	}
	.footcol a::after {
		content: '';
		display: block;
		box-sizing: border-box;
		width: 7px;
		height: 7px;
		border-top: 2px solid #29b7ec;
		border-right: 2px solid #29b7ec;
		transform: rotate(45deg);
		position: absolute;
		top: 0;
		right: 20px;
		bottom: 0;
		margin: auto;
	}
	.footcol a[target="_blank"]::after,
	.footcol a[onclick]::after {
		display: none;
	}
	.footcol a[target="_blank"] img,
	.footcol a[onclick] img {
		position: absolute;
		top: 0;
		right: 15px;
		bottom: 0;
		margin: auto;
	}
	#footerInner .ftToggle {
		width: 46px;
		height: 100%;
		padding: 0;
		position: absolute;
		top: 0;
		right: 0;
	}
	#footerInner .footTi > .ftToggle {
	}
	#footerInner .ftToggle::before,
	#footerInner .ftToggle::after {
		content: '';
		display: block;
		background: #29b7ec;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		transform: rotate(0);
	}
	#footerInner .ftToggle::before {
		width: 12px;
		height: 2px;
		opacity: 1;
		transition: opacity 0.3s ease;
	}
	#footerInner .ftToggle::after {
		width: 2px;
		height: 12px;
		border: none;
		transform: rotate(0);
		transition:  transform 0.3s ease;
	}
	#footerInner .footnav02 .ftToggle:hover,
	#footerInner .footnav02 .ftToggle.active {
		background: #c7e7f4;
	}
	#footerInner .footnav02 .ftToggle.active::after {
		background: #29b7ec;
	}
	#footerInner .ftToggle:hover,
	#footerInner .ftToggle.active {
		background: #e1f5fd;
	}
	#footerInner .ftToggle.active::before {
		opacity: 0;
		transition: 0.3s ease;
	}
	#footerInner .ftToggle.active::after {
		transform: rotate(90deg);
		transition: 0.3s ease;
	}
	.footnav02 .ftToggle {
		background: #e1f5fd;
	}
	.footcol .footnav01 a::before,
	.footcol .footnav02 a::before,
	.footcol .footnav03 a::before {
		content: '';
		display: block;
		width: 0;
		height: 100%;
		background: #f1fbff;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		transition: width 0.3s ease;
	}
	.footcol .footnav01 a::before {
		background: #d1ecf6;
	}
	/*
	.footcol .footnav01 a:hover::before,
	.footcol .footnav02 a:hover::before,
	.footcol .footnav03 a:hover::before {
		width: 100%;
		transition: 0.3s ease;
	}
	*/
	
	/* ---------------------------------
		localArea
	--------------------------------- */
	#localAreaInner {
		width: 92%;
		padding-bottom: calc(30px + 46px);
	}
	#localAreaInner #localnav,
	#localAreaInner #copy {
		float: none;
		width: auto;
	}
	#localAreaInner #copy {
		text-align: center;
	}
	#localnav ul li {
		margin-right: 20px;
		margin-bottom: 6px;
		font-size: 12px;
	}
	#contBtn {
		display: block;
		box-sizing: border-box;
		width: 90%;
		height: 44px;
		background: #29b7ec;
		color: #fff;
		text-align: center;
		line-height: 46px;
		position: fixed;
		z-index: 9999;
		bottom: 0;
	}
	#contBtn span {
		padding-left: 32px;
		background: url(/medichem/images/ico_mail.png) center /20px auto no-repeat;
	}
	/*
	#contBtn:hover {
		background: #fff;
		color: #29b7ec;
		border: 1px solid #29b7ec;
		text-decoration: none;
		transition: 0.3s ease;
	}
	#contBtn:hover span {
		background-image: url(/medichem/images/ico_mail_blue.png);
		transition: 0.3s ease;
	}
	*/
	
	/* ---------------------------------
		footer
	--------------------------------- */
	.pagetop {
		right: 0;
		bottom: 0;
		width: 10%;
		z-index: 9999;
	}
	.pagetop > a {
		display: block;
		width: 100%;
		height: 44px;
		background: rgba(0,0,0,.88);
		text-align: center;
	}
	.pagetop > a > img {
		display: none;
	}
	.pagetop > a::after {
		content: '';
		display: block;
		width: 10px;
		height: 10px;
		box-sizing: border-box;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		transform: rotate(-45deg);
		position: absolute;
		top: 21px;
		right: 0;
		left: 0;
		margin: auto;
	}
}

@media(max-width:620px) {
	#headerArea #headerRight {
		display: none;
	}
}

@media(max-width:768px) {
	/* ---------------------------------
		header
	--------------------------------- */
	#headerArea {
		position: fixed;
		width: 100%;
		top: 0!important;
	}
	#headerArea #header {
	}
	#headerArea #headerLeft {
		float: none;
	}
	#headerArea #headerRight {
		display: none;
		float: none;
		margin-right: 0;
	}
	#headerArea #logo01 {
		margin-top: 0;
		padding-top: 5px;
	}
	#headerArea #logo01 a img {
		margin-top: 2px;
		width: 142px;
		height: auto;
	}
	#headerArea #logo02 {
		height: 20px;
		margin-top: 0;
		text-align: center;
	}
	#headerArea #logo02 img {
		width: 280px;
		height: auto;
	}
	#headerArea #top_two .spWrap {
		width: auto;
		margin-right: 0;
		text-align: center;
		float: none;
	}
	.siteSearch .tbox {
		/* height: 36px; */
	}
	#headerArea #top_two #topnav ul {
		text-align: center;
	}
	#headerArea #top_two #topnav ul li {
		display: inline-block;
		float: none;
	}
	
	/* ---------------------------------
		localArea
	--------------------------------- */
	#contBtn {
		width: calc((100% - 50px) / 2);
		background: rgba(41,183,236,.86);
	}
	#contBtn span {
		display: inline-block;
		width: 22px;
		height: 20px;
		margin-top: 12px;
		background-size: contain;
		background-position: center;
		padding-left: 0;
		font-size: 0;
	}
	
	/* ---------------------------------
		footer
	--------------------------------- */
	#footerInner {
		width: 100%;
		padding: 0;
	}
	.pagetop {
		width: 50px;
	}
}

@media print {
	#headerArea {
		position: relative!important;
	}
	#topnavWrap {
		display: block!important;
	}
	.mv {
		margin-top: 0!important;
	}
}