@charset "utf-8";
/*--------------------------------------------------------------------
   base
---------------------------------------------------------------------*/
body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

html, body{height: 100%;}
body{
    background:#fff;
	text-align:center;
	color:#555555;
	font-size:15px;
    font-family:"Lato","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-weight:400;
}

input{
    font-family:"Lato","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-weight:400;
}

@media all and (-ms-high-contrast:none) {
	body {
		font-family: "メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	}
}

/*
400,700
*/

html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

.iphone body,
.ipad body,
.ipod body{
	cursor:pointer;
}
a{
	text-decoration: none;
  transition: all 0.8s;
}
a:link{ 
	color:#555555;
    text-decoration:none;
    
    }
a:visited{color:#555555;}
a:active{color:#555555;}
a:hover{color:#777777; }

strong{font-weight:bold;}
img{font-size:0; line-height:0;}

/*-------loading
----------------------*/  
#loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index:999999;
 }
 
#loading{
	background:url("../images/logo.svg") center center no-repeat;
	background-size: contain;
	width: 200px;
	height: 200px;
	max-width: 80%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
  }

/*--------------------------------------------------------------------
   header
---------------------------------------------------------------------*/
body.drawer-opened{overflow: hidden;}
header{
    width:1100px;
    max-width:100%;
    margin:0 auto;
    height:125px;
    position:relative;
}
header h1,
header .logo{
    width:125px;
    height:69px;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    
}
header h1 a,
header .logo a{
    display:block;
    background:url(../images/logo.svg) 50% 50% no-repeat;
    background-size:contain;
    width:100%;
    height:100%;
    overflow:hidden;
    white-space:nowrap;
    text-indent:101%;
    line-height:0;
    font-size:0.1em;
}

header nav{ overflow:hidden;}
header nav ul{
    overflow:hidden;
    text-align:center;
    padding-top:30px;
}

header nav ul.gnav01{
    width:50%;
    float:left;
    padding-right:50px;
    text-align:right;
    
}
header nav ul.gnav02{
    width:50%;
    float:right;
    padding-left:50px;
    text-align:left;
}

header nav li{
    display:inline-block;
    font-size:0.933em;
    height:70px;
    text-align:center;
}
header nav ul.gnav01 li{margin-right: 4.2em;}
header nav ul.gnav02 li{margin-left: 4.2em;}
header nav li a{
	display:block;
    line-height:70px;
}

#spmenu{display:none;}
#menubtn{display:none;}

#humberger,
#drawernav,
#overlay{display:none;}


/*--------------------------------------------------------------------
   footer
---------------------------------------------------------------------*/
footer{
    margin-top:-1px;
    padding:20px 0 30px;
}
footer .logo{
    width:125px;
    height:69px;
    overflow:hidden;
    margin:0 auto 15px;
    
}
footer .logo a{
    display:block;
    background:url(../images/logo.svg) 50% 50% no-repeat;
    background-size:contain;
    width:100%;
    height:100%;
    overflow:hidden;
    white-space:nowrap;
    text-indent:101%;
    line-height:0;
    font-size:0.1em;
}

footer nav ul{text-align: center;}
footer nav ul li{
    display:inline-block;
    font-size:0.800em;
    line-height:3.5;
	letter-spacing: 0.02em;
    vertical-align:middle;
    margin:0 1.57em;
}
footer nav ul li a,
footer nav ul li a:link,
footer nav ul li a:visited{color:#999;}
footer nav ul li a:hover{color:#adadad;}

footer .insta{
    width:38px;
    height:38px;
    overflow:hidden;
    margin:0 auto 10px;	
}
footer .insta a{
    display:block;
    background:url(../images/ico_insta.svg) 50% 50% no-repeat;
    background-size:18px auto;
    width:100%;
    height:100%;
    overflow:hidden;
    white-space:nowrap;
    text-indent:101%;
    line-height:0;
    font-size:0.1em;
}
footer .insta a:hover{opacity: 0.8;}

footer p.ad{
    color:#999999;
    font-size:0.800em;
    text-align:center;
    }

footer p.ad a{ color:#999999 !important; text-decoration:underline !important;}

footer p.copy{
    color:#999999;
    font-size:0.800em;
    text-align:center;
    }
footer p.copy a{ color:#999999 !important;}

/*--------------------------------------------------------------------
   maintitle
---------------------------------------------------------------------*/
#mainTitle{
	margin-bottom: 20px;
	padding: 1.7em 0;
}
#mainTitle h1{
	text-align: center;
	font-size: 2.333em;
	letter-spacing: 0.02em;
	color: #666;
}

/* mainimage
---------------------------------------------------------*/
#mainImage{
    max-width:100%;
    position:relative;
	}
#mainImage ul{position: relative; z-index: -1;}
#mainImage li .inner{
    width:100%;
	padding-top: 640px;
    margin:0 auto;
    overflow:hidden;
    position:relative;
}

#mainImage li .mainImg{
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

#mainImage .bx-prev,
#mainImage .bx-next{ display:none;}

@media screen and (max-width: 1079px) {
	#mainImage li .inner{padding-top: 59.25%;}
}

#mainImage > p{
	width: 1080px;
	max-width: 100%;
	padding-left: 50px;
	padding-right: 50px;
	height: 2.5em;
	text-align: right;
	color: #fff;
	font-size:2.933em;	
	font-family: europa,"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-weight: 700;
	font-style: normal;	
	line-height: 1.5;
	position: absolute;
	left: 0;
	right: 0;
	top: 56.25%;
	margin: 0 auto;
	z-index: 2;
}
#mainImage > p span{
	display: block;
	font-size: 0.545em;
	font-weight: 700;
	text-align: right;
	letter-spacing: 0.23em;
}

/*--------------------------------------------------------------------
   container
---------------------------------------------------------------------*/
/* base
-----------------------*/
div[id="container"] p,
div[id="container"] li,
div[id="container"] dt,
div[id="container"] dd,
div[id="container"] th,
div[id="container"] td{
    line-height:2;
    text-align:left; }

div[id="container"] h2,
div[id="container"] h3,
div[id="container"] h4,
div[id="container"] h5{line-height:1.5;}

/* box
-----------------------*/
#container.toppage{padding-top: 60px;}
#container.toppage section{
	padding-bottom: 60px;
}

/* btn
-----------------------*/
.btn01{
	display: block;
	width: 250px;
	max-width: 100%;
	height: 44px;
	border-radius: 22px;
	margin: 0 auto;
	background-color: #caccc5;
	line-height: 44px;
	text-align: center;
	color: #fff !important;
	font-size: 	0.800em;
	font-weight: bold;
}
.btn01:hover{ background-color: #d5d6d1;}



/* gallery
--------------------*/
.galleryList{
	overflow: hidden;
}
.galleryList .item{
	width: 31.48%;
	margin-right: 2.78%;
	padding-bottom: 30px;
	float: left;
}

.galleryList .item.nth03{margin-right: 0;}

.galleryList .item a{
	display: block;
	text-align: left;
}
.galleryList .item a .thumb{
	display: block;
	padding-top: 70%;
	position: relative;
	overflow: hidden;
}
.galleryList .item a .thumb img{
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.galleryList .item a h3{
	padding-top: 10px;
	padding-bottom: 5px;
	font-weight: bold;
	font-size: 	0.867em;
}

.galleryList .item a span{
	display:block;
	font-size: 0.667em;
	color: #999999;
}
.galleryList .item a span::before{
	content: "-";
	margin-right: .5em;
}
.galleryList .item a p{display: none;}

/*fancyBox*/
.itemIn{display: none;}
.itemIn{
	width: 90%;
	max-width: 650px;
	padding: 40px;
}
.itemIn .photo,
.itemIn .txt{
	width: 850px;
	max-width: 100%;
	margin: 0 auto;
}

.itemIn .tit{
	padding-top: 20px;
	padding-bottom: 10px;
	text-align: left;
	font-weight: bold;
	font-size: 	1.333em;	
}


.itemIn span{
	display:block;
	padding-bottom: 15px;
	font-size: 	0.867em;
	color: #999999;
}
.itemIn span::before{
	content: "-";
	margin-right: .5em;
}
.itemIn p{
	text-align: left;
	font-size: 0.867em;
}


/* toppage
---------------------------------------------------------*/
/* common
--------------------*/
#container.toppage section h2{
	text-align: center;
	font-size: 1.867em;
	margin: 10px 0 40px;
}

/* topNews
--------------------*/
#container.toppage section#topNews,
#container.toppage section#topGallery,
#container.toppage section#topBnr,
#container.toppage section#topPhoto{
	width: 1180px;
}

#topNews ul{
	margin-bottom: 40px;
	overflow: hidden;
}

#topNews ul li{
	width: 25%;
	float: left;
	border-left: #cbcbcb 1px solid;
	padding-left: 1.85%;
	padding-right: 2.77%;
}
#topNews ul li span.date{
	display: block;
	padding-bottom: 10px;
	color: #b6b6b6;
	font-weight: bold;
	font-size: 	0.800em;
}
#topNews ul li p{
	font-size: 0.933em;
	font-weight: bold;
	line-height: 1.71;
}
/* topBnr
--------------------*/
#topBnr ul{
	overflow: hidden;
	padding-top: 30px;
}
#topBnr ul li{
	width:48%;
	float: left;
}
#topBnr ul li + li{float: right;}
#topBnr ul li a{
	display: block;
	padding-top: 31.9%;
	background-image: url("../images/bn_shoplist.jpg");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
    width:100%;
    height:100%;
    overflow:hidden;
    white-space:nowrap;
    text-indent:101%;
    line-height:0;
    font-size:0.1em;
}

#topBnr ul li + li a{background-image: url("../images/bn_warranty.jpg");}

#topBnr ul li a:hover{opacity: 0.8;}

/* topPhoto
--------------------*/
#topPhoto h2{
	display: inline-block;
	position: relative;
}
#topPhoto h2::after{
	content: "";
	display: block;
	width: 91px;
	height: 28px;
	background: url("../images/tit_insta.svg") 0 0 no-repeat;
	background-size: contain;
	position: absolute;
	top: 30%;
	left:105%;
}
.instaWrap{
	overflow: hidden;
	margin-left: -0.9%;
	margin-right: -0.9%;
}
.instaWrap .photo{
	width:20%;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: 0 0 1.875%;
	float: left;
}
.instaWrap .photo a{
	display: block;
	padding-top: 100%;
	position: relative;
	overflow: hidden;
}
.instaWrap .photo a span.bg{
	display:block;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

/*
.instaWrap .photo a img{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
}*/

/* shoplist
---------------------------------------------------------*/
#container.shoplist section,
#container.warranty section{padding-bottom: 80px;}
#container.shoplist section dl + dl,
#container.warranty section dl + dl{ margin-top: 80px;}
#container.shoplist section dl,
#container.warranty section dl{
	overflow: hidden;
	position: relative;
}
#container.shoplist section dl::before,
#container.warranty section dl::before{
	content: "";
	display: block;
	width: 1px;
	height: 95%;
	background-color: #555;
	position: absolute;
	top: 2.5%;
	left: 0;
}
#container.shoplist section dl dt,
#container.warranty section dl dt{
	width: 240px;
	float: left;
	padding-left: 15px;
}
#container.shoplist section dl dd,
#container.warranty section dl dd{
	margin-left: 240px;
}

#container.shoplist section dl dt {
	font-weight: bold;
	font-size: 	1.200em;
}
#container.shoplist section dl dt span{
	display: block;
	font-size: 0.722em;
}
#container.shoplist section dl dd p{
	padding-bottom: 10px;
}
#container.shoplist section dl dd p a{
	text-decoration: underline;
	margin-left: 1em;
}
#container.shoplist section dl dd p a:hover{text-decoration: none;}

#container.shoplist section dl dd ul li{
	padding-left: 25px;
	position: relative;
}
#container.shoplist section dl dd ul li::before{
	content: "";
	display: block;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 0;
	top: 50%;
}
#container.shoplist section dl dd ul li.tel::before{
	background-image: url( "../images/ico_tel.svg");
	width: 11px;
	height: 21px;
	margin-top: -10px;
	left: 3px;
}

#container.shoplist section dl dd ul li.mail::before{
	background-image: url( "../images/ico_mail.svg");
	width: 17px;
	height: 14px;
	margin-top: -7px;
}

/* warranty
---------------------------------------------------------*/
#container.warranty section h2{
	font-size: 	1.600em;
	font-weight: bold;
	text-align: center;
	margin-bottom: 50px;
}
#container.warranty section h2 + p{
	text-align: center;
	margin-bottom: 40px;
}
#container.warranty section dl dt{
	min-height: 100px;
	font-size: 	1.200em;
	line-height: 1.6;
	font-weight: bold;
}
#container.warranty section dl dt span{
	display: block;
	font-size: 	0.667em;
	letter-spacing: 0.05em;
	font-weight: bold;
}
#container.warranty section dl dt span i{
	font-size: 1.333em;
	font-style: normal;
	font-weight: bold;
	margin-left: 0.2em;
}
#container.warranty section dl dd p + p{margin-top: 15px;}
#container.warranty section dl dd a{text-decoration: underline;}
#container.warranty section dl dd a:hover{text-decoration: none;}

#container.warranty section dl dd ol{
  counter-reset: item;
}
#container.warranty section dl dd ol li{
	padding-left: 1.2em;
	position: relative;
}
#container.warranty section dl dd ol li:before {
  counter-increment: item;
  content: counter(item)'.';
	position: absolute;
	left: 0;
	top: 0;
}

/* news
----------------------------------------------------*/
/* newsList
-----------------------*/
#container .newsIndex ul li + li{margin-top: 50px;}
#container .newsIndex ul li{
	border-left: #d7d7d7 1px solid;
	padding-left: 20px;
}
#container .newsIndex li span.date{
	display: block;
	font-size:0.800em;
	font-weight: bold;
	color: #b6b6b6;
}
#container .newsIndex li p{
	font-size: 1.333em;
	font-weight: bold;
}

/*detailTitle*/

.newsTitle{
	border-left: #d7d7d7 1px solid;
	padding-left: 20px;
	margin-bottom: 40px;
}
.newsTitle span{
	display: block;
	padding-bottom: 15px;
	font-size:0.800em;
	font-weight: bold;
	color: #b6b6b6;
	text-align: left;
}
#container .newsTitle h2{
    text-align:left;
    font-size:1.600em;
	font-weight: bold;
    line-height:1.5; 
}

/*detail*/
.post {padding-bottom:80px;}
.post >img,
.post p img{
    display:block;
    width:100%;
    max-width:740px;
    margin:30px auto;
}
.post h4,
.post h5,
.post h6{
    font-weight:bold;
    text-align:left;
    margin-bottom:20px;
}
.post * + h4{margin-top:50px; font-size: 1.200em;}
.post * + h5{margin-top:20px; font-size: 1.067em;}
.post * + h6 {margin-top:20px;}
.post * + p,
.post * + ul{margin-top: 15px;}
.post p a{text-decoration:underline;}
.post p a:hover{text-decoration:none;}

.post ul li{position:relative; padding-left:1.5em;}
.post ul li::before{
    content:"・";
    position:absolute;
    top:0;
    left:0;
}


/* pager
--------------*/
.pagination{    
    width:1000px;
    max-width:100%;
    margin:0 auto !important;
    text-align:center;
    padding-top:80px;
	padding-bottom: 80px;
}
#container .newsIndex .pagination ul{margin-top:0;}
.pagination li{
    display:inline-block;
    margin:0 4px;
}
.pagination li a,
.pagination li span{
    display:block;
    border:#999999 1px solid;
    background-color:#fff;
    width:28px;
    line-height:28px !important;
    font-size:12px;
    text-align:center;
    color:#000 !important;
    text-decoration:none !important;
}
.pagination li a:hover{ color:#333 !important; background-color:#e8e8e8;}
.pagination li span.dots{border:none; width:auto; color:#333; background:none;}
.pagination li span.current{
    background-color:#333 !important;
    color:#fff !important;
}

/* pager2
--------------*/
.pageNav ul{
	width: 414px;
	max-width: 100%;
	margin: 0 auto;
	padding-bottom: 80px;
    overflow:hidden;
    position:relative;
}
.pageNav ul li{
	width: 26.5%;
    height:50px;
	float: left;	
}
.pageNav ul li + li{margin-left: 10.2%;}

.pageNav ul li a{
    display:block;
    width:100%;
    height:100%;
    border:#bbbbbb 1px solid;
    position:relative;
    line-height:50px;
    font-size:0.813em;
    color:#222;
    text-decoration:none !important;
}
.pageNav ul li a:hover{background-color:#e8e8e8;}
.pageNav ul li.back a{text-align: center;}
.pageNav ul li.prev a{
    text-align:left;
    padding-left:50px;    
}
.pageNav ul li.next a{
    text-align:right;
    padding-right:50px;    
}
.pageNav ul li.prev a::before,
.pageNav ul li.next a::before{
    display:block;
    width:15px;
    height:8px;
    background-position:0 0;
    background-repeat:no-repeat;
    background-size:contain;
    font-size:12px;
    line-height:1;
    font-family:san-serif;
    margin-top:-0.3em;
    position:absolute;
    top:50%;
}
.pageNav ul li.prev a::before{left:15px; content:"←";}
.pageNav ul li.next a::before{right:15px; content:"→";}


/* contact
----------------------------------------------------*/
#container.contact section{
	width: 910px;
}

#container.contact section.thanks h2{
	font-weight: bold;
	text-align: center;
	font-size: 1.500em;
	margin-bottom: 20px;
}

/* form
----------------------------------------------------*/
#form {padding-bottom: 80px;}
#form .formBox{
	width: 660px;
	max-width: 100%;
	margin: 0 auto 30px;
}
#form .formBox dt{
	padding-bottom: 10px;
	font-size: 0.933em;
	font-weight: bold;
}
#form .formBox dt span{
	color: #e30a2c;
	font-size: 0.714em;
	font-weight: bold;
	margin-left: 1em;
}
#form .formBox dd{
	padding-bottom: 25px;
}
#form .formBox input[type="text"],
#form .formBox input[type="email"],
#form .formBox input[type="url"],
#form .formBox textarea{
    background-color:#efeae8;
    padding:10px;
    width:100%;
	border-radius: 10px;
}
#form .formBox textarea{
    height:12em;
}
#form .privacy{margin-bottom: 60px;}
#form .privacy dt{
	font-weight: bold;
}
#form .privacy dt,
#form .privacy dd{
	font-size: 0.933em;
	line-height: 2.14;
}

.btnThanks{ padding-top:10px;}
#form .btn input,
.btnThanks a{
	display: block;
	width: 250px;
	max-width: 100%;
	height: 44px;
	border-radius: 22px;
	margin: 0 auto;
	background-color: #caccc5;
	line-height: 44px;
	text-align: center;
	color: #fff !important;
	font-size: 	0.800em;
	font-weight: bold;
    cursor:pointer;
    
  transition-property:background;
  transition-duration:.8s;
}
#form .btn input:hover,
.btnThanks a:hover{
    background-color: #d5d6d1;
    }

.btnThanks {
	padding-top:60px;
	padding-bottom: 80px;
}




/*----------------------------------------------------
local 
-------------------------------------------------------*/

@media screen and (max-width: 999px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 374px) {
    /*iphone5*/
}

@media screen and (min-width : 1000px){
    .forTB,
	.forSP{display:none;}
	.forPC{display:inherit;}

    .ie8 body{
        min-width:1080px;
        max-width:100%;
        overflow-x:hidden;
    }

}