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

* {
	font-size:3.733vw;/*14px*/
	line-height: 135%;
}	

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
	
	
.spNone{ display: none;}
	
img{width:100%;}
	
.inner{
	width:86.6%;
	margin:0 auto;
	text-align: left;
	}	
	
/* header
------------------------*/

#header {
	height: 50px;
	overflow: inherit;
	position: relative;
	z-index:5000; 
	}

#header .inner{
	position: fixed;
	top:0;
	left:0;
	height: 50px;
	width: 100%;
	background-color:#fff;
}
	
.h_contents{background-color:#fff;}

#header #logo a {
	display: block;

	height:50px;
	width: auto;
	min-width:220px;
}	
	
#header #logo img{
	height:50px;
	width: auto;
	}

	
#gnav {
	height: auto;
}

#gnav .inner{
	width:100%;
	
}
	
ul#navi {
    position: absolute; /*bodyに対しての絶対位置*/
    right:0;
    top: -400px; /*通常時はビュー外*/
		display: block;
		height: auto;
		width:100%;
		margin: 0;
    background:rgba(77,167,225,1);
    -webkit-transition:.5s ease-in-out; /*transitionで動きを*/
    -moz-transition:.5s ease-in-out;
    transition:.5s ease-in-out;
    text-align:left;
	z-index: -1;
	}
ul#navi li {
    display:block;
		height: 13.3vw;
		width: 100%;
		height: auto;
    margin:0;
		box-sizing: border-box;
    border-bottom:solid 1px #fff;
	
	}
ul#navi li a {
		width: 100%;
		height: 13.3vw;
		box-sizing: border-box;
		display: block;
		margin: 0;
		text-decoration: none;
		line-height:13.3vw;
	color:#fff;
	text-align: center;
		}
ul#navi li::after {content:''}

/* Toggle(Button) */
/*display:noneだったボタンを display:blockにして表示します*/
#navToggle {
    display:block; /*通常時は非表示にしておきます*/
    position:absolute; /*bodyに対しての絶対位置指定です*/
    right:0px;
    top:0px;
    width:50px;
    height:50px;
	padding: 8px;
	box-sizing: border-box;
	background:url(../images/common/menu_sp.png) no-repeat center 3px #fff;
	background-size:auto 10px;
    cursor:pointer;
		z-index:10000;


	}
#navToggle div {position:relative} /*spanの絶対位置指定の親にします*/

#navToggle span {
    display:block;
    position:absolute; /*#navToggle div に対して*/
    width:100%;
    border-bottom:solid 3px #4da7e1;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out}
#navToggle span:nth-child(1) {top:10px}
#navToggle span:nth-child(2) {top:20px}
#navToggle span:nth-child(3) {top:30px}


/* Click Toggle(Button) */
/*ここから jQueryで header要素に付けた「.openNav」を利用します*/
.openNav #navToggle{
background:url(../images/common/close_sp.png) no-repeat center 3px #fff;
background-size:auto 10px;
}
/*.openNavが付いた要素内のボタン（#navToggle）内のspanへの指定*/
/*最初のspanをマイナス45度に*/
.openNav #navToggle span:nth-child(1) {
    top: 20px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg)}
/*2番目と3番目のspanを45度に*/
.openNav #navToggle span:nth-child(2){opacity: 0;}
.openNav #navToggle span:nth-child(3) {
    top: 20px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg)}

/*header menu*/
/*.openNavが付いた要素の中のnavを 縦方向に351px移動（=表示される）*/
.openNav ul#navi {
    -moz-transform: translateY(450px);
    -webkit-transform: translateY(450px);
    transform: translateY(450px)
	}
	
.h_tel{
		width: 100%;
		background:#4da7e1;
		position: fixed;
		bottom:0;
		left:0;
	text-align: center;
	border-top: 1px solid #fff;
	}
	
	.h_tel img{
		width:auto;
		height:12vw;
	}
	
#pagetop{
	width: 10.6vw;
	height: 10.6vw;
		position:fixed;
		right:10px;
		bottom:14vw;
	z-index: 5000;
	background-color: #fff;
	}
#pagetop a {
	width: 100%;
	height:100%;
	display: block;
	}
	
#pagetop a img{
		width: 100%;
	height:100%;
	}	

#footer {
		color:#fff;
	}
	
#footer .f_contents {
	width: 100%;
	height: 57vw;
	padding:19.8% 0 0;
	background: url(../images/common/img_wave.png) no-repeat center top;
	background-size: auto 100%;
	position: absolute;
	margin-top:-14vw;
	text-align: center;
}
	
	#footer img.logo{
		width:60%;
		margin-bottom: 8%;
	}

	#footer a{
		color:#fff;
		text-decoration: none;
	}
	
	#footer .add{
		text-align: center;
	margin-bottom: 8%;}
	
	#footer .add p{
		line-height: 180%!important;
	}
	
	#footer .copyright{
		font-size:3.2vw;
		text-align: center;
	}		
	
	.topicPath {display:none;}
	
/*---------------------------------
	トップページ
-----------------------------------*/		
	

	
/* mainImage
---------------------------*/	
	
#mainImage #slider li {
  height: 50vh;
  background: center / cover no-repeat;
}			
	
	
	
/* contents
---------------------------*/

	
#contents {
	margin-top: -50px;/*headerの高さが100pxの場合*/
	padding-top: 50px;
}
	
.index h1 {
  position: absolute;
  z-index: 100;
  top: 23%;
	left:0;
	right:0;
  width: 80%;
	margin:0 auto;
}	
	
.index h2 {
	text-align: center;
}
	
.index h2 img{
		width: 40%
	}	
.index h2 span {
	display: block;
	font-size:5.333vw;
	letter-spacing: 0.1em;
}
	
.icon_scroll{display:none;}		
	
	
	
/*事業案内
-------------------------------*/

#service .readBox {
	/*height: 27vw;*/
	height:8vw;
	position: relative;
	color: #fff;
	margin-bottom:34vw;
}
#service .readBox .inner {
	width: 100%;
	/*height: 190px;*/
	padding: 12% 0 5%;
	box-sizing: border-box;
	position: absolute;
	top: -91%;
	background: url(../images/common/img_wave.png) no-repeat bottom center;
	background-size: auto 100%;
}
	
/*#service .readBox img{
  width: 40%
}*/

#service .readBox span{
  margin: 0.2em 0 0.5em;
}

#service .readBox p{
  /*font-size:3.3vw;*/
  line-height: 1.8em;
  text-align: center;
}

#service-content h3{
  font-size:5.333vw;
  margin:8% 0;
  text-align: center;
  letter-spacing: 0.1em;
}
#service-content .inner{
  padding:0% 0 14%;
}

#service-content .view .tit{display:none;}

	
/*クリンカアッシュ*/
#service-content .coalAsh .readBox {
	height:auto;
	padding:10% 0;
	margin-bottom: 0!important;
	box-sizing: border-box;
	background: #4da7e1;
	color: #fff;
	
}
#service-content .coalAsh h3,
#service-content .coalAsh h4{
	font-size:5.333vw;
	margin:3% 0;
	text-align: center;
}
	
#service-content .coalAsh h4{
		padding-top: 5.33vw;
	}
	
#service-content .coalAsh a{
		display:block;
		width:55%;
		padding:4% 0;
		margin:8% auto 0;
		box-sizing: border-box;
		background-color:#4da7e1;
		color:#fff;
		text-align:center;
		text-decoration: none;
	}	
	

/* news */
#news  {
	margin-bottom: 50px;
}
#news .readBox {
	padding: 60px 0 30px;
}
#news .descriptionBox {
 margin-bottom: 30px; 
}
#news .descriptionBox .e-title {
  display: inline-block;
  margin: 0 auto;
  font-size: 5.333vw;
  margin-bottom: 30px;
  /* background: linear-gradient(transparent 60%, #ff0 0%); */
}
#news .descriptionBox .e-text {
  display: inline-block;
  text-align: left;
  width: 86.6%;
  margin-bottom: 1.5em;
}
#news .descriptionBox .e-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 240px;
  height: 50px;
  text-decoration: none;
  background-color: #4da7e1;
  color: white;
  /* margin-bottom: 30px; */
  /* border-radius: 5px; */
}
#news .infoBox {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  color: white;
  max-width: 1200px;
  padding: 0 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
#news .infoBox .e-img-box {
  width: 100%;
}
#news .infoBox .e-img-box img {
  width: 100%;
  vertical-align:top;
}

#news .infoBox .e-table-box {
  width: 100%;
  background-color: #f4f3f3;
  color: #333;
}
#news .infoBox .e-table-box h4 {
  text-align: center;
  font-size: 5.333vw;
  width: 90%;
  margin: 20px auto 10px;
}
#news .infoBox .e-table-box table {
  width: 80%;
  margin: 0px auto 20px;
  text-align: left;
}
#news .infoBox .e-table-box table tbody tr th {
  padding: 10px 0;
  width: 30%;
}
#news .infoBox .e-table-box table tbody tr td {
  padding: 10px 0;
}

/*message*/
	
#message h2{
		margin:6% 0;
	}	
#message .inner{
		padding:6% 0 14%;
	}	
	
	#message img.president{
		width:85%;
		height:auto;
		margin:0 6% 6%;
	}
	
	#message .cont_message .inner p span {
	display: block;
	text-align: right;
		margin-top:6%;
}
	
	#message .cont_message .inner p span img{
		width:55%;
		height:auto;
	}
	
/*company*/

#company{
	background-color: #f4f3f3;
	padding-top:6%;}	
	
#company h2{
		margin: 0 0 6%;
	}
	
	#company table{
		width:86.6%;
		margin:6% auto;
	}
	#company table th{
		width:24.4%;
		padding:2% 0;
		text-align: left;
	}
	
	#company table td{
		padding:1% 0;
		text-align: left;
	}

	
/*recruit*/

#recruit{
	padding-top: 6%;
	background-color: #f4f3f3;}
	
#recruit h2{
		margin:0 0 3%;
	}	
	
#recruit h2 span {
	display: block;
	width: 54%;
	margin:0 auto 3%;
	background: linear-gradient(transparent 60%, #ff0 0%);
}
	
#recruit .tel{
		width:62.6%;
		margin: 3% 0;
	}

/*access*/
	
#access{
	padding:6% 0 3%;
	}	
	
#access #gmap{
		height:68vw;
	margin-top: 8%;
	}	
	


/*---------------------------------
	クリンカアッシュページ
-----------------------------------*/			

.clinkerash h1{
	display: block;
	width: 100%;
	padding:12.6% 0;
	margin-bottom: 8vw;
	box-sizing: border-box;
	font-size:5.333vw;
	letter-spacing: 0.1em;
	text-align: center;
	background: url(../images/clinkerash/img_title_clinkerash_sp.jpg) no-repeat center;
	background-size: cover;
	color:#fff;
	}
	

.clinkerash h2 {
	display: block;
	font-size:5.333vw;
	text-align: center;
	margin: 7.3vw 0;
	}
	
.clinkerash h3 {
	display: block;
	margin:15.7vw 0 5.3vw;
	font-size:5.333vw;
	border-bottom:2px solid #4da7e1;
	}	
	
	.clinkerash #conditions div{
		padding:4.6vw;
		margin-bottom: 3.3vw;
		background-color:#e4f1fa;
	}
	
	.clinkerash #conditions div:last-child{
		margin-bottom: 0;
	}
	
	.clinkerash #conditions h4{
		width: 100%;
		font-size:4.6vw;
		overflow: hidden;
		margin-bottom: 3%;
	}
	
	.clinkerash #conditions h4 span{
		display:block;
		width:4.6vw;
		height: 4.6vw;
		margin-right:1vw;
		color:#fff;
		font-size:4vw;
		text-align: center;
		line-height: 4.6vw;
		float: left;
		background:#4da7e1;
}
	
	.clinkerash #feature ul li{
		display: inline-block;
		width: 49%;
		padding-left: 3.2vw;
		margin-bottom: 3vw;
		box-sizing: border-box;
		background: url(../images/clinkerash/icon_ciecle.png) no-repeat left center;
		background-size:2.9vw;
	}
	
	.clinkerash #feature p{
		padding: 3.2vw 0 4.6vw;
		box-sizing: border-box;
	}
	
	.clinkerash #feature h4{
		font-size: 4vw;
		margin:7.3vw 0 3.2vw;
		font-weight:bold;
	}
	
	.clinkerash #quality h4{
		display: block;
		font-size: 4vw;
		padding:2.9vw 0;
		margin-top: 3.2vw;
		text-align: center;
		color:#fff;
		background:#4da7e1;
		border-bottom:none;
	}
	
	.clinkerash #quality table{
		width:100%;
	}
	
	.clinkerash #quality table .li_th {
		display: block;
		width: 27.4%;
		float: left;
		border-top:1px solid #4da7e1;
		border-bottom:1px solid #4da7e1;
		border-left:1px solid #4da7e1;
		box-sizing: border-box;
	}
	.clinkerash #quality table .li_th th{
		display: block;
		padding:2.9vw 0;
		border-bottom:1px solid #4da7e1;
		text-align: center;
		
	}
	
	.clinkerash #quality table .li_td {
		display: block;
		width: 72.6%;
		float: left;
		border-top:1px solid #4da7e1;
		border-right:1px solid #4da7e1;
		border-bottom:1px solid #4da7e1;
		border-left:1px solid #4da7e1;
		box-sizing: border-box;
	}
	.clinkerash #quality table .li_td td{
		display: block;
		padding:2.9vw 0;
		text-align: center;
		border-bottom:1px solid #4da7e1;
	}
	
	.clinkerash #quality table .li_th th.last{
		border-bottom:none;
	}
	
	.clinkerash #quality table .li_td td.last {
		border-bottom:none;
	}

	.clinkerash #case table{
		width: 100%;
		margin: 5.8vw 0;
		
	}
	
	.clinkerash #case table th{
		width: 26.6vw;
		padding-bottom: 2.9vw;
	}
	.clinkerash #case table td{
		padding-bottom: 2.9vw;
	}
	.clinkerash #case ul{
		margin-bottom: 18.6vw;
	}
	 
	.clinkerash #case ul li{
		display:block;
		width:48%;
		margin-bottom:4.5vw; 
	}
	
	.clinkerash #case ul li:nth-child(odd){
		float:left;
	}
	
	.clinkerash #case ul li:nth-child(even){
		float:right;
	}
	
}