@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%);
}
}

@keyframes p_anime {
0%{
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
70%{
-webkit-transform: scale(11);
transform: scale(11);
-webkit-box-shadow: 0 0 0 50px rgba(233,30,99, 0);
box-shadow: 0 0 0 15px rgba(233,30,99, 0);
}
100%{
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-box-shadow: 0 0 0 0 rgba(233,30,99, 0);
box-shadow: 0 0 0 0 rgba(233,30,99, 0); }
}


@keyframes moveFV {
0% {
transform: translateX(30px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}

@keyframes conceptRotate {
0% {
transform: rotateY(180deg);
opacity: 0;
}
100% {
transform: rotateY(0);
opacity: 1;
}
}

@keyframes zoomUp {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1.4); /* 拡大率 */
}
}

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

/*header
--------------------------------------*/
#header .logo_wrap {
filter: brightness(0) invert(1);
}

#header.scroll-nav .logo_wrap{
filter: none;
}


#header .menu ul a{
color: #FFF;
}

#header .menu .menu-dropdown-icon a:hover{
color:rgba(33,34,36);
}

#header .menu .menu-dropdown-icon a{
color:#FFF;
}

#header .menu li a:hover{
color:#FFF;
}


#header .menu .menu-dropdown-icon ul li a{
color:rgba(33,34,36);
}

#header .menu .normal-sub a{
color:rgba(33,34,36)!important;
}


#header.scroll-nav .menu a{
color:rgba(33,34,36);
}

#header .hi_menu li a{
color:#FFF;
}

#header.scroll-nav .hi_menu li a{
color:rgba(33,34,36);
}

#header .gnav .sns_list li a{
filter: invert(100%);
}

#header.scroll-nav .gnav .sns_list li a{
filter: invert(0%);
}


/* MV
--------------------------------------------*/
#mv {
position: relative;
margin: 0;

}

#mv .move {
overflow: hidden;
position: relative;
width:100%;
height:97vh;
height:97svh;
min-height: 50vh;
margin: 0 auto;
}

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

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

#mv .txt_box{
position: absolute;
top:40%;
left:5%;
z-index: 10;
}

#mv .txt_box h1{
font-size: 5.8rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: .4rem;
color: #FFF;
margin-bottom:30px;
}

#mv .txt_box h1 span{
font-size:3.6rem;
}

#mv .txt_box p{
color: #FFF;
font-size:1rem;
font-weight: 700;
letter-spacing: .2rem;
line-height: 2.2;
margin-left: 5px;
}


#mv .en_txt{
position: absolute;
top: 20%;
left: 0;
font-size:9rem;
font-weight:700;
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,.5);
letter-spacing:-.1rem;
line-height: .8;
white-space: nowrap;
opacity: .5;
z-index: 5;
}


/*top_loop
--------------------------------------------*/
#top_loop article{
overflow: hidden;
position: relative;
margin:-5px 0 0;
}

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

#top_loop .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:7rem;
font-weight:500;
line-height:1;
overflow: hidden;
color:#443E6E;
letter-spacing: 4rem;
}

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

/*about
--------------------------------------------*/
#about{
position: relative;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
#about .about_wrap{
padding:35rem 0;
box-sizing: border-box;
}

#about .about_wrap .about_inner{
position:relative;
background:rgba(255,255,255,.8);
display:block;
width:88%;
margin:0 auto;
padding:55px;
box-sizing: border-box;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#about .about_wrap .about_inner .txt_box{
width: 50%;
}

#about .about_wrap .about_inner .img{
width: 42%;
}

#about .about_wrap .about_inner .red_ttl{
font-size: 2.6rem;
font-weight:700;
line-height: 1.6;
letter-spacing: .1rem;
color:#443E6E;
margin:0 0 40px;
}

#about .about_wrap .about_inner .txt{
font-size: 1.2rem;
font-weight: 500;
line-height: 2.2;
}

#about .container {
display: flex;
flex-wrap:wrap;
justify-content: space-between;
width: 100%;
height: 100%;
margin:0;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}

#about .column {
width: 33%;
transition: transform 0.5s ease-out;
position: relative;
}

#about .column.center {
position: relative;
margin-top: -100%; /* 2枚目の画像から表示するように上へ移動 */
padding-top: 50%; /* スクロール時の隙間を防ぐ */
transition: transform 1s ease-out, opacity 1s ease-out;
}

#about ul {
list-style: none;
margin: 0;
padding: 0;

}

#about ul li {
margin-bottom:10px;
}

#about ul li img {
width: 100%;
display: block;
}


/*works
--------------------------------------------*/
#works{
background-image: url("../images/index/bg_work.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 160px 0 0;
box-sizing: border-box;
width: 100%;
margin:0 auto;
position: relative;
}

#works::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0,.6) 80%);
}

#works .txt_box{
width: 80%;
margin: 0 auto 60px;
color: #FFF;
position: relative;
z-index: 2;
text-align:center;
}

#works .txt_box .txt{
font-size: 1.2rem;
font-weight: 500;
line-height: 2.2;
}

#works .table_box{
width: 70%;
margin:80px auto 120px;
padding: 55px 55px 340px;
box-sizing: border-box;
border-radius: 1rem;
position: relative;;
z-index: 5;
background: url("../images/index/w_illust.png") center bottom no-repeat #FFF;
background-size: 76% auto;
}

#works .table_box .table{
width:100%;
border-top:solid 1px #121212;
border-left:solid 1px #121212;
position: relative;
z-index: 5;
}

#works .table_box .table th{
padding:8px;
box-sizing: border-box;
border-right:solid 1px #121212;
border-bottom:solid 1px #121212;
}

#works .table_box .table td{
padding:8px;
box-sizing: border-box;
border-right:solid 1px #121212;
border-bottom:solid 1px #121212;
}

#works .table_box .table th.bg_c01{
background:#ececec;
}

#works .table_box .table th.bg_c02{
background:#f1f0f8;
}

#works .table_box .table th.bg_c03{
background:#c4caec;
}

#works .slider2{
margin:0;
position:relative;
}

#works  .slider2 .slick-slide{
margin-right:40px;
margin-bottom: -100px;
}

#works .slider2 .slick-slide:nth-child(1),
#works .slider2 .slick-slide:nth-child(7){
width:460px !important;
margin-top:40px;
}

#works .slider2 .slick-slide:nth-child(2),
#works .slider2 .slick-slide:nth-child(8){
width:220px !important;
margin-top:85px; 
}

#works .slider2 .slick-slide:nth-child(3),
#works .slider2 .slick-slide:nth-child(9){
width:360px !important;
margin-top:100px;
}

#works .slider2 .slick-slide:nth-child(4),
#works .slider2 .slick-slide:nth-child(10){
width:220px !important;
margin-top: 55px;
}

#works .slider2 .slick-slide:nth-child(5),
#works .slider2 .slick-slide:nth-child(11){
width:400px !important;
margin-top:25px;
}

#works .slider2 .slick-slide:nth-child(6),
#works .slider2 .slick-slide:nth-child(12){
width: 280px !important;
margin-top:105px;
}


#works  .slider2 .slick-slide img{
border-radius: 1rem;
overflow: hidden;
}


/* style
--------------------------------------------*/
#style{
position: relative;
margin:160px auto 0;
}


#style .section_wrap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#style .section_wrap .ttl_box{
width:50%;
padding:0 5%;
box-sizing: border-box;
margin: 0 0 60px;
}

#style .section_wrap .ttl_box .enttl{
font-size: 5.2rem;
font-weight: 800;
line-height: 1;
margin-bottom: 30px;
white-space: nowrap;
}

#style .section_wrap .ttl_box .ttl{
font-size: 2.6rem;
font-weight: 800;
line-height: 1.6;
margin: 0 0 60px;
}

#style .section_wrap .ttl_box .txt{
font-size: 1.2rem;
font-weight: 500;
line-height: 2;
}

#style .section_wrap .img{
width:45%;
overflow: hidden;
margin:0;
border-radius:3rem 0 0 3rem;
}

#style .section_wrap .img .add-animation {
animation: zoomUp 10s linear 0s normal both;
}

#style article{
position: relative;
bottom:-13px;
left: 0;
overflow: hidden;
z-index: -1;
}

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

#style .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 7rem;
font-weight: 500;
line-height: 1;
overflow: hidden;
color: #443E6E;
letter-spacing: 3rem;
font-family: Helvetica Neue,Arial,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;
}

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

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

#style .fv_img{
width: 100%;
height: 600px;
overflow: hidden;
}



/* data
--------------------------------------------*/
#data{
position: relative;
padding:160px 0;
background:url("../images/index/bg_data.jpg") center center no-repeat;
background-size: cover;
}

#data .ttl_box{
width:70%;
text-align: center;
margin: 0 auto 80px;
color: #FFF;
}

#data .data_list{
width: 88%;
margin: auto;
display: flex;
flex-wrap: wrap;
}

#data .data_list li{
background: #FFF;
padding:15px;
box-sizing: border-box;
width:23%;
margin-right: 2%;
margin-bottom: 2%;
border-radius: 1rem;
}

#data .data_list li:nth-child(4n){
margin-right: 0;
}

#data .data_list li .line{
border: 1px solid #443E6E;
padding: 20px;
box-sizing: border-box;
height: 100%;
border-radius: 1rem;
}

#data .data_list li .line h3{
background: #443E6E;
padding: 10px;
box-sizing: border-box;
border-radius: 50rem;
font-size: 1.2rem;
font-weight: 400;
line-height: 1;
color: #FFF;
text-align: center;
margin: 0 0 20px;
}

#data .data_list li .line .data{
display: flex;
justify-content: center;
align-items: baseline;
}

#data .data_list li .line .data h5{
font-size: 6rem;
font-weight: 500;
line-height: 1;
}

#data .data_list li .line .data p{
font-size: 1.2rem;
line-height: 1;
display: inline-block;
}

#data .data_list li .line .data2{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#data .data_list li .line .data2 li{
width: 46% !important;
margin: 0;
border-radius: 0;
box-shadow: none;
}

#data .data_list li .line .data2 li .sb_ttl{
font-size: 1.2rem;
font-weight: 700;
line-height: 1;
text-align: center;
margin: 0 0 10px;
}

#data article{
position: relative;
bottom:-13px;
left: 0;
overflow: hidden;
z-index: -1;
}

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

#data .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 7rem;
font-weight: 500;
line-height: 1;
overflow: hidden;
color: #443E6E;
letter-spacing: 4rem;
}

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

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

#data .data_box2{
width: 70%;
padding: 25px;
box-sizing: border-box;
background: #FFF;
margin:60px auto 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
border-radius: 1rem;
}

#data .data_box2 .txt_box{
width:60%;
}

#data .data_box2 .txt_box h3{
font-size: 2rem;
font-weight: 500;
line-height: 1;
margin: 0 0 30px;
border: 1px solid #443E6E;
padding: 5px 10px;
display: table;
}

#data .data_box2 .txt_box p{
font-weight: 500;
}

#data .data_box2 .img{
width:35%;
border-radius:1rem;
overflow: hidden;
}

/* balance
--------------------------------------------*/
#balance{
position: relative;
margin:160px auto 0;
}

#balance .section_wrap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
align-items: center;
}

#balance .section_wrap .ttl_box{
width:50%;
padding:0 5%;
box-sizing: border-box;
margin: 0 0 60px;
}

#balance .section_wrap .ttl_box .enttl{
font-size: 5.2rem;
font-weight: 800;
line-height: 1;
margin-bottom: 30px;
white-space: nowrap;
}

#balance .section_wrap .ttl_box .ttl{
font-size: 2.6rem;
font-weight: 800;
line-height: 1.6;
margin: 0 0 60px;
}

#balance .section_wrap .ttl_box .txt{
font-size: 1.2rem;
font-weight: 500;
line-height: 2;
}

#balance .section_wrap .img{
width:50%;
overflow: hidden;
margin:0;
border-radius:0 3rem 3rem 0;
}

#balance .section_wrap .img .add-animation {
animation: zoomUp 10s linear 0s normal both;
}

#balance article{
position: relative;
bottom:-13px;
left: 0;
overflow: hidden;
margin-top:80px;
}

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

#balance .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 7rem;
font-weight: 500;
line-height: 1;
overflow: hidden;
color: #443E6E;
letter-spacing: 4rem;
}

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

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

/* entry
--------------------------------------------*/
#entry{
position: relative;
margin:0;
background: url("../images/index/bg_entry.jpg") center bottom no-repeat;
background-size: cover;
padding:120px 0;
box-sizing: border-box;
}

#entry .txt_box{
width: 80%;
margin: 0 auto;
text-align: center;
color: #FFF;
}

#entry .txt_box h3{
font-size: 2.6rem;
font-weight: 700;
line-height: 1.6;
margin: 0 auto 50px;
}


#entry .txt_box .txt{
font-size: 1.2rem;
font-weight: 500;
line-height: 2;
}




}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.image-box {
order: -1;
}
}








/*sp*/
@media only screen and (max-width: 767px) {


/*header
--------------------------------------*/
#header .logo_wrap {
filter: brightness(0) invert(1);
}

#header.scroll-nav .logo_wrap{
filter: none;
}


/* MV
--------------------------------------------*/
#mv {
position: relative;
margin: 0;

}

#mv .move {
overflow: hidden;
position: relative;
width:100%;
height:97vh;
height:97svh;
min-height: 50vh;
margin: 0 auto;
}

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

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

#mv .txt_box{
position: absolute;
top: 30%;
left:5%;
z-index: 10;
}

#mv .txt_box h1{
font-size: 15vw;
font-weight: 700;
line-height: 1.2;
letter-spacing: .4rem;
color: #FFF;
margin-bottom:30px;
}

#mv .txt_box h1 span{
font-size: 10vw;
}

#mv .txt_box p{
color: #FFF;
font-size:0.9rem;
font-weight: 700;
letter-spacing: .2rem;
line-height: 2.2;
}


#mv .en_txt{
position: absolute;
top: 20%;
left: 0;
font-size: 12vw;
font-weight: 700;
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,.5);
letter-spacing:-.1rem;
line-height: 1.1;
white-space: nowrap;
opacity: .5;
z-index: 5;
}


/*top_loop
--------------------------------------------*/
#top_loop article{
overflow: hidden;
position: relative;
margin:-5px 0 0;
}

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

#top_loop .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:4rem;
font-weight:500;
line-height:1;
overflow: hidden;
color:#443E6E;
letter-spacing: 1.2rem;
}

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

/*about
--------------------------------------------*/
#about{
position: relative;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
#about .about_wrap{
padding: 3rem 0;
box-sizing: border-box;
}

#about .about_wrap .about_inner{
position:relative;
background:rgba(255,255,255,.8);
display:block;
width:90%;
margin:0 auto;
padding:30px;
box-sizing: border-box;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

#about .about_wrap .about_inner .red_ttl{
font-size: 1.8rem;
font-weight:700;
line-height: 1.6;
letter-spacing: .1rem;
color:#443E6E;
margin:0 0 20px;
}

#about .about_wrap .about_inner .txt{
font-size: 1rem;
font-weight: 500;
line-height: 2.2;
margin-bottom: 20px;
}

#about .about_wrap .about_inner .img {
display: none;
}

#about .container {
display: flex;
flex-wrap:wrap;
justify-content: space-between;
width: 100%;
height: 100%;
margin:0;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}

#about .column {
width: 33%;
transition: transform 0.5s ease-out;
position: relative;
}

#about .column.left,
#about .column.right {
position: relative;
padding-bottom: 50%; /* スクロール時の隙間を防ぐ */
transition: transform 1s ease-out, opacity 1s ease-out;
}

#about .column.center {
position: relative;
margin-top: -100%; /* 2枚目の画像から表示するように上へ移動 */
padding-top: 50%; /* スクロール時の隙間を防ぐ */
transition: transform 1s ease-out, opacity 1s ease-out;
}

#about ul {
list-style: none;
margin: 0;
padding: 0;

}

#about ul li {
margin-bottom:10px;
}

#about ul li img {
width: 100%;
display: block;
}


/*works
--------------------------------------------*/
#works{
background-image: url("../images/index/bg_work.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 0 0;
box-sizing: border-box;
width: 100%;
margin:0 auto;
position: relative;
}

#works::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0,.6) 80%);
}

#works .txt_box{
width: 80%;
margin: 0 auto 60px;
color: #FFF;
position: relative;
z-index: 2;
text-align:center;
}

#works .txt_box .txt{
font-size: 1rem;
font-weight: 500;
line-height: 2.2;
}

#works .table_box{
width: 90%;
margin: 50px auto;
padding: 30px 30px 140px;
box-sizing: border-box;
border-radius: 1rem;
position: relative;;
z-index: 5;
background: url("../images/index/w_illust.png") center bottom no-repeat #FFF;
background-size: 76% auto;
}

#works .table_box .table{
width:100%;
border-top:solid 1px #121212;
border-left:solid 1px #121212;
position: relative;
z-index: 5;
display: block;
overflow-x: auto;
}
#works .table_box .table tbody{
display: block;
width:1000px;
}

#works .table_box .table th{
padding:8px;
box-sizing: border-box;
border-right:solid 1px #121212;
border-bottom:solid 1px #121212;
}

#works .table_box .table td{
padding:8px;
box-sizing: border-box;
border-right:solid 1px #121212;
border-bottom:solid 1px #121212;
}

#works .table_box .table th.bg_c01{
background:#ececec;
}

#works .table_box .table th.bg_c02{
background:#f1f0f8;
}

#works .table_box .table th.bg_c03{
background:#c4caec;
}

#works .slider2{
margin:0;
position:relative;
}

#works  .slider2 .slick-slide{
margin-right:40px;
margin-bottom: -220px;
}

#works .slider2 .slick-slide:nth-child(1),
#works .slider2 .slick-slide:nth-child(7){
width:440px !important;
}

#works .slider2 .slick-slide:nth-child(2),
#works .slider2 .slick-slide:nth-child(8){
width:200px !important;
margin-top:45px; 
}

#works .slider2 .slick-slide:nth-child(3),
#works .slider2 .slick-slide:nth-child(9){
width:340px !important;
margin-top:60px;
}

#works .slider2 .slick-slide:nth-child(4),
#works .slider2 .slick-slide:nth-child(10){
width:200px !important;
margin-top: 15px;
}

#works .slider2 .slick-slide:nth-child(5),
#works .slider2 .slick-slide:nth-child(11){
width:380px !important;
}

#works .slider2 .slick-slide:nth-child(6),
#works .slider2 .slick-slide:nth-child(12){
width: 200px !important;
margin-top:65px;
}


#works  .slider2 .slick-slide img{
border-radius: 1rem;
overflow: hidden;
}


/* style
--------------------------------------------*/
#style{
position: relative;
margin:100px auto 0;
}


#style .section_wrap{

}

#style .section_wrap .ttl_box{
padding:0 5%;
box-sizing: border-box;
margin: 0 0 60px;
}

#style .section_wrap .ttl_box .enttl{
font-size: 5.2rem;
font-weight: 800;
line-height: 1;
margin-bottom: 30px;
white-space: nowrap;
}

#style .section_wrap .ttl_box .ttl{
font-size: 2.6rem;
font-weight: 800;
line-height: 1.6;
margin: 0 0 60px;
}

#style .section_wrap .ttl_box .txt{
font-size: 1rem;
font-weight: 500;
line-height: 2;
}

#style .section_wrap .img{
overflow: hidden;
margin:0;
border-radius: 2rem 0 0 2rem;
}

#style .section_wrap .img .add-animation {
animation: zoomUp 10s linear 0s normal both;
}

#style article{
position: relative;
bottom:-13px;
left: 0;
overflow: hidden;
z-index: -1;
}

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

#style .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:4rem;
font-weight:500;
line-height:1;
overflow: hidden;
color:#443E6E;
letter-spacing: 1.2rem;
}

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

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

#style .fv_img{
width: 100%;
overflow: hidden;
}



/* data
--------------------------------------------*/
#data{
position: relative;
padding:100px 0;
background:url("../images/index/bg_data.jpg") center center no-repeat;
background-size: cover;
}

#data .ttl_box{
width:90%;
text-align: center;
margin: 0 auto 50px;
color: #FFF;
}

#data .data_list{
width: 90%;
margin: auto;
}

#data .data_list li{
background: #FFF;
padding:15px;
box-sizing: border-box;
margin-right: 2%;
margin-bottom: 2%;
border-radius: 1rem;
}

#data .data_list li:nth-child(4n){
margin-right: 0;
}

#data .data_list li .line{
border: 1px solid #443E6E;
padding: 20px;
box-sizing: border-box;
height: 100%;
border-radius: 1rem;
}

#data .data_list li .line h3{
background: #443E6E;
padding: 10px;
box-sizing: border-box;
border-radius: 50rem;
font-size: 1.2rem;
font-weight: 400;
line-height: 1;
color: #FFF;
text-align: center;
margin: 0 0 20px;
}

#data .data_list li .line .data{
display: flex;
justify-content: center;
align-items: baseline;
}

#data .data_list li .line .data h5{
font-size: 6rem;
font-weight: 500;
line-height: 1;
}

#data .data_list li .line .data p{
font-size: 1.2rem;
line-height: 1;
display: inline-block;
}

#data .data_list li .line .data2{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#data .data_list li .line .data2 li{
width: 46% !important;
margin: 0;
border-radius: 0;
box-shadow: none;
}

#data .data_list li .line .data2 li .sb_ttl{
font-size: 1.2rem;
font-weight: 700;
line-height: 1;
text-align: center;
margin: 0 0 10px;
}

#data article{
position: relative;
bottom:-13px;
left: 0;
overflow: hidden;
z-index: -1;
}

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

#data .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 7rem;
font-weight: 500;
line-height: 1;
overflow: hidden;
color: #443E6E;
letter-spacing: 4rem;
}

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

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

#data .data_box2{
width: 90%;
padding: 25px;
box-sizing: border-box;
background: #FFF;
margin:60px auto 0;
border-radius: 1rem;
}

#data .data_box2 .txt_box{

}

#data .data_box2 .txt_box h3{
font-size: 1.4rem;
font-weight: 500;
line-height: 1;
margin: 0 0 20px;
border: 1px solid #443E6E;
padding: 5px 10px;
display: table;
}

#data .data_box2 .txt_box p{
font-weight: 500;
}

#data .data_box2 .img{
border-radius:1rem;
overflow: hidden;
margin-top: 10px;
}

/* balance
--------------------------------------------*/
#balance{
position: relative;
margin: 100px auto 0;
}

#balance .section_wrap{

}

#balance .section_wrap .ttl_box{
padding:0 5%;
box-sizing: border-box;
margin: 0 0 60px;
}

#balance .section_wrap .ttl_box .txt{
font-size: 1rem;
font-weight: 500;
line-height: 2;
}

#balance .section_wrap .img{
overflow: hidden;
margin:0;
border-radius:0 2rem 2rem 0;
}

#balance .section_wrap .img .add-animation {
animation: zoomUp 10s linear 0s normal both;
}

#balance article{
position: relative;
bottom:-13px;
left: 0;
overflow: hidden;
margin-top:10px;
}

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

#balance .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size:4rem;
font-weight:500;
line-height:1;
overflow: hidden;
color:#443E6E;
letter-spacing: 1.2rem;
}

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

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

/* entry
--------------------------------------------*/
#entry{
position: relative;
margin:0;
background: url("../images/index/bg_entry.jpg") center bottom no-repeat;
background-size: cover;
padding: 80px 0;
box-sizing: border-box;
}

#entry .txt_box{
width: 80%;
margin: 0 auto;
text-align: center;
color: #FFF;
}

#entry .txt_box h3{
font-size: 2rem;
font-weight: 700;
line-height: 1.6;
margin: 0 auto 30px;
}


#entry .txt_box .txt{
font-size: 1rem;
font-weight: 500;
line-height: 2;
}



}