@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
 
body {
     font-family: 'Noto Sans Japanese', sans-serif;
     font-size: 100%;
}
a:hover{
  opacity:1;
  transition:.2s;
}
a:hover{
  opacity:0.5;

}
#fixed {
    position: fixed;
    top: 0;
    width: 100%;
    height: 70px;
    box-sizing: border-box;
    padding-top: 10px;
    background: rgba(255,255,255,0.8);
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    z-index: 1000;
}
#fixed .logo{
  margin:0 30px;
}

#hamburger{
    position: absolute;
    right: 25px;
    top: 35px;
}
.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.menu-trigger {
	position: relative;
	width: 32px;
	height: 25px;
	cursor:pointer;
}
.menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #000;
}
.menu-trigger span:nth-of-type(1) {
	top: 0;
}
.menu-trigger span:nth-of-type(2) {
	top: 11px;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 0;
}

.menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-11px) rotate(45deg);
	transform: translateY(-13px) rotate(45deg);
}
#blind_menu{
    width: 100%;
    position: absolute;
    height: calc(100vh - 107px);
    top: 102px;
    right: -100%;
    background: rgba(255,255,255,0.8);
    overflow: hidden;
    transition: .4s;
}

#blind_menu.open_menu{
    right:0px;
}
#menu_list_sp{
    position:absolute;
    width:100%;
    height:420px;
    top:calc( 45% - 210px);

}
.menu_item{
    font-size:20px;
    font-weight:bold;
    line-height: 48px;
    text-align: center;
    z-index:10000;
}

.menu_item a{
    display:inline-block;
    letter-spacing:12px;
}
.menu_item a:hover{
    letter-spacing:14px;
}

.menu_item a:link { color: #000; }
.menu_item a:visited { color: #000; }
.menu_item a:hover { color: #000; }
.menu_item a:active { color: #000; }

#social{
	text-align: center;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
#social img{
	margin-left: 5px;
	margin-right: 5px;
}
#section_1st{
  margin: 86px auto 100px;
  width: 100%;
  max-width:1600px;
  height: 43.75vw;
  max-height: 700px;
  posiiton:relative;
}
#section_1st #frame{
    width: calc( 100% - 20px );
    position: absolute;
    left: 10px;
    top: 115px;
    height: calc( 100% - 172px );
    border: 1px solid #000;
    z-index: 200;
    pointer-events : none;
}
#section_1st .pc_visible{
width:100%;
height:100%;
}
#section_1st .top_list{
  width:80%;
  margin:auto;
}
.bx-wrapper, .bx-viewport{
width:100%;height: 100% !important;
}
.bx-controls{
  position:relative;
}
.bx-controls-direction{
    position: absolute;
    top: -25vw;
    z-index: 100;
    width: 98%;
    left: 1%;
}
.bx-pager{
  text-align:center;
}
.bx-pager-item{
  display:inline;
}
.bx-pager-item a{
   width:35px;
   height:6px;
   margin:3px;
   border:0.5px solid #000;
   box-sizing:border-box;
   display:inline-block;
   overflow:hidden;
   text-indent:-100%;
}
.bx-pager-item a.active{
   background:#000;
}

.bx-prev{
    position:absolute;
    display:block;
    width:56px;
    height:64px;
    background-image:url(../images/index/slide_left.png);
    background-size:contain;
    left:0;
    text-indent:-100%;
    overflow:hidden;
}
.bx-next{
    position:absolute;
    display:block;
    width:56px;
    height:64px;
    background-image:url(../images/index/slide_right.png);
    background-size:contain;
    right:0;
    text-indent:-100%;
    overflow:hidden;
}

#section_1st .top_list div{
  width:100%;
  height:100%;
}
#section_1st .top_list div a{
  display:block;
  width:100%;
}
#section_1st .top_list div a img{
  display:block;
  max-height:700px;
}
#section_1st .top_list .fir{
  background:red;
}
#section_1st .top_list .sec{
  background:green;
}
#section_1st .top_list .thr{
  background:#fff;
}
#section_2nd {
    height: 777px;
    background-image: url(../images/index/2nd_back.png);
    background-repeat: no-repeat;
    background-position: right;
    padding-top: 280px;
    box-sizing: border-box;
    text-align: center;
}
#section_2nd p{

  /*width:calc(100% - 95px);*/
}
#section_2nd p.text{
  margin-bottom:80px;
}

#section_3rd{
    padding: 185px 0 250px;
}
#section_3rd h2 {
  text-align:center;
}
#section_3rd h2 img {
    max-width:98%;
}
#news_list{
  display:flex;
  width:98%;
  max-width:1375px;
  margin:70px auto 0;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}
#news_list .list_item{
  width:32%;
  border-bottom: 0.5px #ddd solid;
  margin:0 0 50px;
}
#news_list .list_item:nth-child(3n+2){
  margin:0 2% 50px;
}
#news_list .list_item a{
  display:block;
}
#news_list .list_item .date{
  margin-bottom:8px;
  letter-spacing: 1px;
  font-size:11px;
}
#news_list .list_item .catch{
  margin-bottom:20px;
}
#news_list .list_item .title{
    margin: 0 3px 25px;
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 22px;
}
#news_list .list_item .link{
  display:block;
  width:80%;
  padding:6px 0;
  background-color:#000;
  color:#fff;
  margin:0 auto 14px;
  font-size:12px;
  text-align: center;
  letter-spacing:1px;
}

#news_list .list_item .column{
  margin:0 5px 10px;
  font-size: 11px;
  letter-spacing:1px;
}
#section_3rd .news_more{
  display:block;
  width:90%;
  max-width:550px;
  margin: 70px auto 0;
  font-size:16px;
  font-weight:bold;
  letter-spacing:6px;
  padding:20px;
  text-align:center;
  background-color:#000;
  color:#fff;

}

#section_4th{
  height:700px;
  position:relative;
  overflow:hidden;
}
#section_4th div{
  position:absolute;
}
#section_4th .left{
    left: 0;
    width: 60%;
    min-width: 900px;
    height: 100%;
    background-image: url(../images/index/goods_image.jpg);
    background-size: cover;
    background-position: center;
    text-align: center;
}
#section_4th .left a{
    position:absolute;
    left:calc( 50% - 118px );
    top: 420px;
}

#section_4th .left p{
  color:#fff;
  padding:15px 0;
  margin: 280px 0;
  width: 100%;
  font-size:52px;
  font-weight:bold;
  background-color:rgba(0,0,0,0.6);
  text-align:center;
  letter-spacing:5px;
}

#section_4th .right{
    right: 0;
    width: 65%;
    height: 100%;
    background-image: url(../images/index/4th_back.png);
    background-position: left;
pointer-events : none;
}
#section_4th .right > p > img{
  position:absolute;
    left:calc( 50% - 52px );
  top: 140px;
}
#section_4th .right a{
    position:absolute;
    left:calc( 50% - 18px );
    top: 420px;
pointer-events : auto;
}
footer{ 
    padding: 50px 0 205px;
}
footer .scroll{ 
  text-align:center; 
  margin-bottom:50px;
}
footer .all_rights{ 
  text-align:center;
}@media screen and (min-width: 1600px){
.bx-controls-direction {
    top: -350px;
}
}
@media screen and (max-width: 1110px){
  #section_4th { 
    height:initial;
    overflow:initial;
  }
  #section_4th div{ position:initial; }
#section_4th .left {
    left: initial;
    width: 100%;
    min-width: initial;
    height: 405px;
    padding: 230px 0 0;
    background-image: url(../images/index/goods_image.jpg);
    background-size: cover;
    background-position: center;
    text-align: center;
    border-bottom: 5px solid #fff;

}
#section_4th .left p{
    margin: 0 auto 50px;
}
#section_4th .left a {
    position: initial;
    left: initial;
    top: initial;
}

#section_4th .right {
    right: initial;
    width: 100%;
    height: 420px;
    padding: 110px 0;
    background-image: initial;
    background-color:#000;
    background-position: left;
    pointer-events: none;
    text-align:center;
}
#section_4th .right > p ,#section_4th .right > p img,#section_4th .right a {
    display:block;
    position: initial;
    left: initial;
    top: initial;
    text-align:center;
}
#section_4th .right > p{
    margin: 60px auto 50px;
}
#section_4th .right > p img{
    display:initial;
    width: 250px;
}
}
.sp_menu{display:none;}
@media screen and (max-width: 980px){
  .pc_menu{display:none;}
  .sp_menu{display:block;}
  #fixed .social { display:none; }
}
@media screen and (max-width: 800px){
.bx-prev , .bx-next {
    width: 25px;
    height: 29px;
}
  #news_list .list_item {
    width: 98%;
    border-bottom: 0.5px #ddd solid;
    margin: 0 auto 50px;
  }
  #news_list .list_item:nth-child(3n+2) {
    margin: 0 auto 50px;
  }
  #news_list .list_item:nth-child( n + 4 ) {
    display:none;
  }
}

.sp_visible{ display:none; }

@media screen and (max-width: 750px){
#section_1st{
  height: 137.5vw;
}
.bx-prev , .bx-next {
    width: 25px;
    height: 29px;
}
.pc_visible{ display:none; }
.sp_visible{ display:initial; }

#section_2nd {
    height: 777px;
    background-image: url(../images/index/2nd_back_sp.png);
    background-repeat: no-repeat;
    background-color: initial;
    background-position: center top;
    background-size: cover;
    padding-top: 280px;
    box-sizing: border-box;
    text-align: center;
}
#section_1st{
  margin: 86px auto 100px;
  width: 100%;
  max-width:1600px;
}
#section_1st .top_list div a img {
    display: block;
    max-height: none;
}
#section_2nd .sp_visible{
    display:block;
}
.bx-controls-direction {
    top: -70vw;
}
  #news_list .list_item {
    width: 98%;
    border-bottom: 0.5px #ddd solid;
    margin: 0 auto 50px;
  }
  #news_list .list_item:nth-child(3n+2) {
    margin: 0 auto 50px;
  }
#news_list .list_item .title {
    margin: 0 15px 25px;
}
}

/*--アクション----------------------------------------------------------------*/
@media screen and (min-width: 751px){
#section_2nd.scrollIn {
    height: 777px;
    background-repeat: no-repeat;
    background-position: -3200px 50%;
    padding-top: 280px;
    box-sizing: border-box;
    text-align: center;
    transition:0.7s;
}
#section_2nd.scrollIn.scrollActive{
    background-position: 100% 50%;

}
#section_2nd.scrollIn .pc_visible{
    opacity:0;
    transition:1s;
    -moz-transition-delay: .7s;
    -webkit-transition-delay: .7s;
    -o-transition-delay: .7s;
    -ms-transition-delay: .7s;
}
#section_2nd.scrollIn.scrollActive .pc_visible{
    opacity:1;
}
}

#news_list .list_item.scrollIn {
    padding-top: 200px;
    opacity:0;
    transition:1s;
}
#news_list .list_item.scrollIn.scrollActive {
    padding-top: 0px;
    opacity:1;
}

#section_4th > div .scrollIn{
    opacity:0;
    transition:1s;
}

#section_4th > div .scrollIn.scrollActive{
    opacity:1;
}
#section_4th > .left p.scrollIn{
    text-indent:-100%;
}
#section_4th > .left p.scrollIn.scrollActive{
    text-indent:0;
}
/*--コンテンツロード----------------------------------------------------------*/
#load_content{
  position:fixed;
  width:100vw;
  height:100vh;
  background-color:#b6906a;
  z-index:2000;
  top:0;left:0;
}
#load_content .op_image{
  position:absolute;
  opacity:0;
  top:0; left:0;
  width:100vw;
  height:100vh;
  background-color:#b6906a;
  background-size:cover;
  transition: 0.5s;
}
#load_content .op_image.active{
  opacity:1;
}
#load_content .op_image img{
  position:absolute;
  top:calc( 50% - 124px );
  left:calc( 50% - 138px );
  opacity:0;
  transition: 0.5s;
    -moz-transition-delay: 1s;
    -webkit-transition-delay: 1s;
    -o-transition-delay: 1s;
    -ms-transition-delay: 1s;
}
#load_content .op_image.active img{
  opacity:1;
}
.loader_logo{
    text-align:center;
}
.loader_logo img{
    width:92px;
}
.loader {
  margin: calc(50vh - 50px) auto 0;
  font-size: 4px !important;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #fff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #fff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
  }
}