@charset 'UTF-8';



.front-contents{
position: relative;
width: 100%;
max-width: 1920px;
padding: 0 0 80px;

}
.front-contents::before{
position: absolute;
width: 115%;
max-width: 1386px;
height: 100%;
content: '';
top: 0;
left: 0;
right: 0;
margin: auto;
background: url("../images/front-bg.png") repeat-y center top;
background-size: 100% auto;
z-index: -1;

}
@keyframes parallax-small-anim {
  from {
transform: translateY(-500px);
  }
  to {
transform: translateY(0px);
  }
}




.main-kv{
overflow: hidden;
}
.main-kv-wrp{
max-width: 1500px;
margin: 0 auto;
padding: 72px 0 0;
/*
background: url("../images/front-main-bg.png") repeat-y center top -72px;
background-size: 1748px auto;
*/
}

.main-kv-cont{
position: relative;
}
.main-kv-cont-base{
padding:8% 0 9.16% 0;
position: relative;
}

.kv-town{
position: relative;
width: 41.2%;
left: 29.16%;
}




.kv-bg{
position: absolute;
width: 116.5%;
top: -22.3%;
left: -9.25%;
z-index: -1;
}
.kv-ill-left{
position: absolute;
width: 53%;
top: -1%;
right: 62%;
}
.kv-ill-right{
position: absolute;
width: 55%;
top: 5%;
left: 65.7%;
}
.main-ttl{
position: absolute;
width: 27.5%;
top: 64%;
left: 50%;
}
p.main-text{
font-size: 16px;
font-weight: 700;
text-align: center;
margin: 0 0 4%;
line-height: 2;
}



.about .inner,
.business .inner,
.support .inner{
padding: 0 4%;
}


.person .front-center-cont-ttl-box{
background: url("../images/front-person-ttl-ill.svg") no-repeat center top;
}
.talk .front-center-cont-ttl-box{
background: url("../images/front-talk-ttl-ill.svg") no-repeat center top 14px;
}

.front-sub-ttl{
font-size: 18px;
font-weight: 700;
color: #4ebedf;
}
.front-sec-ttl{
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 68px;
line-height: 1.1;
color: #4ebedf;
margin: 0 0 12px;
}
.front-center-cont .front-sec-ttl{
color: #fff;
font-size: 58px;
}
.front-center-cont .front-sec-ttl{
color: #fff;
font-size: 58px;
}
.front-sec-ttl-add{
color: #fff;
font-size: 34px;
font-weight: 500;
line-height: 1.1;
margin: 0 0 20px;
}
.front-sec-ttl-add span{
color: #fff;
font-size: 18px;
font-weight: 700;
}
.front-center-cont p{
color: #fff;
margin: 0 0 4%;
}
.front-center-cont .slick-slide p{
color: #4d4d4d;
margin: 0 0 4%;
}
.front-center-cont p.front-sub-ttl{
margin: 0 0;
}





.search-inner{
width: 92%;
max-width: 1200px;
margin: 0 auto;
}
.search-cont{
width: 100%;
text-align: center;
background: #fcee84;
border-radius: 30px;
margin: 0 0 10%;
}
.search-cont .loupe{
width: 80%;
max-width: 550px;
margin: 0 auto;
position: relative;
}
.search-cont .loupe a{
position: absolute;
bottom: 17%;
left: 0;
right: 0;
margin: auto;
width: 31%;
}




.front-lr-box{
display: flex;
justify-content: space-between;
margin: 0 auto 12%;
}
.business .front-lr-box{
flex-direction: row-reverse;
}
.front-lr-box-cont{
width: 40%;
}
.front-lr-box-img{
width: 52%;
position: relative;
}
.front-lr-box-img img{
border-radius: 24px;
}
.front-lr-box-cont ul{
padding: 8% 0 0;

}
.front-lr-box-cont ul li{
display: block;
border-bottom: 1px solid #b3b3b3;
}
.front-lr-box-cont ul li a{
position: relative;
display: block;
line-height: 68px;
font-family: "Noto Sans JP", sans-serif;
font-size: 18px;
font-weight: 700;
}
.front-lr-box-cont ul li a::after{
position: absolute;
content: '';
width: 30px;
height: 30px;
right: 16px;
top: 0;
bottom: 0;
margin: auto;
background: url("../images/icon-links.svg") no-repeat;
background-size: 100%;
}

.talk,
.person{
position: relative;
}

.talk-inner,
.person-inner{
width: 92%;
max-width: 1000px;
margin: 0 auto;
}

.front-center-cont{
text-align: center;
padding: 7% 0 20%;
}
.front-center-cont-bg{
position: absolute;
width: 100%;
max-width: 1300px;
top: 0;
left: 0;
right: 0;
margin: auto;
z-index: -1;
}
.front-center-cont-bg img{
border-radius: 0 30px 0 30px;

}
.front-talk-img img{
border-radius: 24px;

}



.front-about-ill{
position: absolute;
width: 32%;
left: -5%;
top: 56%;
}
.front-business-ill{
position: absolute;
width: 58%;
left: -5%;
bottom: -8%;
}
.front-support-ill{
position: absolute;
width: 38%;
left: -8%;
top: 59%;
}



.top-flowing{
width: 100%;
max-width: 1300px;
margin: 0 auto 13%;
overflow: hidden;
}
.scroll-container {
display: flex;
overflow: hidden;
width: 100%;
white-space: nowrap;
}
.scroll-content {
display: flex;
animation: scroll 35s linear infinite;
}
.remodal-is-locked .scroll-content {
animation-play-state: paused;
}
.item {
flex: 0 0 auto;
width: 280px;/*お好みの幅に調整*/
margin: 0 10px;/*左右の余白はここを調整*/
text-align: center;
font-size: 24px;
}
.item img {
width: 100%;
border-radius: 18px;
}
@keyframes scroll {
0% {transform: translateX(0);}
100% {transform: translateX(-100%);}
}





@media only screen and (max-width : 1200px) {
p.main-text {
font-size: 14px;
margin: 0 0 4%;
line-height: 2;
}
.front-sec-ttl {
font-size: 54px;
line-height: 1.1;
color: #4ebedf;
margin: 0 0 12px;
}
.front-lr-box-cont ul li a {
line-height: 58px;
font-size: 16px;
}
.talk .front-center-cont-bg {
}
.talk .front-center-cont-bg img{
position: relative;
width: 150%;
top: 0;
left: -25%;
}
.front-center-cont .front-sec-ttl {
font-size: 48px;
}
.front-sec-ttl-add {
font-size: 30px;
margin: 0 0 20px;
}
.person .front-center-cont-ttl-box {
max-width: 420px;
margin: 0 auto;
background: url(../images/front-person-ttl-ill.svg) no-repeat center top;
background-size: 100% auto;
}

}

@media only screen and (max-width : 1000px) {
.front-sec-ttl {
font-size: 40px;
line-height: 1.1;
color: #4ebedf;
margin: 0 0 12px;
}
.front-lr-box-cont {
width: 46%;
}
.front-lr-box-img {
width: 46%;
position: relative;
}
.item {
flex: 0 0 auto;
width: 200px;
margin: 0 10px;
text-align: center;
font-size: 24px;
}
.main-kv-cont-base {
width: 120%;
left: -10%;
padding: 8% 0 9.16% 0;
}
p.main-text {
font-size: 14px;
margin: 8% 0 4%;
line-height: 2;
}
.main-ttl {
width: 35%;
top: 64%;
left: 42%;
}
.front-center-cont .front-sec-ttl {
font-size: 40px;
}
.person .front-center-cont-bg img{
position: relative;
width: 130%;
top: 0;
left: -15%;
}
.front-center-cont-bg img{
position: relative;
width: 150%;
top: 0;
left: -25%;
}
.person .front-center-cont-ttl-box {
max-width: 340px;
margin: 0 auto;
background: url(../images/front-person-ttl-ill.svg) no-repeat center top;
background-size: 100% auto;
}

}



@media only screen and (max-width : 768px) {
.main-kv-wrp {
padding: 72px 0 0;
}
.main-kv-cont-base {
width: 100%;
left: 0;
padding: 23.5% 0 60% 0;
}
.kv-town {
width: 84%;
left: 8%;
}
.main-ttl {
width: 76%;
top: 64%;
left: 0;
right: 0;
margin: auto;
}
.kv-ill-left{
width: 34.6%;
left: 0;
top: 5%;
}
.kv-ill-right{
width: 59%;
right: 0;
left: auto;
top: 0;
}
.kv-bg {
position: absolute;
width: 100%;
top: 0%;
left: 0%;
z-index: -1;
}


.about .inner, .business .inner, .support .inner {
padding: 0 ;
}
.front-sec-ttl {
font-size: 34px;
color: #4ebedf;
margin: 0 0 12px;
}
.front-center-cont .front-sec-ttl {
font-size: 34px;
}
.front-sec-ttl-add {
font-size: 22px;
margin: 0 0 20px;
line-height: 1.5;
}
.front-lr-box {
display: block;
margin: 0 auto 18%;
}
.front-lr-box-cont {
width: 100%;
margin: 0 0 7%;
}
.front-lr-box-img {
width: 80%;
margin: 0 auto;
}
.front-lr-box-cont ul li a {
line-height: 48px;
font-size: 14px;
}
.front-lr-box-cont ul li a::after {
width: 30px;
height: 30px;
right: 0;
}
.item {
flex: 0 0 auto;
width: 140px;
margin: 0 4px;
text-align: center;
font-size: 24px;
}
.item img {
border-radius: 2vw;
}
.search-cont {
border-radius: 3.2vw;
margin: 0 0 10%;
}
.front-center-cont p {
color: #fff;
margin: 0 0 4%;
text-align: left;
}
.front-sub-ttl {
font-size: 16px;
margin: 0 0 1.5%;
}
.front-center-cont p.front-sub-ttl {
text-align: center;
}
.talk-inner, .person-inner {
width: 88%;
margin: 0 auto;
}

.talk .front-center-cont-ttl-box {
max-width: 500px;
margin: 0 auto;
background: url(../images/front-talk-ttl-ill.svg) no-repeat center top 0;
background-size: 100% auto;
}
.person .front-center-cont-ttl-box {
max-width: 280px;
}
.person .front-center-cont-bg img {
position: relative;
width: 180%;
top: 0;
left: -40%;
}
.scroll-content {
animation: scroll 20s linear infinite;
}
.search-cont .loupe {
width: 96%;
}
.front-center-cont {
text-align: center;
padding: 10% 0 16%;
}
.front-contents::before {
background: url(../images/front-bg.png) repeat-y left 20% top;
background-size: 140% auto;
}
p.main-text {
width: 88%;
font-size: 14px;
margin: 0 auto 8%;
line-height: 2;
text-align: left;
}
.front-talk-img img,
.front-lr-box-img img{
border-radius: 3.4vw;
}
.front-contents {
padding: 0 0 50px;
}
.front-sec-ttl-add span {
color: #fff;
font-size: 16px;
font-weight: 700;
}

   }






@media only screen and (max-width : 600px) {
.person .front-center-cont-bg img {
width: 220%;
top: 0;
left: -60%;
}
.talk .front-center-cont-bg img {
width: 260%;
top: 0;
left: -80%;
}
 }
 @media only screen and (max-width : 400px) {
.talk .front-center-cont-bg img {
width: 300%;
top: 0;
left: -100%;
}
 }