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


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

/* mv
--------------------------------------------*/
#mv {
width: 100%;
padding-top: 120px;
padding-bottom: 80px;
box-sizing: border-box;
position: relative;
background: rgba(241,241,241,1);
margin: 0 0 120px;
}

#mv::before {
content: "";
display: block;
width: 2.5vw;
height: 100%;
background: rgba(241,241,241,1);
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

#mv .mv_slider {
opacity: 0;
transition: 0.4s ease;
}
#mv .mv_slider.slick-initialized {
opacity: 1;
}

#mv .mv_slider .slick-slide {
margin: 0 10px;
overflow: hidden;
}

#mv .mv_slider .slide {
height: calc(100vh - 140px);
width: auto;
aspect-ratio: 9/8;
position: relative;
}
#mv .mv_slider .slide::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(37, 45, 47, 0.2), rgba(37, 45, 47, 0));
position: absolute;
bottom: 0;
left: 0;
border-radius: 30px;
z-index: 2;
}
#mv .mv_slider .slide img {
border-radius: 30px;
}

#mv .copy {
position: absolute;
left: 0;
bottom: 0;
z-index: 20;
padding-left: 50px;
padding-bottom: 50px;
}

#mv .copy::before {
content: "";
display: block;
width: 440px;
height:490px;
background: linear-gradient(90deg, #00488a, #087fba);
position: absolute;
left: 0;
bottom:0;
z-index:-1;
}

#mv .copy h1{
letter-spacing: .04em;
font-size: 3.3rem;
font-weight: 800;
color: #FFF;
line-height: 1.35;
text-shadow:1px 1px 6px rgba(0,0,0,.25);
margin-bottom: 25px;
}

#mv .copy .txt{
font-weight: 800;
color: #FFF;
margin: 0 0 40px;
text-shadow:1px 1px 4px rgba(0,0,0,.25);
}

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


/* business
--------------------------------------------*/
#business{
position: relative;
margin: 0 auto;
overflow: hidden;
}

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

#business .block{
width: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#business .block::before{
content: "";
position: absolute;
top: -140px;
left: 0;
width: 100%;
height:calc(100% + 140px);
background: #f2f5fc;
z-index: -1;
border-radius:0 0 0 0; 
}

#business .block .txt_box{
width: 50%;
padding:3% 5%;
box-sizing: border-box;
}

#business .block .txt_box .s_ttl{
font-size: 2rem;
font-weight: 800;
line-height: 1;
margin-bottom:70px;
}

#business .block .txt_box .s_ttl span{
font-size: 1rem;
margin-left: 10px;
}

#business .block .txt_box .red_txt{
font-size: 2.6rem;
font-weight: 800;
line-height: 1.4;
margin: 0 0 40px;
color: #00488a;
}

#business .block .txt_box .red_txt span{
font-size: 1.6rem;
font-weight: 800;
color: #121212;
}

#business .block .txt_box .txt{
margin: 0 0 60px;
}

#business .block .img{
width: 50%;
overflow: hidden;
position: relative;
}

#business .img .slick-slide img {
width: 100%;
height: 100%;
}

#business .add-animation {
animation: zoomUp2 10s linear 0s normal both;
}


#business .block2{
width: 100%;
position: relative;
padding:6% 0 5%;
}

#business .block2::before{
content: "";
position: absolute;
top: 0px;
left: 0;
width: 100%;
height:100%;
background: #f2f5fc;
z-index: -1;
border-radius:0 0 0 4rem; 
}

#business .block2 .red_txt2{
font-size: 2rem;
font-weight: 900;
line-height: 1.6;
margin: 0 0 40px;
text-align: center;
color: #00488a;
}

#business .block2 .circle_img{
width: 70%;
min-width: 1200px;
margin:0 auto 60px;
}

#business .slider3{
margin:0 auto 40px;
position: relative;
z-index: 5;
}

#business .slider3 .slick-slide{
margin: 0 15px;
}

#business article{
overflow: hidden;
position: absolute;
bottom:0;
left: 0;
}
#business .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#business .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 8.6rem;
font-weight: 500;
letter-spacing: -.5rem;
line-height: 1;
overflow: hidden;
color:#00488a;
opacity:.1;
}

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

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


/* why_choose_us
--------------------------------------------*/
#why_choose_us{
position: relative;
margin: 0 auto;
padding:5% 0 0;
box-sizing: border-box;
background:#f2f5fc;
}

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

#why_choose_us .s_ttl{
font-size: 2rem;
font-weight: 800;
line-height: 1;
margin-bottom:70px;
text-align: center;
}

#why_choose_us .s_ttl span{
font-size: 1rem;
display: block;
margin-top: 10px;
}

#why_choose_us .list{
}

#why_choose_us .list li{
width: 100%;
position: relative;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
flex-direction: row;
}

#why_choose_us .list li:nth-child(odd){
flex-direction: row-reverse;
}

#why_choose_us .list li .txt_box{
width: 50%;
padding:5% 5%;
box-sizing: border-box;
position: relative;
}

#why_choose_us .list li .txt_box h3{
font-size: 2rem;
font-weight: 800;
line-height: 1.4;
margin: 0 0 30px;
position: relative;
z-index: 5;
}

#why_choose_us .list li .txt_box .txt{
font-size: 1rem;
line-height: 2;
font-weight: 600;
position: relative;
z-index: 5;
}

#why_choose_us .list li .txt_box .en_txt{
font-size: 1rem;
font-weight: 300;
color: #00488a;
line-height: 1.6;
margin-top: 40px;
}

#why_choose_us .list li .img{
width: 50%;
position: relative;
}

#why_choose_us .list li .txt_box .circle {
width:18%;
height:18%;
margin: auto;
position: absolute;
top: -5%;
left: -10%;
z-index: 5;
}

#why_choose_us .list li:nth-child(2) .txt_box .circle {
left:90%;
right:-10%;
}

#why_choose_us .list li .txt_box .circleText {
overflow: visible;
animation: rotation 18s linear infinite;
}

#why_choose_us .list li .txt_box .circleText__circle {
fill: none;
}

#why_choose_us .list li .txt_box .circleText__text {
fill: #00488a;
font-size:.67rem;
letter-spacing: 0.05em;
}


/* business_etc
--------------------------------------------*/
#business_etc{
position: relative;
margin: 0 auto 120px;
padding:5% 0 6%;
box-sizing: border-box;
background:#f2f5fc;
}

#business_etc .s_ttl{
font-size: 2rem;
font-weight: 800;
line-height: 1;
margin-bottom:70px;
text-align: center;
}

#business_etc .list{
width: 88%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: auto;
}

#business_etc .list li{
width: 49%;
margin-bottom:2%;
background: #FFF;
position: relative;
}

#business_etc .list a{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
}

#business_etc .list a .txt_box{
width:60%;
padding: 5%;
box-sizing: border-box;
}

#business_etc .list a .txt_box h4{
font-size:1.8rem;
line-height: 1;
margin: 0 0 20px;
}

#business_etc .list a .txt_box h4 span{
display: block;
font-size: .6rem;
color: #00488a;
margin: 0 0 8px 2px;
}

#business_etc .list a .txt_box p{
font-size: .9rem;
line-height: 1.8;
}

#business_etc .list a .txt_box .button2{
width:160px;
height:40px;
border:2px solid #00488a;
text-align:center;
cursor:pointer;
position:relative;
box-sizing:border-box;
overflow:hidden;
margin:20px 0 0 auto;
}

#business_etc .list a .txt_box .button2 p{
font-size:.9rem;
font-weight: 600;
color:#00488a;
text-decoration:none;
line-height:40px;
transition:all .5s ease;
z-index:2;
position:relative;
display: block !important;
}

#business_etc .list a .txt_box .button2 .eff{
width:100%;
height:40px;
border:0px solid #00488a;
position:absolute;
transition:all .5s ease;
z-index:1;
box-sizing:border-box;
}

#business_etc .list a .txt_box .button2:hover .eff{
border:50px solid #00488a;
}
#business_etc .list a .txt_box .button2:hover p{
color:#fff;
}

#business_etc .list a .img{
width: 40%;
}

#business_etc .list a .img.bg1{
background:url("../images/index/b_bg01.jpg") center center no-repeat;
background-size: cover;
}

#business_etc .list a .img.bg2{
background:url("../images/index/b_bg02.jpg") center center no-repeat;
background-size: cover;
}

#business_etc .list a .img.bg3{
background:url("../images/index/b_bg03.jpg") center center no-repeat;
background-size: cover;
}

#business_etc .list a .img.bg4{
background:url("../images/index/b_bg04.jpg") center center no-repeat;
background-size: cover;
}


/* csr
--------------------------------------------*/
#csr {
background: url("../images/index/bg_csr_img.jpg") no-repeat center/cover;
padding:7rem 5rem;
width: 100%;
overflow: hidden;
box-sizing: border-box;
position: relative;
margin: 0 auto;
}

#csr .section_wrap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
}

#csr .section_wrap .txt{
width: 50%;
}

#csr .ttl{
color:#FFF !important;
}

#csr .en_ttl{
color:#FFF !important;
margin-bottom: 60px;
}

#csr .section_wrap .s_ttl{
font-size: 2rem;
font-weight: 800;
line-height: 1.6;
margin: 0 0 30px;
position: relative;
color: #FFF;
}

#csr .section_wrap .txt .read_txt{
font-size: 1rem;
font-weight: 600;
line-height: 2.4;
color: #FFF;
margin: 0 0 80px;
}

#csr .button{
width:260px;
height:50px;
border:2px solid #fff;
text-align:center;
cursor:pointer;
position:relative;
box-sizing:border-box;
overflow:hidden;
margin:0 auto;
}

#csr .button a{
font-size:1.2rem;
color:#fff;
text-decoration:none;
line-height:50px;
transition:all .5s ease;
z-index:2;
position:relative;
}

#csr .eff{
width:100%;
height:50px;
border:0px solid #00488a;
position:absolute;
transition:all .5s ease;
z-index:1;
box-sizing:border-box;
}

#csr .button:hover .eff{
border:70px solid #00488a;
}

#csr .button:hover a{
color:#FFF;
}


/* recruit
--------------------------------------------*/
#recruit{
position: relative;
overflow: hidden;
background: url("../images/index/recruit_bg.jpg") center center no-repeat;
background-size: cover;
width: 100%;
padding: 7rem 0;
box-sizing: border-box;
overflow: hidden;
}

#recruit::before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0,.25);
}

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

#recruit .section_wrap .txt_box{
width: 100%;
margin: 0;
}

#recruit .ttl{
color:#FFF !important;
text-align: center;
text-shadow: 1px 1px 6px rgba(0,0,0,.25);
}

#recruit .en_ttl{
color:#FFF !important;
margin-bottom: 60px;
text-align: center;
text-shadow: 1px 1px 6px rgba(0,0,0,.25);
}

#recruit .section_wrap .s_ttl{
font-size: 2.2rem;
font-weight: 800;
line-height: 1.6;
margin: 0 0 60px;
position: relative;
color: #FFF;
text-align: center;
text-shadow: 1px 1px 6px rgba(0,0,0,.25);
}

#recruit .read_txt{
color: #FFF;
font-weight: 500;
margin-bottom: 60px;
}

#recruit .button{
width:260px;
height:50px;
border:2px solid #fff;
text-align:center;
cursor:pointer;
position:relative;
box-sizing:border-box;
overflow:hidden;
margin:0 auto;
}

#recruit .button a{
font-size:1.2rem;
color:#fff;
text-decoration:none;
line-height:50px;
transition:all .5s ease;
z-index:2;
position:relative;
}

#recruit .eff{
width:100%;
height:50px;
border:0px solid #00488a;
position:absolute;
transition:all .5s ease;
z-index:1;
box-sizing:border-box;
}

#recruit .button:hover .eff{
border:70px solid #00488a;
}

#recruit .button:hover a{
color:#FFF;
}

/* news
--------------------------------------------*/
#news{
width:calc(100% - 20rem);
position: relative;
margin:120px auto 120px;
min-width: 1300px;
}

#news .section_wrap{
position: relative;
margin:0 auto;
background:rgba(74,80,95,.1);
padding: 5rem 4rem;
box-sizing: border-box;
border-radius: 2rem;
}

#news .section_wrap .en_ttl{
margin-bottom: 30px;
font-size: 2.4rem;
}

#news .news_wrap{
width: 100%;
margin:0 auto 40px;
}

#news .news_wrapp dl{
line-height: 1.4;
margin: 0 0 10px;
background: #FFF;
}

#news .news_wrap dl:last-child{
margin-bottom: 0;
}

#news .news_wrap dl dt{
position: relative;
width:100%;
font-size: 1rem;
font-weight:600;
padding:0 5px;
}

#news .section_wrap dl dd{
position: relative;
width:100%;
border-bottom: 1px solid rgba(0,0,0,.05);
padding:5px;
box-sizing: border-box;
transition: .5s;
display:flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}

#news .section_wrap dl dd:hover{
background:rgba(255,255,255,.6);
transition: .5s;
}

#news .section_wrap dl dd a{
width:calc(100% - 35px);
font-weight: 700;
}

#news .section_wrap dl dd p{
width:26px;
}

#news .button{
width: 200px;
margin: 40px 0 0 auto;
}


/*contact
---------------------------------------------*/
#contact{
background:url("../images/index/contact_bg.jpg") 0 0 repeat;
padding:7rem 5rem 11rem;
box-sizing: border-box;
overflow: hidden;
}

#contact .ttl{
color:#FFF !important;
text-shadow: 1px 1px 6px rgba(0,0,0,.25);
}

#contact .en_ttl{
color:#FFF !important;
margin-bottom: 60px;
text-shadow: 1px 1px 6px rgba(0,0,0,.25);
}

#contact .s_ttl{
color:#FFF !important;
font-size: 2rem;
margin-bottom: 30px;
text-shadow: 1px 1px 6px rgba(0,0,0,.25);
}

#contact .txt{
color: #FFF;
margin: 0 0 60px;
}

#contact .button{
width:260px;
height:50px;
border:2px solid #fff;
text-align:center;
cursor:pointer;
position:relative;
box-sizing:border-box;
overflow:hidden;
margin:0 0;
}

#contact .button a{
font-size:1.2rem;
color:#fff;
text-decoration:none;
line-height:50px;
transition:all .5s ease;
z-index:2;
position:relative;
}

#contact .eff{
width:100%;
height:50px;
border:0px solid #00488a;
position:absolute;
transition:all .5s ease;
z-index:1;
box-sizing:border-box;
}

#contact .button:hover .eff{
border:70px solid #00488a;
}

#contact .button:hover a{
color:#FFF;
}


}
/*sp*/
@media only screen and (max-width: 767px) {
/* mv
--------------------------------------------*/
#mv {
width: 100%;
padding-top:75px;
margin-bottom:60px;
position: relative;
box-sizing: border-box;
}

#mv::before {
content: "";
display: block;
width: 2.5vw;
height: 100%;
background: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

#mv {
width: 100%;
max-width: none;
}

#mv .mv_slider {
opacity: 0;
transition: 0.4s ease;
}

#mv .mv_slider.slick-initialized {
opacity: 1;
}

#mv .mv_slider .slick-slide {
margin: 0 5px;
}

#mv .mv_slider .slide {
width: 88vw !important;
height: auto;
aspect-ratio: 66/83;
position: relative;
}

#mv .mv_slider .slide::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(37, 45, 47, 0.2), rgba(37, 45, 47, 0));
position: absolute;
bottom: 0;
left: 0;
border-radius:20px;
z-index: 2;
overflow: hidden;
}

#mv .mv_slider .slick-slide img {
object-fit: cover;
border-radius:20px;
overflow: hidden;
}

#mv .copy {
position: relative;
margin-top: -50px;
z-index: 20;
padding:8% 5%;
box-sizing: border-box;
}

#mv .copy::before {
content: "";
display: block;
width: 100%;
height:100%;
background: linear-gradient(90deg, #00488a, #087fba);
position: absolute;
left: 0;
bottom:0;
z-index:-1;
opacity: .95;
}

#mv .copy h1{
letter-spacing: .04em;
font-size:1.4rem;
font-weight: 800;
color: #FFF;
line-height: 1.35;
margin-bottom: 10px;
text-shadow:1px 1px 6px rgba(0,0,0,.25);
}

#mv .copy .txt{
font-size: .8rem;
font-weight: 800;
color: #FFF;
margin: 0 0 20px;
text-shadow:1px 1px 4px rgba(0,0,0,.25);
}

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


/* business
--------------------------------------------*/
#business{
position: relative;
margin: 0 auto;
overflow: hidden;
}

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

#business .block{
width: 100%;
position: relative;
}

#business .block::before{
content: "";
position: absolute;
top: -126px;
left: 0;
width: 100%;
height:calc(100% + 140px);
background: #f2f5fc;
z-index: -1;
border-radius:0 0 0 0; 
}

#business .block .txt_box{
width:100%;
padding:5%;
box-sizing: border-box;
margin: 0 0 30px;
}

#business .block .txt_box .s_ttl{
font-size: 1.4rem;
font-weight: 800;
line-height: 1;
margin-bottom:30px;
}

#business .block .txt_box .s_ttl span{
font-size: .8rem;
margin-left: 10px;
}

#business .block .txt_box .red_txt{
font-size: 1.2rem;
font-weight: 800;
line-height: 1.4;
margin: 0 0 20px;
color: #00488a;
}

#business .block .txt_box .red_txt span{
font-size: 1rem;
font-weight: 800;
color: #121212;
}

#business .block .txt_box .txt{
margin: 0 0 30px;
}

#business .block .img{
width: 80%;
overflow: hidden;
position: relative;
margin: auto;
}

#business .img .slick-slide img {
width: 100%;
height: 100%;
}

#business .add-animation {
animation: zoomUp2 10s linear 0s normal both;
}


#business .block2{
width: 100%;
position: relative;
padding:10% 5% 5%;
box-sizing: border-box;
}

#business .block2::before{
content: "";
position: absolute;
top: 0px;
left: 0;
width: 100%;
height:100%;
background: #f2f5fc;
z-index: -1;
border-radius:0 0 0 4rem; 
}

#business .block2 .red_txt2{
font-size: 1.2rem;
font-weight: 900;
line-height: 1.6;
margin: 0 0 20px;
text-align: center;
color: #00488a;
}

#business .block2 .circle_img{
width: 100%;
margin:0 auto 30px;
}

#business .slider3{
margin:0 auto 40px;
position: relative;
z-index: 5;
}

#business .slider3 .slick-slide{
margin: 0 5px;
}

#business article{
overflow: hidden;
position: absolute;
bottom:0;
left: 0;
}
#business .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#business .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 4rem;
font-weight: 500;
letter-spacing: -.5rem;
line-height: 1;
overflow: hidden;
color:#00488a;
opacity:.1;
}

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

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


/* why_choose_us
--------------------------------------------*/
#why_choose_us{
position: relative;
margin: 0 auto;
padding:5% 0 0;
box-sizing: border-box;
background:#f2f5fc;
}

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

#why_choose_us .s_ttl{
font-size: 1.4rem;
font-weight: 800;
line-height: 1;
margin-bottom:20px;
text-align: center;
}

#why_choose_us .s_ttl span{
font-size: .8rem;
display: block;
margin-top: 5px;
}

#why_choose_us .list{
}

#why_choose_us .list li{
width: 100%;
position: relative;
margin: 0;
}


#why_choose_us .list li .txt_box{
width: 100%;
padding:5% 5%;
box-sizing: border-box;
position: relative;
}

#why_choose_us .list li .txt_box h3{
font-size: 1.2rem;
font-weight: 800;
line-height: 1.4;
margin: 0 0 20px;
position: relative;
z-index: 5;
}

#why_choose_us .list li .txt_box .txt{
font-size: .8rem;
line-height: 1.8;
font-weight: 600;
position: relative;
z-index: 5;
}

#why_choose_us .list li .txt_box .en_txt{
font-size: .7rem;
font-weight: 300;
color: #00488a;
line-height: 1.6;
margin-top: 20px;
}

#why_choose_us .list li .img{
width: 100%;
position: relative;
}

#why_choose_us .list li .txt_box .circle {
width:30%;
height:30%;
margin: auto;
position: absolute;
top: -5%;
left: -10%;
z-index: 5;
opacity: .5;
}

#why_choose_us .list li:nth-child(2) .txt_box .circle {
left:90%;
right:-10%;
}

#why_choose_us .list li .txt_box .circleText {
overflow: visible;
animation: rotation 18s linear infinite;
}

#why_choose_us .list li .txt_box .circleText__circle {
fill: none;
}

#why_choose_us .list li .txt_box .circleText__text {
fill: #00488a;
font-size:.67rem;
letter-spacing: 0.05em;
}


/* business_etc
--------------------------------------------*/
#business_etc{
position: relative;
margin: 0 auto;
padding:10% 0 10%;
box-sizing: border-box;
background:#f2f5fc;
}

#business_etc .s_ttl{
font-size: 1.2rem;
font-weight: 800;
line-height: 1.4;
margin-bottom:30px;
padding: 0 5%;
box-sizing: border-box;
text-align: center;
}

#business_etc .list{
width: 100%;
margin: auto;
}

#business_etc .list li{
width:100%;
margin-bottom:2%;
background: #FFF;
position: relative;
}

#business_etc .list a{
}

#business_etc .list a .txt_box{
width:100%;
padding:8%;
box-sizing: border-box;
}

#business_etc .list a .txt_box h4{
font-size:1.4rem;
line-height: 1;
margin: 0 0 10px;
}

#business_etc .list a .txt_box h4 span{
display: block;
font-size: .6rem;
color: #00488a;
margin: 0 0 8px 2px;
}

#business_etc .list a .txt_box p{
font-size: .9rem;
line-height: 1.8;
}

#business_etc .list a .txt_box .button2{
width:160px;
height:40px;
border:2px solid #00488a;
text-align:center;
cursor:pointer;
position:relative;
box-sizing:border-box;
overflow:hidden;
margin:20px auto 0;
}

#business_etc .list a .txt_box .button2 p{
font-size:.9rem;
font-weight: 600;
color:#00488a;
text-decoration:none;
line-height:40px;
transition:all .5s ease;
z-index:2;
position:relative;
display: block !important;
}

#business_etc .list a .txt_box .button2 .eff{
width:100%;
height:40px;
border:0px solid #00488a;
position:absolute;
transition:all .5s ease;
z-index:1;
box-sizing:border-box;
}

#business_etc .list a .txt_box .button2:hover .eff{
border:50px solid #00488a;
}
#business_etc .list a .txt_box .button2:hover p{
color:#fff;
}

#business_etc .list a .img{
width: 100%;
height: 240px;
}

#business_etc .list a .img.bg1{
background:url("../images/index/b_bg01.jpg") center center no-repeat;
background-size: cover;
}

#business_etc .list a .img.bg2{
background:url("../images/index/b_bg02.jpg") center center no-repeat;
background-size: cover;
}

#business_etc .list a .img.bg3{
background:url("../images/index/b_bg03.jpg") center center no-repeat;
background-size: cover;
}

#business_etc .list a .img.bg4{
background:url("../images/index/b_bg04.jpg") center center no-repeat;
background-size: cover;
}


/* csr
--------------------------------------------*/
#csr {
background: url("../images/index/bg_csr_imgsp.jpg") no-repeat left/cover;
padding:15% 5%;
width: 100%;
overflow: hidden;
box-sizing: border-box;
position: relative;
margin: 0 auto;
}

#csr .section_wrap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
}

#csr .section_wrap .txt{
width:100%;
}

#csr .ttl{
color:#FFF !important;
}

#csr .en_ttl{
color:#FFF !important;
margin-bottom:30px;
}

#csr .section_wrap .s_ttl{
font-size: 1.2rem;
font-weight: 800;
line-height: 1.6;
margin: 0 0 20px;
position: relative;
color: #FFF;
}

#csr .section_wrap .txt .read_txt{
font-size: .8rem;
font-weight: 600;
line-height:2;
color: #FFF;
margin: 0 0 30px;
}

#csr .button{
width:260px;
height:50px;
border:2px solid #fff;
text-align:center;
cursor:pointer;
position:relative;
box-sizing:border-box;
overflow:hidden;
margin:0 auto;
}

#csr .button a{
font-size:1.2rem;
color:#fff;
text-decoration:none;
line-height:50px;
transition:all .5s ease;
z-index:2;
position:relative;
}

#csr .eff{
width:100%;
height:50px;
border:0px solid #00488a;
position:absolute;
transition:all .5s ease;
z-index:1;
box-sizing:border-box;
}

#csr .button:hover .eff{
border:70px solid #00488a;
}

#csr .button:hover a{
color:#FFF;
}


/* recruit
--------------------------------------------*/
#recruit{
position: relative;
overflow: hidden;
background: url("../images/index/recruit_bgsp.jpg") center center no-repeat;
background-size: cover;
padding:15% 5%;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}

#recruit::before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0,.25);
}

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

#recruit .section_wrap .txt_box{
width: 100%;
margin: 0;
}

#recruit .ttl{
color:#FFF !important;
text-align: center;
text-shadow: 1px 1px 6px rgba(0,0,0,.25);
}

#recruit .en_ttl{
color:#FFF !important;
margin-bottom: 60px;
text-align: center;
text-shadow: 1px 1px 6px rgba(0,0,0,.25);
}

#recruit .section_wrap .s_ttl{
font-size: 1.2rem;
font-weight: 800;
line-height: 1.6;
margin: 0 0 60px;
position: relative;
color: #FFF;
text-align: center;
text-shadow: 1px 1px 6px rgba(0,0,0,.25);
}

#recruit .read_txt{
color: #FFF;
font-weight: 500;
margin-bottom: 60px;
}

#recruit .button{
width:260px;
height:50px;
border:2px solid #fff;
text-align:center;
cursor:pointer;
position:relative;
box-sizing:border-box;
overflow:hidden;
margin:0 auto;
}

#recruit .button a{
font-size:1.2rem;
color:#fff;
text-decoration:none;
line-height:50px;
transition:all .5s ease;
z-index:2;
position:relative;
}

#recruit .eff{
width:100%;
height:50px;
border:0px solid #00488a;
position:absolute;
transition:all .5s ease;
z-index:1;
box-sizing:border-box;
}

#recruit .button:hover .eff{
border:70px solid #00488a;
}

#recruit .button:hover a{
color:#FFF;
}


/* news
--------------------------------------------*/
#news{
width:calc(100% - 10%);
position: relative;
margin:40px auto 40px;
}

#news .section_wrap{
position: relative;
margin:0 auto;
background:rgba(74,80,95,.05);
padding: 8% 5%;
box-sizing: border-box;
border-radius:1rem;
}

#news .section_wrap .en_ttl{
margin-bottom: 30px;
font-size: 2.4rem;
}

#news .news_wrap{
width: 100%;
margin:0 auto;
}

#news .news_wrapp dl{
line-height: 1.4;
margin: 0 0 10px;
background: #FFF;
}

#news .news_wrap dl:last-child{
margin-bottom: 0;
}

#news .news_wrap dl dt{
position: relative;
width:100%;
font-size: .9rem;
font-weight:600;
padding:0 5px;
}

#news .section_wrap dl dd{
position: relative;
width:100%;
border-bottom: 1px solid rgba(0,0,0,.1);
padding:5px;
box-sizing: border-box;
transition: .5s;
display:flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: .8rem;
}

#news .section_wrap dl dd:hover{
background:rgba(255,255,255,.6);
transition: .5s;
}

#news .section_wrap dl dd a{
width:calc(100% - 25px);
font-weight: 700;
}

#news .section_wrap dl dd p{
width:15px;
}

#news .button{
width: 200px;
margin: 40px auto 0;
}


/*contact
---------------------------------------------*/
#contact{
background:url("../images/index/contact_bg.jpg") 0 0 repeat;
padding:15% 5%;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}

#contact .ttl{
color:#FFF !important;
text-shadow: 1px 1px 6px rgba(0,0,0,.25);
}

#contact .en_ttl{
color:#FFF !important;
margin-bottom: 30px;
text-shadow: 1px 1px 6px rgba(0,0,0,.25);
}

#contact .s_ttl{
color:#FFF !important;
font-size: 1rem;
margin-bottom:30px;
text-shadow: 1px 1px 6px rgba(0,0,0,.25);
}

#contact .txt{
font-size: .8rem;
color: #FFF;
margin: 0 0 30px;
}

#contact .button{
width:260px;
height:50px;
border:2px solid #fff;
text-align:center;
cursor:pointer;
position:relative;
box-sizing:border-box;
overflow:hidden;
margin:0 auto;
}

#contact .button a{
font-size:1.2rem;
color:#fff;
text-decoration:none;
line-height:50px;
transition:all .5s ease;
z-index:2;
position:relative;
}

#contact .eff{
width:100%;
height:50px;
border:0px solid #00488a;
position:absolute;
transition:all .5s ease;
z-index:1;
box-sizing:border-box;
}

#contact .button:hover .eff{
border:70px solid #00488a;
}

#contact .button:hover a{
color:#FFF;
}


}