@charset "utf-8";

@keyframes reflection {
 0% {
  left: -50%
 }
 30% {
  left: -50%
 }
 100% {
  left: 120%
 }
}
main{
 position: relative;
}
main .bg-left{
 position:absolute;
 left: 0;
 top: 10%;
}
@media(max-width: 768px) {
 main .bg-left{
  display: none;
 }
}
main .fv {
 position: relative;
 z-index: 2;
 border-top:4px solid #fd7400;
 max-width: 1440px;
 margin: auto;
}
main .fv .fv_bg {
 width: 100%;
 height: auto
}
main .fv .fv_tx {
 position: absolute;
 top: 86%;
 right: auto;
 left: 47%;
 transform: translateX(-47%);
 width: 73%;
 display: inline-block;
 overflow: hidden
}
main .fv .fv_tx img {
 width: 100%;
 height: auto
}
main .fv .fv_tx .mask {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 -webkit-mask-image: url("../../img/FV_tx.webp");
 mask-image: url("../../img/FV_tx.webp");
 -webkit-mask-size: 100% auto;
 mask-size: 100% auto;
 -webkit-mask-repeat: no-repeat;
 mask-repeat: no-repeat;
 -webkit-mask-position: left top;
 mask-position: left top
}
main .fv .fv_tx .hikari {
 position: absolute;
 top: -2%;
 left: -60%;
 width: 60%;
 padding: 60% 0 0;
 background-image: radial-gradient(circle, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 75%);
 transform: skewX(30deg);
 animation-name: reflection;
 animation-duration: 1.5s;
 animation-iteration-count: infinite;
 animation-timing-function: linear
}
main .fv .tx {
 color: #ffbe0f;
 font-size: 3rem;
 position: absolute;
 top: 114%;
 left: 7%;
 right: auto;
 letter-spacing: .07em;
 font-weight: 600
}
main .fv .tx span.big {
 font-size: 140%
}
main .fv .tx span.yellow {
 color: #ffe244;
}
main .fv .tx span.red {
 color: #ff0f47;
}
.ctgwrap{
 margin-bottom: 150px;
}
main .ctgwrap {
  margin-top: 5vw;
}
main .ctgwrap h2.ctgtitle{
  display: block;
  /*width: 80%;*/ 
  max-width: 1440px;
  margin: 0 auto 50px auto;
  font-weight: normal;
  font-size: 2em;;
}
@media(max-width: 768px) {
 main .ctgwrap h2{
   text-align: center;
   width: 100%;
   font-size: 1.8em;;
 }
}

.breadcrumb{
 background: #1C1919;
 color: #f5b916;
}
.breadcrumb ul{
 display: flex;
 justify-content: flex-start;
 /*width: 80%;*/
 margin: auto;
 padding: 12px 0;
 max-width: 1440px;
}
.breadcrumb ul li{
 margin:0 20px;
}
.breadcrumb ul li:first-child{
 margin:0;
}
.breadcrumb ul li::after{
 content: "＞";
 padding-left: 20px;
}
.breadcrumb ul li:last-child::after{
 content: none;
 padding-left: 20px;
}
@media(max-width: 768px) {
 main .fv {
  height: 60vw
 }
/* main .fv .fv_bg {
  display: block;
  width: 120%;
  position: absolute;
  top: 10px;
  right: 0px;
  left: -11vw
 }*/
 main .fv .fv_tx {
  width: 90%;
  /*top: 49%;
  left: 2.2%;*/
  transform: translateX(0);
  position: sticky;
 }
 main .fv .tx {
  font-size: 13.5px;
  /*left: 4%;
  top: 79%*/ 
        position: sticky;
        text-align: center;
 }
}
main .new {
 position: relative;
 height: 650px
}
main .new .new_bg {
 position: absolute;
 top: -13%;
 left: 0;
 width: 55%;
 z-index: -1
}

@media(max-width: 768px) {
 main .new {
  height: 155vw
 }
}
@media(max-width: 500px) {
 main .new {
  height: 175vw
 }
}
@media(max-width: 400px) {
 main .new {
  height: 190vw
 }
}
main section h1 {
 text-align: center;
 font-family: "sans-serif";
 letter-spacing: .15em;
 font-size: 36px;
 font-weight: 900;
 color: #1e0a0a
}
@media(max-width: 768px) {
 main section h1 {
  font-size: 22px;
  margin: .5em auto
 }
}
main .news {
 position: relative;
 /*height: 600px;*/
 margin: 10rem auto 10rem auto;
}
main .news .news_bg01 {
 position: absolute;
 top: -200px;
 left: 0;
 z-index: -1
}
main .news .news_bg02 {
 position: absolute;
 bottom: 0;
 right: 0;
 z-index: -1
}
main .news .news-container {
 /*width: 80%;*/
 max-width: 1280px;
 margin: 0 auto;
 background-color: #fff;
 border-radius: 10px;
 box-shadow: 1px 1px 6px -2px #454545;
 padding: 20px
}
main .news .news-container .news-contents {
 border-bottom: dashed #a3a3a3 2px;
 padding: 20px 0;
 position: relative;
}
main .news .news-container .news-contents .icon-new{
 position: absolute;
 left: -50px;
 width: 50px;
}
main .news .news-container .news-contents .date {
 color: #6D6D6D;
 margin-bottom: 10px
}
main .news .news-container .news-contents .ttl {
 color: #454545
}
main .news .news-container .news:first-child {
 padding-top: 0
}
main .news .news-container .more {
 text-align: right;
 padding: 20px 20px 10px;
 position: relative
}
main .news .news-container .more a{
 position: absolute;
 right: 1rem;
 bottom: -5rem;
}
main .news .news-container .more a img{
 width: 100px;
}

main .center-read{
 /*width: 80%;*/
 max-width: 1440px;
 margin: 0 auto;
 padding: 4rem 0 4rem 0;
 text-align: center;
 font-size: 2rem;
 letter-spacing: 0.2vw;
 line-height: 4rem;
 position: relative;
 background: #FFF;
 z-index: 9999;
 border-right: 17px solid #222121;
 border-bottom: 17px solid #000;
}
main .center-read .draw-read-left{
 width: 100%;
 position: absolute;
 top: 0;
 left: 0;
}
main .center-read .draw-read-right{
 width: 100%;
 position: absolute;
 bottom: 0;
 right: 0;
}
.blue{color: #1f6fb9;}
.orange{color: #dc9f04;}


main .sales{
 position: relative;
 top: -10vw;
 width: 100%;
 max-width: 1440px;
 margin: auto;
 height:50rem;
 /*background: url("../img/top/sales-bg.png") 100% no-repeat;*/
 background-size: cover;
 /*z-index: -10;*/
 padding: 15vw 0 0 0;
 box-sizing: border-box;
 border-bottom: 17px solid #222121;
}
main .sales .sales-tit{
 margin-bottom: 2vw;
}
main .sales .sales-tit .sales-tit-s1{
 font-weight: 2vw;
 letter-spacing: 0.5vw;
}
main .sales .sales-tit .sales-tit-s2{
 display: block;
 font-size: 1.6vw;
 font-weight: 4vw;
 letter-spacing: 0.5vw;
}

main .sales .sales-read{
 display: flex;
 justify-content: space-between;
}
main .sales .sales-read li{
 width:50%;
 padding: 2.8vw 0;
 box-sizing: border-box;
}
main .sales .sales-read li:nth-of-type(1){
 border-right: 2px solid #fd7400;
 /*border-bottom: 7px solid #222121;*/
}
main .sales .sales-read li:nth-of-type(2){
 /*border-top: 7px solid #222121;*/
 border-left: 2px solid #fd7400;
}
main .sales .sales-read li .sales-read-s1 h5{
 font-size: 1.6rem;
 font-weight: normal;
 margin: 0 0 10px 0;
 letter-spacing: 0.1vw;
 padding: 0 0 0 1.4rem;
}
main .sales .sales-read li .sales-read-s1 h5::before{
 content: "■";
 color: #7a7a7a;
 left: 0;
 font-size: 1.4rem;
}
main .sales .sales-read li .sales-read-s1 span{
 display: block;
 font-size: 1.6rem;
 letter-spacing: 0.1vw;
 line-height: 4rem;
 padding: 0 1.4rem 0 1.4rem;
 box-sizing: border-box;
}

main .sales .more {
 text-align: right;
 padding: 20px 20px 10px;
}
main .sales .more a{
 position: absolute;
 right: 2rem;
 bottom: 2rem;
}
main .sales .more a img{
 width: 100px;
}


main .recruit{
 position: relative;
 /*top: -10vw;*/
 width: 100%;
 height: 30rem;
 max-width: 1440px;
 margin: auto;
 background: url("../img/top/recruit-bg.jpg") 100% no-repeat;
 background-size: cover;
 /*z-index: -10;*/
 padding: 2vw 2vw 0 2vw;
 box-sizing: border-box;
 color: #974219;
 border-right: 17px solid #222121;
 border-bottom: 17px solid #222121;
}
main .recruit .recruit-tit{
 margin-bottom: 2vw;
}
main .recruit .recruit-tit .recruit-tit-s1{
 font-size:  1rem;
 letter-spacing: 0.5rem;
}
main .recruit .recruit-tit .recruit-tit-s2{
 display: block;
 font-size: 1.4rem;
 font-weight:600;
 letter-spacing: 0.5rem;
}
main .recruit .recruit-read{
 width: 40%;
 font-size: 1.4rem;
 letter-spacing: 0.1rem;
 line-height: 2.4rem;
}
main .recruit .recruit-link a{
 display: block;
 background: url("../img/top/recruit-link.png");
 background-size: cover;
 width: 27rem;
 height: 6rem;
 font-size: 1.5rem;
 text-align: center;
 margin: 2rem 0 0 5rem;
 padding: 1.6rem 0 0 0;
 box-sizing: border-box;
 font-weight: 600;
 letter-spacing: 0.1rem;
 color: #FFF;
  transition-property: opacity;
  transition-duration: 0.5s;
}
main .recruit .recruit-link a:hover{
 opacity: 0.7; 
}
main .recruit .recruit-photo{
 position: absolute;
 right: 0;
 top: 0;
 bottom: 50%;
 width: 50%;
}


@media(max-width: 768px) {
 
 main .fv{
 border-top:5px solid #fd7400;
 border-left: 0;
 }
 main .fv .fv_tx {
   width: 90%;
   top: 75%;
   left: 3.2%;
   transform: translateX(0);
 }
 main .fv .tx {
  font-size: 13.5px;
  left: 5%;
  top: 106%;
 }
 main .news {
  height: auto;
  margin-bottom: 26vw;
 margin-top: 35vw;
 }
 main .news .news-container .news-contents .icon-new{
  position: absolute;
  top: -6px;
  left: 100px;
  width: 50px;
 }

 main .news .news-container .more a img{
  width: 80px;
 }
 main .news .news_bg01 {
  width: 50%;
  top: -10%;
  left: -3%
 }
 main .news .news-container {
  box-sizing: border-box;
  width: 99%
 }
 main .center-read {
     width: 100%;
     padding: 4vw 0 4vw 0;
     font-size: 5vw;
     line-height: 8.1vw;
 }
 main .sales {
     top: 0vw;
     height: 170vw;
      border-left: 5px solid #fd7400;
    border-bottom: 5px solid #222121;
 }
 main .sales .sales-tit{
     text-align: center;
 }
 main .sales .sales-tit .sales-tit-s1 {
     font-size: 1rem; 
 }
 main .sales .sales-tit .sales-tit-s2 {
     font-size: 1.4rem;
 }
 main .sales .sales-read {
     display: block;
     height: auto;
 }
 main .sales .sales-read li {
     width: 100%;
     height: auto;
     margin: 0 auto 5vw auto;
     box-sizing: border-box;
  }
 main .sales .sales-read li .sales-read-s1 h5 {
     font-size: 1.4rem;
     margin: 0 0 10px 0;
     letter-spacing: 0.1vw;
     
 }
 main .sales .sales-read li .sales-read-s1 span {
     font-size: 1.2rem;
     letter-spacing: 0.1vw;
     line-height: 7vw;
     margin-left: 1.4vw;
 }
 main .sales .sales-read li .sales-read-s1 h5::before{
  font-size: 2rem;
 }
 main .sales .more {
     text-align: center;
 }
 main .sales .more a {
     position: absolute;
     right: 0;
     left: 0;
     margin: auto;
     bottom: 18vw;
 }
 
 main .recruit {
     position: relative;
     top: 0vw;
     width: 100%;
     height: 80vw;
     background: url(../img/top/recruit-bg.jpg) 100% no-repeat;
     background-size: cover;
     background-position: left;
      border-right: 0;
 }

 main .recruit .recruit-tit .recruit-tit-s1 {
     font-size: 4vw;
     letter-spacing: 0.5vw;
 }
 main .recruit .recruit-tit .recruit-tit-s2 {
     font-size: 6vw;
     letter-spacing: 0.5vw;
 }
 main .recruit .recruit-read {
     width: 100%;
     font-size: 4vw;
     letter-spacing: 0.4vw;
     line-height: 6vw;
 }
 main .recruit .recruit-link {
     width: 250px;
     height: 50px;
     font-size: 4.5vw;
     margin: 7vw auto;
     padding: 3.2vw 0 0 0;

 }
 main .recruit .recruit-photo {
   display: none;
 }

main .recruit .recruit-link {
         padding: 0 0 0 0;
 }
main .recruit .recruit-link a{
    width: 49vw;
    height: 11vw;
    font-size: 3.5vw;
    text-align: center;
    margin: 2vw 0 0 5vw;
    padding: 2.6vw 0 0 0;
 }
 
}
main .banner {
 padding: 50px 0;
 text-align: center
}
main .banner img {
 width: 80%
}
@media(max-width: 768px) {
 main .banner {
  padding: 0
 }
 main .banner img {
  width: 99%
 }
}



.mv__slider-sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .mv__slider {
    display: none;
  }
  .mv__slider-sp {
    display: block;
    width: 100%;
    margin-bottom: 20px;
  }
  .mv__slider-sp img {
    -o-object-fit: cover;
       object-fit: cover;
  }
  .mv__slider-sp {
    display: block;
    width: 100%;
    margin-bottom: 20px;
  }
  .mv__slider-sp img {
    -o-object-fit: cover;
       object-fit: cover;
  }
}



/* ローディング画面 ここから*/

.SiteWrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
}
#loading {
  width: 100vw;
  height: 100vh;
  -webkit-transition: all 1s;
  transition: all 1s;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
}

.loaded {
  opacity: 0;
  visibility: hidden;
}

.loading-bar4 {
  height: 10px;
  position: relative;
  margin-bottom: 20px;
}

.loading-bar4::before {
  -webkit-animation: width-0to100 3s infinite ease-out;
  animation: width-0to100 3s infinite ease-out;
  background: #FF8D2C;
  content: "";
  height: 10px;
  left: 0;
  position: absolute;
  top: 0;
}

@-webkit-keyframes width-0to100 {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes width-0to100 {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.load-logo {
  position: absolute;
  -webkit-animation: flash 1s linear infinite;
          animation: flash 1s linear infinite;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 200px;
  z-index: 9999;
}
@-webkit-keyframes flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
/* ローディング画面 ここまで*/


/*------------------------------------------------------------
	インフォメーション
------------------------------------------------------------*/

.information{
  font-size: 1.6rem;
 
}
.information .h2_title{
  text-align: center;
  font-size: 1.8rem;
  margin: auto;
}
.information .title_area{
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.information .title_area span{
  font-size: 1.2rem;
}
.information .read{
  font-size: 1.6rem;
  margin-bottom: 10px;
 text-align: center;
}
.information .read .shop{
	width: 80%;
	margin: 2px auto;
  display: flex;
	justify-content: center;
}
.information .read .shop a{
	display: block;
	margin: 6px 4px 20px 4px;
 text-align: center;
}
.information .read .shop img{
	width: 200px;
	margin: auto;
  display: flex;
	justify-content: space-between;
}
@media only screen and (max-width: 768px) {
  .information{
    display: block;
    position:static;
    left: inherit;
    right: inherit;
    bottom: inherit;   
    margin: 10rem auto;
    font-size: 1.2rem;
    width: 96%;
  }
  .information .h2_title{
    font-size: 1.4rem;
  }
  .information .title_area{
    font-size: 1.2rem;
  }
  .information .read{
    font-size: 1.2rem;
  }
	.information .read .shop{
		width: 90%;
		margin: 2px auto;
		display: block;
		justify-content: center;
	}
	.information .read .shop a{
		display: block;
		margin: 6px 4px 20px 4px;
		text-align: center;
	}
	.information .read .shop img{
		width: 100%;
		margin: 0 auto -28px auto;
		display: flex;
		justify-content: space-between;
	}	
	
}