@charset "utf-8";

/*==========================================================================
　　Smart phone
==========================================================================*/

@media screen and (max-width: 768px) {
body {
	background: #FFFFFF;
	min-width: 360px;
	font-size: 118%;
	line-height: 1.9em;
	}
	
#container {
	min-width: 360px;
	}

.flex-container {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-box-direction:normal;
	-moz-box-direction:normal;
	-webkit-box-orient:vertical;
	-moz-box-orient:vertical;
	-webkit-flex-direction:column;
	-moz-flex-direction:column;
	flex-direction:column;
	margin: 0;
	padding: 0;
	}

.flex-item01 {
	-webkit-box-ordinal-group: 0;
	-moz-box-ordinal-group: 0;
	-webkit-flex-order: 0;
	-moz-flex-order: 0;
	-webkit-order: 0;
	-moz-order: 0;
	order: 0;
	width: 100%;
	}

.flex-item02 {
	-webkit-box-ordinal-group: 1;
	-moz-box-ordinal-group: 1;
	-webkit-flex-order: 1;
	-moz-flex-order: 1;
	-webkit-order: 1;
	-moz-order: 1;
	order: 1;  
	width: 100%;
	}


/* common ------------------------------------------------------------------ */
	
.pc_br {
	display: none;
	}
	
.sp_br {
	display: block;
	}
	
.pc_block {
	display: none;
	}
	
.sp_block {
	display: inline-block;
	}
	
.pc_only {
	display: none;
	}
	
.sp_only {
	display: block;
	}
	
.captionL {
	text-align: left;
	}
	
.captionR {
	text-align: left;
	}
	
ol.caution {
	width: 75%;
	margin: 0 10% 0 15%;
	}


/* header ------------------------------------------------------------------ */
	
#contents_header .navi_in {
	max-width: 768px;
	}
	
#contents_header .header_navi {
	width: 100%;
	}
	
#contents_header .header_navi li.vol1 {
	width: 50%;
	}
	
#contents_header .header_navi li.vol2 {
	width: 50%;
	}
	
#contents_header .header_offer {
	top: 105%;
	right: 5%;
	color: #FFFFFF;
	}
	
#contents_header .header_wrap {
	padding: 0;
	margin: auto 0;
	width: 100%;
	position: relative;
	background: url(../images/vol1/sp_head_bk.jpg) center top no-repeat #524740;
	background-size: auto 100%;
	display: block;
	}

#contents_header .header_box {
	width: 100%;
	max-width: 768px;
	padding-top: 71.61%;
	height: auto;
	}

#contents_header .header_box .header_txt {
	width: 86.44%;
	max-width: 664px;
	top: 71.4%;
	left: 6.78%;
	}

#contents_header .header_box h2 {
	padding: 0;
	margin: 0;
	width: 86.44%;
	max-width: 664px;
	top: 100%;
	left: 6.78%;
	}



/* intro ------------------------------------------------------------------ */
	
#contents_intro .intro {
	padding: 40% 0 8%;
	width: 86%;
	}
	

/* contents ------------------------------------------------------------------ */


.cont_wrap01 {
	padding: 8% 0;
	}
	
.cont_wrap01 .cont {
	width: 86%;
	max-width: 660px;
	}
	
.cont_wrap01 .photo_box {
	padding: 8% 0;
	margin: 0;
	width: 100%;
	max-width: 660px;
	}
	
.cont_wrap01 .photo_box .boxL {
	padding: 0;
	margin: 0 0 5%;
	width: 100%;
	float: none;
	}
	
.cont_wrap01 .photo_box .boxR {
	padding: 0;
	margin: 0;
	width: 100%;
	float: none;
	}
	
.cont_wrap01 .column_wrap {
	padding: 5%;
	margin: 0 auto;
	width: 76%;
	max-width: 660px;
	}
	
.cont_wrap01 .column_wrap .column_ttl h4 {
	display: block;
	}
	
.cont_wrap01 .column_wrap .illust_box {
	padding: 5% 0 0;
	margin: 0 auto;
	width: 100%;
	max-width: 660px;
	float: none;
	}
	
.cont_wrap01 .column_wrap .illust_box .img_ttl {
	width: 110%;
	}

.cont_wrap01 .column_wrap .illust_box .icon_kakudai {
	display: none;
	}
	
.cont_wrap01 .column_wrap .illust_box a {
	pointer-events: none;
	opacity: 1.0;
	}
	
.cont_wrap03 {
	padding: 8% 0;
	}
	
.cont_wrap03 .cont {
	width: 86%;
	max-width: 660px;
	}
	
.cont_wrap03 .txt_box {
	width: 100%;
	float: none;
	}
	
.cont_wrap03 .photo_box01 {
	padding: 0;
	margin: 0 0 10%;
	width: 106.5%;
	position: relative;
	top: 0;
	left: -6.5%;
	display: table;
	}
	
.cont_wrap03 .photo_box01 li {
	padding: 0 0 0 6.5%;
	margin: 0;
	width: 29%;
	display: table-cell;
	}
	
.cont_wrap03 .photo_box02 {
	padding: 8% 0 5%;
	width: 86%;
	max-width: 660px;
	}
	
.cont_wrap03 .photo_box03 {
	padding: 0;
	width: 86%;
	max-width: 660px;
	}

.cont_wrap05 {
	padding: 8% 0;
	}
	
.cont_wrap05 .cont {
	width: 86%;
	max-width: 660px;
	}
	
.cont_wrap05 .txt_box {
	width: 100%;
	float: none;
	}
	
.cont_wrap05 .photo_box01 {
	padding: 0;
	margin: 0 0 10%;
	width: 106.5%;
	position: relative;
	top: 0;
	left: -6.5%;
	display: table;
	}
	
.cont_wrap05 .photo_box01 li {
	padding: 0 0 0 6.5%;
	margin: 0;
	width: 29%;
	display: table-cell;
	}

.cont_wrap05 .photo_box02 {
	width: 50.5%;
	max-width: 388px;
	}

.cont_wrap05 .column_wrap {
	padding: 5%;
	margin: 0 auto;
	width: 76%;
	max-width: 660px;
	}
	
.cont_wrap05 .column_wrap .column_ttl h4 {
	display: block;
	}
	
.cont_wrap05 .column_wrap .illust_box {
	padding: 5% 0 0;
	margin: 0 auto;
	width: 100%;
	max-width: 660px;
	float: none;
	}
	
.cont_wrap05 .column_wrap .illust_box .img_ttl {
	width: 110%;
	}
	
.cont h3 {
	width: 100%;
	max-width: 660px;
	margin: 0 0 8%;
	}

.img_name .position {
	font-size: 100%;
	margin-bottom: 0;
	}
	
.img_name .name {
	font-size: 100%;
	}


/* footer ------------------------------------------------------------------ */

#contents_footer {
	padding: 5% 0;
	}
	
.footer_wrap {
	width: 86%;
	max-width: 660px;
	}

.footer_link {
	margin: 0 auto 8%;
	width: 86%;
	max-width: 660px;
	}
	
.footer_link li a {
	margin: 0 auto 3%;
	width: 100%;
	font-size: 110%;
	}


#contents_footer .footer_logo {
	padding: 0;
	margin: 0 auto 8%;
	width: 67.57%;
	max-width: 446px;
	position: relative;
	}
	
#contents_footer .footer_txt {
	padding: 0;
	margin: 0 auto 8%;
	width: 100%;
	max-width: 660px;
	font-size: 90%;
	}
}

@media screen and (max-width: 680px) {
	.sp680_br {
		display: block;
		}
}

@media screen and (max-width: 480px) {
	.sp480_br {
		display: block;
		}
		
	.cont_wrap05 .photo_box02 {
		width: 86%;
		}
		
	.footer_link li a {
		font-size: 100%;
		}
}

@media screen and (max-width: 400px) {
	body {
	font-size: 100%;
	}
}