@charset "utf-8";
/* CSS Document */

/*
カートボタンは　modal_input.css
タブ切り替えは　tab.css

パンくずリストが下部にあるレイアウトは下記css追加
under_breadcrumb.css
*/

/*Adobe fonts*/
@import url("https://use.typekit.net/ebe8tki.css");
/*Futura PT Book
font-family: "futura-pt", sans-serif;
font-weight: 400;
font-style: normal;
*/

/* :rootのCSS変数の宣言 */
:root {
	/* color */
	--base-text01: #000;
	--base-text02: #666666;
	--point-color01: #d3234c; /*赤系　予約表示など */
	--point-color02: #5c8e7e; /*preorder用色*/
	--btn-color01: #23abdd;
	--btn-color02: #333;
}


/*===============================
ALL
===============================*/

main {
	font-size:13px;
	line-height: 1.5;
	letter-spacing: 0.07em;
	font-family: 'Avenir','Helvetica Neue','Helvetica','Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', sans-serif;
	font-weight: 400;
	color: var(--base-text01);
}

/*メインエリアの横幅制限解除*/
.fs-l-pageMain {
	max-width: 100%;
}
.fs-l-main{
	max-width: 100%;
	padding:0;
	margin:0;
}



/*===============================
BASE layout
===============================*/

/*layout*/
/*layout PC*/
@media screen and (min-width:769px) {	
	.js-l-product2025 .fs-l-productLayout .fs-l-productLayout__item--1 {
		grid-area: product_img;
	}
	.js-l-product2025 .fs-l-productLayout .fs-l-productLayout__item--2 {
		grid-area: product_cart;
	}
	.js-l-product2025 .fs-l-productLayout .fs-l-productLayout__item--3 {
		grid-area: product_snap;
	}
	.js-l-product2025 .fs-l-productLayout .fs-l-productLayout__item--4{
		grid-area: product_discription;
	}
	
	.js-l-product2025 .fs-l-productLayout{
		display: grid;
		gap: 70px;
		width:100%;
		max-width:980px;
		margin:auto;

		grid-template-columns: 490px 1fr;
		grid-template-areas:
		  "product_img product_cart"
		  "product_snap product_discription"
		;
	}
}
/*SP*/
@media screen and (max-width:768px) {
	.js-l-product2025 .fs-l-productLayout .fs-l-productLayout__item--2{
		margin: auto 3vw;
	}
}


/*===============================
共通使用パーツ（ボタンなど）
===============================*/

/*ボタン01*/
.js_itempage_btn01{
	background-color: transparent;
	border: solid 1px var(--btn-color02);
	border-radius: 3px;
	color: var(--btn-color02);
	text-align: center;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
	margin-bottom: 5px;
}
.js_itempage_btn01 a{
	display: block;
	padding: 5px;
	color: var(--btn-color02);
	text-decoration: none;
}
.js_itempage_btn01:hover{
	opacity: 0.8;	
}


/*===============================
商品画像
fs-l-productLayout__item--1
===============================*/


.fs-c-productCarouselMainImage__expandButton{
	display: none!important;
}

@media screen and (min-width:769px) {
	.fs-c-productCarouselMainImage__image > img,
	.fs-c-productCarouselMainImage__image video{
		height: 588px!important;
	}
}



/*===============================
カート回り
fs-l-productLayout__item--2
===============================*/

/*キャッチコピー*/
.fs-c-productNameHeading__copy{
	display: block;
	font-size: 9px;
	color: #c5c5c5;
	font-weight: 300;
	margin-bottom: 1em;
}
/*商品名*/
.fs-c-productNameHeading__name{
	display: block;
	font-size: 16px;
	line-height: 1.4;
}


/*レビュー*/
.productRating{
	margin-top:2em;
}
.fs-c-reviewStars::before{
	color: #000;
}
.fs-c-rating__value{
	color: #000;
}


/*価格*/
.fs-c-productPrices.fs-c-productPrices--productDetail{
	margin: 2em auto;
}

/*消し値*/
.fs-c-productPrice--listed{
	margin-bottom: -0.3em;
}
.fs-c-productPrice--listed .fs-c-price__value,
.fs-c-productPrice--listed .fs-c-price__currencyMark{
	font-size: 16px;
}
.fs-c-productPrice--listed .fs-c-productPrice__main__label {
	display: none;
}
.fs-c-productPrice--listed .fs-c-productPrice__main__price{
	text-decoration: line-through;
	color: #bbbbbb;
}
.fs-c-productPrice--listed .fs-c-productPrice__addon--listed{
	display: none;
}

/*メインプライス*/
.fs-c-productPrice--selling .fs-c-price__currencyMark,
.fs-c-productPrice--selling .fs-c-price__value{
	/*font-size: 26px;*/
	
	font-family: "futura-pt", sans-serif;
	font-weight: 400;
	font-style: normal;
}
span.fs-c-productPrice__addon:not(.fs-c-productPrice__addon--listed)::before{
	content: "税込";
}
.fs-c-productPrice__addon:where(:not([class*="--listed"]))::after,
.fs-c-productPrice__main__addon:where(:not([class*="--listed"]))::after{
	content: "";
}

/*セールディカウント / 割引率をsale_discount.js にて挿入*/
.discount-rate{
	display: inline-block;
	background-color: var(--point-color01);
	color: #fff;
	padding: 3px 5px;
	margin-left: 10px;
	line-height: 1;
}





/*-------------------------*/
/*価格下表示*/
.js_itempage_utilitytext{
	margin: 2em auto;
}
/*ポイント*/
.fs-c-productPointDisplay{
	background: transparent;
	color:#888;
	padding: 0;
	font-size: 1em;
}
.fs-c-productPointDisplay__quantity{
	color: var(--point-color01);
	font-weight : 700;
	font-size: 1.2em;
}
.fs-c-productPointDisplay__label::before{/*アイコン*/
	content: "";
	vertical-align: -0.19em;
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	background: url(https://shirai.itembox.design/item/common/itempage/img/icon_point.svg?timestamp=250507) no-repeat;
	background-size: contain;
	margin-right: 0.1em;
}
/*送料*/
.fs-c-productPostage{
	color: var(--point-color01);
}
.fs-c-productPostage::before{/*アイコン*/
	content: "";
	vertical-align: -0.19em;
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	background: url(https://shirai.itembox.design/item/common/itempage/img/icon_shipping.svg?timestamp=250507) no-repeat;
	background-size: contain;
	margin-right: 0.1em;
}
.fs-c-productPostage::after{
	content: "";
}
/*会員登録*/
.js_itempage_newmembertext a{
	color: #999;
}
.js_itempage_newmembertext__point{
	color: var(--point-color01);
	font-weight : 700;
	font-size: 1.1em;
}
.newmember .js_itempage_newmembertext__before::before{/*アイコン 会員登録*/
	content: "";
	vertical-align: -0.19em;
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	background: url(https://shirai.itembox.design/item/common/itempage/img/icon_newmember.svg?timestamp=250507) no-repeat;
	background-size: contain;
	margin-right: 0.4em;
}
.linemember .js_itempage_newmembertext__before::before{/*アイコン LINE連携*/
	content: "";
	vertical-align: -0.19em;
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	background: url(https://shirai.itembox.design/item/common/itempage/img/icon_linemember.svg?timestamp=250507) no-repeat;
	background-size: contain;
	margin-right: 0.4em;
}
/*-------------------------*/



/*商品マーク（タグ）*/
.fs-c-productMarks{
	margin: 0;
}
.fs-c-productMark__item{
	margin-bottom: 5px;
}


/*-------------------------*/
/*納期関連*/
.js_itempage_deliverydate{
	margin: 2em auto;
}
.js_itempage_deliverydate > div{
	margin-bottom: 5px;
}
.js_itempage_deliverydate > div:last-child{
	margin-bottom:0;
}



/*納期関連 アコーディオン*/
.acbox_deliverydate{
  width: auto;
  font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */
  margin:0 0px; /* ボックス全体の位置調整 */
}
.acbox_deliverydate label{
	width: auto;
	font-size: 12px; /* ラベルの文字サイズ */
	font-weight: normal;
	text-align: center;
	background: transparent; /* ラベルの背景色 */
	position: relative;
	display: block;
	padding:8px;
	border: 1px solid var(--point-color01);
	border-radius: 5px; /* ラベルの角の丸み */
	cursor: pointer;
	color: var(--point-color01);
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.acbox_deliverydate label:hover{
	background: var(--point-color01);
	color: #fff;
}
.acbox_deliverydate input{
  display: none;
}
.acbox_deliverydate label:after{
  color: var(--point-color01);
  content:"＋"; /* ラベルのアイコン */
  position: absolute;
  top: 60%;
  right: 15px;
  margin-top: -14px;
}
.acbox_deliverydate label:hover:after{
	color: #fff;
}
.acbox_deliverydate input:checked ~ label::after {
	content:"－"; /* ラベルをクリックした後のアイコン */
	color: #fff;
}
.acbox_deliverydate div{
  height: 0px;
  overflow: hidden;
  opacity: 0;
  transition: 0.15s; /* 開閉スピードの設定 */
}
.acbox_deliverydate input:checked ~ div{
  height: auto;
  padding: 18px; /* 開いた部分の枠内の余白 */
  border-radius: 0 0 5px 5px;
  background: #F3F4F5; /* 開いた部分の背景色 */
  opacity: 1;
}
.acbox_deliverydate input:checked ~ label {
  background: var(--point-color01); /* クリック後のラベルの背景色 */
  color: #fff;
  border-radius: 5px 5px 0 0; /* ラベルの角の丸み */
}
.acbox_deliverydate-under{
	font-size: 11px; /* 開いた部分の文字サイズ */
	line-height: 1.5;
	color: #555555; /* 開いた部分の文字色 */
}

/*色変更 preorder*/
.js_itempage_deliverydate_preorder .acbox_deliverydate label{
	border: 1px solid var(--point-color02);
	color: var(--point-color02);
}
.js_itempage_deliverydate_preorder .acbox_deliverydate label:hover{
	background: var(--point-color02);
	color: #fff;
}
.js_itempage_deliverydate_preorder .acbox_deliverydate label:after{
	color: var(--point-color02);
}
.js_itempage_deliverydate_preorder .acbox_deliverydate label:hover:after{
	color: #fff;
}
.js_itempage_deliverydate_preorder .acbox_deliverydate input:checked ~ label {
	background: var(--point-color02); /* クリック後のラベルの背景色 */
}


/*-------------------------*/
/*カートコメント/ 商品説明（小）カラー別納期・返品不可文言などで使用*/

.js_itempage_carttext{
	margin:1em auto;
	
	background: rgba(126, 126, 126, 0.08);
	font-size: 12px;
	padding: 8px;
	color: #666;
	border-radius: 5px;
}
/*センター合わせ用*/
.js_itempage_carttext .js_itempage_carttext_innner{
	text-align: center;
}







/*-------------------------*/
/* 在庫なし表示テキスト */

.fs-c-productNotice--outOfStock{
	font-size: 12px;
	color: #666;
	border-radius: 5px;
}



/*-------------------------*/
/*カート*/

/*カート調整　カートボタン自体は　modal_input.css*/
/*FutureShop調整*/
/*SKU名*/
.fs-c-variationCart__variationName__name{
	font-weight:400;
}
/*残り僅か表示*/
.fs-c-variationCart__variationName__stock--lowInStock{
	color: var(--point-color01);
}
/*在庫切れ表示*/
.fs-c-variationCart__variationName__stock--outOfStock{
	color: #aaa;
}
/*再入荷お知らせボタンの色*/
.fs-c-button--secondary{
	background :#aaa;
	border : #aaa;
}

/*カート下ボタンエリア（tnjの店舗在庫＆SNAPなど）*/
.js_cart_underbtn{
	margin: 2em auto;
}
@media screen and (min-width:769px) {
	.js_cart_underbtn{
		margin: -1.5em auto 2em;
	}
}


/*-------------------------*/

/*販売日時*/
.js_itempage_salesperiod > div:last-child{
	margin-bottom : 1em;	
}
.fs-c-productSalesPeriod{
	border: none;
	padding: 0;
	text-align: left;
	margin-bottom: 0.25em;
}
/*販売日時：まもなく終了*/
.js_itempage_period_ends_soon{
	color: var(--point-color01);
}
/*販売日時：販売終了*/
.fs-c-productSalesPeriod{
	margin:1em auto;
	padding: 8px;
	background: rgba(126, 126, 126, 0.08);
	font-size: 12px;
	color: #666;
	text-align: center;
	border-radius: 5px;
}


/*商品番号*/
.fs-c-productNumber{
	border: none;
	padding: 0;
	font-size: 1em;
	color: #999;
}
@media screen and (max-width:769px) {
	.fs-c-productNumber{
		margin-top:1em;
	}
}

/*返品特約*/
.fs-c-returnedSpecialContract{
	padding: 0;
}
.fs-c-returnedSpecialContract a{
	color: #999;
	text-decoration: underline;
}




/*-------------------------*/

/*snsシェアボタン*/
/*flex*/
.js_itempage_SNSshare{
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	
	width:90%;
	margin: 1.5em auto 2em;
}
.js_itempage_SNSshare img{
	width:100%;
}
.js_itempage_SNSshare > div {
	width:25px;
	margin-right: 7px;
}
@media screen and (max-width:769px) {
	.js_itempage_SNSshare > div{
		width:7%;
		margin-right: 7px;
	}
}
.js_itempage_SNSshare > div:first-child {
	width: auto;
}
.js_itempage_SNSshare > div:last-child{
	margin-right: 0;
}

/*hoverアニメーション*/
.js_itempage_SNSshare_item:not(.share_head){
	transition: all 0.5s 0s ease;
}
.js_itempage_SNSshare_item:hover:not(.share_head){
	cursor: pointer;
	opacity: 0.8;
	transform: translateY(-5px);
}




/*===============================
visumo周り
fs-l-productLayout__item--3
===============================*/

/*SPだけ一番下のdivに下線をつける*/
/*@media screen and (max-width:769px) {
	.fs-l-productLayout__item--3{
		margin-bottom: 1em;
	}
	.fs-l-productLayout__item--3 > div:last-child{
		border-bottom: 1px solid #ddd;
	}
}*/




/*===============================
商品説明まわり
fs-l-productLayout__item--4
===============================*/

/*全体のタブ関連は　tab.css　に記載*/

@media screen and (max-width:769px) {
	.fs-l-productLayout__item--4{
		margin: 2em 0;
	}
}

/*レビュー*/
.fs-c-reviewer__name,
.fs-c-reviewer__name a,
.fs-c-reviewer__profile,
.fs-c-reviewInfo__date {
	color: #999;
}
.fs-c-reviewerStatus{
	background-color: #ccc;	
	color:#fff;
}

.fs-c-aggregateRating__rating::before{
	margin-bottom: 0.8em;
}



/*===============================
下部エリア（レコメンドなど）
js_itempage_recommenditem
===============================*/


.js_itempage_recommenditem{
	margin: 150px auto;
}
@media screen and (max-width:769px) {
	.js_itempage_recommenditem{
		margin: 20vw auto;
	}
}







/*===============================
others
===============================*/

/*パンくず*/
.fs-c-breadcrumb{
	width:100%;
	max-width:980px;
	margin:auto;
}
.fs-c-breadcrumb__list,
.fs-c-breadcrumb__listItem + .fs-c-breadcrumb__listItem::before,
.fs-c-breadcrumb__listItem a{
	color: #c5c5c5;
}
@media screen and (min-width:769px) {
	.fs-c-breadcrumb__list{
		padding-left:0;
		padding-right:0;
	}
}


/*おすすめアイテム*/
.fs-c-featuredProduct{
	width:100%;
	margin: 50px auto;
	padding: 20px 0 50px 0;
	background-color: #f5f5f5;
}
.fs-c-featuredProduct__header{
	width:100%;
	max-width:980px;
	margin-right:auto;
	margin-left:auto;
}
.fs-c-featuredProduct .fs-c-featuredProduct__title{
	margin:0;
	padding-top: 1.5em;
	padding-bottom:0.6em;
	font-size: 18px;
	
	border-bottom: none;
	/*border-top: 1px solid #c5c5c5;*/
}

.fs-c-featuredProduct .fs-c-productListCarousel__list.fs-c-slick.slick-initialized.slick-slider{
	width:85%;
	max-width:980px;
}

.fs-c-featuredProduct .fs-c-button--carousel--next::before{
	content : "";
	
	display: inline-block;
	vertical-align: middle;
	color: #000;
	line-height: 1;
	width: 15px;
	height: 15px;
	border: 1px solid currentColor;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateX(-25%) rotate(45deg);
}
.fs-c-featuredProduct .fs-c-button--carousel--prev::before{
	content : "";
	
	display: inline-block;
	vertical-align: middle;
	color: #000;
	line-height: 1;
	width: 15px;
	height: 15px;
	border: 1px solid currentColor;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateX(25%) rotate(225deg);
}
.fs-c-featuredProduct .fs-c-productPrice__addon:not(.fs-c-productPrice__addon--listed)::after, .fs-c-wishlistProduct .fs-c-productPrice__addon:not(.fs-c-productPrice__addon--listed)::after{
	content: "";
	margin:0;
}
.fs-c-productListCarousel__list__item{
	margin: 0 4px 0 0;
}
.fs-c-featuredProduct .fs-c-productPrice--listed .fs-c-price__value,
.fs-c-featuredProduct .fs-c-productPrice--listed .fs-c-price__currencyMark{
	font-size:1.1em;
}


/*SP*/
@media screen and (max-width:980px) {
	.fs-c-featuredProduct{
		margin: 10vw auto;
		/*border-top: 1px solid #c5c5c5;*/
		padding: 3vw 2vw 10vw 2vw; 
	}
	.fs-c-featuredProduct .fs-c-featuredProduct__title{
		border:none;
		text-align: center;
	}
	/*矢印非表示*/
	/*.fs-c-featuredProduct .fs-c-productListCarousel__ctrl{
		display: none!important;
	}	*/
}







/*===============================
visumo
===============================*/

/*本番ではvisumo側に記述*/
/* PC: 3枚表示の場合 ：*/
.hacobune-goods .hacobune-slider {
	--slider_break_points_xs_width: 0 !important;
	--slider_break_points_xs_perview: 3 !important;
	--slider_break_points_sm_width: 600 !important;
	--slider_break_points_sm_perview: 3 !important;
	--slider_break_points_md_width: 960 !important;
	--slider_break_points_md_perview: 3 !important;
	--slider_break_points_lg_width: 1264 !important;
	--slider_break_points_lg_perview: 3 !important;
}
.hacobune-slider-container .hacobune-slider-swiper-container,
.hacobune-goods .hacobune-slider-container .hacobune-slider-next,
.hacobune-goods .hacobune-slider-container .hacobune-slider-prev {
	margin:0 !important;
}
.hacobune-goods .hacobune-media-post-list-item-caption{
	margin-top :0 !important;
}
.hacobune-goods .snap_slide_morebtn .btn{
	font-size: 1em !important;
}
/*スマホ表示変更*/
@media screen and (max-width:980px) {
	.hacobune-goods .hacobune-icon-button{
		display: none !important;
	}
	.hacobune-goods .hacobune-app-container:not(.hacobune-contents-hide){
		background-color: rgba(192, 192, 192, 0.1) !important;
		padding: 20px 0 !important;
	}
	.hacobune-goods .hacobune-video-list-item-card{
		border:none !important;
		background-color: transparent !important;
	}
	.hacobune-goods .snap_slide_morebtn .btn{
		margin-right: 1vw;
	}
	/*コードから削除する/チェック用に一時的に上書き対応*/
	.hacobune-goods .snap_slide_title,
	.hacobune-goods .snap_video_slide_title{
		border:none !important;
		padding: 1em 0 0.5em !important;
	}
}




/*COLLECTION social*/
.ecbn-selection-widget{
	margin:0!important;
	
}
.ecbn-selection-footer2{
	display: none !important;
}

/*スマホ表示変更*/
@media screen and (max-width:980px) {
	.ecbn-selection-wrapper{
		background-color: rgba(192, 192, 192, 0.1) !important;
		padding: 20px 0 !important;
	}
	.ecbn-selection-wrapper{
		margin:0 !important;
	}
	.visumo_social_tile_title{
		border:none !important;
		padding: 1em 0 0.5em !important;
	}
}



/*===============================
カノニカル リンク SEO用
canonical_url_link.js 連動
===============================*/

.canonical_link_table{
	background-color: #f5f5f5;
	margin: 3em auto 0;
	width:100%;
	padding: 15px;
	
	font-size: 0.9em;
}
.canonical_link_th{
	width: 6em;
	text-align: left;
	color: #666;
	font-weight: normal;
}
.canonical_link_table a{
	text-decoration: underline;
}