@charset "UTF-8";

/*
Theme Name: choice
*/


:root { 
  --h1 :1.910vw;
  --h2 :2.1rem;
  --h4 : 1.25rem;
  --flex_hurf : calc(100% / 2);
  --flex_hurf_space : calc((100% - (1.5625vw * 2)) / 2);
  --flex_third : calc((100% - (1.5625vw * 2)) / 3);
  --flex_fourth : calc((100% - (2.3625vw * 2)) / 4);
  --flex_five : calc((100% - 5vw) / 5);
  --flex_six : calc(100% / 6);
  }
  
  @media screen and (max-width: 767px) {
      :root { 
      --col-space : 5vh;
      --Text-normal: 15px;
      --flex_hurf : 100%;
      --flex_third : calc(97.5% / 2);
      --flex_third_space : calc(98% / 2);
      --flex_fourth : calc((100% - 2%) / 2);
      --flex_five : calc(100% / 1);
      --flex_six : calc(100% / 2);
      }
  }   

  img.logo{
    max-width: 100px;
  }
p.Center{
  text-align: center;
}
/****************philosophy*****************/

#bg--gray{
  position: relative;
}

#bg--gray::after{
  content: '';
  background: #fafafa;
  z-index: -1;
  position: absolute;
  bottom:0;
  left:0;
  width: 100vw;
  height: 50%;
}

#bg--gray .top__wrap, #bg--gray .last__wrap{
  display: flex;
  justify-content: space-between;
  max-width: 1600px;
  margin: auto;
}

#bg--gray .top__wrap{
  align-items: center;
  margin-bottom: var(--col-space);
}

#bg--gray .top__wrap .Item{
  width: var(--flex_hurf);
}

#bg--gray .last__wrap .Item{
  width: 49%;
}

#bg--gray .top__wrap .text{
  font-size: clamp(1.4rem,1.83125vw,2.0vw);
  color:var(--black);
  font-family: YakuHanRPs, 'Noto Serif JP', "ヒラギノ明朝 ProN W6", HiraMinProN-W6, HG明朝E, "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  line-height: 1.755;
  text-align: center;
}

#bg--gray .top__wrap .Item:last-of-type, #bg--gray .last__wrap .Item:last-of-type{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}


  /*************  News ******************/

  section#news{
    background: url(../images/news__bg.jpg)no-repeat center;
    background-size: cover;
    padding:5.416666666666667vw var(--row-space);
  }

  .comm__Inner{
    width:100%;
  }

  section#news .comm__Inner{
   padding: clamp(1em, 3.416666666666667vw, 5.416666666666667vw);
   position: relative;
   max-width: 1100px;
   margin: auto;
   background: #fff;
   border-radius: 2.46em;
  }

  section#news .comm__Inner .containner{
    position: relative;
    z-index: 1;
  }

  ul.flex{
    display: flex;
    justify-content: flex-start;
    gap: 1.5625vw;
    padding: 0;
    margin: 0;
  }

  ul.flex.wrap{
    flex-wrap: wrap;
  }

  ul.flex li{
    width: var(--flex_third);
    font-family: var(--Marcellus), sans-serif;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    margin-bottom:clamp(1em, 2.56vw, 2.5em);
  }

  ul.flex li picture{
    display: block;
    margin-bottom: clamp(1em,1.0625vw,1.5em);
  }

  ul.flex li picture img{
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  ul.flex li a{
    text-decoration: none;
    color:#fff;
  }

  ul.flex li h3{
    font-size: clamp(15px,1.25vw,20px);
    margin: 0;
    font-weight: 300;
  }

  ul.flex li .days{
    font-size: clamp(13px,1.05vw,15px);
    font-style: italic;
    color: #fff;
  }

  ul.flex li p{
    color:#fff;
    font-size:0.9rem;
  }

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

    ul.flex{
      flex-wrap: wrap;
    }

    ul.flex li{
      margin-bottom: 2em;
    }

  }

    /*************  サービス紹介 ******************/

    .service__wrap{
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      display: flex;
      position: relative;
    }

    .service__wrap + .service__wrap{
      margin-top: var(--col-space);
    }

    .service__wrap .Image{
      width:55%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      row-gap: 1em;
      position: relative;
    }

    .service__wrap .Image.artist{
      width: 47%;
    }

    .service__wrap .Image img{
      width: 100%;
      max-width: 100%;
    }

    .service__wrap .Image picture{
      display: block;
      position: relative;
    }

    .service__wrap .Image picture::after{
      content: '';
      position: absolute;
      width: 95%;
      left: 5%;
      bottom:-5%;
      height: 95%;
      background: rgba(0,0,0,0.06);
    }

    .service__wrap.ser__01,  .service__wrap.ser__03{
      flex-direction: row-reverse;
    }

    .service__wrap.ser__01::after{
      content: '';
      position: absolute;
      z-index: -1;
      width: 90%;
      height: 80%;
      background: #2f2e2e;
      bottom: 10%;
      left:0;
    }
    .service__wrap.ser__02, .service__wrap.ser__04{
      flex-direction: row;
    }

    .service__wrap.ser__02::after{
      content: '';
      position: absolute;
      z-index: -1;
      width: 90%;
      height: 90%;
      background: #87acad;
      bottom: 5%;
      right:0;
    }
    
    .service__wrap .Text{
      padding: 1em;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      min-width: 45%;
    }

    .service__wrap .Text .subtitle{
      padding: .5em;
      text-align: center;
      font-size: clamp(18px,1.3541666666666667vw,1.45vw);
      width: max-content;
      margin: 0 auto .5em;
      font-family: 'Noto Serif JP', "ヒラギノ明朝 ProN W6", HiraMinProN-W6, HG明朝E, "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
      font-weight: 400;
      color:#fff;
      padding-bottom: .75em;
      border-bottom: 2px solid #fff;
    }

    .service__wrap .Text h3{
      font-size: clamp(20px,2.5vw,2.7vw);
      text-align: center;
      color:#fff;
      font-family: 'Noto Serif JP', "ヒラギノ明朝 ProN W6", HiraMinProN-W6, HG明朝E, "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
      font-weight: 600;
      margin: 0 auto .5em;
    }

    .service__wrap .Text .detail{
      background: #42413f;
      padding: 1em;
      color:#fff;
      font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
      font-weight: 400;
      text-align: center;
      min-width: 70%;
    font-size: 0.95rem;
    line-height: 1.8;
    }

    .service__wrap.ser__02 .detail{
      background-color: #4b8284;
    }

    .service__wrap.ser__03 .detail{
      background-color: #80806d;
    }

    .service__wrap.ser__03::after{
      content: '';
      position: absolute;
      z-index: -1;
      width: 90%;
      height: 80%;
      background: #b0b09f;
      bottom: 10%;
      left:0;
    }

    .service__wrap.ser__04 .detail{
      background-color: #a79574;
    }
    
    .service__wrap.ser__04::after{
      content: '';
      position: absolute;
      z-index: -1;
      width: 90%;
      height: 80%;
      background: #b8aa90;
      bottom: 10%;
      right:0;
    }
    .en--text{
      font-size: clamp(40px,5.03125vw,128px);
      font-family: "Jost", serif;
      font-weight: 400;
      color:#e8e8e8;
      text-indent: -1px;
      opacity: 0.4;
    }

    .detail__btn{
      background: #ffffff;
      padding: 1em 1em;
      border-radius: 0.26em;
      text-align: center;
      font-family: 'Noto Serif JP', "ヒラギノ明朝 ProN W6", HiraMinProN-W6, HG明朝E, "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
      font-weight: 400;
      display: block;
      width: 90%;
      max-width: 250px;
      text-decoration: none;
      color:#202020;
      margin: 1em auto 0;
    }

    .detail__btn:hover{
      background: #000;
      color:#fff;
    }

  /*************  Products ******************/

    section#products{
      background: url(../images/item__bg.webp)no-repeat center;
      background-size: cover;
      padding:4.333333333333332vw var(--row-space) 5.416666666666667vw;
      position: relative;
    }

    section.products-page{
      background: #252525 !important;
    }
  
    section#products p{
      color:#fff;
      font-size: 0.9rem;
    }

    section#products .comm__Inner{
      position: relative;
      z-index: 2;
      margin-bottom: 2.416666666666667vw;
    }

    section .comm__Inner ul.item{
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      margin: auto;
      gap: 1.5625vw;
      position: relative;
      z-index: 2;
    }

    section .comm__Inner ul.item li{
      width: var(--flex_third);
      overflow: hidden;
    }

    section .comm__Inner ul.item li.four{
      width: var(--flex_fourth);
      list-style: none;
    }

    section .comm__Inner ul.item li h3 a{
      color:#fff;
      font-family:'Noto Sans JP',游ゴシック体, 'Yu Gothic', YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
      font-weight: 400;
      text-decoration: none;
    }

    section .comm__Inner ul.item picture{
      background: #fff;
    }

    section .comm__Inner ul.item li img{
      width: 100%;
      object-fit: scale-down;
      max-height: 300px;
      max-width: 100%;
      background: #fff;
      padding: 1em;
      transition: transform .6s ease;
    }
    section .comm__Inner ul.item li, section .comm__Inner ul.item li.four{
      overflow: hidden;
      max-height: 300px;
    }

    section .comm__Inner ul.item li:hover img {
      transform: scale(1.1);
    }
    section .comm__Inner ul.item li.four img{
      width: 100%;
      object-fit: scale-down;
      max-height: 300px;
      min-height: 300px;
      background: #fff;
      padding: 1em;
      transition: transform .6s ease;
    }
    section .comm__Inner ul.item li.four picture:hover img {
      transform: scale(1.1);
    }

    section#products .comm__Inner .top__wrap{
      display: flex;
      column-gap: 1.56vw;
      align-items: center;
      margin-bottom: 2.416666666666667vw;
    }
    section#products .comm__Inner .top__wrap h2{
      flex-basis: 100%;
    }

    .products__slider{
      position: absolute;
      z-index: 1;
      width: 100vw;
      list-style: none;
      padding: 0;
      bottom:0;
      left:0;
      opacity: 0.2;
    }
    section#products  li{padding: 0;list-style: none;}

    .products__item {
      margin-right: 10px;
      margin-left: 10px;
  }
  
  .products__item img {
      height: auto;
      width: 100%;
      object-fit: cover;
  }

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

    section .comm__Inner ul.item li.four img{
      min-height: 150px;
      max-height: 150px;
    }

    section .comm__Inner ul.item li img{
      min-height: 150px;
      max-height: 150px;
      object-fit: scale-down;
    }

    section#products{
      padding-top: 8.333333333333332vw;
    }

    section#products .comm__Inner .top__wrap{
      flex-wrap: wrap;
    }

    section#products .comm__Inner .top__wrap p{
      margin-top: 0;
    }
    section .comm__Inner ul.item li, section .comm__Inner ul.item li.four{
      overflow: hidden;
      max-height: 150px;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1024px) {

    section#products .comm__Inner .top__wrap{
      flex-wrap: wrap;
    }

    section#products .comm__Inner .top__wrap h2{
      margin-top: 0;
    }

  }

    /*************  Brand ******************/

    section#brand{
      background: url(../images/brand-bg.webp)no-repeat center;
      background-size: cover;
      padding:4.333333333333332vw var(--row-space);
      position: relative;
    }
  
    section#products .comm__Inner{
      position: relative;
      z-index: 2;
      margin-bottom: 2.416666666666667vw;
    }

    .brand__slider{
      padding: 0;
      list-style: none;
      margin: 0 calc(50% - 50vw) 2.416666666666667vw;
      width: 100vw;
    }

    #brand a.btn{
      margin-top: 2.333333333333332vw ;
    }

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

      .brand__slider{
        margin-bottom: 1.5em;
      }
    }


/*************  shop ******************/

section#shop, section#recruit{
  background: #000;
  padding:4.333333333333332vw 2.46vw;
}

section#shop .comm__Inner{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  max-width: 1760px;
  margin: auto;
  gap: 1.5625vw;
  width: 100%;
  align-items: center;
}

section#shop .comm__Inner .Item{
  width: var(--flex_hurf_space);
}

section#shop .comm__Inner .Item:first-child{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5625vw;
}

section#shop .comm__Inner .Item:first-child picture{
  width: var(--flex_hurf_space);
  flex-grow: 2;
}

section#shop .comm__Inner .Item:first-child picture:first-child{
   width: 100%;
   flex-grow: 0;
}

section#shop .comm__Inner .Item:first-child picture img{
  width: 100%;
}

section#shop .comm__Inner .Item:last-child{
  padding:clamp(1em,12.222222222222221vw,110px);
}

dl.border{
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  border-top:#423e3e 0.5px solid;
}

dl.border dt, dl.border dd{
  color:#fff;
  font-size: clamp(15px,1.09375vw,17px);
  font-family: "ryo-display-plusn", serif;
  margin: 0;
  padding: .5em 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

dl.border dt{
  width:25%;
  border:#423e3e 0.5px solid;
  border-left: none;
  border-right: none;
  border-top: none;
}

dl.border dd{
  width:75%;
  border:#423e3e 0.5px solid;
  border-right: none;
  border-top: none;
}

picture.logo{
  width: clamp(120px,21.354166666666664vw,400px);
  margin: 2.333333333333332vw auto;
  display: block;
}

.access__map iframe{
  width: 100vw !important;
  height:60vh !important;
}

section.recruit::after{
  content: '';
  background: #161616;
  position: absolute;
  bottom: 0;
  left:0;
  width: 100vw;
  height: 50%;
}

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

  picture.logo{
    width: 200px;
    margin-bottom: 1em;
  }

  section#shop .comm__Inner{
    flex-wrap: wrap;
  }

  section#shop .comm__Inner .Item, section#shop .comm__Inner .Item:last-child{
    width: 100%;
    padding-left: var(--row-space);
    padding-right: var(--row-space);
  }

  section#shop .comm__Inner .Item:last-child{
    padding-bottom: var(--row-space);
    padding-top: var(--row-space);
  }

  dl.border dt, dl.border dd{
    font-size: clamp(14px,1.09375vw,15px);
  }

  dl.border dt{
    width: 30%;
  }

  dl.border dd{
    width: 70%;
  }

}

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

  section#shop .comm__Inner{
    flex-wrap: wrap;
  }
  section#shop .comm__Inner .Item{
    width: 100%;
  }

  section#shop .comm__Inner .Item:last-child{
    padding-left: 2vw;
    padding-right: 2vw;
    padding-top: 0;
    padding-bottom: 2vw;
  }
  picture.logo{
    width:clamp(300px, 21.354166666666664vw, 400px);;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1500px) {
section#shop .comm__Inner .Item:last-child{
  padding:clamp(1em,12.222222222222221vw,20px);
}
}


/*************  shop ******************/

.scroll__wrap{
  position: relative;
  height: 80px;
  margin-top: 20px;
}

.scroll_down{
  position:absolute;
  bottom: 0px;
  left: 50%;
  height: 100%;
}

.scroll_down a{
  position: absolute;
  left: 10px;
  bottom: 15px;
  color: #000;
  font-size: 10px;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: .2em;
  writing-mode: vertical-lr;
  text-decoration: none;
  text-transform: uppercase;
}

.scroll_down:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background:#000;
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
    z-index: 3;
}

@keyframes circlemove{
  0%{bottom:80px;}
  100%{bottom:0px;}
}

@keyframes cirlemovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}

.scroll_down:after{
  content:"";
  position: absolute;
  top:0;
  left:0;
  width:2px;
  height: 80px;
  background:#ddd;
}

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

  .scroll__wrap{
    display: none;
  }
}

/************オンラインショップ*********/

section.onlineshop{
  background: url(../images/online__bg.jpg) no-repeat center;
  background-size: cover;
}

section.onlineshop .comm__Inner{
  background: url(../images/onlineshop__inner.jpg)no-repeat;
  background-size: cover;
  padding: clamp(1em, 3.416666666666667vw, 5.416666666666667vw);
  max-width: 1100px;
  margin: auto;
}

section.onlineshop h2{
  color:#fff;
  margin: 0 auto;
  max-width: 1100px;
  margin: auto;
  text-align: center;
}

section.onlineshop h3.title{
  text-align: center;
  font-size: clamp(1.4rem,1.86vw,2.1vw);
  padding-bottom: .5em;
  border-bottom: 1px solid #a6957a;
  font-family: 'Noto Serif JP', "ヒラギノ明朝 ProN W6", HiraMinProN-W6, HG明朝E, "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  margin-top: 0;
}

section.onlineshop picture{
  display: block;
  margin-bottom: 2em;
}