﻿@charset "UTF-8";
/* ============================================================
共通CSS
============================================================ */
body{
	padding-top:0;
}
.fadein{
	transition:opacity 0.5s ease 0.2s, top 0.5s ease 0.2s;
	&.delay_2{
		transition:opacity 0.5s ease 0.4s, top 0.5s ease 0.4s;
	}
	&.delay_3{
		transition:opacity 0.5s ease 0.6s, top 0.5s ease 0.6s;
	}
	&.delay_4{
		transition:opacity 0.5s ease 0.8s, top 0.5s ease 0.8s;
	}
	&.delay_5{
		transition:opacity 0.5s ease 1s, top 0.5s ease 1s;
	}
	&.delay_6{
		transition:opacity 0.5s ease 1.2s, top 0.5s ease 1.2s;
	}
}
.bn_cta.yellow,
#contents_contact input[type=submit].yellow{
	background-color:#ffe000;
	box-shadow:1px 4px 0px 0px rgba(178,148,0,0.9);
	color:#111 !important;
}
.bn_cta.yellow:hover,
#contents_contact input[type=submit].yellow:hover{
	box-shadow: 0px 4px 7px 0px rgba(178,148,0,0.9);
	color:#111 !important;
}
.bn_cta.yellow:before{
	background:#fff200;
}
.bn_cta.yellow:after,
.bn_cta.yellow:hover:after{
		background-image:url(../img/icon_arrow.svg);
}

.bn_cta.sodan{
	color:var(--color-accent) !important;
	border:solid 2px var(--color-accent);
	box-shadow: 1px 4px 0px 0px rgba(19, 124, 51, 0.9);
	&:hover{
		color:#fff !important;
	}
	&:before{
		background:var(--color-accent);
	}
	&:after{
		background-image:url(../img/icon_arrow_greenfile.svg);
	}
	&:hover:after{
		background-image:url(../img/icon_arrow_white.svg);
	}
}

.text_green{
	color:var(--color-accent);
}

.contents_genbaton{
	background:#def1e4;
}
.contents_heading_wrap {
	margin: 0 0 3em
}
.contents_heading_pop {
	display: inline-block;
	margin: 0 0 1.5em;
	position: relative;
	left: 50%;
	transform: translate(-50%, 0);
	padding: .7em 1.2em .6em;
	border-radius: 2em;
	background: var(--color-accent);
	font-size: 1.1em;
	font-weight: bold;
	color: #fff;
	line-height: 1em;
	white-space: nowrap
}
.contents_heading_pop:after {
	content: "";
	display: block;
	width: 1.6em;
	height: 1em;
	clip-path: polygon(0 0, 100% 0%, 50% 100%);
	position: absolute;
	bottom: -0.8em;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-accent);
}
.contents_heading_logo {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2.2em
}
.contents_heading_logo_image {
	width: 6.7em;
}
.contents_heading_logo_title {
	line-height: 1em;
	position: relative;
	top: -0.05em;
	font-feature-settings:"palt" 1;
}
.contents_heading_logo hr {
	display: block;
	width: 1px;
	height: 1.2em;
	background: #ccc;
	margin: 0 25px;
}
.contents_heading_title {
	font-size: 3.6rem;
	line-height: 1em;
	text-align: center
}
.contents_split{
	display:block;
	height:1px;
	max-width:1200px;
	margin:0 auto;
	padding:0;
	border:none;
	outline:none;
	background:#ddd;
}

@media screen and (max-width: 768px) {
		.contents_heading_wrap{
			margin:0 0 1.5em;
		}
		.contents_heading_pop{
			margin:0 0 1em;
			font-size:1.2rem;
		}
		.contents_heading_logo{
			display:flex;
			justify-content:center;
			align-items:center;
			font-size:2.2rem;
			&_image{
				width:5em;
			}
			&_title{
				line-height:1em;
			}
			hr{
				height:1.2em;
				margin:0 10px;
			}
		}
		.contents_heading_title{
			font-size:2.2rem;
		}
}

/* =====================================
header
===================================== */
#contents_ky_header{
	width:100%;
	padding:0;
	position:fixed;
	top:0;
	z-index:100;
	box-sizing:border-box;
}
.ky_header_inner{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	max-width:100%;
	padding:6px 0;
}
.ky_header_logo{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	flex-grow:1;
	max-width:210px;
	padding:10px 10px 10px 1.5em;
	border-radius:10px 0 0 10px;
	box-sizing:border-box;
	background:#fff;
	filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));
}
.ky_header_logo_service{
	width:53%;
}
.ky_header_logo_rvsta{
	width:44%;
}

.ky_header_login{
	display:inline-block;
	margin:0 10px 0 0;
	padding:0.4em 0.8em 0.4em 0.4em;
	border-radius:10px;
	background:#fff;
	font-weight:bold;
	font-size:1.4rem;
	text-decoration:none;
	filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));
	.ky_icon_service,
	.ky_icon_login{
		display:inline-block;
		width:1.5em;
		position:relative;
		top:-0.12em;
		vertical-align:middle;
	}
	.ky_icon_login{
		width:0.9em;
	}
}

@media screen and (max-width: 1500px) {
	.ky_header_logo {
		max-width: 180px;
	}
}
@media screen and (max-width: 768px) {
	.ky_header_inner{
		flex-direction: row-reverse;
		justify-content: space-between;
		padding:0 2% 0 0 !important;
	}
	.ky_header_logo{
		max-width:120px;
		padding:10px;
	}
	.ky_header_login{
		margin:0;
		font-size:1.2rem;
	}
	.ky_header_logo{
		max-width:120px;
		padding:10px;
		border-radius:0 10px 10px 0;
	}

}

/* ============================================================
contents_ky_mainvisual
============================================================ */
#contents_ky_mainvisual{
	background:url(../img/img_ky_mainvisual_bg.webp) no-repeat center center/cover #f1bc18;
	.contents_inner{
		display:flex;
		gap:30px;
		max-width:1300px;
		padding-top:60px;
		padding-bottom:30px;
	}
}
.ky_mainvisual_text{
	flex-grow:1;
	background:url(../img/img_ky_mainvisual_text_bg.webp) no-repeat center top/contain;
}
.ky_mainvisual_logo{
	max-width:350px;
	margin:0 auto;
}
.ky_mainvisual_slogan{
	max-width:570px;
	margin:0 auto 5px;
}
.ky_mainvisual_slogan_sub{
	margin:0 0 10px;
	font-size:clamp(1.7rem, 3vw, 4.3rem);
	line-height:1em;
	font-feature-settings:"palt" 1;
	text-align:center;
}
.ky_mainvisual_badge{
	max-width:410px;
	margin:0 auto 10px;
}
.ky_mainvisual_desc{
	font-size:1.1em;
	line-height:1.5em;
	text-align:center;
}
.ky_mainvisual_form{
	width:50%;
	flex-shrink:0;
	margin-top:40px;
}
.ky_mainvisual_form_inner{
	box-sizing: border-box;
	padding: 25px;
	background: #fff;
	border-radius: 15px;
	position:relative;
	filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.03));
	.contents_heading_pop{
		margin-top: -2.2em;
		background:#de3023;
		font-size:clamp(1.5rem, 1.8vw, 2.3rem);
		&:after{
			background:#de3023;
		}
	}
	.contents_formhandler_form_main{
		padding:0;
	}
	#contents_form.is-placeholder {
		box-sizing: border-box;
		height: var(--form-placeholder-height);
	}
}

@media screen and (max-width: 768px) {
	#contents_ky_mainvisual{
		background:url(../img/img_ky_mainvisual_bg.webp) no-repeat center center/cover #f1bc18;
		.contents_inner{
			display:block;
			max-width:100%;
			padding:20px 0 0;
		}
	}
	.ky_mainvisual_text{
		max-width:90%;
		margin:0 auto 30px;
	}
	.ky_mainvisual_logo{
		max-width:60%;
		margin:0 auto;
	}
	.ky_mainvisual_slogan{
		max-width:95%;
	}
	.ky_mainvisual_slogan_sub{
		font-size:6vw;
	}
	.ky_mainvisual_badge{
		max-width:80%;
	}
	.ky_mainvisual_desc{
		font-size:1em;
		text-align:left;
		br{
			display:none;
		}
	}
	.ky_mainvisual_form{
		width:100%;
	}
	.ky_mainvisual_form_inner{
		padding: 15px;
		border-radius:0;
	}
	.contents_formhandler_form_main .bn_cta,
	.contents_form_set .bn_cta,
	.contents_form_set input[type=submit]{
		padding: 1.2em 10px;
		font-size: 4vw;
	}
}

/* ============================================================
contents_ky_problem
============================================================ */
#contents_ky_problem{
	background:#4c4c4c;
	color:#fff;
	.contents_inner{
		padding-bottom:60px;
	}
}
.ky_problem_title{
	max-width:490px;
	margin:0 auto 5px;
}
.ky_problem_desc{
	margin:0 0 40px;
	font-size:1.6rem;
	line-height:1.7em;
}
.ky_problem_inner{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 3.2%;
}
.ky_problem_item{
	padding: 15px 25px 20px;
	border-radius: 15px;
	filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.05));
	background: #565656;
}
.ky_problem_item_image{
	max-width:220px;
	margin:0 auto 5px;
}
.ky_problem_item_title{
	margin:0 0 15px;
	font-size:2.4rem;
	font-feature-settings:"palt" 1;
	line-height:1.3em;
}
.ky_problem_item_desc{
	line-height:1.5em;
	text-align:left;
}
@media screen and (max-width: 768px) {
	#contents_ky_problem{
		.contents_inner{
			padding-bottom:40px;
		}
	}
	.ky_problem_desc{
		margin:0 0 20px;
		font-size:1.4rem;
		text-align:left;
		br{
			display:none;
		}
	}
	.ky_problem_inner{
		grid-template-columns: 1fr;
		gap:15px;
	}
	.ky_problem_item{
		padding: 15px;
	}
	.ky_problem_item_image{
		max-width:120px;
	}
	.ky_problem_item_title{
		margin:0 0 6px;
		font-size:2rem;
	}
}

/* ============================================================
contents_ky_about
============================================================ */
#contents_ky_about{
	background:#f4c31d;
	position:relative;
	&:before{
		content: "";
		display: block;
		width: 90px;
		height: 40px;
		clip-path: polygon(0 0, 100% 0%, 50% 100%);
		position: absolute;
		top:0;
		left: 50%;
		transform: translateX(-50%);
		background:#4c4c4c;
	}
	.contents_inner{
		padding-top:60px;
		padding-bottom:15px;
	}
}
.ky_about_title{
	margin:0 0 10px;
	font-size:clamp(1.7rem, 3vw, 4.2rem);
	line-height:1.6em;
	font-feature-settings:"palt" 1;
	span{
		font-size:1.3em;
	}
	img{
		display:inline-block;
		width:7em;
		height:auto;
		margin:0 5px 0 0;
		vertical-align: bottom;
	}
}
.ky_about_desc{
	margin:0 0 40px;
	font-size:1.6rem;
	line-height:1.7em;
}
.ky_about_inner{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5em;
}
.ky_about_item{
	display:flex;
	align-items:center;
	gap:15px;
	padding: 15px;
	border-radius: 15px;
	filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.05));
	background: #fff;
}
.ky_about_item_image{
	width:130px;
}
.ky_about_item_text{
	flex-grow:1;
}
.ky_about_item_title{
	margin:0 0 15px;
	font-size:clamp(1.5rem, 2.2vw, 2.5rem);
	line-height:1em;
	font-feature-settings:"palt" 1;
	color:#d9941c;
	span{
		font-size:1.2em;
	}
}
.ky_about_item_desc{
	font-size:1.6rem;
	line-height:1.3em;
}

@media screen and (max-width: 768px) {
	#contents_ky_about{
		&:before{
			width: 50px;
			height: 20px;
			top:-2px;
		}
		.contents_inner{
			padding-top:40px;
			padding-bottom:15px;
		}
	}
	.ky_about_title{
		font-size:7vw;
	}
	.ky_about_desc{
		margin:0 0 20px;
		font-size:1.4rem;
		text-align:left;
	}
	.ky_about_inner{
		grid-template-columns: 1fr;
		gap: 15px;
	}
	.ky_about_item{
		gap:10px;
	}
	.ky_about_item_image{
		width:80px;
		flex-shrink:0;
	}
	.ky_about_item_title{
		margin:0 0 10px;
		font-size:1.8rem;
	}
	.ky_about_item_desc{
		font-size:1.4rem;
	}
}

/* ============================================================
contents_ky_change
============================================================ */
#contents_ky_change{
	background: linear-gradient(to bottom, #f4c31d 10%, #f4f4f4 10%);
	.contents_inner{
		padding-top:0px;
	}
}
.ky_change_title{
	max-width:350px;
	margin:0 auto 10px;
}
.ky_change_slogan{
	margin:0 0 25px;
	font-size:clamp(1.7rem, 4vw, 4.2rem);
	line-height:1.2em;
	font-feature-settings:"palt" 1;
	span{
		font-size:1.2em;
		color:#d9941c;
	}
}
.ky_change_image{
	max-width:1000px;
	margin:0 auto;
}
.ky_change_arrow{
	max-width:60px;
	margin:20px auto 0;
}
@media screen and (max-width: 768px) {
	#contents_ky_change{
		background: linear-gradient(to bottom, #f4c31d 10%, #f4f4f4 10%);
	}
	.ky_change_title{
		max-width:80%;
	}
	.ky_change_slogan{
		margin:0 0 15px;
		font-size:6.5vw;
		span{
			font-size:1.1em;
		}
	}
	.ky_change_arrow{
		max-width:20px;
		margin:10px auto 12px;
	}
}

/* ============================================================
contents_ky_relation
============================================================ */
.contents_ky_bg_wrap{
	position:relative;
	background:url(../img/img_ky_grad_bg.webp) no-repeat center center/100% 100%;
}

#contents_ky_relation{
}
.ky_relation_title{
	margin:0 0 25px;
	font-size:clamp(1.7rem, 4vw, 4rem);
	line-height:1.5em;
	font-feature-settings:"palt" 1;
	span{
		font-size:1.3em;
	}
	img{
		display:inline-block;
		width:5em;
		height:auto;
		margin:0 5px 0 0;
		vertical-align: sub;
	}
}
.ky_relation_desc{
	font-size:1.6rem;
}
.ky_relation_image{
	margin:30px auto;
	padding: 30px 20px;
	border-radius: 15px;
	filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.05));
	background: #fff;
	figure{
		max-width:1160px;
		margin:0 auto 30px;
	}
	p{
		font-size:clamp(1.5rem, 2.5vw, 2.8rem);
		line-height:1em;
		font-feature-settings:"palt" 1;
		color:#d9941c;
	}
}

@media screen and (max-width: 768px) {
	.ky_relation_title{
		margin:0 0 15px;
		font-size:4.7vw;
	}
	.ky_relation_desc{
		font-size:1.4rem;
		text-align:left;
		br{
			display:none;
		}
		small{
			display:block;
		}
	}
	.ky_relation_image{
		margin:15px auto;
		padding: 10px;
		border-radius: 6px;
		figure{
			margin:0 auto 10px;
		}
	}
}

/* ============================================================
contents_ky_solution
============================================================ */
.ky_solution_wrap{
	display: grid;
	grid-template-columns: 1fr 30px 1fr;
	gap: 2%;
	align-items:center;
	max-width:1000px;
	margin:0 auto 20px;
}
.ky_solution_desc{
	margin:0 0 30px;
}
.ky_solution_item_arrow{
	margin-top: 2.8em;
}
.ky_solution_item{
}
.ky_solution_item_title{
	max-width:fit-content;
	padding:.6em .8em;
	border-radius:10px 10px 0 0;
	white-space:nowrap;
	background:#565656;
	color:#fff;
	font-weight:bold;
	font-size:1.7rem;
	line-height:1em;
	.after &{
		background:#d9941c;
	}
}
.ky_solution_item_inner{
	display:flex;
	align-items:center;
	gap:15px;
	padding: 15px;
	border-radius: 0 15px 15px 15px;
	filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.05));
	background: #fff;
}
.ky_solution_item_icon{
	width:80px;
	flex-shrink:0;
}
.ky_solution_item_text{
	flex-grow:1;
	font-size:clamp(1.5rem, 2vw, 2rem);
	line-height:1.2em;
	font-feature-settings:"palt" 1;
}
@media screen and (min-width: 769px) {
	.ky_solution_item.after{
		backface-visibility:hidden;
		transition:opacity 0.5s ease 0.2s, left 0.5s ease 0.2s;
		opacity:0;
		position:relative;
		left:-30px;
		top:auto;
	}
	.ky_solution_item.after.delay_2{
		transition:opacity 0.5s ease 0.4s, left 0.5s ease 0.4s;
	}
	.ky_solution_item.after.delay_3{
		transition:opacity 0.5s ease 0.6s, left 0.5s ease 0.6s;
	}
	.ky_solution_item.after.visible{
		opacity:1;
		left:0;
		top:auto;
	}
}
@media screen and (max-width: 768px) {
	.ky_solution_wrap{
		display:block;
		margin:0 auto 35px;
	}
	.ky_solution_desc{
		margin:0 0 20px;
	}
	.ky_solution_item_arrow{
		width:30px;
		margin:5px auto 0;
		transform: rotate(90deg);
		
	}
	.ky_solution_item{
	}
	.ky_solution_item_title{
		font-size:1.5rem;
	}
	.ky_solution_item_inner{
		gap:10px;
	}
	.ky_solution_item_icon{
		width:60px;
	}

}

/* ============================================================
contents_ky_voice
============================================================ */
#contents_ky_voice{
	.contents_inner{
		padding-top:0px;
		padding-bottom:20px;
	}
}
.ky_voice_title{
	z-index:1;
	border-radius:.8em;
	background:#fff;
	font-size:clamp(1.5rem, 2.5vw, 2.8rem);
	color:#111;
	&:after{
		background:#fff;
	}
	img{
		display: inline-block;
		width: 6em;
		height: auto;
		margin: 0 8px 0 0;
		vertical-align: middle;
	}
}
.ky_voice_wrap{
	max-width:1000px;
	margin:-80px auto 40px;
	padding:80px 25px 25px;
	border-radius:15px;
	position:relative;
	z-index:0;
	background:rgba(217,148,28,0.2);
}
.ky_voice_slogan{
	margin:0 0 30px;
	font-size:clamp(1.7rem, 4vw, 4rem);
	line-height:1em;
	font-feature-settings:"palt" 1;
}
.ky_voice_inner{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5em;
}
.ky_voice_item{
	display:flex;
	align-items:center;
	gap:15px;
	padding: 15px;
	border-radius:15px;
	filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.05));
	background: #fff;
}
.ky_voice_item_icon{
	width:90px;
	flex-shrink:0;
	figcaption{
		margin:5px 0 0;
		font-weight:bold;
		line-height:1em;
		text-align:center;
		color:#d9941c;
		&.blue{
			color:#2683a8;
		}
	}
}
.ky_voice_item_text{
	flex-grow:1;
	font-size:clamp(1.5rem, 2vw, 2rem);
	line-height:1.2em;
	font-feature-settings:"palt" 1;
}
.ky_voice_cta{
	max-width:750px;
	margin:0 auto;
}

@media screen and (max-width: 768px) {
	#contents_ky_voice{
		.contents_inner{
			padding:0 0 10px;
		}
	}
	.ky_voice_title{
		font-size: 5vw;
	}
	.ky_voice_wrap{
		margin:-30px auto 20px;
		padding:40px 5% 25px;
		border-radius:0;
	}
	.ky_voice_slogan{
		margin:0 0 20px;
	}
	.ky_voice_inner{
		grid-template-columns: 1fr;
		gap:15px;
	}
	.ky_voice_item{
		gap:10px;
	}
	.ky_voice_item_icon{
		width:70px;
	}
	.ky_voice_cta{
		max-width:90%;
	}
}

/* ============================================================
footer
============================================================ */
.footer_detail {
	padding-top:0;
	border-top:none;
}
.footer_detail_badge {
	top:0;
}
.copyright {
	padding: 5px;
}

/* ============================================================
contents_ky_thanks
============================================================ */
#contents_ky_thanks{
	background:url(../img/img_ky_mainvisual_bg.webp) no-repeat center center/cover #f1bc18;
	.contents_inner{
		padding-top:60px;
		padding-bottom:30px;
	}
	.ky_mainvisual_text{
		margin:0 auto 40px;
	}
	.ky_mainvisual_logo {
		max-width: 260px;
	}
	.ky_mainvisual_slogan {
		max-width: 460px;
	}
	.ky_mainvisual_slogan_sub {
		font-size: clamp(1.7rem, 2.5vw, 3.3rem);
	}
}
