@charset "utf-8";

.main-visual {position:relative; width:100%;}
.main-visual:before {}
.main-visual .item {position: relative; z-index:1; overflow:hidden;}
.main-visual .item .visual-img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;  opacity: 1 !important; animation-duration: 3s; transition: all 1s ease;}
.main-visual .content {display:flex; flex-direction:column; justify-content:center; height:100%; position:absolute; top:50%; left:0; width:100%; color:#000; padding:0 100px;  transform:translateY(-50%); z-index:50; text-align:center;}
.main-visual .content:before {position:absolute; content:""; width:100%; height:100%; top:0; left:0; background:rgba(0, 0, 0, 0.3); z-index:-1;}.main-visual .content .tit {color:#fff; font-size:20px; line-height:1.320em; font-weight:300; letter-spacing:0.8em;}
.main-visual .content .tit span {text-align:center;}
.main-visual .content p {font-size:50px; color:#fff; line-height:1.4em; font-weight:300; letter-spacing:-.05em; margin:20px 0 30px;}
.main-visual .content p strong {}
.main-visual .content p strong.blue-txt {color:#43ccff;}
.main-visual .content p strong.green-txt {color:#abde32;}
.main-visual .content .main-btn {display:flex; margin:0 auto; width:430px; height:80px; background:#fff; border-radius:40px; text-align:center; color:#000; font-size:30px; letter-spacing:-.05em; justify-content:center; align-items:center;}
.main-visual .slick-arrow {position:absolute; top:50%; border:0; margin-top:-34px; width:38px; height:68px; border-radius:50%; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%; font-size:0; line-height:0; z-index:20}
.main-visual .slick-prev {left:100px; background-image:url('../images/main/bt_prev.png')}
.main-visual .slick-next {right:100px; background-image:url('../images/main/bt_next.png')}
.main-visual .slick-dots {position:absolute; bottom:80px; left:0; width:100%; text-align:center; z-index:40; line-height:0;}
.main-visual .slick-dots li {position:relative; display:inline-block; padding:0 20px;}
.main-visual .slick-dots li button {position:relative; display:block; background:#fff; width:11px; height:11px; border:3px solid #fff; border-radius:100%; overflow:hidden; text-indent:-9999px;}
.main-visual .slick-dots li.slick-active button {border-color:transparent; background:#21acdc; opacity:1;}
.main-visual .slick-dots li.slick-active:before {width:30px; height:30px; top:50%; margin-top:-16px; left:50%; margin-left:-15px; border-radius:100%; position:absolute; content:""; border:1px solid rgba(255, 255, 255, 0.5); }


.animated {transition: all .5s ease;}

.main-visual [data-animation-in] {opacity: 0; animation-duration: 1.5s;transition: opacity 0.5s ease 0.3s;transition:1s;}

@keyframes zoomInImage {
  from {transform: scale3d(1.1, 1.1, 1.1);transition:1s;}
  to {transform: scale3d(1, 1, 1);transition:1s;}
}
.zoomInImage {animation-name: zoomInImage;}

@keyframes zoomOutImage {
  from {transform: scale3d(1, 1, 1);transition:1s;}
  to {transform: scale3d(1.1, 1.1, 1.1);transition:1s;}
}
.zoomOutImage {animation-name: zoomOutImage;transition:1s;}

.main-title {text-align:center; margin-bottom:40px;}
.main-title h2 {font-size:40px; line-height:1.4em; color:#000;font-weight:800; margin-bottom:20px;}
.main-title .cnt {font-size:18px; line-height:1.4em; font-weight:700;}

.main-default-wrap {background:#f3f3f3; padding:80px 0;}
.main-default-wrap-flex {display:flex;}
.main-default-wrap-flex .main-default-box-wrap {width:60%;}
.main-default-wrap-flex .main-default-box-wrap .main-default-box-list {display:flex;}
.main-default-wrap-flex .main-default-box-wrap .main-default-box-list .main-default-box {width:33.3333%; background-size:cover; background-position:50% 50%; background-repeat:no-repeat; min-height:300px; color:#fff;}
.main-default-wrap-flex .main-default-box-wrap .main-default-box-list .main-default-box:nth-child(2) {display:flex; flex-direction:column; justify-content:space-between; height:100%; padding:30px 40px 35px 20px; cursor:pointer;}
.main-default-wrap-flex .main-default-box-wrap .main-default-box-list .main-default-box .flexes {display:flex; flex-direction:column; justify-content:space-between; width:100%; height:100%; padding:30px 40px 35px 20px;}
.main-default-wrap-flex .main-default-box-wrap .main-default-box-list .main-default-box .tt-box .tit {font-size:24px; font-weight:700; letter-spacing:-.025em; line-height:; margin-bottom:20px;}
.main-default-wrap-flex .main-default-box-wrap .main-default-box-list .main-default-box .tt-box .txt {letter-spacing:0; line-height:1.500em; font-weight:300;}
.main-default-wrap-flex .main-default-box-wrap .main-default-box-list .main-default-box .ico-flex {display:flex; justify-content:space-between; align-items:flex-end;}
.main-default-wrap-flex .main-default-box-wrap .main-slide .item {min-height:400px; background-size:cover; background-repeat:no-repeat;}

.main-slide {position:relative;}
.main-slide .slick-arrow {position:absolute; top:50%; border:0; margin-top:-35px; width:70px; height:70px; border-radius:50%; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%; font-size:0; line-height:0; z-index:20; background-size:contain;}
.main-slide .slick-prev {left:25px; background-image:url('../images/main/m-slide-prev.png')}
.main-slide .slick-next {right:25px; background-image:url('../images/main/m-slide-next.png')}
.main-slide .m-slide-flex {min-height:400px; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%;}
.main-slide .m-slide-flex .tit {font-size:30px; color:#000; font-weight:700; letter-spacing:-.025em; line-height:1.200em;}
.main-slide .m-slide-flex .txt {font-size:20px; color:#000; font-weight:500; letter-spacing:-.05em; line-height:1.5em; text-align:center; margin-top:5px;}

.main-default-boxes-flex {width:40%; background:#fff;}
.main-default-boxes-flex .main-default-boxes {padding:30px; border-bottom:1px solid #ddd; max-height:300px; min-height:300px;}
.main-default-boxes-flex .main-default-boxes .tit {font-size:24px; font-weight:700; letter-spacing:0; color:#333; line-height:1.500em; margin-bottom:30px;}
.main-default-boxes-flex .main-default-boxes dl {}
.main-default-boxes-flex .main-default-boxes dl a {display:flex; margin-bottom:10px;}
.main-default-boxes-flex .main-default-boxes dl dt {font-size:18px; color:#000; letter-spacing:-.025em; line-height:1.3em; padding-right:13px;}
.main-default-boxes-flex .main-default-boxes dl dd {font-size:18px; color:#777; overflow: hidden; text-overflow: ellipsis; word-break: break-all; white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

.main-info-flex ul {display:flex; flex-wrap:wrap;}
.main-info-flex ul li {width:50%;}
.main-info-flex ul li a {padding:25px 30px; width:100%; height:100%; min-height:200px; max-height:200px; display:flex; flex-direction:column;}
.main-info-flex ul li a .tit {font-size:20px; font-weight:700; color:#000; letter-spacing:-.025em; line-height:1.800em;}
.main-info-flex ul li a .txt {}
.main-info-flex ul li a .icos-flex {display:flex; justify-content:space-between; align-items:center; margin-top:15px;}
.main-info-flex ul li a .icos-flex .plus {font-size:36px; color:#555;}
.main-info-flex ul li:nth-child(n+3) {border-top:1px solid #ddd;}
.main-info-flex ul li:nth-child(even) {border-left:1px solid #ddd;}

.main-relation {margin:40px 0;}
.main-relation .slick-arrow {position:absolute; top:50%; border:0; margin-top:-12.5px; width:12px; height:25px; border-radius:50%; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%; font-size:0; line-height:0; z-index:20; background-size:contain;}
.main-relation .slick-prev {left:-30px; background-image:url('../images/main/relation-prev.png')}
.main-relation .slick-next {right:-30px; background-image:url('../images/main/relation-next.png')}
.main-relation .slick-list {margin:0 -5px;}
.main-relation .slick-slide {padding:0 5px;}
.main-relation .slick-slide .img {border:1px solid #ddd}
.main-relation .slick-slide img {margin:0 auto; min-width:180px; min-height:60px;}

