/*
===========================================================================

	Title : /community/milk/common/style.css

===========================================================================
*/


/***************************************************************
*
*	PC view
*	
****************************************************************/


/* pc 共通
------------------------------------------------------------ */
body {
	margin: 0;
	border: 0;
	padding: 0;
}
a:visited {
	color: #1b5acc;
}
a:link {
	color: #1b5acc;
}
a img:hover {
	opacity: 0.8;
	opacity: 0.8\9;
}
.small_f {
	font-size: 11px;
}
.fl_L {
	float: left;
}
.fl_R {
	float: right;
}
#content {
	margin: 0 auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
	font-size: 14px;
	color: #302420;
	line-height: 1.4;
	-webkit-text-size-adjust: 100%;
}
#content img {
	width: 100%;
}
#content .content_inner {
	width: 740px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	background: url(../image/content_bg.png) repeat-y;
}
#content .content_inner .main {
	background: url(../image/content_bg_mam.png) no-repeat;
}
#content .content_inner .main .main_title{
	width: 379px;
	height: auto;
	margin: 0 auto 10px;
	padding: 58px 5px 0;
}

#content .content_inner .main .main_text {
    text-align: center;
    color: #555555;
    line-height: 1.85;
}
.sub #content .content_inner .main .main_text {
	text-align: center;
	color: #555555;
	line-height: 1.4;
}

.haihai_bnr_frame{
    background-image: url(../image/gray_bg01.png);
	background-repeat:repeat;
}
#content .content_inner p.haihai_bnr {
	width: 560px;
	margin: 0 auto;
	padding: 20px 0;
}

/*  each_top  */
#each_top {
	height: 338px;
	width: 100%;
	margin-top: 20px;
	background-image: url(../image/content_menu_bg02.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
}
#each_top h1 {
	width: auto;
	margin-bottom: 6px;
	font-size: 30px;
	font-weight: normal;
	color: #936c61;
	letter-spacing: 3px;
}
/*---------------------各トップインナー画像------------------------*/

#seniormom #each_top .inner {
	background-image: url(../image/content_story_on.gif);
    background-position: 56px 90px;
    background-size: 140px;
	background-repeat: no-repeat;
}
#breastmilk #each_top .inner {
	background-image: url(../image/content_breastmilk_on.gif);
	background-position: 60px 80px;
	background-size: 140px;
	background-repeat: no-repeat;
}
#milk_start #each_top .inner {
	background-image: url(../image/content_babyfood_on.gif);
	background-position:46px 74px;
	background-size: 160px;
	background-repeat: no-repeat;
}
#trouble #each_top .inner {
	background-image: url(../image/content_trouble_on.gif);
	background-position: 82px 70px;
    background-size: 112px;
	background-repeat: no-repeat;
}
#recipe #each_top .inner {
	background-image: url(../image/content_recipe_on.gif);
	background-position: 68px 84px;
	background-size: 126px;
	background-repeat: no-repeat;
}
#milkpowder #each_top .inner {
	background-image: url(../image/content_milkpowder_on.gif);
	background-position: 44px 50px;
    background-size: 150px;
	background-repeat: no-repeat;
}
#preparation #each_top .inner {
	background-image: url(../image/content_pregnancy_on.gif);
    background-position: 100px 82px;
    background-size: 70px;
	background-repeat: no-repeat;
}

/*-----------------------------------------------------------------*/



/*---------------------各トップh2空き幅調整------------------------*/

#seniormom #content .content_inner .content_menu #each_top h1 {
	padding: 90px 0 0 218px;
}
#breastmilk #content .content_inner .content_menu #each_top h1 {
	padding: 70px 0 0 218px;
}
#milk_start #content .content_inner .content_menu #each_top h1 {
	padding: 92px 0 0 218px;
}
#trouble #content .content_inner .content_menu #each_top h1 {
	padding: 70px 0 0 218px;
}
#recipe #content .content_inner .content_menu #each_top h1 {
	padding: 60px 0 0 218px;
}
#milkpowder #content .content_inner .content_menu #each_top h1 {
	padding: 50px 0 0 218px;
}
#preparation #content .content_inner .content_menu #each_top h1 {
	padding: 70px 0 0 218px;
}
/*-----------------------------------------------------------------*/

#each_top .inner p {
	padding: 0 0 26px 218px;
	line-height: 1.8;
}
#content .content_inner #each_top .btn_list {
	width: 624px;
	margin: auto;
}
#content .content_inner #each_top .btn_list ul li.category_btn {
	float: left;
	width: 304px;
	height: 37px;
	margin: auto 15px 13px 0;
	background-image: url(../image/content_menu_btn02_pc.png);
	background-position: center;
	background-repeat: no-repeat;
}
#recipe #content .content_inner #each_top .btn_list ul li.category_btn, #preparation #content .content_inner .btn_list ul li.category_btn {
	float: none;
	margin-left: 182px;
}
.each_top #content .content_inner #each_top .btn_list ul li:nth-of-type(even) {
	margin-right: 0;
}
.each_top .category_btn a {
	padding: 9px 0 8px 32px;
    font-size: 16px;
}
.each_top #content .content_inner .anchor_linkBottom {
	margin: 0 auto 0;
	padding: 0 0 40px;
	background: url(../image/gray_bg01.png);
	text-align: center;
}

/*  各カテゴリ配下  */
.sub #content .content_inner {
	padding-bottom: 0;
	background: #ffffff;
	color: #555555;
	border:solid 2px #f5f5f5;
	box-sizing:border-box;
}
.sub #content .content_inner .main {
	background-image: url(../image/main_bg02_star.png), url(../image/main_bg01_borderBottom.jpg) , url(../image/gray_bg01.png);
	background-repeat:no-repeat, repeat-x, repeat;
	background-position:top center, bottom center, center;
	background-size: 100%, 49px, auto;
	margin: auto auto 38px;
	padding: 22px 0 30px;
	height: auto;
}
#content .content_inner .main .sub_title {
	width: 320px;
	height: 80px;
	margin: 0 auto 12px;
	padding: 0;
}
#content .content_inner .main .parent_main_title {
	width: 550px;
	margin: auto;
}
#content .content_inner .main .parent_main_title span {
	display: block;
	float: left;
}
#content .content_inner .main .parent_main_title span:nth-of-type(1) {
	width: 100px;
}
#content .content_inner .main .parent_main_title span:nth-of-type(2) {
	padding: 10px 0 0 10px;
	color: #92685c;
	font-size: 40px;
}
#seniormom #content .content_inner .main .parent_main_title span:nth-of-type(1) {
    width: 130px;
}
#seniormom #content .content_inner .main .parent_main_title span:nth-of-type(2) {
	padding: 13px 0 0 16px;
}
#content .content_inner .content_menu {
	width: 700px;
	margin: 0 auto;
}
.sub #content .content_inner .content_menu .content_menu_inner {
	margin-bottom: 50px;
}
.h_frame01 {
	width: 380px;
	margin: auto auto 25px;
	padding: 0 20px;
	text-align: center;
	font-size: 26px;
	color: #e60039;
	font-weight: 600;
	background-image: url(../image/h_frame01_left.png), url(../image/h_frame01_right.png);
	background-repeat:no-repeat, no-repeat;
	background-position:left 2px, right 2px;
	background-size: 16px, 16px;
	letter-spacing:0;
}
.h_frame02 {
	margin: 0 0 34px;
	padding: 0 0 12px;
	background-image: url(../image/h_bot_line.png), url(../image/h_bg_line.png);
	background-position:bottom center, center 28px;
	background-repeat:no-repeat, repeat-x;
}
.h_frame02 span {
	width: 410px;
	margin: auto;
	padding: 16px 10px 10px;
	font-size: 19px;
	text-align: center;
	color: #e60039;
	font-weight: 600;
	display: block;
	background-color:#ffffff;
	background-image: url(../image/h_side_line.png),  url(../image/h_side_line.png),  url(../image/h_top_line.png);
	background-position:right center, left center, top center;
	background-repeat:repeat-y, repeat-y, no-repeat;
}
.category_btn {
	width: 327px;
	height: 48px;
	margin: auto;
	box-sizing: border-box;
	color: #a54b4b;
	font-size: 14px;
	background-image: url(../image/content_menu_btn01_pc.png);
	background-repeat:no-repeat;
	background-position:center;
}
.category_btn02 {
	width: 322px;
	height: 38px;
	margin: auto;
	box-sizing: border-box;
	color: #a54b4b;
	font-size: 14px;
	border: solid 1px #d8b2b2;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	background-image: url(../image/backStory_ic01.png);
	background-repeat:no-repeat;
	background-position:10px center;
	background-size: 6px;
}
.category_btn a,
.category_btn span {
	display:block;
	padding: 14px 14px 14px 30px;
	color:#a54b4b;
}

.category_btn02 a {
	padding: 9px 14px 9px 20px;
}
.category_btn02 a,
.category_btn span {
	display: block;
	color: #92685c;
}
.category_btn:hover, .category_btn02:hover, .category_btn a:hover, .category_btn02 a:hover {
	opacity: 0.8;
	text-decoration: none;
}
.btn_active {
	opacity: 0.5;
}
.btn_active:hover {
	opacity: 0.5;
}
.sub #content .content_inner .btn_list {
	margin-bottom: 34px;
}
.sub #content .content_inner .btn_list ul{
	width:680px;
	margin:auto;
}
.sub #content .content_inner .btn_list ul li {
	float: left;
	margin-bottom: 13px;
	font-size: 16px;
}
.sub #content .content_inner .btn_list ul li:nth-of-type(odd) {
	margin-right: 26px;
}
.text_center {
	margin: auto auto 40px;
	text-align: center;
	line-height: 2;
	font-size: 14px;
}
.sub #content .content_inner .anchor_linkBottom {
	width: 100%;
	margin: 28px auto 0;
	padding: 0 0 20px;
	background-image: url(../image/anchor_link_bg01_borderTop.jpg), url(../image/gray_bg01.png);
	background-position:top center, center;
	background-size:49px, auto;
	background-repeat:repeat-x, repeat;
	text-align: center;
}
#content .content_inner .anchor_linkBottom ul {
	width: 672px;
	padding: 20px 0 0;
	margin: auto;
}
#content .content_inner .anchor_linkBottom ul:nth-of-type(2){
	padding:10px 0 0;
}
#content .content_inner .anchor_linkBottom li {
	float: left;
	width: 112px;
	margin: 0;
	padding: 0 28px 10px;
	font-size: 12px;
}
#trouble #content .content_inner .anchor_linkBottom ul:nth-of-type(1) li:nth-of-type(2),
#seniormom #content .content_inner .anchor_linkBottom ul:nth-of-type(1) li:nth-of-type(3),
#breastmilk #content .content_inner .anchor_linkBottom ul:nth-of-type(1) li:nth-of-type(4),
#milkpowder #content .content_inner .anchor_linkBottom ul:nth-of-type(2) li:nth-of-type(1),
#milk_start #content .content_inner .anchor_linkBottom ul:nth-of-type(2) li:nth-of-type(2),
#recipe #content .content_inner .anchor_linkBottom ul:nth-of-type(2) li:nth-of-type(3),
#preparation #content .content_inner .anchor_linkBottom ul:nth-of-type(2) li:nth-of-type(4) {
	opacity:0.6;
}
#content .content_inner .anchor_linkBottom ul:nth-of-type(1) li:nth-of-type(1){
	padding-top:20px;
}
#content .content_inner .anchor_linkBottom li a {
	color: #936c61;
	display:block;
}
#content .content_inner .anchor_linkBottom li:hover{
	opacity:0.8;
}
#content .content_inner .anchor_linkBottom li a:hover {
	text-decoration: none;
}
#content .content_inner .anchor_linkBottom li p{
	font-size:13px;
}
.pcNon {
	display: none;
}



/***************************************************************
*
*	SP view
*	
****************************************************************/

@media screen and (max-width:767px) {
	#content {
		width: 100%;
	}
	#content .content_inner {
		width: 100%;
		padding-bottom: 0;
		background: url(../image/sp_content_bg01.jpg) no-repeat;
	}
	#content .content_inner .main {
		background: url(../image/sp_content_bg_mam.png) no-repeat;
		background-size: 100%;
	}
	#content .content_inner .main .main_title {
		width: 55.5%;
		margin-bottom: 6%;
		padding-top: 10%;
	}
	#content .content_inner .main .main_text{
		font-size:12px;
	}
	.each_top #content .content_inner .main .main_text {
		margin: 0 6% 6%;
		line-height:1.8;
		font-size:12px;
		text-align: center;
	}
	.sub #content .content_inner .main .main_text {
    margin: 0 3% 0;
    text-align: center;
	line-height:2;
	}
	.haihai_bnr_frame{
    background-image: url(../image/gray_bg01.png);
	background-repeat:repeat;
	}
	#content .content_inner p.haihai_bnr {
		width: 80%;
		padding: 8% 0;
	}
	.text_center {
    font-size: 12px;
    text-align: left;
    margin: 0 4% 4%;
	}
	/*  each_top  */
	#each_top {
		width:96%;
		height: auto;
		margin: auto;
		background-image: url(../image/sp_content_menu_bg_top.png), url(/community/milk/images/sp_content_menu_bg.png);
		background-position: top center, top center;
		background-repeat: no-repeat, repeat-y;
		background-size: 100%;
	}
	
	/*---------------------各トップインナー画像------------------------*/
	
	#seniormom #each_top .inner {
		padding-bottom: 9.1%;
		background-image: url(../image/content_story_on.gif), url(/community/milk/images/sp_content_menu_bg_bottom.png);
		background-repeat: no-repeat;
		background-position: 8% 9%, bottom center;
		background-size: 28%, 100%;
	}
	#breastmilk #each_top .inner {
		padding-bottom: 9.1%;
		background-image: url(../image/content_breastmilk_on.gif), url(/community/milk/images/sp_content_menu_bg_bottom.png);
		background-repeat: no-repeat;
	    background-position: 10% 10%, bottom center;
		background-size: 26%, 100%;
	}
	#milk_start #each_top .inner {
		padding-bottom: 9.1%;
		background-image: url(../image/content_babyfood_on.gif), url(/community/milk/images/sp_content_menu_bg_bottom.png);
		background-repeat: no-repeat;
	    background-position: 8% 11%, bottom center;
		background-size: 28%, 100%;
	}
	#trouble #each_top .inner {
		padding-bottom: 9.1%;
		background-image: url(../image/content_trouble_on.gif), url(/community/milk/images/sp_content_menu_bg_bottom.png);
		background-repeat: no-repeat;
	    background-position: 9% 8%, bottom center;
		background-size: 24%, 100%;
	}
	#recipe #each_top .inner {
		padding-bottom: 9.1%;
		background-image: url(../image/content_recipe_on.gif), url(/community/milk/images/sp_content_menu_bg_bottom.png);
		background-repeat: no-repeat;
	    background-position: 8% 4%, bottom center;
		background-size: 25%, 100%;
	}
	#milkpowder #each_top .inner {
		padding-bottom: 9.1%;
		background-image: url(../image/content_milkpowder_on.gif), url(/community/milk/images/sp_content_menu_bg_bottom.png);
		background-repeat: no-repeat;
		background-position: 8% 5%, bottom center;
		background-size: 25%, 100%;
	}
	#preparation #each_top .inner {
		padding-bottom: 9.1%;
		background-image: url(../image/content_pregnancy_on.gif), url(/community/milk/images/sp_content_menu_bg_bottom.png);
		background-repeat: no-repeat;
		background-position: 18% 6%, bottom center;
		background-size: 12%, 100%;
	}
	
	/*-----------------------------------------------------------------*/
	
	#content .content_inner .content_menu #each_top h1 {
		font-size: 18px;
		letter-spacing: 0;
	}
	
	/*---------------------各トップh1空き幅調整------------------------*/
	
	#seniormom #content .content_inner .content_menu #each_top h1,
	#breastmilk #content .content_inner .content_menu #each_top h1,
	#milk_start #content .content_inner .content_menu #each_top h1,
	#trouble #content .content_inner .content_menu #each_top h1,
	#recipe #content .content_inner .content_menu #each_top h1,
	#milkpowder #content .content_inner .content_menu #each_top h1,
	#preparation #content .content_inner .content_menu #each_top h1 {
		padding:12% 4% 6% 36%;
	}
	
	/*-----------------------------------------------------------------*/
	
	.each_top #content .content_inner .content_menu .text {
		margin: 0 8% 6%;
		font-size: 12px;
		padding: 0;
	}
	#content .content_inner #each_top .btn_list {
		width: 94%;
	}
	#content .content_inner #each_top .btn_list ul li.category_btn {
		width: 100%;
		height: auto;
		margin: auto 0 6px 0;
		background-size: 90%;
		text-align: left;
		float: none;
	}
	#recipe #content .content_inner #each_top .btn_list ul li.category_btn, #preparation #content .content_inner .btn_list ul li.category_btn {
		float: none;
		margin: auto;
	}
	#content .content_inner #each_top .btn_list ul li:last-child {
		margin-bottom: 0;
	}
	#each_top .category_btn a {
		width: 79%;
		margin:0 auto;
		padding: 3% 0 3% 11%;
		font-size:13px;
	}
	.each_top #content .content_inner .anchor_linkBottom {
		margin: 0 auto;
		padding: 5px 0 0;
	}
	
	/*  各カテゴリ配下  */
	
	.sub #content .content_inner {
		width: 100%;
		margin-bottom: 20px;
		padding-bottom: 0;
		background: #ffffff;
		border: none;
	}
	.sub #content .content_inner .content_menu .content_menu_inner {
		margin-bottom: 10px;
	}
	.h_frame01 {
		width: 268px;
		margin: auto auto 10px;
		padding: 0 16px;
		font-size: 17px;
		background-size: 12px, 12px;
	}
	.h_frame02 {
		margin: 0 0 24px;
		padding: 0 0 3%;
		background-image: url(../image/h_bot_line_sp.png), url(../image/h_bg_line.png);
		background-size: 80%, auto;
		background-position: bottom center, center 20px;
	}
	.h_frame02 span {
		width: 76%;
		padding: 12px 2% 8px;
		font-size: 13px;
		background-repeat:repeat-y, repeat-y, repeat-x;
	}
	
	.category_btn {
		height: auto;
		box-sizing: border-box;
		color: #a54b4b;
		font-size: 14px;
		background-image: url(../image/content_menu_btn01_sp.png);
		background-repeat: no-repeat;
		background-size: 100%;
		background-position: center;
	}
	.category_btn a,
	.category_btn span {
		padding: 10px 10px 10px 30px;
		font-size:13px;
	}
	.category_btn02 {
		width: 280px;
		font-size: 11px;
	}
	.category_btn02 a {
		padding: 11px 10px 11px 30px;
	}
	/* ------------------------------------------------------------ */
	
	.sub #content .content_inner .main {
		background-image: url(../image/main_bg02_star_sp.png), url(../image/main_bg01_borderBottom.jpg) , url(../image/gray_bg01.png);
		background-size: 100%, 9%, auto;
		padding: 0 0 26px;
		margin: auto auto 34px;
	}
	#content .content_inner .main .sub_title {
		width: 50%;
		margin: 0 auto;
		padding-top: 8%;
		height: auto;
	}
	#content .content_inner .main .parent_main_title {
		width: 100%;
		margin-bottom:4%;
	}
	#content .content_inner .main .parent_main_title span {
		float: none;
	}
	#content .content_inner .main .parent_main_title span:nth-of-type(1) {
		margin: auto;
	}
	#content .content_inner .main .parent_main_title span:nth-of-type(2) {
		padding: 0;
		font-size: 22px;
		text-align:center;
	}
	#content .content_inner .main .text_center{
		margin-bottom:30px;
	}
	#content .content_inner .content_menu {
		width: 100%;
		background: url(../image/sp_content_bg02.jpg) no-repeat;
	}
	/*#content .content_inner .content_menu_inner {
		width: 95%;
		margin: 0 auto;
		padding: 5% 0;
	}*/
	
	/*----------------------------.anchor_linkBottom----------------------------*/
	
	.sub #content .content_inner .anchor_linkBottom {
		margin: 20px auto 0;
		padding: 5px 0 0;
		background-size: 9%, auto;
	}
	#content .content_inner .anchor_linkBottom ul {
		width: auto;
		padding: 10px 0 0;
	}
	#content .content_inner .anchor_linkBottom ul:nth-of-type(2){
		width: auto;
		padding: 2% 0 0;
	}
	#content .content_inner .anchor_linkBottom li {
		width: 20%;
		margin: 0;
		padding: 0 3% 3%;
		vertical-align: middle;
		position: relative;
		background-image: url(../image/anchor_link_ic.png);
		background-position:bottom center;
		background-repeat:no-repeat;
		background-size: 8px;
	}
	#content .content_inner .anchor_linkBottom li:first-child{
		padding: 0 2% 3%;
	}
	#content .content_inner .anchor_linkBottom li:last-child{
		padding: 0 2% 3%;
	}
	#content .content_inner .anchor_linkBottom ul:first-child li:first-child {
		width: 20%;
		padding: 20px 2% 0;
		background: none;
	}
	#content .content_inner .anchor_linkBottom li p {
		display:table;
		width:100%;
		height: 46px;
		margin: auto;
		font-size:11px;
	}
	#content .content_inner .anchor_linkBottom li p span{
		display:table-cell;
		vertical-align: middle;
	}
	#content .content_inner .anchor_linkBottom li img{
		width:75%;
	}
	#content .content_inner .anchor_linkBottom ul:nth-of-type(1) li:nth-of-type(1) img{
		width:100%;
	}
	.sub #content .content_inner .btn_list ul{
		width:auto;
	}
	.sub #content .content_inner .btn_list ul li {
		float: none;
		margin: auto auto 12px;
		text-align: left;
		width: 280px;
	}
	.sub #content .content_inner .btn_list ul li:nth-of-type(odd) {
		margin: auto auto 12px;
	}
	
	.spNon {
		display: none;
	}
	.pcNon {
		display: block;
	}
}