@charset "utf-8";
@font-face {font-family: Futura; src: url(../fonts/FuturaPTMedium.otf);}


#mvBox { position: relative; overflow: hidden;}
.mvWrapper { }
.mv {position: relative; }
@media screen and (min-width:768px) and (min-height:56.25vw) {
  #mvBox { height: 100vh; width: 100%; }
  .mvWrapper { position: absolute; left: 50%; bottom:0; width:177.78vh ; height: 100%; transform: translateX(-50%);}
  .mv { position: absolute; left: 0; bottom:0; width: 100%; height: 100%;}
}
@media screen and (min-width:768px) and (min-width:177.77vh) {
  #mvBox { height: 100vh; width: 100%; }
  .mvWrapper { position: absolute; left: 50%; bottom:0; width:calc(100% + 15px) ; height: 56.25vw; transform: translateX(-50%);}
  .mv { position: absolute; left: 0; bottom:0; width: 100%; height: 100%;}
}
@media screen and (max-width:767px) {
	#mvBox { height: 100vh; width: 100%; overflow: hidden; min-height: -webkit-fill-available;}
	.mvWrapper {height: 100%;}
	.mv {height: 100%;}
}


#fbnr {position: fixed; z-index: 999; right: 20px; bottom: 20px; background: rgba(0, 0, 0, 0.8); color: #fff; padding: 20px; width: auto; opacity: 1; visibility: visible;  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;}
#fbnr.fbnr-hidden {
  opacity: 0;
  visibility: hidden;
}
#fbnr .inner {align-items: center; margin: 0 auto; width: 100%; justify-content: center;}
@media screen and (max-width: 767px) {
  #fbnr .inner{
    justify-content: flex-start;
  }
}
#fbnr .inner .tit {text-align: center; font-size: 1.5rem; margin-right: 16px;}
#fbnr .inner .tit p{font-size: 12px;}
#fbnr .inner .txt {padding-left: 16px; border-left: 1px solid #fff; font-family: "Shippori Mincho B1", serif; display: flex; align-items: center; display: flex;}
#fbnr .inner .txt p:nth-of-type(1) {font-size: 1.5rem;}
#fbnr .inner .txt p:nth-of-type(2) {font-size: 1.3rem;}
#fbnr .fbnr_link {display: flex;}
@media screen and (max-width: 767px) {
  #fbnr .fbnr_link {display: block;}
}
#fbnrClose {position: absolute; right: 0; top: 5px; width: 16px; height: 16px; cursor: pointer;}
#fbnr .fbnr_arrow{
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 24px;
}
#fbnr .fbnr_arrow::before,
#fbnr .fbnr_arrow::after{
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 6px;
  height: 1px;
  background-color: #fff;
  transform-origin: calc(100% - 0.5px) 50%;
}
#fbnr .fbnr_arrow::before {
  transform: rotate(45deg);
}

#fbnr .fbnr_arrow::after {
  transform: rotate(-45deg);
}
@media screen and (max-width: 767px) {
  #fbnr .fbnr_arrow{
    margin-left: 10px;
  }
}
#fbnrClose:hover {opacity: 1;}
#fbnrClose:before, 
#fbnrClose:after { position: absolute; left: 0px; content: ' '; height: 16px; width: 1px; background-color: #fff;}
#fbnrClose:before {transform: rotate(45deg);}
#fbnrClose:after {transform: rotate(-45deg);}

/* h3 {text-align: center; font-size: 3rem; margin-bottom: 20px; line-height: 1; font-family: 'Futura', sans-serif; font-weight: 300;} */

.m-txt {text-align: center; margin-bottom: 30px;}
.mb120 {margin-bottom: 120px;}

.btnArr {width: 66px; position: absolute; top: 0; right: 10px;}
.btnArr li {width: 28px;}
.btnArr li a {cursor: pointer;}

#news {margin-top: 70px; position: relative;}
#news #lstNews .item {margin: 0 10px;}
#news #lstNews .item a > p {font-size: 1rem; text-decoration: underline; margin-bottom: 10px;}
#news #lstNews .item a .txt {margin-top: 10px;}
#news #lstNews .item a .txt p {font-size: 1.3rem;}
#news #lstNews .item a .txt .date {font-size: 1.1rem; color: #808080;}

#brands #brandsSlider {max-width: 1550px;}
#brands #brandsSlider li {width: 24.78%;}
#brands #brandsSlider li a {position: relative; display: block; overflow: hidden;}
/*#brands #brandsSlider li a:before {position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 8;}*/
#brands #brandsSlider li:hover a:after {background: rgba(0, 0, 0, 0.2);}
#brands #brandsSlider li a span {position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; color: #fff; z-index: 9; text-align: center;}
#brands #brandsSlider li a > img {transition: transform .5s ease;}
#brands #brandsSlider li:hover a > img {transform: scale(1.1);}
#brands #brandsSlider li:nth-of-type(1) a span img {width: 32% !important;}
#brands #brandsSlider li:nth-of-type(2) a span img {width: 39% !important;}
#brands #brandsSlider li:nth-of-type(3) a span img {width: 53% !important;}
#brands #brandsSlider li:nth-of-type(4) a span img {width: 58% !important;}




#products {max-width: 1370px;}
#products h3 {margin-bottom: 60px;}
#products ul {justify-content: flex-start;}
#products ul li {text-align: center; width: 15%; margin-bottom: 50px; margin-right: 6.25%;}
#products ul li:nth-of-type(5n) {margin-right: 0;}
#products ul li .txt {text-align: center; border-top: 1px solid #cacaca; padding-top: 10px;}
#products ul li .txt p:nth-of-type(1) {font-size: 1.9rem; font-family: 'Futura', sans-serif; font-weight: 300;}
/*#products ul li figure {height: 176px; line-height: 176px;}*/

#column {position: relative;}
#column #lstColumn .item {margin: 0 10px;}
#column #lstColumn .item a > p {font-size: 1rem; text-decoration: underline; margin-bottom: 10px;}
#column #lstColumn .item a .txt {margin-top: 10px;}
#column #lstColumn .item a .txt p {font-size: 1.3rem;}
#column #lstColumn .item a .txt .date {font-size: 1.1rem; color: #808080;}
#column .btnMore  {display: block; width: 100%; max-width: 340px; margin: 40px auto 0; border: 1px solid #000; padding: 20px 10px; text-align: center; font-size: 1.5rem;}

.popup {background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 99999;}
.popup .inner {max-width: 1250px; width: 92%; margin: 0 auto; padding: 20px; background: #fff; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 0; right: 0;}
.popup .inner ul li:nth-of-type(1) {width: 46.6%;}
.popup .inner ul li:nth-of-type(2) {width: 46.6%;}
.popup .inner ul li:nth-of-type(2) figure {text-align: center; margin-bottom: 20px;}
.popup .inner ul li:nth-of-type(2) a {display: block; width: 160px; margin: 50px auto 0; border-bottom: 1px solid #aaaaaa; background: url(../img/top/ic_arrow_pop.svg) no-repeat center right 5px; background-size: 14px 11px; transition: all 0.5s;}
.popup .inner ul li:nth-of-type(2) a:hover {background-position: center right;}
.popup .inner .popClose {content: ''; height: 27px; width: 27px; background: url(../img/common/ic_pop_close.svg) no-repeat top left; background-size: 27px; position: absolute; top: 20px; right: 20px; cursor: pointer; z-index: 9;}
.popup .inner .popClose:hover {opacity: 0.8;}

.btn {
	position: absolute;
	left: 0;
	width: 100%;
	margin: 0 auto;
	height: 60px;
	bottom: 0;
}

.arrow {margin: 0 auto; width: 0; height: 20px; border: 1px solid #fff; position: relative; animation: scroll 1.5s infinite; -webkit-animation: scroll 1.5s infinite;}
.arrow::after {
		content: "";
		display: block;
		position: absolute;
		top: 100%;
		left: -5px;
		width: 1px;
		height: 10px;		
		border-top: 10px solid #fff;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
	}
}

@keyframes scroll {
	0% {
		height: 20px;
	}
	30% {
		height: 40px;
	}
	60% {
		height: 20px;
	}
}

@-webkit-keyframes scroll {
	0% {
		height: 20px;
	}
	30% {
		height: 40px;
	}
	60% {
		height: 20px;
	}
}




/* Responsive */

@media only screen and (max-width: 1600px){
	h3 {font-size: 2.5rem;}

	.mb120 {margin-bottom: 60px;}

	#fbnr .inner .tit {font-size: 1.2rem;}
	#fbnr .inner .txt p:nth-of-type(1) {font-size: 1.2rem;}
	#fbnr .inner .txt p:nth-of-type(2) {font-size: 1rem;}
	
}

@media only screen and (max-width: 960px){
	#brands #brandsSlider .slick-slide img {height: 196px;}
	#products ul li a figure {padding: 0;}
}

@media only screen and (max-width: 768px){	

	#brands #brandsSlider li {width: 49%; margin-bottom: 2vw;}
	
	#products ul li .txt p:nth-of-type(1) {font-size: 1.6rem;}

	#column #lstColumn .item {width: 48%; margin-bottom: 20px;}	
}


@media only screen and (max-width: 767px){
	#fbnr {max-width: 100%; width: 100%; left: 0; bottom: 0; padding: 20px 10px; border-radius: 0;}
	#fbnr .inner {padding-left: 10px;}
	#fbnr .inner .tit {width:fit-content; margin-bottom: 10px; text-align: left; border-bottom: 1px solid #fff; padding-bottom: 10px;}
	#fbnr .inner .tit p br {display: none;}
	#fbnr .inner .txt {padding-left: 0; margin-left: 0; border: 0; width: 100%;}
	

	.btnArr {width: 45px;}
	.btnArr li {width: 20px;}

	#products ul li a figure {padding: 0 25px;}
	#products ul li {width: 30%; margin-bottom: 20px; margin-right: 5%;}
	#products ul li:nth-of-type(5n) {margin-right: 5%;}
	#products ul li:nth-of-type(3n) {margin-right: 0;}

	#brands .m-txt {text-align: left;}

	.popup .inner {height: 60%; overflow-y: scroll;}
	.popup .inner ul li:nth-of-type(1) {width: 100%; order: 2; text-align: center;}
	.popup .inner ul li:nth-of-type(2) {width: 100%; order: 1; margin-bottom: 20px;}
	.popup .inner ul li:nth-of-type(2) a {margin-top: 20px;}

}

@media only screen and (max-width: 480px){
	#news #lstNews {max-width: 100%; width: 100%; margin: 0 auto;}
	#news #lstNews .item figure img {width: 100%;}
	
	#products ul li {width: 46%; margin-right: 4%;}
	#products ul li:nth-of-type(5n) {margin-right: 4%;}
	#products ul li:nth-of-type(3n) {margin-right: 4%;}
	#products ul li:nth-of-type(2) {margin-right: 0;}

	#column #lstColumn {max-width: 100%; width: 100%; margin: 0 auto;}
	#column #lstColumn .item figure img {width: 100%;}

}