/*
スマホ向けのCSS
*/

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

	スマホ版非表示設定

=======================================*/
div#parallax-header{display:none;}

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

	スライダーの見え方設定

=======================================*/
div#header{background: url("images/background.png") repeat;}
div#metaslider_container_432{
	margin-top: 70px;
	width:100%; /* 480px以下は幅いっぱいに広げる */
	max-width:480px; /* 最大幅の指定 */
}
div.page-header{
	margin-top: 140px;
}

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

	パララックス設定

=======================================*/
body#index h2{border-top: none; border-bottom:none;}
#intro, #second, #third{display:none;}

#sp_intro{
	background:url(images/sp_firstBG.jpg) no-repeat;
	background-size: cover;
	height: 223px;
	margin: 0 auto;
	padding: 80px 0 0 0;
}


#sp_second{
	background: url(images/sp_secondBG.jpg) no-repeat;
	background-size: cover;
	height: 233px;
	margin: 0 auto;
	padding: 70px 0 0 0;
}

#sp_third{
	background: url(images/sp_thirdBG.jpg) no-repeat;
	background-size: cover;
	height: 223px;
	margin: 0 auto;
	padding: 80px 0 0 0;
}

.float-left{
	text-align: center;
}

.float-right{
	text-align: center;
}

.float-center{
	text-align: center;
}



.story{
	width:100%;
	max-width: 480px;
	margin: 0 auto;
	font-family: "メイリオ", "Meiryo", sans-serif;
	font-weight: bold;
	font-size: 1.3em;
	line-height: 2.0;
}
.story h2{max-width: 300px; margin-top: 0; margin-right:auto; margin-bottom: 0; margin-left:auto;}
.story h2:nth-child(3){max-width: 480px;}
.story p{max-width: 200px; margin-top: 0; margin-right:auto; margin-bottom: 0; margin-left:auto; color: white;}
.story a{color: #fff;}
.story a:visited{color: #fff; text-decoration:none;}
.story a:hover{color: #fff; text-decoration:none;}
.story a:active{color: #fff; text-decoration:none;}

p#pb-about a{
	display: inline;
	float:left;
	background-color: rgba(109,98,88, .7);
	border: solid 1px #897f75;
	box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
	text-shadow: 0px 1px 0px rgba(137,127,117, .4);
	width: 200px;
	margin: 0 auto;
	font-weight: normal;
	font-size: 0.7em;
	text-align:center;
	letter-spacing: 0.5em;
}
p#pb-about a:hover {
	background-color: #6d6258;
}


p#pb-products a{
	display: inline;
	float:left;
	background-color: rgba(72,124,103, .7);
	border: solid 1px #628074;
	box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
	text-shadow: 0px 1px 0px rgba(111,152,134, .4);
	width: 200px;
	margin: 0 auto;
	font-weight: normal;
	font-size: 0.7em;
	text-align:center;
	letter-spacing: 0.5em;
}
p#pb-products a:hover {
	background-color: #487c67;
}



p#pb-recruit a{
	display: inline;
	content: '';
	display: block;
	clear: both;
	margin: 0 auto;
	background-color: rgba(52,52,52, .7);
	border: solid 1px #666666;
	box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
	text-shadow: 0px 1px 0px rgba(102,102,102, .4);
	width: 200px;
	font-weight: normal;
	font-size: 0.7em;
	text-align:center;
	letter-spacing: 0.5em;
}
p#pb-recruit a:hover {
	background-color: #343434;
}


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

	書体の設定

=======================================*/
body {
    /* ゴシック体の場合 */
    font-family: "Roboto", "Droid Sans", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
    line-height: 1.8;
    color: #F2F2F2;
}

ul, ol, dl, table {
    margin-bottom: 20px;
}

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

	h2の設定

=======================================*/
h2{
	width:100%; /* 480px以下は幅いっぱいに広げる */
	max-width:480px; /* 最大幅の指定 */
	margin:30px auto; /* ブロック要素の中央揃え */
	margin: 0 0 1.5em;
	padding: 0.8em;
	border-top: 3px double #666;
	border-bottom: 3px double #ac1875;
	font-size: 1.6em;
	text-align: center;
	font-weight: bold;
}


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

	h3の設定

=======================================*/
h3 {
	width:100%; /* 480px以下は幅いっぱいに広げる */
	max-width:480px; /* 最大幅の指定 */
	margin:20px auto; /* ブロック要素の中央揃え */
	position: relative;
	font-size: 1.5em;
	font-weight: normal;
	padding: 5px;
	border-bottom: 1px solid #ac1875;
}
/*======================================

	pの設定

=======================================*/
p{
	font-size: 1.2em;
	line-height: 2.0;
	width:100%;
	margin:30px auto 0 auto; /* ブロック要素の中央揃え */
}
p br {
	display: none;
}

table{
	width:100%; /* 700px以下は幅いっぱいに広げる */
	max-width:700px; /* 最大幅の指定 */
	margin:30px auto 0 auto; /* ブロック要素の中央揃え */
}
.table > tbody > tr > td, .table > tbody > tr > th{
	padding: 15px;
	line-height: 2.0;
	font-size: 1.1em;
	border-top: none;
}
.table > tbody > tr > td{width:70%;}
.table > tbody > tr > th{width:30%;}
table.table{
	width:100%; /* 700px以下は幅いっぱいに広げる */
	max-width:700px; /* 最大幅の指定 */
	margin:30px auto 0 auto; /* ブロック要素の中央揃え */
}
table.table-striped > tbody > tr > th {
	border-top: solid 1px #999;
	border-bottom: solid 1px #999;
}
table.table-striped > tbody > tr > td {
	border-top: solid 1px #999;
	border-bottom: solid 1px #999;
}
table.table-striped > tbody > tr:nth-child(odd) {
	background-color: #333;
}

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

	ページ共通の設定

=======================================*/
#header{
	background: url("images/background.png") repeat;
}
#main{margin-bottom: 0;}
div.page-header{
	padding: 0;
	border-bottom: none;
}

div.entry{
	margin: 50px 0;
}
div.entry__content{
	width:100%; /* 960px以下は幅いっぱいに広げる */
	max-width:960px; /* 最大幅の指定 */
	height:auto; /* 高さの指定 */
	margin:0 auto; /* ブロック要素の中央揃え */
}

div.col-md-6{
	width: 100%;
}
div.footer-widget-area{
	padding: 40px 0;
}
ul#menu-footernavi{
	width:100%; /* 970px以下は幅いっぱいに広げる */
	max-width:970px; /* 最大幅の指定 */
	margin:0 auto; /* ブロック要素の中央揃え */
}
ul#menu-footernavi li{
	float: left;
	font-family: futura;
	font-size: 15px;
	color: #e4e4e4;
	background: url("images/footernavi_line.png") no-repeat right center;
	padding: 0 30px 0 0;
}
ul#menu-footernavi li:first-child{
	background-image: url("images/footernavi_line.png"), url("images/footernavi_line.png");
	background-repeat: no-repeat, no-repeat;
	background-position: left center, right center;
	padding: 0 30px 0 30px;
}
	ul#menu-footernavi li a{color: #e4e4e4;}
	ul#menu-footernavi li a:hover{color: #e4e4e4;}

div.breadcrumbs{
	width:100%; /* 960px以下は幅いっぱいに広げる */
	max-width:960px; /* 最大幅の指定 */
	height:auto; /* 高さの指定 */
	margin:40px auto; /* ブロック要素の中央揃え */
	padding: 0 10px;
	border: solid 1px #666;
}
div.copyright{
	background: url("images/copyright_bg.png") repeat;
	color:#c5c5c5;
}
/*======================================

	スライダーの設定

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


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

	会社案内の設定

=======================================*/
div#overview {background: none;}

div.nav{
	padding-top: 30px;
}

nav#aboutus{
	padding: 0;
}
div.menu-aboutus-container{
	width:100%; /* 320px以下は幅いっぱいに広げる */
	max-width:320px; /* 最大幅の指定 */
	height:auto; /* 高さの指定 */
	margin:0 auto; /* ブロック要素の中央揃え */
}
div.menu-aboutus-container li{
	float: left;
	list-style: none outside;
}
div.menu-aboutus-container ul.menu {
	overflow: hidden;
	padding: 0;
	margin: 0;
}
div.menu-aboutus-container li.menu-item {
	width: 150px;
	height: 30px;
	float: left;
	text-align: center;
	margin: 5px;
}
div.menu-aboutus-container li.menu-item a {
	background-image: url(images/aboutus_button_sp.png);
	display: block;
	line-height: 30px;
	color: white;
	text-decoration: none;
}
div.menu-aboutus-container li.current-menu-item a {background-position: 0 -30px;}
div.menu-aboutus-container li.menu-item a:hover {background-position: 0 -60px;}

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

	採用情報の設定

=======================================*/
nav#recruit{
	padding: 0;
}
div.menu-recruit-container{
	width:100%; /* 320px以下は幅いっぱいに広げる */
	max-width:320px; /* 最大幅の指定 */
	height:auto; /* 高さの指定 */
	margin:0 auto; /* ブロック要素の中央揃え */
}
div.menu-recruit-container li{
	float: left;
	list-style: none outside;
}
div.menu-recruit-container ul.menu {
	overflow: hidden;
	padding: 0;
	margin: 0;
}
div.menu-recruit-container li.menu-item {
	width: 150px;
	height: 30px;
	float: left;
	text-align: center;
	margin: 5px;
}
div.menu-recruit-container li.menu-item a {
	background-image: url(images/aboutus_button_sp.png);
	display: block;
	line-height: 30px;
	color: white;
	text-decoration: none;
}
div.menu-recruit-container li.current-menu-item a {background-position: 0 -30px;}
div.menu-recruit-container li.menu-item a:hover {background-position: 0 -60px;}

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

	製品案内の設定

=======================================*/
nav#products{
	padding: 0;
}
div.menu-products-container{
	width:100%; /* 320px以下は幅いっぱいに広げる */
	max-width:320px; /* 最大幅の指定 */
	height:auto; /* 高さの指定 */
	margin:0 auto; /* ブロック要素の中央揃え */
}
div.menu-products-container li{
	float: left;
	list-style: none outside;
}
div.menu-products-container ul.menu {
	overflow: hidden;
	padding: 0;
	margin: 0;
}
div.menu-products-container li.menu-item {
	width: 150px;
	height: 30px;
	float: left;
	text-align: center;
	margin: 5px;
}
div.menu-products-container li.menu-item.menu-item-520, div.menu-products-container li.menu-item.menu-item-856 {
	width: 310px;
}
div.menu-products-container li.menu-item a {
	background-image: url(images/aboutus_button_sp.png);
	display: block;
	line-height: 30px;
	color: white;
	text-decoration: none;
}
div.menu-products-container li.menu-item.menu-item-520 a, div.menu-products-container li.menu-item.menu-item-856 a {
	background-image: url(images/aboutus_button_sp_310.png);
}
div.menu-products-container li.current-menu-item a {background-position: 0 -30px;}
div.menu-products-container li.menu-item a:hover {background-position: 0 -60px;}


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

	FooGalleryの設定

=======================================*/
div.foogallery-default{
	margin:0 auto; /* ブロック要素の中央揃え */
	width: 100%;
}
div.foogallery-default img{
	max-width:100px; /* 最大幅の指定 */
	height:auto; /* 高さの指定 */
	margin:0 auto; /* ブロック要素の中央揃え */
}
/*======================================

	製品案内

=======================================*/
div#totalsystem h4{
	font-size: 1.5em;
	line-height: 1.8;
	text-align: center;
}
div#totalsystem dl{
	clear: both;
}
div#totalsystem dt{
	clear: both;
	width: 100%;
	border-radius:1em;
	margin: 15px 0;
	padding: 10px;
	font-size: 1.2em;
	text-align: center;
}
div#totalsystem dd{
	clear: both;
	margin: 0 auto;
	width: 100%;
	text-align:center;
	padding: 10px;
	font-size: 1.2em;
}
div#planning{
	width:100%; /* 660px以下は幅いっぱいに広げる */
	background: #000000;
	padding: 20px;
	margin: 0 0 50px 0;
	border-radius:1em;
}
div#innovation{
	width:100%; /* 660px以下は幅いっぱいに広げる */
	background: #000000;
	padding: 20px;
	margin: 0 0 50px 0;
	border-radius:1em;
}
div#partnership{
	width:100%; /* 660px以下は幅いっぱいに広げる */
	background: #000000;
	padding: 20px;
	margin: 0 0 50px 0;
	border-radius:1em;
}

dt#step1{background: #a21b6e;}
dt#step2{background: #ae3b87;}
dt#step3{background: #bf6ca8;}
dt#step4{background: #8868ab;}
dt#step5{background: #664196;}
dt#step6{background: #372869;}
dt#step7{background: #274465;}
dt#step8{background: #19548e;}
dt#step9{background: #5f90c1;}

div#system{background: url("images/system_bg.png") no-repeat left top; padding-top: 5px;}
div#foogallery-gallery-290{display: none;}
div#foogallery-gallery-498{display: none;}