@charset "UTF-8";
/* CSS Document */
@keyframes zoomUp {
0% {
transform: scale(1);
}
100% {
transform: scale(1.15);
}
}


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

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

/*PC*/
@media print, screen and (min-width: 768px) {
#why_chosen {
position:relative;
margin: 0 auto 220px;
}

#why_chosen .section_wrap{
width: 100%;
margin: 0 auto;
}

#why_chosen .img_block{
width:calc(100% - 100px);
margin: 0 auto;
box-sizing: border-box;
position: relative;
}


#why_chosen .img_block .swiper-container{
height:600px;
width: 100%;
overflow: hidden;
position: relative;
}


#why_chosen .img_block .swiper-wrapper,
#why_chosen .img_block .swiper-slide>div{
height: 100%;
width: 100%;
}

#why_chosen .img_block .swiper-slide.sw-1>div{
background: url("../images/why_chosen/index/bg_img01.jpg") center center / cover no-repeat;
}
#why_chosen .img_block .swiper-slide.sw-2>div{
background: url("../images/why_chosen/index/bg_img02.jpg") center center / cover no-repeat;
}
#why_chosen .img_block .swiper-slide.sw-3>div{
background: url("../images/why_chosen/index/bg_img03.jpg") center center / cover no-repeat;
}
#why_chosen .img_block .swiper-slide.sw-4>div{
background: url("../images/why_chosen/index/bg_img04.jpg") center center / cover no-repeat;
}

#why_chosen .img_block .swiper-slide-active>div, .swiper-slide-duplicate-active>div,
#why_chosen .img_block .swiper-slide-prev>div{
animation: zoomUp 10s linear 0s 1 normal both;
}

#why_chosen .img_block .txt_box{
position:relative;
}

#why_chosen .img_block .txt_box .w_ttl{
font-size: 3rem;
font-weight: 400;
line-height: 1.6;
margin: 0 0 60px;
line-height:1.4;
letter-spacing: -.05rem;
text-align: center;
}


#why_chosen .img_block .txt_box p{
font-size: 1.2rem;
font-weight: 600;
line-height: 2.2;
text-align: center;
letter-spacing: .05rem;
margin: 0 0 60px;
}


#why_chosen .works_block{
background-color: #f1f4f8;
flex-direction: row-reverse;
color: #fff;
padding:10vw 100px;
box-sizing: border-box;
}


#why_chosen .items {
position: relative;
}

#why_chosen .items li {
padding:25px;
box-sizing: border-box;
cursor: pointer;
border-bottom: 1px solid rgba(0, 72, 138, .5);
transition: background 0.3s ease;;
}


#why_chosen .items li:last-child {
border-bottom: none;
}
#why_chosen .items li a {
color: #20293b;
display: flex;
flex-wrap: wrap;
justify-content: space-between
}

#why_chosen .items li a .txt_box{
width: 50%;
padding: 25px 0;
box-sizing: border-box;
}

#why_chosen .items li a .s_ttl {
display: block;
font-size: .6rem;
color: #00488a;
margin-bottom: 10px;
}
#why_chosen .items li a .w_ttl {
font-size:2.2rem;
font-weight: 300;
line-height: 1;
margin: 0 0 30px;
}
#why_chosen .items li a .w_ttl2 {
font-size: 1.6rem;
font-weight: 300;
line-height: 1.2;
color: #00488a;
margin: 0 0 20px;
}
#why_chosen .items li a .s_txt {
line-height: 1.6;
}

#why_chosen .items .txt_box .common_btn_box{
position: relative;
display: inline-flex;
align-items:center;
color: #fff;
background-color: #0b4a7f;
border:
1px solid #0b4a7f;
font-size: .8rem;
letter-spacing: 0.05em;
font-weight: 700;
padding:10px 30px;
border-radius:6px;
transition:0.3s;
margin-top: 30px;
}

#why_chosen .items li:hover {
background: rgba(0, 72, 138, .05);
}

#why_chosen .items li a .img{
width:45%;
border-radius:1.6rem;
overflow: hidden;
}


#top_loop article{
overflow: hidden;
position: relative;
margin:0 0 -16px;
}

#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:rgba(0,35,134,1);
letter-spacing:1rem;
}

#top_loop2 article{
overflow: hidden;
position: relative;
margin:0;
}

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

#top_loop2 .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 12rem;
font-weight: 500;
line-height: .9;
overflow:hidden;
color: #edf1f7;
}

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


/*detail
---------------------------------------*/
#why_chosen .section_wrap2 {
position: relative;
width:100%;
margin: 0 0 120px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
}

#why_chosen .section_wrap2:nth-child(even) {
flex-direction: row;
}

#why_chosen .section_wrap2:last-child{
margin-bottom:0 !important;
}

#why_chosen .section_wrap2 article{
margin: 0 0 60px;
}

#why_chosen .section_wrap2 article .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 8rem;
font-weight: 500;
overflow: hidden;
line-height: 1.2;
color: #20293b;
opacity: 1 !important;
}

#why_chosen .section_wrap2 .txt_box {
width: 55%;
padding: 0 5%;
box-sizing: border-box;
margin: 0;
}
#about .ttl_en {
display: block;
font-size: 1.2rem;
font-weight: 600;
}
#why_chosen .section_wrap2 .txt_box h2 {
font-size: 3rem;
font-weight: 400;
line-height: 1.6;
margin: 0 0 60px -5px;
background: -webkit-linear-gradient(0deg, #20293b, #2d58ab);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#why_chosen .section_wrap2 .txt_box .red_ttl2 {
font-size: 2.2rem;
font-weight: 400;
line-height: 1.6;
margin: 0 0 30px -5px;
background: -webkit-linear-gradient(0deg, #20293b, #2d58ab);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


#why_chosen .section_wrap2 .txt_box .red_ttl {
font-size: 2.2rem;
font-weight: 400;
line-height: 1.4;
margin: 0 0 40px;
}

#why_chosen .section_wrap2 .txt_box .read_txt {
margin-bottom: 40px;
font-weight: 600;
font-size: 1.2rem;
line-height: 2;
}

#why_chosen .section_wrap2 .img {
width:45%;
position: relative;
overflow: hidden;
}

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

#why_chosen .slider6 {
width: 100%;
position: relative;
margin: 100px 0 0;
}

#why_chosen .slider6 .slick-slide {
margin: 0 12px;
border-radius: .6rem;
overflow: hidden;
}

#why_chosen .txt_box .ph_list{
display: flex;
flex-wrap: wrap;
justify-content:center;
margin: 0 auto 30px;
}

#why_chosen .txt_box .ph_list li{
width: 48%;
position: relative;
margin: 0 1%;
background:#20293b;
padding: 10px;
box-sizing: border-box;
border-radius:1rem;
}

#why_chosen .txt_box .ph_list li img{
border-radius: .6rem;
}

#why_chosen .txt_box .ph_list li p{
font-size: .7rem;
text-align: center;
color: #FFF;
margin-top: 10px;
}

}
/*sp*/
@media only screen and (max-width: 767px) {
#why_chosen {
position:relative;
margin: 0 auto 60px;
overflow: hidden;
z-index: 5;
}

#why_chosen .section_wrap{
width: 100%;
margin: 0 auto;
}



}