@charset "utf-8";

html {
	
}

/*============================================================
	わたしの水虫 ゼッタイ！治そうプロジェクト
*/
#project {
	position: relative;
	overflow: hidden;
	padding-top: 20px;
	width: 100%;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #333;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
}
.lt-ie9 #project {
	min-width: 980px;
}
#project a {
	cursor: pointer;
}
#project i {
	font-style: normal;
}

/*============================================================
	PC/SPレイアウト用
*/
#project .pc {
	display: block;
}
#project .sp {
	display: none;
}

/*============================================================
	コンテンツ
*/
#project .content {
	background: transparent url(../../img/check/bg_content.png) 0 0 repeat-x;
}
#project .content .wrapper {
	position: relative;
	margin: 0 auto;
	width: 814px;
}

/* フレーム */
#project .content .frame {
	position: relative;
	height: 650px;
	background: transparent url(../img/check/bg_board.svg) 0 0 no-repeat;
	background-size: cover;
}
#project .content .frame-bottom {
	position: relative;
	width: 100%;
	height: 520px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 見出し */
#project .content .heading {
	position: absolute;
	z-index: 1;
	top: 0; left: 20px;
}
#project .content .heading ul {
	margin-left: 2px;
}
#project .content .heading ul li {
	margin-top: 6px;
	padding: 1px 0;
	font-size: 11px;
	line-height: 1.2;
}
#project .content .heading ul li a {
	display: inline-block;
	padding-left: 10px;
	background: transparent url(../../img/check/ico_arrow.png) 0 1px no-repeat;
	color: #333;
	border-bottom: 1px dotted transparent;
}
#project .content .heading ul li a:hover,
#project .content .heading ul li a.current {
	text-decoration: none;
	color: #3354be;
	border-bottom: 1px dotted #3354be;
}

/* ドクター */
#project .content .doctor {
	position: absolute;
	bottom: 0; left: 0;
	width: 300px; height: 480px;
}
#project .content .doctor .image {
	position: absolute;
	bottom: 0; left: 0;
}

/* 内容 */
#project .content .inner {
}

/*============================================================
	ヘッダー
*/
#project #projectHeader {
	margin: 0 auto;
	width: 990px;
}
#project #projectHeader .inner {
	position: relative;
	z-index: 499;
	margin: 0 auto;
	width: 940px; height: 90px;
}
#project #projectHeader .logo {
	position: absolute;
	top: 0; left: 0;
	width: 170px;
}
#project #projectHeader .logo a {
	display: block;
}
#project #projectHeader .logo a img {
	width: 100%;
}
#project #projectHeader .nav {
	position: absolute;
	top: 0; right: 10px;
	width: 648px;
}
#project #projectHeader .nav ul {
	position: relative;
	top: 0; left: 0;
	width: 100%;
}
#project #projectHeader .nav ul li {
	position: absolute;
	top: 24px;
	width: 220px; height: 42px;
}
#project #projectHeader .nav ul li.hover {
	z-index: 500 !important;
	/*top: 14px;
	width: 230px; height: 62px;*/
}
#project #projectHeader .nav ul li a.parent {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%; height: 100%;
}
#project #projectHeader .nav ul li a.parent span {
	overflow: hidden;
	display: block;
	position: absolute;
	top: 0; auto: 0;
	width: 100%; height: 100%;
	background-color: transparent;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-background-size: contain;
	text-indent: -999em;
}
#project #projectHeader .nav ul li a.parent span.base {
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: transparent url(../../img/header/nav_base.png) 0 0 no-repeat;
	background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
}
#project #projectHeader .nav ul li a.parent span.base-current {
	background-image: url(../../img/header/nav_base_current.png);
}
#project #projectHeader .nav ul li.nav-last a.parent span.base {
	background-image: url(../../img/header/nav_base_last.png);
}
#project #projectHeader .nav ul li.nav-last a.parent span.base-current {
	background-image: url(../../img/header/nav_base_last_current.png);
}

#project #projectHeader .nav ul li a.parent span.balloon {
	top: -30px; right: -2px;
	width: 130px; height: 50px;
	background: transparent url(../../img/header/nav_balloon.png) 0 0 no-repeat;
}
#project #projectHeader .nav ul li a.parent span.balloon-on {
	opacity: 0;
	top: -30px; right: -2px;
	width: 130px; height: 50px;
	background: transparent url(../../img/header/nav_balloon_on.png) 0 0 no-repeat;
}
#project #projectHeader .nav ul li a.parent span.base-on {
	opacity: 0;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: transparent url(../../img/header/nav_base_on.png) 0 0 no-repeat;
	background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
}
#project #projectHeader .nav ul li.nav-last a.parent span.base-on {
	background-image: url(../../img/header/nav_base_last_on.png);
}
#project #projectHeader .nav ul li a.parent span.text-on {
	opacity: 0;
	top: -3px; left: 5px;
	height: 48px;
}
#project #projectHeader .nav ul li a.parent span.icon {
	top: auto;
	bottom: 5px; right: 12px;
	width: 52px; height: 52px;
	background: transparent url(../../img/header/ico_diary.png) 0 0 no-repeat;
}
#project #projectHeader .nav ul li.nav01 {
	z-index: 10;
	left: 0;
}
#project #projectHeader .nav ul li.nav01 a.parent span.text {
	background-image: url(../../img/header/nav_check.png);
}
#project #projectHeader .nav ul li.nav01 a.parent span.text-on {
	background-image: url(../../img/header/nav_check_on.png);
}
#project #projectHeader .nav ul li.nav02 {
	z-index: 9;
	right: 214px;
}
#project #projectHeader .nav ul li.nav02 a.parent span.text {
	background-image: url(../../img/header/nav_advice.png);
}
#project #projectHeader .nav ul li.nav02 a.parent span.text-on {
	background-image: url(../../img/header/nav_advice_on.png);
}
#project #projectHeader .nav ul li.nav03 {
	z-index: 7;
	right: 0px;
}
#project #projectHeader .nav ul li.nav03 a.parent span.text {
	background-image: url(../../img/header/nav_diary.png);
}
#project #projectHeader .nav ul li.nav03 a.parent span.text-on {
	background-image: url(../../img/header/nav_diary_on.png);
}

#project #projectHeader .nav ul li.hover a.parent span.base,
#project #projectHeader .nav ul li.hover a.parent span.balloon,
#project #projectHeader .nav ul li.hover a.parent span.text {
	opacity: 0;
}
#project #projectHeader .nav ul li.hover a.parent span.base-on,
#project #projectHeader .nav ul li.hover a.parent span.balloon-on,
#project #projectHeader .nav ul li.hover a.parent span.text-on {
	opacity: 1;
}

.lt-ie9 #project #projectHeader .nav ul li span.base-on,
.lt-ie9 #project #projectHeader .nav ul li span.balloon-on,
.lt-ie9 #project #projectHeader .nav ul li span.text-on {
	display: none;
}

/* トグルボタン */
#project #projectHeader .toggle {
	display: none;
	position: absolute;
	z-index: 11;
	top: 0; right: 15px;
	width: 65px; height: 65px;
}
/* 下層ナビ */
#project #projectHeader .nav .child {
	overflow: hidden;
	position: absolute;
	top: 30px; left: 10px;
	width: 70%; height: 0;
}
#project #projectHeader .nav .child ul {
	padding: 15px 10px 10px 10px;
	width: auto;
	border: 2px solid #4cb8ec;
	background: #fff;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}
#project #projectHeader .nav .child ul li {
	position: static;
	padding: 5px 0;
	width: auto; height: auto;
	font-size: 11px;
	line-height: 1.2;
}
#project #projectHeader .nav .child ul li a {
	display: inline-block;
	padding-left: 10px;
	background: transparent url(../../img/check/ico_arrow.png) 0 1px no-repeat;
	color: #333;
	border-bottom: 1px dotted transparent;
}
#project #projectHeader .nav .child ul li a:hover,
#project #projectHeader .nav .child ul li a.current {
	text-decoration: none;
	border-bottom: 1px dotted #3354be;
	color: #3354be;
}
#project #projectHeader .nav ul li.hover .child {
	top: 54px;
}

/*============================================================
	SP用メニュー
*/
#spNav {
	overflow: hidden;
	position: fixed;
	z-index: 9999;
	top: 0; left: 0;
	width: 100%; height: 0;
	background: #3354be;
	background: rgba(51,84,190,0.8);
}
#spNav .inner {
	display: table;
	width: 100%; height: 100%;
}
#spNav .nav {
	display: table-cell;
	vertical-align: middle;
	width: 100%; height: 100%;
}
#spNav .nav .close {
	overflow: hidden;
	float: right;
	display: block;
	margin-right: 10px;
	width: 60px; height: 60px;
	background: transparent url(../../img/header/btn_close.png) 50% 50% no-repeat;
	text-indent: -999em;
}
#spNav .nav ul {
	clear: both;
	margin: 0 20px;
	border-top: 1px solid #fff;
}
#spNav .nav ul li {
	border-bottom: 1px solid #fff;
}
#spNav .nav ul li a {
	display: block;
	text-align: center;
}
#spNav .nav ul li a img {
	display: inline-block;
	width: 420px;
}

/*============================================================
	フッター
*/
#project #projectFooter {
	margin: 0 auto;
	padding-bottom: 20px;
	width: 990px;
}
#project #projectFooter ul {
	display: table;
	margin: 0 auto;
	padding-top: 36px;
}
#project #projectFooter ul li {
	display: table-cell;
	padding: 0 10px;
	border-right: 1px solid #ccc;
	font-size: 14px;
	line-height: 1.2;
}
#project #projectFooter ul li:last-child {
	border-right: 0;
}
#project #projectFooter ul li a {
	color: #666;
}

/*============================================================
	ブレイクポイント 768px
*/
@media only screen and (max-width: 768px) {

	/*----------------------------------------
		わたしの水虫 ゼッタイ！治そうプロジェクト
	*/
	#project {
		padding-top: 20px;
	}
	/*----------------------------------------
		PC/SPレイアウト用
	*/
	#project .pc {
		display: none !important;
	}
	#project .sp {
		display: block !important;
	}
	/*----------------------------------------
		ヘッダー
	*/
	#project #projectHeader {
		width: 100%;
	}
	#project #projectHeader .inner {
		width: 100%; height: 75px;
	}
	#project #projectHeader .logo {
		top: -5px; left: 15px;
		width: 200px;
	}
	#project #projectHeader .nav {
		display: none;
	}
	#project #projectHeader .toggle {
		display: block;
	}
	/*----------------------------------------
		フッター
	*/
	#project #projectFooter {
		padding-bottom: 0;
		width: 100%;
	}
	#project #projectFooter ul {
		display: block;
		padding: 0;
		background: #3354be;
	}
	#project #projectFooter ul li {
		display: block;
		padding: 0;
		border: 0;
		border-bottom: 1px solid #a6b8f1;
		font-size: 12px;
		line-height: 1.2;
	}
	#project #projectFooter ul li a {
		display: block;
		padding: 12px 10px;
		color: #fff;
	}
	#project #projectFooter ul li a:hover {
		text-decoration: none;
	}
	/*----------------------------------------
		コンテンツ
	*/
	#project .content {
		background: none;
	}
	#project .content .wrapper {
		position: relative;
		top: auto; left: auto;
		width: 640px;
		max-width: 100%;
	}
	/* フレーム */
	#project .content .frame {
		width: 100%; height: auto;
		background: transparent url(../../img/check/bg_board_sp.png) 0 0 no-repeat;
		background-size: 100% auto;
		-webkit-background-size: 100% auto;
	}
	#project .content .frame-bottom {
		display: block;
		width: auto; height: auto;
		padding: 40px 0 150px 0;
		background: transparent url(../../img/check/bg_board_bottom_sp.png) 0 100% no-repeat;
		background-size: contain;
		-webkit-background-size: contain;
		height: auto;
	}
	/* 見出し */
	#project .content .heading {
		position: static;
	}
	#project .content .heading h2 {
		margin: 0 auto;
		width: 100%;
		max-width: 460px;
	}
	#project .content .heading ul {
		display: table;
		margin: 0 auto;
		margin-top: 10px;
	}
	#project .content .heading ul li {
		display: table-cell;
		vertical-align: top;
		margin: 0;
		padding: 0 10px;
		font-size: 16px;
		line-height: 1.2;
	}
	#project .content .heading ul li a {
		background: transparent url(../../img/check/ico_arrow_sp.png) 0 50% no-repeat;
		background-size: 7px 9px;
		-webkit-background-size: 7px 9px;
	}
	/* ドクター */
	#project .content .doctor {
		position: static;
		position: relative;
		z-index: 10;
		width: 100%; height: 80px;
	}
	#project .content .doctor .image {
		position: absolute;
		left: 0; bottom: 0;
		width: 100%; height: 100%;
	}
	#project .content .doctor .image img {
		position: absolute;
		left: 0; bottom: 0;
		width: 100%;
	}
	/* 内容 */
	#project .content .inner {
		position: static;
		width: auto;
	}
}

/*============================================================
	ブレイクポイント 640px 70%
*/
@media only screen and (max-width: 640px) {
	/*----------------------------------------
		コンテンツ
	*/
	#project .content .wrapper {
		width: 480px;
	}
	/* フレーム */
	#project .content .frame-bottom {
		padding: 30px 0 120px 0;
	}
	/* 見出し */
	#project .content .heading ul li {
		font-size: 14px;
		line-height: 1.2;
	}
	/* ドクター */
	#project .content .doctor {
		height: 60px;
	}
}

/*============================================================
	ブレイクポイント 480px 50%
*/
@media only screen and (max-width: 480px) {
	#project {
		padding-top: 10px;
	}
	/*----------------------------------------
		ヘッダー
	*/
	#project #projectHeader .inner {
		height: 60px;
	}
	#project #projectHeader .logo {
		left: 5px;
		width: 150px;
	}
	#project #projectHeader .toggle {
		right: 10px;
		width: 50px; height: 50px;
	}
	/*----------------------------------------
		フッター
	*/
	#project #projectFooter .sns ul {
		padding-top: 18px;
	}
	#project #projectFooter .sns ul li {
		padding: 0 8px;
	}
	#project #projectFooter .sns ul li a {
		width: 50px;
	}
	/*----------------------------------------
		SP用メニュー
	*/
	#spNav .nav .close {
		margin-right: 5px;
		width: 30px; height: 30px;
		background-size: 30px 30px;
		-webkit-background-size: 30px 30px;
	}
	#spNav .nav ul {
		margin: 0 10px;
	}
	#spNav .nav ul li a img {
		width: 300px;
	}
	/*----------------------------------------
		コンテンツ
	*/
	#project .content .wrapper {
		width: 360px;
	}
	/* フレーム */
	#project .content .frame-bottom {
		padding: 20px 0 90px 0;
	}
	/* 見出し */
	#project .content .heading ul li {
		padding: 0 5px;
		font-size: 12px;
		line-height: 1.2;
	}
	/* ドクター */
	#project .content .doctor {
		height: 30px;
	}

}

/*============================================================
	ブレイクポイント 380px
*/
@media only screen and (max-width: 380px) {
	/*----------------------------------------
		コンテンツ
	*/
	#project .content .wrapper {
		width: 320px;
	}
	/* フレーム */
	#project .content .frame-bottom {
		padding: 15px 0 80px 0;
	}
}