@charset "UTF-8";

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

Each Page CSS

for http://www9.nhk.or.jp/nw9/haruchan/
coded by d-spica at 2016-03-10

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


@import url(default.css);
@import url(base.css);


#page section.main {
	margin: 0 442px 0 336px;
	width: 502px;
	min-height: 450px;
}

#page section.main > h1 {
	margin-bottom: 15px;
	background: url(../img/bg-hd.png) no-repeat 0 0;
	background-size: 100% 42px;
	padding: 10px;
	white-space: nowrap;
	text-align: center;
	font-family: inherit;
	font-size: 147%;
	color: #FFF;
}

#page section.main > h1 img {
	display: block;
	margin: 5px auto -5px;
	width: 27%;
}

#page section.main > h1.second {
	margin-top: 30px;
}

#page section.main > p {
	text-align: center;
	color: #EE69A0;
}

#page section.main section {
	margin: 30px 0 80px;
	background: #FFF;
	padding: 20px 0 20px;
}

#page section.main section figure {
	margin: 0 auto;
	max-width: 440px;
	text-align: center;
}

#page section.main section figure img {
}

#page section.main section aside {
	padding: 10px 20px;
}

#page section.main section aside dl {
	border-bottom: solid 1px #FCAAC8;
	padding: 15px 0;
}

#page section.main section aside dt {
	display: inline-block;
	margin-right: 8px;
	vertical-align: middle;
}

#page section.main section aside dd {
	display: inline-block;
	margin-right: 12px;
	vertical-align: middle;
	color: #EE69A0;
}

#page section.main section aside ul {
	display: inline-block;
}

#page section.main section aside li {
	display: inline-block;
	margin-right: 3px;
}

#page section.main section aside li img {
	width: 50px;
}

#page section.main ul.list {
	overflow: hidden;
}

#page section.main .list li {
	float: left;
	margin: 0 1% 15px;
	width: 31.3%;
	text-align: center;
	color: #999;
}

#page section.main .list li:hover {
	opacity: 0.7;
	cursor: pointer;
}

#page section.main .list li:nth-child(3n+1) {
	clear: left;
}

#page section.photos {
	margin: 0 95px 30px 336px;
	min-height: 450px;
}

#page section.photos .main-photo {
	margin: 0 auto 30px;
	max-width: 578px;
	font-size: 108%;
}

#page section.photos dt {
	margin-bottom: 10px;
	background: #FFF;
	padding: 20px;
}

#page section.photos dd span {
	display: block;
	margin-bottom: 5px;
}

#page section.photos dd em {
	display: block;
	color: #EE69A0;
}

#page section.photos dd div {
	margin-top: 15px;
	border-top: solid 1px #FCAAC8;
	padding-top: 15px;
}

#page section.photos dd div em {
	display: inline;
	margin-right: 8px;
	color: #666;
}

#page section.photos dd div ul {
	display: inline-block;
	vertical-align: middle;
	white-space: nowrap;
}

#page section.photos dd div li {
	display: inline-block;
	margin-right: 3px;
}

#page section.photos dd div li img {
	width: 50px;
}

#page section.photos ul.list {
	overflow: hidden;
}

#page section.photos .list > li {
	position: relative;
	overflow: hidden;
	float: left;
	background: #FFF;
	padding-bottom: 16.66%;
	width: 16.66%;
	cursor: pointer;
}

#page section.photos .list > li > img {
	position: absolute;
	top: 0;
	left: 0;
	margin-left: -17.25%;
	max-width: none;
	width: 134.5%;
}

#page section.photos .list > li > span {
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(216,74,153,0.9);
	width: 100%;
	height: 60%;
	padding-top: 40%;
	text-align: center;
	color: #FFF;
	display: none;
}

#page section.photos .list > li:hover > span {
	display: block;
}

#page section.photos .list li.current {
	background: #FFF url(../img/bt-close-photos.png) no-repeat 50% 50%;
}

#page section.photos .list li.current img {
	opacity: 0.01;
}

#page section.photos .list li.current span {
	display: none;
}

#page section.photos .list li.wide {
	float: none;
	padding-bottom: 0;
	width: 100%;
	cursor: default;
}

#page section.photos .list .wide dl {
	font-size: 108%;
}
#page section.photos .list .wide.left dl {
	text-align: right;
}

#page section.photos .list .wide dt {
	display: inline-block;
	margin-bottom: 0;
	padding: 0;
	width: 50%;
	vertical-align: middle;
}

#page section.photos .list .wide dd {
	display: inline-block;
	vertical-align: middle;
	margin: 0 5%;
	width: 39%;
	text-align: left;
}
	
#page section.photos .list .wide div {
	margin-top: 10px;
	border-top: none;
	padding-top: 0;
}
	
#page section.character {
	margin: 0 95px 30px 336px;
	min-height: 450px;
}

#page section.character dl {
	overflow: hidden;
	margin-bottom: 10px;
	background: #FFF;
	padding: 15px 10px 10px 0;
	display: none;
}

#page section.character dt {
	margin-bottom: 5px;
	color: #EE69A0;
}

#page section.character dt img {
	float: left;
	margin: -15px 5% -10px 0;
	max-width: 30%;
	width: 120px;
}

#page section.character dd {
	overflow: hidden;
}

@media screen and (max-width:1280px) {
	
#page section.main {
	margin: 0;
}

#page section.photos {
	margin: 0 auto 30px;
	max-width: 850px;
}

#page section.character {
	margin: 0 auto 30px;
	max-width: 850px;
}


}

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

#page section.main {
	margin: 0 auto;
	max-width: 502px;
	width: auto;
}

#page section.main ul.list {
	min-height: 100px;
}

#page section.photos .list .wide dd {
	margin: 0 3%;
	width: 43%;
}

}

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

#page section.photos .list > li {
	padding-bottom: 20%;
	width: 20%;
}

#page section.photos .list.wide dd div em {
	display: block;
	margin-bottom: 5px;
}

#page section.photos .list .wide dd div li img {
	width: 30px;
}

#page section.character figure {
	margin-bottom: 30px;
	display: none;
}

#page section.character figure.expansion {
	overflow: scroll;
	height: 420px;
}

#page section.character figure.expansion img {
	max-width: none;
	width: 800px;
}

#page section.character dl {
	display: block;
}

}

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

#page section.photos .list > li {
	padding-bottom: 25%;
	width: 25%;
}

}


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

#page section.main > h1 {
	font-size: 124%;
}

#page section.main section {
	margin: 30px 0 60px;
}

#page section.main section aside {
	padding: 5px 15px;
}

#page section.main section aside li img {
	width: 30px;
}

#page section.main .list li {
	width: 48%;
}

#page section.main .list li:nth-child(3n+1) {
	clear: none;
}

#page section.main .list li:nth-child(2n+1) {
	clear: left;
}

#page section.photos .list > li {
	padding-bottom: 33.3%;
	width: 33.3%;
}

#page section.photos dt {
	padding: 10px;
}

#page section.photos dd div li img {
	width: 30px;
}


#page section.photos .list .wide dt {
	display: block;
	width: auto;
}

#page section.photos .list .wide dd {
	display: block;
	margin: 15px 3%;
	width: auto;
}


}

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

#page section.photos .list > li {
	padding-bottom: 50%;
	width: 50%;
}

}