@charset "utf-8";

/* ■ base style
==========================================================*/

/* micro clearfix
-----------------------------------------------------*/
.cf:before, .cf:after {
	content: " ";
	display: table;
}
.cf:after {
	clear: both;
}
.cf {
*zoom:1;
}
/* reset
-----------------------------------------------------*/
/* リンク選択時の点線を削除 */
a:link, a:visited, a:hover, a:active {
	overflow: hidden;
}
ul, ol, dl {
	list-style: none;
}
ul, ol, dl, li, dt, dd, p, div, table, tr, th, td {
	margin: 0;
	padding: 0;
}
/* IE7 縮小画像 ニアレストネイバーによる画像荒れをバイキュービックで回避 IE 9+～微妙 */
img {
	-ms-interpolation-mode: bicubic;
}

/* ここから ページ独自のCSS指定
==========================================================*/

body {
    /*background: #ffffff url(https://www.rakuten.ne.jp/gold/sentire/_image/bg_y.gif) repeat-y;*/
    /*background-position:left top;*/
	
	font-family: 'Roboto', '源ノ角ゴシック Regular', '源ノ角ゴシック', heisei-kaku-gothic-std, '游ゴシック', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5em; /* 24px */
	margin: 0 auto;
	padding: 0;
	-webkit-text-size-adjust: 100%; /* iOS文字サイズ調整 */
}
.fz09e {
	font-size:.9em;
}
.fz08e {
	font-size:.8em;
}
.fz07e {
	font-size:.7em;
}



/* 上へ戻るボタン */
#backTopPC {
	position: fixed;
	display: none;
	width: 50px;
	height: 50px;
	right: 10px;
	bottom: 10px;
	z-index: 999;
	transition: all .3s;
}
#backTopPC:hover {
	opacity: .7;
}

.white_bg {
	width:950px;
	background:#fff;
    margin: 0 auto;
}

/* 各ブランド下の 上へ戻るテキスト */
.original_back_top a:link,
.original_back_top visited {
	font-size:13px;
	display:block;
	width:180px;
	margin:0 0 0 auto;
	font-weight: 400;
	text-decoration:underline;
	transition:all .3s;
}
.original_back_top a:hover,
.original_back_top a:active {
	color:#bf0000;
	text-decoration:none;
}

/* bodyタグのid */
#original_items {
	width: 1200px;
	margin: 0 auto;
}
/* aタグのベース設定 */
a:link, a:visited {
	color: #222;
	text-decoration: none;
}
a:hover, a:active {
	color: #222;
	text-decoration: none;
}

.wrap_center {
    width: 950px;
    margin: 0 auto;
}
.tit_main {
	margin: 0 0 1.5em;
}

/* サムネイル
==========================================================*/
.btn_thumb {
/*	padding-left:2px;*/
	width:800px;
	margin:0 auto 4em;
	font-size:10px;
	list-style:none;
}
/* hoverでイメージをぬるぬる拡大するときoverflow:hiddenする囲い */
.btn_thumb a span.thumb_image_wrap {
	display:block;
	width:75px;
	height:75px;
	border:1px solid #ddd;
	overflow: hidden;
	transition:all .3s;
	-moz-transition:all .3s;
	box-sizing:border-box;
	margin:0 0 3px 0;
	background: transparent;
}
.btn_thumb a:hover span.thumb_image_wrap,
.btn_thumb a:active span.thumb_image_wrap{
	border:1px solid #bf0000;
	background: transparent;
}

/* btn_thumb の aタグ関連のスタイル*/
.btn_thumb a {
    display:block;
	float:left;
	width:75px;
	margin-right:5px;
	margin-bottom:15px;
	line-height:1;
	text-align:center;
	background:transparent;
	padding:0;
	text-decoration:none;
}
.btn_thumb a:hover,
.btn_thumb a:active {
	text-decoration:underline;
	color:#bf0000;
	background:none;
}
.btn_thumb a img {
	display:block;
	width:75px;
	height:75px;
	margin:0 0 3px 0;
	padding:0;
/*
	-moz-transition: -moz-transform .3s all;
	-webkit-transition: -webkit-transform .3s all;
	-o-transition: -o-transform .3s all;
	-ms-transition: -ms-transform .3s all;
	transition: transform .3s all;
	z-index: -1;
*/
	transition: all .3s;
}
.btn_thumb a:hover img,
.btn_thumb a:active img {
	opacity:.8;
    -webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

/* メニュー
==========================================================*/
.btn_brand {
	width:830px;
	margin:0 auto 4em;
	font-size: 14px;
	padding-left:17px;
	background: #fff;
}
.btn_brand a {
	float: left;
	display: block;
	margin-right: 16px;
	margin-bottom: 7px;
	width: 365px;
	background: #fff/*#f9f9fe*//*#fffae9*//*#f7eddb*//*#f6f6f6*/;
	border: 1px solid #ddd;/*#e9e9e9*/
    padding: 10px 0 10px 30px;
	position: relative;
	transition: all .3s;
}
.btn_brand a:hover {
	color: #fff;
	background: #bf0000;
	border: 1px solid #bf0000; /**/
}
.btn_brand a:hover img {
	color: #fff;
	background: #bf0000;
	border: 1px solid #bf0000; /**/
}
/* メニューの矢印 */
.btn_brand a:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	top: 20px;
	left: 15px;
	border: 4px solid transparent;
	border-top: 4px solid #bf0000;
	z-index: 11;
	vertical-align: middle;
	margin: auto;
	padding-left: 0px;
	transition: all .3s;
}
.btn_brand a:hover:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	top: 20px;
	left: 15px;
	border: 4px solid transparent;
	border-top: 4px solid #fff;
	z-index: 11;
	vertical-align: middle;
	margin: auto;
	padding-left: 0px;
	transition: all .3s;
}
/* アンカーの位置を調整 */

/* 商品サムネイル */
#item_0031000,
#item_0032056,
#item_0031540,
#item_0032054,
#item_1540200,
#item_0032055,
#item_0038952,
#item_1ld-0237,
#item_1ld-0238,
#item_8lc-0409,
#item_8lc-0404l,
#item_5652,
#item_4365,
#item_708,
#item_smt280,
#item_smt281,
#item_smt-310,
#item_smt-458,
#item_smt-459,
#item_pod-001,
#item_mnbook1,
#item_mnbook2,
#item_mnbook3,
#item_mnbook4,
#item_mnbook5,
#item_na1641l,
#item_9158009,
#item_9158008,
#item_9158007,
#item_9158001,
#item_0517704,
#item_0517705,
#item_9158000,
#item_9158002,
#item_0517702,
#item_0517700,
#item_na-pad,
#item_pmo-case001,

/* ブランド毎 */
#original_dakota,
#original_pellemorbida,
#original_albero,
#original_baggyport,
#original_beaudessin,
#original_ruccadiluce,
#original_sentireone,
#original_genten {
	padding-top:1em;
	margin-top:-1em;
}
/* CORBO.だけ微調整 */
#original_corbo {
	padding-top:.5em;
	margin-top:.5em;
}


/* 各ブランドとのコラボレーションアイテム（メインの商品部分）
==========================================================*/
.brand_wrap {
	width: 890px;
	margin: 0 auto 4em;
	background-color: #fff;
}
.brand_wrap .tit_brand {
	margin: 0 0 2.5em;
}
/* 中にfloatかける大枠 */
.items {
	width: 950px;
}
/* floatかけるli */
.items li {
	margin-right: 30px;
	margin-bottom: 14em;
	width: 430px;
	float: left;
	position: relative;/* 色々移動させるため */
}
.items li img {
	transition: all .3s;
}
.items li:hover img, .items li:active img {
	opacity: .7;
}
.items li .copy {
	color:#222;
	width: 430px;
	line-height: 1.4;
	transition: all .3s;
	posiiton: relative;
	z-index: 15;
	font-weight: bold;
}
.items li:hover .copy, .items li:active .copy {
	color: #bf0000;
}
/* 装飾用のボーダ－を生成 */
.items .copy:after {
	content: "";
	display: block;
	border-bottom: 2px solid #222;
	width: 285px;
	padding-bottom: .6em;
	margin-bottom: 1em;
	z-index: 15;
}
/* .copyの実際のテキスト部分のみにマーカー */
.items .copy span {
	font-size: 18px;
	font-weight: 500;
	background: linear-gradient(transparent 20%, #fffcec 0%);
	z-index: 15;
}
.items li .img_wrap {
	width: 430px;
	height: 644px;
	overflow: hidden;
	position: relative;
}
/* ホバー時のイメージ拡大用 */
.items li .img_wrap img {
	width: 430px;
	-moz-transition: -moz-transform .3s all;
	-webkit-transition: -webkit-transform .3s all;
	-o-transition: -o-transform .3s all;
	-ms-transition: -ms-transform .3s all;
	transition: transform 0.3s all;
	z-index: -1;
}
.items li:hover .img_wrap img {
	-webkit-transform: scale(1.03);
	-moz-transform: scale(1.03);
	-o-transform: scale(1.03);
	-ms-transform: scale(1.03);
	transform: scale(1.03);
	z-index: -1;
}
/*
 商品イメージ下テキストを絶対配置
=============================================*/

.items .item_txt_wrap {
	position: absolute;
	width: 420px;
	font-size: .9em;
	top: 670px;
	left: 20px;
	z-index: 10;
	text-shadow: #fff 2px 0px 2px, #fff -2px 0px 2px,
	#fff 0px -2px 2px, #fff -2px 0px 2px,
	#fff 2px 2px 2px, #fff -2px 2px 2px,
	#fff 2px -2px 2px, #fff -2px -2px 2px,
	#fff 1px 2px 2px, #fff -1px 2px 2px,
	#fff 1px -2px 2px, #fff -1px -2px 2px,
	#fff 2px 1px 2px, #fff -2px 1px 2px,
	#fff 2px -1px 2px, #fff -2px -1px 2px,
	#fff 1px 1px 2px, #fff -1px 1px 2px,
	#fff 1px -1px 2px, #fff -1px -1px 2px;
}

/*
基本の2カラムのときの各種設定 テキスト情報位置
---------------------------------------------*/

/* 文字色かぶり解消用 部分的に文字色白に */
.items .item_txt_wrap .white {
	color: #fff;
}
/* NEWなどのアイコン表示なし */
.icon_hidden {
	font-size: .8em;
	width: 3.5em;
	line-height: 1em;
	height: 1.3em;
	display: block;
	background: #bf0000;
	padding-top: .3em;
	color: #fff;
	text-align: center;
	margin-bottom: .5em;
	visibility: hidden;
}
/* NEWなどのアイコン表示あり */
.icon_red {
	font-size: .8em;
	width: 3.5em;
	line-height: 1em;
	letter-spacing: 1px;
	height: 1.3em;
	display: block;
	background: #bf0000;
	padding-top: .5em;
	padding-right: .1em;
	padding-left: .1em;
	color: #fff;
	text-align: center;
	margin-bottom: .5em;
	text-shadow: none;
}
/* 商品名 */
.item_name {
	width: 430px;
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 1em;
}
/* 商品説明文 */
.item_description {
	width: 420px;
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: 1.3em;
}
/* 商品 詳しくはこちらボタン */
.item_detail {
	width: 200px;
	font-size: 12px;
	padding: 5px 0;
	padding-left: 1em;
	background: #fff;
	border: 1px solid #222;
	text-align: center;
	position: relative;
	transition: all .3s;
	text-shadow: none;
}
.items li:hover .item_detail, .items li:active .item_detail {
	color: #fff;
	border: 1px solid #bf0000;
	background-color: #bf0000;
}
/* 商品 詳しくはこちらボタンの装飾矢印 */
.item_detail:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	top: 13px;
	left: 70px;
	border: 4px solid transparent;
	border-left: 4px solid #bf0000;
	z-index: 11;
	vertical-align: middle;
	margin: auto;
	padding-left: 20px;
	transition: all .3s;
}
.items li:hover .item_detail:before, .items li:active .item_detail:before {
	border-left: 4px solid #fff;
}
/* 1カラムのときの各種指定 テキスト情報位置
---------------------------------------------*/

/* 1カラムのli */
.items li.col1, .items li.col1_imgL {
	width: 890px;
	height: 500px;
	float: left;
	margin-bottom: 4em;
	position: relative;/* 色々移動させるため */
}
/* 1カラム 写真「右」のときの 写真とテキスト情報位置
----------------------------------------------------*/

.items li.col1 .item_txt_wrap {
	width: 890px;
	font-size: .9em;
	position: absolute;
	top: 120px;
	left: 0;
	z-index: 10;
}
.items li.col1 .copy {
	z-index: 15;
	position: relative;
}
.items li.col1 .item_txt_wrap .item_txt {
}
.items li.col1 .img_wrap {
width: 500px;
height: 500px;
overflow: hidden;
position: absolute;
right: 5px;
top: 0px;
text-align: right;/* これ重要 */
}
.items li.col1 .img_wrap img {
	-moz-transition: -moz-transform .3s all;
	-webkit-transition: -webkit-transform .3s all;
	-o-transition: -o-transform .3s all;
	-ms-transition: -ms-transform .3s all;
	transition: transform 0.3s all;
	z-index: -1;
	width: 500px;/* 600px -> 500px */
}
.items li.col1:hover .img_wrap img {
	-webkit-transform: scale(1.03);
	-moz-transform: scale(1.03);
	-o-transform: scale(1.03);
	-ms-transform: scale(1.03);
	transform: scale(1.03);
	z-index: -1;
}
/* 1カラム 写真「左」のときの 写真とテキスト情報位置
----------------------------------------------------*/
.items li.col1_imgL .item_txt_wrap_txtR {
	width: 430px;
	height: 430px;/* 厳密な数字である必要なし */
	font-size: .9em;
	position: absolute;
	top: 130px;
	right: 0px;
	z-index: 10;/*	background:#00f;*/
	text-shadow: #fff 2px 0px 2px, #fff -2px 0px 2px,
	#fff 0px -2px 2px, #fff -2px 0px 2px,
	#fff 2px 2px 2px, #fff -2px 2px 2px,
	#fff 2px -2px 2px, #fff -2px -2px 2px,
	#fff 1px 2px 2px, #fff -1px 2px 2px,
	#fff 1px -2px 2px, #fff -1px -2px 2px,
	#fff 2px 1px 2px, #fff -2px 1px 2px,
	#fff 2px -1px 2px, #fff -2px -1px 2px,
	#fff 1px 1px 2px, #fff -1px 1px 2px,
	#fff 1px -1px 2px, #fff -1px -1px 2px;
}
.items li.col1_imgL .item_txt_wrap_txtR .item_txt {
	position: absolute;
	left: 0;
	top: 0;
}
.items li.col1_imgL .img_wrap {
	width: 500px;
	height: 500px;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0px;
}
.items li.col1_imgL .img_wrap img {
	-moz-transition: -moz-transform .3s all;
	-webkit-transition: -webkit-transform .3s all;
	-o-transition: -o-transform .3s all;
	-ms-transition: -ms-transform .3s all;
	transition: transform 0.3s all;
	width: 500px;/* 600px→500px */
}
.items li.col1_imgL:hover .img_wrap img {
	-webkit-transform: scale(1.03);
	-moz-transform: scale(1.03);
	-o-transform: scale(1.03);
	-ms-transform: scale(1.03);
	transform: scale(1.03);
}
/* コピーの位置も右に */
.items li.col1_imgL .copy {
	width: 430px;
	transition: all .3s;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 15;
}
.items li.col1_imgL:hover .copy, .items li:active .copy {
	color: #bf0000;
}

/*
 商品イメージ下テキストを絶対配置 ここまで
=============================================*/

/* ふわっと現れるアニメーション用
=============================================*/
.fadeInUp {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-ms-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	visibility: visible !important;
	position: relative;
	z-index: 1;
}
@-webkit-keyframes fadeInUp {
 0% {
 opacity: 0;
 -webkit-transform: translateY(20px);
}
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
}
}
@keyframes fadeInUp {
 0% {
 opacity: 0;
 -webkit-transform: translateY(20px);
 -ms-transform: translateY(20px);
 transform: translateY(20px);
}
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
 -ms-transform: translateY(0);
 transform: translateY(0);
}
}