@charset "utf-8";
/* ==================================================== */
/* L A Y O U T */
/* ==================================================== */
body,html{
min-width: 980px;
color: #DDD;
background: #000;
line-height: 1.6;
}
#wrapper{
width: 100%;
min-width: 980px;
overflow: hidden;
background: #000;
}
	/* IE 6 */
	* html #wrapper{
	background: #000 url(../img/bg_body.png) repeat 0 0;
	}
#mainWrap{
min-width: 980px;
margin: 0 -150px;
padding: 0;
background: url(../img/bg_main.png) no-repeat 50% 0;
background-attachment: fixed;
overflow: hidden;
}

#footerWrap{
width: 100%;
background: #000;
}

#header{
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 500;
min-width: 980px;
max-width: 1280px;
height: 179px;
background: url(../img/bg_main.png) no-repeat 50% 0;
}
	/* 	IE 6 */
	* html #header{
	position: absolute;
/* 	z-index: auto; */
	width: 100%;
	}

#contents{
width: 980px;
margin: 0 auto;
padding: 195px 150px 0;
}
#contents div#article{
padding-top: 23px;
}
#footer{
width: 980px;
margin: 0 auto;
padding: 10px 0 0;
font-size: 10px;
}


/* ==================================================== */
/* S T Y L E */
/* ==================================================== */
/* Head
---------------------------------------- */
h1,h2,h3,h4,h5,h6,
dl dt{
font-weight: normal;
}

/* LINK
---------------------------------------- */
a:link{color:#FFF; text-decoration: none;}
a:visited{color:#FFF; text-decoration: none;}
a:hover{color: #FFF; text-decoration: underline;}
a:active{ color:#FFF; text-decoration:none;}


/* Form (for Safari Lion placeholder)
---------------------------------------- */
input:focus::-webkit-input-placeholder,
isindex:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
   color: transparent;
}

/* grid2col */
#article div.grid2col{
margin-bottom: 30px;
}
#article div.grid2col div.column{
float: left;
}
#article div.grid2col div.column.first{
margin-right: 0;
}

/* ==================================================== */
/* **for small view */
/* ==================================================== */
#for_sp{
height: auto;
padding: 30px 0;
background: #333;
overflow: hidden;
text-align: center;
/* position: absolute; */
/* top: 300px; */
/* left: 0; */
/* z-index: 600; */
}
#for_sp a{
display: block;
width: 860px;
height: 80px;
margin: 0 auto;
padding: 20px 0 0 40px;
color: #111;

background: url(../img/sp_arrow.png) no-repeat 96% 50%, -webkit-linear-gradient(bottom, rgba(0,0,0,.30), rgba(255,255,255,.52));
background-image: url(../img/sp_arrow.png) no-repeat 96% 50%,-o-linear-gradient(bottom, rgba(0,0,0,.30), rgba(255,255,255,.52));
background-image: url(../img/sp_arrow.png) no-repeat 96% 50%,-ms-linear-gradient(bottom, rgba(0,0,0,.30), rgba(255,255,255,.52));
background-image: url(../img/sp_arrow.png) no-repeat 50% 98%, linear-gradient(to top, rgba(0,0,0,.30), rgba(255,255,255,.52));
background-color: #e9e9e9;

text-align: left;
font-size: 36px;

text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
#for_sp a:hover{
text-decoration: none;
}
#wrapper.sp {
background: #262626;
}
#wrapper.sp #mainWrap{
background-attachment: scroll;
}
#wrapper.sp #header {
position: absolute;
top: 160px;
}

/* ==================================================== */
/* H E A D E R */
/* ==================================================== */

#header .inner{
margin: 0 0 0 -518px;
position: absolute;
top: 0;
left: 50%;
width: 1036px;
height: 195px;
background: url(../img/bg_header.png) no-repeat 50% 0;
}
	/* 	IE 6 */
	* html #header .inner{
	position: static;
	}

#header div.headerUnit div.first{
float: left;
width: 300px;
}
#header div.headerUnit div.first .headTitle{
height: 113px;
padding: 24px 0 0 81px;
}
#header div.headerUnit div.first h1{
margin: 0 0 0 35px;
}

/* navBlk ---------------- */
#header div.headerUnit div.navBlk{
float: right;
width: 458px;
padding: 8px 35px 0 0; /*  52px 35px 0 0 */
/* display: inline; */
}

/* SNS Btn  */
#header div.headerUnit div.navBlk ul.snsBtn{
float: right;
width: 256px;
height: 22px;
margin: 8px 0;
/* margin-bottom: 52px; */
}
#header div.headerUnit div.navBlk ul.snsBtn li{
float: left;
width: 119px;
margin: 0 0 0 8px;
overflow: hidden;
text-align: right;
}
#header div.headerUnit div.navBlk ul.snsBtn li.sb02{
/* width: 160px; */
}

/* appbtn */
#header div.headerUnit div.navBlk ul.appbtn{
float: right;
padding: 0 0 0 100px;
height: 92px;
margin: 0;
/* margin-bottom: 52px; */
}
#header div.headerUnit div.navBlk ul.appbtn li{
float: left;
margin: 0 0 0 15px;
text-align: right;
font-size: 11px;
}

/* GNAV
---------------------------------------- */
#header div.headerUnit div.navBlk #gnav{
float: right;
clear: both;
width: 458px;
}
#header div.headerUnit div.navBlk #gnav li{
float: left;
margin-left: 24px;
display: inline;
}
#header div.headerUnit div.navBlk #gnav li a{
display: block;
width: auto;
height: 22px;
background: url(../img/gnav.png) no-repeat 0 0;
text-indent: -9999px;
overflow: hidden;
}
#header div.headerUnit div.navBlk #gnav li.gn01{
width: 52px;
}
#header div.headerUnit div.navBlk #gnav li.gn02{
width: 49px;
}
#header div.headerUnit div.navBlk #gnav li.gn03{
width: 63px;
}
#header div.headerUnit div.navBlk #gnav li.gn04{
width: 124px;
}
#header div.headerUnit div.navBlk #gnav li.gn05{
width: 50px;
}
#header div.headerUnit div.navBlk #gnav li.gn01 a{
background-position: 0 0;
}
#header div.headerUnit div.navBlk #gnav li.gn02 a{
background-position: -76px 0;
}
#header div.headerUnit div.navBlk #gnav li.gn03 a{
background-position: -214px 0;
}
#header div.headerUnit div.navBlk #gnav li.gn04 a{
background-position: -300px 0;
}
#header div.headerUnit div.navBlk #gnav li.gn05 a{
background-position: -447px 0;
}
	/* 	over, current */
	#header div.headerUnit div.navBlk #gnav li.gn01 a:hover,
	#home #header div.headerUnit div.navBlk #gnav li.gn01 a{
	background-position: 0 -40px;
	}
	#header div.headerUnit div.navBlk #gnav li.gn02 a:hover,
	#about #header div.headerUnit div.navBlk #gnav li.gn02 a{
	background-position: -76px -40px;
	}
	#header div.headerUnit div.navBlk #gnav li.gn03 a:hover,
	#howto #header div.headerUnit div.navBlk #gnav li.gn03 a{
	background-position: -214px -40px;
	}
	#header div.headerUnit div.navBlk #gnav li.gn04 a:hover,
	#gallery #header div.headerUnit div.navBlk #gnav li.gn04 a{
	background-position: -300px -40px;
	}
	#header div.headerUnit div.navBlk #gnav li.gn05 a:hover,
	#faq #header div.headerUnit div.navBlk #gnav li.gn05 a{
	background-position: -447px -40px;
	}


/* ==================================================== */
/* C O N T E N T S */
/* ==================================================== */
#article div.section{
margin-bottom: 40px;
padding: 0 0 30px;
}


/* appbtn-btm  */
#article dl.appbtn-btm{
margin: 0 7px;
/* padding-bottom: 120px; */
}
#article dl.appbtn-btm dt{
clear: both;
float: left;
/* width: 115px; */
margin: 0 15px 15px 0;
}
#article dl.appbtn-btm dd{
float: left;
/* margin-left: 132px; */
padding-top: 9px;
}




/* ==================================================== */
/* F O O T E R */
/* ==================================================== */
#footer p.copyright{
float: left;
}
#footer ul.fnav{
float: right;
}
#footer ul.fnav li{
float: left;
margin-left: 15px;
}
#footer ul.fnav li a{
}


/* ==================================================== */
/* H O M E  index.html */
/* ==================================================== */

#home #header div.headerUnit div.navBlk #gnav{
width: 382px;
}

#home #header div.headerUnit div.navBlk #gnav li.gn01{
display: none;
background: red;
}

#home .figure {
margin: 37px 0;
}

#home p.link.detail {
margin: 64px 0;
color: #FFF;
font-size: 14px;
text-align: center;
}

#home p.link.detail a {
display: inline-block;
margin: 9px 0;
height: 30px;
width: 100px;
white-space: pre;
text-indent: 100%;
background-repeat: no-repeat;
/* background-color: red; */
/*▼▼▼ 160712 logram add ▼▼▼*/
text-indent: -9999px;
}

#home #article {
padding: 0 0 118px;
}

#home #article div.section {
margin: 0 7px 37px;
border-bottom: 1px solid #cd000c;
}

#home #article div.section.last {
margin: 0 7px -16px;
border-bottom: none;
}

#home #article div.section.intro {
position: relative;
/* outline: 1px solid aqua; */
}

#home #article div.section.intro:before,
#home #article div.section.intro:after {
  content: "";
  display: table;
  clear: both;
}

#home #article div.section.intro h2 {
margin: 96px 0 0px;
}

#home #article div.section.intro p.lead {
margin: 58px 0;
}

#home #article div.section.intro .figure.lens {
margin: 0;
position: absolute;
top: -69px;
right: -135px;
}

#home #article div.section.intro .figure.video {
margin: 97px auto 92px;
padding: 0 9px 18px 12px;
width: 800px;
background: transparent url(../img/home_bg_i01.png) no-repeat 0 100%;
}

#home #article div.section.feature {
}

#home #article div.section.feature .figure {
margin: 34px 0 -79px;
}

#home #article div.section.feature p.link.detail a {
width: 181px;
background-image: url(../img/home_btn_f01.png);
}

#home #article div.section.feature p.link.detail a:hover {
background-image: url(../img/home_btn_f01-h.png);
}

#home #article div.section.howto {
}

#home #article div.section.howto .figure {
margin: 49px 0 0px;
}

#home #article div.section.howto p.link.detail a {
width: 199px;
background-image: url(../img/home_btn_h01.png);
}

#home #article div.section.howto p.link.detail a:hover {
background-image: url(../img/home_btn_h01-h.png);
}

#home #article div.section.gallery {
}

#home #article div.section.gallery .figure {
margin: 37px 0 -13px;
}

#home #article div.section.gallery .figure img {
margin: 0 0 0 -6px;
}

#home #article div.section.gallery p.link.detail a {
width: 222px;
background-image: url(../img/home_btn_g01.png);
}

#home #article div.section.gallery p.link.detail a:hover {
background-image: url(../img/home_btn_g01-h.png);
}

#home #article div.section.news {
}

#home #article div.section.news dl {
margin: 32px 0;
}

#home #article div.section.news dt {
margin: 0;
width: 94px;
float: left;
clear: left;
}

#home #article div.section.news dd {
margin: 0 0 1em;
padding-left: 94px;
}


/* ==================================================== */
/* A B O U T  about.html */
/* ==================================================== */
#about .small{
font-size: 10px;
}
#about #article div.section{
padding-left: 7px;
padding-right: 7px;
border-bottom: 1px solid #cd000c;
}
#about #article div.section.last{
margin: 0;
padding-bottom: 120px;
border-bottom: none;
}
/* guideList */
#about #article ol.guideList{
margin-bottom: 0;
padding-top: 40px;
}
#about #article ol.guideList li{
float: left;
width: 490px;
margin-bottom: 44px;
display: inline;
}
#about #article ol.guideList li p{
padding-right: 20px;
}
#about #article ol.guideList li.right{
width: 476px;
}
#about #article ol.guideList span.guideImg{
display: block;
margin-top: 20px;
padding: 8px 8px 19px;
width: 460px;
background: url(../img/about_img_bg_01.png) no-repeat 0 0;
}
#about #article ol.guideList .small{
display: block;
margin: -20px 0 0;
}
/* ※ */
#about #article ol.guideList.ope{
padding-top: 35px;
}

/* effectList */
#about #article ul.effectList{
padding-top: 25px;
}
#about #article ul.effectList li{
float: left;
width: 467px;
/* height: 310px; */
}
#about #article ul.effectList li.odd{
margin-right: 32px;
margin-bottom: 24px;
clear: left;
}
#about #article ul.effectList li p.cap{
margin-left: 198px;
font-family: Helvetica, Arial, sans-serif;
}

#about #article dl.recommend{
margin-bottom: 80px;
}
#about #article dl.recommend dt{
width: 90px;
float: left;
}
#about #article dl.recommend dd{
margin-left: 100px;
}



/* ==================================================== */
/* H O W T O  howto.html */
/* ==================================================== */
#howto #article {
padding: 0 0 120px;
}

#howto #article div.section{
padding-left: 7px;
padding-right: 7px;
border-bottom: 1px solid #cd000c;
}
#howto #article div.section.last{
margin: 0;
padding-bottom: 120px;
border-bottom: none;
}
/* guideList */
#howto #article ol.guideList{
margin-bottom: 0;
padding-top: 40px;
}
#howto #article ol.guideList li{
float: left;
width: 330px;
margin-bottom: 44px;
display: inline;
}
#howto #article ol.guideList li p{
padding-right: 20px;
}
#howto #article ol.guideList li.right{
width: 306px;
}
#howto #article ol.guideList span.guideImg{
display: block;
margin-top: 20px;
padding: 6px 6px 19px;
background: url(../img/howto_img_bg_01.png) no-repeat 0 0;
}
/* ※ */
#howto #article ol.guideList.ope{
padding-top: 35px;
}
#howto #article div.section.tutorial {
	padding-bottom: 64px;
}
#howto #article div.section.tutorial:before,
#howto #article div.section.tutorial:after {
  content: "";
  display: table;
  clear: both;
}
#howto #article div.section.tutorial .figure {
margin: 16px 30px;
padding: 0 3px 17px;
float: left;
background: transparent url(../img/howto_img_bg_02.png) no-repeat 50% 100%;
}
#howto #article div.section.tutorial .figure a {
}
#howto #article div.section.tutorial .figure a:hover {
filter: alpha(opacity=9);
opacity: 0.9;
}
#howto #article div.section.tutorial .figcaption {
margin: 8px 0;
color: #FFF;
line-height: 1.375;
}
#howto #article .figure {
margin: 40px 0;
}
#howto #article .function .figure img{
margin: 40px 0;
vertical-align: bottom;
}

/* IE6 and below */
* html #feature #article div.section.tutorial {
  *zoom: 1;
}

/* IE7 */
* + html #feature #article div.section.tutorial {
  *zoom: 1;
}



/* ==================================================== */
/* G A L L E R Y  gallery.html */
/* ==================================================== */
#gallery #article{
padding-bottom: 120px;
}
#gallery #article .section{
padding: 0 7px;
}
#gallery #article .section.first{
margin-bottom: 66px;
}
#gallery #article dl.portrait{
width: 936px;
margin-left: 30px;
padding: 21px 0 0;
}
#gallery #article dl.portrait dt{
clear: both;
float: right;
width: 206px;
height: 178px;
border-bottom: 1px solid #cd000c;
font-family: Helvetica, Arial, sans-serif;
}
#gallery #article dl.portrait dd{
width: 730px;
margin: 0 206px 28px 0;
}
#gallery #article dl.portrait dt p{
padding: 126px 0 0 26px;
}
/* 	IE 6 */
* html #gallery #article dl.portrait dd{
float: left;
margin: 0 0 28px 0;
display: inline;
}


/* ==================================================== */
/* F A Q  faq.html */
/* ==================================================== */
#faq #article{
}
#faq #article div.section{
margin: 0;
padding-bottom: 120px;
border-bottom: none;
}
#faq h2{
margin: 0 7px 38px;
}
#faq dl.faq{
margin: 0 7px 64px;
line-height: 1.923;
color: #FFF;
font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", "YuGothic", "メイリオ", "Meiryo", sans-serif;
-webkit-font-smoothing: antialiased;
}
#faq dl.faq dt,
#faq dl.faq dd{
padding: 0 0 0 64px;
}
#faq dl.faq dt{
margin: 0;
font-weight: normal;
}
#faq dl.faq dd{
margin: 0 0 1.923em;
font-weight: bold;
}
#faq dl.faq .count{
display: inline-block;
margin: 0 0 0 -64px;
width: 64px;
}
#faq p.credit{
margin: 0 7px 64px;
font-size: 10px;
}