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

.js_cart_area{
	margin: 2em auto;	
}

.js_cart_area input {
    display: none;
}

.js_cart_modal__open-label,
.js_cart_modal__close-label {
    cursor: pointer;
}

.js_cart_modal__open-label {
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    margin:0 auto;
    /*padding: .8em 2em;*/
   /* border: none;*/
   /* border-radius: 5px;*/
    /*background-color: #23abdd;*/
    /*color: #ffffff;*/
    /*font-weight: 600;*/
   /* font-size: 1em;*/
}

.js_cart_modal__open-label_cart{
	width: 80%;
	padding: 1em .8em;
	margin-right:1%;
    font-size: 18px;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
    background-color: #23abdd;
	border: none;
	border-radius: 5px;
}
.js_cart_modal__open-label_fav{
	width:19%;
	padding: 1em .8em;
	font-size: 18px;
	text-align: center;
	color: #aaa;
	border: #aaa 1px solid;
	border-radius: 5px;
}
.js_cart_modal__open-label_cart:hover,
.js_cart_modal__open-label_fav:hover {
	opacity: 0.8;
}

.js_cart_modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3000000000;/*KARTEポップアップより手前にする*/
    display: none;
	
	/*モーダルオープン時に元ページがスクロールするのを防ぐ用*/
	overflow-y: scroll;
	overscroll-behavior: none;
}

.js_cart_modal__open-input:checked + label + input + .js_cart_modal {
    display: block;
    animation: js_cart_modal-animation .6s;
}

.js_cart_modal__content-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 650px;
    background-color: #fefefe;
    z-index: 2;
    border-radius: 5px;
}


.js_cart_modal__close-label {
    background-color: #aaa;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 20px;
    width: 36px;
    height: 36px;
    line-height: 2;
    text-align: center;
    display: table-cell;
    position: fixed;
    top: 5px;
    right: 5px;
    z-index: 99999;
    font-size: 1.3em;
}

.js_cart_modal__content {
    max-height: 70vh;
    overflow-y: auto;
    padding: 39px 45px 40px;
	
	/*モーダルオープン時に元ページがスクロールするのを防ぐ用*/
	overscroll-behavior: contain;
}


.js_cart_modal__background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    /*height: 100%;*/
    background-color: rgba(0, 0, 0, .45);
    z-index: 1;
	
	/*モーダルオープン時に元ページがスクロールするのを防ぐ用*/
	height: calc(100% + 1px);
}

@keyframes js_cart_modal-animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media only screen and (max-width: 520px) {
    .js_cart_modal__open-label {
        max-width: 100%;
        /*padding: .94em 2.1em .94em 2.6em;*/
    }

    .js_cart_modal__close-label {
        top: 2vw;
        right: 3vw;
    }

    .js_cart_modal__content-wrap {
        width: 100vw;
		
		left: 50%;
		top: auto;
		bottom: 0;
		transform: translate(-50%, 0);
		
		border-radius: 5px 5px 0 0;
    }

    .js_cart_modal__content {
        padding: 3em 3vw;
        max-width: 100%;
		max-height: 80vh;
    }
}

/* スクロールバー */
.js_cart_modal ::-webkit-scrollbar {
  border-radius: 5px;
  width: 5px; 
}
.js_cart_modal ::-webkit-scrollbar-thumb {
  background-color: #b6b6b6;
  border-radius: 5px; 
}


/*切り替えはFSのレイアウトパーツの表示条件を使用*/
/*カートボタン文言別 / 販売開始前 */
.js_cart_modal__open-label_cart:has(.before_sales){
	background-color: #444;
}
/*カートボタン文言別 / 販売中 在庫あり */
.js_cart_modal__open-label_cart:has(.now_sales){
	
}
/*カートボタン文言別 / 販売中 在庫無し */
.js_cart_modal__open-label_cart:has(.now_sales_nostock){
	background-color: #aaa;
}
/*カートボタン文言別 / 販売終了 */
.js_cart_modal__open-label_cart:has(.ends_sales){
	background-color: #aaa;
}

/*在庫無しの場合のカートボタン / cart_outofstock_change.js連動 */
/*FSの機能で実装できたので使用無し*/
/*.outofstock .js_cart_modal__open-label_cart{
	background-color: #aaa;
}*/


/*カートボタン：スマホ下部固定（テスト）*/
@media screen and (max-width:768px) {
	/*下部固定*/
	.js_cart_area{
		margin: 0 calc(50% - 50vw);
    	width: 100vw;
	}
	.js_cart_modal__open-label {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		border:none;
		z-index: 100;
		padding: 3%;
		box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
	}
	/*調整*/
	.js_cart_modal__open-label_cart{
		width:85%;
		font-size: 16px;
		padding: 1.1em 0.8em;
		line-height:1;
	}
	.js_cart_modal__open-label_fav{
		width:14%;
		padding: 0.6em 0.8em;
	}
	/*アニメーション*/
	/*.js_cart_modal__open-label {
		animation: fadeIn 2s ease 0s 1 both;
		-webkit-animation: fadeIn 2s ease 0s 1 both;
	}
	@keyframes fadeIn {
		0% {opacity: 0}
		100% {opacity: 1}
	}
	@-webkit-keyframes fadeIn {
		0% {opacity: 0}
		100% {opacity: 1}
	}*/
}


/*FutureShopモーダル優先度調整（再入荷お知らせなど）*/
.fs-c-modal, .fs-c-modal--small, .fs-c-modal--medium{
	 z-index: 4000000000!important;/*KARTEポップアップ＆カートポップアップより手前にする*/
}