@charset "utf-8";
/* CSS Document */
.fv {
	min-height: clamp(450px, 40vw, 600px);
	position: relative;
	background-color: #D9D7ED;
}
.fv .box_wrap{
    background-color: #f5f5f5;
    width: 100%;
    position: relative;
	min-height: clamp(450px, 40vw, 600px);
    align-items: stretch;
}
.fv .box_wrap .txtbox{
	flex-direction: column;
	gap: 50px;
	align-items: flex-start;
	width: 40%;
	position: relative;
    z-index: 2;
}
.fv .box_wrap .imgbox{
	width: 60%;
	position: relative;
    overflow: hidden;
	min-height: clamp(450px, 40vw, 600px);
}
.fv .box_wrap .imgbox img{
    width: 100%;
    height: 100%;
    object-fit: cover;
	display: block;
}
.fv .box_wrap .imgbox::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(245, 245, 245, 1) 0%, rgba(245, 245, 245, 0.5) 23%, rgba(245, 245, 245, 0.2) 34%);
    z-index: 1;
    pointer-events: none;
}
.fv .box_wrap .imgbox img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fv .bt_box{
	position: relative;
	gap: 30px;
	z-index: 5;
	margin-top: -60px;
}
.fv .bt_box a{
	width: calc(50% - 15px);
	background-color: #fff;
	border-radius: 5px;
	position: relative;
	align-items: stretch;
    overflow: hidden;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16); 
}
.fv .bt_box a .txtbox{
	width: 75%;
	padding: 27px 30px;
	flex-direction: column;
	gap: 15px;
	align-items: flex-start;
}
.fv .bt_box a .imgbox{
	width: 25%;
	aspect-ratio: auto; 
    flex-shrink: 0;
}
.fv .bt_box a .imgbox img{
	width: 100%; 
    height: 100%;
    object-fit: cover;
    display: block; 
    border-radius: 5px 0 0 5px;
}
.fv .bt_box a::after {
    content: "";
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 24px;
    height: 24px;
    background: #222222 url(https://astrea-corp.jp/system_panel/uploads/images/more_arrow2.svg) no-repeat center center / 7px auto;
    border-radius: 50%;
    transition: transform 0.3s ease;
}
.fv .bt_box a:hover::after{
    transform: translateX(5px);
}
.fv .bt_box a:hover{
    opacity: 0.9;
}

/* ---------- service_wrap ---------- */
.service_wrap .more{
	margin: 0 auto;
}
.service_wrap{
	flex-direction: column;
	gap: 60px;
}
.service_wrap .titlebox{
	flex-direction: column;
	gap: 20px;
}
.service_wrap .box_wrap1{
	gap: 50px;
	align-items: stretch;
}
.service_wrap .box_wrap1 .boxitem{
	flex-direction: column;
	background-color: #fff;
	border-radius: 20px;
	align-items: flex-start;
	width: calc(50% - 25px);
	overflow: hidden;
	height: auto;
    align-self: stretch;
	justify-content: flex-start;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.service_wrap .box_wrap1 .boxitem .imgbox{
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    aspect-ratio: 16 / 9;
}
.service_wrap .box_wrap1 .boxitem .imgbox > img{
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    display: block;
}
.service_wrap .box_wrap1 .boxitem .imgbox > img{
    min-width: 100%;
}
.service_wrap .box_wrap1 .boxitem .imgbox::before{
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
    pointer-events: none;
}
.service_wrap .box_wrap1 .boxitem .imgbox .num{
    position: absolute;
	top: 22px;
    left: 22px;
    z-index: 2;
}
.service_wrap .box_wrap1 .boxitem .imgbox .num::after{
    content: "";
    position: absolute;
    left: 32px;
    top: 50px;
    width: 58px;
    height: 2px;
    background-color: #fff;
    transform: rotate(-50deg);
    transform-origin: left center;
}
.service_wrap .box_wrap1 .txtbox{
	flex-direction: column;
	gap: 40px;
	padding: 40px;
	width: 100%;
	align-items: flex-start;
}
.service_wrap .box_wrap1 .txtbox .topbox{
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}
.service_wrap .box_wrap1 .txtbox .midbox{
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}
.service_wrap .box_wrap1 .txtbox .midbox .miditem{
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}
.service_wrap .box_wrap1 .txtbox .midbox .miditem .miditembox{
	gap: 8px;
	align-items: flex-start;
}
.service_wrap .box_wrap1 .txtbox .midbox .miditem .miditembox img{
	width: 22px;
	height: 22px;
}
.service_wrap .box_wrap1 .txtbox .midbox .miditem .miditembox p{
	flex: 1;
}
.service_wrap .titlebox .mid{
    align-items: center;
    gap: 18px;
}
.service_wrap .titlebox .mid .deco{
    width: 30px;
    height: auto;
}

.service_wrap .titlebox .mid h2 span{
    color: #5C51B2;
}
.service_wrap .box_wrap1 .txtbox .topbox h3{
    position: relative;
    padding-left: 14px;
	width: 100%;
}

.service_wrap .box_wrap1 .txtbox .topbox h3::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 22px;
    background-color: #827BC2;
}
.service_wrap .box_wrap1 .txtbox .midbox{
    width: 100%;
}
.service_wrap .box_wrap1 .txtbox .midbox h4{
    gap: 14px;
    width: 100%;
    white-space: nowrap;
}
.service_wrap .box_wrap1 .txtbox .midbox h4::before,
.service_wrap .box_wrap1 .txtbox .midbox h4::after{
    content: "";
    flex: 1;
    border-top: 1px dotted #827BC2;
}


.service_wrap .box_wrap2{
	background-color: #fff;
	padding: 50px 35px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	border-radius: 20px;
	gap: 40px;
	flex-direction: column;
	width: 100%;
}
.service_wrap .box_wrap2 .box {
    gap: 30px;
	width: 100%;
}
.service_wrap .box_wrap2 .box .boxitem {
    flex-direction: column;
    gap: 20px;
    width: calc((100% - 150px) / 6);
}
.service_wrap .box_wrap2 .box .boxitem .imgbox{
    background-color: #F0EFF8;
	border-radius: 50%;
	padding: 20px;
}


/* ---------- reason_wrap ---------- */
.reason_wrap{
	flex-direction: column;
	gap: 40px;
}
.reason_wrap .box_wrap{
	gap: 70px;
}
.reason_wrap .box_wrap .boxitem{
	width: calc((100% - 140px)/3);
	gap: 20px;
	flex-direction: column;
}
.reason_wrap .box_wrap .boxitem .txtbox{
	flex-direction: column;
	gap: 7px;
	align-items: flex-start;
}
.reason_wrap .box_wrap .boxitem h3 {
    background-color: #222;
    padding: 4px 10px;
}
.reason_wrap .box_wrap .boxitem .imgbox img{
	border-radius: 10px;
}
/* ---------- purple_label_wrap ---------- */
.purple_label_wrap .namelabel{
	flex-direction: column;
	gap: 5px;
	align-items: flex-end;
	width: 100%;
}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.reason_wrap .box_wrap .boxitem {
		width: calc((100% - 70px) / 2);
	}

}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.fv .box_wrap .txtbox{
		width: 50%;
	}
	.fv .box_wrap .imgbox{
		width: 50%;
	}
	.service_wrap .box_wrap1 {
		flex-direction: column;
		align-items: center;
	}
	.service_wrap .box_wrap1 .boxitem {
		width: 90%;
		margin-left: auto;
        margin-right: auto;
	}
	.service_wrap .box_wrap2 .box .boxitem {
		flex-direction: column;
		gap: 20px;
		width: calc((100% - 90px) / 4);
	}
	.service_wrap .box_wrap2 {
		width: 90%;
	}
	.reason_wrap .box_wrap .boxitem {
		width: 90%;
	}
	.reason_wrap .box_wrap {
		gap: 50px;
	}

}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.fv .box_wrap{
		flex-direction: column-reverse;
		gap: 30px;
	}
	.fv .box_wrap .txtbox{
		width: 100%;
		gap: 30px;
	}
	.fv .box_wrap .imgbox{
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .fv .box_wrap .imgbox img{
        height: auto;
        min-height: 0;
        display: block;
    }
 	.fv .bt_box{
        margin-top: 0;
        position: relative;
		flex-direction: column;
		margin: 50px 0;
    }
	.fv .bt_box a {
		width: 100%;
	}
	.fv {
		background-color: #F5F5F5;
	}
	.service_wrap .box_wrap1 .boxitem {
		width: 100%;
	}
	.service_wrap .box_wrap2 .box .boxitem {
		flex-direction: column;
		gap: 20px;
		width: calc((100% - 60px) / 3);
	}
	.service_wrap .box_wrap2 {
		width: 100%;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
    .fv .box_wrap .txtbox {
        padding-right: 20px;
    }
 	.fv .bt_box{
		margin: 20px 0;
		gap: 15px;

    }
	.fv .bt_box a .txtbox {
		
		width: 68%;
		padding: 18px 45px 18px 20px; 
		gap: 10px;
	}
    .fv .box_wrap .txtbox {
        gap: 20px;
    }
	.fv .bt_box a .imgbox img {
		border-radius: 5px 5px;
	}
	.fv .bt_box a {
		padding-left: 0; 
		align-items: stretch;
		overflow: hidden;
	}
	.fv .bt_box a .imgbox {
		width: 32%;
		flex-shrink: 0; 
	}
	.fv .bt_box a .imgbox img {
		width: 100%; 
		height: 100%; 
		object-fit: cover; 
		border-radius: 5px 0 0 5px; 
	}
    .fv .box_wrap .txtbox p br{
        display: none;
    }
	.service_wrap .box_wrap1 .txtbox {
		flex-direction: column;
		gap: 20px;
		padding: 20px;
		width: 100%;
		align-items: flex-start;
	}
	.service_wrap .titlebox .mid .deco {
		display: none;
	}
	.service_wrap {
		gap: 40px;
	}
	.worry_wrap {
		gap: 40px;
	}
	.service_wrap .box_wrap1 .boxitem .imgbox .num::after {
		left: 22px;
		top: 40px;
		width: 48px;
	}
	.service_wrap .box_wrap2 .box .boxitem {
		flex-direction: column;
		gap: 20px;
		width: calc((100% - 30px) / 2);
	}

}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}