@charset "UTF-8";
/* ---------------------------------------------------
	ページタイトル
--------------------------------------------------- */
.mainvisual {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	height: 250px;
}

/* ---------------------------------------------------
	商品特長	
--------------------------------------------------- */
/*---------- 導入前後 ----------*/
#before {
	position: relative;
	border-bottom: 8px solid #e0ae50;
	margin: 0 0 4vw;
}

#before::after {
	content: "";
	display: inline-block;
	position: absolute;
	left: 50%;
	bottom: -12vw;
	z-index: 2;
	width: 0;
	height: 0;
	border: 6vw solid transparent;
	border-top: 6vw solid #e0ae50;
	transform: translateX(-50%);
}

.before_pict {
	background: url(../img/featuresec1-1.jpg);
	background-repeat: no-repeat;
	background-position: bottom center;
}

@media screen and (max-width:980px) {
	.before_pict {
		background-size: contain;
		background-color: #b8ffff;
	}
}

.before_title {
	max-width: 1200px;
	margin: 20px auto;
	background: #e0ae50;
	color: #FFF;
	text-align: center;
	font-size: 1.75em;
}

#before p {
	margin: 0 0 20px;
}

@media screen and (min-width: 1201px) {
	#before {
		margin: 0 0 60px;
	}

	#before::after {
		bottom: -130px;
		border: 65px solid transparent;
		border-top: 65px solid #e0ae50;
	}
}

#after {
	border-bottom: 8px solid #65c830;
}

.after_pict {
	background: url(../img/featuresec1-3.png);
	background-repeat: no-repeat;
	background-position: bottom center;
}

@media screen and (max-width:980px) {
	.after_pict {
		background-size: contain;
		background-color: #b8ffff;
	}
}

.after_title {
	position: relative;
	text-align: center;
	margin: 0 0 20px;
}

.after_title div {
	position: relative;
	z-index: 1;
	padding: 10px 2% 0;
}

#after p {
	margin: 0 0 20px;
}

.after_title .sp_visible {
	display: none;
}

.after_title .pc_visible {
	display: block;
}

@media screen and (max-width: 1200px) {
	.after_title::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 14vw;
		background: #65c830;
		transform: translateY(-50%);
	}

	.after_title .sp_visible {
		display: block;
	}

	.after_title .pc_visible {
		display: none;
	}
}

@media screen and (min-width:1201px) {
	.after_title {
		background: #65c830;
	}
}

/*------------------------------------------*/
/*---------- 水まわりくん導入メリット ----------*/
#merit {
	background: #e4ede5;
	border-bottom: 2px solid #008159;
}

#merit section {
	margin: 0 auto 80px;
}

#merit section h1 {
	margin: 0;
}

#merit>.content h1 br {
	display: none;
}

@media screen and (max-width: 768px) {
	#merit>.content h1 br {
		display: inline;
	}
}

.meritsec {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 40px;
}

.meritsec_left {
	position: relative;
	width: 40%;
}

.meritsec_left div:not([class]) {
	width: 96%;
	color: #555;
	font-size: 1.2em;
}

.meritsec_left p {
	width: 96%;
}

.meritsec_left p span {
	white-space: nowrap;
}

.meritsec_left div.arrow {
	position: absolute;
	right: -10%;
	bottom: 8%;
}

.meritsec_left div.arrow span {
	display: block;
	width: 200px;
	height: 8px;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	transform: skew(45deg);
}

@media screen and (max-width: 980px) {
	.meritsec_left div.arrow {
		position: absolute;
		right: 5%;
		bottom: 8%;
	}
}


.meritsec_right {
	width: 60%;
	padding: 1% 2%;
	background: #fff;
	border-radius: 15px;
}

.meritsec_right div:not([class]) {
	margin-bottom: 10px;
	color: #dd1234;
	font-size: 1.25em;
}

.meritsec_right p {
	margin: 0 0 20px;
	font-size: 1.25em;
}

@media screen and (max-width:768px) {
	.meritsec_right {
		width: 60%;
		padding: 2% 3%;
		background: #fff;
		border-radius: 15px;
	}
}

/*-- 水まわりくんでの実験 --*/
.meritsec2 {
	position: relative;
	padding: 25px 2%;
	background: #fff;
	border-radius: 25px;
}

.meritsec2 div {
	color: #555;
	font-size: 1.75em;
	text-align: center;
	letter-spacing: 2px;
}

.meritsec2 p {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	font-size: 1.75em;
}

.meritsec2 h3 br {
	display: none;
}

@media screen and (max-width:980px) {
	.meritsec2 h3 {
		font-size: 1.5em;
	}
}

@media screen and (max-width:640px) {
	.meritsec2 {
		padding: 40px 3%;
	}

	.meritsec2 h3 br {
		display: inline;
	}

	.meritsec_right h2 {
		font-size: 1.125em;
	}

	.meritsec_right p {
		font-size: 1.125em;
		letter-spacing: 0;
	}

	.meritsec2 p {
		font-size: 1.5em;
		text-align: justify;
	}
}


#merit>p {
	color: #dd1234;
	text-align: center;
	font-weight: bold;
}

@media screen and (max-width:768px) {
	#merit>p {
		text-align: left
	}
}


/*---------
水まわりくんシリーズ特徴
 ---------- ---------- ---------- ----------*/
.feature_list {
	background-color: #e4ede5;
	padding-bottom: 0;
}

.feature_list_title h2 {
	position: relative;
	color: #333;
	text-align: center;
}

.feature_list_title h2::after {
	content: "";
	position: absolute;
	display: block;
	bottom: 0;
	left: 50%;
	width: 1.5em;
	height: 5px;
	transform: translateX(-50%);
	background: #008159;
}

.feature_list_title .headLine1 {
	margin-bottom: 0;
}

.feature_item {
	padding: 50px 0;
}

.feature_item.even_item {
	background: #fff;
}

.feature_item.first_item .feature_item_inner {
	grid-template-columns: repeat(2, 1fr);
}

.feature_item_inner {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 20px;
}

.feature_item_inner {
	text-align: justify;
}

.feature_item_inner li {
	text-indent: -1.5em;
	padding-left: 1.5em;
}


.feature_item_inner h3 {
	margin-bottom: 20px;
	color: #008159;
	font-size: 1.75em;
	font-weight: bold;
}

.feature_item_inner figure {
	text-align: center;
}

@media screen and (min-width:1201px) {
	.feature_item.stand p {
		letter-spacing: 1px;
	}
}

@media screen and (max-width:768px) {

	.feature_item.first_item .feature_item_inner,
	.feature_item_inner {
		grid-template-columns: 1fr;
	}

	.feature_item_inner figure {
		margin-top: 20px;
	}
}

/* 特徴写真並び */

/*---------- 
選べる機種2種類
 ---------- ---------- ---------- ----------*/
.typesec_caption {
	margin-bottom: 20px;
	font-weight: bold;
}

.type_btnarea {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-bottom: 80px;
}

.type_btnarea li a {
	display: block;
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	padding: 12px 0 10px;
	border-radius: 10px;
	color: #fff;
	text-align: center;
	letter-spacing: 4px;
	font-size: 1.25em;
	font-weight: bold;
}

.type_btnarea li:first-child a {
	background: #004097;
}

.type_btnarea li:nth-child(2) a {
	background: #ed6000;
}

.type_btnarea li a::after {
	content: "";
	display: inline-block;
	margin-top: 7px;
	margin-left: 10px;
	border: 10px solid transparent;
	border-top: 13.856px solid #FFF;
	vertical-align: middle;
}

@media screen and (max-width: 640px) {
	.type_btnarea {
		margin-bottom: 40px;
	}

	.type_btnarea li a {
		font-size: 1.125em;
		padding: 10px 0 8px;
	}
}

@media screen and (max-width: 480px) {
	.type_btnarea li a {
		font-size: 1em;
		padding: 8px 0 6px;
	}

	.type_btnarea li a::after {
		margin-left: 5px;
		border: 8px solid transparent;
		border-top: 10px solid #fff;
		margin-top: 6px;
	}
}


/*---------- 機側設定型 ----------*/
#kisoku {
	margin: -100px auto 80px;
	padding: 100px 0 120px;
}

@media screen and (max-width:640px) {
	#kisoku {
		margin: -50px auto 40px;
		padding: 60px 0 60px;
	}
}

.typesec_kisoku_list li {
	display: flex;
	margin-bottom: 40px;
}

.typesec_kisoku_list li .item_inner {
	width: calc((100% / 5 * 4) - 10px);
	padding: 25px;
	background-color: #f2f2f2;
}

.typesec_kisoku_list li:nth-child(even) {
	flex-direction: row-reverse;
}

.typesec_kisoku_list li:nth-child(odd) .item_inner {
	margin-right: 20px;
}

.typesec_kisoku_list li:nth-child(even) .item_inner {
	flex-direction: row-reverse;
	margin-left: 20px;
}

.typesec_kisoku_list li>figure {
	display: grid;
	width: calc((100% / 5) - 10px);
	place-content: end;
}

.typesec_kisoku_list li .item_headline {
	margin-bottom: 20px;
	color: #0055a7;
	font-size: 2em;
}

.typesec_kisoku_list li .item_detail {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.typesec_kisoku_list li .figures {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	text-align: center;

}

.typesec_kisoku_list li .figures figcaption {
	font-size: 0.875em;
}

@media screen and (max-width: 980px) {
	.typesec_kisoku_list li .item_detail {
		grid-template-columns: 1fr;
	}

	.typesec_kisoku_list li .item_headline {
		font-size: 1.5em;
		letter-spacing: 0;
	}
}

@media screen and (max-width: 640px) {
	.typesec_kisoku_list li .item_inner {
		width: 100%;
		padding: 20px 1em;
	}
}

@media screen and (max-width: 480px) {
	.typesec_kisoku_list li {
		display: block;
	}

	.typesec_kisoku_list li:nth-child(odd) .item_inner {
		margin-right: 0;
	}

	.typesec_kisoku_list li:nth-child(even) .item_inner {
		margin-left: 0;
	}

	.typesec_kisoku_list li>figure {
		display: none;
	}
}

/*---------- 遠隔設定型 ----------*/
#enkaku {
	margin: -120px 0 0;
	padding: 100px 0 80px;
	background: #efefef;
}

@media screen and (max-width: 640px) {
	#enkaku {
		margin: -50px 0 0;
		padding: 60px 0 40px;
	}
}

/* 遠隔操作イメージ */
.enkaku_feature_image {
	background-color: #fff;
	margin-bottom: 80px;
	padding: 20px;
	text-align: center;
}

.enkaku_feature_image .btn_bigger {
	display: inline-block;
	background: #00a1e9;
	margin: 15px 0;
	padding: 5px 2em;
	border-radius: 2em;
	color: #fff;
	font-size: 1.125em;
}

.enkaku_feature_image p {
	font-size: 1.125em;
}

@media screen and (max-width:480px) {
	.enkaku_feature_image .btn_bigger {
		font-size: 0.875em;
	}

	.enkaku_feature_image p {
		font-size: 1em;
		text-align: left;
	}
}

.typesec_enkaku_item {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.typesec_enkaku_list>li:nth-child(even) {
	flex-direction: row-reverse;
}

.typesec_enkaku_item .item_inner {
	width: 80%;
	margin-right: 2%;
	padding: 25px;
	border-radius: 15px;
	border: 1px solid #ed6000;
	;
	background-color: #fff;
}

.typesec_enkaku_item>figure {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 18%;
	text-align: center;
}

.typesec_enkaku_item .item_headline {
	margin-bottom: 20px;
	color: #ed6000;
	font-size: 2em;
}

.typesec_enkaku_item .item_detail {
	display: flex;
	flex-wrap: wrap;
}

.typesec_enkaku_item .item_text {
	width: 49%;
	margin-right: 1%;
}

.typesec_enkaku_item .item_text p {
	margin-bottom: 20px;
}

.typesec_enkaku_item .item_text p::first-letter {
	color: #ed6000;
}

.typesec_kisoku_item .item_text span {
	color: #7f7f7f;
	font-weight: bold;
}

.typesec_enkaku_item .item_pict {
	width: 49%;
	margin-left: 1%;
}

.typesec_enkaku_item .item_pict.figures {
	display: flex;
	flex-wrap: wrap;
}

.typesec_enkaku_item .item_pict.figures figure {
	width: 31%;
	margin: 0 1%;
}

.typesec_enkaku_item .item_pict.figures figcaption {
	font-size: 0.875em;
}

.typesec_enkaku_item .item_pictures {
	display: flex;
	flex-wrap: wrap;
}

.typesec_enkaku_item .item_pictures li {
	width: 49%;
	margin-top: 20px;
}

.typesec_enkaku_item .item_pictures li:first-child {
	margin-right: 1%;
}

.typesec_enkaku_item .item_pictures li:nth-child(2) {
	margin-left: 1%;
}

@media screen and (max-width: 640px) {
	.typesec_enkaku_item .item_detail {
		display: block;
	}

	.typesec_enkaku_item .item_headline {
		font-size: 1.5em;
		letter-spacing: 0;
	}

	.typesec_enkaku_item .item_text {
		width: 100%;
		margin-right: 0;
	}

	.typesec_enkaku_item .item_pict {
		width: 100%;
		margin-top: 20px;
		margin-left: 0;
	}
}

@media screen and (max-width: 480px) {
	.typesec_enkaku_item .item_inner {
		width: 100%;
	}

	.typesec_enkaku_item>figure {
		display: none;
	}
}

/*---------- 共通 ----------*/

#kyotu {
	padding: 80px 0;
}

#kyotu .flex_contents {
	display: flex;
	flex-wrap: wrap;
	border-radius: 8px;
	margin: 0 auto;
}

.solar_battery_area {
	padding: 25px;
	border: 1px solid #027c96;
	background-color: rgb(228 248 255 / 40%);
}

.solar_battery_area>div {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px 0 0;
}

@media screen and (max-width:640px) {
	.solar_battery_area {
		padding: 2%;
	}

	.solar_battery_area>div {
		display: block;
		padding: 2%;
	}
}

/* やじるし */
.solar_battery_area .arrow {
	position: relative;
	width: 13%;
	margin: 0 40px 0 20px;
	/* background-image: url(../img/dott2.png); */
	background-repeat: repeat-x;
	background-position: right center;
	height: 27px;
	background-size: 18px 10px;
	transform: translate(0, 0);
}

.solar_battery_area .arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0px;
	width: 100%;
	height: 0;
	border-bottom: 8px dotted #0055a7;
	transform: translate(0, -50%);
}

.solar_battery_area .arrow:after {
	content: "";
	position: absolute;
	top: 0;
	right: -18px;
	width: 16px;
	height: 27px;
	background: url(../img/arrow_dg2.png) no-repeat;
	background-size: contain;
}

@media screen and (max-width:640px) {
	.solar_battery_area .arrow {
		margin: 70px 0 100px 50%;
		transform: translate(-50%, 0) rotate(90deg);
		width: 140px;
	}
}

#kyotu .flex_block {
	display: flex;
	flex-wrap: wrap;
}

#kyotu .flex_box.left {
	margin-right: 1%;
}

#kyotu .flex_box.right {
	margin-left: 1%;
}

#kyotu .flex_box {
	width: 49%;
	border: 1px solid #004ea1;
	border-radius: 8px;
	padding: 2%;
}

@media screen and (max-width: 640px) {
	#kyotu .flex_box.right {
		margin-top: 40px;
		margin-left: 1%;
	}

	#kyotu .flex_box {
		width: 100%;
	}
}

@media screen and (max-width: 640px) {

	.solar,
	.battery {
		width: 80%;
		margin: 0 auto;
	}

	.solar img,
	.battery img {
		width: 100%;
	}
}

/* ____________________20210910 追加*/


/* ---------------------------------------------------
		導入までの流れ flow
--------------------------------------------------- */
#flow .content>p {
	margin: 0 0 40px;
}

.flow_chart {
	list-style: none;
	counter-reset: li;
}

.flow_chart li {
	position: relative;
	margin-bottom: 70px;
	background: url(../img/dott.png) 22px bottom repeat-y;
	background-size: 6px 12px;
}

.flow_chart li:after {
	counter-increment: li;
	content: "" counter(li);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	color: #FFF;
	font-size: 1.75em;
	font-family: Century Gothic, Futura, STHeitiK-Medium, "Avenir-Medium", "Avenir", Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
	background: #64C830;
	border-radius: 50%;
	z-index: 1;
}

.flow_chart li:before {
	content: "";
	position: absolute;
	bottom: -11px;
	left: 12px;
	width: 27px;
	height: 16px;
	background: url(../img/arrow_dg.png) no-repeat;
	background-size: contain;
}

.flow_chart li:last-child:before {
	display: none;
}

.flow_chart li:last-child {
	margin: 0;
}

.flow_chart li figure {
	float: right;
	margin: 0 0 0 40px;
	max-width: 300px;
}

.flow_chart li h2 {
	position: relative;
	margin-bottom: 15px;
	padding-left: 70px;
	font-size: 2em;
}

.flow_chart li h2+p {
	padding-left: 70px;
	font-size: 1.125em;
	line-height: 1.6;
}

.flow_chart li h2+p:last-child::after {
	content: '.';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* 注意書き */
.flow_chart li span {
	font-size: 0.875em;
}


@media screen and (max-width: 980px) {
	.flow_chart li h2 {
		font-size: 1.875em;
	}

	.flow_chart li figure {
		float: none;
		position: relative;
		margin: 0 0 0 70px;
		overflow: hidden;
	}
}

@media screen and (max-width: 640px) {
	.flow_chart li h2 {
		font-size: 1.5em;
	}

	.flow_chart li h2+p {
		padding-left: 70px;
		font-size: 1em;
		line-height: 1.6;
	}
}

.flow_chart .btnarea {
	text-align: left;
	padding: 0 0 0 70px;
}



/* こっからプラン */
.flow_plan_list {
	display: flex;
	flex-wrap: wrap;
}

/* 枠 */
.item_lease {
	margin-right: 1%;
	border: 1px solid #00a3b7;
}

.item_rental {
	margin-left: 1%;
	border: 1px solid #ed8600;
}

.flow_plan_list {
	display: flex;
	flex-wrap: wrap;
	margin: 20px 0;
}

.flow_plan_list .item_lease,
.flow_plan_list .item_rental {
	width: 49%;
	;
	text-align: center;
}

/* 横並び */
@media screen and (max-width:640px) {
	.flow_plan_list {
		display: block;
	}

	.flow_plan_list .item_lease,
	.flow_plan_list .item_rental {
		width: 100%;
		margin: 20px 0;
		text-align: center;
	}
}

/*プラン名*/
.flow_plan_list .item_lease dt,
.flow_plan_list .item_rental dt {
	padding: 0.5em 0;
}

.item_lease dt {
	background: #00a3b7;
}

.item_rental dt {
	background: #ed8600;
}

.flow_plan_list .flow_headline {
	color: #fff;
	font-size: 2em;
}

.flow_plan_list .item_lease dd,
.flow_plan_list .item_rental dd {
	padding: 1em 0;
}

.item_lease dd p,
.item_rental dd p {
	font-size: 2em;
}

.item_lease dd p {
	color: #00a3b7;
}

.item_rental dd p {
	color: #ed8600;
}

/*PCときには改行しない*/
.item_lease dd br,
.item_rental dd br {
	display: none;
}

@media screen and (max-width:980px) {

	.item_lease dd br,
	.item_rental dd br {
		display: inline;
	}
}

@media screen and (max-width:640px) {

	.item_lease dd p,
	.item_rental dd p {
		font-size: 1.5em;
		line-height: 1.2;
	}
}

/* ---------------------------------------------------
		主要諸元 spec
--------------------------------------------------- */

#spec p {
	width: 100%;
	max-width: 960px;
	margin: 0 auto 20px;
}

#spec div {
	width: 98%;
	max-width: 960px;
	margin: 0 auto;
	overflow: auto;
	white-space: nowrap;
}

#spec table {
	width: 960px;
	border-collapse: separate;
	border-spacing: 0;
}

#spec table th {
	padding: 15px 10px 13px 0;
	border-top: 1px solid #191919;
	text-align: left;
}

#spec table th:nth-child(2) {
	width: 1%;
	border: none;
}

#spec table td {
	padding: 15px 10px 13px;
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
}

#spec table td:last-child {
	border-right: 1px solid transparent;
}

#spec table tr:first-child td:nth-child(3),
#spec table tr:nth-child(12) td:nth-child(3),
#spec table tr:nth-child(13) td:nth-child(3),
#spec table tr:nth-child(16) td:nth-child(3),
#spec table td:first-child {
	border-top: 1px solid #191919;
}

#spec table tr:first-child td:last-child,
#spec table tr:nth-child(9) td:last-child,
#spec table tr:nth-child(12) td:last-child,
#spec table tr:nth-child(13) td:last-child,
#spec table tr:nth-child(17) td:last-child,
#spec table td:first-child {
	border-top: 1px solid #191919;
}

#spec table tr:last-child td:last-child {
	border-bottom: 1px solid #191919;
}

/* ---------------------------------------------------
		事例紹介
--------------------------------------------------- */

.map_wrap {
	position: relative;
	width: 100%;
	max-width: 880px;
	margin: 0 auto 30px;
}

.map_content {
	width: 100%;
	min-width: 720px;
}

.map_sp_kome {
	display: none;
}

@media all and (max-width:720px) {
	.map_wrap {
		overflow-x: scroll;
		direction: rtl;
	}

	.map_sp_kome {
		display: block;
		color: #008159
	}
}

.map_content area:hover {
	opacity: 0.6;
}

.library .main .linkbtn {
	width: 80%;
	max-width: 880px;
	padding: 8px 0;
	background: #efefef;
	color: #2f2f2f;
	font-weight: bold;
	box-shadow: 2px 2px 0 #75cace;
}

.library .main .linkbtn:hover {
	box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .3), inset 0 0 5000px rgba(0, 0, 0, .05);
}

/*----- 子ページ タブ -----*/
.parent-container {
	display: flex;
	flex-wrap: wrap;
}

.parent-container a {
	position: relative;
	display: block;
	width: 24%;
	margin-right: 1%;
}

@media screen and (max-width: 736px) {
	.parent-container a {
		width: 32%;
	}
}

@media screen and (max-width: 480px) {
	.parent-container a {
		width: 49%;
	}
}

.parent-container a p {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 98%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 2;
}

.parent-container a:hover p {
	display: table;
}

.parent-container a span {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: #fff;
}

.placeName {
	position: relative;
	margin-bottom: 30px;
	padding-bottom: 10px;
	color: #595757;
	font-size: 1.25rem;
}

.placeName::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: "";
	width: 100%;
	height: 1px;
	background: #595757;
}


.library_back {
	margin-top: 30px;
	text-align: right;
}

.library_back a {
	position: relative;
	display: inline-block;
	padding: 0 1rem 0 0;
	color: #595757;
	font-size: 0.95rem;
	text-decoration: none;
}

.library_back a::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 1px;
	background: #595757;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
}

.library_back a:hover {
	text-decoration: none;
}

.library_back a:hover::after {
	transform: scale(1, 1);
}

/*------------------------------
	月ごとの切り替えボタン
------------------------------*/
.tabList {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 20px !important;
	list-style: none;
}

.tabList li {
	display: inline-block;
	width: calc(99% / 6 - 10px);
	margin: 0 10px 10px 0;
	text-align: center;
}

.tabLink {
	display: block;
	border: 2px solid #f59ba5;
	border-radius: 44px;
	padding: 0.5rem 0;
	color: #393737;
	font-weight: bold;
	cursor: pointer;
	letter-spacing: 5px;
}

.tabLink:hover {
	background-color: #f59ba5;
}

.tabLink.on {
	background-color: #f59ba5;
}

.tabBodyItem {
	display: none;
}

.tabBodyItem.on {
	display: block;
}

.hokkaido .tabLink {
	border: 2px solid #ad7eda;
}

.tohoku .tabLink {
	border: 2px solid #758af4;
}

.kanto .tabLink {
	border: 2px solid #86e2da;
}

.hokuriku .tabLink {
	border: 2px solid #84c0ff;
}

.tokai .tabLink {
	border: 2px solid #bee275;
}

.kinki .tabLink {
	border: 2px solid #ffe966;
}

.chugoku .tabLink {
	border: 2px solid #ffcc66;
}

.shikoku .tabLink {
	border: 2px solid #fb9466;
}

.kyushu .tabLink {
	border: 2px solid #ff9999;
}

.okinawa .tabLink {
	border: 2px solid #ff98df;
}

.hokkaido .tabLink.on,
.hokkaido .tabLink:hover {
	background-color: #ad7eda;
}

.tohoku .tabLink.on,
.tohoku .tabLink:hover {
	background-color: #758af4;
}

.kanto .tabLink.on,
.kanto .tabLink:hover {
	background-color: #86e2da;
}

.hokuriku .tabLink.on,
.hokuriku .tabLink:hover {
	background-color: #84c0ff;
}

.tokai .tabLink.on,
.tokai .tabLink:hover {
	background-color: #bee275;
}

.kinki .tabLink.on,
.kinki .tabLink:hover {
	background-color: #ffe966;
}

.chugoku .tabLink.on,
.chugoku .tabLink:hover {
	background-color: #ffcc66;
}

.shikoku .tabLink.on,
.shikoku .tabLink:hover {
	background-color: #fb9466;
}

.kyushu .tabLink.on,
.kyushu .tabLink:hover {
	background-color: #ff9999;
}

.okinawa .tabLink.on,
.okinawa .tabLink:hover {
	background-color: #ff98df;
}

@media screen and (max-width: 736px) {
	.tabList li {
		width: calc(99% / 4 - 10px);
		font-size: 0.9rem;
	}
}

@media screen and (max-width: 480px) {
	.tabList li {
		width: calc(99% / 2 - 10px);
		font-size: 0.8rem;
	}
}

/* 20230824追加 */
/* ---------------------------------------------------
		事例紹介 (result) とびら
--------------------------------------------------- */
.cls-1 {
	fill: #ad7eda;
}

.cls-1,
.cls-2 {
	stroke-width: 0px;
}

.cls-3 {
	fill: #ffe966;
}

.cls-3,
.cls-4,
.cls-5,
.cls-6,
.cls-7,
.cls-8,
.cls-9,
.cls-10,
.cls-11,
.cls-12,
.cls-13 {
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cls-3,
.cls-4,
.cls-5,
.cls-6,
.cls-7,
.cls-8,
.cls-9,
.cls-10,
.cls-12 {
	stroke: #fff;
	stroke-width: .3px;
}

.cls-14 {
	clip-path: url(#clippath-2);
}

.cls-4 {
	fill: #bee275;
}

.cls-15 {
	clip-path: url(#clippath-6);
}

.cls-5 {
	fill: #fc6;
}

.cls-2,
.cls-11,
.cls-13 {
	fill: none;
}

.cls-16 {
	clip-path: url(#clippath-7);
}

.cls-17 {
	clip-path: url(#clippath-1);
}

.cls-18 {
	clip-path: url(#clippath-4);
}

.cls-6 {
	fill: #fb9466;
}

.cls-7 {
	fill: #758af4;
}

.cls-8 {
	fill: #86e2da;
}

.cls-9 {
	fill: #84c0ff;
}

.cls-19 {
	clip-path: url(#clippath-9);
}

.cls-20 {
	clip-path: url(#clippath);
}

.cls-10 {
	fill: #ff98df;
}

.cls-21 {
	clip-path: url(#clippath-3);
}

.cls-22 {
	fill: #fff;
	font-family: MS-UIGothic, 'MS UI Gothic';
	font-size: 14px;
}

.cls-23 {
	clip-path: url(#clippath-8);
}

.cls-11 {
	stroke: #a0a0a0;
}

.cls-24 {
	clip-path: url(#clippath-5);
}

.cls-12 {
	fill: #f99;
}

.cls-13 {
	stroke: #231815;
	stroke-width: .5px;
}

svg a:hover {
	opacity: 0.6;
}

@media all and (max-width:720px) {
	#Hokkaido text.cls-22 {
		transform: translate(669.59px, 136.49px);
	}

	#Tohoku text.cls-22 {
		transform: translate(585.39px, 370.5px);
	}

	#Kanto text.cls-22 {
		transform: translate(530.73px, 521.86px);
	}

	#Hokuriku text.cls-22 {
		transform: translate(444.43px, 484.87px);
	}

	#Tokai text.cls-22 {
		transform: translate(426.56px, 558.44px);
	}

	#Kinki text.cls-22 {
		transform: translate(367.01px, 579.05px);
	}

	#Chugoku text.cls-22 {
		transform: translate(253.19px, 571.44px);
	}

	#Shikoku text.cls-22 {
		transform: translate(284.77px, 628.26px);
	}

	#Kyushu text.cls-22 {
		transform: translate(152.54px, 664.34px);
	}

	#Okinawa text.cls-22 {
		transform: translate(276.77px, 260.4px);
	}
}

/* 20210910追加 */
/* ---------------------------------------------------
		事例紹介 (result) とびら
--------------------------------------------------- */
.Lib_top_btns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

.Lib_top_btns a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 80px 0;
	box-shadow: 2px 2px 4px rgba(100, 100, 100, 0.5);
	color: #fff;
	font-size: 1.25em;
	font-weight: bold;
	letter-spacing: 5px;
}

@media screen and (max-width: 768px) {
	.Lib_top_btns {
		grid-template-columns: 1fr;
	}

	.Lib_top_btns a {
		padding: 40px 0;
	}
}


.Lib_top_btns .movie {
	background-image: url(../img/Library_top_movie_bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.Lib_top_btns .photo {
	background-image: url(../img/Library_top_photo_bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.Lib_top_btns .interview {
	background-image: url(../img/Library_top_interview_bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.Lib_top_btns .review {
	background-image: url(../img/Library_top_review_bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.Lib_top_btns .articles {
	background-image: url(../img/Library_top_articles_bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.Lib_top_btns .libColumn {
	background-image: url(../img/Library_top_libColumn_bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.Lib_top_btns .catalog {
	background-image: url(../img/Library_top_catalog_bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* オンマウスで背景変更 */
.Lib_top_btns a:hover::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.Lib_top_btns .photo:hover::before {
	background-image: url(../img/Library_top_photo_bg_on.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.Lib_top_btns .movie:hover::before {
	background-image: url(../img/Library_top_movie_bg_on.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.Lib_top_btns .interview:hover::before {
	background-image: url(../img/Library_top_interview_bg_on.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.Lib_top_btns .review:hover::before {
	background-image: url(../img/Library_top_review_bg_on.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.Lib_top_btns .articles:hover::before {
	background-image: url(../img/Library_top_articles_bg_on.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.Lib_top_btns .libColumn:hover::before {
	background-image: url(../img/Library_top_libColumn_bg_on.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.Lib_top_btns .catalog:hover::before {
	background-image: url(../img/Library_top_catalog_bg_on.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}


.Lib_top_btns a img {
	margin-right: 10px;
}

.Lib_top_btns a:hover {
	text-decoration: none;
	background-image: none;
}

/* オンマウスで半調延びる */
.Lib_top_btns a::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 40%;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: -1;
	transition: 0.5s;
}

.Lib_top_btns a:hover::after {
	height: 100%;
}

.Lib_top_btns .photo:hover::after {
	background-color: rgba(62, 76, 120, 0.65);
}

.Lib_top_btns .movie:hover::after {
	background-color: rgba(96, 43, 69, 0.65);
}

.Lib_top_btns .interview:hover::after {
	background-color: rgba(48, 140, 76, 0.65)
}

.Lib_top_btns .review:hover::after {
	background-color: rgba(90, 104, 24, 0.65)
}

.Lib_top_btns .articles:hover::after {
	background-color: rgba(104, 24, 81, 0.65)
}

.Lib_top_btns .libColumn:hover::after {
	background-color: rgba(140, 238, 85, 0.65)
}

/* オンマウスで画像色変更 */
.Lib_top_btns img {
	display: none;
}

.Lib_top_btns img.js-appear {
	display: inline;
}

.Lib_top_discription {
	height: 80px;
	margin-top: 20px;
}

.Lib_top_discription {
	display: none;
	position: relative;
	padding: 15px;
	background-color: #d7eef1;
	border: 1px solid #d7eef1;
	box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .2);
	color: #074A9B;
}

.Lib_top_discription.js-appear {
	display: block;
}


/* ---------------------------------------------------
	事例紹介動画
--------------------------------------------------- */

#download_pdf .pdf_title,
#download_movie .yt_title {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 60px;
	margin: 0 0 15px;
	text-align: center;
}

#download_pdf .pdf_title::after,
#download_movie .yt_title::after {
	content: "";
	display: block;
	position: absolute;
	top: 40%;
	left: 0;
	width: 100%;
	height: 5px;
	/* background: #2bd889; */
	background: #6fd3a6;
	z-index: -1;
}

#download_pdf .pdf_title span,
#download_movie .yt_title span {
	display: inline-block;
	padding: 0 0.25em;
	background: rgba(255, 255, 255, 1);
	text-align: center;
	font-size: 1.125em;
	font-weight: inherit;
	letter-spacing: 0;
	line-height: 1.4;
}


.movie_category {
	margin-bottom: 30px;
	border-bottom: 2px solid #008159;
	font-size: 1.75em;
}

#download_pdf ul,
#download_movie ul {
	display: flex;
	flex-wrap: wrap;
}

#download_pdf ul li,
#download_movie ul li {
	width: 31%;
	margin: 0 1% 50px;
}

#download_movie ul li img {
	width: 100%;
}

@media screen and (max-width: 980px) {

	#download_pdf .pdf_title span,
	#download_movie .yt_title span {
		font-size: 1em;
	}
}

@media screen and (max-width: 640px) {
	#download_pdf ul li {
		width: 48%;
		margin: 0 1% 50px;
	}

	#download_movie ul li {
		width: 48%;
		margin: 0 1% 50px;
	}
}

@media screen and (max-width: 480px) {
	#download_pdf ul li {
		width: 98%;
		margin: 0 1% 40px;
	}

	#download_movie ul li {
		width: 98%;
		margin: 0 1% 40px;
	}
}

.download_btn {
	display: block;
	width: 100%;
	max-width: 280px;
	margin: 10px auto;
	padding: 12px 0 10px;
	color: #FFF;
	font-weight: bold;
	text-align: center;
	background: #64c830;
	border-radius: 2em;
	box-shadow: 2px 2px 0 #ddd;
}

.download_btn:hover {
	opacity: 1;
	box-shadow: inset 1px 1px 3px rgb(0 0 0 / 30%), inset 0 0 5000px rgb(0 0 0 / 5%);
}

@media screen and (max-width:640px) {
	.download_btn {
		padding: 12px 10px 8px;
		font-size: 0.875em;
	}
}

/* ---------------------------------------------------
		お問い合わせ contact
--------------------------------------------------- */
@media screen and (max-width:980px) {
	#contact {
		padding: 0 1%;
	}
}

.contact_content {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

.contact_content dl dt {
	margin-bottom: 10px;
}

.contact_content dl dd {
	margin-bottom: 70px;
}

.contact_content dl dd input,
.contact_content dl dd button,
.contact_content dl dd textarea,
.contact_content dl dd select {
	padding: 0.875em;
	width: 100%;
}

/*必須*/
.contact_content dl dt span {
	display: inline-block;
	margin: 0 0 0 8px;
	padding: 0 5px;
	background: #65c830;
	color: #fff;
}

/* ----- お問い合わせページ同意部分 ----- */
.privacyPolicy .privacyPolicy-text {
	text-align: center;
	font-size: 0.875em;
}

.privacyPolicy .privacyPolicy-body {
	margin: 10px auto 0;
	border: 1px solid #000;
	max-width: 100%;
	height: 300px;
	line-height: 1.75;
	overflow-y: auto;
}

.privacyPolicy .privacyPolicy-scroller {
	padding: 40px;
}

.privacyPolicy .privacyPolicy-body :nth-child(1) {
	margin-top: 0;
}

.privacyPolicy .privacyPolicy-body h2 {
	margin: 2em 0 1em;
	margin-top: 2em;
	font-weight: bold;
	text-align: center;
}

.contact-right-flex {
	display: flex;
	justify-content: flex-end;
}

.privacyPolicy .privacyPolicy-body h3 {
	margin: 2em 0 1em;
	font-weight: bold;
}

.privacyPolicy .privacyPolicy-body h4 {
	margin: 2em 0 1em;
	font-size: 0.875em;
	font-weight: bold;
}

.privacyPolicy .privacyPolicy-body p,
.privacyPolicy .privacyPolicy-body ul {
	margin: 1em 0;
	font-size: 0.875em;
}

/* 送信ボタン */
.checkbox {
	margin-top: 20px;
	text-align: center;
}

.submitbox {
	margin-top: 20px;
	text-align: center;
}

.checkbox input[type="checkbox"]:disabled+span {
	color: #ddd;
}

.submitbox input:disabled {
	background-color: #ddd;
	border: 1px solid #ddd;
	color: #fff;
	pointer-events: none;
}

.submitbox input {
	display: inline-block;
	padding: 0.5em 1em;
	border: 1px solid #65c830;
	border-radius: 2em;
	font-size: 1.125em;
}

.submitbox input {
	background: #65c830;
	color: #fff;
}

.submitbox input:hover {
	background: #fff;
	color: #65c830;
	cursor: pointer;
}

.submitbox input.reset {
	background: #fff;
	color: #65c830;
}

.submitbox input.reset:hover {
	background: #65c830;
	color: #fff;
	cursor: pointer;
}

/* -- 確認画面 -- */
.conform dd {
	padding: 0.875em;
	border: 1px solid #4f4f4f;
}

.contact_thankyou {
	text-align: center;
}

.contact_thankyou p {
	width: 100%;
	max-width: 720px;
	margin: 0 auto 40px;
}

.contact_thankyou .headLine1 {
	font-weight: normal;
}

.contact_thankyou .headLine1 br {
	display: none;
}

.contact_thankyou .headLine1 span {
	display: inline;
}

.contact_thankyou p br {
	display: none;
}

.contact_thankyou p br.pc {
	display: inline;
}

@media screen and (max-width: 640px) {
	.contact_thankyou .headLine1 br {
		display: inline;
	}

	.contact_thankyou .headLine1 span {
		display: none;
	}

	.contact_thankyou p br {
		display: inline;
	}
}

/* ---------------------------------------------------
		Q and A
--------------------------------------------------- */
#qanda .content {
	max-width: 720px;
}

#qanda ul li {
	margin: 0 0 30px;
}

#qanda ul li .toggleBtn {
	background: #8be367;
	border-radius: 12px;
	border-bottom: 1px solid #b58035;
	margin: 0 0 10px;
	padding: 15px 15px 15px 30px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

#qanda ul li .toggleBtn:hover {
	cursor: pointer;
}

#qanda ul li .toggleBtn:active {
	margin-top: 1px;
	border-bottom: none;
	box-shadow: none;
}

#qanda ul li h2 {
	text-indent: -1em;
	padding: 0 0 0 1em;
}

#qanda ul li div:last-child {
	display: none;
	background: #eaf5b2;
	border-radius: 12px;
	padding: 15px 15px 15px 28px;
	color: #000;
}

#qanda ul li p {
	text-indent: -1em;
	padding: 0 0 0 1em;
}


#qanda_answer .content div {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

#qanda_answer dl {
	display: inline-block;
	margin: 0 0 40px;
}

#qanda_answer dl dt {
	margin: 0 0 15px;
}

#qanda_answer figure {
	text-align: center;
}

/* ---------------------------------------------------
	news 新着情報
--------------------------------------------------- */
.filter{
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
}

.filter_btn,
.link_btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(100% / 5 - 1%);
	height: 50px;
	padding: 8px 0 6px;
	box-shadow: 2px 2px 0 #64c830;
	border: 1px solid #008159;
	border-radius: 20px;
	background: #fff;
	color: #008159;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
}

.filter_btn.is-active{
	background: #008159;
	box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .3), inset 0 0 5000px rgba(0, 0, 0, .05);
	color: #fff;
}

.item {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.item.is-hide {
  opacity: 0;
  pointer-events: none;
}

@media (any-hover:hover){
	.filter_btn:hover,
	.link_btn:hover{
		background: #008159;
		box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .3), inset 0 0 5000px rgba(0, 0, 0, .05);
		color: #fff;
	}

	.filter_btn:hover{
		text-decoration: underline;
		cursor: pointer;
	}
}

@media screen and (max-width:768px){
	.filter_btn,
	.link_btn{
		width: calc(100% / 2 - 1%);
		margin-bottom: 1em;
	}

	.filter{
		flex-wrap: wrap;
	}
}

/* ----------------- ニュース詳細 -------------- */
.content.news_detail {
	max-width: 980px;
}

.news_detail .twoPiece {
	display: flex;
	flex-wrap: wrap;
}

.news_detail .twoPiece li {
	display: inline-block;
	margin-right: 1%;
}

@media screen and (max-width: 640px) {
	.news_detail .twoPiece li {
		display: block;
		margin-right: auto;
		margin-left: auto;
	}
}

/* ---------------------------------------------------
	ページ送りについて
--------------------------------------------------- */
.pagination{
	text-align: center;
}

.pagination a{
	display: inline-block;
	margin:0 5px;
	color:#333;
	text-decoration:underline;
	text-align: center;
}

.pagination a.is-current{
color: #12c212;
  font-weight: bold;
  font-size: 1.5em;
}