@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);


html{
	font-size: 62.5%!important;
}

body{
	width: 100%;
	font-family: "Noto Sans Japanese", "Meiryo","メイリオ","ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
	color: #1a1311;
    -moz-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
}

a{
	text-decoration: none;
}

.banner a:hover{
	
}

.sp, .sp2{
	display: none;
}

.pc{
	display: block;
}

.pc2{
	display: inline;
}

#home{
	width: 100%;
	display: none;
}

#home.active{
	display: block;
}

header{
	width: 100%;
	height: 250px;
	background: #ffef00;
	background-image: url(../img/head_back.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}


header .head{
	height: 250px;
	width: 1000px;
	margin: 0 auto;
	position: relative;
	background-image: url(../img/head.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}

header .logo{
	position: absolute;
	top: 28px;
	left: -5px;
}

header .h1_1{
	position: absolute;
	font-size: 2.2rem;
	line-height: 1.2em;
	left: 573px;
	top: 61px;
}

header .h1_2{
	position: absolute;
	color: #fff;
	font-size: 1.8rem;
	line-height: 1.2em;
	left: 788px;
	top: 66px;
}

header .h1_3{
	position: absolute;
	left: 910px;
	top: 60px;
}

header .catch{
	font-size: 1.8rem;
	line-height: 1.4em;
	position: absolute;
	top: 168px;
	left: 20px;
}

header .catch span{
	color: #fff;
	background: #942d2a;
	padding: 0 0.4em;
}


nav{
	width: 100%;
	height: auto;
	z-index: 100;
	text-align: left;
	background-image: url(../img/navi_back.png);
	background-repeat: repeat-x;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

nav ul{
	width: 800px;
	padding-right: 200px;
	margin: 0 auto;
	list-style: none;
	font-size: 0;
	position: relative;
}

nav li{
	text-align: center;
	display: inline;
}

nav a{
	font-weight: normal;
	color: #fff;
	background: #1a1311;
	display: inline-block;
	font-size: 1.6rem;
	line-height: 50px;
	padding: 0 1.0em;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}

nav .lp{
	border-top: none;
	border-bottom: none;
	line-height: 50px;
}		

nav .end{
	border-right: 1px solid #fff;
}		

nav .sel a, nav a:hover{
	color: #1a1311;
	background: #e8e8e8;
}

nav .sdgs_link{
	position: absolute;
	width: 165px;
	height: 130px;
	padding: 0;
	top: -10px;
	right: 0;
	z-index: 50!important;
	cursor: pointer;
	background-position: center center;
	background-repeat: no-repeat!important;
	background: url(../img/sdgs_off_2307.png);
	background-size: contain;
	background-color: none!important;
	border: none!important;
}

nav .sdgs_link:hover{
	background: url(../img/sdgs_on_2307.png);
	background-size: contain;
	background-color: none!important;
}

/*
nav ul > li:nth-child(8){
	margin-left: 65px;
}
*/

#nav_toggle{
	display: none;
}


section{
	width: 1000px;
	height: auto;
	margin: 0 auto;
	padding: 25px 0 65px;
}


#search{
	height: 586px;
}


#search .ttl{
	height: 82px;
	background: #fc6900;
	position: relative;
}

#search .ttl h2{
	position: absolute;
}

#search .ttl .read{
	position: absolute;
	width: 622px;
	height: 58px;
	font-size: 2.2rem;
	line-height: 0.9em;
	font-weight: bold;
	color: #fff;
	background: #942d2a;
	left: 343px;
	top: 7px;
	padding-top: 10px;
	padding-left: 25px;
}

#search .ttl .read span{
	vertical-align: middle;
}

#search ul{
	font-size: 0;
	list-style: none;
	width: 164px;
	border-left: 2px solid #fc6900;
	float: left;
}

#search .search_btn li{
	border-bottom: 2px solid #fc6900;
	background: #fff;
}

#search .search_btn li .name{
	font-size: 1.8rem;
	line-height: 52px;
	vertical-align: top;
	text-align: left;
	width: 30px;
	margin-left: 8px;
}
#search .search_btn li p{
	display: inline-flex;
}

#search .search_btn .special{
	text-align: center;
	height: 108px;
}

#search .search_btn .special p{
	margin-top: 5px;
}


#search .search_btn li img{
}
#search .search_btn .btn{
	cursor: pointer;
}


#search .search_btn .btn:hover{
/* 	background-image: url(../img/search_back.png); */
	background-color: #feedcc;
}


#search .results{
	border-bottom: 2px solid #fc6900;
	border-left: 2px solid #fc6900;
	border-right: 2px solid #fc6900;
	background: #000;
	width: 166px;
	height: 493px;
	float: left;
	text-align: center;
}


#search .results .arrow{
	margin-top: 45px;
}

#search .results .type_name{
	margin-top: 40px;
	font-size: 1.4rem;
	font-weight: bold;
	color: #fff
}


#search .results .type{
	color: #fff;
	margin-top: 10px;
	font-size: 4.0rem;
	font-weight: bolder;
	font-weight: 900;
}

#search .results .type_image{
	margin-top: 20px;
}


#search .results .pi img{
	margin-top: 60px;
	background: #ffef00;
	border-radius: 5px;
}


#search .results .pi img:hover{
	background: #fc6900;
}



section .lp_type{
	width: 100%;
	height: 169px;
	border: 1px solid #92181e;
	margin-top: 10px;
	position: relative;
	background-image: url(../img/lp_type_back.jpg);
	background-repeat: no-repeat;
}

section .lp_type h2{
	position: absolute;
	left: 65px;
	top: 10px;
	font-size: 4.5rem;
	font-weight: bold;
	color: #fff;
}

section .lp_type .read{
	position: absolute;
	left: 24px;
	top: 60px;
	width: 709px;
	line-height: 32px;
	font-size: 2.3rem;
	background: #92181e;
	color: #fff;
	text-align: center;
}

section .lp_type .txt{
	position: absolute;
	left: 65px;
	top: 105px;
	width: 620px;
	font-size: 1.8rem;
	line-height: 1.5em;
	color: #1a1311;
}

section .lp_type img{
	position: absolute;
}


#materials{
	margin-top: 15px;
}

#materials .ttl{
	height: 66px;
	background: #65b700;
	position: relative;
}


#materials .ttl h2{
	position: absolute;
	font-size: 3.2rem;
	line-height: 1.0em;
	font-weight: bold;
	vertical-align: middle;
	color: #fff;
	top: 20px;
	left: 25px;
}

#materials .ttl h2 span{
	font-size: 1.4rem;
	margin-left: 1.0em;
	font-weight: normal;
	vertical-align: middle;
}

#materials .ttl .read{
	position: absolute;
	width: 567px;
	font-size: 1.6rem;
	line-height: 26px;
	text-align: center;	
	background: #fff;
	color: #65b700;
	left: 305px;
	top: 20px;
}


#materials .frame{
	border: 3px solid #65b700;
	border-top: none;
	background: #f3f7df;
	position: relative;
	margin: 0;
	padding: 0;
}

#materials .frame1{
	height: 100px;
}

#materials .frame2{
	width: 618px;
	height: 100px;
	float: left;
}

#materials .frame3{
	width: 373px;
	height: 100px;
	float: left;
	border-left: none;
}

#materials .frame4{
	height: 118px;
	clear: both;
}

#materials .frame5{
	width: 205px;
	height: 240px;
	float: left;
	background: #fff;
}

#materials .frame6{
	width: 275px;
	height: 240px;
	float: left;
	border-left: none;
	background: #fff;
}

#materials .frame7{
	width: 508px;
	height: 240px;
	float: left;
	border-left: none;
	background: #fff;
}


#materials .frame ul{
	position: absolute;
	list-style: none;
	left: 12px;
	top: 10px;
}

#materials .frame2 ul, #materials .frame3 ul{
	top: 10px;
}

#materials .frame4 ul{
	top: 20px;
}


#materials .frame li{
	font-size: 1.5rem;
	line-height: 1.7em;
	font-weight: bold;
}


#materials .frame li a{
	color: #000;
}

#materials .frame li .circle{
	color: #65b700;
}

#materials .frame li .gomu{
	font-size: 1.4rem;
	background: #fca387;
	margin-left: 1.0em;
	padding: 0 0.5em;
	border-radius: 15px;
	
}

#materials .frame .ph{
	position: absolute;
	left: 226px;
	top: 5px;
}

#materials .frame3 .ph{
	left: 200px;
}

#materials .frame4 .ph{
	top: 15px;
}

#materials .frame .ph img{
	margin-right: 6px;
}

#materials .frame5 h3{
	width: 193px;
	line-height: 46px;
	font-size: 2.0rem;
	color: #fff;
	text-align: center;
	background: #7d7f74;
	margin: 6px;
}
#materials .frame5 .txt{
	width: 191px;
	line-height: 38px;
	font-size: 1.4rem;
	color: #000;
	text-align: center;
	background: #fffbc6;
	margin: 6px;
	border: 1px solid #000;
	border-radius: 10px;
	margin-top: 15px;
}
#materials .frame5 img{
	margin-top: 10px;
	margin-left: 3px;
}

#materials .frame6 h3{
	width: 261px;
	line-height: 46px;
	font-size: 1.6rem;
	color: #fcf223;
	text-align: center;
	background: #846452;
	margin: 6px;
}

#materials .frame6 .txt{
	font-size: 1.4rem;
	line-height: 1.3em;
	color: #846452;
	float: left;
	margin-left: 10px;
	margin-top: 4px;	
}

#materials .frame6 h4{
	font-size: 2.5rem;
	color: #db0011;
	float: left;
	margin-left: -10px;
	margin-top: 10px;
}

#materials .frame6 img{
	margin-top: 8px;
	margin-left: 8px;
}
#materials .frame7 h3{
	width: 485px;
	line-height: 46px;
	font-size: 2.0rem;
	color: #fff;
	background: #426128;
	padding-left: 10px;
	margin: 6px;
}
#materials .frame7 .txt{
	width: 244px;
	height: 38px;
	font-size: 1.6rem;
	line-height: 1.2em;
	font-weight: bold;
	color: #416128;
	padding: 5px 20px;
	background: #f6da9f;
	border-radius: 10px;
	float: left;
	margin-left: 2px;
}

#materials .frame7 img{
	margin-top: 10px;
	margin-left: 3px;
}

#materials .frame7 .sand{
	float: left;
	margin-top: -2px;
	margin-left: 4px;
}

/* コンクリート製品用模様鋼板　202306追加 */

#materials .frame7 .sand_link{
	display: flex;
	justify-content: space-between;	
}

#materials .frame7 .pattern{
	width: 286px;
	float: right;
	margin-right: 6px;
	display: flex;
	justify-content: space-between;	
}

#materials .frame7 a:hover{
	opacity: 0.7;
}

#traffic{
	width: 682px;
	height: 344px;
	border: 3px solid #e9e235;
	margin-top: 12px;
	margin-right: 12px;
	float: left;	
}

#traffic h2{
	font-size: 3.2rem;
	line-height: 44px;
	color: #000;
	font-weight: bold;
	padding-left: 57px;
	background-image: url(../img/traffic_ttl_back.jpg);
	background-repeat: none;
	vertical-align: middle;
}

#traffic h2 span{
	font-size: 1.4rem;
	line-height: 44px;
	font-weight: normal;
	margin-left: 1.0em;
	vertical-align: middle;
}

#traffic .left{
	width: 348px;
	height: 294px;
	float: left;
	background: #fff;
}

#traffic .left table{
	margin-left: 5px;
	margin-top: 15px;	
}

#traffic .left td{
	height: 66px;
	vertical-align: middle;
	border-bottom: 1px dotted #000;	
}

#traffic .left .line td{
	border-top: 1px dotted #000;	
}



#traffic .left .name_a, #traffic .left .name_b{
	width: 115px;
	padding-left: 5px;
	font-size: 1.4rem;
	line-height: 1.2em;
	color: #000;
}

#traffic .left .name_b{
	width: 90px;
}

#traffic .left .face_a, #traffic .left .face_b{
	width: 60px;	
}


#traffic .left .face_a{
	border-right: 1px dotted #000;	
}

#traffic .right{
	height: 284px;
	background: #fefbbd;
	padding: 5px 15px;
}

#traffic .right .face{
	float: left;
	width: 30px;
	height: auto;
	margin-left: 10px;
}

#traffic .right .status{
	font-size: 1.3rem;
	line-height: 35px;
	color: #000;
}


#traffic .right h3{
	width: 310px;
	font-size: 1.6rem;
	line-height: 29px;
	color: #000;	
	background: #e9e235;
	font-weight: normal;
	text-align: center;
	margin-left: 345px;
	margin-top: 10px;
}

#traffic .right .ph{
	float: left;
	padding: 10px 12px;
	
}

#traffic .right .txt{
	font-size: 1.4rem;
	line-height: 1.4em;
	color: #000;
	padding-top: 5px;
}


#info{
	height: 344px;
	width: 294px;
	border: 3px solid #a66026;
	background-color: #fdf4ea;
	background-image: url(../img/info_icon.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	margin-top: 12px;
	float: left;
	overflow: hidden;
}

#info h2{
	font-size: 3.2rem;
	line-height: 46px;
	color: #fff;
	font-weight: bold;
	background-image: url(../img/info_ttl_back.jpg);
	background-repeat: none;
	text-align: center;
}

#info .info{
	padding: 24px 20px;
	font-size: 1.4rem;
	line-height: 1.6em;
	color: #000;
}

#info .ttl{
	margin-bottom: 10px;
}


#takumi{
	width: 488px;
	height: 300px;
	border: 3px solid #2f5c00;
	background: #eaeee5;
	margin-top: 12px;
	margin-right: 12px;
	float: left;	
}
#takumi h2{
	margin: 7px 15px 0;
}
#takumi .read{
	font-size: 1.8rem;
	line-height: 1.0em;
	font-weight: bold;
	color: #20623a;	
	text-align: center;
}

#takumi .ph{
	margin: 15px 22px 0 30px;
	float: left;
}
#takumi .check{
	float: left;
	margin-top: 45px;
}

#takumi .takumi_new{
	float: right;
	margin-top: -155px;
}


#product{
	width: 488px;
	height: 300px;
	border: 3px solid #0096ff;
/* 	background: #e4f3ff; */
	margin-top: 12px;
	float: left;	
}

#product .ttl{
	height: 63px;
	background: #0096ff;
	position: relative;
}

#product h2{
	font-size: 3.2rem;
	position: absolute;
	line-height: 1.0em;
	vertical-align: middle;
	color: #fff;
	left: 90px;
	top: 10px;
}

#product h2 span{
	font-size: 1.4rem;
	line-height: 1.0em;
	vertical-align: middle;
	font-weight: normal;
}

#product .eng{
	font-size: 1.4rem;
	position: absolute;
	line-height: 1.0em;
	color: #fff;
	left: 130px;
	top: 45px;
}

#product .txt{
	width: 215px;
	color: #000;
	font-size: 1.4rem;
	line-height: 1.6em;
	float: left;
	margin-left: 20px;
	margin-top: 25px;
}

#product .ph{
	margin-left: 30px;
	margin-top: 10px;
}

#product .release{
	float: left;
	margin-top: 15px;
	margin-left: 100px;
}

#product .product_new{
	margin-top: 8px;
	margin-left: 290px;
}


#blog{
	width: 488px;
	height: 357px;
	border: 3px solid #45403f;
	background: #fff;
	margin-top: 12px;
	margin-right: 12px;
	float: left;	
}

#blog .ttl{
	height: 116px;
	background-image: url(../img/blog_ttl.jpg);
	background-repeat: none;
	position: relative;
}

#blog .day{
	color: #fff;
	font-size: 1.4rem;
	line-height: 1.1em;
	position: absolute;
	left: 385px;
	top: 60px;
}

#blog .read{
	margin-top: 10px;
}

#blog .btn{
	width: 102px;
	height: 126px;
	text-align: center;
	border: 3px solid #ccc;
	border-radius: 10px;
	padding-top: 5px;
	background: #fff;
	margin-left: 11px;
	float: left;
}


#catalogue{
	width: 235px;
	height: 357px;
	border: 3px solid #c52d6d;
	background-image: url(../img/catalogue_back.png);
	background-color: #f4d7e4;
	margin-top: 12px;
	margin-right: 12px;
	float: left;
}

#catalogue h2{
	font-size: 2.0rem;
	line-height: 45px;
	color: #fff;
	font-weight: bold;
	background: #c52d6d;
	text-align: center;
	vertical-align: middle;
}

#catalogue h2 span{
	font-size: 1.4rem;
	margin-left: 1.0em;
	font-weight: normal;
	vertical-align: middle;
}

#catalogue .txt{
	font-size: 1.4rem;
	line-height: 1.6em;
	color: #000;
	padding: 1.0em;
	margin-top: 220px;
	
}

#secret{
	width: 235px;
	height: 357px;
	border: 3px solid #387779;
	background-image: url(../img/secret_back.png);
	background-color: #dae5e6;
	margin-top: 12px;
	float: left;
}

#secret h2{
	font-size: 2.0rem;
	line-height: 45px;
	color: #fff;
	font-weight: bold;
	background: #387779;
	text-align: center;
	vertical-align: middle;
}

#secret h2 span{
	font-size: 1.4rem;
	margin-left: 1.0em;
	font-weight: normal;
	vertical-align: middle;
}

#secret .secret_inn{
	position: relative;
}

#secret .secret_close{
	position: absolute;	
	top: 0;
	left: 10px;
}


#secret .secret_open{
	position: absolute;	
	top: 0;
	left: 10px;
	display: none;
}

#secret .secret_girl{
	position: absolute;	
	top: 230px;
	left: 170px;
}


#secret .txt{
	position: absolute;	
	font-size: 1.4rem;
	line-height: 1.6em;
	color: #000;
	padding: 1.0em;
	top: 240px;
	left: 20px;
}


.open_door{
    -webkit-animation: 1.0s ease-in-out forwards 1 running open_door;
    -moz-animation: 1.0s ease-in-out forwards 1 running open_door;
    animation: 1.0s ease-in-out forwards  1 running open_door;
}
@-webkit-keyframes open_door {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@-moz-keyframes open_door {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes open_door {
    0% { opacity: 1; }
    100% { opacity: 0; }
}



.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  text-align: center;
  background: #fff;
  padding: 30px;
}
 
.modal-overlay{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0,0,0,0.65);
  z-index: 1;
}
 
.modal-open,
.modal-close {
  cursor: pointer;
}



/*
#secret:hover, .frame6 .banner:hover{
	opacity:0.7;
	filter: alpha(opacity=70);
	transform:scale(1.02);
}
*/
footer{
	width: 100%;
	height: 352px;
	background: #eaeaea;
}

footer .inner{
	position: relative;
	width: 1000px;
	height: 140px;
	margin: 0 auto;
}

footer .pagetop{
	position: absolute;
	top: 10px;
}

footer .tokuiwaza{
	position: absolute;
	width: 848px;
	height: 57px;
	border: 1px solid #000;
	margin-left: 140px;
	background: #fff;
	top: 40px;
}

footer .tokuiwaza img{
	float: left;
	margin-right: 10px;
}

footer .tokuiwaza .txt{
	color: #1a1311;
	font-size: 1.4rem;
	line-height: 1.5em;
	margin-top: 4px;
}

footer .foot_navi{
	width: 1000px;
	height: 137px;
	margin: 0 auto;
	border-bottom: 1px solid #000;
}

footer ul{
	list-style: none;
	float: left;
	margin-left: 5.0em;
	margin-top: 8px;
}
footer li{
	font-size: 1.4rem;
	line-height: 1.8em;
}

footer li.instagram img{
	width: 50px;
	height: auto;
	margin-top: 30px;
}

footer li.instagram a:hover{
	opacity: 0.5;
}

footer a{
	color: #1a1311;	
}

footer .apple{
	margin-left: 900px;
}

footer .copy{
	width: 1000px;
	height: 70px;
	margin: 0 auto;
}

footer .count{
	width: 200px;
	height: 70px;
	text-align: right;
	float: left;
	margin-top: 15px;
}

footer .add{
	width: 700px;
	height: 70px;
	text-align: center;
	float: left;
}

footer .add2{
	width: 1000px;
	float: none;
}

footer .add p{
	font-size: 1.4rem;
	line-height: 1.8em;
	margin-top: 15px;
}

footer .add .modal-open{
	padding: 0.1em 0.3em;
	margin: 0 0.3em;
	background: #fff;
	border: 1px solid #605149;
}

.blink {
    -webkit-animation: 0.5s linear 0s alternate none infinite running blink;
    -moz-animation: 0.5s linear 0s alternate none infinite running blink;
    animation: 0.5s linear 0s alternate none infinite running blink;
}
@-webkit-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@-moz-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}


.clear{
	clear: both;
	float: none;
}
.bold{
	font-weight: bold;
}

.mt20{
	margin-top: 20px;
}

.mt40{
	margin-top: 40px;
}

.red{
	color: red;
}
.blue{
	color: blue;
}

.slicknav_menu{
	display: none;
}

.slicknav_icon,
.slicknav_icon span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}
.slicknav_icon {
    position: relative;
}
.slicknav_menu .slicknav_icon-bar{
    position: absolute;
    left: 0;
}
.slicknav_icon span:nth-of-type(1) {
    top: 0;
}
.slicknav_icon span:nth-of-type(2) {
    top: 3px;
}
.slicknav_icon span:nth-of-type(3) {
    bottom: 0;
}
.active .slicknav_icon-bar:nth-of-type(1) {
    -webkit-transform: translateY(8.5px) rotate(-45deg);
    transform: translateY(8.5px) rotate(-45deg);
}
.active .slicknav_icon-bar:nth-of-type(2) {
    opacity: 0;
}
.active .slicknav_icon-bar:nth-of-type(3) {
    -webkit-transform: translateY(-8.5px) rotate(45deg);
    transform: translateY(-8.5px) rotate(45deg);
}