/* =Reset
-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
body, html {
	line-height:200%;
	position: relative;
	text-align: left;
	font-size: 13px;
	font-family: '游ゴシック', YuGothic, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', sans-serif;
	font-style: normal;
	font-weight: normal;
	background-color: #fff;
	color: #000;
  
  min-width: 960px;
  
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	
}


article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    outline: none;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}


input, select {
    vertical-align:middle;
}

ol, ul, dl{list-style: none;}


.left{float: left;}
.right{float: right;}

.clear:before,
.clear:after {
  content: ' ';
  display: table;
}
.clear:after {
  clear: both;
}
.clear {
  *zoom: 1;
}



/* =Font
-------------------------------------------------------------- */

a{color: #231815;text-decoration: none;}
a:hover{color: #78716f;text-decoration: none;}

.t10{font-size: 10px;}
.t11{font-size: 11px;}
.t12{font-size: 12px;}
.t13{font-size: 13px;}
.t14{font-size: 14px;}
.t15{font-size: 15px;}
.t16{font-size: 16px;}
.t17{font-size: 17px;}
.t18{font-size: 18px;}
.t19{font-size: 19px;}
.t20{font-size: 20px;}
.t21{font-size: 21px;}
.t22{font-size: 22px;}
.t23{font-size: 23px;}
.t24{font-size: 24px;}
.t25{font-size: 25px;}
.t26{font-size: 26px;}
.t27{font-size: 27px;}
.t28{font-size: 28px;}
.t29{font-size: 29px;}
.t30{font-size: 30px;}

.serif{
	font-family: 'Times New Roman', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN','HG明朝E', 'ＭＳ Ｐ明朝', 'MS PMincho', 'MS 明朝', serif;
	font-weight: normal;
}
.en-serif{font-size: 105%;letter-spacing: 0.05em;font-weight: normal;}



.fadeObject{opacity: 0;}
.sp .fadeObject{opacity: 1;}



/* =Main Image
-------------------------------------------------------------- */
.main-image{
	background-color: #a7a8aa;
	position: relative;
	width: 100%;
	padding: 60px 0 0 0;
}
.main-image .main-image-in{
	/* height in js */
}
.main-image .main-image-in img{
	display: block;
	height: 100%;
	width: auto;
	margin: 0 auto;
	opacity: 0;
}




/* =Header
-------------------------------------------------------------- */
.header{
	background-color: #a7a8aa;
	height: 125px;
	width: 100%;
  min-width: 960px;
	position: absolute;
	left: 0;
	
	z-index: 10;
}

body.fixedheader .header{
	position: fixed;
	left: 0;
	top: 0 !important;
}

.header .header-in{
}

.header .header-logo{
	width: 250px;
	padding: 30px 0 0 40px;
}
.header .header-logo a{
	display: block;
	width: 250px;
	height: 71px;
	text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  
  background: url(../img/logo_pc.png) left top no-repeat;
  background-size: 250px 71px;
}


.header .header-navi li{
	margin: 0 40px 0 0;
	line-height: 125px;
}
.header .header-navi li a{
	color: #fff;
	border-bottom: #a7a8aa 1px solid;
	position: relative;
	padding-bottom: 2px;
	font-weight: bold;
}
.header .header-navi li a:after{
	content: '';
	width: 90%;
	height: 1px;
	position: absolute;
	left: 0;
	bottom: 0;
	opacity: 0;
	background-color: #fff;
	
	transition-property: all;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}
.header .header-navi li a:hover:after{width: 100%;opacity: 1;}

.header .header-navi li.sns{
	position: relative;
	overflow: hidden;
	width: 45px;
	padding: 52px 0 0 0;
}
.header .header-navi li.sns a{
	display: block;
	width: 20px;
	height: 20px;
	text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  
	transition-property: all;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}
.header .header-navi li.sns a:hover{opacity: 0.5;}
.header .header-navi li.sns a:after{content: none;display: none;}
.header .header-navi li.sns a.twitter{
	float: left;
	background: url(../img/icon_twitter.png) left top no-repeat;
	background-size: 20px 20px;
}
.header .header-navi li.sns a.facebook{
	float: right;
	background: url(../img/icon_facebook.png) left top no-repeat;
	background-size: 20px 20px;
}




/* =Main
-------------------------------------------------------------- */
.main{
	margin: 215px 0 0 0;
}
.main .section{
	width: 960px;
	margin: 0 auto;
	position: relative;
}
.main .section .section-title{
	color: #a7a8aa;
	font-weight: bold;
	width: 105px;
	position: absolute;
	left: 0;
	top: 0;
	line-height: 180%;
}
.main .section .section-body{
	width: 960px;
	margin: 0 auto;
}
.main .section .section-body.withline:before{
	content: '';
	display: block;
	width: 85px;
	height: 1px;
	background-color: #e4e5e5;
	position: absolute;
	left: 125px;
	top: 18px;
}
.main .section .section-body .section-body-in{
	padding: 0 0 0 250px;
}

.section-body h2{font-weight: normal;line-height: 180%;}
.section-body p{margin: 50px 0 0 0;}

.section-img{margin: 60px auto 115px auto;width: 710px;}
.section-img img{display: block;}

.section-img.col3{
	overflow: hidden;
}
.section-img.col3 img{
	display: block;
	float: left;
	margin: 0 0 0 10px;
}
.section-img.col3 img:first-child{margin: 0 0 0 0;}


.imgtextset{
	display: table;
	margin: 50px 0 0 125px;
	width: 625px;
}
.imgtextset .img{
	display: table-cell;
	width: 250px;
	vertical-align: middle;
	text-align: left;
}
.imgtextset .img img{display: block;}
.imgtextset .text{
	display: table-cell;
	width: 585px;
	vertical-align: middle;
}

/* 特長 - feature */
#feature{padding-bottom: 100px;}


/* 仕様 */
#spec .section-title{top: -15px;}
.specset{
	overflow: hidden;
	width: 710px;
	margin: 0px auto 0 auto;
	border-top: #e4e5e5 1px solid;
	padding: 18px 0 55px 0;
	position: relative;
}
.specset h2{position: relative;margin-left: -0.5em;}
.specset .specset-col4{
	padding: 18px 0 0 0;
	overflow: hidden;
	width: 740px;
}
.specset .specset-col4 li{
	float: left;
	width: 155px;
	margin: 0 30px 0 0;
}
.specset .specset-col4 li img{display: block;}
.specset .specset-col4 li p{padding: 5px 0 0 0}
.specset .specset-note{
	position: absolute;
	right: 2px;
	top: 59px;
	width: 335px;
}
.specset .specset-col2{
	padding: 18px 0 0 0;
	overflow: hidden;
	width: 740px;
}
.specset .specset-col2 li{
	float: left;
	width: 340px;
	margin: 0 30px 0 0;
}
.specset .specset-col2 li img{display: block;}
.specset .specset-col2 li p{padding: 5px 0 0 0}


/* 流れ */
#flow{margin-top: 65px;}
#flow .section-title{top: -12px;}
.flow-copy{
	width: 710px;
	margin: 12px auto 0 auto;
	border-top: #e4e5e5 1px solid;
	padding: 18px 0 55px 0;
	position: relative;
}
.flow-in{width: 710px;margin: 0 auto;}
.flow-ol{overflow: hidden;width: 585px;margin: 0 auto;}
.flow-ol li{
	width: 125px;
	float: left;
	position: relative;
}
.flow-ol li.i5{width: 85px;}
.flow-ol li:after{
	content: '';
	position: absolute;
	width: 40px;
	height: 1px;
	display: block;
	background-color: #e4e5e5;
	right: 0;
	top: 49px;
}
.flow-ol li.i5:after{content: none;display: none;}
.flow-ol li img{display: block;}
.flow-ol li p{
	width: 85px;
	text-align: center;
}


.youtubelink{
	display: block;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
	overflow: hidden;
	margin: 10px 0 0 0;
	color: #a7a8aa;
}
.youtubelink img{display: block;float: left;margin:0 3px 0 0;}
.youtubelink a{
	display: block;
	float: left;
	height: 20px;
	line-height: 20px;
	color: #a7a8aa;
	text-decoration: underline;
}
.youtubelink a:hover{text-decoration: none;}


/* =Contact
-------------------------------------------------------------- */

.contact{
	margin: 110px 0 0 0;
	background-color: #f6f6f6;
}
.contact .contact-form{
	width: 960px;
	padding: 60px 0 60px 0;
	margin: 0 auto;
	position: relative;
	display: block;
}
.contact .section-title{
	color: #a7a8aa;
	font-weight: bold;
	width: 105px;
	position: absolute;
	left: 0;
	top: 45px;
	line-height: 180%;
}
.contact .contact-block{
	width: 710px;
	margin: 0 auto;
	border-top: #dededf 1px solid;
}
.contact .contact-block .contact-col{
	padding: 20px 0 18px 0;
	border-bottom: #dededf 1px solid;
}
.contact .contact-block .contact-col.col2 .name{
	display: table-cell;
	width: 210px;
	vertical-align: middle;
}
.contact .contact-block .contact-col.col2 .inputbox{
	display: table-cell;
	width: 500px;
	vertical-align: middle;
}
.contact .contact-block .contact-col.col4 .name{
	display: table-cell;
	width: 125px;
	vertical-align: middle;
}
.contact .contact-block .contact-col.col4 .inputbox{
	display: table-cell;
	width: 230px;
	vertical-align: middle;
}
.contact .contact-block .contact-col .name strong{display: block;line-height: 110%;font-weight: normal;padding: 0 0 3px 20px;}
.contact .contact-block .contact-col .name strong .must{color: #ff4343;font-size: 120%;padding: 0 0 0 3px;}
.contact .contact-block .contact-col .name .eng{display: block;line-height: 110%;color: #a7a8aa;padding-left: 20px;}
.contact .contact-block .contact-col .inputbox input{
	border: #dededf 1px solid;
	outline: none;
	margin: 0;
	padding: 7px 0 6px 0;
	line-height: 110%;
	text-indent: 10px;
	font-size: 14px;
}
.contact .contact-block .contact-col.col2 .inputbox input{width: 475px;}
.contact .contact-block .contact-col.col4 .inputbox input{width: 205px;}


.contact .contact-body{
	padding: 20px 0 18px 0;
	border-bottom: #dededf 1px solid;
}
.contact .contact-body .name strong{display: block;line-height: 110%;font-weight: normal;padding: 0 0 3px 20px;}
.contact .contact-body .name strong .must{color: #ff4343;font-size: 120%;padding: 0 0 0 3px;}
.contact .contact-body .name .eng{display: block;line-height: 110%;color: #a7a8aa;padding-left: 20px;}
.contact .contact-body .inputbox textarea{
	border: #dededf 1px solid;
	outline: none;
	margin: 20px 0 0 20px;
	padding: 7px 10px 6px 10px;
	line-height: 110%;
	font-size: 14px;
	width: 645px;
}

.contact .contact-send{margin: 40px auto 0 auto;width: 335px;}
.contact .contact-send input{
	margin: 0;
	padding: 0 0 0 0;
	border: none;
	background-color: #424344;
	text-align: center;
	color: #fff;
	font-size: 15px;
	letter-spacing: 0.1em;
	font-weight: normal;
	line-height: 50px;
	height: 50px;
	width: 335px;
	cursor: pointer;
}

.contact .error{
	display: block;
	color: #ff4343;
	font-size: 11px;
}




/* =Footer
-------------------------------------------------------------- */
.footer{
	background-color: #a7a8aa;
	width: 100%;
}
.footer .footer-in{
	text-align: center;
	color: #fff;
	padding: 25px 0 20px 0;
}
.footer .footer-logo{
	width: 165px;
	height: 25px;
	margin: 0 auto;
}
.footer .footer-logo a{
	display: block;
	width: 165px;
	height: 25px;
	text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  
  background: url(../img/footer_logo.png) left top no-repeat;
  background-size: 165px 25px;
}
.footer .footer-address{
	margin: 18px 0 0 0;
	color: #fff;
	line-height: 150%;
	font-size: 12px;
}
.footer .footer-address a{color: #fff;text-decoration: none;}
.footer .footer-address a:hover{color: #fff;text-decoration: underline;}








/* =Thanks.html
-------------------------------------------------------------- */


body.thanks .header{
	position: fixed;
	left: 0;
	top: 0 !important;
}
body.thanks .main{
	width: 710px;
	margin: 0 auto;
	padding: 300px 0 200px 0;
}
body.thanks .thanks-title{
	margin-bottom: 40px;
}



/* =SP mode
-------------------------------------------------------------- */
html.sp .pc{display: none;font-size: 0;}

html.sp,
html.sp body{
	width: auto;
	min-width: 0;
}


html.sp .header{
	position: fixed;
	left: 0;
	top: 0;
	height: auto;
	width: 100%;
	min-width: 0;
	padding: 10px 0 0 0;
}

html.sp .header .header-logo{
	width: 160px;
	padding: 15px 0 10px 0;
	margin: 0 0 0 20px;
	float: none;
}
html.sp .header .header-logo a{
	width: 160px;
	height: 45px;
  background: url(../img/logo_sp.png) left top no-repeat;
  background-size: 160px 45px;
}
html.sp .header .header-navi{
	width: auto;
	float: none;
	margin: 0 20px 10px 20px;
	position: relative;
}
html.sp .header .header-navi li{
	margin: 0 8px 0 0;
	line-height: 20px;
	width: auto;
	padding: 5px 0 5px 0;
}
html.sp .header .header-navi li a{
	font-size: 11px;
}
html.sp .header .header-navi li a:after{
	content: none;
	display: none;
}
html.sp .header .header-navi li a:hover:after{width: 100%;opacity: 1;}
html.sp .header .header-navi li.sns{
	width: 100%;
	padding: 5px 0 5px 0;
	position: relative;
	margin: -87px 0 0 0;
}
html.sp .header .header-navi li.sns a{
	transition: none;
}
html.sp .header .header-navi li.sns a:hover{opacity: 1;}
html.sp .header .header-navi li.sns a.twitter{
	float: right;
	margin: 0 0 0 7px;
}
html.sp .header .header-navi li.sns a.facebook{
	float: right;
}


/* =Main Image
-------------------------------------------------------------- */
html.sp .main-image{
	width: auto;
	height: auto;
	padding: 125px 20px 20px 20px;
}
html.sp .main-image .main-image-in img{
	display: block;
	height: auto;
	width: 100%;
	margin: 0 auto;
	opacity: 0;
}



/* =Main
-------------------------------------------------------------- */
html.sp .main{
	margin: 40px 0 0 0;
}
html.sp .main .section{
	width: auto;
	margin: 0 20px 0 20px;
}
html.sp .main .section .section-title{
	width: auto;
	position: static;
	font-size: 13px;
}
html.sp .main .section .section-body{
	width: auto;
	margin: 0 0 0 0;
}
html.sp .main .section .section-body.withline:before{
	content: none;
}
html.sp .main .section .section-body .section-body-in{
	padding: 0 0 0 0;
}
html.sp .section-body h2{font-size: 17px;}
html.sp .section-body p{margin: 20px 0 0 0;font-size: 13px;}
html.sp .section-img{margin: 30px 0 40px 0;width: auto;}
html.sp .section-img img{width: 100%;height: auto;}
html.sp .section-img.col3{
	overflow: hidden;
}
html.sp .section-img.col3 img{
	display: block;
	width: 33.3%;
	height: auto;
	float: left;
	margin: 0 0 0 0;
}
html.sp .section-img.col3 img:first-child{margin: 0 0 0 0;}

html.sp .imgtextset{
	display: block;
	margin: 50px 20px 0 20px;
	width: auto;
}
html.sp .imgtextset .img{
	display: block;
	width: auto;
	vertical-align: top;
	margin: 0 0 10px 0;
}
html.sp .imgtextset .img img{display: block;margin: 0 auto;}
html.sp .imgtextset .text{
	display: block;
	width: auto;
	vertical-align: top;
	font-size: 13px;
}

/* 特長 - feature */
html.sp #feature{margin-top:60px;padding-bottom: 50px;}


/* 仕様 */
html.sp #spec{margin-top: 0px;}
html.sp #spec .section-title{top: 0;}
html.sp .specset{
	width: auto;
	margin: 5px 0 0 0;
	border-top: #e4e5e5 1px solid;
	padding: 5px 0 40px 0;
}
html.sp .specset h2{font-size: 15px;}
html.sp .specset .specset-col4{
	padding: 5px 0 0 0;
	width: 100%;
}
html.sp .specset .specset-col4 li{
	float: left;
	width: 50%;
	margin: 0 0 0 0;
}
html.sp .specset .specset-col4 li img{display: block;width: 95%;height: auto;}
html.sp .specset .specset-col4 li p{font-size: 12px;padding: 0 0 10px 0;}
html.sp .specset .specset-note{
	position: static;
	font-size: 10px;
}
html.sp .specset .specset-col2{width: auto;}
html.sp .specset .specset-col2 li{
	float: left;
	width: 50%;
	margin:  0 0 0 0;
}
html.sp .specset .specset-col2 li img{display: block;width: 90%;height: auto;}
html.sp .specset .specset-col2 li p{font-size: 12px;}


/* 流れ */
html.sp #flow{margin-top: 20px;}
html.sp #flow .section-title{top: 0;}
html.sp #flow .section-title br{display: none;}
html.sp .flow-copy{
	width: auto;
	font-size: 15px;
	margin: 5px auto 0 auto;
	border-top: #e4e5e5 1px solid;
	padding: 5px 0 20px 0;
	position: relative;
}
html.sp .flow-in{width: auto;margin: 0 0 0 0;}
html.sp .flow-ol{overflow: hidden;width: auto;margin: 0 0 0 0;}
html.sp .flow-ol li{
	width: 20%;
	float: left;
	position: relative;
}
html.sp .flow-ol li.i5{width: 20%;}
html.sp .flow-ol li:after{
	content: none;
}
html.sp .flow-ol li img{display: block;width: 80%;height:auto;margin: 0 auto;}
html.sp .flow-ol li p{
	width: 100%;
	text-align: center;
	font-size: 11px;
}

/* =Contact
-------------------------------------------------------------- */
html.sp .contact{
	margin: 40px 0 0 0;
	background-color: #f6f6f6;
	overflow: hidden;
}
html.sp .contact .contact-form{
	width: auto;
	padding: 20px 20px 40px 20px;
	margin: 0 0 0 0;
}
html.sp .contact .section-title{
	font-size: 13px;
	width: auto;
	position: static;
	line-height: 180%;
}
html.sp .contact .contact-block{
	width: auto;
	margin: 0 0 0 0;
}
html.sp .contact .contact-block .contact-col{
	display: block;
}
html.sp .contact .contact-block .contact-col.col2 .name{
	display: block;
	width: auto;
	vertical-align: top;
}
html.sp .contact .contact-block .contact-col.col2 .inputbox{
	display: block;
	width: auto;
	vertical-align: middle;
}
html.sp .contact .contact-block .contact-col.col4{
	padding-bottom: 8px;
}
html.sp .contact .contact-block .contact-col.col4 .name{
	display: block;
	width: auto;
	vertical-align: middle;
}
html.sp .contact .contact-block .contact-col.col4 .inputbox{
	display: block;
	width: 100%;
	vertical-align: middle;
	margin-bottom: 10px;
}
html.sp .contact .contact-block .contact-col .name strong{display: block;line-height: 110%;font-weight: normal;padding: 0 0 3px 0;}
html.sp .contact .contact-block .contact-col .name strong .must{color: #ff4343;font-size: 120%;padding: 0 0 0 3px;}
html.sp .contact .contact-block .contact-col .name .eng{display: block;line-height: 110%;color: #a7a8aa;padding-left: 0;}
html.sp .contact .contact-block .contact-col .inputbox input{
	border: #dededf 1px solid;
	outline: none;
	margin: 5px 0 0 0;
	padding: 7px 0 6px 0;
	line-height: 110%;
	text-indent: 10px;
	font-size: 14px;
	-webkit-appearance: none;
	border-radius: 0;
}
html.sp .contact .contact-block .contact-col.col2 .inputbox input{width: 100%;}
html.sp .contact .contact-block .contact-col.col4 .inputbox input{width: 100%;}

html.sp .contact .contact-body{
	padding: 20px 0 18px 0;
	border-bottom: #dededf 1px solid;
}
html.sp .contact .contact-body .name strong{display: block;line-height: 110%;font-weight: normal;padding: 0 0 3px 0;}
html.sp .contact .contact-body .name strong .must{color: #ff4343;font-size: 120%;padding: 0 0 0 3px;}
html.sp .contact .contact-body .name .eng{display: block;line-height: 110%;color: #a7a8aa;padding-left: 0;}
html.sp .contact .contact-body .inputbox textarea{
	border: #dededf 1px solid;
	outline: none;
	margin: 8px 0 0 0;
	padding: 7px 0 6px 0;
	line-height: 110%;
	font-size: 14px;
	width: 100%;
	-webkit-appearance: none;
	border-radius: 0;
}

html.sp .contact .contact-send{margin: 20px 40px 0 40px;width: auto;}
html.sp .contact .contact-send input{
	margin: 0;
	padding: 0 0 0 0;
	border: none;
	background-color: #424344;
	text-align: center;
	color: #fff;
	font-size: 15px;
	letter-spacing: 0.1em;
	font-weight: normal;
	line-height: 50px;
	height: 50px;
	width: 100%;
	cursor: pointer;
	-webkit-appearance: none;
	border-radius: 0;
}

html.sp .contact .error{
	display: block;
	color: #ff4343;
	font-size: 10px;
}


html.sp .contact h1 {
	display: none;
} 

html.sp .contact-block table {
  width: 100% !important;
}

html.sp .contact-block table td {
  display: block !important;
  width: 100% !important;
  text-align: center;
}

html.sp .contact-block table td img {
  max-width: 100%;
  height: auto;
}




/* =Footer
-------------------------------------------------------------- */
html.sp .footer{
	background-color: #a7a8aa;
	width: 100%;
}
html.sp .footer .footer-in{
	text-align: center;
	color: #fff;
	padding: 18px 0 12px 0;
}
html.sp .footer .footer-logo{
	width: 99px;
	height: 15px;
	margin: 0 auto;
}

html.sp .footer .footer-logo a{
	width: 99px;
	height: 15px;
  background: url(../img/footer_logo.png) left top no-repeat;
  background-size: 99px 15px;
}

html.sp .footer .footer-address{
	margin: 12px 0 0 0;
	color: #fff;
	line-height: 160%;
	font-size: 10px;
}
html.sp .footer .footer-address a{line-height: 160%;}


/* =Thanks.html
-------------------------------------------------------------- */
html.sp body.thanks .main{
	width: auto;
	margin: 0 40px 0 40px;
	padding: 100px 0 100px 0;
}
html.sp body.thanks .thanks-title{
	margin-bottom: 20px;
	font-size: 15px;
}
html.sp body.thanks p{font-size: 13px;}