@charset "UTF-8";
/*FrexBox 背景色　メインイメージ　フッター　Drawerカスタマイズ*/

.item_full{/*アイテム横並び*/
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 0 0% 0 0%;
}
.item_box{/*横サイズフリー*/
	display: flex;
	width: 100%;
}
.item_box_row_sb{/*アイテム横並び両端*/
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

/*レイアウト*/
.w20{width: 20%;}/*width 20%*/
.w30{width: 30%;}/*width 30%*/
.w40{width: 40%;}/*width 40%*/
.w50{width: 50%;}/*width 50%*/
.w60{width: 60%;}/*width 60%*/
.w70{width: 70%;}/*width 70%*/
.w80{width: 80%;}/*width 80%*/
.w90{width: 90%;}/*width 90%*/
.w100{width: 100%;}/*width 100%*/
.w20-90{width: 20%;}/*width 20%*/
.w20-100{width: 20%;}/*width 20%*/
.w30-100{width: 30%;}/*width 30%*/
.w40-100{width: 40%;}/*width 40%*/
.w50-100{width: 50%;}/*width 50%*/
.w60-100{width: 60%;}/*width 60%*/
.w70-100{width: 70%;}/*width 70%*/
.w80-100{width: 80%;}/*width 80%*/
/*IM*/
.w50-40{width: 50%;}/*width 50%*/

/*背景色*/
.gradation { background: linear-gradient(0deg, rgb(255, 255, 255), rgb(244, 244, 244));}
.gradation_side { background: linear-gradient(270deg, rgb(255, 255, 255), rgb(244, 244, 244));}
.bg_gray1{background-color: #F5F5F5;}
.bg_green{background-color: #F3F7E1;}
.bg_skyblue{background-color: #E6F1F9;}
.bg_orange{background-color: #FFF2E7;}
.bg_white{background-color: #FFFFFF;}
.bg_blue{background-color: #0063CF;}
.bg_light_gray{background-color: #F4F4F4;}

/*flex整列*/
.item_center{justify-content: center;}
.item_center_tate{align-items: center;}
.item_space-between{justify-content: space-between;}
.item_wrap{flex-flow: wrap;}
.item_around{justify-content: space-around;}

/*メインイメージ*/
.main_img{
  position: relative;
  width: 100%;
  margin-top: -50px;
}
#mainImg img{
  position: absolute;
  left: 50%;
  max-width: 1400px;
  width: 1400px;
  height: 560px;
  margin-left: -700px;
}
#base_img{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 180px;
	margin-top: 0px;
	background-color: #252525;
	background-position: right;
}
.base_img01{/*A110ハンドル画像*/
	background-image: url(../images/base_img01.jpg);
}
.base_img02{/*GREEN*画像*/
	background-image: url(../images/base_img02.jpg);
}
.base_img03{/*2CV*画像*/
	background-image: url(../images/base_img03.jpg);
}
.base_img04{/*INOX*画像*/
	background-image: url(../images/base_img04.jpg);
}
#baseImg_bg01{
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 180px;
}
.main_img_title{/*ベースのメインイメージのタイトル上*/
	width: auto;
	margin: 70px 6% 0 12%;
	position: absolute;
	top: 0px;
	left: 0px;
	font-size: 36px;
	letter-spacing: 0.1em;
	/*color: #2B2B2B;*/
	color: #FFFFFF;
}
.main_img_title2{/*ベースのメインイメージのタイトル下*/
	margin: 15px 5px 0 0;
	text-align: center;
	font-size: 16px;
	letter-spacing: 0em;
	/*color: #1E1E1E;*/
	color: #FFFFFF;
}

/*footer*/
.footer{
	display: flex;
	flex-direction: row;
	/*align-items:flex-start;*/
	justify-content: space-between;
	background-color: #434343;
	width: auto;
	padding: 20px 5% 25px 5%;
	color: #FFFFFF;
	font-size: 0.8em;
	line-height: 1.8em;
}
.footer_column{
	flex-grow: 1;
	align-self: baseline;
	border-left: 1px solid #B70000;
	margin: 0 1% 10px 1%;
	padding-left: 1%;
}

.footer_column2{
	flex-grow: 1;
	align-self: baseline;
	padding-left: 5px;
	border-left: 0px solid #A3907E;
}
.footer_column_logo{
	text-align: right;
	padding-right: 8%;
	flex-grow: 3;
}
.footer_pankuzu{
	width: 100%;
	/*height: 27px;*/
	text-align: right;
	background-image: url(../images/footer_frame_c.png);
	background-repeat: repeat-x;
	background-position: bottom;
	padding-bottom: 15px;
	font-size: 0.7em;
	line-height: 0.5em;
}

.mb_onry{
	display: none;
}
.pc_onry{
	display: block;
}

/*Drawer カスタマイズ*/	
.pc_logo{
	display: block;
	position: absolute;
	top: 0px;
	left: 40px;
	z-index: 99;
}
.mb_logo{
	display: none;
}
.drawer-nav a{
	text-decoration: none;
	font-size: 1.05rem;
}
.drawer-menu a:link { color: #434343; text-decoration: none; font-weight: 100; }
.drawer-menu a:visited { color: #434343; text-decoration: none; font-weight: 100;}
.drawer-menu a:hover { color: #707070; text-decoration: none; font-weight: 100;}
.drawer-menu a:active { color: #707070; text-decoration: none; font-weight: 100;}


.side_menu{
	margin: 20px 0px 0px 100px;
	font-size: 85%;
	line-height: 1.2em;
	border-left: 1px solid #E4E4E4;
}

/*------------------ Mobile ------------------------------------*/
@media screen and (max-width : 40em) {

.item_full{/*main幅いっぱい*/
	flex-direction: column;
	padding: 0 1% 0 1%;
}

/*メインイメージ*/
.main_img{
  margin-top: -18%;
}
#mainImg img{
  position: absolute;
  left: 50%;
  max-width: 700px;
  width: 700px;
  height: 280px;
  margin-left: -350px;
}
/*footer*/
.footer{
	flex-direction:column;
}
.footer_column{
	padding-left: 5%;
	/*margin: 5%;*/
}
.footer_column_logo{
	text-align: center;
	padding-right: 0%;
}

/*レイアウト*/
.w20-100{width: 100%;}
.w30-100{width: 100%;}
.w40-100{width: 100%;}
.w50-100{width: 100%;}
.w60-100{width: 100%;}
.w70-100{width: 100%;}
.w80-100{width: 100%;}
.w20-90{width: 90%;}
/*IM*/
.w50-40{width: 40%;}/*width 40%*/
	
.main_img_title{/*ベースのメインイメージのタイトル上*/
	width: 100%;
	margin: 100px 5% 0 0%;
	padding: 20px 0 0 40px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	font-size: 24px;
	letter-spacing: 0.1em;
	color: #FFFFFF;
	background-color: rgba(0,0,0,0.50);
	/*background-color: #000000;*/
}

.main_img_title2{/*ベースのメインイメージのタイトル下*/
	margin: 0px 0 0 0;
	font-size: 13px;
	text-align: left;
}
.mb_onry{
	display: block;
}
.pc_onry{
	display: none;
}
/*Drawer カスタマイズ*/	
#pc_logo{
	display: none;
}
#mb_logo{
	display: block;
	position: absolute;
	top: 10px;
	left: 25px;
	z-index: 200;
	width: 200px;
}
}