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


/*--------------------------------
  Main Layout 
--------------------------------*/

#main{
	width:100%;
	padding:0!important;
	margin:0!important;
	
	position:relative;

    animation-name: main_anime;
	animation-duration: 2s;
	animation-timing-function: ease-in;
	animation-fill-mode:forwards;
}
.main_area{
	width:100%;
	height:70vh;
    overflow: hidden;
    position: relative;
	padding:0!important;
	margin:0!important;
	
}
@keyframes main_anime {
  0% {
	  opacity: 0;
  }
  100% {
	  opacity: 1;
  }
}
.main_area .main_inner{
	/*margin:0 auto;
	width:100%;*/
    heighth:100%;
	padding:0;
	margin:0;
}
.main__item {
  top: 0!important;
  height: 100%!important;
  position: absolute;
  width: 100%;
}

.main_area .copy_block{
	position: absolute;
	text-align: left;
	top: 37%;
	left: 7.5vw;
	margin: auto;
    z-index:10!important;
    width:100%!important;
}
.main_area .copy_block h2{
	font-weight: 200;
    font-style: normal;
	font-size: 3.571vw;
	line-height:1.3;
    
    color:#FFF;
	
}
/* ------ text anime ------- */
#s1,#s2 {
	display:inline-block;
	overflow:hidden;
	white-space:nowrap;
	width:0%;
}
#s1 {
	animation:s1 4s;
	animation-fill-mode:forwards;
}
@keyframes s1 {
      from { width:0em; }
      50% { width: 6em; }
      to { width:6em; }
}
#s2 {
	animation:s2 4s;
	animation-fill-mode:forwards
}
@keyframes s2 {
      0% { width:0em; }
      50% { width:0em; }
      100% { width:9em; }
      to { width:9em; }
}


/* ------ slide image ------- */
.main__img {
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-name: slideAnime;
  animation-timing-function: ease;
  display: block;
  min-height: 70vh;
  object-fit: cover;
  opacity: 0;
}

.main__item:nth-of-type(1) .main__img {
  animation-delay: 0s;
}

.main__item:nth-of-type(2) .main__img {
  animation-delay: 5s;
}

.main__item:nth-of-type(3) .main__img {
  animation-delay: 10s;
}
.main__item:nth-of-type(4) .main__img {
  animation-delay: 15s;
}

@keyframes slideAnime {
  0% {
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  33% {
    opacity: 1;
  }

  49% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    /*transform: translateX(-10%);*/
  }
}


@media screen and (max-width:767px) {
    #main{
    }
	.main_area{
		height:60vh;
	}
    .main_area .main_inner{
    }
    .main__item {
    }
	.main__img {
	  min-height: 60vh;
	}
    .main_area .copy_block{
        width:90%!important;
    }
    .main_area .copy_block h2{
        font-size: 8.45vw;
    }
}


/*--------------------------------
  Contents Layout 
--------------------------------*/
#container_top{
    padding:0;
    margin:0;
}

.contents_block{
    align-items:stretch !important;
	justify-content: flex-start;
}
@media screen and (max-width:767px) {
	.contents_block{
		margin:0!important;
	}
}

/*-----caresse_block--------*/

.contents_block{
	wrap:nowrap;
}

.contents_block .caresse_photo{
	width:60.429%;
	background:url("/image/caresse_photo.jpg") no-repeat center center;
	background-size:cover;
	display:flex;
	align-items:center;
	justify-content:center;
}
.contents_block .caresse_photo img{
	width:40.214vw;
}
.contents_block .caresse_logo{
	width:39.571%;
	background:var(--subcolor);
}
.copy_block .caresse_box{
	width:25.357vw;
	background-color: #FFF; 
    
    display:block;
    
	padding:8.929vw 1.714vw;
	text-align:center;
}
.copy_block .caresse_box h2{
	width:100%;
	display:block;
	text-align:center;
}
.copy_block .caresse_box h2 img{
	width:85%;
}

.copy_block .caresse_box h2::before{
	content:"高性能・高品質・多彩美なガルバリウム鋼板屋根材";
	display:block;
	font-size:clamp(0.8rem, 0.618rem + 0.91vw, 1.3rem);
	font-weight:400;
	padding-bottom:1.429vw;
}
.copy_block .caresse_box .read{
	display:block;
	margin:2.429vw auto 0;
	
	text-align:center;
	
	font-size:clamp(1rem, 0.491rem + 2.55vw, 2.4rem);
	font-weight:400;
}
@media screen and (max-width:767px) {
	.contents_block{
		width:100%!important;
	}
	.contents_block .caresse_photo{
		width:100%;
		height:30vh;
	}
	.contents_block .caresse_photo img{
		width:75%;
	}
	.contents_block .caresse_logo{
		width:90%;
		margin:0 auto;
	}
	.copy_block .caresse_box{
		width:100%;
		background-color: #FFF; 
		padding:3.62vw 1.714vw 30px;
		text-align:center;
	}
	.copy_block .caresse_box h2{
		width:100%;
		display:block;
		text-align:center;
	}
	.copy_block .caresse_box h2 img{
		width:65%;
	}

	.copy_block .caresse_box h2::before{
		padding-bottom:2.42vw;
	}
	.copy_block .caresse_box .read{
		display:block;
		margin:2.429vw auto 0;
	}
}

/*-----about_block--------*/

.about{
	background-color:var(--maincolor)!important;
	background:url("/image/about_photo01.jpg") no-repeat left top;
	background-size:60.429%;;
	margin:0!important;
	padding:4.71vw 0!important;
}
.contents_block .aboutBlock{
	width:74.57vw;
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
}
.contents_block .about_copyBlock{
	width:32.14vw;
	margin:0 5.14vw 0 0;
	
	font-size:clamp(1rem, 0.782rem + 1.09vw, 1.6rem);
	font-weight:400;
	
	color:#FFF;
	text-align:left;
}
.contents_block .about_copyBlock h4{
	display:block;
	
	margin-bottom:3.21vw;
	
	font-size:clamp(1.2rem, 0.764rem + 2.18vw, 2.4rem);
	font-weight:500;
}
.contents_block .about_photoBlock{
	width:35.71vw;
}
.contents_block .about_photoBlock img{
	width:100%;
}

@media screen and (max-width:767px) {
	.about{
		background-color:var(--maincolor)!important;
		background:url("/image/about_photo01.jpg") no-repeat left top;
		background-size:100vw;
		margin:0!important;
		padding:30px 0!important;
	}
	.contents_block .aboutBlock{
		width:90%;
		display:block;
		align-items:center;
		justify-content:center;
	}
	.contents_block .about_copyBlock{
		width:100%;
		margin:0;

		font-size:clamp(1rem, 0.782rem + 1.09vw, 1.6rem);
		font-weight:400;

		color:#FFF;
		text-align:left;
	}
	.contents_block .about_copyBlock h4{
		display:block;

		margin-bottom:3.21vw;

		font-size:clamp(1.2rem, 0.764rem + 2.18vw, 2.4rem);
		font-weight:500;
	}
	.contents_block .about_photoBlock{
		width:100%;
		margin:15px auto 0;
	}
	.contents_block .about_photoBlock img{
		width:100%;
	}
}


/*-----product_block--------*/
.product{
	background-color:var(--subcolor);
	padding:2.14vw 0;
}
.contents_block .productBlock{
	margin:2.14vw 0;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;

}
.contents_block .productBlock .photoBlock{
	width:52%;
}
.contents_block .productBlock .copyBlock{
	width:48%;
}
.contents_block .productBlock .copyBlock .box{
	width:30.71vw;
	text-align:left;
	
	font-size:clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
	font-weight:300;
	
	color:#000;
}
.contents_block .productBlock .copyBlock .box h3{
	display:block;
	margin-bottom:2.5vw;
	
	font-family: "Shippori Mincho", serif;
	font-weight: 400;
	font-style: normal;
	font-size:clamp(1.3rem, 0.827rem + 2.36vw, 2.6rem);
}
.contents_block .productBlock .copyBlock .box h3 span{
	display:block;
	padding-bottom:1.79vw;
	
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size:clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
	
	color:var(--maincolor);
}

.box_right{
    margin:0 auto 0 2.86vw;
}
.box_left{
    margin:0 2.86vw 0 auto ;
}
@media screen and (max-width:767px) {
	.product{
		padding:2.14vw 0 0;
		margin:0!important;
	}
	.contents_block .productBlock{
		margin:2.14vw 0 0;
		width:100%;
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		justify-content:center;

	}
	.contents_block .productBlock .photoBlock{
		width:100%;
		order:2;
		margin:15px 0 0;
		padding:0!important;
	}
	.contents_block .productBlock .copyBlock{
		width:100%;
		padding:30px 0 0;
	}
	.contents_block .productBlock .copyBlock .box{
		width:90%;
		margin:0 auto;
	}
	.contents_block .productBlock .copyBlock .box h3{
	}
	.contents_block .productBlock .copyBlock .box h3 span{
	}

	.box_right{
		margin:0;
	}
	.box_left{
		margin:0;
	}
}

/*-----info_block--------*/
.infomation{
	background-color:#FFF;
	background:url("/image/info_bk.jpg") no-repeat center top!important;
	background-size:cover;
	
	padding:5.36vw 0;
}
.contents_block .infoBlock{
	width:71.43vw;
	margin:0 auto;
	
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	
}

.contents_block .infoBlock .news_box{
	width:49%;
}
.contents_block .infoBlock h3{
	display:block;
	margin-bottom:1.29vw;
	
	font-family: "Shippori Mincho", serif;
	font-weight: 400;
	font-style: normal;
	font-size:clamp(1.3rem, 0.827rem + 2.36vw, 2.6rem);
}
.contents_block .infoBlock h3 img{
	width:2.57vw;
}
.contents_block .infoBlock .news_box ul{
	width:100%;
	border-top:solid 1px var(--subcolor);
}
.contents_block .infoBlock .news_box li{
	width:100%;
	border-bottom:solid 1px var(--subcolor);
	padding:0.5vw 0;
	
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size:clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
	
	list-style-type: none;
}
.contents_block .infoBlock .news_box li span{
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	
	color:var(--maincolor);
	padding-right:1.07vw;
}

.contents_block .infoBlock .sns_box{
	width:47%;
}
.contents_block .infoBlock .sns_box .tagembed-widget{
	width:100%!important;
	margin:0;
	padding:0;
}

@media screen and (max-width:767px) {
    .infomation{
		background:url("/image/info_bk.jpg") no-repeat left -40vw top!important;
		background-size:contain;
		padding:20px 0 ;
		margin:0;
	}
	.contents_block .infoBlock{
		width:90%;
		margin:0 auto;

		display:flex;
		flex-wrap:wrap;
	}

	.contents_block .infoBlock .news_box{
		width:100%;
	}
	.contents_block .infoBlock h3{
	}
	.contents_block .infoBlock h3 img{
		width:10vw;
	}
	.contents_block .infoBlock .news_box ul{
		width:100%;
		margin-bottom:25px;
	}
	.contents_block .infoBlock .news_box li{
		width:100%;
		padding:5px 0;
	}
	.contents_block .infoBlock .news_box li span{
		display:block;
		padding-right:initial;
	}

	.contents_block .infoBlock .sns_box{
		width:100%;
	}
}




.copy_block .box h3{
    display:block;
    font-family: "Shippori Mincho", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size:clamp(1.3rem, 0.755rem + 2.73vw, 2.8rem);
    color:#FFF;
    padding-bottom:2.308vw;
}
.copy_block .box span{
    display:block;
    font-family: "Noto Sans JP", system-ui;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size:clamp(0.9rem, 0.682rem + 1.09vw, 1.5rem);
    color:#FFF;
    line-height:1.83;
}
.block02_right .copy_block .box span,
.block02_right .copy_block .box .links{
    width:36.846vw!important;
}

.copy_block .box .links{
	width:100%;
    margin:2.308vw 0 0;
	
	display:block;
	
	font-size:clamp(0.8rem, 0.545rem + 1.27vw, 1.5rem);
	
	text-align:center;
}
.copy_block .box .links a{
	display:block;
	padding:15px 0;
	
	color:#e4c57c;
	
	border:solid 1px var(--subcolor);
}
.copy_block .box .links a:hover{
	color:#FFF;
	background:var(--subcolor);
	border:solid 1px var(--subcolor);
    text-decoration: none;
}

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