@charset "utf-8";
/* CSS Document */

body{
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-weight: 500;
	background-color: #f1f6fe;
	color: #222;
	line-height: 1.5;
	font-size: 16px;
	margin: 0px;
	padding: 0px;
}
h2{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", 'Noto Serif JP', "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	background: linear-gradient(-45deg, #234279 25%, #3f5a8a 25%, #3f5a8a 50%, #234279 50%, #234279 75%, #3f5a8a 75%, #3f5a8a);
		-webkit-background-size: 7px 7px;
	text-align: center;
	color: #fff;
	padding: 20px;
}
h3{
	margin: 10px;
	padding: 10px;
	background: rgba(244, 155, 0, .5);
	background-image: linear-gradient(#F49B00,rgb(255,213,79),#F49B00);
	border: none;
	border-radius: 5px;
	color: #fff;
	text-align: center;
	text-shadow:  #000 1px 1px 2px,#000 1px 1px 2px;
	font-size: 200%;
	width: 50%;
}
ul li{
	list-style-type: none;
}
.ts{
	font-size: 80%;
}
.tb{
	font-weight: bold;
}
.tl{
	text-align: left;
}
.right{
	text-align: right;
}
.tc{
	text-align: center;
}
.fr{
	color: rgba(205,18,21,0.8);
}
.fn{
	color: #000;
	font-weight: normal;
}
.fs{
	font-size: 85%;
}
.br{
	background-color: rgba(205,18,21,0.3);
	margin: 0px;
	padding: 10px;
	border-radius: 5px;
}
.dpn{
	display: none;
}
#contents-all{
	width: 1200px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	display: flex;
	margin-top: 20px;
	background: linear-gradient(-45deg, #234279 25%, #3f5a8a 25%, #3f5a8a 50%, #234279 50%, #234279 75%, #3f5a8a 75%, #3f5a8a);
		-webkit-background-size: 7px 7px;
}
.simulation-allcontents{
	width: 1200px;
	height: auto;
	padding: 15px;
	background-color: #fff;
}
.guide{
	position: relative;
	margin: 10px;
	padding-top: 20px;
	padding-left: 80px;
}
.guide img{
	position: absolute;
	top: -5px;
	left: -5px;
	width: 8%;
}
.simulation-allcontents h4{
	margin: 0px;
	background:#283e78;
	border-bottom: 10px solid #f1f6fe;
	border-top: 10px solid #f1f6fe;
	color:#fff;
	text-shadow:  #000 1px 1px 2px,#000 1px 1px 2px;
	text-align:center;
	font-size: 150%;
}
.simulation-allcontents  li{
	float: left;
}
.simulation-allcontents  ul::after{
	content: "";
	display: block;
	clear: both;
}
.menubtn{
	margin: 10px 10px 13px 10px;
	padding: 10px;
	width: 150px;
	background-color: #78BBE6;
	border-radius: 5px;
	text-align: center;
	color: #fff;
	text-shadow:  #000 1px 1px 2px,#000 1px 1px 2px;
	font-weight: bold;
	font-size: 120%;
}
.menubtn2{
	margin: 10px 10px 13px 30px;
	padding: 10px;
	width: 130px;
	background-color: #E1EEF9;
	border-radius: 5px;
	text-align: center;
	color: blue;
	font-weight: bold;
	font-size: 100%;
}
ul.menu li {
  background-color: #78BBE6;/* default value */
}
ul.menu li.selected {
  background-color: #F49B00;
}

.contentstype{
	margin-left: auto;
	margin-right: auto;
	display: flex;
}
.contents1,.contents2,.contents3{
	width: 32%;
	margin: 1%;
	padding: 5px;
	border: 1px solid #ccc;
	background-color: #FBFBFB;
}
.contents1 select{
	width: 100%;
	border-radius: 5px;
	background-image: linear-gradient(#D9E5FF,#fff,#fff,#D9E5FF);
	margin-top: 0px;
	padding: 10px;
}
.select{
	border: 1px solid #ccc;
	border-radius: 5px;
	background-image: linear-gradient(#D9E5FF,#fff,#fff,#D9E5FF);
	padding: 10px;
}
dl{
	padding: 10px 5px;
	border: 1px solid#ccc;
	border-radius: 5px;
	height: 120px;
	background-color: #fff;
}
dd{
	margin-left: 15px;
}
dt{
	color: #234279;
}
.contents1 dt{
	padding: 0px 10px;
}
.contents1 dd{
	margin-left: 0px;
}
.contents1 dl{
	height: auto;
	margin-bottom: 0px;
	padding: 13px 5px;
}
dl img{
	margin-top: 15px;
	width: 110px;;
	height: 50px;
}
.yajirusi{
}
.lefty{
	width: 15%;
	height: 15%;
	margin-left: -30px;
	margin-right: 5px;
}
.righty{
	margin-right: -30px;
	margin-left: 5px;
	width: 15%;
	height: 15%;
}
.brs{
	line-height: 0;
}
.contents2 dl{
	height: 130px;
}
.contents2 dl:nth-of-type(1){
	height: 200px;
}
.contents2 dl:nth-of-type(2){
	height: 300px;
}
.contents2 dt{
	margin-left: 0px;
}
.contents2 dd{
	margin-top: 15px;
}
.contents2 table{
	width: 100%;
	margin-top: 10px;
}
.contents2 td{
	text-align: center;
	line-height: 1;
}
.contents2 th{
	margin: 10px;
	padding: 10px 20px;
	background-color: #78BBE6;
	border-radius: 5px;
	text-align: center;
	color: #fff;
	text-shadow:  #000 1px 1px 2px,#000 1px 1px 2px;
	font-weight: bold;
	font-size: 120%;
}
.contents3 dl{
	height: auto;
}
.contents3 p{
	margin-left: 15px;
}
.contents3 h6{
	margin: 15px 15px 0px 15px;
	color: #78BBE6;
	font-size: 90%;
}
.roof1 dt,.roof2 dt{
	margin: 5px;
	width: 110px;
}
.roof select{
	margin: 5px;
}
.roof1,.roof2{
	display: flex;
}
.home{
	display: flex;
}
.home dt{
	margin: 5px;
	width: 65px;
}
.home img{
	width: 60px;
	height: 60px;
}
.amadoi{
	display: flex;
}
.amadoi select{
	margin: 12px 0px;
}
.amadoi h5{
	margin-right: 0px;
	padding: 10px 3px;
}
.contents6{
	display: flex;
	justify-content: space-between;
	margin: 1%;
	padding: 5px;
	border: 1px solid #ccc;
	background-color: #FBFBFB;
}
.left-6,.right-6{
	width: 50%;
	margin: 0px 10px
}
.contents1{
      position: relative;
}
.dpn{
	display: none;
}
.fukidasi{
	  width: 250px;
      border: 1px solid #ccc;
}
.nobeyuka-fukidasi{
	  display: flex;
      width: 280px;
      position: absolute;
      top: -150px;
      left: 130px;
      padding: 16px;
	  border: 5px solid #F49B00;
      border-radius: 5px;
      background: #fff;
      color: #fff;
      font-weight: bold;
}
.nobeyuka-fukidasi:after {
      position: absolute;
      width: 0;
      height: 0;
      left: 0;
      bottom: -24px;
      margin-left: 10px;
      border: solid transparent;
      border-color: rgba(51, 204, 153, 0);
      border-top-color: #F49B00;
      border-width: 10px;
      pointer-events: none;
      content: " ";
    }
    .fukidasi:hover + .dpn {
      display: block;
    }
.nobeyuka-fukidasi img{
	width: 70%;
	height: 70%;
}
.nobeyuka-fukidasi p{
	color: #000;
}
#sticker{
	width: 240px;
	height:650px;
	margin-left: 20px;
	padding: 5px;
	background-color: #fff;
	z-index: 999;
	font-size: 12px;
}
#sticker table{
	width: 100%;
	border-collapse: collapse;
}
#sticker h4{
	padding: 10px 5px;
	color: #fff;
    background-image: linear-gradient(to right, rgba(205,18,21,0.8), rgba(205,18,21,0.6), rgba(205,18,21,0.8));
}
#sticker td,th{
	border: 1px solid #ccc;
	padding: 5px;
}
#sticker th{
    background-image: linear-gradient(to right, rgba(205,18,21,0.4), rgba(205,18,21,0.2), rgba(205,18,21,0.4));
}
#sticker input{
	border: none;
}
input#asize,input#aysize{
	width: 80px;
}
.contentstype::after{
	content: "";
	display: block;
	clear: both;
}
.hosoku{
	margin: 20px;
	padding: 20px;
	display: flex;
	background-color: #F49B00;
}
.hosoku table{
	border-collapse: collapse;
	width: 100%;
}
.hosoku td,th{
	border: 1px solid #ccc;
	padding: 5px 40px;
	text-align: center;
}
.hosoku th{
	background-color: #283e78;
	color: #fff;
}
.contents4,.contents5{
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	width: 50%;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 5px;
}
.contents4{
	margin-right: 10px;
}
.contents5{
	margin-left: 10px;
}
.total{
	margin: 5px 0px;
	padding: 5px;
    background-image: linear-gradient(to right, rgba(205,18,21,0.8), rgba(205,18,21,0.6), rgba(205,18,21,0.8));
}
.total p{
	margin-top: 0px;
	padding: 3px;
	border: 1px solid rgba(205,18,21,1.00);
	border-radius: 5px;
	text-align: center;
	background-color:  #fff;
	color: rgba(205,18,21,1.00);
}
.total input{
	text-align: center;
	font-size: 130%;
	font-weight: bold;
	color: rgba(205,18,21,1.00);
}
.reset{
	margin-left: 50px;
	padding: 5px;
	border-radius: 5px;
	background-color: #fff;
	color: rgba(205,18,21,1.00);
}
footer{
/*	background-color: #F2F1F2;
*/	margin: 20px 0px 0px 0px;
	text-align: center;
	background: linear-gradient(-45deg, #234279 25%, #3f5a8a 25%, #3f5a8a 50%, #234279 50%, #234279 75%, #3f5a8a 75%, #3f5a8a);
		-webkit-background-size: 7px 7px;
}

/*******************************************************************
*******************************MOBLE*******************************
*******************************************************************/
@media screen and (max-width: 768px){
	html{
		width: 100%;
	}
	h3{
		width: 100%;
	}
	h3{
		margin: 0px;
		padding:0px;
	}
	#contents-all{
		display: block;
		width: 95%;
		margin: 0px;
	}
	.guide{
		padding-left: 50px;
	}
	.guide img{
		width: 15%;
	}
	.simulation-allcontents{
		display: block;
		margin: 0px;
		padding: 0px;
		width: 100%;
	}
	.contentstype{
		margin-left: auto;
		margin-right: auto;
		padding: 0px;
		display: block;
		width: 95%;
	}
	.contents1,.contents2,.contents3{
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
		width: 95%;
	}
	#sticker{
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
 		width: 90%;
		height: auto;
	}
	.menu{
		padding: 0px;
		margin: 10px 0px;
		display: flex;
	}
	.menu li{
		text-align: center;
		border-radius: none;
		width:100px;
		height: 30px;
		margin: 3px;
		padding: 5px 2px;
	}
	.total{
		background-image: none;
		background-color: #fff;
		border-top: 10px solid rgba(205,18,21,0.8);
		border-bottom: 10px solid rgba(205,18,21,0.8);
		width: 100%;
		margin: 0px;
		padding: 0px;
		position: fixed;
		bottom: 0px;
		left: 0px;
	}
	.total ul{
		display: flex;
	}
	.total p{
		color: linear-gradient(to right, rgba(205,18,21,0.8), rgba(205,18,21,0.6), rgba(205,18,21,0.8));
	}
	.total h4{
		margin-bottom: 0px;
	}
	.total input{
		font-size: 300%;
	}
	.jyouhou input{
		width: 100px;
	}
	.wallroof input{
		font-size: 100%;
		background-image: linear-gradient(to right, rgba(205,18,21,0.8), rgba(205,18,21,0.6), rgba(205,18,21,0.8));
		color: #fff;
	}
	input#amenu{
		width: 100px;
	}
	input#itotalmax,input#itotalmin{
		font-size: 200%;
		width: 120px;
	}
	.nobeyuka-fukidasi{
		  top: -150px;
		  left: 30px;
	}
	.hosoku{
		display: block;
		margin: 10px 0px;
		padding: 10px 30px 10px 10px;
	}
	.contents4,.contents5{
		margin-bottom: 20px;
		margin: 10px auto;
		padding: 10px;
		width: 100%;
	}
	.hosoku table{
		width: 100%;
	}
	 input.reset{
		 position: absolute;
		 top: 20px;
		 right: 30px;
		font-size: 200%;
		background-color: #ccc;
		color: #000;
	}
	footer img{
		width: 100%;
		margin-bottom: 300px;
	}
}