@charset "UTF-8";
/* CSS Document */

@keyframes txtloop {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}

@keyframes txtloop2 {
0% {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}

.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}

@keyframes zoomUp {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1.4);
}
}

@keyframes zoomUp2 {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}


@-webkit-keyframes mv04-circle {
100% {
stroke-dashoffset: 0;
}
}

@keyframes mv04-circle {
100% {
stroke-dashoffset: 0;
}
}

@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}



@keyframes textRevealAnim {
to {
transform: translateX(0);
}
}

@keyframes borderOpacityAnim {
50% {
border-left: 1px solid #FFF;
}
100% {
border-left: 1px solid transparent;
}
}

@keyframes bgShiftAnim {
to {
background-position: 100%;
}
}


/*PC*/
@media print, screen and (min-width: 768px) {

/* mv
--------------------------------------------*/
#mv {
width: 100%;
height:100vh;
height:100svh;
box-sizing: border-box;
position: relative;
margin:0;
overflow: hidden;
}

#mv .move {
overflow: hidden;
position: relative;
width: 100%;
height:100vh;
margin: 0 auto;
z-index: -1;
}

#mv .move::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.25);
z-index: 1;
}

#mv .move video {
position: absolute;
top: 50%;
left: 50%;
object-fit: cover;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}

#mv .textRevealContainer {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

#mv .textReveal {
overflow: hidden;
animation: textRevealAnim 2s ease 0.5s forwards;
}

#mv .textReveal > div {
padding: 8px 16px;
transform: translateX(100%);
border-left: 1px solid #FFF;
overflow: hidden;
animation: textRevealAnim 2s ease 0.5s forwards,
borderOpacityAnim 2s ease 0.5s forwards;
}

#mv .textReveal > div > div {
transform: translateX(-100%);
animation: textRevealAnim 2s ease 0.5s forwards;
}

#mv .textReveal.x50 {
transform: translateX(-50%);
}

#mv .textReveal.x100 {
transform: translateX(-100%);
}

#mv .textReveal.zoom > div {
transform: translateX(100%) scale(0.5, 0.5);
}

#mv .textReveal.rotateY {
perspective: 100px; /*adjust according to your need*/
}

#mv .textReveal.rotateY > div {
transform: translateX(100%) rotateY(20deg);
}

#mv .textRevealContainer h1{
letter-spacing:-.2rem;
font-size: 4.6rem;
font-weight: 800;
font-style: italic;
color: #FFF;
line-height:1.25;
text-shadow:1px 1px 6px rgba(0,0,0,.25);
text-align: center;
white-space: nowrap
}

#mv .copy {
position: absolute;
left: 50%;
bottom:5%;
width: 90%;
margin-left:-45%;
}

#mv .copy .en_txt{
font-size:.9rem;
font-weight: 300;
color: #FFF;
line-height: 1.6;
text-align: center;
}


/* about
--------------------------------------------*/
#about{
position: relative;
margin: 0 auto;
overflow: hidden;
background: #f0f3f6;
}

#about .section_wrap{
width:60%;
margin: 0 auto;
position: relative;
padding: 160px 0 0;
box-sizing: border-box;
}

#about .box{
width: 64%;
background:url("../images/com/bg_img.jpg") 0 0 repeat;
padding:5% 5%;
margin: 0 auto;
border-radius: 5rem;
position: relative;
z-index: 2;
}

#about .box .en_ttl,
#about .box .ttl{
text-align: center;
color: #FFF;
}

#about .box .txt{
font-size: 1.6rem;
font-weight:600;
line-height:1.8;
text-align: center;
color: #FFF;
}

#about .box .txt span{
font-size:2.4rem;
font-weight:800;
}

#about .section_wrap .img{
position: relative;
width: 100%;
margin: -80px 0 120px;
}

#about .a_l{
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 200px;
overflow: hidden;
}

#about .a_r{
position: absolute;
top: 0;
right: 0;
width: 100%;
min-height: 200px;
overflow: hidden;
}


#about .swiper{
height: 100%;
width: calc(20% - 10px);
}
/* スライドの動き等速 */
#about .swiper-wrapper {
transition-timing-function: linear;
}
/* 画像のサイズ調整 */
#about .swiper-slide img{
height: 100%;
width: 100%;
max-width: none;
object-fit: cover;
border-radius: 1rem;
}

#about article{
overflow: hidden;
position: absolute;
bottom:-17px;
left: 0;
}

#about .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#about .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 9rem;
font-weight: 700;
letter-spacing: -.5rem;
line-height: 1;
overflow: hidden;
color:#0000d9;
opacity:.1;
}

#about .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#about .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}


/* business
--------------------------------------------*/
#business{
position: relative;
overflow: hidden;
padding: 160px 0 100px;
box-sizing: border-box;
background: url("../images/index/bg_business01.jpg") center center no-repeat #0000d9;
background-size:cover;
margin: 0 auto;
}

#business .section_wrap{
width: 90%;
margin:0 auto;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#business .section_wrap .txt_box{
width: 49.3%;
position: relative;
color: #FFF;
}

#business .section_wrap .txt_box .ttl{
color: #FFF;
margin-bottom: 80px;
}

#business .section_wrap .txt_box .red_txt{
font-size: 4rem;
letter-spacing: -.2rem;
line-height: 1;
margin: 0 0 60px;
display:table;
border: 5px solid #FFF;
padding: 10px 35px;
box-sizing: border-box;
border-radius: 50rem;
}

#business .section_wrap .txt_box .red_txt2{
font-size: 2.2rem;
font-weight: 800;
line-height: 1.4;
margin: 0 0 50px;
}

#business .section_wrap .img{
width: 45%;
position: relative;
z-index: 2;
}

#business .section_wrap .img .img1{
width: 82%;
margin: 0 0 0 auto;
border-radius: 30px;
overflow: hidden;
}

#business .section_wrap .img .img2{
width: 42%;
position: absolute;
top: 50%;
left:0;
border-radius: 30px;
overflow: hidden;
}

#business .slider3{
margin: 80px 0 0;
}

#business .slider3 .slick-slide{
margin: 0 15px;
border-radius: 1rem;
overflow: hidden;
}


/*thought
--------------------------------------------*/
#thought{
position: relative;
overflow: hidden;
padding: 160px 0 0px;
box-sizing: border-box;
margin: 0 auto;
background: url("../images/index/bg_thought.jpg") center center no-repeat;
background-size: cover;
}

#thought .section_wrap{
position: relative;
width:90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
align-items: center;
}

#thought .section_wrap .txt_box{
width:55%;
margin:0 auto;
position: relative;
padding: 0 5%;
box-sizing: border-box;
}

#thought .section_wrap .txt_box .red_txt{
font-size: 3.6rem;
font-weight: 800;
letter-spacing: -.2rem;
line-height: 1;
margin: 0 0 60px;
display:table;
border: 5px solid #0000d9;
padding: 10px 35px;
box-sizing: border-box;
border-radius: 50rem;
}

#thought .section_wrap .txt_box .txt span{
font-size: 2.6rem;
font-weight: 800;
}

#thought .common_btn_box{
text-align: center;
}


#thought .section_wrap .txt_box  .illust_img{
margin-top: 60px;
}

#thought .section_wrap .img{
width: 45%;
position: relative;
z-index: 2;
}


#thought .section_wrap .img .img1{
width: 82%;
margin: 0 auto　0　0;
border-radius: 30px;
overflow: hidden;
}

#thought .section_wrap .img .img2{
width: 42%;
position: absolute;
bottom: -12%;
right:0;
border-radius: 30px;
overflow: hidden;
}


#thought article{
width: 100%;
overflow: hidden;
position:relative;
bottom:-20px;
left: 0;
z-index: 1;
}

#thought .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#thought .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 9rem;
font-weight: 700;
letter-spacing: -.5rem;
line-height: 1;
overflow: hidden;
color:#0000d9;
}

#thought .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#thought .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}


#thought .icon1{
position: absolute;
top: 80px;
left: 40px;
z-index: 5;
width: 260px;
}



/*feature
--------------------------------------------*/
#feature{
position: relative;
overflow: hidden;
padding: 160px 0 0px;
box-sizing: border-box;
margin: 0 auto;
background: url("../images/com/bg_img2.jpg") center center repeat;
}

#feature .section_wrap{
position: relative;
width:90%;
margin: 0 auto;
display: flex;
}

#feature .section_wrap .txt_box{
width:100%;
margin:0 auto;
position: relative;
text-align: center;
}

#feature .section_wrap .txt_box .en_ttl,
#feature .section_wrap .txt_box .ttl{
color: #FFF;
}

#feature .section_wrap .txt_box .red_txt{
font-size: 3.2rem;
font-weight: 800;
letter-spacing: -.2rem;
line-height: 1.2;
margin:0;
color: #FFF;
}

#feature .section_wrap .txt_box .txt span{
font-size: 2.6rem;
font-weight: 800;
}

#feature .common_btn_box{
text-align: center;
}


#feature .section_wrap .img{
width:100%;
position: relative;
margin: 100px 0 0;
}

#feature article{
width: 100%;
overflow: hidden;
position:absolute;
bottom:-20px;
left: 0;
z-index: 1;
}

#feature .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#feature .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 9rem;
font-weight: 700;
letter-spacing: -.5rem;
line-height: 1;
overflow: hidden;
color:#FFF;
opacity: .35;
}

#feature .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#feature .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

#feature .icon1{
position: absolute;
top: 40px;
left: 30px;
z-index: 0;
width: 300px;
}

#feature .icon2{
position: absolute;
top: 200px;
right: -120px;
z-index: 0;
width: 540px;
}

#feature .icon3{
position: absolute;
top: 360px;
left: 200px;
z-index: 0;
width:220px;
}



/* idx_block
--------------------------------------------*/
#idx_block{
position: relative;
margin: 0 auto;
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 160px 10%;
box-sizing: border-box;
background: #f0f3f6;
}


#idx_block .block{
width: 48%;
position: relative;
text-align: center;
padding: 35px 35px 0;
box-sizing: border-box;
border: 6px solid #121212;
border-radius: 30px;
background: #FFF;
}

#idx_block .block h3{
font-size:2.2rem;
font-weight: 800;
line-height: 1.2;
margin:0 0 20px;
}

#idx_block .block .illust_img{
width: 88%;
margin: 10px auto 0;
}

/*entry
---------------------------------------------*/
#entry_btn {
position: relative;
}

#entry_btn a {
width: 100%;
padding:80px 5%;
box-sizing: border-box;
color: #fff;
transition: all 0.5s ease-out;
text-align:center;
background:#f22a0f;
display: block;
}

#entry_btn a:hover {
opacity: .5;
}

#entry_btn a .ttl{
margin-bottom: 0;
}

}
/*sp*/
@media only screen and (max-width: 767px) {
/* mv
--------------------------------------------*/
#mv {
width: 100%;
height:calc(100vh - 60px);
height:calc(100svh - 60px);
box-sizing: border-box;
position: relative;
margin:0;
overflow: hidden;
}

#mv .move {
overflow: hidden;
position: relative;
width: 100%;
height:100vh;
margin: 0 auto;
z-index: -1;
}

#mv .move::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.25);
z-index: 1;
}

#mv .move video {
position: absolute;
top: 50%;
left: 50%;
object-fit: cover;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}

#mv .textRevealContainer {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

#mv .textReveal {
overflow: hidden;
animation: textRevealAnim 2s ease 0.5s forwards;
}

#mv .textReveal > div {
padding: 8px 16px;
transform: translateX(100%);
border-left: 1px solid #FFF;
overflow: hidden;
animation: textRevealAnim 2s ease 0.5s forwards,
borderOpacityAnim 2s ease 0.5s forwards;
}

#mv .textReveal > div > div {
transform: translateX(-100%);
animation: textRevealAnim 2s ease 0.5s forwards;
}

#mv .textReveal.x50 {
transform: translateX(-50%);
}

#mv .textReveal.x100 {
transform: translateX(-100%);
}

#mv .textReveal.zoom > div {
transform: translateX(100%) scale(0.5, 0.5);
}

#mv .textReveal.rotateY {
perspective: 100px; /*adjust according to your need*/
}

#mv .textReveal.rotateY > div {
transform: translateX(100%) rotateY(20deg);
}

#mv .textRevealContainer h1{
letter-spacing:-.2rem;
font-size: 1.8rem;
font-weight: 800;
font-style: italic;
color: #FFF;
line-height:1.25;
text-shadow:1px 1px 6px rgba(0,0,0,.25);
text-align: center;
white-space: nowrap
}

#mv .copy {
position: absolute;
left: 50%;
bottom:2.5%;
width: 90%;
margin-left:-45%;
}

#mv .copy .en_txt{
font-size:.7rem;
font-weight: 300;
color: #FFF;
line-height: 1.2;
text-align: center;
}


/* about
--------------------------------------------*/
#about{
position: relative;
margin: 0 auto;
overflow: hidden;
background: #f0f3f6;
padding: 20px 0 80px;
box-sizing: border-box;
}

#about .section_wrap{
width:100%;
margin:20px 0;
position: relative;
}

#about .box{
width: 100%;
background:url("../images/com/bg_img.jpg") 0 0 repeat;
padding:5% 5%;
box-sizing: border-box;
margin: 0 auto;
border-radius: 2.5rem;
position: relative;
z-index: 2;
}

#about .box .en_ttl,
#about .box .ttl{
text-align: center;
color: #FFF;
}

#about .box .txt{
font-size:.9rem;
font-weight:600;
line-height:1.8;
color: #FFF;
}

#about .box .txt span{
font-size:1.2rem;
font-weight:800;
}

#about .section_wrap .img{
position: relative;
width: 100%;
margin:0;
}

#about .a_l{
position: relative;
width: 100%;
overflow: hidden;
}

#about .a_r{
position: relative;
width: 100%;
overflow: hidden;
}


#about .swiper{
width:100%;
}
/* スライドの動き等速 */
#about .swiper-wrapper {
transition-timing-function: linear;
}
/* 画像のサイズ調整 */
#about .swiper-slide img{
height: 100%;
max-width: none;
object-fit: cover;
border-radius: 1rem;
}

#about article{
overflow: hidden;
position: absolute;
bottom: -8px;
left: 0;
}

#about .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#about .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 4.6rem;
font-weight: 700;
letter-spacing: -.1rem;
line-height: 1;
overflow: hidden;
color:#0000d9;
opacity:.1;
}

#about .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#about .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}


/* business
--------------------------------------------*/
#business{
position: relative;
overflow: hidden;
padding:60px 0 40px;
box-sizing: border-box;
background: url("../images/index/bg_business01.jpg") center center no-repeat #0000d9;
background-size:cover;
margin: 0 auto;
}

#business .section_wrap{
width: 90%;
margin:0 auto 30px;
position: relative;
}

#business .section_wrap .txt_box{
width: 100%;
position: relative;
color: #FFF;
margin: 0 0 40px;
}

#business .section_wrap .txt_box .ttl{
color: #FFF;
margin-bottom: 40px;
}

#business .section_wrap .txt_box .red_txt{
font-size: 1.4rem;
letter-spacing:0;
line-height: 1;
margin: 0 0 30px;
display:table;
border: 3px solid #FFF;
padding: 10px 25px;
box-sizing: border-box;
border-radius: 50rem;
}

#business .section_wrap .txt_box .red_txt2{
font-size: 1.2rem;
font-weight: 800;
line-height: 1.4;
margin: 0 0 20px;
}

#business .section_wrap .img{
width: 80%;
position: relative;
z-index: 2;
margin: auto;
}

#business .section_wrap .img .img1{
width: 82%;
margin: 0 0 0 auto;
border-radius: 10px;
overflow: hidden;
}

#business .section_wrap .img .img2{
width: 42%;
position: absolute;
top: 50%;
left:0;
border-radius: 10px;
overflow: hidden;
}

#business .slider3{
margin: 40px 0 0;
}

#business .slider3 .slick-slide{
margin: 0 8px;
border-radius: .6rem;
overflow: hidden;
}


/*thought
--------------------------------------------*/
#thought{
position: relative;
overflow: hidden;
padding: 60px 0 0px;
box-sizing: border-box;
margin: 0 auto;
background: url("../images/index/bg_thought.jpg") center center no-repeat;
background-size: cover;
}

#thought .section_wrap{
position: relative;
width:90%;
margin: 0 auto 30px;
}

#thought .section_wrap .txt_box{
width:100%;
margin:0 auto 30px;
position: relative;
}

#thought .section_wrap .txt_box .red_txt{
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -.2rem;
line-height: 1;
margin: 0 0 30px;
display:table;
border: 3px solid #0000d9;
padding: 10px 15px;
box-sizing: border-box;
border-radius: 50rem;
}

#thought .section_wrap .txt_box .txt span{
font-size: 1.4rem;
font-weight: 800;
}

#thought .common_btn_box{
text-align: center;
}


#thought .section_wrap .txt_box  .illust_img{
margin-top: 30px;
}

#thought .section_wrap .img{
width: 80%;
position: relative;
z-index: 2;
margin: auto;
}


#thought .section_wrap .img .img1{
width: 82%;
margin: 0 auto　0　0;
border-radius: 10px;
overflow: hidden;
}

#thought .section_wrap .img .img2{
width: 42%;
position: absolute;
bottom: -12%;
right:0;
border-radius: 10px;
overflow: hidden;
}


#thought article{
width: 100%;
overflow: hidden;
position:relative;
bottom:-9px;
left: 0;
z-index: 1;
}

#thought .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#thought .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 4.6rem;
font-weight: 700;
letter-spacing: -.1rem;
line-height: 1;
overflow: hidden;
color:#0000d9;
}

#thought .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#thought .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}


#thought .icon1{
position: absolute;
top: 30px;
right: 5px;
z-index: 5;
width: 120px;
}


/*feature
--------------------------------------------*/
#feature{
position: relative;
overflow: hidden;
padding: 60px 0 0px;
box-sizing: border-box;
margin: 0 auto;
background: url("../images/com/bg_img2.jpg") center center repeat;
}

#feature .section_wrap{
position: relative;
width:90%;
margin: 0 auto;
}

#feature .section_wrap .txt_box{
width:100%;
margin:0 auto;
position: relative;
text-align: center;
}

#feature .section_wrap .txt_box .en_ttl,
#feature .section_wrap .txt_box .ttl{
color: #FFF;
}

#feature .section_wrap .txt_box .red_txt{
font-size:1rem;
font-weight: 800;
letter-spacing: -.1rem;
line-height: 1.6;
margin:0;
color: #FFF;
}

#feature .section_wrap .txt_box .txt span{
font-size: 1.4rem;
font-weight: 800;
}

#feature .common_btn_box{
text-align: center;
}


#feature .section_wrap .img{
width:100%;
position: relative;
margin: 30px auto 0;
}

#feature article{
width: 100%;
overflow: hidden;
position:absolute;
bottom:-5px;
left: 0;
z-index: 1;
}

#feature .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#feature .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 2rem;
font-weight: 700;
letter-spacing: -.1rem;
line-height: 1;
overflow: hidden;
color:#FFF;
opacity: .35;
}

#feature .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#feature .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

#feature .icon1{
position: absolute;
top: 10px;
left: 5px;
z-index: 5;
width: 60px;
}

#feature .icon2{
position: absolute;
top: 20px;
right: -10px;
z-index: 5;
width: 80px;
}

#feature .icon3{
display: none;
}



/* idx_block
--------------------------------------------*/
#idx_block{
position: relative;
margin: 0 auto;
overflow: hidden;
padding:60px 5%;
box-sizing: border-box;
background: #f0f3f6;
}


#idx_block .block{
width: 100%;
position: relative;
text-align: center;
padding: 15px 15px 0;
box-sizing: border-box;
border: 6px solid #121212;
border-radius: 20px;
background: #FFF;
margin: 0 0 30px;
}

#idx_block .block:last-child{
margin-bottom: 0;
}

#idx_block .block h3{
font-size:1.4rem;
font-weight: 800;
line-height: 1.2;
margin:0 0 20px;
}

#idx_block .block .illust_img{
width: 88%;
margin: 10px auto 0;
}

/*entry
---------------------------------------------*/
#entry_btn {
position: relative;
}

#entry_btn a {
width: 100%;
padding:30px 5%;
box-sizing: border-box;
color: #fff;
transition: all 0.5s ease-out;
text-align:center;
background:#f22a0f;
display: block;
}

#entry_btn a:hover {
opacity: .5;
}

#entry_btn a .ttl{
margin-bottom: 0;
}


}