@charset "utf-8";

/* =================================================================================================

　TOPページ用

================================================================================================= */

#top_img {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

#top_img .scrolling {
	width: 93px;
	height: 94px;
	position: absolute;
	bottom: -20px;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	z-index: 10000;
}
#top_img .scrolling a {
	width: 100px;
	height: 100px;
	display: block;
}

/* ----------------------------------------------------------------------------
　メイン写真
---------------------------------------------------------------------------- */
#main_photo{
	width:100%;
	height:100vh;
	position:relative;
}
#main_photo .slide li{
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	height:83vh;
}
#main_photo .slide li img{
	transition: 0.6s ease-in-out;
	opacity:0;
	height: 100%;
	width: auto;
	max-width: none;
}
#main_photo .slide .active img{
	opacity:1;
}

#main_photo .paging{
	width:100%;
	position:absolute;
	left:0px;
	bottom: 150px;
	z-index:0;
	text-align:center;
}
#main_photo .paging li{
	width:15px;
	height:15px;
	border-radius: 100px;
	
	text-indent:100%;
	white-space:nowrap;
	overflow: hidden;
	
	display:inline-block;
	background-color:#ccc;
	margin:0 10px;
	cursor:pointer;
}
#main_photo .paging .active{
	background-color:#FF8023;
	cursor:default;
}

.main_txt {
	position: absolute;
	z-index: 100;
	top: 260px;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}


/* スマホ */
@media screen and (max-width: 767px){

#top_img {
	height: 85vh;
}

#main_photo_wrrap {
	top:0;
}

#main_photo{
	margin-top: 50px;
}
#main_photo h2{
	font-size:18px;
}

#main_photo{
	height:85vh;
}
#main_photo .slide li{
	height:85vh;
}
#main_photo .slide li img{
	width: 100%;
	height: auto;
}
	
#main_photo .paging{
	bottom: 80px;
}
	
.main_txt {
	width: 70%;
	margin: 0 auto;
	top: 160px;
}
.main_txt img {
	width: 100%;
	height: auto;
}

}

/* ----------------------------------------------------------------------------
　青木食品の麺製品
---------------------------------------------------------------------------- */
#noodles {
	background: url(../images/noodles_bg.jpg) no-repeat bottom center;
	background-size: cover;
	padding-top: 40px;
	padding-bottom: 60px;
}

#noodles .read {
	text-align: center;
	font-size: 16px;
	line-height: 180%;
	margin-bottom: 40px;
}

#noodles h2 {
	text-align: center;
	margin-bottom: 36px;
}

#noodles ul {
	text-align: center;
}
#noodles ul li {
	display: inline-block;
	padding: 0 20px;
}

/*#noodles ul li a:hover img {
	-webkit-filter: brightness(110%);
    -moz-filter: brightness(110%);
    -o-filter: brightness(110%);
    -ms-filter: brightness(110%);
    filter: brightness(110%);
}*/

/* スマホ */
@media screen and (max-width: 767px){
	#noodles {
		padding-top: 40px;
	}
	#noodles h2 img {
		width: 100%;
		height: auto;
	}
	#noodles .read {
		padding: 0 10px;
		font-size: 12px;
	}
	#noodles ul {
		display: table;
		padding: 0 5px;
	}
	#noodles ul li {
		display: table-cell;
		padding: 0 5px;
	}
	#noodles ul li img {
		width: 100%;
		height: auto;
	}
}

/* ----------------------------------------------------------------------------
　青木食品の品質管理
---------------------------------------------------------------------------- */
#commitment {
	background-color: #FEECD7;
	padding-top: 60px;
	padding-bottom: 70px;
}
#commitment h2 {
	text-align: center;
	margin-bottom: 36px;
}
#commitment .read {
	text-align: center;
	font-size: 16px;
	line-height: 180%;
	margin-bottom: 40px;
}
#commitment .img_box {
	width: 800px;
	margin: 0 auto;
}


/* スマホ */
@media screen and (max-width: 767px){
	#commitment {
		padding-bottom: 40px;
	}
	#commitment h2 {
		margin-bottom: 40px;
	}
	#commitment h2 img {
		width: 100%;
		height: auto;
	}
	#commitment .read {
		padding: 0 20px;
		font-size: 12px;
	}
	#commitment .img_box {
		width: 90%;
		margin: 0 auto;
	}
	#commitment .img_box img {
		width: 100%;
		height: auto;
	}
}

/* ----------------------------------------------------------------------------
　MAP
---------------------------------------------------------------------------- */
#map {
	background-color: #FEECD7;
}

#map .map_box {
	width: 700px;
	height: 470px;
	position: relative;
	margin: 0 auto;
	padding-bottom: 90px;
}
#map .map_box iframe {
	width: 700px;
	height: 470px;
}
#map .map_info {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 3;
}
#map .map_link {
	text-align: right;
	margin-top: 5px;
}
#map .map_link a {
	text-decoration: none;
	color: #FF8022;
}
#map .map_link a:hover {
	text-decoration: underline;
}

/* スマホ */
@media screen and (max-width: 767px){
	#map .map_box {
		width: 100%;
		height: 310px;
	}
	#map .map_box iframe {
		width: 100%;
		height: 240px;
		margin-bottom: 10px;
	}
	#map .map_txt {
		padding: 0 10px;
		line-height: 140%;
		font-size: 16px;
	}
	#map .map_link {
		text-align: center;
		font-size: 22px;
		margin-bottom: 10px;
	}
}