@charset "utf-8";

/*
 * File       : main.css
 * Author     : STUDIO-JT (Sumi)
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *              css/layout.css
 *
 * SUMMARY:
 * 1) GLOBAL
 * 2) VISUAL
 * 3) PRODUCT
 * 4) INSPIRING
 * 5) 
 * 6) 
 * 7) INSTAGRAM
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
body.home .main_container {padding-top: 0;padding-bottom: 0;}

/* image mask */
/*.img_mask {-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 73%, transparent 100%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 73%, transparent 100%);}*/
.gradient_top, .gradient_bottom {position:relative;}
/*.gradient_top:before {background: linear-gradient(to bottom, rgba(255, 255, 255, 1), transparent);content:'';display:block;position:absolute;top:0;width: 100%;height: 27%;}
.gradient_bottom:after {background: linear-gradient(to top, rgba(255, 255, 255, 1), transparent);content:'';display:block;position:absolute;bottom:0;width: 100%;height: 27%;}*/

.gradient_top:before {background:url(/resource/images/main/pattern-gradation-middle-top.png) repeat-x center top;content:'';display:block;position:absolute;top:-1px;width: 100%;height: 100%;}
.gradient_bottom:after {background:url(/resource/images/main/pattern-gradation-middle-bottom.png) repeat-x center bottom;content:'';display:block;position:absolute;bottom:-1px;width: 100%;height: 100%;}
.gradient_short_top:before {background:url(/resource/images/main/pattern-gradation-short-top.png) repeat-x center top;content:'';display:block;position:absolute;top:-1px;width: calc(100% + 1px);height: 100%; z-index:100;}
.gradient_short_bottom:after {background:url(/resource/images/main/pattern-gradation-short-bottom.png) repeat-x center bottom;content:'';display:block;position:absolute;bottom:-1px;width: calc(100% + 1px);height: 100%;}

/* fullpage */
/*
body.home {overflow: hidden;}
body.home #footer {position: fixed;bottom: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
body.home #intro_overlay {display: block;}

.main_fullpage_slider {position: fixed;width: 100%;height: 100%;}
body.home:not(.open_menu) #logo, body.home:not(.open_menu) #global_sound_controler,
body.home:not(.open_menu) #global_search_btn, body.home:not(.open_menu) #global_member_btn, body.home:not(.open_menu) #global_menu_btn {-webkit-transition: opacity .3s, visibility .3s;transition: opacity .3s, visibility .3s;-webkit-transition-delay: .7s;transition-delay: .7s;}
body.home.main_footer_view #logo, body.home.main_footer_view #global_sound_controler,
body.home.main_footer_view #global_search_btn, body.home.main_footer_view #global_member_btn, body.home.main_footer_view #global_menu_btn {opacity: 0;visibility: hidden;-webkit-transition-delay: 0s;transition-delay: 0s;}
*/

/* section */
.main_section {position: relative;overflow: hidden;}
.main_section_parallax {width: 100%;height: 100%;position: relative;}

.main_section_link {width: 100%;position: absolute;left: 0;bottom: 137px;text-align: center;z-index: 3;}

.main_section_slogan {font-size: 16px;letter-spacing: 0.1em;position: absolute;right: -264px;top: 50%;color: #000;z-index: 20;-webkit-transform: rotate( 270deg ) translateY(-50%);-ms-transform: rotate(270deg) translateY(-50%);transform: rotate( 270deg ) translateY(-50%);-webkit-transition: opacity 300ms, color 300ms;transition: opacity 300ms, color 300ms;}

body.mode_dark {background:#212121;}


/* **************************************** *
 * VISUAL
 * **************************************** */
.main_visual {height: 150vh;}
.main_visual .main_section_content {display: table;width: 100%;height: 100vh;position: relative;z-index: 2;}
.main_visual .main_section_content_inner {display: table-cell;vertical-align: middle;padding-top: 92px;}
.main_visual .main_section_bg {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: no-repeat center center;background-size: cover;z-index: 1; }

.main_visual_slider_wrap {width: 100%;height: 100%;}
.main_visual_item {background:#111;}
.main_visual_title {font-size: 100px;line-height: 1.1; color:#fff;}
.main_visual_sub_title {margin: 5px 0 9px;font-size: 36px;font-weight: 400;line-height: 1.28;}
.main_visual_desc {margin-top: 15px;font-size: 18px;line-height: 1.75;color: #fff;overflow: hidden;}
.main_visual_desc span{ display:inline-block; will-change: transform;}
.main_visual .main_section_content .jt_btn_line {display: none;}

.main_visual_lines { overflow: hidden; will-change: transform;}

.main_visual_title br.main_always_br, .main_visual_sub_title br.main_always_br, .main_visual_desc br.main_always_br {display: block;}
.main_visual_title br.main_small_br, .main_visual_sub_title br.main_small_br, .main_visual_desc br.main_small_br {display: none;}

.main_visual .swiper_control {bottom: 538px;}
.main_visual .main_section_link  {bottom: 528px;}

/* MOTION FOUC */
.main_visual .main_section_content, .main_visual .main_section_link {opacity: 0;}



/* **************************************** *
 * PRODUCT
 * **************************************** */
.main_product  {margin:190px 0;}
.main_product .main_section_content_inner {padding: 85px 0 0;}

.main_product_wrap {width: 100%;height: 100%;z-index: 2;}
.main_product_info {font-size:0;}
.main_product_info img {max-width:100%;}
.main_product_first, .main_product_section {display: inline-block;vertical-align: middle;width: 50%;height: 100%;position: relative;z-index: 1;}
.main_product_section { width: calc(50% - 180px); padding: 0 150px;}

.main_product_dis_slider {width: 50%;height: 100%;position: absolute;top: 0;left: 0;overflow: hidden;z-index: -1;}

.main_product_typo {margin-bottom: 16px;font-size: 18px;line-height: 1.6;}
.main_product_title {font-size: 56px;font-weight: 400;line-height: 1.2;}
.main_product_title figure {margin-bottom: 12px;}
.main_product_desc {font-size: 18px;line-height: 1.75;color: #111;margin-top: 15px;}
.main_product_link {margin-top: 40px;}
.main_product_figure img {display: block; margin:0 auto;}

.main_product_section .main_section_bg {background-size: auto;background-repeat: repeat;}
.main_product .main_section_content {/* display: table-cell; */width: 100%;vertical-align: middle;}



/* **************************************** *
 * INSPIRING
 * **************************************** */
.main_inspiring {position:relative; overflow:visible;}
.main_inspiring h2 {font-size:400px; line-height: 1; white-space: nowrap; z-index: 10; position: relative; top: -160px;}
.main_inspiring_title { font-size:56px; font-weight:400;}
.main_inspiring_desc {font-size:18px;line-height: 1.9;margin-top:20px;}
.main_inspiring_list {/* overflow:hidden; */}
.main_inspiring_list:after {clear:both; content:''; display:block;}
.main_inspiring_list_item {}
.main_inspiring_list_item:nth-child(odd) {float:left;}
.main_inspiring_list_item:nth-child(even) {float:right;}
.main_inspiring_list_item:nth-child(1) {margin-top: -314px;}
.main_inspiring_list_item:nth-child(2) {margin-top: 511px;}
.main_inspiring_list_item:nth-child(3) {margin-top: 1101px;margin-left: 132px;}
.main_inspiring_txt {margin-top: 68px;position: relative;z-index: 10;}
.main_inspiring_list_item:nth-child(3) .main_inspiring_txt {}
.main_inspiring_img_wrap {position:relative;}
.main_inspiring_figure {position:relative;}
/* .main_inspiring_figure.loaded { overflow:visible;} */
.main_inspiring_list_item:first-child .main_inspiring_img{transform: translate3d(1px, 1px, 1px);}
/* .main_inspiring_figure.gradient_bottom:after {background: linear-gradient(to top, rgba(255, 255, 255, 1) 40%, transparent);} */
.main_inspiring_oera_shadow {position:absolute;bottom: 800px;right: 45px;z-index: -1;width: 100%; width:2405px;height:442px; transform-origin: bottom left;}
.main_inspiring_oera_shadow img {display:block;  width:100%; height:100%;}



/* **************************************** *
 * PERFECTION
 * **************************************** */
.main_perfection {width:100%;background:url(/resource/images/main/perfection-bg.png) no-repeat center center;text-align:center;padding: 609px 0;margin: 160px 0 0;overflow:visible; clear:both;}
.main_perfection h2  {font-size:400px;line-height: 1;white-space: nowrap;color:#111;position:absolute;top: -74px;}
.main_perfection_content { color:#fff; }
.main_perfection_title {font-size:80px;margin-top: 100px;}
.main_perfection_sub_title {font-size:28px;margin-top: 25px;}
.main_perfection_desc {font-size:18px;margin-top: 25px;line-height: 1.9;}
.main_perfection_link {margin-top: 33px;}



/* **************************************** *
 * PRODUCT LIST
 * **************************************** */
.main_product_list_type {margin: 94px 0;font-size:0;}
.main_product_list_item {display:inline-block;vertical-align:bottom;width: 33.33%;max-width:486px;margin-right: 42px;}
.main_product_list_item:last-child {margin-right:0;width: 33.33%;}
.main_product_list_figure {text-align:center;}
.main_product_list_txt {margin-top: 76px;}
.main_product_list_title {margin-top:20px;font-size: 26px;color:#111;font-weight:400;}
.main_product_list_sub_title { margin-top:20px; font-size:18px; font-weight:400; color:#111;}
.main_produc_list_desc {margin-top: 13px;font-size:18px;line-height: 1.9;color:#666;}
.main_product_list_link {margin-top: 33px;}
.main_product_list_type .jt_btn_circle {margin:200px 0}



/* **************************************** *
 * MOMENT
 * **************************************** */
.main_moment {}
.main_moment_list {position:relative;}
.main_moment_list:before {background:#212121;-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 73%, transparent 100%);mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 73%, transparent 100%);content: '';display: block;position: absolute;top: 0;width: 100%;height: 80%;z-index: -1;}
.main_moment_list:after {background:#212121;-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 73%, transparent 100%);mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 73%, transparent 100%);content: '';display: block;position: absolute;bottom: 0;width: 100%;height: 70%;z-index: -1;}
.main_moment h2 {font-size:400px; line-height: 1; white-space: nowrap;  color:#111; -webkit-transition: color .5s;transition: color .5s; text-align:center; }
.main_moment_item {position:relative; width: 100%; overflow:hidden;}
.main_moment_item:nth-child(odd) .main_moment_figure {float:left;}
.main_moment_item:nth-child(even) .main_moment_figure {float:right;}
.main_moment_content {color:#fff; position:absolute;}
.main_moment_item:nth-child(1) {margin-top: 146px;}
.main_moment_item:nth-child(2) {margin-top: 371px;}
.main_moment_item:nth-child(3) {margin-top: 288px;}
.main_moment_item:nth-child(1) .main_moment_content {right: -10px;bottom: 163px;}
.main_moment_item:nth-child(2) .main_moment_content {left: 0;top: 279px;}
.main_moment_item:nth-child(3) .main_moment_content {right: 150px;top: 50%;transform:translateY(-50%);}
.main_moment_title {font-size:80px;line-height: 1;}
.main_moment_desc {font-size:18px;margin-top: 34px;}
.main_moment_link {margin-top: 37px;}
body.mode_dark .main_moment h2 {color:#fff; }

 
/* **************************************** *
 * INSTAGRAM
 * **************************************** */
.main_instagram {text-align:center;margin: 430px 0;}
.main_instagram .main_section_bg {background: #111;}
.main_instagram .main_section_content_inner {padding-top: 3px;}

.main_instagram_title {margin-bottom: 70px;font-size: 80px;font-weight: 400;}
.main_instagram_title > a {color: #fff;-webkit-transition: opacity .3s;transition: opacity .3s;}
.main_instagram_title > a:hover {opacity: 0.8;}

.main_instagram_wrap {margin: 0 -21px;overflow: hidden;}
.main_instagram_item {float: left;width: calc(25% - 42px);margin: 0 21px;}
.main_instagram_item:nth-child(6) {display: none;}
.main_instagram_item > a {display: block;width: 100%;padding-top: 100%;position: relative;background: no-repeat center center;background-size: cover;/* filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%); */}
.main_instagram_item > a:before {position: absolute;right: 19px;top: 19px;font-family: 'jt-font';content: '\e918';font-size: 29px; color:#fff; opacity:0; -webkit-transition: opacity .3s;transition: opacity .3s;}
.main_instagram_item > a:hover:before {opacity: 1;}