@charset "UTF-8";

/* 全体
------------------------------------------------------------------ */
body
{
	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro","メイリオ", "Meiryo", Arial, sans-serif;
	margin: 0px;
	padding: 0px;
	color:#333;
	font-size: 14px;
	line-height: 1.4em;
	-webkit-text-size-adjust: 100%;
}

#wrapper a,
#wrapper a:link,
#wrapper a:visited,
#wrapper a:hover,
#wrapper a:active
{
	text-decoration: none;
}

/* 共通クラス（リスト用・マウスオーバー用）
------------------------------------------------------------------ */
.list
{
	display: none;
}

.button::before,
.button::after
{
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}

.button,
.button::before,
.button::after
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

/* レスポンシブ切り替え
------------------------------------------------------------------ */
.sp{display: none;}

@media screen and (max-width: 480px) {
	.pc{display: none;}
	.sp{display: block;}
}

/* PAGE LAYOUT
------------------------------------------------------------------ */
#wrapper
{
	width: 100%;
	text-align: center;
	min-height:100%;
	background: #fff;
}

#container
{
	width: 100%;
	margin: 0px auto;
	text-align: center;
	overflow: hidden;
	position: relative;
}

/* MAIN
------------------------------------------------------------------ */
#main
{
	width: 100%;
	margin: 0px auto;
	text-align: center;
}

/* ヘッダー（TOP以外の）下バナーエリア
------------------------------------------------------------------ */
#hdr-banner
{
	float: none;
	clear: both;
	display: block;
	width: 100%;
	height: 80px;
	text-align: center;
	background: #fff;
	margin: 0px auto;
	padding: 3px 0px 0px 0px;
}

#hdr-banner .pc
{
	display: block;
}

#hdr-banner .sp
{
	display: none;
}

/* ヘッダー（TOP以外の）
------------------------------------------------------------------ */
#header2
{
	width: 100%;
	height: 111px;
	margin: 0px auto;
	padding: 0px;
	background: url(../img/cmn/header2_idx_bg.gif) repeat-x left bottom;
}

#header2 .inner
{
	width: 986px;
	margin: 0px auto;
	padding: 0px;
}

#header2 p.logo a
{
	padding: 64px 0 0;
	overflow: hidden;
	height: 0px !important;
	height /**/: 64px;
	width: 265px;
	background: url(../img/cmn/header2_logo.gif) no-repeat left center;
	display: block;
	margin: 33px 0px 20px 0px;
	float: left;
}

#header2 ul
{
	list-style: none;
	text-align: left;
	width: 700px;
	height: 73px;
	margin: 40px 0px 0px 0px;
	padding: 0px 2px 0px 2px;
	background: #fff;
	float: right;
}

#header2 ul li
{
	list-style: none;
	float: left;
	position: relative;
}

#header2 ul li a
{
	list-style: none;
	float: left;
}

#header2 li.about a
{
	height: 73px;
	width: 116px;
	float: left;
	display: block;
	background: url(../img/cmn/header2_idx_01.gif) no-repeat left top;
}

#header2 li.about a:hover
{
	background: url(../img/cmn/header2_idx_01.gif) no-repeat left -73px;
}

#header2 li.products a
{
	height: 73px;
	width: 117px;
	float: left;
	display: block;
	background: url(../img/cmn/header2_idx_02.gif) no-repeat left top;
}

#header2 li.products a:hover
{
	background: url(../img/cmn/header2_idx_02.gif) no-repeat left -73px;
}

#header2 li.howto a
{
	height: 73px;
	width: 117px;
	float: left;
	display: block;
	background: url(../img/cmn/header2_idx_03.gif) no-repeat left top;
}

#header2 li.howto a:hover
{
	background: url(../img/cmn/header2_idx_03.gif) no-repeat left -73px;
}

#header2 li.store a
{
	height: 73px;
	width: 117px;
	float: left;
	display: block;
	background: url(../img/cmn/header2_idx_04.gif) no-repeat left top;
}

#header2 li.store a:hover
{
	background: url(../img/cmn/header2_idx_04.gif) no-repeat left -73px;
}

#header2 li.babies a
{
	height: 73px;
	width: 118px;
	float: left;
	display: block;
	background: url(../img/cmn/header2_idx_05.gif) no-repeat left top;
}

#header2 li.babies a:hover
{
	background: url(../img/cmn/header2_idx_05.gif) no-repeat left -73px;
}

#header2 li.faq a
{
	height: 73px;
	width: 115px;
	float: left;
	display: block;
	background: url(../img/cmn/header2_idx_06.gif) no-repeat left top;
}

#header2 li.faq a:hover
{
	background: url(../img/cmn/header2_idx_06.gif) no-repeat left -73px;
}

@media screen and (max-width: 480px) {
	#hdr-banner
	{
		float: none;
		clear: both;
		display: block;
		width: 96%;
		height: auto;
		text-align: center;
		background: #fff;
		margin: 0px auto;
		padding: 3px 0px 0px 0px;
	}

	#hdr-banner img
	{
		width: 100%;
		height: auto;
	}
	
	#hdr-banner .sp
	{
		display: block;
	}
	
	#hdr-banner .pc
	{
		display: none;
	}
	
	#header2 .list
	{
		display: block;
	}
	#header2
	{
	position: relative;
	z-index: 9999;
		width: 100%;
		height: auto;
		margin: 0px auto;
		padding: 0px;
		background: none;
	}
	
	#header2 .inner
	{
		width: auto;
		margin: 0px auto;
		padding: 0px 3px 0px 3px;
		background: #fff;
	}
	
	#header2 p.logo a
	{
		padding: 72px 0 0;
		overflow: hidden;
		height: 0px !important;
		height /**/: 72px;
		width: 300px;
		background: url(../img/top/logo.gif) no-repeat left center;
		-webkit-background-size: 300px 72px;
		background-size: 300px 72px;
		display: block;
		margin: 20px auto 10px auto;
		float: none;
		clear: both;
	}
	
	#header2 ul
	{
		float: none;
		clear: both;
		list-style: none;
		text-align: left;
		width: auto;
		height: auto;
		margin: 0px auto;
		padding: 0px;
	}
	
	#header2 ul li
	{
		list-style: none;
		float: none;
		position: relative;
	}
	
	#header2 ul li a
	{
		list-style: none;
		float: none;
		display: block;
		font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro","メイリオ", "Meiryo", Arial, sans-serif;
		font-size: 16px;
		line-height: 1.4em;
		color:#fff;
		padding: 10px 0px 0px 12px;
		border-bottom: 1px dotted #fff;
	}
	
	#header2 li.about a
	{
		height: 40px;
		width: 100%;
		float: none;
		display: block;
		background: #33b8e5;
	}
	
	#header2 li.about a:hover
	{
		background: #33b8e5;
	}
	
	#header2 li.products a
	{
		height: 40px;
		width: 100%;
		float: none;
		display: block;
		background: #33b8e5;
	}
	
	#header2 li.products a:hover
	{
		background: #33b8e5;
/*		background: #f269a6;	*/
	}
	
	#header2 li.howto a
	{
		height: 40px;
		width: 100%;
		float: none;
		display: block;
		background: #33b8e5;
	}
	
	#header2 li.howto a:hover
	{
		background: #33b8e5;
/*		background: #f5a528;	*/
	}
	
	#header2 li.store a
	{
		height: 40px;
		width: 100%;
		float: none;
		display: block;
		background: #33b8e5;
	}
	
	#header2 li.store a:hover
	{
		background: #33b8e5;
/*		background: #3ec1a5;	*/
	}
	
	#header2 li.babies a
	{
		height: 40px;
		width: 100%;
		float: none;
		display: block;
		background: #33b8e5;
	}
	
	#header2 li.babies a:hover
	{
		background: #33b8e5;
/*		background: #f66;	*/
	}
	
	#header2 li.faq a
	{
		height: 40px;
		width: 100%;
		float: none;
		display: block;
		background: #33b8e5;
		border-bottom: none;
	}
	
	#header2 li.faq a:hover
	{
		background: #33b8e5;
/*		background: #69c;	*/
	}
}

/* フッター
-------------------------------------------------- */
#footer
{
	width: 100%;
	overflow: hidden;
	text-align: center;
	margin: 20px auto 0px;
	padding: 0px;
	background: #4fbadd url(../img/cmn/footer_bg.gif) repeat-x center top;
	font-size: 13px;
	line-height: 1.4em;
	color: #fff;
}

.footer-inner
{
	width: 980px;
	overflow: hidden;
	text-align: center;
	margin: 0px auto 0px;
	padding: 0px;
}

#footer a,
#footer a:link,
#footer a:visited
{
	color: #fff;
	text-decoration: none;
}

#footer a:hover,
#footer a:active
{
	color: #fff;
	text-decoration: underline;
}

#footer .block
{
	width: 240px;
	margin: 0px 5px 0px 0px;
	padding: 130px 0px 0px;
	float: left;
	text-align: left;
}

#footer .block li
{
	margin: 0px 0px 15px 0px;
	padding: 0px;
}

#footer .sns-link
{
	width: 980px;
	margin: 0px auto;
	padding: 30px 0px;
	border-bottom: 1px solid #fff;
	float: none;
	clear: both;
	text-align: center;
}

.sns-link .facebook, .sns-link .mixi
{ 
	margin: 0px 10px 0px 0px; 
	padding: 0px; 
	display: inline-block; 
	width: 36px; 
}

.sns-link .twitter
{ 
	margin: 0px 10px 0px 0px; 
	padding: 8px 0px 0px 0px; 
	display: inline-block; 
	width: auto; 
	vertical-align:top;
}

.sns-link span
{
	width: 100%;
	display: block;
	margin: 20px auto;
	text-align:center;
}

#footer .copy-text
{
	width: 980px;
	margin: 0px auto;
	padding: 30px 0px;
	float: none;
	clear: both;
	text-align: center;
}

.copy-text .company
{
	font-size: 12px;
	line-height: 1.4em;
	color: #fff;
	margin: 0px;
	display: block;
}

.copy-text .copyright
{
	font-size: 11px;
	line-height: 1.4em;
	color: #fff;
	margin: 0px;
	display: block;
	font-family: Verdana, Roboto, 'Droid Sans', sans-serif;
}

.copy-text .caution
{
	font-size: 14px;
	line-height: 1.4em;
	letter-spacing: 0.2em;
	color: #fff;
	margin: 20px 0px;
	display: block;
}

@media screen and (max-width: 480px) {
	#footer
	{
		width: 100%;
		overflow: hidden;
		text-align: center;
		margin: 20px auto 0px;
		padding: 40px 0px 0px 0px;
		background: #4fbadd url(../img/cmn/footer_bg.gif) repeat-x left top;
		-webkit-background-size: 80%;
		background-size: 80%;
		font-size: 16px;
		line-height: 1.4em;
		color: #fff;
	}
	
	.footer-inner
	{
		width: auto;
		overflow: hidden;
		text-align: center;
		margin: 0px auto 0px;
		padding: 0px;
	}
	
	#footer a,
	#footer a:link,
	#footer a:visited
	{
		color: #fff;
		text-decoration: none;
	}
	
	#footer a:hover,
	#footer a:active
	{
		color: #fff;
		text-decoration: underline;
	}
	
	#footer .block
	{
		width: 90%;
		margin: 0px auto 0px;
		padding: 7px 0px 7px;
		float: none;
		text-align: left;
		border-bottom: 1px dotted #fff;
	}
	
	#footer .block li
	{
		margin: 7px 0px 6px 0px;
		padding: 0px;
	}
	
	#footer .sns-link
	{
		width: 100%;
		margin: 0px auto;
		padding: 20px 0px 10px;
		border-bottom: 1px solid #fff;
		float: none;
		clear: both;
	}
	
	.sns-link ul
	{
		text-align:center;
	}
	
	.sns-link span
	{
		width: 100%;
		display: block;
		margin: 10px auto;
		text-align:center;
	}
	
	.sns-link li
	{
		display:inline; 
		padding: 0px 7px 0px 0px;
	}
	
	.sns-link li a
	{
		padding: 0px;
	}
	
	.sns-link .twitter
	{ 
		display: none;
	}
	
	#footer .copy-text
	{
		width: 90%;
		margin: 0px auto;
		padding: 30px 0px;
		float: none;
		clear: both;
		text-align: center;
	}
	
	.copy-text .company
	{
		font-size: 11px;
		line-height: 1.4em;
		color: #fff;
		margin: 0px;
		display: block;
	}
	
	.copy-text .copyright
	{
		font-size: 10px;
		line-height: 1.4em;
		color: #fff;
		margin: 0px;
		display: block;
		font-family: Verdana, Roboto, 'Droid Sans', sans-serif;
	}
	
	.copy-text .caution
	{
		font-size: 12px;
		line-height: 1.8em;
		letter-spacing: 0.1em;
		color: #fff;
		margin: 20px 0px;
		display: block;
	}
}

/* ページトップボタン
------------------------------------------------------------------ */
.pagetop
{
	display: none;
	position: fixed;
	bottom: 50px;
	right: 20px;
}

.pagetop a
{
	display: block;
	width: 80px;
	height: 80px;
	filter: alpha(opacity=90); 
	-moz-opacity: 0.9;
	opacity: 0.9;
}

@media screen and (max-width: 480px) {
	.pagetop
	{
		display: none;
		position: fixed;
		bottom: 40px;
		right: 20px;
	}
	
	.pagetop a
	{
		display: block;
		width: 60px;
		height: 60px;
		filter: alpha(opacity=90); 
		-moz-opacity: 0.9;
		opacity: 0.9;
	}
	
	.pagetop a img
	{
		width: 100%;
		height: auto;
	}
}