@charset "UTF-8";

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

	- simulator

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

/*----------------------------------------
	simulator
-----------------------------------------*/

#simulator {
	border-radius: 1px;
	box-shadow: 0 20px 20px -20px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 20px 20px -20px rgba(0, 0, 0, 0.1);
	background: #fff;
	/* 処理負荷をGPUへ */
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	/* ちらつき防止 */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

#simulator>#simulator_visual {
	position: relative;
	height: 620px;
	background: #e5e9e5 url(../img/c_main_bg01.png) repeat-x center top;
	background-size: 1500px 133px;
}

#simulator>#simulator_visual>p {
	padding-top: 50px;
	text-align: center;
	color: rgba(255, 255, 255, 0.3);
	user-select: none;
}

#simulator>#simulator_visual>.simNote {
	position: absolute;
	right: 50%;
	bottom: 60px;
	width: 278px;
	height: 10px;
	margin-right: -139px;
}

#simulator>#simulator_visual>.simNote>img {
	width: 100%;
	height: auto;
}

/* メインビジュアル */
#simulator>#simulator_visual>figure {
	position: absolute;
	bottom: -63px;
	left: calc(50% - 552px);
	width: 740px;
	height: 510px;
}

@media only screen and (max-width:767px) {
	/* #simulator>#simulator_visual {
		background: #e5e9e5 url(../img/c_main_bg01.png) repeat-x center top;
		background-size: calc(1500px/2) calc(133px/2);
	} */

	#simulator>#simulator_visual>figure {
		bottom: 0;
		left: calc(50% - 150px);
		width: 295px;
		height: 230px;
		/* 1208 */
	}
}

#simulator>#simulator_visual>figure img {
	width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

#simulator>#simulator_visual>#simulator_price {
	position: absolute;
	top: 287px;
	left: calc(50% + 200px);
	z-index: 1;
}

@media only screen and (max-width:767px) {
	#simulator>#simulator_visual {
		height: 300px;
	}

	#simulator>#simulator_visual>.simNote {
		bottom: 30px;
	}

	#simulator>#simulator_visual>p {
		padding-top: 23px;
	}

	#simulator>#simulator_visual>#simulator_price {
		width: 320px;
		top: 232px;
		left: calc(50% - 160px);
	}
}

#simulator>#simulator_visual>#simulator_price>dl {
	display: table;
	width: 300px;
	padding-bottom: 5px;
	border-bottom: 3px solid #d8d8d8;
}

#simulator>#simulator_visual>#simulator_price>dl>dt {
	display: table-cell;
	width: 80px;
	padding: 0 15px 2px 0;
	letter-spacing: 0.08em;
	vertical-align: bottom;
}

#simulator>#simulator_visual>#simulator_price>dl>dd {
	display: table-cell;
	width: auto;
	vertical-align: bottom;
}

@media only screen and (max-width:767px) {
	#simulator>#simulator_visual>#simulator_price>dl {
		width: calc(100% - 24px);
		margin: 0 auto;
		padding-bottom: 4px;
		border-bottom: calc(3px/2) solid #d8d8d8;
	}

	#simulator>#simulator_visual>#simulator_price>dl>dt {
		width: 30px;
		padding: 0 13px 0 0;
	}

	#simulator>#simulator_visual>#simulator_price>dl>dd {
		text-align: center;
	}
}

#simulator>#simulator_visual>#simulator_price>ul>li {
	width: 300px;
	padding-top: 20px;
	text-align: center;
	user-select: none;
}

@media only screen and (max-width:767px) {
	#simulator>#simulator_visual>#simulator_price>ul {
		display: table;
		width: calc(100% - 20px);
		margin: 0 auto;
	}

	#simulator>#simulator_visual>#simulator_price>ul>li {
		display: table-cell;
		width: calc(100% - 50px);
		padding-top: 10px;
		vertical-align: top;
	}

	#simulator>#simulator_visual>#simulator_price>ul>li+li {
		padding-left: 10px;
	}
}

#simulator>#simulator_visual>#simulator_price>ul>li#saveBtn a {
	display: block;
	position: relative;
	padding: 19px 0 14px;
	border-radius: 30px;
	background: linear-gradient(45deg, #9bca50 0%, #a6dc51 100%);
	color: #fff;
}

#simulator>#simulator_visual>#simulator_price>ul>li#saveBtn a:hover,
#simulator>#simulator_visual>#simulator_price>ul>li#saveBtn a:active {
	background: #fff;
	color: #9bca50;
	text-decoration: none;
}

#simulator>#simulator_visual>#simulator_price>ul>li#saveBtn a:link::after,
#simulator>#simulator_visual>#simulator_price>ul>li#saveBtn a:visited::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	border: 0 solid transparent;
	box-sizing: border-box;
	transition: border 0.2s linear;
}

#simulator>#simulator_visual>#simulator_price>ul>li#saveBtn a:hover::after,
#simulator>#simulator_visual>#simulator_price>ul>li#saveBtn a:active::after {
	border: 3px solid #9bca50;
}

@media only screen and (max-width:767px) {
	#simulator>#simulator_visual>#simulator_price>ul>li#saveBtn a {
		padding: 6px 0 6px;
	}

	#simulator>#simulator_visual>#simulator_price>ul>li#saveBtn a:hover,
	#simulator>#simulator_visual>#simulator_price>ul>li#saveBtn a:active {
		background: linear-gradient(45deg, #9bca50 0%, #a6dc51 100%);
		color: #fff;
	}

	#simulator>#simulator_visual>#simulator_price>ul>li#saveBtn a:hover::after,
	#simulator>#simulator_visual>#simulator_price>ul>li#saveBtnd a:active::after {
		display: none;
	}
}

#simulator>#simulator_visual>#simulator_price>ul>li#buyBtn a {
	display: block;
	position: relative;
	padding: 19px 0 14px;
	border-radius: 30px;
	background: #333;
	color: #fff;
}

#simulator>#simulator_visual>#simulator_price>ul>li#buyBtn a:hover,
#simulator>#simulator_visual>#simulator_price>ul>li#buyBtn a:active {
	background: #fff;
	color: #333;
	text-decoration: none;
}

#simulator>#simulator_visual>#simulator_price>ul>li#buyBtn a:link::after,
#simulator>#simulator_visual>#simulator_price>ul>li#buyBtn a:visited::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	border: 0 solid transparent;
	box-sizing: border-box;
	transition: border 0.2s linear;
}

#simulator>#simulator_visual>#simulator_price>ul>li#buyBtn a:hover::after,
#simulator>#simulator_visual>#simulator_price>ul>li#buyBtn a:active::after {
	border: 3px solid #333;
}

@media only screen and (max-width:767px) {
	#simulator>#simulator_visual>#simulator_price>ul>li#buyBtn a {
		padding: 6px 0 6px;
	}

	#simulator>#simulator_visual>#simulator_price>ul>li#buyBtn a:hover,
	#simulator>#simulator_visual>#simulator_price>ul>li#buyBtn a:active {
		background: #333;
		color: #fff;
	}

	#simulator>#simulator_visual>#simulator_price>ul>li#buyBtn a:hover::after,
	#simulator>#simulator_visual>#simulator_price>ul>li#buyBtn a:active::after {
		display: none;
	}
}

#simulator>#simulator_nav {
	position: relative;
	background: #fff;
}

/* メインナビ */
#simulator>#simulator_nav>#main_nav {
	max-width: 1500px;
	min-width: 1200px;
	margin: 0 auto;
}

#simulator>#simulator_nav>#main_nav>ul {
	display: -webkit-box;
	/* old Android	*/
	display: -webkit-flex;
	/* Safari etc.	*/
	display: -ms-flexbox;
	/* IE10					*/
	display: flex;
	-webkit-justify-content: center;
	/* Safari etc.	*/
	-ms-justify-content: center;
	/* IE10					*/
	justify-content: center;
	width: 100%;
}

#simulator>#simulator_nav>#main_nav>ul>li {
	/* float: left; */
	width: 14.285714%;
	height: 140px;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(155, 202, 80, 1)), to(rgba(166, 220, 81, 1)));
	background: linear-gradient(to bottom, rgba(155, 202, 80, 1), rgba(166, 220, 81, 1));
	vertical-align: top;
	user-select: none;
}

@media only screen and (max-width:767px) {
	#simulator>#simulator_nav>#main_nav {
		max-width: 100%;
		min-width: 100%;
	}

	#simulator>#simulator_nav>#main_nav>ul>li {
		/* width: calc(100%/4); */
		width: calc(100%/5);
		height: 70px;
	}
}

#simulator>#simulator_nav>#main_nav>ul>li a {
	display: block;
	position: relative;
	min-height: 92px;
	padding: 27px 0 21px;
	background-color: rgba(255, 255, 255, 1);
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	text-align: center;
	text-decoration: none;
}

#simulator>#simulator_nav>#main_nav>ul>li a span {
	display: block;
}

@media only screen and (max-width:767px) {
	#simulator>#simulator_nav>#main_nav>ul>li a span {
		margin-top: -5px;
	}
}

#simulator>#simulator_nav>#main_nav>ul>li a span br {
	display: none;
}

@media only screen and (max-width:320px) {
	#simulator>#simulator_nav>#main_nav>ul>li a span br {
		display: inline;
	}
}

#cat0_pattern a {
	min-height: 93px;
	padding-bottom: 20px;
}

#cat0_heating a {
	padding-bottom: 22px;
}

/* 近日追加 */
/*
	追加後は index.html から a.navDisabled をトル
 */
#simulator>#simulator_nav>#main_nav>ul>li a.navDisabled {
	pointer-events: none;
	cursor: default;
	text-decoration: none;
}

#simulator>#simulator_nav>#main_nav>ul>li a.navDisabled:before {
	content: '';
	display: block;
	position: absolute;
	top: 27px;
	right: 50%;
	height: 45px;
	width: 45px;
	margin-right: -42px;
	background: url(../img/i_nav_soon.png) no-repeat left top;
	background-size: 45px 45px;
}

@media only screen and (max-width:767px) {
	#simulator>#simulator_nav>#main_nav>ul>li a {
		min-height: 52px;
		padding: 12px 0 6px;
	}

	#simulator>#simulator_nav>#main_nav>ul>li#saveBtn a {
		min-height: 53px;
		padding-bottom: 5px;
	}

	#simulator>#simulator_nav>#main_nav>ul>li#buyBtn a {
		min-height: 49px;
		padding-bottom: 9px;
	}

	#cat0_pattern a {
		padding-bottom: 6px;
	}

	#cat0_size a {
		min-height: 53px;
		padding-bottom: 5px;
	}

	#cat0_sink a {
		min-height: 53px;
		padding-top: 11px;
	}

	#cat0_heating a {
		padding-bottom: 6px;
	}

	/* 近日追加 */
	#simulator>#simulator_nav>#main_nav>ul>li a.navDisabled:before {
		top: 12px;
		right: 50%;
		height: 27px;
		width: 27px;
		margin-right: -25px;
		background-size: 27px 27px;
	}
}

#simulator>#simulator_nav>#main_nav>ul>li.current a,
#simulator>#simulator_nav>#main_nav>ul>li a:hover,
#simulator>#simulator_nav>#main_nav>ul>li a:active {
	background-color: rgba(255, 255, 255, 0);
	color: #fff;
}

#cat0_type a svg {
	width: 84px;
	height: 66px;
	padding-bottom: 5px;
}

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

	#simulator>#simulator_nav>#main_nav>ul>li a:hover,
	#simulator>#simulator_nav>#main_nav>ul>li a:active {
		background: #fff;
		color: #333;
	}

	#simulator>#simulator_nav>#main_nav>ul>li.current a:hover,
	#simulator>#simulator_nav>#main_nav>ul>li.current a:active {
		background: linear-gradient(45deg, #9bca50 0%, #a6dc51 100%);
		color: #fff;
	}

	#cat0_type a svg {
		width: calc(92px/2);
		height: calc(73px/2);
		padding-bottom: 0;
	}
}

#cat0_type a svg .cls-1-1,
#cat0_type a svg .cls-1-4,
#cat0_type a svg .cls-1-5 {
	fill: none;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_type a svg .cls-1-2 {
	clip-path: url(#clip-path01);
}

#cat0_type a svg .cls-1-3 {
	fill: #9bca50;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_type.current a svg .cls-1-3,
#cat0_type a:hover svg .cls-1-3,
#cat0_type a:active svg .cls-1-3 {
	fill: #fff;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_type a svg .cls-1-4,
#cat0_type a svg .cls-1-5 {
	stroke: #9bca50;
	stroke-linejoin: round;
	stroke-width: 6px;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_type.current a svg .cls-1-4,
#cat0_type.current a svg .cls-1-5,
#cat0_type a:hover svg .cls-1-4,
#cat0_type a:active svg .cls-1-4,
#cat0_type a:hover svg .cls-1-5,
#cat0_type a:active svg .cls-1-5 {
	stroke: #fff;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_type a svg .cls-1-4 {
	stroke-linecap: round;
}

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

	#cat0_type a:hover svg .cls-1-3,
	#cat0_type a:active svg .cls-1-3 {
		fill: #9bca50;
	}

	#cat0_type.current a:hover svg .cls-1-3,
	#cat0_type.current a:active svg .cls-1-3 {
		fill: #fff;
	}

	#cat0_type a:hover svg .cls-1-4,
	#cat0_type a:active svg .cls-1-4,
	#cat0_type a:hover svg .cls-1-5,
	#cat0_type a:active svg .cls-1-5 {
		stroke: #9bca50;
	}

	#cat0_type.current a:hover svg .cls-1-4,
	#cat0_type.current a:active svg .cls-1-4,
	#cat0_type.current a:hover svg .cls-1-5,
	#cat0_type.current a:active svg .cls-1-5 {
		stroke: #fff;
	}
}

#cat0_pattern a svg {
	width: 72px;
	height: 65px;
	padding: 3px 0;
}

@media only screen and (max-width:767px) {
	#cat0_pattern a svg {
		width: calc(79px/2);
		height: calc(72px/2);
		padding: 1px 0 0;
	}
}

#cat0_pattern a svg .cls-3-1,
#cat0_pattern a svg .cls-3-4 {
	fill: #9bca50;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_pattern a svg .cls-3-2,
#cat0_pattern a svg .cls-3-3 {
	fill: #9bca50;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_pattern.current a svg .cls-3-1,
#cat0_pattern.current a svg .cls-3-4,
#cat0_pattern a:hover svg .cls-3-1,
#cat0_pattern a:active svg .cls-3-1,
#cat0_pattern a:hover svg .cls-3-4,
#cat0_pattern a:active svg .cls-3-4 {
	fill: #fff;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_pattern.current a svg .cls-3-2,
#cat0_pattern.current a svg .cls-3-3,
#cat0_pattern a:hover svg .cls-3-2,
#cat0_pattern a:active svg .cls-3-2,
#cat0_pattern a:hover svg .cls-3-3,
#cat0_pattern a:active svg .cls-3-3 {
	fill: #fff;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_pattern a svg .cls-3-2,
#cat0_pattern a svg .cls-3-4 {
	fill-rule: evenodd;
}

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

	#cat0_pattern a:hover svg .cls-3-1,
	#cat0_pattern a:active svg .cls-3-1,
	#cat0_pattern a:hover svg .cls-3-4,
	#cat0_pattern a:active svg .cls-3-4 {
		fill: #9bca50;
	}

	#cat0_pattern.current a:hover svg .cls-3-1,
	#cat0_pattern.current a:active svg .cls-3-1,
	#cat0_pattern.current a:hover svg .cls-3-4,
	#cat0_pattern.current a:active svg .cls-3-4 {
		fill: #fff;
	}

	#cat0_pattern a:hover svg .cls-3-2,
	#cat0_pattern a:active svg .cls-3-2,
	#cat0_pattern a:hover svg .cls-3-3,
	#cat0_pattern a:active svg .cls-3-3 {
		fill: #9bca50;
	}

	#cat0_pattern.current a:hover svg .cls-3-2,
	#cat0_pattern.current a:active svg .cls-3-2,
	#cat0_pattern.current a:hover svg .cls-3-3,
	#cat0_pattern.current a:active svg .cls-3-3 {
		fill: #fff;
	}
}

#cat0_size a svg {
	width: 67px;
	height: 67px;
	padding-top: 4px;
	transform: rotate(15deg);
}

@media only screen and (max-width:767px) {
	#cat0_size a svg {
		width: calc(74px/2);
		height: calc(74px/2);
		margin-top: -1px;
		padding-top: 0;
	}
}

#cat0_size a svg .cls-4-1,
#cat0_size a svg .cls-4-4 {
	fill: none;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_size a svg .cls-4-2 {
	clip-path: url(#clip-path02);
}

#cat0_size a svg .cls-4-3 {
	fill: #9bca50;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_size a svg .cls-4-4 {
	stroke: #9bca50;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3px;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_size.current a svg .cls-4-3,
#cat0_size a:hover svg .cls-4-3,
#cat0_size a:active svg .cls-4-3 {
	fill: #fff;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_size.current a svg .cls-4-4,
#cat0_size a:hover svg .cls-4-4,
#cat0_size a:active svg .cls-4-4 {
	stroke: #fff;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

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

	#cat0_size a:hover svg .cls-4-3,
	#cat0_size a:active svg .cls-4-3 {
		fill: #9bca50;
	}

	#cat0_size.current a:hover svg .cls-4-3,
	#cat0_size.current a:active svg .cls-4-3 {
		fill: #fff;
	}

	#cat0_size a:hover svg .cls-4-4,
	#cat0_size a:active svg .cls-4-4 {
		stroke: #9bca50;
	}

	#cat0_size.current a:hover svg .cls-4-4,
	#cat0_size.current a:active svg .cls-4-4 {
		stroke: #fff;
	}
}

#cat0_sink a svg {
	width: 77px;
	height: 60px;
	padding-bottom: 11px;
}

@media only screen and (max-width:767px) {
	#cat0_sink a svg {
		width: calc(85px/2);
		height: calc(66px/2);
		padding-bottom: 4px;
	}
}

#cat0_sink a svg .cls-5-1 {
	fill: #9bca50;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_sink a svg .cls-5-2 {
	fill: none;
	stroke: #9bca50;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 6px;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_sink.current a svg .cls-5-1,
#cat0_sink a:hover svg .cls-5-1,
#cat0_sink a:active svg .cls-5-1 {
	fill: #fff;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_sink.current a svg .cls-5-2,
#cat0_sink a:hover svg .cls-5-2,
#cat0_sink a:active svg .cls-5-2 {
	stroke: #fff;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

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

	#cat0_sink a:hover svg .cls-5-1,
	#cat0_sink a:active svg .cls-5-1 {
		fill: #9bca50;
	}

	#cat0_sink.current a:hover svg .cls-5-1,
	#cat0_sink.current a:active svg .cls-5-1 {
		fill: #fff;
	}

	#cat0_sink a:hover svg .cls-5-2,
	#cat0_sink a:active svg .cls-5-2 {
		stroke: #9bca50;
	}

	#cat0_sink.current a:hover svg .cls-5-2,
	#cat0_sink.current a:active svg .cls-5-2 {
		stroke: #fff;
	}
}

#cat0_heating a svg {
	width: 82px;
	height: 55px;
	padding: 4px 0 11px;
}

@media only screen and (max-width:767px) {
	#cat0_heating a svg {
		width: calc(90px/2);
		height: calc(61px/2);
		padding: 2px 0 3px;
	}
}

#cat0_heating a svg .cls-6-1 {
	fill: #9bca50;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_heating.current a svg .cls-6-1,
#cat0_heating a:hover svg .cls-6-1,
#cat0_heating a:active svg .cls-6-1 {
	fill: #fff;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

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

	#cat0_heating a:hover svg .cls-6-1,
	#cat0_heating a:active svg .cls-6-1 {
		fill: #9bca50;
	}

	#cat0_heating.current a:hover svg .cls-6-1,
	#cat0_heating.current a:active svg .cls-6-1 {
		fill: #fff;
	}
}

#cat0_unit a svg {
	width: 78px;
	height: 59px;
	padding: 4px 0 8px;
}

@media only screen and (max-width:767px) {
	#cat0_unit a svg {
		width: calc(86px/2);
		height: calc(65px/2);
		padding: 1px 0 2px;
	}
}

#cat0_unit a svg .cls-7-1,
#cat0_unit a svg .cls-7-5 {
	fill: none;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_unit a svg .cls-7-2 {
	clip-path: url(#clip-path07);
}

#cat0_unit a svg .cls-7-3 {
	fill: #9bca50;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_unit a svg .cls-7-4 {
	fill: #9bca50;
	fill-rule: evenodd;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_unit a svg .cls-7-5 {
	stroke: #9bca50;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 3px;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_unit.current a svg .cls-7-3,
#cat0_unit.current a svg .cls-7-4,
#cat0_unit a:hover svg .cls-7-3,
#cat0_unit a:active svg .cls-7-3,
#cat0_unit a:hover svg .cls-7-4,
#cat0_unit a:active svg .cls-7-4 {
	fill: #fff;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_unit.current a svg .cls-7-5,
#cat0_unit a:hover svg .cls-7-5,
#cat0_unit a:active svg .cls-7-5 {
	stroke: #fff;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

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

	#cat0_unit a:hover svg .cls-7-3,
	#cat0_unit a:active svg .cls-7-3,
	#cat0_unit a:hover svg .cls-7-4,
	#cat0_unit a:active svg .cls-7-4 {
		fill: #9bca50;
	}

	#cat0_unit.current a:hover svg .cls-7-3,
	#cat0_unit.current a:active svg .cls-7-3,
	#cat0_unit.current a:hover svg .cls-7-4,
	#cat0_unit.current a:active svg .cls-7-4 {
		fill: #fff;
	}

	#cat0_unit a:hover svg .cls-7-5,
	#cat0_unit a:active svg .cls-7-5 {
		stroke: #9bca50;
	}

	#cat0_unit.current a:hover svg .cls-7-5,
	#cat0_unit.current a:active svg .cls-7-5 {
		stroke: #fff;
	}
}

#cat0_option a svg {
	width: 52px;
	height: 52px;
	padding: 8px 0 11px;
}

@media only screen and (max-width:767px) {
	#cat0_option a svg {
		width: calc(57px/2);
		height: calc(57px/2);
		padding: 3px 0 4px;
	}
}

#cat0_option a svg .cls-8-1 {
	fill: none;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_option a svg .cls-8-2 {
	clip-path: url(#clip-path08);
}

#cat0_option a svg .cls-8-3 {
	fill: #9bca50;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_option a svg .cls-8-4 {
	fill: #9bca50;
	fill-rule: evenodd;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#cat0_option.current a svg .cls-8-3,
#cat0_option.current a svg .cls-8-4,
#cat0_option a:hover svg .cls-8-3,
#cat0_option a:active svg .cls-8-3,
#cat0_option a:hover svg .cls-8-4,
#cat0_option a:active svg .cls-8-4 {
	fill: #fff;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

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

	#cat0_option a:hover svg .cls-8-3,
	#cat0_option a:active svg .cls-8-3,
	#cat0_option a:hover svg .cls-8-4,
	#cat0_option a:active svg .cls-8-4 {
		fill: #9bca50;
	}

	#cat0_option.current a:hover svg .cls-8-3,
	#cat0_option.current a:active svg .cls-8-3,
	#cat0_option.current a:hover svg .cls-8-4,
	#cat0_option.current a:active svg .cls-8-4 {
		fill: #fff;
	}
}

/* サブナビ */

#simulator .slick-disabled,
#simulator .slick-hidden {
	display: none !important;
}

#simulator>#simulator_nav>#sub_nav {
	display: none;
	position: absolute;
	top: -130px;
	left: 0;
	width: 100%;
	border-bottom: 5px solid rgba(178, 187, 178, 0.5);
	box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.1);
	z-index: 10;
}

#simulator>#simulator_nav>#sub_nav>div {
	height: 140px;
	background: rgba(51, 51, 51, 0.9);
}

@media only screen and (max-width:767px) {
	#simulator>#simulator_nav>#sub_nav {
		position: absolute;
		top: -95px;
	}

	#simulator>#simulator_nav>#sub_nav>div {
		height: 105px;
	}
}

#simulator>#simulator_nav>#sub_nav>div>div {
	max-width: 1500px;
	min-width: 1200px;
	margin: 0 auto;
}

#simulator>#simulator_nav>#sub_nav>div>div>div {
	position: relative;
	width: 950px;
	margin: 0 auto;
	/*padding-right: 50px;*/
}

@media only screen and (max-width:767px) {
	#simulator>#simulator_nav>#sub_nav>div>div {
		max-width: 100%;
		min-width: 100%;
		margin: 0 auto;
	}

	#simulator>#simulator_nav>#sub_nav>div>div>div {
		width: 270px;
		padding: 0 25px;
	}
}

@media only screen and (max-width:320px) {
	#simulator>#simulator_nav>#sub_nav>div>div>div {
		width: 260px;
		padding: 0 20px;
	}
}

#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item {
	padding-top: 20px;
}

#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item.items_pattern {
	padding-top: 36px;
}

@media only screen and (max-width:767px) {
	#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item {
		padding-top: 13px;
	}

	#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item.items_pattern {
		padding-top: 18px;
	}
}

#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item li {
	position: relative;
	/*float: left;*/
	/*margin-left: 5px;*/
	cursor: pointer;
	outline: none;
}

/*サブメニュー　hover表現*/
#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item li:nth-child(n+2) {
	/*margin-left: 30px;*/
	margin-left: 15px;
}

#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item.items_pattern li:nth-child(n+2) {
	/* margin-left: 20px; */
	margin-left: 5px;
}

@media only screen and (max-width:767px) {
	#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item li:nth-child(n+2) {
		margin-left: 10px;
	}

	/* カラーパターン用 */
	#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item.items_pattern li:nth-child(n+2) {
		margin-left: 8px;
	}
}

@media only screen and (max-width:320px) {
	#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item li:nth-child(n+2) {
		margin-left: 3px;
	}

	/* カラーパターン用 */
	#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item.items_pattern li:nth-child(n+2) {
		margin-left: 8px;
	}
}

#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item li.current::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border: 4px solid rgba(141, 182, 72, 1);
	border-radius: 0;
	box-sizing: border-box;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item li.current:hover::before {
	border-radius: 8px;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

/*#simulator > #simulator_nav > #sub_nav > div > div > div > .sub_nav_item li.current::before {
	content: "";
	position: absolute;
	top: calc(50% - 40px);
	left: calc(50% - 40px);
	width: 80px;
	height: 80px;
	background: url(../img/i_snav_current01.png) no-repeat left top;
	background-size: 80px 80px;
}*/

#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item li.current:focus {
	outline: none;
}

/*@media only screen and (max-width:767px) {
	#simulator > #simulator_nav > #sub_nav > div > div > div > .sub_nav_item li.current::before {
		top: calc(50% - 30px);
		left: calc(50% - 30px);
		width: 60px;
		height: 60px;
		background-size: 60px 60px;
	}
}*/

@media only screen and (max-width:767px) {
	#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item li.current:hover::before {
		border-radius: 0;
	}

	/*#simulator > #simulator_nav > #sub_nav > div > div > div > .sub_nav_item li:nth-child(n+3) {
		display: none;
	}*/
}

#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item li img {
	/*width: 160px;
	height: 100px;*/
	padding: 4px;
	border-radius: 0 0;
	background-color: rgba(255, 255, 255, 0);
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item li:hover img {
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.2);
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
}

@media only screen and (max-width:767px) {
	#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item li img {
		width: 120px;
		height: 70px;
	}

	#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item li:hover img {
		border-radius: 0;
	}

	/*#simulator > #simulator_nav > #sub_nav > div > div > div > .sub_nav_item li:nth-child(n+3) {
		display: none;
	}*/

	/* カラーパターン時img調整 */
	#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item.items_pattern li img {
		width: 60px;
		height: 60px;
	}
}


/* カラーパターン */
#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item.color_pattern {
	display: none;
}

#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item.color_pattern li.current::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 8px);
	height: calc(82px - 8px);
	border: 4px solid rgba(156, 202, 80, 0.9);
	background: none;
}

@media only screen and (max-width:767px) {
	#simulator>#simulator_nav>#sub_nav>div>div>div>.sub_nav_item.color_pattern li.current::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: calc(100% - 8px);
		height: calc(58px - 8px);
		border: 4px solid rgba(156, 202, 80, 0.9);
		background: none;
	}
}

#simulator>#simulator_nav>#sub_nav>div>div>#sub_nav_prev {
	position: absolute;
	z-index: 1000;
	top: calc(50% - 27px);
	left: 30px;
	width: 30px;
	height: 54px;
	cursor: pointer;
}

#simulator>#simulator_nav>#sub_nav>div>div>#sub_nav_next {
	position: absolute;
	z-index: 1000;
	top: calc(50% - 27px);
	right: 30px;
	width: 30px;
	height: 54px;
	cursor: pointer;
}

@media only screen and (max-width:767px) {
	#simulator>#simulator_nav>#sub_nav>div>div>#sub_nav_prev {
		top: calc(50% - (27px/2));
		left: 5px;
		width: 15px;
		height: 27px;
	}

	#simulator>#simulator_nav>#sub_nav>div>div>#sub_nav_next {
		top: calc(50% - (27px/2));
		right: 5px;
		width: 15px;
		height: 27px;
	}
}

#simulator>#simulator_nav>#sub_nav>div>div>p {
	outline: none;
}

#simulator>#simulator_nav>#sub_nav>div>div>p img {
	width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

#simulator>#simulator_nav>#sub_nav>div>div>div>#sub_nav_btn {
	position: absolute;
	z-index: 1000;
	top: 25px;
	right: -45px;
}

#simulator>#simulator_nav>#sub_nav>div>div>div>#sub_nav_btn li {
	width: 40px;
	height: 40px;
}

@media only screen and (max-width:767px) {
	#simulator>#simulator_nav>#sub_nav>div>div>div>#sub_nav_btn {
		top: 19px;
		right: -10px;
	}

	#simulator>#simulator_nav>#sub_nav>div>div>div>#sub_nav_btn li {
		width: 29px;
		height: 30px;
	}
}

@media only screen and (max-width:375px) {
	#simulator>#simulator_nav>#sub_nav>div>div>div>#sub_nav_btn {
		top: 19px;
		right: -5px;
	}

	#simulator>#simulator_nav>#sub_nav>div>div>div>#sub_nav_btn li {
		width: 29px;
		height: 30px;
	}
}

@media only screen and (max-width:320px) {
	#simulator>#simulator_nav>#sub_nav>div>div>div>#sub_nav_btn {
		top: 4px;
		right: 3px;
	}

	#simulator>#simulator_nav>#sub_nav>div>div>div>#sub_nav_btn li {
		float: right;
		width: 29px;
		height: 30px;
		border-radius: 50%;
		background: rgba(51, 51, 51, 1);
	}

	#simulator>#simulator_nav>#sub_nav>div>div>div>#sub_nav_btn li:nth-child(n+2) {
		/*padding: 0 9px 0 0 !important;*/
		margin-right: 9px;
		padding: 0 !important;
	}
}

#simulator>#simulator_nav>#sub_nav>div>div>div>#sub_nav_btn li:nth-child(n+2) {
	padding-top: 9px;
}

#simulator>#simulator_nav>#sub_nav>div>div>div>#sub_nav_btn li a {
	display: block;
	position: relative;
}

#simulator>#simulator_nav>#sub_nav>div>div>div>#sub_nav_btn li a:hover::after,
#simulator>#simulator_nav>#sub_nav>div>div>div>#sub_nav_btn li a:active::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 1px;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	border-radius: 50%;
	background: #fff;
}

#simulator>#simulator_nav>#sub_nav>div>div>div>#sub_nav_btn li a img {
	position: relative;
	width: 100%;
	height: auto;
	z-index: 1;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

/* カラーパターンのナビ */
#simulator>#simulator_nav>#color_nav {
	display: none;
	position: absolute;
	top: -80px;
	left: 0;
	width: 100%;
	height: 100px;
	/*box-shadow: 0px 20px 20px -20px rgba(0, 0, 0, 0.1);*/
	border-bottom: 5px solid rgba(178, 187, 178, 0.5);
	box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.1);
	z-index: 10;
}

#simulator>#simulator_nav>#color_nav>div {
	background: rgba(51, 51, 51, 0.9);
	/*psdから変更*/
}

#simulator>#simulator_nav>#color_nav>div>div {
	position: relative;
	width: 1000px;
	margin: 0 auto;
}

#simulator>#simulator_nav>#color_nav>div>div .color_nav_item {
	padding: 20px 0;
}

#simulator>#simulator_nav>#color_nav>div>div .color_nav_item li {
	position: relative;
	float: left;
	/*margin-left: 5px;*/
	cursor: pointer;
	outline: none;
}

/*カラーパターン　hover表現*/
#simulator>#simulator_nav>#color_nav>div>div .color_nav_item li img {
	border-radius: 0;
	transition: all 0.1s ease-out;
	-webkit-transition: all 0.1s ease-out;
}

#simulator>#simulator_nav>#color_nav>div>div .color_nav_item li:hover img {
	border-radius: 10px 10px;
	transition: all 0.1s ease-out;
	-webkit-transition: all 0.1s ease-out;
}

#simulator>#simulator_nav>#color_nav>div>div .color_nav_item li:nth-child(n+2) {
	margin-left: 10px;
}

#simulator>#simulator_nav>#color_nav>div>div .color_nav_item li.current::before {
	content: "";
	position: absolute;
	top: calc(50% - (40px/2));
	left: calc(50% - (40px/2));
	width: 40px;
	height: 40px;
	background: url(../img/i_snav_current02.png) no-repeat left top;
}

#simulator>#simulator_nav>#color_nav>div>div .color_nav_item li img {
	width: 60px;
	height: 60px;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

@media only screen and (max-width: 414px) {
	#simulator>#simulator_nav>#color_nav {
		top: -185px;
		height: 80px;
	}

	#simulator>#simulator_nav>#color_nav>div>div {
		width: 310px;
	}

	#simulator>#simulator_nav>#color_nav>div>div .color_nav_item li.current::before {
		top: calc(50% - (30px/2));
		left: calc(50% - (30px/2));
		width: 30px;
		height: 30px;
		background-size: 30px 30px;
	}

	#simulator>#simulator_nav>#color_nav>div>div .color_nav_item li img {
		width: 43px;
		height: 43px;
	}

	#simulator>#simulator_nav>#color_nav>div>div .color_nav_item li:hover img {
		border-radius: 0;
	}

	/* 静的確認用。動的部分ができたら消すこと */
	/*#simulator > #simulator_nav > #color_nav > div > div .color_nav_item li:nth-child(n+7) {
		display: none;
	}*/
}

@media only screen and (max-width: 320px) {
	#simulator>#simulator_nav>#color_nav>div>div {
		width: 255px;
	}
}

#simulator>#simulator_nav>#color_nav>div>#color_nav_prev {
	position: absolute;
	z-index: 1000;
	top: calc(50% - 27px);
	left: 30px;
	width: 30px;
	height: 54px;
	cursor: pointer;
}

#simulator>#simulator_nav>#color_nav>div>#color_nav_next {
	position: absolute;
	z-index: 1000;
	top: calc(50% - 27px);
	right: 30px;
	width: 30px;
	height: 54px;
	cursor: pointer;
}

#simulator>#simulator_nav>#color_nav>div>p img {
	width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

@media only screen and (max-width:767px) {
	#simulator>#simulator_nav>#color_nav>div>#color_nav_prev {
		top: calc(50% - (27px/2));
		left: 5px;
		width: 15px;
		height: 27px;
	}

	#simulator>#simulator_nav>#color_nav>div>#color_nav_next {
		top: calc(50% - (27px/2));
		right: 5px;
		width: 15px;
		height: 27px;
	}
}