﻿/*-----------------------------------------------------	*/
/*	archive_details.css						*/
/*-----------------------------------------------------	*/

/* ------ titArea ------ */

hgroup {
	background-image:none;
}
#mainTit {
	font-size:250%;
	font-weight:bold;
	line-height:110%;
	padding: 40px 0 10px;
	color:#000;
}
#mainTit span {
	font-size:50%;
}
#mainLead {
}
#point {
	text-align:center;
	padding: 20px 5%;
	font-size: 140%;
	font-weight: bold;
	color: red;
}

/* ------ detailsArea ------ */

#detailsArea {
	width:960px;
	margin:0 auto;
	padding:0 10px;
}
#chirashi {
	width:260px;
	padding:0 10px;
	float:left;
}
#chirashi02 {
	width:46%;
	padding:0 2% 2%;
	float:left;
}
#chirashi03 {
	width:60%;
	padding:0 2% 2%;
	margin:0 auto;
}
#cast,
#staff {
	width:320px;
	padding:0 10px;
	float:left;
}
#detailsArea h3 {
	font-size:120%;
	font-weight:bold;
	color:#000;
	padding-bottom:10px;
	border-bottom:#000 solid 3px;
}
#cast h4 {
	padding:5px 0;
	border-bottom:#666 dotted 1px;
	font-size:90%;
}
#cast,#staff h5 {
	padding:5px 0;
	border-bottom:#666 dotted 1px;
}
#detailsArea dl {
	padding:5px 0;
	border-bottom:#666 dotted 1px;
}
#detailsArea dl.dLine {
	border-bottom:#666 double 4px;
}
#detailsArea dt {
	float:left;
	width:90px;
	font-size:75%;
	line-height:120%;
	padding:3px 0;
}
#detailsArea dd {
	float:left;
	width:220px;
	font-size:90%;
	line-height:140%;
	padding:3px 0 3px 10px;
}
#detailsArea dd span {
	font-size:70%;
	vertical-align: super;
}
#koujyou {
	clear:both;
	padding:20px 10px;
}
#koujyou div {
	background-color:#eee;
	padding:20px 40px 40px;
}
#koujyou div h2 {
	padding-bottom:10px;
	max-width: 300px;
	margin: 0 auto;
}
#koujyou div #leadTit {
	font-size:140%;
	font-weight:bold;
	text-align:center;
	padding-bottom:20px;
}
#koujyou div #leadTit02 {
	font-size:140%;
	font-weight:bold;
	text-align:center;
	padding:40px 0 20px;
}
#koujyou div #leadTit02 img{
	max-width: 240px;
	margin: 0 auto;
}
#koujyou div span.uLine {
	text-decoration:underline;
}

#bottomNav {
	padding:20px 0 40px;
}
#bottomNav li {
	width:140px;
	height:280px;
	padding:0 10px;
	float:left;
	font-size:80%;
	line-height:140%;
	list-style: none;
}
#bottomNav li h4 {
	padding: 0;
	margin: 0;
}
#bottomNav li a {
	color:#292F33;
}
#bottomNav li a:hover {
	color:#CC0000;
}
.bottomNavBox {
	border-top:#fff solid 10px;
}
.bottomNavBox:hover {
	border-top:#e40011 solid 10px;
}
#bottomNavTit {
	width:320px;
	margin:0 auto;
	padding-bottom:10px;
}
.pt30 {
	padding-top:30px;
}

/*-----------------------------------------------------	*/
/*	for - 1280px					*/
/*-----------------------------------------------------	*/

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

}

/*-----------------------------------------------------	*/
/*	for - 980px					*/
/*-----------------------------------------------------	*/

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

#detailsArea {
	width:680px;
}
#chirashi {
	float:none;
	width:660px;
	clear:both;
}
#chirashi h2 img {
	width:100%;
	margin:0 auto;
	padding-top:20px
}

}

/*-----------------------------------------------------	*/
/*	for - 800px					*/
/*-----------------------------------------------------	*/

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

#point {
	font-size: 120%;
}

}

/*-----------------------------------------------------	*/
/*	for - 568px					*/
/*-----------------------------------------------------	*/

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

/* ------ titArea ------ */

#mainTit {
	font-size:115%;
	font-weight:bold;
	line-height:110%;
	padding: 20px 0 10px;
}
#mainTit span {
	font-size:70%;
}
#mainLead {
	font-size:100%;
}
#point {
	font-size: 100%;
}

/* ------ detailsArea ------ */

#detailsArea {
	width:320px;
	padding:0;
}
#detailsArea h3 {
	font-size:100%;
}
#staff {
	padding-top:20px;
}
#chirashi {
	width:320px;
}
#chirashi02 {
	width:320px;
	padding:0 0;
	float:none;
	margin: 0 auto;
}
#chirashi h2 img {
	width:300px;
}
#koujyou div {
	padding:20px 20px;
}
#koujyou div #leadTit {
	text-align:justify;
}

}

/*-----------------------------------------------------	*/
/*	for - 480px					*/
/*-----------------------------------------------------	*/

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

}

