: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;
    --color-danger: #dc3545;
    /*セールタグ用*/
    --color-sale-rank1: #e36a5c; /*#6a5de3;*/
    --color-sale-rank2: #e36a5c; /*#5de36a;*/
    --color-sale-rank3: #e36a5c;
    /*ヘッダーの高さ*/
    --height-header-pc: 142px; /*～801*/
    --height-header-tb: 180px; /*800～601*/
    --height-header-mb: 206px; /*600～*/
    --height-header: var(--height-header-pc);
    --base-height-header: var(--height-header-pc); /*再定義用*/
    /*ヘッダーのアコーディオンの高さ*/
    --height-header-accordion-pc: 38px; /*～801*/
    --height-header-accordion-tb: 80px; /*800～601*/
    --height-header-accordion-mb: 80px; /*600～*/
    --height-header-accordion: var(--height-header-accordion-pc);
}

* {
    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, select:focus, select:active,
    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;
    }

select {
    padding: 8px 12px;
    border: 1px solid var(--color-light);
    border-radius: 4px;
    background-color: inherit;
    color: inherit;
}

.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 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    transition: transform 0.3s ease;
    z-index: 999;
}

    header:not(:has(.category-accordion-container-wrap)) {
        border-bottom: 1px solid var(--color-light);
    }

.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-v-border {
    height: 20px;
    border-left: 1px solid var(--color-border-light);
}

.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 .rate-info {
    font-size: 0.8em !important;
    line-height: 12px;
}

header .category-accordion-container-wrap {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
    /*margin: 8px 12px;*/
    padding: 12px 28px;
    font-size: 12px;
    background-color: var(--color-border);
    background-color: var(--color-secondary);
    color: #fff;
    border-radius: 44px;
}


header .category-accordion-container {
    flex-grow: 1;
    padding: 0 20px;
    max-height: 75vh;
    overflow-y: auto;
}

    header .category-accordion-container .accordion-item {
        border: none;
    }

    header .category-accordion-container .accordion-header {
        padding: 16px 12px;
        position: relative;
    }

    header .category-accordion-container .accordion-content {
        color: var(--color-secondary);
        background-color: var(--color-secondary);
    }

    header .category-accordion-container .accordion-item.open > .accordion-content {
        max-height: none;
    }

    header .category-accordion-container .accordion-item.open > .accordion-content {
        padding-bottom: 0px !important;
    }

    header .category-accordion-container ul {
        list-style: none;
        padding: 0;
        margin: 6px 0 0;
        background-color: var(--color-secondary);
    }

    header .category-accordion-container li {
        margin-bottom: 6px;
        background-color: #fff;
        position: relative;
    }

    header .category-accordion-container .search-btn {
        position: absolute;
        top: calc(50% - 15px);
        right: 20px;
        margin-bottom: 8px;
        background-color: var(--color-secondary);
        background-size: 16px;
        border-radius: 50%;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
        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='%23fff'%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 .category-accordion-container .accordion-header .search-btn {
        right: 50px;
        border: 1px solid #fff;
    }

    header .category-accordion-container a {
        display: inline-block;
        padding: 16px 16px 16px 20px;
        width: 100%;
        text-decoration: none;
    }

header .currency-code-select-container-wrap {
    font-size: 12px;
    position: relative;
    display: flex;
    justify-content: end;
    margin: 0px 40px;
}

header .currency-code-select-container {
    background-color: #fff;
    color: #303030;
    padding: 12px 16px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 18px;
}

header .currency-code-select-container-wrap > .currency-code-select-container {
    padding: 0 0 10px;
}

header .currency-code-select-container > div:last-child {
    font-size: 0.9em;
}

.now-pianos > span {
    font-size: 1.5em;
}

.now-pianos.short {
    display: none;
}


/*メニュー*/
.header-menu-button {
    display: inline-block;
    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='currentColor'%3E%3Cpath d='M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z'%3E%3C/path%3E%3C/svg%3E");
    margin-right: 10px;
    cursor: pointer;
}

    .header-menu-button.position-left {
        display: none;
    }

#sideMenu {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 450px;
    height: 100%;
    background-color: #f3f3f3;
    color: currentColor;
    padding: 0;
    z-index: 1510;
    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: 1500;
}

    #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);
    background-color: #fff;
}

    #sideMenu li:not(.selected-container-label) {
        display: block; /* 背景を表示するには必要 */
        background-size: 20px;
        background-position: right 10px center;
        background-repeat: no-repeat; /* 繰り返さない */
        text-decoration: none;
        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;
}

#sideMenu li.selected-container-label {
    margin-bottom: 2px;
}

    #sideMenu li.selected-container-label > div {
        display: flex;
        gap: 2px;
        background-color: #f3f3f3;
    }

        #sideMenu li.selected-container-label > div > div {
            flex: 1;
            padding: 12px 16px 12px 20px;
            background-color: #fff;
            line-height: 18px;
        }

            #sideMenu li.selected-container-label > div > div > span:first-child {
                display: block;
                font-size: 0.75em;
                font-weight: bold;
            }

.no-order {
    color: orangered;
}

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

.go-top {
    display: none;
}

@media (max-width: 800px) {
    header .category-accordion-container-wrap {
        padding: 12px;
        font-size: 11px;
        margin-top: 52px;
    }

    header .currency-code-select-container-wrap {
        font-size: 11px;
        margin: 0 0 45px 0;
    }

    header .currency-code-select-container {
        position: absolute;
        top: 60px;
        left: 28px;
        padding: 0;
    }

    header .currency-code-select-container-wrap > .currency-code-select-container {
        top: 0;
    }

    header .category-accordion-container .accordion-header {
        padding: 18px 8px;
        font-size: 13px;
    }

        header .category-accordion-container .accordion-header .search-btn {
            right: 40px;
        }

    header .category-accordion-container .accordion-item .accordion-content {
        font-size: 12px;
    }
}

@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 .category-accordion-container-wrap {
        margin-top: 44px;
    }

    header .currency-code-select-container {
        top: 92px;
        left: 10px;
    }

    header .category-accordion-container {
        padding: 0 8px;
        max-height: 70vh;
    }

    .now-pianos:not(short) {
        display: none;
    }

    .now-pianos.short {
        display: block;
    }
    header .category-accordion-container .accordion-header {
        padding: 16px 8px;
    }

    header .category-accordion-container a {
        padding: 16px 16px 16px 20px;
    }


    .header-menu-button.position-left {
        display: inline-block;
    }

    .header-item:has(.header-menu-button.position-right) {
        display: none;
    }

    #sideMenu {
        width: 80%;
    }

    .go-top {
        position: fixed;
        top: calc(100vh - 120px);
        right: 16px;
        border: 1px solid var(--color-border-light);
        border-radius: 50%;
        color: var(--color-border-light);
        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);
        z-index: 1001;
    }

    .go-top-arrow {
        border-radius: 50%;
        width: 56px;
        height: 56px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

        .go-top-arrow::before,
        .go-top-arrow::after {
            content: "";
            position: absolute;
            width: 20px;
            height: 1px;
            background-color: var(--color-border-light);
            top: 18px; /* 高さを調整 */
        }

        .go-top-arrow::before {
            transform: rotate(-32deg);
            left: 9px;
        }

        .go-top-arrow::after {
            transform: rotate(32deg);
            right: 9px;
        }

        .go-top-arrow > span::after {
            content: "TOP";
            font-size: 0.8em;
            margin-top: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            height: 100%;
        }
}


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

.carousel img {
    width: 100%;
    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:not(.home-main-container):not(.product-main-container) {
    --height-header: calc(var(--base-height-header) - var(--height-header-accordion));
}

.main-container:not(.home-main-container):not(.center.no-header) {
    margin-top: var(--height-header);
}

.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%;
        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;
    }

        .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-sale-rank1);
    color: #fff;
}

.sale-tag.sale-rank-1::before {
    background-color: var(--color-sale-rank1);
}

.sale-tag.sale-rank-2::before {
    background-color: var(--color-sale-rank2);
}

.sale-tag.sale-rank-3::before {
    background-color: var(--color-sale-rank3);
}

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


/*お気に入りボタン、カートに追加(一覧用)ボタン*/
.favorite-btn,
.addcart-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");
    }

.addcart-btn {
    background-color: var(--color-secondary);
    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='%23fff'%3E%3Cpath d='M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z'%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: 800px) {
    :root {
        --height-header: var(--height-header-tb);
        --base-height-header: var(--height-header-tb);
        --height-header-accordion: var(--height-header-accordion-tb);
    }
}

@media (max-width: 600px) {
    :root {
        --height-header: var(--height-header-mb);
        --base-height-header: var(--height-header-mb);
        --height-header-accordion: var(--height-header-accordion-mb);
    }

    .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;
        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,
    .addcart-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;
    gap: 56px;
}

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

footer a {
    text-decoration: none;
}

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

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

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

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

    .sns-icons a.sns-icon-whatsapp {
        background-image: url(https://export.grandg.com/en/wp/wp-content/uploads/2022/11/whatsapp.png);
    }

    .sns-icons a.sns-icon-wechat {
        background-image: url(https://export.grandg.com/en/wp/wp-content/uploads/2022/11/wechat.png);
    }

    .sns-icons a.sns-icon-email {
        background-image: url(https://export.grandg.com/en/wp/wp-content/uploads/2022/11/email.png);
    }

    .sns-icons a.sns-icon-zalo {
        background-image: url(https://export.grandg.com/en/wp/wp-content/uploads/2022/11/zalo-1.png);
    }

    .sns-icons a.sns-icon-kakaotalk {
        background-image: url(https://export.grandg.com/en/wp/wp-content/uploads/2022/11/kakao_talk-1.png);
    }

    .sns-icons a.sns-icon-facebook {
        background-image: url(https://export.grandg.com/en/wp/wp-content/uploads/2022/11/facebook.png);
    }

    .sns-icons a.sns-icon-instagram {
        background-image: url(https://export.grandg.com/en/wp/wp-content/uploads/2022/11/instagram.png);
    }

    .sns-icons a.sns-icon-x {
        background-image: url(https://export.grandg.com/en/wp/wp-content/uploads/2022/11/twitter.png);
    }

    .sns-icons a.sns-icon-youtube {
        background-image: url(https://export.grandg.com/en/wp/wp-content/uploads/2022/11/youtube.png);
    }

    .sns-icons a.sns-icon-tiktok {
        background-image: url(https://export.grandg.com/en/wp/wp-content/uploads/2022/11/tiktok.png);
    }

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

    .custom-select-wrap .custom-select {
        display: flex;
        align-items: center;
        gap: 4px;
        border: 1px solid var(--color-light);
        border-radius: 4px;
        padding: 8px 4px 8px 12px;
    }

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

    .custom-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");
    }

    .custom-select-wrap div.currency {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='currentColor'%3E%3Cpath d='M19.3788 15.1057C20.9258 11.4421 19.5373 7.11431 16.0042 5.0745C13.4511 3.60046 10.4232 3.69365 8.03452 5.0556L7.04216 3.31879C10.028 1.61639 13.8128 1.4999 17.0042 3.34245C21.4949 5.93513 23.2139 11.4848 21.1217 16.112L22.4635 16.8867L18.2984 19.1008L18.1334 14.3867L19.3788 15.1057ZM4.62961 8.89968C3.08263 12.5633 4.47116 16.8911 8.00421 18.9309C10.5573 20.4049 13.5851 20.3118 15.9737 18.9499L16.9661 20.6867C13.9803 22.389 10.1956 22.5055 7.00421 20.663C2.51357 18.0703 0.794565 12.5206 2.88672 7.89342L1.54492 7.11873L5.70999 4.90463L5.87505 9.61873L4.62961 8.89968ZM8.50421 14.0027H14.0042C14.2804 14.0027 14.5042 13.7788 14.5042 13.5027C14.5042 13.2266 14.2804 13.0027 14.0042 13.0027H10.0042C8.6235 13.0027 7.50421 11.8834 7.50421 10.5027C7.50421 9.122 8.6235 8.00271 10.0042 8.00271H11.0042V7.00271H13.0042V8.00271H15.5042V10.0027H10.0042C9.72807 10.0027 9.50421 10.2266 9.50421 10.5027C9.50421 10.7788 9.72807 11.0027 10.0042 11.0027H14.0042C15.3849 11.0027 16.5042 12.122 16.5042 13.5027C16.5042 14.8834 15.3849 16.0027 14.0042 16.0027H13.0042V17.0027H11.0042V16.0027H8.50421V14.0027Z'%3E%3C/path%3E%3C/svg%3E");
    }

    .custom-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");
    }

.custom-select-list {
    position: absolute;
    right: 0;
    background-color: #fff;
    padding: 4px 0 !important;
    text-align: start;
    border: 1px solid var(--color-light);
    border-radius: 4px;
    z-index: 1000;
}

header .custom-select-list {
    top: 100%;
}

footer .custom-select-list {
    bottom: 100%;
}

    .custom-select-list a {
        display: block;
        padding: 4px 16px;
        text-wrap: nowrap;
    }

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

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

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

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

@media (max-width: 800px) {
    .custom-select-wrap a {
        padding: 8px 16px !important;
    }
}

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

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

    .custom-select-wrap {
        font-size: 12px;
    }
}

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

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

    .footer-links {
        margin-top: 16px;
        justify-content: end;
        gap: 8px;
    }
}

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

@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-header > .accordion-icon::before {
    content: '－';
}

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

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




/*ポップアップメッセージ*/
.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-color: var(--color-border);
    opacity: 0.85;
    border-radius: 60px;
    text-align: center;
    padding: 12px 16px;
}

    #popupWrap.error {
        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 {
    border-spacing: 0px;
    flex-grow: 1;
}

table th, table td {
    border-bottom: 1px solid var(--color-border-light);
    padding: 8px 8px;
    font-size: 12px;
}

table th {
    font-weight: normal;
    text-align: start;
}

table.table-hover tbody tr:hover {
    background-color: var(--color-border);
}


/*テーブルレイアウト*/
.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 th, table td {
        padding: 6px 6px;
        font-size: 11px;
    }

    .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) {
    .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;
    }
}


/*ローディング*/
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(180,180,180,.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10100;
}

/* ローディングドット */
.piano-loading {
    position: fixed;
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

    .piano-loading span {
        width: 10px;
        height: 10px;
        background-color: var(--color-gg-base);
        border-radius: 50%;
        animation: bounce 1s infinite ease-in-out;
    }

        .piano-loading span:nth-child(1) {
            animation-delay: 0s;
        }

        .piano-loading span:nth-child(2) {
            animation-delay: 0.12s;
        }

        .piano-loading span:nth-child(3) {
            animation-delay: 0.24s;
        }

        .piano-loading span:nth-child(4) {
            animation-delay: 0.36s;
        }

        .piano-loading span:nth-child(5) {
            animation-delay: 0.48s;
        }

        .piano-loading span:nth-child(6) {
            animation-delay: 0.6s;
        }

        .piano-loading span:nth-child(7) {
            animation-delay: 0.72s;
        }

        .piano-loading span:nth-child(8) {
            animation-delay: 0.84s;
        }

@keyframes bounce {
    0%, 40% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-15px);
    }
}


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

.ta-center {
    text-align: center;
}

.ta-end {
    text-align: end;
}

.text-danger {
    color: var(--color-danger);
}

.systemerror {
    width: 90px;
    height: 90px;
    margin-bottom: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='%236c8ea4'%3E%3Cpath d='M12 2C17.5228 2 22 6.47715 22 12C22 12.7266 21.9225 13.4351 21.7753 14.1177L19.9931 12.3355C19.9977 12.2242 20 12.1124 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C13.3023 20 14.5319 19.6888 15.6186 19.1368C15.7735 19.3828 15.958 19.6149 16.1716 19.8284C16.4739 20.1307 16.8125 20.3745 17.1734 20.5598C15.6642 21.4737 13.8936 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM19 14.1716L20.4142 15.5858C21.1953 16.3668 21.1953 17.6332 20.4142 18.4142C19.6332 19.1953 18.3668 19.1953 17.5858 18.4142C16.8402 17.6687 16.8064 16.481 17.4841 15.6952L17.5858 15.5858L19 14.1716ZM12 15C13.4664 15 14.7853 15.6312 15.6999 16.6368L14.7549 17.4961C13.965 17.1825 13.018 17 12 17C10.982 17 10.035 17.1825 9.24506 17.4961L8.30009 16.6368C9.21468 15.6312 10.5336 15 12 15ZM8.5 10C9.32843 10 10 10.6716 10 11.5C10 12.3284 9.32843 13 8.5 13C7.67157 13 7 12.3284 7 11.5C7 10.6716 7.67157 10 8.5 10ZM15.5 10C16.3284 10 17 10.6716 17 11.5C17 12.3284 16.3284 13 15.5 13C14.6716 13 14 12.3284 14 11.5C14 10.6716 14.6716 10 15.5 10Z'%3E%3C/path%3E%3C/svg%3E");
}

@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 対応 */
    }