/*************************************************************

商品詳細全体の設定

*************************************************************/

/*----------------------------
商品詳細大枠
----------------------------*/
.ec-productRole {
    padding: 0;
    max-width: 860px;
    color: var(--color-main);
}

@media screen and (max-width: 860px) {
    .ec-productRole {
        padding: 0 10px;
    }
}

.ec-grid2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.products-description {
    margin-bottom: 120px;
}
.products-description a{
    color: #6f4283;
}

/*----------------------------
左　商品画像エリア
----------------------------*/
.ec-grid2 .products-visual-area {
    flex: 0 1 300px;
    width: 300px;
}

@media screen and (max-width: 768px) {
    .ec-grid2 .products-visual-area {
        flex: 0 1 100%;
    }
}

.ec-sliderItemRole {
    padding: 0;
}

.item_visual {
    border: solid 2px var(--color-main);
}

.item_visual .slick-slide img {
    display: inherit;
    aspect-ratio: 1;
    object-fit: contain;
}

.item_visual::after {
    content: "※画像はイメージです";
    color: var(--color-white);
    font-size: 10px;
    padding: 4px 6px;
    background: var(--color-main);
    position: absolute;
    right: 0;
    bottom: 0;
}

/*----------------------------
右　商品情報エリア
----------------------------*/
.products-detail-info {
    flex: 0 1 calc(100% - 360px);
}

@media screen and (max-width: 768px) {
    .products-detail-info {
        flex: 0 1 100%;
    }
}

.ec-productRole__profile {
    margin: 0;
}

/*************************************************************

各エリアの設定

*************************************************************/
/*----------------------------
商品名
----------------------------*/
.titleBar {
    color: var(--color-main);
    margin-bottom: 40px;
}

/*----------------------------
商品情報
----------------------------*/
.detail-info-table .category-name {
    margin-bottom: 25px;
    font-family: var(--font-head);
    font-size: 14px;
    width: fit-content;
    padding: 5px;
    border: solid 1px var(--color-main);
}

.detail-info-table dl {
}

@media screen and (max-width: 768px) {
    .detail-info-table dl {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

.detail-info-table dl > div {
    display: flex;
    flex-wrap: wrap;
    color: var(--color-main);
    border-bottom: solid 1px var(--color-main);
}

@media screen and (max-width: 768px) {
    .detail-info-table dl > div {
        flex: 0 1 calc(100% / 2 - 5px);
    }
}

.detail-info-table dl > div dt {
    flex: 0 1 120px;
    padding: 10px 10px 10px 0;
    font-family: var(--font-head);
    font-size: clamp(12px, 1vw, 14px);
    margin: 0;
    font-weight: 400;
}

@media screen and (max-width: 768px) {
    .detail-info-table dl > div dt {
        flex: 0 0 70px;
    }
}

.detail-info-table dl > div dd {
    flex: 0 1 calc(100% - 120px);
    padding: 10px 0;
    margin: 0;
    font-size: clamp(12px, 1vw, 14px);
}

@media screen and (max-width: 768px) {
    .detail-info-table dl > div dd {
        flex: 0 1 calc(100% - 70px);
    }
}

.detail-hide{
    display: none;
}
#detail-more{
    margin-inline: auto;
}

/*-----
タグエリア
-----*/
.ec-productRole .ec-productRole__tags {
    border: none;
}

.ec-productRole .ec-productRole__tags > li {
    background: none;
    border: solid 1px var(--color-main);
    color: var(--color-main);
}

/*-----
数量（非表示）
-----*/
.ec-numberInput {
    display: none;
}

/*-----
商品価格
-----*/
.ec-productRole__price {
    text-align: center;
    color: var(--color-main);
}
.ec-price{
    color: var(--color-red);
    font-weight: 600;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.ec-price .ec-price__price {
    padding: 0;
    font-size: 28px;
}
.ec-price .ec-price__tax{
    font-size: 16px;
}
.ec-productRole .ec-productRole__price {
    color: var(--color-main);
    border: none;
    padding: 0;
}

/*-----
在庫一覧ボタン
-----*/
.ec-productRole .ec-productRole__btn {
    width: 100%;
    display: flex;
    justify-content: center;
}
.ec-productRole .ec-productRole__btn .DrawerOpenBT{
    display: flex;
    justify-content: center;
}

.BT.ec-blockBtn--action {
    font-size: 20px;
    font-family: var(--font-head);
    max-width: 260px;
    padding: 5px 20px;
    height: auto;
    font-weight: 400;
    margin-inline: auto;
    background: #6f4283;
    color: var(--color-white);
    width: 220px;
}
.BT.ec-blockBtn--action .arrow{
    width: 25px;
    padding: 2px;
}
.BT.ec-blockBtn--action .arrow::before{
    background: url(/html/user_data/assets/img/common/arrow_red02.svg) center center no-repeat;
}

/*-----
コレクション管理
-----*/
.favorite-and-collection {
    position: relative;
    border: solid 1px var(--color-main);
    padding: 40px 20px 20px;
    margin-top: 40px;
    background: var(--color-trueWhite);
}

.favorite-and-collection h2.title {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 16px;
    padding: 0 45px;
    color: var(--color-main);
    clip-path: polygon(20px 0%, calc(100% - 20px) 0%, calc(100% - 10px) 50%, calc(100% - 20px) 100%, 20px 100%, 10px 50%);
    width: 220px;
}

.favorite-and-collection h2.title::before,
.favorite-and-collection h2.title::after {
    display: block;
    content: "";
    background: url("/html/user_data/assets/img/common/head_icon.svg") no-repeat center;
    background-size: auto;
    width: 42px;
    height: 36px;
    position: absolute;
    background-size: contain;
}

/*-----
通常ボタン
-----*/
.favorite-and-collection button,
.favorite-and-collection button.active {
    background: var(--color-white);
    border-radius: 50px;
    border: solid 1px var(--color-main);
    text-align: center;
    color: var(--color-main);
    max-width: 216px;
    display: block;
    margin: auto;
    padding: 12px 20px;
    font-size: 14px;
    width: 100%;
}

.favorite-and-collection button#favorite span,
.favorite-and-collection button.active#favorite span {
    display: inline-block;
    margin-right: 5px;
    width: 18px;
    height: 18px;
    background: url(../../img/products/icon-favorite.svg) no-repeat center;
    background-size: contain;
    transform: translate(0, 3px);
}

.favorite-and-collection button#my_collection span,
.favorite-and-collection button.active#my_collection span {
    display: inline-block;
    margin-right: 5px;
    width: 18px;
    height: 18px;
    background: url(../../img/products/icon-collection.svg) no-repeat center;
    background-size: contain;
    transform: translate(0, 3px);
}

/*-----
追加済ボタン(色差分)
-----*/
.favorite-and-collection button.active {
    background: var(--color-main);
    color: var(--color-white);
}

.favorite-and-collection button.active#favorite span {
    background: url(../../img/products/icon-favorite-white.svg) no-repeat center;
}

.favorite-and-collection button.active#my_collection span {
    background: url(../../img/products/icon-collection-white.svg) no-repeat center;
}

/*-----
購入済みメッセージ
-----*/
.favorite-and-collection .message {
    text-align: center;
}

.favorite-and-collection .message p {
    display: inline-block;
    background: #e2dfd8;
    text-align: center;
    margin: 0 auto 10px;
    color: var(--color-main);
    padding: 5px;
}

/*----------------------------
商品情報
----------------------------*/
.detail-info {
    display: flex;
    justify-content: space-between;
    border: solid 1px var(--color-main);
    margin-bottom: 10px;
}

.detail-info h2.detail-info-title {
    flex: 0 0 65px;
    background: var(--color-main);
    color: var(--color-white);
    writing-mode: vertical-lr;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 15px;
}

.detail-info .detail-info-main {
    flex: 0 1 calc(100% - 65px);
    padding: 20px 15px;
    background: var(--color-trueWhite);
}

.detail-info .detail-info-main h3 {
    font-size: 16px;
    color: var(--color-main);
    border-bottom: 1px dashed var(--color-main);
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.detail-info .detail-info-main p + h3 {
    margin-top: 15px;
}

/*************************************************************

関連商品の設定

*************************************************************/
#related {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.related-products {
    background: var(--color-white);
    margin: 0 calc(50% - 50vw + 10px) !important;
    max-width: none !important;
    padding: 60px 0 30px;
    border-top: solid 1px var(--color-main);
    border-bottom: solid 1px var(--color-main);
    position: relative;
}

.related-products > .inner {
    max-width: 960px;
    margin: auto;
    padding: 0 10px;
}

@media screen and (max-width: 860px) {
    .related-products > .inner {
        width: calc(100% - 30px);
    }
}

@media screen and (max-width:767px){
    #related{
        gap: 10px;
    }
}

/*----------------------------
スライド設定
----------------------------*/
#related .slick-slide {
    padding: 0 10px;
}

/*-----
画像関連
-----*/
#related .slick-slide .item_photo {
    text-align: center;
}

#related .slick-slide img {
    max-height: 200px;
    margin: auto;
    display: inherit;
}

/*-----
テキスト関連
-----*/
.related-products h2.title {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translate(-50%, 0);
    min-width: 364px;
    text-align: center;
}
.related-products .related-products,
.related-products .item-work,
.related-products .item_name{
    display: block;
}

@media screen and (max-width: 599px) {
    .related-products h2.title {
        min-width: auto;
        width: 80%;
    }
}

/*-----
prev-nextボタン関連
-----*/
.related-products .arrow-box {
    display: flex;
    justify-content: flex-end;
}

@media screen and (max-width: 860px) {
    .related-products .arrow-box {
        width: calc(100% - 50px);
        margin: auto;
    }
}

.related-products .arrow-box .prev-arrow {
    margin-right: 10px;
}

.related-products .slick-slider {
    margin: 0;
}

/*----------------------------
商品エリアの設定
----------------------------*/
.related-products .item_photo {
    margin-bottom: 10px;
}

.related-products .item_photo img {
    max-height: 200px;
}

.related-products .area-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.related-products .area-container {
    padding: 8px 0;
    border-bottom: solid 1px var(--color-main);
}

@media screen and (max-width: 599px) {
    .related-products .area-container {
        font-size: 12px;
    }
}

.related-products .area-container .label {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 400;
}

@media screen and (max-width: 599px) {
    .related-products .area-container .label {
        font-size: 12px;
    }
}

.related-products .item_price {
    text-align: right;
    font-weight: 600;
    padding: 8px 0;
}
.related-products .item_price a{
    color: var(--color-red);
}

@media screen and (max-width: 599px) {
    .related-products .item_price {
        font-size: 12px;
    }
}

.related-products .item_price .small-fonts {
    font-size: 11px;
}

/*************************************************************

ドロワーエリアの設定

*************************************************************/
.condition-product-list{
    border-top: 1px solid var(--color-main);
}
.condition-product-item {
    list-style: none;
    width: calc(100% - 40px);
    margin: 10px auto;
    border-bottom: 1px solid;
}

.condition-product-item .main-area {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-bottom: 20px;
}

/*----------------------------
商品画像
----------------------------*/
.condition-product-item .main-area .child_product_images {
    flex: 0 1 300px;
    width: 300px;
    border: solid 1px var(--color-main);
    position: relative;
}
.condition-product-item .main-area .child_product_images_box{
    margin-bottom: 0;
}

@media screen and (max-width: 1024px) {
    .condition-product-item .main-area .child_product_images {
        flex: 0 1 40%;
        width: 40%;
    }
}

@media screen and (max-width: 599px) {
    .condition-product-item .main-area .child_product_images {
        flex: 0 1 100%;
        width: 100%;
    }
}

.condition-product-item .main-area .child_product_images .slide-item {
    text-align: center;
}

.condition-product-item .main-area .child_product_images img {
    margin: auto;
    display: inherit;
    width: 100%;
}

.condition-product-item .main-area .child_product_images .slick-dots li button::before {
    border-radius: 0;
    transform: rotate(45deg);
    background: var(--color-white);
    border: solid 1px var(--color-main);
    opacity: 1;
    width: 8px;
    height: 8px;
}

.condition-product-item .main-area .child_product_images .slick-dots li.slick-active button::before {
    opacity: 1;
    background: var(--color-main);
}

.child_product_images_box .arrowBtn{
    position: absolute;
    inset: 50% 0;
    z-index: 1;
}
.child_product_images_box .arrowBtn.next{
    inset: 50% 0 50% calc(100% - 32px);
}
.ec-sliderItemRole .slideThumb img{
    object-fit: contain;
}


/*----------------------------
商品情報エリア
----------------------------*/
.condition-product-item .main-area .child_product_detail {
    flex: 0 1 calc(100% - 330px);
}

@media screen and (max-width: 1024px) {
    .condition-product-item .main-area .child_product_detail {
        flex: 0 1 calc(60% - 10px);
    }
}

@media screen and (max-width: 599px) {
    .condition-product-item .main-area .child_product_detail {
        flex: 0 1 100%;
    }
}

/*-----
商品名エリア
-----*/
.condition-product-item .name-area {
    margin-bottom: 10px;
}

.condition-product-item .name-area .products-name {
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: 400;
}

.condition-product-item .name-area .stock {
    margin-bottom: 5px;
    font-size: 12px;
}

.condition-product-item .name-area .stock span {
    font-size: 18px;
    font-weight: 600;
}

/*-----
価格エリア
-----*/
.condition-product-item .main-area .child_product_detail .price {
    text-align: center;
    font-size: 28px;
    color: var(--color-red);
    font-weight: 600;
}

.condition-product-item .main-area .child_product_detail .price span {
    font-size: 12px;
}

/*-----
状態エリア
-----*/

.condition-product-item .detail-info {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    border: solid 1px var(--color-main);
    margin-bottom: 10px;
    background: linear-gradient(to right, #2b0a09 44px, #faf7f0 44px);
}

.condition-product-item .detail-info h2 {
    font-size: 20px;
    padding: 10px;
    flex: 0 0 36px;
    display: block;
}

.condition-product-item .detail-info .detail-info-main {
    flex: 0 1 calc(100% - 36px);
    padding: 10px 10px 35px 10px;
    position: relative;
    font-size: 14px;
}

.mt-2:not(:last-of-type) {
    margin: 40px 0;
}

.condition-product-item .detail-info .detail-info-main .accrodion {
    overflow: hidden;
    transition: 0.3s ease;
}

.condition-product-item .detail-info .detail-info-main .more {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 14px;
    padding: 5px 20px 5px 5px;
    text-align: right;
    cursor: pointer;
}

.condition-product-item .detail-info .detail-info-main .more::before {
    content: "";
    width: 10px;
    height: 1px;
    background: var(--color-main);
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translate(0, -50%);
}

.condition-product-item .detail-info .detail-info-main .more.open::before {
    opacity: 0;
}

.condition-product-item .detail-info .detail-info-main .more::after {
    content: "";
    width: 1px;
    height: 10px;
    background: var(--color-main);
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(0, -50%);
    transition: 0.3s;
}

.condition-product-item .detail-info .detail-info-main .more.open::after {
    transform: translate(0, -50%) rotate(90deg);
}

/*-----
カートエリア
-----*/
.condition-product-item .cart-area {
    display: flex;
    justify-content: space-between;
    justify-content: center;
    align-items: center;
}

.condition-product-item .cart-area .input-form {
    flex: 0 1 140px;
}
.condition-product-item .cart-area .input-form .ec-numberInput{
    display: block;
}

.condition-product-item .cart-area .input-form input {
    margin: 0;
}

.condition-product-item .cart-area .ec-productRole__btn {
    flex: 0 1 calc(100% - 150px);
}

.condition-product-item .cart-area .ec-productRole__btn button {
    background: #ac1919;
    font-family: var(--font-head);
    font-weight: 400;
    text-align: center;
    color: var(--color-white);
    justify-content: center;
    padding: 0 10px;
    width: 100%;
    max-width: none;
}

.item_visual .slide-item {
    aspect-ratio: 1 / 1; /* 550×550 */
    width: 100%;
    height: auto;
}

.item_visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 初期化前は slick に触らせない */
.item_visual:not(.slick-initialized) {
    display: block;
}

/* slick初期化完了まで見せない */
.slick-slider {
    visibility: hidden;
}
.slick-slider.slick-initialized {
    visibility: visible;
}
@media screen and (max-width:767px){
    .condition-product-item .cart-area{
        flex-wrap: wrap;
        gap: 10px; 
    }
}

/* カート追加モーダル */
.ec-modal .ec-modal-wrap{
    border: 1px solid var(--color-main);
    background: var(--color-white);
}
.ec-inlineBtn--action{
    background: var(--color-red);
    font-family: var(--font-head);
    font-weight: 400;
    text-align: center;
    color: var(--color-white);
    justify-content: center;
    padding: 0 10px;
    width: 100%;
    max-width: 213px;
    display: inline-flex;
    height: 42px;
    line-height: 42px;
    border: 1px solid var(--color-main);
    border-radius: 50px;
    font-size: 14px;
}
.ec-inlineBtn--cancel{
    background: var(--color-main);
    font-weight: 400;
    text-align: center;
    color: var(--color-white);
    justify-content: center;
    padding: 0 10px;
    width: 100%;
    max-width: 213px;
    display: inline-flex;
    height: 42px;
    line-height: 42px;
    border: 1px solid var(--color-main);
    border-radius: 50px;
    font-size: 14px;
}
.magnifier{
    border-radius: 100px;
    border: var(--color-main);
}
@media screen and (max-width:985px){
    .ec-inlineBtn--cancel{
        margin-bottom: 10px;
    }
}