.rateGraph__wrap .flex__content.active {
    position: relative;
    height: auto;
}

div.titleMain.titleMain--wrapper.is-pc {
    margin-top: 0;
}

@media (min-width: 768px) {
    .shop__detail--rateGraph .rateGraph__wrap {
        padding: calc(3rem - 4px) 5.75rem;
        margin-top: 1.5rem;
    }

    .graph_title_block {
        text-align: center;
        margin-top: 2em;
    }

    .form__wrap .form__liner::after {
        position: absolute;
        top: 50%;
        right: 20px;
        z-index: 0;
        width: 8px;
        height: 8px;
        margin-top: -4px;
        vertical-align: middle;
        content: "";
        border-right: 1px solid #d82300;
        border-bottom: 1px solid #d82300;
        -webkit-transform: translateY(-50%) rotate(45deg);
        -ms-transform: translateY(-50%) rotate(45deg);
        transform: translateY(-50%) rotate(45deg);
    }
}

@media (max-width: 767px) {
    .rateGraph__wrap .flex__content {
        width: 100% !important;
        margin: 0 0rem;
    }

    .rateGraph__wrap .price-chart-canvas {
        width: 100% !important;
    }

    select#graph-select {
        margin: 0 !important;
    }
}

/* 10年用 */
@media (max-width: 767px) {
    .gold_souba_10years--rateTable table tr td > span,
    .gold_souba_10years--rateTable #yearpriceload tr th > span {
        display: flex !important;
        align-items: baseline;
    }

    .gold_souba_10years--rateTable table {
        overflow: scroll !important;
        display: block;
    }
}

/* 10年用 */
/* 1ヶ月の金相場 (既存のCSSはそのまま) */
.gold-daily-price-section {
    margin-top: 2em;
    margin-bottom: 2em;
}

.gold-price-table-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 1em;
    border-radius: 8px;
    background-color: #fff;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
    margin: 2em 0;
    overflow: hidden;
    border-radius: 24px;
}

.price-table th,
.price-table td {
    border: 1px solid #ddd;
    padding: 0.75em;
    text-align: center;
    font-size: 0.9em;
    /* 元のCSSのまま */
}

.price-table th {
    background-color: #e60012;
    color: white;
    font-weight: 400;
}

.price-table th:nth-child(1) {
    border-radius: 24px 0 0 0;
}

.price-table th:nth-child(3) {
    border-radius: 0 24px 0 0;
}

.price-table td.date {
    min-width: 80px;
    font-size: 20px;
    font-weight: bold;
    color: #545454;
}

.price-table td.price {
    font-weight: bold;
    font-size: 20px;
    color: #545454;
}

.price-table td.price > span {
    font-weight: normal;
    font-size: 12px;
}

/* 前日差の色指定は span タグに対して行うように変更 */
.price-table td span.diff-plus {
    color: #e60012;
}

.price-table td span.diff-minus {
    color: #007bff;
}

.price-table td span.diff-zero {
    color: #333;
}

.table-controls {
    padding: 0px 24%;
    position: relative;
}

.btn--more {
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    color: #fff !important;
    border: none;
    background-color: #e60012;
    font-weight: bold;
    text-align: center;
    border-radius: 100px;
    min-width: 28%;
    margin: 0 auto 1em;
    cursor: pointer;
    box-sizing: border-box;
}

.btn--more.is-open {
    display: none;
}

.arrow-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6%;
    margin: auto;
    transform: rotate(90deg);
    width: 1.5em;
    height: 1.5em;
    margin-left: 0.5em;
    border-radius: 50%;
    background-image: url(/gold/wp-content/themes/otakaraya/assets/img/common/icon_arrow_white01.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease;
}

.arrow-icon.after {
    transform: translateY(-50%) rotate(-90deg);
    top: 29%;
    display: none;
}

.btn--more:hover {
    background-color: #d82300;
}

.btn-link-to-archive {
    display: inline-block;
    color: #d82300;
    text-decoration: underline;
    font-size: 0.9em;
}

.btn-link-to-archive:hover {
    color: #b01c00;
}

.hidden-row {
    display: none;
}

/* 1っか月の金相場 */
@media (max-width: 767px) {
    .table-controls {
        padding: 0px 14%;
    }
}

/* 新しい年度別相場テーブルのスタイル */
.annual-table-container .description {
    font-size: clamp(16px, 2.05vw, 14px);
    color: #000;
    margin-bottom: 15px;
    line-height: 1.4;
    padding: 1px 0px;
    text-align: left;
    font-weight: 600;
}

.annual-table-container table {
    width: 100%;
    margin: 0 auto;
    border-spacing: 0;
    overflow: hidden;
}

.annual-table-container tbody {
    border: 1px solid var(--color-gray-medium);
}

.annual-table-container thead th {
    background: var(--color-gray-light);
    padding: clamp(6px, 1vw, 8px);
    text-align: center;
    font-weight: 500;
}

.annual-table-container tbody th {
    /* text-align: center; */
    width: 25%;
    border-right: 1px solid var(--color-gray-medium);
    border-bottom: 1px solid var(--color-gray-medium);
    color: #000;
    padding: clamp(6px, 1vw, 8px);
    --f-base: 16;
    font-weight: bold;
    font-family: "Roboto";
    /* line-height: 2.1; */
}

.annual-table-container tbody td {
    border-bottom: 1px solid var(--color-gray-medium);
    text-align: right;
    padding: clamp(6px, 1vw, 8px) 2%;
    color: #000;
    position: relative;
}

.annual-table-container tbody td span:first-child {
    margin-left: 2px;
}

.annual-table-container tbody td span:last-child span {
    font-weight: normal;
    margin-left: 2px;
}

.annual-table-container tbody tr:last-child th,
.annual-table-container tbody tr:last-child td {
    border-bottom: none;
}

.annual-table-container tbody td:not(:last-child) {
    border-right: 1px solid var(--color-gray-medium);
}

.annual-table-container .note {
    font-size: clamp(12px, 2.25vw, 18px);
    color: #000;
    margin: 15px 10px 0 10px;
    text-align: left;
    line-height: 1.4;
}

.renew_202404_calctool_title {
    position: relative;
    display: block;
    width: 100%;
    font-size: 30px;
    line-height: 44px;
    color: #444444;
    margin: 1rem auto 1rem !important;
}

@media (min-width: 768px) {
    .annual-table-container .description {
        text-align: center;
    }
}

/* 新規 ---------------------------------------------------------------------------*/
/* タブ切り替え部分 ----------------------------------------------------------------*/
.pm-rate-graph-tab-panel {
    display: none;
}

.pm-rate-graph-tab-panel.active {
    display: block;
}

.pm-rate-graph-tab-btn {
    padding: 1cqh 8cqw;
    cursor: pointer;
    border: none;
    border-radius: 1cqw 1cqw 0 0;
    background: var(--color-gray-light);
    position: relative;
}

.pm-rate-graph-tab-btn.active {
    background: #fff;
    border: var(--border-thick) solid var(--color-gray-dark);
    border-bottom: 0;
}

.pm-rate-graph-tab-btn.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10%;
    height: 20%;
    background-color: #fff;
}

.pm-rate-graph-tabs-block {
    width: 100%;
    border-bottom: var(--border-thick) solid var(--color-gray-dark);
}
.pm-rate-graph-tabs-list {
    display: flex;
    white-space: nowrap;
    margin: auto;
    width: fit-content;
    gap: 1cqw;
    text-align: center;
}

/* メイン----------------------------------------------------------------------------- */
#pm-rate-graph {
    margin: 0 5%;
    width: auto;
    padding: 2cqw;
}

#pm-rate-graph .flex__content {
    background: #fff !important;
    position: relative;
}

#pm-rate-graph .max-rate-speach-bubble {
    position: absolute;
    right: 0.6%;
    top: -4%;
    z-index: 10;
}

#pm-rate-graph .max-rate-speach-bubble.none {
    display: none;
}

#pm-rate-graph .flex__content .speach-bubble.custom-arrow::after {
    left: unset;
    right: 6%;
    bottom: -1cqw;
}

#pm-rate-graph #price-chart-legend {
    text-align: left !important;
    margin-left: 1.8cqw !important;
}

#category .shop__detail--rateGraph .rateGraph__wrap {
    border: 0 !important;
}

#category .shop__detail--rateGraph .rateGraph__wrap .rateGraph__inner--select {
    display: block !important;
}

#pm-rate-graph .rateGraph__wrap {
    border: 0 !important;
}

#pm-rate-graph .flex__tab .tab__item:first-child a,
#pm-rate-graph .flex__tab .tab__item:last-child a {
    border-radius: 0 !important;
}

#pm-rate-graph .flex__content {
    padding: 0 !important;
    border-radius: 24px;
}

#pm-rate-graph .rateGraph__inner--select {
    display: block !important;
}

#pm-rate-graph .form__wrap .form__liner select {
    padding: 2cqh 1.5cqw;
    border: 2px solid var(--color-gray-dark) !important;
    border-radius: 2cqw;
    box-sizing: border-box;
}

#pm-rate-graph .form__liner {
    width: 100% !important;
    max-width: none !important;
}

#pm-rate-graph .graph-span-tab {
    background: var(--color-gray-light);
    flex-shrink: 0;
    padding: 3.6cqw 2cqw;
    width: 18%;
    text-align: center;
    cursor: pointer;
}

#pm-rate-graph .graph-span-tab:not(:last-child) {
    border-right: 2px solid var(--color-gray-dark);
}

#pm-rate-graph .graph-span-tab:has(+ .graph-span-tab.active) {
    border-right: 0;
}

#pm-rate-graph .graph-span-tab.active {
    background: var(--color-red);
    color: #fff;
    border-right: 0;
}

#pm-rate-graph .graph-span-tabs-block .simplebar-content {
    display: flex;
    flex-wrap: nowrap;
}

#pm-rate-graph .flex__content {
    height: 0;
}

#pm-rate-graph .rateGraph__wrap .flex__content.active {
    position: relative;
    height: auto;
}

#pm-rate-graph .rateGraph__wrap {
    padding: 0 !important;
}

#gold .rateSection {
    padding: 0 !important;
    container-type: inline-size;
}

#pm-rate-graph .graph-annotation {
    margin: 4cqh auto 0;
    width: 90%;
}

#ten-year-rate {
    margin: 0 5%;
    width: auto;
    border-radius: 2cqw;
    padding: 2cqw;
}

#ten-year-rate tbody tr:first-child th,
#ten-year-rate tbody tr:first-child td {
    color: var(--color-red);
}

#pm-rate-graph .price-chart-canvas {
    padding: 0 min(2.2cqw, 14px);
}

#ten-year-rate #yearpriceload tr th span,
#ten-year-rate #yearpriceload td .num-text {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 2;
}

#ten-year-rate #yearpriceload td .num-text span {
    margin-top: 1cqw;
}

/* グラフ最高値吹き出し */
@media (max-width: 600px) {
    #pm-rate-graph .max-rate-speach-bubble {
        right: 1%;
    }
}

/* スクロールバー ----------------------------------------------------------------*/
#pm-rate-graph .simplebar-scrollbar::before {
    top: 0% !important;
    bottom: 0% !important;
    left: 1% !important;
    right: 1% !important;
    margin: auto;
    background-color: var(--color-gray-dark) !important;
    height: 1.4cqw;
    border-radius: 0.4em;
    opacity: 1;
}

#pm-rate-graph .simplebar-track {
    top: -40%;
}

#pm-rate-graph .simplebar-track.simplebar-horizontal {
    background-color: var(--color-gray-light);
    border-radius: 0.4em;
    height: 2.8cqw;
}

#pm-rate-graph .simplebar-scrollbar {
    pointer-events: auto !important;
    cursor: pointer;
}