:root {
  color-scheme: light dark;
  --light-bg: #fff;
  --light-bg-sub: #f5f7fa;
  --light-color: rgb(85 75 68);
  --light-color-sub: rgb(115, 103, 95);

  --dark-bg: #2f2924;/*3b3834 202124 */
  --dark-bg-sub: #38322f;/*47443f 292A2D*/
  --dark-color: #efe7e7; 
  --dark-color-sub: #9AA0A6;

  --accent-color: #DDC8B8;
  --common-brown: rgb(115, 103, 95);

    --bgPink: #D5A9A1;
    --bgOrange: #DDC8B8;
    --bgGreen: #C2D7D3;
    --bgBlue: #98c1c7;
    --bgAther: #cfcab4;
}
html {scroll-behavior: smooth;}
body {font-family: "Helvetica Neue","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Arial,sans-serif; margin: 0; padding: 20px; background-color: light-dark(var(--light-bg), var(--dark-bg)); color: light-dark(var(--light-color), var(--dark-color));}
body:has(dialog[open]) {overflow: hidden;}
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 0;
    background: #ccc;
    font-family: inherit;
    font-size: inherit;
}
.eye-catch-wrap{
    width: 100%;
        @media (max-width: 550px) {height: 50vh; overflow: hidden;}
    img{
        width: stretch;
        @media (max-width: 550px) {position: relative; width: unset; height: 100%; left: -27%;}
    }
}
h1 {text-align: center; margin: 0.6rem 0 0.6rem 0; font-size: 1.4rem;}
.go-to-top{position: fixed; bottom: 0; right: 0; margin: 1.5em; z-index: 8; padding: 0.5rem; color: #ffffff; border-radius: 50%; background-color: var(--accent-color); box-shadow: light-dark(#888, #333) 0 2px 3px; width: 2.3em; height: 2.3em; display: flex; align-items: center; justify-content: center; cursor: pointer;}
details.filter-menu{ position: sticky; top: 0; padding: 0 0.5rem; z-index: 10; background-color: var(--bgOrange); margin: 1rem 0; border-radius: 2px; font-weight: bold; color: var(--light-color); summary {cursor:pointer; padding: 0.7rem; outline: none; text-align: center; background-color: transparent;}
    summary::after{content: ' [OPEN]'; font-size: 0.9rem;}
}
details.filter-menu[open] {
    padding: 0 0.5rem 0.5rem;
    summary::after{ content: ' [CLOSE]'; font-size: 0.9rem;}
}
.filter-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 15px 25px; padding: 20px; background-color: light-dark(rgba(255 255 255 /70%), #b9a396); font-size: 0.9rem; border-radius: 8px;}
.filter-group {display: flex; align-items: center; gap: 8px;
    label { font-weight: bold; cursor: pointer;}
    .square{border-radius: 2px;border: 1px solid var(--common-brown);
        @media (any-hover: hover) {
            &:hover {border-color: var(--common-brown);box-shadow: var(--common-brown) inset 0 0 0 3px;}
        }
    }
    input[type="checkbox"]{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
        position: relative;
        width: 1.1rem;
        height: 1.1rem;
        vertical-align: -6px;
        border-radius: 2px;
        border: solid 1px var(--common-brown);
    }
    input[type="checkbox"]:checked {background-color: var(--common-brown);}
    input[type="checkbox"]:checked:before {position: absolute;top: -2px;left: 4px;transform: rotate(40deg);width: 6px;height: 12px;border-right: 2px solid var(--dark-color);border-bottom: 3px solid var(--dark-color);content: '';}
    input[type="search"] {padding: 6px 12px;border: 1px solid #ddd;border-radius: 4px;width: 10rem;background-color: #ddd;outline: none;color: var(--light-color);}
    input.square:checked + label{background-color: var(--common-brown);border-color: var(--common-brown);color: var(--dark-color);}
}
.light-or-dark {display: flex;align-items: center;justify-content: end;font-size: 0.95rem;margin: 8px 0;
    label {border: solid 1px var(--dark-color-sub);
        @media (any-hover: hover) {
            &:hover {background-color: var(--accent-color);border-color: var(--accent-color);color: var(--light-color);}
        }
    }
    .square:checked + label{background-color: var(--accent-color);border-color: var(--accent-color);color: var(--light-color);}
    div {display: flex;overflow: hidden;padding: 2px;gap: 2px;}
}
.square {display: flex;align-items: center;justify-content: center;text-align: center;background-color: transparent;padding: 2px 5px;cursor: pointer;transition: .3s;}
.square:checked + label{cursor: default;}
.radio-visually-hidden {position: absolute; white-space: nowrap; width: 1px; height: 1px; overflow: hidden; border: 0;padding: 0; clip: rect(0 0 0 0); clip-path: inset(50%); margin: -1px;}
.pop-content{max-width: 72%; max-height: 100%; padding: 1rem;  position-area: bottom; border: none; border-radius: 8px; box-shadow: -2px 2px 5px light-dark(var(--light-color-sub), #231f1d); margin: 0.5rem 1rem; background-color: light-dark(canvas, var(--dark-bg-sub)); color: light-dark(var(--light-color), var(--dark-color));}
.pop-btn {border: none; background-color: #c2d7d3; border-radius: 2px; padding: 3px 6px; color: var(--common-brown); cursor: pointer;}
.pop-btn.question {width: 1rem; font-size: 0.8em; position: relative; display: flex; justify-content: center; align-items: center;}
.grid-container {display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));gap: 20px;}
.card {overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.08); display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; container-type: inline-size; background-color: light-dark(var(--light-bg), var(--dark-bg-sub)); color: light-dark(var(--light-color), var(--dark-color));}
@media (any-hover: hover) {
    .card:hover {transform: translateY(-3px);box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
}
.card img {width: 100%;min-height: 150px;max-height: 300px;object-fit: contain;background-color: light-dark(var(--light-bg-sub),var(--dark-bg-sub));}
.card-body {padding: 15px;flex-grow: 1; display: flex; flex-direction: column;}
.top-display{width: 100cqw; position: absolute; bottom: 0;display: grid; grid-auto-flow: column; padding: 5px; box-sizing: border-box; font-size: 0.8em; font-weight: bold; background-color: #47443fc2; color: #ffffff;}
.dkl{display: flex; flex-direction: column; justify-content: center; padding: 0.5vh; text-align: center; border-right: #ffffff solid 1px;}
.main-card .badge-container {display: flex; gap: 5px; flex-wrap: wrap;}
.badge { font-size: 0.8em;padding: 3px 8px; border-radius: 2px; background-color: transparent; color: light-dark(var(--light-color-sub) ,#b3a197);border: 1px solid var(--common-brown);}
.icon-wrap {display: flex;flex-direction: column;justify-content: center;font-weight: bold;}
.badge-icon {padding: 1px 8px;}
.link-bottons {display: flex;flex-wrap: wrap;width: 100%;gap: 4px;margin-top: 0.5rem;justify-content: space-between;}
.product-link {width: 37%;color: #ffffff; padding: 6px 12px; text-align: center; border-radius: 4px; text-decoration: none; cursor: pointer;
    &.rakuten {background-color: var(--bgPink);}
    &.amazon{background-color: var(--bgOrange);}
    &.yahoo{background-color: var(--bgGreen);}
    &.qoo10 {background-color: var(--bgBlue);}
    &.atstyle {background-color: var(--bgAther);}
}
.sub-card .sub-tag {font-size: 11px; color: var(--accent-color); font-weight: bold; text-transform: uppercase; margin-bottom: 5px;}
.product-title,
.furigana {text-align: center; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.product-title {margin: 0 0 5px 0;}
.text-link {color:light-dark(var(--light-color-link),var(--dark-color-link))}
.furigana {font-size: 0.7rem; color: light-dark(var(--light-color),var(--dark-color));}
.dialog__img {
    --duration: 0.3s;
    --scale: 0.6;
    transition:
        display var(--duration) allow-discrete,
        overlay var(--duration) allow-discrete,
        opacity var(--duration),
        scale var(--duration);
    opacity: 0;
    scale: var(--scale);
    &[open] {
        opacity: 1;
        scale: 1;
        @starting-style {opacity: 0;scale: var(--scale);}
    }
    width: 100%;
    max-width: 1200px;
    min-height: 70vh;
    max-height: 90vh;
    padding: 0;
    border: 0;
    align-content: center;
    .dialog__close-button {width: 1em;height: 1em;position: sticky;margin-bottom: -1em; inset: 1rem;display: flex;justify-content: center;align-items: center;background-color: #333333b5;transition: 0.2s;font-size: 2rem;color: #ffffff;z-index: 1;outline: none;
        &:hover {background-color: #888;}
    }
    &::backdrop {background-color: rgb(0 0 0 / 60%);opacity: 0;transition: opacity var(--duration);}
    &[open]::backdrop {opacity: 1;
        @starting-style {opacity: 0;}
    }
    img{min-width: 100%;}
}
.light {color-scheme: light;}
.dark {color-scheme: dark;}