/* fullpage */
#vid{width:100%; height:100vh; object-fit: cover;}
#fp-nav { position: fixed; top: 50%; left: 60px; z-index: 9;}
#fp-nav ul li { font-size: 0; }
#fp-nav ul li a{width: 5px; height: 5px; background: rgba(255,255,255,.4); left: 50%; transform: translateX(-50%); border-radius: 50%; display: block; position: relative; margin: 10px 0;}
#fp-nav .fp-tooltip { position: relative; writing-mode: tb-rl; font-size: 0; color: #fff; padding-bottom: 15px; cursor: pointer; text-align: left; margin-bottom: 0; left: 50%; transform: translateX(-50%); letter-spacing: 0.01em;}
#fp-nav .fp-tooltip::after { content: ''; width: 1px; height: 0; background-color: rgba(255,255,255,.4); position: absolute; top: 100%; transform: translateX(-50%); left: 50%; }

#fp-nav ul li a.active{color: #fff;}
#fp-nav ul li a.active + .fp-tooltip { margin-bottom: 65px; font-size: 13px;}
#fp-nav ul li a.active + .fp-tooltip::after{animation: fplong 1.5s forwards ease-in;}

#fp-nav.black ul li a{background: rgba(0,0,0,.3);}
#fp-nav.black ul li a.active{background: #222;}
#fp-nav.black .fp-tooltip {color: #222;}
#fp-nav.black .fp-tooltip::after{background-color: rgba(0,0,0,.3);}

@keyframes fplong{
    0%{height: 0;}
    100%{height: 47px;}
}

/* #fp-nav .fp-tooltip::after { content: ''; width: 5px; height: 5px; background-color: #fff; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); left: -17px; }
#fp-nav ul li a.active + .fp-tooltip::before{ content: ''; width: 30px; height: 30px; background-color: rgba(255,255,255,.2); border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); left: -30px;
} */
/* #fp-nav.cg_color ul::after { background-color: rgba(0, 0, 0, .1); }
#fp-nav.cg_color ul li a.active + .fp-tooltip { color: #52aea9; }
#fp-nav.cg_color .fp-tooltip { color: rgba(0, 0, 0, .5); }
#fp-nav.cg_color ul li a.active + .fp-tooltip::after { background-color: #52aea9; } */

/* ========== section1 ========== */
#section1{position: relative;}
#visual .visual_slide { position: relative; }
#visual .visual_slide .bg img { min-width: 1920px; position: relative; left: 50%; transform: translateX(-50%); }
#visual .swiper-slide-active .textBox > div * { animation: fadeUp 0.8s forwards; }
#visual .textBox { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; }
#visual .textBox > div * { transform: translateX(30px); opacity: 0; }
#visual .textBox h2{letter-spacing: 0.01em;}
#visual .textBox h2:nth-child(2) { animation-delay: 0.1s !important; }
#visual .textBox p { margin-top: 30px; animation-delay: 0.4s !important; }
#visual .pagi_wrap { position: absolute; width: 100%; bottom: 260px; z-index: 10; }
#visual .pagi_wrap .inner{position: relative;}
#visual .pagi_wrap .visual_pagi { position: relative; top: 50%; left: 50px; transform: translateY(-50%); text-align: left; }
#visual .pagi_wrap .visual_pagi .swiper-pagination-bullet { z-index: 1; display: inline-block; background-color: transparent; color: rgba(var(--white-color-1), 0.5); margin: 0 5px; opacity: 1; position: relative; width: auto; height: auto; font-size: 20px; transition: all 1.2s cubic-bezier(0.075, 0.82, 0.165, 1); position: absolute;}
#visual .pagi_wrap .visual_pagi .swiper-pagination-bullet::after { content: ''; width: 0; height: 2px; background-color:#fff; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: all 1.2s cubic-bezier(0.075, 0.82, 0.165, 1); animation-duration: 19s; animation-fill-mode: forwards; }
#visual .pagi_wrap .visual_pagi .swiper-pagination-bullet::before{ content: ''; width: 0; height: 4px; background-color:rgba(255, 255, 255, .2); position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: all 1.2s cubic-bezier(0.075, 0.82, 0.165, 1); animation-duration: 3.8s; animation-fill-mode: forwards; z-index: -1; }
/* #visual .pagi_wrap .visual_pagi .swiper-pagination-bullet:first-child:after{ animation-duration: 19s; } */

#visual .pagi_wrap .visual_pagi .swiper-pagination-bullet-active { color: rgb(var(--white-color-1)); padding-right: 150px;}
#visual .pagi_wrap .visual_pagi .swiper-pagination-bullet-active::after { animation-name: widthMore; }
#visual .pagi_wrap .visual_pagi .swiper-pagination-bullet-active::before { width: 130px; }
#visual .pagi_wrap .visual_pagi .swiper-pagination-bullet:not(:first-child)::after { animation-delay: 1.2s; transition: all .5s; animation-duration: 6s; }
#visual.mo_block .pagi_wrap .visual_pagi .swiper-pagination-bullet::after { animation-delay: 1.2s !important; transition: all .5s !important; animation-duration: 4s !important; }

#visual .swiper-button-next, #visual .swiper-button-prev{width: 10px; height: 17px; background-size: 10px 17px; margin-top: 0; transform: translateY(-50%);}
#visual .swiper-button-next{background-image: url(/images/main/visual_next.png); right: auto; left: 30px;}
#visual .swiper-button-prev{background-image: url(/images/main/visual_prev.png);}


@keyframes widthMore {
    0% { width: 0; }
    100% { width: 130px; }
}
@keyframes heightMore {
    0% { height: 50px; }
    50% { height: 140px; }
    100% { height: 50px; }
}

@keyframes fadeUp {
    0% { transform: translateX(30px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
.scroll_down_box{position: absolute; left: 60px; bottom: 40px; z-index: 9; text-align: center; transition: all 1s 0s;}
.scroll_down_box p{writing-mode: vertical-rl; text-transform: uppercase; margin-bottom: 10px;}
.scroll_down_box .circle-box{    display: inline-block;
    vertical-align: text-bottom;
    position: relative;
    height: 27px;
    padding-left: 10px;
}

.scroll_down_box .circle-box span{
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    animation: upDown 2s ease-in-out infinite;
}
.scroll_down_box .circle-box span:nth-child(2) {
    margin-top: 5px;
    animation-delay: 0.2s;
}
.scroll_down_box .circle-box span:nth-child(3) {
    margin-top: 11px;
    animation-delay: 0.4s;
}
.scroll_down_box .circle-box span:nth-child(4) {
    margin-top: 16px;
    animation-delay: 0.6s;
}
@keyframes upDown {
	0% {
		opacity: 0;
	  }
	  50% {
		opacity: 1;
	  }
	  100% {
		opacity: 0;
	  } 
}


/* ========== section2 ========== */
#section2 { position: relative; background: url(/images/main/section2Page_bg.jpg) no-repeat top ;}
#section2 .fp-tableCell{ padding-top: 60px;}
#section2 .section02_slide.swiper { padding: 50px 0 !important;}
#section2 .section02_slide .product_box{background: #fff; padding: 30px 50px; box-shadow: 0 0 50px rgba(0,0,0,0.1); position: relative; z-index: 1;}
#section2 .section02_slide .product_box a{display: block; width: 100%; height: 100%;}
#section2 .section02_slide .txt_box {height: 150px; overflow-y: auto;}
#section2 .section02_slide .txt_box h6{margin: 15px 0; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: nowrap;}
#section2 .section02_slide .txt_box p{ overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 4;  -webkit-box-orient: vertical;}

#section2 .pagi_wrap {position: absolute; right: 0; top: -50px;}
#section2 .swiper-button-next, #section2 .swiper-button-prev{width: 66px; height: 66px; background-size: 66px 66px; transition: 0.3s; filter: drop-shadow(0px 0px 30px rgba(0,0,0,.08));}
#section2 .swiper-button-next{background-image: url(/images/main/blue_next_arrow.png); right: 0;}
#section2 .swiper-button-prev{background-image: url(/images/main/blue_prev_arrow.png); right: 74px; left: auto;}
#section2 .swiper-button-next:hover{background-image: url(/images/main/blue_next_arrow_ov.png);}
#section2 .swiper-button-prev:hover{background-image: url(/images/main/blue_prev_arrow_ov.png);}

/* ========== section2 ========== */


/* ========== section3 ========== */
#section3 {
    height: 100vh;
    position: relative;
}
#section3 > div {
    height: 100% !important;
}
#section3 .main-company__swiper {
    height: 100%;
}
#section3 .main-company__swiper .swiper-slide {
    position: relative;
}
#section3 .main-company__swiper .swiper-slide .bg {
    width: 100%;
    height: 100%;
}
#section3 .main-company__swiper .swiper-slide .bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
}
#section3 .main-company__text {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 1500px;
}
#section3 .main-company__sub-title,
#section3 .main-company__title,
#section3 .main-company__desc {
    color: #fff;
    transform: translateY(50px);
    opacity: 0;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}
#section3 .main-company__sub-title {
    font-size: 1.25rem;
    font-family: "Play", sans-serif;
    font-weight: 700;
    letter-spacing: normal;
    margin-bottom: 1.5em;
}
#section3 .main-company__title {
    font-size: 3.75rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5em;
    transition-delay: 0.3s;
}
#section3 .main-company__desc {
    font-size: 1.125rem;
    line-height: 1.94;
    margin-bottom: 65px;
    transition-delay: 0.6s;
}
#section3 .main-company__more {
    width: 160px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    transition: color 0.4s, background-color 0.4s;
}
#section3 .main-company__more span {
    font-family: "Play", sans-serif;
    font-size: 0.938rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: normal;
}
#section3 .main-company__nav {
    position: absolute;
    right: 0;
    top: 55%;
    transform: translate3d(0, -50%, 0);
    z-index: 1;
    width: 260px;
}
#section3 .main-company__link {
    display: block;
    width: 100%;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 500;
    padding: 19px 0;
    position: relative;
    transition: color 0.5s;
}
#section3 .main-company__link::before {
    content: "";
    position: absolute;
    right: 72px;
    top: 50%;
    transform: translate3d(-10px, -50%, 0);
    width: 14px;
    height: auto;
    aspect-ratio: 1/1;
    background: url("/images/main/arrow_blue.png") no-repeat center center/contain;
    opacity: 0;
    transition: opacity 0.5s, transform 0.5s;
}
#section3 .main-company__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #004ea2;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s;
}
#section3 .main-company__link.on {
    color: #004ea2;
    font-weight: 600;
}
#section3 .main-company__link.on::before {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
}
#section3 .main-company__link.on::after {
    transform: scaleX(1);
}

#section3 .main-company__swiper .swiper-slide-active .main-company__sub-title,
#section3 .main-company__swiper .swiper-slide-active .main-company__title,
#section3 .main-company__swiper .swiper-slide-active .main-company__desc {
    transform: translateY(0);
    opacity: 1;
}
#section3 .main-company__swiper .swiper-slide-active .bg img {
    animation: scale-ani 5s ease forwards;
}
@keyframes scale-ani {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}




/* ========== section3 ========== */

/* ========== section4 ========== */
#section4{ position: relative; background: url(/images/main/section4Page_bg.jpg) no-repeat right; background-size: 50% 100%;}
#section4 .sec4_inner > div{width: 50%;}
#section4 .sec4_inner .left_box > div{width: 100%; padding-right:120px;}
#section4 .sec4_inner .right_box{padding-left: 100px;}
#section4 .busi_ul{display:grid;grid-template-columns: repeat(2,1fr);  margin-top: 50px;}
#section4 .busi_ul li{border-bottom: 1px solid #e5e5e5; transition: 0.3s;}
#section4 .busi_ul li a{ width: 100%; height: 100%; padding: 25px 20px;}

/* ========== section4 ========== */




@media screen and (max-width: 1700px) {
    #fp-nav{left: auto; right: 60px;}

    #section3 .main-company__text {
        width: 100%;
        padding: 0 4%;
    }
}

@media screen and (max-width: 1400px) {
    /* ========= section1 ========= */
    .scroll_down_box{left: 20px; bottom: 30px;}

    /* ========= section1 ========= */


    /* ========= section4 ========= */
    #section4 .busi_ul li a{padding: 20px;}
    #section4 .sec4_inner .right_box{padding-left: 50px;}
    /* ========= section4 ========= */
}

@media screen and (max-width: 1204px) {
    #section3 .big_inner{max-width: 1500px; padding: 0;}
    #section3 .company_navi_box{position: relative; width: auto; padding:  0 20px;}
    #section3 .company_navi_box ul{display: flex; flex-wrap: wrap; margin-top: 5%;}
    #section3 .company_navi_box li{width: 33.3333%;}
    #section3 .company_navi_box li:not(:last-child){margin-bottom: 0;}

    #section5{display: none;}
}

@media screen and (max-width: 1023px) {
    /* ========= section1 ========= */
    /* linkBox */
    #linkRound { bottom: 45px; }
    #linkRound ul { flex-wrap: wrap; }
    #linkRound ul li { width: 35%; margin-bottom: 50px; }
    #linkRound ul li:not(:nth-child(2),:nth-child(4)) { padding-left: 4.8876vw; }
    #linkRound ul li:not(:nth-child(1),:nth-child(3)) { padding-right: 4.8876vw; }
    #linkRound ul li:not(:last-child) { margin-right: 0; }
    #linkRound ul li .img_box { width: 180px; height: 180px; }
    /* ========= section1 ========= */


    /* ========= section3 ========= */
    #section3 .main-company__text {
        top: 40%;
    }
    #section3 .main-company__nav {
        left: 0;
        top: 80%;
        width: 100%;
        padding: 0 4%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 40px;
    }
    #section3 .main-company__link::after {
        height: 2px;
    }
    #section3 .main-company__link::before {
        right: 0;
    }
    /* ========= section3 ========= */


    /* ========= section4 ========= */
    #section4{background: url(/images/main/m_section4Page_bg.jpg) no-repeat bottom; background-size: 100% 50%;}
    #section4 .sec4_inner .right_box{padding-left: 0;}
    #section4 .sec4_inner .left_box > div{width: 100%; padding-right:0;}
    #section4 .sec4_inner > div{width: 100%; min-height: 500px; padding: 10% 0;}
    /* ========= section4 ========= */
}

@media screen and (max-width: 960px) {
   
}

@media screen and (max-width: 769px) {

    /* #visual .visual_slide img { min-width: auto !important; height: auto !important; } */
    .video{display: none !important;}

    .section { height: auto !important; position: relative; }
    .section .fp-tableCell { height: auto !important; }
    /* ========= section1 ========= */
    /* linkBox */
    /* #section1.section { height: 100vh !important; }
    #section1.section .fp-tableCell { height: 100vh !important; } */
    #linkRound ul li { width: auto; }
    #linkRound ul li:not(:nth-child(2),:nth-child(4)) { padding-right: 4.5573vw; padding-left: 6.5104vw; }
    #linkRound ul li:not(:nth-child(1),:nth-child(3)) { padding-left: 4.5573vw; padding-right: 6.5104vw; }
    #linkRound ul li .img_box { margin-bottom: 30px; }

    #visual .visual_slide .bg img{height: 80vh; object-fit: cover;}
    /* ========= section1 ========= */


    /* ========= section2 ========= */
    #section2 .section02_slide .product_box{box-shadow: none;}
    #section2 .section02_slide.swiper{padding: 10% 0 0 !important;}
    #section2 .pagi_wrap{top: 0; margin-top: 5%;}
    #section2 .swiper-button-next, #section2 .swiper-button-prev{width: 40px; height: 40px; background-size: 40px 40px;}
    #section2 .swiper-button-prev{right: 47px;}
    #section2.section .fp-tableCell{padding: 10% 0;}
    /* ========= section2 ========= */
    .more_btn .more_img img{width: 30px;}
    .more_btn span{margin-left: 15px;}

    /* ========= section3 ========= */
    #section3 {
        height: 123vw !important;
    }
    #section3 .main-company__text {
        top: 35%;
    }
    #section3 .main-company__sub-title {
        font-size: 3vw;
    }
    #section3 .main-company__title {
        font-size: 8vw;
    }
    #section3 .main-company__desc {
        font-size: 2.8vw;
        margin-bottom: 4em;
    }
    #section3 .main-company__nav {
        gap: 2vw 5vw;
    }
    #section3 .main-company__link {
        font-size: 3vw;
    }
    #section3 .main-company__more {
        width: 25vw;
        height: 9vw;
    }
    #section3 .main-company__more span {
        font-size: 2.5vw;
    }
    /* ========= section3 ========= */


    /* ========= section4 ========= */
    #section4{background: url(/images/main/m_section4Page_bg.jpg) no-repeat bottom; background-size: auto 50%;}
    /* ========= section4 ========= */


    /* ========= section5 ========= */
   
    /* ========= section5 ========= */

    
    #visual .pagi_wrap .visual_pagi .swiper-pagination-bullet:not(:first-child)::after { animation-delay: 1.2s; transition: all 1.2s; animation-duration: 1.2s; }

    }

@media screen and (max-width: 500px) {
    /* ========= section1 ========= */
    /* visual */
    /* #visual .visual_slide .bg img{height: 100vh !important;} */

    /* linkBox */
    #linkRound ul li { width: auto; margin-bottom: 25px; }
    #linkRound ul li:not(:nth-child(2),:nth-child(4)) { padding-right: 20px; padding-left: 6.5104vw; }
    #linkRound ul li:not(:nth-child(1),:nth-child(3)) { padding-left: 20px; padding-right: 6.5104vw; }
    #linkRound ul li .img_box { margin-bottom: 15px; width: 28.0000vw; height: 28.0000vw; }
    #linkRound ul li .img_box img { width: 50px; }
    /* ========= section1 ========= */


    /* ========= section2 ========= */
    #section2 .section02_slide.swiper{padding: 15% 0 0 !important;}
    /* ========= section2 ========= */


    /* ========= section3 ========= */
    #section3 .main-company__sub-title {
        font-size: 3.5vw;
    }
    #section3 .main-company__desc {
        font-size: 3.2vw;
        margin-bottom: 3em;
    }
    #section3 .main-company__more {
        border-width: 2px;
    }
    #section3 .main-company__link {
        padding: 10px 0;
    }
    #section3 .main-company__link::before {
        width: 10px;
    }
    #section3 .main-company__link::after {
        height: 1px;
    }
    /* ========= section3 ========= */


    /* ========= section4 ========= */

    /* ========= section4 ========= */


    /* ========= section5 ========= */
  
    /* ========= section5 ========= */
}

@media screen and (min-width: 1200px) {
    #section3 .company_navi_box li:hover::after{width: 150%;}
    #section3 .company_navi_box li:hover p{color: #004ea2; font-weight: 600;}
    #section3 .company_navi_box li:hover .arrow_red{opacity: 1; margin-right: 0;}
}

@media screen and (min-width: 769px) {
    #section2 .section02_slide .product_box a::after{position: absolute; content: ''; left: 0; right: 0; top: 0; bottom: 0; background: url(/images/main/ov_bg.png) no-repeat top/cover; opacity: 0; transition: 0.3s;}
    #section2 .section02_slide .product_box a:hover::after{opacity: 1;}

    #section4 .busi_ul li.on {background: #004ea2; border-bottom: 1px solid #004ea2;}
    #section4 .busi_ul li.on p {color: #fff;}
    #section4 .busi_ul li.on img {filter: brightness(0) invert(1);}
}

@media screen and (max-width: 499px) {

   
    
}