@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');





/**
 * 共通
 */
html,
body{
	font-family: 'Noto Sans JP', serif;
	font-optical-sizing: auto;
	font-size: 16px;
	color: #1a1a1a;
	/* 100 Thin, 200 ExtraLight, 300 Light, 400 Regular, 500 Medium, 600 SemiBold, 700 Bold, 800 ExtraBold, 900 Black */
	font-weight: 500;
	line-height: 2;
	font-style: normal;
	background-color: #ffffff;
	position: relative;
	overflow-x: hidden;
	scroll-behavior: smooth;
}
.poppins{
	font-family: "Poppins", serif;
	font-weight: 600;
	font-style: normal;
}
.inner{
	width: 90vw;
	margin: 0 auto;
}
section.form .inner{
	width: 560px;
}
.nonei{
	display: none!important;
}
.flex{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.ais{
	align-items: stretch;
}
.aifs{
	align-items: flex-start;
}
.aife{
	align-items: flex-end;
}
.jcsb{
	justify-content: space-between;
}
.jce{
	justify-content: end;
}
.jcc{
	justify-content: center;
}
.center{
	text-align: center;
}
.right{
	text-align: right;
}
.pore{
	position: relative;
}
.hv_pink{
	transition: .4s;
}
.hv_pink:hover{
	color: #FF6364!important;
}
@media screen and (max-width: 768px){
	section.form .inner{
		width: 90vw;
	}
}





/**
 * テキスト
 */
section.renewal{
	padding: 80px 0 40px 0;
}
section.thanks{
	padding: 80px 0 120px 0;
}
section.renewal h1 span.txt{
	display: block;
	font-size: 40px;
	margin-bottom: 28px;
	position: relative;
}
section.renewal h1 span.txt span.yellow{
	color: #ffb200;
}
section.renewal h1 span.txt span.red{
	color: #ff6364;
}
section.renewal h1 span.txt span.green{
	color: #57e650;
}
section.renewal h1 span.txt span.blue{
	color: #00e1ff;
}
section.renewal .txts,
section.thanks .txts{
	margin-bottom: 16px;
}
section.renewal .txts p,
section.thanks .txts p{
	font-size: 16px;
	letter-spacing: calc(16px * 0.1);
	margin-bottom: 24px;
}
section.renewal .txts p:last-child,
section.thanks .txts p:last-child{
	margin-bottom: 0;
}
section.renewal .tel a,
section.thanks .tel a{
	display: block;
	font-size: 24px;
	letter-spacing: calc(24px * -0.02);
	line-height: 1.25;
	position: relative;
	pointer-events: none;
}
section.renewal .tel a:before,
section.thanks .tel a:before{
	position: absolute;
	content: '';
	width: 30px;
	height: 30px;
	top: 50%;
	left: 0;
	transform: translate(-100%, -50%);
	background-image: url('../images/icon_tel.svg');
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 24px;
}
section.renewal .tel p,
section.thanks .tel p{
	width: 100%;
	font-size: 12px;
	letter-spacing: calc(12px * 0.1);
	font-weight: 400;
	line-height: 1.25;
}
section.renewal img.logo,
section.thanks img.logo{
	display: block;
	width: 240px;
	height: calc(240px * (60 / 240));
	margin: 32px auto 0 auto;
}
@media screen and (max-width: 768px){
	section.renewal{
		padding: 20.51vw 0 10.26vw 0;
	}
	section.thanks{
		padding: 20.51vw 0 30.77vw 0;
	}
	section.renewal h1 span.txt{
		font-size: 8.21vw;
		margin-bottom: 7.18vw;
	}
	section.renewal .txts,
	section.thanks .txts{
		margin-bottom: 16.41vw;
	}
	section.renewal .txts p,
	section.thanks .txts p{
		font-size: 4.1vw;
		letter-spacing: calc(4.1vw * 0.1);
		text-align: left;
		margin-bottom: 6.15vw;
	}
	section.renewal .tel a,
	section.thanks .tel a{
		font-size: 6.15vw;
		letter-spacing: calc(6.15vw * -0.02);
		pointer-events: auto;
	}
	section.renewal .tel a:before,
	section.thanks .tel a:before{
		width: 7.69vw;
		height: 7.69vw;
		background-size: 6.15vw;
	}
	section.renewal .tel p,
	section.thanks .tel p{
		font-size: 3.08vw;
		letter-spacing: calc(3.08vw * 0.1);
	}
	section.renewal img.logo,
	section.thanks img.logo{
		width: 51.28vw;
		height: calc(51.28vw * (60 / 240));
		margin: 5.13vw auto 0 auto;
	}
}





/**
 * フォーム
 */
section.form{
	padding: 40px 0 120px 0;
}
section.form ul.form_lists{
	margin-bottom: 40px;
}
section.form ul.form_lists li.form_list{
	margin-bottom: 12px;
}
section.form ul.form_lists li.form_list:last-child{
	margin-bottom: 0;
}
section.form ul.form_lists li.form_list dl dt{
	margin-bottom: 8px;
}
section.form ul.form_lists li.form_list dl dt p,
section.form ul.form_lists li.form_list dl dt span.must{
	font-size: 16px;
}
section.form ul.form_lists li.form_list dl dt span.must{
	display: block;
	font-size: 12px;
	color: #fff;
	font-weight: 400;
	padding: 0 4px;
	border-radius: 4px;
	background-color: #ff6364;
	margin-left: 4px;
}
section.form ul.form_lists li.form_list dl dd input[type="text"],
section.form ul.form_lists li.form_list dl dd textarea{
	display: block;
	width: 100%;
	font-size: 16px;
	padding: 4px 12px;
	border-radius: 4px;
	background-color: #fff;
	outline: 1px solid #d2d2d2;
	transition: .4s;
}
section.form ul.form_lists li.form_list dl dd input[type="text"].act,
section.form ul.form_lists li.form_list dl dd textarea.act,
section.form ul.form_lists li.form_list dl dd input[type="text"]:focus,
section.form ul.form_lists li.form_list dl dd textarea:focus{
	outline: 1px solid #1a1a1a;
}
section.form ul.form_lists li.form_list dl dd input[type="text"]::placeholder,
section.form ul.form_lists li.form_list dl dd textarea::placeholder{
	color: #ebebeb;
}
section.form ul.form_lists li.form_list dl dd ul.radio_lists li label{
	display: block;
}
section.form ul.form_lists li.form_list dl dd ul.radio_lists li label input[type="radio"]{
	display: none;
}
section.form ul.form_lists li.form_list dl dd ul.radio_lists li{
	margin: 0 4px 4px 0;
}
section.form ul.form_lists li.form_list dl dd ul.radio_lists li label p{
	font-size: 16px;
	color: #d2d2d2;
	padding: 4px 12px;
	border-radius: 4px;
	background-color: #fff;
	outline: 1px solid #d2d2d2;
	transition: .4s;
}
section.form ul.form_lists li.form_list dl dd ul.radio_lists li label:has(input[type="radio"]:checked) p,
section.form ul.form_lists li.form_list dl dd ul.radio_lists li label p:hover{
	color: #1a1a1a;
	outline: 1px solid #1a1a1a;
}
section.form button{
	display: block;
	width: 100%;
	font-size: 16px;
	color: #fff;
	padding: 4px 12px;
	border-radius: 4px;
	background: linear-gradient(to right, #FF6364, #FFB200);
	outline: 1px solid #FF6364;

	pointer-events: none;
	filter: grayscale(100%);
}
section.form button.act{
	pointer-events: auto;
	filter: grayscale(0%);
}
@media screen and (max-width: 768px){
	section.form{
		padding: 10.26vw 0 30.77vw 0;
	}
	section.form ul.form_lists{
		margin-bottom: 10.26vw;
	}
	section.form ul.form_lists li.form_list{
		margin-bottom: 3.08vw;
	}
	section.form ul.form_lists li.form_list dl dt{
		margin-bottom: 2.05vw;
	}
	section.form ul.form_lists li.form_list dl dt p,
	section.form ul.form_lists li.form_list dl dt span.must{
		font-size: 4.1vw;
	}
	section.form ul.form_lists li.form_list dl dt span.must{
		font-size: 3.08vw;
		padding: 0 1.03vw;
		border-radius: 1.03vw;
		margin-left: 1.03vw;
	}
	section.form ul.form_lists li.form_list dl dd input[type="text"],
	section.form ul.form_lists li.form_list dl dd textarea{
		font-size: 16px;
		padding: 1.03vw 3.08vw;
		border-radius: 1.03vw;
	}
	section.form ul.form_lists li.form_list dl dd ul.radio_lists li{
		margin: 0 1.03vw 1.03vw 0;
	}
	section.form ul.form_lists li.form_list dl dd ul.radio_lists li label p{
		font-size: 16px;
		padding: 1.03vw 3.08vw;
		border-radius: 1.03vw;
	}
	section.form button{
		font-size: 4.1vw;
		padding: 1.03vw 3.08vw;
		border-radius: 1.03vw;
	}
}