@charset "utf-8";

@import url('//fonts.googleapis.com/css?family=Noto+Sans:300,400,500,600&display=swap');
@import url('//fonts.googleapis.com/css?family=Noto+Serif:300,400,500&display=swap');
@import url('//fonts.googleapis.com/css?family=Montserrat:500&display=swap');

@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;
}

/*****************************************************************************
linkColor 
*****************************************************************************/

a:link {
color: #ffffff;
text-decoration: none;
}

a:visited {
color: #ffffff;
text-decoration: none;
}

a:hover,a:active {
text-decoration: underline;
}

/*****************************************************************************
clearfix 
*****************************************************************************/

.cb {
clear: both;
font-size: 1%;
height: 0;
line-height: 0;
}

.clearfix:after {
content: ".";
display: block;
height: 0.1px;
font-size: 0.1em;
line-height: 0; 
clear: both;
visibility: hidden; 
}

.clearfix {
display: inline-block;
}

/* Hide from IE-mac \*/

* html .clearfix { height: 1%; }
.clearfix { display:block; }

/* End hide from IE-mac */

/*****************************************************************************
base
*****************************************************************************/

html {
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
}
body {
background: #000000;
font-family: "Noto Sans Thai", sans-serif;
font-weight: 400;
line-height: 1.8;
font-size: 1.5rem;
color: #ffffff;
}


.noto-sans-thai {
font-family: "Noto Sans Thai", sans-serif;
}
.noto-serif-thai {
font-family: 'Noto Serif Thai', serif;
}

/*****************************************************************************
contents 
*****************************************************************************/

.inner {
max-width: 1520px;
box-sizing: border-box;
margin: 0 auto;
padding: 0 100px;
position: relative;
}
@media screen and (max-width: 1280px) {
.inner {
padding: 0 50px;
}
}
@media screen and (max-width: 500px) {
.inner {
padding: 0 15px;
}
}


.logo {
width: 120px;
position: absolute;
top: 40px;
left: 40px;
}
@media screen and (max-width: 900px) {
.logo {
width: 100px;
}
}
@media screen and (max-width: 500px) {
.logo {
width: 80px;
top: 15px;
left: 15px;
}
}


.hero {
margin-bottom: 138px;
padding: 0 15px;
position: relative;
}
@media screen and (max-width: 500px) {
.hero {
margin-bottom: 69px;
}
}
.hero-img {
width: 52.33333%;
margin: 0 auto;
}
@media screen and (max-width: 1280px) {
.hero-img {
width: 62.33333%;
}
}
@media screen and (max-width: 900px) {
.hero-img {
width: 82.33333%;
}
}
@media screen and (max-width: 500px) {
.hero-img {
width: 92.33333%;
}
}
.hero-img img {
margin-top: -37px;
}
@media screen and (max-width: 500px) {
.hero-img img {
margin-top: 0;
}
}
.hero-logo {
max-width: 150px;
margin: -35px auto 36px;
}
@media screen and (max-width: 900px) {
.hero-logo {
max-width: 120px;
}
}
@media screen and (max-width: 500px) {
.hero-logo {
max-width: 100px;
margin: 0 auto 18px;
}
}
.hero-title {
text-align: center;
font-weight: 300;
line-height: 1.3;
font-size: 3.6rem;
}
@media screen and (max-width: 500px) {
.hero-title {
font-size: 2.8rem;
}
}
.hero-title small {
margin-bottom: 5px;
font-weight: 500;
letter-spacing: 2px;
font-size: 1.5rem;
display: block;
}
.hero-bg {
width: 100%;
height: 50%;
background: url("../img/visual-bg.jpg") no-repeat center top;
background-size: cover;
position: absolute;
top: 24.096385%;
left: 0;
z-index: -1;
}
@media screen and (max-width: 1024px) {
.hero-bg {
height: 40%;
}
}
@media screen and (max-width: 500px) {
.hero-bg {
height: 30%;
}
}
.hero-bg:before {
content: '';
width: 100%;
height: 50%;
background: #000000;
position: absolute;
top: 0;
left: 0;
transform-origin: top;
transition: 4s;
transform: scale(1,1);
transition-delay: 1.0s;
}
.hero-bg.filter.scrollin:before {
transform: scale(1,0);
}
.hero-bg:after {
content: '';
width: 100%;
height: 50%;
background: #000000;
position: absolute;
bottom: 0;
left: 0;
transform-origin: bottom;
transition: 4s;
transform: scale(1,1);
transition-delay: 1.0s;
}
.hero-bg.filter.scrollin:after {
transform: scale(1,0);
}


.concept {
margin-bottom: 138px;
}
@media screen and (max-width: 500px) {
.concept {
margin-bottom: 69px;
}
}
.concept-title {
margin-bottom: 34px;
text-align: center;
font-weight: 500;
letter-spacing: 2px;
font-size: 1.6rem;
}
@media screen and (max-width: 500px) {
.concept-title {
margin-bottom: 17px;
}
}
.concept-text {
max-width: 750px;
margin: 0 auto;
}
.concept-text p {
line-height: 2;
}


.shizukuishi {
position: relative;
}
.shizukuishi-img {
width: 72.22222%;
background: url("../img/shizukuishi.jpg") no-repeat left center;
background-size: cover;
margin-left: auto;
overflow: hidden;
position: relative;
}
@media screen and (max-width: 1024px) {
.shizukuishi-img {
width: 100%;
}
}
.shizukuishi-img:after {
content: '';
padding-top: 780px;
display: block;
}
@media screen and (max-width: 1024px) {
.shizukuishi-img:after {
padding-top: 43.33333%;
}
}
.shizukuishi-block {
width: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
}
@media screen and (max-width: 1024px) {
.shizukuishi-block {
padding: 69px 0 138px;
position: relative;
top: auto;
left: auto;
transform: none;
}
}
@media screen and (max-width: 500px) {
.shizukuishi-block {
padding: 46px 0 69px;
}
}
.shizukuishi-title {
margin-bottom: 2em;
font-weight: 500;
letter-spacing: 2px;
font-size: 1.6rem;
}
.shizukuishi-text {
width: 60%;
}
@media screen and (max-width: 1024px) {
.shizukuishi-text {
width: 100%;
}
}
.shizukuishi-text p {
margin-bottom: 2em;
line-height: 2;
}
.shizukuishi-attention {
margin-bottom: 2em;
}
.shizukuishi-attention li {
margin-bottom: 10px;
padding-left: 1.2em;
text-indent: -1.2em;
line-height: 1.3;
font-size: 1.3rem;
}
.shizukuishi-btn {
max-width: 400px;
text-align: center;
}
.shizukuishi-btn a {
border: 1px solid #ffffff;
padding: 15px 0;
display: block;
transition: .6s;
}
.shizukuishi-btn a:hover {
background: #ffffff;
text-decoration: none;
color: #000000;
}


.visual {
margin-bottom: 138px;
position: relative;
}
@media screen and (max-width: 900px) {
.visual {
margin-bottom: 46px;
}
}
.visual:after {
content: '';
padding-top: 55.55555%;
display: block;
}
@media screen and (max-width: 900px) {
.visual:after {
display: none;
}
}
.visual.sbgw263 {
background: url("../img/bg01.jpg") no-repeat center center;
background-size: cover;
}
.visual.sbgw264 {
background: url("../img/bg02.jpg") no-repeat center center;
background-size: cover;
}
.visual.sbgw263 .visual-img {
width: 41.22222%;
margin-left: -41.22222%;
position: absolute;
top: 0;
left: 50%;
}
@media screen and (max-width: 900px) {
.visual.sbgw263 .visual-img {
width: 51.22222%;
margin: 0 auto;
position: relative;
top: auto;
left: auto;
}
}
.visual.sbgw264 .visual-img {
width: 42.27777%;
position: absolute;
top: 0;
left: 50%;
}
@media screen and (max-width: 900px) {
.visual.sbgw264 .visual-img {
width: 52.27777%;
margin: 0 auto;
position: relative;
top: auto;
left: auto;
}
}
.visual-block {
width: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
}
@media screen and (max-width: 900px) {
.visual-block {
display: none;
}
}
.visual-wrapper {
width: 50%;
}
.visual.sbgw263 .visual-wrapper {
margin-left: auto;
}
.visual-logo {
max-width: 150px;
margin: 0 auto 24px;
}
@media screen and (max-width: 900px) {
.visual-logo {
max-width: 120px;
}
}
@media screen and (max-width: 500px) {
.visual-logo {
max-width: 100px;
}
}
.visual-title {
padding: 0 15px;
text-align: center;
font-weight: 300;
font-size: 3.2rem;
}
@media screen and (max-width: 1280px) {
.visual-title {
font-size: calc(32vw * 100 / 1280)
}
}
@media screen and (max-width: 900px) {
.visual-title {
margin-bottom: 138px;
font-size: 3.0rem;
}
}
@media screen and (max-width: 500px) {
.visual-title {
margin-bottom: 69px;
line-height: 1.3;
font-size: 2.4rem;
}
}


.features {
padding-bottom: 138px;
position: relative;
}
@media screen and (max-width: 500px) {
.features {
padding-bottom: 69px;
}
}
.features:after {
content: '';
width: 100%;
padding-top: 60%;
position: absolute;
bottom: 0;
left: 0;
}
.features.sbgw263:after {
background: #111111; /* Old browsers */
background: -moz-linear-gradient(top,  #111111 0%, #000000 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #111111 0%,#000000 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #111111 0%,#000000 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.features.sbgw264:after {
background: #011414; /* Old browsers */
background: -moz-linear-gradient(top,  #011414 0%, #000808 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #011414 0%,#000808 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #011414 0%,#000808 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#011414', endColorstr='#000808',GradientType=0 ); /* IE6-9 */
}
.features-title {
border-top: 1px solid rgba(255,255,255,.1);
margin-bottom: 48px;
padding-top: 138px;
text-align: center;
font-weight: 500;
letter-spacing: 2px;
font-size: 1.6rem;
}
@media screen and (max-width: 500px) {
.features-title {
margin-bottom: 24px;
padding-top: 69px;
}
}
.features-img {
margin: 0 0 98px auto;
text-align: right;
position: relative;
z-index: 1;
}
@media screen and (max-width: 500px) {
.features-img {
margin: 0 0 49px auto;
}
}
.features.sbgw263 .features-img {
width: 74.5%;
}
@media screen and (max-width: 900px) {
.features.sbgw263 .features-img {
width: 94.5%;
}
}
.features.sbgw264 .features-img {
width: 73.88888%;
}
@media screen and (max-width: 900px) {
.features.sbgw264 .features-img {
width: 93.88888%;
}
}
.features-wrapper {
margin: 0 -50px;
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width: 1280px) {
.features-wrapper {
margin: 0 -25px;
}
}
@media screen and (max-width: 900px) {
.features-wrapper {
margin: 0;
display: block;
}
}
.features-text {
width: 50%;
box-sizing: border-box;
padding: 0 50px;
position: relative;
z-index: 1;
}
@media screen and (max-width: 1280px) {
.features-text {
padding: 0 25px;
}
}
@media screen and (max-width: 900px) {
.features-text {
width: 100%;
margin-bottom: 2em;
padding: 0;
}
.features-text:last-child {
margin-bottom: 0;
}
}
.features-text p {
margin-bottom: 2em;
line-height: 2;
}
.features-text p:last-child {
margin-bottom: 0;
}
.features.sbgw264 .features-text {
width: auto;
max-width: 750px;
margin: 0 auto;
padding: 0;
}


.case-back {
}
.case-back-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 900px) {
.case-back-wrapper {
display: block;
}
}
.case-back-img {
width: 40.68181%;
margin-left: -30px;
}
@media screen and (max-width: 900px) {
.case-back-img {
width: 60%;
margin: 0 auto;
}
}
.case-back-text {
width: 56.81818%;
}
@media screen and (max-width: 900px) {
.case-back-text {
width: 100%;
padding: 69px 0;
}
}
@media screen and (max-width: 500px) {
.case-back-text {
padding: 46px 0 69px;
}
}
.case-back-text p {
margin-bottom: 2em;
line-height: 2;
}
.case-back-text p:last-child {
margin-bottom: 0;
}
.case-back-caution {
line-height: 1.3!important;
font-size: 1.3rem;
text-indent: -0.9em;
padding-left: 0.9em;
}


.collection {
padding: 150px 0 130px;
}
@media screen and (max-width: 500px) {
.collection {
padding: 69px 0;
}
}
.collection-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
@media screen and (max-width: 900px) {
.collection-wrapper {
display: block;
}
}
.collection-img {
width: 50%;
}
@media screen and (max-width: 900px) {
.collection-img {
width: 100%;
max-width: 500px;
margin: 0 auto 10px;
}
}
.collection-box {
width: 50%;
text-align: center;
}
@media screen and (max-width: 900px) {
.collection-box {
width: 100%;
}
}
.collection-text {
margin-bottom: 20px;
letter-spacing: 1px;
font-size: 1.3rem;
}
@media screen and (max-width: 500px) {
.collection-text {
font-size: 1.2rem;
}
}
.collection-limited {
margin-bottom: 24px;
font-size: 1.3rem;
}
.collection-limited span {
border-bottom: 2px solid #ffffff;
}
.collection-name {
letter-spacing: 2px;
font-weight: 600;
line-height: 1.3;
font-size: 2.2rem;
}
.collection-movement {
margin-bottom: 16px;
font-size: 1.3rem;
}
.collection-price {
margin-bottom: 6px;
font-weight: 500;
letter-spacing: 1px;
font-size: 1.7rem;
}
.collection-price span {
margin-left: 5px;
font-size: 1.2rem;
}
.collection-day {
margin-bottom: 25px;
font-size: 1.3rem;
}
.collection-btn {
max-width: 200px;
margin: 0 auto 25px;
}
.collection-btn a {
border: 1px solid #ffffff;
padding: 9px 0;
letter-spacing: 2px;
color: #ffffff;
display: block;
transition: .6s;
}
.collection-btn a:hover {
background: #ffffff;
text-decoration: none;
color: #000000;
}
.collection-attention {
font-size: 1.3rem;
}
@media screen and (max-width: 500px) {
.collection-attention {
text-align: left;
font-size: 1.2rem;
}
.collection-attention br {
display: none;
}
}


.bg-black {
background: #111111;
}
.bg-green {
background: #011414;
}


.pc-hide {
display: none;
}
@media screen and (max-width: 900px) {
.pc-hide {
display: block;
}
}


.bg-img01 {
height: 500px;
background: url("../img/bg-img01.jpg") no-repeat center top;
background-size: cover;
background-attachment: fixed;
}
@media screen and (max-width: 1440px) {
.bg-img01 {
height: 400px;
}
}
@media screen and (max-width: 1280px) {
.bg-img01 {
height: 300px;
}
}
@media screen and (max-width: 1024px) {
.bg-img01 {
background-attachment: inherit;
}
}
@media screen and (max-width: 900px) {
.bg-img01 {
height: 250px;
}
}
@media screen and (max-width: 500px) {
.bg-img01 {
height: 150px;
}
}
.bg-img02 {
height: 500px;
background: url("../img/bg-img02.jpg") no-repeat center top;
background-size: cover;
background-attachment: fixed;
}
@media screen and (max-width: 1440px) {
.bg-img02 {
height: 400px;
}
}
@media screen and (max-width: 1280px) {
.bg-img02 {
height: 300px;
}
}
@media screen and (max-width: 1024px) {
.bg-img02 {
background-attachment: inherit;
}
}
@media screen and (max-width: 900px) {
.bg-img02 {
height: 250px;
}
}
@media screen and (max-width: 500px) {
.bg-img02 {
height: 150px;
}
}

/*****************************************************************************
footer 
*****************************************************************************/

.footer {
background: #000000;
padding: 120px 0;
position: relative;
}
@media screen and (max-width: 500px) {
.footer {
padding: 60px 0;
}
}
.footer_wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer_wrapper-logo {
width: 140px;
position: relative;
z-index: 1;
}
@media screen and (max-width: 500px) {
.footer_wrapper-logo {
width: 110px;
}
}
.footer_wrapper-sns {
display: flex;
position: relative;
z-index: 1;
}
.footer_wrapper-sns li {
width: 30px;
margin-left: 20px;
}
.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-copyright {
margin-top: 30px;
position: relative;
top: auto;
left: auto;
transform: none;
}
}


#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;
}
}

/*****************************************************************************
 transform 
 *****************************************************************************/

.loader{
background: #000000;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}


.filter {
}
.filter.scrollin {
}


.fadein {
opacity: 0;
transition: 3s;
}
.fadein.scrollin {
opacity: 1;
}