@charset "UTF-8";
/*--------------------------------------------------------------
Reset
--------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

html {
  font-size: 62.5%;
  letter-spacing:1px;
  /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
  overflow-y: scroll;
  /* Keeps page centered in all browsers regardless of content height */
  -webkit-text-size-adjust: 100%;
  /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
  -ms-text-size-adjust: 100%;
  /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}

*,
*:before,
*:after {
  /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
  -webkit-box-sizing: border-box;
  /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
  -moz-box-sizing: border-box;
  /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
  box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

table {
  /* tables still need 'cellspacing="0"' in the markup */
  border-collapse: separate;
  border-spacing: 0;
}

caption,
th,
td {
  font-weight: normal;
  text-align: left;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}

blockquote,
q {
  quotes: "" "";
}

a:focus {
  outline: thin dotted;
}

a:hover,
a:active {
  outline: 0;
}

a img {
  border: 0;
}
/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
  letter-spacing:1px;
  color: #012433;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 16px;
  font-size: 1.4rem;
  line-height: 1.5;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  font-weight:600;
}

p {
  margin-bottom: 1.5em;
}

b,
strong {
  font-weight: bold;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

img{
	max-width:100%;
}

.sp_inline{
  display:none !important;
}
.pc_inline{
  display:inline !important;
}
.sp_block{
  display:none !important;
}
.pc_block{
  display:block !important;
}
.sp_flex{
  display:none !important;
}
.pc_flex{
  display:flex !important;
}

.contents_j_metal_roof .wrap{
	max-width:1000px;
	position:relative;
	margin:0 auto;
	padding:60px 0;
}

.contents_j_metal_roof .information{
	position:relative;
	background-image:url("../images/jmetal/kv_pc.png");
	background-size:50%;
	background-position:right 0 bottom 0;
	background-color:#F7F7F7;
	background-repeat:no-repeat;
	
}
.contents_j_metal_roof .information h2{
	font-size:20px;
	width:333px;
	
}
.contents_j_metal_roof .information h2 span{
	display:block;
	margin-bottom:10px;
}
.contents_j_metal_roof .information h2 .str{
	background:#012433;
	color:#ffffff;
	font-size:46px;
	padding:0 10px;
}
.contents_j_metal_roof .information .infor{
	width:394px;
	margin:47px 0 0;
}
.contents_j_metal_roof .information .infor h3{
	font-size:18px;
	border-bottom:solid 1px #BCBDBF;
	padding-bottom:10px;
	margin-bottom:10px;
}
.contents_j_metal_roof .information .infor p{
	line-height:2;
}

.contents_j_metal_roof .contact_fix {
	display:flex;
	position:fixed;
	width:100%;
	bottom:0;
	left:0;
	z-index:9999;
}
.contents_j_metal_roof .contact_fix .request{
	display:block;
	width:50%;
	background:#2A6BC3;
	color:#ffffff;
	font-size:20px;
	position:relative;
	text-decoration:none;
	height:93px;
}

.contents_j_metal_roof .contact_fix .request::before{
	content:'\f0e0';
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translateY(-50%);
    color: #ffffff;
    display: inline-block;
    font-size: 5.5rem;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;	
}
.contents_j_metal_roof .contact_fix .request::after{
	content:'→';
	color:#ffffff;
	position:absolute;
	right:25px;
	top:30px;
}
.contents_j_metal_roof .contact_fix .request img{
	position:absolute;
	bottom:0;
	right:60%;
	height:80px;
}
.contents_j_metal_roof .contact_fix .request span{
	position:absolute;
	right:120px;
	top:30px;
}

.contents_j_metal_roof .contact_fix .estimate{
	display:block;
	width:50%;
	background:#0F376E;
	color:#ffffff;
	font-size:20px;
	position:relative;
	text-decoration:none;
}
.contents_j_metal_roof .contact_fix .estimate::before{
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translateY(-50%);
    content: "";
    background: url(https://www.kawabatakawara.co.jp/images/top/cta_icon_01_pc.png) no-repeat center;
    background-size: contain;
    width: 40px;
    height: 56px;
    font-weight: 400;
}

.contents_j_metal_roof .contact_fix .estimate::after{
	content:'→';
	color:#ffffff;
	position:absolute;
	right:25px;
	top:30px;
}
.contents_j_metal_roof .contact_fix .estimate img{
	position:absolute;
	bottom:0;
	right:60%;
	height:80px;
}
.contents_j_metal_roof .contact_fix .estimate span{
	position:absolute;
	right:120px;
	top:30px;
}


.contents_j_metal_roof .contents_block{
	margin:100px 0;
}

.contents_j_metal_roof .contents_block .flo_block{
	float:left;
}

.contents_j_metal_roof .contents_block .flo_block.flo_ri{
	float:right;
}

.contents_j_metal_roof .contents_block .pc_title{
	display:block;
}
.contents_j_metal_roof .contents_block .sp_title{
	display:none;
}


.contents_j_metal_roof .contents_block.feature .wrap{
	max-width:1180px;
}
.contents_j_metal_roof .contents_block.feature .info{
	width:1000px;
	margin:0 auto;
}
.contents_j_metal_roof .contents_block.feature .info > img{
	width:640px;
}
.contents_j_metal_roof .contents_block.feature .info h3 img{
	width:233px;
}
.contents_j_metal_roof .contents_block.feature .info h3 > span{
	display:block;
	font-size:46px;
	margin:0 0 20px;

}
.contents_j_metal_roof .contents_block.feature .info h3 > span span{
	display:block;
	font-size:18px;
	margin-bottom:30px;
}

.contents_j_metal_roof .contents_block.feature .info p{
	font-size:16px;
	line-height:2;
}

.contents_j_metal_roof .contents_block.feature .items{
	background:#F7F7F7;
	margin-top:130px;
	position:relative;
	padding-bottom:50px;
}
.contents_j_metal_roof .contents_block.feature .item{
	max-width:1000px;
	margin:0 auto 130px;
	position:relative;
}
.contents_j_metal_roof .contents_block.feature .item:last-child{
	margin-bottom:0;
}
.contents_j_metal_roof .contents_block.feature .item h4{
	font-size:46px;
	position:relative;
	padding:80px 0 55px;
}
.contents_j_metal_roof .contents_block.feature .item h4 img{
	position:absolute;
	top:-80px;
	height:156px;
}

.contents_j_metal_roof .contents_block.feature .item .te_block{
	margin-bottom:90px;
}
.contents_j_metal_roof .contents_block.feature .item .te_block .flo_block{
	width:490px;
	margin:0 40px 0 0;
}
.contents_j_metal_roof .contents_block.feature .item .te_block .flo_block.flo_ri{
	margin:0 0 0 40px;
}
.contents_j_metal_roof .contents_block.feature .item .te_block .pc_block img{
	width:470px;
}

.contents_j_metal_roof .contents_block.feature .item .te_block .pc_block h5{
	font-size:24px;
	font-weight:500;
	line-height:1;
	margin-bottom:21px;
}
.contents_j_metal_roof .contents_block.feature .item .te_block .pc_block h5 span{
	background:#012433;
	color:#ffffff;
	display:inline-block;
	line-height:1;
	padding:7px;
}
.contents_j_metal_roof .contents_block.feature .item .te_block .pc_block p{
	font-size:16px;
	line-height:2;
}
.contents_j_metal_roof .contents_block.feature .item .te_block .pc_block .info_more{
	background:#ffffff;
	padding:30px;
	color:#707070;
	font-size:14px;
}
.contents_j_metal_roof .contents_block.feature .item .te_block .pc_block .info_more p{
	font-size:14px;
	line-height:1.8;
}
.contents_j_metal_roof .contents_block.feature .item .te_block .pc_block .info_more p span{
	font-size:20px;
	color:#012433;
	margin-left:10px;
	font-weight:bold;
}
.contents_j_metal_roof .contents_block.feature .item .te_block .pc_block .info_more p:last-child{
	margin-bottom:0;
}

.contents_j_metal_roof .contents_block.feature .item:nth-child(2) .te_block:nth-child(2) .pc_block{
	margin-bottom:-150px;
}
.contents_j_metal_roof .contents_block.feature .item:nth-child(2) .te_block:nth-child(2) .pc_block img{
	top:-120px;
	position:relative;
}

.contents_j_metal_roof .contents_block.feature .item:nth-child(2) .te_block:nth-child(3) .pc_block .flo_block{
	top:100px;
	position:relative;
}

.contents_j_metal_roof .contents_block.feature .item:nth-child(3) .te_block:nth-child(2) .pc_block{
	position:relative;
	margin-bottom:-250px;
}
.contents_j_metal_roof .contents_block.feature .item:nth-child(3) .te_block:nth-child(2) .pc_block img{
	top:-250px;
	position:relative;
}

.contents_j_metal_roof .contents_block.feature .item:nth-child(3) .te_block:nth-child(3) .pc_block .flo_block{
	top:50px;
	position:relative;
}
.contents_j_metal_roof .contents_block.feature .item:nth-child(3) .te_block:last-child{
	margin-bottom:0;
}


.contents_j_metal_roof .contents_block.guarantee .info{
	position:relative;
}
.contents_j_metal_roof .contents_block.guarantee .info > img{
	width:423px;
	position:absolute;
	right:0;
	top:-50px;
}
.contents_j_metal_roof .contents_block.guarantee .info h3 img{
	width:333px;
}
.contents_j_metal_roof .contents_block.guarantee .info h3 > span{
	display:block;
	font-size:46px;
	margin:0 0 20px;

}
.contents_j_metal_roof .contents_block.guarantee .info h3 > span span{
	display:block;
	font-size:18px;
	margin-bottom:30px;
}

.contents_j_metal_roof .contents_block.guarantee .info p{
	font-size:16px;
	line-height:2;
}
.contents_j_metal_roof .contents_block.guarantee .items{
	clear:both;
	padding: 80px  0 0;
	display:flex;
	align-items:flex-start;
	justify-content: space-between;
}

.contents_j_metal_roof .contents_block.guarantee .items .item{
	width:30%;
}

.contents_j_metal_roof .contents_block.guarantee .items .item h4{
	width:200px;
	height:200px;
	margin:0 auto;
	border-radius:100px;
	text-align:center;
	color:#ffffff;
	padding:50px 0 0;
	font-size:60px;
	line-height:1;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content: center;
	align-content:flex-start;
}
.contents_j_metal_roof .contents_block.guarantee .items .item:nth-child(1) h4{
	background:#2A6BC3;
}
.contents_j_metal_roof .contents_block.guarantee .items .item:nth-child(2) h4{
	background:#4A7EBA;
}
.contents_j_metal_roof .contents_block.guarantee .items .item:nth-child(3) h4{
	background:#1B4A89;
}

.contents_j_metal_roof .contents_block.guarantee .items .item h4 img{
	height:100px;
}
.contents_j_metal_roof .contents_block.guarantee .items .item h4 span:nth-child(1){
	display:block;
	font-size:24px;
	width:100%;
}
.contents_j_metal_roof .contents_block.guarantee .items .item h4 span.year{
	font-size:24px;
	margin:40px 0 0;
	display:block;
}

.contents_j_metal_roof .contents_block.guarantee .items .item p{
	margin:20px 0 0;
	line-height:2;
	font-size:16px;
}
.contents_j_metal_roof .contents_block.guarantee .caution{
	margin:50px 0 0;
	border-top:solid 1px #C3C3C3;
	padding:20px 0 0;
	font-size:12px;
}

.contents_j_metal_roof .contents_block.guarantee .caution span{
	color:#EF6532;
}

.contents_j_metal_roof .contents_block.compare{
	background:#F7F7F7;
	margin-bottom:0;
}
.contents_j_metal_roof .contents_block.compare .wrap{
	max-width:1000px;
	margin-top:100px;
	padding-bottom:100px;
}
.contents_j_metal_roof .contents_block.compare .info{
	position:relative;
}
.contents_j_metal_roof .contents_block.compare .info .flo_block{
	display:flex;
	align-items:flex-end;
	justify-content: space-between;
	width:100%;
}
.contents_j_metal_roof .contents_block.compare .info .flo_block p{
	width:413px;
}
.contents_j_metal_roof .contents_block.compare .info h3 img{
	width:285px;
}
.contents_j_metal_roof .contents_block.compare .info h3 > span{
	display:block;
	font-size:46px;
	margin:0 0 20px;

}
.contents_j_metal_roof .contents_block.compare .info h3 > span span{
	display:block;
	font-size:18px;
	margin-bottom:30px;
}

.contents_j_metal_roof .contents_block.compare .info p{
	font-size:16px;
	line-height:2;
}

.contents_j_metal_roof .contents_block.compare .listtable{
	clear:both;
	padding:80px 0 0;
	width:768px;
	margin:0 auto;
}
.contents_j_metal_roof .contents_block.compare .listtable table{
	width:100%;
	border-collapse:collapse;
	border:solid 1px #C3C3C3;
	font-size:16px;
}
.contents_j_metal_roof .contents_block.compare .listtable table img{
	display:block;
	margin:0 auto;
	width:24px;
}
.contents_j_metal_roof .contents_block.compare .listtable table th,
.contents_j_metal_roof .contents_block.compare .listtable table td{
	text-align:center;
	padding:23px 0;
	vertical-align:middle;
}
.contents_j_metal_roof .contents_block.compare .listtable table th{
	background:#EFEFEF;
	font-weight:bold;
	min-width:95px;
	border:solid 1px #C3C3C3;
}
.contents_j_metal_roof .contents_block.compare .listtable table th.jmetalroof,
.contents_j_metal_roof .contents_block.compare .listtable table td.jmetalroof{
	background:#F5FCFC;
	border-right:solid 3px #2A6BC3;
	border-left:solid 3px #2A6BC3;
}
.contents_j_metal_roof .contents_block.compare .listtable table th.jmetalroof{
	color:#2A6BC3;
}
.contents_j_metal_roof .contents_block.compare .listtable table tr:nth-child(1) th.jmetalroof{
	border-top:solid 3px #2A6BC3;
}
.contents_j_metal_roof .contents_block.compare .listtable table tr:last-child td.jmetalroof{
	border-bottom:solid 3px #2A6BC3;
}
.contents_j_metal_roof .contents_block.compare .listtable table td{
	border:solid 1px #C3C3C3;
	font-size:14px;
	font-weight:bold;
}
.contents_j_metal_roof .contents_block.compare .listtable table td.jmetalroof{
	border-top:solid 1px #C3C3C3;
	border-bottom:solid 1px #C3C3C3;
}

.contents_j_metal_roof .contents_block.compare .more_info{
	background:#ffffff;
	margin:20px 0;
	padding:20px 0;
	text-align:center;
	color:#2A6BC3;
	line-height:2;
	font-size:16px;
}
.contents_j_metal_roof .contents_block.compare .listtable .scroll-hint-icon-wrap{
	display:none;
}


.contents_j_metal_roof .contents_block.lineup{
	position:relative;
	margin:0;
	
}
.contents_j_metal_roof .contents_block.lineup .wrap{
	padding:0;
	width:100%;
	max-width:100%;
	background-image:url("../images/jmetal/img_lineup.png");
	background-size:540px;
	background-position:right 0 top 0;
	background-repeat:no-repeat;
	background-color:#012433;
}
.contents_j_metal_roof .contents_block.lineup .wrap .info{
	max-width:1180px;
	margin:0 auto;
	padding:60px 0 10px;
}
.contents_j_metal_roof .contents_block.lineup .info .flo_block{
	color:#ffffff;
	float:none;
}
.contents_j_metal_roof .contents_block.lineup  .info h3{
	font-size:20px;
	
}
.contents_j_metal_roof .contents_block.lineup .info{
	position:relative;
}
.contents_j_metal_roof .contents_block.lineup .info .flo_block{
	width:100%;
}
.contents_j_metal_roof .contents_block.lineup .info .flo_block p{
}
.contents_j_metal_roof .contents_block.lineup .info h3 img{
	width:285px;
}
.contents_j_metal_roof .contents_block.lineup .info h3 > span{
	display:block;
	font-size:46px;
	margin:0 0 20px;

}
.contents_j_metal_roof .contents_block.lineup .info h3 > span span{
	display:block;
	font-size:18px;
	margin-bottom:30px;
}

.contents_j_metal_roof .contents_block.lineup .info p{
	font-size:16px;
	line-height:2;
}

.contents_j_metal_roof .contents_block.lineup .items{
	background:#ffffff;
}

.contents_j_metal_roof .contents_block.lineup .items .item{
	width:768px;
	margin:0 auto 0;
	padding:80px 0 0;
}
.contents_j_metal_roof .contents_block.lineup .items .item h4{
	text-align:center;
	font-size:38px;
}
.contents_j_metal_roof .contents_block.lineup .items .item h4 span{
	font-size:20px;
	display:block;
}
.contents_j_metal_roof .contents_block.lineup .items .item h4 span.more_info{
	font-size:16px;
	color:#949CA0;
}

.contents_j_metal_roof .contents_block.lineup .items .item h4 img{
	width:620px;
	display:block;
	margin:0 auto 20px;
}


.contents_j_metal_roof .contents_block.lineup .items .item .details{
	margin:50px 0;
}

.contents_j_metal_roof .contents_block.lineup .items .item .details .detail{
	margin-bottom:50px;

}
.contents_j_metal_roof .contents_block.lineup .items .item .details .detail h5{
	font-size:18px;
	padding-bottom:16px;
	border-bottom:solid 1px #C3C3C3;
	margin-bottom:30px;
}

.contents_j_metal_roof .contents_block.lineup .items .item .details .detail ul{
	display:flex;
	justify-content: space-around;
}
.contents_j_metal_roof .contents_block.lineup .items .item .details .detail ul li{
	width:28%;
	text-align:center;
}
.contents_j_metal_roof .contents_block.lineup .items .item .details .detail ul.four li{
	width:22%;
}
.contents_j_metal_roof .contents_block.lineup .items .item .details .detail p{
	font-size:16px;
}

.contents_j_metal_roof .contents_block.lineup .items .item .details .detail.jirei{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items:center;

}
.contents_j_metal_roof .contents_block.lineup .items .item .details .detail.jirei h5{
	width:100%;
}
.contents_j_metal_roof .contents_block.lineup .items .item .details .detail.jirei .before,
.contents_j_metal_roof .contents_block.lineup .items .item .details .detail.jirei .after{
	width:46%;
	text-align:center;
	font-size:16px;
	padding-bottom:5px;
}
.contents_j_metal_roof .contents_block.lineup .items .item .details .detail.jirei .before{
	background:#DEDEDE;
}
.contents_j_metal_roof .contents_block.lineup .items .item .details .detail.jirei .after{
	background:#012433;
	color:#ffffff;
}

.contents_j_metal_roof .contents_block.lineup .items .item .details .detail.jirei > span{
	font-size:20px;
}


.contents_j_metal_roof .contents_block.works{
	background:#F7F7F7;
	margin-bottom:0;
}
.contents_j_metal_roof .contents_block.works .wrap{
	max-width:1000px;
	margin-top:100px;
	padding-bottom:100px;
}
.contents_j_metal_roof .contents_block.works .info{
	position:relative;
}
.contents_j_metal_roof .contents_block.works .info .flo_block{
	width:100%;
	float:none;
}
.contents_j_metal_roof .contents_block.works .info .flo_block h3{
	width:100%;
	text-align:center;
}
.contents_j_metal_roof .contents_block.works .info h3 img{
	width:194px;
}
.contents_j_metal_roof .contents_block.works .info h3 > span{
	display:block;
	font-size:18px;
	margin:0 0 20px;

}
.contents_j_metal_roof .contents_block.works .items .item{
	border-top:solid 1px #C3C3C3;
	margin:40px 0 0;
	padding:40px 0 0;
}

.contents_j_metal_roof .contents_block.works .items .item h4{
	display:flex;
	align-items:center;
	justify-content: center;
}

.contents_j_metal_roof .contents_block.works .items .item h4 img:first-child{
	width:94px;
}
.contents_j_metal_roof .contents_block.works .items .item h4 .title{
	margin:0 174px 0 32px;
	font-size:24px;
	font-weight:bold;
	line-height:1.1;
}
.contents_j_metal_roof .contents_block.works .items .item h4 .title span{
	border-radius:10px;
	padding:2px 10px;
	line-height:1;
	color:#ffffff;
	font-size:14px;
	font-weight:normal;
}
.contents_j_metal_roof .contents_block.works .items .item h4 .title span.charcoal{
	background:#4F4F4D;
}
.contents_j_metal_roof .contents_block.works .items .item h4 .title span.cheek{
	background:#6E5A46;
}
.contents_j_metal_roof .contents_block.works .items .item h4 .title span.rosso{
	background:#7B4442;
}
.contents_j_metal_roof .contents_block.works .items .item .detail{
	margin:40px 0 80px;
	display:flex;
	justify-content: space-between;
	align-items:center;
}
.contents_j_metal_roof .contents_block.works .items .item .detail:last-child{
	margin:40px 0;
}
.contents_j_metal_roof .contents_block.works .items .item .detail .before,
.contents_j_metal_roof .contents_block.works .items .item .detail .after{
	text-align:center;
	font-size:16px;
	padding-bottom:5px;
}
.contents_j_metal_roof .contents_block.works .items .item .detail .before{
	background:#DEDEDE;
	width:395px;
}
.contents_j_metal_roof .contents_block.works .items .item .detail .after{
	background:#012433;
	color:#ffffff;
	width:565px;
}

.contents_j_metal_roof .contents_block.works .items .item .detail > span{
	font-size:20px;
}

.contents_j_metal_roof .contents_block.contact{
	margin-bottom:100px;
}
.contents_j_metal_roof .contents_block.contact .wrap{
	max-width:1000px;
	margin-top:100px;
	padding-bottom:100px;
}
.contents_j_metal_roof .contents_block.contact .info{
	position:relative;
}
.contents_j_metal_roof .contents_block.contact .info .flo_block{
	display:flex;
	align-items:flex-end;
	justify-content: space-between;
	width:100%;
}
.contents_j_metal_roof .contents_block.contact .info .flo_block p{
}
.contents_j_metal_roof .contents_block.contact .info h3 img{
	width:285px;
}
.contents_j_metal_roof .contents_block.contact .info h3 > span{
	display:block;
	font-size:46px;
	margin:0 0 20px;

}
.contents_j_metal_roof .contents_block.contact .info h3 > span span{
	display:block;
	font-size:18px;
	margin-bottom:30px;
}

.contents_j_metal_roof .contents_block.contact .info p{
	font-size:16px;
	line-height:2;
}
.contents_j_metal_roof .contents_block.contact .content{
	clear:both;
	padding:30px 0;
}
.contents_j_metal_roof .contents_block.contact .content a{
	display:block;
	background:#0F376E;
	color:#ffffff;
	font-size:20px;
	font-weight:bold;
	padding:30px;
	text-align:center;
	text-decoration:none;
	position:relative;
	margin-bottom:30px;
}

.contents_j_metal_roof .contents_block.contact .content a::after{
	content:'→';
	color:#ffffff;
	position:absolute;
	right:25px;
	top:30px;
}

.contents_j_metal_roof .contents_block.contact .content ul{
	display:flex;
	justify-content: space-around;
}
.contents_j_metal_roof .contents_block.contact .content ul li{
	padding:0 20px;
	width:30%;
	text-align:center;
}
.contents_j_metal_roof .contents_block.contact .content ul li:nth-child(2){
	border-left:solid 1px #C3C3C3;
	border-right:solid 1px #C3C3C3;
}

.cta-floating{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;z-index:999;box-sizing:border-box; max-width:660px;}
.cta-floating a{text-decoration:none;}
.cta-floating__contents{width:100%;box-sizing:border-box;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}
.cta-floating__bg{width:100%;position:absolute;left:0;bottom:0;height:50px;background:#0e4077;z-index:1}
.cta-floating__button{width:100%;position:relative;z-index:2}
.cta-floating__button__title{font-size:1.4rem;line-height:1.4rem;letter-spacing:0.5px;font-weight:400;color:#fff;box-sizing:border-box;padding:5px 0 7px;text-align:center;margin-bottom:0;}
.cta-floating__button__title br{display:none}
@media screen and (max-width:1024px){.cta-floating__button__title{font-size:1.3rem;line-height:1.3rem;padding:5px 0 6px}
}
@media screen and (max-width:767px){.cta-floating__button__title{font-size:1.2rem;line-height:1.2rem;padding:5px 0 5px}
.cta-floating__button__title span{display:none}
}
@media (max-width:370px){.cta-floating__button__title{font-size:1.1rem;line-height:1.1rem;padding:4px 0 5px}
}
.cta-floating__button__position-img{position:absolute;bottom:0;left:0;z-index:2}
@media screen and (max-width:1024px){.cta-floating__button__position-img{left:0;width:65px}
}
@media screen and (max-width:767px){.cta-floating__button__position-img{left:0;bottom:0;width:50px}
}
@media (max-width:425px){.cta-floating__button__position-img{width:45px}
}
.cta-floating__button__list{width:100%;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;box-sizing:border-box}
.cta-floating__button__item{display:inline-block;position:relative;box-sizing:border-box;width:50%}
@media screen and (max-width:1024px){.cta-floating__button__item{width:50%}
}
@media screen and (max-width:767px){.cta-floating__button__item{width:50%}
}
.cta-floating__button__item__link{width:100%;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex}
@media screen and (max-width:767px){.cta-floating__button__item__link{border:none}
}
.cta-floating__button__item__link__text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:50px;background:#fff;font-size:1.8rem;font-weight:500;color:#fff;line-height:1.8rem;position:relative;margin-bottom:0;}
.cta-floating__button__item__link__text .sp_br{display:none}
@media screen and (max-width:1024px){.cta-floating__button__item__link__text{height:45px;font-size:1.6rem;line-height:1.6rem}
}
@media screen and (max-width:767px){.cta-floating__button__item__link__text{font-size:1.2rem;line-height:1.4rem;height:50px;letter-spacing:0}
}
@media (max-width:374px){.cta-floating__button__item__link__text{height:50px}
.cta-floating__button__item__link__text .sp_br{display:inline-block}
}
@media (max-width:370px){.cta-floating__button__item__link__text{font-size:1.2rem;letter-spacing:0.5px;line-height:1.3rem}
}
.cta-floating__button__item__text{box-sizing:border-box;padding-bottom:20px;padding-top:3px;font-size:1.6rem;font-weight:400;color:#0a0056;text-align:center;text-shadow:0px 4px 1px #fff, 1px 3px 1px #fff, 2px 3px 1px #fff, 2px 2px 1px #fff, 3px 2px 1px #fff, 3px 1px 1px #fff, 4px 0px 1px #fff, 3px -1px 1px #fff, 3px -2px 1px #fff, 2px -2px 1px #fff, 2px -3px 1px #fff, 1px -3px 1px #fff, 0px -4px 1px #fff, -1px -3px 1px #fff, -2px -3px 1px #fff, -2px -2px 1px #fff, -3px -2px 1px #fff, -3px -1px 1px #fff, -4px 0px 1px #fff, -3px 1px 1px #fff, -3px 2px 1px #fff, -2px 2px 1px #fff, -2px 3px 1px #fff, -1px 3px 1px #fff}
@media screen and (max-width:1024px){.cta-floating__button__item__text{font-size:1.3rem;padding-bottom:15px;padding-top:2px}
}
@media screen and (max-width:767px){.cta-floating__button__item__text{display:none}
}
.cta-floating__button__item:nth-child(1){background:#fff;border:1px solid #101010;border-right:none}
@media screen and (max-width:767px){.cta-floating__button__item:nth-child(1){width:50%}
}
@media screen and (max-width:767px){.cta-floating__button__item:nth-child(1) a{border-radius:0}
}
.cta-floating__button__item:nth-child(1) a p{background:#fff;padding-left:30px;color:#1b1b1b}
@media screen and (max-width:767px){.cta-floating__button__item:nth-child(1) a p{border-radius:0;padding-left:10%}
}
@media (max-width:425px){.cta-floating__button__item:nth-child(1) a p{letter-spacing:-0.5px}
}
.cta-floating__button__item:nth-child(1) a p:before{position:absolute;top:50%;left:28%;transform:translateY(-50%);content:"";color:#c39b65;display:inline-block;font-size:2.5rem;font-family:"Font Awesome 5 Free";font-weight:900}
@media screen and (max-width:1024px){.cta-floating__button__item:nth-child(1) a p:before{font-size:2.3rem}
}
@media screen and (max-width:767px){.cta-floating__button__item:nth-child(1) a p:before{left:calc( 50% - 5rem );font-size:1.8rem}
}
@media (max-width:370px){.cta-floating__button__item:nth-child(1) a p:before{left:calc( 50% - 5rem );font-size:1.6rem}
}
.cta-floating__button__item:nth-child(2){margin-right:0;background:#fff;border-radius:0;border:1px solid #101010;overflow:hidden}
@media screen and (max-width:767px){.cta-floating__button__item:nth-child(2){width:50%;border-radius:0}
}
.cta-floating__button__item:nth-child(2) a p{background:#fff;color:#1b1b1b;padding-left:30px}
@media screen and (max-width:767px){.cta-floating__button__item:nth-child(2) a p{padding-left:10%}
}
@media (max-width:425px){.cta-floating__button__item:nth-child(2) a p{letter-spacing:-0.5px}
}
.cta-floating__button__item:nth-child(2) a p:before{position:absolute;top:50%;left:28%;transform:translateY(-50%);content:"";background:url(https://www.kawabatakawara.co.jp/images/top/cta_icon_01_pc.png) no-repeat center;background-size:contain;width:30px;height:28px;font-weight:400}
@media screen and (max-width:1024px){.cta-floating__button__item:nth-child(2) a p:before{width:27px;height:24px}
}
@media screen and (max-width:767px){.cta-floating__button__item:nth-child(2) a p:before{left:calc( 50% - 5rem );width:22px;height:20px}
}
@media (max-width:370px){.cta-floating__button__item:nth-child(2) a p:before{left:calc( 50% - 5rem );width:18px;height:17px}
}


@media screen and (max-width: 1180px) {
	.contents_j_metal_roof .contents_block.feature .wrap{
		width:100%;
	}
	.contents_j_metal_roof .contents_block.lineup .wrap .info{
		width:100%;
	}
}
@media screen and (max-width: 1000px) {
	.contents_j_metal_roof .wrap{
		width:100%;
	}
	.contents_j_metal_roof .contents_block.feature .info{
		width:100%;
	}
	.contents_j_metal_roof .contents_block.feature .info > img{
		max-width:50%;
	}
	.contents_j_metal_roof .contents_block.feature .item:first-child .te_block .pc_block{
		overflow:hidden;
	}
	.contents_j_metal_roof .contents_block.feature .item .te_block .flo_block{
		max-width:48%;
		margin-right:2%;
	}
	.contents_j_metal_roof .contents_block.feature .item .te_block .flo_block.flo_ri{
		margin-left:2%;
	}
	.contents_j_metal_roof .contents_block.feature .item .te_block .pc_block img{
		max-width:50%;
	}
	.contents_j_metal_roof .contents_block.feature .item{
		width:100%;
	}
	.contents_j_metal_roof .contents_block.compare .wrap{
		width:100%;
	}
	.contents_j_metal_roof .contents_block.works .wrap{
		width:100%;
	}
	.contents_j_metal_roof .contents_block.contact .wrap{
		width:100%;
	}
}

@media screen and (max-width: 768px) {
	.sp_inline{
	  display:inline !important;
	}
	.pc_inline{
	  display:none !important;
	}
	.sp_block{
	  display:block !important;
	}
	.pc_block{
	  display:none !important;
	}
	.sp_flex{
	  display:flex !important;
	}
	.pc_flex{
	  display:none !important;
	}
	.contents_j_metal_roof .wrap{
		padding:60px 0 0;
	}
	.contents_j_metal_roof .wrap h2{
		width:100%;
		padding:0 20px;
		text-align:center;
	}
	.contents_j_metal_roof .information{
		background-image:none;
	}
	.contents_j_metal_roof .information h2{
		font-size:5.5vw;
	}
	.contents_j_metal_roof .information h2 .str{
		display:inline-block;
		font-size:12vw;
	}
	.contents_j_metal_roof .information .infor{
		margin:0 20px;
		width:calc( 100% - 40px );
	}
	.contents_j_metal_roof .information .infor h3{
		text-align:center;
	}
	.contents_j_metal_roof .contact_fix{
		padding:0;
	}
	.contents_j_metal_roof .contact_fix .request{
		width:50%;
		height:50px;
		padding:0 20px;
	}
	.contents_j_metal_roof .contact_fix .request::after{
		top:12px;
		right:20px;
	}
	.contents_j_metal_roof .contact_fix .request img{
		left:0;
		height:40px;
	}
	.contents_j_metal_roof .contact_fix .request span{
		left:40%;
		top:16px;
		font-size:4vw;
		width:100%;
		display:block;
	}
	.contents_j_metal_roof .contact_fix .estimate{
		height:50px;
	}
	.contents_j_metal_roof .contact_fix .estimate::after{
		top:12px;
		right:1%;
	}
	.contents_j_metal_roof .contact_fix .estimate img{
		right:auto;
		height:40px;
	}
	.contents_j_metal_roof .contact_fix .estimate span{
		right:9vw;
		top:6px;
		font-size:4vw;
		line-height:1.2;
	}
	.contents_j_metal_roof .contents_block{
		margin-top:50px;
	}
	.contents_j_metal_roof .contents_block .pc_title{
		display:none !important;
	}
	.contents_j_metal_roof .contents_block.feature .wrap{
		margin:0 20px;
		width:calc( 100% - 40px );
	}
	.contents_j_metal_roof .contents_block.feature .info h3 > span{
		font-size:9.4vw;
	}
	.contents_j_metal_roof .contents_block.feature .info h3 img{
		display:block;
		height:155px;
		width:auto;
		position:absolute;
		right:0;
		
	}
	.contents_j_metal_roof .contents_block.feature .info > img{
		max-width:100%;
	}
	
	.contents_j_metal_roof .contents_block.feature .info p{
		margin-bottom:1em;
	}
	.contents_j_metal_roof .contents_block.feature .item h4{
		text-align:center;
		font-size:38px;
	}
	
	.contents_j_metal_roof .contents_block.feature .item h4 img{
		height:130px;
		left:26%;
	}
	
	.contents_j_metal_roof .contents_block.feature .item .te_block .sp_block{
		margin:0 20px;
	}
	.contents_j_metal_roof .contents_block.feature .item .te_block .sp_block h5{
		font-size:20px;
		font-weight:500;
		line-height:1;
		margin-bottom:21px;
		margin:0 auto;
	}
	.contents_j_metal_roof .contents_block.feature .item .te_block .sp_block h5 span{
		background:#012433;
		color:#ffffff;
		display:inline-block;
		line-height:1.5;
		padding:7px;
		font-size:4.4vw;
	}
	.contents_j_metal_roof .contents_block.feature .item .te_block .sp_block p{
		font-size:4vw;
		line-height:1.8;
	}
	.contents_j_metal_roof .contents_block.feature .item .te_block .sp_block > img{
		margin:20px 0;
	}
	.contents_j_metal_roof .contents_block.feature .item .te_block .sp_block .info_more{
		background:#ffffff;
		padding:30px;
		color:#707070;
		font-size:14px;
	}
	.contents_j_metal_roof .contents_block.feature .item .te_block .sp_block .info_more p{
		font-size:16px;
		line-height:1.8;
	}
	.contents_j_metal_roof .contents_block.feature .item .te_block .sp_block .info_more p:first-child{
		text-align:center;
	}
	.contents_j_metal_roof .contents_block.feature .item .te_block .sp_block .info_more p span{
		font-size:5.5vw;
		color:#012433;
		margin-left:10px;
		font-weight:bold;
		display:block;
	}
	.contents_j_metal_roof .contents_block.feature .item .te_block .sp_block .info_more p:last-child{
		margin-bottom:0;
	}

	
	
	.contents_j_metal_roof .contents_block.guarantee .flo_block{
		position:relative;
		z-index:2;
	}
	.contents_j_metal_roof .contents_block.guarantee .info{
		width:calc( 100% - 40px );
		margin:0 20px;
	}
	.contents_j_metal_roof .contents_block.guarantee .info > img{
		position:absolute;
		right:-20px;
		width:60%;
	}
	.contents_j_metal_roof .contents_block.guarantee .info h3 img{
		width:70%;
	}
	.contents_j_metal_roof .contents_block.guarantee .info h3 > span{
		font-size:9.4vw;
	}
	.contents_j_metal_roof .contents_block.guarantee .items{
		flex-wrap:wrap;
		padding-top:50px;
	}
	.contents_j_metal_roof .contents_block.guarantee .items .item h4{
		max-width:100%;
		width:30%;
		border-radius:0;
		display:flex;
		align-items:center;
		align-content:center;
		height:auto;
	}	

	.contents_j_metal_roof .contents_block.guarantee .items .item{
		width:100%;
		display:flex;
	}
	.contents_j_metal_roof .contents_block.guarantee .items .item h4 span:nth-child(1){
		font-size:18px;
	}
	.contents_j_metal_roof .contents_block.guarantee .items .item h4 img{
		height:70px;
	}
	.contents_j_metal_roof .contents_block.guarantee .items .item p{
			width:68%;
		padding:10px;
		margin:0;
		border-bottom:solid 1px #C3C3C3;
	}
	.contents_j_metal_roof .contents_block.guarantee .items .item h4 span.year{
		margin:20px 0 0;
	}
	.contents_j_metal_roof .contents_block.guarantee .caution{
		margin:20px;
		border-top:0;
		padding:0;
		font-size:14px;
	}

	.contents_j_metal_roof .contents_block.compare .info .flo_block{
		display:block;
		padding:0 20px;
	}
	.contents_j_metal_roof .contents_block.compare .info h3 > span{
		font-size:9.4vw;

	}
	
	.contents_j_metal_roof .contents_block.compare .info h3 img{
		display:block;
		height:155px;
		width:auto;
		position:absolute;
		right:0;
		
	}
	.contents_j_metal_roof .contents_block.compare .info .flo_block p{
		width: 100%;
	}
	
	
	.contents_j_metal_roof .contents_block.compare .listtable{
		width:100%;
	}
	.contents_j_metal_roof .contents_block.compare .listtable table{
		width:768px;
	}
	.contents_j_metal_roof .contents_block.compare .listtable .scroll-hint-icon-wrap{
		display:block;
	}
	.contents_j_metal_roof .contents_block.compare .more_info{
		margin:30px 20px;
		padding:30px;
		text-align:left;
	}
	.contents_j_metal_roof .contents_block.compare .wrap{
		padding-bottom:50px;
	}
	.contents_j_metal_roof .contents_block.lineup .info .flo_block{
		padding:50px 20px;
	}
	.contents_j_metal_roof .contents_block.lineup .info h3 > span {
		font-size:9.4vw;
	}
	.contents_j_metal_roof .contents_block.lineup .info h3 > span span{
		margin-bottom:10px;
	}
	.contents_j_metal_roof .contents_block.lineup .info h3 > img{
		position:absolute;
		right:0;
		height:157px;
		width:auto;
		display:block;
	}
	.contents_j_metal_roof .contents_block.lineup .info p{
		font-size:15px;
	}
	.contents_j_metal_roof .contents_block.lineup .lineup_menu{
		background:#ffffff;
		padding:20px;
		display:flex;
		justify-content: space-between;
	}
	.contents_j_metal_roof .contents_block.lineup .lineup_menu li{
		width:33%;
		padding:0 3%;
		text-align:center;
	}
	.contents_j_metal_roof .contents_block.lineup .lineup_menu li:nth-child(2){
		border-left:solid 1px #C3C3C3;
		border-right:solid 1px #C3C3C3;
	}
	.contents_j_metal_roof .contents_block.lineup .lineup_menu li a{
		text-decoration:none;
		color:#2A6BC3;
		
	}
	.contents_j_metal_roof .contents_block.lineup .lineup_menu li a span{
		background:#2A6BC3;
		border-radius:20px;
		width:28px;
		height:28px;
		color:#ffffff;
		display:block;
		margin:10px auto;
		text-align:center;
		padding:2px 0 0;
	}
	.contents_j_metal_roof .contents_block.lineup .items{
		padding:0 20px;
	}
	.contents_j_metal_roof .contents_block.lineup .items .item{
		width:100%;
	}
	.contents_j_metal_roof .contents_block.lineup .items .item .details .detail.jirei .before,
	.contents_j_metal_roof .contents_block.lineup .items .item .details .detail.jirei .after{
		width:100%;
	}
	.contents_j_metal_roof .contents_block.lineup .items .item .details .detail.jirei > span{
		transform:rotate(90deg);
		text-align:center;
		width:100%;
		margin:10px 0;
	}
	.contents_j_metal_roof .contents_block.lineup .wrap{
		background-image:none;
	}
	.contents_j_metal_roof .contents_block.lineup .wrap .info{
		padding:0 0 60px;
	}
	.contents_j_metal_roof .contents_block.works .wrap{
		padding-top:80px;
		padding-bottom:60px;
	}
	.contents_j_metal_roof .contents_block.works .items .item{
		padding:0 20px;
	}
	.contents_j_metal_roof .contents_block.works .items .item h4 img,
	.contents_j_metal_roof .contents_block.works .items .item h4 img:first-child{
		width:80px;
	}
	.contents_j_metal_roof .contents_block.works .items .item h4 img.sample{
		margin:20px 0 0;
		width:100%;
	}
	.contents_j_metal_roof .contents_block.works .items .item h4 .title{
		margin:0 0 0 12px;
	}
	.contents_j_metal_roof .contents_block.works .items .item h4{
		flex-wrap:wrap;
		
	}
	.contents_j_metal_roof .contents_block.works .items .item .detail{
		display:block;
	}
	.contents_j_metal_roof .contents_block.works .items .item .detail .before,
	.contents_j_metal_roof .contents_block.works .items .item .detail .after{
		width:100%;
	}
	.contents_j_metal_roof .contents_block.works .items .item .detail span{
		transform:rotate(90deg);
		text-align:center;
		width:100%;
		margin:10px 0;
		display:block;
	}
	.contents_j_metal_roof .contents_block.contact{
		margin-bottom:50px;
	}
	.contents_j_metal_roof .contents_block.contact .info{
		padding:0 20px;
	}
	.contents_j_metal_roof .contents_block.contact .info .flo_block{
		display:block;
	}
	.contents_j_metal_roof .contents_block.contact .info h3{
		font-size:9.4vw;
	}
	.contents_j_metal_roof .contents_block.contact .info h3 > span{
		font-size:9.4vw;
	}
	
	.contents_j_metal_roof .contents_block.contact .info h3 > span span{
		margin-bottom:10px;
	}
	
 	.contents_j_metal_roof .contents_block.contact .info h3 img{
		display:block;
		height:155px;
		width:auto;
		position:absolute;
		right:0;
		
	}
	.contents_j_metal_roof .contents_block.contact .info .flo_block p{
		width: calc( 100% - 40px );
		margin:20px;
	}
	
	.contents_j_metal_roof .contents_block.contact .content{
		padding:30px 20px;
	}
	.contents_j_metal_roof .contents_block.contact .content a{
		margin-bottom:10px;
	}
	.contents_j_metal_roof .contents_block.contact .content ul{
		display:block;
	}
	.contents_j_metal_roof .contents_block.contact .content ul li{
		width:100%;
		text-align:left;
		padding:10px;
	}
	.contents_j_metal_roof .contents_block.contact .content ul li:nth-child(2){
		border-top:solid 1px #C3C3C3;
		border-bottom:solid 1px #C3C3C3;
		border-left:none;
		border-right:none;
		
	}
	.contents_j_metal_roof .contents_block.contact .wrap{
		padding-bottom:0;
	}
	.contents_j_metal_roof .contact_fix .request span{
		left:30%;
		top:50%;
		transform: translateY(-50%);
		font-size:3.5vw;
	}
	.contents_j_metal_roof .contact_fix .request::before{
	    left: 10%;
	    font-size:6vw;
	}
	.contents_j_metal_roof .contact_fix .request::after{
		top:50%;
		transform: translateY(-50%);
	}
	.contents_j_metal_roof .contact_fix .estimate span{
		left:40%;
		top:50%;
		transform: translateY(-50%);
		font-size:3.5vw;
	}
	.contents_j_metal_roof .contact_fix .estimate::before{
	    left: 10%;
	    font-size:6vw;
	}
	.contents_j_metal_roof .contact_fix .estimate::after{
		top:50%;
		transform: translateY(-50%);
	}

}