@charset "utf-8";
@import "reset.css";

:root {
    --color-primary: #ED6B00;
    --color-secondary: #FFD800;
    --color-accent: #2B7196;
    --base-font-color: #000;
    --font-family-en: "Roboto", sans-serif;
}

@media (max-width: 767px)
{
    :root {
        --base-size: min(0.2666vw, 0.128rem); /* 375 - 480 */
    }
}

@media (min-width: 768px)
{
    :root {
        --base-size: min(0.078125vw, 0.1rem); /* 768 - 1280 */
    }
}





html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-optical-sizing: auto;
    line-height: 1.5;
    background-color: #fff;
    color: var(--base-font-color);
    padding-top: calc(var(--base-size) * 60);
}

img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

::placeholder {
    color: #ccc;
}
input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; 
}
input[type="number"] { 
    -moz-appearance: textfield; 
}

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

@media (min-width: 768px)
{
    body {
        padding-top: calc(var(--base-size) * 100);
    }

    .sp-only {
        display: none !important;
    }
}





/* ヘッダ */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(var(--base-size) * 60);
    gap: calc(var(--base-size) * 20);
    padding: 0 0 0 calc(var(--base-size) * 25);
    background-color: #fff;
    box-shadow: 0 0 calc(var(--base-size) * 10) 0 rgba(0, 0, 0, 0.1);
}
.header__logo {
    flex-grow: 0;
    flex-shrink: 0;
    width: calc(var(--base-size) * 120);
}
.header__logo-link {
    display: block;
}
.header__logo-img {
    display: block;
}

.header__nav-toggle {
    position: relative;
    height: 100%;
    aspect-ratio: 1 / 1;
    background-color: #000;
    cursor: pointer;
}
.header__nav-toggle-line,
.header__nav-toggle::before,
.header__nav-toggle::after {
    display: block;
    width: 50%;
    height: 5%;
    background-color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.header__nav-toggle-line {
    transition: opacity 0.1s linear;
}
.header__nav-toggle::before {
    content: "";
    top: -40%;
    transition: top 0.1s linear, transform 0.1s linear;
}
.header__nav-toggle::after {
    content: "";
    bottom: -40%;
    transition: top 0.1s linear, transform 0.1s linear;
}
.--menu-open .header__nav-toggle-line {
    opacity: 0;
}
.--menu-open .header__nav-toggle::before {
    top: 0;
    transform: rotate(45deg);
}
.--menu-open .header__nav-toggle::after {
    bottom: 0;
    transform: rotate(-45deg);
}

.header__nav {
    position: fixed;
    top: calc(var(--base-size) * 60);
    left: 0;
    width: 0;
    height: 0;
    display: grid;
    place-content: center stretch;
    overflow: hidden;
    transition-delay: 0.1s;
}
.--menu-open .header__nav {
    width: 100%;
    height: calc(100% - calc(var(--base-size) * 60));
    transition: width 0s linear, height 0s linear;
}
.header__nav::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.1s linear;
}
.--menu-open .header__nav::before {
    opacity: 1;
}

.header__nav-list {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 50);
    padding: calc(var(--base-size) * 50) calc(var(--base-size) * 25);
    overflow: auto;
    opacity: 0;
    transform: translateY(calc(var(--base-size) * -20));
    transition: transform 0.1s linear, opacity 0.1s linear;
}
.--menu-open .header__nav-list {
    opacity: 1;
    transform: translateY(0);
}
.header__nav-link {
    position: relative;
    color: inherit;
    font-size: calc(var(--base-size) * 20);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

@media (min-width: 768px)
{
    .header {
        height: auto;
        gap: calc(var(--base-size) * 50);
        padding: calc(var(--base-size) * 29) calc(var(--base-size) * 54);
        box-shadow: 0 0 calc(var(--base-size) * 10) 0 rgba(0, 0, 0, 0.1);
    }
    .header__logo {
        width: calc(var(--base-size) * 180);
    }

    .header__nav-toggle {
        display: none;
    }

    .header__nav,
    .--menu-open .header__nav {
        position: relative;
        top: auto;
        width: auto;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: calc(var(--base-size) * 300);
        overflow: visible;
    }
    .header__nav::before {
        display: none;
    }

    .header__nav-list,
    .--menu-open .header__nav-list {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: calc(var(--base-size) * 50);
        padding: 0;
        overflow: visible;
        opacity: 1;
        transform: translateY(0);
    }
    .header__nav-link {
        position: relative;
        color: inherit;
        font-size: calc(var(--base-size) * 20);
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
    }
}

@media (hover: hover)
{
    .header__nav-link {
        transition: color 0.1s linear;
    }
    .header__nav-link:hover {
        color: var(--color-primary);
    }
}





/* セクション */

.main {
    position: relative;
    z-index: 1;
}

.section {
    position: relative;
    z-index: 1;
    padding-top: calc(var(--base-size) * 120);
    padding-bottom: calc(var(--base-size) * 120);
}

.section__inner {
    max-width: calc(var(--base-size) * 375);
    margin: 0 auto;
    padding: 0 calc(var(--base-size) * 25);
}

.section__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--base-size) * 20);
    font-size: calc(var(--base-size) * 20);
    font-weight: 700;
    line-height: 1.25;
}
.section__title::before,
.section__title::after {
    content: "";
    display: block;
    width: calc(var(--base-size) * 5);
    height: calc(var(--base-size) * 34);
    background-color: var(--color-primary);
}

.section__description {
    font-size: calc(var(--base-size) * 15);
    font-weight: 500;
    margin-top: calc(var(--base-size) * 40);
}

@media (min-width: 768px)
{
    .section {
        padding-top: calc(var(--base-size) * 200);
        padding-bottom: calc(var(--base-size) * 200);
    }

    .section__inner {
        max-width: calc(var(--base-size) * 1080);
        padding: 0 calc(var(--base-size) * 40);
    }

    .section__title {
        gap: calc(var(--base-size) * 20);
        font-size: calc(var(--base-size) * 32);
    }
    .section__title::before,
    .section__title::after {
        width: calc(var(--base-size) * 5);
        height: calc(var(--base-size) * 44);
    }

    .section__description {
        font-size: calc(var(--base-size) * 20);
        margin-top: calc(var(--base-size) * 44);
        text-align: center;
    }
}





/* セクション背景 */

.section__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}
.section__bg--last {
    height: calc(100% + calc(var(--base-size) * 628));
}

.section__bg-img {
    position: absolute;
    display: block;
    width: calc(var(--base-size) * 400);
    height: auto;
}
.section__bg-img.--left-orange {
    width: calc(var(--base-size) * 120);
    left: calc(var(--base-size) * -42);
}
.section__bg-img.--left-blue {
    width: calc(var(--base-size) * 120);
    left: calc(var(--base-size) * -35);
}
.section__bg-img.--left-purple {
    width: calc(var(--base-size) * 126);
    left: calc(var(--base-size) * -32);
}

.section__bg-img.--right-orange {
    width: calc(var(--base-size) * 136);
    right: calc(var(--base-size) * -20);
    top: calc(var(--base-size) * 580);
}
.section__bg-img.--right-purple {
    width: calc(var(--base-size) * 126);
    right: calc(var(--base-size) * -32);
}
.section__bg-img.--right-blue {
    width: calc(var(--base-size) * 120);
    right: calc(var(--base-size) * -35);
}

@media (min-width: 768px)
{
    .section__bg--last {
        height: calc(100% + calc(var(--base-size) * 760));
    }

    .section__bg-img.--left-orange {
        width: calc(var(--base-size) * 288);
        left: calc(var(--base-size) * -72);
    }
    .section__bg-img.--left-blue {
        width: calc(var(--base-size) * 468);
        left: calc(var(--base-size) * -72);
    }
    .section__bg-img.--left-purple {
        width: calc(var(--base-size) * 362);
        left: calc(var(--base-size) * -68);
    }

    .section__bg-img.--right-orange {
        width: calc(var(--base-size) * 398);
        right: calc(var(--base-size) * -30);
    }
    .section__bg-img.--right-purple {
        width: calc(var(--base-size) * 468);
        right: calc(var(--base-size) * -72);
    }
    .section__bg-img.--right-blue {
        width: calc(var(--base-size) * 352);
        right: calc(var(--base-size) * -52);
    }
}





/* 下層ページヘッダー */

.page-header__title {
    position: relative;
    display: grid;
    place-content: center;
    height: calc(var(--base-size) * 200);
    background-color: #ccc;
}
.page-header__title-text {
    position: relative;
    z-index: 2;
    font-size: calc(var(--base-size) * 24);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-align: center;
    text-shadow: 0 0 calc(var(--base-size) * 6) rgba(0, 0, 0, 0.3);
}
.page-header__title-text--black {
    color: #000;
    text-shadow: 0 0 calc(var(--base-size) * 6) rgba(255, 255, 255, 0.3);
}
.page-header__title-bg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page-header__title-bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px)
{
    .page-header__title {
        height: calc(var(--base-size) * 250);
    }
    .page-header__title-text {
        font-size: calc(var(--base-size) * 40);
        text-shadow: 0 0 calc(var(--base-size) * 6) rgba(0, 0, 0, 0.3);
    }
}





/* パンくずリスト */

.breadcrumbs {
    padding: 0 calc(var(--base-size) * 25);
    margin: calc(var(--base-size) * 10) auto 0 auto;
}
.breadcrumbs__list {
    display: flex;
    gap: calc(var(--base-size) * 10);
}
.breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: calc(var(--base-size) * 10);
}
.breadcrumbs__item+.breadcrumbs__item::before {
    content: "";
    display: block;
    width: calc(var(--base-size) * 6);
    height: calc(var(--base-size) * 6);
    border: solid 1px var(--base-font-color);
    border-width: 1px 1px 0 0;
    margin: auto 0;
    transform: rotate(45deg);
}
.breadcrumbs__link {
    font-size: calc(var(--base-size) * 12);
    font-weight: 500;
    text-decoration: none;
    color: inherit;
}

@media (min-width: 768px)
{
    .breadcrumbs {
        padding: 0 calc(var(--base-size) * 40);
        margin-top: calc(var(--base-size) * 20);
        max-width: calc(var(--base-size) * 1560);
    }
    .breadcrumbs__list {
        gap: calc(var(--base-size) * 10);
    }
    .breadcrumbs__item {
        gap: calc(var(--base-size) * 10);
    }
    .breadcrumbs__item+.breadcrumbs__item::before {
        width: calc(var(--base-size) * 6);
        height: calc(var(--base-size) * 6);
        border-width: 1px 1px 0 0;
    }
    .breadcrumbs__link {
        font-size: calc(var(--base-size) * 15);
    }
}

@media (hover: hover)
{
    .breadcrumbs__link {
        transition: color 0.2s ease;
    }
    .breadcrumbs__link:hover {
        color: var(--color-primary);
    }
}





/* コンテンツナビゲーション１ */

.page-nav {
    position: relative;
    z-index: 2;
    max-width: calc(var(--base-size) * 375);
    margin: 0 auto;
    padding: calc(var(--base-size) * 100) calc(var(--base-size) * 25) 0 calc(var(--base-size) * 25);
}

.common-content-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--base-size) * 20);
}
.common-content-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--base-size) * 20);
    padding: calc(var(--base-size) * 16) calc(var(--base-size) * 25);
    border-radius: calc(var(--base-size) * 10);
    min-height: calc(var(--base-size) * 80);
    background-color: var(--color-primary);
    color: #fff;
    font-size: calc(var(--base-size) * 18);
    font-weight: 500;
    text-decoration: none;
}
.common-content-nav-link::after {
    content: "";
    display: block;
    width: calc(var(--base-size) * 25);
    height: calc(var(--base-size) * 25);
    background-image: url("../img/common/link-icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media (min-width: 768px)
{
    .page-nav {
        max-width: calc(var(--base-size) * 1080);
        padding: calc(var(--base-size) * 200) calc(var(--base-size) * 40) 0 calc(var(--base-size) * 40);
    }

    .common-content-nav {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: calc(var(--base-size) * 30);
    }
    .common-content-nav-item {
        flex-basis: calc(50% - calc(var(--base-size) * 15));
    }
    .common-content-nav-link {
        gap: calc(var(--base-size) * 20);
        padding: calc(var(--base-size) * 20) calc(var(--base-size) * 32);
        border-radius: calc(var(--base-size) * 20);
        min-height: calc(var(--base-size) * 120);
        font-size: calc(var(--base-size) * 24);
    }
    .common-content-nav-link::after {
        width: calc(var(--base-size) * 30);
        height: calc(var(--base-size) * 30);
    }
}

@media (hover: hover)
{
    .common-content-nav-link {
        transition: transform 0.1s linear;
    }
    .common-content-nav-link:hover {
        transform: scale(1.02);
    }
}





/* コンテンツナビゲーション２ */

.common-secondary-nav {
    width: calc(var(--base-size) * 250);
    margin-right: auto;
    margin-left: auto;
}
*+.common-secondary-nav {
    margin-top: calc(var(--base-size) * 85);
}
.common-secondary-nav-item {
    display: block;
    border-bottom: 1px solid #707070;
}

.common-secondary-nav-link {
    display: flex;
    justify-content: center;
    padding: calc(var(--base-size) * 15) 0;
    font-size: calc(var(--base-size) * 18);
    font-weight: 700;
    text-align: center;
}

@media (min-width: 768px)
{
    .common-secondary-nav {
        width: auto;
        display: flex;
        justify-content: center;
    }
    *+.common-secondary-nav {
        margin-top: calc(var(--base-size) * 200);
    }
    .common-secondary-nav-item {
        flex-grow: 1;
        position: relative;
        border-bottom: none;
        display: flex;
        align-items: stretch;
    }
    .common-secondary-nav::before,
    .common-secondary-nav::after,
    .common-secondary-nav-item:not(:last-of-type)::after {
        content: "";
        display: block;
        background-color: #707070;
        width: calc(var(--base-size) * 2);
        height: calc(var(--base-size) * 42);
        margin: auto 0;
    }
    .common-secondary-nav-link {
        align-items: center;
        width: 100%;
        padding: calc(var(--base-size) * 3) calc(var(--base-size) * 12);
        font-size: calc(var(--base-size) * 24);
    }
}

@media (hover: hover) {
    .common-secondary-nav-link {
        transition: color 0.1s linear;
    }
    .common-secondary-nav-link:hover {
        color: var(--color-primary);
    }
}





/* 番号付きコンテンツ */

.common-ordered-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 40);
    margin-top: calc(var(--base-size) * 100);
}
.common-ordered-content__title {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(var(--base-size) * 85);
    font-size: calc(var(--base-size) * 20);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.025em;
    text-align: center;
    background-color: #004F85;
    color: #fff;
    padding: calc(var(--base-size) * 15) 0;
}
.common-ordered-content__title::before {
    content: "";
    display: block;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    width: calc(var(--base-size) * 44);
    height: calc(var(--base-size) * 10);
    background-color: #003F6C;
    position: absolute;
    left: 0;
    bottom: calc(var(--base-size) * -9.5);
    z-index: -1;
}
.common-ordered-content__title-text {
    flex-grow: 2;
    padding: 0 calc(var(--base-size) * 14);
}
.common-ordered-content__title-number {
    display: grid;
    width: calc(var(--base-size) * 44);
    height: calc(var(--base-size) * 40);
    place-items: center;
    background-color: #2DA9B7;
    font-size: calc(var(--base-size) * 24);
}
.common-ordered-content__item:nth-child(2) .common-ordered-content__title-number {
    background-color: #F89816;
}
.common-ordered-content__item:nth-child(3) .common-ordered-content__title-number {
    background-color: #DF736E;
}
.common-ordered-content__item:nth-child(4) .common-ordered-content__title-number {
    background-color: #518AC9;
}
.common-ordered-content__item:nth-child(5) .common-ordered-content__title-number {
    background-color: #9FC133;
}
.common-ordered-content__description,
.common-ordered-content__list {
    font-size: calc(var(--base-size) * 15);
    letter-spacing: 0.05em;
    margin-top: calc(var(--base-size) * 30);
}
.common-ordered-content__list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 10);
}
.common-ordered-content__list-item {
    position: relative;
    padding-left: calc(var(--base-size) * 23);
}
.common-ordered-content__list-item::before {
    content: "";
    display: block;
    width: calc(var(--base-size) * 4);
    aspect-ratio: 1 / 1;
    background-color: #000;
    position: absolute;
    top: calc(var(--base-size) * 10);
    left: calc(var(--base-size) * 6);
}

@media (min-width: 768px)
{
    .common-ordered-content {
        gap: calc(var(--base-size) * 60);
        margin-top: calc(var(--base-size) * 152);
    }
    .common-ordered-content__title {
        gap: calc(var(--base-size) * 6);
        min-height: calc(var(--base-size) * 80);
        font-size: calc(var(--base-size) * 28);
        line-height: 1.35;
        letter-spacing: 0.05em;
        text-align: left;
        padding: calc(var(--base-size) * 12) 0;
    }
    .common-ordered-content__title::before {
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        width: calc(var(--base-size) * 50);
        height: calc(var(--base-size) * 13);
        bottom: calc(var(--base-size) * -12.5);
    }
    .common-ordered-content__title-text {
        padding: 0 calc(var(--base-size) * 20);
    }
    .common-ordered-content__title-number {
        width: calc(var(--base-size) * 60);
        height: calc(var(--base-size) * 60);
        font-size: calc(var(--base-size) * 32);
    }

    .common-ordered-content__description,
    .common-ordered-content__list {
        font-size: calc(var(--base-size) * 18);
        line-height: 1.6666;
        letter-spacing: 0.05em;
        margin-top: calc(var(--base-size) * 40);
    }
    .common-ordered-content__list {
        gap: 0;
        padding-left: calc(var(--base-size) * 16);
    }
    .common-ordered-content__list-item {
        position: relative;
        padding-left: calc(var(--base-size) * 34);
    }
    .common-ordered-content__list-item::before {
        width: calc(var(--base-size) * 5);
        top: calc(var(--base-size) * 13);
        left: calc(var(--base-size) * 12);
    }
}





/* 比較表 */

.common-comparison-title {
    display: flex;
    flex-direction: column;
}
.common-comparison-title-main {
    font-size: calc(var(--base-size) * 20);
    font-weight: 500;
    padding: calc(var(--base-size) * 2) 0 calc(var(--base-size) * 2) calc(var(--base-size) * 10);
    border-left: calc(var(--base-size) * 5) solid #004F85;
}
.common-comparison-title-sub {
    font-size: calc(var(--base-size) * 11);
    padding-left: calc(var(--base-size) * 15);
}
.common-comparison-table {
    padding-top: calc(var(--base-size) * 40);
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 20);
}
.common-comparison-table-item {
    display: flex;
    flex-direction: column;
    border-radius: calc(var(--base-size) * 10);
    background-color: #BBDAF3;
    padding: 0 calc(var(--base-size) * 7) calc(var(--base-size) * 7) calc(var(--base-size) * 7);
}
.common-comparison-table-item-row {
    position: relative;
    display: grid;
    place-items: center;
    min-height: calc(var(--base-size) * 80);
    padding: calc(var(--base-size) * 10) calc(var(--base-size) * 5);
}
.common-comparison-table-item-row:nth-child(2n) {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: calc(var(--base-size) * 10);
}
.common-comparison-table-item-row-text {
    font-size: calc(var(--base-size) * 20);
    text-align: center;
    padding: calc(var(--base-size) * 10) 0;
}
.common-comparison-table-item-row-notes {
    font-size: calc(var(--base-size) * 11);
    position: absolute;
    right: calc(var(--base-size) * 13);
    bottom: calc(var(--base-size) * 6);
}

.common-comparison-table-item:last-of-type {
    background-color: #FF575D;
}
.common-comparison-table-item:last-of-type .common-comparison-table-item-row:first-of-type {
    color: #FFFCD7;
}
.common-comparison-table-item:last-of-type .common-comparison-table-item-row:not(:first-of-type) {
    background-color: #fffcd7;
}
.common-comparison-table-item:last-of-type .common-comparison-table-item-row:nth-child(2n) {
    background-color: #FFF475;
    border-radius: 0;
}
.common-comparison-table-item:last-of-type .common-comparison-table-item-row:last-of-type {
    border-bottom-left-radius: calc(var(--base-size) * 10);
    border-bottom-right-radius: calc(var(--base-size) * 10);
}
.common-comparison-ex-01 {
    display: block;
    font-size: calc(var(--base-size) * 24);
    font-weight: 700;
    line-height: 1.25;
    padding: calc(var(--base-size) * 6) 0;
}
.common-comparison-ex-02 {
    font-size: calc(var(--base-size) * 21);
    font-weight: 700;
    color: #FF575D;
}
.common-comparison-ex-03 {
    display: inline-block;
    font-family: var(--font-family-en);
    font-size: calc(var(--base-size) * 48);
    line-height: 1;
    font-weight: 700;
    color: #FF575D;
    margin-right: calc(var(--base-size) * 6);
}
.common-comparison-ex-04 {
    display: inline-block;
    width: calc(var(--base-size) * 12);
    height: calc(calc(var(--base-size) * 8) * tan(60deg));
    background-color: var(--base-font-color);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    margin: calc(var(--base-size) * 10) calc(var(--base-size) * 5) calc(var(--base-size) * 10) calc(var(--base-size) * 2);
}

@media (min-width: 768px)
{
    .common-comparison-title {
        flex-direction: row;
        align-items: flex-end;
        border-left: calc(var(--base-size) * 5) solid #004F85;
        padding: calc(var(--base-size) * 3) 0 calc(var(--base-size) * 7) calc(var(--base-size) * 20);
        margin-right: calc(var(--base-size) * 340);
    }
    .common-comparison-title-main {
        font-size: calc(var(--base-size) * 28);
        line-height: 1.25;
        padding: 0;
        border-left: none;
    }
    .common-comparison-title-sub {
        font-size: calc(var(--base-size) * 15);
        padding-left: calc(var(--base-size) * 35)
    }

    .common-comparison-table {
        padding-top: calc(var(--base-size) * 64);
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: calc(var(--base-size) * 20);
    }
    .common-comparison-table-item {
        flex-basis: calc(100% / 3);
        border-radius: calc(var(--base-size) * 10);
        background-color: #BBDAF3;
        padding: 0 calc(var(--base-size) * 5) calc(var(--base-size) * 5) calc(var(--base-size) * 5);
    }
    .common-comparison-table-item-row {
        min-height: calc(var(--base-size) * 120);
        padding: calc(var(--base-size) * 5);
    }
    .common-comparison-table-item-row:nth-child(2n) {
        border-radius: calc(var(--base-size) * 10);
    }
    .common-comparison-table-item-row-text {
        font-size: calc(var(--base-size) * 24);
        line-height: 1.25;
        padding: calc(var(--base-size) * 15) calc(var(--base-size) * 5);
        font-weight: 500;
    }
    .common-comparison-table-item-row-notes {
        font-size: calc(var(--base-size) * 15);
        right: calc(var(--base-size) * 12);
        bottom: calc(var(--base-size) * 6);
    }
    .common-comparison-table-item-row-text--small {
        font-size: calc(var(--base-size) * 20);
    }

    .common-comparison-table-item:last-of-type {
        margin-top: calc(var(--base-size) * -120);
    }
    .common-comparison-table-item:last-of-type .common-comparison-table-item-row:last-of-type {
        border-bottom-left-radius: calc(var(--base-size) * 10);
        border-bottom-right-radius: calc(var(--base-size) * 10);
    }

    .common-comparison-ex-01 {
        font-size: calc(var(--base-size) * 32);
        line-height: 1.1;
        padding: 0;
    }
    .common-comparison-ex-02 {
        font-size: calc(var(--base-size) * 32);
    }
    .common-comparison-ex-03 {
        font-size: calc(var(--base-size) * 48);
        margin-right: calc(var(--base-size) * 6);
    }
    .common-comparison-ex-04 {
        width: calc(var(--base-size) * 12);
        height: calc(calc(var(--base-size) * 8) * tan(60deg));
        margin: calc(var(--base-size) * 10) calc(var(--base-size) * 5) calc(var(--base-size) * 10) calc(var(--base-size) * 2);
    }
}





/* よくあるご質問 */

.common-faq__title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.common-faq__title::before {
    content: "";
    display: block;
    width: calc(var(--base-size) * 54);
    height: calc(var(--base-size) * 37);
    background: url(../img/common/faq-title-icon.svg) left no-repeat;
    background-size: contain;
    margin: calc(var(--base-size) * -60) 0 0 calc(var(--base-size) * -54);
}
.common-faq__title::after {
    content: "";
    display: block;
    height: calc(calc(var(--base-size) * 12) * tan(60deg));
    width: calc(var(--base-size) * 24);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background-color: #000;
    position: absolute;
    right: 0;
    left: 0;
    bottom: calc(var(--base-size) * -20);
    margin: 0 auto;
}
.common-faq__title-text {
    font-size: calc(var(--base-size) * 20);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.1em;
    background-color: #000;
    border-radius: 3px;
    color: #fff;
    padding: calc(var(--base-size) * 5) calc(var(--base-size) * 42) calc(var(--base-size) * 9) calc(var(--base-size) * 42);
    position: relative;
}
.common-faq__title-text::before,
.common-faq__title-text::after {
    content: "";
    display: block;
    width: calc(var(--base-size) * 18);
    height: 100%;
    background-color: #000;
    position: absolute;
    top: 0;
}
.common-faq__title-text::before {
    clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 55%);
    left: calc(var(--base-size) * -17);
}
.common-faq__title-text::after {
    clip-path: polygon(0 0, 100% 45%, 100% 55%, 0 100%);
    right: calc(var(--base-size) * -17);
}

.common-faq__list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 10);
    margin-top: calc(var(--base-size) * 40);
}
.common-faq__list-item-question {
    position: relative;
}
.common-faq__list-item-question::before,
.common-faq__list-item-question::after {
    content: "";
    display: block;
    width: calc(var(--base-size) * 10);
    height: min(calc(var(--base-size) * 2), 2px);
    background-color: #707070;
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(var(--base-size) * 13);
    margin: auto 0;
    z-index: 2;
    opacity: 1;
    pointer-events: none;
}
.common-faq__list-item-question::after {
    transform: rotate(90deg);
}
.--is-open .common-faq__list-item-question::before {
    opacity: 1;
}
.--is-open .common-faq__list-item-question::after {
    opacity: 0;
}

.common-faq__list-item-question-opener {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--base-size) * 6);
    padding: calc(var(--base-size) * 6) calc(var(--base-size) * 38) calc(var(--base-size) * 6) calc(var(--base-size) * 12);
    font-size: calc(var(--base-size) * 14);
    font-weight: 500;
    line-height: calc(var(--base-size) * 20);
    background-color: var(--color-secondary);
    text-decoration: none;
    color: inherit;
}
.common-faq__list-item-question-opener::before {
    flex-shrink: 0;
    content: "Q:";
    font-size: calc(var(--base-size) * 10);
}
.common-faq__list-item-question-opener::after {
    content: "";
    display: block;
    width: calc(var(--base-size) * 16);
    height: calc(var(--base-size) * 16);
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    right: calc(var(--base-size) * 10);
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.common-faq__list-item-answer {
    height: 0;
    overflow: hidden;
    transition: height 0.1s linear;
}
.--is-open .common-faq__list-item-answer {
    height: auto;
}
.common-faq__list-item-answer-text {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--base-size) * 8);
    font-size: calc(var(--base-size) * 14);
    line-height: calc(var(--base-size) * 20);
    padding: calc(var(--base-size) * 10) calc(var(--base-size) * 16);
    background-color: #F8F8F8;
    color: #707070;
}
.common-faq__list-item-answer-text::before {
    flex-shrink: 0;
    content: "A:";
}

@media (min-width: 768px)
{
    .common-faq__title::before {
        width: calc(var(--base-size) * 92);
        height: calc(var(--base-size) * 60);
        margin: 0 0 0 calc(var(--base-size) * -92);
    }
    .common-faq__title::after {
        height: calc(calc(var(--base-size) * 16) * tan(60deg));
        width: calc(var(--base-size) * 32);
        bottom: calc(var(--base-size) * -26);
    }
    .common-faq__title-text {
        font-size: calc(var(--base-size) * 40);
        line-height: 1.25;
        letter-spacing: 0.1em;
        border-radius: 3px;
        padding: calc(var(--base-size) * 5) calc(var(--base-size) * 52) calc(var(--base-size) * 9) calc(var(--base-size) * 52);
    }
    .common-faq__title-text::before,
    .common-faq__title-text::after {
        width: calc(var(--base-size) * 26);
    }
    .common-faq__title-text::before {
        clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 55%);
        left: calc(var(--base-size) * -25);
    }
    .common-faq__title-text::after {
        clip-path: polygon(0 0, 100% 45%, 100% 55%, 0 100%);
        right: calc(var(--base-size) * -25);
    }

    .common-faq__list {
        gap: calc(var(--base-size) * 20);
        margin-top: calc(var(--base-size) * 80);
    }
    .common-faq__list-item-question::before,
    .common-faq__list-item-question::after {
        width: calc(var(--base-size) * 12);
        height: calc(var(--base-size) * 2);
        right: calc(var(--base-size) * 15);
    }

    .common-faq__list-item-question-opener {
        gap: calc(var(--base-size) * 6);
        padding: calc(var(--base-size) * 8) calc(var(--base-size) * 36) calc(var(--base-size) * 8) calc(var(--base-size) * 18);
        font-size: calc(var(--base-size) * 18);
        line-height: calc(var(--base-size) * 25);
    }
    .common-faq__list-item-question-opener::before {
        font-size: calc(var(--base-size) * 16);
    }
    .common-faq__list-item-question-opener::after {
        width: calc(var(--base-size) * 22);
        height: calc(var(--base-size) * 22);
        right: calc(var(--base-size) * 10);
    }

    .common-faq__list-item-answer-text {
        gap: calc(var(--base-size) * 8);
        font-size: calc(var(--base-size) * 16);
        line-height: 1.3125;
        font-weight: 500;
        padding: calc(var(--base-size) * 10) calc(var(--base-size) * 18);
    }
}





/* FAQ背景ペイント */

.section__bg-img.--faq-sbg-01 {
    top: calc(var(--base-size) * 24);
}
.section__bg-img.--faq-sbg-02 {
    top: calc(var(--base-size) * 1300);
}

.section__bg-img.--faq-sbg-03 {
    top: calc(var(--base-size) * 700);
}
.section__bg-img.--faq-sbg-04 {
    top: calc(var(--base-size) * 2130);
}

@media (max-width: 767px)
{
    .section__bg-img.--faq-sbg-01 {
        left: calc(var(--base-size) * -70);
    }
    .section__bg-img.--faq-sbg-02 {
        left: calc(var(--base-size) * -70);
    }

    .section__bg-img.--faq-sbg-03 {
        right: calc(var(--base-size) * -70);
    }
}

@media (min-width: 768px)
{
    .section__bg-img.--faq-sbg-01 {
        top: calc(var(--base-size) * 236);
    }
    .section__bg-img.--faq-sbg-02 {
        top: calc(var(--base-size) * 1200);
    }
    .section__bg-img.--faq-sbg-03 {
        top: calc(var(--base-size) * 730);
    }
    .section__bg-img.--faq-sbg-04 {
        top: calc(var(--base-size) * 1720);
    }
}





/* CTA（追従） */

.cta {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--base-size) * 14);
    width: 100%;
    padding: calc(var(--base-size) * 44) calc(var(--base-size) * 25) calc(var(--base-size) * 25) calc(var(--base-size) * 25);
    background-color: var(--color-accent);
    color: #fff;
    border-top-left-radius: calc(var(--base-size) * 15);
    border-top-right-radius: calc(var(--base-size) * 15);
}

.cta__form-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--base-size) * 6);
    width: calc(var(--base-size) * 280);
    height: calc(var(--base-size) * 66);
    padding-bottom: calc(var(--base-size) * 2);
    border: solid calc(var(--base-size) * 5) var(--color-accent);
    border-radius: 9999px;
    background-color: var(--color-secondary);
    color: var(--base-font-color);
    font-size: calc(var(--base-size) * 24);
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    position: absolute;
    top: calc(var(--base-size) * -33);
    left: 0;
    right: 0;
    margin: 0 auto;
}
.cta__form-link-icon {
    width: calc(var(--base-size) * 36);
    height: calc(var(--base-size) * 25);
    margin-bottom: calc(var(--base-size) * -2);
}
.cta__form-link-icon-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cta__contact {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 8);
}
.cta__contact-link {
    display: flex;
    align-items: center;
    gap: calc(var(--base-size) * 6);
    font-size: calc(var(--base-size) * 32);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    font-family: var(--font-family-en);
    font-variation-settings: "wdth" 100;
    color: inherit;
    text-decoration: none;
}
.cta__contact-link-icon {
    display: block;
    width: calc(var(--base-size) * 32);
    aspect-ratio: 1 / 1;
}
.cta__contact-link-icon-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cta__notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.2em;
    font-size: calc(var(--base-size) * 11);
    font-weight: 500;
    text-align: center;
}
.cta__notes span:not(:first-of-type)::before {
    content: "/";
    display: inline-block;
    margin-right: 0.2em;
}

@media (max-width: 767px)
{
    .cta {
        opacity: 0;
        transform: translateY(100%);
        transition: opacity 0.1s linear, transform 0.1s linear;
    }
    .cta.--is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 768px)
{
    .cta {
        bottom: auto;
        left: auto;
        top: 0;
        right: 0;
        gap: calc(var(--base-size) * 30);
        width: calc(var(--base-size) * 300);
        padding: calc(var(--base-size) * 34) calc(var(--base-size) * 24);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: calc(var(--base-size) * 16);
    }

    .cta__form-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(var(--base-size) * 10);
        width: 100%;
        height: calc(var(--base-size) * 60);
        padding-bottom: calc(var(--base-size) * 2);
        border: none;
        border-radius: calc(var(--base-size) * 30);
        font-size: calc(var(--base-size) * 20);
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        margin: 0;
        transform: translateY(0);
    }
    .cta__form-link-icon {
        width: calc(var(--base-size) * 31);
        height: calc(var(--base-size) * 22);
        margin-bottom: calc(var(--base-size) * -2);
    }

    .cta__contact {
        display: flex;
        flex-direction: column;
        gap: calc(var(--base-size) * 8);
    }
    .cta__contact-link {
        gap: calc(var(--base-size) * 8);
        font-size: calc(var(--base-size) * 30);
        line-height: 1.2;
    }

    .cta__contact-link-icon {
        width: calc(var(--base-size) * 28);
    }
    .cta__notes {
        gap: 0;
        font-size: calc(var(--base-size) * 15);
        margin-top: calc(var(--base-size) * -8);
        margin-bottom: calc(var(--base-size) * -5);
    }
    .cta__notes span:not(:first-of-type)::before {
        display: none;
    }
}

@media (hover: hover) {
    .cta__form-link {
        transition: transform 0.05s linear;
    }
    .cta__form-link:hover {
        transform: scale(1.02);
    }
    a.cta__contact-link {
        transition: filter 0.1s linear;
    }
    a.cta__contact-link:hover {
        filter: brightness(0) saturate(100%) invert(56%) sepia(58%) saturate(4851%) hue-rotate(3deg) brightness(94%) contrast(102%);
    }
}





/* CTA（コンテンツ内） */

.common-cta {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--base-size) * 28);
    width: calc(100% - calc(var(--base-size) * 50));
    max-width: calc(var(--base-size) * 325);
    padding: calc(var(--base-size) * 30);
    background-color: var(--color-accent);
    color: #fff;
    border-radius: calc(var(--base-size) * 15);
    margin: 0 auto;
}
.section+.common-cta {
    margin-top: 0;
}
.section .common-cta {
    margin-bottom: 0;
}

.common-cta__form-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--base-size) * 12);
    width: 100%;
    max-width: calc(var(--base-size) * 265);
    min-height: calc(var(--base-size) * 72);
    padding: calc(var(--base-size) * 6);
    border-radius: 9999px;
    background-color: var(--color-secondary);
    color: var(--base-font-color);
    font-size: calc(var(--base-size) * 20);
    font-weight: 700;
    text-decoration: none;
}
.common-cta__form-link-icon {
    width: calc(var(--base-size) * 32);
    height: calc(var(--base-size) * 24);
}
.common-cta__form-link-icon-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.common-cta__form-link-text {
    padding-bottom: calc(var(--base-size) * 2);
}

.common-cta__contact {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 12);
}
.common-cta__contact-link {
    display: flex;
    align-items: center;
    gap: calc(var(--base-size) * 6);
    font-family: var(--font-family-en);
    font-variation-settings: "wdth" 100;
    font-size: calc(var(--base-size) * 32);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}
.common-cta__contact-link-icon {
    display: block;
    width: calc(var(--base-size) * 32);
    aspect-ratio: 1 / 1;
}
.common-cta__contact-link-icon-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.common-cta__notes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(var(--base-size) * 1) calc(var(--base-size) * 20);
    font-size: calc(var(--base-size) * 15);
    font-weight: 500;
    margin-top: calc(var(--base-size) * -6);
    margin-bottom: calc(var(--base-size) * -3);
}

@media (min-width: 768px)
{
    .common-cta {
        gap: calc(var(--base-size) * 24);
        width: 100%;
        max-width: calc(var(--base-size) * 1000);
        padding: calc(var(--base-size) * 80);
        border-radius: calc(var(--base-size) * 15);
    }
    .section+.common-cta {
        margin-top: 0;
    }
    .section .common-cta {
        margin-bottom: 0;
    }

    .common-cta__form-link {
        gap: calc(var(--base-size) * 12);
        width: calc(var(--base-size) * 400);
        max-width: none;
        min-height: calc(var(--base-size) * 72);
        padding: calc(var(--base-size) * 6);
        font-size: calc(var(--base-size) * 29);
    }
    .common-cta__form-link-icon {
        width: calc(var(--base-size) * 46);
        height: calc(var(--base-size) * 32);
    }
    .common-cta__form-link-text {
        padding-bottom: calc(var(--base-size) * 2);
    }

    .common-cta__contact {
        flex-direction: row;
        gap: calc(var(--base-size) * 40);
    }
    .common-cta__contact-link {
        gap: calc(var(--base-size) * 12);
        font-size: calc(var(--base-size) * 50);
        line-height: 1.2;
    }
    .common-cta__contact-link-icon {
        width: calc(var(--base-size) * 44);
    }
    .common-cta__notes {
        gap: calc(var(--base-size) * 10) calc(var(--base-size) * 20);
        font-size: calc(var(--base-size) * 17);
        line-height: calc(var(--base-size) * 25);
        margin-top: calc(var(--base-size) * -10);
        margin-bottom: calc(var(--base-size) * -3);
    }
}

@media (hover: hover) {
    .common-cta__form-link {
        transition: transform 0.05s linear;
    }
    .common-cta__form-link:hover {
        transform: scale(1.02);
    }
    a.common-cta__contact-link {
        transition: filter 0.1s linear;
    }
    a.common-cta__contact-link:hover {
        filter: brightness(0) saturate(100%) invert(56%) sepia(58%) saturate(4851%) hue-rotate(3deg) brightness(94%) contrast(102%);
    }
}





/* SNSリンク */

.common-cta+.common-sns {
    position: relative;
    z-index: 2;
    margin-top: calc(var(--base-size) * 25);
}
.common-sns__list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--base-size) * 375);
    max-width: 100%;
    margin: 0 auto;
}
.common-sns__item {
    flex-basis: calc(100% / 3);
    flex-shrink: 0;
    padding: 0 calc(var(--base-size) * 10);
}
.common-sns__item+.common-sns__item {
    border-left: solid 1px var(--base-font-color);
}
.common-sns__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--base-size) * 6) 0;
}
.common-sns__link-img {
    display: block;
    width: calc(var(--base-size) * 40);
    aspect-ratio: 1 / 1;
    margin: 0 0 calc(var(--base-size) * 12) 0;
}
.common-sns__link-text {
    font-size: calc(var(--base-size) * 13);
}

@media (min-width: 768px)
{
    .common-cta+.common-sns {
        margin-top: calc(var(--base-size) * 100);
    }
    .common-sns__list {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
    }
    .common-sns__item {
        flex-basis: auto;
        padding: 0 calc(var(--base-size) * 100);
    }
    .common-sns__item+.common-sns__item {
        border-left: solid max(calc(var(--base-size) * 2), 1px) var(--base-font-color);
    }
    .common-sns__link {
        padding: calc(var(--base-size) * 5) 0;
    }
    .common-sns__link-img {
        width: calc(var(--base-size) * 56);
        margin: calc(var(--base-size) * 14) 0;
    }
    .common-sns__link-text {
        font-size: calc(var(--base-size) * 15);
        line-height: 1;
    }
}

@media (hover: hover)
{
    .common-sns__link img {
        transition: transform 0.05s linear;
    }
    .common-sns__link:hover img {
        transform: scale(1.04);
    }
    .common-sns__link-text {
        transition: color 0.2s ease;
    }
    .common-sns__link:hover {
        color: var(--color-primary);
    }
}





/* フッター */

.footer {
    position: relative;
    background-color: #000;
    color: #fff;
    margin-top: calc(var(--base-size) * 120);
}
.footer__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--base-size) * 60);
    padding: calc(var(--base-size) * 16) calc(var(--base-size) * 25);
}

.footer__logo {
    width: calc(var(--base-size) * 120);
    margin-top: calc(var(--base-size) * 64);
}
.footer__logo-link {
    display: block;
}
.footer__logo-img {
    display: block;
}

.footer__nav-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-size) * 20);
}
.footer__nav-item {
    font-size: calc(var(--base-size) * 16);
}
.footer__nav-link {
    color: inherit;
    text-decoration: none;
}

.footer__copyright {
    font-size: calc(var(--base-size) * 12);
    margin-top: calc(var(--base-size) * 40);
    text-align: center;
    width: 100%;
}

@media (min-width: 768px)
{
    .footer {
        margin-top: calc(var(--base-size) * 200);
    }
    .footer__inner {
        align-items: center;
        gap: calc(var(--base-size) * 60);
        max-width: calc(var(--base-size) * 1280);
        margin: 0 auto;
        padding: calc(var(--base-size) * 24) calc(var(--base-size) * 40);
    }

    .footer__logo {
        width: calc(var(--base-size) * 250);
        margin-top: calc(var(--base-size) * 60);
    }

    .footer__nav {
        display: flex;
        justify-content: center;
        gap: calc(var(--base-size) * 50);
    }
    .footer__nav-list {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: calc(var(--base-size) * 50);
    }
    .footer__nav-item {
        font-size: calc(var(--base-size) * 20);
    }

    .footer__copyright {
        font-size: calc(var(--base-size) * 16);
        margin-top: calc(var(--base-size) * 60);
    }
}

@media (hover: hover)
{
    .footer__nav-link {
        transition: color 0.1s linear;
    }
    .footer__nav-link:hover {
        color: var(--color-primary);
    }
}





.back-to-top {
    width: 100%;
    position: absolute;
    right: 0;
    left: 0;
    bottom: calc(100% - var(--base-size) * 43);
    z-index: 100;
    margin: 0 auto;
    pointer-events: none;
}
.back-to-top.--is-floating {
    position: fixed;
    width: 100%;
    bottom: 0;
}
.back-to-top__button {
    display: block;
    width: calc(var(--base-size) * 66);
    height: calc(var(--base-size) * 66);
    background-color: #000;
    color: #fff;
    border: solid calc(var(--base-size) * 5) #fff;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    bottom: calc(var(--base-size) * 10);
    right: calc(var(--base-size) * 10);
    pointer-events: auto;
    transition: transform 0.05s linear;
}

.back-to-top__button:active {
    transform: scale(0.98);
}
.back-to-top__button::before {
    content: '';
    display: block;
    width: calc(var(--base-size) * 14);
    height: calc(var(--base-size) * 14);
    border-style: solid;
    border-color: #fff;
    border-width: calc(var(--base-size) * 3) calc(var(--base-size) * 3) 0 0;
    transform: rotate(-45deg);
    position: absolute;
    top: calc(var(--base-size) * 5);
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.back-to-top__button-text {
    visibility: hidden;
}

@media (min-width: 768px)
{
    .back-to-top {
        max-width: calc(var(--base-size) * 1720);
        bottom: calc(100% - var(--base-size) * 57);
    }
    .back-to-top__button {
        width: calc(var(--base-size) * 74);
        height: calc(var(--base-size) * 74);
        border-width: calc(var(--base-size) * 5);
        bottom: calc(var(--base-size) * 20);
        right: calc(var(--base-size) * 20);
    }
}

@media (hover: hover)
{
    .back-to-top__button:hover {
        transform: scale(1.02);
    }
    .back-to-top__button:hover:active {
        transform: scale(1.00);
    }

}





.modal {
    display: grid;
    place-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.2s ease;
}
.modal:not(.--is-open) {
    pointer-events: none;
    opacity: 0;
}

.modal__content {
    position: relative;
    display: grid;
    place-items: center;

    width: calc(var(--base-size) * 1000);
    max-width: calc(100% - calc(var(--base-size) * 80));
    max-height: calc(100% - calc(var(--base-size) * 80));
    background-color: #fff;
    padding: calc(var(--base-size) * 60) calc(var(--base-size) * 30);
    border-radius: calc(var(--base-size) * 10);
    overflow: auto;
    transform: translateY(20px);
    transition: transform 0.2s ease;

    overscroll-behavior: contain;
}
.modal__content::backdrop {
    overflow: hidden;
    overscroll-behavior: contain;
}
.modal.--is-open .modal__content {
    transform: translateY(0);
}
.modal__close-button {
    position: absolute;
    display: block;
    line-height: 9999px;
    overflow: hidden;
    top: calc(var(--base-size) * 4);
    right: calc(var(--base-size) * 4);
    width: calc(var(--base-size) * 54);
    height: calc(var(--base-size) * 54);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
}
.modal__close-button::before,
.modal__close-button::after {
    content: "";
    display: block;
    width: 50%;
    height: calc(var(--base-size) * 2);
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.modal__close-button::before {
    transform: rotate(-45deg);
}
.modal__close-button::after {
    transform: rotate(45deg);
}

.modal__content-body {
    position: relative;
    z-index: 1;
}

@media (hover: hover)
{
    .modal__close-button {
        background-color: transparent;
        transition: background-color 0.05s linear;
    }
    .modal__close-button:hover {
        background-color: #000;
    }
    .modal__close-button:hover::before,
    .modal__close-button:hover::after {
        transition: background-color 0.05s linear;
    }
    .modal__close-button:hover::before,
    .modal__close-button:hover::after {
        background-color: #fff;
    }
}





.js-effect {
}
.js-effect--fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s linear 0.1s, transform 0.5s ease 0.1s;
}
.js-effect--fade-in-up.js-effect--active,
.js-effect--sequence.js-effect--active .js-effect--fade-in-up {
    opacity: 1;
    transform: translateY(0);
}