* {
    box-sizing: border-box;
    overflow-wrap: break-word;
}



html {
    /* font-size: clamp(9px, 0.6944444444vw, 100vw); */
    font-size: clamp(7px, 0.6944444444vw, 10px);
}



/* スマホ: 768px以下 */
@media screen and (max-width: 768px) {
    html {
        /* スマホ: 375pxで10px */
        font-size: clamp(8px, 2.6666666667vw, 10px);
    }
}

/* 1920px以上: 1rem = 10px、基本フォントサイズ14px */
@media screen and (min-width: 1920px) {
    html {
        font-size: clamp(10px, 0.5208333333vw, 10px);
    }
}



body {
    font-size: var(--text-base);
    line-height: var(--text-base-line-height);
    letter-spacing: var(--text-base-letter-spacing);
    font-weight: var(--text-base-weight);
    color: var(--text-color);
    background: var(--site-background);
    font-family: var(--base-font-family);
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    body {
        font-size: var(--text-base-sp);
    }
}

html,
body {
    scroll-behavior: smooth;
    /* 固定ヘッダー分 + 余白（アンカー・scrollIntoView はここで統一。section の scroll-margin と二重にしない） */
    scroll-padding-top: calc(var(--header-height) + 2rem);
}

@media screen and (max-width: 768px) {
    html,
    body {
        scroll-padding-top: calc(var(--header-height-sp) + 2rem);
    }
}

.container {
    max-width: var(--content-width);
    width: 100%;
    margin: 0 auto;
    padding: var(--content-padding);
}

.container.full-container {
    max-width: 95%;
}

@media screen and (max-width: 768px) {
    .container {
        padding: var(--content-padding-sp);
        max-width: var(--content-width-sp);
    }
}

/* 背景色（settings.css の --primary / --secondary / --tertiary と対応） */
.background-primary {
    background: var(--primary);
    color: var(--primary-text);
}

.background-secondary {
    background: var(--secondary);
    color: var(--white);
}

.background-tertiary {
    background: #E2F1FF;
}

a {
    transition: all 0.3s ease;
}



.en {
    font-family: var(--english-font-family);
}

/* フォントサイズ・行間・字間クラス */
.heading-1 {
    font-size: var(--heading01);
    line-height: var(--heading01-line-height);
    letter-spacing: var(--heading01-letter-spacing);
    font-weight: var(--heading01-weight);
}

.heading-2 {
    font-size: var(--heading02);
    line-height: var(--heading02-line-height);
    letter-spacing: var(--heading02-letter-spacing);
    font-family: var(--heading-font-family);
    font-weight: var(--heading02-weight);
}

.heading-3 {
    font-size: var(--heading03);
    line-height: var(--heading03-line-height);
    letter-spacing: var(--heading03-letter-spacing);
    font-weight: var(--heading03-weight);
}

.heading-4 {
    font-size: var(--heading04);
    line-height: var(--heading04-line-height);
    letter-spacing: var(--heading04-letter-spacing);
    font-weight: var(--heading04-weight);
}

.text-lg {
    font-size: var(--text-lg);
    line-height: var(--text-lg-line-height);
    letter-spacing: var(--text-lg-letter-spacing);
    font-weight: var(--text-lg-weight);
}

.text {
    font-size: var(--text-base);
    line-height: var(--text-base-line-height);
    letter-spacing: var(--text-base-letter-spacing);
    font-weight: var(--text-base-weight);
}

.caption {
    font-size: var(--caption);
    line-height: var(--caption-line-height);
    letter-spacing: var(--caption-letter-spacing);
    font-weight: var(--caption-weight);
}

/* スマホ用フォントサイズ */
@media screen and (max-width: 768px) {
    .heading-1 {
        font-size: var(--heading01-sp);
    }

    .heading-2 {
        font-size: var(--heading02-sp);
    }

    .heading-3 {
        font-size: var(--heading03-sp);
    }

    .heading-4 {
        font-size: var(--heading04-sp);
    }

    .text-lg {
        font-size: var(--text-lg-sp);
    }

    .text {
        font-size: var(--text-base-sp);
    }

    .caption {
        font-size: var(--caption-sp);
    }

    /* SP専用：別のheadingサイズを適用するクラス */
    .heading-1-sp {
        font-size: var(--heading01-sp);
        line-height: var(--heading01-line-height);
        letter-spacing: var(--heading01-letter-spacing);
        font-weight: var(--heading01-weight);
    }

    .heading-2-sp {
        font-size: var(--heading02-sp);
        line-height: var(--heading02-line-height);
        letter-spacing: var(--heading02-letter-spacing);
        font-weight: var(--heading02-weight);
    }

    .heading-3-sp {
        font-size: var(--heading03-sp);
        line-height: var(--heading03-line-height);
        letter-spacing: var(--heading03-letter-spacing);
        font-weight: var(--heading03-weight);
    }

    .heading-4-sp {
        font-size: var(--heading04-sp);
        line-height: var(--heading04-line-height);
        letter-spacing: var(--heading04-letter-spacing);
        font-weight: var(--heading04-weight);
    }

    .text-lg-sp {
        font-size: var(--text-lg);
        line-height: var(--text-lg-line-height);
        letter-spacing: var(--text-lg-letter-spacing);
        font-weight: var(--text-lg-weight);
    }

    .text-base-sp {
        font-size: var(--text-base-sp);
        line-height: var(--text-base-line-height);
        letter-spacing: var(--text-base-letter-spacing);
        font-weight: var(--text-base-weight);
    }


    .caption-sp {
        font-size: var(--caption);
        line-height: var(--caption-line-height);
        letter-spacing: var(--caption-letter-spacing);
        font-weight: var(--caption-weight);
    }
}

/* フォントサイズ・行間・字間クラス */

/* フォントの太さクラス */
.semibold {
    font-weight: var(--semibold) !important;
}

.bold {
    font-weight: var(--bold) !important;
}

/* 記事サムネイル */
.article-thumbnail {
    aspect-ratio: var(--article-thumbnail-aspect-ratio);
}

/* ボタン */
.button-container {
    text-align: center;
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-4);
    background: var(--button-background);
    color: var(--button-text);
    border-radius: var(--button-border-radius);
    border: var(--button-border-width) solid var(--button-border-color);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.button:hover {
    background: var(--button-hover-background);
    color: var(--button-hover-text);
    border: var(--button-border-width) solid var(--button-hover-border-color);
}

.button svg {
    width: 2rem;
    height: 2rem;
}

.button-custon {
    background: var(--button-background02);
    color: var(--button-text02);
    border-color: var(--button-border-color02);
    border-radius: var(--button-border-radius02);
}

.button-custon:hover {
    background: var(--button-hover-background02);
    color: var(--button-hover-text02);
    border-color: var(--button-hover-background02);
}

@media screen and (max-width: 768px) {
    .button {
        gap: 1rem;
    }
}

/* フレックス */
.flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-y) var(--gap-x);
}

@media screen and (max-width: 768px) {
    .flex {
        gap: var(--gap-y-sp) var(--gap-x-sp);
    }
}


/* グリッド */
.grid {
    display: grid;
    gap: var(--gap-x) var(--gap-y);
}

.grid>* {
    min-width: 0;
}

.grid-1 {
    grid-template-columns: repeat(1, 1fr);
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

.grid-7 {
    grid-template-columns: repeat(7, 1fr);
}

.grid-8 {
    grid-template-columns: repeat(8, 1fr);
}

.grid-9 {
    grid-template-columns: repeat(9, 1fr);
}

.grid-10 {
    grid-template-columns: repeat(10, 1fr);
}

@media screen and (max-width: 768px) {
    .grid-1-sp {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-2-sp {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3-sp {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-4-sp {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-5-sp {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid-6-sp {
        grid-template-columns: repeat(6, 1fr);
    }

    .grid-7-sp {
        grid-template-columns: repeat(7, 1fr);
    }

    .grid-8-sp {
        grid-template-columns: repeat(8, 1fr);
    }

    .grid-9-sp {
        grid-template-columns: repeat(9, 1fr);
    }

    .grid-10-sp {
        grid-template-columns: repeat(10, 1fr);
    }
}

.grid-reverse {
    direction: rtl;
}

.grid-reverse * {
    direction: ltr;
}

/* ========== Spacing Classes ========== */

/* Padding - All sides */
.p-1 {
    padding: var(--spacing-1);
}

.p-2 {
    padding: var(--spacing-2);
}

.p-3 {
    padding: var(--spacing-3);
}

.p-4 {
    padding: var(--spacing-4);
}

.p-5 {
    padding: var(--spacing-5);
}

.p-6 {
    padding: var(--spacing-6);
}

.p-7 {
    padding: var(--spacing-7);
}

.p-8 {
    padding: var(--spacing-8);
}

.p-9 {
    padding: var(--spacing-9);
}

/* Padding Top */
.pt-1 {
    padding-top: var(--spacing-1);
}

.pt-2 {
    padding-top: var(--spacing-2);
}

.pt-3 {
    padding-top: var(--spacing-3);
}

.pt-4 {
    padding-top: var(--spacing-4);
}

.pt-5 {
    padding-top: var(--spacing-5);
}

.pt-6 {
    padding-top: var(--spacing-6);
}

.pt-7 {
    padding-top: var(--spacing-7);
}

.pt-8 {
    padding-top: var(--spacing-8);
}

.pt-9 {
    padding-top: var(--spacing-9);
}

/* Padding Bottom */
.pb-1 {
    padding-bottom: var(--spacing-1);
}

.pb-2 {
    padding-bottom: var(--spacing-2);
}

.pb-3 {
    padding-bottom: var(--spacing-3);
}

.pb-4 {
    padding-bottom: var(--spacing-4);
}

.pb-5 {
    padding-bottom: var(--spacing-5);
}

.pb-6 {
    padding-bottom: var(--spacing-6);
}

.pb-7 {
    padding-bottom: var(--spacing-7);
}

.pb-8 {
    padding-bottom: var(--spacing-8);
}

.pb-9 {
    padding-bottom: var(--spacing-9);
}

/* Padding Left */
.pl-1 {
    padding-left: var(--spacing-1);
}

.pl-2 {
    padding-left: var(--spacing-2);
}

.pl-3 {
    padding-left: var(--spacing-3);
}

.pl-4 {
    padding-left: var(--spacing-4);
}

.pl-5 {
    padding-left: var(--spacing-5);
}

.pl-6 {
    padding-left: var(--spacing-6);
}

.pl-7 {
    padding-left: var(--spacing-7);
}

.pl-8 {
    padding-left: var(--spacing-8);
}

.pl-9 {
    padding-left: var(--spacing-9);
}

/* Padding Right */
.pr-1 {
    padding-right: var(--spacing-1);
}

.pr-2 {
    padding-right: var(--spacing-2);
}

.pr-3 {
    padding-right: var(--spacing-3);
}

.pr-4 {
    padding-right: var(--spacing-4);
}

.pr-5 {
    padding-right: var(--spacing-5);
}

.pr-6 {
    padding-right: var(--spacing-6);
}

.pr-7 {
    padding-right: var(--spacing-7);
}

.pr-8 {
    padding-right: var(--spacing-8);
}

.pr-9 {
    padding-right: var(--spacing-9);
}

/* Padding X-axis (left and right) */
.px-1 {
    padding-left: var(--spacing-1);
    padding-right: var(--spacing-1);
}

.px-2 {
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
}

.px-3 {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
}

.px-4 {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

.px-5 {
    padding-left: var(--spacing-5);
    padding-right: var(--spacing-5);
}

.px-6 {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
}

.px-7 {
    padding-left: var(--spacing-7);
    padding-right: var(--spacing-7);
}

.px-8 {
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
}

.px-9 {
    padding-left: var(--spacing-9);
    padding-right: var(--spacing-9);
}

/* Padding Y-axis (top and bottom) */
.py-1 {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
}

.py-2 {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
}

.py-3 {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
}

.py-4 {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
}

.py-5 {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
}

.py-6 {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
}

.py-7 {
    padding-top: var(--spacing-7);
    padding-bottom: var(--spacing-7);
}

.py-8 {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
}

.py-9 {
    padding-top: var(--spacing-9);
    padding-bottom: var(--spacing-9);
}

/* Margin - All sides */
.m-0 {
    margin: 0;
}

.m-1 {
    margin: var(--spacing-1);
}

.m-2 {
    margin: var(--spacing-2);
}

.m-3 {
    margin: var(--spacing-3);
}

.m-4 {
    margin: var(--spacing-4);
}

.m-5 {
    margin: var(--spacing-5);
}

.m-6 {
    margin: var(--spacing-6);
}

.m-7 {
    margin: var(--spacing-7);
}

.m-8 {
    margin: var(--spacing-8);
}

.m-9 {
    margin: var(--spacing-9);
}

/* Margin Top */
.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: var(--spacing-1);
}

.mt-2 {
    margin-top: var(--spacing-2);
}

.mt-3 {
    margin-top: var(--spacing-3);
}

.mt-4 {
    margin-top: var(--spacing-4);
}

.mt-5 {
    margin-top: var(--spacing-5);
}

.mt-6 {
    margin-top: var(--spacing-6);
}

.mt-7 {
    margin-top: var(--spacing-7);
}

.mt-8 {
    margin-top: var(--spacing-8);
}

.mt-9 {
    margin-top: var(--spacing-9);
}

/* Margin Bottom */
.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: var(--spacing-1);
}

.mb-2 {
    margin-bottom: var(--spacing-2);
}

.mb-3 {
    margin-bottom: var(--spacing-3);
}

.mb-4 {
    margin-bottom: var(--spacing-4);
}

.mb-5 {
    margin-bottom: var(--spacing-5);
}

.mb-6 {
    margin-bottom: var(--spacing-6);
}

.mb-7 {
    margin-bottom: var(--spacing-7);
}

.mb-8 {
    margin-bottom: var(--spacing-8);
}

.mb-9 {
    margin-bottom: var(--spacing-9);
}

/* Margin Left */
.ml-0 {
    margin-left: 0;
}

.ml-1 {
    margin-left: var(--spacing-1);
}

.ml-2 {
    margin-left: var(--spacing-2);
}

.ml-3 {
    margin-left: var(--spacing-3);
}

.ml-4 {
    margin-left: var(--spacing-4);
}

.ml-5 {
    margin-left: var(--spacing-5);
}

.ml-6 {
    margin-left: var(--spacing-6);
}

.ml-7 {
    margin-left: var(--spacing-7);
}

.ml-8 {
    margin-left: var(--spacing-8);
}

.ml-9 {
    margin-left: var(--spacing-9);
}

/* Margin Right */
.mr-0 {
    margin-right: 0;
}

.mr-1 {
    margin-right: var(--spacing-1);
}

.mr-2 {
    margin-right: var(--spacing-2);
}

.mr-3 {
    margin-right: var(--spacing-3);
}

.mr-4 {
    margin-right: var(--spacing-4);
}

.mr-5 {
    margin-right: var(--spacing-5);
}

.mr-6 {
    margin-right: var(--spacing-6);
}

.mr-7 {
    margin-right: var(--spacing-7);
}

.mr-8 {
    margin-right: var(--spacing-8);
}

.mr-9 {
    margin-right: var(--spacing-9);
}

/* Margin X-axis (left and right) */
.mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.mx-1 {
    margin-left: var(--spacing-1);
    margin-right: var(--spacing-1);
}

.mx-2 {
    margin-left: var(--spacing-2);
    margin-right: var(--spacing-2);
}

.mx-3 {
    margin-left: var(--spacing-3);
    margin-right: var(--spacing-3);
}

.mx-4 {
    margin-left: var(--spacing-4);
    margin-right: var(--spacing-4);
}

.mx-5 {
    margin-left: var(--spacing-5);
    margin-right: var(--spacing-5);
}

.mx-6 {
    margin-left: var(--spacing-6);
    margin-right: var(--spacing-6);
}

.mx-7 {
    margin-left: var(--spacing-7);
    margin-right: var(--spacing-7);
}

.mx-8 {
    margin-left: var(--spacing-8);
    margin-right: var(--spacing-8);
}

.mx-9 {
    margin-left: var(--spacing-9);
    margin-right: var(--spacing-9);
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Margin Y-axis (top and bottom) */
.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.my-1 {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
}

.my-2 {
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}

.my-3 {
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.my-4 {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.my-5 {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
}

.my-6 {
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.my-7 {
    margin-top: var(--spacing-7);
    margin-bottom: var(--spacing-7);
}

.my-8 {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-8);
}

.my-9 {
    margin-top: var(--spacing-9);
    margin-bottom: var(--spacing-9);
}

/* Gap - All directions */
.gap-0 {
    gap: 0;
}

.gap-1 {
    gap: var(--spacing-1);
}

.gap-2 {
    gap: var(--spacing-2);
}

.gap-3 {
    gap: var(--spacing-3);
}

.gap-4 {
    gap: var(--spacing-4);
}

.gap-5 {
    gap: var(--spacing-5);
}

.gap-6 {
    gap: var(--spacing-6);
}

.gap-7 {
    gap: var(--spacing-7);
}

.gap-8 {
    gap: var(--spacing-8);
}

.gap-9 {
    gap: var(--spacing-9);
}

/* Gap X-axis (column-gap) */
.gap-x-0 {
    column-gap: 0;
}

.gap-x-1 {
    column-gap: var(--spacing-1);
}

.gap-x-2 {
    column-gap: var(--spacing-2);
}

.gap-x-3 {
    column-gap: var(--spacing-3);
}

.gap-x-4 {
    column-gap: var(--spacing-4);
}

.gap-x-5 {
    column-gap: var(--spacing-5);
}

.gap-x-6 {
    column-gap: var(--spacing-6);
}

.gap-x-7 {
    column-gap: var(--spacing-7);
}

.gap-x-8 {
    column-gap: var(--spacing-8);
}

.gap-x-9 {
    column-gap: var(--spacing-9);
}

/* Gap Y-axis (row-gap) */
.gap-y-0 {
    row-gap: 0;
}

.gap-y-1 {
    row-gap: var(--spacing-1);
}

.gap-y-2 {
    row-gap: var(--spacing-2);
}

.gap-y-3 {
    row-gap: var(--spacing-3);
}

.gap-y-4 {
    row-gap: var(--spacing-4);
}

.gap-y-5 {
    row-gap: var(--spacing-5);
}

.gap-y-6 {
    row-gap: var(--spacing-6);
}

.gap-y-7 {
    row-gap: var(--spacing-7);
}

.gap-y-8 {
    row-gap: var(--spacing-8);
}

.gap-y-9 {
    row-gap: var(--spacing-9);
}

/* スマホ用余白（768px以下） */
@media screen and (max-width: 768px) {

    /* Padding - スマホ用サイズに変更 */
    .p-4 {
        padding: var(--spacing-4-sp);
    }

    .p-5 {
        padding: var(--spacing-5-sp);
    }

    .p-6 {
        padding: var(--spacing-6-sp);
    }

    .p-7 {
        padding: var(--spacing-7-sp);
    }

    .p-8 {
        padding: var(--spacing-8-sp);
    }

    .p-9 {
        padding: var(--spacing-9-sp);
    }

    .pt-4 {
        padding-top: var(--spacing-4-sp);
    }

    .pt-5 {
        padding-top: var(--spacing-5-sp);
    }

    .pt-6 {
        padding-top: var(--spacing-6-sp);
    }

    .pt-7 {
        padding-top: var(--spacing-7-sp);
    }

    .pt-8 {
        padding-top: var(--spacing-8-sp);
    }

    .pt-9 {
        padding-top: var(--spacing-9-sp);
    }

    .pb-4 {
        padding-bottom: var(--spacing-4-sp);
    }

    .pb-5 {
        padding-bottom: var(--spacing-5-sp);
    }

    .pb-6 {
        padding-bottom: var(--spacing-6-sp);
    }

    .pb-7 {
        padding-bottom: var(--spacing-7-sp);
    }

    .pb-8 {
        padding-bottom: var(--spacing-8-sp);
    }

    .pb-9 {
        padding-bottom: var(--spacing-9-sp);
    }

    .pl-4 {
        padding-left: var(--spacing-4-sp);
    }

    .pl-5 {
        padding-left: var(--spacing-5-sp);
    }

    .pl-6 {
        padding-left: var(--spacing-6-sp);
    }

    .pl-7 {
        padding-left: var(--spacing-7-sp);
    }

    .pl-8 {
        padding-left: var(--spacing-8-sp);
    }

    .pl-9 {
        padding-left: var(--spacing-9-sp);
    }

    .pr-4 {
        padding-right: var(--spacing-4-sp);
    }

    .pr-5 {
        padding-right: var(--spacing-5-sp);
    }

    .pr-6 {
        padding-right: var(--spacing-6-sp);
    }

    .pr-7 {
        padding-right: var(--spacing-7-sp);
    }

    .pr-8 {
        padding-right: var(--spacing-8-sp);
    }

    .pr-9 {
        padding-right: var(--spacing-9-sp);
    }

    .px-4 {
        padding-left: var(--spacing-4-sp);
        padding-right: var(--spacing-4-sp);
    }

    .px-5 {
        padding-left: var(--spacing-5-sp);
        padding-right: var(--spacing-5-sp);
    }

    .px-6 {
        padding-left: var(--spacing-6-sp);
        padding-right: var(--spacing-6-sp);
    }

    .px-7 {
        padding-left: var(--spacing-7-sp);
        padding-right: var(--spacing-7-sp);
    }

    .px-8 {
        padding-left: var(--spacing-8-sp);
        padding-right: var(--spacing-8-sp);
    }

    .px-9 {
        padding-left: var(--spacing-9-sp);
        padding-right: var(--spacing-9-sp);
    }

    .py-4 {
        padding-top: var(--spacing-4-sp);
        padding-bottom: var(--spacing-4-sp);
    }

    .py-5 {
        padding-top: var(--spacing-5-sp);
        padding-bottom: var(--spacing-5-sp);
    }

    .py-6 {
        padding-top: var(--spacing-6-sp);
        padding-bottom: var(--spacing-6-sp);
    }

    .py-7 {
        padding-top: var(--spacing-7-sp);
        padding-bottom: var(--spacing-7-sp);
    }

    .py-8 {
        padding-top: var(--spacing-8-sp);
        padding-bottom: var(--spacing-8-sp);
    }

    .py-9 {
        padding-top: var(--spacing-9-sp);
        padding-bottom: var(--spacing-9-sp);
    }

    /* Margin - スマホ用サイズに変更 */
    .m-4 {
        margin: var(--spacing-4-sp);
    }

    .m-5 {
        margin: var(--spacing-5-sp);
    }

    .m-6 {
        margin: var(--spacing-6-sp);
    }

    .m-7 {
        margin: var(--spacing-7-sp);
    }

    .m-8 {
        margin: var(--spacing-8-sp);
    }

    .m-9 {
        margin: var(--spacing-9-sp);
    }

    .mt-4 {
        margin-top: var(--spacing-4-sp);
    }

    .mt-5 {
        margin-top: var(--spacing-5-sp);
    }

    .mt-6 {
        margin-top: var(--spacing-6-sp);
    }

    .mt-7 {
        margin-top: var(--spacing-7-sp);
    }

    .mt-8 {
        margin-top: var(--spacing-8-sp);
    }

    .mt-9 {
        margin-top: var(--spacing-9-sp);
    }

    .mb-4 {
        margin-bottom: var(--spacing-4-sp);
    }

    .mb-5 {
        margin-bottom: var(--spacing-5-sp);
    }

    .mb-6 {
        margin-bottom: var(--spacing-6-sp);
    }

    .mb-7 {
        margin-bottom: var(--spacing-7-sp);
    }

    .mb-8 {
        margin-bottom: var(--spacing-8-sp);
    }

    .mb-9 {
        margin-bottom: var(--spacing-9-sp);
    }

    .ml-4 {
        margin-left: var(--spacing-4-sp);
    }

    .ml-5 {
        margin-left: var(--spacing-5-sp);
    }

    .ml-6 {
        margin-left: var(--spacing-6-sp);
    }

    .ml-7 {
        margin-left: var(--spacing-7-sp);
    }

    .ml-8 {
        margin-left: var(--spacing-8-sp);
    }

    .ml-9 {
        margin-left: var(--spacing-9-sp);
    }

    .mr-4 {
        margin-right: var(--spacing-4-sp);
    }

    .mr-5 {
        margin-right: var(--spacing-5-sp);
    }

    .mr-6 {
        margin-right: var(--spacing-6-sp);
    }

    .mr-7 {
        margin-right: var(--spacing-7-sp);
    }

    .mr-8 {
        margin-right: var(--spacing-8-sp);
    }

    .mr-9 {
        margin-right: var(--spacing-9-sp);
    }

    .mx-4 {
        margin-left: var(--spacing-4-sp);
        margin-right: var(--spacing-4-sp);
    }

    .mx-5 {
        margin-left: var(--spacing-5-sp);
        margin-right: var(--spacing-5-sp);
    }

    .mx-6 {
        margin-left: var(--spacing-6-sp);
        margin-right: var(--spacing-6-sp);
    }

    .mx-7 {
        margin-left: var(--spacing-7-sp);
        margin-right: var(--spacing-7-sp);
    }

    .mx-8 {
        margin-left: var(--spacing-8-sp);
        margin-right: var(--spacing-8-sp);
    }

    .mx-9 {
        margin-left: var(--spacing-9-sp);
        margin-right: var(--spacing-9-sp);
    }

    .my-4 {
        margin-top: var(--spacing-4-sp);
        margin-bottom: var(--spacing-4-sp);
    }

    .my-5 {
        margin-top: var(--spacing-5-sp);
        margin-bottom: var(--spacing-5-sp);
    }

    .my-6 {
        margin-top: var(--spacing-6-sp);
        margin-bottom: var(--spacing-6-sp);
    }

    .my-7 {
        margin-top: var(--spacing-7-sp);
        margin-bottom: var(--spacing-7-sp);
    }

    .my-8 {
        margin-top: var(--spacing-8-sp);
        margin-bottom: var(--spacing-8-sp);
    }

    .my-9 {
        margin-top: var(--spacing-9-sp);
        margin-bottom: var(--spacing-9-sp);
    }

    /* Gap - スマホ用サイズに変更 */
    .gap-4 {
        gap: var(--spacing-4-sp);
    }

    .gap-5 {
        gap: var(--spacing-5-sp);
    }

    .gap-6 {
        gap: var(--spacing-6-sp);
    }

    .gap-7 {
        gap: var(--spacing-7-sp);
    }

    .gap-8 {
        gap: var(--spacing-8-sp);
    }

    .gap-9 {
        gap: var(--spacing-9-sp);
    }

    .gap-x-4 {
        column-gap: var(--spacing-4-sp);
    }

    .gap-x-5 {
        column-gap: var(--spacing-5-sp);
    }

    .gap-x-6 {
        column-gap: var(--spacing-6-sp);
    }

    .gap-x-7 {
        column-gap: var(--spacing-7-sp);
    }

    .gap-x-8 {
        column-gap: var(--spacing-8-sp);
    }

    .gap-x-9 {
        column-gap: var(--spacing-9-sp);
    }

    .gap-y-4 {
        row-gap: var(--spacing-4-sp);
    }

    .gap-y-5 {
        row-gap: var(--spacing-5-sp);
    }

    .gap-y-6 {
        row-gap: var(--spacing-6-sp);
    }

    .gap-y-7 {
        row-gap: var(--spacing-7-sp);
    }

    .gap-y-8 {
        row-gap: var(--spacing-8-sp);
    }

    .gap-y-9 {
        row-gap: var(--spacing-9-sp);
    }
}

/* ========== Spacing Classes ========== */


@media screen and (max-width: 768px) {

    /* Padding - スマホ用サイズに変更 */
    .p-0-sp {
        padding: 0;
    }

    .p-1-sp {
        padding: var(--spacing-1);
    }

    .p-2-sp {
        padding: var(--spacing-2);
    }

    .p-3-sp {
        padding: var(--spacing-3);
    }

    .p-4-sp {
        padding: var(--spacing-4-sp);
    }

    .p-5-sp {
        padding: var(--spacing-5-sp);
    }

    .p-6-sp {
        padding: var(--spacing-6-sp);
    }

    .p-7-sp {
        padding: var(--spacing-7-sp);
    }

    .p-8-sp {
        padding: var(--spacing-8-sp);
    }

    .p-9-sp {
        padding: var(--spacing-9-sp);
    }

    .pt-0-sp {
        padding-top: 0;
    }

    .pt-1-sp {
        padding-top: var(--spacing-1);
    }

    .pt-2-sp {
        padding-top: var(--spacing-2);
    }

    .pt-3-sp {
        padding-top: var(--spacing-3);
    }

    .pt-4-sp {
        padding-top: var(--spacing-4-sp);
    }

    .pt-5-sp {
        padding-top: var(--spacing-5-sp);
    }

    .pt-6-sp {
        padding-top: var(--spacing-6-sp);
    }

    .pt-7-sp {
        padding-top: var(--spacing-7-sp);
    }

    .pt-8-sp {
        padding-top: var(--spacing-8-sp);
    }

    .pt-9-sp {
        padding-top: var(--spacing-9-sp);
    }

    .pb-0-sp {
        padding-bottom: 0;
    }

    .pb-1-sp {
        padding-bottom: var(--spacing-1);
    }

    .pb-2-sp {
        padding-bottom: var(--spacing-2);
    }

    .pb-3-sp {
        padding-bottom: var(--spacing-3);
    }

    .pb-4-sp {
        padding-bottom: var(--spacing-4-sp);
    }

    .pb-5-sp {
        padding-bottom: var(--spacing-5-sp);
    }

    .pb-6-sp {
        padding-bottom: var(--spacing-6-sp);
    }

    .pb-7-sp {
        padding-bottom: var(--spacing-7-sp);
    }

    .pb-8-sp {
        padding-bottom: var(--spacing-8-sp);
    }

    .pb-9-sp {
        padding-bottom: var(--spacing-9-sp);
    }

    .pl-0-sp {
        padding-left: 0;
    }

    .pl-1-sp {
        padding-left: var(--spacing-1);
    }

    .pl-2-sp {
        padding-left: var(--spacing-2);
    }

    .pl-3-sp {
        padding-left: var(--spacing-3);
    }

    .pl-4-sp {
        padding-left: var(--spacing-4-sp);
    }

    .pl-5-sp {
        padding-left: var(--spacing-5-sp);
    }

    .pl-6-sp {
        padding-left: var(--spacing-6-sp);
    }

    .pl-7-sp {
        padding-left: var(--spacing-7-sp);
    }

    .pl-8-sp {
        padding-left: var(--spacing-8-sp);
    }

    .pl-9-sp {
        padding-left: var(--spacing-9-sp);
    }

    .pr-0-sp {
        padding-right: 0;
    }

    .pr-1-sp {
        padding-right: var(--spacing-1);
    }

    .pr-2-sp {
        padding-right: var(--spacing-2);
    }

    .pr-3-sp {
        padding-right: var(--spacing-3);
    }

    .pr-4-sp {
        padding-right: var(--spacing-4-sp);
    }

    .pr-5-sp {
        padding-right: var(--spacing-5-sp);
    }

    .pr-6-sp {
        padding-right: var(--spacing-6-sp);
    }

    .pr-7-sp {
        padding-right: var(--spacing-7-sp);
    }

    .pr-8-sp {
        padding-right: var(--spacing-8-sp);
    }

    .pr-9-sp {
        padding-right: var(--spacing-9-sp);
    }

    .px-0-sp {
        padding-left: 0;
        padding-right: 0;
    }

    .px-1-sp {
        padding-left: var(--spacing-1);
        padding-right: var(--spacing-1);
    }

    .px-2-sp {
        padding-left: var(--spacing-2);
        padding-right: var(--spacing-2);
    }

    .px-3-sp {
        padding-left: var(--spacing-3);
        padding-right: var(--spacing-3);
    }

    .px-4-sp {
        padding-left: var(--spacing-4-sp);
        padding-right: var(--spacing-4-sp);
    }

    .px-5-sp {
        padding-left: var(--spacing-5-sp);
        padding-right: var(--spacing-5-sp);
    }

    .px-6-sp {
        padding-left: var(--spacing-6-sp);
        padding-right: var(--spacing-6-sp);
    }

    .px-7-sp {
        padding-left: var(--spacing-7-sp);
        padding-right: var(--spacing-7-sp);
    }

    .px-8-sp {
        padding-left: var(--spacing-8-sp);
        padding-right: var(--spacing-8-sp);
    }

    .px-9-sp {
        padding-left: var(--spacing-9-sp);
        padding-right: var(--spacing-9-sp);
    }

    .py-0-sp {
        padding-top: 0;
        padding-bottom: 0;
    }

    .py-1-sp {
        padding-top: var(--spacing-1);
        padding-bottom: var(--spacing-1);
    }

    .py-2-sp {
        padding-top: var(--spacing-2);
        padding-bottom: var(--spacing-2);
    }

    .py-3-sp {
        padding-top: var(--spacing-3);
        padding-bottom: var(--spacing-3);
    }

    .py-4-sp {
        padding-top: var(--spacing-4-sp);
        padding-bottom: var(--spacing-4-sp);
    }

    .py-5-sp {
        padding-top: var(--spacing-5-sp);
        padding-bottom: var(--spacing-5-sp);
    }

    .py-6-sp {
        padding-top: var(--spacing-6-sp);
        padding-bottom: var(--spacing-6-sp);
    }

    .py-7-sp {
        padding-top: var(--spacing-7-sp);
        padding-bottom: var(--spacing-7-sp);
    }

    .py-8-sp {
        padding-top: var(--spacing-8-sp);
        padding-bottom: var(--spacing-8-sp);
    }

    .py-9-sp {
        padding-top: var(--spacing-9-sp);
        padding-bottom: var(--spacing-9-sp);
    }

    /* Margin - スマホ用サイズに変更 */
    .m-0-sp {
        margin: 0;
    }

    .m-1-sp {
        margin: var(--spacing-1);
    }

    .m-2-sp {
        margin: var(--spacing-2);
    }

    .m-3-sp {
        margin: var(--spacing-3);
    }

    .m-4-sp {
        margin: var(--spacing-4-sp);
    }

    .m-5-sp {
        margin: var(--spacing-5-sp);
    }

    .m-6-sp {
        margin: var(--spacing-6-sp);
    }

    .m-7-sp {
        margin: var(--spacing-7-sp);
    }

    .m-8-sp {
        margin: var(--spacing-8-sp);
    }

    .m-9-sp {
        margin: var(--spacing-9-sp);
    }

    .mt-0-sp {
        margin-top: 0;
    }

    .mt-1-sp {
        margin-top: var(--spacing-1);
    }

    .mt-2-sp {
        margin-top: var(--spacing-2);
    }

    .mt-3-sp {
        margin-top: var(--spacing-3);
    }

    .mt-4-sp {
        margin-top: var(--spacing-4-sp);
    }

    .mt-5-sp {
        margin-top: var(--spacing-5-sp);
    }

    .mt-6-sp {
        margin-top: var(--spacing-6-sp);
    }

    .mt-7-sp {
        margin-top: var(--spacing-7-sp);
    }

    .mt-8-sp {
        margin-top: var(--spacing-8-sp);
    }

    .mt-9-sp {
        margin-top: var(--spacing-9-sp);
    }

    .mb-0-sp {
        margin-bottom: 0;
    }

    .mb-1-sp {
        margin-bottom: var(--spacing-1);
    }

    .mb-2-sp {
        margin-bottom: var(--spacing-2);
    }

    .mb-3-sp {
        margin-bottom: var(--spacing-3);
    }

    .mb-4-sp {
        margin-bottom: var(--spacing-4-sp);
    }

    .mb-5-sp {
        margin-bottom: var(--spacing-5-sp);
    }

    .mb-6-sp {
        margin-bottom: var(--spacing-6-sp);
    }

    .mb-7-sp {
        margin-bottom: var(--spacing-7-sp);
    }

    .mb-8-sp {
        margin-bottom: var(--spacing-8-sp);
    }

    .mb-9-sp {
        margin-bottom: var(--spacing-9-sp);
    }

    .ml-0-sp {
        margin-left: 0;
    }

    .ml-1-sp {
        margin-left: var(--spacing-1);
    }

    .ml-2-sp {
        margin-left: var(--spacing-2);
    }

    .ml-3-sp {
        margin-left: var(--spacing-3);
    }

    .ml-4-sp {
        margin-left: var(--spacing-4-sp);
    }

    .ml-5-sp {
        margin-left: var(--spacing-5-sp);
    }

    .ml-6-sp {
        margin-left: var(--spacing-6-sp);
    }

    .ml-7-sp {
        margin-left: var(--spacing-7-sp);
    }

    .ml-8-sp {
        margin-left: var(--spacing-8-sp);
    }

    .ml-9-sp {
        margin-left: var(--spacing-9-sp);
    }

    .mr-0-sp {
        margin-right: 0;
    }

    .mr-1-sp {
        margin-right: var(--spacing-1);
    }

    .mr-2-sp {
        margin-right: var(--spacing-2);
    }

    .mr-3-sp {
        margin-right: var(--spacing-3);
    }

    .mr-4-sp {
        margin-right: var(--spacing-4-sp);
    }

    .mr-5-sp {
        margin-right: var(--spacing-5-sp);
    }

    .mr-6-sp {
        margin-right: var(--spacing-6-sp);
    }

    .mr-7-sp {
        margin-right: var(--spacing-7-sp);
    }

    .mr-8-sp {
        margin-right: var(--spacing-8-sp);
    }

    .mr-9-sp {
        margin-right: var(--spacing-9-sp);
    }

    .mx-0-sp {
        margin-left: 0;
        margin-right: 0;
    }

    .mx-1-sp {
        margin-left: var(--spacing-1);
        margin-right: var(--spacing-1);
    }

    .mx-2-sp {
        margin-left: var(--spacing-2);
        margin-right: var(--spacing-2);
    }

    .mx-3-sp {
        margin-left: var(--spacing-3);
        margin-right: var(--spacing-3);
    }

    .mx-4-sp {
        margin-left: var(--spacing-4-sp);
        margin-right: var(--spacing-4-sp);
    }

    .mx-5-sp {
        margin-left: var(--spacing-5-sp);
        margin-right: var(--spacing-5-sp);
    }

    .mx-6-sp {
        margin-left: var(--spacing-6-sp);
        margin-right: var(--spacing-6-sp);
    }

    .mx-7-sp {
        margin-left: var(--spacing-7-sp);
        margin-right: var(--spacing-7-sp);
    }

    .mx-8-sp {
        margin-left: var(--spacing-8-sp);
        margin-right: var(--spacing-8-sp);
    }

    .mx-9-sp {
        margin-left: var(--spacing-9-sp);
        margin-right: var(--spacing-9-sp);
    }

    .my-0-sp {
        margin-top: 0;
        margin-bottom: 0;
    }

    .my-1-sp {
        margin-top: var(--spacing-1);
        margin-bottom: var(--spacing-1);
    }

    .my-2-sp {
        margin-top: var(--spacing-2);
        margin-bottom: var(--spacing-2);
    }

    .my-3-sp {
        margin-top: var(--spacing-3);
        margin-bottom: var(--spacing-3);
    }

    .my-4-sp {
        margin-top: var(--spacing-4-sp);
        margin-bottom: var(--spacing-4-sp);
    }

    .my-5-sp {
        margin-top: var(--spacing-5-sp);
        margin-bottom: var(--spacing-5-sp);
    }

    .my-6-sp {
        margin-top: var(--spacing-6-sp);
        margin-bottom: var(--spacing-6-sp);
    }

    .my-7-sp {
        margin-top: var(--spacing-7-sp);
        margin-bottom: var(--spacing-7-sp);
    }

    .my-8-sp {
        margin-top: var(--spacing-8-sp);
        margin-bottom: var(--spacing-8-sp);
    }

    .my-9-sp {
        margin-top: var(--spacing-9-sp);
        margin-bottom: var(--spacing-9-sp);
    }

    /* Gap - スマホ専用クラス */
    .gap-0-sp {
        gap: 0;
    }

    .gap-1-sp {
        gap: var(--spacing-1);
    }

    .gap-2-sp {
        gap: var(--spacing-2);
    }

    .gap-3-sp {
        gap: var(--spacing-3);
    }

    .gap-4-sp {
        gap: var(--spacing-4-sp);
    }

    .gap-5-sp {
        gap: var(--spacing-5-sp);
    }

    .gap-6-sp {
        gap: var(--spacing-6-sp);
    }

    .gap-7-sp {
        gap: var(--spacing-7-sp);
    }

    .gap-8-sp {
        gap: var(--spacing-8-sp);
    }

    .gap-9-sp {
        gap: var(--spacing-9-sp);
    }

    .gap-x-0-sp {
        column-gap: 0;
    }

    .gap-x-1-sp {
        column-gap: var(--spacing-1);
    }

    .gap-x-2-sp {
        column-gap: var(--spacing-2);
    }

    .gap-x-3-sp {
        column-gap: var(--spacing-3);
    }

    .gap-x-4-sp {
        column-gap: var(--spacing-4-sp);
    }

    .gap-x-5-sp {
        column-gap: var(--spacing-5-sp);
    }

    .gap-x-6-sp {
        column-gap: var(--spacing-6-sp);
    }

    .gap-x-7-sp {
        column-gap: var(--spacing-7-sp);
    }

    .gap-x-8-sp {
        column-gap: var(--spacing-8-sp);
    }

    .gap-x-9-sp {
        column-gap: var(--spacing-9-sp);
    }

    .gap-y-0-sp {
        row-gap: 0;
    }

    .gap-y-1-sp {
        row-gap: var(--spacing-1);
    }

    .gap-y-2-sp {
        row-gap: var(--spacing-2);
    }

    .gap-y-3-sp {
        row-gap: var(--spacing-3);
    }

    .gap-y-4-sp {
        row-gap: var(--spacing-4-sp);
    }

    .gap-y-5-sp {
        row-gap: var(--spacing-5-sp);
    }

    .gap-y-6-sp {
        row-gap: var(--spacing-6-sp);
    }

    .gap-y-7-sp {
        row-gap: var(--spacing-7-sp);
    }

    .gap-y-8-sp {
        row-gap: var(--spacing-8-sp);
    }

    .gap-y-9-sp {
        row-gap: var(--spacing-9-sp);
    }
}

/* ========== Spacing Classes ========== */




/* 親に当てる */
.flex-1 .col {
    width: 100%;
}

.flex-2 .col {
    width: calc(50% - var(--gap-x) * 1 / 2);
}

.flex-3 .col {
    width: calc(33.333% - var(--gap-x) * 2 / 3);
}

.flex-4 .col {
    width: calc(25% - var(--gap-x) * 3 / 4);
}

.flex-5 .col {
    width: calc(20% - var(--gap-x) * 4 / 5);
}

.flex-6 .col {
    width: calc(16.666% - var(--gap-x) * 5 / 6);
}

.flex-7 .col {
    width: calc(14.285% - var(--gap-x) * 6 / 7);
}

.flex-8 .col {
    width: calc(12.5% - var(--gap-x) * 7 / 8);
}

.flex-9 .col {
    width: calc(11.111% - var(--gap-x) * 8 / 9);
}

.flex-10 .col {
    width: calc(10% - var(--gap-x) * 9 / 10);
}

@media screen and (max-width: 768px) {
    .flex-1-sp .col {
        width: 100%;
    }

    .flex-2-sp .col {
        width: calc(50% - var(--gap-x-sp) * 1 / 2);
    }

    .flex-3-sp .col {
        width: calc(33.333% - var(--gap-x-sp) * 2 / 3);
    }

    .flex-4-sp .col {
        width: calc(25% - var(--gap-x-sp) * 3 / 4);
    }

    .flex-5-sp .col {
        width: calc(20% - var(--gap-x-sp) * 4 / 5);
    }

    .flex-6-sp .col {
        width: calc(16.666% - var(--gap-x-sp) * 5 / 6);
    }

    .flex-7-sp .col {
        width: calc(14.285% - var(--gap-x-sp) * 6 / 7);
    }

    .flex-8-sp .col {
        width: calc(12.5% - var(--gap-x-sp) * 7 / 8);
    }

    .flex-9-sp .col {
        width: calc(11.111% - var(--gap-x-sp) * 8 / 9);
    }

    .flex-10-sp .col {
        width: calc(10% - var(--gap-x-sp) * 9 / 10);
    }
}


/* 子要素に当てる */
.flex .col-1 {
    width: 100%;
}

.flex .col-80 {
    width: calc(80% - var(--gap-x) * 1 / 2);
}

.flex .col-70 {
    width: calc(70% - var(--gap-x) * 1 / 2);
}

.flex .col-60 {
    width: calc(60% - var(--gap-x) * 1 / 2);
}

.flex .col-50 {
    width: calc(50% - var(--gap-x) * 1 / 2);
}

.flex .col-40 {
    width: calc(40% - var(--gap-x) * 1 / 2);
}

.flex .col-30 {
    width: calc(30% - var(--gap-x) * 1 / 2);
}

.flex .col-20 {
    width: calc(20% - var(--gap-x) * 1 / 2);
}

.flex .col-10 {
    width: calc(10% - var(--gap-x) * 1 / 2);
}

.flex .col-2 {
    width: calc(50% - var(--gap-x) * 1 / 2);
}

.flex .col-3 {
    width: calc(33.333% - var(--gap-x) * 2 / 3);
}

.flex .col-4 {
    width: calc(25% - var(--gap-x) * 3 / 4);
}

.flex .col-5 {
    width: calc(20% - var(--gap-x) * 4 / 5);
}

.flex .col-6 {
    width: calc(16.666% - var(--gap-x) * 5 / 6);
}

.flex .col-7 {
    width: calc(14.285% - var(--gap-x) * 6 / 7);
}

.flex .col-8 {
    width: calc(12.5% - var(--gap-x) * 7 / 8);
}

.flex .col-9 {
    width: calc(11.111% - var(--gap-x) * 8 / 9);
}

.flex .col-10 {
    width: calc(10% - var(--gap-x) * 9 / 10);
}

@media screen and (max-width: 768px) {
    .flex .col-1-sp {
        width: 100%;
    }

    .flex .col-2-sp {
        width: calc(50% - var(--gap-x-sp) * 1 / 2);
    }

    .flex .col-3-sp {
        width: calc(33.333% - var(--gap-x-sp) * 2 / 3);
    }

    .flex .col-4-sp {
        width: calc(25% - var(--gap-x-sp) * 3 / 4);
    }

    .flex .col-5-sp {
        width: calc(20% - var(--gap-x-sp) * 4 / 5);
    }

    .flex .col-6-sp {
        width: calc(16.666% - var(--gap-x-sp) * 5 / 6);
    }

    .flex .col-7-sp {
        width: calc(14.285% - var(--gap-x-sp) * 6 / 7);
    }

    .flex .col-8-sp {
        width: calc(12.5% - var(--gap-x-sp) * 7 / 8);
    }

    .flex .col-9-sp {
        width: calc(11.111% - var(--gap-x-sp) * 8 / 9);
    }

    .flex .col-10-sp {
        width: calc(10% - var(--gap-x-sp) * 9 / 10);
    }
}

.flex-reverse {
    flex-direction: row-reverse;
}




/* ロゴ設定 */

.logo {
    max-width: var(--logo-max-width);
    width: 100%;
}

@media screen and (max-width: 768px) {
    .header__logo {
        max-width: var(--logo-max-width-sp);
    }
}

img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.sns__link svg {
    width: 2.4rem;
    height: 2.4rem;
    fill: currentColor;
}

a {
    color: var(--text-color);
}

* {
    transition: var(--transition);
}