/* Establish the order of layers upfront */
@layer core, third-party, components, utility;
@layer core.reset, core.tokens, core.base;
@layer third-party.imports, third-party.overrides;
@layer components.base, components.variations;

/* Reset, normalize, etc. */
@import url('vender/uaplus.css') layer(core.reset);
@import url('vender/bootstrap/bootstrap.min.css') layer(third-party.imports);
@import url('vender/swiper/swiper-bundle.min.css') layer(third-party.imports);
@import url('components/header.css') layer(components.variations);
@import url('components/accordion.css') layer(components.variations);
@import url('utility/swiper.css') layer(utility);
@import url('utility/base.css') layer(utility);
@import url('utility/page.css') layer(utility);

:root {
    --font_jp: "Noto Sans JP";
    --header_h: 65px;
    --main_color: #00AB95;
    --sub_color: #A2245E;
    --black: ;
    --green: #00AB95;
    --purple: #A2245E;
    --yellow: #FEFCEB;
    --gray: #EFEFEB;

}

html {
    font-family: var(--font_jp), sans-serif;
}
body {
    padding-top: var(--header_h);
}

@layer core {
    @layer base {
        img {
            display: block;
            width: 100%;
            object-fit: cover;
        }
    }
}

@layer utility {
    a {
        text-decoration: none;
        transition: opacity .3s;
        @media (hover: hover){
            &:where(:any-link, :enabled, summary):hover {
                opacity:.7;
            }
        }
    }
    :where(h1, h2, h3, h4, h5, h6){
        margin: 0;
        padding: 0;
    }
    p {
        font-size: var(--p-fs, 16px);
        line-height: calc(24 / 16);
        font-weight: 500;
        padding: 0;
        margin: 0;
        @media (min-width: 768px){
            --p-fs: 18px;
        }
        &.x2 {
            font-size: var(--p_x2-fs, 16px);
            @media (min-width: 768px){
                --p_x2-fs: 32px;
            }
        
        }
        &.regular {
            font-weight: var(--rg-fw, normal);
            --p-fs: 14px;
            @media (min-width: 768px){
                --p-fs: 18px;
                --rg-fw: 500;
            }
        }
        &.purple {
            color: var(--purple);
        }
    }
    ul {
        padding-left: 0;
    }
    .no_shop {
        margin-top: 10px;
        color: var(--main_color);
        font-size: 20px;
        line-height: calc(28 / 20);
    }
}