@charset "UTF-8";

@import "_more_modern";

$base-font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;


$isBasefontsize: 62.5%; //16px base/
$isBreakpointSP: 768px; //768px
$isBreakpointSPonly: 767px;
$isBreakpointiPad: 767px;
$isBreakpointTablet: 1024px;
$isBreakpointPC: 1024px;
$contentsWidth: 95%;
$contentsWidthPC: 1024px;
$maxContentsWidth: 1200px;
//@media screen and (max-width: $isBreakpointSP) {}
//@media screen and (min-width: $isBreakpointTablet) {}
//@media screen and (min-width: $isBreakpointPC) {}



$telbtn: #329F30;
$mainColor: #008741;
$subColor: #7b8781;
$headerline: #008741;
$grd: linear-gradient(0deg, rgba(23, 149, 56, 1) 0%, rgba(161, 201, 16, 1) 100%);
$baseColor:#F2F9F2;
$radio:#008741;
//$radio:#62B122;
$confirmlist:#e5f1e5;

@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined);


/* ========================================================================= */
html {
	// font-size: $isBasefontsize;
	// font-weight: 700;
	//height: 100%;
	// overflow-x: hidden;
	// scroll-padding-top: 100px;
	// scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: $base-font;
	//font-size: 1.6rem;
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;

}

header {
	border-top: 8px solid $headerline;
	h1{
		max-width: 1000px;
		
		line-height: 1;
		margin:15px auto;
		img{
			width:280px;
		}
		@media screen and (max-width: $isBreakpointSP) {
			padding:0 10px;
			img{
				width: 60%;
			}
		}
	}
}

footer {
	background: $mainColor;
	color: #fff;
	padding: 20px;
	text-align: center;
	font-size: 0.75em;
}

/* ========================================================================= */
.title {
	
	background: $mainColor;
	max-width: 100%;
	color: #fff;
	padding: 20px;
    margin-bottom:2em;


	@media screen and (max-width: $isBreakpointSP) {
		padding: 10px;
	}
	line-height: 1;
	h1{
		font-size: 24px;
		max-width: 1000px;
		margin:0 auto;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 20px;
		@media screen and (max-width: $isBreakpointSP) {
			column-gap: 10px;
			font-size: 20px;
		}
		align-items: center;
		&:before {
			content: "";
			display: inline-block;
			width: 5px;
			height: 1em;
			background: #fff;
		}
	}




}
/* CTA ========================================================================= */
.telbtn {
	background: #329F30;
	color: #fff;
	text-align: center;
	display: inline-block;
	text-decoration: none;
	margin:40px auto;
	display: block;
	border-radius: 50px;
	padding:20px 0;
	width:95%;
	div{
		font-size: 1.2em;
		font-weight: bold;
	}
}

//cta-SP
.cta-sp{
	display: none;
}
@media screen and (max-width: $isBreakpointSP) {
	.cta-sp{
		display: block;
		margin: 20px auto;
	}
	.cta-pc{
		display: none;
	}
}
//cta-PC
.cta-pc{
	color: $mainColor;
	margin: 40px auto;
	max-width: 1000px;
	background: #F4F4F4;
	padding:20px;
	text-align: center;
	.freedaial{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		gap:10px;
		font-size: 2.4rem;
		font-weight: bold;
		margin:10px auto;
		img{
			height: 1em;
			width:auto;
		}
	}
}

//bnrArea
.bnrArea{
	margin: 40px auto;
	img{
		margin:0 auto;
	}
}

section {
	margin: 0 auto;

	max-width: 1000px;

	h2 {
		background: $mainColor;
		padding: 0.5em 1em;
		font-size: 1.2em;
		color: #fff;
	}
	h2.sub{
		background: $subColor;
	}
}


.formArea {
	background: $baseColor;
	max-width: 1000px;
	margin: 0 auto 20px auto;
	padding-bottom:10px;
}
.note{
	font-size: 0.85em;
	font-weight: normal;
}
.required {
	background: #fff;
	border: 1px solid red;
	color: red;
	line-height: 1;
	display: inline-block;
	font-size: 0.85em;
	padding: 0.25em 0.75em;
	margin-left: 20px;
	font-weight: normal;
}

.optional {
	background: #fff;
	border: 1px solid #3D993F;
	color: #3D993F;
	line-height: 1;
	display: inline-block;
	font-size: 0.85em;
	padding: 0.25em 0.75em;
	margin-left: 20px;
	font-weight: normal;
}


.btnArea {
	text-align: center;
	margin: 40px auto;

	button{
		border: 1px solid #0071BE;
		border-radius: 6px;
		background: #0071BE;
		color:#fff;
		padding:1.5em 1em;
		margin-bottom:1em;
	}
	
	.btngrid{
		display: grid;
		margin:0 auto;
		grid-template-columns: auto auto;
		gap:20px;
		@media screen and (max-width: $isBreakpointSP) {
			grid-template-columns: 1fr;
			justify-content: center;
			width:90%;
			gap:10px;
		}
		
		justify-content: center;
		button{

			min-width: 12em;
			@media screen and (max-width: $isBreakpointSP) {
			}
			border:none;
			&:hover{
				cursor: pointer;
			}
		}
	}
	.btn-mod{
		background: #707070;
		color: #fff;
		@media screen and (max-width: $isBreakpointSP) {
			order: 1;
		}
	}
	
	
	.privacy{
		font-size: 0.9em;
		color: #333;
	}
}


input[type=text],
input[type=number]{
	border: 1px solid #ccc;
	background: #fff;
	padding:10px 8px;
	width: 100%;
}

select{
	border: 1px solid #ccc;
	background: #fff;
	padding:5px;
	cursor: pointer;
}

textarea{
	field-sizing: content;
  min-width: 100%;
	padding:8px;
  // min-height: min-content;
	border:1px solid #ccc;
}



//チェックボックス
.checklist{
	display: grid;
	grid-template-columns: 1fr;
	gap:10px;
	margin:0 auto;
	padding:40px;
	list-style: none;
	@media screen and (max-width: $isBreakpointSP) {
		padding:20px;
	}
}

input[type=checkbox]{
	display: none;
}

input[type=checkbox]+label{
	color:#333;
	cursor: pointer;
	position: relative;
	padding:5px;
	&:before{
		position: relative;
		top:8px;
		display: inline-block;
		content: " ";
		background: #fff;
		width:30px;
		height: 30px;
		border:1px solid #ccc;
		margin-right: 5px;
	}
}

input[type=checkbox]:checked+label{
	&:before{
		background: $mainColor;
	}
	&:after{
		position: absolute;
		top:2px;
		left: 5px;
		font-family: "Material Symbols Outlined";
		content: "\e5ca";
		color:#fff;
		font-size: 1.8em;
	}
}



//ラジオボタン

.radiolist{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 220px));
	justify-content: center;
	gap:20px;
	margin:0 auto;
	padding:40px;
	list-style: none;
	text-align: center;
	@media screen and (max-width: $isBreakpointSP) {
		padding:20px;
	}
}


input[type=radio]{
	display: none;
}

input[type=radio]+label{
	display: block;
	width: 100%;
	cursor: pointer;
	background: #fff;
	border:1px solid $mainColor;
	padding:1em 0.5em;
	color: $mainColor;
}

input[type=radio]:checked+label{
	background: $radio;
	border:1px solid $radio;
	color: #fff;
}

.infolist{
	margin:0 auto;
	padding:40px;
	display: grid;
	grid-template-columns: auto 1fr;
	
	row-gap: 30px;
	column-gap: 20px;
	align-items: center;
	@media screen and (max-width: $isBreakpointSP) {
		grid-template-columns: 1fr;
		row-gap: 5px;
		padding:20px;
		>dd{
			margin-bottom:20px;
		}
	}
	.zipcode{
		display: grid;
		grid-template-columns: 10em auto;
		justify-content: start;
		gap:20px;
		button{
			border:1px solid #aaa;
			background: #eee;
			&:hover{
				cursor: pointer;
			}
		}
	}
}
.childname{
	align-self: self-start;
}

.infolist-sub{
	display: grid;
	grid-template-columns: auto 1fr 1fr ;
	align-items: center;
	row-gap: 15px;
	column-gap: 10px;
}

.opttxt{
	margin:0 auto;
	padding:40px;
	@media screen and (max-width: $isBreakpointSP) {
		padding:20px;
	}
}

.opt-title{
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: center;
	&:after{
		display: inline-block;
		font-family: "Material Icons Outlined";
		
		content: "\e15b";//minus
		text-align: right;
		font-weight: normal;
		
	}
}
.optform{
	display: none;
}
.opt-title:hover{
	cursor: pointer;
}
.opt-title:after {
	padding-bottom: 3px;
	margin-right: 0;
	margin-left:auto;
	border-radius: 50%;
	text-align: center;
	width: 1em;
	height: 1em;
	background: #fff;
	color: $subColor;
	font-size: 2rem;
	font-family: "Material Symbols Outlined";
	content: "\e145";
	line-height: 1;
	
}

.selected:after{
	content: "\e15b";

}
.invalid{
	background: #ffcccc !important;
}
.errmsg{
	color: red;
	font-weight: normal;
	font-size: 1rem;
	margin-left:5px;
	background: #ffcccc;
	display: inline-block;
	padding:3px 5px;
	line-height: 1;
}
h2{
	.errmsg{
		background: #ffcccc;
		padding:1px 3px;
		color: red;
		font-weight: normal;
		font-size: 1rem;
		margin-left:5px;
		line-height: 1;
	}
}

input[type=checkbox].invalid+label{
	&:before{
		background: #ffcccc;
	}
	
}

.confirm{
	margin:40px auto;
	p{
		width: 90%;
		margin:20px auto;
		text-align: center;
		@media screen and (max-width: $isBreakpointSP) {
		text-align: left;
		}
	}
}
.confirmmsg{
	color:$mainColor;
	text-align: center;
	font-weight: bold;
	font-size: 1.5em;
}

.confirmlist{
	max-width: 1000px;
	margin:40px auto;
	dt{
		background: $confirmlist;

	}
	dt,dd{
		padding:20px;
	}
}

//done
.done{
	max-width: 1000px;
	margin:40px auto;
	text-align: center;
	@media screen and (max-width: $isBreakpointSP) {
		width: 90%;
		text-align: left;
	}

	.thanks{
		font-size: 1.5rem;
		color: $mainColor;
		font-weight: bold;
	}
	p{
		margin-bottom:2em;
	}
}

.btn-return{
	background: #0071BE;
	color: #fff;
	display: block;
	text-decoration: none;
	padding:1em;
	text-align: center;
	border-radius: 6px;
	margin:40px auto 20px auto;
	max-width: 12em;
	@media screen and (max-width: $isBreakpointSP) {
		max-width: 90%;
	}
}



.phone-area{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	column-gap:40px;
	@media screen and (max-width: $isBreakpointSP) {
		grid-template-columns: 1fr;
		row-gap: 30px;
		margin:40px auto;
	}
	margin: 40px auto 60px auto;
	padding:0 20px;

	div a{
		text-decoration: none !important;
	}

}

.phoneto{
	border-bottom:2px solid $mainColor;
	color: $mainColor;
	text-align: center;
	font-size: 1.3em;
	padding-bottom: 5px;
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	font-weight: bold;
	margin: 0 auto;
	@media screen and (max-width: $isBreakpointSP) {
		width: max-content;
		padding-left:2em;
		padding-right:2em;
	}

}


.p-color1{
	color: #063B7D;
	border-color: #063B7D;
}
.p-color2{
	color: #008244;
	border-color: #008244;
}
.p-color3{
	color: #EA5514;
	border-color: #EA5514;
}



.phone-num{
width: max-content;
margin:10px auto;
font-size: 2em;
display: grid;
grid-template-columns: auto 1fr;
gap:5px;
font-weight: bold;
line-height: 1;
color: #333;
font-family: arial;


}

.phone-num img{
	height:1em;
	width: auto;
	

}
.reception{
text-align: center;
font-size: 0.8em;
}

.info-m{
	margin:30px auto;
	max-width: 90%;
}