@charset "UTF-8";

/* reset ---------------------------------------*/

div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,
h6,pre,code,form,fieldset,legend,
input,textarea,p,blockquote,
th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;word-break: break-all;font-size:inherit;width:100%;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q::before,q::after{content:'';}
abbr{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
select,input,button,textarea{font-size:inherit;font-family:inherit;box-sizing: border-box;}
pre,code,kbd,samp{font-family:monospace;*font-size:108%;line-height:100%;}
figure{padding:0;margin:0;}
input[type="submit"],
input[type="button"],
button {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration,
button::-webkit-search-decoration {display: none;}
input[type="submit"]::focus,
input[type="button"]::focus,
button::focus {outline-offset: -2px;}


/* base ---------------------------------------*/

*{
	box-sizing:border-box;
	min-height: 0vw;
}

html,body{height:100%;}

body{
	-webkit-text-size-adjust: 100%;
	padding:0;
	margin: 0;
	font-family: 'Noto Sans JP', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
	font-feature-settings: "palt" 1;
	-webkit-font-feature-settings: "palt" 1;
	color: #333;
}

main {
	background: url("../img/bg_color.png") repeat center center;
	background-size: contain;
}

a{
	text-decoration: none;
	color:#000;
	transition: all .25s ease;
}

img{
	vertical-align: bottom;
	line-height: 1;
	max-width:100%;
	height:auto;
}


/* common item ---------------------------------------*/

.clearfix::after,
.inner::after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.font-noto {font-family: 'Noto Sans JP', sans-serif;}

/* layout ---------------------------------------*/


.overlay{display: none;}


/* kv ---------------------------------------*/

.kv-wrapper {
	/* margin-bottom: 40px; */
}

.kv-image img {
	width: 100%;
}


/* point ---------------------------------------*/

.point {
	position: relative;
	top: -8px;
	padding: 40px 20px 93px;
}

.point-inner {
	max-width: 1084px;
	margin: 0 auto;
}

.point-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.point-list-item {
	width: calc(33.333% - 9.333px);
	background: #fff;
	border: 2.72px solid #06C755;
	position: relative;	
	padding: 18px 38px 34px 38px;
	border-radius: 20px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
}

.point-list-item::after {
    display: block;   
	content: '';
	background: url('../img/point01.png') no-repeat center center; 
	background-size: 100%;
	width: 125px;
	height: 62px;
	position: absolute;
	left: 50%;
	top: -46.5px;
	transform: translate(-50%,0);
}

.point-list-item:nth-of-type(2)::after {
	background: url('../img/point02.png') no-repeat center center; 
	background-size: 100%;
}

.point-list-item:nth-of-type(3)::after {
	background: url('../img/point03.png') no-repeat center center; 
	background-size: 100%;
}

.point-list-title {
	text-align: center;
	line-height: 1.28;
	letter-spacing: 0.07em;
	font-size: 20px;
	min-height: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.point-list-title span {
	display: inline-block;
	position: relative;
	z-index: 1;
	font-size: 20px;
	font-weight: 900;
}

.point-list-title span::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 0.6em;
	bottom: 0;
	left: 0;
	background-color: #FFEE33;
	z-index: -1;
}

.point-list-image {
	margin-bottom: 15px;
}

.point-list-image img {
	width: 100%;
}

.point-list-text {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.04em;
}


/* cta ---------------------------------------*/

.cta {
	background: #EEFEE5;
}

.cta-head {
	background: url("../img/bg_inquiry.png") no-repeat center bottom;
	background-size: cover;
}

.cta-title {
	/* padding: 22px 15px 3.2vw; */
	padding: 22px 15px calc(2.1vw + 15px);
	text-align: center;
	color: #fff;
	font-weight: 900;
	font-size: 36px;
	letter-spacing: 0.1em;
}

.cta-body {
	padding: 50px 20px 116px;
}

.cta-inner {
	max-width: 960px;
	margin: 0 auto;
}

.cta-block {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 37px;
}

.cta-mockup {
	width: 265px;
}

.cta-mockup img {
	width: 100%;
}

.cta-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 17px;
}

.cta-logo-image {
	width: 133px;
}

.cta-logo-title {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 5px;
}

.cta-logo-title b {
	font-size: 26px;
	font-weight: 900;
	letter-spacing: 0.1em;
}

.cta-logo-title span {
	font-size: 21px;
	font-weight: 500;
	letter-spacing: 0.1em;
}

.cta-btn-wrapper {
	margin: 31px auto 25px;
	text-align: center;
}

.cta-btn {
	display: inline-block;
	width: 488px;
	max-width: 100%;
	position: relative;
	background: #06c755;
	color: #fff;
	padding: 20px 20px;
	font-size: 34px;
	font-weight: 900;
	letter-spacing: 0.1em;
	border-radius: 10px;
	box-shadow: 7px 7px 0 #299655;
	transition: all .25s ease;
}

.cta-btn:hover {
	box-shadow: unset;
	transform: translate(7px,7px);
}

.cta-btn::after {
    display: block;   
	content: '';
	background: url('../img/icon_arrow.svg') no-repeat center center; 
	background-size: 100%;
	width: 24px;
	height: 25px;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translate(0,-50%);
}

.cta-btn-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	height: 100%;
}

.cta-btn-inner::before {
	content: '';
	background: url('../img/icon_line_wh.svg') no-repeat center center; 
	background-size: 100%;
	width: 47px;
	height: 45px;
}

.cta-notice {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
	letter-spacing: 0.05em;
}

/* pc only */
@media screen and (min-width: 768px){
	.sp{display: none !important;}
	.spbr{display: none;}
}

/*  smallPC */
@media screen and (min-width: 768px) and (max-width: 970px){
	

	.point-list-item {
		padding: 25px 20px 15px 20px;
	}

	.point-list-title {
		font-size: 18px;
		min-height: 100px;
	}

	.point-list-title span {
		font-size: 18px;
	}
}

/*  smallPC */
@media screen and (min-width: 768px) and (max-width: 850px){
	
	.point-list {
		flex-direction: column;
		align-items: center;
		gap: 80px;
	}

	.point-list-item {
		width: 100%;
		max-width: 460px;
	}

	.point-list-title {
		font-size: 20px;
		min-height: unset;
	}

	.point-list-title span {
		font-size: 20px;
	}
}

/* sp only */
@media screen and (max-width: 767px){

	/* common item ---------------------------------------*/

	.pc{display: none !important;}
	.pcbr{display: none;}


	/* kv ---------------------------------------*/

	.kv-wrapper {
		margin-bottom: 0;
	}


	/* point ---------------------------------------*/

	.point {
		top: 0;
		padding: 27px 30px 46px;
	}

	.point-list {
		display: block;
	}

	.point-list-item {
		width: 100%;
		border: 2px solid #06C755;
		padding: 17px 28px 17px 28px;
		border-radius: 18px;
		margin-bottom: 45px;
		display: block;
	}

	.point-list-item:last-of-type {
		margin-bottom: 0;
	}

	.point-list-item::after {
		width: 93px;
		height: 47px;
		top: -35px;
	}

	.point-list-title {
		line-height: 1.4;
		letter-spacing: 0.1em;
		font-size: 14px;
		min-height: unset;
		margin-bottom: 10px;
	}

	.point-list-title span {
		font-size: 14px;
	}

	.point-list-image {
		margin-bottom: 5px;
	}

	.point-list-text {
		font-size: 10px;
		line-height: 1.6;
		letter-spacing: 0.06em;
		text-align: center;
		margin-top: 7px;
	}


	/* cta ---------------------------------------*/

	.cta-head {
		background: url("../img/bg_inquiry_sp.png") no-repeat center bottom;
		background-size: cover;
	}

	.cta-title {
		padding: 3.2vw 15px 6.2vw;
		font-size: 20px;
		letter-spacing: 0.15em;
	}

	.cta-body {
		padding: 10px 20px 32px;
	}

	.cta-inner {
		max-width: 960px;
		margin: 0 auto;
	}

	.cta-block {
		display: block;
	}

	.cta-mockup {
		display: none;
	}

	.cta-logo {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: row;
		gap: 10px;
	}

	.cta-logo-image {
		width: 62px;
	}

	.cta-logo-title {
		gap: 2px;
		align-items: flex-start;
	}

	.cta-logo-title b {
		font-size: 11.5px;
		letter-spacing: 0.12em;
	}

	.cta-logo-title span {
		font-size: 9.5px;
		letter-spacing: 0.15em;
	}

	.cta-btn-wrapper {
		margin: 12px auto 8px;
	}

	.cta-btn {
		width: 230px;
		padding: 9.5px 10px;
		font-size: 16px;
		letter-spacing: 0.15em;
		border-radius: 4px;
		box-shadow: 3.5px 3.5px 0 #299655;
	}

	.cta-btn:hover {
		box-shadow: 3.5px 3.5px 0 #299655;
		transform: translate(0,0);
	}

	.cta-btn::after {
		width: 12px;
		height: 12px;
		right: 7px;
	}

	.cta-btn-inner {
		gap: 7px;
	}

	.cta-btn-inner::before {
		width: 21px;
		height: 21px;
	}

	.cta-notice {
		font-size: 8px;
		line-height: 1.5;
		text-align: left;
		letter-spacing: 0.04em;
		max-width: 220px;
		margin: 0 auto;
	}

}