/*------------------------------------
setting.css
------------------------------------*/

/* google fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&display=swap');
/* google fonts */

/* フォントの設定 */
:root {
    /* ベースのフォント種類 */
    --base-font-family:'Noto Sans JP',
    '游ゴシック',
    YuGothic,
    'ヒラギノ角ゴ Pro',
    'Hiragino Kaku Gothic Pro',
    'メイリオ',
    'Meiryo',
    Osaka,
    'ＭＳ Ｐゴシック',
    'MS PGothic',
    sans-serif;
}

:root{
    /* 英語フォント */
    --english-font-family: 'Noto Sans JP',
    '游ゴシック',
    YuGothic,
    'ヒラギノ角ゴ Pro',
    'Hiragino Kaku Gothic Pro',
    'メイリオ',
    'Meiryo',
    Osaka,
    'ＭＳ Ｐゴシック',
    'MS PGothic',
    sans-serif;
}

:root {
    /* 見出しのフォント種類 */
    --heading-font-family: 'Noto Serif JP',
    '游ゴシック',
    YuGothic,
    'ヒラギノ角ゴ Pro',
    'Hiragino Kaku Gothic Pro',
    'メイリオ',
    'Meiryo',
    Osaka,
    'ＭＳ Ｐゴシック',
    'MS PGothic',
    sans-serif;
}
/* フォントの設定 */

/* フォントサイズ・行間・字間の設定 */
:root {
    /* heading01（特大見出し）- メインビジュアルやトップコピーに使用 */
    --heading01: 6.4rem;
    --heading01-sp: 4rem;
    --heading01-line-height: 125%;
    --heading01-letter-spacing: 0.04em;
    --heading01-weight: 700;

    /* heading02（見出し1）- ページタイトルに使用 */
    --heading02: 4rem;
    --heading02-sp: 3.6rem;
    --heading02-line-height: 130%;
    --heading02-letter-spacing: 0.06em;
    --heading02-weight: 700;

    /* heading03（見出し2）- セクション見出しに使用 */
    --heading03: 3.6rem;
    --heading03-sp: 2.8rem;
    --heading03-line-height: 140%;
    --heading03-letter-spacing: 0.2em;
    --heading03-weight: 600;

    /* heading04（見出し3）- サブタイトルやカードタイトルに使用 */
    --heading04: 2.4rem;
    --heading04-sp: 2rem;
    --heading04-line-height: 160%;
    --heading04-letter-spacing: 0.02em;
    --heading04-weight: 600;

    /* text-lg（本文ラージ）- 本文よりやや大きい標準テキストに使用 */
    --text-lg: 2rem;
    --text-lg-sp: 1.6rem;
    --text-lg-line-height: 180%;
    --text-lg-letter-spacing: 0.1em;
    --text-lg-weight: 600;

    /* text-base（本文）- 本文に使用 */
    --text-base: 1.6rem;
    --text-base-sp: 1.4rem;
    --text-base-line-height: 170%;
    --text-base-letter-spacing: 0.1em;
    --text-base-weight: 400;

    /* caption（小さなテキスト）- 日付、補足、ラベル等に使用 */
    --text-sm: 1.2rem;
    --text-sm-sp: 1.2rem;
    --text-sm-line-height: 150%;
    --text-sm-letter-spacing: 0.08em;
    --text-sm-weight: 400;
/* フォントサイズ・行間・字間の設定 */

    --caption: 1.2rem;
    --caption-sp: 1rem;
    --caption-line-height: 150%;
    --caption-letter-spacing: 0.08em;
    --caption-weight: 400;
}

:root {
    /* フォントの太さ設定 */
    --font-weight-strong: 800;
}

/* 余白の設定 */
:root {
    /* 1 - アイコンと文字の間、非常に狭い隙間 */
    --spacing-1: .8rem;
    /* 2 - 小さな要素同士の間隔（カード内の要素など） */
    --spacing-2: 1.6rem;
    /* 3 - 最もよく使う標準的な余白 【基準】 */
    --spacing-3: 2rem;
    /* 4 - 関連するグループ同士の間隔 */
    --spacing-4: 3.2rem;
    --spacing-4-sp: 2.4rem;
    /* 5 - コンポーネント同士の間隔 */
    --spacing-5: 4rem;
    --spacing-5-sp: 2.8rem;
    /* 6 - セクションの区切り（小） */
    --spacing-6: 4.8rem;
    --spacing-6-sp: 3.6rem;
    /* 7 - セクションの区切り（大） */
    --spacing-7: 7.2rem;
    --spacing-7-sp: 6rem;
    /* 8 - セクションの区切り（超大） */
    --spacing-8: 10rem;
    --spacing-8-sp: 8rem;
}
/* 余白の設定 */

/* カートタイプの余白 */
:root {
    --gap-x: 2.4rem;
    --gap-y: 1.6rem;
    --gap-x-sp: 1.6rem;
    --gap-y-sp: 1.2rem;
}

/* カラー設定 */
:root {
    /* テキストカラーを設定 */
    --text-color: #3F3A37;
    /* リンクテキストのホバー時の色 */
    --link-text-hover: #4C2D87;

    /* サイトの背景色を設定 */
    --site-background: #FFFFFF;

    /* メインカラー背景色と文字色を設定 - */
    --background-primary: #F2F2F2;
    --background-primary-text: #333333;
    --background-primary-hover: #073F9F;
    --background-primary-text-hover: #FFFFFF;

    /* サブカラー背景色と文字色を設定 -  */
    --background-secondary: #573A8E;
    --background-secondary-text: #FFFFFF;
    --background-secondary-hover: #00C3E6;
    --background-secondary-text-hover: #FFFFFF;

    /* ターシャリーカラー背景色と文字色を設定 -  */
    --background-tertiary: #00C3E6;
    --background-tertiary-text: #FFFFFF;
    --background-tertiary-hover: #F7F9FB;
    --background-tertiary-text-hover: #333333;
}
/* カラー設定 */

/* 線の色 */
:root{
    --border-color: #dfdfdf;
}


:root {
    /* コンテンツ幅を設定 */
    --content-width: 122rem;
    --content-width-sp: 100%;

    /* コンテンツ幅余白を設定 */
    --content-padding: 0 2rem;
    --content-padding-sp: 0 1.5rem;
}


/* 記事投稿のサムネイルの設定 */
:root {
    --article-thumbnail-aspect-ratio: 1 / 1;
}

/* ボタンの設定 */
:root{
    /* --button-background: linear-gradient(90deg, #ff701e 0%, #ff1e69 50%, #ffec1e 100%); */
    --button-background: #073F9F;
    --button-text: #FFFFFF;
    --button-border-color: #073F9F;
    --button-border-width: 2px;
    --button-border-radius: 50px;
}

/* ボタンホバー設定 */
:root{
    --button-hover-background: #0000CC;
    --button-hover-text: #FFFFFF;
}


/* ヘッダーの高さ設定 */
:root{
    --header-height: 7rem;
    --header-height-sp: 6rem;
}

/* ロゴ設定 */
:root{
    --logo-max-width: 20rem;
    --logo-max-width-sp: 15rem;
}

/* アニメーションの動きの設定 */
:root {
    --transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

/*------------------------------------
base.css
------------------------------------*/

* {
    box-sizing: border-box;
}



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

html , body{
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 30px);
}

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

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

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

/* 背景色 */
.background-primary{
    background: var(--background-primary);
    color: var(--background-primary-text);
}

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

.background-tertiary{
    background: var(--background-tertiary);
    color: var(--background-tertiary-text);
}

a {
    transition: all 0.3s ease;
}

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


/* フォントサイズ・行間・字間クラス */
.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);
}


.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 {
        font-size: var(--text-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);
        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);
    }
}
/* フォントサイズ・行間・字間クラス */

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

/* フレックス */
.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-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);
    }
}

/* ========== 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); }

/* 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); }

/* 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); }

/* 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); }

/* 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); }

/* 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); }

/* 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); }

/* 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); }

/* 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); }

/* 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); }

/* 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); }

/* 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); }

/* 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-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); }

/* 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 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 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); }

/* スマホ用余白（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); }
    
    .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); }
    
    .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); }
    
    .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); }
    
    .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); }
    
    .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); }
    
    .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); }
    
    /* 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); }
    
    .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); }
    
    .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); }
    
    .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); }
    
    .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); }
    
    .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); }
    
    .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); }
    
    /* 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-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-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); }
}
/* ========== Spacing Classes ========== */


@media screen and (max-width: 768px) {
    /* Padding - スマホ用サイズに変更 */
    .p-0-sp { padding: var(--spacing-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); }
    
    .pt-0-sp { padding-top: var(--spacing-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); }
    
    .pb-0-sp { padding-bottom: var(--spacing-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); }
    
    .pl-0-sp { padding-left: var(--spacing-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); }
    
    .pr-0-sp { padding-right: var(--spacing-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); }
    
    .px-0-sp { padding-left: var(--spacing-0); padding-right: var(--spacing-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); }
    
    .py-0-sp { padding-top: var(--spacing-0); padding-bottom: var(--spacing-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); }
    
    /* Margin - スマホ用サイズに変更 */
    .m-0-sp { margin: var(--spacing-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); }
    
    .mt-0-sp { margin-top: var(--spacing-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); }
    
    .mb-0-sp { margin-bottom: var(--spacing-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); }
    
    .ml-0-sp { margin-left: var(--spacing-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); }
    
    .mr-0-sp { margin-right: var(--spacing-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); }
    
    .mx-0-sp { margin-left: var(--spacing-0); margin-right: var(--spacing-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); }
    
    .my-0-sp { margin-top: var(--spacing-0); margin-bottom: var(--spacing-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); }
    
    /* Gap - スマホ専用クラス */
    .gap-0-sp { gap: var(--spacing-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-x-0-sp { column-gap: var(--spacing-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-y-0-sp { row-gap: var(--spacing-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); }
}
/* ========== 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) * 1 / 2);
    }
    .flex-3-sp .col{
        width: calc(33.333% - var(--gap-x) * 2 / 3);
    }
    .flex-4-sp .col{
        width: calc(25% - var(--gap-x) * 3 / 4);
    }
    .flex-5-sp .col{
        width: calc(20% - var(--gap-x) * 4 / 5);
    }
    .flex-6-sp .col{
        width: calc(16.666% - var(--gap-x) * 5 / 6);
    }
    .flex-7-sp .col{
        width: calc(14.285% - var(--gap-x) * 6 / 7);
    }
    .flex-8-sp .col{
        width: calc(12.5% - var(--gap-x) * 7 / 8);
    }
    .flex-9-sp .col{
        width: calc(11.111% - var(--gap-x) * 8 / 9);
    }
    .flex-10-sp .col{
        width: calc(10% - var(--gap-x) * 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) * 1 / 2);
    }
    
    .flex .col-3-sp{
        width: calc(33.333% - var(--gap-x) * 2 / 3);
    }
    
    .flex .col-4-sp{
        width: calc(25% - var(--gap-x) * 3 / 4);
    }
    
    .flex .col-5-sp{
        width: calc(20% - var(--gap-x) * 4 / 5);
    }
    
    .flex .col-6-sp{
        width: calc(16.666% - var(--gap-x) * 5 / 6);
    }
    
    .flex .col-7-sp{
        width: calc(14.285% - var(--gap-x) * 6 / 7);
    }
    
    .flex .col-8-sp{
        width: calc(12.5% - var(--gap-x) * 7 / 8);
    }
    
    .flex .col-9-sp{
        width: calc(11.111% - var(--gap-x) * 8 / 9);
    }
    .flex .col-10-sp {
        width: calc(10% - var(--gap-x) * 9 / 10);
    }
}


/* 記事サムネイル */
.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: 2rem;
    background: var(--button-background);
    color: var(--button-text);
    border-radius: var(--button-border-radius);
    transition: var(--button-transition);
    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);
}

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

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

/* ロゴ設定 */

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

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

/*------------------------------------
style.css
------------------------------------*/


/* 共通 */
body , html {
    scroll-behavior: smooth;
}

.title {
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 700;
    font-size: 4rem;
    line-height: 180%;
    letter-spacing: normal;
    text-align: center;
    margin-bottom: 2rem;
    background-color: transparent;
}

#main h2.title {
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 700;
    font-size: 4rem;
    line-height: 180%;
    letter-spacing: normal;
    text-align: center;
    margin-bottom: 2rem;
    background-color: transparent;
}

section {
    margin-bottom: 100px;
}

@media screen and (max-width: 768px) {
    .title {
        font-size: 2.4rem;
        margin-bottom: 1.5rem;
    }
    
    section {
        margin-bottom: 6rem;
    }
}

body {
    background: #FCFAFF;
}

header {
    height: 11rem;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header__container {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.header__left {
    max-width: 33.6rem;
    width: 100%;
}

.header__right {
    display: flex;
    height: 100%;
}

.header__nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-right: 4rem;
}

.header__nav-link {
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 100%;
    letter-spacing: normal;
}

.header__entry a {
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 180%;
    letter-spacing: normal;
    display: inline-block;
    background: #3F3A37;
    color: #fff;
    height: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
}

.header__menu {
    display: none;
}

@media (max-width: 991px) {
    header {
        height: 10rem;
    }
    .header__right {
        display: none;
    }

    .header__left {
        max-width: 12.8rem;
    }

    /* メニューの三本線（ハンバーガーメニュー） */
    .header__menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 6rem;
        height: 4.2rem;
        cursor: pointer;
        gap: 0.9rem;
    }

    .header__menu span {
        display: block;
        width: 5rem;
        height: 0.5rem;
        background: #3F3A37;
        transition: all 0.3s;
    }

    /* 不要なtransformは消して、等間隔の三本線 */

    /* ハンバーガーメニューのアニメーション（アクティブ時） */
    .header__menu.active span:nth-child(1) {
        transform: translateY(1.4rem) rotate(45deg);
    }

    .header__menu.active span:nth-child(2) {
        opacity: 0;
    }

    .header__menu.active span:nth-child(3) {
        transform: translateY(-1.4rem) rotate(-45deg);
    }
}

/* ドロワーメニュー */
.drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    pointer-events: none;
    visibility: hidden;
}

.drawer.active {
    pointer-events: auto;
    visibility: visible;
}

.drawer__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.drawer.active .drawer__overlay {
    opacity: 1;
}

.drawer__content {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100%;
    background: #fff;
    padding: 12rem 3rem 3rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.drawer.active .drawer__content {
    transform: translateX(0);
}

.drawer__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.drawer__nav-item {
    border-bottom: 1px solid #E8E0F4;
}

.drawer__nav-link {
    display: block;
    padding: 2rem 1rem;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1;
    color: #3F3A37;
    transition: background 0.3s ease, color 0.3s ease;
}

.drawer__nav-link:hover {
    background: #F2EEF9;
    color: #4C2D87;
}

.drawer__entry {
    margin-top: 3rem;
}

.drawer__entry a {
    display: block;
    background: #4C2D87;
    color: #fff;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1;
    text-align: center;
    padding: 2rem;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.drawer__entry a:hover {
    background: #3a2268;
}

.about__content {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 7.8rem;
    position: relative;
    padding-top: 5.7rem;
    padding-bottom: 6.3rem;
}

.about__content::before {
    position: absolute;
    content: "";
    background-image: url('/image.jsp?id=54699');
    max-width: 726px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}


.about__left {
    max-width: 43.3rem;
}

.about__post {
    font-weight: 500;
    font-size: 20px;
    line-height: 180%;
    letter-spacing: normal;
    text-align: center;
    margin-top: 2rem;

}

.about__name {
    font-weight: 500;
    font-size: 20px;
    line-height: 180%;
    letter-spacing: normal;
    text-align: center;

}

.about__right {
    max-width: 54.1rem;
    width: 100%;
}

.about__title {
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 180%;
    letter-spacing: normal;
}

.about__text {
    font-weight: 400;
    font-size: 2rem;
    line-height: 180%;
    letter-spacing: 0.03em;
    margin-top: 2rem;

}

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

    .about__content {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
        padding: 0;
    }

    .about__content::before {
        display: none;
    }
    
    .about__left {
        max-width: 100%;
    }
    
    .about__post {
        font-size: 1.4rem;
        margin-top: 1.5rem;
    }
    
    .about__name {
        font-size: 1.4rem;
    }
    
    .about__right {
        max-width: 100%;
    }
    
    .about__title {
        font-size: 2.4rem;
        text-align: center;
    }
    
    .about__text {
        font-size: 1.4rem;
        margin-top: 1.5rem;
        position: relative;
    }

    .about__text::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-image: url('/image.jsp?id=54697');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
    }
}

.merit {
    background-image: url('/image.jsp?id=54677');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 6rem 0;
}

.merit__items {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.merit__item {
    background: #F2EEF9;
    display: flex;
    gap: 5rem;
    padding: 4rem;
}

.merit__item:nth-last-of-type(2) {
    background: #DED7EB;
}

.merit__item:nth-last-of-type(3) {
    background: #CBC1DE;
}

.merit .title {
color: #fff;
}

.merit__title {
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 180%;
    letter-spacing: normal;
    flex-shrink: 0;
    max-width: 35rem;
    width: 100%;
    display: flex;
    align-items: center;
}

.merit__text {
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 180%;
    letter-spacing: normal;

}

.merit__btn {
    margin-top: 8rem;
    text-align: center;
}

.merit__btn a{
    background: #fff;
    display: inline-block;
    font-family: Noto Sans JP;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 180%;
    letter-spacing: normal;
    color: #4C2D87;
    max-width: 32.4rem;
    width: 100%;
    text-align: center;
    padding: 2rem 0;
    border-radius: 10px;
}

@media screen and (max-width: 768px) {
    .merit {
        padding: 4rem 0;
        background-image: url('/image.jsp?id=54678');
    }
    
    .merit__items {
        gap: 1.5rem;
    }
    
    .merit__item {
        flex-direction: column;
        gap: 1.5rem;
        padding: 2rem;
    }
    
    .merit__title {
        font-size: 2rem;
        max-width: 100%;
        justify-content: center;
        text-align: center;
    }
    
    .merit__text {
        font-size: 1.4rem;
    }
    
    .merit__btn {
        margin-top: 4rem;
    }
    
    .merit__btn a {
        font-size: 1.6rem;
        max-width: 100%;
        padding: 1.5rem 2rem;
    }
}

.interview__items {
    display: flex;
    flex-wrap: wrap;
    gap: 6.4rem;
}

.interview__item{
    width: calc(33.33333% - 6.4rem * 2 / 3);
    cursor: pointer;
}

.interview__img {
    position: relative;
    border-radius: 10px;
}

.interview__img img {
    display: block;
    border-radius: 10px;
}

.interview__tag {
    display: inline-block;
    background: #4C2D87;
    color: #fff;
    font-family: Noto Sans JP;
    font-weight: 700;
    font-size: 2.1rem;
    line-height: 100%;
    letter-spacing: normal;
    position: absolute;
    bottom: 2.1rem;
    left: 2.1rem;
    padding: 1rem 1.5rem;
}

.interview__name {
    font-weight: 500;
    font-size: 2.12rem;
    line-height: 140%;
    margin-top: 2.5rem;
}

.interview__description {
    font-weight: 700;
    font-size: 2.52rem;
    line-height: 140%;
    margin-top: 2.5rem;
}

.interview__btnWrap {
    text-align: center;
    margin-top: 2.5rem;

}

.interview__btn {
    font-weight: 700;
    font-size: 2rem;
    line-height: 140%;
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
    .interview__items {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 2rem;
        padding-bottom: 1.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #4C2D87 #E8E0F4;
    }
    
    .interview__items::-webkit-scrollbar {
        height: 8px;
    }
    
    .interview__items::-webkit-scrollbar-track {
        background: #E8E0F4;
        border-radius: 10px;
    }
    
    .interview__items::-webkit-scrollbar-thumb {
        background: #4C2D87;
        border-radius: 10px;
    }
    
    .interview__items::-webkit-scrollbar-thumb:hover {
        background: #3a2268;
    }
    
    .interview__item {
        flex-shrink: 0;
        width: 80%;
    }
    
    .interview__tag {
        font-size: 1.4rem;
        bottom: 1.5rem;
        left: 1.5rem;
        padding: 0.8rem 1.2rem;
    }
    
    .interview__name {
        font-size: 1.4rem;
        margin-top: 1.5rem;
    }
    
    .interview__description {
        font-size: 1.6rem;
        margin-top: 1rem;
    }
    
    .interview__btnWrap {
        margin-top: 1.5rem;
    }
    
    .interview__btn {
        font-size: 1.4rem;
    }
}

.flow__content {
    display: flex;
    gap: 2.1rem;
}

.flow__left {
    max-width: 42%;
    width: 100%;
}

.flow__left img {
    display: block;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.flow__right {
    background: #fff;
    padding: 5rem;
    max-width: 47.5%;
    width: 100%;
}

.flow__item {
    display: flex;
    gap: 3rem;
}

.flow__items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    height: 100%;
}

.flow__time {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 100%;
    letter-spacing: 0.03em;
    min-width: 12rem;
    flex-shrink: 0;
}

.flow__title {
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 100%;
    letter-spacing: 0.03em;
    color: #4C2D87;
}

.flow__text {
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 100%;
    letter-spacing: 0.03em;
    margin-top: 1rem;
}

@media screen and (max-width: 768px) {
    .flow__content {
        flex-direction: column;
        gap: 0;
    }

    .flow__left {
        max-width: 100%;
    }

    .flow__left img {
        border-radius: 0;
    }

    .flow__right {
        max-width: 100%;
        padding: 2rem;
    }

    .flow__item {
        gap: 1.5rem;
    }

    .flow__items {
        gap: 1.5rem;
    }

    .flow__time {
        font-size: 1.4rem;
        min-width: 8rem;
        gap: 0.5rem;
    }

    .flow__title {
        font-size: 1.4rem;
    }

    .flow__text {
        font-size: 1.2rem;
        margin-top: 0.5rem;
        line-height: 140%;
    }
}

.training__items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.training__item {
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 180%;
    letter-spacing: normal;
    background: #DED7EB;
    text-align: center;
    padding: 4rem 2rem;

}

.work__bg {
    position: relative;
    padding: 10rem 0;
    background: #CBC1DE;
    z-index: 2;
}

.work__bg::before {
    content: "";
    background-image: url('/image.jsp?id=54645');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    width: 100%;
    aspect-ratio: 7680 / 3000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}


.work__bg::after {
    content: "";
    background-image: url('/image.jsp?id=54645');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    width: 100%;
    aspect-ratio: 7680 / 3000;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    rotate: 180deg;
}

.work__subtitle {
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 180%;
    letter-spacing: normal;
    margin-bottom: 2rem;
}

#main h3.work__subtitle {
    margin: 0;
    padding: 0;
    width: auto;
    max-width: none;
    border: none;
    background-color: transparent;
    color: var(--text-color);
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 180%;
    letter-spacing: normal;
    margin-bottom: 2rem;
}

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

/* タブレット対応 */
@media screen and (max-width: 1024px) {
    .training__items {
        gap: 16px;
    }

    .training__item {
        font-size: 2.8rem;
        padding: 3rem 1.5rem;
    }

    .work__subtitle {
        font-size: 2.8rem;
        margin-bottom: 1.5rem;
    }

    #main h3.work__subtitle {
        font-size: 2.8rem;
        margin-bottom: 1.5rem;
    }

    .work__bg {
        padding: 5rem 0;
    }

    .work__bg::before {
        aspect-ratio: 375 / 500;
    }
    
    
    .work__bg::after {
        aspect-ratio: 375 / 500;
    }
}

/* スマートフォン対応 */
@media screen and (max-width: 768px) {
    .training__items {
        gap: 12px;
    }

    .training__item {
        font-size: 2.2rem;
        line-height: 160%;
        padding: 2.5rem 1.2rem;
    }

    .work__subtitle {
        font-size: 2.2rem;
        line-height: 160%;
        margin-bottom: 1.2rem;
    }

    #main h3.work__subtitle {
        font-size: 2.2rem;
        line-height: 160%;
        margin-bottom: 1.2rem;
    }
}

/* 小型スマートフォン対応 */
@media screen and (max-width: 480px) {
    .training__items {
        gap: 10px;
    }

    .training__item {
        font-size: 1.8rem;
        line-height: 150%;
        padding: 2rem 1rem;
    }

    .work__subtitle {
        font-size: 1.8rem;
        line-height: 150%;
        margin-bottom: 1rem;
    }

    #main h3.work__subtitle {
        font-size: 1.8rem;
        line-height: 150%;
        margin-bottom: 1rem;
    }
}


.career-typeB .career__items{
    display: flex;
    align-items: end;
}

.career-typeB .career__item{
    width: 25%;
}

.career__title {
    font-size: 20px;
}

.career__subtitle{
    text-align: center;
}

/* 透明度の変数を定義 */
.career-typeB {
    --career-opacity-1: 20%;
    --career-opacity-2: 40%;
    --career-opacity-3: 60%;
    --career-opacity-4: 80%;
    --career-opacity-5: 100%;
}

.career-typeB .career__item:nth-of-type(1) .career__content{
    background: #D3CBE1;
    height: 6rem;
}
.career-typeB .career__item:nth-of-type(2) .career__content{
    background: #B5A8CD;
    height: 10rem;
}
.career-typeB .career__item:nth-of-type(3) .career__content{
    background: #9786BA;
    height: 14rem;
    color: #fff;
}
.career-typeB .career__item:nth-of-type(4) .career__content{
    background: #7760A4;
    height: 20rem;
    color: #fff;
}
.career-typeB .career__item:nth-of-type(5) .career__content{
    background: #573A8E;
    height: 28rem;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .career-typeB .career__items{
        flex-direction: column;
        align-items: start;
        gap: var(--spacing-3);
    }
    .career-typeB .career__item{
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: var(--spacing-1);
    }
    .career__content{
        height: 2rem;
    }
    .career-typeB .career__item:nth-of-type(1) .career__content{
        width: 6rem;
        height: auto;
    }
    .career-typeB .career__item:nth-of-type(2) .career__content{
        width: 10rem;
        height: auto;
    }
    .career-typeB .career__item:nth-of-type(3) .career__content{
        width: 14rem;
        height: auto;
    }
    .career-typeB .career__item:nth-of-type(4) .career__content{
        width: 20rem;
        height: auto;
    }
    .career-typeB .career__item:nth-of-type(5) .career__content{
        width: 28rem;
        height: auto;
    }
    .career__subtitle{
        display: none;
    }
    .career__title {
        font-size: 16px;
    }
}

.number__items {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

.number__item {
    width: calc(50% - 2rem * 1 / 2);
    background: #4C2D87;
    color: #fff;
    padding: 2rem 6rem;
    border-radius: 10px;
    display: flex;
    gap: 3.5rem;
}

.number__heading {
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 180%;
    letter-spacing: normal;

}

.number__left {
    max-width: 20rem;
}

.number__right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.number__count {
    font-weight: 700;
    font-size: 7rem;
    line-height: 100%;
    letter-spacing: normal;
    display: flex;

}

.number__small {
    font-weight: 700;
    font-size: 4.8rem;
    line-height: 100%;
    letter-spacing: normal;
    display: flex;
    align-items: end;

}

/* タブレット対応 */
@media screen and (max-width: 1024px) {
    .number__items {
        gap: 1rem 1.5rem;
    }

    .number__item {
        padding: 1.5rem 3rem;
        gap: 2rem;
    }

    .number__heading {
        font-size: 2.4rem;
    }

    .number__left {
        max-width: 10rem;
        margin: 0 auto;
    }

    .number__count {
        font-size: 5rem;
    }

    .number__small {
        font-size: 3.2rem;
    }
}

/* スマートフォン対応 */
@media screen and (max-width: 768px) {
    .number__items {
        gap: 1rem;
    }

    .number__item {
        width: 100%;
        padding: 1.5rem 2rem;
        gap: 1.5rem;
    }

    .number__heading {
        font-size: 2rem;
        line-height: 160%;
    }

    .number__left {
        max-width: 10rem;
    }

    .number__count {
        font-size: 4rem;
    }

    .number__small {
        font-size: 2.4rem;
    }
}

/* 小型スマートフォン対応 */
@media screen and (max-width: 480px) {
    .number__item {
        flex-direction: column;
        padding: 1.2rem 1.5rem;
        gap: 0.8rem;
        text-align: center;
    }

    .number__heading {
        font-size: 1.6rem;
    }

    .number__left {
        max-width: 6rem;
    }

    .number__right {
        align-items: center;
    }

    .number__count {
        font-size: 3.2rem;
    }

    .number__small {
        font-size: 2rem;
    }
}

.benefits__items {
    display: flex;
    flex-wrap: wrap;
    align-items: self-start;
    gap: 6rem 4rem;
    position: relative;
    z-index: 2;
}

.benefits__item {
    width: calc(33.333333% - 40px * 2 / 3);
    background: #fff;
    padding: 3rem;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.benefits__item:hover {
    box-shadow: 0 4px 12px rgba(76, 45, 135, 0.15);
}

/* benefits__bodyは初期状態で非表示 */
.benefits__body {
    display: none;
    font-size: 1.2rem;
    line-height: 160%;
}

.benefits__head {
    border-bottom: 2px solid #CBC1DE;
    padding-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.benefits__head img {
    max-width: 6.5rem;
    width: 100%;
}

.benefits__title {
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 16px;
    letter-spacing: normal;
    color: #4C2D87;

}

.benefits__btn {
    width: 4.4rem;
    height: 4.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 2px solid #CBC1DE;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(50%);

}

.benefits__btn img {
    display: block;
    width: 14px;
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}

@media (max-width: 768px) {

    .benefits__items {
        flex-direction: column;
        gap: 4rem;
    }
    
    .benefits__item {
        width: 100%;
        padding: 2rem;
        border-radius: 8px;
    }
    
    .benefits__head {
        padding-bottom: 1.5rem;
        gap: 0.8rem;
        margin-bottom: 1.5rem;
    }
    
    .benefits__head img {
        max-width: 5rem;
    }
    
    .benefits__title {
        font-size: 1.4rem;
        line-height: 140%;
    }
    
    .benefits__btn {
        width: 3.6rem;
        height: 3.6rem;
    }
    
    .benefits__btn img {
        width: 12px;
        transform: rotate(180deg);
    }

    .benefits__body {
        font-size: 1.4rem;
        line-height: 160%;
    }
}

/* アクティブ時にボタンの矢印を元に戻す */
.benefits__item.active .benefits__btn img {
    transform: rotate(0deg);
}

/* テーブルのスタイル */
.table__content {
    width: 100%;
    border-collapse: collapse;
}

.table__header {
    width: 30%;
    text-align: left;
    vertical-align: middle;
    font-weight: 400;
}

.table__data {
    width: 70%;
    text-align: left;
    vertical-align: middle;
}


/* スマホ対応（768px以下） */
@media screen and (max-width: 768px) {
    .table__item {
        display: flex;
        flex-direction: column;
    }

    .table__header{
        width: 100%;
    }

    .table__data{
        width: 100%;
    }
}


.table-typeA .table__content {
    border: 1px solid #D9D9D9;
}

.table-typeA .table__item {
    border-bottom: 1px solid #D9D9D9;
    transition: background-color 0.3s ease;
}

.table-typeA .table__item:last-child {
    border-bottom: none;
}

.table-typeA .table__header {
    background: var(--background-secondary);
    color: var(--background-secondary-text);
}

.company__content {
    display: flex;
    gap: 2rem;
}

.table__img {
    max-width: 45rem;
    width: 100%;
}

.table-typeD .table__content {
    border: 1px solid #D9D9D9;
}

.table-typeD .table__item {
    border-bottom: 1px dotted #D9D9D9;
    transition: background-color 0.3s ease;
}

.table-typeD .table__item:last-child {
    border-bottom: none;
}

@media (max-width: 768px) {

    .table-typeA .table__header,
    .table-typeD .table__header {
        font-size: 1.4rem;
        padding: 1rem;
    }

    .table-typeA .table__data,
    .table-typeD .table__data {
        font-size: 1.4rem;
        padding: 1rem;
        line-height: 160%;
    }

    .company__content {
        flex-direction: column;
        gap: 1.5rem;
    }

    .table__img {
        max-width: 100%;
        order: -1;
    }

    .table__img img {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }
}

/* オプション */
@media screen and (max-width: 768px) {
    .table-sp-nowrap .table__item {
        flex-direction: row;
    }
    .table-sp-nowrap .table__header{
        padding: var(--spacing-2) var(--spacing-2);
        font-size: 14px;
        width: 35%;
    }
    .table-sp-nowrap .table__data{
        padding: var(--spacing-2) var(--spacing-2);
        font-size: 14px;
        width: 65%;
    }
}

.job {
    background-image: url('/image.jsp?id=54701');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 10rem 0;
}

.job .table__content {
    background: #fff;
}

.table__subtitle {
    background: #7760A4;
    color: #fff;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 100%;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 2rem;

}

.job .title {
    color: #fff;
}

@media (max-width: 768px) {
    .job {
        padding: 5rem 0;
    }
    
    .job .table__content {
        border-radius: 8px;
        overflow: hidden;
    }
    
    .table__subtitle {
        font-size: 2rem;
        padding: 1.2rem 1rem;
        letter-spacing: 0.03em;
    }

    .job .title {
        font-size: 2.4rem;
        margin-bottom: 2rem;
    }
}

/* 共通 */
.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question{
    cursor: pointer;
    list-style: none;
    position: relative;
    display: flex;
    color: #4C2D87;
    font-weight: 500;
}

.faq__question-text{
    display: block;
    width: 100%;
    margin-right: .5rem;
}

.faq__question-icon{
    display: inline-block;
}

.faq__answer-icon{
    display: inline-block;
}

.toggle-icon-arrow {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.faq__item[open] .toggle-icon-arrow {
    transform: rotate(180deg);
}


.faq-typeA .faq__item{
    border: 2px solid #4C2D87;
    border-radius: 10px;
    background: #fff;
}

.faq-typeA .faq__item[open] .faq__answer {
    border-top: 2px solid #4C2D87;
}

@media (max-width: 768px) {
    .faq__question {
        font-size: 1.4rem;
        padding: 1.2rem 1rem;
    }

    .faq__question-text {
        font-size: 1.4rem;
        line-height: 150%;
    }

    .faq__question-icon,
    .faq__answer-icon {
        font-size: 1.6rem;
        min-width: 2.4rem;
    }

    .toggle-icon-arrow {
        width: 2rem;
        height: 2rem;
    }

    .toggle-icon-arrow img {
        width: 1.2rem;
        height: auto;
    }

    .faq-typeA .faq__item {
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    .faq__answer {
        padding: 1.2rem 1rem;
        font-size: 1.4rem;
        line-height: 160%;
    }
}

.contact {
    margin-bottom: 0;
}

.contact__content {
    display: flex;
}

.contact__left {
    width: 50%;
}

.contact__left img {
    display: block;
}

.contact__right {
    width: 50%;
    background: #4C2D87;
    color: #fff;
    font-weight: 700;
    font-size: 4.8rem;
    line-height: 180%;
    letter-spacing: normal;
    display: flex;
    justify-content: center;
    align-items: center;

}

.contact__right .title {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .contact {
        margin-bottom: 0;
    }
    
    .contact__content {
        flex-direction: column;
    }
    
    .contact__left {
        width: 100%;
    }
    
    .contact__left img {
        width: 100%;
        height: auto;
    }
    
    .contact__right {
        width: 100%;
        padding: 3rem 2rem;
        font-size: 2.4rem;
        line-height: 160%;
    }
}

.footer {
    background: #fff;
    padding-top: 3rem;
}

.footer__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.footer__left {
    max-width: 35.4rem;
    width: 100%;
}

.footer__nav {
    display: flex;
    gap: 3rem;
}

.footer__nav a {
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 100%;
    letter-spacing: normal;

}

.footer__corp {
    text-align: right;
    display: block;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: normal;
    margin-top: 2rem;

}

.footer__copy {
    background: #4C2D87;
    color: #fff;
    font-family: Zen Kaku Gothic Antique;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 100%;
    letter-spacing: normal;
    text-align: center;
    padding: 1rem;

}

@media (max-width: 768px) {
    
    .footer__content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .footer__left {
        max-width: 80%;
        margin-right: auto;
    }

    .footer__nav {
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
        width: 100%;
    }

    .footer__nav a {
        font-size: 1.4rem;
        text-align: left;
        width: 100%;
        padding: 1.2rem 0;
        border-bottom: 1px solid #e0e0e0;
        display: block;
        margin: 0;
    }
    .footer__nav a:last-child {
        border-bottom: none;
    }

    .footer__corp {
        text-align: center;
        font-size: 1.2rem;
        margin-top: 1.5rem;
    }

    .footer__copy {
        font-size: 1.4rem;
        padding: 0.8rem;
    }

    .footer__rignt {
        width: 100%;
    }

    .footer__nav li {
        width: 100%;
        border-bottom: 1px solid #e0e0e0;
    }

    .footer__nav li:first-child {
        border-top: 1px solid #e0e0e0;
    }

    .footer__nav li a {
        display: block;
        width: 100%;
    }

    .footer__corp {
        text-align: left;
    }
}

.scroll-typeA .scroll__content{
    overflow: hidden;
    display: flex;
}

.scroll-typeA .scroll__items{
    animation: scroll-left 40s infinite linear .5s both;
    display: flex;
}

.scroll-typeA .scroll__content:nth-of-type(2) .scroll__items{
    animation: scroll-right 40s infinite linear .5s both;
}

.scroll-typeA .scroll__item{
    width: calc(100vw / 4);
}

.scroll-typeA .scroll__item:nth-of-type(even){
  margin-bottom: 1rem;
}

@keyframes scroll-left {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }

   @keyframes scroll-right {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  } 

@media screen and (max-width: 768px) {
    .scroll-typeA .scroll__item{
        width: calc(100vw / 2);
    }
}

.entry .merit__btn a {
    background: #4C2D87;
    color: #fff;
}

.entry .merit__btn {
    margin-top: 0;
}

.entry__title {
    font-weight: 500;
    font-size: 24px;
    line-height: 180%;
    letter-spacing: normal;
    color: #4C2D87;
    text-align: center;

}

.flow02__items {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
}

.flow02__item {
    width: calc(16.666666% - 4rem * 5 / 6);
    border: 5px solid #EAE2F9;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    text-align: center;
    padding: 5rem 0;
    background: #fff;
    position: relative;
}

.flow02__arrow {
    position: absolute;
    bottom: 50%;
    right: -1.5rem;
    transform: translateX(100%) translateY(50%);
    display: flex;
}

.flow02__arrow svg {
    width: 2.3rem;
    height: 2rem;
}


.flow02__item:nth-of-type(2) {
    border-color: #D3CBE1;
}
.flow02__item:nth-of-type(3) {
    border-color: #B5A8CD;
}
.flow02__item:nth-of-type(4) {
    border-color: #9786BA;
}
.flow02__item:nth-of-type(5) {
    border-color: #7760A4;
}
.flow02__item:nth-of-type(6) {
    border-color: #573A8E;
    background: #573A8E;
    color: #fff;
}

.flow02__title {
    font-weight: 500;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.05em;
}

.flow02__text {
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: 0.05em;
}




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

.flow02__item {
    width: 100%;
    padding: 2.5rem 1.5rem;
    gap: 1.5rem;
}

.flow02__arrow {
    bottom: -1.2rem;
    right: 50%;
    transform: translateX(50%) translateY(100%) rotate(90deg);
}

.flow02__item:nth-of-type(2) .flow02__arrow,
.flow02__item:nth-of-type(4) .flow02__arrow {
    display: flex;
}

.flow02__title {
    font-size: 1.5rem;
}

.flow02__text {
    font-size: 1.4rem;
}
}

/* ============================
   モーダル
============================ */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

.modal__content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    max-width: 1200px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal.active .modal__content {
    transform: translateY(0);
}

.modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: #333;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s ease, transform 0.3s ease;
}

.modal__close:hover {
    background: #555;
    transform: rotate(90deg);
}

.modal__close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: #fff;
}

.modal__close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.modal__inner {
    padding: 6rem 5rem;
}


.modal__header {
    display: flex;
    gap: 5rem;
}

.modal__img {
    max-width: 51.6rem;
    width: 100%;
}

#main img.modal__img {
    max-width: 51.6rem;
    width: 100%;
}

.modal__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal__heading {
    font-family: 'Zen Kaku Gothic Antique', sans-serif;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 140%;
    letter-spacing: normal;
    color: #4C2D87;
}

.modal__name {
    font-weight: 500;
    font-size: 2.1rem;
    line-height: 140%;
    letter-spacing: normal;
    margin-top: 5rem;

}

.modal__body {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.modal__title {
    font-weight: 500;
    font-size: 2.4rem;
    line-height: 140%;
    letter-spacing: normal;
    color: #4C2D87;
}

#main h4.modal__title {
    font-weight: 500;
    font-size: 2.4rem;
    line-height: 140%;
    letter-spacing: normal;
    color: #4C2D87;
    margin: 0;
}

.modal__text {
    font-weight: 400;
    font-size: 2rem;
    line-height: 160%;
    letter-spacing: 0.04em;
    margin-top: 2.5rem;
}

#main p.modal__text {
    font-weight: 400;
    font-size: 2rem;
    line-height: 160%;
    letter-spacing: 0.04em;
    margin-top: 2.5rem;
}

@media (max-width: 768px) {
    .modal__content {
        width: 95%;
        max-width: none;
        max-height: 90vh;
        border-radius: 12px;
    }
    
    .modal__close {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
    }
    
    .modal__close span {
        width: 16px;
    }
    
    .modal__inner {
        padding: 3rem 2rem;
    }
    
    .modal__header {
        flex-direction: column;
        gap: 2rem;
    }
    
    .modal__img {
        max-width: 100%;
    }
    
    .modal__info {
        text-align: center;
    }
    
    .modal__heading {
        font-size: 1.8rem;
    }
    
    .modal__name {
        font-size: 1.6rem;
        margin-top: 2rem;
    }
    
    .modal__body {
        margin-top: 2.5rem;
        gap: 2.5rem;
    }
    
    #main h4.modal__title {
        font-size: 1.8rem;
    }
    
    #main p.modal__text {
        font-size: 1.4rem;
        margin-top: 1.5rem;
    }
}

.mv {
    position: relative;
}

.mv__left {
    position: absolute;
    max-width: calc((485 / 1440) * 100vw);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.mv__right {
    width: 69.17%;
    margin-left: auto;
    position: relative;
}

.mv__scroll {
    position: absolute;
    left: 0;
    transform: translateX(-100%);
    bottom: 0;
    height: 17.5rem;
}

.mv__scroll img {
    height: 100%;
}

@media screen and (max-width: 768px) {
    .mv {
        display: flex;
        flex-direction: column-reverse;
    }
    .mv__left {
        position: relative;
        transform: translateY(0%);
        max-width: 100%;
        margin-top: -5rem;
    }

    .mv__left picture {
        width: 80%;
        display: block;
    }
    
    .mv__right {
        width: 100%;
    }
    
    .mv__scroll {
       display: none;
    }
    
    .mv__scroll img {
        height: 100%;
    }

    .mv__btn {
        margin-top: 6rem!important;
    }

    .entry__title {
        font-size: 2rem;
    }
}

/* MVスライドショー */
.mv-slider {
    overflow: hidden;
}

.mv-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

.mv-slide:first-child {
    position: relative;
}

.mv-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.mv-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.mv__btn {
    margin-top: 10rem;
}

.mv__btn .merit__btn {
    margin-top: 0;
}

.mv__btn .merit__btn a{
    margin-top: 0;
    background: #4C2D87;
    color: #fff;
}

.career__img img{
    width: 1100px;
}

.career__img {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #4C2D87 #E8E0F4;
}

.career__img::-webkit-scrollbar {
    height: 8px;
}

.career__img::-webkit-scrollbar-track {
    background: #E8E0F4;
    border-radius: 10px;
}

.career__img::-webkit-scrollbar-thumb {
    background: #4C2D87;
    border-radius: 10px;
}

.career__img::-webkit-scrollbar-thumb:hover {
    background: #3a2268;
}

.company__content .table__data {
    background: #fff;
}

/*------------------------------------
device.css
------------------------------------*/


.show-pc{
    display: block;
}

@media screen and (max-width: 768px) {
    .show-pc{
        display: none;
    }
}

.small-hide{
    display: none;
}

@media screen and (max-width: 768px) {
    .small-hide{
        display: block;
    }
}


/*------------------------------------
追加
------------------------------------*/
#main {
    background-color: transparent;
}