@charset "utf-8";


/*------------------
official sns 
--------------------*/

/* SP以上 */
@media screen and (min-width : 320px){
#officialsns{
	width:100%;
	text-align: right;
	padding:10px 0 0;
	}

#officialsns a{
	margin:0 10px 0 0;
	}

#officialsns a img{
	height:20px;
	width:20px;
	}
}
/* SP横以上 */
@media screen and (min-width : 480px){
#officialsns{
	width:100%;
	text-align: right;
	padding:20px 0 0;
	}

#officialsns a{
	margin:0 15px 0 0;
	}

#officialsns a img{
	height:30px;
	width:30px;
	}
}
/* Tablet以上 */
@media screen and (min-width : 768px){
}
/* PC以上 */
@media screen and (min-width : 1024px){
#officialsns{
	width:100%;
	text-align: right;
	padding:20px 0 0;
	}

#officialsns a{
	margin:0 15px 0 0;
	}

#officialsns a img{
	height:30px;
	width:30px;
	}
}

/*------------------
toptitle 
--------------------*/

/* SP以上 */
@media screen and (min-width : 320px){
#toptitle{
	width:100%;
	height:auto;
	text-align: center;
	}

#toptitle img{
	width:250px;
	margin:40px 0 60px 0;
	}
}
/* SP横以上 */
@media screen and (min-width : 480px){
#toptitle{
	width:100%;
	height:auto;
	text-align: center;
	}

#toptitle img{
	width:350px;
	margin:70px 0 100px 0;
	}
}
/* Tablet以上 */
@media screen and (min-width : 768px){
}
/* PC以上 */
@media screen and (min-width : 1024px){
#toptitle{
	width:100%;
	height:auto;
	text-align: center;
	}

#toptitle img{
	width:500px;
	margin:70px 0 100px 0;
	}
}

/*------------------
box 
--------------------*/

/* SP以上 */
@media screen and (min-width : 320px){
#box{
	float:none;
	position: relative;
	width:100%;
	height:auto;
	background:#000;
	}
}
/* SP横以上 */
@media screen and (min-width : 480px){
#box{
	float: left;
	position: relative;
	width:50%;
	height:auto;
	background:#000;
	}
}
/* Tablet以上 */
@media screen and (min-width : 768px){
}
/* PC以上 */
@media screen and (min-width : 1024px){
#box{
	float: left;
	position: relative;
	width:50%;
	height:auto;
	background:#000;
	}
}

/*------------------
box ブランク
--------------------*/

/* SP以上 */
@media screen and (min-width : 320px){
#box.blank{
	float: none;
	position: relative;
	width:100%;
	height:20px;
	background:#fff;
	}

#box.dot1{
	float: none;
	position: relative;
	width:100%;
	height:20px;
	background:url(../images/top/dot1.gif) top left;
	}

#box.dot2{
	float: none;
	position: relative;
	width:100%;
	height:20px;
	background:url(../images/top/dot2.gif) top left;
	}
}
/* SP横以上 */
@media screen and (min-width : 480px){
#box.blank{
	float: left;
	position: relative;
	width:50%;
	height:100px;
	background:#fff;
	}

#box.dot1{
	float: left;
	position: relative;
	width:50%;
	height:100px;
	background:url(../images/top/dot1.gif) top left;
	}

#box.dot2{
	float: left;
	position: relative;
	width:50%;
	height:100px;
	background:url(../images/top/dot2.gif) top left;
	}
}
/* Tablet以上 */
@media screen and (min-width : 768px){
}
/* PC以上 */
@media screen and (min-width : 1024px){
#box.blank{
	float: left;
	position: relative;
	width:50%;
	height:100px;
	background:#fff;
	}

#box.dot1{
	float: left;
	position: relative;
	width:50%;
	height:100px;
	background:url(../images/top/dot1.gif) top left;
	}

#box.dot2{
	float: left;
	position: relative;
	width:50%;
	height:100px;
	background:url(../images/top/dot2.gif) top left;
	}
}

.view-first {
	overflow: hidden;
	width: 100%;
	height: auto;
	background:#213135;
	}

img.photo{
	width:100%;
	height: auto;
	}


/* SP以上 */
@media screen and (min-width : 320px){
}
/* SPランドスケープ以上 */
@media screen and (min-width : 480px){
}
/* Tablet以上 */
@media screen and (min-width : 768px){
}
/* PC以上 */
@media screen and (min-width : 1024px){
.view-first img.photo {
	opacity:0.7;
	filter: alpha(opacity=70);
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	-ms-transition: all 1s;
	transition: all 1s;
	-webkit-filter: grayscale(100%);
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: gray;
	}
}


/* SP以上 */
@media screen and (min-width : 320px){
}
/* SPランドスケープ以上 */
@media screen and (min-width : 480px){
}
/* Tablet以上 */
@media screen and (min-width : 768px){
}
/* PC以上 */
@media screen and (min-width : 1024px){
.view-first:hover img.photo {
	opacity:1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1.1,1.1);
	-moz-transform: scale(1.1,1.1);
	-o-transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1);
	transform: scale(1.1,1.1);
	-webkit-filter: grayscale(0%);
	filter: none;
	}
}



/* SP以上 */
@media screen and (min-width : 320px){
.view-first .mask {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	}
.view-first .mask img{
	width: 100%;
	height: auto;
	}
}
/* SPランドスケープ以上 */
@media screen and (min-width : 480px){
}
/* Tablet以上 */
@media screen and (min-width : 768px){
}
/* PC以上 */
@media screen and (min-width : 1024px){
.view-first .mask {
	opacity:0;
	filter: alpha(opacity=0);
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	-ms-transition: all 1s;
	transition: all 1s;
	}
.view-first:hover .mask {
	opacity:1;
	filter: alpha(opacity=100);
	}
.view-first .mask img{
	width: 100%;
	height: auto;
	}
}



/* SP以上 */
@media screen and (min-width : 320px){
#links p.shopsite{
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size:12px;
	letter-spacing:0.1em;
	display: block;
	width:80%;
	background:#000;
	margin:40px auto 40px;
	}

#links p.shopsite a{
	display:block;
	width:100%;
	padding:30px 0;
	color:#fff;
	background:#213135;
	}

#links p.shopsite a:hover{
	background:#cccfc8;
	}
}
/* SP横以上 */
@media screen and (min-width : 480px){
}
/* Tablet以上 */
@media screen and (min-width : 768px){
}
/* PC以上 */
@media screen and (min-width : 1024px){
#links p.shopsite{
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size:16px;
	letter-spacing:0.1em;
	display: block;
	width:400px;
	background:#000;
	margin:40px auto 40px;
	}

#links p.shopsite a{
	display:block;
	width:400px;
	padding:30px 0;
	color:#fff;
	background:#213135;
	}

#links p.shopsite a:hover{
	background:#cccfc8;
	}
}