@charset "utf-8";
/* CSS Document */


:root {
    /* design width 1920px */
    --dw: 1920;
    --dw_px: calc( var( --dw ) * 1px );

    --cw: calc( 1200 * 1.2 + 15 ); /* 1200 + 左右マージン10% + スクロールバー */
    --cw_px: calc( var( --dw ) * 1px );

    /* font size */

    --fs_10: clamp( 8px, calc( 10 * 100vw / var( --dw ) ), 12px );
    --fs_12: clamp( 9.6px, calc( 12 * 100vw / var( --dw ) ), 14.4px );
    --fs_14: clamp( 11.2px, calc( 14 * 100vw / var( --dw ) ), 16.8px );
    --fs_16: clamp( 12.8px, calc( 16 * 100vw / var( --dw ) ), 19.2px );
    --fs_18: clamp( 14.4px, calc( 18 * 100vw / var( --dw ) ), 21.6px );
    --fs_20: clamp( 16px, calc( 20 * 100vw / var( --dw ) ), 24px );
    --fs_22: clamp( 17.6px, calc( 22 * 100vw / var( --dw ) ), 26.4px );
    --fs_24: clamp( 19.2px, calc( 24 * 100vw / var( --dw ) ), 28.8px );
    --fs_26: clamp( 20.8px, calc( 26 * 100vw / var( --dw ) ), 31.2px );
    --fs_28: clamp( 22.4px, calc( 28 * 100vw / var( --dw ) ), 33.6px );
    --fs_30: clamp( 24px, calc( 30 * 100vw / var( --dw ) ), 36px );
    --fs_32: clamp( 25.6px, calc( 32 * 100vw / var( --dw ) ), 38.4px );
    --fs_34: clamp( 27.2px, calc( 34 * 100vw / var( --dw ) ), 40.8px );
    --fs_36: clamp( 28.8px, calc( 36 * 100vw / var( --dw ) ), 43.2px );
    --fs_38: clamp( 30.4px, calc( 38 * 100vw / var( --dw ) ), 45.6px );
    --fs_40: clamp( 32px, calc( 40 * 100vw / var( --dw ) ), 48px );

    --fs_xxs: var( --fs_12 );
    --fs_xs:  var( --fs_14 );
    --fs_s:   var( --fs_16 );
    --fs_m:   var( --fs_18 );
    --fs_l:   var( --fs_20 );
    --fs_xl:  var( --fs_22 );
    --fs_xxl: var( --fs_24 );

    /* font weight */
    --fw_t:  100;
    --fw_el: 200;
    --fw_l:  300;
    --fw_r:  400;
    --fw_m:  500;
    --fw_sb: 600;
    --fw_b:  700;
    --fw_eb: 800;
    --fw_h:  900;

}
@media screen and ( max-width: 768px ) {
    :root {
        --dw: 375;
        --dw_px: calc( var( --dw ) * 1px );

        /* font size */
        --fs_10: calc( 10 * 100vw / var( --dw ) );
        --fs_12: calc( 12 * 100vw / var( --dw ) );
        --fs_14: calc( 14 * 100vw / var( --dw ) );
        --fs_16: calc( 16 * 100vw / var( --dw ) );
        --fs_18: calc( 18 * 100vw / var( --dw ) );
        --fs_20: calc( 20 * 100vw / var( --dw ) );
        --fs_22: calc( 22 * 100vw / var( --dw ) );
        --fs_24: calc( 24 * 100vw / var( --dw ) );
        --fs_26: calc( 26 * 100vw / var( --dw ) );
        --fs_28: calc( 28 * 100vw / var( --dw ) );
        --fs_30: calc( 30 * 100vw / var( --dw ) );
        --fs_32: calc( 32 * 100vw / var( --dw ) );
        --fs_34: calc( 34 * 100vw / var( --dw ) );
        --fs_36: calc( 36 * 100vw / var( --dw ) );
        --fs_38: calc( 38 * 100vw / var( --dw ) );
        --fs_40: calc( 40 * 100vw / var( --dw ) );

        --fs_xxs: var( --fs_10 );
        --fs_xs:  var( --fs_12 );
        --fs_s:   var( --fs_14 );
        --fs_m:   var( --fs_16 );
        --fs_l:   var( --fs_18 );
        --fs_xl:  var( --fs_20 );
        --fs_xxl: var( --fs_22 );

    }
}





/* ========================================

font

======================================== */
* {
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
@media screen and ( max-width: 768px ) {
}



.fs_xxs       { font-size: var( --fs_xxs ); line-height: 1.5; letter-spacing: 0.1em; }
.fs_xs        { font-size: var( --fs_xs );  line-height: 1.5; letter-spacing: 0.1em; }
.fs_s         { font-size: var( --fs_s );   line-height: 1.5; letter-spacing: 0.1em; }
.fs_m         { font-size: var( --fs_m );   line-height: 1.5; letter-spacing: 0.1em; }
.fs_l         { font-size: var( --fs_l );   line-height: 1.5; letter-spacing: 0.1em; }
.fs_xl        { font-size: var( --fs_xl );  line-height: 1.5; letter-spacing: 0.1em; }
.fs_xxl       { font-size: var( --fs_xxl ); line-height: 1.5; letter-spacing: 0.1em; }
.fs_mv        { font-size: var( --fs_xxl ); line-height: 1.5; letter-spacing: 0.1em; }
.fs_topics    { font-size: var( --fs_m );   line-height: 1.5; letter-spacing: 0.1em; }
.fs_pagetitle { font-size: var( --fs_30 );  line-height: 1.5; letter-spacing: 0.1em; }
.fs_catchcopy { font-size: var( --fs_xxl ); line-height: 1.5; letter-spacing: 0.1em; }
.fs_lead      { font-size: var( --fs_xl );  line-height: 1.5; letter-spacing: 0.1em; }
.fs_subtitle  { font-size: var( --fs_xl );  line-height: 1.5; letter-spacing: 0.1em; }
.fs_subject   { font-size: var( --fs_l );   line-height: 1.5; letter-spacing: 0.1em; }
.fs_caption   { font-size: var( --fs_14 );  line-height: 1.5; letter-spacing: 0.1em; }
.fs_figcaption { font-size: var( --fs_12 ); line-height: 2;   letter-spacing: 0.1em; }
@media screen and ( max-width: 768px ) {
    .fs_xxs       {  }
    .fs_xs        {  }
    .fs_s         {  }
    .fs_m         {  }
    .fs_l         {  }
    .fs_xl        {  }
    .fs_xxl       {  }
    .fs_mv        { font-size: var( --fs_m ); }
    .fs_topics    { font-size: var( --fs_s ); }
    .fs_catchcopy {  }
    .fs_pagetitle { font-size: var( --fs_22 ); }
    .fs_lead      { font-size: var( --fs_m ); }
    .fs_subtitle  {  }
    .fs_text_l    {  }
    .fs_subject   {  }
    .fs_25        {  }
    .fs_caption   {  }
}



.fw_t  { font-weight: var( --fw_t ); }
.fw_el { font-weight: var( --fw_el ); }
.fw_l  { font-weight: var( --fw_l ); }
.fw_r  { font-weight: var( --fw_r ); }
.fw_m  { font-weight: var( --fw_m ); }
.fw_sb { font-weight: var( --fw_sb ); }
.fw_b  { font-weight: var( --fw_b ); }
.fw_eb { font-weight: var( --fw_eb ); }
.fw_h  { font-weight: var( --fw_h ); }
@media screen and ( max-width: 768px ) {
}