@charset "UTF-8";
/* CSS Document */
 
body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	 text-align:justify;
}


a img:hover{
	opacity: 0.7;
	-moz-transition: opacity 0.7s ease;
	-o-transition: opacity 0.7s ease;
	-webkit-transition: opacity 0.7s ease;
	transition: opacity 0.7s ease;
}

/***ベース***/
#wrapper{
	width:100%;
	 font-size: 13px;
}

.left{
	float:left;
}

.right{
	float:right;
}

/***ヘッダー***/
header{
	position: fixed;            /* ヘッダーの固定 */
    top: 0px;                   /* 位置(上0px) */
    left: 0px;                  /* 位置(右0px) */
	width:100%;
	z-index:100;
}

.logo{
	text-align:center;
	height:100px;
	background:#FFFFFF;
}

/*------------------ヘッドスライディング-----------------*/

/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}
/*左右の矢印の位置を変える*/
.slick-next {
    right: 20px;
    z-index: 150;
}
.slick-prev {
  left: 15px;
    z-index: 160;
}
/*スライド数のドットの色を変える*/
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
    color: #fff;
}
/*スライド画像の横幅可変*/
.center-item{
	margin-top:100px;
}

.center-item img {
  width: 100%;
  height: auto;
}

.catch{
	width:100%;
	margin-right:auto;
	margin-left:auto;
	position: absolute;
    top: 100px;
}

.catch img{
	width:100%;
}

/*------------------メイン-----------------*/
#main{
	width:100%;
	background:url(../img/main_bk.png) no-repeat;
	background-position:right;
	background-size:contain;
	max-width:1200px;
	margin:0 auto;
}

.maincatch{
	max-width:1000px;
	text-align:left;
	margin:100px auto 100px auto;
}

.mainlogo{
	margin-bottom:20px;
}

.mainbody{
	font-weight:600;
	font-size:18px;
	line-height:1.75;
}

/*------------------ブランド紹介----------------*/
#brand{
	width:100%;
	background:#4d4d4d;
}

.brandinc{
	width:1000px;
	margin:0 auto 0 auto;
	text-align:center;
    overflow: hidden;
    padding-bottom: 50px;
	}

.brandcatch{
	margin:50px auto 30px auto;
}

.brandtypeog{
	width:333px;
	float:left;
}

.brandtypesh{
	width:333px;
	float:left;
}

.brandtypees{
	width:333px;
	float:left;
}

.logos{
	width:1050px;
	margin:0 auto 0;
	z-index:30;
}

/*------------------OG----------------*/
#og{
	width:100%;
	background:#000000;
	overflow:hidden;
	padding-bottom:100px;
}

.oginc{
	width:1000px;
	margin:-40px auto 0;
}

.ogleft{
	float:left;
}

.ogright{
	float:right;
	width:450px;
}

.ogright img{
	margin-bottom:20px;
}

.ogright p{
	color:#FFFFFF;
	line-height:2;
	margin-bottom:20px;
}

.sign{
	text-align:right;
}

.pv{
	margin:30px auto 15px;
}

.youtube{
	margin:0 auto 0;
	background:#2A2A2A;
	clear:both;
	height:450px;
	}
	
.youtubeinc{
	margin:0 auto;
	width:800px;
	}

/*------------------OGディティール----------------*/
.og_detail{
	clear:both;
	padding-top:50px;
	overflow:hidden;
}

.modal{
	margin-top:30px;
	}

.gallery{
	float:left;
}

.bass{
	clear:both;
	color:#FFFFFF;
	line-height:1.75;
	margin:30px auto;
	font-size:12px;
}

/*------------------SH----------------*/
#sh{
	width:100%;
	background:#00293b;
	overflow:hidden;
	padding-bottom:100px;
}

.shinc{
	margin:50px auto 0;
	background:url(../img/sh_bk.jpg) no-repeat;
	background-position:right;
	background-size:contain;
	max-width:1200px;
}

.shtxt{
	width:1000px;
	margin:0 auto;
}

.shtxt img{
	margin-bottom:20px;
	clear:both;
}

.shbody{
	max-width:450px;
	font-size:13px;
	color:#FFFFFF;
	line-height:1.75;
}

.numbers{
	margin-top:-4px;
	padding:5px;
	background:#f29600;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:16px;
	color:#F7F7F7;
	text-align:center;
	width:15px;
	height:15px;
	float:left;
	margin-right:15px;
}

.shdetail h3{
	margin-top:30px;
	color:#FFFFFF;
	font-size:18px;
	font-weight:600;
}

.shdetailinc{
	color:#FFFFFF;
	font-size:13px;
	line-height:1.75;
	margin-top: 15px;
    max-width: 450px;
}

.shbanners{
	width:1000px;
	margin:30px auto 0;
}

/*-----------------ES---------------*/
#es{
	width:100%;
	background:#cccccc;
	overflow:hidden;
	padding-bottom:100px;
}

.esinc{
	width:1000px;
	margin:0 auto}

.escaych{
	text-align:center;
	margin-bottom:30px;
	line-height:1.75;
	font-size:14px;
}

.esleftb{
	width:480px;
	float:left;
}

.esrightb{
	width:480px;
	float:right;
}

.esleft{
	width:310px;
	float:left;
	margin: 30px auto 0;
	clear:both;
}

.escenter{
	width:310px;
	float:left;
	margin: 30px 0  0 35px;
}

.esright{
	width:310px;
	float:right;
	margin: 30px auto 0;
}

.esinc h3{
	margin-top:15px;
	font-size:18px;
	font-weight:600;
	line-height:1.25;
	text-align:left;
}

.price{
	font-size:16px;
	font-weight:600;
}

.esinc p{
	margin-top:10px;
	line-height:1.6;
}

.esbanners{
	padding-top:50px;
	clear:both;
}

.escaution{
	padding-top:50px;
	clear:both;
	text-align: center;
	font-size: 20px;
}

.escaution a{
	color: #FF0000;
}

/*-----------------フッター---------------*/
#caution{
	font-size:10px;
	text-align:center;
	width:100%;
	margin:0 auto;
	padding:30px 0;
	background:#00293b; 
	color:#FFFFFF;
	line-height:1.5;
}

#ogushow{
	background:#000000;
	margin:0 auto;
	padding:30px 0;
	text-align:center;
}

/*メニュー部分*/
#ham-menu {
    background-color: #fff; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 40px 40px; /*メニュー内部上下左右余白*/
    position: fixed;
    right: -450px; /*メニュー横幅①と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
    width: 450px; /*メニュー横幅①*/
    z-index: 1000;
	font-size:16px;
	font-weight:600;
}

#ham-menu a{
	text-decoration:none;
	color:#00293b;
}

#ham-menu li:hover{
	opacity: 0.7;
	-moz-transition: opacity 0.7s ease;
	-o-transition: opacity 0.7s ease;
	-webkit-transition: opacity 0.7s ease;
	transition: opacity 0.7s ease;
	color:#1943B4;
}

#ham-menu li{
	font-weight:600;
	padding-bottom:30px;
}

/*メニューアイコン部分は疑似要素で*/
#ham-menu::before {
    background-color: #fff; /*ボタン部分背景色*/
    border-radius: 0 0 0 10px; /*左下角丸*/
    color: #00293b; /*アイコン（フォント）色*/
    content: "MENU 三"; /*メニューアイコン*/
    display: block;
    font-size: 15px; /*アイコン（フォント）サイズ*/
	font-weight:600;
    height: 100px;
    line-height: 100px; /*縦位置中央化*/
    position: absolute;
    right: 100%;
    text-align: center;
    top: 0;
    width: 100px;
}

/*透過背景部分*/
#menu-background {
    background-color: #333; /*黒背景部分背景色*/
    display: block;
    height: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
    width: 100%;
    z-index: -1;
}

/*hover 時の処理*/
#ham-menu:hover {
    transform: translate(-450px); /*メニュー横幅①と合わせる*/
}

#ham-menu:hover + #menu-background {
    opacity: 0.5; /*黒背景部分透過度*/
    z-index: 999;
}