/* css変数の定義 */

:root {
    /* コンテナ */
    --container-width: 375rem;

    /* フォント関連共通変数 */
    --letter-spacing-base: 0.05em;
    --font-family-jp: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-en-primary: "Space Grotesk", sans-serif;
    --font-family-en-secondary: "Inter", sans-serif;
    --font-family-jp-primary: "M PLUS Rounded 1c", sans-serif;
    --font-family-jp-primary-bold:"M PLUS Rounded 1c", sans-serif;

    /* ベースフォントスタイルのfontプロパティ関連の変数 */
    /* base */
    --font-size-base: 14rem;
    --line-height-base: 175%;
    --font-weight-base: 400;
    --font-base: normal var(--font-weight-base) var(--font-size-base)/var(--line-height-base) var(--font-family-jp-primary);

    /* base-static: baseフォントスタイルでPCで上書きしないスタイルを定義 */
    --font-size-base-static: 14rem;
    --line-height-base-static: 175%;
    --font-weight-base-static: 400;
    --font-base-static: normal var(--font-weight-base-static) var(--font-size-base-static)/var(--line-height-base-static) var(--font-family-jp-primary);

    /* xsmフォントスタイルを定義 */
    --font-size-xsm: 10rem;
    --line-height-xsm: 175%;
    --font-weight-xsm: 400;
    --font-xsm: normal var(--font-weight-xsm) var(--font-size-xsm)/var(--line-height-xsm) var(--font-family-jp-primary);

    /* smフォントスタイルを定義 */
    --font-size-sm: 12rem;
    --line-height-sm: 175%;
    --font-weight-sm: 400;
    --font-sm: normal var(--font-weight-sm) var(--font-size-sm)/var(--line-height-sm) var(--font-family-jp-primary);

    /* sm-static */
    --font-size-sm-static:12rem;
    --line-height-sm-static: 175%;
    --font-weight-sm-static: 400;
    --font-sm-static: normal var(--font-weight-sm-static) var(--font-size-sm-static)/var(--line-height-sm-static) var(--font-family-jp-primary);

    /* md-static */
    --font-size-md-static:16rem;
    --line-height-md-static: 175%;
    --font-weight-md-static: 400;
    --font-md-static: normal var(--font-weight-md-static) var(--font-size-md-static)/var(--line-height-md-static) var(--font-family-jp-primary);

    /* lgフォントスタイルを定義 */
    --font-size-lg: 16rem;
    --line-height-lg: 175%;
    --font-weight-lg: 400;
    --font-lg: normal var(--font-weight-lg) var(--font-size-lg)/var(--line-height-lg) var(--font-family-jp-primary);

    /* lg-static */
    --font-size-lg-static: 16rem;
    --line-height-lg-static: 175%;
    --font-weight-lg-static: 400;
    --font-lg-static: normal var(--font-weight-lg-static) var(--font-size-lg-static)/var(--line-height-lg-static) var(--font-family-jp-primary);

    /* xlgフォントスタイルを定義 */
    --font-size-xlg:16rem;
    --line-height-xlg: 175%;
    --font-weight-xlg: 400;
    --font-xlg: normal var(--font-weight-xlg) var(--font-size-xlg)/var(--line-height-xlg) var(--font-family-jp-primary);

    /* 見出しフォントスタイルのfontプロパティ関連の変数 */
    /* heading(base) */
    --font-size-heading-base: 20rem;
    --line-height-heading-base: 175%;
    --font-weight-heading-base: 700;
    --font-heading-base: normal var(--font-weight-heading-base) var(--font-size-heading-base)/var(--line-height-heading-base) var(--font-family-jp-primary-bold);

    /* heading-static */
    --font-size-heading-static: 14rem;
    --line-height-heading-static: 175%;
    --font-weight-heading-static: 700;
    --font-heading-static: normal var(--font-weight-heading-static) var(--font-size-heading-static)/var(--line-height-heading-static) var(--font-family-jp);

    /* heading-xsm */
    --font-size-heading-xsm: 10rem;
    --line-height-heading-xsm: 175%;
    --font-weight-heading-xsm: 700;
    --font-heading-sm: normal var(--font-weight-heading-xsm) var(--font-size-heading-xsm)/var(--line-height-heading-xsm) var(--font-family-jp-primary-bold);

    /* heading-sm */
    --font-size-heading-sm: 14rem;
    --line-height-heading-sm: 175%;
    --font-weight-heading-sm: 700;
    --font-heading-sm: normal var(--font-weight-heading-sm) var(--font-size-heading-sm)/var(--line-height-heading-sm) var(--font-family-jp-primary-bold);

    /* heading-sm-static */
    --font-size-heading-sm-static: 16rem;
    --line-height-heading-sm-static: 175%;
    --font-weight-heading-sm-static: 700;
    --font-heading-sm-static: normal var(--font-weight-heading-sm-static) var(--font-size-heading-sm-static)/var(--line-height-heading-sm-static) var(--font-family-jp);

    /* heading-md */
    --font-size-heading-md: 16rem;
    --line-height-heading-md: 175%;
    --font-weight-heading-md: 700;
    --font-heading-md: normal var(--font-weight-heading-md) var(--font-size-heading-md)/var(--line-height-heading-md) var(--font-family-jp-primary-bold);

    /* heading-md-static */
    --font-size-heading-md-static: 20rem;
    --line-height-heading-md-static: 175%;
    --font-weight-heading-md-static: 700;
    --font-heading-md-static: normal var(--font-weight-heading-md-static) var(--font-size-heading-md-static)/var(--line-height-heading-md-static) var(--font-family-jp-primary-bold);

    /* heading-lg */
    --font-size-heading-lg: 24rem;
    --line-height-heading-lg: 175%;
    --font-weight-heading-lg: 700;
    --font-heading-lg: normal var(--font-weight-heading-lg) var(--font-size-heading-lg)/var(--line-height-heading-lg) var(--font-family-jp-primary-bold);

    /* heading-xlg */
    --font-size-heading-xlg: 28rem;
    --line-height-heading-xlg: 175%;
    --font-weight-heading-xlg: 700;
    --font-heading-xlg: normal var(--font-weight-heading-xlg) var(--font-size-heading-xlg)/var(--line-height-heading-xlg) var(--font-family-jp-primary-bold);

    /* display-md */
    --font-size-display-md: 24rem;
    --line-height-display-md: 175%;
    --font-weight-display-md: 700;
    --font-display-md: normal var(--font-weight-display-md) var(--font-size-display-md)/var(--line-height-display-md) var(--font-family-jp);
    --font-display-md-en-primary: normal var(--font-weight-display-md) var(--font-size-display-md)/var(--line-height-display-md) var(--font-family-en-primary);
    --font-display-md-jp-primary: normal var(--font-weight-display-md) var(--font-size-display-md)/var(--line-height-display-md) var(--font-family-jp-primary);
    

    /* display-md-static */
    --font-size-display-md-static: 24rem;
    --line-height-display-md-static: 175%;
    --font-weight-display-md-static: 700;
    --font-display-md-static: normal var(--font-weight-display-md-static) var(--font-size-display-md-static)/var(--line-height-display-md-static) var(--font-family-jp);

    /* display-md-jp */
    --font-size-display-md: 24rem;
    --line-height-display-md: 175%;
    --font-weight-display-md: 700;
    --font-display-md-jp: normal var(--font-weight-display-md) var(--font-size-display-md)/var(--line-height-display-md) var(--font-family-jp);

    /* display-lg */
    --font-size-display-lg:28rem;
    --line-height-display-lg: 175%;
    --font-weight-display-lg: 700;
    --font-display-lg-jp-primary: normal var(--font-weight-display-lg) var(--font-size-display-lg)/var(--line-height-display-lg) var(--font-family-jp-primary-bold);    

    
    /* display-xlg */
    --font-size-display-xlg:32rem;
    --line-height-display-xlg: 175%;
    --font-weight-display-xlg: 700;
    --font-display-xlg: normal var(--font-weight-display-xlg) var(--font-size-display-xlg)/var(--line-height-display-xlg) var(--font-family-jp);
    --font-display-xlg-en-primary: normal var(--font-weight-display-xlg) var(--font-size-display-xlg)/var(--line-height-display-xlg) var(--font-family-en-primary);
    --font-display-xlg-jp-primary: normal var(--font-weight-display-xlg) var(--font-size-display-xlg)/var(--line-height-display-xlg) var(--font-family-jp-primary-bold);


    /* 以降は本番用の色の指定 */
    --color-black: #161357;
    --colorgrey: #87A4AC;
    --color-light_grey: #C1CFE2;
    --color-pale_grey: #E6E9EC;
    --color-snow: #FFFFFF;
    --color-deep_red: #E60012;
    --color-red: #FD565D;
    --color-orange: #FF6634;
    --color-bright_blue: #5386FC;
    --color-purple: #A570E4;
    --color-pink: #FF9BCD;
    --color-light_pink: #FFCFE7;
    --color-pinkorange: #FFECE9;
    --color-pale_pink: #FFF3F1;
    --color-brown: #DD7855;
    --color-light_brown: #EDCDC2;
    --color-maron: #F1DFDD;
    --color-beige: #F6EDDE;
    --color-warm_grey: #F8F7F5;
    --color-grey_blue: #84ABD6;
    --color-blue_grey: #C4D3E6;
    --color-pale_blue: #D9E8FD;
    --color-light_blue: #C6E4EE;
    --color-turquoise: #0093AF;
    --color-skyblue: #4AC0D8;
    --color-bluegreen: #98D7DD;
    --color-mint: #C3EBEC;
    --color-pale_green: #E7F7F8;
    --color-lemon: #F1F2A8; 
    --color-lavendert: #E3CCFF;
    --color-olive: #C4DDCF;
    --color-pure-black:#000000;
    --color-off-white: #FDFDFD;
    --color-slate-blue:#B3C7E0;
}

@media screen and (min-width: 768px) {
    :root {
        /* コンテナ */
        --container-width: 1240rem;

        /* フォントプロパティ変数 - サイズ他のみを上書き */
        --font-size-base: 18rem;
        --font-size-lg: 18rem;
        --line-height-lg: 200%;
        --font-size-sm: 14rem;
        --font-size-xsm: 12rem;
        --font-size-xlg:20rem;
        --font-size-heading-base: 24rem;
        --font-size-heading-xsm:12rem;
        --font-size-heading-sm: 18rem;
        --font-size-heading-md: 20rem;
        --font-size-heading-lg: 30rem;
        --font-size-heading-xlg: 36rem;
        --line-height-heading-lg: 200%;
        --font-size-display-md: 36rem;
        --font-size-display-lg:36rem;
        --font-size-display-xlg:48rem;

    }
}

/* フォントサイズ、改行関連の基本設定 */
html {
    font-size: calc(100vw / 375);
}

@media screen and (min-width: 768px) {
    html {
        font-size: 1px;
    }
}

/* ユーティリティクラス */
.visually-hidden {
    position: absolute;
    width: 1rem;
    height: 1rem;
    margin: -1rem;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.br-pc{
    display: none;
}
.br-sp{
    display: block;
}

.sp-only{
    display: block;
}
.pc-only{
    display: none;
}

.no-break{
    display: inline-block;
}



@media screen and (min-width: 768px) {
    .br-pc{
        display: block;
    }
    .br-sp{
        display: none;
    }
    .sp-only{
        display: none;
    }
    .pc-only{
        display: block;
    }

}

/* コンテナ */
/* 仮 */
.container{/* 基本のmax-width */
    max-width: 1240rem;
    margin: 0 auto;
    padding: 0 20rem;
}
.container--narrow{
    max-width: 1032rem;
}
.container-sm{
    max-width: 992rem;
    margin: 0 auto;
}