@charset "UTF-8";


/*================================================
 *  CSSリセット
 ================================================*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	font-weight:normal;
}
html{
	font-size: 60%;
	word-break: break-all;
}
body {
	line-height:1
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block
}
ul {
	list-style:none
}
blockquote, q {
	quotes:none
}
blockquote:before, blockquote:after, q:before, q:after {
	content:none
}
a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent
}
del {
	text-decoration:line-through
}
abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help
}
table {
	border-collapse:collapse;
	border-spacing:0
}
hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #ccc;
	margin:1em 0;
	padding:0
}
input, select {
	vertical-align:middle
}
/*================================================
 *  一般・共通設定
 ================================================*/

body {
	width: 100%;
	margin: 0 auto;
	font-size: 1.6rem;
	color: #333333;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
	line-height: 1.6;
	position: relative;
}
.inner{
	width: 1100px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.headbubun{
	width: 1100px;
	max-width: 100%;
	margin: 10px auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.headbubun img{
	max-width: 100%;
}
.headbubunlogo{
	width: 100%;
}
.tablet{
		display: none!important;
}

#contents {
	width: 1100px;
	margin: 0 auto 5%;

}
#main,#main_contact {
	float: left;
	width: 70%;
}
a {
	color:#000;
}
a:hover {
	color:#e78f00;
}
#header{
	background: #ff5a00;
	padding: 0 1%;
}
h1 {
	width: 1100px;
	max-width: 100%;
	margin: 0 auto;
	color: #fff;
	font-size: 1.4rem;
	font-weight: bold;
}
h1 a {
	color:#000;
	text-decoration:none;
}
h1 a:hover {
	color: #e78f00;
	text-decoration: underline;
}
h2 {
	margin-bottom: 0.5em;
	padding-left: 10px;
	font-size: 2.0rem;
	color: #000;
	border-left: 5px solid #ff5a00;
	font-weight: bold;
	margin: 0 0 20px 0;
}
h3 {
	margin-bottom: 0.5em;
	padding: 2px 5px;
	font-weight: bold;
	font-size: 1.8rem;
}
h5 {
	font-size: 1.5rem;
}
h6 {
	margin-bottom:0.25em;
	color:#382400;
	font-size: 1.4rem;
	font-weight:bold;
}
p {
	font-size: 1.6rem;
	margin: 0.5em 0 1em 0;
}
#area p{
	font-size: 1.6rem;
}
img {
	vertical-align:bottom;
}
em {
	font-weight:bold;
}
strong {
	font-weight:bold;
}
pre {
	margin:1em 0;
	padding:1em;
}
blockquote {
	margin-bottom:1em;
	padding:1em;
	border:1px dotted #ddd;
	border-left:5px solid #ddd;
}
ul, ol, dl {
	margin:0 0 1em 0;
}
ul {
	list-style-type: disc;
}


li {
	margin-left:2em;
}


table {
	width:100%;
	margin-bottom:1em;
	border-collapse:collapse;
	border:1px solid #ddd;
}
th {
	padding:10px;
	text-align:center;
	vertical-align:middle;
	background:#f5f5f5;
}
td {
	padding:10px;
	text-align:left;
}
.clearFix:after {
	content: "";
	display: block;
	clear: both;
}
.img-responsive {
	max-width: 100%;
}
.sp {
	display: none;
}
/*================================================
 *  ヘッダー
 ================================================*/

header h1 {
	margin-bottom: 5px;
}

/*================================================
 *  グローバルナビゲーション
 ================================================*/
nav {
	width: 1100px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 50px;
	padding: 0;
	background: #eaeaea;
	margin-bottom: 1%;
	margin-top: 40px;
}
nav ul {
	width:960px;
	margin:0 auto;
	padding:0;
	display: flex;
}
nav li {
	list-style:none;
	width:16.666%;
	margin:0;
	padding:0;
}
nav li a {
	display:block;
	padding:10px 0;
	color: #000;
	font-weight: bold;
	text-align:center;
	text-decoration:none;
	font-size: 1.5rem;
	transform-style: preserve-3d;
perspective: 500px;
position: relative;
}
nav li a .guru {
	position: absolute;
top: -20px;
left: 45%;
width: 10%;
}
nav li a .guru .guruin{
	color: #ff3c00;
	font-size: 2rem;
}

nav li a:hover {
	text-decoration: none;
	color: #ff5a00;
}

nav li a .eg {
	color: green;
	font-size: 1.4rem;
	font-weight: bold;
}

nav li a:hover .guru{
	animation: yy 3s linear infinite;
}
@keyframes yy {
0% {transform: rotateY(0);}
100% {transform: rotateY(360deg);}
}
nav li a:hover .guruin{
	animation: baka 1s ease forwards;
}
@keyframes baka {
0% {transform: translateY(0);}
100% {transform: translateY(-10px);}
}

/*=================================================
 *  サイドナビ
=================================================*/

#sub {
	float:right;
	width:28%;
}
#sub a:hover{
	color: #000;
	opacity: 0.6;
}
/****
4個ボックス
***/
#sub .boxbox{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	background: #bdd8b9;
}
#sub .boxin{
	width: 45%;
	margin: 2.5%;
	background: rgba(255,255,255,0.8);
	border-radius: 8px;
}
#sub .boxin img{
	max-width: 100%;
}
#sub .boxnaka{
	bottom: 1%;
	left: 5%;
	font-size: 1.3rem;
	position: absolute;
	line-height: 1.3;
	font-weight: bold;
}
#sub .boxnaka .chumoku{
	font-weight: bold;
	font-size: 1.6rem;
}
#sub .boxnaka2{
	bottom: 1%;
	left: 5%;
	font-size: 1.3rem;
	position: absolute;
	line-height: 1.1;
	font-weight: bold;
}
#sub .boxnaka2 .chumoku{
	font-weight: bold;
	font-size: 2.5rem;
}




#sub img{
	max-width: 100%;
	height: auto;
}
#sub .sideb img{
	border-radius: 10px;
	margin-bottom: 3%;
}
#sub .sidebox{
	margin-bottom: 3%;
}
#sub .sidebox a{
	display: block;
	border-bottom: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	background: #fff;
}
#sub .sidebox .sidett{
	background: #ff3c00;
	font-weight: bold;
	text-align: center;
	color: #fff;
	font-size: 2.5rem;
	padding: 1%;
	border-radius: 10px 10px 0 0;
	margin-bottom: 0;
}

#sub .sidebox.sidepro a{
	padding: 1%;
}

#sub .sidebox .sidemaker{
	display: flex;
	flex-wrap: wrap;
}
#sub .sidebox .sidemaker img{
	width: 50%;
	border-bottom: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	box-sizing: border-box;
	padding: 1%;
	background: #fff;
}

#sub .lobox{
	position: absolute;
	top: 0;
	left: 0;
	font-size: 2rem;
	padding: 2%;
	padding-left: 30%;
	box-sizing: border-box;
	margin: 0;
	line-height: 1.2;
	font-weight: bold;
}
#sub .loboxt{
	font-size: 2.7rem;
	color: #09940c;
	font-weight: bold;
}
#sub .loboxb{
	color: #ff3c00;
	font-weight: bold;
}

#sub .sideprott{
	position: absolute;
	left: 0;
	bottom:0;
	margin: 0;
	padding: 3%;
	box-sizing: border-box;
	font-size: 3rem;
	font-weight: bold;
}
#sub .sidepra{
	color: #f00;
	font-weight: bold;
}
#sub .sideprg{
	color: #74a051;
	font-weight: bold;
}
#sub .sideprm{
	color: #06c60a;
	font-weight: bold;
}


#sub .cente{
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.7rem;
	padding: 5% 2% 4% 30%;
	box-sizing: border-box;
	margin: 0;
	line-height: 1.1;
	font-weight: bold;
	color: #5e5e5e;
}
#sub .centett{
	font-size: 3rem;
	color: #06c60a;
	font-weight: bold;
	line-height: 1.3;
}



footer {
	clear:both;
	width: 100%;
}
.footmenu {
	width:100%;
	padding:20px 0;
	overflow:hidden;
	background: #ff3c00;
	place-items: center;
	display: grid;
}
.footmenu ul {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 0;

}
.footmenu li {
	list-style:none;
	margin: 0;
	padding:0 10px;
	font-size: 1.4rem;
	box-sizing: border-box;
}
.footmenu li a {
	text-decoration: none;
	color: #ffffff;
}
.copyright {
	clear: both;
	padding: 5px 0;
	font-size: 1.4rem;
	place-items: center;
	display: grid;
	background: #ccc;
	color: #000;
}

/*================================================
 *  ページトップへの戻り
 ================================================*/
 .totop {
 	position:fixed;
 	bottom:100px;
 	right:15px;
 }


.totop a {
	display:block;
	text-decoration:none;
	text-align: right;
}
.totop img {
}
.totop img:hover {
	opacity: 0.8;
}



/*================================================
 *  クラス
 ================================================*/
.imgfluid{
	max-width: 100%;
	height: auto;
}
.kazari{
	position: relative;
}
.bg-orange{
	background: #ff5a00;
}
.bg-dgreen{
	background: #6ba56c;
}
.border-bottom-double-titleyo{
	border-bottom: double #ffcc00 5px!important;
}
.border-bottom-dotted-dark{
	border-bottom: dotted #333 1px!important;
}
.border-bottom-dashed-orange{
	border-bottom: dashed #ffcc00 2px!important;
}
.border-orange{
	border-color: #ff5a00!important;
}
.border-green{
	border-color: #84ca86!important;
}
.border-dgreen{
	border-color: #6ba56c!important;
}
.border-double{
	border-style: double!important;
}
.border-bottom-double{
	border-bottom-style: double!important;
}
.text-green{
	color: #84ca86!important;
}
.text-dgreen{
	color: #6ba56c!important;
}
.text-orange{
	color: #ff5a00!important;
}
.fs-extrai{
	font-size: 100px;
}

.ps-10{
	padding-left: 10%!important;
}

.border-bottom-dotted-linkp{
	border-bottom: dotted 1px #6ba56c;
}

/*================================================
 *  カバー
 ================================================*/
.kaba{
	background: #bdd8b9;
	padding-bottom: 3%;
	padding-top: 3%;
}
/*================================================
 *  トップページ
 ================================================*/

/*slide*/
.topslide{
	background: url(../img/index/bg_km.png);
	background-size: cover;
	background-position: bottom center;
	background-color: rgba(255,255,255,0.2);
	background-blend-mode: lighten;
	padding: 2% 0;
}
.topslide .inner{
}
.topslide .slide{
	width: 90%;
	border: 10px #fff solid;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
}
.topslide  .slide img{
	width: 100%;
}

.slide{
	line-height: 0;
}
.slick-dotted.slick-slider{
	margin-bottom: 0;
}
.slick-dots{
	bottom: 5px;
}

.slick-next:before,.slick-prev:before{
	font-size: 25px;
	font-weight: bold;
	background: rgba(0,0,0,0.8);
	border-radius: 50%;
	padding: 2% 30%;
}

.slick-next,.slick-prev{
	z-index: 10;
	right: 20px;
}
.slick-prev{
	left: 10px;
	right: auto;
}

.slicoim a{
	display: block;
	position: relative;
}
.slicoim a::before{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	content: "";
	background: url(../img/common/logo.png);
	background-size: 25%;
	background-position: right 1% bottom 1%;
	background-repeat: no-repeat;
}

/*****************************
tlink
********************************/
.tlink img{
	display: block;
	margin: 2% auto;
	border: #fff solid 3px;
	box-sizing: border-box;
	border-radius: 10px 10px 0 0;
}
.tlink img:hover{
	opacity: 0.6;
}
.tlinknasi{
	display: block;
	margin: 2% auto;
	border: #fff solid 3px;
	box-sizing: border-box;
}
/*****************************
catch
********************************/
.catch{

}
.catchtt{
	font-size: 2.2rem;
	text-align: center;
	font-weight: bold;
	padding: 2%;
	border-radius: 10px 10px 0 0;
	background: #ff5a00;
	margin-bottom: 0;
	color: #fff;
	margin-top: 0;
}
.catchdt{
	border: solid #ff5a00 1px;
	box-sizing: border-box;
	padding: 2%;
	font-size: 1.6rem;
	margin-top: 0;
	font-weight: bold;
	background: #fff;
}

/*****************************
kokoku
********************************/
.kokoku img{
	margin-bottom: 1%;
}
.kokoku a:hover{
	opacity: 0.7;
}


/*****************************
productbox
********************************/
.productbox{
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
}
.productbox .productin{
	width: 48%;
	margin: 1% 0;
}
.productbox .productin img{
	border-radius: 20px 20px 0 0;
}
.productbox .hosob{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.productbox .hosob img{
	margin-bottom: 2%;
	border-radius: 20px;

}

.productbox .productboxeatt{
	position: absolute;
	top: 2%;
	left: 0;
	font-size: 3rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
	width: 100%;
	margin: 0;
}
.productbox .productboxeattspci{
	text-align: right;
	padding-right: 2%;
	box-sizing: border-box;
}
.productbox .kokan{
	margin: 0;
	font-size: 1.4rem;
	position: absolute;
	left: 0;
	top: 0;
	padding: 1.5% 3%;
	box-sizing: border-box;
	line-height: 1.3;
}
.productbox .kokant{
	font-size:  1.8rem;
	color: #09940c;
	font-weight: bold;
}
.productbox .kokanb{
	font-size:  4rem;
	color: #f00;
	font-weight: bold;
}
/*****************************
area
********************************/

.areatt{
	font-size: 2.2rem;
	text-align: center;
	font-weight: bold;
	padding: 2%;
	border-radius: 10px 10px 0 0;
	background: #ff5a00;
	margin-bottom: 0;
	color: #fff;
}
.areadt{
	border: solid #ff5a00 1px;
	box-sizing: border-box;
	padding: 2%;
	font-size: 1.6rem;
	margin-top: 0;
	font-weight: bold;
	background: #fff;
}

/*****************************
contactbox
********************************/
.contactbox{
	position: relative;
}
.contactbox img{
	border-radius: 20px 20px 0 0;
}
.contactbox img.lgconim{
	position: absolute;
	border-radius: 0;
	width: 54%;
	bottom: 3%;
	right: 1%;
}
form .g-recaptcha div{
	margin: 2% auto;
}

.plmailwrap{
	display: block;
	position: relative;
	width: 100%;
	height:100%;
	cursor: pointer;
}
.plmail{
	display: block;
    width: 100%;
    height: 100%;
}
.plholder{
	pointer-events: none;
	position: absolute;
	width: 100%;
	left: 0;
	padding-left: 38px;
	top: 5%;
	opacity: 0.6;
	display:none;
}
.inputmail input:invalid +span.plholder{
	display: inline;
}

/*****************************
faq
********************************/
.faqbox{
	margin-bottom: 5%;
}
.faqbox_q{
	position: relative;
	margin-bottom: 5%;
}
.faq_qsym{
	position: absolute;
	background: #fff;
	border: #6ba56c solid 1px;
	border-radius: 50%;
	left: 0;
	top: -20%;
	font-size: 3rem;
	color: #6ba56c;
	font-weight: bold;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.faq_qdt{
	background: #6ba56c;
	margin-left: 5%;
	padding: 1% 1% 1% 5%;
	color: #fff;
	font-weight: bold;
}

.faq_asym{
	background: #6ba56c;
	border-radius: 50%;
	font-size: 3rem;
	color: #fff;
	font-weight: bold;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.faq_asym{
	float: left;
	vertical-align: top;
	text-align: center;

}
.faq_adt{
	width: 90%;
	vertical-align: top;
	float: right;
}

/*****************************
company
********************************/
table.comta{
	width: 100%;
	border: solid 1px #ccc;
}
table.comta th,table.comta td{
	border: solid 1px #ccc;
}
table.comta th{
	width: 30%;
	font-weight: bold;
}

/*****************************
staff
********************************/
table.staffta{
	width: 100%;
	border: solid 1px #ccc;
}
table.staffta th,table.staffta td{
	border: solid 1px #ccc;
}
table.staffta th{
	width: 30%;
	font-weight: bold;
}

/*****************************
商品ページ
********************************/
table.prct td,table.prct th{
	text-align: center;
	vertical-align: middle;
	border: solid #ccc 1px;
}
table.prct th{
	font-weight: bold;
}
table.prct td.price{
	font-size: 3rem;
	font-weight: bold;
}
#main .chushaku p{
	background-color: #ff5a00;
	color: #ffffff;
	font-weight: bold;
	display: inline-block;
	padding: 1% 2%;
	margin: 1% 0;
	font-size: 18px;
}
#main .chushaku p.nobi{
	width: 96%;
}
#main .chushaku a{
	background-color: #ff5a00;
	color: #ffffff;
	font-weight: bold;
	display: inline-block;
	padding: 1% 2%;
	margin: 1% 0;
	font-size: 18px;
	text-decoration: none;
}
#main .chushaku a:hover{
	opacity: 0.8;
}
.lgim{
	position: relative;
}
.lgim::before{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	content: "";
	background: url(../img/common/logo.png);
	background-size: 45%;
	background-position: right top;
	background-repeat: no-repeat;
}

.lgcoim{
	position: relative;
}
.lgcoim::before{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	content: "";
	background: url(../img/common/logo.png);
	background-size: 25%;
	background-position: right 1% bottom 1%;
	background-repeat: no-repeat;
}

/*****************************
流れ flow
********************************/
.flowim{
	position: relative;
}
.flowim::before{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	content: "";
	background: url(../img/common/logo.png);
	background-size: 55%;
	background-position: bottom 15% right 10%;
	background-repeat: no-repeat;
}

/*****************************
交換工事例 case
********************************/
.caseim{
	position: relative;
}
.caseim::before{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	content: "";
	background: url(../img/common/logo.png);
	background-size: 55%;
	background-position: bottom 5% right 2%;
	background-repeat: no-repeat;
}

/*****************************
お問い合わせ
********************************/
table.conform th{
	text-align: left;
	background: #ffcc99;
	padding: 1% 2%;
	font-size: 2rem;
	width: 30%;
	border: #ccc 1px solid;
}
table.conform td{
	border: #ccc 1px solid;
}
table.conform input[type="text"],table.conform textarea{
	width: 100%;
}

table.conform .radfl{
	display: flex;
	flex-wrap: wrap;
}
table.conform .radfl label{
	width: 150px;
	max-width: 100%;
}

/*================================================
 *  工事事例
 ================================================*/
 #topjirei{
	 margin-bottom: 5%;
 }
#topjirei .topjireitt{
	font-size: 2.2rem;
	text-align: center;
	font-weight: bold;
	padding: 2%;
	border-radius: 10px 10px 0 0;
	background: #ff5a00;
	margin-bottom: 0;
	color: #fff;
}
#topjirei .news_box{
	border: solid #ff5a00 1px;
	box-sizing: border-box;
	padding: 2%;
	font-size: 1.6rem;
	margin-top: 0;
	font-weight: bold;
	background: #fff;
}

#topjirei #top_newsList li{
	margin-top: 3%;
	margin-bottom: 3%;
}
#topjirei #top_newsList li a{
	text-decoration: none;
}
#topjirei #top_newsList .top_catName{
	color: #f00;
	font-weight: bold;
}

#topjirei .tolist{
	text-align: center;
	margin-top:5%;
	margin-bottom: 5%;
}
#topjirei .tolist a{
	text-decoration: none;
	color: #f00;
	border: #f00 solid 1px;
	padding: 1% 2%;
	box-sizing: border-box;
	border-radius: 8px;
	font-weight: bold;

}
#topjirei .tolist a:hover{
	background: #f00;
	color: #fff;
}
#topjirei .top_newMark{
	background: #f00;
	color: #fff;
	padding: 0.5% 1%;
	box-sizing: border-box;
	margin-left: 1%;
	margin-right: 1%;
	font-weight: bold;
	border-radius: 4px;

}


/*================================================
 *  施工事例詳細等
 ================================================*/
 #newsWrap #detail img{
	 display: block;
	 margin: 2% auto;
	 max-width: 100%;
 }
 #newsList .thumbNailWrap img{
	 max-width: 100%;
 }
#sec1{
	margin-bottom: 8%;
}

/* Pager style（外部化可） */
.pager{
  text-align:right;
  padding:10px;
  clear:both;
}
/*ページャーボタン*/
.pager a{
    border: 1px solid #999;
    border-radius: 5px 5px 5px 5px;
    color: #333;
    font-size: 12px;
    padding: 3px 7px 2px;
    text-decoration: none;
  margin:0 1px;
}

/*現在のページのボタン*/
.pager a.current{
    background: #999;
    border: 1px solid #999;
    border-radius: 5px 5px 5px 5px;
    color: #fff;
    font-size: 12px;
    padding: 3px 7px 2px;
  margin:0 1px;
    text-decoration: none;
}

.pager a:hover{
    background:#999;
    color: #fff;
}

.overPagerPattern{
  padding:0 2px ;
}



/*================================================
 *  noritz_premiumpage
 ================================================*/

#noritz_premiumpage .mt{
margin-top: 3%;
}
#noritz_premiumpage .imgcent{
display: block;
margin-left: auto;
margin-right: auto;
}
#noritz_premiumpage .texttopic{
background: #e7380d;
padding: 1% 2%;
color: #fff;
font-size: 23px;
font-weight: bold;
margin-top: 5%;
margin-bottom: 2%;
}
#noritz_premiumpage .nakatexttopic{
color: #e7380d;
font-size: 20px;
font-weight: bold;
margin-top: 3%;
margin-bottom: 3%;
}
#noritz_premiumpage .smj{
font-size: 60%;
}
#noritz_premiumpage .boxdou{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 3%;
margin-bottom: 3%;
align-items: center;
}


/*================================================
 *  タブレット向けデザイン
 ================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:1200px) {
	html{
		font-size: 60%;
	}
body {
	box-sizing: border-box;
	width: 100%;
}
.hb{
	padding: 0 10px;
}
.kaba{
	padding-left: 10px;
	padding-right: 10px;
}
.fs-extrai{
	font-size: 10rem;
}
nav ul {
	width: 100%;
}

#sub .lobox{
	font-size: 1.5vw;
}
#sub .loboxt{
	font-size: 2vw;
}

#sub .sideprott{
	font-size: 2.5vw;
}
#sub .cente{
	font-size: 1.6vw;
}
#sub .centett{
	font-size: 2.5vw;
}

#contents {
	width: 97%;
	margin-left:auto;
	margin-right;
}

table.prct td, table.prct th{
	font-size: 1.1rem;
}

table.prct td.price{
	font-size: 1.7rem;
	font-weight: bold;
	width: 20%;
}
.productbox .productboxeatt{
	font-size: 2vw;
}

.productbox .kokan{
	font-size: 1.2vw;
}
.productbox .kokant{
	font-size:  2vw;
}
.productbox .kokanb{
	font-size:  2.8vw;
}
}
@media screen and (max-width:1200px) and (min-width:768px) {

#sub .boxnaka{
	font-size: 1.2vw;
}
#sub .boxnaka .chumoku{
	font-size: 1.4vw;
}
#sub .boxnaka2{
	font-size: 1.2vw;
}
#sub .boxnaka2 .chumoku{
	font-size: 2vw;
}
}
/*==============================================================
 *  スマートフォン向けデザイン　767以下
 =============================================================*/
@media screen and (max-width:767px) {
	html{
		font-size: 65%;
	}
body {
	font-size: 1.6rem;
}
h1 {
	margin-bottom: 0;
	font-size: 1.3rem;
}

.headbubun{
	flex-wrap: wrap;
}
.headbubundenwa,.headbubuncontact{
	width: 48%;
}
.tablet{
		display: block!important;
}
.pc_tablet{
	display: none!important;
}
nav{
	border-radius: 0;
}
#main {
	float: none;
	width: 100%;
}
#sub {
	float: none;
	width: 100%;
}
#sub .boxin{
	text-align: center;
}
#sub .boxin .boxnaka,#sub .boxin .boxnaka2{
	left: 20%;
	text-align: left;
}
#sub .lobox{
	font-size: 6vw;
}
#sub .loboxt{
	font-size: 7.5vw;
}
#sub .sideprott{
	font-size: 8.7vw;
}
#sub .cente{
	font-size: 5vw;
}
#sub .centett{
	font-size: 7.9vw;
}

/* ヘッダー */

.sp {
	display: block;
}

/* グローバルナビ */
	nav {
	display: block;
	position: relative;
	width: 100%;
}


nav h3 {
	cursor: pointer;
	margin-bottom: 0;
	color: #fff;
	background: #ff5a00;
	border: none;
}
nav h3:after {
	position: absolute;
	content: "\0025bc";
	top: 3px;
	right: 5px;
}
nav h3.menuOpen:after {
	position: absolute;
	content: "\0025b2";
	top: 3px;
	right: 5px;
}
nav ul {
	width:100%;
	flex-wrap:wrap;
}
nav li {
	width: 33.33%;
	margin: 0;
	padding: 5% 0 2%;
	list-style: none;
}
nav li:first-child a {
	width: 100%;
}
nav li a {
	display: block;
	width: 100%;
	border-bottom: 1px dotted #ddd;
	text-decoration: none;
}


.topslide .slide{
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}

/* トップページ */
	.prctBox {
	text-align: center;
	width: 100%;
}
.productbox .productboxeatt{
	font-size: 3.2vw;
}
.productbox .kokan{
	font-size: 1.7vw;
}
.productbox .kokant{
	font-size:  2.5vw;
}
.productbox .kokanb{
	font-size:  4.3vw;
}



.faqbox_q{
	background: #6ba56c;
}
.faq_asym{
	width: 10%;
	height: auto;
	padding-bottom: 2%;
	padding-top: 2%;
}
.faq_qsym{
	top: 5%;
	font-size: 3vw;
	width: 10%;
	height:auto;
	padding-top: 2%;
	padding-bottom: 2%;
}
	.faq_asym{
		font-size: 3vw;
}
.faq_qdt{
	padding: 3% 1% 3% 5%;

}


table.conform th,table.conform td{
 display: block;
 width: 100%;
}

.footmenu ul {
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	max-width: 90%;
	justify-content: flex-start;
}
.footmenu li {
	width: 50%;
}
.totop{
	bottom: 150px;
}
.copyright {
	padding-bottom: 120px;
}
}

/*==============================================================
 *  スマートフォン向けデザイン　480px以下 iPhone6縦等
 =============================================================*/
@media (max-width: 480px) {
	html{
		font-size: 60%;
	}
body {
	font-size: 1.6rem;
}
nav li{
	width: 50%;
	padding-top: 7%;
}
.headbubunlogo{
	margin-bottom: 5%;
}

#sub .boxnaka{
	font-size: 4.5vw;
}
#sub .boxnaka .chumoku{
	font-size: 5vw;
}
#sub .boxnaka2{
	font-size: 4vw;
}
#sub .boxnaka2 .chumoku{
	font-size: 4.5vw;
}
#sub .boxin .boxnaka,#sub .boxin .boxnaka2{
	left: 1%;
}
#sub .loboxt{
	font-size: 6vw;
}
#sub .lobox {
	font-size: 5vw;
}

.footmenu li {
	width: 100%;
}
.copyright {
	padding-bottom: 80px;
}
#topjirei .top_title{
	display: block;
}

.productin{
	width: 100%;
	text-align: center;
}

table.comta{
	border: none;
}
table.comta th,table.comta td{
	width: 100%;
	display: block;
}
table.comta th,table.comta td{
	border-bottom: none;
}
table.comta tr:last-child td{
	border-bottom: 1px solid #ccc;
}
table.prct{
	border: none;
}
table.prct .prcthead{
	display: none;
}
table.prct td, table.prct th{
	font-size: 1.6rem;
}
table.prct td,table.prct td::before,table.prct td.price{
	display :block;
	width: 100%;
}
table.prct td.price{
	font-size: 2rem
}
table.prct td.type{
	background: #333;
	color: #fff;
}
table.prct td.type::before{
	content:'タイプ';
}
table.prct td.kataban::before{
	content:"商品型番";
}
table.prct td.teika::before{
	content:"メーカー希望小売価格";
}

table.prct td.wari::before{
	content:"本体割引率";
}
table.prct td.price::before{
	content:"工事費込み当店価格(税別)";
}
table.prct td.price{
	margin-bottom: 5%;
}
}
/*******************
商品ページ
********************/
.products .hjh{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3%;
	background: #fff;

}
.products .hjh span{
	font-weight: bold;

}
.products .hjk{
	box-sizing: border-box;
	width: 40%;
	padding: 0.5% 5% 0.5% 1%;
	font-size: 20px;
	font-weight: bold;
	color: yellow;
	background: linear-gradient(#f40404,#ba0000);
	clip-path: polygon(0 0, 80% 0px, 100% 50%, 80% 100%, 0 100%);
	line-height: 2;
}
.products .hjt{
	font-size: 140%;
	display: grid;
	place-items: center;
}
.products .hjg{
	box-sizing: border-box;
	overflow: hidden;
	width: 58%;
	font-size: 88px;
	font-weight: bold;
	display: flex;
	position: relative;
	padding: 1.5%;
	justify-content: space-between;
}
.products .hjg::before{
	position: absolute;
	top: -2px;
	left:0;
	width: 100%;
	height: 100%;
	content: "";
	background: linear-gradient(#fc2500,#ba0000);
	mix-blend-mode: screen;

}
.products .hjg span.spefont{
	font-weight: normal;
}
.products .hje{
	font-size: 25%;
	font-weight: bold;
	line-height: 1.8;
}
.products .hkr{
	font-size: 50%;
	font-weight: bold;
}
.products br.hjchosei{
			display: none;
}
.products .spefont {
	font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}
@media screen and (max-width:1200px) and (min-width:768px) {
	.products br.hjchosei{
		    display: block;
	}

}



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


	.products .hjh{
		justify-content: center;
}
	.products .hjk{
		width: 60%;
		padding: 0.5% 0.5% 10% 0.5%;
		clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 98%, 0px 60%);
		margin-bottom: 3%;
	}
	.products .hjt{
		font-size: 140%;
	}
	.products .hjg{
		box-sizing: border-box;
		overflow: visible;
		width: 100%;
		font-size: 85px;
		justify-content: center;
	}
.products .hje{
	line-height: 2;

	}
}
	@media screen and (max-width:576px) {
		.products .hjk{
			font-size: 5vw;
}
		.products .hjg{
			font-size: 14vw;
		}


}


/************************
フロートバナー
***********************/
.contactsp{
	display: none;
}
@media screen and (max-width:767px) {
	.contactsp{
		display:flex;
		position: fixed;
		bottom: 0;
		left: 0;
		flex-wrap: wrap;
		width: 100%;
	}
}

.contactsp a{
	text-decoration: none;
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	display: grid;
	place-items: center;
	/*font-size: 18px; 電話・ラインあるの場合*/
	font-size: 25px;
	font-weight: bold;
	padding: 2%;

}
@media screen and (max-width:600px) {
	.contactsp a{
		font-size: 3vw; /*電話・ラインあるの場合*/
}
}
.contactsp a .smj{
	font-size: 60%;
}
.contactsp a:hover{
	background: #000;
	color: #fff;
}
a.ctdenwa{
	background: #0099ff;
	width: 45%;
	width: 50%;
}
a.ctweb{
	background: #c42082;
	width: 27.5%;
	width: 50%;
}
a.ctline{
	background: #00b900;
	width: 27.5%;
}
.contactsp_connomi a.ctweb{
	width: 100%;
}