@charset "utf-8";

/*============================
main_image
============================*/
.main_image {
	background: url(../01/images/main_image.jpg) no-repeat center center;
	background-size: cover;
}

.cont h1 {
	width: 1040px;
	padding: 175px 0;
	height: inherit;
	font-family : YuMincho, 'Yu Mincho', serif;
	color: #517e9d;
	font-weight: bold;
	font-size: 36px;
	line-height: 140px;
	background: url(../images/detail/title_bg.png) center left repeat-x;
}

/*============================
primary
============================*/
#detail h2 {
	background: 
		url(../images/detail/title.png) top center no-repeat,
		url(../images/title_mark.png) right bottom no-repeat;
	background-size: 218px, 30px;
}

#detail h3 {
	font-size: 18px;
	font-weight: bold;
	text-align: left;
	width: 230px;
	border-bottom: 2px solid #709ebe;
	margin-left: 24px;
	padding-left: 15px;
	position: relative;
	margin-bottom: 10px;
}

#detail h3:after {
	content: '';
	display: block;
	width: 30px;
	height: 30px;
	background: url(../../images/common/star_blue.png) center center no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 0;
	left: -24px;
}

#detail .inner {
	margin-top: 20px;
}

#outline {
	width: 445px;
	float: left;
}

#comment {
	width: 445px;
	float: right;
}

#comment div {
	background: #eee;
	border: 2px solid #9cc080;
	padding: 30px;
	text-align: left;
}

#comment div p {
	margin-bottom: 10px;
}

#comment div p:last-of-type {
	margin-bottom: 0;
}

#detail .page_select {
	border-top: 2px solid #709ebe;
	border-bottom: 2px solid #709ebe;
	margin-top: 50px;
	overflow: hidden;
	background: url(../images/detail/pageselector_shake.png) center center no-repeat;
	background-size: 52px;
}

#detail .page_select li {
	width: 180px;
	float: left;
}

#detail .page_select li:last-of-type {
	float: right;
}

#detail .page_select li a {
	display: block;
	height: 0;
	overflow: hidden;
	padding-top: 40px;
	background: url(../images/detail/pageselector_next.png) center left no-repeat;
	background-size: 174px;
}

#detail .page_select li:last-of-type a {
	background: url(../images/detail/pageselector_prev.png) center right no-repeat;
	background-size: 152px;
}



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

/*============================
main_image
============================*/
.main_image {
	background: url(../01/images/main_image.jpg) no-repeat center center;
	background-size: cover;
	padding: 80px 0;
}

.cont h1 {
	width: 92%;
	padding: 0;
	font-size: 24px;
	line-height: 60px;
	background: url(../images/detail/title_bg.png) center left repeat-x;
	background-size: contain;
}

/*============================
primary
============================*/
#detail h2 {
	background: 
		url(../images/detail/title.png) top center no-repeat,
		url(../images/title_mark.png) right bottom no-repeat;
	background-size: 37.826086956%, 6%;
}

#detail .inner {
	margin-top: 40%;
}

#outline {
	width: 100%;
	float: none;
}

#comment {
	width: 100%;
	float: none;
	margin-top: 40px;
}

#detail .page_select {
	background: url(../images/detail/pageselector_shake.png) center center no-repeat;
	background-size: 10%;
}

#detail .page_select li {
	width: 40%;
}

#detail .page_select li a {
	background: url(../images/detail/pageselector_next.png) center left no-repeat;
	background-size: 100%;
}

#detail .page_select li:last-of-type a {
	background: url(../images/detail/pageselector_prev.png) center right no-repeat;
	background-size: 90%;
}

	
}