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

/*==================================
	base
==================================*/
.breadcrumbs { background: #fff5eb; margin-top: 1px;}
@media screen and (max-width: 1359px) {
.itemList.column4 .item { width: 20.28vw;}
.itemList.column4 .item .phArea { height: 20.28vw; padding: 1.14vw;}
.itemList.column4 .item .phArea .ph img { width: 17.85vw; height: 17.85vw;}
.itemList.column4 .item .txtArea .cart .btn:before { width: 1.57vw; height: 1.42vw; left: 2vw;}
}
@media screen and (max-width: 1199px) {
.itemList.column4 .item .review .spOnly { display: block;}
.itemList.column4 .item .txtArea .cart .btn { font-size: 16px;}
}
@media screen and (max-width: 999px) {
.itemList.column4 .item .txtArea { margin-top: 20px;}
.itemList.column4 .item .txtArea .name { font-size: 18px;}
.itemList.column4 .item .txtArea .price { font-size: 9px; margin-top: 5px;}
.itemList.column4 .item .txtArea .price .en {font-size: 15px;}
.itemList.column4 .item .txtArea .price .tax {font-size: 9px;}
.itemList.column4 .item .txtArea .review { margin-top: 5px;}
.itemList.column4 .item .txtArea .review .valuation { font-size: 11px; margin-right: 8px;}
.itemList.column4 .item .txtArea .review .valuation .en { font-size: 12px;}
.itemList.column4 .item .txtArea .cart { margin-top: 10px;}
.itemList.column4 .item .txtArea .cart .btn { font-size: 14px; padding: 10px 10px 12px 10px;}
}

@media screen and (max-width: 899px) {
.itemList.column4 { flex-wrap: wrap;}
.itemList.column4 .item { width: 42vw; margin-top: 30px;}
.itemList.column4 .item .phArea { height: 42vw; padding: 1.7vw;}
.itemList.column4 .item .phArea .ph img { width: 38vw; height: 38vw;}
.itemList.column4 .item .txtArea .cart .btn { font-size: 12px; padding-left: 20px;}
.itemList.column4 .item .txtArea .cart .btn:before { width: 15px; height: 14px; left: 15px;}
}

/*==================================
	main
==================================*/
#main { background: #fff5eb;}
/* info */
#main .info { display: flex; justify-content: space-between;}
#main .infoSliderArea { width: 760px; position: relative;}
#main .infoSliderArea img { width: 100%; height: auto;}
#main .infoSliderArea .infoSlider { width: 600px;margin-left: 160px;}
#main .infoSliderArea .infoSlider img { width: 600px; height: 600px; border-radius: 30px; object-fit: cover;}
#main .infoSliderArea .infoSlider_thumb { width: 120px; height: 600px; overflow: hidden; position: absolute; left: 0; top: 0;}
#main .infoSliderArea .infoSlider_thumb img { width: 120px; height: 120px; border-radius: 20px; object-fit: cover;}
#main .infoSliderArea .infoSlider_thumb .slick-list { margin: -15px 0;}
#main .infoSliderArea .infoSlider_thumb .slick-slide { margin: 15px 0 0 0; cursor: pointer;}
#main .infoSliderArea .infoSlider_thumb .slick-slide.slick-current { position: relative;}
#main .infoSliderArea .infoSlider_thumb .slick-slide.slick-current:before { width: 120px; height: 120px; border-radius: 20px; content: ""; background: #c7a382; position: absolute; opacity: 0.5;}
#main .infoTxt { width: 400px;}
#main .infoTxt .name { padding-bottom: 30px; margin-bottom: 30px; border-bottom: solid 1px #222; position: relative;}
#main .infoTxt .name:before { width: 86px; height: 66px; background: url("../img/item/stamp.webp") no-repeat; right: 0; top: 0; position: absolute; content: ""; z-index: -1;}
#main .infoTxt .name .en { font-size: 18px;}
#main .infoTxt .name .jp { font-size: 36px;  color: #755233; font-weight: 600;}
#main .infoTxt .price {}
#main .infoTxt .price { font-size: 24px; margin-top: 10px;}
#main .infoTxt .price .en {font-size: 36px;}
#main .infoTxt .price .tax {font-size: 16px;}
#main .infoTxt .review { margin-top: 20px}
#main .infoTxt .volume { margin-top: 30px; padding: 25px; background: #f5dfca;}
#main .infoTxt .volume .txt { margin-right: 20px;}
#main .infoTxt .volume .quantity-wrapper { display: flex; align-items: center; overflow: hidden; width: 100%;}
#main .infoTxt .volume .qty-btn { width: 38px; height: 38px; border-radius: 38px; background-color: #f5dfca; border: solid 2px #222; color: #222; cursor: pointer; transition: background-color 0.2s; position: relative;}
#main .infoTxt .volume #btn-plus.qty-btn:before,
#main .infoTxt .volume #btn-plus.qty-btn:after  { width: 2px; height: 14px; content: ""; display: inline-block; position: absolute; background-color: #222; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
#main .infoTxt .volume #btn-plus.qty-btn:after { transform: rotate(90deg);}
#main .infoTxt .volume #btn-minus.qty-btn:before { width: 2px; height: 14px; content: ""; display: inline-block; position: absolute; background-color: #222; transform: rotate(90deg); left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
#main .infoTxt .volume input[type=number] { font-size: 24px; padding: 8px; margin: 0 10px; width: 100px; border-radius: 15px; border: none; text-align: center; line-height: 1; font-family: "Outfit"; font-weight: 700;}
#main .infoTxt .volume input[type="number"] {
    -moz-appearance: textfield;
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}
}
#main .infoTxt .cart .btn,
#main .infoTxt .buy .btn { font-size: 18px; padding: 20px; text-align: center; color: #fff; position: relative; border-radius: 40px; width: 100%;}
#main .infoTxt .cart .btn:before,
#main .infoTxt .buy .btn:before { width: 22px; height: 20px; left: 40px; top: 0; bottom: 0; margin: auto; background: url("../img/icon_wh.webp") no-repeat; background-size: 100% 100%; content: ""; position: absolute;}
#main .infoTxt .cart .btn { margin-top: 35px; background: #c5966c;}
#main .infoTxt .buy .btn { margin-top: 20px; background: #222;}
#main .infoTxt .sns_link { margin-top: 30px; display: flex; align-items: center;}
#main .infoTxt .sns_link li { margin-right: 20px;}
#main .infoTxt .sns_link li:nth-child(1) { width: 23px;}
#main .infoTxt .sns_link li:nth-child(2) { width: 27px;}
#main .infoTxt .sns_link li:nth-child(3) { width: 26px; margin-right: 0;}
#main .infoTxt .sns_link li img { width: 100%;}

/* tab */
#main .detailTabArea { margin-top: 70px; position: relative;}
#main .detailTabArea .decoTxt { font-size: 20px; height: 180px; position: absolute; left: 0; top: 70px; writing-mode: vertical-rl; font-family: "Outfit"; font-weight: 700; line-height: 1; letter-spacing: 0.1em;}
#main .detailTabArea .detailTab {}
#main .detailTabArea .detailTab .tab-contents { max-width: 1130px; padding: 60px; background: #fff; border-radius: 30px; margin: 0 auto;}
#main .detailTabArea .detailTab .tab-contents .content-tab1 p { margin-top: 20px;}
#main .detailTabArea .detailTab .tab-contents .content-tab1 .maincopy { font-size: 22px; margin: 0 0 30px 0; font-weight: 500;}
#main .detailTabArea .detailTab .tab-contents .table { display: flex; flex-wrap: wrap;}
#main .detailTabArea .detailTab .tab-contents .table dt { width: 140px; padding: 15px 0; font-weight: 600; border-right: solid 2px #c5966c;}
#main .detailTabArea .detailTab .tab-contents .table dd { width: calc(100% - 140px); padding: 15px 0 15px 40px;}
/* 視覚的に非表示（visually-hidden） */
#main .detailTabArea .detailTab input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap;}
/* フォーカス状態（キーボード操作時） */
#tab1:focus-visible ~ .tabs-inner label[for="tab1"],
#tab2:focus-visible ~ .tabs-inner label[for="tab2"],
#tab3:focus-visible ~ .tabs-inner label[for="tab3"] {}
.tab-labels { display: flex; justify-content: center; margin-bottom: -25px;}
.tab-label { max-width: 200px; margin: 0 10px; border: solid 2px #222; background-color: rgba(255, 245, 235, 0.6); padding: 10px;  flex: 1; text-align: center; cursor: pointer; transition: all 0.3s; border-radius: 30px;}
.tab-label:hover { opacity: 0.7;}
.tab-label .sp { display: none;}
.tab-contents > div { display: none;}
/* チェックされたタブのラベルのスタイル */
#tab1:checked ~ .tabs-inner label[for="tab1"],
#tab2:checked ~ .tabs-inner label[for="tab2"],
#tab3:checked ~ .tabs-inner label[for="tab3"] { background: #222; color: #fff;}
#tab1:checked ~ .tabs-inner .content-tab1,
#tab2:checked ~ .tabs-inner .content-tab2,
#tab3:checked ~ .tabs-inner .content-tab3 { display: block; min-height: 160px;}
/* 選択中のタブはhoverしても透過しない */
#tab1:checked ~ .tabs-inner label[for="tab1"]:hover,
#tab2:checked ~ .tabs-inner label[for="tab2"]:hover,
#tab3:checked ~ .tabs-inner label[for="tab3"]:hover { opacity: 1;}
@media screen and (max-width: 1359px) {
/* info */
#main .infoSliderArea { width: calc( 100% - 430px);}
#main .infoSliderArea .infoSlider { width: 44vw; margin-left: 12vw;}
#main .infoSliderArea .infoSlider img { width: 44vw; height: 44vw;}
#main .infoSliderArea .infoSlider_thumb { width: 9vw; height: 44vw; overflow: hidden; position: absolute; left: 0; top: 0;}
#main .infoSliderArea .infoSlider_thumb img { width: 9vw; height: 9vw;}
#main .infoSliderArea .infoSlider_thumb .slick-list { margin: -10px 0;}
#main .infoSliderArea .infoSlider_thumb .slick-slide { margin: 10px 0 0 0;}
#main .infoSliderArea .infoSlider_thumb .slick-slide.slick-current:before { width: 9vw; height: 9vw;}
#main .infoTxt { width: 30vw;}
#main .infoTxt .name:before { width: 66px; height: 50px; background-size: 100% auto;}
#main .infoTxt .volume { padding: 20px;}
#main .infoTxt .volume .txt { margin-right: 10px}
#main .infoTxt .volume #quantity { font-size: 22px; width: 80px; padding: 8px 5px;}
#main .infoTxt .cart .btn:before,
#main .infoTxt .buy .btn:before { left: 30px;}
/* tab */
#main .detailTabArea .detailTab .tab-contents { width: 96%; padding: 60px 40px 40px 40px; margin-left: 4%;}
}
@media screen and (max-width: 899px) {
#main .inner { width: 90%;}
/* info */
#main .info { display: block;}
#main .infoSliderArea { width: 100%;}
#main .infoSliderArea .infoSlider { width: 70vw; margin-left: 18vw;}
#main .infoSliderArea .infoSlider img { width: 70vw; height: 70vw; border-radius: 20px;}
#main .infoSliderArea .infoSlider_thumb { width: 14vw; height: 70vw; overflow: hidden; position: absolute; left: 0; top: 0;}
#main .infoSliderArea .infoSlider_thumb img { width: 14vw; height: 14vw; border-radius: 10px;}
#main .infoSliderArea .infoSlider_thumb .slick-list { margin: -5px 0;}
#main .infoSliderArea .infoSlider_thumb .slick-slide { margin: 5px 0 0 0;}
#main .infoSliderArea .infoSlider_thumb .slick-slide.slick-current:before { width: 14vw; height: 14vw; border-radius: 10px;}
#main .infoTxt { margin-top: 40px; width: 100%;}
#main .infoTxt .name:before { width: 56px; height: 44px;}
#main .infoTxt .name { padding-bottom: 10px; margin-bottom: 10px;}
#main .infoTxt .name .en { font-size: 14px;}
#main .infoTxt .name .jp { font-size: 20px;}
#main .infoTxt .price { font-size: 14px; margin-top: 10px;}
#main .infoTxt .price .en {font-size: 22px;}
#main .infoTxt .price .tax {font-size: 12px;}
#main .infoTxt .review { margin-top: 10px}
#main .infoTxt .volume { margin-top: 15px; padding: 15px;}
#main .infoTxt .volume .quantity-wrapper { justify-content: center;}
#main .infoTxt .volume #quantity { padding: 5px;}
#main .infoTxt .volume .qty-btn { width: 26px; height: 26px; border-radius: 26px;}
#main .infoTxt .cart .btn,
#main .infoTxt .buy .btn { font-size: 16px; padding: 10px;}
#main .infoTxt .cart .btn:before,
#main .infoTxt .buy .btn:before { width: 15px; height: 14px; left: 20px;}
#main .infoTxt .cart .btn { margin-top: 20px;}
#main .infoTxt .buy .btn { margin-top: 15px;}
#main .infoTxt .sns_link { margin-top: 20px;}
#main .infoTxt .sns_link li { margin-right: 15px;}
#main .infoTxt .sns_link li:nth-child(1) { width: 14px;}
#main .infoTxt .sns_link li:nth-child(2) { width: 17px;}
#main .infoTxt .sns_link li:nth-child(3) { width: 17px;}
/* tab */
#main .detailTabArea { margin-top: 35px;}
#main .detailTabArea .detailTab .tab-contents { width: 100%; padding: 40px 30px 30px 30px; margin-left: 0; border-radius: 15px;}
#main .detailTabArea .decoTxt { margin-bottom: 15px; height: auto; writing-mode: horizontal-tb; position: relative; top: 0;}
#main .detailTabArea .detailTab .tab-contents .content-tab1 p { margin-top: 10px;}
#main .detailTabArea .detailTab .tab-contents .content-tab1 .maincopy { font-size: 18px; margin: 0 0 20px 0;}
#main .detailTabArea .detailTab .tab-contents .table { display: block;}
#main .detailTabArea .detailTab .tab-contents .table dt { width: 100%; padding: 15px 0; font-weight: 600; border-right:0;}
#main .detailTabArea .detailTab .tab-contents .table dd { width: 100%; padding: 0 0 20px 15px; border-bottom: solid 1px #c5966c;}
#main .detailTabArea .detailTab .tab-contents .table dd:nth-last-of-type(1) { border-bottom: 0;}
.tab-labels { align-items: stretch;}
.tab-labels span {height: 100%; display: inline-block; display: flex; align-items: center; justify-content: center;}
.tab-label { max-width: 110px; margin: 0 5px; line-height: 1.2;}
.tab-label .sp { display: block;}
}

/*==================================
	buyitwith
==================================*/
#buyitwith { padding-top: 100px; padding-bottom: 240px; background: #fff5eb; position: relative; z-index: 10; overflow: hidden;}
#buyitwith:after { height: 120px; width: 100%; bottom: 0; left: 0; position: absolute; content: ""; background: #fff;}
#buyitwith .inner { position: relative;}
#buyitwith .inner:after { width: 200px; height: 156px; bottom: -240px; right: -100px; content: ""; background: url("../img/item/buyitwith_illust.webp") no-repeat; position: absolute; z-index: 1;}
#buyitwith .tit { font-size: 36px; position: relative; z-index: 1; font-weight: 600;}
#buyitwith .txt { font-size: 150px; top: -40px; right: 0; color: #feecdb; position: absolute; font-family: "Outfit"; font-weight: 700; line-height: 1;}
#buyitwith .itemList { margin-top: 60px; display: flex; justify-content: space-between; position: relative; z-index: 1;}
#buyitwith .itemList .item { display: flex; width: 46.6%;}
#buyitwith .itemList .item .txtArea { width: calc(100% - 254px); padding-left: 30px; text-align: left;}
@media screen and (max-width: 1359px) {
#buyitwith .txt { font-size: 9vw;top: -30px;}
#buyitwith .itemList .item .btn:before { left: 20px;}
}
@media screen and (max-width: 1199px) {
#buyitwith .itemList { margin-top: 30px; display: block;}
#buyitwith .itemList .item { margin-top: 30px; width: 100%;}
#buyitwith .itemList .item .btn { max-width: 300px;}
}
@media screen and (max-width: 899px) {
#buyitwith { padding-top: 50px; padding-bottom: 120px;}
#buyitwith:after { height: 60px;}
#buyitwith .inner:after { width: 100px; height: 78px; bottom: -120px; right: -50px; background-size: cover;}
#buyitwith .tit { font-size: 22px;}
#buyitwith .txt { top: 8vw; top: -20px;}
#buyitwith .itemList .item .txtArea { width: calc(100% - 200px);}
#buyitwith .itemList .item .btn { max-width: 300px;}
#buyitwith .itemList .item .btn:before { width: 15px; height: 14px; left: 15px;}
}
@media screen and (max-width: 519px) {
#buyitwith .inner { width: 90%;}
#buyitwith .itemList { margin-top: 0; display: flex; justify-content: space-between;}
#buyitwith .itemList .item { width: 42vw; margin-top: 30px; display: block;}
#buyitwith .itemList .item .phArea { height: 42vw; padding: 1.7vw;}
#buyitwith .itemList .item .phArea .ph img { width: 38vw; height: 38vw;}
#buyitwith .itemList .item .txtArea { text-align: center; width: 100%; padding-left: 0;}
#buyitwith .itemList .item .txtArea .cart .btn { font-size: 12px; padding-left: 20px;}
#buyitwith .itemList .item .txtArea .cart .btn:before { width: 15px; height: 14px; left: 15px;}
}

/*==================================
	history
==================================*/
#history {}
#history .tit.en { font-size: 60px; text-align: center;}
#history .tit.jp { font-size: 24px; margin-top: 20px; text-align: center;}
#history .itemList { --gap: 20px; --clmNum: 4; margin-top: 50px; display: flex; justify-content: flex-start; gap: var(--gap); position: relative; z-index: 1; width:100%;}
#history .itemList .item{ width: calc( ( 100% - ( var(--gap) * ( var(--clmNum) - 1 ) ) ) / var(--clmNum) ); }
@media screen and (max-width: 899px) {
#history.outer { width: 90%;}
#history .tit.en { font-size: 30px;}
#history .tit.jp { font-size: 14px; margin-top: 10px;}
#history .itemList { --gap: 20px; --clmNum: 2;margin-top: 25px;}
}

/*==================================
	recommend
==================================*/
#recommend { margin-top: 140px; padding: 170px 0 120px 0; background: #f5dfca; position: relative;}
#recommend .tit { font-size: 24px; top: -40px; border-radius: 10px; padding: 20px 10px; width: 400px; max-width: 90%; position: absolute; z-index: 1; display: inline-block; color: #fff; background: #e7624c; left: 0; right: 0; margin: auto; text-align: center;}
#recommend .tit:before { margin-left: -13px; border: 13px solid transparent; border-top: 13px solid #e7624c; content: ""; position: absolute; top: 100%; left: 50%;}
#recommend .txt { font-size: 120px; top: 82px; left: 0; right: 0; margin: auto; text-align: center; color: #fbe8d5; position: absolute; font-family: "Outfit"; font-weight: 700; line-height: 1; letter-spacing: 0.05em;}
#recommend .itemList { --gap: 20px; --clmNum: 4; display: flex; justify-content: flex-start; gap: var(--gap); position: relative; z-index: 1; width:100%;}
#recommend .itemList .item { width: calc( ( 100% - ( var(--gap) * ( var(--clmNum) - 1 ) ) ) / var(--clmNum) );}
#recommend .itemList .cart .btn { background: #fff5eb;}
@media screen and (max-width: 1359px) {
#recommend { padding-top: 14vw;}
#recommend .txt { font-size: 9vw; top: 7vw;}
}
@media screen and (max-width: 899px) {
#recommend .outer { width: 90%;}
#recommend { margin-top: 70px; padding: 10vw 0 60px 0;}
#recommend .tit { font-size: 18px; top: -30px; border-radius: 10px; padding: 15px 5px; width: 80%; max-width: 400px;}
#recommend .txt { top: 8vw;}
#recommend .itemList { --gap: 20px; --clmNum: 2; display: flex; position: relative; z-index: 1;}
#recommend .itemList .cart .btn { background: #fff5eb;}
}
@media screen and (max-width: 599px) {
#recommend .txt { top: 9vw;}
}
@media screen and (max-width: 499px) {
#recommend .txt { top: 10vw;}
}
@media screen and (max-width: 399px) {
#recommend .txt { top: 11vw;}
}