@charset "utf-8";
/*-----------
商品画像 商品情報
-----------*/
.gridBox1:has(.itemPageImg) {
	margin-bottom: 50px;
	
	@media (width <= 999px) {
		& > div:nth-of-type(1) {
			max-width: 70vw;
			margin: 0 auto 25px;
		}
	}
	@media (width <= 767px) {
		& > div:nth-of-type(1) {
			max-width: 100%;
			margin: 0 auto;
		}
	}
}
/*.gridBox1.main-contents-detailitem{
	display:flex;	
	gap:0 50px;
	margin-bottom: 50px;
	@media (width <= 999px) {
		flex-direction: column;
		gap:25px 0;
	}
	& > div{
		width:calc(50% - 25px);
		@media (width <= 999px) {
			width:100%;
		}
	}
}
*/
/*-----------
商品画像 / itemPageImg
-----------*/
.itemPageImg{
	min-width:0;
    & .main_photo_container{
        width:100%;
        background:#fffdf0;
        margin-bottom:10px;
        display:flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        & > div{
            width:100%;
            background:#fffdf0;
            @media (width <= 999px) {
                max-width: 70vw;		
                @media (width <= 767px) {
                    max-width: 100%;
                }
            }
        }
        & img{
            aspect-ratio:1000 / 677;
            max-height:667px;
            object-fit: contain;
            display:block;
			margin:0 auto;
			@media (width <= 999px) {
				padding:25px;
				@media (width <= 767px) {
					padding:0px;
				}
			}
        }
    }
    & .thumbnail_container{
        width: 100%;
        overflow: hidden;
		margin-bottom:1em;
        & .thumbnail-grid {
            display: flex;
            flex-wrap:wrap;
            width:100%;
            gap: 8px;
            padding: 0;
            list-style: none;
            & > li{
                width:calc((100% - 32px) /5);
                aspect-ratio:1.414 / 1;
                flex-shrink: 0;
                &.thumb-item{
                    & img{
                        width: 100%;
                        height:100%;
                        object-fit: cover;
                        cursor: pointer;
                        opacity: 0.5;
                        transition: opacity 0.3s ease;
                        display:block;
                    }
                    &.current img {
                        opacity: 1;
                        border: 2px solid #ff6600;
                    }
                }
            }
        }
    }
	& .photoBtmWrap{
		font-size:0.8em;
		display:flex;
		flex-direction: column;
		gap:0.5em 0;
		& .item-category-name::before,& .special_display_wrap::before{
			color:var(--color-sub);
			display: inline-block;
            font-family:var(--fa);
            font-weight:900;
            font-size:0.8em;
            margin: 0 0.5em 0 0;
		}
		& .item-category-name::before{
			content:"\f07b";
		}
		& .special_display_wrap{
			content:"\f075"::before;
		}
	}
}

/*-----------
商品情報 / itemPageInfo
-----------*/
#main .itemPageInfo {
	& .itemPageInfo-name {
		font-weight: 700;
	}
	& .reviewstarWrap{
		display:flex;
		flex-wrap:wrap;
		align-items: center;
		gap:0 0.5em;
		margin-bottom:0.5em;
		& .reviewRate{
			display: flex;
			align-items: center;
            gap: 0 0.2em;
			& .reviewRateStar::before{
				font-size:1.6rem;
			}
		}
		& .average-all{
			font-size:0.8em;
			color:#666;
			padding-top:0.1em;
			& span {display:inline-block; margin-right:0.5em;}
		}
	}
	& .item-icon-list{
		display:flex;
		gap:0.5em;
		flex-wrap: wrap;
		margin-bottom:0.5em;
	}
	& .itemPageInfo-manufacturer {
		font-size: 1.4rem;
		margin-bottom: 0.5em;
	}
	& .item-sell-text,& .item-reserve{
		font-size: 1.4rem;
		background-color:var(--color-sub-thin);
		margin:0.5em 0;
		padding:1em;
		display:flex;
		gap:0;
		flex-direction: column;
		align-items: center;
		color:var(--color-sub-deep);
		border-radius: 5px;
		& .item-sell-text-head{font-weight:bold; }
	}
	& .nameprint-area,& .nameprint-title-wrap{
		font-size:1em;
	}
	& .nameprint-area{
		border:2px solid var(--color-sub-thin);
		padding:1em;
		border-radius: 5px;
		margin-bottom:0.5em;
		font-size:1em;
		& p{
			font-size:1em;
			margin-bottom:0.5em;}
	}
	&.product-price-block{
		color:var(--color-main-deep);
	}
	& .itemPageInfo-price {
		font-weight: 700;
		color: var(--color-main-deep);
		line-height: 1;
		margin-bottom: 0.5em;
		
		& span {
			font-size: 3.8rem;
		}
	}
	& .subscription-gift{
		display: flex;
		gap:0 25px;
		margin: 0px 0 0.5em;
		& .subscription-gift img {
			min-width: 80px;
			width: 80px;
			max-height: 80px;
			display:block;
		}
	}
	& .itemPageInfo-num {
		& input {
			width: 80px;
			border: 1px solid #ccc;
			padding: 10px;
			border-radius: 5px;			
		}
	}
	& .itemPageInfo-cart {
		margin-bottom: 50px;
		width:100%;
		& a {
			display: block;
			background: var(--color-accent);
			text-align: center;
			padding: 15px;
			text-decoration: none;
			color: var(--color-accent-deep);
			font-weight: 700;
			font-size: 1.8rem;
			border-radius: 40px;
			box-shadow: 5px 5px 0 0 rgba(204,204,204,0.4);
			width:100%;
			&::before {
				font-family: var(--fa);
				font-weight: 900;
				content: "\f218";    
				padding-right:10px;
				font-size:2.4rem;
			}
		}
	}
	& .itemPageInfo-soldout,& .restockAlerts a,& .regularPurchaseBtn a,& .itemPageInfo-sale{
		margin-bottom: 50px;
        text-align: center;
        padding: 20px 15px 15px 15px;
        font-weight: 700;
        font-size: 1.8rem;
		display:block;
		text-decoration: none;
	}
	& .itemPageInfo-soldout {
        background: #ddd;
		color: #333;
	}
	& .restockAlerts a{
		background: var(--color-accent-light);
		color: #333;		
	}
	& .regularPurchaseBtn{
		width:100%;
		& a{
			background: var(--color-sub-light);
			color: #333;
			width:100%;
		}
	}
	& .itemPageInfo-sale{
		background:var(--color-main);
		color: #fff;
	}
	& .itemPageInfo-dl {
		& dl {
			margin-bottom: 15px;
			
			& dt {
				font-weight: 700;
				margin-bottom: 5px;
				color: var(--color-main);
				
				&::before {
					font-family: var(--fa);
					font-weight: 900;
					content: "\f0da";
					margin-right: 5px;
				}
			}
			& dd {
				margin-bottom: 5px;
			}
		}
	}
	& .itemPageInfo-shipping {
		margin-bottom:1em;
		& dl {
			&:has( + div){margin-bottom:1em;}
			& dt {
				&::before {
					content: "\f0d1";
				}
			}
			& dd {
				
			}
		}
	}
	& .itemPageInfo-payment {
		& dl {
			border: 2px solid var(--color-accent);
			border-radius: 10px;
			padding: 15px;
			background: var(--color-accent-thin);
			
			& dt {
				color: var(--color-accent-deep2);
				&::before {
					content: "\f09d";
				}
			}
			& dd {
				
			}
			& .itemPageInfo-payment_icon {				
                /*display: grid;
                grid-template-columns: repeat(6, 1fr);
                grid-gap: 5px 5px;*/				
				& img {
					display: block;
				}
			}
		}
	}
	& .codeInfo_Wrap{
		display:flex;
		flex-direction: column;
		gap:0;
		font-size:0.9em;
		margin-bottom:1.5em;
	}
	& .itemPageInfo-sns {
		& ul {
			font-size: 0;
			& li {
				display: inline-block;
				margin-right: 15px;
				font-size: 1.6rem;
			}
		}
	}
}

/*-----------
商品詳細 / itemPageContent
-----------*/
#main .group-review-section{
	width:100%;
}
#main .itemPageContent{
	border-top: 1px dashed #ccc;
	padding-top: 50px;
	position: relative;	
	
	@media (width <= 999px) {
		padding-bottom: 10px;
	}
	
		&::before {
			content: "Information";
			background: var(--color-main);
			color: #fff;
			font-weight: 700;
			width: max-content;
			justify-self: start;
			padding: 4px 15px;
			border-radius: 5px;
			position: absolute;
			top: -20px;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 30px;
		}
		&::after {
			content: "";
			width:0;
			height:0;
			border-style:solid;
			border-width: 15px 10px 0 10px;
			border-color: var(--color-main) transparent transparent transparent;
			position: absolute;
			top: 15px;	
			left: 15px;
		}
}

/* --- ライトボックスのアニメーション設定 --- */

.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex; /* これが抜けると表示されません */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /* アニメーション用 */
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.lightbox-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  /* アニメーション用 */
  transform: scale(0.9);
  transition: transform 0.4s ease;
}

.lightbox-overlay.is-active .lightbox-content {
  transform: scale(1);
}

.lightbox-content img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: -10px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}

@media screen and (max-width: 768px) {
  .lightbox-close {
    top: -45px;
    right: 0;
  }
}
.reviewWidget{
	padding:0;
	margin-bottom:50px;
	.reviewWidget_inner{
		padding:0;
		& .reviewWidget_title{
			padding:0;
			margin-top:0;
		}
	}
}
/* モーダルCSS */
.modal-area {
  display: none;
  position: fixed;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal-bg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modal-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
	width: 70%;
	min-width:600px;
	max-width: 500px;
	padding: 30px;
	background-color: #fff;
	@media (width <= 999px) {
		min-width:100px;
	}
}
.modal-cart-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-cart-btn li {
  border-radius: 5px;
  margin: 12px;
}
.modal-cart-btn li a {
	width: 240px;
	display: inline-block;
	text-align: center;
	padding: 15px 0;
	font-weight: bold;	
	text-decoration: none;
	@media (width <= 999px) {
		width: 100%;
	}
}
.modal-cart {
  background: #707070;
	& a{color: #fff;}
}
.modal-order {
  background: var(--color-accent);
	& a{color: var(--color-accent-deep);}
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}
.modal-open {
  display: flex;
	flex-direction: column;
  align-items: baseline;
}
.cart-amazon {
  width: fit-content;
  margin: 20px auto 0;
}

@media screen and (max-width: 768px) {
  .side {
    display: block;
  }
  .modal-cart-btn {
    display: block;
  }
}

/* オプションごとの画像 */
.option-image-option1 {
  margin-bottom: 30px;
  margin-top: 8px;
}

.option-image-option1 img {
  margin: 5px;
  border: solid 2px #eee;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  max-width: 40px;
}

.option-image-option1 img.buy {
  border: solid 2px #000;
}

.option-image-option2 {
  display: flex;
  margin-bottom: 30px;
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 10px 8px;
}

.option-image-option2-item {
  display: none;
  border: solid 2px #eee;
  padding: 6px 12px;
  cursor: pointer;
  max-width: 100px;
}

@media screen and (max-width: 768px) {
  .option-image-option2-item {
    max-width: 88px;
  }
}

.option-image-option2-item.buy {
  border: solid 2px #000;
}

.price {
  margin: 8px 0;
}

.option-image-option2-item .option-image-btn,
.option-image-option2-item .option-image-subscription-btn {
  display: none;
}

.option-image-soldout {
  background: #eee;
  position: relative;
  overflow: hidden;
}

.option-image-soldout::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 141.5%;
  height: 1.5px;
  background-color: #999;
  transform: rotate(45deg);
  transform-origin: top left;
  pointer-events: none;
  z-index: 2;
}

.option-image-checkout-button {
  width: 300px;
  display: inline-block;
  text-align: center;
  border-radius: 3px;
  margin-bottom: 5px;
  padding: 8px 0;
  font-weight: bold;
  background-color: #e90;
}

.option-image-checkout-button.subscription {
  color: #fff;
  background-color: #09e;
}

.option-image-restock-button {
  width: 300px;
  display: inline-block;
  text-align: center;
  border-radius: 3px;
  padding: 8px 0;
  font-weight: bold;
  background-color: #666;
  color: #fff;
}

.glightbox-clean .gclose {
  top: 90px!important;
}

.glightbox-clean .gnext {
  top: 45%!important;
  right: 10px!important;
  width: 35px!important;
  height: 45px!important;
}
.glightbox-clean .gprev {
  top: 45%!important;
  left: 10px!important;
  width: 35px!important;
  height: 45px!important;
}
@media (min-width: 768px) {
  .glightbox-clean .gclose {
    top: 15px!important;
  }
  .glightbox-clean .gnext {
    right: 30px;
    width: 40px;
    height: 50px;
  }
}