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



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

#about { position:relative; margin: 0 auto 120px; overflow: hidden; }
#about .section_wrap { width: 100%; margin: 0 auto; }

#about .img_block {
width:calc(100% - 100px);
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
#about .img_block::before {
content: "";
position: absolute;
bottom: 0;
left: -100px;
width:calc(100% + 200px);
height: 260px;
background: #fba501;
z-index: -1;
}

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


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

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

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


#about .img_block .txt_box { position: relative; top:10%; left: 2.5%; z-index:10; }
#about .img_block .txt_box h2 {
font-size: 5rem;
margin: 0 0 50px;
line-height: 1.4;
text-align: center;
background-image: linear-gradient(rgb(0, 0, 217) 0%, rgb(0, 124, 200) 100%);
color: transparent;
-webkit-background-clip: text;
}
#about .img_block .txt_box h3 {
font-size: 2.8rem;
font-weight: 500;
margin: 0 0 40px;
text-align: center;
}
#about .img_block .txt_box p {
font-size: 1.6rem;
font-weight: 600;
line-height: 2.2;
text-align: center;
margin: 0 0 60px;
}



/*block
---------------------------------------------*/
#about .block {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: #0000d9;
flex-direction: row-reverse;
color: #fff;
padding:10vw 0;
box-sizing: border-box;
}
#about .block:nth-child(3) { flex-direction:row; padding-top:0; }

#about .block .txt_box { width: 50%; padding: 0 5%; box-sizing: border-box; color: #FFF; }
#about .block .txt_box .en_ttl {
font-size: 11rem;
font-weight: 400;
line-height: 1;
margin-bottom: 10px;
margin-left: -50px;
opacity: 0.4;
}
#about .block .txt_box h2 { font-size: 3.6rem; font-weight: 600; margin: -40px 0 80px; }
#about .block .txt_box p { font-size: 1.6rem; line-height: 2.2; }
#about .block .txt_box .name { text-align: right; margin-top: 30px; font-size: 1.4rem; }
#about .block .txt_box .name span { font-size: 1.8rem; }

#about .block .img { width: 50%; }



}






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

#about { position:relative; margin: 0 auto; overflow: hidden; }
#about .section_wrap { width: 100%; margin: 0 auto; }

#about .img_block { width: 90%; margin: 0 auto; box-sizing: border-box; position: relative; }
#about .img_block::before {
content: "";
position: absolute;
bottom: 0;
left: -100px;
width:calc(100% + 200px);
height: 100px;
background: #fba501;
z-index: -1;
}

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


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

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

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


#about .img_block .txt_box { position: relative; z-index:10; }
#about .img_block .txt_box h2 {
font-size: 2.6rem;
margin: 0 0 30px;
line-height: 1.4;
text-align: center;
background-image: linear-gradient(rgb(0, 0, 217) 0%, rgb(0, 124, 200) 100%);
color: transparent;
-webkit-background-clip: text;
}
#about .img_block .txt_box h3 {
font-size: 1.8rem;
font-weight: 500;
margin: 0 0 30px;
text-align: center;
}
#about .img_block .txt_box p {
font-weight: 600;
line-height: 2;
text-align: center;
margin: 0 0 40px;
}



/*block
---------------------------------------------*/
#about .block {
background-color: #0000d9;
flex-direction: row-reverse;
color: #fff;
margin: 0 auto 60px;
padding:10vw 0;
box-sizing: border-box;
}

#about .block .txt_box { padding: 0 5%; box-sizing: border-box; color: #FFF; }
#about .block .txt_box .en_ttl {
font-size: 5rem;
font-weight: 400;
line-height: 0.6;
margin-left: -10px;
opacity: 0.4;
}
#about .block .txt_box h2 { font-size: 2.4rem; font-weight: 500; line-height: 1; margin-bottom: 30px; }
#about .block .txt_box p { font-size: 1.3rem; line-height: 2; font-weight: 500; }
#about .block .txt_box .name { text-align: right; margin-top: 30px; font-size: 1.4rem; }
#about .block .txt_box .name span { font-size: 1.8rem; }

#about .block .img { padding: 0 5%; margin-top: 30px; }


}