@charset "utf-8";

/* -----------------------------------------------------------
    TOP
-------------------------------------------------------------- */
#main{
	margin: 0;
}

/* -----------------------------------------------------------
    h1
-------------------------------------------------------------- */
.h1-area {
	position: absolute;
	top: 790px;
	left: 150px;
	background: none;
    z-index: 1;
}
.h1-area h1{
	width: auto;
	font-size: 1.2rem;
    margin: 0 0 0 auto;
	text-align: left;
}

@media screen and (max-width: 768px){

	/* h1 */
	.h1-area{
        position: absolute;
        left: -29%;
        text-align: left;
        background: none;
        /* z-index: -1; */
        padding: 0 20px 0 20px;
        margin: 0;
        width: 95%;
	}
	.h1-area h1{
		width: auto;
		font-size: 1rem;
		margin: 0 auto 0;
		padding: 0;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: left;
    	color: #FFF;
	}

}



/*  --------------------------------------------------------------
	mv-area
-------------------------------------------------------------- */
.mv-area {
    position: relative;
	overflow: hidden;
	margin: 0px auto 0px;
	width: 100%;
	/*height: 950px;*/
	height: 100%;
	min-height: 800px;
}

.mv-area .mv-img{
	height: 800px;
	transition: 0.3s;
}
.mv-area .mv-img img{
	width: 950px;
	height: 100%;
	object-fit: cover;
	border-radius: 0 0 0 100px;
	transition: 0.5s;
}
@media screen and (max-width: 1500px){
	.mv-area .mv-img img{
		width: 700px;
	}
}

.mv-area .mv-area-inner{
    display: flex;
	flex-direction:row-reverse;
}

.mv-area .txt-area{
	position: absolute;
    z-index: 1;
    top: 150px;
    left: 8%;
}

.mv-area .sub-catch{
	font-weight: bold;
	font-size: 2.0rem;
	position: relative;
	line-height: 2;
	letter-spacing: .05em;
	margin: 0 0 10px;
	color: var(--black02);
}

.mv-area .catch{
	font-weight: bold;
	font-size: 5rem;
	position: relative;
	line-height: 1.4;
	letter-spacing: .05em;
	color: var(--black02);
}

.mv-area .mv-txt {
    font-size: 1.6rem;
	line-height: 1.8;
    margin: 30px 0 0;
	letter-spacing: .1rem;
}

.mv-area .top-bn{
    margin: 30px 0 0;
	text-align: left;
}

.mv-area .top-bn a{
	display: inline-block;
}

@media screen and (max-width: 768px){

	.mv-area {
		height: auto;
		width: 100%;
		min-height: inherit;
		position: relative;
		overflow: inherit;
	}
	
	.mv-area .mv-img{
		width: 100%;
		height: 429px;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
	}
	.mv-area .mv-img img{
		width: 100%;
		border-radius: 0 0 0 60px;
	}
	
	.mv-area .mv-area-inner {
    	display: block;
	}

	.mv-area .txt-area {
		display: block;
        transform: none;
		position: static;
		top: auto;
		bottom: auto;
		left: auto;
        width: 100%;
        text-align: left;
		color: #fff;
		padding: 200px 0 0;
	}
	
	.mv-area .sub-catch{
        font-size: 1.3rem;
		padding: 0 0 0 20px;
		margin: 0 0 5px;
		color: #fff;
	}
	
	.mv-area .catch{
		font-size: 2.6rem;
		padding: 0 0 0 20px;
		text-align: left;
		position: relative;
		line-height: 1.4;
		color: #fff;
		text-shadow: 2px 3px 5px rgba(0, 0, 0, 0.1);
	}
	
	.mv-area .top-bn{
		padding: 0 10px;
		margin: 30px 0 0;
		text-align: center;
	}
	
}

/* --------------------------------------------------------------
	about-area
-------------------------------------------------------------- */

.about-area {  
	position: relative;
	margin: 100px 0 300px;
	padding: 100px 0 300px;
	background: url("../img/bg-about.png") no-repeat top / cover;
}

.about-area .sec-ttl .sec-catch{
	font-size: 2.6rem;
}

.about-area .intoro-area{
	display: flex;
	align-items: center;
	gap: 60px;
	position: relative;
	z-index: 1;
}

.about-area .about-list{
	display: flex;
    justify-content: space-between;
    gap: 20px;
	padding: 70px 0 30px;
}

.about-area .about-list .listItem{
	width: calc((100% - 40px) / 3);
    text-align: center;
    line-height: 1.6;
    margin: 0px auto;
    padding: 0 0 0 0px;
    position: relative;    
	border-left: 2px dashed #BEBEBE;
}

.about-area .about-list .listItem:first-child{  
	border-left: none;
}

.about-area .about-list .txt-box{  
	display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
	padding: 0 0 10px;
}

.about-area .about-list .txt-box .copy{  
	font-size: 4.2rem;
	color: var(--green);
	font-weight: bold;
	text-align: center;
}
.about-area .about-list .txt-box .copy span{  
	font-size: 3.2rem;
}

.about-area .about-list .txt-box p{  
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	color: var(--black02);
}


.about-area .about-list .listItem:nth-child(3n) .img{  
	margin: -35px 0 0;
}


.about-area .recommendation {
   	position: absolute;
    bottom: -250px;
    margin: 0 auto;
    left: 0;
    right: 0;
	z-index: 1;
}

.about-area .recommendation .sec-ttl {
    position: relative;
    top: 75px;
    left: 40px;
}

.about-area .recommendation ul{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 50px 40px;
    background: var(--green01);
    border-radius: 5px;
}

.about-area .recommendation ul .listItem{
	width: calc((100% - 60px) / 4);
    text-align: center;
    line-height: 1.6;
    margin: 0px auto;
    padding: 30px 20px;
    position: relative;
	background: #fff;
	border-radius: 5px;
	font-weight: 500;
}

.about-area .recommendation ul .listItem::before{
	content: "";
    display: inline-block;
    position: absolute;
    background: url(../img/ill-01.png) center / cover, no-repeat;
    aspect-ratio: 18 / 13;
    top: -7px;
    left: 10px;
    width: 18px;
}

.about-area .recommendation ul .listItem::after{
	content: "";
    display: inline-block;
    position: absolute;
    background: url(../img/ill-01.png) center / cover, no-repeat;
	transform: rotate(180deg);
    aspect-ratio: 18 / 13;
    bottom: -7px;
    right: 10px;
    width: 18px;
}

.about-area .recommendation ul .listItem .txt-box{  
	padding: 20px 0 0;
}

.about-area .recommendation .btn-more{  
	margin: 50px auto 0;
	display: block;
}



@media screen and (max-width: 768px){
	.about-area {  
		position: relative;
		margin: 30px 0 0px;
		padding: 0px 0 30px;
	}

	.about-area img{  
		padding: 0 10px;
	}

	.about-area .intoro-area{
		display: block;
	}

	.about-area .sec-ttl .sec-catch{
		padding: 20px 20px 0;
		font-size: 1.8rem;
		text-align: left;
	}
	
	.about-area .intoro-area .txt-block {
		text-align: center;
		margin: -50px 0 0;
	}

	.about-area .about-list{
		display: block;
		padding: 0px 20px 0px;
	}

	.about-area .about-list .listItem{
		width: 100%;        
		display: flex;   
		border-left: none;        
		align-items: center;
		border-bottom: 2px dashed #BEBEBE;        
		padding: 20px 0;
		justify-content: space-between;
	}

	.about-area .about-list .listItem:last-child{  
		border-left: none;
	}

	.about-area .about-list .txt-box{  
		display: block;
		padding: 0 0 10px;
	}

	.about-area .about-list .txt-box .copy{  
		font-size: 3.6rem;
		text-align: left;
	}

	.about-area .about-list img{  
		padding: 0;
		width: 195px;
	}

	.about-area .about-list .txt-box p{  
		font-size: 1.5rem;
		text-align: left;
	}
	
	
	.about-area .about-list .txt-box .copy span{  
		font-size: 3.0rem;
	}

	.about-area .about-list .txt-box p{  
		font-size: 1.8rem;
		font-weight: 600;
		line-height: 1.2;
		text-align: left;
	}


	.about-area .about-list .listItem:nth-child(3n) .img{  
		margin: 0px 0 0;
	}


	.about-area .recommendation {        
		position: relative;
        bottom: 20px;
        padding: 0 20px;
	}

	.about-area .recommendation .sec-ttl {
		position: relative;
		top: 43px;
		left: 0px;
		text-align: center;
		margin: 0 0 0px;
	}

	.about-area .recommendation ul{
		display: block;
		padding: 50px 20px 30px;
		background: var(--green01);
		border-radius: 5px;
	}

	.about-area .recommendation ul .listItem{
		display: flex;
		justify-content: start;
		align-items: center;
		width: 100%;
		text-align: left;
		line-height: 1.6;
		margin: 0px auto 10px;
		padding: 20px 10px;
	}

	.about-area .recommendation ul .listItem::before,
	.about-area .recommendation ul .listItem::after{
		display: none;
	}

	.about-area .recommendation ul .listItem .txt-box{  
		padding: 0px 0 0;
		width: 195px;
	}

	.about-area .recommendation ul .listItem .txt-box p{  
		font-size: 1.5rem;
	}

	.about-area .recommendation ul .listItem .img{
		width: 80px;
	}
	.about-area .recommendation .btn-more{  
		margin: 30px auto 0;
		display: block;
	}
}

/* -----------------------------
	splide
-------------------------------- */
.splide_service {
	padding: 100px 0;
}

.splide_service .splide__slide img {
	width: 100%;
	height: 500px;
	object-fit: cover;
	border-radius: 10px;
}

.splide_service .splide__slide:nth-child(even){
	margin: 60px 0 0;
}

@media screen and (max-width: 768px){
	.splide_service {
		padding: 40px 0;
	}

	.splide_service .splide__slide img {
		width: 220px;
		height: 220px;
	}
	
	.splide_service .splide__slide:nth-child(even){
		margin: 30px 0 0;
	}
	
}


/* --------------------------------------------------------------
	service-area
-------------------------------------------------------------- */

.service-area {  
	padding: 0px 0 100px;
}
.service-area .sec-ttl .sec-catch{  
	padding: 0px 0 0px;
}
.service-area .sec-ttl .sub-catch{  
	padding: 20px 0 0px;
	color: var(--green);
}
.service-area .sec-ttl .price{  
	font-size: 3.5rem;
    position: relative;
    line-height: 1;
    text-align: center;
    font-family: var(--poppins);
    font-weight: bold;
	padding: 0 5px;
	color: var(--green);
}

.service-area .intoro-area{
	display: flex;
	align-items: center;
	gap: 30px;
	position: relative;
	z-index: 1;
}

.service-area .intoro-area::before{
	content: "";
    display: inline-block;
    position: absolute;
    background: url(../img/icon-service.png) center / cover, no-repeat;
    aspect-ratio: 84 / 86;
    left: 390px;
    top: 20px;
    width: 84px;
}

.service-area .title{
	position: relative;
	display: block;
	text-align: center;
	font-size: 2.8rem;
	letter-spacing: .1em;
    font-weight: 600;
	margin: 0 auto 30px;
}
.service-area .title span{
	padding: 0 55px;
	background: #fff;
}
.service-area .title:before,.service-area .title:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 100%;
	height: 1px;
	background-color: black;
	z-index: -1;
}

.service-area .title:before {
  left:0;
}

.service-area .title:after {
  right: 0;
}

.service-area .price-box{
	padding: 0 0 40px;
}


/*基本サービス*/
.service-area .service-box .service-list{
	display: flex;
    justify-content: space-between;
    gap: 20px;
}

.service-area .service-box .service-list .listItem{
	width: calc((100% - 60px) / 4);
    line-height: 1.6;
    position: relative;
}
.service-area .service-box .service-list .listItem .service-name{
	color: var(--green);   
	font-size: 2.4rem;
    font-weight: bold;
	padding: 20px 0 10px;
    text-align: center;
}

.service-area .service-box .option-service {
    margin: 60px 0 0;
    padding: 50px 50px 50px;
    background: var(--beigegreen);
    border-radius: 15px;
    position: relative;
}

.service-area .service-box .option-service::before {
    content: '';
    position: absolute;
    width: 58px;
    height: 58px;
    top: -29px;
    background: url(../img/plus.png) no-repeat top center / contain;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.service-area .service-box .option-service ul {
    display: flex;
    justify-content: space-between;
    margin: 35px 0 0;
}

.service-area .service-box .option-service ul li {
    position: relative;
    padding: 0 0 0;
    width: calc((100% / 5) - 50px);
}

.service-area .service-box .option-service ul li .option-title{
	border: solid 2px var(--green);
    height: 100%;
    text-align: center;
    padding: 80px 0;
    left: 0;
    right: 0;
    border-radius: 5px;
    font-weight: bold;
    font-size: 2.0rem;
	color: var(--green);
} 

.service-area .service-box .option-service ul li .service img{
	width: 100%;
} 

.service-area .service-box .option-service ul li .service-title{
	font-weight: bold;
    text-align: center;
	font-size: 1.8rem;
	padding: 10px 0 0;
	line-height: 1.5;
}

.service-area .btn-more{  
	margin: 70px auto 0;
	display: block; 
}

@media screen and (max-width: 768px){
	
	.service-area {  
		padding: 0px 0 50px;
	}

	.service-area .intoro-area{
		display: block;
		padding: 0 20px;
	}

	.service-area .intoro-area::before{
		left: 70%;
        top: 0;
        width: 70px;
	}

	.service-area .intoro-area::after{
		content: "";
        display: inline-block;
        position: absolute;
        background: url(../img/top-service.png) center / cover, no-repeat;
        aspect-ratio: 580 / 574;
        left: 0;
        top: -130px;
        width: 140px;
	}

	.service-area .sec-ttl .price{  
		font-size: 2.6rem;
	}
	
	.service-area .price-box{
		padding: 0 20px;
	}

	.service-area .title{
		font-size: 2.4rem;
		margin: 0 auto 20px;
	}
	.service-area .title span{
		padding: 0 20px;
	}
	
	.service-area .service-box{  
    	padding: 30px 20px;
	}
	
	/*基本サービス*/
	.service-area .service-box .service-list{
		display: flex;        
		flex-wrap: wrap;
		gap : 0;
	}

	.service-area .service-box .service-list .listItem{
		width: calc((100% - 10px) / 2);
	}

	.service-area .service-box .service-list .listItem .img img{
		height: 110px;
		object-fit: cover;
		object-position: top;
	}
	.service-area .service-box .service-list .listItem .service-name{
		font-size: 1.8rem;
		padding: 5px 0;
	}

	.service-area .service-box .option-service {
		margin: 30px 0 0;
		padding: 30px 20px 10px;
		border-radius: 10px;
	}

	.service-area .service-box .option-service::before {
		width: 38px;
		height: 38px;
		top: -18px;
	}

	.service-area .service-box .option-service-txt {
        font-size: 2.0rem;
        margin: 0 auto 20px;    
		font-weight: 600;
		text-align: center;
		letter-spacing: .1em;
	}

	.service-area .service-box .option-service ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 20px 0 0;
	}

	.service-area .service-box .option-service ul li {
		width: calc((100% / 2) - 10px);
	}

	.service-area .service-box .option-service ul li .service {
		width: 110px;
		margin: 0 auto;
		text-align: center;
	} 

	.service-area .service-box .option-service ul li .service img{
		width: 100%;
	} 

	.service-area .service-box .option-service ul li .service-title{
		font-size: 1.8rem;
		padding: 10px 0 20px;
		line-height: 1.4;
	}
	.price-block-area .s-txt{
		padding: 10px 0 0;
	}
	.service-area .btn-more{  
		margin: 10px auto 0;
		display: block; 
	}

}

/* -----------------------------
	その他のサービス
-------------------------------- */
.other-service-area{
	padding: 100px 0;
	background: var(--beige01);
}
.other-service-area .flex-box{
	display: flex;
	gap: 100px;
	align-items: flex-end;
}
.other-service-area .sec-ttl .jp{
	font-size: 3.2rem;
}
.other-service-area .sec-ttl .sec-catch{
	font-size: 2.8rem;
}

.other-service-area .other-service-list {
    display: flex;
    justify-content: space-between;
    gap: 20px;
	margin: 50px 0 0;
}

.other-service-area .other-service-list li{
    width: 279px;
    line-height: 1.6;
    position: relative;
	font-size: 1.5rem;
	background: #fff;
	border-radius: 5px;
	box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

.other-service-area .other-service-list li:hover {
	box-shadow: none;
}


.other-service-area .other-service-list li::before{
    content: "";
    background: url(../img/icon-arrow-blue.svg) no-repeat top center / contain;
    display: block;
    position: absolute;
    aspect-ratio: 24 / 24;
    width: 24px;
    right: 20px;
    bottom: 20px;
    transition: all 0.3s ease-in-out;
}

.other-service-area .other-service-list li:hover::before {
    right: 10px;
}

.other-service-area .other-service-list li.call-forwarding::before{
    background: url(../img/icon-arrow-pink.svg) no-repeat top center / contain;
}

.other-service-area .other-service-list li.internet-fax::before{
    background: url("../img/icon-arrow-yellow.svg") no-repeat top center / contain;
}

.other-service-area .other-service-list li.rental-office::before{
    background: url("../img/icon-arrow-purple.svg") no-repeat top center / contain;
}

.other-service-area .other-service-list li .txt-box{
	padding: 30px 20px;
}

.other-service-area .other-service-list li .txt-box .service-name{
	font-size: 2.0rem;
	font-weight: 600;
}

@media screen and (max-width: 768px){
	
	.other-service-area{
		padding: 50px 20px 40px;
		background: var(--beige01);
	}
	.other-service-area .flex-box{
		display: block;
	}
	.other-service-area .sec-ttl .jp{
		font-size: 2.6rem;
	}
	.other-service-area .sec-ttl .sec-catch{
		font-size: 1.8rem;
	}

	.other-service-area .other-service-list {
		display: block;
		margin: 30px 0 0;
	}

	.other-service-area .other-service-list li{
		width: 100%;
		border-radius: 5px;
		box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.1);
		margin: 0 0 15px;
		padding: 0px;
	}

	.other-service-area .other-service-list li::before{    
		right: -9px;
    	bottom: 43px;
	}
	
	.other-service-area .other-service-list li a{
		display: flex;
		align-items: center;
		padding: 10px 10px;
	}
	.other-service-area .other-service-list li .img{
		width: 90px;
	}
	.other-service-area .other-service-list li .txt-box{
		padding: 0px 0 0 20px;        
		width: 220px;
	}

	.other-service-area .other-service-list li .txt-box .service-name{
		font-size: 1.8rem;
		font-weight: 600;
	}

	.other-service-area .other-service-list li .txt-box p{
		font-size: 1.5rem;
	}
}


/* -----------------------------
	お客様の声
-------------------------------- */
.voice-area{
	margin: 100px auto 0;
	padding: 100px 0;
	max-width: 1400px;
	border-radius: 20px;
	background: url("../img/bg-voice.png") no-repeat top / cover;
}

.voice-area .inner{
	display: flex;
	gap: 45px;
}

.voice-area .sec-ttl .img{
	padding: 20px 0 0;
}

.voice-area .sec-ttl .sec-catch{
	color: #fff;
	font-size: 2.2rem;
}

.voice-area .voice-list {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 50px 0 0;
}

.voice-area .voice-list li{
    width: 260px;
    text-align: center;
    line-height: 1.6;
    margin: 0px auto;
    padding: 30px 20px;
    position: relative;
    background: #fff;
    border-radius: 5px;
}

.voice-area .voice-list li::before{
    content: "";
    display: inline-block;
    position: absolute;
    background: url(../img/voice-ill-01.png) center / cover, no-repeat;
    aspect-ratio: 70 / 70;
    top: -45px;
    right: 10px;
    width: 70px;
}

.voice-area .voice-list li .txt-box::before{
    content: "";
    display: inline-block;
    position: absolute;
    background: url(../img/voice-ill-01.png) center / cover, no-repeat;
    aspect-ratio: 70 / 70;
    top: -65px;
    right: -5px;
    width: 70px;
}
.voice-area .voice-list li:nth-child(2n) .txt-box::before{
    background: url(../img/voice-ill-02.png) center / cover, no-repeat;
}

.voice-area .voice-list li:nth-child(3n) .txt-box::before{
    background: url(../img/voice-ill-03.png) center / cover, no-repeat;
}

.voice-area .voice-list li::before {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(../img/ill-01.png) center / cover, no-repeat;
    aspect-ratio: 18 / 13;
    top: 10px;
    left: 10px;
    width: 15px;
}

.voice-area .voice-list li::after {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(../img/ill-01.png) center / cover, no-repeat;
    transform: rotate(180deg);
    aspect-ratio: 18 / 13;
    bottom: 10px;
    right: 10px;
    width: 15px;
}

.voice-area .txt-box{
	text-align: left;
	position: relative;
}

.voice-area .txt-box .voice-title{
	font-size: 2.0rem;
    font-weight: 600;
	padding: 0 0 10px;
}

.voice-area .btn-more.sp-display{
	display: none;
}

@media screen and (max-width: 768px){
	.voice-area{
		margin: 0px auto 0;
		padding: 40px 20px 50px;
		width: 100%;
		border-radius: 0px;
		background: url("../img/bg-voice-sp.png") no-repeat top / cover;
	}

	.voice-area .inner{
		display: block;
	}

	.voice-area .sec-ttl .img{
		width: 200px;
		padding: 20px 0 0;
		text-align: center;
		margin: 0 auto;
	}

	.voice-area .sec-ttl {
		text-align: center;
	}

	.voice-area .voice-list {
		display: block;
		margin: 50px 0 0;
	}

	.voice-area .voice-list li{
		width: 100%;
		margin: 0 0 40px;
		text-align: center;
		line-height: 1.6;
		padding: 30px 20px;
		position: relative;
		background: #fff;
		border-radius: 5px;
	}

	.voice-area .voice-list li .txt-box::before{
		width: 60px;
	}

	.voice-area .txt-box p{
		text-align: left;
		position: relative;
		display:-webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		
	}

	.voice-area .txt-box .voice-title{
		font-size: 1.8rem;
		font-weight: 600;
		padding: 0 0 10px;
	}

	.voice-area .btn-more.pc-display{
		display: none;
	}

	.voice-area .btn-more.sp-display{
		display: block;
		margin: 0 auto;
	}

}
/* -----------------------------
	ご利用案内
-------------------------------- */

#top .flow-area {
	padding: 100px 0;
    position: relative;
}

#top .flow-area .inner{
    /*width: 1400px;*/
	margin: 0 auto;
}

#top .flow-area .flex-box {
    display: flex;
    gap: 100px;
    align-items: flex-end;
}

#top .flow-area .sec-ttl .jp {
    font-size: 3.2rem;
}

#top .flow-area .sec-ttl .sec-catch {
    font-size: 2.8rem;
}

#top .flow-area .flow-box{
	position: relative;
}

#top .flow-area .flow-list {
    display: flex;
    justify-content: space-between;
    margin: 60px 0 60px;
	gap: 30px;
}

#top .flow-area .flow-list li {
    width: calc((100% - 150px) / 6);
    background: #F9F9F7;
    display: block;
    position: relative;
    border-radius: 10px;
	min-height: 290px;
}

#top .flow-area .flow-list li .step-num {
    width: 70px;
    height: 70px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    color: var(--green);
    font-weight: bold;
    transform: translateY(5%);
    text-align: center;
}

#top .flow-area .flow-list li .step-num .step {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1;
    width: 100%;
}

#top .flow-area .flow-list li .step-num .num {
    display: inline-block;
    font-size: 2.4rem;
    line-height: 1.2;
	font-family: var(--poppins);
    width: 100%;
}

#top .flow-area .flow-list li .img-box {
    width: 120px;
    height: 120px;
	text-align: center;
	margin: 0 auto;
}

#top .flow-area .flow-list li .img-box img {
    object-fit: cover;
    height: 100%;
}

#top .flow-area .flow-list li .flow-name {
    text-align: center;
    padding: 20px 10px 0;
    font-size: 1.7rem;
    line-height: 1.5;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    display: flex;
}


#top .flow-area .flow-list li .basic-txt {
    text-align: left;
    padding: 10px 15px 20px;
    font-size: 1.4rem;
	display: none!important;
}


#top .flow-area .flow-list li:not(:last-child)::after {
    display: inline-block;
    position: absolute;
    content: "\f054";
	font-family: 'FontAwesome';
    font-style: normal;    
	font-weight: 400;
    font-size: 1.6rem;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--green);
}

#top .flow-area .btn-more {
    margin: 0px auto 0;
    display: block;
}

@media screen and (max-width: 768px){
	
	#top .flow-area {
		padding: 50px 0 50px;
		/*margin: 50px 0 0;*/
	}
	
	#top .flow-area .sec-ttl {
        text-align: center;
    }
	
	#top .flow-area .sec-ttl .jp {
        font-size: 2.6rem;
    }
	
	#top .flow-area .sec-ttl .sec-catch {
        font-size: 1.8rem;
    }
	
	#top .flow-area .inner {
		width: 100%;
	}

	#top .flow-area .flow-box{
		padding: 0px 0px;
	}
	
	#top .flow-area .flex-box{
		display: block;
	}
	
	#top .flow-area .flow-list {
		flex-wrap: wrap;
   		margin: 0 0 30px;
		display: flex;
    	justify-content: space-between;
    	gap: 30px;
	}

	#top .flow-area .flow-list li {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 10px 0 10px 20px;
		margin: 0;
		border-radius: 5px;
		min-height: inherit;
	}

	#top .flow-area .flow-list li .step-num {
		position: absolute;
		left: -30px;
		top: -30px;
	}

	#top .flow-area .flow-list li .step-num .step {
		display: inline-block;
		font-size: 1.1rem;
	}

	#top .flow-area .flow-list li .step-num .num {
		font-size: 2.2rem;
	}

	#top .flow-area .flow-list li .img-box {
		width: 80px;
		height: 80px;
		text-align: center;
		margin: 0;
	}

	#top .flow-area .flow-list li .img-box img {
		object-fit: cover;
		height: 100%;
	}

	#top .flow-area .flow-list li .flow-name {
		font-size: 1.8rem;
		padding: 0px 0px;
		width: 180px;
		text-align: left;
		justify-content: left;
	}


	#top .flow-area .flow-list li:not(:last-child)::after {
		content: "\f107";
		font-size: 3rem;
		bottom: -30px;
		top: auto;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		right: auto;
	}
	
}


/* -----------------------------
	company-area
-------------------------------- */

.flex-area{
	display: flex;
	gap: 95px;
    padding: 0px 0 100px;
}

.company-area .company-btn{
	display: flex;
    width: 420px;
    border-radius: 10px;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    box-shadow: 0 0 20px rgba(242, 239, 236, .8);
    transition: all .4s ease;
    overflow: hidden;
}

.company-area .company-btn:hover .btn-bg {
    transform: scale(1.1);
}

.company-area .company-btn .btn-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transition: all .4s ease-out;
	background: url(../img/bg-btn-company.png) center / cover, no-repeat;
}

.company-area .company-btn .btn-txt {
    padding: 0 20px 0 30px;
    width: 100%;
    height: 260px;    
	align-content: flex-end;
}

.company-area .company-btn .btn-txt .sec-ttl{
	margin: 0 0 20px;
}

.company-area .company-btn .btn-txt .sec-ttl .en{
	font-size: 1.6rem;
}

.company-area .company-btn .btn-txt .sec-ttl .jp{
	font-size: 2.8rem;
}

.company-area .company-btn .arrow {
    position: relative;
}

.company-area .company-btn .arrow::after {
    content: "";
    background: url(../img/icon-arrow-white.svg) no-repeat top center / contain;
    display: block;
    position: absolute;
    aspect-ratio: 24 / 24;
    width: 24px;
    left: 340px;
    top: -45px;
}

@media screen and (max-width: 768px){
	.flex-area{
		display: block;
		padding: 0px 20px 0px;
	}

	.company-area .company-btn{
		width: 100%;
		border-radius: 5px;
	}

	.company-area .company-btn .btn-bg {
		border-radius: 5px;
	}

	.company-area .company-btn .btn-txt {
		padding: 0 20px;
		height: 180px;    
	}

	.company-area .company-btn .btn-txt .sec-ttl{
		margin: 0 0 20px;
	}

	.company-area .company-btn .btn-txt .sec-ttl .en{
		font-size: 1.5rem;
	}

	.company-area .company-btn .btn-txt .sec-ttl .jp{
		font-size: 2.0rem;
	}

	.company-area .company-btn .arrow {
		position: relative;
	}

	.company-area .company-btn .arrow::after {
		left: 275px;
	}
}
/* -----------------------------
	お知らせ
-------------------------------- */
#top .news-area {
	position: relative;
	width: 700px;
}

#top .news-area .sec-ttl {
    display: flex;
    justify-content: space-between;
    align-items: center;
	width: 700px;
	border-bottom: 1px solid #D8D8D8;
	padding: 0 0 20px;
	margin: 0 0;
}
#top .news-area .sec-ttl .en{    
	font-size: 3.2rem;
	font-weight: 600;
    line-height: 1;
	color: var(--black01);
	letter-spacing: .01em;
}
#top .news-area .sec-ttl .jp{
	font-size: 1.6rem;
	padding: 0 0 10px 0;
}

#top .news-area .news-wrap {
    display: inline-block;
	width: 700px;
}

#top .news-area .news-btn {
    position: relative;
}

#top .news-area .news-btn a {
    display: inline-block;
    position: relative;
    margin: 10px 30px 0 0;
	font-size: 1.4rem;
}

#top .news-area .news-btn a:hover {
    opacity: .7;
}

#top .news-area .news-btn a::after {    
	content: "";
    background: url(../img/icon-arrow-green.svg) no-repeat top center / contain;
    display: block;
    position: absolute;
    aspect-ratio: 24 / 24;
    width: 24px;
    right: -29px;
    top: 0px;
    transition: all 0.3s ease-in-out;
}
#top .news-area .news-btn a:hover::after {
    right: -35px;
}

#top .news-area .news-list li a {
    display: flex;
    align-items: center;
    padding: 25px 0;
	border-bottom: 1px solid #D8D8D8;
	position: relative;
}

#top .news-area .news-list li a:hover {
	color: var(--green);
}

#top .news-area .news-list .date{
	font: 500 1.6rem / 1.8 'Lato', sans-serif;
}

#top .news-area .news-list .date,
#top .news-area .news-list .title,
#top .news-area .news-list .cate {
    display: inline-block;
    line-height: 1.5;
}

#top .news-area .news-list .cate {
    min-width: 90px;
    display: inline-block;
    font-size: 1.2rem;
    color: #313A52;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 1.1;
    padding: 5px 10px;
    margin: 0 10px 0 0;
	border-radius: 3px;
}


#top .news-area .news-list .date,
#top .news-area .news-list .cate{
    margin: 0 20px 0 0;
    width: 100px;
}

@media screen and (max-width: 768px){
	#top .news-area{
        padding: 40px 0 60px;
        display: inline-block;
        position: relative;
        width: 100%;
	}
	
	#top .news-area .sec-ttl{
		width: 100%;
		padding: 0 0 10px;
	}

	#top .news-area .sec-ttl .en {
		font-size: 2.8rem;
	}
	
    #top .news-area .inner {
        display: block;
        margin: 0 auto;
    }
	
    #top .news-area .txt-area {
        width:100%;
		display: flex;
		position: relative;
    }
    #top .news-area .news-btn {
        position: absolute;
        right: 0;
        top: 8px;
    }
    #top .news-area .news-btn a{
    }
	
	#top .news-area .news-btn a::after{
	}
    #top .news-area .news-wrap {
        width: 100%;
    }

    #top .news-area .news-left-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        margin: 0 auto 15px;
    }

	#top .news-list {
        padding: 0;
    }

    #top .news-area .news-list li{
        width: 100%;
        padding: 0 0 10px;
    }
    #top .news-area .news-list .date {
        display: inline-block;
		font-size: 1.4rem;
        margin: 0 10px 0 0;
		width: auto;
    }
	
	#top .news-area .news-list .cate {
		margin: 0 5px;
		padding: 3px 20px;
		width: auto;
	}
	
	#top .news-area .news-list .title{
		padding: 5px 0 0;
		line-height: 1.6;
		min-width: 180px;
	}

    #top .news-area .news-list li:nth-child(n+3){
        display: none;
    }

	#top .news-area .news-list li a{
		padding: 0;
        flex-wrap: wrap;
	}
	
	#top .news-area .news-list li a::after{
		top: 11px;
	}
	
	#top .news-area .news-list li a{
		padding: 10px 0;
	}
	#top .news-area .news-list li a:first-child {
		border-top: none;
	}

	#top .news-area .news-list li:hover {
		transform: translateY(0)translateX(0);
		opacity: 1;
	}

}