@charset "utf-8";

/* -----------------------------------------------------------
下層共通
-------------------------------------------------------------- */
/* -----------------------------------------------------------
point-area
-------------------------------------------------------------- */
.point-area {
    padding: 80px 0 100px;
}
.point-area .point-list{
    display: flex;
    gap: 30px;
}
.point-area .point-list .point-item{
    width: calc((100% - 60px) / 3);
    padding: 45px 30px 35px;
    background-color: var(--bg-blue);
    position: relative;
}
.point-area .point-list .point-item::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background-color: #fff;
	left: 0;
	top: 10px;
}
.point-area .point-list .point-item::after{
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background-color: #fff;
	left: 0;
	bottom: 10px;
}
.point-area .point-list .point-item .no{
	font-family: var(--font-en);
	color: #fff;
	display: inline-block;
	position: absolute;
	background-color: var(--bg-blue);
	padding: 0px 10px;
    line-height: 1;
    top: 4px;
    left: 10px;
}
.point-area .point-list .point-item .img{
    position: absolute;
    background: var(--bg-blue);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -50px;
    right: 0;
    left: 0;
    margin: 0 auto;
}
.point-area .point-list .point-item .img img{
    width: auto;
    height: 46px;
    object-fit: cover;
}
.point-area .point-list .point-item .list-ttl{
	font-size: 2.2rem;
	line-height: 1.6;
	font-weight: bold;
    margin: 0 0 15px;
    text-align: center;
    min-height: 68px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
	color: var(--txt-navy);
	position: relative;
	z-index: 1;
	font-feature-settings: "palt";
}
.point-area .point-list .point-item .txt{
	line-height: 1.8;
}
@media screen and (max-width: 768px) {
    .point-area{
        padding: 65px 20px 40px;
    }
    .point-area .point-list{
        flex-wrap: wrap;
        gap: 60px;
    }
    .point-area .point-list .point-item{
        width: 100%;
        padding: 35px 15px 20px;
    }
    .point-area .point-list .point-item .img{
        width: 70px;
        height: 70px;
        top: -35px;
    }
    .point-area .point-list .point-item .img img{
        width: 40px;
        height: 40px;
        object-fit: contain;
    }
    .point-area .point-list .point-item .list-ttl{
        font-size: 2rem;
		min-height: inherit;
		line-height: 1.5;
    }
}




/* -----------------------------------------------------------
feature-area
-------------------------------------------------------------- */
.feature-area{
    padding: 120px 0 90px;
    border-radius: 50px;
    position: relative;
    background: url(../img/bg-gradation.png) no-repeat center / cover;
}
.feature-area::before {
    position: absolute;
    content: "";
    background: url(../img/bg-alice.png) no-repeat center / cover;
    width: 100%;
    aspect-ratio: 1600 / 853;
    top: 0px;
    z-index: -1;
    border-radius: 50px 50px 0 0;
}
.feature-area .ttl-m{
    margin: 0 0 50px;
}
.feature-area .feature-box{
    position: relative;
    display: flex;
    /* align-items: center; */
    flex-wrap: wrap;
    margin: 0 0 30px;
    padding: 60px 50px;
    background-color: #fff;
    gap: 40px;
    border-radius: 20px;
}
.feature-area .feature-box.center{
    align-items: center;
}
.feature-area .feature-box:last-of-type{
    margin: 0 !important;
}
.feature-area .feature-box .img{
    position: relative;
    width: 500px;
    height: 335px;
    border-radius: 20px;
    order: 1;
}
.feature-area .feature-box .img img{
    width: 100%;
    object-fit: cover;
}
.feature-area .feature-box .no{
    display: inline-block;
    font-family: var(--font-en);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--main-color);
    line-height: 1;
    letter-spacing: 0;
    /* text-align: right; */
    position: relative;
    padding: 0 25px 0 0;
    margin: 0 0 30px;
}
.feature-area .feature-box .no::before{
    position: absolute;
    content: "";
    width: 20px;
    height: 1px;
    background: var(--main-color);
    bottom: 2px;
    right: 0;
}
.feature-area .feature-box .txt-box{
    padding: 0;
    width: calc(100% - 540px);
    order: 0;
}
.feature-area .feature-box:nth-child(2n+1) .txt-box .no{
    text-align: left;
}
.feature-area .feature-box .txt-box .box-ttl{
    font-size: 1.4rem;
    font-family: var(--font-en);
    font-weight: 700;
    color: var(--main-color);
    position: relative;
    top: 0px;
    right: calc((100% - 1600px) / 2);
    transform: rotate(90deg) translateX(-1em);
    transform-origin: left bottom;
    display: none;
}
.feature-area .feature-box:nth-child(2n+1) .txt-box .box-ttl{
    right: 0;
}
.feature-area .feature-box .ttl-catch{
    margin: 0 0 20px;
    line-height: 1.6;
	font-size: 3rem;
}
.feature-area .feature-box .txt-box .txt + .txt  {
    margin: 15px 0 0;
}
.feature-area .feature-box .txt-box .txt.long{
    width: 1100px;
    position: relative;
    z-index: 1;
    text-align: justify;
}
.feature-area .feature-box .txt-box .disc-list .txt.long{
    width: 1080px;
    text-align: justify;
}
.feature-area .feature-box .txt-box .note.long{
    width: 1100px;
    position: relative;
    z-index: 1;
    text-align: justify;
}
.feature-area .feature-box .txt-box .disc-list{
    margin: 15px 0;
}
.index-list{
    display: flex;
    gap: 5px;
    justify-content: space-between;
    margin: 15px 0;
}
.index-list li{
    width: calc((100% - 35px) / 8);
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    text-align: center;
    color: #fff;
}
.index-list li.color1{
    background-color: #1565C0;
}
.index-list li.color2{
    background-color: #42A5F5;
}
.index-list li.color3{
    background-color: #E53935;
}
.index-list li.color4{
    background-color: #FBC02D;
}
.index-list li.color5{
    background-color: #AB47BC;
}
.index-list li.color6{
    background-color: #58BCCC;
}
.index-list li.color7{
    background-color: #F2984F;
}
.index-list li.color8{
    background-color: #C5E1A5;
}
.index-list li.color9{
    background-color: #FB8C00;
}
.index-list li.color10{
    background-color: #BEC4F7;
}
.index-list li.color11{
    background-color: #0D3778;
}
.index-list li.color12{
    background-color: #546E7A;
}
.index-list li.color13{
    background-color: #81C784;
}
@media screen and (max-width: 768px) {
    .feature-area{
        padding: 60px 20px;
        border-radius: 30px;
    }
    .feature-area::before{
        left: 0;
        border-radius: 50px 50px 0 0;
    }
    .feature-area .ttl-m{
        margin: 0 0 25px;
    }
    .feature-area .feature-box{
        margin: 0 0 30px;
        padding: 0px 0px 40px;
        gap: 0px;
    }
    .feature-area .feature-box .img{
        width: 100%;
        height: 200px;
        order: 0;
        border-radius: 20px 20px 0 0;
    }
	.feature-area .feature-box .no{
		margin: 0 0 20px;
	}
    .feature-area .feature-box .txt-box{
        width: 100%;
        padding: 30px 20px 0;
        order: 1;
    }
    .feature-area .feature-box .txt-box .sub-catch{
        font-size: 1.6rem;
    }
    .feature-area .feature-box .ttl-catch{
        font-size: 2.2rem;
		line-height: 1.5;
		margin: 0 0 15px;
    }
    .feature-area .feature-box .txt-box .txt.long,
    .feature-area .feature-box .txt-box .disc-list .txt.long,
    .feature-area .feature-box .txt-box .note.long{
        width: 100%;
    }
}
/* -----------------------------------------------------------
security-area
-------------------------------------------------------------- */
.security-area{
    width: 1200px;
    margin: 100px auto;
    position: relative;
}
.security-area .ttl-m{
    margin: 0 0 30px;
}
.security-area .ttl-m .jp{
    color: #fff;
}
.security-area .ttl-catch{
    margin: 20px 0 15px;
}
.security-area .security-list{
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin: 50px 0 0;
}
.security-area .security-list .security-item{
    width: calc((100% - 80px) / 3);
    border: solid 1px rgba(223,223,223,1);
    padding: 30px 20px;
    position: relative;
	text-align: center;
}
.security-area .security-list .security-item .img{
    margin: 0 0 20px;
}
.security-area .security-list .security-item img{
    width: 90px;
    height: 90px;
    object-fit: contain !important;
}
.security-area .security-list .security-item .security-ttl{
    font-size: 1.6rem;
    line-height: 1.8;
	font-weight: 400;
    /*margin: 0 0 10px;
    color: var(--txt-navy);
	font-weight: 600;*/
}
@media screen and (max-width: 768px) {
    .security-area{
        padding: 40px 20px 40px;
        margin: 60px  auto 60px;
        margin: 0;
        width: 100%;
    }
	.security-area .ttl-m{
		margin: 0 0 20px;
	}
    .security-area .ttl-m .jp{
        font-size: 2.1rem;
		margin: 0 0 20px;
    }
    .security-area .ttl-catch{
        margin: 10px 0 10px;
		font-size: 2rem;
    }
	.security-area .security-list{
        margin: 30px 0 0;
        gap: 20px;
    }
    .security-area .security-list .security-item{
        width: 100%;
        padding: 20px 15px;
    }
    .security-area .security-list .security-item .img{
        margin: 0 0 10px;
    }
    .security-area .security-list .security-item img{
        width: 70px;
        height: 70px;
    }
    .security-area .security-list .security-item .security-ttl{
        font-size: 1.6rem;
		text-align: left;
    }
}
/* -----------------------------------------------------------
aftersupport-area
-------------------------------------------------------------- */
.aftersupport-area{
    display: flex;
    position: relative;
    z-index: 1;
    padding: 80px 0 0;
    margin: 0 auto 80px;
    border-top: solid 1px rgba(223,223,223,1);
	
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.aftersupport-area .txt-box {
	width: 600px;
	order: 1;
}
.aftersupport-area .ttl-catch{
    margin: 20px 0 15px;
}

.aftersupport-area .img {
	width: 540px;
	order: 2;
}
.aftersupport-area .img img {
	width: 100%;
	height: 350px;
	object-fit: cover;
	object-position: center top;
	border-radius: 20px;
}

.aftersupport-area .img-box{
    width: 43%;
    width: 50%;
    order: 1;
    background-image: url(../img/img-support.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
@media screen and (max-width: 768px) {
    .aftersupport-area{
        margin: 0 auto;
        flex-wrap: wrap;
        /* width: calc(100% - 40px); */
        padding: 40px 20px;
		display: block;
    }
	.aftersupport-area .txt-box {
		width: 100%;
	}
	.aftersupport-area .img {
		width: auto;
		margin: 0 0 35px;
	}
	.aftersupport-area .img img {
		height: 200px;
		border-radius: 10px;
		/*object-position: center top;*/
	}
	
    .aftersupport-area .ttl-catch{
        font-size: 2rem;
    }
	
}
/* -----------------------------------------------------------
price-area
-------------------------------------------------------------- */
.price-area{
    /* padding: 80px 0; */
    position: relative;
    z-index: 1;
    margin: 0 auto 60px;
    padding: 40px 0 0;
    border-top: solid 1px rgba(223,223,223,1);
}
.price-area .ttl-s,
.price-area .ttl-m{
    margin: 0 0 30px;
}
.price-area .img-box{
    width: 43%;
    width: 320px;
    height: 200px;
    order: 2;
    background-image: url(../img/img-price.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.price-area .txt-box h3{
    font-size: 1.8rem;
    font-family: var(--font-en);
    letter-spacing: 0.05em;
    font-weight: 900;
    line-height: 1;
    margin: 20px 0 10px;
    background-color: var(--main-color);
    color: #fff;
    font-weight: 700;
    display: inline-block;
    padding: 8px 10px;
}
.price-area .txt-box .sub-ttl::before{
    display: none;
}
.price-area .txt-box .price{
    /* color: #F51D1D; */
    font-size: 4.5rem;
    font-size: 3.0rem;
    letter-spacing: 0.05em;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 10px;
}
.price-area .txt-box .price span{
    color: #333;
    font-size: 2.0rem;
    margin: 0 0 0 8px;
}
.price-area .txt-box .price span.small-head{
    margin: 0;
}
.price-area .txt-box .price.type02{
    font-size: 3.0rem;
}
.price-area .txt-box .price.last{
    margin: 15px 0 10px;
}
.price-area .txt-box .price.type02.last{
    margin: 10px 0 10px;
}
.price-area .txt-box .price.type02 span{
    font-size: 1.8rem;
}
/* 利用金表 */
.price-area .price-table{
    width: 100%;
    border-collapse: collapse;
    border: solid 1px rgba(223, 223, 223, 0.7);
    margin: 30px auto 0;
}
.price-area .price-table tbody td{
    width: 50%;
    padding: 40px 20px 27px 20px;
    position: relative;
}
.price-area .price-table tbody td .ver{
    font-size: 1.8rem;
    font-family: var(--font-en);
    letter-spacing: 0.05em;
    font-weight: 900;
    line-height: 1;
    background-color: var(--main-color);
    color: #fff;
    font-weight: 700;
    width: 146px;
    text-align: center;
    padding: 8px 10px;
    position: absolute;
    top: -15px;
    right: 0;
    left: 0;
    margin: 0 auto;
}
.price-area .price-table tbody td:first-child{
    border-right: solid 1px rgba(223, 223, 223, 0.7);
}
@media screen and (max-width: 768px) {
    .price-area{
        flex-wrap: wrap;
        margin: 0;
        padding: 30px 20px 40px;
    }
    .price-area .ttl-s,
	.price-area .ttl-m{
        margin: 0 0 20px;
    }
    .price-area .img-box{
        width: 100%;
        height: 200px;
        order: 0;
    }
    .price-area .txt-box{
        width: 100%;
        padding: 0;
        order: 1;
    }
    .price-area .txt-box .price{
        font-size: 2.8rem;
    }
    .price-area .txt-box .price span{
        font-size:1.8rem;
		margin: 0 0 0 4px;
    }
    .price-area .txt-box .price span.small-head{
        /*display: block;*/
        margin: 0 0 10px;
    }
	.price-area .txt-box .price.type02.last{
		margin: 15px 0 10px;
	}

    /* 利用金表 */
    .price-area .price-table tbody tr{
        display: flex;
        flex-wrap: wrap;
    }
    .price-area .price-table tbody td{
        width: 100%;
        padding: 30px 20px;
    }
    .price-area .price-table tbody td .ver{
        position: relative;
        top: auto;
        margin: 0 0 15px;
    }
    .price-area .price-table tbody td:first-child{
        border-right: none;
        border-bottom: solid 1px rgba(223, 223, 223, 0.7);
    }
}
/* -----------------------------------------------------------
case-area
-------------------------------------------------------------- */
.case-area {
    padding: 160px 0 120px;
    padding: 120px 0 90px;
    background-color: #F3F8FA;
    /* background: url(../img/bg-texture01.png) no-repeat bottom center / 100vw #282A33; */
    position: relative;
    border-radius: 50px;
    background: url(../img/bg-gradation.png) no-repeat center / cover;
}
.case-area::before{
    position: absolute;
    content: "";
    background: url(../img/bg-alice.png) no-repeat center / cover;
    width: 100%;
    aspect-ratio: 1600 / 853;
    top: 0px;
    z-index: -1;
    border-radius: 50px 50px 0 0;
}
/* .case-area::after{
        position: absolute;
    content: "";
    background: url(../img/illust-rabbit.svg) no-repeat center / cover;
    width: 132px;
    height: 259px;
    right: 10%;
    bottom: 5px;
} */
.case-area .ttl-m .jp{
    color: #fff;
}
.case-area .ttl-catch{
    color: #fff;
}
.case-area .case-box{
    background-color: #fff;
    padding: 40px;
    margin: 60px 0 0 ;
    position: relative;
    border-radius: 0 20px 20px 20px;
}
.case-area .case-box .no{
    position: absolute;
    top: -30px;
    left: 0px;
    background-color:#fff ;
    color: var(--main-color);
    font-size: 2.0rem;
    font-weight: 500;
    font-family: var(--font-en);
    border-radius: 3px 3px 0 0;
    width: 120px;
    padding: 10px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    border-radius: 5px 5px 0 0;
}
.case-area .case-box .no span{
    width: 100%;
}
.case-area .case-box .ttl-catch{
    color: var(--txt-navy);
    margin: 0 0 15px;
}
.case-area .case-box .ttl-catch span{
    display: block;
    font-size: 1.8rem;
    line-height: 1;
    color: #333;
}
.case-area .case-box .before-wrap{
    display: flex;
    align-items: center;
    gap: 0px;
    padding: 30px;
    background-color: var(--bg-blue);
    margin: 15px 0 0;
}
.case-area .case-box .person-box{
    text-align: center;
    padding: 0 40px 0 0;
    margin: 0 40px 0 0;
    border-right: dashed 1px #AAB7B7;
}
.case-area .case-box .img{
    width: 100px;
    margin: 0 auto;
}
.case-area .case-box .type,
.case-area .case-box .person{
    display: inline-block;
    margin: 0 10px 0 0;
}
.case-area .case-box .after-box{
    padding: 30px;
    background-color: var(--bg-blue);
    margin: 30px 0 0;
}
.case-area .case-box .after-box .box-ttl{
    background-color: var(--main-color);
    color: #fff;
    font-weight: 700;
    display: inline-block;
    padding: 8px 20px;
    margin: 0 0 15px;
}
.case-area .case-box .after-box .box-catch{
    font-size: 2.0rem;
    line-height: 1.7;
}
.case-area .case-box .after-box .after-list{
    display: flex;
    gap: 30px;
    justify-content: space-between;
    margin: 10px 0 0;
}
.case-area .case-box .after-box .after-list li{
    width: calc((100% - 60px) / 3);
    padding: 20px;
    border: solid 1px #AAB7B7;
}
.case-area .case-box .after-box .after-list li .img{
    max-width: 80px;
    text-align: center;
    margin: 0 auto 15px;
}
.case-area .case-box .after-box .after-list li .img img{
    height: 80px;
    max-width: 80px;
}
.case-area .case-box .use-box{
    padding: 55px 30px 30px;
    background-color: #fff;
    margin: 30px 0 0;
    position: relative;
    display: flex;
    align-items: center;
}
.case-area .case-box .use-box .sub-ttl{
    position: absolute;
    top: 20px;
	font-size: 1.8rem;
}
.case-area .case-box .fs-box .left,
.case-area .case-box .fs-box .right{
    width: calc((100% - 30px) / 2);
}
.case-area .case-box .fs-box .before,
.case-area .case-box .fs-box .after{
    padding: 30px 20px 20px;
    background-color: #ddd;
    position: relative;
}
.case-area .case-box .fs-box .after{
    background-color: var(--bg-blue);
}
.case-area .case-box .fs-box .after::before{
    position: absolute;
    content: "";
    width: 223px;
    height: 200px;
    background: url(../img/illust-cloud01.svg) no-repeat center / cover;
    bottom: 0px;
    right: 30px;
}
.case-area .case-box.case02 .fs-box .after::before{
    position: absolute;
    content: "";
    width: 180px;
    height: 180px;
    background: url(../img/illust-cloud02.svg) no-repeat center / cover;
    bottom: 0px;
    left: 30px;
}
.case-area .case-box .before h4,
.case-area .case-box .after h4{
    background-color: var(--main-color);
    color: #fff;
    font-weight: 700;
    display: inline-block;
    padding: 8px 20px;
    margin: 0 0 15px;
}
.case-area .case-box .logo-box{
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    padding: 0 25px 0 0;
    margin: 0 25px 0 0;
    border-right: dashed 1px #AAB7B7;
    height: -webkit-fill-available;
}
.case-area .case-box.case02 .fs-box .after .logo-box{
    right: 60px;
}
.case-area .case-box .logo-box .ttl{
    font: 600 3.0rem / 1.3 var(--font-en);
    /* color: var(--main-color); */
}
.case-area .case-box .fs-box .use-box{
    margin: 20px 0 0;
}
.case-area .case-box .fs-box .use-box .use-list{
    display: flex;
    gap: 20px;
}
.case-area .case-box .fs-box .use-box .use-list .use-item{
    width: calc((100% - 30px) / 3);
}
.case-area .case-box .fs-box .use-box .use-list .use-item .img{
    /* width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #ddd; */
    text-align: center;
    margin: 0 auto 5px;
}
.case-area .case-box .fs-box .use-box .use-list .use-item .img img{
    height: 80px;
    max-width: 80px;
}
.case-area .case-box .fs-box .use-box .use-list .use-item .txt{
    line-height: 1.6;
    font-size: 1.5rem;
    text-align: center;
}

.case-area .case-box .figure{
    /* text-align: center; */
    margin: 15px auto 15px;
}
.case-area .case-box .mes{
    font-size: 2.0rem;
    margin: 15px 0 0;
}
@media screen and (max-width: 768px) {
    .case-area{
        padding: 60px 20px 60px;
        border-radius: 30px;
    }
    .case-area .case-box{
        padding: 30px 20px 40px;
    }
	.case-area .case-box .no{
		top: -20px;
		font-size: 1.4rem;
		width: 90px;
		padding: 10px 0 0;
	}
	
    .case-area .case-box .before-wrap{
        padding: 20px 15px;
        flex-wrap: wrap;
    }
    .case-area .ttl-m .jp.small-txt{
        font-size: 2.4rem;
    }
    .case-area .case-box .ttl-catch{
        font-size: 2.0rem;
    }
    .case-area .case-box .ttl-catch span{
        font-size: 1.6rem;
    }
    .case-area .case-box .person-box{
        width: 100%;
        padding: 0 0 15px;
        margin: 0 0 15px;
        border-bottom: dashed 1px #AAB7B7;
        border-right: none;
    }
    .case-area .case-box .person-box .img{
        width: 70px;
    }
    .case-area .case-box .before h4,
    .case-area .case-box .after h4{
        font-size: 1.5rem;
        padding: 5px 10px;
    }
    .case-area .case-box .after-box{
        padding: 20px 15px;
        margin: 15px 0 0;
    }
    .case-area .case-box .after-box .after-list{
        margin: 0;
        gap: 5px;
        flex-wrap: wrap;
        gap: 10px;
    }
    .case-area .case-box .after-box .after-list li{
        width: 100%;
        padding: 15px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .case-area .case-box .after-box .after-list li .img{
        margin: 0;
        height: 60px;
        width: 60px;
    }
    .case-area .case-box .after-box .after-list li .img img{
        width: 60px;
        height: 60px;
        object-position: center;
    }
    .case-area .case-box .after-box .after-list li .txt{
        width: calc(100% - 70px);
        font-size: 1.5rem;
        line-height: 1.5;
    }
    .case-area .case-box .use-box{
        padding: 20px 15px;
        margin: 15px 0 0;
        flex-wrap: wrap;
    }
    .case-area .case-box .use-box .sub-ttl{
        position: relative;
        top: auto;
		font-size: 1.6rem;
    }
    .case-area .case-box .use-box .disc-list li{
        font-size: 1.5rem;
    }
    .case-area .case-box .logo-box{
        padding: 0 0 15px;
        margin: 0 0 15px;
        border-bottom: dashed 1px #AAB7B7;
        border-right: none;
        height: auto;
        width: 100%;
    }
    .case-area .case-box .logo-box .ttl{
        font-size: 2.8rem;
    }
}
/* -----------------------------------------------------------
導入ステップ例
-------------------------------------------------------------- */
.flow-area{
    padding: 100px 0;
}
.flow-list{
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin: 50px 0 0;
}
.flow-list .flow-item{
    width: calc((100% - 80px) / 3);
    border: solid 1px rgba(223,223,223,1);
    padding: 30px 20px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.5);
}
.flow-list .flow-item:not(:last-of-type)::before{
    content: "";
    background: url(../img/icon-disc.svg) no-repeat center / contain;
	display: inline-block;
    position: absolute;
    width: 8px;
    height: 8px;
    top: 100px;
    right: -5px;
}
.flow-list .flow-item:not(:last-of-type)::after{
    position: absolute;
    content: "";
    background: url(../img/arrow-blue.svg) no-repeat center / cover;
    width: 22px;
    height: 5px;
    right: -22px;
    top: 144px;
}
.flow-list .flow-item .deco{
    position: absolute;
    width: 2px;
    height: 40px;
    top: 109px;
    right: -1px;
    background-color: #fff;
}
.flow-list .flow-item .img{
    text-align: center;
    margin: 0 0 20px;
    background: none;
}
.flow-list .flow-item img{
    width: 90px;
    height: 90px;
    background-size: cover;
    object-fit: contain !important;
    margin: 0 auto;
}
.flow-list .flow-item .flow-ttl{
    font-size: 2.0rem;
    line-height: 1.5;
    margin: 0 0 10px;
    text-align: center;
    color: var(--txt-navy);
	font-weight: 600;
	font-feature-settings: "palt";
}
.flow-list .flow-item .btn-more{
    margin: 20px auto 0;
}
.flow-list .flow-item .btn-more a{
    margin: 0 auto;
    width: 220px;
}
.flow-list .flow-item .btn-more a::before{
    right: 10px;
    width: 15px;
    background-size: contain;
}
.flow-area .note.last{
    margin: 15px 0 0;
}
@media screen and (max-width: 768px) {
    .flow-area{
        padding: 40px 20px;
    }
    .flow-list{
        margin: 30px 0 0;
        gap: 20px;
    }
    .flow-list .flow-item{
        width: 100%;
        padding: 20px 15px;
    }
    .flow-list .flow-item .img{
        margin: 0 0 10px;
    }
    .flow-list .flow-item img{
        width: 60px;
        height: 60px;
    }
    .flow-list .flow-item .flow-ttl{
        font-size: 2rem;
        margin: 0 0 5px;
		font-weight: 600;
    }
    .flow-list .flow-item:not(:last-of-type)::before{
        /* top: auto;
        bottom: -4px;
        right: 138px; */
        display: none;
    }
    .flow-list .flow-item .deco{
        width: 1px;
        height: 20px;
        top: auto;
        bottom: -21px;
        right: 0;
        left: 0;
        margin: 0 auto;
        background-color: rgba(223,223,223,1);
    }
    .flow-list .flow-item:not(:last-of-type)::after{
        /* transform: rotate(90deg);
        background-size: contain;
        top: auto;
        bottom: 0;
        right: auto;
        left: calc(50% - 30px); */
        display: none;
    }
}
/* -----------------------------------------------------------
よくある質問
-------------------------------------------------------------- */
.faq-area{
    padding: 100px 0;
    background-color: var(--bg-blue);
    border-radius: 50px 50px 0 0;
}
.faq-list{
    margin: 50px 0 0;
}
.faq-list .faq-item{
    border-bottom: dashed 1px #AAB7B7;
    padding: 0 0 30px;
}
.faq-list .faq-item:not(:last-of-type){
    margin: 0 0 30px;
}
.faq-list .faq-item .q{
    margin: 0 0 20px;
    font-size: 2.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-list .faq-item{
    width: 100%;
}
.faq-list .faq-item .q span.icon,
.faq-list .faq-item .a span.icon{
    display: inline-block;
    width: 40px !important;
    height: 40px !important;
    color: var(--main-color);
    text-align: center;
    background-color: #fff;
    border: solid 1px var(--main-color);
    justify-content: center;
    align-items: center;
    font-family: var(--font-en);
    line-height: 40px;
}
.faq-list .faq-item .a span.icon{
    background-color:var(--main-color);
    color: #fff;
    border: none;
}
.faq-list .faq-item span.txt{
    font-size: 2.2rem;
    width: calc(100% - 50px);
}
.faq-list .faq-item .a-box{
    position: relative;
}
.faq-list .faq-item .a{
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.faq-list .faq-item .a .icon{
	position: absolute;
	top: 0px;
}
.faq-list .faq-item .a-box .ans{
    padding: 5px 0 0 50px;
	padding: 0 0 0 50px;
}
.faq-list .faq-item .a-box .ans a.line{
	display: inline-block;
	color: var(--main-color);
	border-bottom: solid 1px var(--main-color);
}

@media screen and (max-width: 768px) {
	.faq-area{
		padding: 60px 20px;
        margin: 0 0 70px;
        border-radius: 30px 30px 0 0;
	}
    .faq-area .ttl-m{
        margin: 0 0 30px;
    }
    .faq-list .faq-item{
        padding: 0 0 15px;
    }
    .faq-list .faq-item:not(:last-of-type){
        margin: 0 0 15px;
    }
	.faq-list{
		margin: 0;
	}
	.faq-list .faq-item .q span.icon,
    .faq-list .faq-item .a span.icon{
        font-size: 2.0rem;
    }
    .faq-list .faq-item span.txt{
        font-size: 1.8rem;
        line-height: 1.5;
    }
    .faq-list .faq-item .q span.txt{
        width: calc(100% - 50px);
    }

    .faq-list .faq-item .q,
    .faq-list .faq-item .a{
        font-size: 2.0rem;
        line-height: 1.5;
    }
    .faq-list .faq-item .a-box .ans{
        padding: 15px 0 0 50px;
		padding: 0px 0 0 50px;
    }
}


/* -----------------------------------------------------------
alice-bnr-area
-------------------------------------------------------------- */
.alice-bnr-area{
    margin: 100px auto 0;
	display: flex;
	justify-content: space-between;
	border: 1px var(--main) solid;
}
.alice-bnr-area .img{
	width: 540px;
}
.alice-bnr-area .img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.alice-bnr-area .txt-area{
	width: calc(100% - 540px);
	padding: 60px 60px 60px 70px;
}
.alice-bnr-area .txt-area .ttl{
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--main-color);
    color: #00BBE0;
    margin: 0 0 20px;
}
.alice-bnr-area .txt-area .ttl-catch{
    margin: 0 0 15px;
	line-height: 1.5;
}
.alice-bnr-area .txt-area .txt{
	margin: 0 0 30px;
}

@media screen and (max-width: 768px) {
    .alice-bnr-area{
        margin: 40px 20px 0!important;
		display: block;
		width: auto;
    }
	.alice-bnr-area .img{
		width: 100%;
	}
	.alice-bnr-area .img img{
		height: 200px;
	}
	.alice-bnr-area .txt-area{
		width: 100%;
		padding: 30px 20px;
	}
	.alice-bnr-area .txt-area .ttl{
        margin: 0 0 10px;
        text-align: center;
    }
    .alice-bnr-area .txt-area .ttl-catch{
        margin: 20px 0 10px;
    }
	.alice-bnr-area .txt-area .txt{
		margin: 0 0 20px;
	}
}


/* -----------------------------------------------------------
alice-bnr-area
-------------------------------------------------------------- */
/*.alice-bnr-area{
    position: relative;
}
.alice-bnr-area a{
    background: url(../img/bg-gradation.png) no-repeat center / cover,
                url(../img/bg-alice.png) no-repeat center / cover;
    display: flex;
    align-items: center;
    flex-flow: row-reverse;
    justify-content: space-between;
    padding: 60px;
    position: relative;
    top: 0;
    border-radius: 15px;
    transition: .5s;
}
.alice-bnr-area a::before{
    position: absolute;
    content: "";
    background: url(../img/arrow-blue.svg) no-repeat center / cover;
    width: 30px;
    height: 7px;
    right: 20px;
    bottom: 20px;
    z-index: 1;
    transition: .5s;
}
.alice-bnr-area a:hover{
    top: -5px;
    transition: .5s;
}
.alice-bnr-area a:hover::before{
    right: 15px;
    transition: .5s;
}
.alice-bnr-area .txt-box .ttl{
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--main-color);
    color: #00BBE0;
    margin: 0 0 20px;
}
.alice-bnr-area .txt-box .ttl-catch{
    margin: 30px 0 15px;
    color: #333;
    -webkit-text-stroke: 6px #fff;
    text-stroke: 2px 000;
    paint-order: stroke;
}
.alice-bnr-area .txt-box .txt{
    color: #333;
    font-weight: 600;
}
.alice-bnr-area .txt-box .logo img{
    height: 100px;
}
.alice-bnr-area  .movie img{
    border-radius: 20px;
    height: 359px;
}
@media screen and (max-width: 768px) {
    .alice-bnr-area{
        width: calc(100% - 40px);
    }
    .alice-bnr-area a{
        flex-wrap: wrap;
        gap: 20px;
        padding: 30px 20px;
    }
    .alice-bnr-area a .movie{
        width: 100%;
        height: 210px;
    }
    .alice-bnr-area a .movie img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .alice-bnr-area .txt-box .ttl{
        margin: 0 0 10px;
        text-align: center;
    }
    .alice-bnr-area .txt-box .logo{
        text-align: center;
    }
    .alice-bnr-area .txt-box .logo img{
        height: 74px;
    }
    .alice-bnr-area .txt-box .ttl-catch{
        margin: 20px 0 10px;
        text-align: center;
    }
}*/