@charset "utf-8";


.main_section {
    position: relative;
}

.main_section_top {
    position: relative;
    z-index: 2;
}

.main_section_bottom {
    position: relative;
    z-index: 1;
}

/* motion */

.main_top_animation_container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background: #1e39b4 url(../images/main/main-products-bg.jpg) repeat;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

html.mobile .main_top_animation_container {
    display: none;
}

/* **************************************** *
 * Key Visual
 * **************************************** */

/* container */

.main_visual {
    padding-bottom: 300px;
    position: relative;
    z-index: 1;
}

.main_visual_inner {
    position: relative;
}

/* typo */

.main_visual_typo {
    width: 100%;
    position: fixed;
    top: 95px;
    right: -16px;
    font-size: 0;
    font-weight: 600;
    line-height: 1;
    word-spacing: -0.05em;
    text-align: right;
    white-space: nowrap;
    word-wrap: normal;
    color: #1e39b4;
    -webkit-transition: all 260ms ease-out;
    transition: all 260ms ease-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.main_visual_typo * {
    font-size: 200px;
}

.main_visual_typo_fake {
    color: transparent;
    opacity: 0;
}

.main_visual_typo_strok {
    display: inline-block;
    vertical-align: middle;
    margin-right: 38px;
    position: relative;
}

.main_visual_typo_strok svg {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.main_visual_typo_strok text {
    paint-order: stroke;
    stroke: #1e39b4;
    stroke-width: 2px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    fill: rgba(255, 255, 255, 0);
}

html.ie:not(.edge) .main_visual_typo_strok {
    font-size: 220px;
}

.main_visual_typo_rolling {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    text-align: left;
}

.main_visual_typo_rolling_group {
    position: absolute;
    width: 100%;
    height: 76%;
    top: 12%;
    left: 0;
    overflow: hidden;
}

.main_visual_typo_rolling_item {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 0.77;
}

.main_visual_typo_rolling_item>.story_typo_text_fake {
    line-height: 0.77;
}

.main_visual_typo_rolling_item.turn {
    opacity: 0;
}

/* icon */

.main_visual_icon {
    width: 452px;
    height: 129px;
    position: fixed;
    top: 72.4vh;
    left: 50%;
    margin-left: -226px;
}

.main_visual_icon img {
    width: 100%;
    height: auto;
}

/* rolling */

.main_visual_rolling {
    position: fixed;
    width: 48.92%;
    height: -webkit-calc(100vh - 205px);
    height: calc(100vh - 205px);
    top: 205px;
    background: #e9bfa3;
    z-index: 2;
}

.main_visual_rolling.loaded {
    background: #ddd;
}

.main_rolling_slider_wrap {
    width: 100%;
    height: 100%;
    opacity: 0;
}

.main_rolling_slider {
    width: 100%;
    height: 100%;
}

.main_rolling_item {
    width: 100%;
    height: 100%;
}

.main_rolling_item a {
    display: block;
    width: 100%;
    height: 100%;
}

.main_rolling_item_img_wrap {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    opacity: 0;
}

.main_rolling_item_img {
    width: 100%;
    height: 100%;
    background: no-repeat center center;
    background-size: cover;
}

.main_rolling_item_txt {
    width: 81%;
    position: absolute;
    right: 0;
    bottom: 86px;
}

.main_rolling_item_txt h2 {
    font-size: 70px;
    line-height: 1.21;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: #1e39b4;
}

.main_rolling_item_txt h2[lang="en"] {
    margin-left: -0.04em;
    font-size: 80px;
    line-height: 1;
    letter-spacing: 0em;
}

.main_rolling_item_txt p {
    margin-top: 16px;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.025em;
    color: #1e39b4;
}

.main_rolling_item_txt h2,
.main_rolling_item_txt p {
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
}

.main_rolling_item_txt h2>div.lines,
.main_rolling_item_txt p>div.lines {
    overflow: hidden;
    font-size: 0;
}

.main_rolling_item_txt h2>div.lines>div.words,
.main_rolling_item_txt p>div.lines>div.words {
    margin-right: 0.25em;
    vertical-align: middle;
}

.main_rolling_item_txt h2>div.lines>div.words:last-child,
.main_rolling_item_txt p>div.lines>div.words:last-child {
    margin-right: 0;
}

.main_rolling_item_txt h2>div.lines>div.words>div.chars,
.main_rolling_item_txt p>div.lines>div.words>div.chars {
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}

.main_rolling_item_txt h2>div.lines div.words {
    font-size: 70px;
}

.main_rolling_item_txt h2[lang="en"]>div.lines div.words {
    font-size: 80px;
}

.main_rolling_item_txt p>div.lines div.words {
    font-size: 34px;
}

.main_rolling_item_txt h2[lang="en"] .logo_typo>i div.words {
    margin-right: 0.18em;
    font-size: 106px;
    line-height: 0;
    font-weight: 500;
}

.main_visual_rolling .cycle_control {
    opacity: 0;
}

.main_visual_rolling .cycle_progress_wrap {
    opacity: 0;
}

/* post */

.main_visual_post {
    width: 51.08%;
    margin-left: auto;
    padding: 22vw 0 200px 174px;
    ;
    position: relative;
    z-index: 1;
}

.main_visual_post .jt_freely_latest_item {
    opacity: 0;
}

.main_visual_post .jt_freely_latest_item+.jt_freely_latest_item {
    margin-top: 150px;
}

/* clear */

.main_visual.clear .main_visual_typo {
    opacity: 0;
    visibility: hidden;
}

.main_visual.clear .main_visual_rolling {
    position: absolute;
    top: inherit;
    bottom: 0;
}

.main_visual.next .main_visual_icon {
    opacity: 0;
    visibility: hidden;
}

/* **************************************** *
 * Products
 * **************************************** */

.main_products {
    padding: 0 0 189px;
    z-index: 3;
}

html.mobile .main_products {
    background: #1e39b4 url(../images/main/main-products-bg.jpg) repeat;
}

.main_products_typo {
    font-size: 187px;
    font-weight: 600;
    color: #fff;
}

.main_products_title {
    padding: 30px 0 97px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.025em;
    text-align: center;
    color: #fff;
}

.main_products .products_list_txt b {
    color: #fff;
}

.main_products .products_list_txt p a {
    color: rgba(255, 255, 255, .5);
}

html.desktop .main_products .products_list_txt p a:hover {
    color: #fff;
}

.main_products .products_list_txt em {
    color: #fff;
}

.main_products .products_list_colorchip>span {
    color: #fff;
}

.main_products .products_list_colorchip>ul>li.active:after {
    border-color: #fff;
}

html.ie .main_products .products_latest_list_item {
    box-sizing: content-box;
    width: 30%
}

/* **************************************** *
 * Prologue
 * **************************************** */

.main_prologue {
    padding: 298px 0 266px;
}

.main_prologue_inner {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* bubble */

.main_prologue_bubble {
    width: 243px;
    height: 243px;
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

.main_prologue_bubble>span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.main_prologue_bubble.primary>span {
    background: #d8a47d;
}

.main_prologue_bubble.secondary>span {
    background: #cb9571;
}

.main_prologue_bubble.third>span {
    background: #d19f7a;
}

.main_prologue_bubble.fourth>span {
    background: #f2c9ab;
}

.main_prologue_bubble.fifth>span {
    background: #e1b087;
}

.main_prologue_bubble_01 {
    top: -6.8%;
    left: 8.1%;
}

.main_prologue_bubble_02 {
    top: 8.5%;
    left: 35.6%;
}

.main_prologue_bubble_03 {
    top: 33.2%;
    left: 75.6%;
}

.main_prologue_bubble_04 {
    top: 66.1%;
    left: 54.8%;
}

.main_prologue_bubble_05 {
    top: 59%;
    left: 94.3%;
}

.main_prologue_bubble_06 {
    top: 33.2%;
    left: -8.5%;
}

/* content */

.main_prologue_title {
    font-size: 45px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: center;
    color: #1e39b4;
}

.main_prologue_knowledge {
    margin-top: 65px;
}

.main_prologue_knowledge br {
    display: none;
}

.main_prologue_knowledge p {
    font-size: 80px;
    font-weight: 600;
    line-height: 1.88;
    letter-spacing: -0.025em;
    color: #1e39b4;
}

.main_prologue_knowledge p>span {
    font-size: 104px;
    line-height: 1;
}

/* **************************************** *
 * Be log
 * **************************************** */

.main_belog_title {
    position: absolute;
    top: 90px;
    right: 203px;
}

.main_belog_title p {
    margin-bottom: 14px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
    color: #222;
}

.main_belog_title h2 {
    margin-left: -6px;
    font-size: 109px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #1e39b4;
}

.main_belog_data {
    position: relative;
}

.main_belog_data .jt_freely_latest_item {
    opacity: 0;
}

.main_belog_data .jt_freely_latest_item:nth-child(2) {
    margin-top: 424px;
}

.main_belog_icon {
    position: absolute;
}

.main_belog_icon_01 {
    width: 382px;
    height: 395px;
    top: -13.9%;
    right: -30.9%;
}

.main_belog_icon_02 {
    width: 394px;
    height: 113px;
    top: 46.7%;
    left: -19.6%;
}

.main_belog_icon_03 {
    width: 394px;
    height: 113px;
    right: 3.9%;
    bottom: 4.2%;
}

.main_belog_icon_03 img {
    width: 100%;
    height: auto;
}