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





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

width

============================== */
:root {
    --browser-width: 100vw;
    --design-width: 1920;
    --design-width-pixel: 1920px;
}
@media screen and ( max-width: 768px ) {
    :root {
        --design-width: 375;
        --design-width-pixel: 375px;
    }
}





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

font-size

============================== */
:root {
    --fixed-font-size-10: 10px;
    --fixed-font-size-11: 11px;
    --fixed-font-size-12: 12px;
    --fixed-font-size-13: 13px;
    --fixed-font-size-14: 14px;
    --fixed-font-size-15: 15px;
    --fixed-font-size-16: 16px;
    --fixed-font-size-17: 17px;
    --fixed-font-size-18: 18px;
    --fixed-font-size-19: 19px;
    --fixed-font-size-20: 20px;
    --fixed-font-size-21: 21px;
    --fixed-font-size-22: 22px;
    --fixed-font-size-23: 23px;
    --fixed-font-size-24: 24px;
    --fixed-font-size-25: 25px;
    --fixed-font-size-26: 26px;
    --fixed-font-size-27: 27px;
    --fixed-font-size-28: 28px;
    --fixed-font-size-29: 29px;
    --fixed-font-size-30: 30px;



    /*
    可変域 2
    最大幅 1920
    ブレークポイント 768
    slope = 0.17vw  = ( 2 / 1152 * 100 )vw  = ( 2 / ( 1920 - 768 ) * 100 )vw = ( 可変域 / ( 最大幅 - ブレークポイント ) * 100 )vw
    幅 0 の時のサイズ = ( 最小フォントサイズ - ( 0.17vw * 768 / 100 ) )px
    
    */
    --font-size-10: var( --fixed-font-size-xxs );
    --font-size-12: clamp( 10px, 8.695px + 0.17vw, 12px );
    --font-size-13: clamp( 11px, 9.695px + 0.17vw, 13px );
    --font-size-14: clamp( 12px, 10.695px + 0.17vw, 14px );
    --font-size-15: clamp( 13px, 11.695px + 0.17vw, 15px );
    --font-size-16: clamp( 14px, 12.695px + 0.17vw, 16px );
    --font-size-17: clamp( 15px, 13.695px + 0.17vw, 17px );
    --font-size-18: clamp( 16px, 14.695px + 0.17vw, 18px );
    --font-size-19: clamp( 17px, 15.695px + 0.17vw, 19px );
    --font-size-20: clamp( 18px, 16.695px + 0.17vw, 20px );
    --font-size-21: clamp( 19px, 17.695px + 0.17vw, 21px );
    --font-size-22: clamp( 20px, 18.695px + 0.17vw, 22px );
    --font-size-23: clamp( 21px, 19.695px + 0.17vw, 23px );
    --font-size-24: clamp( 22px, 20.695px + 0.17vw, 24px );
    --font-size-25: clamp( 23px, 21.695px + 0.17vw, 25px );
    --font-size-26: clamp( 24px, 22.695px + 0.17vw, 26px );
    --font-size-27: clamp( 25px, 23.695px + 0.17vw, 27px );
    --font-size-28: clamp( 26px, 24.695px + 0.17vw, 28px );
    --font-size-29: clamp( 27px, 25.695px + 0.17vw, 29px );
    --font-size-30: clamp( 28px, 26.695px + 0.17vw, 30px );

    --font-size-figcaption: var( --fixed-font-size-12 );

    --font-size-header-title-jp: var( --fixed-font-size-25 );
    --font-size-header-title-en: var( --fixed-font-size-15 );

    --font-size-footer-lead: var( --font-size-29 );
    --font-size-footer-banner_link-text: min( calc( 29 * 100vw / var( --design-width ) ), 29px );
    --font-size-footer-copyright: var( --fixed-font-size-20 );
    --font-size-footer-tel: min( calc( 80 * 100vw / var( --design-width ) ), 80px );

    --font-size-mv-title: clamp( 85px, 18.34px + 8.68vw, 185px );
    --font-size-section-title: clamp( 70px, -6.64px + 9.98vw, 185px );
    --font-size-section-title-jp: clamp( 35px, -41.64px + 9.98vw, 150px );
    --font-size-section-title-jp: clamp( 70px, -6.64px + 9.98vw, 185px );
    --font-size-section-catchcopy: clamp( 30px, 16.72px + 1.73vw, 50px );
    --font-size-section-lead: clamp( 30px, 16.72px + 1.73vw, 50px );

}
@media screen and ( max-width: 1150px ) {
    :root {
        --font-size-section-lead: calc( 36 * 100vw / 1150 );
    }
}
@media screen and ( max-width: 768px ) {
    :root {
        --font-size-10: max( calc( 10 * 100vw / var( --design-width ) ), 10px );
        --font-size-11: max( calc( 11 * 100vw / var( --design-width ) ), 11px );
        --font-size-12: max( calc( 12 * 100vw / var( --design-width ) ), 12px );
        --font-size-13: max( calc( 13 * 100vw / var( --design-width ) ), 13px );
        --font-size-14: max( calc( 14 * 100vw / var( --design-width ) ), 14px );
        --font-size-15: max( calc( 15 * 100vw / var( --design-width ) ), 15px );
        --font-size-16: max( calc( 16 * 100vw / var( --design-width ) ), 16px );
        --font-size-17: max( calc( 17 * 100vw / var( --design-width ) ), 17px );
        --font-size-18: max( calc( 18 * 100vw / var( --design-width ) ), 18px );
        --font-size-19: max( calc( 19 * 100vw / var( --design-width ) ), 19px );
        --font-size-20: max( calc( 20 * 100vw / var( --design-width ) ), 20px );
        --font-size-21: max( calc( 21 * 100vw / var( --design-width ) ), 21px );
        --font-size-22: max( calc( 22 * 100vw / var( --design-width ) ), 22px );
        --font-size-23: max( calc( 23 * 100vw / var( --design-width ) ), 23px );
        --font-size-24: max( calc( 24 * 100vw / var( --design-width ) ), 24px );
        --font-size-25: max( calc( 25 * 100vw / var( --design-width ) ), 25px );
        --font-size-26: max( calc( 26 * 100vw / var( --design-width ) ), 26px );
        --font-size-27: max( calc( 27 * 100vw / var( --design-width ) ), 27px );
        --font-size-28: max( calc( 28 * 100vw / var( --design-width ) ), 28px );
        --font-size-29: max( calc( 29 * 100vw / var( --design-width ) ), 29px );
        --font-size-30: max( calc( 30 * 100vw / var( --design-width ) ), 30px );
        
        --font-size-figcaption: var( --font-size-12 );

        --font-size-header-title-jp: var( --font-size-14 );
        --font-size-header-title-en: var( --font-size-10 );

        --font-size-footer-lead: var( --font-size-18 );
        --font-size-footer-banner_link-text: var( --font-size-19 );
        --font-size-footer-copyright: var( --font-size-12 );
        --font-size-footer-tel: calc( 35 * 100vw / var( --design-width ) );

        --font-size-mv-title: calc( 50 * 100vw / var( --design-width ) );
        --font-size-section-title: calc( 50 * 100vw / var( --design-width ) );
        --font-size-section-title-jp: calc( 50 * 100vw / var( --design-width ) );
        --font-size-section-catchcopy: var( --font-size-25 );
        --font-size-section-lead: var( --font-size-20 );
    }
}





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

padding

============================== */
:root {
        --default-padding-x: min( calc( 110 * 100vw / var( --design-width ) ), 110px );
        --default-padding-y: 180px;
        /*
        --default-padding-x: min( calc( 110px * 100vw / 1920 ), 110px );
        --default-padding-y: min( calc( 180 * 100vw / 1920 ), 180px );
        */
}
@media screen and ( max-width: 768px ) {
    :root {
        --default-padding-x: calc( 20 * 100vw / var( --design-width ) );
        --default-padding-y: calc( 30 * 100vw / var( --design-width ) );
    }
}