/* A Modern CSS Reset */
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}table{border-collapse: collapse;border-spacing: 0;width: 100%;}

:root {
    --base_font-size: clamp(16px , 4.26666666vw , 20px);
    --wrapper: min(92% , 1320px);
}

html {
    font-size: 1rem;
    scroll-behavior: smooth;

}

body {
    position: relative;
    font-family: "Shippori Mincho B1", serif;
    font-size: var(--base_font-size);
    font-weight: 400;
    line-height: 1.8;
    color: #333333;
}


.font_sans {
    font-family: "Noto Sans JP",-apple-system,Helvetica Neue,Hiragino Kaku Gothic ProN,"メイリオ",meiryo,sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.font_montserrat {
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

img {
    max-width: 100%;
    height: auto;
}

embed,
iframe,
object {
    max-width: 100%;
}

address {
    font-style: normal;
}

a {
    color:#0075C2;
    text-decoration: underline;
}

ul,ol {
    padding-left: 1.5rem;
}

.pc {
    display: none!important;
}

@media only screen and (min-width: 1024px) , print {
    :root {
        --base_font-size: clamp(16px , 1.562vw , 20px);
    }
    .pc {
        display: inherit!important;
    }
    .mobile {
        display: none!important;
    }
}


.block {
    display: block!important;;
}
.ib {
    display: inline-block;
}

.hide {
    display: none!important;
}
.w_60 {
    width: 60px!important;
}
.w_80 {
    width: 80px!important;
}
.w_100 {
    width: 100px!important;
}
.w_120 {
    width: 120px!important;
}
.w_180 {
    width: 180px!important;
}
.w_200 {
    width: 200px!important;
}
.w_240 {
    width: 240px!important;
}
.w_260 {
    width: 260px!important;
}
.w_300 {
    width: 100%;
    max-width: 300px!important;
}
.w_30per {
    width: 30%!important;
}
.w_50per {
    width: 50%!important;
}
.mw_max_content {
    max-width: max-content!important;
}
.w_auto {
    width: auto!important;
}
.h_auto {
    height: auto!important;
}

.ga-0 {
    gap: 0px!important
}
.ga-1 {
    gap: 4px!important
}
.ga-2 {
    gap: 8px!important
}
.ga-3 {
    gap: 12px!important
}
.ga-4 {
    gap: 16px!important
}
.ga-5 {
    gap: 20px!important
}
.ga-6 {
    gap: 24px!important
}
.ga-7 {
    gap: 28px!important
}
.ga-8 {
    gap: 32px!important
}
.ga-9 {
    gap: 36px!important
}
.ga-10 {
    gap: 40px!important
}
.ga-11 {
    gap: 44px!important
}
.ga-12 {
    gap: 48px!important
}
.ga-13 {
    gap: 52px!important
}
.ga-14 {
    gap: 56px!important
}
.ga-15 {
    gap: 60px!important
}
.ga-16 {
    gap: 64px!important
}
.ga-auto {
    gap: auto!important
}
.gr-0 {
    row-gap: 0px!important
}
.gr-1 {
    row-gap: 4px!important
}
.gr-2 {
    row-gap: 8px!important
}
.gr-3 {
    row-gap: 12px!important
}
.gr-4 {
    row-gap: 16px!important
}
.gr-5 {
    row-gap: 20px!important
}
.gr-6 {
    row-gap: 24px!important
}
.gr-7 {
    row-gap: 28px!important
}
.gr-8 {
    row-gap: 32px!important
}
.gr-9 {
    row-gap: 36px!important
}
.gr-10 {
    row-gap: 40px!important
}
.gr-11 {
    row-gap: 44px!important
}
.gr-12 {
    row-gap: 48px!important
}
.gr-13 {
    row-gap: 52px!important
}
.gr-14 {
    row-gap: 56px!important
}
.gr-15 {
    row-gap: 60px!important
}
.gr-16 {
    row-gap: 64px!important
}
.gr-auto {
    row-gap: auto!important
}
.gc-0 {
    column-gap: 0px!important
}
.gc-1 {
    column-gap: 4px!important
}
.gc-2 {
    column-gap: 8px!important
}
.gc-3 {
    column-gap: 12px!important
}
.gc-4 {
    column-gap: 16px!important
}
.gc-5 {
    column-gap: 20px!important
}
.gc-6 {
    column-gap: 24px!important
}
.gc-7 {
    column-gap: 28px!important
}
.gc-8 {
    column-gap: 32px!important
}
.gc-9 {
    column-gap: 36px!important
}
.gc-10 {
    column-gap: 40px!important
}
.gc-11 {
    column-gap: 44px!important
}
.gc-12 {
    column-gap: 48px!important
}
.gc-13 {
    column-gap: 52px!important
}
.gc-14 {
    column-gap: 56px!important
}
.gc-15 {
    column-gap: 60px!important
}
.gc-16 {
    column-gap: 64px!important
}
.gc-auto {
    column-gap: auto!important
}
.ma-0 {
    margin: 0!important
}
.ma-1 {
    margin: 4px!important
}
.ma-2 {
    margin: 8px!important
}
.ma-3 {
    margin: 12px!important
}
.ma-4 {
    margin: 16px!important
}
.ma-5 {
    margin: 20px!important
}
.ma-6 {
    margin: 24px!important
}
.ma-7 {
    margin: 28px!important
}
.ma-8 {
    margin: 32px!important
}
.ma-9 {
    margin: 36px!important
}
.ma-10 {
    margin: 40px!important
}
.ma-11 {
    margin: 44px!important
}
.ma-12 {
    margin: 48px!important
}
.ma-13 {
    margin: 52px!important
}
.ma-14 {
    margin: 56px!important
}
.ma-15 {
    margin: 60px!important
}
.ma-16 {
    margin: 64px!important
}
.ma-auto {
    margin: auto!important
}
.mx-0 {
    margin-right: 0!important;
    margin-left: 0!important
}
.mx-1 {
    margin-right: 4px!important;
    margin-left: 4px!important
}
.mx-2 {
    margin-right: 8px!important;
    margin-left: 8px!important
}
.mx-3 {
    margin-right: 12px!important;
    margin-left: 12px!important
}
.mx-4 {
    margin-right: 16px!important;
    margin-left: 16px!important
}
.mx-5 {
    margin-right: 20px!important;
    margin-left: 20px!important
}
.mx-6 {
    margin-right: 24px!important;
    margin-left: 24px!important
}
.mx-7 {
    margin-right: 28px!important;
    margin-left: 28px!important
}
.mx-8 {
    margin-right: 32px!important;
    margin-left: 32px!important
}
.mx-9 {
    margin-right: 36px!important;
    margin-left: 36px!important
}
.mx-10 {
    margin-right: 40px!important;
    margin-left: 40px!important
}
.mx-11 {
    margin-right: 44px!important;
    margin-left: 44px!important
}
.mx-12 {
    margin-right: 48px!important;
    margin-left: 48px!important
}
.mx-13 {
    margin-right: 52px!important;
    margin-left: 52px!important
}
.mx-14 {
    margin-right: 56px!important;
    margin-left: 56px!important
}
.mx-15 {
    margin-right: 60px!important;
    margin-left: 60px!important
}
.mx-16 {
    margin-right: 64px!important;
    margin-left: 64px!important
}
.mx-auto {
    margin-right: auto!important;
    margin-left: auto!important
}
.my-0 {
    margin-top: 0!important;
    margin-bottom: 0!important
}
.my-1 {
    margin-top: 4px!important;
    margin-bottom: 4px!important
}
.my-2 {
    margin-top: 8px!important;
    margin-bottom: 8px!important
}
.my-3 {
    margin-top: 12px!important;
    margin-bottom: 12px!important
}
.my-4 {
    margin-top: 16px!important;
    margin-bottom: 16px!important
}
.my-5 {
    margin-top: 20px!important;
    margin-bottom: 20px!important
}
.my-6 {
    margin-top: 24px!important;
    margin-bottom: 24px!important
}
.my-7 {
    margin-top: 28px!important;
    margin-bottom: 28px!important
}
.my-8 {
    margin-top: 32px!important;
    margin-bottom: 32px!important
}
.my-9 {
    margin-top: 36px!important;
    margin-bottom: 36px!important
}
.my-10 {
    margin-top: 40px!important;
    margin-bottom: 40px!important
}
.my-11 {
    margin-top: 44px!important;
    margin-bottom: 44px!important
}
.my-12 {
    margin-top: 48px!important;
    margin-bottom: 48px!important
}
.my-13 {
    margin-top: 52px!important;
    margin-bottom: 52px!important
}
.my-14 {
    margin-top: 56px!important;
    margin-bottom: 56px!important
}
.my-15 {
    margin-top: 60px!important;
    margin-bottom: 60px!important
}
.my-16 {
    margin-top: 64px!important;
    margin-bottom: 64px!important
}
.my-auto {
    margin-top: auto!important;
    margin-bottom: auto!important
}
.mt-0 {
    margin-top: 0!important
}
.mt-1 {
    margin-top: 4px!important
}
.mt-2 {
    margin-top: 8px!important
}
.mt-3 {
    margin-top: 12px!important
}
.mt-4 {
    margin-top: 16px!important
}
.mt-5 {
    margin-top: 20px!important
}
.mt-6 {
    margin-top: 24px!important
}
.mt-7 {
    margin-top: 28px!important
}
.mt-8 {
    margin-top: 32px!important
}
.mt-9 {
    margin-top: 36px!important
}
.mt-10 {
    margin-top: 40px!important
}
.mt-11 {
    margin-top: 44px!important
}
.mt-12 {
    margin-top: 48px!important
}
.mt-13 {
    margin-top: 52px!important
}
.mt-14 {
    margin-top: 56px!important
}
.mt-15 {
    margin-top: 60px!important
}
.mt-16 {
    margin-top: 64px!important
}
.mt-auto {
    margin-top: auto!important
}
.mr-0 {
    margin-right: 0!important
}
.mr-1 {
    margin-right: 4px!important
}
.mr-2 {
    margin-right: 8px!important
}
.mr-3 {
    margin-right: 12px!important
}
.mr-4 {
    margin-right: 16px!important
}
.mr-5 {
    margin-right: 20px!important
}
.mr-6 {
    margin-right: 24px!important
}
.mr-7 {
    margin-right: 28px!important
}
.mr-8 {
    margin-right: 32px!important
}
.mr-9 {
    margin-right: 36px!important
}
.mr-10 {
    margin-right: 40px!important
}
.mr-11 {
    margin-right: 44px!important
}
.mr-12 {
    margin-right: 48px!important
}
.mr-13 {
    margin-right: 52px!important
}
.mr-14 {
    margin-right: 56px!important
}
.mr-15 {
    margin-right: 60px!important
}
.mr-16 {
    margin-right: 64px!important
}
.mr-auto {
    margin-right: auto!important
}
.mb-0 {
    margin-bottom: 0!important
}
.mb-1 {
    margin-bottom: 4px!important
}
.mb-2 {
    margin-bottom: 8px!important
}
.mb-3 {
    margin-bottom: 12px!important
}
.mb-4 {
    margin-bottom: 16px!important
}
.mb-5 {
    margin-bottom: 20px!important
}
.mb-6 {
    margin-bottom: 24px!important
}
.mb-7 {
    margin-bottom: 28px!important
}
.mb-8 {
    margin-bottom: 32px!important
}
.mb-9 {
    margin-bottom: 36px!important
}
.mb-10 {
    margin-bottom: 40px!important
}
.mb-11 {
    margin-bottom: 44px!important
}
.mb-12 {
    margin-bottom: 48px!important
}
.mb-13 {
    margin-bottom: 52px!important
}
.mb-14 {
    margin-bottom: 56px!important
}
.mb-15 {
    margin-bottom: 60px!important
}
.mb-16 {
    margin-bottom: 64px!important
}
.mb-auto {
    margin-bottom: auto!important
}
.ml-0 {
    margin-left: 0!important
}
.ml-1 {
    margin-left: 4px!important
}
.ml-2 {
    margin-left: 8px!important
}
.ml-3 {
    margin-left: 12px!important
}
.ml-4 {
    margin-left: 16px!important
}
.ml-5 {
    margin-left: 20px!important
}
.ml-6 {
    margin-left: 24px!important
}
.ml-7 {
    margin-left: 28px!important
}
.ml-8 {
    margin-left: 32px!important
}
.ml-9 {
    margin-left: 36px!important
}
.ml-10 {
    margin-left: 40px!important
}
.ml-11 {
    margin-left: 44px!important
}
.ml-12 {
    margin-left: 48px!important
}
.ml-13 {
    margin-left: 52px!important
}
.ml-14 {
    margin-left: 56px!important
}
.ml-15 {
    margin-left: 60px!important
}
.ml-16 {
    margin-left: 64px!important
}
.ml-auto {
    margin-left: auto!important
}
.pa-0 {
    padding: 0!important
}
.pa-1 {
    padding: 4px!important
}
.pa-2 {
    padding: 8px!important
}
.pa-3 {
    padding: 12px!important
}
.pa-4 {
    padding: 16px!important
}
.pa-5 {
    padding: 20px!important
}
.pa-6 {
    padding: 24px!important
}
.pa-7 {
    padding: 28px!important
}
.pa-8 {
    padding: 32px!important
}
.pa-9 {
    padding: 36px!important
}
.pa-10 {
    padding: 40px!important
}
.pa-11 {
    padding: 44px!important
}
.pa-12 {
    padding: 48px!important
}
.pa-13 {
    padding: 52px!important
}
.pa-14 {
    padding: 56px!important
}
.pa-15 {
    padding: 60px!important
}
.pa-16 {
    padding: 64px!important
}
.px-0 {
    padding-right: 0!important;
    padding-left: 0!important
}
.px-1 {
    padding-right: 4px!important;
    padding-left: 4px!important
}
.px-2 {
    padding-right: 8px!important;
    padding-left: 8px!important
}
.px-3 {
    padding-right: 12px!important;
    padding-left: 12px!important
}
.px-4 {
    padding-right: 16px!important;
    padding-left: 16px!important
}
.px-5 {
    padding-right: 20px!important;
    padding-left: 20px!important
}
.px-6 {
    padding-right: 24px!important;
    padding-left: 24px!important
}
.px-7 {
    padding-right: 28px!important;
    padding-left: 28px!important
}
.px-8 {
    padding-right: 32px!important;
    padding-left: 32px!important
}
.px-9 {
    padding-right: 36px!important;
    padding-left: 36px!important
}
.px-10 {
    padding-right: 40px!important;
    padding-left: 40px!important
}
.px-11 {
    padding-right: 44px!important;
    padding-left: 44px!important
}
.px-12 {
    padding-right: 48px!important;
    padding-left: 48px!important
}
.px-13 {
    padding-right: 52px!important;
    padding-left: 52px!important
}
.px-14 {
    padding-right: 56px!important;
    padding-left: 56px!important
}
.px-15 {
    padding-right: 60px!important;
    padding-left: 60px!important
}
.px-16 {
    padding-right: 64px!important;
    padding-left: 64px!important
}
.py-0 {
    padding-top: 0!important;
    padding-bottom: 0!important
}
.py-1 {
    padding-top: 4px!important;
    padding-bottom: 4px!important
}
.py-2 {
    padding-top: 8px!important;
    padding-bottom: 8px!important
}
.py-3 {
    padding-top: 12px!important;
    padding-bottom: 12px!important
}
.py-4 {
    padding-top: 16px!important;
    padding-bottom: 16px!important
}
.py-5 {
    padding-top: 20px!important;
    padding-bottom: 20px!important
}
.py-6 {
    padding-top: 24px!important;
    padding-bottom: 24px!important
}
.py-7 {
    padding-top: 28px!important;
    padding-bottom: 28px!important
}
.py-8 {
    padding-top: 32px!important;
    padding-bottom: 32px!important
}
.py-9 {
    padding-top: 36px!important;
    padding-bottom: 36px!important
}
.py-10 {
    padding-top: 40px!important;
    padding-bottom: 40px!important
}
.py-11 {
    padding-top: 44px!important;
    padding-bottom: 44px!important
}
.py-12 {
    padding-top: 48px!important;
    padding-bottom: 48px!important
}
.py-13 {
    padding-top: 52px!important;
    padding-bottom: 52px!important
}
.py-14 {
    padding-top: 56px!important;
    padding-bottom: 56px!important
}
.py-15 {
    padding-top: 60px!important;
    padding-bottom: 60px!important
}
.py-16 {
    padding-top: 64px!important;
    padding-bottom: 64px!important
}
.pt-0 {
    padding-top: 0!important
}
.pt-1 {
    padding-top: 4px!important
}
.pt-2 {
    padding-top: 8px!important
}
.pt-3 {
    padding-top: 12px!important
}
.pt-4 {
    padding-top: 16px!important
}
.pt-5 {
    padding-top: 20px!important
}
.pt-6 {
    padding-top: 24px!important
}
.pt-7 {
    padding-top: 28px!important
}
.pt-8 {
    padding-top: 32px!important
}
.pt-9 {
    padding-top: 36px!important
}
.pt-10 {
    padding-top: 40px!important
}
.pt-11 {
    padding-top: 44px!important
}
.pt-12 {
    padding-top: 48px!important
}
.pt-13 {
    padding-top: 52px!important
}
.pt-14 {
    padding-top: 56px!important
}
.pt-15 {
    padding-top: 60px!important
}
.pt-16 {
    padding-top: 64px!important
}
.pr-0 {
    padding-right: 0!important
}
.pr-1 {
    padding-right: 4px!important
}
.pr-2 {
    padding-right: 8px!important
}
.pr-3 {
    padding-right: 12px!important
}
.pr-4 {
    padding-right: 16px!important
}
.pr-5 {
    padding-right: 20px!important
}
.pr-6 {
    padding-right: 24px!important
}
.pr-7 {
    padding-right: 28px!important
}
.pr-8 {
    padding-right: 32px!important
}
.pr-9 {
    padding-right: 36px!important
}
.pr-10 {
    padding-right: 40px!important
}
.pr-11 {
    padding-right: 44px!important
}
.pr-12 {
    padding-right: 48px!important
}
.pr-13 {
    padding-right: 52px!important
}
.pr-14 {
    padding-right: 56px!important
}
.pr-15 {
    padding-right: 60px!important
}
.pr-16 {
    padding-right: 64px!important
}
.pb-0 {
    padding-bottom: 0!important
}
.pb-1 {
    padding-bottom: 4px!important
}
.pb-2 {
    padding-bottom: 8px!important
}
.pb-3 {
    padding-bottom: 12px!important
}
.pb-4 {
    padding-bottom: 16px!important
}
.pb-5 {
    padding-bottom: 20px!important
}
.pb-6 {
    padding-bottom: 24px!important
}
.pb-7 {
    padding-bottom: 28px!important
}
.pb-8 {
    padding-bottom: 32px!important
}
.pb-9 {
    padding-bottom: 36px!important
}
.pb-10 {
    padding-bottom: 40px!important
}
.pb-11 {
    padding-bottom: 44px!important
}
.pb-12 {
    padding-bottom: 48px!important
}
.pb-13 {
    padding-bottom: 52px!important
}
.pb-14 {
    padding-bottom: 56px!important
}
.pb-15 {
    padding-bottom: 60px!important
}
.pb-16 {
    padding-bottom: 64px!important
}
.pl-0 {
    padding-left: 0!important
}
.pl-1 {
    padding-left: 4px!important
}
.pl-2 {
    padding-left: 8px!important
}
.pl-3 {
    padding-left: 12px!important
}
.pl-4 {
    padding-left: 16px!important
}
.pl-5 {
    padding-left: 20px!important
}
.pl-6 {
    padding-left: 24px!important
}
.pl-7 {
    padding-left: 28px!important
}
.pl-8 {
    padding-left: 32px!important
}
.pl-9 {
    padding-left: 36px!important
}
.pl-10 {
    padding-left: 40px!important
}
.pl-11 {
    padding-left: 44px!important
}
.pl-12 {
    padding-left: 48px!important
}
.pl-13 {
    padding-left: 52px!important
}
.pl-14 {
    padding-left: 56px!important
}
.pl-15 {
    padding-left: 60px!important
}
.pl-16 {
    padding-left: 64px!important;
}

.mt_s {
    margin-top: clamp(8px , 3vw , 16px)!important;
}
.mb_s {
    margin-bottom: clamp(8px , 3vw , 16px)!important;
}
.mt_sm {
    margin-top: clamp(16px , 4.5vw , 32px)!important;
}
.mb_sm {
    margin-bottom: clamp(16px , 4.5vw , 32px)!important;
}
.mt_m {
    margin-top: clamp(36px , 6vw , 72px)!important;
}
.mb_m {
    margin-bottom: clamp(36px , 6vw , 72px)!important;
}
.mt_ml {
    margin-top: clamp(48px , 8vw , 100px)!important;
}
.mb_ml {
    margin-bottom: clamp(48px , 8vw , 100px)!important;
}
.mt_l {
    margin-top: clamp(64px , 10vw , 160px)!important;
}
.mb_l {
    margin-bottom: clamp(64px , 10vw , 160px)!important;
}
.pt_m {
    padding-top: clamp(36px , 6vw , 72px)!important;
}
.pb_m {
    padding-bottom: clamp(36px , 6vw , 72px)!important;
}
.pt_ml {
    padding-top: clamp(48px , 8vw , 100px)!important;
}
.pb_ml {
    padding-bottom: clamp(48px , 8vw , 100px)!important;
}
.pt_l {
    padding-top: clamp(64px , 10vw , 160px)!important;
}
.pb_l {
    padding-bottom: clamp(64px , 10vw , 160px)!important;
}

.border_0 {
    border: 0!important;
}

.shadow {
    box-shadow: 0px 0px 20px rgba(51, 51, 51, 0.09);
}

.bg_white {
    background-color: #fff!important;
}
.bg_yellow {
    background-color:#F2AD41!important;
}
.bg_blue01 {
    background-color:#F5F9FC!important;
}
.bg_blue02 {
    background-color:#E8F6FD!important;
}
.bg_blue03 {
    background-color:#148DCE!important;
}
.bg_gray {
    background-color: #676767!important;
}
.bg_light_gray {
    background-color: #f4f4f4!important;
}
.bg_black {
    background-color:#495151!important;
}
.bg_black02 {
    background-color: #333333!important;
}
.white {
    color: #fff!important;
}
.gray {
    color: #676767;
}
.gray02 {
    color: #888;
}
.blue01 {
    color: #0669C1;
}
.blue02 {
    color: #148DCE;
}

.pointer {
    cursor: pointer;
}

.underline {
    text-decoration: underline;
}

.nowrap {
    white-space: nowrap;
}

.fw {
    font-weight: 700;
}
.fw_500 {
    font-weight: 500;
}
.fw_600 {
    font-weight: 600;
}
.small {
    font-size: 0.8em;
}
.small2 {
    font-size: 0.64em;
}

.fs_xs {
    font-size:min(3.4666vw , calc(var(--base_font-size) - 4px));
}
.fs_s {
    font-size:min(3.7333vw , var(--base_font-size) - 2px);
}
.fs_m {
    font-size: min(4.26666vw , var(--base_font-size));
}
.fs_ml {
    font-size: min(4.8vw , calc(var(--base_font-size) + 4px));
}
.fs_l {
    font-size: min(5.86666666vw , calc(var(--base_font-size) + 8px));
}
.fs_xl {
    font-size: min(6.4vw , calc(var(--base_font-size) + 16px));
}
.fs_xxl {
    font-size: min(7.4666666vw , calc(var(--base_font-size) + 20px));
}
.fs_xxxl {
    font-size: min(7.4666666vw , calc(var(--base_font-size) + 24x));
}

.f11 {
    font-size: 11px;
}
.f12 {
    font-size: 12px;
}
.f14 {
    font-size: 14px;
}
.f15 {
    font-size: 15px;
}
.f16 {
    font-size: 16px;
}
.f18 {
    font-size: 18px;
}
.f24 {
    font-size:24px;
}
.f36 {
    font-size: 36px;
}
.text-left {
    text-align: left!important;
}
.text-center {
    text-align: center!important;
}
.text-right {
    text-align: right!important;
}
.lh01 {
    line-height: 1.4;
}
.lh02 {
    line-height: 1.25;
}
.lh03 {
    line-height: 1.8;
}
.align-middle {
    vertical-align: middle;
}
.d-flex {
    display: flex;
}
.flex-column {
    flex-direction: column!important;
}
.flex-row {
    flex-direction: row!important;
}
.flex-row-reverse {
    flex-direction: row-reverse!important;
}
.flex-wrap {
    flex-wrap: wrap!important;
}
.justify-content-start {
    justify-content: flex-start!important;
}
.justify-content-end {
    justify-content: flex-end!important;
}
.justify-content-center {
    justify-content: center!important;
}
.justify-content-between {
    justify-content: space-between!important;
}
.justify-content-around {
    justify-content: space-around!important;
}
.align-items-start {
    align-items: flex-start!important;
}
.align-items-end {
    align-items: flex-end!important;
}
.align-items-center {
    align-items: center!important;
}
.align-items-baseline {
    align-items: baseline!important;
}
.align-items-stretch {
    align-items: stretch!important;
}
.flex-none {
    flex: none;
}

.d-grid {
    display: grid;
}
.grid-col2 {
    grid-template-columns: 1fr 1fr;
}
.grid-col3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.gap01 {
    gap:min(16vw , 120px);
}
.position-relative {
    position: relative;
}

.flip-horizontal {
    transform: scale(-1, 1);
}

.wrapper {
    width: var(--wrapper);
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.grecaptcha-badge {
    visibility: hidden;
}

.section_title {
    position: relative;
    display: grid;
    justify-content: center;
}

.marker {
    background: linear-gradient(0deg,rgba(251, 240, 155, 1) 0%, rgba(251, 240, 155, 1) 10%, rgba(251, 240, 155, 0) 10%);
}


/* メイン
-------------------------------*/
.shoryokuka_area {
    padding: 8px 0;
    font-size: clamp(14px , 2.66666666vw , 32px);
    line-height: 1;
    background: linear-gradient(90deg, #54C1F9 0%, #1CA5EF 100%);
}
.shoryokuka_area img {
    height: 24px;
}

.main_area {
    background: url(../img/main_bg.jpg) no-repeat bottom center;
    background-size: cover;
    padding: 20px 0;
}
.exceed_logo {
    width: 120px;
    display: block;
}
.main_wrap {
    position: relative;
}
.main_l {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.main_l_wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: min(3.2vw , 16px);
    padding: 16px 0;
}
.main_fukidashi {
    display: block;
    background-color: #3F528F;
    border-radius: 8px;
    position: relative;
    padding: 4px 16px;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 8px;
}
.main_fukidashi::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border: 8px solid transparent;
    border-top: 8px solid #3F528F;
}
.main_text {
    display: block;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 3.6769px 3.6769px 0px #AED5E9;
    padding: 4px 16px;
    font-size: min(7.4666666vw , 36px);
}
.main_mark {
    transform: rotate(-34deg);
    display: inline-block;
}
.main_link.btn {
    text-align: center;
    padding: 8px 40px;
    font-size: 16px;
    margin-top: 8px;
    margin-bottom: 32px;
    margin-right: auto;
}
.main_r {
    max-width: 80vw;
    display: block;
    margin: auto;
}

@media only screen and (min-width: 768px) , print {
    .main_area {
        padding: 40px 0 min(5.2083333333vw , 100px);
    }
    .shoryokuka_area img {
        height: 32px;
    }
    .exceed_logo {
        width: min(23.4375vw , 180px);
        margin-bottom: 20px;
    }
    .main_l {
        display: block;
    }
    .main_fukidashi {
        font-size: min(3.125vw , 36px);
        padding: 0 44px;
    }
    .main_text {
        font-size: min(4.1666666vw , 66px);
        padding: 0 44px;
    }
    .main_link.btn {
        font-size: min(2.34375vw, 28px);
        width: clamp(280px, 33.125vw, 636px);
        margin-top: 24px;
    }
    .main_r {
        position: absolute;
        width: 40vw;
        max-width: 540px;
        right: 0;
        top: 0;
    }
}


/* こんなお悩みありませんか？
-------------------------------*/
.problem_content {
    border-radius: 8px;
    background: linear-gradient(180deg, #F4F4F4 0%, #F6F6F6 102.59%);
    padding: min(10.666666vw , 60px) min(5.333333333vw , 80px) min(21.333333vw , 120px);
}
.problem_title > span {
    position: relative;
    background: url(../img/problem_title_bg.svg) no-repeat bottom center;
    padding-bottom: 28px;
}
.problem_wrap {
    display: grid;
    gap: 48px;
}
.problem_box {
    position: relative;
    border-radius: 8px;
    padding: 24px 0;
    text-align: center;
}
.problem_ico {
    position: absolute;
    top: -28px;
    left: 0;
}
.problem_img {
    position: absolute;
    bottom: -16px;
    right: -12px;
    width: min(16vw, 80px);
    height: min(16vw, 80px);
    object-fit: contain;
    object-position: right;
}
.problem_arrow {
    position: relative;
    top: -12px;
}

@media only screen and (min-width: 1024px) , print {
    .problem_content {
        padding-left: 20px;
        padding-right: 20px;
    }
    .problem_wrap {
        grid-template-columns: 1fr 1fr 1fr;
        gap:min( 2.734375vw , 64px);
        max-width: 1112px;
        margin: auto;
    }
    .problem_box {
        padding: 36px 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .problem_img {
        bottom: -32px;
    }
}

/* セルフレジ導入のメリット
-------------------------------*/
.blue_img_bg {
    background: url(../img/background01.png) repeat-y bottom center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%;
}
.blue_img_bg::before {
    content: "";
    background: url(../img/background01_top.png) no-repeat top center;
    position: absolute;
    top: -64px;
    width: 100%;
    height: 66px;
}
.merit_wrap {
    display: grid;
    gap: 60px;
    position: relative;
    z-index: 10;
}
.merit_box {
    position: relative;
    padding: 24px 24px 40px;
    border-bottom-right-radius: 16px;
    max-width: 388px;
    margin: 0 auto;
}
.merit_num {
    border-radius: 50px;
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    line-height: 1;
    position: absolute;
    top: -20px;
    left: -12px;
}

@media only screen and (min-width: 1024px) , print {
    .blue_img_bg {
        height: 50%;
    }
    .merit_wrap {
        grid-template-columns: 1fr 1fr 1fr;
        gap: min(1.953125vw , 60px);
    }
    .merit_title {
        font-size: min(2.734375vw, calc(var(--base_font-size) + 4px));
    }
}


/* セルフレジの主な機能
-------------------------------*/
.function_area {
    background: url(../img/function_bg.jpg) no-repeat center bottom;
    background-size: cover;
}
.function_wrap {
    display: grid;
    gap: 40px;
}
.function_box {
    position: relative;
    display: grid;
    gap: 40px;
    text-align: center;
    justify-content: center;
    padding: 80px min(7.46666666vw , 40px) 40px;
    border-radius: 16px;
    width: clamp(280px ,100% , 420px);
    margin: 0 auto;
}
.function_title {
    position: absolute;
    top: calc(-1 * min(4.8vw , calc(var(--base_font-size) + 8px)));
    left: 8%;
    border-radius: 80px;
    padding: 4px;
    width: 84%;
    margin: auto;
}
@media only screen and (min-width: 1024px) , print {
    .function_wrap {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .function_title {
        font-size: min(1.953125vw, calc(var(--base_font-size) + 4px));
        top: calc(-1 * min(1.953125vw , calc(var(--base_font-size) + 8px)));
    }
}

/* 導入可能なモデル
-------------------------------*/
.models_title {
    border-left: 4px solid #148DCE;
    padding-left: 20px;
    line-height: 1.25;
}
.models_box {
    border-radius: 8px;
    overflow: hidden;
}
.models_type {
    position: absolute;
    left: 12px;
    top: 12px;
    background-color: #fff;
    color: #0576B1;
    border: 1px solid;
    border-radius: 8px;
    padding: 4px 8px;
}
.models_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: min(7.46666666vw , 44px);
}
.models_text > div {
    display: grid;
}
.models_name {
    border-bottom: 1px solid;
    padding-bottom: 16px;
    margin-bottom: 16px;
}
.models_data {
    font-size: min(3.7333333333vw , var(--base_font-size));
}
.models_wrap {
    display: grid;
    gap: 40px;
}

@media only screen and (min-width: 768px) , print {
    .models_box_row {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .models_wrap {
        grid-template-columns: 1fr 1fr;
        gap: min(3.90625vw , 96px);
    }
    .models_text {
        padding: min(2.6041666vw , 44px);
    }
    .models_data {
        font-size: min(1.822916666vw , var(--base_font-size));
    }
}

/* 対応決済一覧
-------------------------------*/
.pay_wrap {
    padding: min(5.3333333vw , 80px);
    border-radius: 8px;
}
.pay_content:not(:last-child) {
    border-bottom: 1px solid #ACADAE;
    padding-bottom: min(6.4vw , 40px);
    margin-bottom: min(6.4vw , 40px);
}
.pay_type {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
}
@media only screen and (min-width: 1024px) , print {
    .pay_content {
        display: grid;
        grid-template-columns: 1fr 2.4fr;
        align-items: center;
        gap: 40px;
    }
    .pay_type {
        border-right: 1px solid #ACADAE;
        padding-bottom: 0;
    }
}

/* 導入の流れ
-------------------------------*/
.flow_box {
    border-radius: 8px;
    position: relative;
    padding: 40px;
    max-width: 600px;
    margin: 0 auto;
}
.flow_step {
    position: absolute;
    top: -12px;
    left: 0;
    clip-path: polygon(0 0, 89% 0, 100% 100%, 0% 100%);
    padding: 0 36px;
}
.flow_arrow {
    position: relative;
    z-index: 2;
}

@media only screen and (min-width: 1200px) , print {
    .flow_wrap {
        display: grid;
        grid-template-columns: repeat(3, 1fr 36px) 1fr;
    }
    .flow_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px min(1.171875vw , 40px);
        line-height: 1.4;
    }
    .flow_arrow > svg {
        transform: rotate(-90deg);
    }
}

/* サポート
-------------------------------*/
.support_area {
    background: url(../img/support_bg.jpg) no-repeat top center;
    position: relative;
}
.support_wrap {
    position: relative;
    z-index: 10;
    display: grid;
    gap: 40px;
    border-radius: 20px;
}
.support_box {
    border-radius: 20px;
    padding: 40px;
    display: grid;
    max-width: 384px;
    margin: 0 auto;
    line-height: 1.6;
}

@media only screen and (min-width: 1024px) , print {
    .support_wrap {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: subgrid;
        grid-row: span 4;
        gap: min(1.5625vw , 84px);
    }
}


/* よくあるご質問
-------------------------------*/
.faq_wrap {
    display: grid;
    gap: min(10.66666vw , 32px);
}
.faq {
    display: grid;
    gap: 8px;
    max-width: 1244px;
    margin: auto;
    width: 100%;
}
.faq_q,
.faq_a {
    --faq_ico_size: min(6.4vw , 36px);
    display: grid;
    grid-template-columns: var(--faq_ico_size) 1fr;
    gap: min(3.2vw, 28px);
    align-items: baseline;
    padding: min(3.2vw , 24px) 16px;
}
.faq_ico {
    width: var(--faq_ico_size);
    height: var(--faq_ico_size);
    border-radius: var(--faq_ico_size);
    display: flex;
    align-items: center;
    justify-content: center;
}


/* お問い合わせ
-------------------------------*/
.contact_wrap {
    max-width: 1324px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
}
.contact_wrap > .wrapper {
    max-width: 1024px;
}
.contact_wrap label {
    font-size: min(4.26666vw , 20px);
}
.form_l {
    background-color: #fff;
    border: 2px solid #DDDDDD;
    border-radius: 8px;
    padding: min(3.2vw , 22px);
    display: block;
    width: 100%;
    font-size: min(4.26666vw , 20px);
}
.form_select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../img/select_arrow.svg) no-repeat right 12px center;
    background-size: 16px;
    background-color: #fff;
    border: 2px solid #DDDDDD;
    border-radius: 8px;
    padding: min(3.2vw , 22px);
    padding-right: 28px;
    display: block;
    color: inherit;
    font-size: min(4.26666vw , 20px);
}
.form_checkbox {
    position: relative;
}
.form_checkbox input {
    position: absolute;
    z-index: -1;
}
.form_checkbox label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}
.form_checkbox label::before {
    content: "";
    width: 32px;
    height: 32px;
    border: 2px solid #999;
    border-radius: 4px;
    background-color: #fff;
    flex: none;
}
.form_checkbox label::after {
    border-right: 8px solid #148DCE;
    border-bottom: 8px solid #148DCE;
    content: '';
    display: block;
    height: 28px;
    width: 16px;
    left: 8px;
    margin-top: -7px;
    position: absolute;
    transform: rotate(45deg);
    opacity: 0;
}
.form_checkbox input[type=checkbox]:checked + label::after {
    opacity: 1;
}

.form_radio {
    position: relative;
}
.form_radio input {
    position: absolute;
    z-index: -1;
}
.form_radio label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}
.form_radio label::before {
    content: "";
    width: 32px;
    height: 32px;
    border: 2px solid #999;
    border-radius: 40px;
    background-color: #fff;
    flex: none;
}
.form_radio label::after {
    content: '';
    display: block;
    height: 16px;
    width: 16px;
    background-color: #148DCE;
    border-radius: 16px;
    left: 8px;
    position: absolute;
    transform: rotate(45deg);
    opacity: 0;
}
.form_radio input[type=radio]:checked + label::after {
    opacity: 1;
}

.policy {
    background: #fff;
    border: 1px solid #ddd;
    padding: 12px;
    max-height: 320px;
    overflow: auto;
}
.btn {
    background: linear-gradient(175.78deg, #FEA00E 3.43%, #F76C6E 96.57%);
    border-radius: 80px;
    color: #fff;
    padding: min(4.26666vw , 20px) 36px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    border: 0;
    transition: 0.3s;
    cursor: pointer;
    position: relative;
}
.btn:hover {
    background: linear-gradient(90deg, #FE9C0F 0%, #FE6A0E 100%);
}
.btn_arrow {
    position: absolute;
    right: 20px;
    top: calc(50% - 7px);
}
.btn-block {
    width: 100%;
}
.required {
    display: inline-block;
    border: 2px solid;
    color: #CC2828;
    border-radius: 20px;
    font-size: min(3.2vw , 20px);
    padding: 4px 8px;
    line-height: 1;
    margin-left: 8px;
}
.optional {
    display: inline-block;
    border: 2px solid;
    color: inherit;
    border-radius: 20px;
    font-size: min(3.2vw , 20px);
    padding: 4px 8px;
    line-height: 1;
    margin-left: 8px;
}

/* footer
-------------------------------*/
.footer {
    background: linear-gradient(108.45deg, #138CCD 0%, #53C0F8 96.75%);
}
.footer_logo {
    width: 60vw;
    max-width: max-content;
    padding: 16px;
}
.footer_address {
    display: grid;
    gap: min(3.2vw , 20px);
}

@media only screen and (min-width: 768px) , print {
    .footer_address {
        grid-template-columns: 1fr 1fr;
    }
}
@media only screen and (min-width: 1024px) , print {
    .footer_address {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}


/* アニメーション
-------------------------------*/
/*ふわっと表示*/
.fadein {
    opacity: 0;
    transition: 2.4s;
}
.fadein.animation_in {
    opacity: 1;
}
/*拡大からふわっと表示*/
.expand_fadein {
    overflow: hidden;
}
.expand_fadein img {
    opacity: 0;
    transform:scale(1.2 , 1.2);
    transition: 6.4s ease;
}
.expand_fadein.animation_in img {
    opacity: 1;
    transform:scale(1 , 1);
}
/*下から表示*/
.slideup {
    opacity: 0;
    transition: 1s ease;
    transform:translate(0, min(5.333333vw , 40px));
}
.slideup.animation_in {
    opacity: 1;
    transform:translate(0,0);
}
/*上から表示*/
.slidedown {
    opacity: 0;
    transition: 1s ease;
    transform:translate(0, min(5.333333vw , -40px));
}
.slidedown.animation_in {
    opacity: 1;
    transform:translate(0,0);
}

.delay01 {
    transition-delay: 0.8s;
}
.delay02 {
    transition-delay: 1.6s;
}