@charset "utf-8";
/* ==========================================================================
   base.css  -  reset / design tokens / rem scale / utilities
   MOBILE FIRST
     SP      : default            (design 390px)
     Tablet  : min-width: 768px
     PC      : min-width: 1280px  (design 1440px, content 1280px)

   rem rule: 1rem = 100px at the design width  ->  14px = .14rem
     SP     : 1rem = 100vw / 3.9  (scales with the phone width, like the
              template's JS rem, but done in CSS so there is no flash)
     Tablet+: 1rem = 100px fixed  (layouts are fluid with % / grid)
   ========================================================================== */

:root {
    /* color (tokens.json) */
    --c-sage: #718275;
    --c-sage-dark: #56685B;
    --c-warm: #F5F2EF;
    --c-gold: #D4AF37;
    --c-canvas: #F3F3F3;
    --c-ink: #1C1917;
    --c-ink-muted: #57534E;
    --c-line: #E4DED7;
    --c-on-ink: #D7D4CD;
    --c-coral: #E07A5F;
    --c-sp-line: #D9D4CC;         /* SP menu grey divider */
    --c-highlight: #FBF6E6;       /* active search suggestion */
    --c-notice-bg: #FDF8EA;
    --c-notice-border: #E8D9A8;
    --c-white: #FFFFFF;

    /* font */
    --ff-base: "DM Sans", "Noto Sans Myanmar", system-ui, sans-serif;
    --ff-my: "Noto Sans Myanmar", "DM Sans", sans-serif;

    /* motion */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --dur: .3s;

    /* shadow */
    --shadow-card: 0 .02rem .12rem #1c19171a;
    --shadow-menu: 0 .04rem .2rem #1c19171f;
    --focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--c-ink);

    /* layout */
    --side: .15rem;               /* SP side margin 15px */
    --header-h: .64rem;           /* SP 64px / PC 96px */
    --announce-h: .4rem;          /* SP 40px / PC 44px */
}

/* ---------- rem scale ---------- */
html {
    font-size: 25.641vw;          /* 100vw / 3.9 */
    -webkit-text-size-adjust: 100%;
    scroll-behavior: auto;
}

/* ---------- reset (from template, kept minimal) ---------- */
*, *::before, *::after {
    box-sizing: border-box;
}
/* NOTE: html is NOT in this list. A font reset on html breaks the rem scale. */
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, small, strong, var, b, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, figure, figcaption,
article, aside, footer, header, nav, section, main, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font: inherit;
}
article, aside, figure, footer, header, nav, section, main {
    display: block;
}
ul, ol {
    list-style: none;
}
a {
    color: inherit;
    text-decoration: none;
}
img, svg, video {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
address {
    font-style: normal;
}
input, select, textarea, button {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    -webkit-appearance: none;
            appearance: none;
}
button {
    cursor: pointer;
}
[hidden] {
    display: none !important;
}

body {
    font-family: var(--ff-base);
    font-size: .14rem;
    line-height: 1.43;
    font-weight: 400;
    color: var(--c-ink);
    background: var(--c-white);
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}
:lang(my), .t-my {
    font-family: var(--ff-my);
    line-height: 1.8;             /* Burmese needs extra leading */
}

/* focus: visible for keyboard only */
:focus {
    outline: none;
}
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

/* ---------- utilities ---------- */
.l-container {
    width: 100%;
    max-width: 14.4rem;
    margin: 0 auto;
    padding: 0 var(--side);
}
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.skip-link {
    position: absolute;
    left: .1rem;
    top: -1rem;
    z-index: 1000;
    padding: .08rem .16rem;
    background: var(--c-ink);
    color: var(--c-white);
}
.skip-link:focus {
    top: .1rem;
}

/* device switch (template class names kept) */
.only_pc { display: none; }
.only_tb { display: none; }
.only_sp { display: block; }
.only_sp_inline { display: inline; }
.hide_sp_inline { display: none; }

/* body lock while drawer/search is open */
body.is-locked {
    overflow: hidden;
}

/* ---------- reveal animation (add .js-reveal to any block) ---------- */
.js .js-reveal {
    opacity: 0;
    transform: translateY(.24rem);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js .js-reveal.is-inview {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   Tablet  768px -
   ========================================================================== */
@media (min-width: 768px) {
    html {
        font-size: 100px;
    }
    :root {
        --side: .4rem;
    }
    body {
        font-size: .16rem;
        line-height: 1.5;
    }
    .only_sp,
    .only_sp_inline { display: none; }
    .hide_sp_inline { display: inline; }
    .only_tb { display: block; }
}

/* ==========================================================================
   PC  1280px -
   ========================================================================== */
@media (min-width: 1280px) {
    :root {
        --side: .8rem;
        --header-h: .96rem;
        --announce-h: .44rem;
    }
    .only_pc { display: block; }
    .only_tb { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
    .js .js-reveal {
        opacity: 1;
        transform: none;
    }
}