@charset "utf-8";
/*==================================================================
	Main Visual setting
===================================================================*/
h1 {
    position: absolute;
    right: clamp(50px, 5.95238095vw, 100px);
    top: clamp(60px, 14.714vw, 290px);
    width: clamp(300px, 35.7142857vw, 600px);
}
/*==================================================================
	Main Content setting
===================================================================*/
.sec {
    padding: clamp(80px, 7.14285714vw, 120px) 0;
    position: relative;
}
.ttl-larger {
    font-size: clamp(4.4rem, 6.96428571vw, 11.7rem);
    line-height: 1;
    position: absolute;
    left: 2%;
    top: clamp(40px, 4.76190476vw, 80px);
    z-index: 1;
}
@media screen and (max-width: 767px) {
    .ttl-larger {
        padding: 0 0 30px 15px;
        position: static;
        text-align: left;
        width: 100%;
    }
}
.sec-ttl {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(30px, 2.97619048vw, 50px);
}
.sec-ttl .jp {
    display: block;
    font-size: clamp(1.9rem, 2.26190476vw, 3.8rem);
}
.sec-ttl .en {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-size: clamp(1.4rem, 1.07142857vw, 1.8rem);
}
.sec-ttl .en:before,
.sec-ttl .en:after {
    background-color: #FFF;
    content: "";
    display: block;
    height: 1px;
    width: 0;
    transition: width 0.6s linear 1.2s, opacity 0.6s ease-in-out 1.2s;
}
.sec-ttl .en.on:before,
.sec-ttl .en.on:after {
    width: clamp(110px, 10.7142857vw, 180px);
}
.sec-ttl.c-blue .en:before,
.sec-ttl.c-blue .en:after {
    background-color: #1D2F61;
}
.sec-ttl .en > small {
    font-size: 100%;
    white-space: nowrap;
}
.lead-txt {
    font-size: clamp(1.2rem, 1.13095238vw, 1.9rem);
    letter-spacing: 0.15em;
    line-height: 2.4;
    margin-bottom: clamp(30px, 2.97619048vw, 50px);
    text-align: center;
}
@media screen and (max-width: 1600px) {
    .lead-txt.mw-txt {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    .dib-pc { display: inline-block;}
}
@media screen and (max-width: 767px) {
    .lead-txt {
        line-height: 1.7;
        letter-spacing: 0.05em;
        text-align: left;
    }
    .lead-txt.mw-txt { max-width: initial;}
    .dib-pc { display: initial;}
}

/* Mission section
------------------------------------------------------------------*/
.sec-mission { position: relative;}
.sec-mission .ttl-larger {
    top: 0;
    padding-top: 120px;
}
.mission {
    background: rgba(255,255,255,0.15);
    padding: 60px;
    width: clamp(400px , 50vw, 800px);
    max-width: 785px;
    margin-left: auto;
    padding: clamp(30px, 3.57142857vw, 60px) clamp(30px, 7.14285714vw, 120px);
    position: relative;
    z-index: 1;
}
.mission .ttl {
    font-size: clamp(2rem, 2.38095238vw, 4rem);
    margin-bottom: 20px;
    text-align: center;
}
.mission .txt {
	font-size: clamp(1.22rem, 1.892857143vw, 1.8rem);
	line-height: 2.2;
	margin-bottom: clamp(25px, 2.97619048vw, 50px);
	letter-spacing: 0.2em;
}
.mission .btn a {
    border: 1px solid #FFF;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 100%;
    line-height: 1.2;
    letter-spacing: 0.1em;
    overflow: hidden;
    margin: 0 auto;
    max-width: 266px;
    position: relative;
    height: 50px;
    width: 100%;
    text-align: center;
}
.mission .btn a:before {
    background: #1D2F61;
    content: "";
    display: block;
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    transition: width linear 0.3s;
}
.mission .btn a:hover:before { width: 100%;}
.mission .btn a:after {    
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    right: 30px;
    top: 50%;
    z-index: 1;
    transform: rotate(45deg) translateY(-50%);
}
.mission_bg {
    opacity: 0.25;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 33.33%;
}

@media screen and (max-width: 767px) {
    .firstview .sec-mission {
        padding-top: 100px;
        flex-wrap: wrap;
    }
    .mission {
        padding-top: 20px;
        padding-bottom: 25px;
        width: 90%;
    }
    .mission .btn a {
        font-size: 1.4rem;
        max-width: 220px;
        height: 40px;
    }
    .mission .btn a:after { width: 6px; height: 6px;}
    .sec-mission .ttl-larger {
        transform: translateY(0);
    }
    .mission .txt {
        line-height: 1.9;
        letter-spacing: 0.1em;
    }
}
.simple-parallax-initialized { height: 100%; }
.firstview {
    min-height: 100vh;
    padding-top: 250vh;
    padding-bottom: clamp(60px, 7.14285714vw, 120px);
    position: relative;
    z-index: 0;
}
.firstview .fv-bg {
    background: linear-gradient(to bottom, rgba(14,25,113,1) 0%,rgba(6,9,44,1) 100%);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100vh !important;
}
.firstview .fv-bg video { mix-blend-mode: lighten; transition: all 0.5s ease-in-out; }
.firstview .fv-bg video,
.firstview .fv-bg img {
    height: 100%;
    object-fit: cover;
}
.firstview.is-bot .fv-bg {
    position: fixed;
    bottom: 0;
    top: auto;
}
.firstview h1 {
    position: fixed;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.bg_mission_out.firstview .fv-bg video {
    opacity: 0;
    visibility: hidden;
}
.firstview .sec-mission {
	background: none;
	position: absolute;
	width: 100%;
	top: 100vh;
	left: 0;
	transition: opacity 0.5s ease, visibility 0.5s ease, background 0.5s ease;
	min-height: 100vh;
	display: flex;
	align-items: flex-start;
}
.firstview.is-start h1 {
    transition: all 1s ease 0.6s;
    visibility: hidden;
    opacity: 0;
}
.firstview.is-bot .sec-mission {
    opacity: 0;
    visibility: hidden;
}
.firstview.is-fixed .sec-mission {
    /* position: fixed;
    top: 0;
    left:0; */
    background: rgba(15,26,119,0.6);
    backdrop-filter: blur(20px);
}
.sec-mission .ttl-larger .en {
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s linear;
  transform: translateY(50px);
}
.firstview.is-mission .sec-mission .ttl-larger .en {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
.sec-mission .mission {
    /* clip-path: inset(100% 0px 0px);
    transition: all 0.5s linear; */
}
.firstview.is-mission .sec-mission .mission {
    /* clip-path: inset(0px); */
}
.firstview.mission_fixed .sec-mission {
    position: fixed;
    top: 0;
    left: 0;
}
.mission-wrap { position: relative; }
@media screen and (max-width: 767px) {
    .firstview h1 {
        top: 15vh;
        right: 25px;
    }
}

.icon_scroll {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    transition: all 0.5s ease-in-out;
}
.icon_scroll .txt {
    color: #fff;
    font-size: clamp(1rem,2vw,1.2rem);
    letter-spacing: 0.1em;
}
.icon_scroll .icon {
    width: 20px;
    padding: 15px 0;
    margin: 0 auto;
    animation: scroll-drop 1.5s infinite ease-in-out;
}
@keyframes scroll-drop {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}
.firstview.is-start .icon_scroll {
    opacity: 0;
    visibility: hidden;
}

/* Service section
------------------------------------------------------------------*/
.service-list {
    display: flex;
    justify-content: center;
    gap: 60px;
}
.service-list .item {
    border: 1px solid #d8664f;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 1.2vw, 20px);
    position: relative;
    min-height: 360px;
    min-width: 360px;
    width: calc(100% / 3 - 60px * 2 / 3);
    text-align: center;
}
.service-list .item:hover {
    cursor: pointer;
    transform: scale(1.03);
}

.service-list .item:nth-child(1) { border-color: #d8664f;}
.service-list .item:nth-child(2) { border-color: #95f8fd;}
.service-list .item:nth-child(3) { border-color: #4165f7;}
.service-list .item:nth-child(1):hover { border: none; background: linear-gradient(to bottom,  rgba(190,97,82,0.5) 0%,rgba(125,67,89,0.5) 50%,rgba(107,60,78,0.5) 100%); backdrop-filter: blur(20px);}
.service-list .item:nth-child(2):hover { border: none; background: linear-gradient(to bottom,  rgba(140,230,239,0.5) 0%,rgba(110,184,209,0.5) 50%,rgba(75,129,163,0.5) 100%); backdrop-filter: blur(20px);}
.service-list .item:nth-child(3):hover { border: none; background: linear-gradient(to bottom,  rgba(63,95,238,0.5) 0%,rgba(43,66,182,0.5) 50%,rgba(15,24,91,0.5) 100%);  backdrop-filter: blur(20px);}

.service-list .item .en {
    font-size: clamp(1.1rem, 2.38095238vw, 4.0rem);
    line-height: 1.2;
}
.service-list .item .jp {
    font-size: clamp(0.8rem, 1.25vw, 2.1rem);
}
.service-list .item .ar {
    border: 1px solid;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(16px, 2.61904762vw, 44px);
    height: clamp(16px, 2.61904762vw, 44px);
    position: relative;
}
.service-list .item:nth-child(1) .ar { border-color: #d8664f;}
.service-list .item:nth-child(2) .ar { border-color: #95f8fd;}
.service-list .item:nth-child(3) .ar { border-color: #4165f7;}
.service-list .item .ar:after {
    border-top: 1px solid;
    border-right: 1px solid;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    position: relative;
    right: 2px;
}
.service-list .item:nth-child(1) .ar:after { border-color: #d8664f;}
.service-list .item:nth-child(2) .ar:after { border-color: #95f8fd;}
.service-list .item:nth-child(3) .ar:after { border-color: #4165f7;}

@media screen and (max-width: 767px) {
    .service-list { gap: 6px;}
    .service-list .item {
        min-width: unset;
        min-height: unset;
        width: calc(100% / 3 - 6px * 2 / 3);
        aspect-ratio: 1/1;
    }
    .service-list .item .ar:after {
        height: 5px;
        width: 5px;
    }
}

/* Strengths section
------------------------------------------------------------------*/
.sec-strengths {
    background: linear-gradient(to bottom,  rgba(14,25,113,1) 0%,rgba(6,9,44,1) 100%);
}
.strengths-list {
    display: flex;
    justify-content: center;
    gap: 75px;
    margin: 0 auto;
    max-width: 1024px;
}
.strengths-list .item {
    border: 1px solid transparent;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.2vw, 20px);
    position: relative;
    min-height: /*444px*/333px;
    width: calc(100% / 3 - 75px * 2 / 3);
    text-align: center;
    
}
.strengths-list .item:hover {
    cursor: pointer;
    transform: scale(1.03);
}
.strengths-list .item:nth-child(1) { border-color: #d8664f;}
.strengths-list .item:nth-child(2) { border-color: #95f8fd;}
.strengths-list .item:nth-child(3) { border-color: #4165f7;}

.strengths-list .item:nth-child(1):hover {
    border: none;
    background: linear-gradient(to bottom,  rgba(190,97,82,0.5) 0%,rgba(125,67,89,0.5) 50%,rgba(107,60,78,0.5) 100%);
    backdrop-filter: blur(20px);
}
.strengths-list .item:nth-child(2):hover {
    border: none;
    background: linear-gradient(to bottom,  rgba(140,230,239,0.5) 0%,rgba(110,184,209,0.5) 50%,rgba(75,129,163,0.5) 100%);
    backdrop-filter: blur(20px);
}
.strengths-list .item:nth-child(3):hover { 
    border: none;
    background: linear-gradient(to bottom,  rgba(63,95,238,0.5) 0%,rgba(43,66,182,0.5) 50%,rgba(15,24,91,0.5) 100%);
    backdrop-filter: blur(20px);
}

.strengths-list .item .jp {
    font-size: clamp(1.4rem, 1.8452381vw, 3.1rem);
    line-height: 1.25;
}
.strengths-list .item .x_icon { width: clamp(27px, 3.21428571vw, 54px); }
@media screen and (max-width: 767px) {
    .strengths-list { gap: 12px;}
    .strengths-list .item {
        border-radius: 8px;
        min-width: 85px;
        min-height: 170px;
        width: calc(100% / 3 - 12px * 2 / 3);
    }
}

/* Case section
------------------------------------------------------------------*/
.sec-case {
    background: url(../imgs/case_bg.jpg) no-repeat center center / cover;
}
.case-list .item {
    background: rgba(255,255,255,0.15);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 266px;
    width: calc(100% / 4 - 50px * 3 / 4);
    position: relative;
    text-align: center;
}
.case-list .item .ar {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(32px, 3.80952381vw, 64px);
    height: clamp(32px, 3.80952381vw, 64px);
    position: absolute;
    right: 12px;
    bottom: 12px;
    transition: all ease-out 0.3s;
}
.case-list .item .ar:after {    
    border-top: 1px solid #06092b;
    border-right: 1px solid #06092b;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
}
.case-list .item:hover .ar { background: #06092b; }
.case-list .item:hover .ar:after { border-color: #FFF; }
.case-list .item .cms1 { font-size: clamp(1.4rem, 1.42857143vw, 2.4rem); line-height: 1.25; }
.case-list .item .cms2 { font-size: clamp(2.25rem, 2.67857143vw, 4.5rem); line-height: 1.25; }
@media screen and (max-width: 767px) {
    .case-list .item {
        height: auto;
        aspect-ratio: 420/266;
        margin-right: 15px;
    }
}

/* Column section
------------------------------------------------------------------*/
.sec-column { background: #FFF;}
.column-list {
    display: flex;
    justify-content: center;
    gap: 50px;
}
.column-list .item {
    background: #F3F4F7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 266px;
    width: calc(100% / 3 - 50px * 2 / 3);
    position: relative;
    text-align: center;
}
.column-list .item .ar {
    border: 1px solid #1D2F61;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(32px, 3.80952381vw, 64px);
    height: clamp(32px, 3.80952381vw, 64px);
    position: absolute;
    right: 12px;
    bottom: 12px;
    transition: all ease-in-out 0.3s;
}
.column-list .item .ar:after {    
    border-top: 1px solid #06092b;
    border-right: 1px solid #06092b;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
}
.column-list .item:hover .ar { background: #06092b; }
.column-list .item:hover .ar:after { border-color: #FFF; }
.column-list .item .cms1 { font-size: clamp(1.4rem, 1.42857143vw, 2.4rem); line-height: 1.25; }
.column-list .item .cms2 { font-size: clamp(2.25rem, 2.67857143vw, 4.5rem); line-height: 1.25; }

@media screen and (max-width: 767px) {
    .column-list {
        display: flex;
        justify-content: start;
        gap: 30px;
        overflow-x: scroll;
        padding-bottom: 8px;
    }
    .column-list .item {    
        height: 160px!important;
        min-width: 250px!important;
        width: calc(100% / 3 - 30px * 2 / 3);
    }
}

/* News section
------------------------------------------------------------------*/
.sec-news { background: #F3F4F7;}
.news-block {
    background: #FFF;
    padding: clamp(20px, 4.76190476vw, 80px) clamp(20px, 7.14285714vw, 120px);
}
.news-block dl {
    background: url(../imgs/arrow_icon01.svg) no-repeat right 12px center / 24px;
    border-top: 1px solid #1d2f61;
    border-bottom: 1px solid #1d2f61;
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: -1px;
    padding: 24px 12px;
    position: relative;
    transition: all ease-in-out 0.3s;
}
.news-block dl:hover { background-color: #F3F4F8; }
.news-block dl dt {
    background: #1d2f61;
    color: #FFF;
    font-size: clamp(1.2rem, 0.892857143vw, 1.5rem);
    min-width: clamp(75px, 5.6547619vw, 95px);
    text-align: center;
}
.news-block dl dd {
    font-size: clamp(1.3rem, 0.892857143vw, 1.5rem);
    font-weight: 500;
}
.news-block dl dd .new {
    background: #c1272d;
    color: #FFF;
    display: inline-block;
    font-weight: 400;
    min-width: clamp(50px, 4.16666667vw, 70px);
    text-align: center;
}

@media screen and (max-width: 767px) {
    .news-block { padding: 15px;}
    .news-block dl {
        background-size: 16px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 40px 10px 10px;
    }
}

/* animate scroll .sec-business .sec-case .sec-strengths */
.scroll-fadein {
  opacity: 0;
  filter: blur(6px);
  transition: opacity 1s ease, filter 1.8s ease, transform 0.5s ease;
}
.scroll-fadein.on {
  opacity: 1;
  filter: blur(0);
}
.scroll-fadeup { opacity: 0; }
.scroll-fadeup.on { animation: fadeUpAnime ease-out 1.2s forwards; }
@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.sec {
    position: relative;
    z-index: 10;
}
.sec-colum { background: #fff;}
.sec-case {
  background: none;
  position: relative;
}
.sec-case .bg-case {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.sec-case .bg-case img {
    height: 100%;
    object-fit: cover;
}
.case-list .item { margin-right: 50px; }
.scroll-wrap .sec {
	background: none;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	display: flex;
	align-items: center;
	justify-content: center;
    flex-direction: column;
}
.scroll-wrap .sec-blank { height: 0; }
.scroll-wrap .is-start .sec {
    position: fixed;
    top: 0;
    opacity: 1;
    visibility: visible;
}
.scroll-wrap .is-bot .sec:not(.sec-strengths) {
    opacity: 0;
    visibility: hidden;
}
.scroll-wrap .scroll-item {
    padding: 75vh 0;
    position: relative;
    z-index: 0;
}
.scroll-wrap .item-blank { padding: 25vh 0; }
.scroll-wrap .scroll-item .ttl-larger { top: 100px;}
.scroll-wrap .sec-bg {
    background: linear-gradient(to bottom, rgba(14,25,113,1) 0%,rgba(6,9,44,1) 100%);
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    height: 100vh;
    width: 100%;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.scroll-wrap .sec-bg video,
.scroll-wrap .sec-bg img {
    height: 110%;
    object-fit: cover;
}
.scroll-wrap .is-bg .sec-bg {
    opacity: 1;
    visibility: visible;
    position: fixed;
    transform: translateY(0);
    top: 0;
}
/* .scroll-wrap .is-bg.scroll-item:nth-child(2) .sec-bg {
    background: #000;
} */
.scroll-wrap .is-bg.scroll-item:nth-child(2) .sec {
	position: fixed;
	top: 0;
	opacity: 1;
	visibility: visible;
}
.scroll-wrap .sec-service ~ .sec-bg video {
	transform: translateY(50vh);
	height: 100vh;
	object-fit: unset;
}
.sec-bg video { mix-blend-mode: lighten; }
@media screen and (max-width: 767px) {
    .scroll-wrap .scroll-item .inner { margin: 0 auto; }
    .scroll-wrap .scroll-item .ttl-larger {
        margin-top: 0;
    }
}
.progress-indicator {
  display: flex;
  justify-content: space-between;
  border: 1px solid #fff;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0.05em;
	bottom: 15px;
	display: flex;
	left: 15px;
	width: 80px;
  height: 54px;
  padding: 10px;
	position: fixed;
  transition: all 0.5s ease-out;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
}
.progress-indicator.is-show {
  opacity: 1;
  visibility: visible;
}
.progress-indicator:before {
  content: "";
  position: absolute;
  width: 1px;
  height: calc(100% - 20px);
  top: 10px;
  left: 50%;
  background: #fff;
}
.progress-indicator-right {
  margin-top: auto;
}
/* .progress-indicator.is-white {
  background: #fff;
  color: #000;
} */
/* .progress-indicator.is-white:before { background: #000; } */
@media screen and (max-width: 767px) {
    .progress-indicator { height: 44px; }
}

#footer {
	position: relative;
    z-index: 10;
}

/* loading */
body {
	opacity: 1;
	visibility: visible;
    transition: unset;
}
.loading {
    background: linear-gradient(to bottom, rgba(14,25,113,1) 0%,rgba(6,9,44,1) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999999;
    transition: all 0.3s ease-out;
    opacity: 1;
    visibility: visible;
    text-align: center;
}
.loading > img { width: 156px;}
body.is-loaded .loading { opacity: 0; visibility: hidden;}
@media screen and (max-width: 767px){
    .loading > img { width: 110px;}
}