@charset "Shift_JIS";

/*==============================================================
contents - common
==============================================================*/

.exteriorOuterwall {
	--tmcolor: #b7c52a;
}

#main.exteriorRoof {
	--tmcolor: #f8b74a;
	--tmcolor2: #e49b36;
}

#main.exteriorWindow {
	--tmcolor: #6eb9c9;
	--tmcolor2: #34939f;
}

#main.exteriorEntrance {
	--tmcolor: #b78dac;
}

#main.exteriorOutdoorFacilities {
	--tmcolor: #75b552;
}

#main.exteriorOthers {
	--tmcolor: #5476ba;
}

#main.exteriorThermal {
	--tmcolor: #ee7805;
}

.exteriorOuterwall .tmColor {
	color: #b7c52a;
}

#main.exteriorRoof .tmColor {
	color: #f8b74a;
}

#main.exteriorRoof .tmColor2 {
	color: #e49b36;
}

#main.exteriorWindow .tmColor {
	color: #6eb9c9;
}

#main.exteriorWindow .tmColor2 {
	color: #34939f;
}

#main.exteriorEntrance .tmColor {
	color: #b78dac;
}

#main.exteriorOutdoorFacilities .tmColor {
	color: #75b552;
}

#main.exteriorOthers .tmColor {
	color: #5476ba;
}

#main.exteriorThermal .tmColor {
	color: #ee7805;
}

.exteriorOuterwall .tmBgColor {
	background-color: #b7c52a;
}

#main.exteriorRoof .tmBgColor {
	background-color: #f8b74a;
}

#main.exteriorWindow .tmBgColor {
	/* background-color: #5dc2d0; */
	background-color: #6eb9c9;
}

#main.exteriorEntrance .tmBgColor {
	background-color: #b78dac;
}

#main.exteriorOutdoorFacilities .tmBgColor {
	background-color: #75b552;
}

#main.exteriorOthers .tmBgColor {
	background-color: #5476ba;
}

#main.exteriorThermal .tmBgColor {
	background-color: #ee7805;
}

.bgWhite {
	background-color: #fff;
}

#main .w2-1 {
	width: 48%;
}

#main .w2-1l {
	width: 50%;
}

#main .w2-1s {
	width: 42%;
}

#main .w3-1 {
	width: 296px;
}

#main .w3-2 {
	width: 628px;
}

#main .w3-1p {
	width: 31%;
}

#main .w3-2p {
	width: 65%;
}

#main .w4-1 {
	width: 210px;
}

#main .w4-2 {
	width: 460px;
}

#main .w4-3 {
	width: 710px;
}

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

	@media (orientation:portrait) {

		#main .w2-1,
		#main .w2-1l,
		#main .w2-1s,
		#main .w3-1,
		#main .w3-1p,
		#main .w4-1 {
			width: 48%;
		}

		#main .w3-2,
		#main .w4-2,
		#main .w4-3 {
			width: 100%;
		}
	}

	@media (orientation:landscape) {

		#main .w2-1,
		#main .w2-1l,
		#main .w2-1s,
		#main .w4-1 {
			width: 48%;
		}

		#main .w3-1 {
			width: 31%;
		}

		#main .w3-2 {
			width: 65.5%;
		}

		#main .w4-2,
		#main .w4-3 {
			width: 100%;
		}
	}
}

#main .iblock {
	display: inline-block;
}

/*--------------- pageHeader ---------------*/
#pageHeader:not(.v2) {
	width: 100%;
	padding: 50px 0 20px;
	min-height: 420px;
	background: url(../images/bg_stripe.png) repeat left top / 16px 10px #fff;
}

#pageHeader:not(.v2) .hGroup {
	width: 960px;
	margin: 0 auto;
	position: relative;
}

#pageHeader:not(.v2) .hGroup h2 {
	font-size: 2.2em;
	padding-bottom: 0.6em;
	margin-bottom: 0.8em;
	border-bottom: solid 2px #000;
	font-weight: 700;
	letter-spacing: 0.05em;
}

#pageHeader:not(.v2) .hGroup h2 span {
	display: inline-block;
	margin-left: 1.3em;
	font-size: 0.7em;
	font-weight: 300;
	letter-spacing: 0;
}

#pageHeader:not(.v2) .hGroup p.sub {
	font-size: 1.5em;
	margin-bottom: 0.6em;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	font-weight: 500;
}

#pageHeader:not(.v2) .hGroup p:not(.sub) {
	width: 470px;
}

#pageHeader:not(.v2) .hGroup .house {
	width: 510px;
	position: absolute;
	right: -80px;
	top: 0;
	z-index: 2;
}

@media screen and (max-width:767px) {
	#pageHeader:not(.v2) {
		width: 100%;
		padding: 30px 0 50px;
		min-height: 450px;
	}

	#pageHeader:not(.v2) .hGroup {
		width: 92vw;
	}

	#pageHeader:not(.v2) .hGroup h2 {
		font-size: min(2.2em, 6.8vw);
	}

	#pageHeader:not(.v2) .hGroup h2 span {
		display: block;
		margin-left: 0;
	}

	#pageHeader:not(.v2) .hGroup p.sub br {
		display: none;
	}

	#pageHeader:not(.v2) .hGroup p:not(.sub) {
		width: 100%;
	}

	#pageHeader:not(.v2) .hGroup .house {
		width: 80vw;
		margin: 0 auto 20px;
		position: static;
		right: auto;
		top: auto;
	}
}

#pageHeader.v2 {
	min-height: 420px;
	display: flex;
}

#pageHeader.v2 .hGroup {
	width: 50%;
	padding: 4rem 5% 2rem;
	color: #fff;
}

#pageHeader.v2 .hGroup h2 {
	display: inline-block;
	padding: 0 .1em 0.3em;
	margin-bottom: 2em;
	border-bottom: solid 2px;
	letter-spacing: 0.05em;
}

#pageHeader.v2 .hGroup h2 span {
	display: inline-block;
	font-size: 2.2em;
	margin-right: 1em;
	font-weight: 300;
	letter-spacing: 0;
}

#pageHeader.v2 .hGroup p.sub {
	font-size: 1.5em;
	margin-bottom: 0.6em;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	font-weight: 500;
}

#pageHeader.v2 .mainimg {
	width: 50%;
	position: relative;
}

#pageHeader.v2 .mainimg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width:767px) {
	#pageHeader.v2 {
		flex-wrap: wrap;
	}

	#pageHeader.v2 .hGroup {
		width: 100%;
		padding: 1.5rem 5% 2rem;
		order: 2;
	}

	#pageHeader .hGroup h2 {
		margin-bottom: 1.2em;
	}

	#pageHeader .hGroup h2 span {
		font-size: 2em;
	}

	#pageHeader .hGroup p.sub {
		font-size: 1.4em;
	}

	#pageHeader.v2 .mainimg {
		width: 100%;
		height: 42vw;
		order: 1;
	}
}

/*--------------- reform point ---------------*/
#reformPoint {
	background-color: #e8e6e5;
	padding: 65px 0 30px;
	position: relative;
}

#reformPoint h3 {
	width: 16em;
	padding: 0.7em 0;
	line-height: 1;
	font-size: 1.2em;
	font-weight: 400;
	color: #fff;
	text-align: center;
	position: absolute;
	left: calc(50% - 8em);
	top: -1.2em;
	background-color: var(--tmcolor);
	filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
}

#reformPoint h3::after {
	content: '';
	display: block;
	position: absolute;
	left: calc(50% - 20px);
	top: 100%;
	border: solid 1.1em transparent;
	border-top: solid 1.2em var(--tmcolor);
}

#reformPoint ul {
	width: 960px;
	margin: 0 auto;
	justify-content: center;
	counter-reset: point_num;
	gap: 13px;
}

@media screen and (max-width:767px) {
	#reformPoint ul {
		width: 92vw;
	}
}

#reformPoint li {
	width: 230px;
}

#reformPoint li a:not(.more) {
	counter-increment: point_num;
}

#reformPoint li a:is(.more, .package) {
	border-width: 0;
	border-radius: 10px;
}

#reformPoint li a::before {
	display: block;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0.3em;
	font-weight: 700;
	pointer-events: none;
}

#reformPoint li a:not(.more)::before {
	content: counter(point_num, decimal-leading-zero);
	font-size: 1.4em;
}

#reformPoint li.more a::before {
	content: 'more';
	font-size: 1.25em;
}

#reformPoint li.package a::before {
	content: none;
}

#reformPoint li a {
	display: block;
	height: 6.5em;
	margin: 0;
	font-size: 1.05em;
	text-align: center;
	background-color: #fff;
	border-style: solid;
	border-width: 2px;
	position: relative;
}

#reformPoint li p {
	display: block;
	width: 100%;
	color: #000;
	line-height: 1.5em;
	position: absolute;
	left: 0;
	top: 4em;
	transform: translateY(-50%);
}

#reformPoint li.package p {
	top: 3.2em;
}

@media screen and (max-width:767px) {
	@media (orientation:portrait) {
		#reformPoint {
			padding: 50px 0 15px;
		}

		#reformPoint h3 {
			width: 80vw;
			left: calc(50% - 40vw);
		}

		#reformPoint li {
			width: 100% !important;
			margin: 0 0 10px;
		}

		#reformPoint li a {
			height: auto;
			padding: 0.8em 0 0.8em 4.5em;
		}

		#reformPoint li a::before {
			width: 2em;
			text-align: center;
			left: 0.6em;
			top: calc(50% - 0.7em);
		}

		#reformPoint li a:not(.more)::before {
			font-size: 1.4em;
		}

		#reformPoint li.more a::before {
			font-size: 1.25em;
		}

		#reformPoint li.package a {
			padding: 0.8em;
		}

		#reformPoint li p {
			text-align: left;
			font-size: 1.2em;
			position: static;
			left: auto;
			top: auto;
			transform: translateY(0);
		}

		#reformPoint li.package p {
			text-align: center;
		}
	}

	@media (orientation:landscape) {
		#reformPoint {
			padding: 50px 0 20px;
		}

		#reformPoint h3 {
			width: 60vw;
			left: calc(50% - 30vw);
		}

		#reformPoint ul {
			flex-wrap: nowrap;
		}

		#reformPoint li {
			height: 7.5em;
			margin-left: 2%;
		}

		#reformPoint li p {
			top: 4em;

		}
	}
}

/*--------------- co ---------------*/

#main .coInner h3,
#main .coInner .reformHd {
	margin-bottom: 1.5em;
	padding-left: 3.5em;
	font-size: 1.7em;
	font-weight: 700;
	position: relative;
}

#main .coInner h3 span.tmBgColor,
#main .coInner .reformHd span.tmBgColor {
	display: block;
	padding: 0.4em;
	font-size: 1.4em;
	line-height: 1;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-weight: 700;
	color: #fff;
}

#main #more h3 span.tmBgColor,
#main #more .reformHd span.tmBgColor {
	width: 3em;
	height: 3em;
	padding: 0.9em 0 0;
	text-align: center;
	border-radius: 50%;
	font-size: 1.15em;
	left: -0.4em;
	font-weight: 500;
}

@media screen and (max-width:767px) {
	#main .coInner h3 {
		padding-left: 3.5em;
	}

	#main .coInner h3 span.tmBgColor {
		font-size: 1.3em;
	}
}

#main .coInner .lineupTitle {
	padding: 0.2em 0;
	margin-top: 3em;
	margin-bottom: 1.5em;
	font-size: 1.4em;
	font-weight: 500;
	border-top: solid 1px var(--tmcolor);
	border-bottom: solid 1px var(--tmcolor);
}

#main .coInner .lineupTitle:first-child {
	margin-top: 0;
}

#main .coInner p {
	margin-bottom: 1em;
}

#main .coInner sup {
	line-height: 1;
}

#main .coInner p.cap1 {
	font-size: 1em;
	font-weight: 500;
}

#main .coInner p.cap2 {
	font-size: 0.95em;
}

#main .coInner img:not(:last-child) {
	margin-bottom: 10px;
}

#main .note.left {
	text-align: left;
	margin-bottom: 0;
}

#main .note.sml {
	font-size: .7em;
	margin: 0;
}

#main .note.left.dot::before {
	content: '';
	display: inline-block;
	width: .6em;
	height: .6em;
	background-color: #222;
	border-radius: 100%;
	margin-right: .3em;
}

#main ul.note {
	margin-top: 0.8rem;
	font-size: 0.8rem;
	color: inherit;
	counter-reset: notenum;
}

#main ul.note li {
	margin-bottom: 0.5em;
	padding-left: 1em;
	line-height: 1.6em;
	position: relative;
}

#main ul.note li::before {
	content: '\0203b';
	position: absolute;
	left: 0;
}

#main ul.note.nowrap {
	position: absolute;
	bottom: -1em;
	white-space: nowrap;
}

#main ul.note li.num {
	padding-left: 1.8em;
	counter-increment: notenum;
}

#main ul.note li.num:before {
	content: '\0203b' counter(notenum);
}

@media screen and (max-width:767px) {
	#main ul.note {
		margin-top: 0.7rem;
		font-size: 0.7rem;
	}
}

/* attention */
#main .attention {
	margin: 60px auto;
	padding: 20px 30px 20px 180px;
	background-color: #fff;
	position: relative;
}

#main .attention h4 {
	width: 120px;
	color: #fff;
	font-weight: 500;
	font-size: 1.1em;
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
}

#main .attention h4 span {
	display: block;
	position: relative;
	top: 50%;
	left: calc(50% + 10px);
	transform: translate(-50%, -50%);
	z-index: 2;
}

#main .attention h4::after {
	content: '';
	display: block;
	width: 30px;
	height: 100%;
	position: absolute;
	left: 100%;
	top: 0;
	bottom: 0;
	background: linear-gradient(to bottom left, transparent 50%, #000 50.1%) top right/ 100% 50% no-repeat,
		linear-gradient(to top left, transparent 50%, #000 50.1%) bottom right / 100% 50% no-repeat;
	z-index: 1;
}

#main .attention .text {
	width: 420px;
}

#main .attention h5 {
	margin-bottom: 0.8em;
	font-size: 1.3em;
	letter-spacing: 0.05em;
}

#main .attention p:last-child {
	margin-bottom: 0;
}

@media screen and (max-width:767px) {
	#main .attention {
		margin: 40px auto;
		padding: 4.5em 15px 15px 15px;
	}

	#main .attention h4 {
		width: 100%;
		padding: 0.7em 0 0;
		left: 0;
		top: 0;
		bottom: auto;
		font-size: 1.15em
	}

	#main .attention h4 span {
		position: static;
		top: auto;
		left: auto;
		transform: translate(0, 0);
	}

	#main .attention h4::after {
		width: 100%;
		height: 20px;
		left: 0;
		top: 100%;
		bottom: auto;
		z-index: 1;
	}

	@media (orientation:portrait) {
		#main .attention .text {
			width: 100%;
		}
	}

	@media (orientation:landscape) {
		#main .attention .text {
			width: 66%;
		}
	}

	/* table scroll */
	#main .tableBox {
		overflow-x: scroll;
	}

	#main .tableBox+.scrollNote {
		font-size: 0.75rem;
		margin: 5px auto 15px;
	}
}

/*--------------- menu ---------------*/
#extReformMenu {
	background-color: #e8e6e5;
}

#extReformMenu .coInner {
	align-items: flex-end;
}

#extReformMenu .coInner>div:not(.houseImg) {
	width: 510px;
}

#extReformMenu h4 {
	padding-bottom: 0.3em;
	margin-bottom: 1em;
	border-bottom: solid 1px #000;
	font-size: 1.3em;
}

#extReformMenu li {
	width: 250px;
	margin-bottom: 10px;
	font-size: 0.95em;
}

#extReformMenu li a {
	display: block;
	padding: 0.6em;
	background-color: #fff;
	box-sizing: border-box;
	position: relative;
	opacity: 1;
	transition: opacity 0.3s ease 0s;
}

#extReformMenu li:nth-child(1) a {
	border: solid 2px #b7c52a;
	border-right: solid 1.8em #b7c52a;
}

#extReformMenu li:nth-child(2) a {
	border: solid 2px #f8b74a;
	border-right: solid 1.8em #f8b74a;
}

#extReformMenu li:nth-child(3) a {
	border: solid 2px #6eb9c9;
	border-right: solid 1.8em #6eb9c9;
}

#extReformMenu li:nth-child(4) a {
	border: solid 2px #b78dac;
	border-right: solid 1.8em #b78dac;
}

#extReformMenu li:nth-child(5) a {
	border: solid 2px #75b552;
	border-right: solid 1.8em #75b552;
}

#extReformMenu li:nth-child(6) a {
	border: solid 2px #5476ba;
	border-right: solid 1.8em #5476ba;
}

#extReformMenu li a:hover {
	opacity: 0.7;
}

#extReformMenu li a::after {
	content: '';
	display: block;
	width: 0.8em;
	height: 0.8em;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg);
	transform-origin: center;
	position: absolute;
	right: -1.1em;
	top: calc(50% - 0.5em);
}

#extReformMenu li.now a {
	pointer-events: none;
	opacity: 0.5;
}

#extReformMenu .coInner>div.houseImg {
	width: 400px;
	padding-top: 210px;
	position: relative;
}

#extReformMenu .houseImg img {
	display: block;
	width: 100%;
	height: auto;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}

@media screen and (max-width:767px) {
	#extReformMenu .coInner>div:not(.houseImg) {
		width: 100%;
	}

	#extReformMenu li {
		width: 100%;
		font-size: 1em;
	}

	#extReformMenu .coInner>div.houseImg {
		display: none;
	}
}

/*==============================================================
contents - outerwall
==============================================================*/

#main.exteriorOuterwall .coInner h3 {
	font-size: 1.45em;
	text-decoration: underline;
	text-underline-offset: .35em;
}

#main.exteriorOuterwall .coInner .img {
	border: solid 1px #c8c8c8;
	margin-bottom: 10px;
}

#main.exteriorOuterwall .coInner .img img {
	margin: 0;
	vertical-align: bottom;
}

#main.exteriorOuterwall .coInner .img+p {
	text-align: center;
}

@media screen and (max-width:767px) {
	#main.exteriorOuterwall .coInner h3 {
		font-size: 1.45em;
	}

	@media (orientation:portrait) {
		#main.exteriorOuterwall #co1 .coInner {
			padding: 30px 0;
			gap: 20px 0;
		}

		#main.exteriorOuterwall .w2-1 {
			width: 100%;
			padding-top: 30px;
		}
	}

	#main.exteriorOuterwall .coInner .w3-1 {
		width: 48%;
	}

	@media screen and (max-width:500px) {
		#main.exteriorOuterwall .coInner .w3-1 {
			width: min(380px, 100%);
			margin: 0 auto;
		}
	}

	@media (orientation:landscape) {
		#main.exteriorOuterwall .coInner .img+p {
			text-align: left;
		}

		#main.exteriorOuterwall .coInner .img+p br {
			display: none;
		}
	}
}

/*==============================================================
contents - roof
==============================================================*/

#main.exteriorRoof #reformPoint li p span {
	display: inline-block;
	line-height: 1;
	font-size: 0.9em;
	margin-bottom: 0.3em;
	border: solid 1px #000;
	padding: 0.2em 0.5em;
}

#main.exteriorRoof #co2,
#main.exteriorRoof {
	background-color: #fef8ed;
}

#main.exteriorRoof .coInner h3 span:not(.tmBgColor):not(.note) {
	display: inline-block;
	margin-right: 0.5em;
	line-height: 1;
	font-size: 0.8em;
	vertical-align: 0.1em;
	border: solid 1px #000;
	padding: 0.3em 0.5em;
}

#main.exteriorRoof .coInner h3 span.note {
	display: block;
	margin-top: 5px;
	font-weight: normal;
	font-size: .9rem;
	color: inherit;
}

#main.exteriorRoof #feature {
	margin: 40px auto 60px;
	padding: 40px 60px;
	background-color: #e8e6e5;
}

#main.exteriorRoof #feature h5 {
	margin-bottom: 1em;
	color: #e49b36;
	text-align: center;
	font-size: 1.3em;
	letter-spacing: 0.05em;
}

#main.exteriorRoof #feature h5+ul {
	margin-bottom: 40px;
	justify-content: center;
	gap: 2%;
}

#main.exteriorRoof #feature h5+ul li {
	width: 240px;
	margin: 0 10px;
	padding: 0.5em 0;
	background-color: #fff;
	color: #e49b36;
	font-size: 1.15em;
	text-align: center;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

#main.exteriorRoof #feature .flex div:not(.enlarge) {
	width: 330px;
}

#main.exteriorRoof #feature .flex div.enlarge {
	width: 460px;
	border: solid 1px #f8b74a;
	position: relative;
}

#main.exteriorRoof #feature .flex div.enlarge::before,
#main.exteriorRoof #feature .flex div.enlarge::after {
	content: '';
	display: block;
	border: solid 20px transparent;
	border-right: solid 25px #f8b74a;
	position: absolute;
	right: 100%;
	top: 50px;
}

#main.exteriorRoof #feature .flex div.enlarge::after {
	border-right: solid 25px #e8e6e5;
	margin-right: -2px;
}

#main.exteriorRoof #target {
	margin: 40px auto 60px;
	padding: 40px 20px 20px;
	position: relative;
	border: solid 1px #f8b74a;
}

#main.exteriorRoof #target h4 {
	padding: 0.5em 1.2em;
	line-height: 1;
	font-weight: 500;
	position: absolute;
	left: 0;
	top: 0;
	color: #fff;
}

#main.exteriorRoof #target .cap1,
#main.exteriorRoof #target .cap2 {
	margin-bottom: 0.5em;
}

#main.exteriorRoof #target .cap2 {
	font-size: 0.85em !important;
}

#main.exteriorRoof h5 {
	margin-bottom: 1.5em;
	color: #e49b36;
	font-size: 1.3em;
	letter-spacing: 0.05em;
}

#main.exteriorRoof #target~.flex:not(.mTop60) {
	margin-bottom: 40px;
}

#main.exteriorRoof h6 {
	font-size: 1.3em;
	margin-bottom: 1em;
}

#main.exteriorRoof h6 span {
	display: inline-block;
	margin-right: 1em;
	color: #fff;
	width: 6em;
	text-align: center;
}

#main.exteriorRoof h6+p {
	margin-bottom: 1.5em;
}

#main.exteriorRoof h6+p span {
	display: inline-block;
	margin-right: 1em;
	font-size: 1.1em;
	font-weight: 500;
}

#main.exteriorRoof .graph {
	width: 535px;
}

#main.exteriorRoof .graph+div {
	width: 365px;
}

#main.exteriorRoof .graph+div p {
	padding: 0.8em 0;
	margin-bottom: 2.3em;
	background-color: #f5bd58;
	text-align: center;
	position: relative;
	letter-spacing: 0.05em;
}

#main.exteriorRoof .graph+div p span {
	font-weight: 500;
	font-size: 1.4em;
}

#main.exteriorRoof .graph+div p::after {
	content: '';
	display: block;
	position: absolute;
	left: calc(50% - 20px);
	top: 100%;
	border: solid 20px transparent;
	border-top: solid 25px #f5bd58;
}

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

	#main.exteriorRoof #reformPoint li p span {
		margin-right: 0.8em;
	}

	#main.exteriorRoof .coInner h3 {
		line-height: 1.8em;
	}

	#main.exteriorRoof .coInner h3.withNote {
		margin-bottom: 3em;
	}

	#main.exteriorRoof .coInner h3.withNote .note {
		position: absolute;
		left: 0;
		top: 90%;
	}

	#main.exteriorRoof #co1 .w3-1,
	#main.exteriorRoof #more .w3-1 {
		width: 48%;
	}

	#main.exteriorRoof #co1 .w3-1:first-child,
	#main.exteriorRoof #more .w3-1:first-child {
		width: 100%;
		margin-bottom: 20px;
	}

	#main.exteriorRoof #co2 .w2-1 {
		width: 100%;
		margin-bottom: 20px;
	}

	#main.exteriorRoof #co2 ul.note {
		margin-top: -10px;
	}

	#main.exteriorRoof .flex.mTop60 .w2-1 {
		width: 100%;
	}

	#main.exteriorRoof .flex.mTop60 .w2-1:last-child {
		margin-top: 15px;
	}

	@media (orientation:portrait) {
		#main.exteriorRoof #more .w2-1 {
			width: 100%;
		}

		#main.exteriorRoof #feature {
			margin: 40px auto;
			padding: 20px 15px;
		}

		#main.exteriorRoof #feature h5+ul li {
			width: 48%;
			margin: 2% 0;
			order: 1;
		}

		#main.exteriorRoof #feature h5+ul li:nth-child(2) {
			/* width: 100%; */
			order: 3;
		}

		#main.exteriorRoof #feature h5+ul li:nth-child(3) {
			order: 2;
			margin-left: 4%;
		}

		#main.exteriorRoof #feature .flex div:not(.enlarge) {
			width: 100%;
			order: 2;
		}

		#main.exteriorRoof #feature .flex div.enlarge {
			width: 100%;
			order: 1;
		}

		#main.exteriorRoof #feature .flex div.enlarge::before,
		#main.exteriorRoof #feature .flex div.enlarge::after {
			content: '';
			display: block;
			border: solid 20px transparent;
			border-top: solid 25px #f8b74a;
			position: absolute;
			right: calc(50% - 20px);
			top: 100%;
		}

		#main.exteriorRoof #feature .flex div.enlarge::after {
			border-top: solid 25px #e8e6e5;
			margin-top: -2px;
			margin-right: 0;
		}

		#main.exteriorRoof #target {
			padding: 20px;
		}

		#main.exteriorRoof .w3-1 {
			width: 100%;
			margin-top: 20px;
		}

		#main.exteriorRoof .flex .w2-1 {
			width: 100%;
		}

		#main.exteriorRoof .graph {
			margin-bottom: 15px;
		}

		#main.exteriorRoof .graph+div p {
			padding: 0.5em 0;
			margin-bottom: 2em;
		}

		#main.exteriorRoof .graph+div p::after {
			left: calc(50% - 15px);
			border: solid 15px transparent;
			border-top: solid 20px #f5bd58;
		}
	}

	@media (orientation:landscape) {
		#main.exteriorRoof #more .w2-1 {
			width: 48%;
		}

		#main.exteriorRoof #feature {
			margin: 40px auto;
			padding: 30px 20px;
		}

		#main.exteriorRoof #feature h5+ul {
			flex-wrap: nowrap;
		}

		#main.exteriorRoof #feature h5+ul li {
			width: 31%;
			margin: 2%;
		}

		#main.exteriorRoof #feature .flex div:not(.enlarge) {
			width: 35%;
		}

		#main.exteriorRoof #feature .flex div.enlarge {
			width: 60%;
		}

		#main.exteriorRoof #feature .flex div.enlarge::before,
		#main.exteriorRoof #feature .flex div.enlarge::after {
			border: solid 15px transparent;
			border-right: solid 20px #f8b74a;
			top: 10%;
		}

		#main.exteriorRoof #feature .flex div.enlarge::after {
			border-right: solid 20px #e8e6e5;
		}

		#main.exteriorRoof .graph,
		#main.exteriorRoof .graph+div {
			width: 100%;
		}

		#main.exteriorRoof .graph+div {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20px;
		}

		#main.exteriorRoof .graph+div p {
			width: 45%;
			margin-top: -10px;
		}

		#main.exteriorRoof .graph+div p::after {
			left: 100%;
			top: calc(50% - 15px);
			border: solid 15px transparent;
			border-left: solid 20px #f5bd58;
		}

		#main.exteriorRoof .graph+div .img {
			width: 48%;
		}
	}
}

/*==============================================================
contents - window
==============================================================*/

/* feature */
#main.exteriorWindow #feature {
	background-color: #fff;
}

#main.exteriorWindow #feature.v2 {
	background-color: #f3f4f3;
}

#main.exteriorWindow .windowReformTitle {
	margin: 0 0 1.75em;
	padding-left: 0;
	font-size: 2em;
	font-weight: 300;
	color: #595757;
	text-align: center;
	position: relative;
}

#main.exteriorWindow #feature.v2 .windowReformTitle {
	margin-top: 2em;
}

#main.exteriorWindow .windowReformTitle .icon {
	width: 47px;
	position: absolute;
	left: 50%;
	bottom: calc(100% + .75em);
	transform: translateX(-50%);
}

#main.exteriorWindow #feature .featureList li {
	width: 48%;
	margin-bottom: 4%;
	padding: 2em;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	background-color: #fbfbfa;
	border-radius: 5px;
}

#main.exteriorWindow #feature.v2 .featureList li {
	background-color: #fff;
}

#main.exteriorWindow #feature .featureList li .featureTitle {
	margin-bottom: 1em;
	color: #6eb9c9;
	font-size: 1.5em;
	font-weight: 300;
}

#main.exteriorWindow #feature.v2 .featureList li .featureTitle {
	text-align: center;
}

#main.exteriorWindow #feature .featureList li .featureTitle .icon {
	display: inline-block;
	height: 1.6em;
	margin-right: .5em;
	vertical-align: top;
	line-height: 1;
}

#main.exteriorWindow #feature.v2 .featureList li .featureTitle .icon {
	display: block;
	margin: 0 auto 0.5em;
}

#main.exteriorWindow #feature .featureList li .featureTitle .icon img {
	width: auto;
	height: 100%;
}

#main.exteriorWindow #feature .featureList li .featureTitle+p {
	margin-bottom: auto;
}

#main.exteriorWindow #feature .featureList li .solution {
	margin-top: 1em;
	padding: .5em 0 .5em 35%;
	position: relative;
}

#main.exteriorWindow #feature.v2 .featureList li .solution {
	margin-top: 1em;
	padding: 0;
	text-align: center;
}

#main.exteriorWindow #feature:not(.v2) .featureList li .solution img {
	width: 30%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

#main.exteriorWindow #feature.v2 .featureList li .solution img {
	width: 60%;
}

#main.exteriorWindow #feature .featureList li .solution .solutionTitle {
	margin-bottom: .75em;
	font-weight: 300;
	font-size: .95em;
}

#main.exteriorWindow #feature .featureList li .solution .solutionTitle span {
	display: inline-block;
	margin-right: .2em;
	color: #6eb9c9;
	font-size: 1.25em;
}

#main.exteriorWindow #feature.v2 .featureList li .solution .solutionTitle span {
	display: block;
	margin-bottom: .2em;
}

#main.exteriorWindow #feature .featureList li .solution p {
	margin-bottom: 0;
	color: #ed7700;
}

#main.exteriorWindow #feature.v2 .featureList li .solution p {
	margin-top: .5em;
}

/* windowReformMenu */
#main.exteriorWindow #windowReformMenu {
	padding-top: 100px;
}

#main.exteriorWindow #windowReformMenu .detail {
	display: none;
	padding-top: 0;
}

#main.exteriorWindow #windowReformMenu .detail>*:not(:first-child) {
	margin-top: 50px;
}

#main.exteriorWindow #co2,
#main.exteriorWindow #co4 {
	background-color: #eff9fa;
}

#main.exteriorWindow .coInner .lineupTitle {
	border-top: none;
}

/* windowFig */
#main.exteriorWindow .windowFig {
	display: flex;
	align-items: center;
}

#main.exteriorWindow .windowFig figure {
	width: 320px;
	margin-right: 40px;
}

#main.exteriorWindow .windowFig .text p {
	color: #6eb9c9;
	font-size: 1.4em;
	font-weight: 300;
}

#main.exteriorWindow .windowFig .text a {
	width: 13em;
	display: inline-block;
	padding: .5em .5em .5em 0;
	background-color: #6eb9c9;
	color: #fff;
	font-size: 1.1em;
	text-align: center;
	position: relative;
}

#main.exteriorWindow .windowFig .text a::after {
	content: '';
	display: block;
	width: .6em;
	height: .6em;
	border-bottom: solid 2px #fff;
	border-right: solid 2px #fff;
	position: absolute;
	right: 1em;
	top: 45%;
	transition: all .3s;
	transform: translateY(-50%) rotate(45deg);
}

#main.exteriorWindow .windowFig .text a.on::after {
	transform: translateY(-8%) rotate(-135deg);
}

/* chart */
#main.exteriorWindow .chartWrp {
	padding: 20px;
	text-align: center;
	border: solid 2px #6eb9c9;
	background-color: #fff;
}

#main.exteriorWindow .chartWrp.flex {
	padding: 20px 30px;
}

#main.exteriorWindow .chartWrp .thermography {
	padding-left: 4% !important;
	border-left: dotted 2px #6eb9c9;
}

#main.exteriorWindow .chartWrp figcaption {
	margin-bottom: 1em;
	text-align: center;
	color: #6eb9c9;
	font-size: 1.1em;
}

#main.exteriorWindow .chartWrp img {
	width: auto !important;
	height: 290px !important;
	margin: auto;
}

/* about */
#main.exteriorWindow .about {
	width: 960px;
	margin: 0 auto 2em;
	padding: 1rem;
	border: solid 1px #e8e6e5;
	align-items: center;
}

#main.exteriorWindow .about p {
	padding: 0 2rem 0 1rem;
	font-size: 1.1em !important;
}

#main.exteriorWindow .about-list {
	padding-left: 2rem;
	border-left: solid 1px #e8e6e5;
}

#main.exteriorWindow .about-list li {
	margin: .3em 0;
	padding-left: 1em;
	position: relative;
}

#main.exteriorWindow .about-list li::before {
	content: '';
	display: block;
	width: .6em;
	height: .6em;
	position: absolute;
	left: 0;
	top: .5em;
	border-radius: 50%;
	background-color: #6eb9c9;
}

#main.exteriorWindow .about+.note {
	text-align: left !important;
}

/* co1 */
#main.exteriorWindow #co1 .co1Fig {
	padding: 40px 80px;
	background-color: #eff9fa;
}

/* co3 */
#main.exteriorWindow #carryon {
	padding: 40px;
	border: solid 2px #6eb9c9;
	position: relative;
}

#main.exteriorWindow #carryon .text {
	width: 360px;
}

#main.exteriorWindow #carryon .text h6 {
	display: inline-block;
	padding: .75em 2em;
	margin-bottom: 1.5em;
	line-height: 1;
	font-weight: 500;
	font-size: 1.2em;
	border-radius: 2em;
	background-color: #6eb9c9;
	color: #fff;
}

#main.exteriorWindow #carryon .text p {
	margin-bottom: 0;
}

#main.exteriorWindow #carryon .text p.sub {
	margin-bottom: 0.5em;
	font-size: 1.25em;
	font-weight: 500;
	color: #6eb9c9;
}

#main.exteriorWindow #carryon .img {
	width: 460px;
}

/* co4 */
#main.exteriorWindow #co4 .fukidashi {
	width: max-content;
	padding: .5em 2em;
	background-color: #fff;
	color: #6eb9c9;
	font-size: 1.3em;
	position: absolute;
	left: 50%;
	top: -1.5em;
	transform: translateX(-50%);
	border: solid 3px;
	border-radius: 2em;
}

#main.exteriorWindow #co4 .fukidashi::before,
#main.exteriorWindow #co4 .fukidashi::after {
	content: '';
	width: 0;
	height: 0;
	display: block;
	position: absolute;
	left: calc(50% - 15px);
	top: 100%;
	border: solid 15px transparent;
	border-top: solid 22px;
}

#main.exteriorWindow #co4 .fukidashi::after {
	margin-top: -5px;
	border-top-color: #fff;
}

#main.exteriorWindow #co4 .img {
	position: relative;
	align-self: flex-start;
}

#main.exteriorWindow #co4 .img img {
	margin-bottom: 0;
}

#main.exteriorWindow #co4 .img .cap {
	position: absolute;
	left: 12px;
	bottom: 10px;
	font-size: .9em;
}

#main.exteriorWindow #co4 .bgWhite {
	padding: 20px;
	padding-bottom: 0;
}

#main.exteriorWindow #co4 .flex .text {
	position: relative;
}

#main.exteriorWindow #co4 p.tmBgColor {
	padding: 1em 2em;
	margin-top: 2em;
	color: #fff;
	text-align: center;
	position: relative;
}

#main.exteriorWindow #co4 p.tmBgColor span:not(.iblock) {
	font-weight: 500;
	font-size: 1.4em;
}

#main.exteriorWindow #co4 p.tmBgColor::after {
	content: '';
	position: absolute;
	left: 100%;
	top: 15%;
	border-bottom: solid 25px transparent;
	border-left: solid 40px #6eb9c9;
}

/* diagram */
#main.exteriorWindow #co4 .diagram {
	padding: 20px 40px;
	align-items: center;
	background-image: url(../images/window4-3.png);
	background-repeat: no-repeat;
	background-position: 315px top;
	background-size: 210px auto;
	background-color: #fff;
	position: relative;
}

@media screen and (min-width:768px) {
	#main.exteriorWindow #co4 .diagram .gas {
		width: 290px;
	}

	#main.exteriorWindow #co4 .diagram .glass {
		width: 400px;
		display: flex;
		align-items: start;
	}

	#main.exteriorWindow #co4 .diagram .glass div:not(.line2) {
		width: 180px;
	}

	#main.exteriorWindow #co4 .diagram h6 {
		margin-bottom: 0.7em;
		font-size: 1em;
		font-weight: 500;
	}

	#main.exteriorWindow #co4 .diagram p {
		font-size: 0.8em;
	}

	#main.exteriorWindow #co4 .diagram .glass table {
		width: 200px;
		margin-left: 20px;
	}
}

#main.exteriorWindow #co4 .diagram .glass table {
	font-size: 0.8em;
	line-height: 1;
	border-bottom: solid 1px #000;
}

#main.exteriorWindow #co4 .diagram .glass table caption {
	padding-bottom: 0.5em;
	font-weight: 500;
}

#main.exteriorWindow #co4 .diagram .glass table tr {
	border-top: solid 1px #000;
}

#main.exteriorWindow #co4 .diagram .glass table th,
#main.exteriorWindow #co4 .diagram .glass table td {
	padding: 10px 0;
}

#main.exteriorWindow #co4 .diagram .line1 {
	width: 210px;
	position: absolute;
	left: calc(50% - 240px);
	top: 31px;
}

#main.exteriorWindow #co4 .diagram .line2 {
	width: 90px;
	position: absolute;
	left: calc(50% - 70px);
	top: 70px;
}

#main.exteriorWindow #co4 .diagram .lineSP {
	display: none;
}

/* feature */
#main.exteriorWindow #co4 .feature {
	margin-bottom: 1.5em;
	display: flex;
	justify-content: space-between;
}

#main.exteriorWindow #co4 .feature li {
	text-align: center;
}

#main.exteriorWindow #co4 .feature li:nth-child(2) {
	padding: 0 25px;
	margin: 0 25px;
	border-left: dotted 2px #6eb9c9;
	border-right: dotted 2px #6eb9c9;
}

#main.exteriorWindow #co4 .feature li div:not(.img) {
	text-align: center;
}

#main.exteriorWindow #co4 .feature li .featureHd {
	width: 10em;
	padding: 0.5em 0;
	margin: 0 auto 1em;
	border-radius: 2em;
	background-color: #6eb9c9;
	color: #fff;
	font-size: 1.1em;
	font-weight: 700;
}

#main.exteriorWindow #co4 .feature li p {
	font-size: 1.1em;
	font-weight: 500;
}

@media screen and (max-width:767px) {
	#main.exteriorWindow .windowReformTitle {
		margin: 1em 0 1.75em;
		font-size: min(1.8em, 6.4vw);
	}

	#main.exteriorWindow #feature.v2 .windowReformTitle {
		margin-top: 17vw;
	}

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

		#main.exteriorWindow .w2-1l,
		#main.exteriorWindow .w2-1s {
			width: 100%;
		}
	}

	#main.exteriorWindow .windowReformTitle .icon {
		width: min(50px, 12vw);
	}

	@media screen and (max-width: 640px) {
		#main.exteriorWindow #feature .featureList li {
			width: 100%;
			padding: 2em 1.5em;
		}
	}

	#main.exteriorWindow #feature .featureList li .featureTitle {
		font-size: min(1.3em, 4.5vw);
	}

	@media screen and (max-width: 375px) {
		#main.exteriorWindow #feature .featureList li .solution {
			padding: .5em 0 .5em 32%;
		}

		#main.exteriorWindow #feature .featureList li .solution img {
			left: -4%;
		}
	}

	#main.exteriorWindow #windowReformMenu {
		padding-top: min(100px, 22vw);
	}

	#main.exteriorWindow #windowReformMenu .detail>*:not(:first-child) {
		margin-top: 10vw;
	}

	/* windowFig */
	#main.exteriorWindow .windowFig figure {
		width: 280px;
		margin-right: 20px;
	}

	@media screen and (max-width: 640px) {
		#main.exteriorWindow .windowFig {
			display: block;
			text-align: center;
		}

		#main.exteriorWindow .windowFig figure {
			width: 70%;
			margin: 0 auto;
		}

		#main.exteriorWindow .windowFig .text p {
			font-size: min(1.2em, 4.5vw);
		}
	}

	/* chart */
	#main.exteriorWindow .chartWrp {
		padding: 1em;
	}

	#main.exteriorWindow .chartWrp .thermography {
		margin-top: 2em !important;
		padding-top: 2em !important;
		padding-left: 0 !important;
		border-left: none;
		border-top: dotted 2px #6eb9c9;
	}

	#main.exteriorWindow .chartWrp figcaption {
		font-size: 1.2em;
	}

	#main.exteriorWindow .chartWrp img {
		width: 100% !important;
		height: auto !important;
		margin: 0;
	}

	/* about */
	#main.exteriorWindow .about {
		width: 92vw;
		display: block;
	}

	#main.exteriorWindow .about p {
		padding: 0 0 .5rem;
		font-size: 1.1em !important;
	}

	#main.exteriorWindow .about-list {
		padding-top: .5rem;
		padding-left: 0;
		border-left: none;
		border-top: solid 1px #e8e6e5;
	}

	/* co1 */
	#main.exteriorWindow #co1 .co1Fig {
		padding: 2em 1em;
	}

	#main.exteriorWindow .flex .text {
		margin-bottom: 1em;
	}

	/* co3 */
	#main.exteriorWindow #carryon {
		padding: 2em;
	}

	/* co4 */
	#main.exteriorWindow #co4 .coInner:first-child {
		padding-top: 8.5em;
	}

	#main.exteriorWindow #co4 .fukidashi {
		padding: .4em 1.5em;
		font-size: min(1.3em, 4.6vw);
		top: 1.5em;
	}

	#main.exteriorWindow #co4 p.tmBgColor {
		width: 100%;
		margin-bottom: -.3em;
		z-index: 2;
	}

	#main.exteriorWindow #co4 p.tmBgColor::after {
		position: absolute;
		left: calc(50% - 15px);
		top: 100%;
		bottom: 100%;
		border: solid 15px transparent;
		border-top: solid 20px #6eb9c9;
	}

	/* diagram */
	#main.exteriorWindow #co4 .diagram {
		padding: 20px 20px 30px;
		background-position: center top;
		counter-reset: dia;
	}

	@media (orientation:portrait) {
		#main.exteriorWindow #co4 .diagram {
			padding-top: 48vw;
			background-size: 48% auto;
		}
	}

	@media (orientation:landscape) {
		#main.exteriorWindow #co4 .diagram {
			padding-top: 32vw;
			background-size: 32% auto;
		}
	}

	#main.exteriorWindow #co4 .diagram>div:not(.lineSP) {
		width: 100%;
		counter-increment: dia;
	}

	#main.exteriorWindow #co4 .diagram .gas {
		margin: 20px 0;
	}

	#main.exteriorWindow #co4 .diagram>div h6 {
		margin-bottom: 0.7em;
		padding-left: 2.5em;
		font-size: 1em;
		font-weight: 500;
		position: relative;
	}

	#main.exteriorWindow #co4 .diagram>div h6::before {
		content: counter(dia);
		display: inline-block;
		width: 1.4em;
		height: 1.4em;
		padding: 0;
		font-size: 1.4em;
		text-align: center;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		top: calc(50% - 0.7em);
		color: #6eb9c9;
		background-color: #fff;
		border: solid 1px #6eb9c9;
		border-radius: 1.5em;
	}

	#main.exteriorWindow #co4 .diagram>div p {
		font-size: 0.95em;
	}

	#main.exteriorWindow #co4 .diagram .glass table {
		width: 100%;
		font-size: .9em;
	}

	#main.exteriorWindow #co4 .diagram .line1,
	#main.exteriorWindow #co4 .diagram .line2 {
		display: none;
	}

	#main.exteriorWindow #co4 .diagram .lineSP {
		display: block;
		position: absolute;
		top: 6vw;
	}

	@media (orientation:portrait) {
		#main.exteriorWindow #co4 .diagram .lineSP {
			width: 72%;
			left: 15%;
		}
	}

	@media (orientation:landscape) {
		#main.exteriorWindow #co4 .diagram .lineSP {
			width: 45%;
			left: 28%;
		}
	}

	/* feature */
	#main.exteriorWindow #co4 .feature {
		margin-bottom: 5vw;
		flex-wrap: wrap;
	}

	#main.exteriorWindow #co4 .feature li {
		width: 90%;
		margin: 0 auto;
		padding: 2em 0 !important;
		border-bottom: dotted 2px #6eb9c9;
	}

	#main.exteriorWindow #co4 .feature li:nth-child(2) {
		border-left: none;
		border-right: none;
	}

	#main.exteriorWindow #co4 .feature li div.img {
		width: 90%;
		margin: 0 auto;
	}
}

/*--------------- catalogue ---------------*/
#main .catalogue {
	background-color: #d5edf2;
	text-align: center;
}

#main .catalogue .catalogue_title {
	padding: 0;
	margin-bottom: 3em;
	font-size: 1.25em;
	line-height: 1.8;
	letter-spacing: .05em;
	font-weight: bold;
	text-align: center;
	position: relative;
}

#main .catalogue .applicable {
	display: inline-block;
	padding: 2em 270px 2.5em 3em;
	margin: 0 auto;
	border: solid 2px #6eb9c9;
	background-color: #fff;
	align-items: center;
	position: relative;
}

#main .catalogue .applicable::after {
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	border-top: solid 3px #6eb9c9;
	border-right: solid 3px #6eb9c9;
	position: absolute;
	right: 1.5em;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

#main .catalogue figure {
	width: 150px;
	box-shadow: 2px 1px 2px 0 rgba(50, 50, 50, .3);
	position: absolute;
	right: 70px;
	bottom: 20px;
}

#main .catalogue .applicable .applicable_title {
	display: inline-block;
	margin-bottom: 1.5em;
	padding: .5em 1.2em;
	border-bottom: solid 2px;
	color: #fff;
	background-color: #6eb9c9;
	font-weight: bold;
	font-size: .95em;
	position: relative;
}

#main .catalogue .applicable .applicable_title::before {
	content: '';
	position: absolute;
	right: calc(50% - 10px);
	top: 99%;
	border: solid 10px transparent;
	border-top: solid 13px #6eb9c9;
}

#main .catalogue .applicable p {
	margin-bottom: 0;
	text-align: center;
	font-size: 1.05em;
}

@media screen and (max-width:767px) {
	#main .catalogue .catalogue_title {
		margin-bottom: 2em;
		font-size: min(1.25em, 4.2vw);
	}

	#main .catalogue .applicable {
		display: block;
		width: 100%;
		padding: 1.5em 43% 1.5em 3%;
	}

	#main .catalogue .applicable::after {
		right: 5%;
	}

	#main .catalogue .applicable .applicable_title {
		font-size: min(.95em, 3.3vw);
	}

	#main .catalogue figure {
		width: 28%;
		right: 12%;
	}

	#main .catalogue .applicable p {
		font-size: min(1.05em, 3.6vw);
	}
}

/*==============================================================
contents - entrance
==============================================================*/

#main.exteriorEntrance #co2 {
	background-color: #f8f4f7;
}

#main.exteriorEntrance #co1 table th,
#main.exteriorEntrance #co1 table td {
	text-align: center;
	vertical-align: middle;
	border: solid 1px #a6a6a6;
}

#main.exteriorEntrance #co1 table thead th {
	padding: 10px 0;
	font-size: 1.1em;
	font-weight: 400;
}

#main.exteriorEntrance #co1 table tbody th {
	width: 2em;
	padding: 0 10px;
	background-color: #dbc6d5;
}

#main.exteriorEntrance #co1 table td {
	padding: 20px;
}

#main.exteriorEntrance #co1 table thead td ul {
	display: inline-block;
}

#main.exteriorEntrance #co1 table thead td li {
	margin: 0.5em 0;
	font-size: 0.95em;
	text-align: left;
}

#main.exteriorEntrance #co1 table thead td .doorColor {
	display: inline-block;
	width: 96px;
	margin-right: 0.7em;
	vertical-align: middle;
}

#main.exteriorEntrance #co1 table thead td .doorColor img {
	margin-bottom: 0;
}

#main.exteriorEntrance #co1 table td.noteCell {
	padding: 30px;
	border: transparent;
	text-align: left;
	vertical-align: top;
}

#main.exteriorEntrance #attend {
	margin-top: 40px;
}

#main.exteriorEntrance #attend .w2-1 {
	padding: 15px 15px 5px;
	border: solid 2px #b78dac;
}

#main.exteriorEntrance #attend .w2-1:first-child div:not(.img) {
	width: 160px;
}

#main.exteriorEntrance #attend .w2-1:first-child .img {
	width: 250px;
	position: relative;
	top: -15px;
}

#main.exteriorEntrance #attend .w2-1:last-child div:not(.img) {
	width: 200px;
}

#main.exteriorEntrance #attend .w2-1:last-child>.flex {
	width: 210px;
	padding-top: 15px;
}

#main.exteriorEntrance #attend .w2-1:last-child .img {
	width: 49%;
	font-size: 0.85em;
}

#main.exteriorEntrance #attend p.cap1 {
	margin-bottom: 0.5em;
}

#main.exteriorEntrance #attend p:not(.cap1) {
	font-size: 0.9em;
}

#main.exteriorEntrance #attend+p {
	font-size: 0.8em;
	margin-top: 5px;
	text-align: right;
}

#main.exteriorEntrance #attend .img img {
	margin-bottom: 0;
}

#main.exteriorEntrance .lineupTitle {
	margin-top: 40px;
}

#main.exteriorEntrance #co2 .lineupTitle span {
	display: inline-block;
	margin-left: 2em;
	font-weight: 400;
	font-size: 0.6em;
	vertical-align: 0.2em;
}

#main.exteriorEntrance #co2 p.cap1 {
	margin-bottom: 0.5em;
}

#main.exteriorEntrance #co2 p.cap2 {
	font-size: 0.9em;
}

#main.exteriorEntrance #co2 .w3-1 {
	margin-bottom: 20px;
}

#main.exteriorEntrance #co2 .w3-1 .colorName {
	line-height: 1.5em;
}

#main.exteriorEntrance #co2 .w3-1 .colorName span {
	display: inline-block;
	width: 28%;
	line-height: 1.6em;
	font-size: 0.7em;
	margin-left: 2%;
	vertical-align: top;
}

#main.exteriorEntrance #co2 .w3-1 .colorName span:first-child {
	width: 40%;
	margin-left: 0;
}

#main.exteriorEntrance #more1 .w2-1>.cap1 {
	margin-bottom: 0.5em;
}

#main.exteriorEntrance #more1 .w2-1:first-child .img {
	margin-top: 40px;
	position: relative;
}

#main.exteriorEntrance #more1 .w2-1 .img p {
	width: 5.4em;
	height: 5.4em;
	padding-top: 0.7em;
	background-color: #fff;
	border: solid 2px #b78dac;
	text-align: center;
	font-size: 0.9em;
	line-height: 1.4em;
	border-radius: 2.7em;
	position: absolute;
	left: -2em;
	top: -2em;
}

#main.exteriorEntrance #more1 .w4-1 p.cap1 {
	margin-top: 8px;
	padding-left: 0.5em;
	border-left: solid 7px #b78dac;
}

#main.exteriorEntrance #more1 .w4-1 p:not(.cap1) {
	font-size: 0.9em;
}

#main.exteriorEntrance #more2 ul {
	margin-top: 30px;
}

#main.exteriorEntrance .attention {
	margin: 60px auto 0;
	border: solid 2px #b78dac;
}

#main.exteriorEntrance .attention h4::after {
	background: linear-gradient(to bottom left, transparent 50%, #b78dac 50.1%) top right/ 100% 50% no-repeat,
		linear-gradient(to top left, transparent 50%, #b78dac 50.1%) bottom right / 100% 50% no-repeat;
}

#main.exteriorEntrance .attention .lineupTitle {
	margin-top: 0;
}

@media screen and (max-width:767px) {
	#main.exteriorEntrance #co2 .lineupTitle span {
		margin-left: 0;
		margin-bottom: 0.3em;
	}

	#main.exteriorEntrance #more1 h4.lineupTitle+.flex .w2-1 {
		width: 100%;
	}

	#main.exteriorEntrance #more1 h4.lineupTitle+.flex .w2-1:first-child {
		margin-bottom: 30px;
	}

	#main.exteriorEntrance #co1 table td {
		padding: 15px;
	}

	#main.exteriorEntrance #co1 table thead td li {
		margin: 0.8em 0;
		text-align: center;
	}

	#main.exteriorEntrance #co1 table thead td .doorColor {
		display: block;
		width: 70%;
		margin: 0 auto 3px;
	}

	#main.exteriorEntrance #attend .w2-1>div {
		width: 100% !important;
	}

	#main.exteriorEntrance #attend .w2-1:first-child .img {
		margin: 0 auto 10px;
		position: relative;
		top: 0;
	}

	#main.exteriorEntrance #co2 .w3-1 .colorName {
		margin-top: -5px;
	}

	#main.exteriorEntrance #co2 .w3-1 .colorName span {
		font-size: 0.85em;
	}

	#main.exteriorEntrance #more1 .w2-1>.cap1 {
		font-size: 1.15em;
	}

	#main.exteriorEntrance #more1 .w2-1 .img p {
		width: 6em;
		height: 6em;
		padding-top: 0.8em;
		border-radius: 3em;
		left: -0.5em;
		top: -2em;
	}

	#main.exteriorEntrance #more1 .w4-1 p.cap1 {
		font-size: 0.95em;
	}

	#main.exteriorEntrance #more2 .w4-2 {
		margin-top: 20px;
	}

	#main.exteriorEntrance .attention h4::after {
		background: linear-gradient(to top right, transparent 50%, #b78dac 50.1%) bottom left/ 50% 100% no-repeat,
			linear-gradient(to top left, transparent 50%, #b78dac 50.1%) bottom right / 50% 100% no-repeat;
	}

	@media (orientation:portrait) {

		#main.exteriorEntrance #co1 .mBtm30 .w4-1,
		#main.exteriorEntrance #co2 .mBtm30 .w4-1 {
			min-width: 180px;
			max-width: 300px;
			width: 50vw;
			margin: 0 auto;
		}

		#main.exteriorEntrance #co1 .mBtm30 .w4-1 img,
		#main.exteriorEntrance #co2 .mBtm30 .w4-1 img {
			position: relative;
			left: 5vw;
		}

		#main.exteriorEntrance .tableBox table {
			width: 600px;
		}

		#main.exteriorEntrance #co2 .w2-1,
		#main.exteriorEntrance #co2 .w3-1 {
			width: 100%;
			margin-bottom: 20px;
		}

		#main.exteriorEntrance #more2 h4.lineupTitle+.flex .w2-1 {
			width: 100%;
		}

		#main.exteriorEntrance #attend .w2-1 {
			width: 100%;
		}

		#main.exteriorEntrance #attend .w2-1:first-child {
			margin-bottom: 15px;
		}

		#main.exteriorEntrance .attention .w3-1 {
			width: 100%;
			margin: 15px 0 0;
		}
	}

	@media (orientation:landscape) {

		#main.exteriorEntrance #co1 .mBtm30 .w4-3,
		#main.exteriorEntrance #co2 .mBtm30 .w4-3 {
			width: 65%;
		}

		#main.exteriorEntrance #co1 .mBtm30 .w4-1,
		#main.exteriorEntrance #co2 .mBtm30 .w4-1 {
			width: 30%;
		}

		#main.exteriorEntrance .tableBox table {
			width: 100%;
		}

		#main.exteriorEntrance #co2 .w2-1,
		#main.exteriorEntrance #co2 .w3-1 {
			width: 48%;
		}

		#main.exteriorEntrance #co2 p.cap2 {
			min-height: 3.8em;
		}
	}
}

/*==============================================================
contents - outdoor facilities
==============================================================*/
/* architectureType */
#main.exteriorOutdoorFacilities #architectureType {
	position: relative;
	z-index: 2;
}

#main.exteriorOutdoorFacilities #architectureType .coInner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding-bottom: 3em;
}

@media screen and (max-width:767px) {
	#main.exteriorOutdoorFacilities #architectureType .coInner {
		padding: 2em 1em 2.5em;
	}
}

#main.exteriorOutdoorFacilities #architectureType .maintenance {
	width: 100%;
	position: relative;
	margin-bottom: 2em;
	padding-left: 1em;
	font-size: min(1em, 3vw);
}

#main.exteriorOutdoorFacilities #architectureType .maintenance::before {
	content: '';
	width: .6em;
	height: .6em;
	background-color: var(--tmcolor);
	border-radius: 100%;
	position: absolute;
	top: 0.5em;
	left: 0;
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeTitle {
	margin: 0 auto 1.5em;
	padding: 0;
	text-align: center;
	font-size: min(1.5em, 4.4vw);
	color: var(--tmcolor);
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-wrp {
	width: 32%;
	background-color: #ecf6ee;
	z-index: 1;
	border-radius: 5px;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
	position: relative;
	/* padding-bottom: 3.5em; */
}

@media screen and (max-width:640px) {
	#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-wrp {
		width: 100%;
		padding-bottom: unset;
		margin-bottom: 1em;
	}
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-wrp-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	padding: 1em;
	position: relative;
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type {
	display: block;
	width: 100%;
	background-color: #b6daad;
	padding: .7em 1em;
	font-weight: bold;
	font-size: min(1.1em, 3.5vw);
	position: relative;
	transition: all .3s;
	border-radius: 5px 5px 0 0;
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type:hover {
	background-color: var(--tmcolor);
	color: #fff;
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type::after {
	content: '';
	position: absolute;
	right: .5em;
	top: 50%;
	background-color: var(--tmcolor);
	width: 1em;
	height: .75em;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform: translate(0, -45%);
	transition: all .3s;
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type:hover::after {
	background-color: #fff;
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type p {
	margin-bottom: 0;
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type p span {
	font-weight: bold;
	font-size: 1.2em;
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-fig-title {
	display: block;
	width: 100%;
	font-size: min(1em, 4vw);
	font-weight: bold;
	position: relative;
	padding-left: 1.5em;
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-fig-title::before {
	content: '';
	display: block;
	width: .4em;
	height: .4em;
	border: 5px solid var(--tmcolor);
	border-radius: 100%;
	position: absolute;
	top: 0.25em;
	left: 0;
}


#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-fig {
	flex-basis: 49%;
	border: solid 2px #fff;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	background-color: #fff;
	border: solid 1px #ddd;
	transition: all .3s;
	overflow: hidden;
	margin-bottom: 1em;
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-fig.on {
	border: solid 1px var(--tmcolor);
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-fig:hover {
	border: solid 1px var(--tmcolor);
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-fig .type-fig-img {
	display: block;
	margin-bottom: .5rem;
	overflow: hidden;
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-fig img {
	transition: all .3s;
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-fig:hover .type-fig-img img {
	transform: scale(1.05);
}


#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-fig p {
	margin: 0 auto;
	padding: 0 5px 5px;
	font-size: .75em;
	line-height: 1.4;
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-wrp::after {
	content: '';
	position: absolute;
	left: 50%;
	top: calc(100% + .75em);
	background-color: var(--tmcolor);
	transform: translate(-50%);
	width: 2.5em;
	height: 1.25em;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	z-index: 2;
}

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

	#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-wrp:first-child:after,
	#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-wrp:nth-child(2):after {
		display: none;
	}
}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-wrp .type-note {
	width: 100%;
	font-size: min(.8em, 3vw);
	/* padding: 0 1.5em 1em; */
	/* position: absolute; */
	/* bottom: 0; */
	left: 0;

}

#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-wrp .type-note .btn {
	display: block;
	width: fit-content;
	color: var(--tmcolor);
	text-decoration: underline;
}

@media screen and (max-width:640px) {
	#main.exteriorOutdoorFacilities #architectureType .architectureTypeList .type-wrp .type-note {
		position: static
	}
}

/* reform point */
#main.exteriorOutdoorFacilities #reformPoint {
	padding-top: 30px;
	background-color: #eff1e3;
}

#main.exteriorOutdoorFacilities #reformPoint ul {
	justify-content: space-around;
	width: 100%;
	max-width: 1200px;
}

@media screen and (max-width:767px) {
	#main.exteriorOutdoorFacilities #reformPoint ul {
		width: 92vw;
	}

	@media screen and (max-width:640px) {
		#main.exteriorOutdoorFacilities #reformPoint ul {
			padding: 0 1em;
		}
	}
}

#main.exteriorOutdoorFacilities #reformPoint ul li {
	width: 31%;
}

#main.exteriorOutdoorFacilities #reformPoint li a {
	border-color: #ccc;
	transition: all .3s 0s ease;
}

#main.exteriorOutdoorFacilities #reformPoint li a::before {
	top: .8em;
	font-weight: bold;
	color: var(--tmcolor);
}

#main.exteriorOutdoorFacilities #reformPoint li a:hover,
#main.exteriorOutdoorFacilities #reformPoint li a.on {
	border-color: var(--tmcolor);
	background-color: #f1f8ee;
}


/* co1,2 */
#main.exteriorOutdoorFacilities .term {
	/* display: block; */
	padding-left: 1em;
	font-size: .6em;
	color: var(--tmcolor);
	vertical-align: .2em;
}

#main.exteriorOutdoorFacilities .note {
	display: block;
	margin-top: 5px;
	font-weight: normal;
	font-size: .8rem;
	color: inherit;
}

#main.exteriorOutdoorFacilities #co2 {
	/* background-color: #f1f8ee; */
}

#main.exteriorOutdoorFacilities .process {
	padding-right: 2em;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1em 3em;
}

#main.exteriorOutdoorFacilities .process li {
	position: relative;
}

#main.exteriorOutdoorFacilities .process li:not(:last-child)::after {
	content: '';
	position: absolute;
	left: calc(100% + 1.1em);
	top: 40%;
	width: 1em;
	height: 1.5em;
	background-color: var(--tmcolor);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

#main.exteriorOutdoorFacilities .construction-note {
	margin-top: min(60px, 5vw);
	padding: min(30px, 5vw);
	background-color: #f1f8ee;
}

#main.exteriorOutdoorFacilities #co2 .construction-note {
	/* background-color: #fff; */
}

#main.exteriorOutdoorFacilities .construction-note-title {
	margin-bottom: 15px;
	font-size: 1.15em;
	color: var(--tmcolor);
}

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

	#main.exteriorOutdoorFacilities #co1 h3 span.tmBgColor,
	#main.exteriorOutdoorFacilities #co2 h3 span.tmBgColor {
		top: 0;
		transform: translateY(0);
	}

	#main.exteriorOutdoorFacilities #co1 h3 .term,
	#main.exteriorOutdoorFacilities #co2 h3 .term {
		display: block;
		padding-left: 0;
	}
}

@media screen and (max-width:767px) {
	#main.exteriorOutdoorFacilities .condition .w3-1 {
		width: 48%;
	}

	#main.exteriorOutdoorFacilities .condition .w3-1:first-child,
	#main.exteriorOutdoorFacilities .condition .w3-2,
	#main.exteriorOutdoorFacilities .maintenance .w3-1,
	#main.exteriorOutdoorFacilities .maintenance .w3-2,
	#main.exteriorOutdoorFacilities .maintenance .w2-1,
	#main.exteriorOutdoorFacilities .maintenance .w2-1s {
		width: 100%;
		/*         max-width: 360px;
        margin-inline: auto; */
	}

	#main.exteriorOutdoorFacilities .process,
	#main.exteriorOutdoorFacilities .cregare-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* co3 */
#main.exteriorOutdoorFacilities #co3 .replacement-wrp {
	/* padding: 3.5em 1.5em 1em;
	background-color: #f1f8ee; */
	position: relative;
}

/* #main.exteriorOutdoorFacilities #co3 .replacement-wrp h5 {
	width: 100%;
	padding: .3em;
	color: #fff;
	background-color: var(--tmcolor);
	font-size: 1em;
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
} */

#main.exteriorOutdoorFacilities #co3 .replacement-wrp .before,
#main.exteriorOutdoorFacilities #co3 .replacement-wrp .after {
	width: 46%;
	position: relative;
}

#main.exteriorOutdoorFacilities #co3 .replacement-wrp .before p,
#main.exteriorOutdoorFacilities #co3 .replacement-wrp .after p {
	width: 4.5em;
	padding: .1em .5em;
	margin: 0;
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
	color: #fff;
	background-color: var(--tmcolor);
}

#main.exteriorOutdoorFacilities #co3 .replacement-wrp .before p {
	color: var(--tmcolor);
	background-color: #fff;
}

#main.exteriorOutdoorFacilities #co3 .replacement-wrp .before::after {
	content: '';
	position: absolute;
	left: calc(100% + 1.1em);
	top: 45%;
	width: 1em;
	height: 1.5em;
	background-color: var(--tmcolor);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

#main.exteriorOutdoorFacilities #co3 .replacement-wrp p {
	width: 100%;
	margin-top: 1em;
	margin-bottom: 0;
	font-size: .85em;
}

#main.exteriorOutdoorFacilities #colorV h5 {
	padding-bottom: 0.3em;
	margin-bottom: 0.8em;
	font-size: 1em;
	font-weight: 500;
	border-bottom: solid 1px #000;
}

#main.exteriorOutdoorFacilities #colorV ul:not(.note) li {
	width: 140px;
}

#main.exteriorOutdoorFacilities #variation {
	padding: 30px 20px 20px;
	border: solid 1px #75b552;
	position: relative;
}

#main.exteriorOutdoorFacilities #variation h5 {
	padding: 0.5em 1.2em;
	line-height: 1;
	font-weight: 500;
	font-size: 1em;
	position: absolute;
	left: 0;
	top: 0;
	color: #fff;
}

#main.exteriorOutdoorFacilities #variation li {
	width: 270px;
}

#main.exteriorOutdoorFacilities #variation p {
	margin: 10px 0 5px;
}

#main.exteriorOutdoorFacilities #co3 h5.lineupType {
	padding-bottom: 0.3em;
	margin: 60px auto 1.5em;
	font-size: 1.1em;
	border-bottom: solid 1px #c8c8c8;
}

#main.exteriorOutdoorFacilities .cregare-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1em 3em;
}

#main.exteriorOutdoorFacilities .attention {
	margin: 60px auto 0;
	border: solid 2px #75b552;
}

#main.exteriorOutdoorFacilities .attention h4::after {
	background: linear-gradient(to bottom left, transparent 50%, #75b552 50.1%) top right/ 100% 50% no-repeat,
		linear-gradient(to top left, transparent 50%, #75b552 50.1%) bottom right / 100% 50% no-repeat;
}


@media screen and (max-width:767px) {
	@media screen and (max-width:640px) {
		#main.exteriorOutdoorFacilities #co3 .replacement-wrp {
			width: 100%;
			padding: 3.5em 1em 1em;
		}

		#main.exteriorOutdoorFacilities #co3 .replacement-wrp .before::after {
			left: calc(100% + 2.2vw);
		}
	}

	#main.exteriorOutdoorFacilities #colorV ul:not(.note) li {
		width: 48%;
	}

	#main.exteriorOutdoorFacilities #colorV .mBtm30 {
		margin-bottom: 10px !important;
	}

	#main.exteriorOutdoorFacilities #variation li {
		width: 48%;
	}

	#main.exteriorOutdoorFacilities #co3 h5.lineupType {
		margin: 15px auto 1.5em;
	}

	#main.exteriorOutdoorFacilities .attention h4::after {
		background: linear-gradient(to top right, transparent 50%, #75b552 50.1%) bottom left/ 50% 100% no-repeat,
			linear-gradient(to top left, transparent 50%, #75b552 50.1%) bottom right / 50% 100% no-repeat;
	}

	@media (orientation:portrait) {

		#main.exteriorOutdoorFacilities #co3 .w2-1,
		#main.exteriorOutdoorFacilities #colorV {
			width: 100%;
		}

		#main.exteriorOutdoorFacilities #co3 .w2-1:last-child {
			margin-top: 0;
		}

		#main.exteriorOutdoorFacilities #co3 .w2-1 p {
			margin-bottom: 0.6em;
		}

		#main.exteriorOutdoorFacilities #variation {
			margin: 40px auto 20px;
		}

		#main.exteriorOutdoorFacilities .attention .w3-1 {
			width: 100%;
			margin: 15px 0 0;
		}
	}

	@media (orientation:landscape) {
		#main.exteriorOutdoorFacilities #variation {
			align-self: flex-start;
		}
	}

}

/*==============================================================
contents - others
==============================================================*/

#main.exteriorOthers #co1 {
	counter-reset: measureNum;
}

#main.exteriorOthers #co2 {
	background-color: #eef1f8;
}

#main.exteriorOthers #co1 h3+.img {
	width: 560px;
	margin: 0 auto 20px;
}

#main.exteriorOthers .measure {
	margin: 60px auto;
}

#main.exteriorOthers .measure h4 {
	width: 9em;
	padding: 0.5em 0 0.5em 2em;
	margin-right: 2em;
	margin-bottom: 2em;
	counter-increment: measureNum;
	display: inline-block;
	font-size: 1.3em;
	background-color: #5476ba;
	color: #fff;
	border-radius: 2em;
	text-align: center;
	position: relative;
	vertical-align: top;
}

#main.exteriorOthers .measure h4::before {
	content: counter(measureNum);
	display: block;
	width: 1.4em;
	height: 1.4em;
	padding: 0.05em 0 0;
	box-sizing: border-box;
	position: absolute;
	left: 0.13em;
	top: calc(50% - 0.7em);
	font-size: 1.4em;
	color: #5476ba;
	background-color: #fff;
	border-radius: 1em;
}

#main.exteriorOthers .measure h5.lineupTitle {
	margin-top: 0;
}

#main.exteriorOthers #measure1 h4+p,
#main.exteriorOthers #measure2 h4+p {
	display: inline-block;
	vertical-align: top;
}

#main.exteriorOthers #measure2 p.lineupType {
	padding-bottom: 0.3em;
	margin: 30px auto 1.5em;
	border-bottom: solid 1px #c8c8c8;
}

#main.exteriorOthers #measure2 #key1 p.cap2 {
	font-size: 0.85em;
}

#main.exteriorOthers #measure2 #key1 .w3-1:nth-child(1) .img {
	width: 170px;
}

#main.exteriorOthers #measure2 #key1 .w3-1:nth-child(1) .cap2 {
	width: 110px;
}

#main.exteriorOthers #measure2 #key1 .w3-1:nth-child(2) .cap2,
#main.exteriorOthers #measure2 #key1 .w3-1:nth-child(3) .cap2 {
	margin-top: -5px;
	display: flex;
	justify-content: space-between;
}

#main.exteriorOthers #measure2 #key1 .w3-1:nth-child(2) .cap2 span {
	width: 30.5%;
}

#main.exteriorOthers #measure2 #key1 .w3-1:nth-child(3) span {
	width: 49%;
}

#main.exteriorOthers #measure2 #key2 .tmColor,
#main.exteriorOthers #measure2 #key2 .tmColor+p {
	font-size: 0.9em;
}

#main.exteriorOthers #measure2 #key2 .tmColor {
	margin-bottom: 0.5em;
}

#main.exteriorOthers #measure4 .dotlist li {
	padding-left: 1em;
	position: relative;
}

#main.exteriorOthers #measure4 .dotlist li::before {
	content: '';
	display: block;
	width: 0.6em;
	height: 0.6em;
	position: absolute;
	left: 0;
	top: calc(50% - 0.3em);
	border-radius: 0.3em;
	background-color: #5476ba;
}

#main.exteriorOthers #co2 h3+p.sub {
	font-size: 1.2em;
	font-weight: 500;
}

#main.exteriorOthers #co2 .img {
	margin-top: 40px;
}

#main.exteriorOthers #co2 .img img {
	margin-bottom: 0;
}

#main.exteriorOthers .attention {
	margin: 60px auto 0;
	border: solid 2px #5476ba;
}

#main.exteriorOthers .attention h4::after {
	background: linear-gradient(to bottom left, transparent 50%, #5476ba 50.1%) top right/ 100% 50% no-repeat,
		linear-gradient(to top left, transparent 50%, #5476ba 50.1%) bottom right / 100% 50% no-repeat;
}

#main.exteriorOthers .attention .w3-1 {
	width: 31%;
}

#main.exteriorOthers .attention .w3-1 p {
	margin-bottom: 0;
}

@media screen and (max-width:767px) {
	#main.exteriorOthers .measure h4 {
		margin-bottom: 1.5em;
	}

	#main.exteriorOthers .measure h5.lineupTitle {
		margin-top: 20px;
	}

	#main.exteriorOthers #measure2 #key1 p.cap2 {
		font-size: 0.9em;
	}

	#main.exteriorOthers #measure2 #key1 .w3-1:nth-child(1) .img {
		width: 65%;
	}

	#main.exteriorOthers #measure2 #key1 .w3-1:nth-child(1) .cap2 {
		width: 30%;
	}

	#main.exteriorOthers .attention h4::after {
		background: linear-gradient(to top right, transparent 50%, #5476ba 50.1%) bottom left/ 50% 100% no-repeat,
			linear-gradient(to top left, transparent 50%, #5476ba 50.1%) bottom right / 50% 100% no-repeat;
	}

	@media (orientation:portrait) {
		#main.exteriorOthers #co1 h3+.img {
			width: 100%;
			margin: 0 auto;
		}

		#main.exteriorOthers #measure2 .w3-1 {
			width: 100%;
			margin-bottom: 20px;
		}

		#main.exteriorOthers #measure2 p.lineupType {
			margin: 20px auto 1.5em;
		}

		#main.exteriorOthers #measure3 .w2-1 {
			width: 100%;
		}

		#main.exteriorOthers #measure4 {
			margin: 60px auto 20px;
		}

		#main.exteriorOthers .attention .w3-1 {
			width: 100%;
			margin-top: 20px;
		}

		#main.exteriorOthers .attention .w3-1:first-child {
			margin-top: 0;
		}
	}

	@media (orientation:landscape) {
		#main.exteriorOthers #co1 h3+.img {
			width: 70vw;
			margin: 0 auto;
		}

		#main.exteriorOthers #measure2 .w3-1 {
			width: 48%;
			margin-bottom: 20px;
		}

		#main.exteriorOthers #measure2 p.lineupType {
			margin: 20px auto 1.5em;
		}

		#main.exteriorOthers #measure4 {
			margin: 60px auto 20px;
		}
	}
}

/*==============================================================
contents - thermal
==============================================================*/

#main.exteriorThermal p:last-child {
	margin-bottom: 0 !important;
}

#main.exteriorThermal #pageHeader .hGroup .house {
	width: 430px;
	right: -10px;
}

#main.exteriorThermal #reformPoint .trLogo {
	width: 283px;
	margin: -.5em auto 1.5em;
}

#main.exteriorThermal #reformPoint ul {
	gap: 8px;
}

#main.exteriorThermal #reformPoint li {
	width: 152px;
}

#main.exteriorThermal .w2-1 {
	width: min(47%, 440px);
}

#main.exteriorThermal .w4-3 {
	width: 255px;
}

#main.exteriorThermal .w4-1 {
	width: 150px;
}

#main.exteriorThermal .coInner .lineupTitle {
	margin-top: 1.5em;
}

#main.exteriorThermal .coInner .lineupTitle span {
	font-size: 0.75em;
}

#main.exteriorThermal #co1 .column {
	padding: 25px 30px;
	background-color: #e8e6e5;
}

#main.exteriorThermal #co1 .column h5 {
	margin: 0;
	margin-bottom: 1em;
	padding-left: 0.5em;
	border-left: solid 7px var(--tmcolor);
	font-size: 1.15em;
}

#main.exteriorThermal #co2,
#main.exteriorThermal #co4 {
	background-color: #fef4eb;
}

#main.exteriorThermal .grid.ba {
	margin-top: 2em;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto 1fr;
	grid-auto-flow: column;
	/* grid-template-rows: ; */
	gap: 24px 40px;
}

#main.exteriorThermal .grid.ba :is(.before, .after) {
	padding-bottom: .25em;
	font-size: 1.3em;
}

#main.exteriorThermal .grid.ba .before {
	border-bottom: solid 1px #7d6fab;
}

#main.exteriorThermal .grid.ba .after {
	border-bottom: solid 1px #fbc600;
}

#main.exteriorThermal #co4 .right .img {
	margin-bottom: 1.5em;
}

#main.exteriorThermal #co4 .right .img .w2-1 {
	width: min(49%, 215px);
}

#main.exteriorThermal #co4 .right .img p {
	font-size: .8rem;
}

#main.exteriorThermal #co4 .right .column {
	margin-top: 1.5em;
	padding: 30px;
	background-color: #fff;
	border: solid 1px #c8c8c8;
	gap: 1em 0;
}

#main.exteriorThermal #co4 .right .column h5 {
	display: inline-block;
	margin-bottom: 1em;
	font-size: 1em;
	padding: .25em 1.25em;
	background-color: #c3c4c5;
	border-radius: 2em;
}

/* co5 */
#main.exteriorThermal #co5 .coInner {
	padding-bottom: 0;
}

#main.exteriorThermal :is(#co5, #co6) h3 {
	margin-bottom: 1em;
	padding-left: 0;
}

#main.exteriorThermal :is(#co5, #co6) h3 .tr-logo {
	display: inline-block;
	width: 283px;
	margin-right: .75em;
	vertical-align: middle;
}

#main.exteriorThermal :is(#co5, #co6) .wrp {
	border: solid 1px var(--tmcolor);
}

#main.exteriorThermal :is(#co5, #co6) .wrp-inner {
	padding: 40px;
}

#main.exteriorThermal :is(#co5, #co6) .wrp-title {
	margin-bottom: 1.5em;
	font-size: 1.3em;
	font-weight: 700;
	color: var(--tmcolor);
}

#main.exteriorThermal #co5 .wrp-inner .fig-title {
	grid-area: title;
	margin-bottom: .75em;
	padding-left: 1.2em;
	font-size: 1em;
	position: relative;
}

#main.exteriorThermal #co5 .wrp-inner .fig-title::before {
	content: '';
	width: .7em;
	height: .7em;
	background-color: currentcolor;
	position: absolute;
	left: 0;
	top: .4em;
}

/* kaitekisei */
#main.exteriorThermal #co5 .wrp-title:not(:first-child) {
	margin-top: 3em;
}

#main.exteriorThermal #co5 .wrp-inner .wrp-title .label {
	display: inline-block;
	width: 9em;
	padding: .35em;
	margin-right: 1em;
	color: #fff;
	background-color: var(--tmcolor);
	text-align: center;
	border-radius: 2em;
	position: relative;
}

#main.exteriorThermal #co5 .wrp-inner:not(.bg) .wrp-title .label {
	padding-right: 1.5em;
}

#main.exteriorThermal #co5 .wrp-inner:not(.bg) .wrp-title .num {
	padding: .4em;
	position: absolute;
	right: .15em;
	top: 50%;
	transform: translateY(-50%);
	background-color: #fff;
	color: var(--tmcolor);
	border-radius: 50%;
}

#main.exteriorThermal #co5 .wrp-inner:not(.bg) .grid {
	display: grid;
	justify-content: space-between;
	grid-template-areas: 'title text' 'img text';
	grid-template-columns: 560px 270px;
}

#main.exteriorThermal #co5 .wrp-inner figure {
	grid-area: img;
}

#main.exteriorThermal #co5 .wrp-inner p {
	grid-area: text;
}

#main.exteriorThermal #co5 .wrp-inner .note {
	margin-top: 3em;
}

/* keizaisei */
#main.exteriorThermal #co5 .wrp-inner.bg .grid {
	display: grid;
	justify-content: space-between;
	grid-template-areas: 'table ua ua' 'table specification figure';
	grid-template-columns: 310px 190px 290px;
	gap: 2em 0;
}

#main.exteriorThermal #co5 .wrp-inner.bg .grid table {
	grid-area: table;
	border-bottom: solid 1px #99999a;
}

#main.exteriorThermal #co5 .wrp-inner.bg .grid table th {
	padding: 1em;
	background-color: #fde280;
	border-top: solid 1px #99999a;
	border-right: solid 1px #99999a;
}

#main.exteriorThermal #co5 .wrp-inner.bg .grid table td {
	padding: .5em 1em;
	color: #fff;
	background-color: #eb8638;
	font-weight: 700;
	font-size: 1.1em;
	border-top: solid 1px #99999a;
	text-align: center;
}

#main.exteriorThermal #co5 .wrp-inner.bg .grid table td span {
	font-size: .85em;
}

#main.exteriorThermal #co5 .wrp-inner.bg .grid table tr:first-child :is(th, td) {
	color: currentcolor;
	background-color: #e9e8e9;
}

#main.exteriorThermal #co5 .wrp-inner.bg .grid .about-ua {
	grid-area: ua;
	padding: 1em 1.5em;
	background-color: #fff;
	border-radius: 5px;
	border: solid 1px var(--tmcolor);
	position: relative;
}

#main.exteriorThermal #co5 .wrp-inner.bg .grid .about-ua::before,
#main.exteriorThermal #co5 .wrp-inner.bg .grid .about-ua::after {
	content: '';
	display: block;
	position: absolute;
	right: 100%;
	top: 3em;
	border: solid 15px transparent;
	border-right: solid 20px var(--tmcolor);
}

#main.exteriorThermal #co5 .wrp-inner.bg .grid .about-ua::after {
	border-right: solid 20px #fff;
	margin-right: -2px;
}

#main.exteriorThermal #co5 .wrp-inner.bg .grid .about-ua h6 {
	display: inline-block;
	margin-bottom: .5em;
	padding: .2em .75em;
	font-weight: 700;
	font-size: .8em;
	border: solid 1px;
}

#main.exteriorThermal #co5 .wrp-inner.bg .grid .about-ua p {
	font-size: .8em;
}

#main.exteriorThermal #co5 .wrp-inner.bg .grid .specification {
	grid-area: specification;
}

#main.exteriorThermal #co5 .wrp-inner.bg .grid .specification h6 {
	padding: .2em 0;
	margin-bottom: .75em;
	text-align: center;
	font-size: 1em;
	border-top: solid 1px #99999a;
	border-bottom: solid 1px #99999a;
}

#main.exteriorThermal #co5 .wrp-inner.bg .grid .specification :is(p, ul) {
	margin-bottom: 0;
	font-size: .95em;
}

#main.exteriorThermal #co5 .wrp-inner.bg .grid .specification p {
	font-weight: 700;
}

#main.exteriorThermal #co5 .wrp-inner.bg .grid figure {
	grid-area: figure;
}

#main.exteriorThermal :is(#co5, #co6) .wrp .wrp-inner.bg {
	background-color: #fff9e5;
}

/* co6 */
#main.exteriorThermal #co6 table {
	width: 100%;
	height: 100%;
	border-top: solid 1px #949494;
}

#main.exteriorThermal #co6 table :is(th, td) {
	width: 16%;
	padding: 1rem;
	text-align: center;
	border-bottom: solid 1px #949494;
}

#main.exteriorThermal #co6 table tr>*:nth-child(2) {
	width: 28%;
	--cellcolor: #dc6a0d;
	border-left: solid 1px #949494;
}

#main.exteriorThermal #co6 table tr>*:nth-child(3) {
	width: 28%;
	--cellcolor: #ef9b00;
	border-left: solid 1px #949494;
}

#main.exteriorThermal #co6 table tr>*:nth-child(4) {
	width: 28%;
	--cellcolor: #f5bf18;
	border-left: solid 1px #949494;
}

#main.exteriorThermal #co6 table thead th {
	color: #fff;
	background-color: var(--cellcolor);
}

#main.exteriorThermal #co6 table tr>th:first-child {
	font-size: .8em;
	color: currentColor;
	background-color: #fff;
}

#main.exteriorThermal #co6 table .summary :is(th, td) {
	background-color: #e9e8e9 !important;
	border-bottom: dashed 1px #949494;
}

#main.exteriorThermal #co6 table .summary td .em {
	height: 5.5em;
	display: grid;
	place-items: center;
	color: #fff;
	background-color: var(--cellcolor);
	border-radius: 10px;
	line-height: 1.5;
}

#main.exteriorThermal #co6 table .summary td p:not(.em) {
	margin-top: .5em;
	display: grid;
	place-items: center;
	line-height: 1.5;
	font-weight: 500;
}

#main.exteriorThermal #co6 table .effect td {
	font-size: .8em;
}

#main.exteriorThermal #co6 table .target td {
	padding-bottom: 6.5em
}

#main.exteriorThermal #co6 table .target ul {
	display: grid;
	justify-content: space-between;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
}

#main.exteriorThermal #co6 table .target ul li {
	padding: .5em;
	font-size: .8em;
	font-weight: 500;
	color: #fff;
	text-align: center;
	border-radius: 5px;
}

#main.exteriorThermal #co6 table .target ul li:nth-child(1) {
	background-color: #b2c02a;
}

#main.exteriorThermal #co6 table .target ul li:nth-child(2) {
	background-color: #6eb4c4;
}

#main.exteriorThermal #co6 table .target ul li:nth-child(3) {
	background-color: #e591a9;
}

#main.exteriorThermal #co6 table .target ul li:nth-child(4) {
	background-color: #f3b24a;
}

#main.exteriorThermal #co6 table .target ul li:nth-child(5) {
	background-color: #b288a7;
}

#main.exteriorThermal #co6 table .target ul li.visible {
	visibility: visible;
}

#main.exteriorThermal #co6 table .note td {
	padding: 0;
	border: none;
	position: relative;
}

#main.exteriorThermal #co6 table .note p {
	width: calc(100% - 2rem);
	padding: .5em;
	background-color: #fff;
	border: solid 1px;
	position: absolute;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%);
	color: var(--tmcolor);
	font-size: .9rem;
	font-weight: 500;
	border-radius: 2rem;
	line-height: 1.5;
}

#main.exteriorThermal #co6 table .savings {
	font-weight: 500;
}

#main.exteriorThermal #co6 table .savings .em {
	font-size: 1.5em;
	font-weight: 700;
}

#main.exteriorThermal #co6 table tfoot :is(th, td) {
	border: none !important;
}

#main.exteriorThermal #co6 table .arrow {
	display: inline-block;
	width: 2em;
	height: 1.4em;
	margin-bottom: 1.4em;
	background-color: var(--cellcolor);
	position: relative;
}

#main.exteriorThermal #co6 table .arrow::after {
	content: '';
	display: block;
	width: 4em;
	height: 1.4em;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	background-color: var(--cellcolor);
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
}

#main.exteriorThermal #co6 table .recommend :is(th, td) {
	padding: 0;
	vertical-align: top;
}

#main.exteriorThermal #co6 table .recommend td {
	height: 100%;
	padding: 1.5em 0;
	background-color: #fff9e5;
}

#main.exteriorThermal #co6 table .recommend .fukidashi {
	width: 7em;
	height: 7em;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: #fff;
	font-size: 1rem;
	background-color: var(--tmcolor);
	position: relative;
}

#main.exteriorThermal #co6 table .recommend .fukidashi::before {
	content: '';
	display: block;
	border: solid .8em transparent;
	border-left: solid 1.5em var(--tmcolor);
	position: absolute;
	left: 95%;
	top: 50%;
	transform: translateY(-50%);
}

#main.exteriorThermal #co6 table .recommend ul {
	height: 100%;
	padding: 0 .5em 0 1.25em;
}

#main.exteriorThermal #co6 table .recommend td:not(:nth-child(2)) ul {
	border-left: solid 1px #949494;
}

#main.exteriorThermal #co6 table .recommend ul li {
	padding-left: 1.2em;
	text-align: left;
	font-weight: 500;
	position: relative;
}

#main.exteriorThermal #co6 table .recommend ul li::before {
	content: '';
	display: block;
	width: .7em;
	height: .7em;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: .4em;
	background-color: var(--cellcolor);
}

#main.exteriorThermal #co6 table .recommend ul li:not(:last-child) {
	margin-bottom: .75em;
}

@media screen and (max-width:767px) {
	#main.exteriorThermal #pageHeader .hGroup .house {
		width: 100%;
	}

	#main.exteriorThermal #pageHeader .hGroup h2 span {
		margin-left: 0;
	}

	#main.exteriorThermal .w2-1 {
		width: 100%;
	}

	#main.exteriorThermal .w4-3 {
		width: 100%;
	}

	#main.exteriorThermal .w4-1 {
		width: 100%;
	}

	#main.exteriorThermal .grid.ba {
		gap: 8vw 4vw;
	}

	#main.exteriorThermal :is(#co5, #co6) h3 {
		font-size: min(1.5em, 4.2vw);
	}

	#main.exteriorThermal :is(#co5, #co6) h3 .tr-logo {
		width: 10em;
	}

	#main.exteriorThermal :is(#co5, #co6) .wrp-inner {
		padding: min(10vw, 40px) 5vw;
	}

	#main.exteriorThermal #co5 .wrp-inner .wrp-title .label {
		display: block;
		margin-bottom: .5em;
	}

	#main.exteriorThermal #co5 .wrp-inner:not(.bg) .grid {
		grid-template-areas: 'title' 'text' 'img';
		grid-template-columns: auto;
	}

	#main.exteriorThermal #co5 .wrp-inner.bg .grid {
		display: grid;
		justify-content: space-between;
		grid-template-areas: 'table table' 'ua ua' 'specification figure';
		grid-template-columns: 12em 1fr;
		gap: 2em 1em;
	}

	#main.exteriorThermal #co5 .wrp-inner.bg .grid .about-ua::before,
	#main.exteriorThermal #co5 .wrp-inner.bg .grid .about-ua::after {
		right: 50%;
		top: auto;
		bottom: 100%;
		border: solid 15px transparent;
		border-bottom: solid 20px var(--tmcolor);
		transform: translateX(50%);
	}

	#main.exteriorThermal #co5 .wrp-inner.bg .grid .about-ua::after {
		border-bottom: solid 20px #fff;
		margin-right: auto;
		margin-bottom: -2px;
	}

	#main.exteriorThermal #co6 .table-wrp {
		width: 100%;
		overflow-y: scroll;
	}

	#main.exteriorThermal #co6 .table-wrp table {
		width: 54em;
	}

	#main.exteriorThermal #co6 table :is(th, td) {
		padding: min(1rem, 3vw);
	}

	#main.exteriorThermal #co6 table .note p {
		font-size: min(.9rem, 3.2vw);
	}

	#main.exteriorThermal #co6 table .recommend .fukidashi {
		font-size: min(1rem, 3.4vw);
	}
}

#main.exteriorOutdoorFacilities #cregare {
	background-color: #f9f9f9;
}

#main.exteriorOutdoorFacilities #cregare .common-styles {
	display: inline-block;
	padding: .25em .5em;
	font-size: .75em;
	line-height: 1.2;
	margin-right: .5em;
	border-radius: 3px;
	margin-bottom: .25em;
	background-color: var(--tmcolor);
	color: #fff;
}

@media screen and (max-width:767px) {
	#main.exteriorOutdoorFacilities .caption-title {
		font-weight: bold;
		margin-top: 1em;
	}
}