/* WEB FONT ------------------------------------------------------------------ */
/*
■Noto Sans JP
 https://fonts.google.com/specimen/Noto+Serif+JP
 font-family: 'Noto Serif JP', serif;
 font-weight: 500;
 ■Noto Sans JP
 https://fonts.google.com/specimen/Noto+Sans+JP
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 500;もしくはfont-weight: 700;
 ■Roboto
 https://fonts.google.com/specimen/Roboto
 font-family: 'Roboto', sans-serif;
 font-weight: 400;もしくはfont-weight: 500;
 ■Open Sans
 https://fonts.google.com/specimen/Open+Sans
 font-family: 'Open Sans', sans-serif;
 font-weight: 400;もしくはfont-weight: 700;
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:500,700|Roboto&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
@charset "shift_jis";
/* CSS Document */
.contentholder .swiper-pagination {
	position: static;
	margin-top: 5px;
}
.contentholder .swiper-pagination-bullet {
	background-color: #a5a5a5;
	height: 10px;
	width: 10px;
	opacity: 1;
	margin: 0 9px;
	vertical-align: middle;
}
.contentholder .swiper-pagination-bullet-active {
	border: 2px solid #a5a5a5;
	background-color: #FFF;
	height: 14px;
	width: 14px;
}

/* PC */
@media print, screen and (min-width:768px) {
h1.roof {
	background: url(../images/roof/sttl_roof.webp) no-repeat 0 0;
	width: 770px;
	height: 46px;
	text-indent:-9999px;
	overflow: hidden;
}
	
	
.contentholder .swiper-slide{
	width:967px;
	height: 490px;
	position: relative;
}
	.contentholder .swiper-slide > img{
		height: auto;
		width: 100%;
	}
.contentholder .swiper-slide > div{
	position: absolute;
	right: 0;
	bottom: 28px;
	height: 27px;
	width: 100%;
}
.contentholder .swiper-slide > div > div{
	position: absolute;
}
.contentholder .swiper-slide > div > div > a{
	overflow: hidden;
	display: block;
	height: 27px;
	width: 150px;
	border: 1px solid #FFF;
	text-align: center;
	color: #FFF;
	text-decoration: none;
	background-color: #282828;
	line-height: 27px;
}
.contentholder .swiper-slide > div > div > a:hover {
	background-color: #3C3C3C;
	}

.slide_btn1{
	right: 178px;
	bottom:63px;
}
.slide_btn2{
	right: 18px;
	bottom: 63px;
}

	
	
	
	
#roofSlide {
}
#roofSlide img {
	height: auto;
	width: 100%;
}
	
	
	

#roofSubList {
	margin-top: 20px;
	margin-bottom: 40px;
}
.textList {
	font-size: 0;
}
.textList li {
	font-size: 14px;
	text-align: center;
	display: inline-block;
	vertical-align: top;
	margin: 0 20px 20px 0;
	width: calc((100% - 20px)/2);
	box-sizing: border-box;
}
.textList li:nth-child(2n) {
	margin: 0;
}
.textList.col03 li {
	width: calc((100% - 40px)/3);
}
.textList.col03 li:nth-child(2n) {
	margin: 0 20px 20px 0;
}
.textList.col03 li:nth-child(3n) {
	margin: 0;
}
.textList li > a {
	border: #2c6890 1px solid;
	display: block;
	padding: 15px;
}
.textList li.ippan > a {
	border: #64bbba 1px solid;
	background-color: #64bbba;
}
.textList li.kanrei > a {
	border: #6f93cc 1px solid;
	background-color: #6f93cc;
}
.textList li.gray > a {
	border: none;
	background-color: #ededed;
}
.textList li > a {
	font-size: 17px;
	color: #2c6890;
}

.textList li > a:hover {
	opacity: 0.8;
}
.textList .pd a{
    display: block;
    background-color: #FF9829;
    border: 1px solid #FF9829;
    color: #FFF;
}
.textList .gray a{
	display: block;
	background-color: #EDEDED;
	padding: 20px;
	color: #006893;
	}

.imgBannerList1 {
	margin-bottom: 60px;
}
.imgBannerList2 {
	font-size: 0;
}
.imgBannerList2 > li {
	display: inline-block;
	vertical-align: top;
	margin-right: 10px;
	margin-bottom: 20px;
	position: relative;
    width: calc(50% - 5px);
}
.imgBannerList2 > li:nth-child(2n) {
	margin-right: 0;
}
.imgBannerList2 p span {
	font-size: 20px;
	margin-right: 20px;
}
.imgBannerList2 li p.date {
	position: absolute;
	right: 0;
	top: 150px;
	color: #FF0000;
}
.imgBannerList4 {
	font-size: 0;
}
.imgBannerList4 > li {
	display: inline-block;
	vertical-align: top;
	font-size: 14px;
	margin-right: 10px;
	margin-bottom: 10px;
	position: relative;
}
.imgBannerList4 > li:nth-child(4n) {
	margin-right: 0;
}
	h2.series{
	  font-size: 28px;
    font-weight: normal;
    color: #999;
    margin-bottom: 20px;
		margin-top: 20px;
	}
hr.nomal {
	border: none;
	border-top: #CCC 1px solid;
	margin: 50px 0;
}
}

/* SP */
@media screen and (max-width: 767px) {
h1.roof {
	background-image: -moz-linear-gradient( -178deg, rgb(164,164,164) 0%, rgb(255,255,255) 100%);
  background-image: -webkit-linear-gradient( -178deg, rgb(164,164,164) 0%, rgb(255,255,255) 100%);
  background-image: -ms-linear-gradient( -178deg, rgb(164,164,164) 0%, rgb(255,255,255) 100%);
	color: #434343;
	font-size: 22px;
	padding: 10px;
}
	h1.roof:before{
		content: "";
		background-image: -moz-linear-gradient( -92deg, rgb(3,0,0) 0%, rgb(189,189,189) 100%);
  background-image: -webkit-linear-gradient( -92deg, rgb(3,0,0) 0%, rgb(189,189,189) 100%);
  background-image: -ms-linear-gradient( -92deg, rgb(3,0,0) 0%, rgb(189,189,189) 100%);
		display: inline-block;
		height: 22px;
		width: 4px;
		margin-right: 10px;
		vertical-align: middle;
	}
	
.contentholder .swiper-slide{
		font-size: 0;
	}
.contentholder .swiper-slide > img{
	height: auto;
	width: 100%;
}
.contentholder .swiper-slide a > img{
	height: auto;
	width: 100%;
}
.contentholder .swiper-slide > div{
	display: flex;
}
.contentholder .swiper-slide > div > div{
	text-align: center;
	font-size: 14px;
	width: 100%;
}
.contentholder .swiper-slide > div > div > a{
	background-color: rgba(63,63,63,1.00);
	display: block;
	color: #FFF;
	padding: 10px;
}
.slide_btn1{
border-right: 1px solid rgba(50,50,50,1.00);
}
.slide_btn2{
border-left: 1px solid rgba(73,73,73,1.00);
}
.contentholder .swiper-slide > div > div > a[href$=".pdf"] > span {
	background: url(../img/roof/icon_pdf.webp) right center no-repeat;
	padding-right: 20px;
}

#roofSubList {
	margin-top: 20px;
}
.textList {
	font-size: 0;
	margin-left: 15px;
	margin-right: 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.textList li {
	font-size: 12px;
	text-align: center;
	box-sizing: border-box;
	margin-top: 10px;
	display: flex;
	width: 49%;
}
.textList li > a {
	border: #2c6890 1px solid;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	width: 100%;
}
.textList li.ippan > a {
	border: #64bbba 1px solid;
	background-color: #64bbba;
}
.textList li.kanrei > a {
	border: #6f93cc 1px solid;
	background-color: #6f93cc;
}
.textList li.gray > a {
	border: none;
	background-color: #ededed;
}
.textList li > a {
	font-size: 14px;
	color: #2c6890;
}
.textList li.ippan > a, .textList li.kanrei > a {
	color: #fff!important;
}
.textList li > a:hover {
	opacity: 0.8;
}
h2.series {
	font-size: 20px;
	font-weight: bold;
	color: #999;
	margin: 20px 15px 0 15px;
	text-align: center;
}

.imgBannerList2 {
	font-size: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 20px;
}
.imgBannerList2, .imgBannerList4 {
	margin-left: 15px;
	margin-right: 15px;
}
.imgBannerList2 img, .imgBannerList4 img {
	height: auto;
	width: 100%;
}
.imgBannerList2 > li {
	font-size: 12px;
	margin: 10px 0 0;
	position: relative;
	font-size: 0;
	width: 49%;
}

.imgBannerList4 {
	font-size: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: 10px;
}
.imgBannerList4 > li {
	font-size: 14px;
	margin-right: 2%;
	margin-bottom: 10px;
	position: relative;
	width: 32%;
}
.imgBannerList4 > li:nth-child(3n) {
	margin-right: 0;
}
hr.nomal {
	border: none;
	border-top: #CCC 1px solid;
	margin: 40px 0;
}
	
	#sub_navi_area{
		display: none;
	}
}







@media print, screen and (min-width:768px) {
	
	
	.pdf {
		background: url(../img/roof/icon_pdf.webp) no-repeat right center;
		padding-right: 25px;
	}
	
	.bnr_color_best {
		margin-bottom: 40px;
	}
	
	.imgBannerList3 {}

	.imgBannerList3 > li {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    margin-right: 5px;
    margin-bottom: 40px;
    position: relative;
	}
	
	.imgBannerList3 > li:nth-child(2n) {
    margin-right: 0;
	}

	.newpro {
    font-size: 28px;
    font-weight: normal;
    color:  #999;
    margin-bottom: 10px;
	}

	.imgBannerList3 p {
    font-size: 20px;
    margin-right: 10px;
		line-height: 1.4;
	}
	
	.imgBannerList3 p span {
    margin-right: 0.5em;
	}

	.imgBannerList3 li p.date {
    position: absolute;
    right: 0;
    top: 150px;
    color: #FF0000;
		font-size: 14px;
	}
	
	
	#tsykBlock {
		margin: -20px 0 40px;
		position: relative;
		text-align: center;
		width: 100%;
	}
    #tsykBlockss {
		margin: 0 0 40px;
		position: relative;
		text-align: center;
		width: 100%;
	}
	#tsykBlock img {
		height: auto;
		vertical-align: bottom;
		width: 100%;
	}

}
/* SP */
@media screen and (max-width: 767px) {
	
	
	.bnr_color_best {
		margin: 0 15px;
	}
	
	.bnr_color_best img {
		height: auto;
    width: 100%;
	}
	
	
	.newpro {
    font-size: 20px;
    font-weight: bold;
    color: #999;
    margin: 20px 15px 0 15px;
    text-align: center;
}
	
	.imgBannerList3 {
    margin-left: 15px;
    margin-right: 15px;
		
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
	
	.imgBannerList3 img {
    height: auto;
    width: 100%;
	}
	
	.imgBannerList3 > li {
    font-size: 11px;
    margin: 10px 0 10px;
    position: relative;
    width: 49%;
	}
	
	.imgBannerList3 p {
    font-size: 16px;
    margin-right: 3px;
	}
	
	.imgBannerList3 li p.date {
    color: #FF0000;
		font-size: 14px;
	}
	
	
	#tsykBlock {
		margin: 0;
		position: relative;
		text-align: center;
	}
    #tsykBlockss {
		margin: 0;
		position: relative;
		text-align: center;
	}
	#tsykBlock img {
		height: auto;
		vertical-align: bottom;
		width: 100%;
	}
	
}


/*20200321追加分*/
.pcVer{display: block;}
.spVer{display: none;}
.ma2{border-radius: 2px; -webkit-border-radius:2px;-moz-border-radius: 2px;}
.fi {opacity : 0;transform : translate(-50px, 0);transition : all 1s;}
.fi.scrollin {opacity : 1;transform : translate(0, 0);}
.cl:after { content: "";clear: both;display: block;}
#mainContents{width: 100% !important;}
#contentsArea{margin: auto;max-width: 1040px; padding: 0;}
#contentsArea p{margin: 0;}
.rn_index img{ width: 100%; height: auto;}
.rn_index a{display: block; color: inherit; }
.contentholder{position: relative;}
.shdimg{-webkit-filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5));}
.shdimgw{-webkit-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 1.0));}
.shdtx{text-shadow: 0 0 10px rgba(0,0,0,.9);}
.ipa_main{ position: relative;}
.rn_main_ttl{ max-width: 200px; width: 30%; position: absolute; top: 36px; left: 36px; z-index: 3;}
.rn_subnv{padding:64px 0 70px 0;}
.rn_subnv li{ width: calc(50% - 19px); float: left; margin: 0 38px 0 0; height: 58px; line-height: 58px; font-size: 17px; box-sizing: border-box; position: relative; }
.rn_subnv li:last-child {margin: 0;background:url(../img/roof/arrow_bld_b.webp) 95% center/8px no-repeat;}
.rn_subnv li a { text-align: center; text-decoration: none; font-weight: 600;}
.rn_logosl li a img{-webkit-transition: 0.7s;-moz-transition: 0.7s;-o-transition: 0.7s;transition: 0.7s;}
.rn_logosl li a img:hover {opacity: 0.6 ;-webkit-transition: 0.7s;-moz-transition: 0.7s;-o-transition: 0.7s;transition: 0.7s;}
.rn_subnv li:first-child p{text-decoration: none; text-align: center;background-image: linear-gradient(to right, rgba(245,245,245,1) 50%, rgba(230,230,230,1) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: 0.5s; border: 1px solid #666;}
.rn_subnv li:first-child p:hover{background-position: -100% 0;}
.rn_subnv li:first-child a{background:url(../img/roof/arrow_bld_b.webp) 96.5% center/7px no-repeat;transition: 0.5s;}
.rn_subnv li:first-child a:hover{background:url(../img/roof/arrow_bld_b.webp) 97.5% center/7px no-repeat;transition: 0.5s;}
.rn_subnv li:last-child p{text-decoration: none; text-align: center;background-image: linear-gradient(to right, rgba(102,102,102,1) 50%, rgba(120,120,120,1) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: 0.5s; border: 1px solid #666;}
.rn_subnv li:last-child p:hover{background-position: -100% 0;}
.rn_subnv li:last-child a{background:url(../img/roof/arrow_bld_w.webp) 96.5% center/7px no-repeat; color: #fff;transition: 0.5s;}
.rn_subnv li:last-child a:hover{background:url(../img/roof/arrow_bld_w.webp) 97.5% center/7px no-repeat; color: #fff;transition: 0.5s;}
.rn_logo_slider .bx-wrapper,.rn_logo_slider .bx-viewport{ width: 100%; display: block; position: relative;}
.rn_logo_slider{ width: 100%;}
.rn_logosl ,.rn_logosl2{ overflow: hidden;}
.rn_logosl li,.rn_logosl2 li{ width: 33.333%; float: left; box-sizing: border-box;}
.rn_logosl li img,.rn_logosl2 li img{line-height: 0;background: #f3f3f3; padding:65px 15px 50px 15px; display: block; margin: 0 0 15px 0;}
.bx-pager{ margin: auto; width:auto; display: table; padding: 20px 0;}
.bx-wrapper .bx-pager.bx-default-pager a {background-color:#ddd;border: 1px solid #fff;text-indent: 9999px;display: block;width:  8px;height: 8px;margin: 10px;outline: 0;overflow: hidden;border-radius: 800px; -webkit-border-radius: 800px;-moz-border-radius: 800px;}
.bx-wrapper .bx-pager.bx-default-pager a:hover,.bx-wrapper .bx-pager.bx-default-pager a.active{background:  #333; border: 1px solid #333;}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {display: inline-block;*zoom: 1;*display: inline;}
.bx-controls-direction{ position: absolute; top: 0; width: 100%; }
.bx-controls-direction .bx-prev,.bx-controls-direction .bx-next{position: absolute; top: -40px; width: 25px; height: 12px; text-indent: 9999px;overflow: hidden;}
.bx-controls-direction .bx-prev{ right: 55px; background: url(../img/roof/ic_arrow_prev.webp) center/25px 12px no-repeat;margin: 0; }
.bx-controls-direction .bx-next{ right:0;background: url(../img/roof/ic_arrow_next.webp) center/25px 12px no-repeat; margin: 0;}
.rn_logosl_p{ font-size: 1.85rem; line-height: 1em; font-weight: 500; padding: 13px 0 0 0;}
.rn_logosl_p span{ font-size: 1.25rem; line-height: 1em; display: block; padding: 20px 0 0 0; font-weight: 400;}
.rn_cont_ttl{ display: table;align-items: flex-end;font-family: 'Roboto', sans-serif;font-size: 34px;line-height: 1; position: relative;}
.rn_cont_ttl1{margin: 0 0 24px 0;}
.rn_cont_ttl img{ width: auto!important; height: 24px !important; margin: 0 0 28px 0;}
.rn_cont_ttl_a{ position: absolute; width: 220px; height: 28px; line-height: 28px; font-size: 1.5rem !important; text-align: center; border: 1px solid #333; top: 5px;left:calc(100% + 25px);background-image: linear-gradient(to right, rgba(255,255,255,1) 50%, rgba(245,245,245,1) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: 0.5s;display: block;}
.rn_cont_ttl_a:hover{background-position: -100% 0;}
.rn_cont_ttl_a a{text-decoration: none;}
.rn_cont_wrap0{margin: 0 0 10px 0;}
.rn_cont_wrap1{margin: 0 0 50px 0;}
.rn_cont_wrap2{margin: 0 0 70px 0;}
.rn_tube_w{padding: 45px 0; background: #ededed; margin: 0 0 50px 0;}
.rn_tube { max-width: 770px; margin: auto;}
.rn_tube iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.rn_tube_w{padding: 45px 0; background: #ededed; margin: 0 0 50px 0;}

.rn_prd_box{display: block;position: relative;overflow: hidden;margin-bottom: 10px;}
.rn_prd_box_0mb{margin-bottom: 70px;}
.rn_prd_box_mbl{display: block;position: relative;overflow: hidden;margin-bottom: 40px;}
.rn_prd_box .slideup{
width:100%;
height:100%;
position:absolute;
top:0;
left:-50%;
-webkit-transition: 0.3s;
-moz-transition:  0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.rn_prd_box .slideup:hover {
    left: 0;
    top: 0;
}
.rn_prd_box .slideup span {
text-align:center;
font-weight:bold;
display:block;
    position: absolute; width: 30px; height:30px;bottom:5%; left: 52%;
}
.rn_prd_box .slideup:hover span {
display:none;
}
.slideup_content {width: 50%;height: 100%;position: absolute; left:0; top: 0;box-sizing: border-box; padding: 30px 40px 0 40px;background:rgba(255,255,255,0.8);}
.slideup_content a{text-decoration: none;}
.rn_slup_ttl{margin: 0 0 15px 0; width: 90%;}
.rn_slup_date{ border: 1px solid #c1272d; color: #c1272d; padding: 5px 10px; display: table;font-size: 1.4rem; line-height: 1em; margin: 0 0 15px 0;}
.rn_slup_tx{ font-size: 1.4rem; line-height: 1.9em; padding: 10px 0 30px 0;}
.rn_slup_lnk{font-size: 1.4rem; line-height: 1em; padding: 0 0 13px 0; border-bottom: 1px solid #333; display: table !important;}
.rn_examp_li li{width: 18%; margin: 0 2.5% 0 0; float: left; visibility: hidden; position: relative; line-height: 0;}
.rn_examp_li li:last-child{ margin: 0;}
.rn_examp_li img{line-height: 0;}
.rn_other_li li{ width: 49%; margin: 0 2% 2% 0; float: left; font-size: 2rem; box-sizing: border-box; font-weight: 600;}
.rn_other_li li:nth-child(even){  margin: 0 0 2% 0;}
.rn_other_li li a{text-align: center; padding: 13px 0; border: 1px solid #333; box-sizing: border-box; text-decoration: none;}
.rn_other_li li p{text-decoration: none; text-align: center;background-image: linear-gradient(to right, rgba(255,255,255,1) 50%, rgba(245,245,245,1) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: 0.3s;}
.rn_other_li li p:hover{background-position: -100% 0;}
.ipa_main .bx-wrapper , .top_main .bx-viewport{ width:100%;position:relative; overflow: hidden; }
.top_slider{width:100%; height:420px; position:absolute; z-index:-1; background:#000;}
.top_slider li{ background-size:cover; background-position:center;width:100%; height:100%;}
.top_main_copy{ z-index:1; display:table; margin:auto; position:relative; top:40%;}
.tr1{animation: text_animation1 6s;}
.tr2{animation: text_animation2 6s;}
.top_main_head{text-align:center; font-style:italic; margin:0 0 60px 0; font-family:din;}
@keyframes text_animation1{
  0%{transform: scale(1.1) ;left: 0;}
  100%{transform: scale(1.0) ; left: 0;}
}
@keyframes text_animation2{
  0%{transform: scale(1.1) ;right: 0;}
  100%{transform: scale(1.0) ; right: 0;}
}
/*20210201追加*/
.news_2021{ border-top: 1px solid #ccc; }
.nws2021_date{ font-size: 1.615rem; line-height: 1.8em; width:20rem; float: left; text-align: center;}
.nws2021_txb{width: calc(100% - 20rem); float: right;}
.nws2021_ttl{ font-size: 1.4rem; line-height: 1.7em; margin: 0;}
.nws2021_ttl2{ font-size: 1.5rem; font-weight: 600; line-height: 1.7em;}
.nws2021_tx{ font-size: 1.45rem;line-height: 1.5em;}
.nws2021_lnk{ padding:7px 0 0 0; clear: both;}
.nws2021_lnk a{ border: 1px solid #ccc; padding: 8px 45px 8px 13px; line-height: 1em; font-size: 1.2rem;  clear: both; display: table; background: url(../img/roof/pdf_icon1.webp) 98% center/27px no-repeat;}
.news_2021 li{ border-bottom: 1px solid #ccc; padding:calc(15px + 1%) 0; overflow: hidden;}

.nws2021_txb_l{ float: left; width: 70%;}
.w100{width:100%;}
.nws2021_txb_r{ float: right; width: 28%; text-align: center;}
.nws2021_txb_r img{ max-width: 170px;}

.flx{display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;}
.top_sl_ttl{width: calc(100% - 40px);position: absolute;left: 50%;top: 30px;height: 100%;transform: translateX(-50%);max-width: 1200px;z-index: 1;}
.top_sl_ttl img{width: 233px;}
.rnn_news_cont{ display: none; margin: 0 0 calc(10px + 1%) 0;}
.rnn_news_ttl{ border-top: 1px solid #ccc; padding:calc(5px + 1%) 30px calc(5px + 1%) 0;overflow: hidden; background: url(../img/roof/nws_arrow.webp) right center/15px no-repeat; cursor: pointer; box-sizing: border-box;}

.rn2_series{margin: 0 0 calc(15px + 1%) 0;}
.rn2_series li{width: 31%; margin: 0 3.5% 5% 0; float: left;}
.rn2_series li:nth-child(3n){margin: 0 0 5% 0;}
.rn2_seri_logo{ width: 78%; margin: auto; padding: 3px 0 0 0;}
/* SP */
@media screen and (max-width: 767px) {
    #contentsArea{width: 100% !important;}
    #mainContents{width: auto !important;}
    .pcVer{display:none;}
    .spVer{display: block;}
    .in{margin: 0 15px;}
    .rn_main_ttl{  width: 110px; position: absolute; top: 15px; left: 15px;}
    .rn_cont_wrap1{margin: 0 0 30px 0;}
    .rn_cont_wrap2{margin: 0 0 55px 0;}
    .rn_subnv{padding:0 0 32px 0;}
    .rn_subnv li{ width: 100%;float: none; margin: 0; height: 48px; line-height: 48px; font-size: 1.5rem; }
    .rn_logo_slider{  margin:0 0 15px 0; overflow: hidden; position: relative;}
    .rn_logo_slider .bx-wrapper{  width: 220%; margin: 0 0 0 -60%; }
    .rn_logo_slider .bx-viewport{overflow: hidden; margin: auto;}
    .rn_logosl2{ width: 100%; position: relative;}
    .rn_logosl2 li{ padding:0; box-sizing: border-box;}
    .rn_logosl2 li img{ padding:40px 10px 35px 10px; display: block; margin: 0 0 10px 0;}
    .rn_logosl_p{ font-size: 16px !important;-webkit-text-size-adjust: 100%; }
    .rn_logosl_p span{ font-size: 1.15rem !important;}
    .bx-controls-direction { top:auto; bottom: 0;}
    .bx-controls-direction .bx-prev,.bx-controls-direction .bx-next{ display: none}
    .rn_cont_ttl span{display: none;}
    .rn_cont_ttl img{ width: auto; height:39px !important;}
    .rn_cont_ttl_a{ position: relative; width: 100%; height: 48px; line-height:48px; font-size: 1.4rem !important;top: auto; left: auto;background:#fff; font-weight: 600; }
    .rn_examp_li{padding: 0 0 10px 0;}
    .rn_tube_w{padding: 25px 0; background: #ededed; margin: 0 0 30px 0;}
    .rn_slup_ttl_spcont{ padding: 15px 0 45px 0; position: relative; float: left;}
    .rn_slup_ttl_spcont2{width: 50%; padding: 0 0 20px 0; position: relative;float: left;}
    .rn_slup_date{ padding: 5px; font-size: 3vw;margin: 0 0 10px 0;}
    .rn_slup_ttl{margin: 0 0 5px 0; width: 50%;}
    .rn_slup_ttl2{margin: 0 0 10px 0; width: 80%;}
    .rn_slup_tx{ font-size: 1.2rem; line-height: 1.7em; padding: 0 0 15px 0;}
    .rn_slup_lnk{color:#5f5f5f;font-size: 1.4rem;padding:15px; border: 1px solid #bababa; display: block !important; background: #ececec url(../img/roof/arrow_bld_gry.webp) 95% center/7px no-repeat; text-align: center;}
    .rn_prd_box{margin-bottom: 20px;}
    .rn_prd_box_0mb{margin-bottom: 30px;}
    .rn_prd_box_spimg{ width: 46%; margin: 0 4% 15px 0; float: left;}
    .imgBannerList2{margin: 0;}
    .imgBannerList2 > li {width:100%;margin-right: 0;}
    .rn_examp_li li{width: 32.333%; margin: 0 1.5% 1.5% 0; float: left; visibility: hidden; position: relative;}
    .rn_examp_li li:nth-child(3n){ margin: 0 0 1.5% 0;}
    .rn_other_li li{ width: 100%; margin: 0 0 10px 0 !important; float: none; font-size: 1.5rem;}
    .rn_other_li li a{padding: 10px 0;}
    
    .top_slider{width:100%; height:106vw; position:absolute; z-index:-1; background:#000;}
    
    /*20210201追加*/
    .news_2021{margin: -27px 0 0 0; }
    .nws2021_date{ width: 100%; float: none; margin: 0 0 5px 0 !important; font-size: 1.3rem; text-align: left;}
    .nws2021_txb{margin:0; width: 100%; float: none;}
    .nws2021_ttl{ line-height: 1.4em; margin: 0 0 1px 0;}
    .nws2021_ttl2{ font-size: 1.45rem; line-height: 1.5em; margin: 0 0 11px 0;}
    .nws2021_tx{ font-size: 1.35rem;line-height: 1.5em;}
    .nws2021_tx2{ width: 68%; float: left;}
    .nws2021_lnk a{padding: 5px 45px 5px 8px; line-height: 1.4em; font-size: 1.05rem; }
    
    .nws2021_txb_r{}
    .nws2021_txb_l{ width: 100%; float: none;}
    .top_sl_ttl{top: 50%;left: 50%;width: 205px;height: 185px;transform: translate(-50%, -50%);}
    .top_sl_ttl img{ width: 100%;}
    
    /*20210322追加*/
    .rn_cont_ttl{font-size: 24px; text-align: center; display: block;}
    .rn_logosl2 li img{ padding:20% 10px; display: block; margin: 0 0 10px 0;}
    .rn_cont_ttl1{margin: 0 0 18px 0;}
    
    .rn2_series li{width: 48%; margin: 0 4% 5% 0 !important;}
    .rn2_series li:nth-child(even){margin: 0 0 5% 0 !important;}
}