:root {
	--base-color: #76a242;
	--sub-color: #def0f4;
	--bg-color: #f5fdfb;
	--bg-color: #e2ecd7;
	--btn-color: #ee7a25;
	--font-color: #464646;
	--intro-title-color: #3f9ecd;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: 'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif !important;
	color: var(--font-color);
	margin: 0;
}

h1, h2 {
	padding: 0;
	margin: 0;
	line-height: 1;
}

a {
	text-decoration: none;
}

div {
	box-sizing: border-box;
}

ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

dl, dt, dd {
	padding: 0;
	margin: 0;
}

dl dt {
	font-size: 14pt;
	font-weight: bold;
	text-align: center;
}

img {
	width: auto;
	max-width: 100%;
}

.wrap {
	width: 100%;
	height: 100%;
	max-width: 1200px;
	margin: auto;
	padding: 0 15px;
}

.box-contents {
	display: flex;
	align-items: center;
}

header#id_header {
	padding: 0;
	border-bottom: 1px solid #ddd;
}

h1 {
	line-height: 1;
	color: var(--base-color);
}

nav {
	width: 100%;
	background: #fff;
	border-bottom: 1px solid #ddd;
}

nav.act {
	position: fixed;
	top: 0;
	z-index: 10;
}

header#id_header .box-contents #id_head_contact,
nav #id_nav_contact {
	flex: 1;
}

header #id_head_contact ul {
	text-align: right;
}

header #id_head_contact ul li,
nav ul li {
	display: inline-block;
	vertical-align: middle;
}


header #id_head_contact ul li#id_reception_hours {
	margin-right: 2em;
}
header #id_head_contact ul li#id_reception_hours span {
	display: block;
	font-weight: bold;
	font-size: 10pt;
	text-align: center;
}

header #id_head_contact ul li#id_head_tel a {
	corsor: default;
}

header #id_head_contact ul li#id_head_tel span {
	font-size: 20pt;
	color: var(--base-color);
	font-weight: bold;
}

header #id_head_contact ul li#id_head_mail {
	display: none;
}


nav ul li {
	margin-left: 1em;
}
nav ul li a {
	font-weight: bold;
	color: var(--font-color);
}
nav #id_nav_contact {
	text-align: right;
}

nav #id_nav_contact #id_contact {
	display: inline-block;
	padding: 10px;
	margin: 7px 0;
	color: #fff;
	font-weight: bold;
	background: var(--btn-color);
	border-radius: 8px;
	width: 100%;
	max-width: 150px;
	text-align: center;
	box-sizing: border-box;
}

nav #id_nav_contact #id_contact:hover {
	opacity: 0.8;
}

nav #id_nav_contact #id_m_menu {
	display: none;
}

#id_logo {
	margin-top: 10px;
}

#id_logo img {
	width: 100px;
}


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

#id_main_section {
	height: 430px;
	border-bottom: 1px solid #ddd;
}

#id_main_section.act {
	margin-top: 62px;
}

#id_main {
	display: flex;
	width: 100%;
	height: 100%;

}

#id_title {
	flex-basis: 60%;
	display: flex;
	align-items: center;

}
#id_title > div {
	text-align: center;
	width: 100%;
}

#id_title h2 {
	font-size: 40pt;
	line-height: 1.2;
}

#id_title h2 span {
/*	display: block;*/
}

.button_area a {
	display: inline-block;
	border-radius: 5px;
	padding: 15px 0;
	text-align: center;
	width: 100%;
	max-width: 160px;
	background: var(--btn-color);
	box-sizing: border-box;
	color: #fff;
	font-weight: bold;
}

.button_area a#id_materials {
	background: var(--base-color);
}

.button_area a:hover {
	opacity: 0.8;
}

	#id_main_section .wrap {
		padding-left: 0;
	}
	#id_main {
		background: url(../img/main2.jpg) no-repeat;
		background-size: contain;
		background-position: center left -30px;
	}

#id_service_image {
	flex-basis: 40%;
/*	background: url(../img/main2.jpg) no-repeat;
	background-size: cover;
	background-position: center left;
*/}


section {
	padding: 4em 0;
}
.section:nth-child(odd) {
	background: var(--bg-color);
}

section h2 {
	display: block;
	padding-bottom: 1.5em;
	text-align: center;
	font-size: 36pt;
	color: var(--base-color);
}

section h3 {
	display: block;
	padding: 1.5em 0 0;
	text-align: center;
	font-size: 28pt;
	color: var(--btn-color);
}

.move {
	margin-bottom: 60px;
}

#id_introduce_sect {
	padding-bottom: 0;
}
#id_introduce_sect .content-block {
	text-align: center;
/*
	background: url(../img/bg001.png) no-repeat;
	background-size: 100%;
	background-position: center bottom -250px;
	height: 500px;
*/
}

#id_introduce_sect strong {
	font-size: 30pt;
	color: var(--intro-title-color);
}

#id_introduce_sect .content-block img {
	width: 100%;
	max-width: 500px;
	margin: 3em 0;
}



#id_func_sect .box-contents {
	width: 100%;
	align-items: stretch;
}

#id_func_sect .box-contents div {
	flex-basis: 32%;
	background: #fff;
	box-sizing: border-box;
	padding: 30px 20px 170px;
	border-radius: 20px;
	border: 5px solid var(--base-color);
}

#id_func_sect .box-contents div:first-child {
	background: url(../img/schedule.png) no-repeat, #fff;
	background-size: 75%;
	background-position: center bottom 55px;
}

#id_func_sect .box-contents div:nth-child(2) {
	margin: 0 2%;
	background: url(../img/mail.png) no-repeat, #fff;
	background-size: 70%;
	background-position: center bottom 55px;
}

#id_func_sect .box-contents div:last-child {
	background: url(../img/graph.png) no-repeat, #fff;
	background-size: 70%;
	background-position: center bottom 30px;
}



#id_features_sect .box-contents {
	align-items: stretch;
}

#id_features_sect .box-contents .mobile_image {
	flex-basis: 40%;
	background: url(../img/iphone2.png) no-repeat;
	background-size: 300px;
	background-position: center bottom;
}

#id_features_sect ul {
	list-style-type: disc;
	list-style-position: outside;
	padding-left: 1.4em;
}

#id_features_sect dl {

}
#id_features_sect dl dt {
	text-align: left;
	background: url(../img/icon1.png) no-repeat;
	background-size: 40px;
	background-position: left top;
	height: auto;
	line-height: 45px;
	margin: 1em 0;
	padding: 0 0 8px 55px;
	border-bottom: 1px solid var(--intro-title-color);
	font-size: 20pt;
	color: var(--intro-title-color);
}

#id_features_sect dl dt:first-child {
	margin-top: 0;
}


#id_features_sect ul li {
	margin-bottom: 1em;
}

#id_features_sect ul li:last-child {
	margin-bottom: 0;
}

#id_features_sect ul li strong {
	display: block;
}

#id_features_sect p {
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

.system_image {
	text-align: center;
}

.system_image ul {
	display: inline-block;
	margin-bottom: 2em;
	list-style-type: none !important;
}
#id_features_sect .system_image ul li {
	text-align: left;
	background: url(../img/chk_icon.png) no-repeat;
	background-size: 50px;
	background-position: left center;
	padding-left: 60px;
	font-size: 16pt;
	font-weight: bold;
}

#id_example_sect h2 {
/*	padding-bottom: 1.2em;*/
}

#id_example_sect .system_image ul {
	display: inline-block;
	background: #fff;
	padding: 30px 30px 0;
	border-radius: 20px;
	margin-bottom: 2em;
}

#id_example_sect .system_image ul li {
	margin-bottom: 2em;
}

#id_example_sect .system_image ul li strong {
	display: block;
	font-size: 16pt;
}


#id_price_sect .box-contents {
	display: flex;
	justify-content: center;
	width: auto;
	max-width: 640px;
	margin: auto;
	align-items: stretch;
}

#id_price_sect .box-contents > div {
	flex-basis: 50%;
	background: #fff;
	box-sizing: border-box;
	margin: 0 15px;
	border-radius: 10px;
	border: 1px solid #ddd;
	position: relative;
}
/*
#id_price_sect .box-contents > div:first-child {
	background: url(../img/schedule.png) no-repeat, #fff;
	background-size: 75%;
	background-position: center bottom 55px;
}
*/

#id_price_sect .box-contents > div:first-child dl dt {
	color: var(--btn-color);
}

#id_price_sect dl dt {
	border-radius: 10px 10px 0 0;
	background: #eee;
	padding: 10px 0;
}

#id_price_sect dl dd {
	font-size: 10pt;
	padding: 0 15px 15px;
}
#id_price_sect dl dd strong {
	display: block;
	text-align: center;
	margin: 1em 0 0;
	font-size: 20pt;
}
#id_price_sect dl dd strong span {
	font-size: 10pt;
}
#id_price_sect dl dd p {
	text-align: center;
	font-weight: bold;
	margin: 0 0 1em;
}

#id_price_sect .box-contents div:first-child dl dt {
/*	background: var(--intro-title-color);
	color: #fff;
*/
}

#id_price_sect .rec_index {
	display: inline-block;
	position: absolute;
	top: 37px;
	left: -7px;
	background: url(../img/index.png) no-repeat;
	background-position: left top;
	background-size: 120px;
	width: 105px;
	height: 30px;
	padding: 8px 0 0 24px;
	color: #f4fb1b;
	font-weight: bold;
	font-size: 11pt;
}

#id_price_sect h3 {
	padding: 1em 0 0;
	font-size: 22pt;
}

#id_price_sect .box-contents > div.option:first-child dl dt {
	color: var(--font-color);
}





#id_contact_sect h2 span:before {
	content: "・";
}

.cont {
	width: 100%;
	max-width: 520px;
	margin: auto;
	background: #fff;
	padding: 40px;
	border-radius: 10px;
	box-shadow: 1px 1px 2px #ddd;
	box-sizing: border-box;
}

form {
	width: 100%;
	margin: auto;
}

form ul li {
	display: flex;
	margin-bottom: 1em;
	align-items: center;
}

form ul li span {
	width: 160px;
	text-align: right;
	padding-right: 20px;
	font-size: 11pt;
	font-weight: bold;
}
form ul li span.must:before {
	content: "*";
	color: #c00;
}

form ul li div {
	flex: 1;
}

form ul li div input, form ul li div textarea {
	width: 100%;
	padding: 8px;
	box-sizing: border-box;
	font-family: 'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif !important;
	font-size: 10pt;
}

form ul li div textarea {
	height: 200px;
}

form ul li div input {
	max-width: 180px;
}

form button,
#id_contact_sect .cont a {
	background: var(--base-color);
	padding: 15px 0;
	width: 130px;
	border: none;
	border-radius: 8px;
	margin: 2em auto 0;
	display: block;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	text-align: center;
	font-size: 11pt;
}

form button:hover {
	opacity: 0.8;
}

#id_contact_sect .cont > strong {
	display: block;
	color: var(--base-color);
	text-align: center;
	margin: 0 auto 1.5em;
	font-size: 16pt;
}



#id_foot_menu {
	display: none;
}

footer {
	background: var(--base-color);
	text-align: center;
}
footer p {
	margin: 0;
	padding: 1em 0;
	color: #fff;
	font-size: 10pt;
}



@media (max-width: 840px){
	#id_features_sect .box-contents .mobile_image {
		background-size: 240px;
		background-position: center top;
	}
}

@media (max-width: 768px){
	body {
		font-size: 10pt;
	}

	header h1 {
		font-size: 16pt;
	}
	header #id_head_contact ul li#id_reception_hours {
		margin-right: 1em;
	}
	header #id_head_contact ul li#id_head_tel a {
		display: inline-block;
		width: 36px;
		height: 36px;
		background: url(../img/tel_icon.png) no-repeat, var(--base-color);
		background-size: 24px;
		background-position: center;
		border-radius: 5px;
	}
	header #id_head_contact ul li#id_head_tel span {
		display: none;
	}
	header #id_head_contact ul li#id_head_mail {
		display: inline-block;
	}
	header #id_head_contact ul li#id_head_mail a {
		background: url(../img/mail_icon.png) no-repeat, var(--btn-color);
		background-position: center;
		width: 36px;
		height: 36px;
		border-radius: 5px;
		background-size: 24px;
		margin-right: 10px;
		display: inline-block;
	}

	nav #id_nav_contact {
		flex: 1;
	}

	nav #id_nav_contact #id_contact,
	#id_navigation .wrap.box-contents > ul {
		display: none;
	}


	nav #id_nav_contact #id_m_menu {
		display: block;
	}
	
	/* Hamburger menu */
	#id_navigation .wrap.box-contents {
		position: relative;
	}
	.menu {
		list-style: none;
		position: absolute;
		width: 100%;
		height: auto;
		top: 0;
		left: 0;
		margin-top: 54px;
		padding: 0;
		clear: both;
		background: var(--background-navbar);
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
		transform: scale(1, 0);
		transform-origin: top;
		border-top: 1px solid #ddd;
	}
	
	/* Hamburger menu button */
	.menu-btn:checked ~ .menu {
		transform: scale(1, 1);
		transform-origin: top;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	}
	
	.menu-btn:checked ~ .menu::after {
		content: "";
		background: rgba(0,0,0,0.8);
		display: block;
		width: 100%;
		height: 100vh;
	}
	
	/* Hamburger menbu text */
	.menu a {
		text-decoration: none;
		font-weight: bold;
		letter-spacing: 2px;
		font-size: 16px;
		text-transform: capitalize;
		color: var(--font-color);
		opacity: 0;
		transition: 0.5s;
		padding: 15px 10px;
		text-align: left;
		display: block;
	}
	
	.menu li {
		border-bottom: 1px solid #ddd;
		padding: 0;
		margin: 0;
		opacity: 0;
		transition: 0.5s;
		display: block;
		background: url(../img/arr.png) no-repeat, #fff;
		background-position: right 5px center;
		background-size: 40px;
	}
	
	.menu-btn:checked ~ .menu a,
	.menu-btn:checked ~ .menu li {
		opacity: 1;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
	}
	
	.menu-btn {
		display: none;
	}
	
	.menu-icon {
		display: inline-block;
		position: relative;
		cursor: pointer;
		padding: 24px 14px;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		top: 3px;
		right: -9px;
	}
	
	.navicon {
		background: #ddd;
		display: block;
		height: 3px;
		width: 26px;
		position: relative;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	}
	
	.navicon:before,
	.navicon:after {
		content: "";
		display: block;
		height: 100%;
		width: 100%;
		position: absolute;
		background: #ddd;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	}
	
	.navicon:before {
		top: 9px;
	}
	
	.navicon:after {
		bottom: 9px;
	}
	
	/* Hamburger Menu Animation Start */
	.menu-btn:checked ~ .menu-icon .navicon:before {
		transform: rotate(-45deg);
	}
	
	.menu-btn:checked ~ .menu-icon .navicon:after {
		transform: rotate(45deg);
	}
	
	.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
		top: 0;
	}
	.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
		bottom: 0;
	}

	.menu-btn:checked ~ .menu-icon .navicon {
		background: rgba(0, 0, 0, 0);
		transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	}
	/* Hamburger Menu Animation End */

	/* Navbar Container */
	.navtext-container {
		width: 100%;
		height: 52px;
		position: absolute;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* Navbar Text */
	.navtext {
		position: absolute;
		text-transform: uppercase;
		color: #ddd;
		letter-spacing: 4px;
		font-size: 20px;
	}





	#id_main_section {
		height: 260px;
	}
	#id_main_section .wrap {
		padding-left: 0;
	}
	#id_main {
		background: url(../img/main2.jpg) no-repeat;
		background-size: cover;
		background-position: center left -60px;
	}
	
	#id_service_image {
		background: none;
	}
	#id_title h2 {
		font-size: 20pt;
	}




	#id_introduce_sect strong {
		font-size: 16pt;
	}


	section h2 {
		font-size: 24pt;
		margin-bottom: 1em;
		padding: 0;
	}

	#id_func_sect .box-contents,
	#id_features_sect .box-contents {
		flex-direction: column;
	}
	
	#id_func_sect .box-contents div:nth-child(2) {
		margin: 1em 0;
	}
	
	#id_features_sect .box-contents .mobile_image {
		display: none;
	}

	#id_features_sect .system_image ul {
		paddng: 0;
	}
	#id_features_sect .system_image ul li {
		font-size: 12pt;
	}

	#id_features_sect dl dt {
		font-size: 14pt;
		padding-left: 46px;
		margin-bottom: 0.5em;
	}

	section h3 {
		font-size: 20pt;
		margin: 0 0 1em;
	}

	#id_foot_menu {
		display: block;
		height: 80px;
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	#id_foot_menu:after {
		content: "";
		background: rgba(0,0,0,0.8);
		display: block;
		width: 100%;
		height: 80px;
		position: fixed;
		bottom: 0;
		z-index: -1;
	}

	#id_foot_menu ul {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 80px;
	}
	#id_foot_menu ul li {
		margin: 0 5px;
		flex-basis: 40%;
	}
	#id_foot_menu ul li a {
		display: block;
		background: var(--btn-color);
		text-align: center;
		border-radius: 5px;
		font-weight: bold;
		color: #fff;
		line-height: 50px;
	}
	#id_foot_menu ul li:last-child a {
		background: var(--base-color);
	}
	#id_foot_menu ul li:last-child a span {
		display: inline-block;
		background: url(../img/tel_icon.png) no-repeat;
		background-position: center left;
		background-size: 20px;
		padding-left: 22px;
	}
}

@media (max-width: 600px){
	#id_title h2 {
		margin-bottom: 1em;
	}
	#id_title p {
		display: none;
	}

	#id_price_sect .box-contents {
		flex-direction: column;
	}
	#id_price_sect .box-contents > div {
		margin: 0 0 1em;
	}

	form ul li {
		align-items: stretch;
		flex-direction: column;
	}
	form ul li span {
		width: auto;
		text-align: left;
		padding-bottom: 5px;
	}

}

@media (max-width: 414px){

	section h3 {
		font-size: 18pt;
	}
	
	#id_example_sect .system_image ul {
		display: block;
		padding: 30px 30px 10px;
	}

	#id_contact_sect h2 {
		line-height: 1.4;
	}
	#id_contact_sect h2 span {
		display: block;
	}
	
	#id_contact_sect h2 span::before {
		content: "";
	}
	
}