@charset "UTF-8";

/*
 * cmn_layout_lp.css
 *
 * ロイヤリティプラグラム対応
 * created --- 2018/02
 *
 */

/*** フラコインアイコン ***/
.fracoin {
	display: inline-block;
	white-space: nowrap;
	line-height: 1;
}

.fracoin:after {
	content: '';
	display: inline-block;
	vertical-align: baseline;
	width: 18px;
	height: 18px;
	margin: 0 0 0 8px;
	background: url(/excludes/common/img/ico_fracoin.gif) no-repeat center;
	background-size: 100% auto;
	margin-bottom: -3px
}

.fracoin.md {
	font-size: 150%;
	font-weight: bold;
}

.fracoin.md:after {
	width: 24px;
	height: 24px;
}

/*** ステージ表記用リボン（デフォルトの色は#ec6b94） ***/
.ribbon {
	position: relative;
	display: inline-block;
	padding: 7px 0;
	height: 24px;
	background: #ec6b94;
	color: #fff;
	font-weight: bold;
	font-size: 90%;
	line-height: 1;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
	.ribbon:before{
		content: '';
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 100%;
		width: 0;
		height: 0;
		border: 6px solid #ec6b94;
		border-top-width: 12px;
		border-bottom-width: 12px;
		border-left-color: transparent!important;
		transform: translateX(6px);
		-webkit-transform: translateX(6px);
	}
	.ribbon:after{
		content: '';
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 100%;
		width: 0;
		height: 0;
		border: 6px solid #ec6b94;
		border-top-width: 12px;
		border-bottom-width: 12px;
		border-right-color: transparent!important;
		transform: translateX(-6px);
		-webkit-transform: translateX(-6px);
	}

/* ローズステージ */
.ribbon.rose {
	background: #e8006d;
}
	.ribbon.rose:before,
	.ribbon.rose:after {
		border-color: #e8006d;
	}

/* ゴールドローズステージ */
.ribbon.gold {
	background: #dcaf4a;
}
	.ribbon.gold:before,
	.ribbon.gold:after {
		border-color: #dcaf4a;
	}

/* プラチナローズステージ */
.ribbon.platinum {
	background: #b9b7bc;
}
	.ribbon.platinum:before,
	.ribbon.platinum:after {
		border-color: #b9b7bc;
	}

@media screen and (max-width:750px){
	.ribbon {
		position: relative;
		padding: 9px 0;
		height: 30px;
		font-size: 12px;
	}
		.ribbon:before{
			border-top-width: 15px;
			border-bottom-width: 15px;
		}
		.ribbon:after{
			border-top-width: 15px;
			border-bottom-width: 15px;
		}
}

/*** 共通ヘッダー ***/
#headerInfo {
	width: 653px;
}

	#headerReward{
		float: right;
		margin-top: -18px;
		width: 242px;
	}

	#headerReward #stage {
		margin: 0 auto 8px;
		text-align: center;
	}
		#headerReward #stage span.ribbon{
			width: 228px;
		}

	#headerReward #detail {
		font-weight: bold;
		display: table;
		width: 100%;
	}

		#headerReward #detail span.label{
			display: table-cell;
			font-size: 90%;
		}
		#headerReward #detail span.fracoin{
			display: table-cell;
			font-size: 120%;
			color: #e4006e;
			text-align: right;
		}
		#headerReward #detail span.fracoin:after{
			width: 24px;
			height: 24px;
			margin-bottom: -5px;
		}

/* 商品詳細 */
.productsDetailInnerPrice .fracoin:after{
	width: 24px;
	height: 24px;
	margin-bottom: 0;
}
.productsDetailInnerCoin {
	margin-top: 10px;
	font-weight: bold;
}