@charset "utf-8";

@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 100;
  src: url(../../../../assets/fonts/NotoSansThai/NotoSansThai-Thin.ttf) format('truetype')
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 200;
  src: url(../../../../assets/fonts/NotoSansThai/NotoSansThai-ExtraLight.ttf) format('truetype')
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 300;
  src: url(../../../../assets/fonts/NotoSansThai/NotoSansThai-Light.ttf) format('truetype')
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 400;
  src: url(../../../../assets/fonts/NotoSansThai/NotoSansThai-Regular.ttf) format('truetype')
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 500;
  src: url(../../../../assets/fonts/NotoSansThai/NotoSansThai-Medium.ttf) format('truetype')
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 600;
  src: url(../../../../assets/fonts/NotoSansThai/NotoSansThai-SemiBold.ttf) format('truetype')
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 700;
  src: url(../../../../assets/fonts/NotoSansThai/NotoSansThai-Bold.ttf) format('truetype')
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 800;
  src: url(../../../../assets/fonts/NotoSansThai/NotoSansThai-ExtraBold.ttf) format('truetype')
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 900;
  src: url(../../../../assets/fonts/NotoSansThai/NotoSansThai-Black.ttf) format('truetype')
}
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 100;
  src: url(../../../../assets/fonts/NotoSerifThai/NotoSerifThai-Thin.ttf) format('truetype')
}
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 200;
  src: url(../../../../assets/fonts/NotoSerifThai/NotoSerifThai-ExtraLight.ttf) format('truetype')
}
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 300;
  src: url(../../../../assets/fonts/NotoSerifThai/NotoSerifThai-Light.ttf) format('truetype')
}
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 400;
  src: url(../../../../assets/fonts/NotoSerifThai/NotoSerifThai-Regular.ttf) format('truetype')
}
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 500;
  src: url(../../../../assets/fonts/NotoSerifThai/NotoSerifThai-Medium.ttf) format('truetype')
}
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 600;
  src: url(../../../../assets/fonts/NotoSerifThai/NotoSerifThai-SemiBold.ttf) format('truetype')
}
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 700;
  src: url(../../../../assets/fonts/NotoSerifThai/NotoSerifThai-Bold.ttf) format('truetype')
}
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 800;
  src: url(../../../../assets/fonts/NotoSerifThai/NotoSerifThai-ExtraBold.ttf) format('truetype')
}
@font-face {
  font-family: 'Noto Serif Thai';
  font-style: normal;
  font-weight: 900;
  src: url(../../../../assets/fonts/NotoSerifThai/NotoSerifThai-Black.ttf) format('truetype')
}

/*--------------------------------------------------------
	reset 
---------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; }
ul,ol { list-style-type: none; }
em,strong,th,address { font-style: normal; font-weight: normal; text-align: left; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; }
img,
object,
embed { border: 0; vertical-align: top; }
img { max-width: 100%; height: auto; }
hr { display: none; }
table { border-collapse: collapse; border-spacing: 0; font-size: 100%; }
li { list-style-type: none; }
strong { font-weight: bold; }

/*--------------------------------------------------------
	base 
---------------------------------------------------------*/
body { background: #000; font-family: 'Noto Sans Thai', sans-serif; font-weight: 400; line-height: 1.8; font-size: 1.5rem; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust:100%;}
a:link { color: #14233e; text-decoration: none; }
a:visited { color: #14233e; text-decoration: none; }
a:hover,a:active { text-decoration: underline; }
.wrapper{ overflow: hidden;}
.clear::after { content:" "; display:block; clear:both;}/*clearfix*/
.serif{ font-family: 'Noto Serif Thai',serif; }
/*anime set
------------------------*/
#main .logo_60th_anniversary,
#main .title_box_inner,
#main .main_img img { visibility: hidden;}

/*-------------------------------------------------
	header
--------------------------------------------------*/
header{ position: absolute; left: 0px; top: 0px; width: 100%; height: 0px;}
.logo{ width: 130px; padding: 0; position:absolute; left: 35px; top: 35px; z-index: 500; transition: 0.5s;}
@media screen and (max-width: 896px) and (orientation: landscape) {
.logo{ width: 90px; position:absolute; left: 13px; top: 20px;}
}/*END*/
@media (max-width: 480px) {
.logo{ width: 100px; position:absolute; left: 20px; top: 20px;}
}/*END*/
@media (max-width: 400px) {
.logo{ width: 90px; position:absolute; left: 13px; top: 20px;}
}/*END*/

/*-------------------------------------------------
	main
---------------------------------------------------*/
.main_pc{display:inline; }
.main_sp{display:none; }
@media (max-width:768px){
.main_pc{display:none; }
.main_sp{display:inline; }
}/*END*/
#main { width: 100%; max-height: 60vw; position: relative; overflow: hidden; background: #000; }
/*main_img*/
#main .main_img { width: 135%; max-height:100%; background: #000; position: absolute; left: 0%; top:0vw; z-index: 2;  display: flex; align-items: center; justify-content: center;}
#main .main_img img{ width:auto; height: auto; max-width:100%;  max-height:60vw; height: 100vh; }
/*title_box*/
#main .title_box{ max-height:60vw; width: 57%; height: 100vh; position: relative; z-index: 2; text-align: center; display: flex; align-items: center; justify-content: center;  transition: .5s; }
#main .title_box div { margin-top: 4vh; }
#main .title_box div h1 small{ font-size: 22px; line-height: 1.5; letter-spacing: .5px; margin-bottom: 4px; color: #fff; display: block; }
#main .title_box div h1{ font-size: 46px; line-height: 1.6; letter-spacing: 1px; color: #fff; font-family: 'Noto Serif Thai',serif; }
#main .title_box div h1 span{ display: inline-block;}
#main .title_box .logo_60th_anniversary{ margin: 55px auto 0; width: 230px;}

/* w 1400px 
-----------------------*/
@media screen and (max-width: 1400px) {
#main .title_box div h1 small{ font-size: 1.53vw; line-height: 1.5; letter-spacing: 0.05vw; margin-bottom: .45vw; color: #fff; display: block; }
#main .title_box div h1{ font-size: 3.3vw; line-height: 1.6; letter-spacing: 0.05vw;}
#main .title_box .logo_60th_anniversary{ margin: 3.8vw auto 0; width: 16.5vw;}
}/*END*/

/* w 896px / SP 横
-----------------------*/
@media screen and (max-width: 896px) and (orientation: landscape){
.main_pc{display:inline; }
.main_sp{display:none; }
}/*END*/

/* w 768px 縦
-----------------------*/
@media screen and (max-width: 768px) and (orientation: portrait){
#main { width: 100%;  max-height: 100vh; height: 100vh; position: relative; overflow: hidden; background: #000; }
/*main_img*/
#main .main_img { width: 1000px; max-height:auto; height:auto; height: auto; background: #000; position: absolute; left: 50%; top:0vw; z-index: 2; margin-left: -500px; text-align: center;  display: flex; align-items: center; justify-content: center; transition: .5s; }
#main .main_img img{ width:auto;  max-height:70vh; }
/*title_box*/
#main .title_box{ max-height:100%; width: 95%; height: 45vh; position: absolute; left: 2.5%; bottom:0px; z-index: 2; text-align: center; display: flex; align-items: center; justify-content: center;  transition: .5s; }
#main .title_box div { margin-top: 0vh; }
#main .title_box div h1 small{ font-size: 3.4vw; line-height: 1.4; letter-spacing: 0.05vw; margin-bottom: .45vw; color: #fff; display: block; }
#main .title_box div h1{ font-size: 7.4vw; line-height: 1.6; letter-spacing: 0.05vw; }
#main .title_box .logo_60th_anniversary{ margin: 5vw auto 0; width: 40%; max-width: 240px;}
}/*END*/

/* w 480px 縦
-----------------------*/
@media screen and (max-width: 480px) {/*sp*/
/*main_img*/
#main .main_img img{ width:auto;  max-height:60vh; }
/*title_box*/
#main .title_box{ max-height:100%; width: 95%; height: 38vh; position: absolute; bottom:0px;  }
#main .title_box div { margin-top: 0vh; }
#main .title_box div h1 small{ font-size: 3.4vw; line-height: 1.4; letter-spacing: 0.05vw; margin-bottom: .45vw; color: #fff; display: block; }
#main .title_box div h1{ font-size: 7.4vw; line-height: 1.6; letter-spacing: 0.05vw; }
#main .title_box .logo_60th_anniversary{ margin: 5vw auto 0; width: 40%; max-width: 240px;}
}/*END*/

/*-------------------------------------------------
	base
---------------------------------------------------*/
h2{ font-size: 18px; line-height: 1; letter-spacing: 9px; font-family: Helvetica, Arial, "sans-serif"; position: relative;  z-index: 1; }
@media screen and (max-width: 480px) {
h2{ font-size: 18px; line-height: 1; letter-spacing: 7px; }
}/*END*/

/*-------------------------------------------------
	CONCEPT
---------------------------------------------------*/
#concept { padding: 80px 0 80px; position: relative; text-align: center; background: linear-gradient(to right, #131e37 10%, #000000 100%);}
#concept .txt {  margin: 60px auto 0; width: 85%; max-width: 1000px; position: relative;  z-index: 1; }
#concept .txt p{ font-size:16px; line-height: 2.3; letter-spacing: .5px; }
#concept .txt p span{ display: inline-block;}
@media screen and (max-width: 768px) {/*tab*/
#concept { padding: 60px 0 60px; position: relative; background: linear-gradient(120deg, #131e37 10%, #000000 100%);}
#concept .txt {  margin: 50px auto 0; width: 85%; text-align: left; }
#concept .txt p{ font-size:16px; line-height: 2.3; letter-spacing: 0px; }
#concept .txt p br.concept_txt_br{ display: none;}
}/*END*/
@media screen and (max-width: 480px) {/*sp*/
#concept { padding: 60px 0 60px; position: relative; }
#concept .txt {  margin: 50px auto 0; width: 85%; text-align: left; }
#concept .txt p{ font-size:15px; line-height: 2.1; letter-spacing: 0px; }
#concept .txt p br.concept_txt_br{ display: none;}
}/*END*/

/*-------------------------------------------------
  SPRING DRIVE
---------------------------------------------------*/
#sd {color: #000; background: #fff; }
#sd .sd_read{ width: 90%; margin: 0 auto; padding: 68px 0; text-align: center; }
#sd .sd_read h2{ font-size: 30px; line-height: 1.6; letter-spacing: 0px; font-weight: 400;}
#sd .sd_read h2 span{ display: inline-block;}
@media screen and (max-width: 600px) {
#sd .sd_read{ width: 95%; margin: 0 auto; padding: 50px 0; text-align: center; }
#sd .sd_read h2{ font-size: 4.8vw; line-height: 1.5;  }
}/*END*/

/*sd_head_img*/
#sd .sd_head_img{ overflow: hidden;background: #000;}
#sd .sd_head_img .box_l,
#sd .sd_head_img .box_r{ float: left; width: 50%; overflow: hidden;}
#sd .sd_head_img .box_l img,
#sd .sd_head_img .box_r img{ width: 100%;}
/* pc / sp*/
#sd .sd_head_img .pc{display:inline; }
#sd .sd_head_img .sp{display:none; }
@media (max-width:768px){
#sd .sd_head_img .pc{display:none; }
#sd .sd_head_img .sp{display:inline; }
}/*END*/

/*----------------------
  sd base
-----------------------*/
#sd section{  width: 80%; max-width:1000px; margin: 0 auto;}
#sd hr{ border: 0; width: 90%; max-width: 1300px; height: 1px; display: block; margin: 0 auto; background-image: linear-gradient(to right, #fff 0%, #ccc 50%, #fff 100%);}
#sd h3{ margin-top:85px; font-size: 35px; line-height: 1.4; letter-spacing: 0px;}
#sd h3 span{ display: inline-block;}
#sd p.txt{ font-size: 15px; line-height: 2.1;}
#sd p.txt_caption{ font-size: 14px; line-height: 1.4; letter-spacing: 0px;}
@media screen and (max-width: 768px) {/*tab*/
#sd h3{ margin-top:70px;  font-size: 35px; line-height: 1.4; }
#sd h3 br{ display: none;}
}/*END*/
@media screen and (max-width: 600px) {
#sd h3{ margin-top:70px;  font-size: 30px; line-height: 1.3; }
#sd p.txt_caption span{ display: block;}
}/*END*/
@media screen and (max-width: 550px) {
#sd p.txt_caption span{ display: inline-block;}
}/*END*/
@media screen and (max-width: 480px) {/*sp*/
#sd section{  width: 85%; max-width:1000px; margin: 0 auto;}
#sd h3{ margin-top:50px; font-size: 29px; line-height: 1.3; }
#sd p.txt{ font-size: 15px; line-height: 1.9;}
}/*END*/

/*----------------------
  sd01
-----------------------*/
.sd01{ padding: 20px 0 90px;}
.sd01 p.txt{ margin-top: 40px;}
.sd01_lr { margin: 40px 0 0 3%; }
.sd01_lr .box_l{ float: left; width: 56%; }
.sd01_lr .box_r{ float: left; width: 40%; }
.sd01_lr .box_l,
.sd01_lr .box_r{ text-align: center;}
.sd01_lr .box_l p,
.sd01_lr .box_r p{ margin-top: 0px; font-size: 14px; line-height: 1.5;}
.sd01_lr p span{ display: inline-block;}
@media screen and (max-width: 900px) {/*tab*/
.sd01 h3 br{ display: none;}
}/*END*/
@media screen and (max-width: 768px) {/*tab*/
.sd01{ padding: 0px 0 80px;}
}/*END*/
@media screen and (max-width: 550px) {
.sd01_lr { margin: 40px auto 0; width: 100%;  }
.sd01_lr .box_l,
.sd01_lr .box_r{ float: none; width: 100%;  }
.sd01_lr .box_l img{ width: 100%; max-width: 560px;}
.sd01_lr .box_r img{ width: 80%; max-width: 400px;}
.sd01_lr .box_r{  margin-top: 50px;}
.sd01_lr .box_r p{ margin-top: 12px;}
}/*END*/
@media screen and (max-width: 480px) {/*sp*/
.sd01{ padding: 0px 0 60px;}
.sd01 p.txt{ margin-top: 25px;}
}/*END*/

/*----------------------
  sd02
-----------------------*/
.sd02 { padding: 0px 0 90px;}
.sd02 p.txt{ margin-top: 40px;}
.sd02_lr { position: relative; }
.sd02_lr .box_l{ float: left; width: 48%; }
.sd02_lr .box_r{ width: 49%; position: absolute; top: 20%; right: -3%; text-align: center;}
.sd02_lr .box_r .txt_caption{ position: relative; z-index: 2; top: -10px;}
@media screen and (max-width: 1024px) {
.sd02{ padding: 0px 0 40px;}
.sd02_lr .box_l{ float: none; width: 100%; }
.sd02_lr .box_r{ width: 100%; position: relative; top: 3vw; right: 0%; padding-bottom: 40px;}
.sd02_lr .box_r img{ width: 90%; max-width: 490px;}
.sd02_lr .box_r .txt_caption{ position: relative; z-index: 2; top: -10px;}
}/*END*/
@media screen and (max-width: 768px) {/*tab*/
.sd02{ padding: 0px 0 30px;}
.sd02_lr .box_r img{ position: relative; bottom:auto; right: auto; margin: 30px auto 0; width: 90%; max-width: 490px;}
}/*END*/
@media screen and (max-width: 480px) {/*sp*/
.sd02{ padding: 0px 0 20px;}
.sd02 p.txt{ margin-top: 25px;}
.sd02_lr .box_r img{ position: relative; bottom:auto; right: auto; margin: 20px auto 0;}
.sd02_lr .box_r .txt_caption{ position: relative; z-index: 2; top: 0px;}
}/*END*/

/*----------------------
  sd03
-----------------------*/
.sd03 { padding: 0px 0 100px;}
.sd03 p.txt{ margin-top: 40px;}
.sd03 .sd03_img{ margin: 50px 0 0 20%; width: 74%; }
@media screen and (max-width: 768px) {/*tab*/
.sd03{ padding: 0px 0 70px;}
.sd03 .sd03_img{ margin: 40px auto 0%; width: 97%; }
}/*END*/
@media screen and (max-width: 480px) {/*sp*/
.sd03{ padding: 0px 0 50px;}
.sd03 p.txt{ margin-top: 25px;}
}/*END*/

/*----------------------
  sd04
-----------------------*/
.sd04 { padding: 90px 0 140px;}
.sd04_lr { background: #; position: relative;}
.sd04_lr .box_r h3{ margin-top:0px!important;}
.sd04_lr .box_r p.txt{ margin-top: 40px;}
.sd04_lr .box_r{ float: right; width: 49%; }
.sd04_lr .box_l{ float: left; width: 46%; position: absolute; top:0px; left: 0%; }
.sd04_lr .box_l .img{ width: 114%; position: absolute; top:40px; right: 0%; }
.sd04_lr .box_l .img img{ width: 100%; position: absolute; top:0px; right: 0%; }
@media screen and (max-width: 1100px) {
.sd04 { padding: 80px 0 0px;}
.sd04_lr .box_r{ float: none; width: 100%; }
.sd04_lr .box_l{ float: none; width: 100%; position: relative; top:inherit; left: inherit; }
.sd04_lr .box_l .img{ margin-top: 40px; width: 100%; position: relative; top:0px; right: 0%; text-align: center; }
.sd04_lr .box_l .img img{ width: 95%; max-width: 526px;  position: relative; top:0px; right: 0%; }
}/*END*/
@media screen and (max-width: 768px) {/*tab*/
.sd04 { padding: 70px 0 0px;}
.sd04_lr .box_l .img img{  right: 3%; }
}/*END*/
@media screen and (max-width: 480px) {/*sp*/
.sd04 { padding: 50px 0 0px;}
.sd04_lr .box_r p.txt{ margin-top: 25px;}
}/*END*/

/*-------------------------------------------------
	DESIGN
--------------------------------------------------*/
#design{ overflow: hidden; }
#design .txt{ font-size: 15px; line-height: 2.2; letter-spacing: 1px; }
@media screen and (max-width: 768px) {
#design .txt{ font-size: 15px; line-height: 2.1; letter-spacing: 0.5px; }
}/*END*/
#design .pc{display:inline; }
#design .sp{display:none; }
@media (max-width:1024px){
#design .pc{display:none; }
#design .sp{display:inline; }
}/*END*/

/*----------------------
  de01
-----------------------*/
.de01{ padding: 0px; text-align: center; position: relative; z-index: 0; overflow: hidden;}
.de01 h2{ padding: 90px 0 0 0;}
/*de01_lr*/
.de01 .de01_lr{ max-width: 1200px; width: 90%; margin: 70px auto 0;  text-align: left;  display: flex; align-items: center; justify-content: center; }
.de01 .de01_lr .box_l{ width: 45.9%; max-width: 550px; margin-left: 2%; }
.de01 .de01_lr .box_r{ width: 38.4%; height: 100%; text-align: left; margin-left: 9.8%;  }
.de01 .de01_lr .box_r .txt{ font-size: 15px; line-height: 2.1; }
@media screen and (max-width: 1024px) {
.de01{ padding: 0px 0 80px; text-align: center; position: relative; z-index: 0; overflow: hidden;}
.de01 h2{ padding: 90px 0 0 0;}
.de01 .de01_lr{ max-width: 100%; width: 100%; margin: 70px auto 0;  display: block;}
.de01 .de01_lr .box_l{ width: 70%; max-width: 550px; margin: 0 auto; position: relative; z-index: 1;}
.de01 .de01_lr .box_r{ width: 100%; text-align: left; margin: -60px auto 0; padding: 0px 0; position: relative; z-index: 2;}
.de01 .de01_lr .box_r .txt{ width: 80%; margin: 0 auto;  max-width: 650px;}
}/*END*//*
/* bg01*/
.de01 .de01_bg{ }
.de01 .de01_bg{ width: 3000px; height: 3000px;  position: absolute; left: 80%; top: -15%; margin: -1500px 0 0 -1500px; z-index: -1; background: radial-gradient(circle closest-side, #17213e 0%, #000 100%); }
@media screen and (max-width: 850px) {
.de01 .de01_bg{ width: 300vw; height: 300vw;  position: absolute; left: 80%; top: 0; margin: -150vw 0 0 -150vw; z-index: -1; }
}/*END*/
@media screen and (max-width: 768px) {
.de01 .de01_lr .box_r{ width: 100%; text-align: left; margin: -10vw auto 0; padding: 0px 0; position: relative; z-index: 2;}
}/*END*/
@media screen and (max-width: 480px) {
.de01 h2{ padding: 70px 0 0 0;}
.de01 .de01_lr{ max-width: 100%; width: 100%; margin: 55px auto 0;  display: block;}

.de01 .de01_bg{ width: 400vw; height: 400vw;  position: absolute; left: 100%; top: 0; margin: -200vw 0 0 -200vw; z-index: -1; }
}/*END*/

/*----------------------
  de02
-----------------------*/
.de02{ padding: 0px; height: 700px; width: 100%;  position: relative; z-index: 1; overflow: hidden; }
.de02 .img{ width: 1922px; position: absolute; left: 50%; top: 0px; margin-left:-960px;  z-index: 1;  }
.de02 .txt_box { height: 100%; width: 55%;  display: flex; align-items: center; justify-content: center; text-align: left; position: relative; z-index: 2; }
.de02 .txt_box .txt{  width: 65%; max-width: 480px; }
@media screen and (max-width: 1450px) {
.de02 .img{ width: 1922px; position: absolute; left: 50%; top: 0px; margin-left:-990px;  z-index: 1;  }
.de02 .txt_box { height: 100%; width: 50%; }
}/*END*/
@media screen and (max-width: 1024px) {
.de02{ padding: 0px 0 80px; height: auto; width: 100%;  position: relative; z-index: 1; }
.de02 .img{ width: 100%; position: relative; left:0; top:0; margin-left:0px;  z-index: 1;  }
.de02 .txt_box { height: auto; width: 80%;  max-width: 650px; margin: 20px auto; display: block; align-items: center; justify-content: center; text-align: left;}
.de02 .txt_box .txt{  width: 100%; max-width: 1024px;  z-index: 2; }
}/*END*/
@media screen and (max-width: 768px) {
.de02{ padding: 0px 0 60px; height: auto; width: 100%;  position: relative; z-index: 1; }
.de02 .img{ width: 130%; position: relative; left:0; top:0; margin-left:-12%;  z-index: 1;  }
.de02 .txt_box { height: auto; width: 80%; margin: 20px auto; display: block; align-items: center; justify-content: center; text-align: left;}
.de02 .txt_box .txt{  width: 100%; max-width: 1024px;  z-index: 2; }
}/*END*/

/*----------------------
  de03
-----------------------*/
.de03{ padding: 0px; height: 700px; width: 100%;  position: relative; z-index: 1; overflow: hidden;  }
.de03 .img{ width: 933px; position: absolute; left: 0%; top: 0px;  z-index: 1; }
.de03 .txt_box { float: right; right: 0px; height: 100%; width: 45%; display: flex; align-items: center; justify-content: center; text-align: left; position: relative; z-index: 2; }
.de03 .txt_box .txt{  width: 65%; max-width: 480px; }
@media screen and (max-width: 1600px) {
.de03 .txt_box { float: right; right: 0px; height: 100%; width: 40%; display: flex; align-items: center; justify-content: center; text-align: left; position: relative; z-index: 2; }
}/*END*/
@media screen and (max-width: 1500px) {
.de03 .img{ width: 933px; position: absolute; left: -100px; top: 0px; z-index: 1;  }
.de03 .txt_box { float: right; right: 0px; height: 100%; width: 40%; display: flex; align-items: center; justify-content: center; text-align: left; position: relative; z-index: 2; }
}/*END*/
@media screen and (max-width: 1250px) {
.de03 .img{ width: 933px; position: absolute; left: -180px; top: 0px; z-index: 1;  }
}/*END*/
@media screen and (max-width: 1200px) {
.de03 .img{ width: 933px; position: absolute; left: -180px; top: 0px; z-index: 1;  }
.de03 .txt_box .txt{  width: 80%; max-width: 480px; }
}/*END*/
@media screen and (max-width: 1150px) {
.de03 .img{ width: 933px; position: absolute; left: -250px; top: 0px; z-index: 1;  }
}/*END*/
@media screen and (max-width: 1024px) {
.de03{ padding: 0px 0 80px; height: auto; width: 100%; position: relative; z-index: 1; }
.de03 .img{ width: 100%; position: relative; left:0; top:0; margin-left:0px;  z-index: 1;  }
.de03 .txt_box { float: none; height: auto; width: 80%; max-width: 650px;  margin: 40px auto 0; display: block; align-items: center; justify-content: center; text-align: left;}
.de03 .txt_box br{ display: none;}
.de03 .txt_box .txt{  width: 100%; max-width: 1024px;  z-index: 2; }
}/*END*/

/*----------------------
  de04
-----------------------*/
.de04{ padding: 0px; height: 700px; width: 100%;  position: relative; z-index: 1; overflow: hidden; }
.de04 .img{ width: 1922px; position: absolute; left: 50%; top: 0px; margin-left:-960px;  z-index: 1;  }
.de04 .txt_box { height: 100%; width: 68%;  display: flex; align-items: center; justify-content: center; text-align: left; position: relative; z-index: 2; }
.de04 .txt_box .txt{  width: 100%; max-width: 480px; }
.de04 .txt_box .img2{ margin-top: 40px; width: 90%; max-width: 379px; }
@media screen and (max-width: 1300px) {
.de04 .img{ width: 1922px; position: absolute; left: 44%; top: 0px; margin-left:-960px;  z-index: 1;  }
.de04 .txt_box { height: 100%; width: 65%;  display: flex; align-items: center; justify-content: center; text-align: left; position: relative; z-index: 2; }
.de04 .txt_box .txt{  width: 75%; max-width: 480px; }
.de04 .txt_box .img2{ margin-top: 40px; width: 70%; max-width: 379px; }
}/*END*/
@media screen and (max-width: 1024px) {
.de04{ padding: 0px 0 80px; height: auto; width: 100%;  position: relative; z-index: 1; }
.de04 .img{ width: 100%; position: relative; left:0; top:0; margin-left:0px;  z-index: 1;  }
.de04 .txt_box { height: auto; width: 80%;  max-width: 550px;  margin: 20px auto; display: block; align-items: center; justify-content: center; text-align: left;}
.de04 .txt_box .txt{  width: 100%; max-width: 1024px;  z-index: 2; }
.de04 .txt_box .img2{ margin: 40px auto 0; width: 70%; max-width: 379px; }
}/*END*/
@media screen and (max-width: 768px) {
.de04{ padding: 0px 0 60px; height: auto; width: 100%;  position: relative; z-index: 1; }
.de04 .img{ width: 130%; position: relative; left:0; top:0; margin-left:-15%;  z-index: 1;  }
.de04 .txt_box { height: auto; width: 80%;  margin: 20px auto; display: block; align-items: center; justify-content: center; text-align: left;}
.de04 .txt_box .txt{  width: 100%; max-width: 1024px;  z-index: 2; }
.de04 .txt_box .img2{ margin: 40px auto 0; width: 70%; max-width: 379px; }
}/*END*/

/*-------------------------------------------------
	JP EDITION
--------------------------------------------------*/
#jp_edition{ overflow: hidden; }
/*----------------------
  read
-----------------------*/
#jp_edition .read { padding: 80px 0 90px; width: 100%; position: relative; text-align: center; background: linear-gradient(to right, #00303e 10%, #000000 100%);}
#jp_edition .read img{ max-width: 165px; width: 30%;}
#jp_edition .read h2{ margin: 32px auto 0; width: 85%; font-size: 28px; line-height: 1.8; letter-spacing: 2px; }
#jp_edition .read h2 span{ display: inline-block;}
#jp_edition .read .txt{ margin: 23px auto 0; width: 90%; }
#jp_edition .read .txt span{ display: inline-block;}
#jp_edition .txt{ width: 85%; font-size: 15px; line-height: 2.4; letter-spacing: 1.5px; }
@media screen and (max-width: 768px) {
#jp_edition .read { padding: 70px 0 80px; }

#jp_edition .read h2{ margin: 32px auto 0; width: 85%; font-size: 26px; line-height: 1.7; letter-spacing: 2px; }
#jp_edition .read .txt{ margin: 23px auto 0; width: 85%; }

#jp_edition .read .txt br{ display: none; }
#jp_edition .txt{ width: 95%; margin: 0 auto; font-size: 15px; line-height: 2.1; letter-spacing: 1.5px; }
}/*END*/
@media screen and (max-width: 480px) {
#jp_edition .read { padding: 60px 0 60px; }
#jp_edition .read h2{ margin: 32px auto 0; width: 85%; font-size: 24px; line-height: 1.6; letter-spacing: 1px; }
#jp_edition .read .txt{ text-align: left;}
}/*END*/
@media screen and (max-width: 400px) {
#jp_edition .read h2{ margin: 32px auto 0; width: 85%; font-size: 6vw; line-height: 1.5; letter-spacing: 0px; }
}/*END*/
#jp_edition .pc{display:inline; }
#jp_edition .sp{display:none; }
@media (max-width:1024px){
#jp_edition .pc{display:none; }
#jp_edition .sp{display:inline; }
}/*END*/

/*----------------------
  explanation
-----------------------*/
.explanation{ padding: 0px; height: 798px; width: 100%;  position: relative; z-index: 1; overflow: hidden; }
.explanation .img{ width: 1922px; position: absolute; left: 48%; top: 0px; margin-left:-960px;  z-index: 1;  }
.explanation .txt_box { height: 100%; width: 63%;  display: flex; align-items: center; justify-content: center; text-align: left; position: relative; z-index: 2; }
.explanation .txt_box .txt{  width: 65%; max-width: 500px; }
@media screen and (max-width: 1450px) {
.explanation .img{ width: 1922px; position: absolute; left: 48%; top: 0px; margin-left:-990px;  z-index: 1;  }
.explanation .txt_box { height: 100%; width: 55%; }
}/*END*/
@media screen and (max-width: 1024px) {
.explanation{ padding: 0px 0 80px; height: auto; width: 100%;  position: relative; z-index: 1; }
.explanation .img{ width: 100%; position: relative; left:0; top:0; margin-left:0px;  z-index: 1;  }
.explanation .txt_box { height: auto; width: 80%;  max-width: 650px; margin: 20px auto; display: block; align-items: center; justify-content: center; text-align: left;}
.explanation .txt_box .txt{  width: 100%; max-width: 1024px;  z-index: 2; }
}/*END*/
@media screen and (max-width: 768px) {
.explanation{ padding: 0px 0 70px;  }
.explanation .img{ width: 130%; position: relative; left:0; top:0; margin-left:-12%;  z-index: 1;  }
.explanation .txt_box { height: auto; width: 85%; margin: 20px auto; display: block; align-items: center; justify-content: center; text-align: left;}
.explanation .txt_box .txt{  width: 100%; max-width: 1024px;  z-index: 2; }
}/*END*/
@media screen and (max-width: 480px) {
.explanation{ padding: 0px 0 50px;}
}/*END*/

/*-------------------------------------------------
	COLLECTIONS
--------------------------------------------------*/
#collections  { background: #e6e6e6; color: #000; padding: 0 0px 0; position: relative; text-align: center; z-index: 1; }
#collections .inner{ max-width: 780px; width: 90%; margin: 0 auto;  padding: 100px 0 100px; transition: 0.5s;}
@media screen and (max-width: 750px) {
#collections .inner{ max-width: 780px; width: 95%; margin: 0 auto;  padding: 60px 0;}
}/*END*/
#collections .inner::after { content:" "; display:block; clear:both;}/*clearfix*/
#collections .inner .inner_L{ float: left; width: 43%; background: #;}
#collections .inner .inner_R{ float: left; width: 57%;background: #;}
@media screen and (max-width: 750px) {
#collections .inner::after { content:" "; display:block; clear:both;}/*clearfix*/
#collections .inner .inner_L{ float: none; width: 100%; margin: 0 auto;}
#collections .inner .inner_R{ float: none; width: 100%; margin: 7vw auto 0;}
}/*END*/
#collections .collections_img { max-width: 300px; margin: 0 auto; }
@media screen and (max-width: 750px) {
#collections .collections_img { max-width: 250px; width: 45%; margin: 0 auto; }
#collections .collections_img img{ margin-left: 0%; }
}/*END*/
#collections .collections_name { margin-top: 100px; font-size: 16px; line-height: 1.6; letter-spacing: 0px; font-weight: 500; }
#collections .collections_name span{ display: inline-block;}
@media screen and (max-width: 750px) {
#collections .inner::after { content:" "; display:block; clear:both;}/*clearfix*/
#collections .collections_name { margin-top: 25px; width: 90%; margin: 0 auto; font-size: 16px; line-height: 1.6; letter-spacing: 0px; }
}/*END*/
.collections_no { margin-top: 30px; font-size: 22px; line-height: 1;  letter-spacing: 2px; font-weight: 500; font-family: 'Noto Sans Thai', sans-serif;}
.collections_movement { margin-top: 3px; font-size: 14px; line-height: 1.6; letter-spacing: 1px; }
.collections_limited { margin-top: 20px; font-size: 14px; line-height: 1.6; font-weight: 500; letter-spacing: 1px; position: relative; display: inline-block;}
.collections_limited::after { position: absolute; display: block; content: ''; width: 100%; height: 2px; background: #111; }
.collections_release { margin-top: 27px; }
.collections_release p{ font-size: 13px; line-height: 1.6; letter-spacing: 0.5px;}
.collections_release p:nth-child(1){padding-bottom: 3px;}
@media screen and (max-width: 430px) {
.collections_release p{ font-size: 12px; line-height: 1.6; letter-spacing: 0px;}
}/*END*/
@media screen and (max-width: 370px) {
.collections_release p{ font-size: 11px; line-height: 1.6; letter-spacing: 0px;}
}/*END*/
/*collections_btn*/
.collections_btn { padding-top: 20px; }
.collections_btn a { margin: 0 auto; width: 160px; margin-top: 15px; background: #000; font-size: 13.5px; line-height: 1; font-weight: 500; padding: 14px 0; letter-spacing: 1px; color: #fff; display: block; transition: 0.3s; text-decoration: none; opacity: 1; }
.collections_btn a:hover { background: #1f364d; opacity: 1; }
@media screen and (max-width: 850px) {
.collections_btn a {  width: 160px;  padding: 16px 0;  }
}/*END*/

/*-------------------------------------------------
	footer 
---------------------------------------------------*/
footer { background: #1e2432; padding: 120px 0; position: relative; }
@media screen and (max-width: 500px) {
footer { padding: 60px 0; }
}/*END*/
footer .inner { max-width: 1200px; box-sizing: border-box; margin: 0 auto; padding: 0 50px; position: relative; }
@media screen and (max-width: 500px) {
footer .inner { padding: 0 15px; }
}/*END*/
footer .footer_wrapper { display: flex; justify-content: space-between; align-items: center; }
footer .footer_wrapper-logo { width: 140px; position: relative; z-index: 1; }
@media screen and (max-width: 500px) {
footer .footer_wrapper-logo { width: 110px; }
}/*END*/
footer .footer_wrapper-sns { display: flex; position: relative; z-index: 1; }
footer .footer_wrapper-sns li { width: 30px; margin-left: 20px; }
footer .footer-copyright { text-align: center; letter-spacing: 1px; font-size: 1.0rem; color: #ffffff; position: absolute; top: 50%; left: 0; right: 0; transform: translate(0,-50%); }
@media screen and (max-width: 900px) {
footer .footer-copyright { margin-top: 30px; position: relative; top: auto; left: auto; transform: none; }
}/*END*/
#page-top { width: 50px; position: fixed; bottom: 40px; right: 30px; z-index: 999; }
@media screen and (max-width: 500px) {
#page-top { width: 40px; bottom: 15px; right: 15px; }
}/*END*/