@charset "utf-8";
/* CSS Document */


/*------------------------------------

	main_img

------------------------------------*/
.main_img{
	position: relative;
	margin-top: 140px;
}

.main_img .banner{
	background-color: #3E79B5;
	width: 250px;
	text-align: center;
	position: absolute;
	right: 10%;
	bottom: 15%;
	padding: 10px 0;
	border-radius:10px;
}

.main_img .banner p,
.main_img .banner a{
	font-family: var(--mincho);
	font-weight: 600;
	color: #000;
}

.main_img .banner p{
	font-size: 2rem;
	margin-bottom: 10px;
	color:#FFF;
}

.main_img .banner a{
	display: inline-block;
	background-color: #fff;
	font-size: 1.6rem;
	border: 1px solid #707070;
	padding: 8px 20px;
	transition: opacity 0.3s 0s ease;
}

.main_img .banner a:hover{
	opacity: 0.5;
}



/*------------------------------------

	top_news

------------------------------------*/
.top_news{
	margin: 100px auto 120px;
}

.top_news .title_line{
	display: flex;
	align-items: center;
	margin-bottom: 40px;
}

.top_news h2{
	font-size: 4.4rem;
	font-family: var(--times);
}

.top_news h2+p{
	font-size: 1.7rem;
	font-family: var(--mincho);
	margin: 0 auto 0 30px;
}

.top_news ul.top_cate_list{
	display: flex;
	font-size: 1.5rem;
}

.top_news ul.top_cate_list li:not(:last-of-type){
	margin-right: 20px;
}

.top_news ul.top_news_list li{
	border-bottom: 1px solid #d9d9d9;
}

.top_news ul.top_news_list li:last-of-type{
	margin-bottom: 50px;
}

.top_news ul.top_news_list li a{
	display: flex;
	padding: 20px 0;
}

.top_news ul.top_news_list li a p:not(:last-of-type){
	margin-right: 20px;
}

.top_news ul.top_news_list p.date{
	width: 85px;
}

.top_news ul.top_news_list p.cate{
	width: 115px;
}

.top_news ul.top_news_list p.cate span{
	background-color: var(--navy395);
	font-size: 1.4rem;
	color: #fff;
	padding: 0 5px;	
}

.top_news ul.top_news_list p.news_contents{
	width: calc(100% - 200px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}




/*------------------------------------

	.intro

------------------------------------*/
.intro{
	background: url("../images/top/bg_intro.jpg") no-repeat center/cover;
	text-align: center;
	padding: 110px 0;
}

.intro h2,
.intro p{
	color: #fff;
}

.intro h2{
	font-size: 3rem;
	margin-bottom: 40px;
}

.intro p{
	line-height: 2;
}


/*------------------------------------

	top_service

------------------------------------*/
.top_service{
	padding: 140px 0 0 0 ;
}

.top_service h2{
	margin-bottom: 90px;
}

.top_service h2+p{
	text-align: center;
	margin-bottom: 110px;
}

.top_service p{
	line-height: 2;
}

.top_service .service_summary{
	display: flex;
	align-items: center;
}

.top_service .service_box:nth-of-type(even) .service_summary{
	flex-direction: row-reverse;
}

.top_service .img_area,
.top_service .img_area img{
	width: 50vw;
	height: auto;
}

.top_service .text_area{
	width: 500px;
	margin-left: 50px;
}

.top_service .service_box:nth-of-type(even) .text_area{
	margin-left: 0;
	margin-right: 50px;
}

.top_service .text_area p:not(:last-of-type){
	margin-bottom: 20px;
}

.top_service .text_area p:first-of-type{
	display: inline-block;
	color: #ccc;
	font-size: 1.7rem;
	font-weight: 700;
	font-family: var(--times);
	border-bottom: 1px solid #ccc;
	line-height: 1.2;
	margin-bottom: 10px;
}

.top_service .text_area h3{
	margin-bottom: 50px;
}

/*このようなお悩みを解決します！*/
.top_service .solution{
	overflow-x: hidden;
	margin: 50px auto 60px;
}

.top_service .solution h4{
	text-align: center;
	transform: translateY(50%);
}

.top_service .solution .inner{
	position: relative;
	padding: 80px 0 60px;
}

.top_service .solution .inner::before{
	content: "";
	background-image: url("../images/common/bg_aqua.jpg");
	width: 100vw;
	height: 100%;
	border-radius: 30px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.top_service ul.check{
	background-color: #fff;
	width: 1020px;
	padding: 40px;
	margin: auto;
}

.top_service ul.check li{
	display: inline-block;
	font-size: 2.2rem;
}

.top_service ul.check li:not(:last-of-type){
	margin: 0 50px 30px 0;
}

.top_service .solution+p{
	color: var(--navy132);
	text-align: center;
}

.top_service ul.content_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 60px auto;
}

.top_service ul.content_list::after{
	content: "";
	width: 360px;
}

.top_service ul.content_list li{
	background:linear-gradient(to right,#18589c, #1e70ad);
	color: #fff;
	font-size: 1.7rem;
	font-family: var(--mincho);
	font-weight: 600;
	width: 360px;
	height: 85px;
	line-height: 85px;
	border-radius: 15px;
	text-align: center;
	margin-bottom: 30px;
}

.top_service .link_area{
	background-image: url("../images/common/bg_aqua.jpg");
	display: flex;
	justify-content: center;
	border-radius: 15px;
}

.top_service .link_area button.link_btn{
	margin: 60px 20px;
}

.top_service .service_box:nth-of-type(1){
	margin-bottom: 200px;
}

.top_service .service_box:nth-of-type(2){
	background-image: url("../images/common/bg_aqua.jpg");
	padding-bottom: 120px;
}

.top_service .service_box:nth-of-type(2) .service_summary{
	position: relative;
  top: -80px;
}

.top_service .service_box:nth-of-type(2) .text_area p:first-of-type{
	color: #989898;
}

.top_service .service_box:nth-of-type(2) ul.content_list{
	margin-top: 0;
}

.top_service .service_box:nth-of-type(2) .link_area{
	background-color: #fff;
	background-image: none;
}

.top_service .service_box:nth-of-type(2) .link_area button.link_btn{
	margin: 60px auto;
}




/*------------------------------------

	promise

------------------------------------*/
.promise{
	overflow: hidden;
	padding-top: 180px;
}

.promise .outer{
	height: 540px;
	position: relative;
}

.promise .outer::before{
	content: "PROMISE";
	font-size: 140px;
	font-family: var(--times);
	color: rgba(218,235,240,0.8);
	line-height: 0.7;
	position: absolute;
	top: 0;
	left: 0;
}

.promise .outer .inner{
	height: 100%;
	position: relative;
}

.promise .outer .inner::before{
	content: "";
	background: url("../images/top/bg_promise_01.jpg") no-repeat center/cover;
	width: 150vw;
	position: absolute;
	top: 0;
	bottom: 0;
	left: -50vw;
	z-index: -2;
}

.promise .outer .inner::after{
	/*content: "";
	background: url("../images/top/bg_promise_02.png") no-repeat center/contain;
	width: 636px;
	height: 715px;
	position: absolute;
	right: -150px;
	bottom: 0;
	z-index: -2;*/
	content: none;
}

.promise h2{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	line-height: 1;
}

.promise h2>span{
	display: block;
}

.promise h2>span:first-of-type{
	margin-bottom: 30px;
}

.promise h2 span{
	font-weight: 600;
}

.promise h2::before{
	content: none;
}

.promise h2 span.marker{
	background: linear-gradient(transparent 80%, rgba(255,233,127,0.5) 80%);
	font-size: 5.7rem;
	transform: translateX(60%);
}

.promise h2 span.marker span{
	font-size: 8.7rem;
}

.promise ul{
	display: flex;
	justify-content: space-between;
	position: relative;
	top: -130px;
}

.promise li{
	width: 360px;
	border-radius: 15px;
	padding: 40px;
}

.promise li::before{
	content: attr(data-num);
	display: inline-block;
	font-size: 3rem;
	font-weight: bold;
	font-family: var(--times);
	color: rgba(255,255,255,0.5);
	border-bottom: 2px solid rgba(255,255,255,0.5);
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	line-height: 1.2;
	margin-bottom: 20px;
}

.promise li:nth-of-type(1){
	background-color: rgba(66,166,212,0.9);
}

.promise li:nth-of-type(2){
	background-color: rgba(61,142,199,0.9);
}

.promise li:nth-of-type(3){
	background-color: rgba(71,116,177,0.9);
}

.promise li h3,
.promise li p{
	color: #fff;
}

.promise li h3{
	font-size: 2.4rem;
	font-weight: 600;
	font-family: var(--mincho);
	text-align: center;
	margin-bottom: 20px;
}

.promise li p{
	line-height: 1.8;
}

.promise li p:not(:first-of-type){
	margin-top: 20px;
}




/*------------------------------------

	top_faq

------------------------------------*/
.top_faq{
	margin-bottom: 100px;
}

.top_faq .inner{
	position: relative;
	border: 10px solid #5987b6;
	border-radius: 15px;
	padding: 60px 60px 0;
}

.top_faq h2{
	margin-bottom: 100px;
}

.top_faq dt,
.top_faq dd{
	color: var(--navy395);
	text-indent: -55px;
	margin-left: 55px;
}

.top_faq dt{
	font-weight: 700;
	margin-bottom: 20px;
}

.top_faq dd{
	margin-bottom: 60px;
}

.top_faq dt::before,
.top_faq dd::before{
	content: "";
	background: url("../images/common/icon_Q.png") no-repeat center/contain;
	display: inline-block;
	width: 35px;
	height: 35px;
	transform: translateY(10px);
  margin-right: 20px;
}

.top_faq dd::before{
	background: url("../images/common/icon_A.png") no-repeat center/contain;
}

.top_faq dd:not(:last-of-type)::after{
	content: "";
	display: block;
	border-bottom: 1px solid #f5f5f5;
	width: calc(100% + 55px);
	height: 1px;
	position: relative;
	top: 30px;
	left: -55px;
}

.top_faq button.link_btn {
	position: relative;
	bottom: -40px;
}






/*------------------------------------------------------------------------------------
		スマホ
------------------------------------------------------------------------------------*/


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

	
/*------------------------------------

	main_img(SP)

------------------------------------*/
	.main_img{
		margin-top: 60px;
	}
	
	.main_img .banner{
		background-color: #3E79B5;
		width: 150px;
		text-align: center;
		position: absolute;
		right: 8%;
		bottom: 10px;
		padding: 5px 0;
		border-radius:10px;
	}

	.main_img .banner p,
	.main_img .banner a{
		font-family: var(--mincho);
		font-weight: 600;
		color: #000;
	}

	.main_img .banner p{
		font-size: 1.3rem;
		margin-bottom: 5px;
		color:#FFF;
	}

	.main_img .banner a{
		display: inline-block;
		background-color: #fff;
		font-size: 1.1rem;
		border: 1px solid #707070;
		padding: 3px 10px;
		transition: opacity 0.3s 0s ease;
	}

	.main_img .banner a:hover{
		opacity: 0.5;
	}




/*------------------------------------

	top_news(SP)

------------------------------------*/
	.top_news{
		margin: 60px auto 60px;
	}

	.top_news .title_line{
		display: block;
		margin-bottom: 5px;
	}

	.top_news h2{
		font-size: 2.8rem;
		font-family: var(--times);
		line-height: 1.2;
	}

	.top_news h2+p{
		font-size: 1.4rem;
		font-family: var(--mincho);
		margin: 0 auto 20px 0;
	}

	.top_news ul.top_cate_list{
		display: flex;
		flex-wrap: wrap;
		font-size: 1.2rem;
	}

	.top_news ul.top_cate_list li:not(:last-of-type){
		margin-right: 10px;
	}

	.top_news ul.top_news_list li{
		border-bottom: 1px solid #d9d9d9;
	}

	.top_news ul.top_news_list li:last-of-type{
		margin-bottom: 50px;
	}

	.top_news ul.top_news_list li a{
		display: flex;
		flex-wrap: wrap;
		padding: 10px 0;
	}
	
	.top_news ul.top_news_list li a p{
		font-size: 1.4rem;
	}

	.top_news ul.top_news_list li a p:not(:last-of-type){
		margin-right: 10px;
	}
	
	.top_news ul.top_news_list p.date{
		width: 85px;
	}

	.top_news ul.top_news_list p.cate{
		width: 115px;
	}

	.top_news ul.top_news_list p.cate span{
		background-color: var(--navy395);
		font-size: 1.2rem;
		color: #fff;
		padding: 0 5px;	
	}

	.top_news ul.top_news_list p.news_contents{
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}





/*------------------------------------

	.intro(SP)

------------------------------------*/
	.intro{
		background: url("../images/top/bg_intro.jpg") no-repeat center/cover;
		text-align: center;
		padding: 40px 0;
	}

	.intro h2,
	.intro p{
		color: #fff;
	}

	.intro h2{
		font-size: 2.2rem;
		line-height: 1.8;
		margin-bottom: 30px;
	}

	.intro p{
		line-height: 2;
	}


/*------------------------------------

	top_service(SP)

------------------------------------*/
	.top_service{
		padding: 60px 0;
		margin-bottom: 40px;
	}

	.top_service h2{
		margin-bottom: 40px;
	}

	.top_service h2+p{
		text-align: center;
		width: 90%;
		margin: 0 auto 60px;
	}

	.top_service p{
		line-height: 2;
	}

	.top_service .service_summary{
		display: flex;
		flex-direction: column;
		align-items: start;
	}

	.top_service .service_box:nth-of-type(even) .service_summary{
		flex-direction: column;
	}
	
	.top_service .img_area{
		margin-bottom: 20px;
	}

	.top_service .img_area,
	.top_service .img_area img{
		width: 90vw;
		height: auto;
	}

	.top_service .text_area{
		width: 90%;
		margin-left: 0;
		margin: auto;
	}

	.top_service .service_box:nth-of-type(even) .text_area{
		margin: auto;
	}

	.top_service .text_area p:not(:last-of-type){
		margin-bottom: 20px;
	}

	.top_service .text_area p:first-of-type{
		display: inline-block;
		color: #ccc;
		font-size: 1.7rem;
		font-weight: 700;
		font-family: var(--times);
		border-bottom: 1px solid #ccc;
		line-height: 1.2;
		margin-bottom: 10px;
	}

	.top_service .text_area h3{
		margin-bottom: 20px;
	}

	/*このようなお悩みを解決します！*/
	.top_service .solution{
		overflow-x: hidden;
		margin: 0 auto 30px;
	}

	.top_service .solution h4{
		text-align: center;
		transform: translateY(66%);
	}

	.top_service .solution .inner{
		position: relative;
		padding: 80px 0 60px;
	}

	.top_service .solution .inner::before{
		content: "";
		background-image: url("../images/common/bg_aqua.jpg");
		width: 100%;
		height: 100%;
		border-radius: 30px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.top_service ul.check{
		background-color: #fff;
		width: 90%;
		padding: 20px 10px;
		margin: auto;
	}

	.top_service ul.check li{
		display: inline-block;
		font-size: 2rem;
	}

	.top_service ul.check li:not(:last-of-type){
		margin: 0 0 30px 0;
	}

	.top_service .solution+p{
		color: var(--navy132);
		text-align: center;
		width: 90%;
    margin: auto;
	}

	.top_service ul.content_list{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 30px auto;
	}

	.top_service ul.content_list::after{
		content: "";
		width: 360px;
	}

	.top_service ul.content_list li{
		background:linear-gradient(to right,#18589c, #1e70ad);
		color: #fff;
		font-size: 1.5rem;
		font-family: var(--mincho);
		font-weight: 600;
		max-width: 360px;
		width: 47%;
		height: 85px;
		line-height: 1.6;
		border-radius: 15px;
		text-align: center;
		display: flex;
    align-items: center;
    justify-content: center;
		padding: 5px;
		margin: 0 3px 10px;
	}

	.top_service .link_area{
		background-image: url("../images/common/bg_aqua.jpg");
		display: block;
		border-radius: 15px;
		padding: 30px 0;
	}

	.top_service .link_area button.link_btn{
		margin: 30px auto;
	}

	.top_service .service_box:nth-of-type(1){
		margin-bottom: 150px;
	}

	.top_service .service_box:nth-of-type(2){
		background-image: url("../images/common/bg_aqua.jpg");
		padding-bottom: 120px;
	}

	.top_service .service_box:nth-of-type(2) .service_summary{
		position: relative;
		top: -80px;
	}
	
	.top_service .service_box:nth-of-type(2) .img_area{
		margin-left: auto;
	}

	.top_service .service_box:nth-of-type(2) .text_area p:first-of-type{
		color: #989898;
	}

	.top_service .service_box:nth-of-type(2) ul.content_list{
		margin-top: 0;
	}

	.top_service .service_box:nth-of-type(2) .link_area{
		background-color: #fff;
		background-image: none;
	}

	.top_service .service_box:nth-of-type(2) .link_area button.link_btn{
		margin: 30px auto;
	}




/*------------------------------------

	promise(SP)

------------------------------------*/
	.promise{
		overflow: hidden;
		padding-top: 0;
	}

	.promise .outer{
		height: 290px;
		position: relative;
	}

	.promise .outer::before{
		content: "PROMISE";
		font-size: 18vw;
		font-family: var(--times);
		color: rgba(218,235,240,0.6);
		line-height: 0.7;
		position: absolute;
		top: 0;
		left: 0;
	}

	.promise .outer .inner{
		height: 100%;
		position: relative;
	}

	.promise .outer .inner::before{
		content: "";
		background: url("../images/top/bg_promise_01.jpg") no-repeat center/cover;
		width: 150vw;
		position: absolute;
		top: 0;
		bottom: 0;
		left: -50vw;
		z-index: -2;
	}

	.promise .outer .inner::after{
		/*content: "";
		background: url("../images/top/bg_promise_02.png") no-repeat center/contain;
		width: 35vw;
		height: 39vw;
		position: absolute;
		right: -10vw;
		bottom: 0;
		z-index: 0;*/
		content: none;
	}

	.promise h2{
		width: 100%;
		position: absolute;
		top: 60px;
		left: 50%;
		transform: translateX(-50%);
		line-height: 1;
	}
	
	.promise h2::before{
		content: none;
	}

	.promise h2>span{
		display: inline-block;
	}

	.promise h2>span:first-of-type{
		margin-bottom: 15px;
	}

	.promise h2 span{
		font-weight: 600;
	}

	.promise h2 span.marker{
		background: linear-gradient(transparent 80%, rgba(255,233,127,0.5) 80%);
		font-size: 3.5rem;
		transform: translateX(0);
	}

	.promise h2 span.marker span{
		font-size: 5rem;
	}

	.promise ul{
		display: block;
		position: relative;
		top: -30px;
	}

	.promise li{
		width: 100%;
		max-width: 360px;
		border-radius: 15px;
		padding: 20px 20px 30px;
		margin: 0 auto 30px;
	}

	.promise li::before{
		content: attr(data-num);
		display: inline-block;
		font-size: 2.5rem;
		font-weight: bold;
		font-family: var(--times);
		color: rgba(255,255,255,0.5);
		border-bottom: 2px solid rgba(255,255,255,0.5);
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		line-height: 1.2;
		margin-bottom: 20px;
	}

	.promise li:nth-of-type(1){
		background-color: rgba(66,166,212,0.9);
	}

	.promise li:nth-of-type(2){
		background-color: rgba(61,142,199,0.9);
	}

	.promise li:nth-of-type(3){
		background-color: rgba(71,116,177,0.9);
	}

	.promise li h3,
	.promise li p{
		color: #fff;
	}

	.promise li h3{
		font-size: 2.2rem;
		font-weight: 600;
		font-family: var(--mincho);
		text-align: center;
		margin-bottom: 20px;
	}

	.promise li p{
		line-height: 1.8;
	}

	.promise li p:not(:first-of-type){
		margin-top: 20px;
	}




/*------------------------------------

	top_faq(SP)

------------------------------------*/
	.top_faq{
		margin-bottom: 100px;
	}

	.top_faq .inner{
		position: relative;
		border: 7px solid #5987b6;
		border-radius: 15px;
		padding: 30px 10px 0;
	}

	.top_faq h2{
		margin-bottom: 30px;
	}

	.top_faq dt,
	.top_faq dd{
		color: var(--navy395);
		text-indent: -40px;
		margin-left: 40px;
	}

	.top_faq dt{
		font-weight: 700;
		margin-bottom: 10px;
	}

	.top_faq dd{
		margin-bottom: 20px;
	}

	.top_faq dt::before,
	.top_faq dd::before{
		content: "";
		background: url("../images/common/icon_Q.png") no-repeat center/contain;
		display: inline-block;
		width: 30px;
		height: 30px;
		transform: translateY(10px);
		margin-right: 10px;
	}

	.top_faq dd::before{
		background: url("../images/common/icon_A.png") no-repeat center/contain;
	}

	.top_faq dd:not(:last-of-type)::after{
		content: "";
		display: block;
		border-bottom: 1px solid #f5f5f5;
		width: calc(100% + 40px);
		height: 1px;
		position: relative;
		top: 10px;
		left: -40px;
	}

	.top_faq button.link_btn {
		position: relative;
		bottom: -40px;
		width: 230px;
	}
	
	
}