@charset "utf-8";
.red{
  color: #a5473f;
}
.blue{
  color: #5654a2;  
}
.yellow{
  color: #aaaa01;
}
.inner{
  max-width: 1080px;
}
.l-inner{
  margin: 0 auto;
  width: 95%;
  max-width: 1200px;
}
.top-slide{
  opacity: 0;
  transition: opacity .3s linear;
}
.top-slide.slick-initialized{
  opacity: 1;
}
.top-slide li img{
  margin: 0 auto;
  object-fit: cover;
  max-height: 850px;
}
@media screen and (max-width:667px){
  .top-slide li img{
    height: 80vh;
  }
}
.intro-area{
  margin-top: 100px;
}
@media screen and (max-width:667px){
  .intro-area{
    margin-top: 50px;
  }  
}
.intro-box{
  display: flex;
  align-items: center;
}
@media screen and (max-width:667px){
  .intro-box{
    flex-direction: column;
  }  
}
.intro-logo{
  width: 50%;
  display: flex;
  justify-content: center;
}
@media screen and (max-width:667px){
  .intro-logo{
    width: 100%;
  }
}
.intro-logo img{
  display: block;
  width: 250px;
}
@media screen and (max-width:667px){
  .intro-logo img{
    width: 60%;
    max-width: 250px;
  }
}
.intro-text{
  width: 50%;
  line-height: 2.4;
}
@media screen and (max-width:667px){
  .intro-text{
    margin-top: 30px;
    width: 100%;
    line-height: 2.2;
  }
}
.intro-img{
  margin-top: 100px;
}
@media screen and (max-width:667px){
  .intro-img{
    margin-top: 50px;
  }
}
.intro-slide-top{
  margin-top: 100px;
}
.intro-slide-top .slick-slide img{
  width: 100%;
}
.intro-slide-under{
  margin-top: -7px;
}
.about-area{
  margin-top: 100px;
}
.about-area .sec-title{
  margin: 0 auto;
  width: 320px;
}
@media screen and (max-width:667px){
  .about-area .sec-title{
    width: 65%;
    max-width: 320px;
  }
}
.about-area .title-arrow{
  margin: 40px auto 0;
  width: 200px;
}
@media screen and (max-width:667px){
  .about-area .title-arrow{
    margin: 40px auto 0;
    width: 40%;
    max-width: 200px;
  }
}
.about-list{
  margin-top: 100px;
}
@media screen and (max-width:667px){
  .about-list{
    margin-top: 50px;
  }
}
.about-list li{
  margin: 0 10px;
  flex: 1;
}
@media screen and (max-width:667px){
  .about-list li{
    margin: 0 5px;
  }
}
.about-list li:nth-of-type(2){
  margin-top: 60px;
}
@media screen and (max-width:667px){
  .about-list li:nth-of-type(2){
    margin-top: 0;
  }
}
.about-list li:nth-of-type(3){
  margin-top: 120px;
}
@media screen and (max-width:667px){
  .about-list li:nth-of-type(3){
    margin-top: 0;
  }
}
.about-img{
  margin: 0 auto;
  width: 90%;
}
@media screen and (max-width:667px){
  .about-img{
    width: 100%;
  }
}
.vertical-text{
  margin: 20px auto 0;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  vertical-align: middle;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .1em;
}
@media screen and (max-width:667px){
  .vertical-text{
    margin: 20px auto 0;
    font-size: 18px;
  }
}
.about-number{
  margin-top: 40px;
  width: 30px;
}
.about-text{
  margin-top: 10px;
  line-height: 2;
}
@media screen and (max-width:667px){
  .det-list{
    margin-top: 10px;
  }
}
.det-list li.flex{
  align-items: center;
  position: relative;
}
@media screen and (max-width:667px){
  .det-list li.flex{
    flex-direction: column;
  }
}
.det-img{
  width: 40%;
  position: relative;
}
.dento .det-img{
  margin: 50px auto 0;
  position: relative;
}
@media screen and (max-width:667px){
  .det-img{
    margin: 0 auto;
    width: 90%;
  }
}
@media screen and (max-width:667px){
  .dento .det-img{
    margin: 20px auto 0;
  }  
}
.det-list li.first .det-img,
.det-list li.dento .det-img,
.det-list li.second .det-img,
.det-list li.third .det-img{
  position: relative;
}
.det-img-main{
  width: 100%;
  position: relative;
}
.det-list li.first .det-img-main img,
.det-list li.dento .det-img-main img,
.det-list li.third .det-img-main img{
  object-fit: cover;
  width: 100%;
  height: 55vw;
}
@media screen and (max-width:667px){
  .det-list li.first .det-img-main img,
  .det-list li.dento .det-img-main img,
  .det-list li.third .det-img-main img{
    height: 110vw;
  }
}
.det-img-sub{
  width: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
}
.det-list li.first .det-img-sub img,
.det-list li.dento .det-img-sub img,
.det-list li.third .det-img-sub img{
  object-fit: cover;
  width: 100%;
  height: 55vw;
}
@media screen and (max-width:667px){
  .det-list li.first .det-img-sub img,
  .det-list li.dento .det-img-sub img,
  .det-list li.third .det-img-sub img{
    height: 110vw;
  }
}
.bordless-img img{
  object-fit: cover;
  width: 100%;
  height: 55vw;
}
@media screen and (max-width:667px){
  .bordless-img img{
    height: 110vw;
  }
}
.det-cont{
  flex: 1;
  padding: 0 10%;
}
@media screen and (max-width:667px){
  .det-cont{
    margin: 20px auto 0;
    width: 90%;
    flex: initial;
    padding: 0;
  }
}
.det-list li.second .det-cont{
  margin: 0 auto;
  padding: 0;
  flex: initial;
  width: 90%;
  max-width: 1080px;
}
.det-list li.hole-cont .det-cont{
  padding: 0;
}
.det-cont .det-number{
  width: 50px;
}
@media screen and (max-width:667px){
  .det-cont .det-number{
    width: 40px;
  }
}
.det-cont .det-number:before{
  margin: 10px 0;
  content: "";
  display: block;
  background: url("https://www.arakawa.shop/s/images/arakawa1886/top/sec-sword.svg") no-repeat;
  background-size: contain;
  width: 70px;
  height: 9px;
}
.det-cont .det-text{
  margin-top: 40px;
  line-height: 2.2;
}
@media screen and (max-width:667px){
  .det-cont .det-text{
    margin-top: 20px;
  }
}
.det-sub-text{
  margin-top: 150px;
  line-height: 2.2;
  text-align: center;
  font-weight: 500;
}
@media screen and (max-width:667px){
  .det-sub-text{
    margin: 50px auto 0;
    width: 90%;
    line-height: 2.2;
    text-align: left;
  }
}
.det-sub-img{
  margin: 50px auto 0;
  max-width: 800px;
}
@media screen and (max-width:667px){
  .det-sub-img{
    width: 90%;
  }
}
.det-sub-text2{
  margin-top: 50px;
  line-height: 2.2;
  text-align: center;
  font-weight: 500;
}
@media screen and (max-width:667px){
  .det-sub-text2{
    margin: 50px auto 0;
    width: 90%;
    line-height: 2.2;
    text-align: left;
  }
}
.det-title{
  font-size: 24px;
  letter-spacing: .1em;
}
@media screen and (max-width:667px){
  .det-title{
    font-size: 18px;
    letter-spacing: .1em;
  }
}
.det-list li.second{
  margin-top: 100px;
}
@media screen and (max-width:667px){
  .det-list li.second{
    margin-top: 40px;
  }
}
.det-list li.second .det-img-main{
  margin: 0 0 0 auto;
  width: 100%;
}
@media screen and (max-width:667px){
  .det-list li.second .det-img-main{
    margin: 20px auto 0;
  }
}
.det-list li.second .det-img-sub{
  right: inherit;
  left: -25%;
  bottom: -50px;
  width: 55%;
}
@media screen and (max-width:667px){
  .det-list li.second .det-img-sub{
    left: 0;    
    width: 60%;
  }
}
.det-list li.inner{
  margin-top: 100px;
  align-items: center;
}
@media screen and (max-width:667px){
  .det-list li.inner{
    margin-top: 50px;
  }
}
@media screen and (max-width:667px){
  .det-list li.top.inner{
    margin-top: 20px;
  }
}
.det-list li.inner .det-img-main{
  width: 100%;
}
.det-list li.odd .det-cont{
  padding-left: 0;
  order: -1;
}
.det-list li.even .det-cont{
  padding-right: 0;
}
@media screen and (max-width:667px){
  .det-list li.odd .det-cont{
    margin-top: 20px;
    padding: 0;
    order: initial;
    width: 100%;
  }
  .det-list li.even .det-cont{
    margin-top: 20px;
    padding: 0;
    width: 100%;
  }
}
.det-list li.inner .det-sub-title{
  font-size: 20px;
}
@media screen and (max-width:667px){
  .det-list li.inner .det-sub-title{
    font-size: 18px;
  }
}
.det-list li.hole-cont .det-sub-title{
  font-size: 24px;
}
@media screen and (max-width:667px){
  .det-list li.hole-cont .det-sub-title{
    font-size: 18px;
  }
}
.movie-text{
  margin-top: 30px;
}
.det-list li.inner .det-sub-title.under-border:after{
  margin-top: 10px;
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  background: #333;
}
.det-list li.inner .det-text{
  margin-top: 20px;
}
.det-list li.third{
  margin-top: 100px;
}
@media screen and (max-width:667px){
  .det-list li.third{
    margin-top: 50px;
  }
}
.det-list li.third .det-img-main{
  margin: 0 0 0 auto;
}
.det-list li.third .det-img-sub{
  right: inherit;
  left: 0;
}
@media screen and (max-width:667px){
  .det-list li.third .det-img-sub{
    left: 0;
  }
}
@media screen and (max-width:667px){
  .det-list li.third .det-sub-text2{
    margin-top: 30px;
  }
}
.under-slide{
  margin-top: 100px;
}
@media screen and (max-width:667px){
  .under-slide{
    margin-top: 50px;
  }
}
.under-slide .slick-dots{
  right: -30px;
  bottom: 13px;
  width: 20px;
}
@media screen and (max-width:667px){
  .under-slide .slick-dots{
    right: inherit;
    bottom: -10px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
.under-slide .slick-dots li{
  margin: 0;
  padding: 0;
  width: inherit;
  height: inherit;
}
@media screen and (max-width:667px){
  .under-slide .slick-dots li{
    width: 25px;
  }
}
.under-slide .slick-dots li button{
  margin: 0;
  padding: 0;
  width: inherit;
  height: inherit;
}
.under-slide .slick-dots li button:before{
  content: "";
  display: inline-block;
  font-family: initial;
  font-size: initial;
  width: 12px;
  height: 12px;
  background: #333;
}
@media screen and (max-width:667px){
  .under-slide .slick-dots li button:before{
    width: 10px;
    height: 10px;
  }
}
.lookbook-list{
  margin-top: 100px;
}
@media screen and (max-width:667px){
  .lookbook-list{
    margin: 50px auto 0;
    flex-wrap: wrap;
    width: 90%;
  }
}
.lookbook-list li.one{
  margin: 0 10px 0 20px;
  width: 26.1%;
}
.lookbook-list li.two{
  margin: 100px 10px 0;
  width: 26.1%;
}
@media screen and (max-width:667px){
  .lookbook-list li.one,
  .lookbook-list li.two{
    margin: 0;
    width: 49%;
  }
  .lookbook-list li.one{
    margin-right: 2%;
  }
}
.lookbook-list li.three{
  margin: 0 20px 0 10px;
  flex: 1;
}
@media screen and (max-width:667px){
  .lookbook-list li.three{
    margin: 2% 0 0 0;
    width: 100%;
    flex: initial;
  }
}
.look-more{
  margin-top: 150px;
}
@media screen and (max-width:667px){
  .look-more{
    margin-top: 50px;
  } 
}
.look-more a{
  margin: 0 auto;
  color: #333;
  border: 1px solid #333;
  display: block;
  text-align: center;
  max-width: 200px;
  position: relative;
  padding: 8px 0;
}
.look-more a:after{
  content: "";
  background: url("https://www.arakawa.shop/s/images/arakawa1886/top/more-sword.svg") no-repeat;
  background-size: contain;
  width: 60px;
  height: 10px;
  display: block;
  position: absolute;
  right: -35px;
  top: 50%;
  transition: .3s;  
}
.look-more a:hover:after{
  transform: translateX(10px);
  transition: .3s;
}
.footer-area{
  margin-top: 150px;
}
@media screen and (max-width:667px){
  .footer-area{
    margin-top: 50px;
  }
}
.hole-img img{
  object-fit: cover;
  width: 100%;
  height: 400px;
}
@media screen and (max-width:667px){
  .hole-img img{
    height: 100vw;
    max-height: 400px;
  }  
}
.hole-movie{
  margin: 30px auto 0;
  width: 90%;
  max-width: 700px;
}
@media screen and (max-width:667px){
  .bordless-slide{
    margin-top: 20px;
  }
}
.det-img-shibori{
  margin-top: 10px;
}
.det-img-shibori2{
  position: absolute;
  bottom: -15%;
  left: -30%;
  width: 70%;
}
@media screen and (max-width:667px){
  .det-img-shibori2{
    left: -5%;
  }
}
@media screen and (max-width:667px){
  .det-list li.odd .det-cont.katano{
    margin-top: 25%;
  }
}
/*アニメーション用*/
.anime-img{
  opacity: 0;
  transition: 2s linear;
}
.anime-img.is-active{
  opacity: 1;
  transition: 2s linear;
}
.anime-box{
  /* フェードイン速度の調整 */
  transition: .5s ease-in-out ;
}
#youtube-box{
  position: relative;
  width: 100%;
  height: 47vw;
  max-height: 383px;
}
#youtube-area{
  position: absolute;
  z-index: 1;/*最背面に設定*/
  top: 0;
  right:0;
  left:0;
  bottom:0;
  overflow: hidden;
}
#youtube {
/*中央配置*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*縦横幅指定*/
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
}
/*youtubeがクリックされないためのマスク*/
#youtube-mask{
    position: absolute;
    z-index: 2;/*下から2番目に表示*/
    top:0;
    width:100%;
    height: 100%;
}