@charset "UTF-8";
/* =======================================================================
feature.css
特集 共通css
========================================================================== */

/* コンテンツエリア
========================================================================== */
/*ぱんくず1行に（本店商品詳細同様）*/
.breadcrumbs:has(~ .feature__wrapper) ul {padding-bottom: 1%;font-size: 11px;display: flex;word-break: keep-all;white-space: nowrap;overflow-x: scroll;scrollbar-width: none !important;-ms-overflow-style: none !important;}

.feature__wrapper {container-type: inline-size;}
.feature {box-sizing: border-box;}
.feature > h2 {font-size: 22px;margin-bottom: 1rem;}

.feature__mainvisual {display: block;background-color: #f9f9f9;}
.feature__mainvisual img {display: block;inline-size: 100%;block-size: 100%;height: auto;aspect-ratio: 16 / 5;border: #ededed 1px solid;}

.feature__nav1 {padding: 2rem 1rem 1rem 2rem;margin: 2rem 1.5rem 3rem 1.5rem;box-sizing: border-box;background: #f6f6f6;}
.feature__nav-list1 {display: flex;flex-wrap: wrap;column-gap: 1rem;list-style: none;padding: 0;margin: 0;}
.feature__nav1-item {background-color: #fff; text-align: center;flex-grow: 0;flex-basis: calc(25% - 1rem);margin-bottom: 1rem;}/*必要に応じてPCのみ特集毎tpl直に変更*/
.feature__nav1-item a {box-sizing: border-box;display: flex;justify-content: center;align-items: center;text-align: center;width: 100%;height: 100%;padding: 1rem 1rem 2rem 1rem ;position: relative;text-decoration: none;border: 1px solid #888;font-size: 15px;transition: .3s ;background-color: #fff;overflow-wrap: anywhere;line-height: 1.4;}
.feature__nav1-item a::after {position: absolute;content: "";bottom: 1rem;right: 50%;margin: auto;width: 6px;height: 6px;border-right: solid 2px #333;border-bottom: solid 2px #333;-webkit-transform: rotate(45deg);transform: rotate(45deg);transition: .3s ;}
@media (any-hover: hover) {
    .feature__nav1-item a:hover{background: rgb(255 228 225 / 0.5);border: 1px #d80000 solid;color: #d80000;}
    .feature__nav1-item a:hover::after {border-color: #d80000;bottom: .875rem;}
}

.feature__title1 {font-size: 22px;text-align: center; margin: 0 0 2rem 0;position: relative;padding: 3rem 0 1rem 0;border-bottom: 2px solid #cfcfcf;background: #fff;letter-spacing: .1rem;}
.feature__title1:before {position: absolute;bottom: -14px;width: 0;height: 0;content: '';border-width: 14px 12px 0 12px;border-style: solid;border-color: #cfcfcf transparent transparent transparent;left: 50%;transform: translate(-50%, 0);-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);}
.feature__title1:after {position: absolute;bottom: -11px;width: 0;height: 0;content: '';border-width: 14px 12px 0 12px;border-style: solid;border-color: #fff transparent transparent transparent;left: 50%;transform: translate(-50%, 0);-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);}

.feature__title1 + .feature__text1 {padding: 0 1.5rem 0 1.5rem;}

.feature__text1 {font-size: 16px;line-height: 2;padding:1.5rem 1.5rem 0 1.5rem;text-align: justify;}
.feature__img1 {display: block;margin: 2.5rem 0 0;max-width: 100%;}
.feature__img1 > img {display: block;inline-size: 100%;block-size: 100%;height: auto;aspect-ratio: 3 / 2;border: #ededed 1px solid;object-fit: cover;}

.feature__btn1 {margin: 3rem auto;width: min(85vw, 600px);}
.feature__btn1 a {display: grid;grid-template-columns: 1fr auto 1fr;column-gap: .5rem;align-items: center;padding: 1rem 2rem;font-size: 18px;font-weight: bold;background-color: #ffe4e1;border: 1px solid #eca197;color: #c93925;border-radius: 9999px;transition: .2s ;text-decoration: none;}
.feature__btn1 a::before {content: '';}
.feature__btn1 a::after {content: "";justify-self: end;inline-size: .5rem;aspect-ratio: 1;-webkit-border-before: 2px solid;border-block-start: 2px solid;-webkit-border-end: 2px solid;border-inline-end: 2px solid;translate: 0;rotate: 45deg;}
@media (any-hover: hover) {
    .feature__btn1 a:hover{box-shadow: 0px 5px 10px -5px rgb(0 0 0 / 0.5);background-color: rgb(216 0 0 / 0.6);border: 1px #d80000 solid;text-shadow: 0 0 2px #d80000;color: #fff;}
}

.feature__nav1-item a,.feature__title1,.feature__text1,.feature__btn1 a{font-feature-settings: "palt";}


.feature__page-link {margin: 2rem 0; padding: 0 1.5rem;}
.feature__page-link a {display: grid;grid-template-columns: 1fr auto ;column-gap: .5rem;align-items: center;justify-self: left;padding: 0;font-size: 18px;color: #333;transition: .2s ;line-height: 1.3;}
.feature__page-link a::before {content: "";justify-self: end;inline-size: .5rem;aspect-ratio: 1;-webkit-border-before: 2px solid;border-block-start: 2px solid;-webkit-border-end: 2px solid;border-inline-end: 2px solid;translate: 0;rotate: 45deg;}
@media (any-hover: hover) {
    .feature__page-link a:hover{color: #d80000;}
    .feature__page-link a:hover::before {color: #d80000;}
}

.feature__accordion1 {padding: 1.5rem 1.5rem 0 1.5rem;}
.feature__accordion1:not([open]) {margin: 0;}
.feature__accordion1 summary {display: flex;align-items: center;padding: 0 0 0 .25rem;color: #333;font-weight: bold;cursor: pointer;outline: none; font-size: 17px;}
.feature__accordion1 summary::-webkit-details-marker {display: none;}
.feature__accordion1 summary::before {content: "";justify-self: end;inline-size: .35rem;aspect-ratio: 1;-webkit-border-before: 2px solid;border-block-start: 2px solid;-webkit-border-end: 2px solid;border-inline-end: 2px solid;translate: 0;rotate: 45deg;margin: 0 .75rem .2rem 0;}

.feature__accordion1[open] summary::before {rotate: 135deg;}
@media (any-hover: hover) {
    .feature__accordion1 summary:hover{color: #d80000;}
    .feature__accordion1 summary:hover::before {color: #d80000;}
}
.feature__accordion1 .feature__accordion1-item {transform: translateY(-10px);opacity: 0;margin: 1rem 0 3rem;padding: 0;color: #333;transition: transform .5s, opacity .5s;}
.feature__accordion1[open] .feature__accordion1-item {transform: none;opacity: 1;}
.feature__accordion1-item { padding: 0;}

.feature__accordion1-table1{width:100%; margin:0 0 3rem; border:1px solid #aaa; border-collapse:collapse;table-layout: fixed;}
.feature__accordion1-table1 th {background: #eee;padding: 0.5rem;border: 1px solid #aaa;}
.feature__accordion1-table1 td {font-size: 14px;padding: 0.5rem;border: 1px solid #aaa;}


.feature__product-list {margin: 0 0 1rem;display:flow-root;}
.product-list__title1 {display: flex;justify-content: center;align-items: center;font-size: 22px;text-align: center;margin: 6rem 0 2rem 0;padding: 1.5rem 0;background: #eee;letter-spacing: .1rem;}
.feature__btn1 + .feature__product-list > .product-list__title1:first-child {margin-top: 3rem;}

.feature__category {margin-bottom: 2rem;}
.feature__category-title1 {font-size: 18px;margin: 6rem 0 1rem 0;padding-bottom: .25rem;border-bottom: 1px solid #bbb;}
.feature__category-list {display: flex;gap: 10px;flex-wrap: wrap;}
a.feature__category-item {width: calc((100% - 40px) / 5);padding: .25rem;text-decoration: none;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-between;align-items: center;border: #ededed 1px solid;}
.feature__category-name {padding: .25rem .5rem 0 .5rem;font-size: 12px;line-height: 1.4;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: block-axis;-webkit-line-clamp: 2;contain: content;font-feature-settings: "palt";letter-spacing: 0;text-align: justify;}
.feature__category-thumbnail {margin-bottom: .25rem;}
.feature__category-thumbnail > img {max-width: 80px;height: 55px;object-fit: contain;}

@container (max-width: 768px) {
    .feature__nav1 {padding: .75rem 0 0 .75rem;margin: 2rem 3%;}
    .feature__nav-list1 {column-gap: .75rem;}
    .feature__nav1-item {flex-basis: calc(50% - .75rem);margin-bottom: .75rem;}
    .feature__nav1-item a {padding: 1rem .5rem 2rem;font-size: 14px;}
}
@container (max-width: 576px) {
    .feature {padding: 0 3%;}
    .feature > h2 {font-size: 17px;margin-bottom: 1rem;}
    .feature__mainvisual img {aspect-ratio: 5 / 2;}

    .feature__title1,.product-list__title1 {font-size: 17px;text-align: left;font-weight: bold;letter-spacing: .075rem;}
    .feature__title1 {padding: 1rem 0;margin: 2rem 0 1rem 0;}
    .product-list__title1 {padding: .75rem;margin: 4rem 0 2rem 0;background: #888;color: #fff;line-height: 1.4;position: relative;}
    .product-list__title1::after {content: '';position: absolute;top: 100%;left: 50%;width: 0;height: 0;border: 11px solid transparent;border-top: 11px solid #888;left: 50%;transform: translate(-50%, 0);-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);}

    .feature__title1 + .feature__text1 {padding: 1rem 3% 0 3%;}
    .feature__text1 {font-size: 15px;line-height: 1.8;padding: 1rem 3% 0 3%;}
    .feature__img1 {max-width: 100%;margin: 2rem 0 0;}
    .feature__btn1 {margin: 1.5rem auto 3rem auto;}
    .feature__btn1 a {font-size: 16px;padding: .75rem 1.5rem;line-height: 1.4;}

    .feature__page-link {padding: 1rem 3% 0 3%;}
    .feature__page-link a { {font-size: 16px;}}

    .feature__accordion1 {padding: 1rem 3% 0 3%;}
    .feature__accordion1 summary {font-size: 16px;}

    .feature__btn1 + .feature__product-list > .product-list__title1:first-child {margin-top: 1rem;}
    .feature__product-list {margin: 0 0 2rem;}
    .feature__category-list {gap: 3vw;}
    a.feature__category-item {width: calc((100% - 3vw) / 2);padding: 1.5%;}
}


/* 商品一覧エリア
========================================================================== */
.product-list {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;}
.product-list a{text-decoration: none;}
@media (any-hover: hover) {
    .product-list a:hover{color: #333;box-shadow: #bdbdbdbd 0 0 10px;transition: .3s;/*border: 1px rgb(216 0 0 / 0.3) solid;}*/}
}
.product-list__card {display: grid;grid-template-rows: subgrid;grid-row: span 6;padding: 10px 10px 0 10px;border: #ededed 1px solid;}
.product-list__card:hover .card__thumbnail img {transform: scale(1.05);transition: transform .2s;}
.card__title {grid-row: 2 / 3;font-size: 14px;line-height: 1.4;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: block-axis;-webkit-line-clamp: 3;contain: content;}
.card__thumbnail {aspect-ratio: 1 / 1;contain: strict;}
.card__thumbnail > img {inline-size: 100%;block-size: 100%;object-fit: cover;opacity: .9 !important;}
.card__thumbnail > img:hover{opacity: 1;}

.card__description1,.card__description2 {line-height: 1.4;font-size: 12px;}
.card__description2 {display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: block-axis;-webkit-line-clamp: 3;contain: content;}
.card__price{font-weight: bold;letter-spacing: 0;}
.card__price1{font-size: 17px; color: #e60000 ; }
.card__price2{font-size: 14px; color: #333;}
.card__price span{font-size: 14px; font-weight: normal;}

.yotpo a:hover {box-shadow: none;border: none;}

@container (max-width: 576px) {
    .product-list {grid-template-columns: repeat(2, 1fr);gap: 3vw;}
    .card__title {font-size: 14px;}
    .card__description1,.card__description2 {font-size: 11px;}
}


/* バナーエリア
========================================================================== */
.area__banner-feature--common {padding: 0;margin: 3rem 0;container-type: inline-size;}
/*オフィスのギモン*/
.banner-gimon__wrapper {border: #dadbe0 1px solid;background: linear-gradient(#FAE4E4 0%, #fff 55%);margin-bottom: 2rem;}
.banner-gimon__wrapper a {text-decoration: none;text-align: center;}
.banner-gimon {display: grid;grid-template-columns: 1fr 220px;grid-template-rows: repeat(2, 1fr);gap: 0px;place-content: center;place-items: center;}
.banner-gimon__title {grid-column: 1 / 2;grid-row: 1 / 2;font-size: 16px; text-shadow: #fff 1px 0 10px;align-self: end;white-space: pre-line;word-break: keep-all;overflow-wrap: break-word;letter-spacing: .1rem;padding: 10px 0 0 0;}
.banner-gimon__logo {grid-column: 1 / 2;grid-row: 2 / 3;align-self: center;align-items: center;display: flex; padding: 5px 0;}
.banner-gimon__logo > img {height: 3rem;width: auto;}
.banner-gimon__btn {display: flex;align-items: center;border: #d80000 1px solid;color: #d80000;padding: .5rem 1.5rem;margin: .75rem 0 .75rem 1.5rem;border-radius: 3px;}
@media (any-hover: hover) {
    a:hover .banner-gimon__btn {opacity: .5;}
    a.banner-gimon:hover {color: #666;}
}
.banner-gimon__thumbnail {grid-column: 2 / 3;grid-row: 1 / 3;text-align: right;align-self: stretch;background: #f9f9f9;}
.banner-gimon__thumbnail img {aspect-ratio: 3 / 2;width: 100%;height: 100%;object-fit: cover;}

@container (max-width: 768px) {
    /*バナーエリア*/
    .area__banner-feature--common { margin-top: 9%;}
    /*オフィスのギモン*/
    .banner-gimon__title {font-size: 14px;letter-spacing: unset;padding: 0;}
    .banner-gimon__logo > img {height: 2.5rem;}
}
@container (max-width: 576px) {
    /*オフィスのギモン*/
    .banner-gimon__wrapper{margin: 0 3% 6% 3%}
    .banner-gimon {grid-template-columns: 1fr;grid-template-rows: 1fr;padding: 10px 3% 5px 3%;gap: 1vw;}
    .banner-gimon__title {grid-column: 1;grid-row: 1;font-size: 12px;font-weight: bold;}
    .banner-gimon__logo {grid-column: 1;grid-row: 2;}
    .banner-gimon__logo > img {height: 3rem;}
    .banner-gimon__btn,.banner-gimon__thumbnail {display: none;}
}


/* 共通
========================================================================== */
.highlight {
    text-decoration: underline;
    text-underline-offset: -0.2em;
    text-decoration-thickness: 0.5em;
    text-decoration-color: rgb(255 235 0 / 0.25);
    text-decoration-skip-ink: none;
    font-weight: bold;
}