@charset "utf-8";
/* ------------------------------------------------------------ common */
body { color: #efefef; font-family: 'Lato', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif, sans-serif; font-size: 14px; min-width: 1100px; background: #000;}
a:link 		{ color: #efefef; text-decoration: none; }
a:visited 	{ color: #efefef; text-decoration: none; }
a:hover,
a:hover img,
input[type="submit"]:hover { color: #efefef; text-decoration: none; 
	filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8; }
    
input[type="text"],
select,
textaera	{ border: 1px solid #b5b5b5; }

input[type="submit"] { -webkit-appearance: button; cursor: pointer; padding: 0; border: none;  }

h1 		{ font-size: 11px; }

.inner 	{ width: 1100px; margin: 0 auto; }
.btn 	{ text-align: center; }
.btn a 	{ display: inline-block; *display: inline; *zoom: 1; color: #efefef; font-size: 14px; border: 1px solid #fff; width: 298px; height: 35px; line-height: 35px; margin: 30px 0 0;}

.SP { display: none; }
.PC { display: block; }

.hide { display: none; }

@font-face {
font-family: 'edition';
src: url('../fonts/edition.eot');
src:
/* url('../fonts/leslieshand.eot?#iefix') format('embedded-opentype'), */
url('../fonts/edition.woff') format('woff'),
url('../fonts/edition.ttf') format('truetype'),
url('../fonts/edition.svg') format('svg');;
}

span.new { font-size: 14px; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; color: #efefef; background: #bc2a0e; display: inline-block; *display: inline; *zoom: 1; padding: 2px 10px;}

.empty { text-align: center; padding: 30px 0; }
.red { color: #FD374E; }

/* ------------------------------------------------------------ header */
#main-wrapper { padding: 75px 0 0; }
#header { color: #c8c8c8; background: #222222; border-top: 3px solid #9d886c; padding: 20px 0; position: fixed; z-index: 1000; width: 100%; min-height: 35px; }
#header a.logo { float: left;}
#header a.logo img { padding: 5px 0 0;}
#header h1 			{ float: left; width: 210px; padding: 0 0 0 20px; line-height: 16px;}
#header ul 		{ float: left; width: 666px; padding: 5px 0 0 0;}
#header ul li 	{ display: inline-block; *display: inline; *zoom: 1; text-align: center; border-left: 1px dotted #574e3b; }
#header ul li:first-child { border: none;}
#header ul li a 	{ color: #c8c8c8; font-size: 14px; padding: 0 17px;}
#header .sns { float: right; width: 83px; padding: 5px 0 0; text-align: right;}
#header .sns a { display: inline-block; *display: inline; *zoom: 1; margin: 0 20px 0 0;}
#header #menu-btn img { display: none; }

#bread { padding: 16px 0;}
#bread ol li { list-style-type: none; display: inline-block; *display: inline; *zoom: 1; padding: 0 0 0 5px;}
#bread ol li:first-child { padding: 0;}
#bread ol li:first-child a { color: #b39d7f; }
#bread ol li a { background: url(../images/common/bread.png) right center no-repeat; padding: 0 20px 0 0; color: #b39d7f; }

h2.h2 { text-align: center; font-size: 20px; color: #b39d7f; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; padding: 320px 0 0;}
h2.h2 span { font-size: 104px; font-family: 'edition'; letter-spacing: 15px; display: block; color: #efefef; line-height: 110%; padding: 0 0 0 40px;}

h3.h3 { font-size: 20px; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; letter-spacing: 3px; text-align: center;}
h3.h3 span { font-family: 'edition'; font-size: 70px; color: #efefef; letter-spacing: 15px; display: block; padding: 0 0 0 18px; line-height: 130%;}

h3.title { text-align: center;}
h3.title span { letter-spacing: 10px; padding: 0 0 0 30px;}

h4.h4 { font-family: 'edition'; font-size: 61px; line-height: 120%; color: #efefef; letter-spacing: 10px;}
h4.h4 span { font-size: 14px; display: block; font-family: serif; color: #b39d7f; letter-spacing: 2px;}

h4.title span,
h3.b-title span { font-family: 'edition'; font-size: 50px; letter-spacing: 4px; background: url(../images/index/bg_11.gif) bottom repeat-x; padding: 0 20px;}


/* ------------------------------------------------------------ fv */

#fv { background-size: auto 160px;}
#fv p { text-align: center; font-size: 16px; padding: 20px 0 50px; line-height: 34px; letter-spacing: 2px;}

/* ------------------------------------------------------------ footer */

#cta { background: #000000; padding: 25px 0 30px;}
.cta .box { background: url(../images/index/bg_09.png); padding: 5px; width: 900px; margin: 0 auto;}
.cta .box div { background: url(../images/index/bg_10.gif) center center no-repeat #1a1a1a; padding: 5px 30px 30px; text-align: center; position: relative;}
.cta .box div img { position: absolute; right: 30px; top: 20px; }
.cta .box div h3 { font-size: 100px; font-family: 'edition'; color: #777777; letter-spacing: 20px; line-height: 130%;}
.cta .box div h4.title { font-size: 26px; font-family: "Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; letter-spacing: 3px;}
.cta .box div p.attention { font-size: 15px; color: #cecece; padding: 0 0 15px; line-height: 34px;}
.cta .box div ul li { float: left; width: 279px; border-left: 1px solid #585858; height: 115px;}
.cta .box div ul li:first-child { border: none; padding: 0;}
.cta .box div ul li h4 { font-size: 16px; padding: 10px 0 0; }
.cta .box div ul li p.number a { font-size: 30px; line-height: 30px; padding: 13px 0 0; font-family: serif; font-style: italic; display: block; }
.cta .box div ul li p.number a small { font-size: 20px; padding: 0 10px 0 0;}
.cta .box div ul li p.btn a { width: 235px; height: 40px; line-height: 40px; font-size: 16px; background: #9b896e; border: none; margin: 15px 0 0;}

#banner { background: #252525; padding: 65px 0 55px;}
#banner a.rockyauto { margin: 0 24px 0 0; }

#totop a { display: block; background: #000000; text-align: center; padding: 15px 0; border-bottom: 1px solid #252525;}

#foot { background: url(../images/footer/bg.jpg) center bottom no-repeat ; padding: 35px 0 15px; background-size: cover;}
#foot .wrapper { padding: 0 0 110px;}
#foot .left { float: left; width: 150px; }
#foot .right { float: right; width: 890px;}
#foot .left p { padding: 3px 0;}
#foot .left p a { display: block; padding: 5px 0; font-size: 16px;}
#foot .right div { float: left; width: 200px; margin: 0 0 0 30px;}
#foot .right .order { margin: 0;}
#foot .right div h4 { font-size: 16px; border-bottom: 1px solid #8b8377; padding: 0 0 10px; margin: 0 0 10px;}
#foot .right div ul li a { background: url(../images/footer/arw_02.png) left center no-repeat; padding: 5px 0 5px 13px; display: block; font-size: 13px;}

#f-bottom { text-align: center; color: #e2e2e2; }
#f-bottom p.address { padding: 30px 0 5px;}
#f-bottom p.numbers { font-size: 18px;} 
#f-bottom p.numbers a.phone { margin: 0 10px 0 0;}
#f-bottom .sns { padding: 15px 0;}
#f-bottom .sns a { padding: 0 10px;}
#f-bottom .terms { padding: 0 0 35px;}
#f-bottom .terms a  { padding: 0 20px;}
#f-bottom .terms a.terms { border-right: 1px solid #c2c2c2;}
#f-bottom address 	{ font-size: 11px;}


@media only screen and (max-width:1100px){
#header { position: absolute; min-width: 1100px; }
}
@media only screen and (max-width:640px){

/* ------------------------------------------------------------ common */

.PC { display: none ;  }
.SP { display: block ; }

body { min-width: inherit; }
.inner 	{ width: 94%; padding: 0 3%; }

h2.h2 { font-size: 16px; padding: 82px 0 0;}
h2.h2 span { font-size: 60px; letter-spacing: 10px; padding: 0;}

h3.h3 { font-size: 14px; }
h3.h3 span { font-size: 60px; letter-spacing: 8px; padding: 0 0 0 10px;}

h4.h4 { letter-spacing: 6px; }
h4.title span { font-size: 40px; background: url(../images/index/bg_11.gif) center bottom repeat-x; padding: 5px 20px; letter-spacing: 4px;}

.btn a 	{ width: 80%; height: 45px; line-height: 45px; }

/* ------------------------------------------------------------ header */
#main-wrapper { padding: 53px 0 0; }
#header { border-top: 4px solid #9d886c; padding: 10px 0; position: fixed; min-width: inherit; }

/* ------------------------------------------------------------ fv */

#fv p { font-size: 14px; padding: 10px 0 20px; line-height: 24px; letter-spacing: 0;}


/* ------------------------------------------------------------ bread */

#bread { padding: 10px 0;}
#bread ol li a,
#bread ol li strong { font-size: 12px;}
/* ------------------------------------------------------------ footer */

#cta { padding: 15px 0 15px; }
.cta .box { width: 98%; padding: 1%; }
.cta .box div { padding: 15px 3% 10px; background: url(../images/index/bg_10.gif) center top #1a1a1a; background-size: contain; }
.cta .box div h3 { font-size: 50px; letter-spacing: 8px; }
.cta .box div img { width: 22%; height: auto; right: 3%; top: 3%; }
.cta .box div h4.title { font-size: 18px; letter-spacing: 1px; padding: 2% 0; }
.cta .box div p.attention { font-size: 12px; line-height: 200%; }
.cta .box div ul li { width: 94% !important; height: auto; border: none; background: #2e2e2e; margin-bottom: 3px; padding: 4% 3% !important; }
.cta .box div ul li h4 { font-size: 14px; padding: 0; }
.cta .box div ul li p.number a small { font-size: 12px; }
.cta .box div ul li p.number a { font-size: 26px; }
.cta .box div ul li p.btn { padding: 10px 0; }
.cta .box div ul li p.btn a { width: 80%; margin: 0; font-size: 14px; }

#banner { padding: 3% 0 0; }
#banner img { width: 99%; height: auto; margin-bottom: 3%; border: 2px solid #4c463c; }
#banner a.rockyauto { margin: 0; }

#f-nav { background: #000; }
#f-nav dl a { display: block; }
#f-nav dl dt { background: #262626; padding: 3%; border-bottom: 1px solid #000; position: relative; font-size: 12px; }
#f-nav dl dt img { position: absolute; right: 3%; top: 50%; margin-top: -3px; }
#f-nav dl dd span { display: block; padding: 3% 10%;  font-size: 12px; background: url(../images/common/icn_02.png) no-repeat 6% center; background-size: 4px 7px;  }
#f-nav dl dd { display: none; }

#f-bottom address { font-size: 9px; }
#f-bottom .sns { padding: 65px 0 15px; }
#f-bottom p.numbers { font-size: 14px; }
#f-bottom p.address { font-size: 14px; }
#f-bottom .terms { font-size: 14px; }
#f-bottom a img.f_logo { width: 45%; height: auto; }



/* ------------------------------------------------------------ groval nav */

#menu-btn { display: block;  bottom: 15px; z-index: 999; float: right;}
#menu-btn img { width: 28px; height: auto; display: inline !important; }

#open_modal					{ cursor: pointer; display: block;}

.fixed 						{ position: fixed; }
#mask 						{ display: none; height: 100%; width: 100%; height: 100%; min-height: 100%; background: url(../images/common/nav/pat.png) #000; position: fixed; opacity: 0.7; filter: alpha(opacity=70); -moz-opacity:0.70; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }

						
/* #open_modal 				{ cursor: pointer; right: 10px; top: 10px; z-index: 999; position: fixed; } */
#navigation 				{ text-align: center; margin: 0 auto; top: 0; right: 0; left: 0; margin: 0; z-index: 100; position: relative; display: none; background: #010101; }
#menu-header				{ padding: 165px 0 0; background: url("../images/common/nav.jpg") no-repeat center center; background-size: 100% auto; }
#navigation #menu-header a img { width: 40%; height: auto; padding: 0 0 5px;}
#navigation #menu-header a { color: #fff; }
#navigation ul 				{ font-size: 14px; z-index: 999; width: 100%; padding: 0; background:#262626;}
#navigation ul li 			{ width: inherit; font-size: 12px; color: #fff; border-bottom: 1px solid #4f4f4f; text-align: left;  }
#navigation ul li dl dt { background: #262626; position: relative; font-size: 12px; }
#navigation ul li dl dt img { position: absolute; right: 3%; top: 17px; padding: 5px; }
#navigation ul li dl dd { display: none; background: #000;}
#navigation ul li a 		{ color: #fff; text-align: left; display: block; padding: 15px 3%; width: 80%;}
#navigation ul li dl dd a { background: url(../images/common/icn_02.png) no-repeat 6% center; background-size: 4px 7px;  padding: 15px 10%;}
#navigation ul li a span 	{ vertical-align: middle;  padding: 2px 0 0 0; }

#navigation p#close 		{ background: #2d2d2d; color: #fff; padding: 15px 0; }
#header-close 				{ position: absolute; top:20px; right: 10px;}



}

@media only screen and (orientation : portrait) { 
	#navigation 			{ position: absolute; top:0; margin: 0 0 0; right: 0; left: 0; }
}