@charset "UTF-8";

/*
///////////////////////////////////////////////////////////////////////////////////////
 contents__wrapper
 ///////////////////////////////////////////////////////////////////////////////////////
*/

.noah_barour{
  --font-noto: "noto-sans-cjk-jp", sans-serif;
}

.noah_barour p,
.noah_barour span,
.noah_barour a {
  font-family: var(--font-noto);
  font-weight: 400;
  font-style: normal;
}

.noah_barour a{
  display: inline-block;
  line-height: 1;
}

.noah_barour .crdt span{
  text-decoration: underline;
  text-decoration-color: #acacac;
  text-underline-offset: 5px;
}

.noah_barour .contents_maintxt{
  font-family: var(--font-f37-ginger);
  font-weight: 700;
  font-style: normal;
  text-align: center;
  line-height: 1.5;
  word-spacing: 0.1rem;
}

.noah_barour .contents_maintxt span{
  font-family: var(--font-noto);
  font-weight: 700;
}

.noah_barour .store-location_txt{
  line-height: 1.5;
}

.noah_barour .grid_block{
  display: grid;
}

.noah_barour .flex_block{
  display: flex;
}

.noah_barour .credit__wrapper{
  display: flex;
  flex-direction: column;
}

.noah_barour .pic01,
.noah_barour .pic05,
.noah_barour .pic16 {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
}

.noah_barour .pic02,
.noah_barour .pic06,
.noah_barour .pic17 {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

.noah_barour .product-list_btn{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  margin-right: auto;
  margin-left: auto;
}

.noah_barour .block__wrapper05 .credit__wrapper{
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

.noah_barour .block__wrapper05 .about-noah_txt{
  text-align: center;
}

.noah_barour .about-noah_txt{
  text-align: left;
}

.noah_barour .logo{
  margin-right: auto;
  margin-left: auto;
}

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

  .noah_barour{
    margin-bottom: 46.6rem;
  }

  .noah_barour p,
  .noah_barour span,
  .noah_barour a {
    font-size: 2rem;
  }

  .noah_barour .about-noah_txt{
    line-height: 1.7;
  }

  .noah_barour .contents_maintxt{
    font-size: 2.8rem;
    margin: 5.8rem auto 5.3rem;
    white-space: nowrap;
  }

  .noah_barour .contents_maintxt span {
    font-size: 2.2rem;
  }

  .noah_barour .contents_detail-txt{
    margin-bottom: 12.8rem;
    line-height: 1.7;
    text-align: justify;
  }

  .noah_barour .contents__wrapper{
    width: 86rem;
    margin: 0 auto;
  }

  .noah_barour .mb-30{
    margin-bottom: 3rem;
  }

  .noah_barour .mb-130{
    margin-bottom: 13rem;
  }

  .noah_barour .credit__wrapper {
    padding-top: 0.5rem;
    row-gap: 2.4rem;
  }

  .mv__wrapper{
    max-width: 128rem;
    margin: 0 auto;
  }
  /* ---------- block__wrapper 01 */
  .noah_barour .grid_block.block01{
    grid-template-rows: 40.3rem auto auto;
    grid-template-columns: 43rem auto auto;
    height: 94.1rem;
  }

  .noah_barour .pic01{
    width: 64.5rem;
  }

  .noah_barour .pic02{
    width: 43rem;
  }

  .noah_barour .pic03{
    width: 64.5rem;
    margin-right: auto;
    margin-left: 0;
  }

  .noah_barour .flex_block.block02{
    flex-direction: row-reverse;
  }

  .noah_barour .pic04,
  .noah_barour .item01 {
    width: 43rem;
  }

  /* ---------- block__wrapper 02 */
  .noah_barour .grid_block.block03{
    grid-template-rows: 40.3rem auto auto;
    grid-template-columns: 43rem auto auto;
    height: 94rem;
  }

  .noah_barour .pic05{
    width: 64.5rem;
  }

  .noah_barour .pic06{
    width: 43rem;
    margin-right: 0;
    margin-left: auto;
  }

  .noah_barour .pic07{
    width: 64.5rem;
    margin-right: 0;
    margin-left: auto;
  }

  .noah_barour .pic08,
  .noah_barour .item02 {
    width: 43rem;
  }

  /* ---------- block__wrapper 03 */
  .noah_barour .pic09{
    width: 64.5rem;
    margin-right: auto;
    margin-left: 0;
  }

  .noah_barour .pic10{
    width: 80.7rem;
    margin-right: auto;
    margin-left: 0;
  }

  .noah_barour .pic11,
  .noah_barour .item03 {
    width: 43rem;
  }

  .noah_barour .pic12{
    width: 64.5rem;
    margin-right: auto;
    margin-left: 0;
  }

  /* ---------- block__wrapper 04 */
  .noah_barour .pic13{
    width: 43rem;
    margin-right: auto;
    margin-left: auto;
  }

  .noah_barour .pic14{
    width: 64.5rem;
    margin-right: auto;
    margin-left: 0;
  }

  .noah_barour .pic15{
    width: 64.5rem;
    margin-right: 0;
    margin-left: auto;
  }

  .noah_barour .block05{
    grid-template-rows: 25.8rem auto auto;
    grid-template-columns: 43rem auto auto;
    height: 79.6rem;
  }

  .noah_barour .pic16{
    width: 64.5rem;
  }

  .noah_barour .pic17{
    width: 43rem;
  }

  .noah_barour .pic18{
    width: 43rem;
    margin-right: auto;
    margin-left: auto;
  }

  .noah_barour .item04,
  .noah_barour .item05 {
    width: 43rem;
  }

  /* ---------- block__wrapper 04 */
  .noah_barour .pic13{
    width: 43rem;
    margin-right: auto;
    margin-left: auto;
  }

  .noah_barour .item{
    width: 43rem;
  }

  /* ---------- product-list_btn */
  .noah_barour .product-list_btn{
    width: 28rem;
    height: 4rem;
    margin-top: 12.4rem;
    margin-bottom: 13rem;
  }

  /* ---------- about-noah__wrapper */
  .noah_barour .logo{
    width: 39.5rem;
  }

}

@media only screen and (max-width: 767px) {
  .noah_barour{
    margin-bottom: calc(312* (100vw / 750));
  }

  .noah_barour p,
  .noah_barour .about-noah_txt{
    width: calc(650* (100vw / 750));
    font-size: calc(22* (100vw / 750));
    margin-right: auto;
    margin-left: auto;
  }

  .noah_barour .about-noah_txt{
    line-height: 1.5454545455;
  }

  .noah_barour span,
  .noah_barour a,
  .noah_barour .store-location_txt {
    font-size: calc(20* (100vw / 750));
  }

  .noah_barour .contents_detail-txt{
    margin-bottom: calc(130* (100vw / 750));
    line-height: 1.5454545455;
    text-align: justify;
  }

  .noah_barour .contents_maintxt{
    font-size: calc(28* (100vw / 750));
    margin: calc(60* (100vw / 750)) auto calc(60* (100vw / 750));
  }

  .noah_barour .contents_maintxt span{
    font-size: calc(21* (100vw / 750));
  }

  .noah_barour .mb-30{
    margin-bottom: calc(30* (100vw / 750));
  }

  .noah_barour .mb-130{
    margin-bottom: calc(130* (100vw / 750));
  }

  .noah_barour .credit__wrapper{
    width: calc(650* (100vw / 750));
    row-gap: calc(25* (100vw / 750));
    margin-right: auto;
    margin-left: auto;
  }
  /* ---------- block__wrapper 01 */
  .noah_barour .grid_block.block01{
    grid-template-rows: calc(642* (100vw / 750)) auto auto;
    grid-template-columns: calc(375* (100vw / 750)) auto auto;
    height: calc(1110* (100vw / 750));
  }

  .noah_barour .pic01{
    width: calc(700* (100vw / 750));
  }

  .noah_barour .pic02{
    width: calc(375* (100vw / 750));
  }

  .noah_barour .pic03{
    width: calc(725* (100vw / 750));
    margin-right: 0;
    margin-left: auto;
  }

  .noah_barour .pic04,
  .noah_barour .item01 {
    width: calc(375* (100vw / 750));
  }

  /* ---------- block__wrapper 02 */
  .noah_barour .grid_block.block03{
    grid-template-rows: calc(673*(100vw / 750)) auto auto;
    grid-template-columns: calc(375*(100vw / 750)) auto auto;
    height: calc(1142*(100vw / 750));
  }

  .noah_barour .pic05{
    width: calc(700* (100vw / 750));
  }

  .noah_barour .pic06{
    width: calc(375* (100vw / 750));
  }

  .noah_barour .pic07{
    width: calc(725* (100vw / 750));
    margin-right: 0;
    margin-left: auto;
  }

  .noah_barour .pic08,
  .noah_barour .item02 {
    width: calc(375* (100vw / 750));
  }

  /* ---------- block__wrapper 03 */
  .noah_barour .pic09{
    width: calc(726* (100vw / 750));
    margin-right: auto;
    margin-left: 0;
  }

  .noah_barour .pic10{
    width: calc(725* (100vw / 750));
    margin-right: 0;
    margin-left: auto;
  }

  .noah_barour .pic11,
  .noah_barour .item03 {
    width: calc(375* (100vw / 750));
  }

  .noah_barour .pic12{
    width: calc(725* (100vw / 750));
    margin-right: auto;
    margin-left: 0;
  }

  /* ---------- block__wrapper 04 */
  .noah_barour .pic13{
    width: calc(375* (100vw / 750));
    margin-right: auto;
    margin-left: auto;
  }

  .noah_barour .pic14{
    width: calc(726* (100vw / 750));
    margin-right: auto;
    margin-left: 0;
  }

  .noah_barour .pic15{
    width: calc(650* (100vw / 750));
    margin-right: 0;
    margin-left: auto;
  }

  .noah_barour .block05{
    grid-template-rows: calc(390* (100vw / 750)) auto auto;
    grid-template-columns: calc(375* (100vw / 750)) auto auto;
    height: calc(858* (100vw / 750));
  }

  .noah_barour .pic16{
    width: calc(650* (100vw / 750));
  }

  .noah_barour .pic17{
    width: calc(375* (100vw / 750));
  }

  .noah_barour .item04,
  .noah_barour .item05 {
    width: calc(375* (100vw / 750));
  }

  /* ---------- block__wrapper 05 */

  .noah_barour .pic13{
    width: calc(375* (100vw / 750));
    margin-right: auto;
    margin-left: auto;
  }

  .noah_barour .item{
    width: calc(375* (100vw / 750));
  }

  .noah_barour .pic18{
    width: calc(375* (100vw / 750));
    margin-right: auto;
    margin-left: auto;
  }

  /* ---------- about-noah__wrapper */
  .noah_barour .logo{
    width: calc(395* (100vw / 750));
    margin-right: auto;
    margin-left: auto;
  }

  /* ---------- product-list_btn */
  .noah_barour .product-list_btn{
    width: calc(280* (100vw / 750));
    height: calc(40* (100vw / 750));
    margin-top: calc(130* (100vw / 750));
    margin-bottom: calc(130* (100vw / 750));
  }
}


/*
///////////////////////////////////////////////////////////////////////////////////////
 animation
 ///////////////////////////////////////////////////////////////////////////////////////
*/

.noah_barour .jsFade {
  opacity: 0;
  transform: translateY(20px);
}

.noah_barour .jsFade.isActive {
  opacity: 1;
  transform: translateY(0px);
  transition: all .7s;
}

.noah_barour .jsFade.fade-delay{
  transition-delay: 0.5s;
}

@media only screen and (min-width: 768px) {
  .noah_barour .jsFade.fade-delay_pc{
    transition-delay: 0.5s;
  }
}

@media only screen and (max-width: 767px) {
  .noah_barour .jsFade.fade-delay_sp{
    transition-delay: 0.5s;
  }
}