@charset "utf-8";
/* CSS Document */

/******************************************
style
******************************************/
.float_l{
	float:left;
}
.float_r{
	float:right;
}
.long_link{
	word-break: break-all;
}

/******************************************
structure
******************************************/
section.section{
	width:auto;
}

.season-container{
	color:#333;
	font-size:1.1em;
}

.breadcrumb,
.pagetitle{
	margin:auto;
	
	width:950px;
}

.season-section,
.season-contents{
	margin:0 auto;
	padding-right:30px;
	padding-bottom:30px;
	padding-left:30px;

	width:890px;
}
.season-section.noborder,
.season-contents.noborder{
	background-image:none;
}

.season-section{
	padding-top:60px;
	line-height:180%;
}

#season-section0{
	padding-top:0;
}

.season-footer{
	background:none;
}


/******************************************
nav
******************************************/
.fixed-nav{
	z-index:600;
	z-index: 2; /* overwrite */
}
.fixed-nav.fixed{
	position:fixed;
}

/* season-nav
---------------------------------------- */
.season-nav{
	position:fixed;

	right:10px;
	width:auto;
	bottom:20px;
	bottom: 80px; /* overwrite */
}
.season-nav .tab-menu-li{
	position:relative;
	
	width:54px;
	height:50px;
}
.season-nav .tab-contents{
	right:100%;
	top:-70%;
}

.tab-menu-li.spring .tab-menu{
	background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_01_pc.png);
}
.tab-menu-li.spring .tab-menu.active{
	background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_01_on_pc.png);
}
.tab-menu-li.summer .tab-menu{
	background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_02_pc.png);
}
.tab-menu-li.summer .tab-menu.active{
	background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_02_on_pc.png);
}
.tab-menu-li.autumn .tab-menu{
	background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_03_pc.png);
}
.tab-menu-li.autumn .tab-menu.active{
	background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_03_on_pc.png);
}
.tab-menu-li.winter .tab-menu{
	background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_04_pc.png);
}
.tab-menu-li.winter .tab-menu.active{
	background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_04_on_pc.png);
}
.tab-menu-li.top a{
	width:100%;
	height:100%;
	display:block;
	background-size:contain;
	background-repeat:no-repeat;
	background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_00_pc.png);
}

/* section-nav
---------------------------------------- */
.section-nav{
	float:left;
	background-repeat:no-repeat;
	text-indent:-9999px;
	
	width:24px;
	/*height:100px;*/
	margin:0 25px 0 15px;
	/*padding:20px 0;*/
}
.section-nav li.arrow{
	height:20px;
}
.section-nav li{
	height:26px;
}
.section-nav li a{
	display:block;
	width:100%;
	height:100%;
}

/******************************************
contents
******************************************/
/* season-section
---------------------------------------- */
.season-container .pagetitle,
.season-section h2{
	background-repeat:no-repeat;
	text-indent:-9999px;
}
.season-container .pagetitle{
	padding-top:0;
}
.season-section h2{
	padding-bottom:30px;
}
.season-section .float_r{
	margin-left:10px;
}
.season-section .section-text{
	padding-left:64px;
}
.section-text p{
	padding-bottom:2em;
}

/* season-contents
---------------------------------------- */
.season-contents{
	padding-top:20px;
}

.season-contents h2{
	font-size:1.33em;/*h2:1.5emを基準に24pxに*/
	margin-bottom:14px;
}
.season-contents h2 .txt-big{
	font-size:1.88em;/*h2:1.5emを基準に34pxに*/
}

.related-items{
	width:950px;
	margin:auto;
}
.related-items .ttl{
	margin-top:10px;
	margin-bottom:1em;
	width:104%;

	font-size:16px;/*16pxを基準に14pxに*/
}
.related-items .ttl .txt-small{
	font-size:0.625em;
}
.related-items li{
	float:left;

	width:180px;
	margin-right:70px;
}
.related-items li p{
	font-size:14px;/*16pxを基準に14pxに*/
}
.related-items li.last{
	margin-right:0;
}
.related-items li:last-child{
	margin-right:0;
}

p{
font-size:16px;
}

/******************************************
season-footer
******************************************/
.season-notice{
	font-size:80%;
}


/* ===================================================================================
for SP max-width: 640px
=================================================================================== */
@media screen and (max-width: 640px) {

/******************************************
structure
******************************************/
	.responsive section.section{
		padding:0;
	}

	.pagetitle,
	.season-section,
	.season-contents{
		width:auto;
		padding-right:60px;
		padding-bottom:20px;
		padding-left:60px;
	}

	.season-container{
		font-size:2em;
	}
	
	.season-section{
		margin-top:-20%;
		padding-top:20%;
	}
	#season-section0.fixed{
		padding-top:20%;
		padding-top: 0; /* overwrite */
	}

/******************************************
nav
******************************************/
	.season-section .arrow{
		text-align:center;
	}
	.season-section .arrow img{
		margin:auto;
		width:17%;
		min-width:40px;
		height:auto;
	}

/* season-nav
---------------------------------------- */
	.season-nav{
		right:0;
		width:69px;
		bottom:5px;
		bottom: 60px; /* overwrite */
	}
	.season-nav.fixed{
		padding-top:16%;
	}
	
	.season-nav .tab-menu-li{
		width:100%;
		height:0;
		padding-top:90%;
		margin-bottom: 10px;
	}
	
	#season-menu .tab-menu-li .tab-menu,
	#season-menu .tab-menu-li.top a{
		position: absolute;
		top:0;
		height:0;
		padding-top:100%;
		background-size:contain;
	}

	.tab-menu-li.spring .tab-menu{
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_01_sp.png);
	}
	.tab-menu-li.spring .tab-menu.active{
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_01_on_sp.png);
	}
	.tab-menu-li.summer .tab-menu{
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_02_sp.png);
	}
	.tab-menu-li.summer .tab-menu.active{
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_02_on_sp.png);
	}
	.tab-menu-li.autumn .tab-menu{
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_03_sp.png);
	}
	.tab-menu-li.autumn .tab-menu.active{
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_03_on_sp.png);
	}
	.tab-menu-li.winter .tab-menu{
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_04_sp.png);
	}
	.tab-menu-li.winter .tab-menu.active{
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_04_on_sp.png);
	}
	.tab-menu-li.top a{
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/btn_season-section_00_sp.png);
	}
	
	
	.tab-contents{
		width:280%;/*nav=documentの20%(640pxの時128px）基準*/
		min-width:240px;
		height:280%;/*nav=documentの20%基準、4列用*/
		min-height:150px;
	}
	#tab-summer.tab-contents{
		width:280%;
		min-width:240px;
		min-height:150px;
	}

	.tab-contents.wait{
		background-size:70%;
	}

	.tab-contents li{
		position:relative;
		width:100%;
		height:0;
		background-position:left center;
		background-repeat:no-repeat;
		padding-top:12%;
		margin-left:5%;
		margin-bottom:0;
	}
	
	.tab-contents .title,
	.tab-contents li a,
	.tab-contents li span.none{
		background-repeat:no-repeat;
		background-size:contain;
	}
	.tab-contents li a,
	.tab-contents li span.none{
		position:absolute;
		top:0;
		height:0;
	}

	#tab-spring .title{
		width:90%;
		height:29%;/*4列用*/
		margin:2% auto 2% 5%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/ttl_tab-spring_sp.png);
	}
	#tab-spring .spring01 a{
		width:85%;
		padding-top:13%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/txt_tab-spring_01_sp.png);
	}
	#tab-spring .spring02 a{
		width:85%;
		padding-top:13%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/txt_tab-spring_02_sp.png);
	}
	#tab-spring .spring03 a{
		width:85%;
		padding-top:13%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/txt_tab-spring_03_sp.png);
	}
	#tab-spring .spring04 a{
		width:85%;
		padding-top:13%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/txt_tab-spring_04_sp.png);
	}

	#tab-summer .title{
		width:90%;
		height:29%;/*4列用*/
		margin:2% auto 2% 5%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/ttl_tab-summer_sp.png);
	}
	#tab-summer .summer01 a{
		width:85%;
		padding-top:13%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/txt_tab-summer_01_sp.png);
	}
	#tab-summer .summer02 a{
		width:85%;
		padding-top:13%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/txt_tab-summer_02_sp.png);
	}
	#tab-summer .summer03 a{
		width:85%;
		padding-top:13%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/txt_tab-summer_03_sp.png);
	}
	#tab-summer .summer04 a{
		width:85%;
		padding-top:13%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/txt_tab-summer_04_sp.png);
	}

	#tab-autumn .title{
		width:90%;
		height:29%;/*4列用*/
		margin:2% auto 2% 5%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/ttl_tab-autumn_sp.png);
	}
	#tab-autumn .autumn01 a{
		width:85%;
		padding-top:13%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/txt_tab-autumn_01_sp.png);
	}
	#tab-autumn .autumn02 a{
		width:85%;
		padding-top:13%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/txt_tab-autumn_02_sp.png);
	}
	#tab-autumn .autumn03 a{
		width:85%;
		padding-top:13%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/txt_tab-autumn_03_sp.png);
	}
	#tab-autumn .autumn04 a{
		width:85%;
		padding-top:13%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/txt_tab-autumn_04_sp.png);
	}

	#tab-winter .title{
		width:90%;
		height:29%;/*4列用*/
		margin:2% auto 2% 5%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/ttl_tab-winter_sp.png);
	}
	#tab-winter .winter01 a{
		width:85%;
		padding-top:13%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/txt_tab-winter_01_sp.png);
	}
	#tab-winter .winter02 a{
		width:85%;
		padding-top:13%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/txt_tab-winter_02_sp.png);
	}
	#tab-winter .winter03 a{
		width:85%;
		padding-top:13%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/txt_tab-winter_03_sp.png);
	}
	#tab-winter .winter04 a{
		width:85%;
		padding-top:13%;
		background-image:url(/consumer/satellite/lifestyle/articles/madohint/shared_file/img/txt_tab-winter_04_sp.png);
	}

/* section-nav
---------------------------------------- */
	.section-nav{
		float:none;
		width:100%;
		/*height:80px;*/
		margin:0;
		padding:0;
	}
	.section-nav.fixed{
		top:0;
	}
	.section-nav ul{
		padding:0 55px;
	}
	.section-nav li{
		position:relative;
		float:left;
		/*
		width:20%;
		height:20%;
		padding-left:5%;
		margin:5px 0;
		*/
		width:15%;
		height:0;
		padding-top:15%;
		margin-top:10px;
		margin-right:13%;
		margin-bottom:10px;
		overflow:hidden;
		text-align:center;
	}
	.section-nav li:last-of-type{
		margin-right:0;
	}
	.section-nav li a{
		height:0;
	}
	.section-nav li.on a{
		/*background-position:0 -70px;*/
		top:-100%;
		padding-top:200%;
	}

	.section-nav li a{
		position:absolute;
		top:0;
		/*
		width:70px;
		height:70px;
		background-size:100%;
		*/
		background-size:cover;
		background-repeat:no-repeat;
		padding-top:100%;
	}

/******************************************
contents
******************************************/
/* season-section
---------------------------------------- */
	.season-section .section-text{
		padding-left:0;
	}

	.season-section img{
		width:auto;

		margin:auto;
	}
	.season-section h2{
		height:0;
		max-width:100%;
		background-size:contain;
		margin-bottom:1em;
	}
	.section-text p{
		padding-bottom:1em;
	}
	
	#season-section0{
		padding-bottom:2em;
	}

	/* season-contents
	---------------------------------------- */
	.season-contents{
		padding-top:25px;
	}

	.season-contents h2{
		font-size:1em;
	}
	.season-contents h2 .txt-big{
		font-size:1.7em;
	}

	ul.related-items li{
		width:48%;
		margin-right:4%;
		margin-bottom:4%;
	}
	ul.related-items li:nth-child(2n+2){
		margin-right:0;
	}
	.related-items{
		width:100%;
	}
	.related-items li img{
		width:100%;
		height:auto;
	}
	.season-contents h2 .txt-big{
		line-height:120%;
	}
}

@media screen and (max-width: 480px) {
	.season-container{
		font-size:1.3em;
	}
}
@media screen and (max-width: 400px) {
	.section-nav ul{
		padding:0 30px;
	}

	.pagetitle,
	.season-section,
	.season-contents{
		padding-left:30px;
	}
}