/* ==================================================
	common
================================================== */

/* ----------------------------------------
	color
---------------------------------------- */

.color100 { background: #f0bb5a !important; }
.color90 { background: #f1c26a !important; }
.color80 { background: #f3c97b !important; }
.color70 { background: #f4cf8b !important; }
.color60 { background: #f6d69c !important; }
.color50 { background: #f7ddac !important; }
.color40 { background: #f9e4bd !important; }
.color30 { background: #faeacd !important; }
.color20 { background: #fcf1de !important; }
.color10 { background: #fdf8ee !important; }



/* ----------------------------------------
	cont_wrap
---------------------------------------- */

@media screen and (min-width: 1024px) {
	.cont_wrap {
		padding-top: 60px;
	}
}



/* ----------------------------------------
	p
---------------------------------------- */

.main_content div + p,
.main_content ul + p,
.main_content ol + p,
.main_content img + p {
	margin-top: 1em;
}



/* ----------------------------------------
	a
---------------------------------------- */

.content a {
	color: #000;
	text-decoration: underline;
}
.content a:hover {
	text-decoration: none;
}



/* ----------------------------------------
	title
---------------------------------------- */

.title {
	padding: 25px 20px;
	border-bottom: 1px solid #000;
}

@media screen and (min-width: 768px) {
	.title {
		padding-right: 30px;
		padding-left: 30px;
	}
}



/* ----------------------------------------
	lineBox2
---------------------------------------- */

.lineBox2 {
	margin: 0 -10px;
}
.lineBox2_module {
	margin-top: 20px;
	padding: 0 10px;
}
.lineBox2_module .inner {
	height: 100%;
	border: 1px solid #000;
}
.lineBox2_module .title_area {
	display: flex;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid #000;
}
.lineBox2_module .text_area {
	padding: 20px;
}

@media screen and (min-width: 768px) {
	.lineBox2 {
		display: flex;
		flex-wrap: wrap;
	}
	.lineBox2_module {
		width: 50%;
	}
}





/* ==================================================
	local_navi
================================================== */

@media screen and (max-width: 1023px) {
	.local_navi_trigger {
		display: flex;
		align-items: center;
		min-height: 62px;
	}
	.local_navi_trigger::before {
		color: #000;
	}
	.local_navi_trigger h2 {
		padding: 10px 0;
		font-size: 20px;
		font-weight: normal;
		line-height: 1.2;
	}
	.local_navi_menu > h2 {
		display: none;
	}
	.local_navi_menu_level1 > li {
		background: #fff;
		border-color: #e8e8e8;
	}
	.local_navi_menu_level1 > li a {
		color: #000;
	}
	.local_navi_menu_level1 > li a br {
		display: none;
	}
	.local_navi_menu_level1 > li > a:not(:only-child) {
		border-color: #e8e8e8;
	}
	.local_navi_menu_level1 > li.local_navi_level2_open {
		background: #fff;
	}
	.local_navi_menu_level2 > li {
		background: rgba(243,243,243,1);
		border-top: none;
	}
	.local_navi_level2_trigger::after {
		color: #000;
	}
}

@media screen and (min-width: 1024px) {
	.local_navi {
		right: 50%;
		left: 50%;
		width: 100vw;
		margin-right: -50vw;
		margin-left: -50vw;
		padding: 0 20px;
		background: #fff;
	}
	.local_navi .local_navi_menu {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		max-width: 1220px;
		margin: 0 auto;
	}
	.local_navi_menu a {
		color: #000;
	}
	.local_navi_menu > h2,
	.local_navi_menu > h2 a {
		color: #000;
		font-size: 20px;
		font-weight: normal;
		line-height: 1;
		text-decoration: none;
		margin: 0;
	}
	.local_navi_menu > h2 a:hover {
		text-decoration: underline;
	}
	.local_navi_menu_level1 {
		display: flex;
		justify-content: space-between;
	}
	.local_navi_menu_level1 > li:nth-of-type(n+2) {
		margin-left: 30px;
	}
	.local_navi_menu_level1 > li.main_menu {
		height: 70px;
	}
	.local_navi_menu_level1 > li.main_menu > a {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		height: 100%;
		color: #000;
		line-height: 1.4;
	}
	.local_navi_menu_level1 > li.current::after,
	.local_navi_menu_level1 > li.main_menu > a:hover::after {
		display: block;
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 4px;
		background: #165dba;
	}

	/* level2 -------------------- */
	.local_navi_menu_level2_area {
		top: 100%;
		left: -20px;
	}
	.local_navi_menu_level2 {
		min-width: 300px;
		background: #fff;
		border: 1px solid #e8e8e8;
		box-shadow: 0 12px 12px 0 rgb(0 0 0 / 20%);
	}
	.local_navi_menu_level2 li a {
		display: block;
		padding: 10px 20px;
		text-align: left;
		transition: .2s;
		white-space: nowrap;
	}
	.local_navi_menu_level2 li a:hover {
		color: #165dba;
		text-decoration: none;
		background: #e6fcff; /*rgba(44,48,56,.05)*/
	}
}



/* ----------------------------------------
	main_menu_btn
---------------------------------------- */

.local_navi .main_menu_btn {
	padding: 1.2rem 1.6rem;
	text-align: center;
}
.local_navi .main_menu_btn .button {
	display: inline-block;
	width: 200px;
	background: #165dba;
}
.local_navi .main_menu_btn .button:hover {
	background: #114a94;
}

@media screen and (min-width: 1024px) {
	.local_navi .main_menu_btn {
		align-self: center;
		position: relative;
		padding: 0;
		margin-left: auto;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.local_navi .main_menu_btn .button {
		width: auto;
	}
}





/* ==================================================
	main
================================================== */

.main {
	background: #faeacd;
}
.main .img_area {
	position: relative;
}
.main .img_area img {
	object-fit: cover;
	object-position: 28%;
	width: 100%;
	height: 385px;
}
.main .heading {
	background: #f0bb5a;
}
.main .text_area .inner {
	padding: 20px;
}
.main .copy > .inner p {
	font-size: 20px;
	line-height: 24px;
}
.main .logo {
	padding: 60px 0 40px;
}

@media screen and (min-width: 768px) {
	.main .text_area .inner {
		padding-right: 30px;
		padding-left: 30px;
	}
	.main .img_area img {
		height: 400px;
	}
}

@media screen and (min-width: 1280px) {
	.main > .inner {
		display: flex;
	}
	.main .text_area {
		width: auto;
	}
	.main .text_area .inner {
		width: 440px;
		margin-left: calc(50vw - (610px + 30px));
	}
	.main .img_area {
		width: auto;
		max-width: 1053px;
	}
	.main .img_area img {
		object-position: left;
		height: 100%;
	}
	.main .logo {
		padding: 80px 0 60px;
	}
}

@media screen and (min-width: 1920px) {
	.main .text_area .inner {
		width: calc(486px + 60px);
	}
}





/* ==================================================
	overview
================================================== */

/* ----------------------------------------
	merit
---------------------------------------- */

.merit {
	display: flex;
}
.merit .img_area img {
	width: auto;
	max-width: 100%;
}

@media screen and (max-width: 1023px) {
	.merit {
		flex-direction: column-reverse;
	}
	.merit .img_area {
		margin-top: 30px;
	}
}

@media screen and (min-width: 1024px) {
	.merit {
		justify-content: space-between;
	}
	.merit .img_area {
		width: calc(50% - 15px);
	}
	.merit .text_area {
		width: calc(50% - 15px);
	}
}

@media screen and (min-width: 1280px) {
	.merit .img_area {
		width: 707px;
	}
	.merit .text_area {
		width: 483px;
	}
}


/* merit_cont -------------------- */

.merit_cont {
	padding: 20px 0px;
	
}
.merit_list > li {
	margin-top: 10px;
	padding: 20px 15px;
	background: #fdf8ee;
}
.merit_list .heading {
	text-align: center;
}
.merit_list .heading img {
	width: 60px;
}

@media screen and (min-width: 480px) {
	.merit_list {
		display: flex;
		flex-wrap: wrap;
		margin-left: -10px;
	}
	.merit_list > li {
		width: calc(50% - 10px);
		margin-left: 10px;
	}
}

@media screen and (min-width: 768px) {
	.merit_list > li {
		width: calc(25% - 10px);
	}
}

@media screen and (min-width: 1280px) {
	.merit_cont {
		padding: 20px;
	}
}



/* ----------------------------------------
	prod_link
---------------------------------------- */

.prod_link {
	display: flex;
	flex-wrap: wrap;
	margin: -30px -5px 0;
}
.prod_link > li {
	width: calc(100% / 2);
	margin-top: 30px;
	padding: 0 5px;
	text-align: center;
}
.prod_link .img_area {
	padding: 20px 5px;
	background: #e6e6e6;
}
.prod_link p {
	font-size: 14px;
	line-height: 1.3;
}

@media screen and (min-width: 480px) {
	.prod_link > li {
		width: calc(100% / 3);
	}
}

@media screen and (min-width: 768px) {
	.prod_link > li {
		width: calc(100% / 4);
	}
}

@media screen and (min-width: 1024px) {
	.prod_link > li {
		width: calc(100% / 7);
	}
}



/* ----------------------------------------
	menu_table
---------------------------------------- */

.menu_table thead th,
.menu_table thead tr:first-child th,
.menu_table thead td,
.menu_table tbody th,
.menu_table tbody td {
	border: none;
}
.menu_table thead th,
.menu_table tbody td:nth-child(n+2) {
	text-align: center;
}
.menu_table tbody tr {
	border-bottom: 1px solid #000;
}

/* check */
table .check::after {
	display: inline-block;
	content: "";
	width: 1em;
	height: .5em;
	border-left: 2px solid #000;
	border-bottom: 2px solid #000;
	transform: rotate(-45deg);
}

@media screen and (max-width: 479px) {
	table.menu_table {
		width: 440px;
		white-space: normal;
	}
}

@media screen and (max-width: 767px) {
	.menu_table thead th:first-child {
		width: 200px;
	}
}

@media screen and (min-width: 768px) {
	.menu_table thead th:nth-child(n+2) {
		width: 150px;
	}
}





/* ==================================================
	spec_price
================================================== */

.spec_price {
	padding: 40px 20px;
	color: #fff;
	background: #000;
}
.spec_price_list {
	margin: -20px -15px;
}
.spec_price_list > li {
	padding: 20px 15px;
}

@media screen and (min-width: 480px) {
	.spec_price_list {
		display: flex;
		flex-wrap: wrap;
	}
	.spec_price_list > li {
		width: 50%;
		padding: 30px 15px;
	}
}

@media screen and (min-width: 768px) {
	.spec_price {
		padding-right: 30px;
		padding-left: 30px;
	}
}

@media screen and (min-width: 1024px) {
	.spec_price_list {
		flex-wrap: nowrap;
	}
	.spec_price_list > li {
		flex: 1;
		width: auto;
	}
}





/* ==================================================
	flow
================================================== */

/* ----------------------------------------
	flow_table
---------------------------------------- */

.flow_table td:first-child {
	width: 130px;
}
.flow_table .notes {
	margin-top: 1em;
}

@media screen and (max-width: 767px) {
	table.flow_table {
		width: 440px;
		white-space: normal;
	}
}

@media screen and (min-width: 1024px) {
	.flow_table td:first-child {
		width: 200px;
	}
}





/* ==================================================
	inquiry_service
================================================== */

.inquiry_service {
	margin-top: 0 !important;
}


/* ==================================================
	faq
================================================== */

.faq__list {
	counter-reset: num;
	margin-top: -15px;
}
.faq__list dt {
	position: relative;
	margin-top: 15px;
	padding-left: 45px;
	font-size: 18px;
}
.faq__list dt::before {
	counter-increment: num;
	content: "Q" counter(num) ".";
	position: absolute;
	left: 0;
}
.faq__list dd {
	margin-top: 5px;
	padding: 0 0 15px 45px;
	font-size: 15px;
	border-bottom: 1px solid #000;
}