@charset "UTF-8";

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%
}
*, :after, :before {
	box-sizing: border-box
}
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #333;
	background-color: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: url("images/bg.webp") no-repeat center center;
	background-size: contain;
}
h1, h2, h3, h4, h5, h6 {
	margin-block-start: .5rem;
	margin-block-end: 1rem;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.2;
	color: inherit
}
h1 {
	font-size: 2.5rem
}
h2 {
	font-size: 2rem
}
h3 {
	font-size: 1.75rem
}
h4 {
	font-size: 1.5rem
}
h5 {
	font-size: 1.25rem
}
h6 {
	font-size: 1rem
}
p {
	margin-block-start: 0;
	margin-block-end: .9rem
}
strong {
	font-weight: bold;
}
.sp {
	display: none;
}

.shuten {
	width: 120%;
	margin-top: 33px;
	margin-left: -45px;
}

@media screen and (max-width:600px) {
	.sp {
	display: block;
}
}


/*CSS*/
:root {
	--primary-color: #1C9C2C;
	--secodary-color: #93d685;
	--orange: #f18d1e;
	--cian: #6abcef;
	--gray:#808080;
	--light-gray:#efefef;
}

.mb15{
	margin-bottom: 15px !important;
}
.mb30{
	margin-bottom: 30px !important;
}
.mb50{
	margin-bottom: 50px !important;
}
.flex{
	display: flex;
}
.flex-btw{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.flex-wrap{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.flex-st{
	display: flex;
	justify-content:flex-start;
}
.flex-end {
	display: flex;
	justify-content:flex-end
}
.flex-btw-end {
	display: flex;
	justify-content: space-between;
	align-items:flex-end
}

.ai-end {
	align-items: end !important;
}
.ai-center {
	align-items:center !important;
}
.ta-right{
	text-align: right;
}
.red {
	color:red;
}

ul.circle {list-style-type: circle;}
ul.circle li{margin-bottom: 10px;}

ul.disc, ul.disc2 {padding-left:20px; list-style-type: disc;}
ul.none {list-style-type: none; padding-left:0px;}

ul.disc li,
ul.none li{margin-bottom: 10px;}
ul.disc2 li{margin-bottom: 0;}

main {
	width:100%;
}
/*.simulation-main{
	padding-top: 200px;
}*/
h2.simulation {
	display: inline-block;
	width:100%;
	background:  var(--primary-color);
	color:#fff;
	font-weight: bold;
	text-align: center;
	padding: 15px 1% 0;
}
h2.simulation p{
	font-size: 1rem;
	margin-top: 10px;;
}

.cont-simulation {
	max-width: 1132px;
	width:100%;
	padding: 0 30px;
	margin: 20px auto 50px;
}

.use span{
	color:var(--primary-color);
	font-size: 1.25rem;
	font-weight: bold;
	padding-left: 15px;
}

.u-text01 span{
	display: inline-block;
	width: 120px;
}

h3.heading{
  display: inline-block;
  width:100%;
  padding: 1em;
  color: #000;
  font-weight: bold;
  text-align: center;
  padding: 10px 0 8px;
  background: var(--secodary-color);
box-shadow: 5px 5px 0px 0px var(--primary-color);
}

.btn-dl,
.btn-save{
  position: relative;
  display: block;
  padding: 0.5em 2em 0.5em 1em;
  width: 190px;
  text-decoration: none;
  background: var(--orange);
  color: #FFF;
  font-weight: bold;
  border-bottom: solid 4px var(--gray);
  border-radius: 6px;
	margin-bottom: 10px;
	/* z-index: -1; */
}
.btn-dl:active,
.btn-save:active{
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
  border-bottom: none;
}

.btn-dl:after{
	position: absolute;
	content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("images/dl.svg") no-repeat;
  background-size: contain;
  top:50%;
  transform:translateY(-50%);
  right:20px;
}
.btn-save:after{
	position: absolute;
	content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("images/save.svg") no-repeat;
  background-size: contain;
  top:50%;
  transform:translateY(-50%);
  right:20px;
}

.btn-do{
  position: relative;
  display: block;
  padding: 0.4em 4em 0.4em 4em;
  width: 190px;
  text-align: center;
  text-decoration: none;
  background:#FFF;
  color: var(--orange);
  font-weight: bold;
  border: solid 2px var(--orange);
　-webkit-box-shadow: 0px 4px 0 var(--gray);
  box-shadow: 0px 4px 0 var(--gray);
  border-radius: 6px;
}
.btn-do:active{
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
  border-bottom: solid 2px var(--orange);
}

.btn-dl{margin-right: 0;
	margin-left: auto;
}

.btn-save,
.btn-do{
	margin-right:auto;
	margin-left: auto;
}

h4.num-title{
	font-size: 1.75rem;
	border-bottom: 2px solid var(--primary-color);
	margin-bottom: 10px;
	font-weight: bold;
}
h4.num-title span{
	color: var(--primary-color);
	font-weight: normal;
}
h4.num-title .small{
	display: inline-block;
	color:#000;
	font-size: 1.25rem;
	font-weight: normal;
	margin-bottom: 0;
}
h4.num-title p{
	display: inline-block;
	font-size: 1rem;
	font-weight: normal;
	margin-bottom: 0;
}

.radio {
	display: flex;
	padding-left: 35px;
	margin-bottom: 10px;
}
label {
  align-items: center; /* 上下中央 */
  cursor: pointer;
  display: flex; /* 横並び */
  margin-right: 30px; /* ラベル間の間隔 */
}
input[type="radio"]::before {
  background-color:var(--primary-color);
  border-radius: 50%;
  bottom: 0;
  content: "";
  height: 8px;
  left: 0;
  margin: auto;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
}
/* チェックされたらラジオボタン内側を表示 */
input[type="radio"]:checked::before {
  opacity: 1;
}
/* デフォルトのラジオボタンのスタイル */
input[type="radio"] {
  appearance: none; /* デフォルトのスタイルを消す */
  border: 1px solid #999; /* 枠線 */
  border-radius: 50%; /* 枠線を円にする */
  height: 16px; /* ボタンの高さ */
  left: -.5em; /* ラジオボタンとラベルの余白 */
  margin: 0; /* デフォルトのmarginを消す */
  position: relative;
  width: 16px; /* ボタンの幅 */
  z-index: -1;
}

.selectbox{
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  /* スタイル */
  display: inline-block;
  align-items: center;
  position: relative;
  min-width: 120px;
  margin: 1em 0 1em 28px; /* 前後の余白 */
  padding: 0.6em 3em 0.6em 0.5em; /* 文字周りの余白 */
  cursor: pointer !important; /* カーソルを指に */
  line-height: 1.4; /* 行高 */
  font-size: 0.95em; /* フォントサイズ */
  font-weight: 700; /* 太字に */
  color: #333; /* 文字色 */
  border-radius: 4px; /* 角丸 */
  background-color: #fff; /* 背景色 */
  border: 2px solid #808080;
  box-shadow: 0 3px 3px -2px rgba(3, 29, 41, 0.15); /* 影 */
  /* 三角マークを作る */
  background-image: linear-gradient(45deg, transparent 50%, var(--primary-color) 50%),  linear-gradient(135deg, var(--primary-color) 50%, transparent 50%);
  background-size: 10px 10px, 10px 10px;
  background-position: calc(100% - 20px) 50%, calc(100% - 10px) 50%;
  background-repeat: no-repeat;
}
/* フォーカス時 */
.selectbox:focus {
  outline: 0;
  border-color: #999; /* 枠線の色を変更 */
}
/* IEでデフォルトの矢印を消す */
.selectbox::-ms-expand {
  display: none;
}

.window-number {
	width: 100px;
	margin-right: 0;
}
input[type="number"]{
	width: 30px;
	margin: 0 5px;
	border-top:none;
	border-right:none;
	border-left:none;
	border-bottom: 2px solid #000;
	text-align: right;
}
/*数値入力の矢印を消す*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance:textfield;
}

.window-left{
	width: 45%;
	margin-left: 28px;
	margin-right: 2%;
}
.window-right{
	width: 53%;
}

.border-text{
	display: inline-block;
	padding: 5px 10px;
	border: 2px solid var(--primary-color);
}


.u-text {
	background: var(--light-gray);
	padding: 15px 20px;
	margin-left: 28px;
	margin-bottom: 30px;
}
.u-text01 {
	background: var(--light-gray);
	padding: 15px 20px;
	margin-left: 28px;
	margin-bottom: 30px;
}
.u-text img {
	margin-right: 20px;
	width: auto;
	height: auto;
}

.u-text-ml0 {
	background: var(--light-gray);
	padding: 15px 20px;
	margin-bottom: 5px;	/*30px;*/
	text-align: left;
}
.radio-pl7 {
	display: flex;
	padding-left: 7px;
	margin-bottom: 10px;
}

.img-all {
	display: block;
	max-width: 1072px;
	width: 100%;
	height: auto;
	margin-bottom: 70px;
	text-align: center;
}
.img-all img {
	width: 80%;
}


/*７番目の入力欄*/
.ipad810 {
		display:none;
	}
.uvalue-pc {
		display: block;
	}
.uvalue {
	max-width: 1132px;
	width:100%;
	margin-bottom: 50px;
	display: flex;
	justify-content:flex-start;
	align-items: flex-start;
}
.uvalue img {
	max-width: 500px;
	width:100%;
	height: 100%;
	margin-top: 10px;
}

table.uvalue-table{
	width: 560px;
	margin-top: 25px;
}

table.uvalue-table,
table.uvalue-table th,
table.uvalue-table td{
	border:none;
	background: none;
	padding: 0;
}
table.uvalue-table th{
	padding-right: 10px;
}
table.uvalue-table td.left {
	border:1px solid #000;
}
table.uvalue-table td.right {
	border:1px solid #000;
	border-left:none;
}
table.uvalue-table td.upper {
	border-bottom:none;
}
table.uvalue-table th.empty,
table.uvalue-table td.empty{
	line-height: 15px;
	padding: 0;
}
table.uvalue-table td input{
	text-align: right;
	border:1px solid #ddd;
	padding-right: 10px;
	line-height: 24px;
}

@media screen and (max-width:1024px) {
	.uvalue img {
	max-width: 410px;
	width:100%;
	height: 100%;
	margin-top: 30px;
}
	table.uvalue-table{
	width: 520px;
}
.shuten {
	width: 100%;
	margin-left: initial;
}
}

@media screen and (max-width:834px) {
	.uvalue img {
	max-width: 340px;
	width:100%;
	height: 100%;
	margin-top: 40px;
}
	table.uvalue-table{
	max-width: 500px;
	width: 100%;
}
	table.uvalue-table th,
table.uvalue-table td{
	padding:2;
	line-height: 20px;
}
}

@media screen and (max-width:810px) {
	.ipad810 {
		display: block;
	}
	.uvalue-pc {
		display: none;
	}
	.uvalue{
		flex-flow: wrap;
	}
	.uvalue img {
	max-width:60%;
	height: auto;
	margin: 0 auto 40px;
}
	table.uvalue-table{
	width:100%;
	margin: 0 auto;
}
	table.uvalue-table th,
table.uvalue-table td{
	padding:5;
	line-height: 20px;
}
}
@media screen and (max-width:768px) {
	.scroll_center{
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (max-width:600px) {
	.uvalue img {
	max-width:90%;
}
	table.uvalue-table{
	width:100%;
	margin: 0 auto 10px;
}
	table.uvalue-table th,
table.uvalue-table td{
	padding:5;
}
}






.setsubi-left{
	width: 48%;
	margin-left: 28px;
}
.setsubi-right{
	width: 48%;
}

.glass_falf{
	display: flex;
	flex-wrap: wrap;
	width: 48%;
}
.glass_ttl {
	width: 100%;
}


@media screen and (max-width:820px) {
.flex-btw{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
	.pad-mb{
		margin-bottom: 20px;
	}
	h3.heading {
	 font-size: 1.25rem;
	}
	h4.num-title{
	font-size: 1.25rem;
}
	.window-left{
	width: 100%;
	margin-left: 28px;
	margin-right: 0;
}
.window-right{
	width: 100%;
	padding-left: 28px;
}
}

@media screen and (max-width:600px) {
.simulation-main{
	padding-top: 250px;
}
	.u-text img {
		width: 100%;
		height: auto;
		margin-right: 0;
	}
	.setsubi-left,
	.setsubi-right{
	width: 100%;
	margin-left: 28px;
}
	.sp-flexwrap{
		flex-wrap: wrap;
	}
	.img-all img {
	width: 100%;
}
.glass_falf{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
}


/*結果
----------------------------------------------------*/
h2.result {
	display: inline-block;
	width:100%;
	background:  var(--primary-color);
	color:#fff;
	font-weight: bold;
	text-align: center;
	padding: 15px 1%;
	margin: 0 0 20px 0;
}

.main-result{
	display: flex;
}
h2.result-m {
	position: relative;
	display: inline-block;
	background:  var(--primary-color);
	color:#fff;
	font-weight: bold;
	text-align: center;
	padding: 10px 20px;
	margin: 0 0 15px 0;
}
h2.result-m:after {
	position: absolute;
	display: none;
	content: attr(data-name); /*"等級5";*/
	background: #fff;
	border: 2px solid var(--primary-color);
	color: var(--primary-color);
	font-weight: bold;
	text-align: center;
	padding: 8px 20px;
  top: 0;
  right: -128px;
}
h2.result-m-orange {
	position: relative;
	display: inline-block;
	background:  var(--orange);
	color:#fff;
	font-weight: bold;
	text-align: center;
	padding: 10px 20px;
	margin: 0 0 15px 0;
}
h2.result-m-orange:after {
	position: absolute;
	display: none;
	content: attr(data-name); /*"等級5";*/
	background: #fff;
	border: 2px solid var(--orange);
	color: var(--orange);
	font-weight: bold;
	text-align: center;
	padding: 8px 20px;
  top: 0;
  right: -128px;
}
h2.result-m-pink {
	position: relative;
	display: inline-block;
	background:  #d86ecc;
	color:#fff;
	font-weight: bold;
	text-align: center;
	padding: 10px 20px;
	margin: 0 0 15px 0;
}
h2.result-m-pink:after {
	position: absolute;
	display: none;
	content: attr(data-name); /*"等級5";*/
	background: #fff;
	border: 2px solid #d86ecc;
	color: #d86ecc;
	font-weight: bold;
	text-align: center;
	padding: 8px 20px;
  top: 0;
  right: -128px;
}

h2.tokyu {
	display: inline-block;
	background: #fff;
	border: 2px solid var(--primary-color);
	color: var(--primary-color);
	font-weight: bold;
	text-align: center;
	padding: 10px 1%;
	margin: 0 0 40px 0;
}
.t-mtml {
	margin: 30px 0 0 12%;
}

h3.heading-w{
  display: inline-block;
  width:100%;
  padding: 1em;
  font-weight: bold;
  text-align: center;
  padding: 10px 0 8px;
  background: #fff;
	border:2px solid var(--primary-color);
box-shadow: 5px 5px 0px 0px var(--primary-color);
}
h3.heading-w .orange{
	color:#f18d1e;
	margin-bottom: 0;
}
h3.heading-w .cian{
	color: #6abcef;
	margin-bottom: 0;
}

h3.orange-ttl{
	width:100%;
	padding: 10px;
	text-align: center;
	background: var(--orange);
	color:#fff;
	font-weight: bold;
}
h3.cian-ttl{
	width:100%;
	padding: 10px;
	text-align: center;
	background: var(--cian);
	color:#fff;
	font-weight: bold;
}
h3.pink-ttl{
	width:100%;
	padding: 10px;
	text-align: center;
	background: #d86ecc;
	color:#fff;
	font-weight: bold;
}

.result-half{
	width: 48%;
	text-align: center;
}

.result-half img{
	width: 100%;
	margin: 0 auto;
}

table th {
	background: var(--secodary-color);
}
table th,table td {
	border-top:1px #999 solid;
	border-left:1px #999 solid;
	text-align: center;
}

table{
	border-bottom:1px #999 solid;
	border-right:1px #999 solid;
	margin-bottom: 20px;
}

.result-bunpu{
	width: 48%;
	text-align: center;
}

.result-bunpu img{
	width: 100%;
	margin: 0 auto;
	vertical-align: bottom;
}
.result-bunpu p{
	margin-top: 10px;
}

table.price {
	width: 100%;
	margin: 0 auto 30px;
}
table.price2 {
	max-width: 100%;
	width:420px;
	margin: 0 20px 0 0;
}
table.price3 {
	max-width: 100%;
	width:480px;
	margin: 0;
}
table.price th,
table.price2 th,
table.price3 th{
	background:rgb(238, 238, 238, .7);
}
table.price .type,
table.price2 .type,
table.price33 .type{
	background:rgb(245, 245, 245, .7);
}
table.price .t-left,
table.price2 .t-left,
table.price3 .t-left{
	text-align: left;
	background:rgb(255, 255, 255, .7);

}
table.price .t-right{
	text-align: right;
	padding-right: 0;
	background:rgb(255, 255, 255, .7);
}
table.price2 .t-right,
table.price3 .t-right{
	text-align: right;
	padding-right: 10px;
	background:rgb(255, 255, 255, .7);
}
table.price .note,
table.price2 .note,
table.price3 .note{
	width: 190px;
	border-left: none;
	padding-left: 0;
}
table.price th .small,
table.price td .small,
table.price2 th .small,
table.price2 td .small,
table.price3 th .small,
table.price3 td .small{
	font-weight:normal;
	font-size:1rem;
}

@media screen and (max-width:1132px) {
table.price {
    width: 100%;
    margin: 0 auto 10px;
}
}

@media screen and (max-width:834px) {
table.price2 {
	max-width: 100%;
	width:360px;
}
table.price3 {
	max-width: 100%;
	width:390px;
}
}
@media screen and (max-width:820px) {
table.price2 {
	margin:0 0 20px 0 !important;
}
table.price3 {
	width: 100% !important;
}
}
@media screen and (max-width:500px) {
table.price3 {
	white-space:wrap;
	}
}

.result-glass,
.result-door {
	position: relative;
	border: 2px solid var(--primary-color);
}

@media screen and (max-width:834px) {
.result-glass,
.result-door {
	font-size: .75rem;
}
}
@media screen and (max-width:768px) {
.result-glass,
.result-door {
	font-size: .65rem;
}
}
@media screen and (max-width:375px) {
.result-glass,
.result-door {
	font-size: .6rem;
}
}


.result-glass {
	border-bottom: none;
}

.result-glass .result-info,
.result-door .result-info{
	position: absolute;
	display: flex;
	justify-content: flex-start;
	top:0;
	left:0;
}
.result-glass .result-info .glass-type,
.result-door .result-info .door-type{
	border-right:2px solid var(--primary-color);
	border-bottom:2px solid var(--primary-color);
	background: #fff;
	padding: 10px 10px;
	display: inline-block;
}
.result-glass .result-info .summer-out,
.result-door .result-info .summer-out{
	color: white;
	border-right:2px solid var(--primary-color);
	border-bottom:2px solid var(--primary-color);
	background-color: #E97132;
	padding: 10px 10px;
	display: inline-block;
}
.result-glass .result-info .summer-in,
.result-door .result-info .summer-in{
	border-right:2px solid var(--primary-color);
	border-bottom:2px solid var(--primary-color);
	background-color: #FBE2D5;
	padding: 10px 10px;
	display: inline-block;
}
.result-glass .result-info .winter-out,
.result-door .result-info .winter-out{
	color: white;
	border-right:2px solid var(--primary-color);
	border-bottom:2px solid var(--primary-color);
	background-color: #1880C0;
	padding: 10px 10px;
	display: inline-block;
}
.result-glass .result-info .winter-in,
.result-door .result-info .winter-in{
	border-right:2px solid var(--primary-color);
	border-bottom:2px solid var(--primary-color);
	background-color: #FFFF98;
	padding: 10px 10px;
	display: inline-block;
}



.season {
	width: 100%;
	border-bottom: none;
	padding: 10px;
	text-align: center;
}

/* 1/3 2/3 flex*/
.item1{
	flex: 1;
}
.item2{
	flex: 2;
	margin: 0 10px 0 0;
}

@media screen and (max-width:600px) {
	.item1{
	flex: auto;
}
.item2{
	flex: auto;
    margin: 0 0 20px;
	}}


/*表背景　追加分 20250304*/
.seino-a,.seino-b {
	position: relative;
	margin: 0 auto 50px;
	overflow-x: auto;
	max-width: 1132px;
	width:100%;
	display: flex;
	gap: 1px;
	background: #ccc;
}
.seino-a{
	background: url("images/2-7.webp?20250829")no-repeat left top;
	background-size: cover;
	height: 456px;
	margin: 0 auto 10px;
}
.seino-b{
	background: url("images/3-6.webp?20250829")no-repeat left top;
	background-size: cover;
	height: 320px;
}

.seino-a .before1{
	background: #b4e5a2;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
	width: 50px;
  bottom: 57px;
  /*left: 405px;*/
	left:38%;
}

.UAGraph{
	margin-top: 10px;
	margin-left: 381px;
	width: 211px;
	height: 390px;
}

.ETA_ACGraph{
	margin-top: 11px;
	margin-left: 253px;
	width: 225px;
	height: 430px;
}

.BEIGraph{
	margin-top: 33px;
	margin-left: 305px;
}

.seino-a .after1{
	background: #33cc33;
	position: absolute;
	display: flex;
	align-items: center;
  justify-content: center;
	width: 50px;
  bottom: 57px;
  /*left: 520px;*/
	left:48.5%;
}
.seino-a .before2{
	background: #b4e5a2;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
	width: 50px;
  bottom: 57px;
  /*left: 875px;*/
	left:82%;
}
.seino-a .after2{
	background: #33cc33;
	position: absolute;
	display: flex;
	align-items: center;
  justify-content: center;
	width: 50px;
  bottom: 57px;
  /*left: 990px;*/
	left:92.5%;
}
.seino-b .before{
	background: #b4e5a2;
    position: absolute;
	display: flex;
	align-items: center;
  justify-content: center;
  width: 50px;
	bottom: 53px;
  /*left: 327px;*/
	left:30.75%;
}

.seino-b .after{
	background: #33cc33;
	position: absolute;
	display: flex;
	align-items: center;
  justify-content: center;
  width: 50px;
	bottom: 53px;
  /*left: 418px;*/
	left:39%;
}

.seino-a .before1,
.seino-a .before2,
.seino-a .after1,
.seino-a .after2,
.seino-b .before,
.seino-b .after {
font-size: 2rem;
  font-weight: bold;
}

/*目安高熱*/
.meyasu-konetsu {
position: relative;
	margin: 0 auto 50px;
	overflow-x: auto;
	max-width: 1132px;
	width:100%;
	display: flex;
	gap: 1px;
	background: #ccc;
	background: url("images/effect.webp")no-repeat left top;
	background-size: cover;
	height: 740px;
	margin: 0 auto 10px;
}


@media screen and (max-width:1132px) {
.scroll__wrapper {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
	margin-bottom: 20px;
}
.scroll__wrapper::-webkit-scrollbar {
    height: 15px;
}
.scroll__wrapper::-webkit-scrollbar-track {
  background: #ddd !important;
}
.scroll__wrapper::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 20px !important;
}
.scroll__wrapper::-webkit-scrollbar-button {
    display: none;
}
.scroll__wrapper::-webkit-scrollbar-track-piece:start, .scroll__wrapper::-webkit-scrollbar-track-piece:end {
    background-color: transparent;
}

.scroll__wrapper__list {
    display: flex;
}
.first-seino {
	height: 430px;
	}
.second-seino {
	height: 340px;
	}

.scroll__wrapper__list::after {
    content: "";
    width: 150px;
    display: block;
    position: relative;
    flex: 0 0 auto;
}
.scroll__wrapper__list__item {
    color: #000;
    width: 1132px;
    flex: 0 0 auto;
    border-radius: 0.5rem;
    transition: .3s;
}

.scroll__wrapper__list__item img {
    width: 100%;
}
/*.scroll__wrapper__list__item h3 {
    font-size: 1.25rem;
    margin: 0.5rem 0;
}
.scroll__wrapper__list__item p {
    font-size: 0.9rem;
    margin-bottom: 0;
}*/
.seino-a{
	background: url("images/2-7.webp")no-repeat left top;
	background-size: contain;
	height: 430px;
}
.seino-b{
	background: url("images/3-6.webp")no-repeat left top;
	background-size: cover;
	height: 332px;
}
.UAGraph{
	margin-top: 7px; /*30px;*/
	margin-left: 357px; /*404px;*/
	width: 200px;
	height: 368px;
}

.ETA_ACGraph{
	margin-top: 4px; /*163px;*/
	margin-left: 233px; /*279px;*/
	width: 215px;
	height: 371px;
}

.BEIGraph{
	margin-top: 47px;
	margin-left: 327px;
}
}

@media screen and (max-width:1024px) {
	.seino-a .before1{
  bottom: 56px;
	left:34%;
}
.seino-a .after1{
  bottom: 56px;
	left:43.75%;
}
.seino-a .before2{
  bottom: 56px;
	left:74%;
}
.seino-a .after2{
  bottom: 56px;
	left:83.5%;
}
.seino-b .before{
	bottom: 42px;
	left:30.75%;
}

.seino-b .after{
	bottom:42px;
	left:39%;
}
}



/*タブのスタイル*/
.tab_menu-before,
.tab_menu-after {
  width: calc((100% - 5px) / 2);
  border-radius: 5px 5px 0 0;
  border: 2px solid var(--primary-color);
  border-bottom:0;
  height: 50px;
  /*line-height: 50px;*/
  font-size: 16px;
  text-align: center;
  /*color: #000;
  /*color: #000;
  outline: #666 solid;
  border-bottom: 1px solid #102c57;
  background-color: #ebf3ff;*/
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_menu-before:not(:last-of-type),
.tab_menu-after:not(:last-of-type)  {
  margin-right: 5px;
}
label.tab_menu-before:last-of-type,
.tab_menu-after:last-of-type  {
  margin-right: 0;
}

.tab_menu-before:hover,
.tab_menu-after:hover {
  opacity: 0.7;
}
/*ラジオボタンを全て消す*/
input[name="tab_menu-before"],
input[name="tab_menu-after"]{
  display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_contents {
  display: none;
  /*padding: 50px;*/
  clear: both;
  overflow: hidden;
  transition: 0.5s opacity;
  /*outline: 1px solid #666;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);*/
}
/*選択されているタブを表示*/
#menu01:checked ~ #menu01,
#menu02:checked ~ #menu02,
#menu03:checked ~ #menu03,
#menu04:checked ~ #menu04{
  display: block;
}
/*選択されているタブのスタイル*/
.result-bunpu input:checked + .tab_menu-before,
.result-bunpu input:checked + .tab_menu-after{
  background-color: var(--primary-color);
  color: #fff;
}



@media screen and (max-width:820px) {
h2.result-m,
h2.result-m:after,
h2.result-m-orange,
h2.result-m-orange:after,
h2.result-m-pink,
h2.result-m-pink:after{
	font-size: 1.5rem;
}
h2.result-m:after,
h2.result-m-orange:after,
h2.result-m-pink:after{
	right: -106px;
}
.t-mtml {
	margin: 30px 0 0 15%;
}
h3.heading-w .orange,
h3.heading-w .cian,
h3.orange-ttl,
h3.cian-ttl,
h3.pink-ttl{
	font-size: 1.25rem;
}
}

@media screen and (max-width:600px) {
	h2.result-m,
	h2.result-m-orange,
	h2.result-m-pink{
	font-size: 1.2rem;
	padding: 10px;
}
	h2.result-m:after,
	h2.result-m-orange:after,
	h2.result-m-pink:after{
	font-size: 1.2rem;
	padding: 8px 10px;
	right: -72px;
}
	.flex-st{
	display: flex;
	justify-content:flex-start;
	flex-wrap: wrap !important;
}
	.t-mtml {
		width: 100%;
    margin: -10px 0 5px 0;
}
	.result-half{
	width: 100%;
	text-align: center;
}
	.result-bunpu{
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
}

.scroll_table {
  max-width: 800px;
  overflow-x: auto;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 20px;
	text-align: center;
}

table {
  white-space: nowrap;
  margin: 10px 0;
}

.scroll_table::-webkit-scrollbar {
  height: 15px; /* スクロールバーの高さ */
}

.scroll_table::-webkit-scrollbar-thumb {
	background: var(--primary-color);
    border-radius: 20px !important;

}

.scroll_table::-webkit-scrollbar-track {
background: #ddd; /* ツマミの色 */
}
}



/*ヘッダー、フッター追加
============================================================*/
header{
	width:100%;
	padding: 0 30px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	background: rgb(255, 255, 255, .7);
	position: fixed;
	z-index: 9999;
}
.header-inner{
	max-width: 1132px;
	width:100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.header-inner .logo{
	width:50%;
	text-align: center;
}
.header-inner .button{
	width:50%;
	text-align: center;
}
.header-inner .button .blk-btn{
	display: inline-block;
	background: #000;
	border-radius:5px;
	text-align: center;
	padding:10px 30px;
	color: #fff;
	text-decoration: none;
}
.nav-block {
	max-width: 1132px;
	width:100%;
	margin: 0 auto;
}
ul.nav-menu {
	background: #000;
  list-style: none;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0;
}

ul.nav-menu li {
	position: relative;
	display: flex;
	margin: 0;
}
ul.nav-menu li a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	justify-content: center;
	padding: 10px;
}

ul.nav-menu > li:not(:last-child)::after {
  position: absolute;
  align-self: center;
  border-color: #fff;
  border-left-style: solid;
  border-left-width: 2px;
  content: '';
  height: 35%;
  right: -37px;
}

.bg-menu-container,
.menu-container {
	display: none;
}

.footer {
	max-width: 1132px;
	width:100%;
	margin: 0 auto;
	padding: 30px;
	text-align: center;
}

/*トグルとメニュー*/
@media screen and (max-width:820px) {

ul.nav-menu{
		display: none;
	}

.bg-menu-container {
	position: relative;
	display: block;
	background: #000;
	width: 100%;
	height: 44px;
	margin: 0 auto 20px;
	}
/* メニューコンテナ全体のスタイル */
.menu-container {
	display: block;
  /*position: fixed;*/
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /*height: 100%;*/
  overflow: hidden;
  height: 34vh;
}

/* メニューボタンのスタイル */
.menu-button {
  display: block;
  /*position: fixed;*/
	position: absolute;
  /*top: 20px;
  left: 20px;*/
  cursor: pointer;
  z-index: 2;
	top: 4px;
    left: 50%;
	transform: translateX(-50%);
    cursor: pointer;
    z-index: 2;
    background: #FFF;
    padding: 3px 8px;
    border-radius: 3px;
}

/* メニューバーのスタイル */
.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #333;
  transition: 0.4s;
}

/* メニューボタンがチェックされた場合のボタン*/
#menu-toggle:checked ~ .menu-button {
	 padding: 10px 4px 0px 10px;
	height: 36px;
	}
/* メニューボタンがチェックされた場合の1つ目のバーのアニメーション */
#menu-toggle:checked ~ .menu-button .bar:nth-child(1) {
  transform: rotate(45deg) translate(-2px, 3px);
	/*margin: 10px 0 0 0;*/
}

/* メニューボタンがチェックされた場合の2つ目のバーのアニメーション */
#menu-toggle:checked ~ .menu-button .bar:nth-child(2) {
  opacity: 0;
}

/* メニューボタンがチェックされた場合の3つ目のバーのアニメーション */
#menu-toggle:checked ~ .menu-button .bar:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -13px);
}

/* メニュートグルのスタイル */
#menu-toggle {
  display: none;
}

/* メニューのスタイル */
.menu {
  /*position: fixed;
  top: 0;
  left: -100%;  変更: メニューを左からスライドインさせるために left に設定 */
	position: absolute;
	top:-100%;
	left:0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: 0.4s;
  z-index: 1;
  overflow-y: auto;
}

/* メニュートグルがチェックされた場合のメニューの表示アニメーション */
#menu-toggle:checked ~ .menu {
   /* left: 0; /* メニューを表示させるために left を 0 に変更 */
	top:44px;
}

/* メニュー内のリストのスタイル */
.menu ul {
  list-style: none;
  padding: 0 20px 20px;
}

/* メニュー内リストのリンクのスタイル */
.menu ul li a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
  display: block;
  padding: 10px 0;
  transition: 0.2s;
}

/* メニュー内リストのリンクのホバー時のスタイル */
.menu ul li a:hover {
  color: #bf7497;
}
}


@media screen and (max-width:600px) {
.header-inner .logo{
	width:100%;
	text-align: center;
}
.header-inner .button{
	width:100%;
	text-align: center;
	margin-bottom: 20px;
	}
/* メニューコンテナ全体のスタイル */
.menu-container {
	display: block;
  /*position: fixed;*/
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /*height: 100%;*/
  overflow: hidden;
  height: 40vh;
}
}
@media screen and (max-width:400px) {
	/* メニューコンテナ全体のスタイル */
.menu-container {
	display: block;
  /*position: fixed;*/
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /*height: 100%;*/
  overflow: hidden;
  height: 60vh;
}
}


/*断熱等性能等級*/
.lined-box{
	position: relative;
	border:2px solid #999;
	border-radius: 10px;
	display: block;
	padding: 60px 20px 15px;
	margin: 20px 0;
}
.lined-box-bold{
	border:4px solid #333 !important;
}
.lined-box h4.ttl{
	position: absolute;
	background: #fff;
	font-weight: bold;
	padding: 0 20px;
	top:-23px;
	left:40px;
}
.lined-box h3.ttl{
	position: absolute;
	background: #fff;
	font-weight: bold;
	padding: 0 20px;
	top:-28px;
	left:40px;
}
.lined-box:first-child:after{
	content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 36px 0 36px 18px;
  border-color: transparent transparent transparent var(--primary-color);
  position: absolute;
  top: 0;
  bottom: 0;
  right: -30px;
  margin: auto;
}
.house_white_s{
	background: #fff;
	color:#aaa;
	position: relative;
	width: 50px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 20px solid #efefef;
}
.house_white_s::before {
	content: "";
	position: absolute;
	top: -35px;
  left: 0px;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 15px solid #efefef;
}
.house_orange_s{
	background: var(--orange);
	color:#fff;
	position: relative;
	width: 50px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 20px solid var(--orange);
}
.house_orange_s::before {
	content: "";
	position: absolute;

	top: -35px;
  left: 0px;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 15px solid var(--orange);
}
.house_white_s p,
.house_orange_s p{
	position: absolute;
	font-weight: bold;
	top: -25px;
  left: 41%;
}
.house_white_l{
	background: #fff;
	color:#aaa;
	position: relative;
	width: 70px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 30px solid #efefef;
}
.house_white_l::before {
	content: "";
	position: absolute;
	top: -55px;
  left: 0px;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 25px solid #efefef;
}
.house_orange_l{
	background: var(--orange);
	color:#fff;
	position: relative;
	width: 70px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 30px solid var(--orange);
}
.house_orange_l::before {
	content: "";
	position: absolute;
	top: -55px;
  left: 0px;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 25px solid var(--orange);
}

.house_white_l p,
.house_orange_l p{
	position: absolute;
	font-weight: bold;
	top: -30px;
  left: 41%;
}

@media screen and (max-width:1024px) {
	.house_white_s{
	background: #fff;
	color:#aaa;
	position: relative;
	width: 40px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 20px solid #efefef;
}
.house_white_s::before {
	content: "";
	position: absolute;
	top: -35px;
  left: 0px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 15px solid #efefef;
}
.house_orange_s{
	background: var(--orange);
	color:#fff;
	position: relative;
	width: 40px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 20px solid var(--orange);
}
.house_orange_s::before {
	content: "";
	position: absolute;
	top: -35px;
  left: 0px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 15px solid var(--orange);
}
.house_white_s p,
.house_orange_s p{
	position: absolute;
	font-weight: bold;
	top: -25px;
  left: 40%;
}
.house_white_l{
	background: #fff;
	color:#aaa;
	position: relative;
	width: 60px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 30px solid #efefef;
}
.house_white_l::before {
	content: "";
	position: absolute;
	top: -55px;
  left: 0px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 25px solid #efefef;
}
.house_orange_l{
	background: var(--orange);
	color:#fff;
	position: relative;
	width: 60px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 30px solid var(--orange);
}
.house_orange_l::before {
	content: "";
	position: absolute;
	top: -55px;
  left: 0px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 25px solid var(--orange);
}

.house_white_l p,
.house_orange_l p{
	position: absolute;
	font-weight: bold;
	top: -30px;
  left: 40%;
}
}
@media screen and (max-width:834px) {
	.house_white_s{
	background: #fff;
	color:#aaa;
	position: relative;
	width: 30px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 20px solid #efefef;
}
.house_white_s::before {
	content: "";
	position: absolute;
	top: -35px;
  left: 0px;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #efefef;
}
.house_orange_s{
	background: var(--orange);
	color:#fff;
	position: relative;
	width: 30px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 20px solid var(--orange);
}
.house_orange_s::before {
	content: "";
	position: absolute;
	top: -35px;
  left: 0px;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid var(--orange);
}
.house_white_s p,
.house_orange_s p{
	position: absolute;
	font-weight: bold;
	top: -25px;
  left: 38%;
}
.house_white_l{
	background: #fff;
	color:#aaa;
	position: relative;
	width: 50px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 30px solid #efefef;
}
.house_white_l::before {
	content: "";
	position: absolute;
	top: -55px;
  left: 0px;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid #efefef;
}
.house_orange_l{
	background: var(--orange);
	color:#fff;
	position: relative;
	width: 50px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 30px solid var(--orange);
}
.house_orange_l::before {
	content: "";
	position: absolute;
	top: -55px;
  left: 0px;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid var(--orange);
}

.house_white_l p,
.house_orange_l p{
	position: absolute;
	font-weight: bold;
	top: -30px;
  left: 38%;
}
}
@media screen and (max-width:768px) {
.lined-box{
	width: 100%;
	position: relative;
	border:2px solid #999;
	border-radius: 10px;
	display: block;
	padding: 60px 20px 15px;
	margin: 20px 0;
}
.lined-box h4.ttl{
	position: absolute;
	background: #fff;
	font-weight: bold;
	padding: 0 20px;
	top:-23px;
	left:40px;
}
.lined-box h3.ttl{
	position: absolute;
	background: #fff;
	font-weight: bold;
	padding: 0 20px;
	top:-28px;
	left:40px;
}
.lined-box:first-child:after{
	content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 18px 36px 0 36px;
  border-color: var(--primary-color) transparent transparent transparent;
  position: absolute;
  left: 0;
  bottom: -150px;
  margin: auto;
}
.house_white_s{
	background: #fff;
	color:#aaa;
	position: relative;
	width: 50px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 20px solid #efefef;
}
.house_white_s::before {
	content: "";
	position: absolute;
	top: -35px;
  left: 0px;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 15px solid #efefef;
}
.house_orange_s{
	background: var(--orange);
	color:#fff;
	position: relative;
	width: 50px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 20px solid var(--orange);
}
.house_orange_s::before {
	content: "";
	position: absolute;
	top: -35px;
  left: 0px;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 15px solid var(--orange);
}
.house_white_s p,
.house_orange_s p{
	position: absolute;
	font-weight: bold;
	top: -25px;
  left: 41%;
}
.house_white_l{
	background: #fff;
	color:#aaa;
	position: relative;
	width: 70px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 30px solid #efefef;
}
.house_white_l::before {
	content: "";
	position: absolute;
	top: -55px;
  left: 0px;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 25px solid #efefef;
}
.house_orange_l{
	background: var(--orange);
	color:#fff;
	position: relative;
	width: 70px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 30px solid var(--orange);
}
.house_orange_l::before {
	content: "";
	position: absolute;
	top: -55px;
  left: 0px;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 25px solid var(--orange);
}

.house_white_l p,
.house_orange_l p{
	position: absolute;
	font-weight: bold;
	top: -30px;
  left: 41%;
}
}

@media screen and (max-width:600px) {
	.lined-box{
	position: relative;
	border:2px solid #999;
	border-radius: 10px;
	display: block;
	padding: 40px 15px 15px;
	margin: 20px 0;
}
.lined-box h4.ttl{
	position: absolute;
	background: #fff;
	font-weight: bold;
	font-size: 1.2rem;
	padding: 0 10px;
	top:-20px;
	left:10px;
}
.lined-box h3.ttl{
	position: absolute;
	background: #fff;
	font-weight: bold;
	font-size: 1.2rem;
	padding: 0 10px;
	top:-24px;
	left:10px;
}
.lined-box:first-child:after{
	content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 18px 36px 0 36px;
  border-color: var(--primary-color) transparent transparent transparent;
  position: absolute;
  left: -8%;
  bottom: -130px;
  margin: auto;
}
	.house_white_s{
	background: #fff;
	color:#aaa;
	position: relative;
	width: 30px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 20px solid #efefef;
}
.house_white_s::before {
	content: "";
	position: absolute;
	top: -35px;
  left: 0px;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #efefef;
}
.house_orange_s{
	background: var(--orange);
	color:#fff;
	position: relative;
	width: 30px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 20px solid var(--orange);
}
.house_orange_s::before {
	content: "";
	position: absolute;
	top: -35px;
  left: 0px;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid var(--orange);
}
.house_white_s p,
.house_orange_s p{
	position: absolute;
	font-weight: bold;
	top: -25px;
  left: 35%;
}
.house_white_l{
	background: #fff;
	color:#aaa;
	position: relative;
	width: 50px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 30px solid #efefef;
}
.house_white_l::before {
	content: "";
	position: absolute;
	top: -55px;
  left: 0px;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid #efefef;
}
.house_orange_l{
	background: var(--orange);
	color:#fff;
	position: relative;
	width: 50px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 30px solid var(--orange);
}
.house_orange_l::before {
	content: "";
	position: absolute;
	top: -55px;
  left: 0px;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid var(--orange);
}

.house_white_l p,
.house_orange_l p{
	position: absolute;
	font-weight: bold;
	top: -30px;
  left: 38%;
}
}

@media screen and (max-width:400px) {
	.lined-box{
	position: relative;
	border:2px solid #999;
	border-radius: 10px;
	display: block;
	padding: 40px 10px 15px;
	margin: 20px 0;
}
		.house_white_s{
	background: #fff;
	color:#aaa;
	position: relative;
	width: 26px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 20px solid #efefef;
}
.house_white_s::before {
	content: "";
	position: absolute;
	top: -35px;
  left: 0px;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 15px solid #efefef;
}
.house_orange_s{
	background: var(--orange);
	color:#fff;
	position: relative;
	width: 26px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 20px solid var(--orange);
}
.house_orange_s::before {
	content: "";
	position: absolute;
	top: -35px;
  left: 0px;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 15px solid var(--orange);
}
.house_white_s p,
.house_orange_s p{
	position: absolute;
	font-weight: bold;
	top: -25px;
  left: 30%;
}
.house_white_l{
	background: #fff;
	color:#aaa;
	position: relative;
	width: 44px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 30px solid #efefef;
}
.house_white_l::before {
	content: "";
	position: absolute;
	top: -55px;
  left: 0px;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 25px solid #efefef;
}
.house_orange_l{
	background: var(--orange);
	color:#fff;
	position: relative;
	width: 44px;
	height: 0px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 30px solid var(--orange);
}
.house_orange_l::before {
	content: "";
	position: absolute;
	top: -55px;
  left: 0px;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 25px solid var(--orange);
}

.house_white_l p,
.house_orange_l p{
	position: absolute;
	font-weight: bold;
	top: -30px;
  left: 36%;
}
}

/*一次エネルギー消費量 星部分*/
.lined-box-star{
	position: relative;
	border:2px solid #999;
	border-radius: 10px;
	display: block;
	padding: 30px 20px 15px;
	margin: 20px 0;
}
.lined-box-star img{
	max-width: 24%;
}
.lined-box-star h4.ttl{
	position: absolute;
	background: #fff;
	font-weight: bold;
	padding: 0 20px;
	top:-23px;
	left:40px;
}
.lined-box-star h3.ttl{
	position: absolute;
	background: #fff;
	font-weight: bold;
	padding: 0 20px;
	top:-28px;
	left:40px;
}
.lined-box-star:first-child:after{
	content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 36px 0 36px 14px;
  border-color: transparent transparent transparent var(--primary-color);
  position: absolute;
  top: 0;
  bottom: 0;
  right: -30px;
  margin: auto;
}

@media screen and (max-width:834px) {
	.lined-box-star:first-child:after{
  right: -22px;
  margin: auto;
}
}
@media screen and (max-width:600px) {
	.lined-box-star{
	position: relative;
	border:2px solid #999;
	border-radius: 10px;
	display: block;
	padding: 30px 15px 15px;
	margin: 20px 0;
}
.lined-box-star h4.ttl{
	position: absolute;
	background: #fff;
	font-weight: bold;
	font-size: 1.2rem;
	padding: 0 10px;
	top:-20px;
	left:10px;
}
.lined-box-star h3.ttl{
	position: absolute;
	background: #fff;
	font-weight: bold;
	font-size: 1.2rem;
	padding: 0 10px;
	top:-24px;
	left:10px;
}
.lined-box-star:first-child:after{
	content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 36px 0 36px;
  border-color: var(--primary-color) transparent transparent transparent;
  position: absolute;
  left: -8%;
  bottom: -130%;
  margin: auto;
}
}


/*ファイル添付用ポップアップ
==============================================*/
body.file-popup-bg{
	background: none;
}
.popup_wrap input[type=checkbox]{
    display: none;
    }

.popup_overlay {
    display: flex;
    justify-content: center;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.5s, transform 0s 0.5s;
    transform: scale(0);
    }

.popup_trigger {
    position: absolute;
    width: 100%;
    height: 100%;
    }

.popup_content {
    position: relative;
    align-self: center;
    width: 90%;
    max-width: 500px;
    /*padding: 30px 40px;*/
    box-sizing: border-box;
    background: #fff;
    line-height: 1.4em;
    transition: 0.5s;
    text-align: justify;
    }

.close_btn {
    position: absolute;
    top: 20px;
    right: -10px;
    font-size: 20px;
    cursor: pointer;
    padding:8px;
    background:  var(--orange);
    color: #fff;
    line-height:14px;
    font-weight:bold;
    }

.popup_wrap input:checked ~ .popup_overlay {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s;
    }

.popup_wrap input:checked ~ .popup_overlay .popup_content{
    transform: translateY(50px);
    }

.file-popup{
	max-width: 500px;
	width: 100%;
	padding: 30px 10px 10px 10px;
	border: 3px solid var(--primary-color);
	text-align: center;
}
.popup_content .file-popup label{
	display: flex;
	flex-wrap: wrap;
}
.popup_content .file-popup p {
	width: 100%;
    margin: 0 0 50px;
}

.popup_content .file-popup input[type=file]{
    display: none;
    }
.popup_content .file-popup label.btn-file {
	position: relative;
  display: block;
  padding: 0.5em 2em 0.5em 1em;
  width: 190px;
  text-decoration: none;
  background: var(--orange);
  color: #FFF;
  font-weight: bold;
  text-align: center;
  border-bottom: solid 4px var(--gray);
  border-radius: 6px;
  margin: 0 auto 10px;
	/*z-index: -1;*/
	cursor: pointer;
}
.popup_content .file-popup label.btn-file:after{
	position: absolute;
	content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("images/file.svg") no-repeat;
  background-size: contain;
  top:50%;
  transform:translateY(-50%);
  right:20px;
}
.popup_content .file-popup label.btn-file:active{
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
  border-bottom: none;
}



.btn-cancel{
  position: relative;
  display: block;
  padding: 0.4em 1em 0.4em 1em;
  width: 120px;
  text-align: center;
  text-decoration: none;
  background:#CCC;
  color: #333;
  font-weight: bold;
	margin: 0;
  /*border: solid 2px var(--orange);
　-webkit-box-shadow: 0px 4px 0 var(--gray);
  box-shadow: 0px 4px 0 var(--gray);*/
  border-radius: 6px;
}
.btn-cancel:active{
  /*ボタンを押したとき*/
  opacity: .8;
}

.btn-import{
  position: relative;
  display: block;
  padding: 0.4em 1em 0.4em 1em;
  width: 120px;
  text-align: center;
  text-decoration: none;
  background:#FFB100;
  color:#333;
  font-weight: bold;
	margin-left: 10px;
  /*border: solid 2px var(--orange);
　-webkit-box-shadow: 0px 4px 0 var(--gray);
  box-shadow: 0px 4px 0 var(--gray);*/
  border-radius: 6px;
	margin: 0 0 0 10px;
}
.btn-import:active{
  /*ボタンを押したとき*/
  opacity: .8;
}


@media not screen and (max-width:1132px) {
	#BEIPerformanceChart {
		height: 228px !important;
	}

	.BEIGraph {
		margin-top: 44px !important;
	}
}