@charset "utf-8";
/* =======================================
	for special page
========================================== */

/** sp heading **/
#sp_page {
	width: 96%;
	max-width: 700px;
	padding: 0px 2%;
	line-height: 150%;
	font-size: 14px;
}
@media screen and (max-width: 699px) {
	#sp_page *:not(.swiper-wrapper) {
    	max-width: 100% !important;
	}
	#sp_page *:not(.swiper-button-next):not(.swiper-button-prev):not(.swiper-pagination-bullet):not(.list_name) {
		/*max-width: 100% !important;*/
		height: auto;
	}
	#sp_page {
		margin: 10px auto 40px;
		line-height: 150%;
	}
}
@media screen and (min-width: 700px) {
	#sp_page {
		margin-bottom: 70px;
		line-height: 150%;
	}
	#sp_page .sp_recommend li,
	#sp_page .sp_lineup li {
		font-size: 0.8em;
	}
}
#sp_page h2, #sp_page h3, 
#sp_page h4, #sp_page h5, #sp_page h6 {
	font-size: 100%;
	font-weight: normal;
}
#sp_page strong {
	font-weight: bold;
}

/** パンくず～タイトル **/
#sp_page .entry_category {
	display: block;
	float: left;
	font-size: 14px;
}
#sp_page .entry_date {
	display: block;
	float: right;
	margin-bottom: 5px;
	font-size: 14px;
}
#sp_page .entry_name {
	display: block;
	clear: both;
    font-weight: bold;
    font-size: 1.3em;
    line-height: 1.5em;
    margin-bottom: 4px;
}
#sp_page #dtl_ttl {
	font-size: 14px;
	width: 650px;
	overflow: visible;
	margin-bottom: 30px;
}
#sp_page #dtl_ttl h2 {
	display: inline;
}
#sp_page .back_topiclist {
    text-align: center;
    background-image: url("/html/user_data/wwwcommon/img/topics/bnr_back.jpg");
    background-repeat: no-repeat;
    background-position: center;
}

#sp_page #h_msg,
#sp_page .h_msg {
	color: #666;
	margin: 1em auto;
}

#sp_page #choice {
	margin-bottom: 6em;
}

/** 各ページ おすすめリスト/LINE UPリスト共通 **/
#sp_page .sp_recommend ul,
#sp_page .sp_lineup ul {
	width: 100%;
	overflow: hidden;
}
#sp_page .sp_recommend li,
#sp_page .sp_lineup li {
	color: #666;
	text-align: center;
	/*padding: 2% 0 0 2%;*/
	padding: 1%;
	display:inline-block; 
	*display:inline; 
	*zoom:1;
	vertical-align:top;
	margin: 1%;
	border: 1px solid #ddd;
}
#sp_page .sp_recommend li .price,
#sp_page .sp_lineup li .price {
	text-align: right;
	padding-right: 5px;
	font-weight: normal;
}
#sp_page .sp_recommend li .list_catch,
#sp_page .sp_lineup li .list_catch,
#sp_page .sp_recommend li .list_name,
#sp_page .sp_lineup li .list_name {
	text-align: left;
}
#sp_page .sp_recommend li .list_catch,
#sp_page .sp_lineup li .list_catch {
}
#sp_page .sp_recommend li .list_name,
#sp_page .sp_lineup li .list_name {
	font-size: 95%;
	line-height: 120%;
	padding-top: 5px;
}
#sp_page .sp_recommend li a,
#sp_page .sp_lineup li a {
	display: table-cell;
}
@media screen and (max-width: 699px) {
	#sp_page .sp_recommend li a,
	#sp_page .sp_lineup li a {
		font-size: 0.9em !important;
	}
	#sp_page .sp_recommend li .price,
	#sp_page .sp_lineup li .price {
		font-size: 1.3em;
		padding-top: 5px;
	}
}
@media screen and (min-width: 700px) {
	#sp_page .sp_recommend li a,
	#sp_page .sp_lineup li a {
		font-size: 1.1em;
	}
	#sp_page .sp_recommend li .price,
	#sp_page .sp_lineup li .price {
		font-size: 1.4em;
	}
}
#sp_page .sp_recommend li img,
#sp_page .sp_lineup li img {
	width: 95%;
}

#sp_page .img_list {
	margin-bottom: 1em;
}

/** 文字数オーバーした商品名を三点リーダーで短縮その1 **/
/*
#sp_page .sp_recommend li .list_name {
	background: #fff;
	overflow: hidden;
	width: 100%;
}

#sp_page .sp_recommend li .list_name {
	font-size: 12px;
    line-height: 1.4;
    height: 34px;	/＊ 12px(font-size)*1.4(line-height)*2(行) ＊/
    position: relative;
}
#sp_page .sp_recommend li .list_name:before,
#sp_page .sp_recommend li .list_name:after {
	background: #fff;
	position: absolute;
}
#sp_page .sp_recommend li .list_name:before {
	content: "s";
	top: 17px;	/＊ 12px(font-size)*1.4(line-height)*(2-1(行)) ＊/
	right: 0;
}
#sp_page .sp_recommend li .list_name:after {
	content: "";
	height: 100%;
	width: 100%;
}
*/
/** /文字数オーバーした商品名を三点リーダーで短縮その1 **/

/** 文字数オーバーした商品名を三点リーダーで短縮その2 **/
#sp_page .sp_recommend li .list_name,
#sp_page .sp_lineup li .list_name {
	/*config*/
	line-height: 1.5;
	height: 3em;
	background-color: #fff;
	/*config end*/

	position: relative;
	padding-right: 1em;
	overflow: hidden;
}
#sp_page .sp_recommend li .list_name:before,
#sp_page .sp_lineup li .list_name:before {
	content: "...";
	position: absolute;
	right: 0;
	bottom: 0;
	display: inline-block;
	width: 1em;
}
#sp_page .sp_recommend li .list_name:after,
#sp_page .sp_lineup li .list_name:after {
	content: "";
	position: relative;
	right: -1em;
	float: right;
	width: 1em;
	height: 100%;
	background-color: inherit;
}
/** /文字数オーバーした商品名を三点リーダーで短縮その2 **/

/** 各ページ おすすめリスト **/
#sp_page .sp_recommend {
	margin-bottom: 4em;
}
#sp_page .sp_recommend ul {
	background-color: #FFD1D1;
}
@media screen and (max-width: 479px) {
	#sp_page .sp_recommend li {
		width: 45%;
	}
}
@media screen and (min-width: 480px) {
	#sp_page .sp_recommend li {
		width: 28.5%;
	}
}

/** 各ページ LINE UPリスト用 **/
#sp_page .sp_lineup ul {
	background-color: #F7F7F7;
}
@media screen and (max-width: 479px) {
	#sp_page .sp_lineup li {
		width: 45%;
	}
}
@media screen and (min-width: 480px) and (max-width: 699px) {
	#sp_page .sp_lineup li {
		width: 28.5%;
	}
}
@media screen and (min-width: 700px) {
	#sp_page .sp_lineup li {
		width: 20%;
	}
}

/** ページTOPへ **/
#sp_page .top {
	text-align: right;
	margin: 3em auto 4em;
}


/** その他の特集へのリンク **/
#sp_page .another_sp_info {
	margin-top: 4em;
}
#sp_page .another_sp_info .another_sp_info_title {
	font-size: 1.8em;
	line-height: 2em;
	font-family: 'ＭＳ 明朝';
	font-weight: bold;
}
@media screen and (max-width: 699px) {
	#sp_page .another_sp_info .another_sp_info_title {
		font-size: 1.5em;
	}
}
#sp_page .another_sp_info ul {
	width: 100%;
	overflow: hidden;
}
#sp_page .another_sp_info ul li {
	width: 46%;
	text-align: center;
	padding: 2% 0 0 2%;
	display:inline-block; 
	*display:inline; 
	*zoom:1;
	vertical-align:top
}
#sp_page .back_topiclist {
	margin-top: 30px;
	font-size: 14px;
}

/* バージョン2 横幅620pxパターン */
#sp_page.sp_v2 {
	max-width: 620px;
	font-size: 14px;
}
@media screen and (max-width: 619px) {
	#sp_page.sp_v2 * {
		max-width: 100% !important;
		height: auto;
	}
	#sp_page.sp_v2 {
		margin: 10px auto 40px;
		line-height: 150%;
		font-size: 14px;
	}
	#sp_page.sp_v2 #dtl_ttl {
		color: #603E7D;
	}
}
@media screen and (min-width: 620px) {
	#sp_page.sp_v2 {
		margin-bottom: 20px;
		line-height: 150%;
	}
	#sp_page.sp_v2 .sp_recommend li,
	#sp_page.sp_v2 .sp_lineup li {
		font-size: 0.8em;
	}
}
#sp_page.sp_v2 #h_msg,
#sp_page.sp_v2 .h_msg {
	color: #000;
	margin: 1.5em auto 2em;
}
#sp_page.sp_v2 #h_msg {
	margin-bottom: 4em;
}
#sp_page.sp_v2 h3 img {
	margin-bottom: 1em;
}
#sp_page .h_msg p,
#sp_page.sp_v2 .h_msg p {
	margin-bottom: 1em;
}
#sp_page.sp_v2 .top {
	font-size: 12px;
	margin-bottom: 5em !important;
}
