@charset "utf-8";

a{
    transition-duration: 0.6s;
}

a:hover{
    opacity: 0.6;
    transition-duration: 0.6s;

}

.flex01{
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.cont_logo{
    max-width: 200px;
    margin: 5vw auto;
}

.concept_img{

}

.concept_txt{
    position: relative;
    max-width: 600px;
    width: 41vw;
    margin: 5vw auto;
}

.concept_line{
    position: absolute;
    right: -20vw;
}

.concept_line img{
    height: 14vw;
    max-height: 220px;
}

.h2_01 img{
    max-height: 100px;
    margin: 5vw auto 1vw;
}



.h3_01 img{
    max-height: 60px;
    margin: 5vw auto 1vw;
}

.h2_products{
    margin: 5vw auto -10vw;
}

.itembox02{
    max-width: 900px;
    margin: -4.5vw auto 0;
}

.itembox03{
    max-width: 500px;
    margin: -6vw auto 0;
}



.btn_item{
    display: flex;
    margin: 3vw auto 0;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 50px;
    border-radius: 50px;
    font-size: 20px;
    letter-spacing: 2px;
    color: #fff;
    z-index: 1;
    position: relative;
    transition-duration: 0.6s;
}

.btn_item:hover{
    transition-duration: 0.6s;
    width: 240px;
    height: 60px;
}

.bg_item01{
    background: #F1A8AF;
}
.bg_item02{
    background: #73A2FE;
}
.bg_item03{
    background: #F1A8AF;
}



.sec_item{
    background: linear-gradient(110deg, #435062, #dce9f8);
    padding: 10px 0 6vw;
}

.item_box01{
    max-width: 1460px;
    margin: 0 auto;
}
.item_box01 li{
    /* margin: 0 20px; */
}

.item_box02{
    max-width: 1200px;
    margin: 1vw auto 0;
}

.item_box02 li{
    /* margin: 0 20px; */
    max-width: 130px;
}


.item_box03{
    max-width: 290px;
    margin: 1vw auto 0;
}
.item_box03 li{
    margin: 0 20px;
    max-width: 95px;
}

.pos_rel{
    position: relative;
}

.mark01{
    position: absolute;
    width: 8vw;
    max-width: 80px;
    top: 2vw;
    right: -0.5vw;
}

@media screen and (max-width: 1200px) {
.products01_list.pc_on{
    display: none;
}
.products01_list.sp_on{
    display: block;
}
.products01_list .swiper {
    max-height: 320px;
}
}

@media screen and (max-width: 900px) {
    .products01_list .swiper {
        max-height: 490px;
    }
    .cont_logo {
        max-width: 25vw;
    }
    
    .concept_img {
        margin: 10vw auto;
    }
    .concept_txt{
        width: 80vw;
    }
    .concept_txt02{
        width: 60vw;
        margin: 10vw auto;
    }
    .h2_01 img {
        max-height: 18vw;
        margin: 5vw auto -18vw;
    }
.item_box01_box,.item_box02_box{
    width: 85vw;
    margin: 0 auto;
    overflow-x: hidden;
    padding: 0 0 20px;
}
.slider02{
    width: 100vw;
    max-width: none;
    margin: 1vw auto 0;
    height: 74vw;
    max-height: 550px;
}
.slider02 .slick-list{
    height: 100%!important;
    padding: 0!important;
}
.slider02 .slick-list .slick-track{
    height: 100%!important;
}
.slider02 .slick-list .slick-track .slick-slide{
    height: 100%!important;
    /* width: auto!important; */
}
.slick-slide > div{
    height: 100%;
}
.slider02 .slick-list .slick-track .slick-slide a > img{
    height: 100%!important;
    width: auto!important;
}
.slider02 li{
    height: 100%!important;
    width: auto!important;
    max-width: inherit;
}

.slider03{
    width: 100vw;
    max-width: none;
    margin: 1vw auto 0;
    height: 74vw;
    max-height: 550px;
}
.slider03 .slick-list{
    height: 100%!important;
    padding: 0!important;
}
.slider03 .slick-list .slick-track{
    height: 100%!important;
}
.slider03 .slick-list .slick-track .slick-slide{
    height: 100%!important;
    /* width: auto!important; */
}
.slick-slide > div{
    height: 100%;
}
.slider03 .slick-list .slick-track .slick-slide a > img{
    height: 100%!important;
    width: auto!important;
}
.slider03 li{
    height: 100%!important;
    width: auto!important;
    max-width: inherit;
}



.item_box02{
    width: 100vw;
    max-width: none;
    margin: 1vw auto 0;
}
.item_box03{
    width: 60vw;
    max-width: none;
    margin: 3vw auto 0;
}
.item_box03 li {
    margin: 0 5vw;
    max-width: 180px;
}

.cont_logo {
    max-width: 30vw;
    margin: 12vw auto 5vw;
}


.sl02{
    margin: -20vw auto 0;
}

.mark01 {
    max-width: 100px;
    top: 12%;
    right: 10%;
    width: 13vw;
}



}

@media screen and (max-width: 600px) {
    .mark01 {
        top: 11vw;
        right: 0vw;
    }
    .itembox03 {
        margin: -12vw auto 0;
    }
}



/* MV */

.mv_box{
    position: relative;
background: url(../img/top/mv01.jpg) no-repeat;
background-size: cover;
height: 100vh;
max-height: 1000px;
width: 100%;
}
.mv_box.mv02{
    position: relative;
background: url(../img/top/mv02.jpg) no-repeat;
background-size: cover;
height: 100vh;
max-height: 1000px;
width: 100%;
}
.mv_box.mv03{
    position: relative;
background: url(../img/top/mv03.jpg) no-repeat;
background-size: cover;
height: 100vh;
max-height: 1000px;
width: 100%;
background-position: center right;
}
.mv_box.mv04{
    position: relative;
background: url(../img/top/mv04.jpg) no-repeat;
background-size: cover;
height: 100vh;
max-height: 1000px;
width: 100%;
background-position: center right;

}
.mv_box.mv05{
    position: relative;
background: url(../img/top/mv05.jpg) no-repeat;
background-size: cover;
height: 100vh;
max-height: 1000px;
width: 100%;
background-position: center left;

}
.mv_box.mv06{
    position: relative;
background: url(../img/top/mv06.jpg) no-repeat;
background-size: cover;
height: 100vh;
max-height: 1000px;
width: 100%;
}
.mv_txt{
    position: absolute;
    top: 120px;
    left: 50%;
    width: 50vw;
    transform: translateX(-50%);
    z-index: 10;
}
.mv_txt img{
    /* filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.8)); */
    filter: drop-shadow(1px 1px 2px #777);
}
.mv_item{
    position: absolute;
    bottom: 4vw;
    left: 4vw;
    width: 11vw;
    max-width: 220px;
}
.mv_item img{
    width: 100%!important;
    height: auto!important;
}

@media screen and (min-width: 1920px) {
    .mv_box {
        position: relative;
        background: url(../img/top/mv01.jpg) no-repeat;
        background-size: cover;
        height: 100vh;
        max-height: none;
        width: 100%;
    }
    .mv_box.mv02 {
        position: relative;
        background: url(../img/top/mv02.jpg) no-repeat;
        background-size: cover;
        height: 100vh;
        max-height: none;
        width: 100%;
    }.mv_box.mv03 {
        position: relative;
        background: url(../img/top/mv03.jpg) no-repeat;
        background-size: cover;
        height: 100vh;
        max-height: none;
        width: 100%;
background-position: center right;

    }
    .mv_box.mv04 {
        position: relative;
        background: url(../img/top/mv04.jpg) no-repeat;
        background-size: cover;
        height: 100vh;
        max-height: none;
        width: 100%;
background-position: center right;

    }
    .mv_box.mv05 {
        position: relative;
        background: url(../img/top/mv05.jpg) no-repeat;
        background-size: cover;
        height: 100vh;
        max-height: none;
        width: 100%;
        background-position: center left;
    }
    .mv_box.mv06 {
        position: relative;
        background: url(../img/top/mv06.jpg) no-repeat;
        background-size: cover;
        height: 100vh;
        max-height: none;
        width: 100%;
    }
} 

@media screen and (max-width: 900px) {
    .mv_box{
        background: none!important;
        height: auto!important;
        max-height: none!important;
    }

}

/* Movie */

.movie_box{
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    width: 92vw;
}
.movie_box video{
    width: 100%;
}
.btn_video{
    position: absolute;
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
    z-index: 1;
    transition-duration: 0.6s;
    cursor: pointer;
}
.btn_video:hover{
    opacity: 0.6;
    transition-duration: 0.6s;
}

@media screen and (max-width: 900px) {
    .movie_box{
        width: 90vw;	
    }

}

footer{
    background: none;
}











/* MV */
#contents_area{
    position: relative;
}
/* #top_area{
    pointer-events: none;
} */

#top_area #kv_area {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}

#top_area #kv_area .kv_base {position: relative;width: 100vw;height: 100%;pointer-events: none;}

#top_area #kv_area #kv_img_list {position: absolute;top: 0;left: 0;width: 100%;height: 100%;margin: 0;}

#top_area #kv_area #kv_img_list li {position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;opacity: 0;overflow: hidden;/* cursor: pointer; */}

#top_area #kv_area #kv_img_list li.first {
opacity: 1;
}

#top_area #kv_area #kv_img_list li > img {position: absolute;top: 0!important;left: 0;transform-origin: 50% 50%;/* width: auto!important; */height: 100%!important;pointer-events: none;cursor: pointer;object-fit: cover;}

#top_area #kv_area #kv_img_list li#kv_1 > img{
    object-position: center left;
}
#top_area #kv_area #kv_img_list li#kv_3 > img{
    object-position: center right;
}
#top_area #kv_area #kv_img_list li#kv_4 > img{
    object-position: center right;
}
#top_area #kv_area #kv_img_list li#kv_5 > img{
    object-position: center left;
}
#top_area #kv_area #kv_control_area {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
width: 100%;
height: 132px;
max-width: 1290px;
padding: 0 25px;
box-sizing: border-box;
z-index: 100000;
pointer-events: none;
}

#top_area #kv_area #kv_control_area #kv_title_list {
position: absolute;
bottom: 20px;
left: 25px;
width: 400px;
height: 40px;
}

#top_area #kv_area #kv_control_area #kv_title_list li {
position: relative;
display: inline-block;
vertical-align: top;
height: 30px;
}

#top_area #kv_area #kv_control_area #kv_title_list li .kv_dot {
position: absolute;
top: 12px;
left: -4px;
width: 12px;
height: 12px;
cursor: pointer;
pointer-events: auto;
}

#top_area #kv_area #kv_control_area #kv_title_list li p.kv_title {
position: absolute;
top: 8px;
left: 123px;
width: 400px;
height: 20px;
font-family: 'Jost', sans-serif;
color: #181878;
font-size: 10px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.1rem;
display: none;
}

#top_area #kv_area #kv_control_area #kv_title_list li:before {
display: inline-block;
content: "";
position: relative;
width: 4px;
height: 4px;
background: #d1d1d1;
margin-right: 11px;
}

#top_area #kv_area #kv_control_area #kv_title_list li.current:before {
display: inline-block;
content: "";
position: relative;
width: 4px;
height: 4px;
background: #181878;
margin-right: 11px;
}

#top_area #kv_area #kv_control_area #kv_title_list li.current p.kv_title {
position: absolute;
top: 8px;
left: 123px;
width: 400px;
height: 20px;
font-family: 'Jost', sans-serif;
color: #181878;
font-size: 10px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.1rem;
display: none;
}

#top_area #kv_area #kv_control_area #kv_title_box {
position: absolute;
bottom: 12px;
left: 147px;
width: 600px;
height: 40px;
font-family: 'Jost','Noto Sans JP',  sans-serif;
color: #181878;
font-size: 10px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.1rem;
display: block;
}

@media screen and (max-width: 1920px) {
    #top_area #kv_area {
        max-height: 1000px;
    }
}

@media screen and (max-width: 768px) {
#top_area #kv_area {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 100%;
    overflow: hidden;
}
#top_area #kv_area .kv_base {
    position: relative;
    width: 100%;
    height: auto;
}
#top_area #kv_area #kv_img_list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#top_area #kv_area #kv_img_list li {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
}
#top_area #kv_area #kv_img_list li.first {
    opacity: 1;
}
#top_area #kv_area #kv_img_list li > img {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 50% 50%;
    width: 375px;
    height: auto;
}
#top_area #kv_area #kv_control_area {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    height: 132px;
    max-width: 100%;
    padding: 0 25px;
    box-sizing: border-box;
    z-index: 100000;
}
#top_area #kv_area #kv_control_area #kv_title_list {
    position: absolute;
    bottom: 25px;
    left: 25px;
    width: 400px;
    height: 20px;
}
#top_area #kv_area #kv_control_area #kv_title_list li {
    display: inline-block;
    vertical-align: top;
}
#top_area #kv_area #kv_control_area #kv_title_list li .kv_dot {
    position: absolute;
    top: 12px;
    left: -4px;
    width: 12px;
    height: 12px;
    cursor: pointer;
    pointer-events: none;
}
#top_area #kv_area #kv_control_area #kv_title_list li p.kv_title {
    position: absolute;
    top: 8px;
    left: 90px;
    width: 400px;
    height: 20px;
    font-family: 'Jost', sans-serif;
    color: #181878;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1rem;
    display: none;
    transform-origin: left bottom;
    transform: scale(0.75);
}
#top_area #kv_area #kv_control_area #kv_title_list li:before {
    display: inline-block;
    content: "";
    position: relative;
    width: 4px;
    height: 4px;
    background: #d1d1d1;
    margin-right: 11px;
}
#top_area #kv_area #kv_control_area #kv_title_list li.current:before {
    display: inline-block;
    content: "";
    position: relative;
    width: 4px;
    height: 4px;
    background: #181878;
    margin-right: 11px;
}
#top_area #kv_area #kv_control_area #kv_title_list li.current p.kv_title {
    position: absolute;
    top: 8px;
    left: 90px;
    width: 400px;
    height: 20px;
    font-family: 'Jost', sans-serif;
    color: #181878;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1rem;
    display: none;
    transform-origin: left bottom;
    transform: scale(0.75);
}
#top_area #kv_area #kv_control_area #kv_title_box {
    position: absolute;
    bottom: 2px;
    left: 147px;
    width: 600px;
    height: 40px;
    font-family: 'Jost','Noto Sans JP',  sans-serif;
    color: #181878;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1rem;
    display: block;
    transform-origin: left bottom;
    transform: scale(0.75);
}
#top_area #kv_area #kv_control_area #scroll_down_circle {
    position: absolute;
    bottom: 25px;
    right: -10px;
    width: 100px;
    height: 100px;
    animation: circle_rotation 10s linear 0.0s infinite;
}
#top_area #kv_area #kv_control_area #scroll_down_circle img {
    width: 100%;
    height: auto;
}
}

@media screen and (max-width: 900px) {
#top_area #kv_area {
    max-height: inherit;
    width: 100%;
    height: auto;
}
}



        .slider02 .slick-track .slick-slide a > img{
            display: block;
            height: 20vw;
            margin: 0 auto;
			width: auto;
			object-fit: cover;

        }