@charset "UTF-8";
/* CSS Document */

html {
    background-color:#E8E8E8;
}
body {
    max-width: 1024px;
    margin: 0 auto;
    background-color: #FFF;
	font: 400 16px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Arial", "Helvetica", sans-serif;
	color: #333;
}
.main-container { /****main-gridコンテナ 1カラム****/
    display: grid;
    width: 100%;
    margin: 0 auto;
	padding: 0;
}
#nav {
    display: none;
}
.main-nav {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
.main-nav li {
    list-style-type: none;
    list-style-position: inside;
}
.main-nav a {
    margin: 0;
    font: 400 1em/1em 'Marcellus', serif;
    letter-spacing: 0.1em;
    color: #4D4D4D;
    display: block;
    padding: 10px 15px 10px 15px;
    text-decoration: none;
}
.header {　/****main-gridアイテム 1****/
    width: 100%;
	height: auto;
}
.header-logo {/***header内ロゴマーク用indexページ***/
    display: flex;
    width: 100%;
	height: auto;
    margin: 0 32%;
    padding: 2% 0 0 0;
}
.header-tex {/***header内テキスト用indexページ***/
    width: 100%;
	height: auto;
    margin: 0;
    padding: 1% 0 2% 0;
    overflow: hidden;
}
.main {　/****main-gridアイテム 2****/
    width: 100%;
	height: auto;
    margin: 0 auto;;
}
.footer {　/****main-gridアイテム 3****/
    width: 100%;
    height: auto;
	margin: 0;
	padding: 2%;
    text-align: center;
    font: 400 0.7em/0em 'Marcellus', serif;
	color: #FFF;
    letter-spacing: 0.15em;
    background-color: rgba(77,77,77,0.6);
}
.map-container { /***companyページ google map用***/
    width: 90%;
    min-height: 300px;
    margin: 0 auto;
    padding: 0;
}
.column-1 {　/***companyページ コンテナー****/
	width: 94%;
    margin: 3% 0;
	padding: 0 3%;
}
.column-1 img {
	width: 100%;
	display: block;
}
.column-2 { /***indexページ flexコンテナー****/
    width: 100%;
    margin: 0;
	padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.bxslider img { /***indexページ bxsliderサイズ指定****/
    width: 100%;
    height: 97%;
}
/* =================================================
========セカンドページ設定項目========================*/
.column-3 { /*****flexコンテナー****/
    width: 100%;
    margin: 0;
	padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.column-3 img { /***flexコンテナー img****/
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    -ms-border-radius: 6px;
}
.article-B { /***flexアイテム 1***/
    flex: 1;
    flex: 46%;
    margin: 1% 2% 0 2%;
}
.responsive_video { /***flexコンテナー youtube****/
    position: relative; 
    padding-bottom: 56.25%; 
}
.responsive_video video, 
.responsive_video iframe, 
.responsive_video object, 
.responsive_video embed { 
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    -ms-border-radius: 6px;
}
/* =================================================
========indexページboxアイテム設定項目================*/
.article1,.article3,.article5,.article7,.article9 { /***flexアイテム 1,3,5,7,9***/
    width: 50%;
    flex: 48%;
    margin-left: 2%;
    margin-top: -1%;
    border-top: solid 6px #4D4D4D;
}
.article2,.article4,.article6,.article8,.article10 {　/***flexアイテム 2,4,6,8,10***/
    width: 50%;
    flex: 48%;
    margin-right: 2%;
    margin-top: -1%;
    border-top: solid 6px #4D4D4D;
}
/* =================================================
==========typeface==============*/
.h1 { /*indexページキャッチ大文字用*/
    font: 400 6em/1em 'Marcellus', serif;
	/*font: 500 6em/1em roboto, sans-serif;*/
    font-style: normal;
	color: #4D4D4D;
	letter-spacing: 0.1em;
}
.noline { /***indexページ h1文字 aリンク設定****/
    text-decoration: none;
    color: #4D4D4D;
}
.h2 { /*indexページタイトル用*/
    font: 400 1.5em/1em 'Marcellus', serif;
    font-style: normal;
	color: #4D4D4D;
	letter-spacing: 0.2em;
}
.h3 { /*ページタイトル用*/
    font: 400 1.8em/2.0em 'Marcellus', serif;
	color: #4D4D4D;
    text-shadow: 1px 1px 1px #FFF;
	letter-spacing: 0.2em;
    text-align: center;
}
.h4 {
	font: 400 1.2em/1.8em 'Marcellus', serif;
    font-style: normal;
	color: #4D4D4D;
}
.h5 {
	font: 500 1.2em/1.8em 'Marcellus', serif;
    font-style: italic;
	color: #ec6433;
}
.p {
	font: 400 0.9em/1.5em "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Arial", "Helvetica", sans-serif;
	color: #4D4D4D;
}
.p1 {　
	font: 400 0.9em/1.5em "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Arial", "Helvetica", sans-serif;
	color: #4D4D4D;
    text-justify: inter-ideograph;
}
.p2 { /*ページ本文用*/
	font: 400 0.9em/1.8em Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E,メイリオ, Meiryo, serif;
	color: #4D4D4D;
    text-justify: inter-ideograph;
}
.p3 {  /*footer コピーライト 文字*/
    font: 400 0.9em/1.8em Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E,メイリオ, Meiryo, serif;
	color: #FFF;
    letter-spacing: 2em;
}
.p4 { /*ページタイトル用*/
	font: 400 0.9em/1.8em Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E,メイリオ, Meiryo, serif;
	color: #4D4D4D;
    text-align: center;
}
.p5 { /*Companyページ本文用*/
	font: 400 0.9em/1.8em Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E,メイリオ, Meiryo, serif;
	color: #4D4D4D;
    text-justify: inter-ideograph;
    padding: 0% 18%;/*文字ブロックのセンター詰め*/
}
/* **********************************************
 フォーム設定
*/
input, textarea {
	padding: 3px;
	border: 1px solid #EEE;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	border-radius: 3px;
	background: -moz-linear-gradient(top, #CCC, #FFF);
	background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#FFF));　
	background: -o-linear-gradient(top, #CCC, #FFF);
	background: -ms-linear-gradient(to bottom, #CCC, #FFF);
	background: linear-gradient(to bottom, #CCC, #FFF);/*IE 10*/
	background: linear-gradient(top, #CCC, #FFF);
}
textarea {
	width: 60%;
	height: auto;
}
/* *******************************************
 * Small devices width 480px以下 スマホ縦  
**************** */ 
@media only screen and (max-width: 30em) {
.main-container {
    float: none;
	margin: 0;
	padding: 0;
}
.hader {
	float: none;
}
.had-container {
    margin: 0 auto;
}
.column-1 {
    float: none;
	width: 94%;
    margin: 3% 0;
	padding: 0 3%;
}
.article-B { /**flexアイテム 1**/
    float: none;
    width: 94%;
    margin: 0 3%;
}
.bxslider img { /**indexページ bxsliderサイズ指定**/
    width: 100%;
    height: auto;
}
.h1 { /*indexページキャッチ大文字用*/
	/**font: 700 6em/1em roboto, sans-serif;**/
    vertical-align: middle;
}
.h2 {
    display: none;
}
.p5 {
    padding: 0% 3%;/**文字ブロックのセンター詰め解除**/   
}   
}
/* *******************************************
 * Small devices width 896px以下に適応 タブレット縦/スマホ横 
*************** */  
@media only screen and (max-width: 56em) {
.main-container {
	float: none;
	margin: 0;
	padding: 0;
}
.hader {
	float: none;
}
.had-container {
    margin: 0 auto;
    padding: 2% 0 3% 0;
}
#nav {
    display: block;
}
.main-nav {
    display: block;
}
.main-nav a {
    display: block;
}
.column-1 {
	width: 94%;
	float: none;
	margin: 3% 0 3% 0;
	padding: 0 3% 0 3%;
}
.column-2 {
	/*width: 94%;*/
	float: none;
	/*margin: 3% 0;
	padding: 0 3%;*/
    margin: 0;
    padding: 0;
}
.top-movie {
	float: none;
	width: 100%;
	margin: 0 0 10% 0;
	padding-top: 56.25%;
}
.footer {
	float: none;
}
.h2 {
    letter-spacing: 0em;   
}
}