@charset "utf-8";

* {
	margin: 0px;
	padding: 0px;
	border: none;
}
img { vertical-align: bottom;}
body {
	color:#333;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
#content, #detailInner {
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	*zoom:1;
}

a:link, a:visited{ color:#333; text-decoration: none;}
a:hover, a:active{ color:#333; text-decoration: underline;}


/* ================= clearfix ================= */
.clearfix:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
}  
  
.clearfix { display: inline-table; }  
  
/* Hides from IE-mac \*/  
* html .clearfix { height: 1%; }  
.clearfix { display: block; }  
/* End hide from IE-mac */  



/*----------------------------------------------------------------
	headerArea
----------------------------------------------------------------*/

#headerArea{ margin-bottom: 46px;}



/*----------------------------------------------------------------
	contents
----------------------------------------------------------------*/

/* ================== Common ================== */
.section{ margin-bottom: 120px;}
.note{
	font-size: 1.084em;
	line-height: 3.2em;
}

.txt-link{
	background-image: url(../IMAGES/icn_txtlnk.gif);
	background-position: center right;
	background-repeat: no-repeat;
	background-size: 4.6%;
	padding-right: 12px;
}

.ie8 .txt-link{
    background-image: url(../IMAGES/icn_txtlnk_ie8.gif);
}

/* ================== Slider ================== */


.slider {
    position: relative;
	width: 865px;
	margin: 0 auto;
}

.slider .main li.current { display: block;}

.slider .dot-nav{
	position: absolute;
	top:524px;
	right:180px;
}

.slider .dot-nav li{
	padding-right: 5px;
	float: left;
}

/*.slider .dot-nav li a{
	display: block;
	width:10px;
	height:10px;
	background: url('/COMMON/IMAGES2012/PHOTO/btn_dot.png') 0 0 no-repeat;
}*/


/* ================ mainVisual ================ */
#mainVisual{
	width: 100%;
	height: 530px;
	position: relative;
	margin-bottom: 90px;
}

#mainVisual h1,
#mainVisual p{ text-indent: -9999px;}

#mainVisual h1{
	width: 567px;
	height: 107px;
	background-image: url(../IMAGES/main_visual_ttl.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
}

#mainVisual #mainVisual_copy{
	width: 325px;
	height: 216px;
	background-image: url(../IMAGES/main_visual_copy.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 178px;
	left: 0;
}

/*
#mainVisual a{
	width: 262px;
	position: absolute;
	top: 434px;
	left: 0;
}
*/

#mainVisual #mainVisual_photo{
	width: 621px;
	height: 369px;
	background-image: url(../IMAGES/main_visual_photo1.jpg);
	background-repeat: no-repeat;
	position: absolute;
	top: 155px;
	right: 0;
}

#mainVisual .afz-btn{
    position: absolute;
    right: 30px;
    bottom: 20px;
    text-indent: 0;
}

/* ================== Detail ================== */
#detail h2{
	width: 161px;
	height: 68px;
	text-indent: -9999px;
	background-image: url(../IMAGES/detail_ttl.png);
	background-repeat: no-repeat;
	margin-bottom: 50px;
}

#detail #main_photo{
	width: 648px;
	float: left;
}

#detail #thumbnail{
	width: 286px;
	float: right;
}

#detail #thumbnail li{
	width: 132px;
	border: #ddd 2px solid;
	margin: 0 4px 6px 0;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	cursor: pointer;

}

#detail #thumbnail li.selected { border-color: #c71444;}


/* ================= Download ================= */
#download{
	width:100%;
	background: #eee;
	text-align: center;
	padding: 34px 0 14px;
}

#download h2{
	width: 322px;
	height: 26px;
	text-indent: -9999px;
	background-image: url(../IMAGES/download_ttl.png);
	background-repeat: no-repeat;
	margin: 0 auto 30px;
}

#download ul li{
	width: 340px;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	margin: 0 16px 20px 0;
}

#download .comming-soon {
    padding-bottom: 20px;
}

/* =============== how to make ================ */
#howtomake h2{
	width: 779px;
	height: 68px;
	text-indent: -9999px;
	background-image: url(../IMAGES/howtomake_ttl.png);
	background-repeat: no-repeat;
	margin: 0 0 60px;
}

#howtomake .slider .how-to-list{ margin-bottom: 77px;}
#howtomake .slider .main .howto_img{
    position: relative;
	width: 424px;
	float: left;
    padding-bottom: 5px;
}

#howtomake .slider .main .howto_txt{
	width: 410px;
	float: right;
	font-size: 14px;
	line-height: 1.85em;
}


#howtomake .slider .how-to-list {
    width: 865px;
    overflow: hidden;
}

#howtomake .slider .how-to-list li{
    display: none;
    width: 865px;
}
#howtomake .slider .how-to-wrap {
    width: 865px;
}

#howtomake .slider .how-to-box {
    width: 865px;
    float: left;
}

#howtomake .slider .thumb{ letter-spacing: -0.4em}
#howtomake .slider .thumb li{
	width: 131px;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	margin-right: 15px;
	cursor: pointer;
}
#howtomake .slider .thumb li.last{ margin-right: 0;}

#howtomake .sliderPager{
    color: #666;
    font-family: Arial;
    font-size: 0.85em;
    font-weight: bold;
    padding-top: 5px;
    text-align: center;
}

#howtomake .sliderPager a {
    display: inline-block;
    background: #c1c1c1 none repeat scroll 0 0;
    border-radius: 5px;
    height: 10px;
    margin: 0 5px;
    outline: 0 none;
    text-indent: -9999px;
    width: 10px;
}

#howtomake .void {
    height: 10px;
    padding-top: 5px;
    font-size: 0.85em;
}

#howtomake .sliderPager a:hover,
#howtomake .sliderPager a.selected {
    background: #c71444 none repeat scroll 0 0;
}

.ie8 #howtomake .sliderPager a {
    width: 12px;
    height: 12px;
    background-image: url(../IMAGES/pagenation_off.gif);
}

.ie8 #howtomake .void {
    height: 12px;
    padding-top: 20px;
}


.ie8 #howtomake .sliderPager a:hover,
.ie8 #howtomake .sliderPager a.selected{
    background-image: url(../IMAGES/pagenation_on.gif);
}

#howtomake .sliderNext,
#howtomake .sliderPrev
{
    position: absolute;
    top: 120px;
    cursor: pointer;
}

#howtomake .sliderNext:hover,
#howtomake .sliderPrev:hover
{
    opacity:.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha( opacity=70 )";
}

#howtomake .sliderNext{
    right: 5px;
}

#howtomake .sliderPrev{
    left: 5px;
}

/*作り方テキスト*/
#howtomake .slider .main .howto_txt h3 {
    font-size: 1.3em;
    margin-bottom: .5em;
    font-weight: bold;
}

#howtomake .slider .main .howto_txt .point-list li {
    display: block!important;
    width: auto;
    margin-bottom: .2em;
    text-indent:-1em;
    padding-left:1em;
}

.mac #howtomake .slider .main .howto_txt .point-list li {
    text-indent:-1.5em;
    padding-left:1.5em;
}

#howtomake .slider .main .howto_txt .point-txt {
    margin-top: .8em;
    /*
    text-indent: -4.1em;
    padding-left: 4.1em;
    */
}
#howtomake .slider .main .howto_txt .point-list li .dot {
    padding-right: .5em;
}


/* ================ Let's Try! ================ */

#letstry{
	width: 100%;
	text-align: center;
}

#letstry h2{
	width: 247px;
	height: 47px;
	text-indent: -9999px;
	background-image: url(../IMAGES/letstry_ttl.png);
	background-repeat: no-repeat;
	margin: 0 auto 30px;
}

.ie8 .bx-wrapper .bx-pager.bx-default-pager a {
    width: 12px;
    height: 12px;
    background-image: url(../IMAGES/pagenation_off.gif);
}

.ie8 .bx-wrapper .bx-pager.bx-default-pager a:hover, 
.ie8 .bx-wrapper .bx-pager.bx-default-pager a.active{
    background-image: url(../IMAGES/pagenation_on.gif);
}


/* ================ BannerArea ================ */
#bannerArea{
	border-top: #ccc 1px solid;
	padding: 30px 0 60px;
}

#bannerArea ul {
	margin-bottom: 30px;
	letter-spacing: -0.4em
}

#bannerArea ul li{
	display: inline-block;
	*display: inline;
	*zoom: 1;
	margin-right: 26px;
}
#bannerArea ul li.last{ margin-right: 0;}

#bannerArea ul li #bnr_nismo{ width:607px;}
#bannerArea ul li #bnr_carsindealer{ width:331px;}

/*キャンペーンバナー*/
#nismoBunr {
    text-align: center;
    margin-bottom:50px;
}



/*SNS*/
#sec-floating {
    position: fixed;
    bottom: 10px;
    right: 0px;
    width: 30px;
    z-index: 9999;
}
#sec-floating .area-sns {
    list-style:none;
}
#sec-floating .area-sns > * {
    margin-bottom: 1px;
    text-align: left;
}
#sec-floating .area-btn {
    position: relative;
    cursor: pointer;
}
#sec-floating .area-btn .close {
    position: absolute;
    top: 0;
    left: 0;
}