@charset "Shift_JIS";

/* -----------------------------------------------------------
CSS Information

Site URL:       https://www.cosme.net/
File name:      mod-shopping.css
Created:        2012-05-16
by Author Style Info:  ショッピングモーダル(iframe内)用CSS
----------------------------------------------------------- */

/* mod-cmn-shop-dial(モーダル共通) -----------------------------------*/
.mod-cmn-shop-dial {
	background:#fff;
}
* html .mod-cmn-shop-dial {
	font-size: 80%; /* IE6 */
}
.mod-cmn-shop-dial .btn-close {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	line-height: 0;
}
* html .mod-cmn-shop-dial .btn-close {
	right: -1px; /* IE6 */
}
.mod-cmn-shop-dial .btn-close a {
	display: block;
	width: 33px;
	height: 23px;
}
.mod-cmn-shop-dial .btn-close img {
	border: none;
}
.mod-cmn-shop-dial .view-more {
	text-align: right;
}
.mod-cmn-shop-dial .view-more a {
	padding-right: 15px;
	background: url("/images/general/common/icons/ico_arw_l_grn_right.png") no-repeat right center;
	font-size: 95%;
	text-decoration: none;
	text-align: right;
}
.mod-cmn-shop-dial .view-more a:link {
	color: #068681;
}
.mod-cmn-shop-dial .view-more a:visited {
	color: #709293;
}
.mod-cmn-shop-dial .view-more a:hover {
	color: #07b0a9;
	text-decoration: underline;
}
/* ttl */
.mod-cmn-shop-dial h1 {
	margin: 15px 0 10px;
	padding: 5px 0 8px 40px;
	background: url("/images/general/pc/dialog/ico_shopping.png") no-repeat 0 0;
	color: #69511a;
	font-size: 115%;
	font-weight: bold;
}
/* sec */
.mod-cmn-shop-dial .mod-sec {
	overflow: auto;
	padding: 0 15px;
	height: 252px;
}
* html .mod-cmn-shop-dial .mod-sec {
	height: 248px; /* IE6 */
}
/* ボタン */
.mod-cmn-shop-dial .btn-trial-area {
	margin-bottom: 10px;
}
.mod-cmn-shop-dial .btn-trial-bk,
.mod-cmn-shop-dial .btn-trial-bk a {
	display: block;
	width: 365px;
	margin: 0 auto;
	background: url("/images/general/pc/dialog/bg_btn_brand.png") no-repeat 0 0;
	font-size: 105%;
	line-height: 1.35;
	text-decoration: none;
}
.mod-cmn-shop-dial .btn-trial-bk-inner {
	display: block;
	padding: 7px 12px;
	background: url("/images/general/pc/dialog/bg_btn_brand_bottom.png") no-repeat 0 bottom;
	color: #fff;
	font-weight: bold;
}
.mod-cmn-shop-dial .btn-trial-bk-inner span {
	display: block;
	font-size: 83%;
	font-weight: normal;	
}
.mod-cmn-shop-dial .btn-trial-bk a:hover{
	background-position: 0 -126px;
}
.mod-cmn-shop-dial .btn-brand-area {
	margin-bottom: 10px;
}
.mod-cmn-shop-dial .btn-brand-bk,
.mod-cmn-shop-dial .btn-brand-bk a {
	display: block;
	width: 365px;
	margin: 0 auto;
	background: url("/images/general/pc/dialog/bg_btn_brand.png") no-repeat 0 0;
	font-size:105%;
	text-decoration: none;
}
.mod-cmn-shop-dial .btn-brand-bk-inner {
	display: block;
	padding: 10px 12px;
	background: url("/images/general/pc/dialog/bg_btn_brand_bottom.png") no-repeat 0 bottom;
	color: #fff;
	font-weight: bold;
}
.mod-cmn-shop-dial .btn-brand-bk a:hover{
	background-position: 0 -126px;
}
.mod-cmn-shop-dial .btn-cosmecom-area {
	margin-bottom: 15px;
}
.mod-cmn-shop-dial .btn-cosmecom-bk,
.mod-cmn-shop-dial .btn-cosmecom-bk a {
	display: block;
	width: 365px;
	margin: 0 auto;
	background: url("/images/general/pc/dialog/bg_btn_cosmecom.png") no-repeat 0 0;
	font-size:105%;
	text-decoration: none;
}
.mod-cmn-shop-dial .btn-cosmecom-bk-inner {
	display: block;
	padding: 10px 12px;
	background: url("/images/general/pc/dialog/bg_btn_cosmecom_bottom.png") no-repeat 0 bottom;
	color: #fff;
	font-weight: bold;
}
.mod-cmn-shop-dial .btn-cosmecom-bk a:hover {
	background-position: 0 -126px;
}
.mod-cmn-shop-dial .btn-cosmecom-txt {
	margin: 0 0 12px 0;
	font-size: 83%;
	font-weight:normal;
}
/* --- スマートフォン用モーダルウィンドウレイアウトの追加 ---*/
@media screen and (max-width: 480px) {
	.mod-cmn-shop-dial .btn-brand-bk, .mod-cmn-shop-dial .btn-brand-bk a {
		width: 270px;
		border-radius: 5px;
		background: -webkit-gradient(linear, left top, left bottom, from(#e29bac), to(#d47088));
		text-shadow: 0 1px 1px #d47088;
	}
	.mod-cmn-shop-dial .btn-brand-bk a:hover {
		background: -webkit-gradient(linear, left top, left bottom, from(#e9b4c0), to(#dd8da0));
	}
	.mod-cmn-shop-dial .btn-brand-bk-inner {
		background: none;
	}
	.mod-cmn-shop-dial .btn-cosmecom-bk, .mod-cmn-shop-dial .btn-cosmecom-bk a {
		width: 270px;
		border-radius: 5px;
		background: -webkit-gradient(linear, left top, left bottom, from(#94cabe), to(#60a797));
		text-shadow: 0 1px 1px #60a797;
	}
	.mod-cmn-shop-dial .btn-cosmecom-bk a:hover {
		background: -webkit-gradient(linear, left top, left bottom, from(#aad5cc), to(#80b9ac));
	}
	.mod-cmn-shop-dial .btn-cosmecom-bk-inner {
		background: none;
	}
	.mod-cmn-shop-dial .btn-cosmecom-txt {
		display: block;
		margin: 0 0 2px 0;
		letter-spacing: normal;
	}
}