/*=======================================================================*/
/*
layout_media.css
スマートフォンレイアウト用のCSS
*/
/*=======================================================================*/

/*=======================================================================*/
/* 共通設定（ヘッダー） */
/*=======================================================================*/

@media screen and (max-width: 767px) {

	#uNav {
		display: none;
	}

	#hNav {
		width: 98%;
		margin: 10px auto;
		display: block;
	}

	#hNav .Logo {
		width: 250px;
		display: block;
		    margin: 0 0 5px 0;
		vertical-align: middle;
	}

	#hNav .CatchTxt {
		display: none;
	}

	#hNav .SiteMenu {
		display: none;
		width: 100%;
		margin: 0;
		vertical-align: middle;
	}

	#gNav {
		display: none;
		width: 100%;
		padding: 10px 0;
		margin: 0 auto;
	}
	
}

/*=======================================================================*/
/* 共通設定（フッター） */
/*=======================================================================*/

@media screen and (max-width: 767px) {

	footer {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		border-top: 1px solid #DDDDDD;

	}

	#fWrap {
		width: 98%;
		margin: 0 auto;
		padding: 10px auto;
		background: none;
	}

	#fWrap:before, #fWrap:after {
		content: "\0020";
		display: block;
		height: 0;
		overflow: hidden;
	}

	#fWrap:after {
		clear: both;
	}

	#fCredit {
		width: 100%;
		margin: 0;
		padding: 10px;
		text-align: left;
		background: #333333;
		box-sizing: border-box;
	}

	#fCredit span{
		font-size: 0.9em;
		line-height: 1.4em;
		color: #FFF;
	}

}

/*=======================================================================*/
/* カテゴリーページ */
/*=======================================================================*/

@media screen and (max-width: 767px) {

	#category {
		width: 100%;
		margin: 0;
	}

	#category:before, #category:after {
		content: "\0020";
		display: block;
		height: 0;
		overflow: hidden;
	}

	#bodyWrap {
		width: 100%;
		margin: 10px auto;
	}

	#bodyWrap:before, #bodyWrap:after {
		content: "\0020";
		display: block;
		height: 0;
		overflow: hidden;
	}

	#bodyWrap:after {
		clear: both;
	}

	#bodyWrap #main {
		float: none;
		width: 100%;
		margin: 0 0 10px 0;
	}

	#bodyWrap #side {
		float: none;
		width: 100%;
		margin: 0;
	}

}

/*=======================================================================*/
/* 詳細ページ */
/*=======================================================================*/

@media screen and (max-width: 767px) {

	#page {
		width: 100%;
		margin: 0;
	}

	/* ページ本文エリア  {{yield}} */

	#documant {
		width: 98%;
		margin: 10px auto;
		font-size: 0.9em;
	}

}


/*=======================================================================*/
/* 子育てサイト-ボディ */
/*=======================================================================*/

@media screen and (max-width: 767px) {

	#kidsBody {
		position: relative;
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		z-index: 0;
	}

	.BKFlag_left {
		position: absolute;
		top: 0;
		left: 0;
		width: 115px;
		height: 50px;
		z-index: 1000;
		background: url(../../img/kids/back_hdr_flag_left.png) right 0 no-repeat;
		background-size: contain;
	}

	.BKFlag_right {
		position: absolute;
		top: 0;
		right: 0;
		width: 115px;
		height: 50px;
		z-index: 1000;
		background: url(../../img/kids/back_hdr_flag_right.png) left 0 no-repeat;
		background-size: contain;
	}

}