@charset "utf-8";

/*
 * File       : c-main.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *
 * SUMMARY:
 * 1) main
 */



/* **************************************** *
 * main
 * **************************************** */
/* global */
.main_section {width: 100%;height: calc(100vh - 235px);position: fixed;top: 0;left: 0;}
.main_section_content {width: 1920px;height: 100%;margin: 0 auto;padding-top: 148px;position: relative;}

.main_table {display: table;width: 100%;height: 100%;}
.main_table_cell {display: table-cell;vertical-align: middle;}
.main_table_cell > .wrap {padding-right: 0;}

/* bubble */
.main_link_effect {width: 43px;height: 54px;position: absolute;top: -57px;}
.main_link_effect > div {position: absolute;}
.main_link_effect > div img {display: block;max-width: 100%;height: auto;}
.main_link_effect > div:not(.live) {opacity: 0;}
.main_link_effect_01 {top: 10px;left: 0;}
.main_link_effect_02 {top: 20px;right: 0;}
.main_link_effect_03 {top: 30px;right: 14px;}
.main_link_effect_04 {top: 37px;left: 5px;}
.main_link_effect_05 {top: 47px;left: 17px;}
.main_link_effect_06 {top: 53px;left: 9px;}
.main_link_effect_07 {top: 46px;left: 15px;}
.main_link_effect_08 {top: 45px;left: 10px;}
.main_link_effect_09 {top: 10px;left: 0;}
.main_link_effect_10 {top: 20px;right: 0;}
.main_link_effect_11 {top: 37px;left: 5px;}
.main_link_effect_12 {top: 53px;left: 9px;}
.main_link_effect_target:hover .main_link_effect > div {animation: short-bubble 1000ms linear infinite;animation-fill-mode: forwards;}
.main_link_effect_target:hover .main_link_effect > div.main_link_effect_01 {animation-delay: 50ms;}
.main_link_effect_target:hover .main_link_effect > div.main_link_effect_02 {animation: medium-bubble 4500ms linear infinite;animation-fill-mode: forwards;animation-delay: 100ms;}
.main_link_effect_target:hover .main_link_effect > div.main_link_effect_03 {animation-duration: 3000ms;}
.main_link_effect_target:hover .main_link_effect > div.main_link_effect_04 {animation-duration: 1500ms;animation-fill-mode: forwards;animation-delay: 150ms;}
.main_link_effect_target:hover .main_link_effect > div.main_link_effect_05 {animation: medium-bubble 2500ms linear infinite;animation-fill-mode: forwards;animation-delay: 200ms;}
.main_link_effect_target:hover .main_link_effect > div.main_link_effect_06 {animation-duration: 2500ms;animation-delay: 250ms;}
.main_link_effect_target:hover .main_link_effect > div.main_link_effect_07 {animation-duration: 3500ms;animation-delay: 300ms;}
.main_link_effect_target:hover .main_link_effect > div.main_link_effect_08 {animation: medium-bubble 1500ms linear infinite;animation-delay: 350ms;animation-fill-mode: forwards;}
.main_link_effect_target .main_link_effect > div.main_link_effect_09 {animation:short-bubble 1000ms linear infinite;animation-fill-mode:forwards;}
.main_link_effect_target .main_link_effect > div.main_link_effect_10 {animation:medium-bubble 1500ms linear infinite;animation-fill-mode:forwards;}
.main_link_effect_target .main_link_effect > div.main_link_effect_11 {animation:short-bubble 1500ms linear infinite;animation-fill-mode:forwards;}
.main_link_effect_target .main_link_effect > div.main_link_effect_12 {animation:short-bubble 2000ms linear infinite;animation-fill-mode:forwards;}

@-webkit-keyframes short-bubble{
    0%{ -webkit-transform:translate3d(5px, 0, 0);opacity:0; }
    13%{ -webkit-transform:translate3d(2px, -20px, 0); opacity:1; }
    20%{ -webkit-transform:translate3d(5px, -40px, 0) scale(1.2); }
    30%{ -webkit-transform:translate3d(0, -60px, 0); }
    40%{ -webkit-transform:translate3d(8px, -80px, 0); }
    50%{ -webkit-transform:translate3d(3px, -100px, 0); }
    60%{ -webkit-transform:translate3d(8px, -120px, 0); }
    70%{ opacity:0.4; }
    80%, 100%{ -webkit-transform:translate3d(0,-200px, 0); opacity:0; }
}

@keyframes short-bubble{
    0%{ transform:translate3d(5px, 0, 0);opacity:0; }
    13%{ transform:translate3d(2px, -20px, 0); opacity:1; }
    20%{ transform:translate3d(5px, -40px, 0) scale(1.2); }
    30%{ transform:translate3d(0px, -60px, 0); }
    40%{ transform:translate3d(8px, -80px, 0); }
    50%{ transform:translate3d(3px, -100px, 0); }
    60%{ transform:translate3d(8px, -120px, 0); }
    70%{ opacity:0.4; }
    80%, 100%{ transform:translate3d(0,-200px, 0); opacity:0; }
}

@-webkit-keyframes medium-bubble{
    0%{ -webkit-transform:translate3d(0, 0, 0); opacity:0;}
    5%{ -webkit-transform:translate3d(4px, -20px, 0); opacity:1;}
    10%{ -webkit-transform:translate3d(2px, -40px, 0) rotate(10deg); }
    20%{ -webkit-transform:translate3d(7px, -80px, 0) rotate(14deg) scale(0.7); }
    30%{ -webkit-transform:translate3d(5px, -120px, 0) rotate(15deg); }
    40%{ -webkit-transform:translate3d(1px, -160px, 0) rotate(20deg); }
    50%{ -webkit-transform:translate3d(2px, -200px, 0) rotate(18deg) scale(1.1); }
    60%{ -webkit-transform:translate3d(-3px, -240px, 0) rotate(22deg); opacity:0.4; }
    100%{ -webkit-transform:translate3d(0, -400px, 0); opacity:0; }
}

@keyframes medium-bubble{
    0%{ transform:translate3d(0, 0, 0); opacity:0;}
    5%{ transform:translate3d(4px, -20px, 0); opacity:1;}
    10%{ transform:translate3d(2px, -40px, 0) rotate(10deg); }
    20%{ transform:translate3d(7px, -80px, 0) rotate(14deg) scale(0.7); }
    30%{ transform:translate3d(5px, -120px, 0) rotate(15deg); }
    40%{ transform:translate3d(1px, -160px, 0) rotate(20deg); }
    50%{ transform:translate3d(2px, -200px, 0) rotate(18deg) scale(1.1); }
    60%{ transform:translate3d(-3px, -240px, 0) rotate(22deg); opacity:0.4; }
    100%{ transform:translate3d(0, -400px, 0); opacity:0; }
}

/* first */
.main_typo {display: block;padding-bottom: 50px;font-size: 50px;letter-spacing: -0.012em;font-weight: 600;line-height: 1.3;color: #fff;}

.main_link {display: block;width: 100%;position: absolute;bottom: 0;left: 0;}
.main_link > .wrap:after {content: '';display: table;clear: both;}
.main_link_btn {float: left;position: relative;}
.main_link_btn a {display: block;}
.main_link_btn b {display: block;font-size: 24px;font-weight: 600;color: #fff;}
.main_link_btn p {padding: 10px 0 20px;font-size: 18px;font-weight: 500;color: #fff;}
.main_link_btn .line {display: block;width: 1px;height: 50px;background: #fff;}

.main_link_brand {width: 57.8%;}
.main_link_brand .main_link_effect {left: 69px;}

.main_link_products {width: 42.2%;}
.main_link_products .main_link_effect {left: 112px;}

/* brand */
.main_brand {display: none;}

.main_brand_canvas:after {content: '';display: table;clear: both;}
.main_brand_canvas > div {float: left;}
.main_brand_canvas_01 {width: 586px;}
.main_brand_canvas_02 {width: 702px;}
.main_brand_canvas_03 {width: 467px;}
.main_brand_title {display: block;margin-left: -7px;padding-top: 114px;padding-bottom: 107px;font-size: 80px;font-weight: 600;color: #fff;}
.main_brand_box {position: relative;}
.main_brand_box img {display: block;max-width: 100%;height: auto;}
.main_brand_box b {display: block;font-size: 18px;font-weight: 600;color: #111;}
.main_brand_box p {padding: 30px 0;font-size: 18px;font-weight: 500;line-height: 1.66;color: #111;}
.main_brand_go_products {display: block;height: 250px;padding: 49px 0 0 115px;font-size: 24px;font-weight: 600;color: #fff;}
.main_brand_go_products .main_link_effect {top: 9px;left: 217px;}

.main_brand_box.story b {position: absolute;left: 116px;top: 114px;}
.main_brand_box.ingredients .main_brand_txt {position: absolute;top: 113px;left: 115px;}
.main_brand_txt a {font-size: 16px;font-weight: 500;color: var(--color-primary);}
.main_brand_box.design b {position: absolute;left: 115px;top: 114px;}

/* product */
.main_product {display: none;}
.main_product_inner {max-width: 1903px;height: 100%;margin: 0 auto;}
.main_product_top {margin-bottom: 2px;}
.main_product_top:after {content: '';display: table;clear: both;}
.main_product_title {display: block;float: left;width: 585px;padding-top: 55px;font-size: 80px;font-weight: 600;text-align: center;color: #fff;}
.main_brand_go_brand {display: block;float: left;width: calc(100% - 1404px);height: 198px;padding: 85px 0 0 115px;font-size: 24px;font-weight: 600;color: #fff;}
.main_brand_go_brand .main_link_effect {top: 48px;left: 175px;}
.main_product_top img {float: left;display: block;max-width: 100%;height: auto;}
.main_product_bottom img {display: block;max-width: 100%;height: auto;margin: 0 auto;}

/* setting */
body.main_page_c {overflow: hidden;}

body.main_page_c #footer {position: fixed;left: 0;right: 0;bottom: 0;opacity: 0;visibility: hidden;}

body.js_type_first .main_section {height: 100vh;}
body.js_type_first .main_section_content {padding-top: 0;}