newcharset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
@import url(http://fonts.googleapis.com/css?family=Inconsolata);

/* utopia 360 */

/* Micro clearfix */
.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }

.o_sans{
	font-family: 'Open Sans', sans-serif;
}
.inco{
	font-family: 'Inconsolata',sans-serif;
}
/*---------------
初期設定・基本設定
----------------*/
html,body{ height: 100%; }
body {
	background-color: #ffffff;
	color: #363339;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo", sans-serif;
	font-size: 15px;
	line-height: 1.66;
	letter-spacing: 0.25px;
	position: relative;
}
.noscript{
	margin : 20px 6px auto 9px;

}
#wrapper {
	height: 100%;
	margin: auto auto auto 0;
	position: relative;
	text-align: left;
} 

/* リンク設定 
--------------*/
a {
	color: #f47b41;
	text-decoration: none;
}
a:hover {
	color: #f47b41;
	text-decoration: underline;
}


/* ----- style hack ----- */
.boderTop{ border-top: 2px solid #fff !important;  }

.non_margin{ margin: 0 0 0 0 !important; }

.non_margin_right{ margin-right: 0 !important; }

.imageText{
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
dd:after {
	*content: '';
	*display: block;
}

noscript img{ margin: 70px 10px }

.bold{
	font-weight: bold;
}


/* -------------------------------------------------------------------------------- */
/*      header                                                                     */
/* -------------------------------------------------------------------------------- */
#header {
	width: 180px;
	background: #eaeaea;
	float: left;
	z-index: 10 !important;
	
}
	#header .mainLogo { /* logo*/
		width: 150px;
		height: 96px;
		margin: 20px auto 40px auto;
		background: url('./../images/header_logo.png') no-repeat;
		background-size:contain;
	}
	.ie6 #header .mainLogo,
	.ie7 #header .mainLogo,
	.ie8 #header .mainLogo{
		background: url('./../images/header_logo_mini.png') no-repeat;
	}
	#scroll{ position: relative;}

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

/* navi common
---------------- */
#nav {
	width: 180px;
	background: #eaeaea;
	z-index: 60;
	position: relative;
}
/* navi - link
--------------- */
/* cssSprite */
	#nav .common_nav .nav_link .cssSprite,
	#footer .footerNav .nav_link .cssSprite{
		background: url("./../images/header_nav.png") no-repeat;
	}

	#nav .common_nav .nav_about .cssSprite,
	#footer .footerNav .fnav_about .cssSprite{ background-position: 0 0px; }
	#nav .common_nav .nav_gallery .cssSprite,
	#footer .footerNav .fnav_gallery .cssSprite{ background-position: 0 -40px; }
	#nav .common_nav .nav_flow .cssSprite,
	#footer .footerNav .fnav_flow .cssSprite{ background-position: 0 -80px; }
	#nav .common_nav .nav_price .cssSprite,
	#footer .footerNav .fnav_price .cssSprite{ background-position: 0 -120px; }
	#nav .common_nav .nav_contact .cssSprite,
	#footer .footerNav .fnav_contact .cssSprite{ background-position: 0 -160px; }
	#footer .footerNav .fnav_top .cssSprite{ background-position: 0 -200px; }

/* △cssSprite△ */

	#nav .common_nav { margin: 40px 0 0 0; }
		#nav .common_nav .nav_link{
			width: 180px;
			height: 40px;
			position: relative;
		 border-bottom: 2px solid #fff; 
		}
		#nav .common_nav .nav_link:hover{ background: #aaa;}

		#nav .common_nav .nav_link a{
			display: block;		
			height: 100%;
		}
	  
/* navi - exception
------------------- */
#nav .filter_nav .c_filter { 
  position: relative;
  background-color: #fff;
}
	
	#nav .filter_nav .c_filter .subList {
		position: absolute;
		top: 40px;
		right: 0px; 
		width: 100%;
		background-color: #fff;
	}
		#nav .filter_nav .c_filter .subList li { 
		  position: relative;
		  height: 10px;
		  margin: 5px 0 12px 0;
		}
			/* gallery
			-------------*/
			#nav .filter_nav .g_filter ul.subList a,
			#nav .filter_nav .p_filter ul.subList a {
				display: block;
				height: 10px;
				margin: 0 0 0 40px;
				background: url("./../images/g_navi.png") no-repeat;
			}
			.g_filter .subList a#all_view{
				width: 66px;
				background-position: -74px top;
			}
			.g_filter .subList a#all_view:hover{
				background-position: -74px bottom !important;
			}
			.g_filter .subList a#all_paint{
				width: 74px;
				background-position: 0px top;
			}
			.g_filter .subList a#all_paint:hover{
				background-position: 0px bottom !important;
			} 
			.g_filter .subList #helmet{
				width: 48px;
				background-position: -140px top;
			}
			.g_filter .subList #helmet:hover{
				background-position: -140px bottom !important;
			}
			.g_filter .subList #parts{
				width: 39px;
				background-position: -188px top;
			}
			.g_filter .subList #parts:hover{
				background-position: -188px bottom !important;
			}

	.subList .c a{ background-position: bottom; }		
	.subList .c span{
		position: absolute;
		top: 2px;
		left: 25px;
		width: 6px;
		height: 6px;
		background: url(./../images/g_navi_dot.png) center !important;
	}

/* nav ie hack */
	header nav { _height: 100% }
		.gallery-navi {
			*margin-bottom: 0px;
			_margin-bottom: 0px;
		}
		.gallery-navi ul {
			*display: none !important;
			_display: none !important;
		}

		.ie6 #nav .common_nav .imageText,
		.ie7 #nav .common_nav .imageText{text-indent: 0;} 
		.ie6 #nav .common_nav .nav_link .cssSprite,
		.ie7 #nav .common_nav .nav_link .cssSprite{ background: none;}
		.ie6 #nav .common_nav .nav_link a,
		.ie7 #nav .common_nav .nav_link a{
			font-size: 18px;
			color: #888;
			position: static;
			margin: 0 0 0 12px;
		} 
/* △ ie hack △ */

/* ================================================================================ */
/*      #article / right                                                            */
/* ================================================================================ */
#wrapper .right{
	position: absolute;
	top: 0;
	left: 200px;
	width: 80%;
	min-width: 680px;
	z-index: 200;
}

#wrapper h2.h2_style{
	font-size: 44px;
	letter-spacing: 3.5px;
	margin-bottom: 20px;
	font-weight: normal;
}
#wrapper h2.h2_style span.orange{
	color: #f47b41;
}

#wrapper h2.h2_style .to{
	font-size: 30px;
}

h3.sta_h3{
	margin: 0;
	height: 100%;
	font-size: 21px;
	font-weight: normal;
	position: relative;
	line-height: 1.4;
	font-weight: bold;
}



h3.sta_h3.inco{
	letter-spacing: 3.5px;
	font-size: 30px;
	font-weight: normal !important;
}

h3.sta_h3.inco .orange{
	color: #f47b41;
}
h3.sta_h3 .s_step{
	font-size: 30px;
	font-weight: bold;
}
h3.sta_h3 .s_step .o_sans{
	color: #f47b41;
	font-size: 43px;
}
h3.sta_h3 .back_wrap{
	display: inline-block;
	background: #fff;
	padding-right: 8px;
}
h3.sta_h3 .back_wrap:after{
	content: " ";
	position: absolute;
	display: block;
	width: 100%;
	height: 5px;
	background: #eaeaea;
	top: 48%;
	z-index: -1;
}

/* ie hack */
.ie6 #wrapper .right,
.ie7 #wrapper .right{
	width: 680px;
	min-width: 680px;
}
/* △ ie hack △ */

/* common
----------- */
.common{ margin:15px 0 0 0; }
	.common p,
	.common ul{ width: 650px; }

	.common .page_title{
		width: 680px;
		margin: 0 0 27px 0;
	}
	.common h2{

	}
	.common h3 {
		margin: 30px 0 20px 0;
	}

/* ie hack */
.ie6 .common,
.ie7 .common{ padding: 0;}
/* △ ie hack △ */

/* ================================================================================ */
/*      index                                                                       */
/* ================================================================================ */
/* cssSprite */
#index{
	width: 680px !important;
}
#index .cssSprite{
	background: url("./../images/index_titles.png");
}
	#index h3.worksTitle{
		width: 680px;
		height: 15px;
		background-position: 0 0px;
	}
	#index h3.newsTitle{
		width: 680px;
		height: 15px;
		background-position: 0 -15px;
	}
/* △cssSprite△ */

/*メインビジュアル
--------------- */
.main_visual {
	width: 675px !important;
	height: 400px !important;
	padding: 2px;
	border: 1px solid #eaeaea;
	margin-bottom: 60px;
}

/* news
--------- */
.news {
	width: 100%;
	margin: 20px 0;
}
	.news .item {
		height: 185px;
		padding: 5px 0 0 12px;
		margin: 20px 0 0 0;
		overflow: hidden;
	}
		.news .item p{ margin: 0 0 8px 0; letter-spacing: .7px; }
			.news .item p span{
				display: block;
				float: left;
				margin-right: 30px;
			}
		.news .item p a{
			display: inline-block;
			margin-right: 3px;
		}

/* 最近の作品
------------- */
.latest { width: 680px; }
	.latest .works{
		width: 100%;
		height: 300px;
	}
	.latest .works .latestPhoto {
		float: left;
		width: 120px;
		height: 120px;
		margin: 0 20px 25px 0;
	}
	.ie6 .latest .works .latestPhoto {
		margin: 0 10px 25px 0;
	}
		.latest .works .latestPhoto a img{
			width: 120px;
			height: 120px;
		}

	.latest .new{
	  margin: 5px 0 15px 0;
	}

/* ================================================================================ */
/*      aboutMe                                                                     */
/* ================================================================================ */
#about{ width: 680px; }
/* cssSprite */
#about .cssSprite{
	background: url('./../images/about_title.png') no-repeat;
}
	#about h2.about_me{
		width: 680px;
		height: 24px;
		background-position: 0 0;
	}
/* △cssSprite△ */

/* utopiaについて
----------------*/
	#about .aboutMe {
		background: url('./../images/airbrush_big.png') no-repeat bottom right;
		
	}
		#about .aboutMe .title_up {
			margin: 40px 0 0 0;
			padding: 0 0 0 10px;
			border-left: #eaeaea solid 5px;
			font-size: 25px;
			line-height: 33.75px;
			font-weight: normal;
		}
			#about .aboutMe .title_up .bold{
				font-weight: bold;
			}

		#about .aboutMe .aboutText {
			width: 680px;
			margin: 20px 40px 0 0;
		}
		#about .aboutMe .last{
			margin: 20px 0px 30px 0;
		}

	

/* ================================================================================ */
/*      3.right side - gallery                                                      */
/* ================================================================================ */
/* contents
------------ */
#gallery {
	width: 100%;
	min-width: 680px;
}

	#gallery #portfolio {
		width: 100%;		
		z-index: 200;
	}
		#gallery #portfolio .container{
			float: left;
			width: 212px;
			height: 200px;
			margin:0 20px 0px 0;
		}
		#gallery #portfolio .container img {
			width: 206px;
			height: 156px;
			padding: 2px 2px 2px 2px;
			border: 1px solid #aaa;
		}
		#gallery #portfolio .container img:hover{
			opacity: 0.7;
		}

		#gallery #portfolio .detail {
			width: 200px;
			height: 18px;
			margin-top: 4px;
			display: block;
			color: #555;
			text-align: center !important;
		}

	#gallery #portfolio_nav{
		width: 100%;
		margin-top: 30px;
	}
		#gallery #portfolio_nav li{
			
			
		}

		#gallery #portfolio_nav li.new{
			float: left
		}

		#gallery #portfolio_nav li.old{
			float: right;
			margin-right: 20px;
		}
		#gallery #portfolio_nav li a{
			border: #eaeaea 2px solid;
			border-radius: 25px;
			padding: 5px 15px;
			display: inline-block;
		}
		#gallery #portfolio_nav li a:hover{
			background: #eaeaea;
			text-decoration: none;
		}


/* 作品の詳細 (別ページ)
--------------------- */
#works{ width: 680px; }
 #works .page_title{
 	margin-top: -4px;
 	height: 24px;
 }
#works #images{ position: relative;  }

	/* メインビジュアル */
	#works #images #mainImage{
		float: left;

		padding: 5px 5px 5px 5px;
		border: 2px solid #333;
		background: url('./../images/gallery_logo.png') no-repeat center center;
		z-index: 20000 !important;
		cursor: pointer;
	}
		#works #images #mainImage img{
			width: 500px;
		}
	
	/* サムネイル */
	#works #images #thumbArea{
		width: 125px;
		height: 347px;
		margin: 0 0 0 540px;
		overflow: scroll;
		padding-right: 10px;
		
	}
	.ie6 #works #images #thumbArea,
	.ie7 #works #images #thumbArea
	.ie8 #works #images #thumbArea{
		position: absolute;
		top: 0;
		right: 0px;
	}

		#works #images #thumbArea .thumbs{ width: 100%; }
			#works #images #thumbArea .thumbs .thumb{
				height: 75px;
				margin: 0 0 10px 0;
				padding: 2px 2px 2px 2px;
				border: 1px solid #111;
				cursor: pointer;
				width: 100px;
			}

	/* 紹介文章 */
	#works #text {
		margin: 40px 0px 30px 0;
		padding: 20px 25px;
		background: #f3f3f3;
		border-radius: 14px;
	}
		#text .gallery_text{width: 640px;}

	/* オンクリック時のブラックスクリーン */
	body #backColor{
		position: fixed;   
		z-index: 20000;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: none;
		cursor: pointer;
	}

	body #onImage{
		position: absolute !important;
		z-index: 200000;
		top: 0;
		left: 0;
	}

	body #onImage img{ max-width: 750px}

	/* 戻るボタン */
	.works_bottomArea{
		width: 670px !important;
		height: 100%;
		padding: 0 0px 0px 0px;
		margin: 13px 0 30px 0;
		text-align: right;
	}

/* ================================================================================ */
/*      Order Flow                                                                  */
/* ================================================================================ */
#flow {
	width: 680px;
	
	position: relative;
}

/* cssSprite */
	#flow .cssSprite{
		background: url("./../images/flow_images.png");
	}
	#flow .cssSprite{}
		#flow h2.page_title {
			width: 200px;
			height: 24px;
			background-position: 0 0;
		}
		#flow h3{

		}
		#flow h4{
			position: absolute;
			right: 15px;
			top: -20px;
		}
		#flow h4#step_1{
			position: absolute;
			width: 26px;
			height: 49px;
			background-position: 0 -174px;
		}
		#flow h4#step_2{
			width: 199px;
			height: 49px;
			background-position: -26px -174px;
		}
		#flow h4#step_3{
			width: 192px;
			height: 49px;
			background-position: -225px -174px;
		}
		#flow h4#step_4{
			width: 48px;
			height: 49px;
			background-position: -417px -174px;
		}
		#flow h4#step_5{
			width: 200px;
			height: 49px;
			background-position: -465px -174px;
	}
/* △cssSprite△ */
	#flow h3.sta_h3 .back_wrap:after{
		top: 80%;
	}
	#flow h4.flowImage {
		text-align: center;
		margin: 30px auto 30px auto;
	}

	/* 各セクション */
	#flow .step{
		position: relative;
		margin-bottom: 18px;
	}
		#flow .step .flowText{
			margin: 20px auto 50px 10px;
		}
			#flow .step .flowText p{ }
				#flow .step .flowText p span.bold {
					display: inline;
					font-weight: 900;
				}
			#flow .step .flowText ul {
				padding: 15px 15px;
				background: #f7f7f7;
				border-radius: 15px;
				margin-top: 20px;
			}
				#flow .step .flowText ul li {
					padding-left: 20px;
					text-indent: -20px;
					margin-bottom: 10px;
				}

		#flow .step .arrow {
			width: 16px;
			height: 16px;
			display: block;
			position: absolute;
			top: 0px;
			right: 22px;
		}

/* ================================================================================ */
/*      5.right side - price                                                        */
/* ================================================================================ */
#price {
	width: 680px;
	
}
/* cssSprite */
	#price .cssSprite{
		background: url("./../images/price_titlebar.png");
	}
	#price .cssSprite02{
		display: block;
		background: url("./../images/price_big_image.png");
	}

	#price .cssSprite{}
		#price h2.page_title {
			width: 92px;
			height: 22px;
			background-position: 0 0;
		}
		#price h3.system {
			width: 680px;
			height: 15px;
			background-position: 0 -22px;
		}
		#price h3.basic {
			width: 680px;
			height: 15px;
			background-position: 0 -37px;
		}
		#price h3.custom {
			width: 680px;
			height: 15px;
			background-position: 0 -52px;
		}
		#price h4.bike {
			width: 60px;
			height: 15px;
			background-position: -92px 0;
		}
		#price h4.helmet {
			width: 86px;
			height: 15px;
			background-position: -152px 0;
		}

	#price .cssSprite02{}
		#price p.systemImage {
			width: 680px !important;
			height: 150px !important;
			background-position: 0 0;
		}
		#price p.bike_xl {
			width: 680px;
			height: 380px;
			background-position: 0 -150px;
		}
		#price p.bike_flstc {
			width: 680px;
			height: 380px;
			background-position: 0 -530px;
		}
		#price p.bike_flhtch {
			width: 680px;
			height: 380px;
			background-position: 0 -910px;
		}
		#price p.helmet_price {
			width: 680px;
			height: 223px;
			background-position: 0 -1290px;
		}
/* △cssSprite△ */
	#price #systemArea,
	#price #basicPrice,
	#price #customPrice{ margin: 20px 0 20px 0; }

		#basicPrice .bikePrice .bikeBtn{ margin: auto; }
			#basicPrice .bikePrice .bikeBtn .scrollLink{
				height: 100%;
				display: inline;
				list-style: none;
				margin: 0 89px 0 0;
			}
		#basicPrice p{
			margin: 20px 0 20px 0;
		}

		#price .notes { margin: 20px 0 0 0 }
		#price .notes li {
			font-size: 13px;
			margin-left: 30px;
			list-style: outside;
		}

		#price h4 { margin: 50px 0 20px 0 }
		
		#price span.under_line {
			border-bottom:1px solid #f69566;
		}
	
/* ================================================================================ */
/*      6.right side - contact                                                      */
/* ================================================================================ */
#contact {
	width: 680px;
	font-size: 13px;
	z-index: 200;
	*letter-spacing: 1px;
}
/* cssSprite */
	#contact .cssSprite{
		background: url("./../images/contact_titlebar.png");
	}
	#contact .cssSprite{}
		#contact h2.page_title {
			width: 134px;
			height: 22px;
			background-position: 0 0;
		}
		#contact h3.mail_form {
			width: 680px;
			height: 15px;
			background-position: 0 -22px;
		}
		
/* △cssSprite△ */
	#contact h3 { margin: 20px 0 30px 0; }

	#contact h3.onegai{
		font-size: 20px;
	}

	#contact #mailform { margin: 0; }

	.tipped { color: #BBB }

/* ================================================================================ */
/*      thanks                                                                      */
/* ================================================================================ */
	#thanks {
		height: 500px;
		font-size: 13px;
	}
	#thanks .page_iitle{
		margin: 0 0 20px 0;
	}

/* ================================================================================ */
/*      utopia Info                                                                      */
/* ================================================================================ */
#utopiaInfo{}
	#utopiaInfo .cssSprite{
		background: url("./../images/contact_titlebar.png");
	}
		#utopiaInfo .information{
			width: 680px;
			height: 15px;
			background-position: 0 -37px;
		}
/*代表氏名など
--------------- */
	#utopiaInfo .name {
		font-weight: bold;
		margin: 30px 0 10px 0;
		font-size: 20px;
	}
		#utopiaInfo dl {			
		}
			#utopiaInfo dt {
				float: left;
				width: 120px;
				margin-right: 20px;
				padding: 6px 0 0 0px;
				font-weight: normal;
				text-align: right;
			}
			#utopiaInfo dd {
				margin-left: 120px;
				padding: 6px 0px;
			}

		#utopiaInfo p{
			margin-top: 20px;			
		}

		#utopiaInfo #attention{
			padding: 20px 30px;
			background: #f0f0f0;
			margin-top: 30px;
			border-radius: 20px;
		}

		#utopiaInfo #attention h4{ font-size: 25px; }
		#utopiaInfo #attention .orange{
			color: #f47b41;
		}
		#utopiaInfo #attention .bold{
			text-decoration: underline;
		}
/* ================================================================================ */
/*      x.footer                                                                    */
/* ================================================================================ */
#footer{
	position: relative;
	width: 680px;
	margin: 200px 0 0 0px;
	padding: 0 0 20px 0;
}
#footer .gotop{
	z-index: 1000;
	position: absolute;
	top: -130px;
	left: -85px;
	width: 125px;
	height: 125px;
	background: url("./../images/gotop.png");
}
	#footer .gotop .footer_link{
		display: block;
		width: 125px;
		height: 125px;
	}

#footer .bottom {
	font-size: 14px;
}
#footer .bottom .copyright{
	position: absolute;
	top: -78px;
	left: 60px;
}

#footer .bottom .copyright a{

}
#footer .bottom .copyright a:hover{
	cursor: default;
	text-decoration: none;
}

p.fxxk_ie{
	font-size: 10px;
	color: #111;
	margin: 30px 5px 0 5px;
}


@media (max-width: 767px) {}


@media (min-width: 768px) {


}
@media (min-width: 933px) {
	#wrapper .right{
		width: 696px;
	}
}
@media (min-width: 1200px) {
	#wrapper .right{
		width: 950px;
	}
}

@media (min-width: 1390px) {
	#wrapper .right{
		width: 1160px
	}
}

@media (min-width: 1609px) {
	#wrapper .right{
		width: 1392px
	}
}
@media (min-width: 1842px) {
	#wrapper .right{
		width: 1624px
	}
}