@charset "utf-8";

/* mainVisual =========================*/
#mainVisual{position: relative;}
#mainVisual .mainVisual_image{position: relative; z-index: 1;}
#mainVisual .mv_text_wrap{position: absolute;top: 50%;transform: translateY(-50%); z-index: 2;
  width: 30vw; margin-left: 10vw;}
#mainVisual .mv_text01{position: relative; z-index: 3;}
#mainVisual .mv_text01 p{font-family: 'Lato'; color: #fff; font-size: 24px; letter-spacing: 9px; margin-bottom: 1vw;}
#mainVisual .mv_text01 h2{font-size: 60px; color: #fff; font-weight: 500; letter-spacing: 2px; line-height: 1.8;}
#mainVisual .mv_text01 h2 span{display: inline-block;}
#mainVisual .mv_text01 h2 span.white{color: #fff;}

#mainVisual .mv_text02{position: relative; z-index: 3; margin-top: 30px;}
#mainVisual .mv_text02:after{content: ""; background: #fff; height: 6px; width: 100%;
    position: absolute; left: 17vw; left: 0; bottom: -7px;}
#mainVisual .mv_text02 p{font-family: 'Lato'; color: #fff;}
#mainVisual .mv_text02 p .en01{font-size: 13px;}
#mainVisual .mv_text02 p .en02{font-size: 27px; margin-left: 10px;}

#top #mainVisual .mainVisual_image::before{content: ""; position: absolute; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgb(30 75 110 / 40%) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);}

@media screen and (max-width:1380px){
    #mainVisual .mv_text01 p{font-size: 1.5vw;}
    #mainVisual .mv_text01 h2{font-size: 3.6vw;}
    #mainVisual .mv_text02 p .en02{font-size: 2vw;}
}
@media screen and (max-width:960px){
    #mainVisual .mv_text02 p .en01{font-size: 1.3vw;}
}
@media screen and (max-width:640px){
    #mainVisual .mv_text_wrap{width: 73vw; top: 28%;}
    #mainVisual .mv_text01 h2{font-size: 6.6vw; font-weight: 700; line-height: 1.6;}
    #mainVisual .mv_text01 p{font-size: 3vw; letter-spacing: 1.4vw;}
    #mainVisual .mv_text02{margin-top: 10px;}
    #mainVisual .mv_text02:after{height: 3px;}
    #mainVisual .mv_text02 p .en01{display: block; font-size: 1.2vw;}
    #mainVisual .mv_text02 p .en02{display: block; margin-left: 0; font-size: 3.2vw; letter-spacing: 1vw; line-height: 1.5;}

		#top #mainVisual .mainVisual_image::before{background: linear-gradient(to right, rgb(30 75 110 / 40%) 0%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0) 100%);}
}

/* アクセス時、動作 =========================*/
#loading{position: fixed; z-index: 1000; top: 0; bottom: 0; left: 0; right: 0;}
.loading_bk{position: relative; z-index: 1000; width: 100%; height: 100%; background: #671e75; 
    transform: translateX(0%); transition: all 0.8s 0s ease-out;}
.loading_circle{position: absolute; z-index: 1001; left: 0; right: 0; top: 50%;
    text-align: center; transform: translateY(-50%); width: 22vw; margin: auto; transition: all 0.3s 0s ease;}
.loading_circle img{height: 100%;}
.loading_name{position: absolute; left: 0; right: 0; top: 50%;
    text-align: center; transform: translateY(-50%); width: 18vw; margin: auto;}
.loading_name img{width: 100%;}
.loading_name.white{z-index: 1002; overflow: hidden;}
.loading_name.white span{transform: translateY(120%); display: inline-block; transition: all 0.3s 0s ease-out;}
.loading_name.blue{z-index: 1003; transition: all 0.3s 0s ease;}

@media screen and (max-width:960px){
    .loading_circle{width: 60vw;}
    .loading_name{width: 40vw;}
}

@media screen and (max-width:640px){
    .loading_circle{width: 80vw;}
    .loading_name{width: 70vw;}
}

/* 動作 ===== */
.loading_name.blue,
.loading_circle{opacity: 0;}
#mainVisual .mv_text01 p{opacity: 0; transition: all 0.3s 0.3s ease-out;}
#mainVisual .mv_text02 p{opacity: 0; transition: all 0.3s 0.3s ease-out;}
#mainVisual .mv_text02:after{width: 0; transition: all 0.6s 0.3s ease-out;}
#mainVisual .mv_text01 h2 span{opacity: 0; transform: scale(1.5); transition: all 0.5s cubic-bezier(.19,1,.22,1);}
#mainVisual .mv_text01 h2 span:nth-child(1){transition-delay: 0.4s;}
#mainVisual .mv_text01 h2 span:nth-child(2){transition-delay: 0.5s;}
#mainVisual .mv_text01 h2 span:nth-child(3){transition-delay: 0.6s;}
#mainVisual .mv_text01 h2 span:nth-child(4){transition-delay: 0.7s;}
#mainVisual .mv_text01 h2 span:nth-child(6){transition-delay: 0.8s;}
#mainVisual .mv_text01 h2 span:nth-child(7){transition-delay: 0.9s;}
#mainVisual .mv_text01 h2 span:nth-child(8){transition-delay: 1.0s;}
#mainVisual .mv_text01 h2 span:nth-child(9){transition-delay: 1.1s;}

body.scene01 .loading_name.white span{transform: translateY(0%);}
body.scene02 .loading_name.blue,
body.scene02 .loading_circle{opacity: 1;}
body.scene03 .loading_circle img{animation: rotation1 0.7s linear 0.5s infinite;}
@keyframes rotation1{
    0%{ transform:rotate(0);}
    100%{ transform:rotate(360deg);}
}
body.scene03 .loading_circle,
body.scene03 .loading_name.white,
body.scene03 .loading_name.blue{transition: all 0.5s 0.3s ease;}

body.scene04 .loading_bk{transform: translateX(100%);}
body.scene04 .loading_circle,
body.scene04 .loading_name.white,
body.scene04 .loading_name.blue{opacity: 0;}
body.scene05 #loading{visibility: hidden;}
body.scene05 #mainVisual .mv_text02:after{width: 100%;}
body.scene06 #mainVisual .mv_text01 p,
body.scene06 #mainVisual .mv_text02 p{opacity: 1;}
body.scene06 #mainVisual .mv_text01 h2 span{opacity: 1; transform: scale(1);}




/* top_read =========================*/
#top_read{padding: 230px 0 215px; position: relative;}
#top_read::before{content: ""; width: 1px; height: 100px; background: #e6eaf3; margin: auto;
    position: absolute; top: 70px; left: 0; right: 0;}
#top_read .inner{position: relative;}

#top_read .top_read_text01{text-align: center; font-size: 16px; line-height: 3; margin-bottom: 35px; position: relative; z-index: 2;}
#top_read .top_read_text02{text-align: center; font-size: 28px; line-height: 2.2; font-weight: bold; color: #671e75; position: relative; z-index: 2;}
#top_read .top_read_circle_01{position: absolute; top: -70px; left: 0; z-index: 1;}
#top_read .top_read_circle_02{position: absolute; bottom: 130px; right: -20px; z-index: 1;}

@media screen and (max-width: 960px){
    #top_read .top_read_text01{font-size: 13px;}
    #top_read .top_read_circle_01{top: -150px;}
}

@media screen and (max-width: 640px){
    #top_read{padding: 80px 0 100px;}
    #top_read::before{top: 20px; height: 50px;}
    #top_read .top_read_text01{font-size: 14px; text-align: left; line-height: 2.4; margin-bottom: 10px;
    }
    #top_read .top_read_text02{font-size: 20px; text-align: left; line-height: 1.8;}

    #top_read .top_read_circle_01{top: -50px; transform: translateX(-50%); max-width: 50vw;}
    #top_read .top_read_circle_02{bottom: 0; transform: translateX(50%); max-width: 70vw;}
}

/* content_link =========================*/
#content_link{}

.con_link_wrap{position: relative; margin-right: calc(50vw - 640px); margin-bottom: 15vw;}
.con_link_wrap.img_right{margin-left: calc(50vw - 640px); margin-right:0;}
.con_link_wrap a{display: block;}

.con_link_wrap .blue_bar{}
.con_link_wrap .blue_bar::before{content: ""; width: 100%; height: 310px; background: #671e75; display: block; 
    position: absolute; bottom: 0; left: 0; z-index: 2;}
.con_link_wrap .blue_bar::after{content: ""; width: 30px; height: 310px; background: #d7dadc; display: block; 
    position: absolute; right: 0; bottom: 0; z-index: 3;}
.con_link_wrap.img_right .blue_bar::before{left: auto; right: 0;}
.con_link_wrap.img_right .blue_bar::after{left: 0; right: auto;}

.con_link_wrap .page_link{position: absolute; z-index: 105; left: 58vw; bottom: 110px;}
.con_link_wrap.img_right .page_link{left: 7vw;}
.con_link_wrap .page_link .page_title{font-family: 'Lato'; font-size: 44px; font-weight: 700; line-height: 1.3; letter-spacing: 2px; color: #671e75; margin-bottom: 130px;}
.con_link_wrap .page_link .page_title span{display: block; font-size: 15px;}
.con_link_wrap .page_link p{color: #fff; margin-bottom: 45px; letter-spacing: 2px;}
.con_link_wrap .page_link .page_link_btn{color: #fff;}

.con_link_wrap .con_link_image{position: relative;}
.con_link_wrap .con_link_image .main_image{position: relative; z-index: 4; max-width: 53vw;}
.con_link_wrap.img_right .con_link_image .main_image{float: right;}
.con_link_wrap.img_right .con_link_image::after{content: ""; display: block; clear: both;}
.con_link_wrap .con_link_image .con_link_image_sub{max-width: 53vw; position: absolute; bottom: 0; left: 0; transform: translateY(99%); z-index: 1;}
.con_link_wrap.img_right .con_link_image .con_link_image_sub{left: auto; right: 0;}
.con_link_wrap .con_link_image .link_image_02{position: absolute; bottom: 0; right: 0; transform: translateX(100%);}
.con_link_wrap.img_right .con_link_image .link_image_02{transform: translateX(-100%);}
.con_link_wrap .con_link_image .main_image figcaption{z-index: 5}

.con_link_wrap .page_name{font-family: 'Lato'; font-size: 16vw; font-weight: bold; line-height: 0.8; white-space: nowrap; color: #f5f7fa;
    position: absolute; bottom: 310px; left: 64vw; z-index: 1; letter-spacing: -1.5vw;}
.con_link_wrap.img_right .page_name{left: 16vw;}
    
    
/*個別対応*/
#total_support.con_link_wrap .con_link_image .main_image{margin-bottom: -100px;}
#total_support .main_image::before,
#total_support .main_image figure::before{display: none;}


/* 動作 ---------- */
.main_image::before{content: ""; position: absolute; z-index: 3; top: 0; right: 0;
    width: 0%; height: 100%; background: #671e75; transition: width 0s linear 1s;}
.con_link_image.show .main_image::before{width: 100%; left: 0; right: auto; transition: width 0.5s ease-in 0s;}
.main_image figure::before{content: ""; position: absolute; z-index: 4; top: 0; right: 0;
    width: 0%; height: 100%; background: #fff; transition: width 0s linear 1s;}
.con_link_image.show .main_image figure::before{width: 100%; left: 0; right: auto;
    transition: width 0.5s ease-in 0.3s;}
.main_image figure img{opacity: 0; position: relative; z-index: 5;}
.con_link_image.show .main_image figure img{opacity: 1; transition: 0.5s ease-in 0.6s;}


.page_link_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; width: 210px; height: 40px; overflow: hidden; border: 1px solid #fff; text-align: center;
    font-family: 'Lato'; font-size: 15px; letter-spacing: 2px; transition: 0.8s ease;}
.page_link_btn span{display: block;}
.con_link_wrap:hover .page_link_btn{border-color: #671e75; background: rgba(255,255,255,0.4);}

.page_link_btn:before,
.page_link_btn:after,
.page_link_btn span:before,
.page_link_btn span:after{
    content: '';
    position: absolute;
    background: #fff;
}
.page_link_btn:before{bottom: 0; left: -210px; width: 210px; height: 1px;}
.page_link_btn:after{bottom: -40px; right: 0; width: 1px; height: 40px;}
.page_link_btn span:before{top: 0; right: -210px; width: 210px; height: 1px;}
.page_link_btn span:after{top: -40px; left: 0; width: 1px; height: 40px;}

.con_link_wrap:hover .page_link_btn:before {
    animation: leftAnim 1s linear 0s infinite;
}
.con_link_wrap:hover .page_link_btn:after {
    animation: bottomAnim 1s linear .5s infinite;
}
.con_link_wrap:hover .page_link_btn span:before {
    animation: rightAnim 1s linear 0s infinite;
}
.con_link_wrap:hover .page_link_btn span:after {
    animation: topAnim 1s linear .5s infinite;
}

@keyframes topAnim {
    0% {top:-40px;}
    100% {top:40px;}
}
@keyframes bottomAnim {
    0% {bottom:-40px;}
    100% {bottom:40px;}
}
@keyframes rightAnim {
    0% {right:-210px;}
    100% {right:210px;}
}
@keyframes leftAnim {
    0% {left:-210px;}
    100% {left:210px;}
}


@media screen and (max-width: 1280px){
    .con_link_wrap{margin-right: 6vw;}
    .con_link_wrap.img_right{margin-left: 6vw;}
}
@media screen and (max-width: 1100px){
    .con_link_wrap{margin-bottom: 20vw;}
    #total_support.con_link_wrap .con_link_image .main_image{margin-bottom: -70px;}
}

@media screen and (max-width: 960px){
    .con_link_wrap{margin-right: 3vw;}
    .con_link_wrap.img_right{margin-left: 3vw;}
    .con_link_wrap .blue_bar::before{height: 240px;}
    .con_link_wrap .blue_bar::after{height: 240px; width: 15px;}
    .con_link_wrap .con_link_image .main_image{max-width: 60vw;}
    .con_link_wrap .con_link_image .con_link_image_sub{max-width: 60vw;}

    .con_link_wrap .page_link{left: 63vw; right: 3vw; bottom: 50px;}
    .con_link_wrap.img_right .page_link{left: 5vw; right: 62vw;}
    .con_link_wrap .page_link .page_title{font-size: 4.4vw; margin-bottom: 11vw; line-height: 1.1;}

    .con_link_wrap .page_name{bottom: 240px;}

    #our_strength.con_link_wrap .page_link .page_title{margin-bottom: 8vw;}
}

@media screen and (max-width: 640px){
    .con_link_wrap{margin-right: 0; margin-bottom: 50px;}
    .con_link_wrap.img_right{margin-left: 0;}
    .con_link_wrap .blue_bar::before{height: 180px; left: 13vw; z-index: 3;}
    .con_link_wrap.img_right .blue_bar::before{right: 13vw;}
    .con_link_wrap .blue_bar::after{height: 180px; width: 20px;}
    

    .con_link_wrap .con_link_image{padding-bottom: 120px;}
    .con_link_wrap .con_link_image .main_image{max-width: 100%; margin-right: 20px; z-index: 2;}
    .con_link_wrap.img_right .con_link_image .main_image{margin-right:0; margin-left: 20px;}
    .con_link_wrap .con_link_image .con_link_image_sub{display: none;}
    .con_link_wrap .con_link_image .main_image figcaption{bottom: 60px;}
    .con_link_wrap.img_right .con_link_image .main_image figcaption{left: 0; right: auto;}

    .con_link_wrap .page_title{font-size: 32px; margin: 0 25px 25px; color: #671e75; letter-spacing: 3px;
        position: relative; z-index: 2; line-height: 1.3;}
    .con_link_wrap .page_title span{display: block; font-size: 13px;}
    .con_link_wrap .page_link{left: 22vw; right: 7vw; bottom: 40px;}
    .con_link_wrap.img_right .page_link{left: 13vw; right: 15vw;}
    .con_link_wrap .page_link p{margin-bottom: 20px; font-size: 13px;}
    .page_link_btn{width: 160px; font-size: 14px;}

    .con_link_wrap .page_name {bottom: 92vw; font-size: 27vw; left: 45vw;}


    #total_support.con_link_wrap .page_title{margin-bottom: -25px;}
    #total_support.con_link_wrap .con_link_image .main_image{margin-bottom:0; z-index: 4;}
    #total_support.con_link_wrap .con_link_image .main_image figure{margin: 0 12vw;}
    
    #total_support.con_link_wrap .total_support_bk{position: absolute; bottom: 120px; left: 20px; z-index: 1;}
    .total_support_bk img{opacity: 0; position: relative; z-index: 4;}
    .total_support_bk::before{content: ""; position: absolute; z-index: 2; top: 0; right: 0; width: 0%; height: 100%; background: #671e75; transition: width 0s linear 1s;}
    .total_support_bk_inner::before{content: ""; position: absolute; z-index: 3; top: 0; right: 0; width: 0%; height: 100%; background: #fff; transition: width 0s linear 1s;}
    .total_support_bk.show img{opacity: 1; transition: 0.5s ease-in 0.6s;}
    .total_support_bk.show::before{width: 100%; left: 0; right: auto; transition: width 0.5s ease-in 0s;}
    .total_support_bk.show .total_support_bk_inner::before{width: 100%; left: 0; right: auto; transition: width 0.5s ease-in 0.3s;}

    #our_strength.con_link_wrap .page_link{bottom: 25px; left: 17vw;}
}