@charset "UTF-8";

@media screen and (min-width:821px) {
	/* 全体 --------------------------------------------------------------------- */
	html {
		height: 100%;
	}

	body {
		margin: 0 auto;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Noto Sans JP', sans-serif;
		overflow-y: scroll;
	}

	#wrapper {
		margin-bottom: 3rem;
	 }

	#header {
		position: fixed;
		top: 0;
		background-color: #fff;
		width: 100%;
		min-height: 100px;
		z-index: 3;
	}

	header {
		margin: 0 auto;
		padding: 1.3rem 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 90%;
	}

	#header img {
		width: clamp(117px,16.8vw, 240px);
	}

	#header p {
		text-align: right;
	}

	#container {
		margin: 8rem auto 4rem;
		list-style-type: none;
		max-width: 1280px;
	}

	fieldset {
		margin: 0 auto;
		padding: 2rem;
		border: 3px solid #6AD0B9;
		border-radius: 20px;
		width: clamp(821px, 80%, 980px);
	}

	h2 {
		margin-bottom: 2rem;
		color: #444650;
		font-size: clamp(14px,2vw,24px);
		text-align: center;
	}

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

	.hidden-tr {
		display: none;
	}

	/* トップページ -------------------------------------------------------------- */

	body#home {
		margin: 0 auto;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Noto Sans JP', sans-serif;
		overflow-y: scroll;
	}

	body#home #header {
		position: static;
		margin: 0 auto 8%;
		background-color: #fff;
		min-height: 100px;
	}

	body#home #container {
		margin: 0 auto 60px;
		width: clamp(821px, 52%, 1280px);
		text-align: center;
	}

	body#home #container picture img {
		width: 90%;
	}

	body#home #container p:first-child {
		margin-bottom: 7%;
	}

	body#home #container ul {
		margin: 0 0 6% 7%;
		color: #6AD0B9;
		font-size: clamp(10px,2vw,20px);
		font-weight: bold;
		text-align: left;
	}

	body#home #container li::before {
		position: relative;
		content: '';
		top: 0;
		left: -1%;
		display: inline-block;
		width: clamp(10px,2vw,20px);
		height: clamp(10px,2vw,20px);
		border-radius: 100%;
		background: #6AD0B9;
	}

	body#home #container li br,
	.sim_result td br {
		display: none;
	}

	body#home #footer {
		/*position: fixed;
		bottom: 0;*/
		padding: 30px 0;
		background-color: #6AD0B9;
		color: #fff;
		width: 100%;
		font-size: clamp(10px,1.5vw,20px);
		text-align: center;
		display: flex;
		flex-direction: column;
		height: 30vh;
	}

	body#home footer {
		font-size: clamp(10px,1.5vw,20px);
	}

	body#home button {
		border: 1px solid #6AD0B9;
		border-radius: 40px;
		background-color: #6AD0B9;
		color: #fff;
		width: calc(100% / 3);
		line-height: 1.3;
		font-family: 'Nunito Sans', sans-serif;
		font-size: clamp(22px,3vw,42px);
		letter-spacing: 0.2rem;
		cursor: pointer;
	}

	body#home #footer ul {
		margin-bottom: 30px;
		list-style-type: none;
	}

	/* 選択 --------------------------------------------------------------------- */

	/* 建物を選択 */
	.select_building ul {
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		width: 60%;
	}

	.select_building li p {
		margin-bottom: 1rem;
	}

	.select_building .label {
		display: inline-block;
		border: 3px solid #6AD0B9;
		border-radius: 40px;
		background-color: #fff;
		color: #6AD0B9;
		line-height: 1.6;
		font-weight: bold;
		font-size: clamp(13px,2vw,26px);
		width: 100%;
		text-align: center;
		cursor: pointer;
	}

	.select_building .label.checked,
	.select_building .label:hover {
		background-color: #6AD0B9;
		border-radius: 40px;
		color: #fff;
		line-height: 1.6;
	}

	/* 製品を選択 */
	.select_item {
		display: none;
	}

	.item_select {
		display: none;
		margin: 0 auto;
		width: 94%;
	}

	.item_select ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}

	.item_select li {
		padding: 40px 15px 20px;
		border: 1px solid #F0FAF8;
		border-radius: 20px;
		background-color: #F0FAF8;
		color: #444650;
		width: calc(50% - 30px / 2);
		text-align: center;
	}

	.item_select li:first-of-type,
	.item_select li:nth-of-type(2) {
		margin-bottom: 2rem;
	}

	.item_select li.min {
		width: calc(33.3333% - 40px  / 3);
	}

	.item_select dt {
		margin-bottom: 20px;
	}

	.item_select dt img {
		max-width: 100%;
	}


	.item_select dd {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		font-size: clamp(10px,2vw,12px);
		gap: 1%;
	}

	.mb10 {
		margin-bottom: 6px !important;
	}

	.item_select .label {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 4% 2%;
		border: 3px solid #6AD0B9;
		border-radius: 30px;
		background-color: #fff;
		color: #6AD0B9;
		line-height: 1.1;
		font-size: clamp(10px,2vw,12px);
		font-weight: bold;
		width: 49%;
		height: 45px;
		text-align: center;
		cursor: pointer;
	}

	.item_select .label.checked,
	.item_select .label:hover {
		background-color: #6AD0B9;
		border-radius: 30px;
		color: #fff;
	}

	.item_select li.min .label {
		width: 70%;
	}

	.w_slat {
		font-size: clamp(8px,2vw,10px);
		font-weight: normal;
	}

	/* カラーを選択 */
	.color_select {
		display: none;
		margin-bottom: 5rem;
	}

	.color_select .rank_a,
	.color_select .rank_b,
	.color_select .rank_c {
		margin-bottom: 3rem;
		position: relative;
		border-top: 1px solid #444650;
	}

	.color_select .lined {
		margin: 0 0 3.3rem 10px;
		position: relative;
		border-top: 1px solid #444650;
	}
	.color_select .rank span:first-of-type {
		position: absolute;
		top: 0;
		border-left: 1px solid #444650;
		border-right: 1px solid #444650;
		border-bottom: 1px solid #444650;
		font-size: 1.2rem;
	}
	.color_select .rank span > span {
		margin-top: -1px;
		padding: 0 4px;
		border-top: 1px solid #444650;
	}
	.color_select .rank_a span > span {
		background-color: #444650;
		color: #fff;
	}
	.color_select .rank_b span > span {
		background-color: #8F9096;
		color: #fff;
	}
	.color_select .rank_c span > span {
		background-color: #8F9096;
		color: #fff;
	}

	.color_select .lined span {
		padding: 0.2rem 1rem;
		position: absolute;
		top: -1px;
		left: -14px;
		border: 1px solid #444650;
		border-radius: 20px;
		background-color: #21348C;
		width: 7rem;
		color: #fff;
		font-size: clamp(12px,2vw,24px);
		text-align-last: justify;
		text-align: center;
	}

	.color_select .inner {
		margin: 0 auto;
		width: 86%;
	}

	.color_select .resize_waku {
		width: 80%;
	}

	.color_select dl {
		margin: 0 auto 2rem;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		justify-content: space-between;
		text-align: center;
	}

	.color_select dt {
		width: 120px;
		color: #6AD0B9;
		font-weight: bold;
		text-align: left;
	}

	.color_select dd {
		display: flex;
		align-items: stretch;
	}

	.color_select .label {
		display: inline-block;
		padding: 0.8em 0.2em;
		border: 3px solid #6AD0B9;
		border-radius: 20px;
		background-color: #fff;
		line-height: 1.1;
		color: #6AD0B9;
		width: 160px;
		font-weight: bold;
		font-size: clamp(10px,1vw,17px);
		z-index: 1;
		cursor: pointer;
	}

	.color_select .label:first-of-type {
		margin-bottom: 2rem;
	}

	.thermal_barrier {
		display: inline-block;
		margin-top: 8px;
		padding: 3px 4px;
		background-color: #6AD0B9;
		color: #fff;
		font-size: clamp(8px,1vw,13px);
	}

	.color_select .label:hover > .thermal_barrier,
	.color_select .label:focus-within > .thermal_barrier,
	.color_select .label.checked > .thermal_barrier {
		background-color: #fff;
		color: #6AD0B9;
	}

	.thermal_barrier:empty {
		display: none;
	}

	/* カラーを選択（共通パーツ） */
	.item_color {
		margin: 0 auto 15px;
		display: block;
		width: auto;
		height: auto;
		z-index: 2;
	}

	.item_color img {
		width: 50px;
		height: 50px;
		/*object-fit: cover;*/
	}

	.line {
		border: 1px solid #A5A2AA;
	}

	.color_name {
		font-size: clamp(8px,1vw,13px);
	}

	.underline {
		text-decoration: underline;
		text-underline-offset: 4px;
		text-decoration-thickness: 2px;
	}

	/* シミュレーションスタートボタン */
	.btn_start {
		margin: 3rem 0;
		font-weight: bold;
		font-size: clamp(16px,3vw,26px);
		text-align: center;
	}

	.btn_start button {
		margin: 1rem 0 4rem;
		border: 1px solid #6AD0B9;
		border-radius: 40px;
		background-color: #6AD0B9;
		color: #fff;
		width: calc(100% / 3);
		line-height: 1.4;
		font-family: 'Nunito Sans', sans-serif;
		font-size: clamp(20px,4vw,44px);
		letter-spacing: 0.2rem;
		cursor: pointer;
	}

	.btn_start button:disabled {
		background-color: #eee;
		border: 1px solid #eee;
		cursor: default;
	}

	/* シミュレーション結果 */
	.result {
		margin-bottom: 40px;
		position: relative;
		width: clamp(821px, 90%, 980px);
	}

	fieldset.result:last-of-type {
		margin-bottom: 0;
	}

	.result h2 {
		margin-bottom: 2rem;
	}

	.result > div {
		display: flex;
	}

	/* 右上の✕ボタン */
	.btn_close{
		position: absolute;
		top: 15px;
		right: 15px;
		display: inline-block;
		padding: 25px 0;
		background: none;
		border: none;
		cursor: pointer;
	}

	.btn_close::before,
	.btn_close::after {
		display: block;
		content: "";
		width: 50px;
		height: 1px;
		background: #6AD0B9;
	}

	.btn_close::before {
		transform: rotate(-45deg);
	}

	.btn_close::after {
		transform: rotate(45deg);
	}

	.form_change_conditions {
		margin-bottom: 1rem;
	}

	.form_change_conditions p {
		text-align: center;
	}

    .link_print{
        text-align: center;
    }

	.result .title {
		margin-bottom: 1.5rem;
		padding: 2px;
		width: 100%;
		position: relative;
		border: 1px solid #6AD0B9;
		border-radius: 15px;
		background-color: #6AD0B9;
		color: #fff;
		font-size: 0.9rem;
		text-align: center;
	}

	.result .title::after {
		content: "";
		display: block;
		position: absolute;
		top: 24px;
		left: 50%;
		width: 0;
		height: 0;
		transform: translateX(-50%);
		border: 10px solid transparent;
		border-top: 16px solid #6AD0B9;
		border-bottom-width: 0;
	}

	.result > div {
		margin: 0 auto;
		width: clamp(821px, 80%, 980px);
	}

	.result > div > div:first-of-type {
		margin-right: 40px;
		width: 230px;
	}

	.result > div > div:last-of-type {
		width: 570px;
	}

	.result > div > div:last-of-type table:last-of-type {
		margin-bottom: 0;
	}

	.require {
		margin-bottom: 1.5rem;
		font-size: 0.8rem;
		width: 100%;
	}

	.require th {
		padding-bottom: 5px;
		width: 25%;
		vertical-align: top;
		text-align-last: justify;
		font-size: .8rem;
		font-weight: normal;
	}

	.require td {
		padding: 0 0 5px 15px;
		width: 75%;
		font-weight: bold;
	}

	.sim_result {
		margin-bottom: 20px;
		padding: 0;
		overflow: hidden;
		background-color: transparent;
		border: 3px solid #6AD0B9;
		border-collapse: separate;
		border-spacing: 0;
		border-radius: 0 10px 10px 0;
		color: #444650;
		text-align: center;
	}

	.sim_result th,
	.sim_result td {
		font-weight: normal;
	}

	.sim_result tbody > tr:first-of-type th:first-child {
		border-right: 3px solid #6AD0B9;
		line-height: 1.2;
		width: 100px;
		font-size: 1.2rem;
		font-weight: bold;
	}

	.sim_result tbody > tr:first-of-type th:first-child p:first-child {
		margin-bottom: 10px;
	}

	.sim_result tbody > tr:first-of-type th:first-child p:first-child span {
		font-size: 0.9rem;
	}

	.sim_result tbody > tr:first-of-type th + th {
		padding: 3px;
		border-bottom: 1px solid #6AD0B9;
		line-height: 2;
		font-size: 0.9rem;
	}

	.sim_result tbody > tr:nth-of-type(2) th,
	.sim_result tbody > tr:nth-of-type(2) td {
		border-bottom: 1px solid #6AD0B9;
	}

	.sim_result tbody > tr:nth-of-type(2) td {
		padding: 3px;
		font-size: 1rem;
		width: 160px;
	}

	.sim_result tbody > tr:nth-of-type(2) th {
		width: 140px;
	}

	.sim_result tbody > tr:nth-of-type(2) th,
	.sim_result tbody > tr:nth-of-type(3) th {
		padding: 3px;
		font-size: 0.9rem;
	}

	.sim_result tbody > tr:nth-of-type(2) td:first-child {
		width: 150px;
	}

	.sim_result tbody > tr:nth-of-type(2) td:last-child {
		width: 170px;
	}

	.sim_result tbody tr th + td,
	.sim_result tbody tr td + td{
		padding: 3px;
		border-left: 1px solid #6AD0B9;
		font-size: 1rem;
	}

	.sim_result tbody > tr:last-of-type {
		background-color: #A6E3D5;
		border: 3px solid #6AD0B9;
	}

	.sim_result tbody > tr:last-of-type th,
	.sim_result tbody > tr:last-of-type td {
		padding: 10px;
		border-top: 3px solid #6AD0B9;
		font-weight: bold;
		font-size: 1rem;
	}

	.sim_result tbody > tr:last-of-type td {
		overflow: hidden;
		font-size: 1.1rem;
	}

	.sim_result tbody > tr:last-of-type th span,
	.sim_result tbody > tr:last-of-type td span {
		font-weight: normal;
		font-size: 0.9rem;
	}

	.result button {
		padding: 0.5rem;
		border: 3px solid #6AD0B9;
		border-radius: 30px;
		background-color: #fff;
		width: 230px;
		color: #6AD0B9;
		font-weight: bold;
		font-size: 1rem;
		cursor: pointer;
	}

	.result button:hover{
		background-color: #6AD0B9;
		color: #fff;
	}

	.result .label {
		display: inline-block;
		padding: 10px 60px;
		border: 3px solid #6AD0B9;
		border-radius: 30px;
		background-color: #fff;
		color: #6AD0B9;
		font-weight: bold;
		font-size: 1.3rem;
		width: 230px;
		text-align: center;
		cursor: pointer;
	}

	.label {
		font-weight: bold;
	}

	.radio_input,
	.button_input {
		display: none;
	}

	.label.checked,
	.label:hover {
		background-color: #6AD0B9;
		border-radius: 20px;
		color: #fff;
	}

	/* シミュレーションを追加 */
	.add {
		margin: 3% auto 10%;
		width: clamp(821px, 90%, 980px);
		text-align: center;
	}

	.form_add_simulation button{
		display: inline-block;
		position: relative;
		padding: 1% 5%;
		border: 3px solid #6AD0B9;
		border-radius: 30px;
		background-color: #fff;
		color: #6AD0B9;
		width: 100%;
		font-weight: bold;
		font-size: 1.3rem;
		cursor: pointer;
	}

	.form_add_simulation button::before{
		box-sizing: content-box;
		position: absolute;
		top: 5%;
		left: 30%;px;
		display: block;
		content: '＋';
		/*width: 50px;
		height: 100%;*/
		font-size: 1.8rem;
	}

	.form_add_simulation button:hover{
		background-color: #6AD0B9;
		color: #fff;
	}

	/* パーツ */
	.unit {
		font-size: 1rem;
	}

	.note {
		margin-bottom: 25px;
		padding: 0 5%;
		color: #6AD0B9;
		font-size: 0.9rem;
	}

	.v_line {
		display: none;
		margin-left: 50%;
		width: 3px;
		height: 60px;
		background-color: #6AD0B9;
	}

	.v_line.active {
		margin-left: 50%;
		width: 5px;
		height: 60px;
		background-color: #6AD0B9;
	}

	/* ページ内リンク */
	.side_link {
		position: fixed;
		color: #6AD0B9;
		right: 0;
		bottom: 100px;
	}

	.side_link div {
		position: absolute;
		bottom: 0;
		right: 5px;
	}

	.side_link p {
		margin: 0 0 5px 0;
		font-size: 0.6rem;
		text-align: center;
	}
	.side_link p span {

	}

	.side_link ul {
		margin-bottom: 30px;
		width: 60px;
		font-weight: bold;
	}

	.side_link li {
		writing-mode: vertical-lr;
		letter-spacing: 0.1em;
	}

	.side_link a {
		display: block;
		padding: 5px 20px;
		background-color: #fff;
		color: #6AD0B9;
		min-height: 100px;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
	}

	.side_link li:first-of-type a {
		border-top: 3px solid #6AD0B9;
		border-left: 3px solid #6AD0B9;
		border-bottom: 1px solid #6AD0B9;
		border-radius: 15px 0 0 0;
	}

	.side_link li:nth-of-type(2) a {
		border-left: 3px solid #6AD0B9;
		border-bottom: 1px solid #6AD0B9;
	}

	.side_link li:last-of-type a {
		border-bottom: 3px solid #6AD0B9;
		border-left: 3px solid #6AD0B9;
		border-radius: 0 0 0 15px;
	}

	.side_link a:hover {
		background-color: #6AD0B9;
		color: #fff;
	}
    
    .side_link a.selected{
        background-color: #6AD0B9;
		color: #fff;
    }

	@media not all and (min-resolution:.001dpcm) {
		@supports (not (translate: none)) {
			.select_building ul li {
				margin: 0 2%;
			}

			.item_select .label {
				margin: 0 2%;
				width: 46%;
			}

		}
	}
}

/* タブレット */
@media screen and (max-width:820px) {
	html {
		font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
	}

	body {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.6rem;
	}

	img {
		width: 100%;
	}

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

	#wrapper {
		display: flex;
		flex-direction: column;
	}

	#container {
		flex: 1;
	}

	#header {
		margin-bottom: 3%;
		padding: 1% 0 0;
		border-bottom: 1px solid #6AD0B9;
		width: 100%;
	}

	header {
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 94%;
	}

	header p {
		text-align: right;
	}

	header p img {
		width: 70%;
	}

	fieldset {
		margin: 0 auto 15%;
		padding: 0;
		border: none;
		width: 90%;
		text-align: center;
	}

	h1 {
		margin: 2% 0 3%;
	}

	h1 img {

	}

	h2 {
		margin-bottom: 5%;
		color: #444650;
		font-size: 2.3rem;
	}

	em {
		font-style: normal;
	}

	.hidden-tr {
		display: none;
	}

	/* トップページ -------------------------------------------------------------- */
	body#home #container {
		margin: 0 auto 14%;
		width: 90%;
		text-align: center;
	}

	body#home #container p img {
		margin: 6vh 0;
		width: 80%;
	}

	body#home #container ul {
		margin: 0 6% 13% 15%;
		color: #46BC9D;
		font-size: 1.4rem;
		font-weight: bold;
		text-align: left;
		text-indent: -0.8em;
	}

	body#home #container li {
		margin-bottom: 1%;
	}

	body#home #container li::before {
		position: relative;
		display: inline-block;
		content: '';
		top: 0;
		left: -3%;
		width: 1.1rem;
		height: 1.1rem;
		border-radius: 100%;
		background: #46BC9D;
	}

	body#home #container li br,
	.sim_result td br {
		display: none;
	}

	body#home #footer {
		background-color: #6AD0B9;
		color: #fff;
	}

	body#home footer {
		margin: 0 auto;
		padding: 4% 5% 30% 5%;
		width: 88%;
		font-size: 1.3rem;
	}

	body#home button {
		border: 1px solid #6AD0B9;
		border-radius: 40px;
		background-color: #6AD0B9;
		padding: 0 12%;
		color: #fff;
		line-height: 1.3;
		letter-spacing: 3px;
		font-family: 'Nunito Sans', sans-serif;
		font-size: 4rem;
		white-space: nowrap;
	}

	/* 建物を選択 -------------------------------------------------------------- */
	.select_building ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: baseline;
		gap: 6%;
		text-align: center;
	}

	.select_building li {
		flex-basis: 46%;
		margin-bottom: 10%;
	}

	.select_building li img {
		margin-bottom: 8%;
		width: 90%;
	}

	.select_building .label {
		display: flex;
		justify-content: center;
		align-items: center;
		border: 2px solid #6AD0B9;
		border-radius: 30px;
		padding: 5%;
		color: #6AD0B9;
		line-height: 1.3;
		font-size: 2.2rem;
		font-weight: bold;
		transition: all .2s;
	}

	.select_building .label.checked,
	.select_building .label:hover {
		background-color: #6AD0B9;
		border-radius: 30px;
		color: #fff;
	}

	/* 製品を選択 -------------------------------------------------------------- */
	.select_item {
		display: none;
	}

	.item_select {
		display: none;
	}

	.item_select ul {
		display: flex;
		flex-direction: column;
	}

	.item_select li {
		margin-bottom: 5%;
		padding: 9% 4% 7%;
		border: 1px solid #F0FAF8;
		border-radius: 20px;
		background-color: #F0FAF8;
		color: #444650;
		text-align: center;
	}

	.item_select li.min .label {
		width: 66%;
	}

	.item_select dt {
		margin-bottom:5%;
	}

	.item_select dt img {
		width: 60%;
	}

	.item_select dd {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 2%;
	}

	.mb10 {
		margin-bottom: 4% !important;
	}

	.item_select .label {
		position: relative;
		padding: 4%;
		border: 3px solid #6AD0B9;
		border-radius: 30px;
		background-color: #fff;
		color: #6AD0B9;
		line-height: 1.1;
		font-size: 1.8rem;
		font-weight: bold;
		width: 49%;
		text-align: center;
	}

	.item_select .label.checked,
	.item_select .label:hover {
		background-color: #6AD0B9;
		border-radius: 30px;
		color: #fff;
	}

	.item_select .label > span {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
	}

	.w_slat {
		font-size: 0.8em;
		font-weight: normal;
	}

	/* ラジオボタン(共通設定) */
	.label {
		font-weight: bold;
	}

	.radio_input {
		clip: rect(1px, 1px, 1px, 1px);
		position: absolute;
	}

	.label:focus-within {
		background-color: #6AD0B9;
		border-radius: 30px;
		color: #fff;
	}

	/* カラーを選択 -------------------------------------------------------------- */
	.color_select {
		display: none;
		margin-bottom: 5%;
	}

	.color_select .rank_a,
	.color_select .rank_b,
	.color_select .rank_c {
		margin-bottom: 5%;
		border-top: 1px solid #444650;
		line-height: 1.4;
		text-align: left;
	}

	.color_select .lined {
		position: relative;
		margin: 0 0 15% 4%;
		border-top: 1px solid #444650;
		text-align: left;
	}
	.color_select .rank > span {
		border-left: 1px solid #444650;
		border-right: 1px solid #444650;
		border-bottom: 1px solid #444650;
	}
	.color_select .rank span > span {
		padding: 0 1%;
		color: #fff;
	}
	.color_select .rank_a span > span {
		background-color: #444650;
		border-left: 1px solid #444650;
	}

	.color_select .rank_b span > span,
	.color_select .rank_c span > span {
		background-color: #8F9096;
		border-left: 1px solid #444650;
	}

	.color_select .lined span {
		margin: -1px 0 5% 7%;
		padding: 0 24px;
		position: absolute;
		top: 0;
		left: -11%;
		border: 1px solid #444650;
		border-radius: 20px;
		background-color: #21348C;
		color: #fff;
		text-align-last: justify;
		text-align: center;
		width: 35%;
	}

	.color_select .inner {
		margin: 0 auto;
	}

	.color_select dl {
		margin: 0 auto 3%;
		display: flex;
		flex-wrap: wrap;
		gap: 5%;
		text-align: center;
	}

	.color_select dt {
		display: block;
		margin-bottom: 2%;
		width: 100%;
		color: #6AD0B9;
		font-weight: bold;
		text-align: left;
	}

	.color_select dd {
		margin-bottom: 5%;
		width: 30%;
		display: flex;
		align-items: stretch;
	}

	.color_select .label {
		display: inline-block;
		padding: 10% 5%;
		border: 3px solid #6AD0B9;
		border-radius: 20px;
		background-color: #fff;
		overflow-wrap: break-word;
		line-height: 1.1;
		color: #6AD0B9;
		font-weight: bold;
		z-index: 1;
		width: 100%;
	}

	.thermal_barrier {
		display: inline-block;
		margin-top: 8px;
		padding: 3px 4px;
		background-color: #6AD0B9;
		color: #fff;
		font-size: 1.2rem;
	}

	.color_select .label:hover > .thermal_barrier,
	.color_select .label:focus-within > .thermal_barrier,
	.color_select .label.checked > .thermal_barrier {
		background-color: #fff;
		color: #6AD0B9;
	}

	.thermal_barrier:empty {
		display: none;
	}

	/* カラーを選択（共通パーツ） */
	.item_color {
		margin: 0 auto 5%;
		display: block;
		width: auto;
		height: auto;
		z-index: 2;
	}

	.item_color img {
		width: 11vw;
		height: 8vh;
		object-fit: cover;
	}

	.line {
		border: 1px solid #A5A2AA;
	}

	.color_name {
		font-size: 1.2rem;
	}

	.spec {
		display: inline-block;
		margin-top: 8px;
		padding: 3px 4px;
		background-color: #6AD0B9;
		color: #fff;
		font-size: 1.2rem;
	}

	.spec:hover,
	.spec:focus-within {
		background-color: #fff;
		color: #6AD0B9;
	}

	.underline {
		text-decoration: underline;
		text-underline-offset: 4px;
		text-decoration-thickness: 2px;
	}

	/* シミュレーションスタートボタン */
	.btn_start {
		margin: 10% 0;
		font-weight: bold;
		font-size: 2.8rem;
		text-align: center;
	}

	.btn_start button {
		margin: 10% 0 20%;
		border: 1px solid #6AD0B9;
		border-radius: 50px;
		background-color: #6AD0B9;
		color: #fff;
		width: 300px;
		line-height: 1.3;
		font-family: 'Nunito Sans', sans-serif;
		font-size: 4.8rem;
		letter-spacing: 3px;
		text-align: center;
	}

	.btn_start button:disabled {
		background-color: #eee;
		border: 1px solid #eee;
	}

	.label {
		font-weight: bold;
	}

	.radio_input,
	.button_input {
		display: none;
	}

	.label.checked,
	.label:hover {
		background-color: #6AD0B9;
		border-radius: 20px;
		color: #fff;
	}

	/* シミュレーション結果 */
	.result {
		margin-bottom: 15%;
		position: relative;
	}

	fieldset.result:last-of-type {
		margin-bottom: 0;
	}

	.result > div {
		display: flex;
		flex-direction: column-reverse;
	}

	.result .title {
		margin-bottom: 3%;
		padding: 1%;
		position: relative;
		border: 1px solid #6AD0B9;
		border-radius: 15px;
		background-color: #6AD0B9;
		width: 100%;
		color: #fff;
		font-size: 1.7rem;
		text-align: center;
	}

	.result .title::after {
		display: block;
		border: 12px solid transparent;
		border-top: 12px solid #6AD0B9;
		border-bottom-width: 0;
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		width: 0;
		height: 0;
		transform: translateX(-50%);
	}

	.result table.require {
		margin-bottom: 8%;
		border-collapse: collapse;;
		width: 100%;
	}

	.result table.require tr {
		border-bottom: 1px solid #999;
		font-weight: bold;
	}

	.result table.require th,
	.result table.require td {
		padding: 2%;
		font-size: 1.5rem;
	}

	.result table.require th {
		width: 20%;
		text-align-last: justify;
		font-weight: normal;
	}

	.result table.require td {
		padding-left: 7%;
		text-align: left;
	}

	.result table.require .image {
		margin-bottom: 10%;
	}

	.result table.require > p {
		margin-bottom: 20%;
		text-align: center;
	}

	.result table.require button {
		padding: 2% 10%;
		border: 1px solid #A5A2AA;
		border-radius: 20px;
		background-color: #fff;
		color: #6E6978;
		font-weight: bold;
		font-size: 1.3rem;
	}

	.result button {
		padding: 2%;
		border: 3px solid #6AD0B9;
		border-radius: 30px;
		background-color: #fff;
		width: 100%;
		color: #6AD0B9;
		font-weight: bold;
		font-size: 1.9rem;
	}

	.result button:hover {
		background-color: #6AD0B9;
		color: #fff;
	}

	.sim_result {
		margin-bottom: 5%;
		padding: 0;
		overflow: hidden;
		background-color: transparent;
		border: 3px solid #6AD0B9;
		border-collapse: separate;
		border-spacing: 0;
		border-radius: 0 10px 10px 0;
		color: #444650;
		width: 100%;
		text-align: center;
	}

	.sim_result th,
	.sim_result td {
		font-weight: normal;
	}

	.sim_result tbody > tr:first-of-type th:first-child {
		border-right: 3px solid #6AD0B9;
		line-height: 1.2;
		width: 20%;
		font-size: 1.9rem;
		font-weight: bold;
	}

	.sim_result tbody > tr:first-of-type th:nth-of-type(2) {
		width: 20%;
	}

	.sim_result tbody > tr:first-of-type th:nth-of-type(3) {
		width: 30%;
	}

	.sim_result tbody > tr:first-of-type th:last-of-type {
		width: 30%;
	}

	.sim_result tbody > tr:first-of-type th:first-child p:first-child {
		margin-bottom: 15%;
	}

	.sim_result tbody > tr:first-of-type th:first-child p:first-child span {
		font-size: 1.6rem;
	}

	.sim_result tbody > tr:first-of-type th + th {
		padding: 1%;
		border-bottom: 1px solid #6AD0B9;
		line-height: 2;
		font-size: 1.5rem;
	}

	.sim_result tbody > tr:nth-of-type(2) th,
	.sim_result tbody > tr:nth-of-type(2) td {
		border-bottom: 1px solid #6AD0B9;
	}

	.sim_result tbody > tr:nth-of-type(2) td {
		padding: 1%;
		font-size: 1.6rem;
	}

	.sim_result tbody > tr:nth-of-type(2) th,
	.sim_result tbody > tr:nth-of-type(3) th {
		padding: 1%;
		font-size: 1.5rem;
	}

	.sim_result tbody tr th + td,
	.sim_result tbody tr td + td {
		padding: 1%;
		border-left: 1px solid #6AD0B9;
	}

	.sim_result tbody > tr:last-of-type {
		background-color: #A6E3D5;
		border: 3px solid #6AD0B9;
	}

	.sim_result tbody > tr:last-of-type th,
	.sim_result tbody > tr:last-of-type td {
		border-top: 3px solid #6AD0B9;
		font-weight: bold;
		font-size: 1.4rem;
	}

	.sim_result tbody > tr:last-of-type td {
		line-height: 1.1;
		font-size: 1.7rem;
	}

	.sim_result tbody > tr:last-of-type th span,
	.sim_result tbody > tr:last-of-type td span {
		font-weight: normal;
		font-size: 1.2rem;
	}

	.note {
		margin-bottom: 8%;
		color: #6AD0B9;
		font-size: 1.6rem;
		text-align: left;
	}

	/* 右上の✕ボタン */
	.btn_close {
		position: absolute;
		top: -8px;
		right: 0;
		display: inline-block;
		padding: 4% 2%;
		background: none;
		border: 1px solid #6AD0B9;
	}

	.btn_close::before,
	.btn_close::after {
		display: block;
		content: "";
		width: 29px;
		height: 1px;
		background: #6AD0B9;
	}

	.btn_close::before {
		transform: rotate(-45deg);
	}

	.btn_close::after {
		transform: rotate(45deg);
	}

	/* シミュレーションを追加 */
	.add {
		margin: 10% auto 18%;
		width: 90%;
		text-align: center;
	}

	.form_add_simulation button {
		display: inline-block;
		position: relative;
		padding: 2%;
		border: 3px solid #6AD0B9;
		border-radius: 30px;
		background-color: #fff;
		color: #6AD0B9;
		width: 100%;
		font-weight: bold;
		font-size: 1.8rem;
	}

	.form_add_simulation button::before {
		box-sizing: content-box;
		position: absolute;
		top: 17%;
		left: 0;
		display: block;
		content: '＋';
		width: 50px;
		height: 100%;
		font-size: 2.5rem;
	}

	.form_add_simulation button:hover {
		background-color: #6AD0B9;
		color: #fff;
	}

	.form_change_conditions button {
		margin-bottom: 3%;
	}

	/* ページ内リンク */
	.side_link {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 99;
	}

	.side_link p {
		display: none;
	}

	.side_link ul {
		display: flex;
		width: 100%;
	}

	.side_link li {
		justify-content: center;
		align-items: center;
		width: 100%;
		text-align: center;
		font-weight: bold;
		font-size: 2rem;
	}

	.side_link a {
		display: block;
		padding: 5%;
		border-top: 1px solid #6AD0B9;
		background-color: #fff;
		color: #6AD0B9;
		text-decoration: none;
	}

	.side_link li:first-of-type a,
	.side_link li:nth-of-type(2) a {
		border-right: 1px solid #6AD0B9;
	}

	.side_link a:active {
		background-color: #6AD0B9;
		color: #fff;
	}

	/* iOS Safari 14.0.x以下 gap →marginに変更 -------------------- */
	@media not all and (min-resolution:.001dpcm) {
		@supports (not (translate: none)) {
			.select_building ul li {
				margin: 0 2%;
			}

			.item_select .label {
				margin: 0 2%;
				width: 46%;
			}

			.color_select dl {
				margin: 0 0 5% 2%;
				width: 100%;
			}

			.color_select dd {
				margin: 2% 2%;
				width: 28%;
			}

		}
	}

}

/* スマートフォン */
@media screen and (max-width:767px) {
	html {
		font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
	}

	body {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.6rem;
	}

	img {
		width: 100%;
	}

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

	#wrapper {
		display: flex;
		flex-direction: column;
	}

	#container {
		flex: 1;
	}

	#header {
		margin-bottom: 3%;
		padding: 1% 0 0;
		border-bottom: 1px solid #6AD0B9;
		width: 100%;
	}

	header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-self: center;
		width: 90%;
	}

	header p img {
		width: 90%;
	}

	fieldset {
		margin: 0 auto 15%;
		padding: 0;
		border: none;
		width: 90%;
		text-align: center;
	}

	h1 {
		margin-bottom: 3%;
	}

	h1 img {
		width: 74%;
	}

	h2 {
		margin-bottom: 10%;
		color: #444650;
	}

	em {
		font-style: normal;
	}

	.hidden-tr {
		display: none;
	}

	/* トップページ -------------------------------------------------------------- */
	body#home #container {
		margin: 0 auto 14%;
		width: 90%;
		text-align: center;
	}

	body#home #container p img {
		margin: 6vh 0;
		width: 85%;
	}

	body#home #container ul {
		margin: 0 6% 13% 14%;
		color: #46BC9D;
		font-size: 1.4rem;
		font-weight: bold;
		text-align: left;
		text-indent: -0.8em;
	}

	body#home #container li {
		margin-bottom: 4%;
	}

	body#home #container li::before {
		position: relative;
		display: inline-block;
		content: '';
		top: 0;
		left: -3%;
		width: 1.1rem;
		height: 1.1rem;
		border-radius: 100%;
		background: #46BC9D;
	}

	body#home #footer {
		background-color: #6AD0B9;
		color: #fff;
		display: flex;
		flex-direction: column;
		height: 30vh;
	}

	body#home footer {
		margin: 0 auto;
		padding: 4% 5% 15% 5%;
		width: 88%;
		font-size: 1.3rem;
	}

	body#home button {
		border: 1px solid #6AD0B9;
		border-radius: 40px;
		background-color: #6AD0B9;
		padding: 0 12%;
		color: #fff;
		line-height: 1.3;
		letter-spacing: 3px;
		font-family: 'Nunito Sans', sans-serif;
		font-size: 4rem;
		white-space: nowrap;
	}

	/* 建物を選択 -------------------------------------------------------------- */
	.select_building ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: baseline;
		gap: 6%;
		text-align: center;
	}

	.select_building li {
		flex-basis: 46%;
		margin-bottom: 10%;
	}

	.select_building li img {
		margin-bottom: 8%;
		width: 90%;
	}

	.select_building .label {
		display: flex;
		justify-content: center;
		align-items: center;
		border: 2px solid #6AD0B9;
		border-radius: 30px;
		color: #6AD0B9;
		line-height: 1.3;
		font-weight: bold;
		/*height: 6vh;*/
		transition: all .2s;
	}

	/* 製品を選択 -------------------------------------------------------------- */
	.select_item {
		display: none;
	}

	.item_select {
		display: none;
	}

	.item_select ul {
		display: flex;
		flex-direction: column;
	}

	.item_select li {
		margin-bottom: 5%;
		padding: 9% 4% 7%;
		border: 1px solid #F0FAF8;
		border-radius: 20px;
		background-color: #F0FAF8;
		color: #444650;
		text-align: center;
	}

	.item_select li.min .label {
		width: 66%;
	}

	.item_select dt {
		margin-bottom:5%;
	}

	.item_select dt img {
		width: 80%;
	}

	.item_select dd {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 2%;
	}

	.resize_image {
		width: 60% !important;
	}

	.mb10 {
		margin-bottom: 6px !important;
	}

	.item_select .label{
		position: relative;
		/*padding: 1%;*/
		border: 3px solid #6AD0B9;
		border-radius: 30px;
		background-color: #fff;
		color: #6AD0B9;
		line-height: 1.1;
		font-size: 1rem;
		font-weight: bold;
		width: 49%;
		height: 5vh;
		text-align: center;
	}

	.item_select .label > span {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
	}

	.w_slat {
		font-size: 0.8em;
		font-weight: normal;
	}

	/* ラジオボタン(共通設定) */
	.label {
		font-weight: bold;
	}

	.radio_input {
		clip: rect(1px, 1px, 1px, 1px);
		position: absolute;
	}

	.label:focus-within {
		background-color: #6AD0B9;
		border-radius: 30px;
		color: #fff;
	}

	/* カラーを選択 -------------------------------------------------------------- */
	.color_select {
		display: none;
		margin-bottom: 5%;
	}

	.color_select .rank_a,
	.color_select .rank_b,
	.color_select .rank_c {
		margin-bottom: 5%;
		border-top: 1px solid #444650;
		line-height: 1.4;
		text-align: left;
	}

	.color_select .lined {
		position: relative;
		margin: 0 0 15% 4%;
		border-top: 1px solid #444650;
		text-align: left;
	}
	.color_select .rank > span {
		border-left: 1px solid #444650;
		border-right: 1px solid #444650;
		border-bottom: 1px solid #444650;
	}
	.color_select .rank span > span {
		padding: 0 1%;
		color: #fff;
	}
	.color_select .rank_a span > span {
		background-color: #444650;
		border-left: 1px solid #444650;
	}

	.color_select .rank_b span > span,
	.color_select .rank_c span > span {
		background-color: #8F9096;
		border-left: 1px solid #444650;
	}

	.color_select .lined span {
		margin: -1px 0 5% 7%;
		padding: 0 24px;
		position: absolute;
		top: 0;
		left: -11%;
		border: 1px solid #444650;
		border-radius: 20px;
		background-color: #21348C;
		color: #fff;
		text-align-last: justify;
		text-align: center;
		width: 35%;
	}

	.color_select .inner {
		margin: 0 auto;
	}

	.color_select dl {
		margin: 0 auto 3%;
		display: flex;
		flex-wrap: wrap;
		gap: 5%;
		text-align: center;
	}

	.color_select dt {
		display: block;
		margin-bottom: 2%;
		width: 100%;
		color: #6AD0B9;
		font-weight: bold;
		text-align: left;
	}

	.color_select dd {
		margin-bottom: 5%;
		width: 30%;
		display: flex;
		align-items: stretch;
	}

	.color_select .label {
		display: inline-block;
		padding: 10% 5%;
		border: 3px solid #6AD0B9;
		border-radius: 20px;
		background-color: #fff;
		overflow-wrap: break-word;
		line-height: 1.1;
		color: #6AD0B9;
		font-weight: bold;
		z-index: 1;
		width: 100%;
	}

	.thermal_barrier {
		display: inline-block;
		margin-top: 8px;
		padding: 3px 4px;
		background-color: #6AD0B9;
		color: #fff;
		font-size: 1.2rem;
	}

	.color_select .label:hover > .thermal_barrier,
	.color_select .label:focus-within > .thermal_barrier,
	.color_select .label.checked > .thermal_barrier {
		background-color: #fff;
		color: #6AD0B9;
	}

	.thermal_barrier:empty {
		display: none;
	}

	/* カラーを選択（共通パーツ） */
	.item_color {
		margin: 0 auto 5%;
		display: block;
		width: auto;
		height: auto;
		z-index: 2;
	}

	.item_color img {
		width: 15vw;
		height: 8vh;
		object-fit: cover;
	}

	.line {
		border: 1px solid #A5A2AA;
	}

	.color_name {
		font-size: 1.2rem;
	}

	.spec {
		display: inline-block;
		margin-top: 8px;
		padding: 3px 4px;
		background-color: #6AD0B9;
		color: #fff;
		font-size: 1.2rem;
	}

	.spec:hover,
	.spec:focus-within {
		background-color: #fff;
		color: #6AD0B9;
	}

	.underline {
		text-decoration: underline;
		text-underline-offset: 4px;
		text-decoration-thickness: 2px;
	}

	/* シミュレーションスタートボタン */
	.btn_start {
		margin: 10% 0;
		font-weight: bold;
		font-size: 2.8rem;
		text-align: center;
	}

	.btn_start button {
		margin: 10% 0 20%;
		border: 1px solid #6AD0B9;
		border-radius: 50px;
		background-color: #6AD0B9;
		color: #fff;
		width: 300px;
		line-height: 1.3;
		font-family: 'Nunito Sans', sans-serif;
		font-size: 4.8rem;
		letter-spacing: 3px;
		text-align: center;
	}

	.btn_start button:disabled {
		background-color: #eee;
		border: 1px solid #eee;
	}

	.label {
		font-weight: bold;
	}

	.radio_input,
	.button_input {
		display: none;
	}

	.label.checked,
	.label:hover {
		background-color: #6AD0B9;
		border-radius: 20px;
		color: #fff;
	}

	/* シミュレーション結果 */
	.result {
		margin-bottom: 15%;
		position: relative;
	}

	fieldset.result:last-of-type {
		margin-bottom: 0;
	}

	.result > div {
		display: flex;
		flex-direction: column-reverse;
	}

	.result .title {
		margin-bottom: 5%;
		padding: 1%;
		position: relative;
		border: 1px solid #6AD0B9;
		border-radius: 15px;
		background-color: #6AD0B9;
		width: 100%;
		color: #fff;
		text-align: center;
	}

	.result .title::after {
		display: block;
		border: 12px solid transparent;
		border-top: 12px solid #6AD0B9;
		border-bottom-width: 0;
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		width: 0;
		height: 0;
		transform: translateX(-50%);
	}

	.result table.require {
		margin-bottom: 8%;
		border-collapse: collapse;;
		width: 100%;
	}

	.result table.require tr {
		border-bottom: 1px solid #999;
		font-weight: bold;
		font-size: 1.3rem;
	}

	.result table.require th,
	.result table.require td {
		padding: 2%;
	}

	.result table.require th {
		width: 20%;
		text-align-last: justify;
		font-weight: normal;
	}

	.result table.require td {
		padding-left: 7%;
		text-align: left;
	}

	.result table.require .image {
		margin-bottom: 10%;
	}

	.result table.require > p {
		margin-bottom: 20%;
		text-align: center;
	}

	.result table.require button {
		padding: 2% 10%;
		border: 1px solid #A5A2AA;
		border-radius: 20px;
		background-color: #fff;
		color: #6E6978;
		font-weight: bold;
		font-size: 1.3rem;
	}

	.result button {
		padding: 3%;
		border: 3px solid #6AD0B9;
		border-radius: 30px;
		background-color: #fff;
		width: 100%;
		color: #6AD0B9;
		font-weight: bold;
		font-size: 1.3rem;
	}

	.result button:hover {
		background-color: #6AD0B9;
		color: #fff;
	}

	.sim_result {
		margin-bottom: 5%;
		padding: 0;
		overflow: hidden;
		background-color: transparent;
		border: 3px solid #6AD0B9;
		border-collapse: separate;
		border-spacing: 0;
		border-radius: 0 10px 10px 0;
		color: #444650;
		width: 100%;
		text-align: center;
	}

	.sim_result th,
	.sim_result td {
		font-weight: normal;
	}

	.sim_result tbody > tr:first-of-type th:first-child {
		border-right: 3px solid #6AD0B9;
		line-height: 1.2;
		width: 20%;
		font-size: 1.9rem;
		font-weight: bold;
	}

	.sim_result tbody > tr:first-of-type th:nth-of-type(2) {
		width: 20%;
	}

	.sim_result tbody > tr:first-of-type th:nth-of-type(3) {
		width: 30%;
	}

	.sim_result tbody > tr:first-of-type th:last-of-type {
		width: 30%;
	}

	.sim_result tbody > tr:first-of-type th:first-child p:first-child {
		margin-bottom: 15%;
	}

	.sim_result tbody > tr:first-of-type th:first-child p:first-child span {
		font-size: 1.3rem;
	}

	.sim_result tbody > tr:first-of-type th + th {
		padding: 1%;
		border-bottom: 1px solid #6AD0B9;
		line-height: 2;
		font-size: 1.3rem;
	}

	.sim_result tbody > tr:nth-of-type(2) th,
	.sim_result tbody > tr:nth-of-type(2) td {
		border-bottom: 1px solid #6AD0B9;
	}

	.sim_result tbody > tr:nth-of-type(2) td {
		padding: 1%;
		font-size: 1.6rem;
	}

	.sim_result tbody > tr:nth-of-type(2) th,
	.sim_result tbody > tr:nth-of-type(3) th {
		padding: 1%;
		font-size: 1.2rem;
	}

	.sim_result tbody tr th + td,
	.sim_result tbody tr td + td {
		padding: 1%;
		border-left: 1px solid #6AD0B9;
	}

	.sim_result tbody > tr:last-of-type {
		background-color: #A6E3D5;
		border: 3px solid #6AD0B9;
	}

	.sim_result tbody > tr:last-of-type th,
	.sim_result tbody > tr:last-of-type td {
		border-top: 3px solid #6AD0B9;
		font-weight: bold;
		font-size: 1.4rem;
	}

	.sim_result tbody > tr:last-of-type td {
		line-height: 1.1;
		font-size: 1.7rem;
	}

	.sim_result tbody > tr:last-of-type th span,
	.sim_result tbody > tr:last-of-type td span {
		font-weight: normal;
		font-size: 1.2rem;
	}

	.note {
		margin-bottom: 8%;
		color: #6AD0B9;
		font-size: 1.3rem;
		text-align: left;
	}

	/* 右上の✕ボタン */
	.btn_close {
		position: absolute;
		top: 4px;
		right: 0;
		display: inline-block;
		padding: 4% 0;
		background: none;
		border: 1px solid #6AD0B9;
	}

	.btn_close::before,
	.btn_close::after {
		display: block;
		content: "";
		width: 29px;
		height: 1px;
		background: #6AD0B9;
	}

	.btn_close::before {
		transform: rotate(-45deg);
	}

	.btn_close::after {
		transform: rotate(45deg);
	}

	/* シミュレーションを追加 */
	.add {
		margin: 15% auto 18%;
		width: 90%;
		text-align: center;
	}

	.form_add_simulation button {
		display: inline-block;
		position: relative;
		padding: 5%;
		border: 3px solid #6AD0B9;
		border-radius: 30px;
		background-color: #fff;
		color: #6AD0B9;
		width: 100%;
		font-weight: bold;
		font-size: 1.3rem;
	}

	.form_add_simulation button::before {
		box-sizing: content-box;
		position: absolute;
		top: 20%;
		left: 0;
		display: block;
		content: '＋';
		width: 50px;
		height: 100%;
		font-size: 2.2rem;
	}

	.form_add_simulation button:hover {
		background-color: #6AD0B9;
		color: #fff;
	}

	.form_change_conditions button {
		margin-bottom: 5%;
	}

	/* ページ内リンク */
	.side_link {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 99;
	}

	.side_link p {
		display: none;
	}

	.side_link ul {
		display: flex;
		width: 100%;
	}

	.side_link li {
		justify-content: center;
		align-items: center;
		width: 100%;
		text-align: center;
		font-weight: bold;
		font-size: 1.5rem;
	}

	.side_link a {
		display: block;
		padding: 5%;
		border-top: 1px solid #6AD0B9;
		background-color: #fff;
		color: #6AD0B9;
		text-decoration: none;
	}

	.side_link li:first-of-type a,
	.side_link li:nth-of-type(2) a {
		border-right: 1px solid #6AD0B9;
	}

	.side_link a:active {
		background-color: #6AD0B9;
		color: #fff;
	}

	/* iOS Safari 14.0.x以下 gap →marginに変更 -------------------- */
	@media not all and (min-resolution:.001dpcm) {
		@supports (not (translate: none)) {
			.select_building ul li {
				margin: 0 2%;
			}

			.item_select .label {
				margin: 0 2%;
				width: 46%;
			}

			.color_select dl {
				margin: 0 0 5% 2%;
				width: 100%;
			}

			.color_select dd {
				margin: 2% 2%;
				width: 28%;
			}

			}
	}
}