* {min-height:0; min-width : 0; margin: 0; padding: 0;  letter-spacing: 1px;}


body {
	background: #F0F0F0;
	font-family:Roboto,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro',游ゴシック体, 'Yu Gothic', YuGothic,  メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-weight: normal;
/* 	overflow-x: hidden; */
	color: #1e1e1e;
}


html.active {
	overflow: hidden;
	height: 100%;
}

body.active {
	overflow: hidden;
		height: 100%;
}

header.active  {
	position: fixed;
	z-index: 9999;
}

a{
	color:#1e1e1e;
	text-decoration: none;
	
}


body.active {
	overflow: hidden;
  width: 100%;
  height: 100%;
  overflow: hidden;

}


#wrap {
	width:100%;
	max-width:  1020px;
	margin: auto;
	overflow-x: hidden;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  width:calc(100% - 60px);
  max-width:960px;
  margin:0 auto 105px;
  height: 100%;
}

#btn {
	border: 2px #1e1e1e solid;
	font-weight: 700;
	width: 300px;
	height: 60px;
	display: block;
	text-align: center;
	vertical-align: middle;
	color: #1e1e1e;
	text-decoration: none;
	line-height: 60px;
	margin: 60px auto 120px;
	font-size: 14px;
	position: relative;
}

#btn.back span {
	overflow: visible;
	background: url(../img/btn_arrow_left.svg) center left no-repeat;
	background-size:6px 12px;
	padding: 0 20px;
}

#btn.load span {
	overflow: visible;
	background: url(../img/btn_arrow_right.svg) center right no-repeat;
	background-size:6px 12px;
	padding: 0 20px;
}




#btn span::after {
	content: "";
	position: absolute;
	display: block;
	background: #000;
	height: 0%;
	width: 100%;
	top: 0px;
	transition: 0.1s ease-out;
	z-index: -1;
	
}

#btn:hover span::after {
height: 100%;
}

#btn:hover span{
	color: #FFF;
}

#btn.load:hover span{
	color: #FFF;
	background: url(../img/btn_arrow_right_w.svg) center right  no-repeat;
	background-size:6px 12px;
}

#btn.back:hover span{
	color: #FFF;
	background: url(../img/btn_arrow_left_w.svg) center left  no-repeat;
	background-size:6px 12px;
}

#btn:hover {
	cursor: pointer;
}






#pagetop {
	position: fixed;
	right: 50px;
	bottom:50px;
	display: block;
	z-index: 9997;
	transition: all 0.2s ease-out;
	
}

#pagetop:hover {
	bottom:54px;
}


#pagetop  img{
	width: 42px;
	height: auto;
}


.item {
	
  width: calc(100% / 3 - 20px);
  height: 300px;
  margin: 0 30px 30px 0;
  z-index: 1;
  background: #FFF;
  position: relative;
  transition: .25s ease-in-out;
/*
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  -ms-transition: .3s ease-in-out;
*/

}

.over  {
    position:absolute;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width:  calc(100% );
    height: 0;
    margin: 0 auto;
    background-color: #000;
    transition: .25s ease-in-out;
/*
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    -ms-transition: .25s ease-in-out;
*/
}

.item:hover .over {
  height: 100%;
  position: absolute;
}

.item:hover .item-text p{
	color: #FFF;
	transition: .2s ease-in-out;
/*
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    -ms-transition: .2s ease-in-out;
*/
}


.item-image{
	display: flex;
    justify-content: center;
    align-items: center;
	height: 180px;
	overflow: hidden;
}

.item-image img{
	width: 300px;
	height: 180px;
	z-index:10; 
}


.item-text p{
	font-weight: bold;
	padding: 15px 20px 0;
	position: relative;	
	font-size: 14px;
	z-index: 2;
}

.item-text .date{
	font-weight: normal;
	position: absolute;
	right: 20px;
	bottom: 20px;
	display: block;
	font-size: 12px;
	color:#969696;
	padding-left: 20px;
	background-image: url(../img/time.svg);
	background-repeat: no-repeat;
	overflow-x: visible;
	background-size: 14px;
	background-position: center left;
	z-index: 10;
}




header {
	width: 100%;
	height: 120px;
	margin: auto;
	display: flex;	
	align-items: center;
}

header h1 {
	width: 248px;
	height: auto;
	display: flex;	
	align-items: center;
	margin-left: 60px;
	z-index: 9999;
}

header h1 img{
	width: 248px;
	height: auto;
	z-index: 9999;
	display: block;
}

header #main-nav  {
	width: 100%;
	float: right;
}


header nav ul {
	list-style: none;
	font-size: 14px;
	float: right;
	margin-right: 60px;
	font-weight: 700;
}

header nav ul li {
	display: inline-block;
	margin-right: 30px;
	position: relative;

}

header nav ul li:last-child {
	margin-right: 0px;
}


header nav ul li.icon img{
	width: 16px;
}

header nav ul .line a:after {
background-color: #1e1e1e;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
  width: 0%;
  height: 0px;
  bottom: -4px;
}

header nav ul .line .active:after {
  width: 100%;
  height: 2px;
}

header nav ul .line a:hover:after{
  width: 100%;
  height: 2px;	
	
}




.slick-slider .bx-pager {
	padding-top:0px;
	bottom:20px;
}

.slick-slider .bx-pager.bx-default-pager a {
	margin: 0 12px;
	color: #969696;
}

.slick-slider .bx-pager.bx-default-pager a:hover, .slick-slide .bx-pager.bx-default-pager a.active, .slick-slide .bx-pager.bx-default-pager a:focus {
	color: #1e1e1e;
}

.slick-slider .bx-controls-direction a {
width: 40px;
height: 40px;
margin-top:-20px;
z-index: 999;
}

.slick-slider .slick-prev{
	background:url(../img/arrow_prev.svg) no-repeat;
    transition: all .1s ease-out;

}

.slick-slider .slick-prev:hover{
	background:url(../img/arrow_prev_h.svg) no-repeat;
	animation: rotate .2s;  
}

.slick-slider .slick-next{
	background:url(../img/arrow_next.svg) no-repeat;
    transition: all .1s ease-out;
}

.slick-slider .slick-next:hover{
	background:url(../img/arrow_next_h.svg) no-repeat;
	animation: rotate .2s;  
}


@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); } 
}



#data {
	display: flex;
	flex-wrap: wrap;
	margin: 30px auto 0;
	
}

#text {
	width: calc(100% - 33% - 120px);
	max-width: 630px;
	background: #FFF;
	padding: 30px;
	margin-left: 30px;
}

#text #category {
	font-size: 12px;
	color: #969696;
	font-weight: 500;
}

#text h2 {
	font-size:22px;
	line-height: 1.3em;
	margin: 30px 0 10px;
}

#text .link {
	background: url(../img/icon_link.svg) no-repeat left center;
	background-size: 10px 10px;
	width: auto;

}

#text .link a{
	margin-left: 20px;
	font-size:14px;
	text-decoration: none;
	color: #1e1e1e;
	font-weight:400;
	height: auto;
  transition: all .1s ease;
  -webkit-transition: all .1s ease;
	position: relative;
	display: inline;

}

#text .link a:hover{
	opacity: 0.5;
}



#text p{
	font-size: 14px;
	margin-top: 40px;
	line-height: 1.85em;
	color: #1e1e1e;
}


#spec {
	width: calc(100% - 67% - 90px);
	height: auto;
	padding:30px;
	background: #FFF;
	margin-left: 30px;
}

#spec dl {
	list-style: none;
	font-size: 12px;
	display:inline-block;
	width: auto;
}

#spec dl dd {
margin-bottom: 1em;
}

#spec dl dt{
	color: #969696;
	font-weight: 700;
	margin-bottom: 3px;
}

#images {
	margin: 30px 30px 0;
	width: calc(100% - 60px);
	height: auto;
}

#images div{
	margin-bottom: 30px;
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
}

#facebook #images{
display: flex;
flex-wrap: wrap;
}



#facebook #images div{
	margin: 0px 30px 30px 0;
	width: calc(100% / 3 - 20px);
	height: auto;
	position: relative;
	overflow: hidden;
}


#facebook #images div:nth-child(3n) {
	margin-right: 0px;	
}


#images img{
	position: relative;
	width: 100%;
	height: auto;
	}



/*
nav#category {
	width: 100%;
	max-width: 960px;
	height: auto;
	margin: 50px a;
	font-size: 0;
}
*/

footer{
	position: relative;
	width: 100%;
	margin: auto;
	background: #FFF;
}


footer div{
	width: 100%;
	max-width: 960px;
	margin: auto;
	font-size: 12px;
	padding: 30px 0 60px;
	position: relative;
}
.item:nth-child(3n) {
	margin-right: 0px;	
}


#select {
	width: 100%;
	max-width: 960px;
	margin: 0 auto 0 auto;
	padding: 0 ;
	display: block;
	font-weight: 500;
	
	
}

#select ul{
	list-style: none;	
	font-size:0;
	display: block;
}

#select ul li {
	display: inline-block;
	font-size:14px;
	margin: 50px 30px 50px 0;
	font-weight: 500;
	line-height: 200%;

}


#select ul li a{
	color: #969696;
	background-image:none !important;
	background-image: url(../img/no_check.svg) !important;
	background-position: left center;
	background-repeat: no-repeat;
	padding-left: 18px;
	background-size:12px;
	
}


#select ul li .current{
	color: #1E1E1E;
	background-image:none !important;
	background-image: url(../img/check.svg) !important;
	background-position: left center;
	background-repeat: no-repeat;
	padding-left: 18px;
	background-size:16px;
	
}

#select ul li a:not(.current):hover{
	color: #1E1E1E;
	background-image: url(../img/no_check_bk.svg) !important;
	cursor: pointer;

}


#selectbox {
	display: none;
}


/* スライダー */
#slide {
	width: 100%;
	max-width: 960px;
	margin: auto;
}
slick-slide {/*reset*/
	position: relative;
	margin: 0;
	padding: 0;
	box-shadow: none;
	border: none;
	*zoom: 1;
	
}

.slick-slider img {
	width: 100%;
	max-width: 960px;
	height: auto;/*auto又は100%に指定・縦横比を維持する*/
	display: block;
}

.slick-arrow {
	width: 40px;
	height: 40px;
	display: block;
	position: absolute;
	z-index: 100;
	top:calc(50% - 20px);
	border-radius: 20px;
}

.slick-slider .slick-prev {
	left:-20px;
}

.slick-slider .slick-next {
	right:-20px;
}


@media ( max-width : 960px ){
footer p {
	margin-left: 30px;
	width: auto;
}


#pagetop {
	right:30px;
}

.slick-slider .slick-prev {
	left:10px;
}

.slick-slider .slick-next {
	right:10px;
}

header h1 {
	margin-left: 30px;
}

header nav ul {
	margin-right: 30px;
}



}


/* 3カラム */
@media ( min-width : 871px ){

#nav_icon,#nav_icon span{
	display: none;
}

header nav ul,#select ul{
    display: block;
 }
 
.pull {
	display: none;
}

#main_img img{
	width: calc(100% - 60px);
	margin-left: 30px;
}

#select {
	margin-left: 30px;
}

}




/* 2カラム */
@media ( max-width : 870px ){
#wrap {
	max-width: 840px;
}

#main_img img{
	width: 100%;
	margin-left: 0px;
}






.grid {
}

.item{
    width:calc(100% / 2 - 15px);
  }

.item:nth-child(3n) {
	margin-right: 30px;	
}

.item:nth-child(2n) {
	margin-right: 0px;	
}

.item-image {
	width: auto;
	max-width: 100%;
	height: calc(100% / 2px);
}

.item-image img{
	width: auto;
	height: auto;
	max-width: 100%;
}


#nav_icon {
	display: inline-block;
}

header nav ul {
	display:block
	}

  
#select {
	  width: calc(100% - 60px);
	  max-width: 840px;
	  position: relative;
}
  
  
 #selectbox{
	margin: auto;
	width: 100%;
	max-width: 840px;
	height: 40px;
	background: #FFF;
	border: 2px #000 solid;
	display: block;
	box-sizing:border-box;
	margin: 50px 0;
	line-height: 230%;
	color: #1e1e1e;
	text-decoration: none;
	background: transparent;
    border: 2px solid #000;
    box-sizing:border-box;
    display: block;
    height: 40px;
    position: relative;
	background: url('../img/icon_cate.svg') no-repeat center left;
	background-size: 12px;
	background-position-x: 10px;
	text-indent: 30px;
	
  }
  
  #selectbox .pull {
	  width: 16px;
	  height: 8px;
	  background: url('../img/icon_pull.svg') no-repeat;
	  display: inline-block;
	  position: absolute;
	  top:16px;
	  right: 15px;
	  transition: transform 0.2s ease-out;
  }
  
  #selectbox .active {
transform: rotate(180deg);
top:14px;
}
  



#select ul{
position: absolute;
display: none;
width: 100%;
height: auto;
background: black;
z-index: 999;
top: 39px;
left: 0px;
display: none;
}

#select ul li{
top:0px;
left: 0px;
background: #FFF;
width: calc(100% / 2);
box-sizing: border-box;
border: 1px solid #000;
margin: 0;
height: 40px;
}

#select ul li a{
	width: calc(100% - 15px);
	height: 40px;
	display: block;
	line-height: 2.9em;
	text-indent: 20px;
	background-position-x: 20px;
}

#select ul li .current{
	width: calc(100% - 15px);
	height: 40px;
	display: block;
	line-height: 2.9em;
	text-indent: 20px;
	background-position-x: 20px;
}


#select ul li:first-child{
width: 100%;
border-left:2px solid #000;
}


#select ul li:nth-child(odd){
border-right:2px solid #000;
}

#select ul li:nth-child(even){
border-left:2px solid #000;
}


#select ul li:nth-last-child(1){
border-bottom:2px solid #000;
}

#select ul li:nth-last-child(2){
border-bottom:2px solid #000;
}

  
#data {
	flex-direction:column;
	position: relative;
}

#text {
	width: calc(100% - 120px);
	max-width: 810px;
}



#spec {
	width:calc(100% - 120px);
	height: auto;
	padding:30px;
	background: #FFF;
	margin-left: 30px;
	position: relative;
}


#spec dl:before {

	
}


#spec {
order: 3;
}


#images {
order: 2;
}


}



@media ( max-width : 768px ){/* メニュー変更 */

header nav ul {
	display:none;
}


#main-nav ul{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background: #1e1e1e;
	z-index: 1000;
	top: 0;
	left: 0;
	text-align: center;
}


#main-nav ul li{
display: block;
width: 100%;
color: #FFF;
font-size: 18px;
margin-bottom: 40px;
}

#main-nav ul li a{
color: #FFF;
}

#main-nav ul li:first-child{
margin-top: 160px;
}

#nav_icon {
	display: none;
	float: right;
	margin-right: 30px;
}

#nav_icon,
#nav_icon span {
  display: inline-block;
  transition: all .2s;
  box-sizing: border-box;
}
#nav_icon {
  position: relative;
  width: 24px;
  height: 24px;
  z-index: 9999;
}
#nav_icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #000;
}
#nav_icon span:nth-of-type(1) {
  top: 0;
}
#nav_icon span:nth-of-type(2) {
  top: 10px;
}
#nav_icon span:nth-of-type(3) {
  bottom: 0;
}

#nav_icon span:nth-of-type(2)::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 4px;
  background-color: #000;
  transition: all .2s;
}

#nav_icon span:nth-of-type(2)::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 4px;
  background-color: #000;
  transition: all .2s;
}
.active #nav_icon span:nth-of-type(1) {
  transform: translateY(20px) scale(0);
  background: #FFF;
}
.active #nav_icon  span:nth-of-type(2) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
    background: #FFF;
}
.active #nav_icon span:nth-of-type(2)::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
    background: #FFF;
}
.active #nav_icon  span:nth-of-type(3) {
  transform: translateY(-20px) scale(0);
    background: #FFF;
}

#select ul{
position: absolute;
display: none;
width: 100%;
height: auto;
background: black;
z-index: 5000;
top: 39px;
left: 0px;
}

#select ul li{
top:0px;
left: 0px;
background: #FFF;
width: calc(100%);
box-sizing: border-box;
border: 2px solid #000;
border-bottom:1px;
margin: 0;
height: 40px;
}

#select ul li a{
	width: calc(100% - 15px);
	height: 40px;
	display: block;
	line-height: 2.9em;
	text-indent: 20px;
	background-position-x: 20px;
}

#select ul li .current{
	width: calc(100% - 15px);
	height: 40px;
	display: block;
	line-height: 2.9em;
	text-indent: 24px;
	background-position-x: 22px;
}

#select ul li:first-child{
border-top:1px solid #000;
}


#select ul li:last-child{
border-bottom:2px solid #000;
border-top:0px;
}
.non {
	display: none;
}


}


@media ( max-width : 680px ){
.item-image {
	width: auto;
	max-width: 100%;
	height: auto;
}


.item-image img{
	width: auto;
	height: auto;
	max-height: 100%;
}


#facebook #images div{
	margin: 0px 20px 20px 0;
	width: calc(100% / 2 - 10px);
}


#facebook #images div:nth-child(3n) {
	margin-right: 20px;	
}


#facebook #images div:nth-child(2n) {
	margin-right: 0px;	
}


}


 
/* 1カラム */
@media ( max-width : 425px ){
body {
	overflow-x:hidden;
}

#btn {
	width: 100%;
}

header h1 img{
	width: 206px;
	z-index: 9999;
}

header {
	height: 80px;
}

#wrap {
	width:100%;
	max-width: 768px;
	
}

.item{
    width:calc(100%);
    height: 335px;
    margin-right: 0;
    
  }

.item:nth-child(1) {
	margin-right: 0px;	
}

.item:nth-child(3n) {
	margin-right: 0px;	
}

.item:nth-child(2n) {
	margin-right: 0px;	
}

.item-image{
	width: 100%;
	height: auto;
}

.item-image img{
	width: 100%;
	min-width: 335px;
	height: auto;
}

.over  {
    position:absolute;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width:  0;
    height: 0;
    margin: 0 auto;
    background-color: transparent;
}

.item:hover .over {
  height: 0;
  position: absolute;
}

.item:hover .item-text p{
	color: #1e1e1e;

}


#text {
	width:calc(100% - 60px);
	margin-left: 0;
}

#text p  {
	width:calc(100% - 60px);

}

#text .link a {
	width:calc(100% - 240px);

}


#btn {
	width: calc(100% - 60px);
}


#spec {
	width:calc(100% - 60px);
	margin-left: 0;
}




}