@charset "utf-8";

/* -----------------------------
	共通
-------------------------------- */
#top{
}
/* -----------------------------
	mv-area
-------------------------------- */

#top .mv-area {
	width: 100%;
    height: calc(100vh - 190px);
    height: 580px;
    margin: 90px 0 20px 0;
	position: relative;
    overflow: hidden;
}
#top .mv-area .l-side,
#top .mv-area .r-side{
    width: 34%;
    width: calc(25% - 20px);
    /* max-width: 410px; */
}
#top .mv-area .img-list{

    /* max-width: 410px; */
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
}
/* #top .mv-area .l-side .img-list:last-child{
    display: none;
} */
#top .mv-area .img-list .img{
    width: calc((100% - 10px) / 2);
    height: 285px;
}
#top .mv-area .img-list .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
#top .mv-area .top-slide{
    position: relative;
    top: 0px;
}
#top .mv-area .r-side{
    position: absolute;
    right: 0;
    top: 0px;
    z-index: 1;
}
#top .mv-area .slide-list .img{
    width: 330px !important;
    height: 200px;
    margin: 0 30px 0 0;
}
#top .mv-area .slide-list img{
    width: 100%;
    max-width: 330px;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.mv-area .mv-block{
    width: 100%;
    height: 100%;
    position: relative;
    /* color: #fff;
    z-index: -1; */
    -webkit-animation: anime 24s 0s infinite;
    animation: anime 24s 0s infinite;
}
.slick-slider,
.slick-list,
.slick-track{
    height: 100%;
}
#top .mv-area .catch-box{
    /* width: calc(100% - 860px); */
    width: 50%;
    /* min-width: 1200px;
    max-width: 1200px; */
    margin: 0 20px;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    background: url(../img/mv-bg.jpg) no-repeat center / cover ;
    border-radius: 10px;
    height: 100%;
    padding: 60px 0 0;

    /* display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; */
}
/* #top .mv-area .mv-catch-box{
	position: absolute;
	padding: 0;
    width: 900px;
    bottom: 30%;
    left: 10%;
    bottom: auto;
    top: 35%;
} */

#top .mv-area .mv-catch-box .copy {
	font-size: 4.4rem;
    line-height: 1.4;
    font-weight: 600;
    position: relative;
    color: var(--main-color);
    text-align: center;
}
#top .mv-area .mv-catch-box .copy span{
    font-size: 5.2rem;
    text-align: center;
}
#top .mv-area .mv-catch-box .txt {
    color: #111;
	display: block;
	font-size: 2.4rem;
    line-height: 1.8;
	margin: 20px 0 0;
    font-weight: 600;
    text-align: center;
}
#top .mv-area .mv-catch-box .txt span{
    background-color: var(--yellow);
    padding: 2px 5px;
    margin: 0 5px 0 0;
}
#top .mv-area .mv-catch-box .txt .sub {
    font-size: 1.3rem;
}

#top .mv-area .point-box{
    display: flex;
    gap: 10px;
    justify-content: center;
    /* position: absolute;
    right: 10%;
    bottom: auto;
    top: 35%; */
    margin: 35px 0 0;
}
#top .mv-area .point-box .img{
    width: 205px;
    height: 205px;
}
#top .mv-area .point-box img{
    width: 100%;
    height: 100%;
    min-width: 205px;
}
#top .mv-area .point-box .point{
    position: relative;
    width: 205px;
    height: 205px;
    border-radius: 50%;
    background:linear-gradient(-45deg, #E3F7FF, #FFFFFF ,#E3F7FF);
    background: var(--yellow);
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.07);
}
#top .mv-area .point-box .point::before{
    position: absolute;
    content: "";
    width: 197px !important;
    height: 197px !important;
    border-radius: 50%;
    background:linear-gradient(45deg, #E3F7FF, #FFFFFF ,#E3F7FF);
    background: #fff;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
}
#top .mv-area .point-box .point .content-wrap{
    position: relative;
    padding: 80px 0 0;
    text-align: center;
}
#top .mv-area .point-box .point:nth-child(1) .content-wrap{
    background: url(../img/illust-yen.svg) no-repeat top 25px center / 48px 49px;
}
#top .mv-area .point-box .point:nth-child(2) .content-wrap{
    background: url(../img/illust-hand.svg) no-repeat top 32px center / 55px 40px;
}
#top .mv-area .point-box .point:nth-child(3) .content-wrap{
    background: url(../img/illust-pc.svg) no-repeat top 36px center / 52px 34px;
}
#top .mv-area .point-box .point .catch{
    display: inline-block;
    color: #000;
    background-color: var(--yellow);
    padding: 0 20px;
    height: 27px;
    border-radius: 14px;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    position: relative;
    margin: 0 0 5px;
}
#top .mv-area .point-box .point .point-ttl{
    color: var(--main-color);
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.3;
    position: relative;
}
#top .h1-area{
    /* position: absolute; */
	z-index: 1;
	right: 0;
    text-align: left;
	left: 0;
    top: auto;
    bottom: 26px;
	margin: 0 auto;
}
#top .h1-area h1{
    font-weight: 500;
    text-align: center;
    color: #989898;
}

@media screen and (max-width: 1300px){
    /* #top .mv-area .l-side,
    #top .mv-area .r-side{
        width: calc(25% - 20px);
    } */
    #top .mv-area .catch-box{
        /* width: 50%; */
        padding: 60px 10px;
    }   
}
@media screen and (max-width: 768px){

	#top .mv-area {
        height: auto;
        margin: 130px 0 0;
        /*aspect-ratio: 3 / 4;*/
	}
    #top .mv-area .l-side{
        width: 100%;
        height: 120px;
        display: flex;
        gap: 0;
    }
    #top .mv-area .img-list{
        flex-wrap: nowrap;
        /* width: 100%; */
        gap: 0px;
        animation: loop 5s infinite linear 0.5s both;

    }
    /* #top .mv-area .l-side .img-list:last-child{
        display: contents;
    } */
    #top .mv-area .img-list:first-child{
        animation: loop 50s -25s linear infinite;
    }
    #top .mv-area .img-list:last-child{
        animation: loop2 50s linear infinite;
    }
    @keyframes loop {
        0% {
        transform: translateX(100%);
        }
        to {
        transform: translateX(-100%);
        }
    }

    @keyframes loop2 {
        0% {
        transform: translateX(0);
        }
        to {
        transform: translateX(-200%);
    }
    }

    #top .mv-area .img-list .img{
        width: calc(100% / 3);
        height: 120px;
        aspect-ratio: 25 / 24;
    }
    #top .mv-area .slide-list .img{
        width: 176px !important;
        height: 120px;
        margin: 0 5px 0 0;
    }
    #top .mv-area .img-list .img img{
        border-radius: 0;
    }
	
	#top .mv-area .l-side,
	#top .mv-area .r-side{
		display: none;
	}
		
    #top .mv-area .catch-box{
        width: 100%;
        height: auto;
        border-radius: 0;
        margin: 0;
        padding: 25px 9px 90px;
        position: relative;
        top: auto;
        transform: none;
    }
    #top .mv-area .mv-catch-box{
        width: 100%;
        padding: 20px 0 0;
		position: static;
		top: auto;
		left: auto;
    }
    #top .mv-area .mv-catch-box .copy{
        font-size: 2.8rem;
    }
    #top .mv-area .mv-catch-box .copy span{
        font-size: 3.2rem;
    }
    #top .mv-area .mv-catch-box .txt{
        font-size: 1.6rem;
        letter-spacing: 0.02em;
        margin: 20px 0 20px;
    }
    #top .mv-area .point-box{
        width: 100%;
        /* width: calc(100% - 20px); */
        right: 0;
        left: 0;
        margin: 0 auto;
        gap: 6px;
        top: 300px;
    }
    #top .mv-area .point-box .point:nth-child(1) .content-wrap{
        background: url(../img/illust-yen.svg) no-repeat top 14px center / 33px 34px;
    }
    #top .mv-area .point-box .point:nth-child(2) .content-wrap{
        background: url(../img/illust-hand.svg) no-repeat top 14px center / 43px 31px;
    }
    #top .mv-area .point-box .point:nth-child(3) .content-wrap{
        background: url(../img/illust-pc.svg) no-repeat top 18px center / 40px 27px;
    }
    #top .mv-area .point-box .point{
        width: 115px;
        width: calc((100% - 12px) / 3 );
        height: 136px;
        border-radius: 6px;
        background: #fff;
        border: solid 1px #F5F5F5;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.06);
        
    }
    #top .mv-area .point-box .point::before{
        display: none;
    }
    #top .mv-area .point-box .point .content-wrap{
        padding: 55px 0 0;
    }
    #top .mv-area .point-box .point .catch{
        font-size: 1.3rem;
        height: 20px;
        line-height: 20px;
        padding: 0 5px;
        letter-spacing: 0;
    }
    #top .mv-area .point-box .point .point-ttl{
        font-size: 1.6rem;
    }
    /*#top .h1-area{
        position: absolute;
        left: 0;
        padding: 0 20px;
        bottom: 185px;
    }*/
	
	#top .h1-area{
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		padding: 10px 10px 0;
	}
	#top .h1-area h1{
		font-weight: 500;
		text-align: center;
		color: #989898;
	}
	
}

/* -----------------------------
	splide
-------------------------------- */
.mv-area .splide {
	display: none;
}
.mv-area .splide__slide img {
}
@media screen and (max-width: 768px) {
	.mv-area .splide {
		display: block;
	}
	.mv-area .splide__slide img {
		width: 125px;
		height: 150px;
		object-fit: cover;
	}
}

/* -----------------------------
	service-top
-------------------------------- */
.service-top{
}

@media screen and (max-width: 768px) {
	.service-top{
		margin: -50px auto 0;
		position: relative;
	}
}


/* -----------------------------
	serviceintro-area
-------------------------------- */
#top .serviceintro-area{
    /* background-color: #F6F6F6; */
    padding: 80px 0;
    text-align: center;
}
#top .serviceintro-area .ttl{
    font-size: 4.0rem;
    letter-spacing: 0.1em;
    font-weight: 500;
}
#top .serviceintro-area .catch{
    font-size: 4.0rem;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin: 20px 0 15px;
}
#top .serviceintro-area .txt{
    font-size: 1.8rem;
    letter-spacing: 0.1em;
    font-weight: 500;
}
@media screen and (max-width: 768px){
    #top .serviceintro-area{
        padding: 50px 20px 40px;
    }
    #top .serviceintro-area .ttl{
        font-size: 2.0rem;
    }
    #top .serviceintro-area .catch{
        font-size: 2.4rem;
        font-size: 2.0rem;
        text-align: left;
    }
    #top .serviceintro-area .txt{
        text-align: left;
        font-size: 1.6rem;
        font-weight: 400;
    }
}

/* -----------------------------
	case-area
-------------------------------- */
.caseslide-box.man,
.caseslide-box.woman{
    display: none;
}