.page-title-section {
    background-image: url(../images/bg_title.svg);
    background-size: 1914px 577px;
    background-position: bottom;
    background-repeat: repeat-x;
}

.page-title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-title>svg {
    height: clamp(3.125rem, 2.855rem + 1.35vw, 4.375rem);
}

.page-description {
    font-size: clamp(0.875rem, 0.821rem + 0.27vw, 1.125rem);
    font-weight: bold;
    line-height: 2;
    text-align: center;
}

/*
price
*/

.bg-price-title {
    background-image: url(../images/price/bg_title_left.svg), url(../images/price/bg_title_right.svg);
    background-repeat: no-repeat, no-repeat;
    background-size: calc((423.18 / 1800) * 100%) auto, calc((332.27 / 1800) * 100%) auto;
    background-position: left calc((172 / 1800) * 100%) bottom calc((170 / 467) * 100%), right calc((185 / 1800) * 100%) bottom calc((156 / 467) * 100%);
}

@media (max-width: 1280px) {
    .bg-price-title {
        background-image: none;
    }
}

.bg-price {
    --width-left: calc((255 / 1800) * 100%);
    --height-left: calc((2038.83 / 1627) * 100%);
    --width-right: calc((291 / 1800) * 100%);
    --height-right: calc((1928.34 / 1627) * 100%);
    --side: calc((100% - 1000px) / 2);

    background-image: url(../images/price/bg_left.svg), url(../images/price/bg_right.svg);
    background-repeat: no-repeat, no-repeat;
    background-size: var(--width-left) var(--height-left), var(--width-right) var(--height-right);
    background-position: left calc((var(--side) - var(--width-left)) / 2) center, right calc((var(--side) - var(--width-right)) / 2) center;
}

@media (max-width: 1580px) {
    .bg-price {
        background-image: none;
    }
}

.page-price-card {
    padding: clamp(24px, 18.816px + 1.62vw, 48px) clamp(16px, 12.544px + 1.08vw, 32px);
}

.page-price-heading {
    display: flex;
    align-items: center;
    gap: 0.8em;
    font-family: 'LightNovelPOP', sans-serif;
    font-size: clamp(1.25rem, 0.912rem + 1.69vw, 2.813rem);
    line-height: 1;
    width: fit-content;
}

.page-price-heading::before,
.page-price-heading::after {
    content: "●";
    color: #3EA142;
    font-size: clamp(0.75rem, 0.669rem + 0.41vw, 1.125rem);
    line-height: 1;
}

.page-price-table {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto 1fr auto 1fr auto 1fr auto auto auto;
    padding: 0 clamp(16px, 12.544px + 1.08vw, 32px);
}

.page-price-table__full {
    grid-column: span 3;
}

.page-price-table__dots-h {
    grid-column: span 3;
}

.page-price-table__dots-v {
    grid-column: 2;
}

.page-price-key {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr;
    column-gap: 9px;
    padding: clamp(12px, 9.408px + 0.81vw, 24px) clamp(12px, 9.84px + 0.68vw, 22px);
}

.page-price-key__image {
    width: clamp(65.008px, 50.944px + 4.39vw, 130px);
}

.page-price-key__image--large {
    width: clamp(115.008px, 89.056px + 8.11vw, 235.008px);
}

.page-price-key__description {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.page-price-key-name {
    font-family: 'LightNovelPOP', sans-serif;
    font-size: clamp(1.375rem, 1.226rem + 0.74vw, 2.063rem);
    line-height: 1.215;
    text-align: center;
}

.page-price-key-sub {
    font-size: clamp(0.875rem, 0.848rem + 0.14vw, 1rem);
    font-weight: bold;
    text-align: center;
}

.page-price-price {
    border-bottom: 1px solid black;
    font-size: clamp(1rem, 0.878rem + 0.61vw, 1.563rem);
    font-weight: bold;
    line-height: 1.215;
    text-align: center;
    padding: 0 0.5em 6px;
    width: fit-content;
}

.page-price-key-special {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 16px;
    padding: clamp(16px, 12.544px + 1.08vw, 32px);
}

.page-price-key-special::before {
    content: "●";
    color: #3EA142;
    font-size: clamp(0.75rem, 0.642rem + 0.54vw, 1.25rem);
    line-height: 1;
    margin-right: 14px;
}

.page-price-key-special__price {
    font-size: clamp(1rem, 0.878rem + 0.61vw, 1.563rem);
    font-weight: bold;
    line-height: 1;
    text-align: center;
    margin-left: 32px;
}

.page-price-caution {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    padding: clamp(16px, 12.544px + 1.08vw, 32px) 0;
}

.page-price-caution__image {
    display: block;
    margin-left: calc(-1 * clamp(6px, 4.704px + 0.41vw, 12px));
    width: clamp(16.25rem, 10.574rem + 28.38vw, 42.5rem);
}

.page-price-caution__note {
    background-color: #FF0000;
    color: white;
    font-size: clamp(0.625rem, 0.517rem + 0.54vw, 1.125rem);
    font-weight: bold;
    text-align: center;
    padding: 4px 8px;
    width: 100%;
}

@media (max-width: 980px) {
    .page-price-table {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto auto auto;
    }

    .page-price-table__full {
        grid-column: span 1;
    }

    .page-price-table__dots-h {
        grid-column: span 1;
    }

    .page-price-table__dots-v {
        grid-column: span 1;
        height: var(--s) !important;
        width: 100% !important;
    }
}

/*
order
*/

.bg-order-title {
    background-image: url(../images/order/bg_title_left.svg), url(../images/order/bg_title_right.svg);
    background-repeat: no-repeat, no-repeat;
    background-size: calc((358 / 1800) * 100%) auto, calc((374 / 1800) * 100%) auto;
    background-position: left calc((179 / 1800) * 100%) bottom calc((165 / 467) * 100%), right calc((182 / 1800) * 100%) bottom calc((160 / 467) * 100%);
}

@media (max-width: 1280px) {
    .bg-order-title {
        background-image: none;
    }
}

.bg-order {
    --width-left: calc((213 / 1800) * 100%);
    --height-left: calc((1262.12 / 1627) * 100%);
    --width-right: calc((260 / 1800) * 100%);
    --height-right: calc((1292.84 / 1627) * 100%);
    --side: calc((100% - 1000px) / 2);

    background-image: url(../images/order/bg_left.svg), url(../images/order/bg_right.svg);
    background-repeat: no-repeat, no-repeat;
    background-size: var(--width-left) var(--height-left), var(--width-right) var(--height-right);
    background-position: left calc((var(--side) - var(--width-left)) / 2) center, right calc((var(--side) - var(--width-right)) / 2) center;
}

@media (max-width: 1580px) {
    .bg-order {
        background-image: none;
    }
}

.page-order-steps {
    display: grid;
    justify-items: center;
    grid-template-columns: 48fr 49fr;
    column-gap: 28px;
    row-gap: 17px;
}

.page-order-steps__image {
    display: block;
    width: 100%;
}

.page-order-steps__body {
    padding: clamp(18px, 17.344px + 0.2vw, 21.008px) clamp(18px, 15.84px + 0.68vw, 28px);
}

.page-order-steps__arrow {
    grid-column: span 2;
    display: block;
    aspect-ratio: 130 / 38;
    background-image: url(../images/order/arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: clamp(65px, 50.944px + 4.39vw, 130px);
}

.page-order-steps__last {
    grid-column: span 2;
}

.page-order-step {
    display: block;
    background-color: var(--page-order-step-color, #3EA142);
    border-radius: 999px;
    color: white;
    font-family: 'LightNovelPOP', sans-serif;
    font-size: clamp(1.25rem, 1.034rem + 1.08vw, 2.25rem);
    font-weight: bold;
    line-height: 1;
    padding: clamp(5.008px, 3.92px + 0.34vw, 10px) clamp(1.125rem, 1.03rem + 0.47vw, 1.563rem) clamp(7.008px, 5.488px + 0.47vw, 14px);
    width: fit-content;
}

.page-order-step--pink {
    --page-order-step-color: #FF6E95;
}

.page-order-step--blue {
    --page-order-step-color: #006EB9;
}

.page-order-step--orange {
    --page-order-step-color: #F99B00;
}

.page-order-step--purple {
    --page-order-step-color: #80599E;
}

.page-order-step-heading {
    font-family: "LightNovelPOP", sans-serif;
    font-size: clamp(1.125rem, 0.909rem + 1.08vw, 2.125rem);
    line-height: 1.25;
    letter-spacing: 0;
}

.page-order-step-description {
    height: fit-content;
    max-width: 100%;
}

.page-order-send {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr auto;
    column-gap: 16px;
    row-gap: 20px;
    padding: 18px clamp(18px, 10.224px + 2.43vw, 54px) clamp(18px, 13.68px + 1.35vw, 38px) clamp(18px, 14.32px + 1.15vw, 35px);
    width: 100%;
}

.page-order-send__step {
    grid-column: 1;
    grid-row: 1;
}

.page-order-send__heading {
    grid-column: 2;
    grid-row: 1;
}

.page-order-send__note {
    grid-column: 3;
    grid-row: 1 / 3;
    height: fit-content;
    max-width: min(100%, 50vw);
}

.page-order-send__description {
    grid-column: 1 / 3;
    grid-row: 2;
}

.page-order-send__methods {
    grid-column: 1 / 4;
    grid-row: 3;
}

.page-order-send-methods {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 28px;
}

.page-order-send-methods__method {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: clamp(12px, 9.408px + 0.81vw, 24px);
    row-gap: 10px;
    height: 100%;
    width: 100%;
}

.page-order-send-methods__method>img {
    grid-column: 1;
    grid-row: 1 / 3;
}

.page-order-send-methods__method>p:nth-of-type(1) {
    color: #80599E;
    font-family: 'LightNovelPOP', sans-serif;
    font-size: clamp(1.125rem, 1.03rem + 0.47vw, 1.563rem);
    padding-top: 9px;
}

.page-order-send-methods__method>p:nth-of-type(2) {
    font-size: clamp(0.875rem, 0.821rem + 0.27vw, 1.125rem);
    font-weight: bold;
    padding-bottom: 9px;
}

.page-order-send-methods__line {
    border-right: 1px solid black;
    padding-right: 24px;
}

.page-order-send-methods__line>img {
    aspect-ratio: 1 / 1;
    margin: auto;
    width: 150px;
}

.page-order-send-methods__mail>img {
    aspect-ratio: 164 / 118;
    margin: auto;
    width: 120px;
}

.page-order-send-methods__button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: black;
    color: #fff;
    font-size: clamp(0.875rem, 0.74rem + 0.68vw, 1.5rem);
    font-weight: bold;
    line-height: 1;
    text-decoration: none;
    position: relative;
    padding: 10px 2em;
    white-space: nowrap;
    transition: transform 0.3s ease-in-out;
    width: fit-content;
}

.page-order-send-methods__button::before {
    display: block;
    content: "";
    aspect-ratio: 1 / 1;
    background-image: url(../common/images/mail.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 0.5em;
    width: 2em;
}

.page-order-send-methods__button:hover {
    transform: scale(1.05);
}

@media (max-width: 920px) {
    .page-order-steps {
        grid-template-columns: 1fr;
    }

    .page-order-steps__image {
        max-width: 480px;
    }

    .page-order-steps__arrow {
        grid-column: span 1;
    }

    .page-order-steps__last {
        grid-column: span 1;
    }
}

@media (max-width: 980px) {
    .page-order-send {
        grid-template-columns: 1fr auto;
    }

    .page-order-send__step {
        grid-column: 1;
        grid-row: 1;
    }

    .page-order-send__heading {
        grid-column: 1;
        grid-row: 2;
    }

    .page-order-send__note {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    .page-order-send__description {
        grid-column: span 2;
        grid-row: 3;
    }

    .page-order-send__methods {
        grid-column: 1 / 3;
        grid-row: 4;
    }

    .page-order-send-methods {
        row-gap: 16px;
        grid-template-columns: 1fr;
    }

    .page-order-send-methods__line {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
    }

    .page-order-send-methods__line>img,
    .page-order-send-methods__mail>img {
        width: clamp(100px, 89.184px + 3.38vw, 150px);
    }

    .page-order-send-methods__button {
        padding: 10px 1.5em;
    }
}

@media (max-width: 720px) {
    .page-order-send {
        grid-template-columns: 1fr;
    }

    .page-order-send__step {
        grid-column: 1;
        grid-row: 1;
    }

    .page-order-send__heading {
        grid-column: 1;
        grid-row: 2;
    }

    .page-order-send__note {
        grid-column: 1;
        grid-row: 4;
    }

    .page-order-send__description {
        grid-column: 1;
        grid-row: 3;
    }

    .page-order-send__methods {
        grid-column: 1;
        grid-row: 5;
    }
}

/*
news
*/

.page-news-date {
    display: block;
    font-size: var(--text-base);
    font-weight: bold;
    line-height: 1;
}

.page-news-heading {
    display: block;
    border-bottom: 2px solid #002C67;
    font-size: clamp(1.5rem, 1.392rem + 0.54vw, 2rem);
    font-weight: bold;
    line-height: 1.125;
    padding-bottom: clamp(26px, 24.272px + 0.54vw, 34px);
}

.page-news-thumbnail {
    display: block;
    aspect-ratio: 1200 / 625;
    border-radius: 12px;
    object-fit: cover;
    width: 100%;
}

/*
other
*/

.bg-other-title {
    background-image: url(../images/bg_other_left.svg), url(../images/bg_other_right.svg);
    background-repeat: no-repeat, no-repeat;
    background-size: calc((435 / 1800) * 100%) auto, calc((438 / 1800) * 100%) auto;
    background-position: left calc((179 / 1800) * 100%) bottom calc((165 / 467) * 100%), right calc((179 / 1800) * 100%) bottom calc((160 / 467) * 100%);
}

@media (max-width: 1280px) {
    .bg-other-title {
        background-image: none;
    }
}

/*
contact
*/

.page-contact-text {
    font-size: clamp(0.875rem, 0.821rem + 0.27vw, 1.125rem);
}