@charset "UTF-8";
/* Scss Document */
html { font-family: 'Noto Serif JP','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','Georgia',sans-serif; font-size: 62.5%; font-weight: 300; }

body { margin: 0; color: #2D3132; font-size: 1.6rem; line-height: 1.75; position: relative; overflow-x: hidden; }
@media (max-width: 1024px) { body { padding-top: 60px; font-size: 1.4rem; } }

a, a:link, a:visited { color: #2D3132; text-decoration: none; transition: 0.5s; }

img { max-width: 100%; width: auto; height: auto; vertical-align: bottom; transition: 0.5s; }

a:hover, a:hover img { opacity: 0.6; }

.container { margin: 0 auto; width: 90%; max-width: 1080px; height: auto; box-sizing: border-box; }

.innerBox { margin: 0 auto; width: 90%; max-width: 900px; height: auto; box-sizing: border-box; }

main { display: block; }
body#company main, body#privacy main, body#faq main, body#contact main { padding: 100px 0; }
@media (max-width: 1024px) { body#company main, body#privacy main, body#faq main, body#contact main { padding: 50px 0; } }

@font-face { font-family: 'icomoon'; src: url("../fonts/icomoon.eot?kx8ps4"); src: url("../fonts/icomoon.eot?kx8ps4#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?kx8ps4") format("truetype"), url("../fonts/icomoon.woff?kx8ps4") format("woff"), url("../fonts/icomoon.svg?kx8ps4#icomoon") format("svg"); font-weight: normal; font-style: normal; font-display: block; }
[class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-link:before { content: "\e900"; }

.icon-line .path1:before { content: "\e906"; color: #00c300; }

.icon-line .path2:before { content: "\e907"; margin-left: -1em; color: white; }

.icon-instagram:before { content: "\ea92"; }

.icon-twitter:before { content: "\ea96"; }

.icon-facebook:before { content: "\ea90"; }

/*============================================================================
	header
=============================================================================*/
header { padding: 35px 0 20px; box-sizing: border-box; position: relative; }
body#news header, body#company header, body#privacy header, body#faq header, body#contact header { border-bottom: 1px solid #2D3132; }
@media (max-width: 1200px) { header { padding: 10px 0 60px; } }
@media (max-width: 1024px) { header { padding: 15px 0; width: 100%; height: 60px; background: rgba(255, 255, 255, 0.7); position: fixed; top: 0; z-index: 999; } }
header nav { margin: 0 auto; max-width: 1200px; width: 95%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
header nav h1 { max-width: 167px; width: 15%; }
@media (max-width: 1024px) { header nav h1 { width: 140px; } }
header nav #gnaviWrap { margin: auto; width: 75%; box-sizing: border-box; }
@media (max-width: 1200px) { header nav #gnaviWrap { width: 100%; position: absolute; bottom: 10px; } }
@media (max-width: 1024px) { header nav #gnaviWrap { display: -webkit-flex; display: -moz-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: url("../img/common/bg_dark.jpg") repeat 0 0; -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); position: fixed; top: 60px; left: auto; right: -100%; }
  header nav #gnaviWrap.open { right: 0; } }
header nav #gnaviWrap #gnaviBox li { text-align: center; }
header nav #gnaviWrap #gnaviBox li a { padding-bottom: 5px; color: #2D3132; font-size: 1.6rem; width: 100%; text-align: center; letter-spacing: 2px; position: relative; overflow: hidden; }
header nav #gnaviWrap #gnaviBox li a::after { content: ''; width: 100%; height: 1px; background: #2D3132; display: block; transition: 0.4s; position: absolute; left: 0; bottom: 0; transform: scale(0, 1); transform-origin: left; }
header nav #gnaviWrap #gnaviBox li a:hover::after { transform: scale(1, 1); }
header nav #gnaviWrap #gnaviBox li + li { margin-left: 3%; }
header nav #gnaviWrap #gnaviBox li.show_tab { display: none; }
@media (max-width: 1024px) { header nav #gnaviWrap #gnaviBox { display: block; }
  header nav #gnaviWrap #gnaviBox li a { color: #FFFFFF; opacity: 0; transform: translateX(100px); -webkit-transition: all 4s cubic-bezier(0.19, 1, 0.22, 1); transition: all 4s cubic-bezier(0.19, 1, 0.22, 1); }
  header nav #gnaviWrap #gnaviBox li a::after { background: #FFFFFF; }
  header nav #gnaviWrap #gnaviBox li.active a { opacity: 1; transform: translateX(0); }
  header nav #gnaviWrap #gnaviBox li + li { margin: 20px 0 0 0; }
  header nav #gnaviWrap #gnaviBox li.show_tab { display: block; } }
header nav #hSNS { width: 5%; }
@media (max-width: 1024px) { header nav #hSNS { margin-right: 30px; width: 100px; } }
@media (max-width: 690px) { header nav #hSNS { margin-right: 40px; width: 80px; } }
header nav #hSNS li { text-align: center; }
@media (max-width: 690px) { header nav #hSNS li { width: 20px; height: 20px; line-height: 1; vertical-align: bottom; }
  header nav #hSNS li img { width: auto; height: 100%; } }
header nav #hSNS li + li { margin-left: 22.5%; }
@media (max-width: 690px) { header nav #hSNS li + li { margin-left: 10px; } }
header nav #hSNS li.showSP { display: none; }
@media (max-width: 690px) { header nav #hSNS li.showSP { display: block; } }
body.fixed header { background: url("../img/common/bg_dark.jpg") repeat 0 0; }
body.fixed header nav img { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(30deg) brightness(112%) contrast(101%); }

/*============================================================================
	drawer menuBtn
=============================================================================*/
header .menuBtn { margin: auto; color: #2D3132; font-size: 1.2rem; width: 35px; height: 30px; text-align: center; outline: 0; border: 0; box-sizing: border-box; background: transparent; position: fixed; top: 12px; left: auto; right: 5px; bottom: auto; z-index: 1200; -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
header .menuBtn:hover { cursor: pointer; }
@media (min-width: 1025px) { header .menuBtn { display: none; } }
@media (max-width: 1024px) { header .menuBtn { display: block; } }
header .menuBtn .drawer-hamburger-icon { margin: auto; position: relative; display: block; }
header .menuBtn .drawer-hamburger-icon.drawer-hamburger-icon:before, header .menuBtn .drawer-hamburger-icon.drawer-hamburger-icon:after { content: ''; width: 100%; height: 2px; background-color: #2D3132; -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); position: absolute; left: 0; }
header .menuBtn .drawer-hamburger-icon.drawer-hamburger-icon:before { top: -8px; }
header .menuBtn .drawer-hamburger-icon.drawer-hamburger-icon:after { top: 8px; }
header .menuBtn.close-btn .drawer-hamburger-icon { background: transparent; }
header .menuBtn.close-btn .drawer-hamburger-icon.drawer-hamburger-icon:before, header .menuBtn.close-btn .drawer-hamburger-icon.drawer-hamburger-icon:after { background-color: #FFFFFF; top: 0; }
header .menuBtn.close-btn .drawer-hamburger-icon.drawer-hamburger-icon:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
header .menuBtn.close-btn .drawer-hamburger-icon.drawer-hamburger-icon:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

/*============================================================================
	main container
=============================================================================*/
.mainClmWrap { margin: 0 auto; display: -webkit-flex; display: -moz-flex; display: flex; }
@media (max-width: 690px) { .mainClmWrap { display: block; } }
.mainClmWrap .titleBlock { margin: 0; width: calc((100% - 1260px) / 2); height: auto; text-align: right; box-sizing: border-box; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; }
@media (max-width: 1400px) { .mainClmWrap .titleBlock { margin: 0 4% 0 auto; width: 6%; } }
@media (max-width: 690px) { .mainClmWrap .titleBlock { margin: 0 auto 40px; width: 95%; text-align: left; } }
.mainClmWrap .titleBlock span { font-weight: 500; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
@media (max-width: 690px) { .mainClmWrap .titleBlock span { -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; } }
.mainClmWrap .titleBlock span.en { font-size: 3.2rem; line-height: 1.1; }
@media (max-width: 690px) { .mainClmWrap .titleBlock span.en { font-size: 2.6rem; } }
.mainClmWrap .titleBlock span.jp { margin-top: 30px; line-height: 2.8; }
@media (max-width: 690px) { .mainClmWrap .titleBlock span.jp { margin: 0; line-height: 2.3; } }
.mainClmWrap .mainClm { margin: 0 0 0 auto; width: calc(100% - ((100% - 1080px) / 2)); }
@media (max-width: 1400px) { .mainClmWrap .mainClm { width: 90%; } }
@media (max-width: 690px) { .mainClmWrap .mainClm { width: 100%; }
  .mainClmWrap .mainClm > .moreLink { margin: 30px auto 0; width: 90%; } }
.mainClmWrap .mainClm .container { margin: 0; }
@media (max-width: 690px) { .mainClmWrap .mainClm .container { margin: 0 auto; } }
@media (max-width: 690px) { .mainClmWrap .mainClm .container .innerBox { width: 95%; } }
.mainClmWrap .mainClm .innerBox { margin: 0; padding-left: 6.25vw; box-sizing: border-box; }
@media (max-width: 690px) { .mainClmWrap .mainClm .innerBox { margin: auto; padding-left: 0; width: 90%; } }

[data-ruby] { position: relative; }

[data-ruby]::before { content: attr(data-ruby); margin: auto; font-size: 1.1rem; width: 120%; letter-spacing: 0; text-align: center; display: block; position: absolute; top: -0.5em; left: -10%; right: 0; }
@media (max-width: 690px) { [data-ruby]::before { width: 160%; top: -0.8em; left: -30%; } }

.moreLink { margin: 50px 0 0; }
@media (max-width: 690px) { .moreLink { margin: 30px 0 0; } }
.moreLink a { padding: 0 50px 5px 0; font-size: 1.4rem; font-weight: 700; position: relative; }
.moreLink a::after { content: ''; width: 100%; height: 1px; display: block; transition: 0.4s; transform: scale(1, 1); transform-origin: left; position: absolute; top: 100%; left: 0; }
.moreLink a .icon_arrow { margin: auto; width: 37px; height: 7px; display: block; position: absolute; top: 0; left: auto; right: 0; bottom: 0; transition: 0.4s; }
.moreLink a:hover::after { transform: scale(0, 1); }
.moreLink a:hover .icon_arrow { right: -10px; }
.moreLink.wh a { color: #FFFFFF; }
.moreLink.wh a::after { background: #FFFFFF; }
.moreLink.wh a .icon_arrow { background: url("../img/common/arrow_wh.svg") no-repeat 0 0; background-size: contain; }
.moreLink.bk a { color: #2D3132; }
.moreLink.bk a::after { background: #2D3132; }
.moreLink.bk a .icon_arrow { background: url("../img/common/arrow_bk.svg") no-repeat 0 0; background-size: contain; }

/*============================================================================
	movie
=============================================================================*/
#movieArea { margin: 0 auto; padding: 0; width: 100%; }
#movieArea .movieBox { padding-top: 56.1%; width: 100%; overflow: hidden; position: relative; }
@media (max-width: 690px) { #movieArea .movieBox { padding-top: 56.1%; } }
#movieArea .movieBox video { margin: auto; height: 100%; width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }
@media (max-width: 690px) { #movieArea .movieBox video { height: 100%; width: auto; } }
#movieArea .movieBox video img { width: 100% !important; height: 100% !important; }
#movieArea .movieBox .movieBtn { margin: auto; width: 200px; height: 110px; text-align: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; }
#movieArea .movieBox .movieBtn a { color: #FFFFFF; font-size: 2.0rem; font-weight: 700; }
@media (max-width: 690px) { #movieArea .movieBox .movieBtn { width: 140px; height: 80px; }
  #movieArea .movieBox .movieBtn img { width: 40px; height: 40px; }
  #movieArea .movieBox .movieBtn a { font-size: 1.4rem; } }

/*============================================================================
	insta
=============================================================================*/
#instaWrap { padding: 100px 0; background: #F0EFED; }
@media (max-width: 690px) { #instaWrap { padding: 50px 0; } }
#instaWrap h2 { margin: 0 auto 40px; color: #2D3132; font-size: 3.2rem; font-weight: 500; text-align: center; }
#instaWrap h2 span { margin: 0 auto; width: 27px; height: 27px; display: block; }
#instaWrap h2 span img { width: 100%; vertical-align: top; }
#instaWrap #instaList { padding: 20px 20px 0; background: #FFFFFF; }
#instaWrap #instaList li { margin: 0 3.5% 20px 0; width: 31%; }
#instaWrap #instaList li:nth-of-type(3n) { margin-right: 0; }
#instaWrap #instaList li figure { width: 100%; height: auto; position: relative; }
#instaWrap #instaList li figure::before { content: ''; padding-top: 100%; width: 100%; display: block; }
#instaWrap #instaList li figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;'; position: absolute; top: 0; left: 0; z-index: 1; }

/*============================================================================
	footer
=============================================================================*/
footer { padding: 50px 0 0; color: #ffffff; background: url("../img/common/bg_dark.jpg") repeat 0 0; }
footer h1 { margin: 0 auto 30px; }
@media (max-width: 1024px) { footer h1 { margin: 0 0 30px; width: 30%; } }
@media (max-width: 690px) { footer h1 { width: 60%; } }
footer h1 img { filter: brightness(0) saturate(100%) invert(92%) sepia(91%) saturate(33%) hue-rotate(58deg) brightness(106%) contrast(100%); }
@media (max-width: 1024px) { footer #flinkWrap { width: calc(100% - 100px); } }
@media (max-width: 690px) { footer #flinkWrap { width: 100%; } }
footer #flinkWrap ul { width: 200px; }
@media (max-width: 1024px) { footer #flinkWrap ul { width: 48%; } }
footer #flinkWrap ul li + li { margin-top: 10px; }
footer #flinkWrap ul li a { color: #FFFFFF; letter-spacing: 2px; }
footer #fSNSbox { margin: 0 0 0 auto; text-align: center; width: 80px; }
footer #fSNSbox p { font-size: 1.2rem; letter-spacing: 2px; }
footer #fSNSbox ul { margin: 5px auto 0; width: 100%; }
footer #fSNSbox ul li { width: 50%; text-align: center; }
footer #fSNSbox ul li + li { margin-left: 10px; }
footer #fSNSbox ul li img { width: auto; height: 32px; filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(30deg) brightness(112%) contrast(101%); }
footer .copyright { margin: 20px auto 0; padding: 10px 0; color: #FFFFFF; max-width: 1160px; width: 95%; text-align: center; border-top: 1px solid #FFFFFF; }

/*-------------------------
	back_to_top
-------------------------*/
#back_to_top { margin: 0 auto; width: 23px; height: 90px; position: fixed; right: 20px; bottom: 20px; z-index: 999; transition: 0.3s ease; transform: translateY(100px); }
@media (max-width: 690px) { #back_to_top { right: 5px; } }
#back_to_top.sc { transform: translateY(0); }
#back_to_top a.js-back_to_top { margin: 0; width: 100%; height: 100%; display: block; position: relative; }
#back_to_top a.js-back_to_top:hover { opacity: 0.5; }
#back_to_top a.js-back_to_top span { margin: 0; font-size: 1.1rem; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; line-height: 23px; }
#back_to_top a.js-back_to_top i { margin: 5px auto 0; width: 23px; height: 23px; background: url("../img/common/toTopArrow.svg") no-repeat 0 0; background-size: contain; display: inline-block; }

/*-------------------------
	onlineBanner
-------------------------*/
.onlineBanner { padding: min(100px,13.888vw) 0 0; }
.onlineBanner.shop { padding: 0 0 min(100px,13.888vw); }
.onlineBanner a { display: block; width: 100%; }
.onlineBanner a picture { display: block; }
.onlineBanner a:hover { opacity: 1; }
.onlineBanner a:hover img { opacity: 0.7; }

/*============================================================================
	調整用
=============================================================================*/
.fl { display: -webkit-flex; display: -moz-flex; display: flex; }

.fl-tab { display: -webkit-flex; display: -moz-flex; display: flex; }
@media (max-width: 1024px) { .fl-tab { -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; } }

.fl-smp { display: -webkit-flex; display: -moz-flex; display: flex; }
@media (max-width: 690px) { .fl-smp { -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; } }

.fl-jst { -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; }

.fl-cen { -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; }

.fl-end { -webkit-justify-content: flex-end; -moz-justify-content: flex-end; justify-content: flex-end; }

.fl-wrap { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.fl-col { -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; }

.fl-reverse { -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; flex-direction: row-reverse; }

.mt0 { margin-top: 0 !important; }

.mt5 { margin-top: 5px !important; }

.mt10 { margin-top: 10px !important; }

.mt15 { margin-top: 15px !important; }

.mt20 { margin-top: 20px !important; }

.mt30 { margin-top: 30px !important; }

.mt35 { margin-top: 35px !important; }

.mt40 { margin-top: 40px !important; }

.mt45 { margin-top: 45px !important; }

.mt50 { margin-top: 50px !important; }

.mt100 { margin-top: 100px !important; }

.mr0 { margin-right: 0 !important; }

.mr5 { margin-right: 5px !important; }

.mr10 { margin-right: 10px !important; }

.mr15 { margin-right: 15px !important; }

.mr20 { margin-right: 20px !important; }

.mr25 { margin-right: 25px !important; }

.mb0 { margin-bottom: 0 !important; }

.mb5 { margin-bottom: 5px !important; }

.mb10 { margin-bottom: 10px !important; }

.mb12 { margin-bottom: 12px !important; }

.mb15 { margin-bottom: 15px !important; }

.mb20 { margin-bottom: 20px !important; }

.mb25 { margin-bottom: 25px !important; }

.mb30 { margin-bottom: 30px !important; }

.mb35 { margin-bottom: 35px !important; }

.mb40 { margin-bottom: 40px !important; }

.mb50 { margin-bottom: 50px !important; }

.mb60 { margin-bottom: 60px !important; }

.mb80 { margin-bottom: 80px !important; }

.ml0 { margin-left: 0 !important; }

.ml5 { margin-left: 5px !important; }

.ml10 { margin-left: 10px !important; }

.ml15 { margin-left: 15px !important; }

.ml20 { margin-left: 20px !important; }

.ml25 { margin-left: 25px !important; }

.ml30 { margin-left: 30px !important; }

.ls5 { letter-spacing: 5px !important; }

.ls10 { letter-spacing: 10px !important; }

.ls15 { letter-spacing: 15px !important; }

.ls40 { letter-spacing: 40px !important; }

.ls60 { letter-spacing: 60px !important; }

br { display: inline; }
@media (min-width: 1201px) { br.showPC { display: none !important; } }
@media (min-width: 1025px) { br.showTab { display: none !important; } }
@media (min-width: 691px) { br.showSP { display: none !important; } }
@media (max-width: 1200px) { br.hdnPC { display: none !important; }
  br.showPC { display: inherit; } }
@media (max-width: 1024px) { br.hdnTab { display: none !important; }
  br.showTab { display: inherit; } }
@media (max-width: 690px) { br.hdnSP { display: none !important; }
  br.showSP { display: inherit; } }

span { display: inline; }
@media (min-width: 1201px) { span.showPC { display: none !important; } }
@media (min-width: 1025px) { span.showTab { display: none !important; } }
@media (min-width: 691px) { span.showSP { display: none !important; } }
@media (max-width: 1200px) { span.hdnPC { display: none !important; }
  span.showPC { display: inherit; } }
@media (max-width: 1024px) { span.hdnTab { display: none !important; }
  span.showTab { display: inherit; } }
@media (max-width: 690px) { span.hdnSP { display: none !important; }
  span.showSP { display: inherit; } }

p, div, figure { display: block; }
@media (min-width: 1201px) { p.showPC, div.showPC, figure.showPC { display: none !important; } }
@media (min-width: 1025px) { p.showTab, div.showTab, figure.showTab { display: none !important; } }
@media (min-width: 691px) { p.showSP, div.showSP, figure.showSP { display: none !important; } }
@media (max-width: 1200px) { p.hdnPC, div.hdnPC, figure.hdnPC { display: none !important; }
  p.showPC, div.showPC, figure.showPC { display: inherit; } }
@media (max-width: 1024px) { p.hdnTab, div.hdnTab, figure.hdnTab { display: none !important; }
  p.showTab, div.showTab, figure.showTab { display: inherit; } }
@media (max-width: 690px) { p.hdnSP, div.hdnSP, figure.hdnSP { display: none !important; }
  p.showSP, div.showSP, figure.showSP { display: inherit; } }

.ta_cnt { text-align: center; }

.ta_right { text-align: right; }

.clearfix:after { content: ""; display: block; clear: both; }

/*============================================================================
	animation
=============================================================================*/
.fadein, .fadein02, .fadein03 { opacity: 0; transition: all 1.4s; }
.fadein.show, .fadein02.show, .fadein03.show { opacity: 1; }

/* scroll */
.fade { opacity: 0; transition: all 2s; }
.fade.active { opacity: 1; }

.upfade { transform: translate(0, 50px); opacity: 0; transition: all 1.0s; }
.upfade.scrollin { transform: translate(0, 0); opacity: 1; }

.downfade { transform: translate(0, -50px); opacity: 0; transition: all 1.0s; }
.downfade.scrollin { transform: translate(0, 0); opacity: 1; }

.sclinWrap { overflow: hidden !important; }

.sclin_right { transform: translate(50px, 0); opacity: 0; transition: all 1.0s; }
.sclin_right.scrollin { transform: translate(0, 0); opacity: 1; }

.sclin_left { transform: translate(-50px, 0); opacity: 0; transition: all 1.0s; }
.sclin_left.scrollin { transform: translate(0, 0); opacity: 1; }

.listfade li { transform: translate(0, 50px); opacity: 0.1; transition: all 1.0s; }
.listfade li.scrollin { transform: translate(0, 0); opacity: 1; }

.scMask { position: relative; overflow: hidden; }
.scMask::before { content: ""; display: block; width: 100%; height: 200%; position: absolute; left: 0; top: 0; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); z-index: 99; }
.scMask.appear::before { -webkit-transition: 1.8s cubic-bezier(0.39, 0.57, 0.56, 1) 0.2s; -moz-transition: 1.8s cubic-bezier(0.39, 0.57, 0.56, 1) 0.2s; -ms-transition: 1.8s cubic-bezier(0.39, 0.57, 0.56, 1) 0.2s; -o-transition: 1.8s cubic-bezier(0.39, 0.57, 0.56, 1) 0.2s; transition: 1.8s cubic-bezier(0.39, 0.57, 0.56, 1) 0.2s; -webkit-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); }
.scMask.wh::before { background: -moz-linear-gradient(top, white 0%, white 50%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(top, white 0%, white 50%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to bottom, white 0%, white 50%, rgba(255, 255, 255, 0) 100%); }
.scMask.bk::before { background: -moz-linear-gradient(top, #1c232b 0%, #1c232b 75%, rgba(28, 35, 43, 0) 100%); background: -webkit-linear-gradient(top, #1c232b 0%, #1c232b 75%, rgba(28, 35, 43, 0) 100%); background: linear-gradient(to bottom, #1c232b 0%, #1c232b 75%, rgba(28, 35, 43, 0) 100%); }
.scMask.pl::before { background: -moz-linear-gradient(top, #f0efed 0%, #f0efed 75%, rgba(240, 239, 237, 0) 100%); background: -webkit-linear-gradient(top, #f0efed 0%, #f0efed 75%, rgba(240, 239, 237, 0) 100%); background: linear-gradient(to bottom, #f0efed 0%, #f0efed 75%, rgba(240, 239, 237, 0) 100%); }