@charset "UTF-8";

/***************************************************************************************************

"CUNE ONLINE STORE"
Cascading Style Sheet - "/sp/template/css/style.css"
Ver. 2011.01

----------------------------------------------------------------------------------------------------

特集のテンプレートの設定を行います。

***************************************************************************************************/

.pc_view {
	display:block;
}

.smp_view {
	display:none;
}

.headline {
	margin-left: -10px;
	margin-right: -10px;
}

.l-default-container{
	width:100%;
}

/*-- text-area --*/
.contentsArea{
	width:100%;
	margin:0 auto;
	text-align:center;
	position: relative;
}

.contentsArea p{
	width: 100%;
	margin: 35px 0;
	font-size: 29px;
	font-weight: bold;
	line-height: 1.5em;
}

.sub_pic {
	width: 100%;
	max-width: 1000px;
	margin: 7% auto 7%;
	text-align:
	center;
}

/*.sub_pic_02 {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 3%;
	text-align:center;
}*/

.example_pic_01{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 7%;
	text-align:
	center;
}

/*	.example_pic_02{
		width: 100%;
		max-width: 1000px;
		margin: 0 auto 6%;
		text-align:
		center;
	}*/

.text_pic_03{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 5%;
	text-align:
	center;
}

/*-- text-area --*/
.contentsArea .text_area {
	max-width: 800px;
	width: 100%;
	margin: 0 auto 80px;
	padding-left: 1%;
	text-align: left;
}
.contentsArea .text_area p{
	margin: 0 auto;
	color:#000000;
	line-height: 1.5;
	font-size: 16px;
}

.contentsArea ul{
	margin: 0 auto;
}

.text_color {
	color: red;
}

/*-- Btn --*/
.contentsArea .inner #itemBtn {
	width: 40%;
	margin: 0 auto;
	margin-top: 0;
	margin-bottom: 70px;
	font-weight: normal;
}

.contentsArea #itemBtn{
	width:400px;
	background-color:#000000;
	font-size: 22px;
	color:#ffffff;
	padding: 25px 0;
}

.inner{
	max-width: 1080px;
	margin: 4% auto  0;
	margin-bottom: 50px;
}

.contentsArea a #itemBtn:hover{
	opacity:0.7;
	filter:alpha(opacity=70);
}



@media (max-width: 768px){
	.pc_view {
		display:none;
	}

	.smp_view {
		display:block;
	}

	.contentsArea p{
		margin: 6% 0;
		font-size: 26px;
	}

	.sub_pic {
		width: 100%;
		max-width: 650px;
		margin: 11% auto 7%;
		text-align:
		center;
	}

	.btn_area{
		max-width: 710px;
		margin: 0 auto 18%;
		text-align:center;
	}

	.example_pic_01{
		width: 100%;
		max-width: 710px;
		margin: 0 auto;
		text-align:
		center;
	}
	.example_pic_01 img{
	margin-bottom: 30px;
}
/*	.example_pic_02{
		width: 100%;
		max-width: 710px;
		margin: 0 auto 6%;
		text-align:
		center;
	}*/

	.text_pic_03{
		width: 100%;
		max-width: 710px;
		margin: 0 auto 6%;
		text-align:
		center;
	}

	.contentsArea .text_area {
		max-width: 640px;
		margin: 40px auto 80px auto;
	}

	.contentsArea .text_area p{
		font-size: 16px;
	}

	.contentsArea li{
		margin-bottom: 1%;
		padding-left: 1em;
		text-indent: -1em;
	}

	.contentsArea .text_area ul{
		width: 87%;
	}

	.contentsArea .inner #itemBtn {
		width: 100%;
		margin: 0 auto;
		margin-bottom: 5px;
	}

	.contentsArea #itemBtn{
		font-size: 18px;
	}
	.inner{
		max-width: 1080px;
		margin: 16% auto  0;
		margin-bottom: 80px;
	}
}


@media (max-width: 425px){
	.smp-380_view {
		display:block;
	}

	.contentsArea p{
		margin: 7% 0 10%;
		font-size: 13px;
		font-weight: 800;
		line-height: 1.7em;
	}

	.sub_pic {
		width: 100%;
		max-width: 350px;
		margin: 12% auto 11%;
		text-align:
		center;
	}

	.example_pic_01{
		max-width: 345px;
		margin: 0 auto;
		text-align:
		center;
	}
	.example_pic_01 img{
	margin-bottom: 30px;
}
/*	.example_pic_02{
		max-width: 345px;
		margin: 0 auto 12%;
		text-align:
		center;
	}*/

	.text_pic_03{
		max-width: 345px;
		margin: 0 auto 10%;
		text-align:
		center;
	}

	.contentsArea .text_area {
		margin: 6% auto 12%;
		padding-left: 0;
	}

	.contentsArea .text_area p{
		font-size: 10px;
		line-height: 1.3;
	}

	.contentsArea li{
		margin-bottom: 2%;
		padding-left: 1em;
		text-indent: -1em;
	}
	.contentsArea .text_area ul{
		width: 87%;
	}
	.inner{
		max-width: 1080px;
		margin: 0 auto 20%;
	}
}