/*全体カラー定義*/
:root {
    --color-gg-base: #b8a165;
    --color-primary: #a6a6a6;
    --color-secondary: #2c3e50; /*ディープネイビー*/
    --color-accent1: #3ab6a5; /*ターコイズグリーン*/
    --color-accent2: #e36a5c; /*ディープコーラル*/
    --color-border: #f0f0f0;
    --color-border-light: #ccc;
    --color-light: #ccc;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 14px;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #303030;
}

@media (min-width: 601px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;
    min-height: calc(100vh - 80px);
}

input[type=text], input[type=tel], input[type=password], textarea {
    padding: 8px 12px;
    border: 1px solid var(--color-light);
    border-radius: 4px;
    width: 100%;
}

    input[type="text"]:focus, input[type=tel]:focus, input[type=password]:focus, input[type=checkbox]:focus,
    textarea:focus,
    button[type=submit]:active, button[type=submit]:focus, a.btn:active, a.btn:focus {
        outline: none !important;
        box-shadow: 0px 0px 3px 0px var(--color-secondary) !important;
    }

button {
    padding: 8px 12px;
    border: 1px solid var(--color-light);
    border-radius: 4px;
    cursor: pointer;
}

a {
    color: currentColor;
    /*text-decoration: none;*/
}

    a.btn {
        padding: 12px 24px;
        text-decoration: none;
        border-radius: 4px;
        font-weight: 500;
        transition: background-color 0.3s;
    }

.btn-dark {
    background-color: #6c757d;
    color: white;
}

    .btn-dark:hover {
        background-color: #545b62;
    }

::placeholder {
    color: #ccc;
}

/*backgroundに画像を設定するスタイル*/
.bg_img {
    display: inline-block; /* 背景を表示するには必要 */
    /*background-size: cover;*/ /* 背景画像を要素にフィット */
    background-size: contain; /* 幅か高さのどちらかを要素にフィット */
    background-position: center; /* 画像の位置を中央に */
    background-repeat: no-repeat; /* 繰り返さない */
    color: white; /* テキスト色 */
    text-decoration: none;
    text-align: center; /* 横中央にしたい場合 */
}

/*ヘッダー*/
header {
    border-bottom: 1px solid var(--color-light);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    transition: transform 0.3s ease;
    z-index: 999;
}

.header--hidden {
    transform: translateY(-100%);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin: 10px 40px;
}

.header-container > div {
    display: flex;
    justify-content: space-between;
    align-content: center;
}

    .header-container > div:first-child {
        flex-grow: 1;
        margin-right: 20px;
    }

.header-left-items, .header-right-items {
    display: flex;
    align-items: center;
}

.header-links {
    display: flex;
    justify-content: end;
    align-content: center;
    gap: 20px;
}

.header-menu-button,
#sideMenu,
#overlay {
    display: none;
}

.header-logo {
    width: 80px;
    height: 30px;
    background-image: url(../image/hd_logo.png);
}

.header-link.text-link {
    font-size: 13px;
}

.header-link:not(.text-link) {
    width: 18px;
    height: 18px;
}

.header-link.favorite {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='currentColor'%3E%3Cpath d='M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z'%3E%3C/path%3E%3C/svg%3E");
}

.header-link.cart {
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='currentColor'%3E%3Cpath d='M4.00488 16V4H2.00488V2H5.00488C5.55717 2 6.00488 2.44772 6.00488 3V15H18.4433L20.4433 7H8.00488V5H21.7241C22.2764 5 22.7241 5.44772 22.7241 6C22.7241 6.08176 22.7141 6.16322 22.6942 6.24254L20.1942 16.2425C20.083 16.6877 19.683 17 19.2241 17H5.00488C4.4526 17 4.00488 16.5523 4.00488 16ZM6.00488 23C4.90031 23 4.00488 22.1046 4.00488 21C4.00488 19.8954 4.90031 19 6.00488 19C7.10945 19 8.00488 19.8954 8.00488 21C8.00488 22.1046 7.10945 23 6.00488 23ZM18.0049 23C16.9003 23 16.0049 22.1046 16.0049 21C16.0049 19.8954 16.9003 19 18.0049 19C19.1095 19 20.0049 19.8954 20.0049 21C20.0049 22.1046 19.1095 23 18.0049 23Z'%3E%3C/path%3E%3C/svg%3E");
}

.header-link.user {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='currentColor'%3E%3Cpath d='M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z'%3E%3C/path%3E%3C/svg%3E");
}

.header-link.logout {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='currentColor'%3E%3Cpath d='M5 22C4.44772 22 4 21.5523 4 21V3C4 2.44772 4.44772 2 5 2H19C19.5523 2 20 2.44772 20 3V6H18V4H6V20H18V18H20V21C20 21.5523 19.5523 22 19 22H5ZM18 16V13H11V11H18V8L23 12L18 16Z'%3E%3C/path%3E%3C/svg%3E");
}

.cart-badge {
    position: absolute;
    top: -6px;
    right: -7px;
    font-size: 9px;
    border-radius: 50%;
    background-color: var(--color-gg-base);
    color: #fff;
    width: 15px;
    height: 15px;
    padding: 1px;
    line-height: 14px;
}

.header-search-wrap {
    display: flex;
    flex-wrap: nowrap;
    flex-grow: 1;
}

.header-search {
    border-radius: 4px 0 0 4px !important;
}

.header-search-btn {
    width: 44px;
    border-radius: 0 4px 4px 0;
}

    .header-search-btn > div {
        width: 18px;
        height: 18px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='gray'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z'%3E%3C/path%3E%3C/svg%3E");
    }

.header--hidden .go-top {
    opacity: 0;
}

.go-top {
    display: none;
}

@media (max-width: 600px) {
    body {
        min-height: calc(100vh - 116px);
    }

    .header-container {
        margin: 10px 10px;
        flex-direction: column;
    }

        .header-container > div:first-child {
            margin-right: 0px;
        }

        .header-container > div:last-child {
            width: 100%;
        }

    .header-search-wrap {
        margin-top: 8px;
    }

    /*(スマホのみ)左メニュー*/
    .header-menu-button {
        display: inline-block;
        width: 22px;
        height: 22px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='currentColor'%3E%3Cpath d='M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z'%3E%3C/path%3E%3C/svg%3E");
        margin-right: 10px;
        cursor: pointer;
    }

    #sideMenu {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 80%;
        height: 100%;
        background-color: #f3f3f3;
        color: currentColor;
        padding: 0;
        z-index: 1010;
        transform: translateX(-100%);
        transition: transform 0.3s ease 0s;
        overflow-y: auto;
    }

        #sideMenu.open {
            transform: translateX(0);
            box-shadow: 2px 0 5px rgba(0,0,0,0.3);
        }

    #closeButton {
        position: fixed;
        top: 5px;
        right: 5px;
        background: none;
        border: none;
        color: #fff;
        font-size: 1.5rem;
        cursor: pointer;
    }

    #overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1000;
    }

        #overlay.show {
            opacity: 1;
            pointer-events: auto;
        }

    #sideMenu .login-name {
        font-size: 18px;
        padding-left: 35px;
        margin-bottom: 8px;
        display: block;
        background-size: contain;
        background-position: left;
        background-repeat: no-repeat;
        text-decoration: none;
        line-height: 28px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23ccc'%3E%3Cpath d='M12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM6.02332 15.4163C7.49083 17.6069 9.69511 19 12.1597 19C14.6243 19 16.8286 17.6069 18.2961 15.4163C16.6885 13.9172 14.5312 13 12.1597 13C9.78821 13 7.63095 13.9172 6.02332 15.4163ZM12 11C13.6569 11 15 9.65685 15 8C15 6.34315 13.6569 5 12 5C10.3431 5 9 6.34315 9 8C9 9.65685 10.3431 11 12 11Z'%3E%3C/path%3E%3C/svg%3E");
    }

    #sideMenu .menu-category {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .menu-card {
        background-color: #fff;
        margin-top: 12px;
        padding: 1rem 0 0 1rem;
    }

    .menu-card.bg-gray {
        background-color: #f3f3f3;
    }

    #sideMenu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #sideMenu li {
        border-bottom: 1px solid var(--color-border);
        display: block; /* 背景を表示するには必要 */
        background-size: 20px;
        background-position: right 10px center;
        background-repeat: no-repeat; /* 繰り返さない */
        text-decoration: none;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23aaa'%3E%3Cpath d='M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z'%3E%3C/path%3E%3C/svg%3E");
    }

    #sideMenu a {
        display: inline-block;
        padding: 20px 16px 20px 20px;
        width: 100%;
        text-decoration: none;
    }

    .go-top {
        position: fixed;
        top: calc(100vh - 120px);
        right: 16px;
        border: 1px solid var(--color-border-light);
        border-radius: 50%;
        background-color: #fff;
        transition: transform 0.3s ease;
        opacity: 1;
        width: 56px;
        height: 56px;
        box-shadow: 0px 1px 3px rgba(90,90,90,0.3);
    }

        .go-top::after {
            content: "\2191top";
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            height: 100%;
        }
}


/*バナー*/
.banner-container {
    margin-top: 59px;
    height: auto;
    text-align: center;
    vertical-align: middle;
    background: #ccc;
}

.carousel img {
    width: 100%;
    /*height: 580px;*/
    /*aspect-ratio: 7 / 5;*/
    object-fit: cover;
    object-position: top;
}


/*お知らせ*/
.info-container {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-light);
}

    .info-container a {
        font-size: 13px;
    }

    .info-container .info-item {
        padding: 4px 0;
    }

    .info-container .info-item.new a::before {
        content: "NEW";
        background-color: red;
        color: #fff;
        font-size: 9px;
        min-width: 10px;
        padding: 3px 8px;
        margin: 0 5px;
        line-height: 1;
        vertical-align: middle;
        white-space: nowrap;
        text-align: center;
        display: inline-block;
    }


/*メインコンテンツ*/
.main-container {

}

.content-card {
    padding: 50px 40px 60px 40px;
}

.content-card.bg-gray {
    background-color: #f3f3f3;
}

.content-main-title {
    margin: 0 0 40px 0;
}

.content-title h2 {
    margin-top: 0;
}

.content-scroll-area {
    overflow-x: visible;
    font-size: 13px;
    line-height: 20px;
    color: #404040;
}

.content-list-area {
    font-size: 13px;
    line-height: 20px;
    color: #404040;
}

.content-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
}

.content-scroll-area .content-list {
    flex-wrap: nowrap;
}

.content-list-area .content-list {
    flex-wrap: wrap;
}

    .content-list > div {
        width: calc(15.9% - 10px);
        flex-shrink: 0;
    }

.content-item {
    position: relative;
    padding-bottom: 8px;
}

    .content-item img {
        width: 100%;
        /*height: 200px;*/
        aspect-ratio: 1 / 1;
        object-fit: cover;
        transition: filter 0.2s ease;
    }

    .content-item a {
        text-decoration: none;
        transition: filter 0.2s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

        .content-item:hover {
            color: #202020;
        }

            .content-item:hover img {
                filter: brightness(90%) opacity(85%);
            }

    .content-item .brand-name {
        margin-top: 4px;
    }

    .content-item .brand-name,
    .content-item .model-name,
    .content-item .model-number {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .content-item .model-number {
        margin-bottom: 12px;
    }

    .content-item .fob-jpy,
    .content-item .approx {
        font-size: 12px;
        /*color: #999;*/
    }

        .content-item .approx > span {
            color: #404040;
            font-weight: 600;
        }

    .content-item .soldout-tag {
        align-self: center;
        width: 96%;
    }

        .content-item .soldout-tag::before {
            content: "sold out";
            border: 1px solid var(--color-secondary);
            background-color: #fff;
            color: var(--color-secondary);
            font-size: 11px;
            padding: 3px 8px;
            margin-top: 4px;
            width: -webkit-fill-available;
            line-height: 1;
            vertical-align: middle;
            white-space: nowrap;
            text-align: center;
            display: inline-block;
        }

    .content-item .product-tag::before {
        position: absolute;
        top: 0;
        left: 4px;
        font-size: 12px;
        padding: 3px 8px;
        margin: 4px 0;
        line-height: 1;
        vertical-align: middle;
        white-space: nowrap;
        text-align: center;
        display: inline-block;
    }

    .content-item .piano-condition {
        margin-top: 12px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        font-size: 11px;
        line-height: 4px;
    }

.piano-placeholder {
    position: relative;
    border-radius: 40% 0;
    overflow: hidden;
    display: inline-block;
}

    .piano-placeholder::after {
        content: "No Image";
        position: absolute;
        inset: 0;
        background-color: #d0d0d0;
        color: white;
        font-size: 14px;
        align-items: center;
        justify-content: center;
        border-radius: 40% 0;
        display: flex;
    }

.sale-price,
.sale-price * {
    color: orangered !important;
}

    .sale-price:has(.down-price) {
        line-height: 20px;
    }

.down-price-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.down-price {
    border: 1px solid orangered;
    color: orangered;
    font-size: 10px;
    line-height: 18px;
    padding: 0px 4px;
    display: inline-flex;
    justify-content: end;
    align-items: center;
}

    .down-price > span {
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='orangered'%3E%3Cpath d='M12 19.1642L18.2071 12.9571L16.7929 11.5429L12 16.3358L7.20712 11.5429L5.79291 12.9571L12 19.1642ZM12 13.5143L18.2071 7.30722L16.7929 5.89301L12 10.6859L7.20712 5.89301L5.79291 7.30722L12 13.5143Z'%3E%3C/path%3E%3C/svg%3E");
    }

.sale-base-price {
    color: #999 !important;
    font-size: 11px;
    text-decoration: line-through;
}

/*カートに追加しているタグ*/
.incart-tag {
    display: block;
    text-align: center;
    font-size: 11px;
    margin-top: 8px;
    background-color: var(--color-accent1);
    color: #fff;
    width: 96%;
}

/*saleタグ*/
.sale-tag::before {
    content: "sale";
    background-color: var(--color-accent2);
    color: #fff;
}

/*newタグ*/
.new-tag::before {
    content: "new";
    background-color: var(--color-accent1);
    color: #fff;
}


/*お気に入りボタン*/
.favorite-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border-light);
    border-radius: 50%;
    background-origin: content-box; /* ← パディング領域から画像表示 */
    padding: 6px;
    cursor: pointer;
}

    .favorite-btn:not(.favorite-on) {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23ccc'%3E%3Cpath d='M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z'%3E%3C/path%3E%3C/svg%3E");
    }

    .favorite-btn.favorite-on {
        background-color: #fff1cc;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23ffb700'%3E%3Cpath d='M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26Z'%3E%3C/path%3E%3C/svg%3E");
    }


/*新着、履歴（横にスクロールするコンテンツ）*/
.slide-content-card {
    padding: 50px 30px 60px 40px;
}

    .slide-content-card .slick-track {
        margin-left: unset;
    }

    .slide-content-card .slick-slide {
        margin: 0 20px;
        margin-left: auto;
    }

.slick-slider .custom-prev,
.slick-slider .custom-next {
    position: absolute;
    top: 35%;
    width: 28px;
    height: 28px;
    border: none;
    background-color: transparent;
    padding: 0;
    cursor: pointer;
    z-index: 10;
}

.slick-slider .custom-prev {
    left: -28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='28' height='28' fill='%23999'%3E%3Cpath d='M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z'%3E%3C/path%3E%3C/svg%3E");
}

.slick-slider .custom-next {
    right: -16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='28' height='28' fill='%23999'%3E%3Cpath d='M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z'%3E%3C/path%3E%3C/svg%3E");
}

.slider-wrapper {
    position: relative;
    overflow: visible;
}

.custom-prev::before,
.custom-next::before {
    content: none;
}


/*検索用ボタン系*/
.brand-select-btns,
.type-select-btns,
.color-select-btns {
    flex-wrap: wrap;
}

    .brand-select-btns > div,
    .type-select-btns > div,
    .color-select-btns > div {
        width: calc(25% - 16px) !important;
        /*width: calc(15.9% - 10px);*/
    }

    .brand-select-btns img {
        height: auto;
        aspect-ratio: unset;
    }
    
    .color-select-btns img {
        height: auto;
        aspect-ratio: 3 / 1;
    }

    .type-select-btns img {
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }

    .brand-select-btns a {
        display: inline-block;
        width: 100%;
        background-color: #fff;
        padding: 8px;
    }

    .type-select-btns a,
    .color-select-btns a {
        display: inline-block;
        width: 100%;
        /*border: 1px solid var(--color-light);*/
        text-align: center;
        padding: 0 0 8px;
        font-size: 12px;
        background-color: #fff;
    }

    .type-select-btns a > div:last-child,
    .color-select-btns a > div:last-child {
        padding: 16px 0 8px;
    }

    .brand-select-btns:hover img,
    .type-select-btns:hover img,
    .color-select-btns:hover img {
        filter: none;
    }


/*Topics*/
.topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

    .topics-list .topics-item {
        width: calc(25% - 16px);
    }

        .topics-list .topics-item a {
            text-decoration: none;
        }

        .topics-list .topics-item img {
            width: 100%;
            height: auto;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            object-position: left top;
        }

        .topics-list .topics-item div:last-child {
            padding: 4px;
        }

    .topics-list .topics-name {
        font-size: 14px;
        line-height: 18px;
    }


@media (max-width: 1100px) {
    .content-list > div {
        width: calc(20% - 16px);
    }
}


@media (max-width: 900px) {
    .content-list > div {
        width: calc(25% - 15px);
    }
}

@media (max-width: 600px) {
    .main-container {

    }

    .banner-container {
        margin-top: 97px;
    }

    /*.carousel img {
        height: 184px;
    }*/

    .content-scroll-area {
        font-size: 12px;
        line-height: 18px;
    }

    .content-card {
        padding: 30px 10px 40px 10px;
    }

    .content-list {
        gap: 10px;
    }

        .content-list > div {
            width: calc(33.34% - 7px) !important;
        }

    .content-item .product-tag::before {
        left: 2px;
        font-size: 11px;
        /*padding: 2px 6px;*/
        margin: 2px 0;
    }

    .content-item .fob-jpy,
    .content-item .approx {
        font-size: 12px;
    }


    /*新着、履歴（横にスクロールするコンテンツ）*/
    .slide-content-card .slick-slide {
        margin: 0 10px;
        margin-left: auto;
    }


    .favorite-btn {
        width: 28px;
        height: 28px;
        padding: 4px;
    }

    .type-select-btns a,
    .color-select-btns a {
        font-size: 9px;
        padding: 0 0 4px;
    }

        .type-select-btns a > div:last-child,
        .color-select-btns a > div:last-child {
            padding: 4px 0;
        }

    .topics-list {
        gap: 10px;
    }

        .topics-list .topics-item {
            width: calc(50% - 5px);
        }

        .topics-list .topics-name {
            font-size: 12px;
            line-height: 16px;
        }
}


/*フッター*/
footer {
    background-color: var(--color-border);
    font-size: 12px;
    line-height: 18px;
}

footer > div:last-child {
    border-top: 1px solid var(--color-primary);
    padding: 6px 0;
    text-align: center;
}

.footer-container {
    display: flex;
    flex-grow: 2;
    padding: 80px 120px 40px;
}

    .footer-container > div:last-child {
        flex: 1;
    }

footer a {
    text-decoration: none;
}

.footer-links {
    display: flex;
    width: 100%;
}

    .footer-links > div {
        width: 25%;
    }

    .footer-links > div > div {
        text-align: end;
    }

.sns-icons {
    margin-top: 12px;
    display: flex;
    gap: 4px;
}

.sns-icons a {
    width: 24px;
    height: 24px;
}

.sns-icons a.sns-icon-youtube {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='currentColor'%3E%3Cpath d='M19.6069 6.99482C19.5307 6.69695 19.3152 6.47221 19.0684 6.40288C18.6299 6.28062 16.501 6 12.001 6C7.50098 6 5.37252 6.28073 4.93225 6.40323C4.68776 6.47123 4.4723 6.69593 4.3951 6.99482C4.2863 7.41923 4.00098 9.19595 4.00098 12C4.00098 14.804 4.2863 16.5808 4.3954 17.0064C4.47126 17.3031 4.68676 17.5278 4.93251 17.5968C5.37252 17.7193 7.50098 18 12.001 18C16.501 18 18.6299 17.7194 19.0697 17.5968C19.3142 17.5288 19.5297 17.3041 19.6069 17.0052C19.7157 16.5808 20.001 14.8 20.001 12C20.001 9.2 19.7157 7.41923 19.6069 6.99482ZM21.5442 6.49818C22.001 8.28 22.001 12 22.001 12C22.001 12 22.001 15.72 21.5442 17.5018C21.2897 18.4873 20.547 19.2618 19.6056 19.5236C17.8971 20 12.001 20 12.001 20C12.001 20 6.10837 20 4.39637 19.5236C3.45146 19.2582 2.70879 18.4836 2.45774 17.5018C2.00098 15.72 2.00098 12 2.00098 12C2.00098 12 2.00098 8.28 2.45774 6.49818C2.71227 5.51273 3.45495 4.73818 4.39637 4.47636C6.10837 4 12.001 4 12.001 4C12.001 4 17.8971 4 19.6056 4.47636C20.5505 4.74182 21.2932 5.51636 21.5442 6.49818ZM10.001 15.5V8.5L16.001 12L10.001 15.5Z'%3E%3C/path%3E%3C/svg%3E");
}

.sns-icons a.sns-icon-facebook {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='currentColor'%3E%3Cpath d='M13.001 19.9381C16.9473 19.446 20.001 16.0796 20.001 12C20.001 7.58172 16.4193 4 12.001 4C7.5827 4 4.00098 7.58172 4.00098 12C4.00098 16.0796 7.05467 19.446 11.001 19.9381V14H9.00098V12H11.001V10.3458C11.001 9.00855 11.1402 8.52362 11.4017 8.03473C11.6631 7.54584 12.0468 7.16216 12.5357 6.9007C12.9184 6.69604 13.3931 6.57252 14.2227 6.51954C14.5519 6.49851 14.9781 6.52533 15.501 6.6V8.5H15.001C14.0837 8.5 13.7052 8.54332 13.4789 8.66433C13.3386 8.73939 13.2404 8.83758 13.1653 8.97793C13.0443 9.20418 13.001 9.42853 13.001 10.3458V12H15.501L15.001 14H13.001V19.9381ZM12.001 22C6.47813 22 2.00098 17.5228 2.00098 12C2.00098 6.47715 6.47813 2 12.001 2C17.5238 2 22.001 6.47715 22.001 12C22.001 17.5228 17.5238 22 12.001 22Z'%3E%3C/path%3E%3C/svg%3E");
}

.sns-icons a.sns-icon-instagram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='currentColor'%3E%3Cpath d='M12.001 9C10.3436 9 9.00098 10.3431 9.00098 12C9.00098 13.6573 10.3441 15 12.001 15C13.6583 15 15.001 13.6569 15.001 12C15.001 10.3427 13.6579 9 12.001 9ZM12.001 7C14.7614 7 17.001 9.2371 17.001 12C17.001 14.7605 14.7639 17 12.001 17C9.24051 17 7.00098 14.7629 7.00098 12C7.00098 9.23953 9.23808 7 12.001 7ZM18.501 6.74915C18.501 7.43926 17.9402 7.99917 17.251 7.99917C16.5609 7.99917 16.001 7.4384 16.001 6.74915C16.001 6.0599 16.5617 5.5 17.251 5.5C17.9393 5.49913 18.501 6.0599 18.501 6.74915ZM12.001 4C9.5265 4 9.12318 4.00655 7.97227 4.0578C7.18815 4.09461 6.66253 4.20007 6.17416 4.38967C5.74016 4.55799 5.42709 4.75898 5.09352 5.09255C4.75867 5.4274 4.55804 5.73963 4.3904 6.17383C4.20036 6.66332 4.09493 7.18811 4.05878 7.97115C4.00703 9.0752 4.00098 9.46105 4.00098 12C4.00098 14.4745 4.00753 14.8778 4.05877 16.0286C4.0956 16.8124 4.2012 17.3388 4.39034 17.826C4.5591 18.2606 4.7605 18.5744 5.09246 18.9064C5.42863 19.2421 5.74179 19.4434 6.17187 19.6094C6.66619 19.8005 7.19148 19.9061 7.97212 19.9422C9.07618 19.9939 9.46203 20 12.001 20C14.4755 20 14.8788 19.9934 16.0296 19.9422C16.8117 19.9055 17.3385 19.7996 17.827 19.6106C18.2604 19.4423 18.5752 19.2402 18.9074 18.9085C19.2436 18.5718 19.4445 18.2594 19.6107 17.8283C19.8013 17.3358 19.9071 16.8098 19.9432 16.0289C19.9949 14.9248 20.001 14.5389 20.001 12C20.001 9.52552 19.9944 9.12221 19.9432 7.97137C19.9064 7.18906 19.8005 6.66149 19.6113 6.17318C19.4434 5.74038 19.2417 5.42635 18.9084 5.09255C18.573 4.75715 18.2616 4.55693 17.8271 4.38942C17.338 4.19954 16.8124 4.09396 16.0298 4.05781C14.9258 4.00605 14.5399 4 12.001 4ZM12.001 2C14.7176 2 15.0568 2.01 16.1235 2.06C17.1876 2.10917 17.9135 2.2775 18.551 2.525C19.2101 2.77917 19.7668 3.1225 20.3226 3.67833C20.8776 4.23417 21.221 4.7925 21.476 5.45C21.7226 6.08667 21.891 6.81333 21.941 7.8775C21.9885 8.94417 22.001 9.28333 22.001 12C22.001 14.7167 21.991 15.0558 21.941 16.1225C21.8918 17.1867 21.7226 17.9125 21.476 18.55C21.2218 19.2092 20.8776 19.7658 20.3226 20.3217C19.7668 20.8767 19.2076 21.22 18.551 21.475C17.9135 21.7217 17.1876 21.89 16.1235 21.94C15.0568 21.9875 14.7176 22 12.001 22C9.28431 22 8.94514 21.99 7.87848 21.94C6.81431 21.8908 6.08931 21.7217 5.45098 21.475C4.79264 21.2208 4.23514 20.8767 3.67931 20.3217C3.12348 19.7658 2.78098 19.2067 2.52598 18.55C2.27848 17.9125 2.11098 17.1867 2.06098 16.1225C2.01348 15.0558 2.00098 14.7167 2.00098 12C2.00098 9.28333 2.01098 8.94417 2.06098 7.8775C2.11014 6.8125 2.27848 6.0875 2.52598 5.45C2.78014 4.79167 3.12348 4.23417 3.67931 3.67833C4.23514 3.1225 4.79348 2.78 5.45098 2.525C6.08848 2.2775 6.81348 2.11 7.87848 2.06C8.94514 2.0125 9.28431 2 12.001 2Z'%3E%3C/path%3E%3C/svg%3E");
}

.sns-icons a.sns-icon-x {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='currentColor'%3E%3Cpath d='M10.4883 14.651L15.25 21H22.25L14.3917 10.5223L20.9308 3H18.2808L13.1643 8.88578L8.75 3H1.75L9.26086 13.0145L2.31915 21H4.96917L10.4883 14.651ZM16.25 19L5.75 5H7.75L18.25 19H16.25Z'%3E%3C/path%3E%3C/svg%3E");
}

.language-select-wrap {
    position: relative;
    display: flex;
    justify-content: end;
    cursor: pointer;
}

    .language-select-wrap > div {
        display: flex;
        gap: 4px;
        border: 1px solid var(--color-light);
        border-radius: 4px;
        padding: 8px 4px 8px 12px;
    }

    .language-select-wrap .bg_img {
        width: 18px;
        height: 18px;
    }

    .language-select-wrap div.language {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='currentColor'%3E%3Cpath d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM9.71002 19.6674C8.74743 17.6259 8.15732 15.3742 8.02731 13H4.06189C4.458 16.1765 6.71639 18.7747 9.71002 19.6674ZM10.0307 13C10.1811 15.4388 10.8778 17.7297 12 19.752C13.1222 17.7297 13.8189 15.4388 13.9693 13H10.0307ZM19.9381 13H15.9727C15.8427 15.3742 15.2526 17.6259 14.29 19.6674C17.2836 18.7747 19.542 16.1765 19.9381 13ZM4.06189 11H8.02731C8.15732 8.62577 8.74743 6.37407 9.71002 4.33256C6.71639 5.22533 4.458 7.8235 4.06189 11ZM10.0307 11H13.9693C13.8189 8.56122 13.1222 6.27025 12 4.24799C10.8778 6.27025 10.1811 8.56122 10.0307 11ZM14.29 4.33256C15.2526 6.37407 15.8427 8.62577 15.9727 11H19.9381C19.542 7.8235 17.2836 5.22533 14.29 4.33256Z'%3E%3C/path%3E%3C/svg%3E");
    }

    .language-select-wrap div.up-down {
        margin-left: 8px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='currentColor'%3E%3Cpath d='M18.2072 9.0428 12.0001 2.83569 5.793 9.0428 7.20721 10.457 12.0001 5.66412 16.793 10.457 18.2072 9.0428ZM5.79285 14.9572 12 21.1643 18.2071 14.9572 16.7928 13.543 12 18.3359 7.20706 13.543 5.79285 14.9572Z'%3E%3C/path%3E%3C/svg%3E");
    }

.language-select-list {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    padding: 4px 0 !important;
    text-align: start;
    flex-direction: column;
}

    .language-select-list a {
        display: block;
        padding: 4px 16px;
    }

        .language-select-list a.select-lang {
            background-color: var(--color-gg-base);
            color: #fff;
        }

#languageSelect > div:nth-child(2) {
    white-space: nowrap;
}

@media (max-width: 1000px) {
    .footer-links > div {
        width: 33%;
    }
}

@media (max-width: 870px) {
    footer {
        font-size: 12px;
        line-height: 16px;
    }

    .footer-container {
        padding: 40px 60px 20px;
    }
}

@media (max-width: 750px) {
    footer {
        font-size: 10px;
    }

    .footer-container {
        padding: 40px 40px 20px;
    }
}

@media (max-width: 670px) {
    footer {
        font-size: 10px;
        line-height: 16px;
    }

    .footer-container {
        padding: 40px 40px 20px;
        flex-grow: unset;
        flex-direction: column;
    }

    .footer-links {
        margin-top: 16px;
    }

    .language-select-wrap .bg_img {
        width: 16px;
        height: 16px;
    }

    .language-select-list {
        flex-direction: row;
        flex-wrap: wrap;
        width: 180px;
    }

        .language-select-list a {
            width: calc(50% - 2px);
            white-space: nowrap;
        }
}

@media (max-width: 430px) {
    .footer-container {
        padding: 40px 20px 20px;
    }

    #languageSelect {
        padding: 8px 2px 8px 8px;
    }
}

@media (max-width: 380px) {
    .footer-links {
        flex-direction: column;
        align-items: end;
    }
}



/*モーダル*/
body:has(#modalWrap.show) {
    overflow: hidden;
}

.modal-bg {
    z-index: 10000;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(149deg, rgba(50, 50, 50, 0.46), rgba(0, 0, 0, 0.46));
}

#modalWrap {
    z-index: 10001;
    position: absolute;
    padding: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}

    #modalWrap:not(.show) {
        display: none;
    }

    #modalWrap.show {
        animation: modalShow .5s ease normal forwards;
    }

        #modalWrap.show.closing {
            animation: modalClose .5s ease normal forwards;
        }

    #modalWrap > div {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin: 0;
        height: 100%;
    }

#modal {
    position: relative;
    background-color: #fff;
    box-shadow: 0 7px 7px rgba(0, 0, 0, 0.3);
    width: auto;
    height: auto;
    max-height: 80vh;
}

.modal-title {
    padding: 16px 0 16px 12px;
    font-size: 16px;
    height: 50px;
}

.modal-content-wrap {
    padding: 0 20px 24px;
    max-height: calc(80vh - 50px);
    overflow-y: auto;
}

#modalContent {
    height: 100%;
}

#modalCloseIcon {
    position: absolute;
    padding: 1px 0 0 1px;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    cursor: pointer;
    transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='currentColor'%3E%3Cpath d='M10.5859 12L2.79297 4.20706L4.20718 2.79285L12.0001 10.5857L19.793 2.79285L21.2072 4.20706L13.4143 12L21.2072 19.7928L19.793 21.2071L12.0001 13.4142L4.20718 21.2071L2.79297 19.7928L10.5859 12Z'%3E%3C/path%3E%3C/svg%3E");
}

    #modalCloseIcon:hover {
        transform: scale(1.2);
    }

.modal-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 600px) {
    #modalWrap > div {
        align-items: end;
    }

    #modal {
        width: 100%;
    }
}

@keyframes modalShow {
    0% {
        opacity: 0;
        transform: translateY(calc(100vh / 2));
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalClose {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(calc(100vh / 2));
    }
}



/*フォームグループ*/
.form-group  {
    line-height: 28px;
}


/*ラジオ、チェック*/
label.btn {
    padding: 12px 12px;
    border: 1px solid var(--color-light);
    border-radius: 4px;
    width: 100%;
    font-size: 12px;
    cursor: pointer;
}

.btn-group {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.btn-group input {
    display: none;
}

.btn:has(.radio-mark),
.btn:has(.checkbox-mark) {
    display: flex;
    align-items: center;
    justify-content: center; /* 中央に配置（テキスト） */
    position: relative; /* radio-markの絶対位置基準 */
    padding-left: 16px; /* 左に余白確保（丸のスペース） */
    cursor: pointer;
    user-select: none;
}

/* ラジオマーク、チェックマーク */
.radio-mark,
.checkbox-mark {
    position: absolute;
    left: 12px; /* ラベル左端からの距離 */
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    display: inline-block;
}

.radio-mark {
    border: 1px solid currentColor;
    border-radius: 50%;
}

/* 選択時のマーク */
input[type="radio"]:checked + label {
    background-color: var(--color-secondary);
    color: #fff;
}
input[type="radio"]:checked + label .radio-mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background-color: currentColor;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* ▼ チェックマーク（外四角） */
.checkbox-mark {
    border: 1px solid currentColor;
    border-radius: 3px;
}

/* チェック時の✔描画 */
input[type="checkbox"]:checked + label {
    background-color: var(--color-secondary);
    color: #fff;
}
input[type="checkbox"]:checked + label .checkbox-mark::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 4px;
    width: 5px;
    height: 9px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}





/*アコーディオン*/
.accordion-item {
    border-top: 1px solid #ddd;
    width: 100%;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    font-size: 14px;
}

.accordion-icon::before {
    content: '＋';
    font-size: 18px;
    transition: transform 0.2s;
}

.accordion-item.open .accordion-icon::before {
    content: '－';
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 12px;
    background-color: #fff;
    font-size: 13px;
}

.accordion-item.open .accordion-content {
    max-height: 500px; /* 十分に大きな値を設定 */
    padding: 0 12px 20px;
}




/*ポップアップメッセージ*/
.popup-area {
    display: flex;
    justify-content: center;
}

#popup {
    position: fixed;
    top: 10px;
    opacity: 0;
}

    #popup.show {
        z-index: 2000;
        animation: popUpShow 3.5S ease-in-out;
    }

#popupWrap {
    /*background-image: linear-gradient(334deg, rgba(65, 164, 253, 1), rgba(14, 244, 255, 1));*/
    background-color: var(--color-border);
    opacity: 0.85;
    border-radius: 60px;
    text-align: center;
    padding: 12px 16px;
}

    #popupWrap.error {
        /*background-image: linear-gradient(334deg, rgba(248, 15, 15, 1), rgba(207, 63, 245, 1));*/
        background-color: var(--color-accent2);
    }

    /* ポップアップの影 */
    #popupWrap::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 70px;
        box-shadow: 0 7px 7px rgba(0, 0, 0, 0.3); /* filterが効かない場合黒い影をつける */
        z-index: -1;
    }

#popupMessage {
    font-size: 13px;
    color: #666;
}

#popupWrap.error #popupMessage {
    color: #fff;
}

@keyframes popUpShow {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    22% {
        opacity: 1;
        transform: translateY(0);
    }

    60% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-50px);
    }
}



/*テーブルレイアウト*/
.table {
    display: grid;
    grid-template-columns: auto 1fr; /* 左は自動幅、右は残り */
}

.table-col {
    padding: 16px 60px 16px 20px;
    border-bottom: 1px solid #ddd;
}

@media (max-width: 600px) {
    .table-col {
        padding: 12px;
    }
}


/*左右分割レイアウト*/
.lr-layout {
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

.right-area {
    display: inline-block;
    vertical-align: top;
    z-index: 1;
    position: sticky;
    top: 80px;
    left: 2000px; /*右に貼り付けたいので、とりあえず大きいpx値を指定しておく*/
    right: 0;
    bottom: 0px;
    width: calc(33vw - 80px);
    line-height: 40px;
    margin-bottom: 40px;
}

.left-area {
    display: inline-block;
    vertical-align: top;
    float: left;
    width: calc(62vw - 60px);
}

@media (max-width: 1200px) {
    .right-area {
        width: calc(34vw - 60px);
    }
}

@media (max-width: 800px) {
/*    .right-area {
        width: calc(48vw - 68px);
    }

    .left-area {
        width: calc(48vw - 68px);
    }
}

@media (max-width: 600px) {*/
    .lr-layout {
        display: flex;
        flex-direction: column-reverse
    }

    .right-area {
        position: relative;
        top: unset;
        left: unset;
        right: unset;
        bottom: unset;
        width: 100%;
    }

    .left-area {
        float: none;
        width: 100%;
        position: relative;
    }
}



/*その他*/
.pt-0 {
    padding-top: 0 !important;
}

@media (min-width: 601px) {
    .sp-only {
        display: none;
    }
}

@media (max-width: 600px) {
    .pc-only {
        display: none;
    }
}

.scroll-hidden {
    /*overflow: auto;*/
    -ms-overflow-style: none; /* IE・Edge 対応 */
    scrollbar-width: none; /* Firefox 対応 */
}

    .scroll-hidden::-webkit-scrollbar {
        display: none; /* Chrome, Safari 対応 */
    }