@charset "UTF-8";

.mainset {background-repeat: no-repeat; background-position: center center; background-size: cover; height: 969px; position: relative;}
.mainset .inner {max-width: 1200px; margin: 0 auto; }
.mainset .inner h2 {font-size: 3.5rem; color: #fff; text-align: center; padding-top: 16.0rem;}
.mainset .inner p {text-align: center; color: #fff; font-size: 2.0rem; font-weight: 300; margin-top: 30px; margin-bottom: 40px;}

.mainset.main02 {background-image:url(/images/main02_cont_bg.jpg);}
.mainset.main03 {background-color: #f6f6f6;}
.mainset.main03 .inner h2 {color: #121212;}

.mainset.main01 .bg {height: 969px; position: relative;}
.mainset.main01 .bg .mainText {color: #fff; position: absolute; left: 10%; top: 45%; transform: translateY(-50%);}
.mainset.main01 .bg .mainText::after {content:""; display: block; background:url(/images/main_txt_ico.png) no-repeat; width: 47px; height: 47px; background-size: 47px; position: absolute; right: -10%; top: 0;}
.mainset.main01 .bg .mainText h2 {font-size: 5.5rem; letter-spacing: -0.05em; font-weight: 200; line-height: 1.3;}
.mainset.main01 .slick-arrow {display: none !important;}
.mainset.main01 .slick-dots {position: absolute; width: 10%; left: 10%; top: 58%;}
.mainset.main01 .slick-dots li {display: inline-block; margin: 0 5px;}
.mainset.main01 .slick-dots li button {display: inline-block; width: 10px; height: 10px; text-indent: -999em; overflow: hidden; cursor: pointer; border: 0; border-radius: 50%; border:1px solid #fff;}
.mainset.main01 .slick-dots li.slick-active button {background: #fff; border:0;}

/*media query*/
@media screen and (max-width:1200px) {
    .mainset {height: auto;}
    .mainset.main01 {height: 700px;}
    .mainset .inner {padding: 0 20px;}
    .mainset .inner h2 {padding-top: 50px; font-size:2.5rem;}
    .mainset .inner p {margin-top: 20px;}
    .mainset.main01 .bg {background-position: center bottom;}
    .mainset.main01 .bg .mainText h2 {font-size: 4rem;}
    .mainset.main01 .bg .mainText {left: 5%; top: 35%;}
    .mainset.main01 .slick-dots {left: 5%; top: 45%; width: 80%;}
}

@media screen and (max-width:640px) {
    .mainset.main01 {height: 500px;}
    .mainset.main01 .bg {background-position:center center; height:500px;}
    .mainset.main01 .bg .mainText h2 {font-size: 2.8rem;}
    .mainset.main01 .bg .mainText::after {background-size: 27px; right: -16%;}
    .mainset .inner h2 {font-size: 2.0rem;}
}

@media screen and (max-width:414px) {
    .mainset.main01 .bg .mainText h2 {font-size: 2.1rem;}
    .mainset.main01 .bg .mainText::after {right: -21%;}
}

.mainset.main02 .business .slick-slide {overflow: hidden; position:relative;}
.mainset.main02 .business .slick-slide a {position: absolute; top: 35%; left: 50%; transform: translate(-50%,-50%); width: 90%; text-align: center;}
.mainset.main02 .business .slick-slide a:hover {text-decoration: none;}
.mainset.main02 .business .busi_bg {margin: 10px; overflow: hidden; height: 429px; background-repeat: no-repeat; background-position: center center; background-size: cover; text-align: center; transition: all 1s;}
.mainset.main02 .business .busi_bg:hover {transform: scale(1.2);}
.mainset.main02 .business .busi_bg.busi01 {background-image:url(/images/business_bg01.jpg);}
.mainset.main02 .business .busi_bg.busi02 {background-image:url(/images/business_bg02.jpg);}
.mainset.main02 .business .busi_bg.busi03 {background-image:url(/images/business_bg03.jpg);}
.mainset.main02 .business .busi_bg.busi04 {background-image:url(/images/business_bg04.jpg);}
.mainset.main02 .business .busi_bg.busi05 {background-image:url(/images/business_bg05.jpg);}
.mainset.main02 .business .busi_bg.busi06 {background-image:url(/images/business_bg06.jpg);}
.mainset.main02 .business span {border: 1px solid #fff; padding: 10px; color: #fff; display: block; width: 60%; margin: 0 auto;}
.mainset.main02 .business h3 {font-size: 2.8rem; color: #fff;}
.mainset.main02 .business .slick-arrow {position: absolute;top: 50%; transform: translateY(-50%); background-repeat: no-repeat; background-size: cover; background-position: center center; z-index: 1; font-size: 0; width: 80px; height: 80px; background-size: 80px; box-shadow: 5px 5px 30px rgb(0 0 0 / 50%);}
.mainset.main02 .business .slick-prev {left: -3%; background-image: url(/images/busi_prev.jpg);}
.mainset.main02 .business .slick-next {right: -3%; background-image: url(/images/busi_next.jpg);}

/*media query*/
@media screen and (max-width:1200px) {
    .mainset.main02 .inner {padding-left:70px; padding-right:70px;}
    .mainset.main02 .inner .business {padding-bottom: 50px;}
}

@media screen and (max-width:700px) {
    .mainset.main02 .business h3 {font-size: 1.8rem;}
}

@media screen and (max-width:640px) {
    .mainset .inner p {font-size: 1.5rem; margin-top: 0; word-break: keep-all; line-height: 18px;}
    .mainset.main02 .inner {padding-left: 50px; padding-right: 50px;}
    .mainset.main02 .business .busi_bg {height: 300px;}
    .mainset.main02 .business .slick-arrow {background-size: 50px; width: 50px; height: 50px; top:40%;}
}

.mainset.main03 ul::after {content:""; display: block; clear:both;}
.mainset.main03 ul {width: calc(100% + 6px);}
.mainset.main03 ul li {float: left; width: calc(20% - 6px); margin: 0 6px 6px 0; box-sizing: border-box; height: 168px; overflow: hidden;}
.mainset.main03 ul li:hover {border: 1px solid #333; box-sizing: border-box; transition: .3s all; -webkit-transition: .3s all;}
.mainset.main03 ul li:nth-child(5n) {margin-right: 0;}

@media screen and (max-width:1200px) {
    .mainset.main03 ul li {height: auto;}
    .mainset.main03 ul li:hover {border:0;}
}

@media screen and (max-width:640px) {
    .mainset.main03 ul li {width: calc(33% - 6px);}
    .mainset.main03 ul li:nth-child(3n) {margin-right: 0;}
    .mainset.main03 ul li:nth-child(5n) {margin-right: 6px;}
}