@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&family=Noto+Serif+Thai:wght@100..900&display=swap');	
	
/* Reset */
html{font-size: 62.5%; -webkit-font-feature-settings: 'palt' 1; font-feature-settings: 'palt' 1;}
body{ color: #000000; line-height: 1.7; word-spacing: 0; font-size: 1.6rem; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; font-family: "Jost", "Noto Serif Thai",sans-serif; position: relative;}

*{margin: 0; padding: 0; box-sizing: border-box; border: 0; outline: none;}
h1, h2, h3, h4, h5, h6{font-size: 100%; font-weight: bold;}
ol, ul{list-style: none;}
table{border-collapse: collapse; border-spacing: 0;}
th{text-align: left; font-weight: normal;}
a{color: inherit; text-decoration: none;}
[data-target]{cursor: pointer;}
img{vertical-align: bottom; max-width: 100%; height: auto;}
button{cursor: pointer;}

.cap,
[class*="cap-"]{font-size: 1rem; line-height: 1.4;}
.cap-abs_right{position: absolute; bottom: 7px; right: 7px; text-align: right;}
.cap-abs_left{position: absolute; bottom: 7px; left: 7px;}
.cap-right{padding-top: 5px; text-align: right;}
.cap-left{padding-top: 5px;}

.center{text-align: center !important;}
.left{text-align: left !important;}
.right{text-align: right !important;}
.bold{font-weight: bold;}
.container{margin: 0 auto; max-width: 1800px; width: calc(100% - 60px);}
img.img-full{width: 100%;}
.exlink{text-decoration: underline; color: #0097da;}
.exlink:hover{opacity: .8;}

@media (min-width: 768px){
    a[href^="tel:"]{pointer-events: none;}
    .only-sp{display: none;}    
}

@media (max-width: 767px){
    .only-pc{display: none;}
}

@media print {
    body{color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
}

/* Header */
.header-wrap{padding: 20px 0; display: flex; align-items: center; justify-content: space-between;}
.header-wrap h1 img{max-width: 100px; margin-right: 5px;}
.header-wrap h1 a{display: inline-flex; align-items: flex-end; font-size: 11px;line-height: 1;}
.menu-wrap{display: flex; align-items: center;}
.menu a{font-size: 1.4rem; position: relative; padding: 0 0 16px;}
.menu a:hover, .menu-wrap > li > a.is-active{color: #e00019;}
.menu-wrap li + li::before{display: inline-block; padding-right: 10px; padding-left: 10px; color: #000; content: "|";}
.menu-wrap li:last-child::before{content: unset;}
.menu-wrap li:last-child{padding-left: 10px;}
.menu-wrap > li > a:after {content: ''; background: #e00019; display: block; width: 0; height: 2px; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); border-radius: 2px; transition: .4s;}
.menu-wrap > li > a:hover:after, .menu-wrap > li > a.is-active:after {width: 100%;}
.menu-wrap > li > a.no-active:after{content: unset;}

/* Main */
.main{overflow: hidden;}

/* Footer */
footer{background: #e9e9e9; padding: 22px 18px;}
footer p{font-size: 1.2rem;}

#pagetop{position: fixed; bottom: 0; right: 0; width: 65px; height: 65px; background: #e00019; z-index: 100; cursor: pointer; display: none;}
#pagetop:after{content: ''; border: solid #fff; border-width: 0 1px 1px 0; display: inline-block; padding: 10px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); margin: 30px 0 0 22px;}

@media (max-width: 767px){
    .container{width: calc(100% - 20px);}

    .header-wrap{padding: 13px 0;}
    .header-wrap h1{max-width: 240px; width: 100%;}

    .menu a{font-size: 1.2rem;}
    .menu-wrap li + li::before{padding-left: 3px; padding-right: 3px;}
    .menu-wrap li:last-child{padding-left: 5px;}

    footer{text-align: center; margin-bottom: 60px;}
    #pagetop{bottom: 110px; width: 50px; height: 50px;}
    #pagetop:after {margin: 21px 0 0 17px;}
}

@media (max-width: 360px){
    .menu a{font-size: 3vw;}
}

/* Animate */
.fade-in{opacity: 0; transition: opacity 1.5s ease;}
.fade-in.is-view{opacity: 1;}

.fade-up{opacity: 0; transform: translateY(40px); -webkit-transform: translateY(40px); filter: blur(5px) brightness(105%); transition: opacity 2s ease, transform 2s ease, filter 2s ease;}
.fade-up.is-view{opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); filter: blur(0) brightness(100%);}

.fade-down{opacity: 0; transform: translateY(-40px); -webkit-transform: translateY(-40px); filter: blur(5px) brightness(105%); transition: opacity 1s ease, transform 1s ease, filter 1s ease;}
.fade-down.is-view{opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); filter: blur(0) brightness(100%);}

.fade-left{opacity: 0; transform: translateX(-40px); -webkit-transform: translateX(-40px); filter: blur(5px) brightness(105%); transition: opacity 1s ease, transform 1s ease, filter 1s ease;}
.fade-left.is-view{opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); filter: blur(0) brightness(100%);}

.fade-right{opacity: 0; transform: translateX(40px); -webkit-transform: translateX(40px); filter: blur(5px) brightness(105%); transition: opacity 1s ease, transform 1s ease, filter 1s ease;}
.fade-right.is-view{opacity: 1; transform: translateY(0); -webkit-transform: translateY(0); filter: blur(0) brightness(100%);}

.zoom-in{opacity: 0; overflow: hidden; transform: scale(0.7,0.7); -webkit-transform: scale(0.7,0.7); transition: opacity 1s ease, transform 1s ease;}
.zoom-in.is-view{opacity: 1; transform: scale(1,1); -webkit-transform: scale(1,1);}

.zoom-out{opacity: 0; overflow: hidden; transform: scale(1.3,1.3); -webkit-transform: scale(1.3,1.3); transition: opacity 2s ease, transform 2s ease;}
.zoom-out.is-view{opacity: 1; transform: scale(1,1); -webkit-transform: scale(1,1);}

.roll-left{position: relative; overflow: hidden;}
.roll-left img{opacity: 0; transition: opacity 1.2s ease .7s;}
.roll-left:after{content: ''; position: absolute; top: 0; bottom: 0; background: #de6600; opacity: .4;}
.roll-left.is-view img{opacity: 1;}
.roll-left.is-view:after{animation: rollLeft 1s ease;}

@keyframes rollLeft{
    0%{left: 0; right: 100%;}
    50%{left: 0; right: 0;}
    100%{left: 100%; right: 0;}
}

.roll-right{position: relative; overflow: hidden;}
.roll-right img{opacity: 0; transition: opacity 1.2s ease .7s;}
.roll-right:after{content: ''; position: absolute; top: 0; bottom: 0; background: #de6600; opacity: .4;}
.roll-right.is-view img{opacity: 1;}
.roll-right.is-view:after{animation: rollRight 1s ease;}

@keyframes rollRight{
    0%{right: 0; left: 100%;}
    50%{right: 0; left: 0;}
    100%{right: 100%; left: 0;}
}

@media (min-width: 768px){
    .delay1{transition-delay: .2s;}
    .delay2{transition-delay: .4s;}
    .delay3{transition-delay: .6s;}
    .delay4{transition-delay: .8s;}
    .delay5{transition-delay: 1s;}
}