@charset "utf-8";

body {
	margin: 0px;
	padding: 0px;
	background-image: url('../img/bg.png'); 
	background-repeat: repeat;
}

div#spMode {
	display: none;
}
@media screen and (max-width: 750px) {
	body {
		background-image: url('../img/sp/bg.png');
	}
	div#pcMode {
		display: none;
	}
	div#spMode {
		display: block;
	}
}



/* ----- ■■■PC■■■ ----- */

/* ----- グローバルメニュー ----- */
div#globalMenu {
	position: fixed;
	width: 100%;
	min-width: 980px;
	height: 60px;
	background-color: #008eff;
	z-index: 100;
	text-align: center;
	box-shadow: 0px 0px 15px rgba(0,112,201,1.0);
}
	div#globalMenu ul {
		display: flex;
		justify-content: center;
		list-style-type: none;
		margin-top: 15px;
		padding: 0px;
	}
	div#globalMenu ul li {
		display: block;
		padding: 0px 20px 0px 20px;
	}
/* ----- /グローバルメニュー ----- */





/* ----- グローバルメニューのスペーサー ----- */
div#spacer {
	height: 60px;
}
/* ----- /グローバルメニューのスペーサー ----- */





/* ----- セクションごとのタイトル ----- */
div.title_bg {
	position: relative;
	height: 100px;
	background-image: url("../img/title_bg.png");
	background-repeat: repeat-x;
	min-width: 980px;
}
	div.title_bg img {
		position: absolute;
		display: block;
		top: 27px;
		left: 0px;
		right: 0px;
		margin: auto;
	}
/* ----- /セクションごとのタイトル ----- */





/* ----- セクション本文ラッパー ----- */
div.contents_section {
	position: relative;
	width: 100%;
	min-width: 980px;
	background-image: url("../img/section_bg.png");
	background-repeat: repeat-x;
	background-position: top left;
}
	div.contents_wrapper {
		position: relative;
		width: 980px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
/* ----- /セクション本文ラッパー ----- */





/* ----- キービジュアル ----- */
div#keyVisual {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	min-width: 980px;
	max-width: 1280px;
	width: 100%;
	min-height: 551px;
	max-height: 720px;
	height: 55vw;
	background-image: url('../img/keyvisual.png');
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}
/* ----- /キービジュアル ----- */





/* ----- 作品紹介 ----- */
div#product_title {
	margin-top: 0px;
}
div#product_jump {
	position: absolute;
	margin-top: -160px;
}
div#slide {
	position: relative;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 980px;
	height: 710px;
}
	/* 本文 */
	div#slide_detail {
		position: absolute;
		width: 900px;
		height: 505px;
		margin-left: auto;
		margin-right: auto;
		top: 80px;
		left: 0px;
		right: 0px;
		box-shadow: 0px 0px 5px rgba(0,112,201,1.0);
	}
	div#slide_detail ul {
		margin: 0px;
		padding: 0px;
	}
	div#slide_detail ul li {
		margin: 0px;
		padding: 0px;
		list-style-type: none;
	}
	/* 左右ボタン */
	div#slide .prev {
		position: absolute;
		left: 0px;
		top: 330px;
		width: 51px;
		height: 51px;
		background-image: url('../img/slide_left.png');
		z-index: 100;
	}
	div#slide .next {
		position: absolute;
		right: 0px;
		top: 330px;
		width: 51px;
		height: 51px;
		background-image: url('../img/slide_right.png');
		z-index: 100;
	}
	/* bxSliderで自動設定されるもので、prev、nextの文字に当たる、文字を消す場合はブロック要素にしてサイズ指定が必要 */
	.bx-prev {
		display: block;
		width: 100%;
		height: 100%;
		z-index: 100;
	}
	.bx-next {
		display: block;
		width: 100%;
		height: 100%;
		z-index: 100;
	}
	/* サムネイル */
	div#slide_thm{
		position: absolute;
		top: 590px;
	}
		div#slide_thm ul {
			display: flex;
			width: 900px;
			justify-content: space-between;
			list-style-type: none;
		}
		div#slide_thm li {
		}
			div#slide_thm li a.active img{
				outline: 4px solid #008eff;
				outline-offset: -4px;
			}
			div#slide_thm li a:not(.active) img {
				filter: grayscale(100%);
			}
/* ----- /作品紹介 ----- */





/* ----- キャラクター紹介 ----- */
div#character_title {
	margin-top: 100px;
}
div#character_jump {
	position: absolute;
	margin-top: -160px;
}
div#character_icon {
	position: relative;
	padding-top: 80px;
}
	div#character_icon img {
		cursor: pointer;
	}
div#character_detail {
	position: relative;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	width: 725px;
	height: 600px;
}
/* ----- /キャラクター紹介 ----- */





/* ----- 商品紹介 ----- */
div#goods_title {
	margin-top: 100px;
}
div#goods_jump {
	position: absolute;
	margin-top: -160px;
}
div#goods_wrapper {
	padding-top: 80px;
}
	div#goods_basic_data {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		width: 600px;
		padding: 20px;
		font-size: 0.8em;
		text-align: left;
		border: 1px solid #008eff;
		background-color: #ffffff;
	}
	img#goods_text1 {
		margin-top: 40px;
	}
	div#goods_menu {
		position: relative;
		width: 980px;
		height: 552px;
		margin-top: 20px;
		background-image: url('../img/goods_menu_bg.png');
		outline: 4px solid #008eff;
		outline-offset: -4px;
	}
		div#goods_normal_menu {
			position: absolute;
			top: 288px;
			left: 0px;
			width: 344px;
			height: 264px;
			cursor: pointer;
		}
		div#goods_patient_menu {
			position: absolute;
			top: 0px;
			left: 344px;
			width: 635px;
			height: 256px;
			cursor: pointer;
		}
		div#goods_doctor_menu {
			position: absolute;
			top: 256px;
			left: 344px;
			width: 635px;
			height: 296px;
			cursor: pointer;
		}
	div#goods_content_jump {
		position: absolute;
		margin-top: -60px;
	}
	div#goods_content {
		position: relative;
		margin-top: 40px;
		padding: 20px;
		width: 940px;
		min-height: 400px;
		background-color: #aadaff;
		border-radius: 5px;
	}
		div#goods_default_content {
			position: relative;
			padding-top: 40px;
		}
			div.goods_special_data {
				position: relative;
				margin-left: auto;
				margin-right: auto;
				width: 860px;
				padding: 20px;
				font-size: 0.8em;
				text-align: left;
				border: 1px solid #008eff;
				background-color: #ffffff;
			}
			div.goods_special_data h2 {
				margin: 0px;
				color: #008eff;
				font-size: 1.4em;
			}
/* ----- /商品紹介 ----- */





/* ----- フッター ----- */
div#footer {
	position: relative;
	min-width: 980px;
	height: 60px;
	background-color: #008eff;
	text-align: center;
	margin-top: 100px;
	padding-top: 40px;
}
/* ----- /フッター ----- */




/* ----- ■■■PC■■■ ----- */










/* ----- ■■■SP■■■ ----- */

/* ----- グローバルメニュー ----- */
div#globalMenu_sp {
	position: fixed;
	width: 750px;
	height: 60px;
	background-color: #008eff;
	z-index: 100;
	text-align: center;
	box-shadow: 0px 0px 15px rgba(0,112,201,1.0);
}
	div#globalMenu_sp ul {
		display: flex;
		justify-content: center;
		list-style-type: none;
		margin-top: 20px;
		padding: 0px;
	}
	div#globalMenu_sp ul li {
		display: block;
		padding: 0px 10px 0px 10px;
	}
/* ----- /グローバルメニュー ----- */





/* ----- グローバルメニューのスペーサー ----- */
div#spacer_sp {
	height: 60px;
}
/* ----- /グローバルメニューのスペーサー ----- */





/* ----- セクションごとのタイトル ----- */
div.title_bg_sp {
	position: relative;
	height: 100px;
	background-image: url("../img/sp/title_bg.png");
	background-repeat: repeat-x;
	width: 750px;
}
	div.title_bg_sp img {
		position: absolute;
		display: block;
		top: 27px;
		left: 0px;
		right: 0px;
		margin: auto;
	}
/* ----- /セクションごとのタイトル ----- */





/* ----- セクション本文ラッパー ----- */
div.contents_section_sp {
	position: relative;
	width: 750px;
	background-image: url("../img/sp/section_bg.png");
	background-repeat: repeat-x;
	background-position: top left;
}
	div.contents_wrapper_sp {
		position: relative;
		width: 750px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
/* ----- /セクション本文ラッパー ----- */





/* ----- キービジュアル ----- */
div#keyVisual_sp {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 750px;
	height: 422px;
	background-image: url('../img/sp/keyvisual.png');
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}
/* ----- /キービジュアル ----- */





/* ----- 作品紹介 ----- */
div#product_title_sp {
	margin-top: 0px;
}
div#product_jump_sp {
	position: absolute;
	margin-top: -160px;
}
div#slide_sp {
	position: relative;
	margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
	width: 750px;
	height: 530px;
}
	/* 本文 */
	div#slide_detail_sp {
		position: absolute;
		width: 750px;
		height: 421px;
		margin-left: auto;
		margin-right: auto;
		top: 0px;
		left: 0px;
		right: 0px;
	}
	div#slide_detail_sp ul {
		margin: 0px;
		padding: 0px;
		list-style-type: none;
	}
	div#slide_detail_sp ul li {
		margin: 0px;
		padding: 0px;
	}
	
	/* bxSliderで自動設定されるもので、prev、nextの文字に当たる、文字を消す場合はブロック要素にしてサイズ指定が必要 */
	.bx-prev {
		display: block;
		width: 100%;
		height: 100%;
		z-index: 100;
	}
	.bx-next {
		display: block;
		width: 100%;
		height: 100%;
		z-index: 100;
	}
	/* サムネイル */
	div#slide_thm_sp{
		position: absolute;
		top: 420px;
	}
		div#slide_thm_sp ul {
			display: flex;
			width: 750px;
			justify-content: space-between;
			margin-top: 10px;
			padding: 0px;
		}
		div#slide_thm_sp li {
			list-style-type: none;
			margin-top: 0px;
			margin-left: 0px;
		}
			div#slide_thm_sp li a.active img{
				outline: 4px solid #008eff;
				outline-offset: -4px;
			}
			div#slide_thm_sp li a:not(.active) img {
				filter: grayscale(100%);
			}
/* ----- /作品紹介 ----- */





/* ----- キャラクター紹介 ----- */
div#character_title_sp {
	margin-top: 40px;
}
div#character_jump_sp {
	position: absolute;
	margin-top: -160px;
}
div#character_icon_sp {
	position: relative;
	padding-top: 40px;
}
	div#character_icon_sp img {
		cursor: pointer;
	}
div#character_detail_sp {
	position: relative;
	margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
	width: 725px;
	height: 600px;
}
/* ----- /キャラクター紹介 ----- */





/* ----- 商品紹介 ----- */
div#goods_title_sp {
	margin-top: 40px;
}
div#goods_jump_sp {
	position: absolute;
	margin-top: -160px;
}
div#goods_wrapper_sp {
	padding-top: 80px;
}
	div#goods_basic_data_sp {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		width: 600px;
		padding: 20px;
		font-size: 1em;
		text-align: left;
		border: 1px solid #008eff;
		background-color: #ffffff;
	}
	img#goods_text1_sp {
		margin-top: 40px;
	}
	div#goods_menu_sp {
		position: relative;
		width: 750px;
		height: 422px;
		margin-top: 20px;
		background-image: url('../img/sp/goods_menu_bg.png');
		outline: 1px solid #008eff;
		outline-offset: -1px;
	}
		div#goods_normal_menu_sp {
			position: absolute;
			top: 221px;
			left: 0px;
			width: 264px;
			height: 200px;
			cursor: pointer;
		}
		div#goods_patient_menu_sp {
			position: absolute;
			top: 0px;
			left: 264px;
			width: 484px;
			height: 195px;
			cursor: pointer;
		}
		div#goods_doctor_menu_sp {
			position: absolute;
			top: 195px;
			left: 264px;
			width: 484px;
			height: 226px;
			cursor: pointer;
		}
	div#goods_content_jump_sp {
		position: absolute;
		margin-top: -60px;
	}
	div#goods_content_sp {
		position: relative;
		margin-top: 40px;
		padding: 10px;
		width: 730px;
		min-height: 400px;
		background-color: #aadaff;
		border-radius: 5px;
	}
		div#goods_default_content_sp {
			position: relative;
			padding-top: 40px;
		}
			div.goods_special_data_sp {
				position: relative;
				margin-left: auto;
				margin-right: auto;
				width: 710px;
				padding: 10px;
				font-size: 1em;
				text-align: left;
				border: 1px solid #008eff;
				background-color: #ffffff;
			}
			div.goods_special_data_sp h2 {
				margin: 0px;
				color: #008eff;
				font-size: 1.4em;
			}
/* ----- /商品紹介 ----- */





/* ----- フッター ----- */
div#footer_sp {
	position: relative;
	width: 750px;
	height: 60px;
	background-color: #008eff;
	text-align: center;
	margin-top: 100px;
	padding-top: 40px;
}
/* ----- /フッター ----- */




/* ----- ■■■SP■■■ ----- */