@charset "UTF-8";
@import 'sanitize.css';

:root { --easeOutExpo:cubic-bezier(0.16, 1, 0.3, 1); }

body { margin: 0; padding: 0; font-family: "Kanit", sans-serif; font-size: 16px; line-height: 1.6667; color: #151515; position: relative; }
body:before{ width: 100%; height: 1270px; position: absolute; top: -200px; left: 0; content: ''; background: url('../images/bg-top.png')no-repeat; background-size: cover; background-position: top center; z-index: -1; }
body:after{ width: 100%; height: 1340px; position: absolute; bottom: 0; left: 0; content: ''; background: url('../images/bg-tail.png')no-repeat; background-size: cover; background-position: bottom center; z-index: -1; }
  article {
  transform: scale(0.6);
  transform-origin: top center;
  opacity: 0;
  transition: none; /* GSAPに任せる */
}
h1,h2,h3,h4,h5,h6{ margin: 0; padding: 0; font-weight: normal; letter-spacing: normal; }
ul,li,ol{ margin: 0; padding: 0; }
a{ text-decoration: none; cursor: pointer; color: #707070; }
h1{text-align: center;}
.clr:after{ content:""; display:block; height:0; clear:both; visibility:hidden; }
header{ height: auto; }
.pc-only { display: block; }
.sp-only { display: none; }

/* HeaderMenu */
header{display: block;padding:20px 0;}
.HeaderMenu{ width: auto; max-width: 1160px; height: auto; margin: auto; margin-top: 0px; position: relative; display: flex; justify-content: space-between; align-items: center; }
.HeaderMenu a{ color: #707070; }
.HeaderMenu .HeaderLogo{ width: auto; text-align: left; max-width: 200px; padding: 0px 0px; border-radius: 10px;}
.HeaderMenu .HeaderLogo a{display: block;margin: 0;padding: 0;}
.HeaderMenu .HeaderLogo img{ width: 100%; height: auto; display: block;margin: 0;padding: 0;}
.HeaderMenu .HeaderSNS{ margin: 0; }
.HeaderMenu .HeaderSNS ul{ margin: 0; padding: 0; list-style: none; display: flex; justify-content: right; align-items: center; gap: 70px; }
.HeaderMenu .HeaderSNS ul li{ padding: 0; }
.HeaderMenu .HeaderSNS ul li:first-child(){ margin-left: 0px; }
.HeaderMenu .HeaderSNS ul li img{width: 100%; max-width: 130px; height: auto; }


/* Menu Fixed Top */
.HeaderMenu { position: relative; left:0; right: 0; top:0; width:100%; box-sizing:border-box; transition: top 0.6s; z-index: 999999; }
.HeaderMenu.off-canvas { top: -350px; }
.HeaderMenu.fixed { top:0; z-index: 999999999999;} 
.HeaderMenu.fixedBox { position: fixed!important; top:0; z-index: 999999999999; }
.FixedMenu { position: fixed!important; }

/* Footer */
footer{ padding: 0; margin: 0; }
footer .FooterBox{ width: auto; height: auto; padding: 40px 0 0 0; }
footer .ContactLRBox{ display: flex; justify-content: space-between; flex-wrap: nowrap; color: #7c7c7c; font-size: 17px; }
footer .ContactLRBox a{ color: #666; transition: all .3s;}
footer .ContactLRBox a:hover{ color: #00ac6c; transition: all .3s;}
footer .ContactLRBox p{ margin: 5px 0 10px;}
footer .ContactLRBox .ContactLeft{ text-align: left;}
footer .ContactLRBox .ContactLeft .name{ color:#666; font-size: 1.05em;}
footer .ContactLRBox .ContactRight{ text-align: right;}
footer .SNSBox{ display: block; background-color: #fff; border-radius: 100px; margin-top: 40px; }
footer .SNSBox ul{ list-style-type: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
footer .SNSBox ul li{ padding: 0; margin: 0; width: 25%; }
footer .SNSBox ul li a{ display: block; padding: 20px 15px; text-align: center;}
footer .SNSBox ul li img{ width: auto; height: 40px; max-width: 120px; }
footer .SNSBox ul li a:hover{ color: #000; }
footer .FooterBox .Copyright{ padding: 40px 0; margin: 0; color: #7c7c7c; text-align: center; font-size: 16px; font-weight: 300; }
footer .FooterBox .Copyright a{ color: #7c7c7c;}

/* AllPageBox */
.AllPageBox{ width: auto; max-width: 1160px; height: auto; margin: auto; margin-top: 330px; padding-top: 70px; padding-bottom: 70px; }
.AllPageWidth{ width: auto; height: auto; max-width: 1160px; margin: auto; }
.AllPageWidth.footer{ width: auto; height: auto; max-width: 1280px; margin: auto; }
.AllPageWide{ width: auto; height: auto; max-width: 1160px; margin: auto; position: relative; z-index: 9; }
.AllPageMiddle{ max-width: 1024px; margin: auto; margin-top: 40px; margin-bottom: 40px;}

/* ContentIntroBox */
.ContentIntroBox{ text-align: center; padding: 40px 0 30px 0;}
.ContentIntroBox .HeaderFontIntro{ font-size: 36px; line-height: 1.8em; color: #00ac6c; font-weight: 600; margin-bottom: 10px; }
.ContentIntroBox{ font-size: 22px; line-height: 40px; color: #000; font-weight: 600; }
.ContentIntroBox p{margin: 20px 0 30px;}
.ContentIntroBox p span{display: block; margin-bottom: 15px;}
.ContentIntroBox p.english{font-weight: 300; color:#666; font-size: 0.95em;}
.ContentIntroBox p.english span{display: block; margin-bottom: 10px;}
.HeaderBox1{ text-align: center; position: relative; font-weight: 600;}
.HeaderBox1:after{ position: absolute; content: ''; width: 135px; height: 9px; border-radius: 100px; background-color: #fff685; left: 0; right: 0; margin: auto; bottom: -40px; }
.HeaderBox1 .HeaderFontLarge{ background-color: #fff685; max-width: 450px; margin: auto; color: #000; font-size: 24px; font-weight: 600; padding: 20px 30px; border-radius: 100px; text-align: center; display: flex; justify-content: center; }
.HeaderBox1 .HeaderFontLarge img{ width: 100%; height: auto; max-width: 50px; margin-right: 20px; }
.HeaderBox1 .CaptionFontLarge{ font-size: 22px; color: #666; margin: 15px 0; font-weight: 300;}

.OrderChannels{ text-align: center; padding: 20px 0 100px 0; }
/* PlatformLR */
.PlatformLR{ margin: auto; margin-top: 100px; }
.PlatformLR ul{ list-style: none; display: flex; justify-content: center; flex-wrap: nowrap; gap:5%;}
.PlatformLR ul li{ width: 45%; }
.PlatformLR ul li a{ display: block; background-color: rgba(255, 255, 255, 0.65); border: 3px solid #fff; border-radius: 25px; padding: 40px 20px; max-width: 340px; margin: 0 auto;}
.PlatformLR ul li img{ width: 100%; height: auto; max-width: 180px; max-height: 80px; }

.HeaderBox2{ text-align: center; position: relative; font-weight: 600;}
.HeaderBox2:after{ position: absolute; content: ''; width: 105px; height:7px; border-radius: 100px; background-color: #fff685; left: 0; right: 0; margin: auto; bottom: -20px; }
.HeaderBox2 .HeaderFontLarge{ background-color: #fff685; max-width: 600px; margin: auto; color: #000; font-size: 22px; font-weight: 600; padding: 17px 20px; border-radius: 100px; text-align: center; display: flex; justify-content: center; }
.HeaderBox2 .HeaderFontLarge img{ width: 100%; height: auto; max-width: 30px; margin-right: 15px; }
.HeaderBox2 .CaptionFontLarge{ font-size: 22px; color: #666; margin: 10px 0; font-weight: 300;}

/* SNSBoxLR */
.SNSBoxLR{ max-width: 1160px; margin: auto; margin-top: 100px; }
.SNSBoxLR ul{ list-style: none; display: flex; justify-content: center; flex-wrap: nowrap; gap: 5%;}
.SNSBoxLR ul li{ width: 45%; }
.SNSBoxLR ul li a{ display: block; background-color: rgba(255, 255, 255, 0.65); border: 3px solid #fff; border-radius: 25px; padding: 30px 20px; max-width: 320px; margin: auto; margin-top: 40px; }
.SNSBoxLR ul li img{ width: auto; height: 50px; max-width: 180px; }

.KVBox{ width: auto; margin: auto;  margin-top: 0px;}
.KVBox img{ width: 100%; height: auto; max-width: 100%; border-radius: 40px 40px 0 0; }
.PC{ display: block;}
.SP{ display: none;}
.IntroBG{ width: auto; max-width: 1160px; margin: auto; background-image: linear-gradient(to bottom, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%); }

/* GSAP animation reveal styles */
.gs_reveal {
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.gs_reveal_2 {
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.gs_reveal_3 {
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}