@charset "UTF-8";

/* --------------------------------------------------------------
   Reset Base
   -------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
:root {
     /* Font */
    --font-main: "Noto Sans Thai", "Noto Sans JP", "Inter", sans-serif;
    --font-size: 17px;
    --font-line-height: 1.7;

     /* color */
    --c-text: #333;
  
}


/* 1) Box sizing modern reset */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2) Remove margin/padding default */
html, 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, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

/* 3) HTML base */
html, body {
    font-size: var(--font-size);
    font-family: var(--font-main);
    color: var(--c-text);
    line-height: var(--font-line-height)
}

/* 4) Display block for HTML5 elements */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display: block;
}

/* 5) List reset */
ul, ol { list-style: none; }

/* 6) Quotes reset */
blockquote, q { quotes: none; }
blockquote::before, blockquote::after,
q::before, q::after { content: ''; }

/* 7) Anchor */
a {
    text-decoration: none;
    color: var(--c-main);
}
a:visited{
	opacity: .5;
}

a:hover {
    opacity: .7;
    transition:all .5s ease;
}

/* 8) Image */
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    -ms-interpolation-mode: bicubic; /* IE fallback */
}

/* 9) Table */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 10) Clearfix modern */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* 11) Utility Hover */
.hover:hover { opacity: 0.5; transition: all .3s ease-out;}
.hover2:hover { transform: scale(1.1); transition: all .3s ease-out;}
.hover3:hover { transform: scale(0.9); transition: all .3s ease-out;}