@charset "utf-8";

@media(max-width:768px) {

.sp{
	display: block;
}

.sp2{
	display: inline;
}

.pc, .pc2{
	display: none;
}



nav, nav ul{
	width: 100%;
	height: auto;
	margin: 0!important;
	padding: 0.5rem 0!important;
	background:none;
}

nav .lp{
	line-height: auto!important;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

nav li{
	width: 47%;
	margin: 0;
	padding: 0;
	display: inline-block;
	float: left!important;
	margin-left: 2%;
	margin-bottom: 0.5rem;
	border: none!important;
}
nav li a{
	border: 1px solid #fff;
}

nav li{
	width: 47%;
	margin: 0;
	padding: 0;
	display: inline-block;
	float: left;
	margin-left: 2%;
	margin-bottom: 0.5rem;
}

nav .sdgs_link{
	display: none!important;
}

header{
	height: 6.0rem;
	background: none;
	background-image: none;
}



header .head{
	height: 2.0rem;
	width: 100%;
	background-image: none;
}

section{
	width: 92%!important;
	margin: 0!important;
	padding: 0!important;
	margin-left: 4%!important;
}
section > *{
	width: 100%!important;
	margin: 0;
	padding: 0;
}

section > * img{
/* 	display: none; */
}

section > * table{
	width: 100%!important;
	height: auto!important;
}
#search{
	height: auto;
	margin: 0;
	padding: 0;
	background: #feedcc;
}
#search .search_sp{
	width: 100%;
	margin-top: 3.0rem;
	height: auto;
}

#search .search_sp .read{
	width: 90%;
	font-size: 1.6rem;
	line-height: 1.2em;
	font-weight: bold;
	color: #fff;
	background: #942d2a;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 0.6em;
	padding-bottom: 0.6em;
}

#search .search_sp .read span img{
	width: 2.0em;
	height: auto;
}

#search form{
	text-align: center;
}

#search select{
	width: 80%;	
	margin-top: 2.0rem;
	margin-bottom: 2.0rem;
	font-size: 2.0rem;
}

#search .results{
	width: 90%;
	padding: 0 5%;
	padding-top: 1.0rem;
	padding-bottom: 1.0rem;
	height: auto;
	float: none;
	text-align: center;
	border: none;
	margin: 0!important;
}

#search .results .type_name_sp{
	font-size: 1.4rem;
	font-weight: bold;
	color: #fff;
	text-align: left;
}


#search .results .type_sp{
	color: #fff;
	margin-top: 10px;
	font-size: 4.0rem;
	font-weight: bolder;
	font-weight: 900;
	text-align: left;
	float: left;
}

#search .results .type_image_sp{
	float: left;
	margin-left: 10%;
}


#search .results .pi_sp img{
	background: #ffef00;
	border-radius: 5px;
	float: right;
}

#search  .special_btn{
	width: 80%;
	font-size: 2.0rem;
	text-align: center;
	line-height: 1.5em;
	font-weight: bold;
	border: 4px solid #29abe2;
	color: #29abe2;
	margin-left: 10%;
	display: inline-block;
	background: #f9fcfe;
	margin-bottom: 3.0rem;
}

.banner .sp{
	margin-top: 3.0rem;
	border: 3px solid #92181e;
	width: 98%

}

#materials{
	margin-top: 3.0rem;
	height: auto;
}

#materials .ttl{
	height: auto;
	background: #65b700;
	padding: 1.0rem;
}


#materials .ttl h2{
	position: relative;
	font-size: 2.6rem;
	line-height: 1.0em;
	top: 0;
	left: 0;
	padding-bottom: 0.5em;
	text-align: center;
}

#materials form{
	text-align: center;
	background: #f3f7df;
	border: 3px solid #65b700;
}

#materials select{
	width: 80%;	
	margin-top: 2.0rem;
	margin-bottom: 2.0rem;
	font-size: 2.0rem;
}

#materials .ttl .read{
	position: relative;
	width: 90%;
	margin-left: 5%;
	font-size: 1.4rem;
	line-height: 1.5em;;
	left: 0;
	top: 0;
}

#materials .frame{
/*
	width: 100%;
	height: auto;
	border: none;
	background: #f3f7df;
	position: relative!important;
	margin: 0;
	padding: 1.0em 0;
*/
	display: none;
}


#materials .frame img{
	display: none;
}

#materials .frame ul{
	position: relative;
	list-style: none;
	left: 0;
	top: 0;
	margin-left: 1.0em;
	font-size: 2.0rem;
	line-height: 1.6em;
}

/* コンクリート製品用模様鋼板　202306追加 */
#materials .frame7_sp{
	border: 2px solid #65b700;
	background: #f3f7e0!important;
	margin: 20px 0 0;
	padding: 0 2%;
	padding-top: 1.0rem;
	padding-bottom: 1.0rem;
}

#materials .frame7_sp h3{
	width: 100%;
	line-height: 2.8em;
	font-size: 1.2rem;
	color: #fff;
	text-align: center;
	background: #426128;
}
#materials .frame7_sp .txt{
	width: 100%;
	font-size: 1.0rem;
	line-height: 2.0em;
	font-weight: bold;
	color: #416128;
	background: #f6da9f;
	margin-top: 1.0rem;
	text-align: center
}

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

#materials .frame7_sp .sand_link > div{
	width: 57%;
}

#materials .frame7_sp .sand{
	width: 40%;
}

#materials .frame7_sp .pattern{
	width: 100%;
	display: flex;
	justify-content: space-between;	
	margin-top: 1.0rem;
}


#materials .frame7_sp a{
	display: inline-block;
}

#materials .frame7_sp .pattern a{
	width: 30%;	
}

#materials .frame7_sp a img{
	width: 100%;
	height: auto;	
}

#traffic{
	width: 100%;
	height: auto;
	margin-right: 0;
	float: none;
	margin-top: 3.0rem;	
}

#traffic h2{
	font-size: 2.6rem;
	line-height: 0.8em;
	padding-left: 0;
	background-image: none;
	background: #e9e235;
	text-align: center;
	padding-top: 0.5em;
}

#traffic h2 span{
	display: block;
}


#traffic .left{
	width: 100%;
	height: auto;
	float: none;
}

#traffic .left table{
	margin-left: 0;
}

#traffic .left td{
	width: 50%;
	height: auto;
}

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

#traffic .left .name_a, #traffic .left .name_b{
	width: 35%;
	height: auto;
	padding-left: 1.0em;
	font-size: 1.4rem;
	line-height: 1.4em;
}

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

#traffic .left .face_a, #traffic .left .face_b{
	width: 15%;
}

#traffic .left .face_a img, #traffic .left .face_b img{
	width: 100%;
	height: auto;
}


#traffic .right{
	width: 100%;
	height: auto;
	padding: 0;
	background: none;
}

#traffic .right .face{
	width: 3.0rem;
	height: auto;
	margin-left: 10px;
	margin-right: 1.0em;
}

#traffic .right .status{
	font-size: 1.2rem;
	line-height: 3.0rem;
	color: #000;
}


#traffic .right h3{
	width: 100%;
	font-size: 1.6rem;
	line-height: 1.5em;
	margin-left: 0;
	margin-top: 10px;
	padding: 0.5em 0;
}

#traffic .right .ph{
	display: none;	
}

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

#info{
	height: auto;
	width: 100%;
	float: none;
	margin-top: 3.0rem;	
	padding-bottom: 2.5em;
}

#info h2{
	font-size: 2.6rem;
	line-height: 1.5em;
	color: #fff;
	background-image: none;
	background: #a66026;
}

#info .info{
	font-size: 1.6rem;
	line-height: 1.6em;
}

#takumi{
	width: 100%;
	height: auto;
	float: none;
	margin-top: 3.0rem;	
	margin-right: 0;
}

#takumi h2{
	margin: 0;
}

#takumi h2 img{
	width: 90%;
	height: auto;
	margin-left: 5%;
	margin-top: 1.0rem;
}

#takumi .read{
	font-size: 1.6rem;
	line-height: 1.4em;
}

#takumi .ph{
	display: none;
}
#takumi .check{
	float: none;
	margin-top: 2.0rem;
	text-align: center;
	padding-right: 10%;
	margin-bottom: 1.5rem;
}

#takumi .takumi_new{
	float: right;
	margin-top:-12.0rem;
	padding-right: 10%;
}

#product{
	width: 100%;
	height: auto;
	margin-top: 3.0rem;
	float: none;	
}

#product .ttl{
	height: auto;
	padding: 1.0rem;
}

#product h2{
	position: relative;
	font-size: 2.6rem;
	line-height: 1.2em;
	left: 0;
	top: 0;
	text-align: center;

}

#product .eng{
	font-size: 1.4rem;
	position: relative;
	line-height: 1.0em;
	left: 0;
	top: 0;
	text-align: center;
}


#product .txt{
	width: 90%;
	color: #000;
	font-size: 1.6rem;
	float: none;
	margin-left: 5%;
}

#product .ph{
	display: none;
}

#product .release_inn{
	display: flex;
	justify-content: center;
}

#product .release{
	float: none;
	margin-left: 0;
	padding-bottom: 1.0rem;
}

#product .product_new{
	margin-left: 0;
}

#blog{
	width: 100%;
	height: auto;
	margin-right: 0;
	float: none;	
	margin-top: 3.0rem;
	padding-bottom: 1.0rem;
}

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

#blog .day{
	font-size: 1.4rem;
	line-height: 1.1em;
	position: relative;
	left: 0;
	top: 0;
	text-align: right;
	color: #000;
	padding: 0.5em;
}

#blog .read img{
	width: 90%;
	margin-left: 5%;
}

#blog .btn{
	width: 21%;
	padding: 0;
	margin: 0;
	height: auto;
	float: left;
	margin-left: 2%;
}

#blog .btn img{
	width: 100%!important;
	height: auto!important;
}

#catalogue{
	width: 100%;
	height: auto;
	background-image: url(../img/catalogue_back.png);
	background-repeat: no-repeat;
	background-position: center top;
	margin-right: 0;
	float: none;	
	margin-top: 3.0rem;
	padding-bottom: 1.0rem;
}


#catalogue .txt{
	font-size: 1.6rem;
	margin-top: 23.0rem;
	
}

#secret{
	width: 100%;
	height: auto;
	background-image: none;
	float: none;	
	margin-top: 3.0rem;
	padding-bottom: 1.0rem;
	position: relative;	
/* 	background-image: url(../img/secret_close.png); */
	background-repeat: no-repeat;
	background-position: center center;

}

#secret .secret_close{
	display: none;
}


#secret .secret_open{
	display: none;
}

#secret .secret_girl{
	display: none;
}


#secret .txt{
	position: relative;	
	font-size: 2.0rem;
	line-height: 1.6em;
	color: #000;
	padding: 1.0em;
	top: 0;
	left: 0;
	text-align: center;
}


section .tokuiwaza{
	width: 100%;
	height: auto;
	border: 1px solid #000;
	background: #fff;
	margin-top: 3.0rem;
}

section .tokuiwaza img{
	float: left;
	width: 20%;
	height: auto;
}

section .tokuiwaza .txt{
	width: 70%;
	margin-left: 25%;
	color: #1a1311;
	font-size: 1.4rem;
	line-height: 1.5em;
}


footer{
	width: 100%;
	height: auto;
	margin-top: 4.0rem;
	padding: 1.0rem 0;
	d
}
footer .inner,footer .apple{
	display: none;
}
footer .foot_navi{
	width: 100%;
	height: auto;
/* 	display: none; */
}
footer ul{
	float: none;
	text-align: center;
	margin: 0;
}
footer .foot_navi li{
	width: 100%;
	margin-bottom: 1.0rem;
}
footer .foot_navi a{
	width: 90%;
	padding: 0.5em 0;
	border-radius: 1.0em;
	display: inline-block;
	background: #ccc;
}


footer .copy, footer .add, footer .add2{
	width: 100%;
	height: auto;
	float: none;
}

footer .count{
	width: 100%;
	height: auto;
	text-align: center;
	float: none;
	margin-top: 15px;
}


.slicknav_menu{
	display: block;
    width: 100%;
    position: fixed;
    z-index: 1000;
	background: #ffef00;
	background-image: url(../img/logo_sp.jpg);
	background-repeat: no-repeat;
	padding-top: 0.2rem;
}

.menu_var_scroll {
	height: 100%;
    overflow: auto !important;
}

.menu_var_scroll ul {
    height: 100% !important;
}

nav{
	display: none;
}


.modal {
	width: 100%;
}


.modal-cont img{
	width: 100%;
	height: auto;
}

.active{
/* 	background: url(../img/navi_back_sp.png)!important; */
/* 	background: #ffef00; */
	background-image: url(../img/logo_sp.jpg);
	background-repeat: no-repeat;
}

.slicknav_open{
/* 	background:none!important; */
/* 	background: url(../img/navi_back_sp.png)!important; */
}

.slicknav_nav{
/* 	background: url(../img/navi_back_sp.png)!important; */
/* 	background: #000; */
}

.slicknav_btn{
/* 	background: #fc4b87; */
	background: #000;
	border-radius: 0;
}

.page-top {
	width: 15%!important;
	position: fixed;
	bottom: 30px;
	right: 2%;
	opacity: 0.7;
	z-index: 1;
}


.search_sp{
    width:100%;
    overflow: hidden;
}
.search_sp_in{
      width: 90%;
      margin-bottom: 2.0rem;
      margin-left: 5%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
	background: #fff;
}
.search_btn_sp{
     display: inline-table;
     max-width: 100%;
	border: none!important;
	float: left;
}

.search_btn_sp li{
    display: table-cell;
	border-bottom: none;
	background: #fff;
	margin: 0;
	padding: 0;
	text-align: center!important;
}

.search_btn_sp li p{
	text-align: center!important;
	margin: 0;
	padding: 0;
}

.search_btn_sp li .name{
	font-size: 1.8rem;
	line-height: 1.0em;
	vertical-align: top;
	padding-top: 0.5em;
}

.search_btn_sp img{
	margin: 0;
	padding: 0;
}



.materials_sp{
	width: 100%;
	height: auto;
	background-color: #f3f7e0;
	padding: 1.5rem 0;
}
.materials_sp ul{
	float: none;
	text-align: center;
	margin: 0;
	list-style: none;
}
.materials_sp li{
	font-size: 1.6rem;
	line-height: 1.5em;
	font-weight: bold;
	width: 100%;
	margin-bottom: 1.0rem;
}
.materials_sp a{
	width: 85%;
	padding: 0.5em 0;
	display: inline-block;
	background: #fff;
	color: #65b700;
	border: 2px solid #65b700;
}

}