@charset "utf-8";
@import url("_reset.css?ver=1.6.0");
@import url("_setting.css?ver=1.6.0");
@import url("_wp.css?ver=1.6.0");
@import url("_salon-search.css?ver=1.6.0");
@import url("_concept.css?ver=1.6.0");
@import url("_contact.css?ver=1.6.0");
@import url("_faq.css?ver=1.6.0");

/*テスト*/
@media (max-width: 767px) {
  .pcbr {
    display: none;
  }
}

.maintitle_pg{
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  line-height: 2em;
  font-weight: 400;
  letter-spacing: 0.8px;
  color: #333;
  margin-bottom: 3em;
}

.page-shopsearch .inner {
  padding: 75px 40px;
  max-width: 1024px;
  margin: 0 auto;
}


.tac {
  text-align: center !important;
}

.mb-s {
  margin-bottom: 2rem;
}

.mb-m {
  margin-bottom: 4rem;
}

.mb-l {
  margin-bottom: 6rem;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

@media (min-width: 768px) {
  html {
    scroll-padding-top: 80px;
  }
  .sp {
    display: none !important;
  }
  * {
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
}

@media (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

body {
  font-size: 1.4rem;
  line-height: 1.8;
  font-family: var(--font);
  color: var(--normalC);
  letter-spacing: 0.05rem;
  background-size: 100% auto;
  position: relative;
  min-width: 1200px;
 
  
}

@media (max-width: 767px) {
  html, body {
    width: 100%;
    min-width: 0;
  }
}

img, svg {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--mainC);
  text-decoration: none;
  transition: all 300ms;
}

@media (any-hover: hover) {
  a {
    transition: all var(--ease) 300ms;
    cursor: pointer;
  }
  a:hover {
    opacity: 0.92;
  }
}

.btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  &.one {
    display: block;
    .btn {
      @media (min-width: 768px) {
        margin: 0 auto;
      }
    }
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    background: var(--mainC);
    text-decoration: none;
    position: relative;
    width: 100%;

    @media (min-width: 768px) {
      margin: 0 20px;
    }

    &::after {
      content: '';
      position: absolute;

      width: 100%;
      height: 100%;
      border: 1px solid var(--mainC);
      top: 5px;
      left: 5px;
    }


    @media (max-width: 767px) {
      margin-bottom: 2rem;
    }

    @media (min-width: 768px) {
      width: 270px;
      height: 60px;
    }
  }
}

.btn-more {
  display: inline-block;
  padding: 0 1rem 0.5rem;
  border-bottom: 1px solid;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
    z-index: 2;
    background: rgba(0, 0, 0, 0.2);
    transition: transform var(--easeInCubic) 1.2s 0.2s;
    transform: translate3d(0, -100px, 0);
    @media (max-width: 767px) {
      background: #D2C8B9;
    }
    &.is-active {
      transform: translate3d(0, 0, 0);
    }

  & h1 {

    margin-left: 8rem;
    @media (max-width: 767px) {
      padding: 3vw 0 2vw 2vw;
      width: 30vw;
      margin-left: 0;
      img{
        width: 100%;
      }
      svg{
        height: 15px;
        path{
          fill: var(--colorB2);
        }
      }
    }

  }
  & .gnav {
    &.is-active {
      transform: translateY(0vh);
      overflow-y: scroll;
      z-index: 2;
    }
    & ul {
      display: flex;
      & li {
        & a {
          color: #fff;
          text-decoration: none;
          padding: 2rem;
          display: flex;
          align-items: center;
          justify-content: center;
          
          &:hover {
            color: var(--mainC);
          }
          &.reserve{
            background: #80746A;
            color: #fff;
            display: flex;
            align-items: center;
            margin-left: 2rem;
            & i{
              background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 18V20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V8H4V18M22 6V14C22 14.5304 21.7893 15.0391 21.4142 15.4142C21.0391 15.7893 20.5304 16 20 16H8C7.46957 16 6.96086 15.7893 6.58579 15.4142C6.21071 15.0391 6 14.5304 6 14V6C6 5.46957 6.21071 4.96086 6.58579 4.58579C6.96086 4.21071 7.46957 4 8 4H20C20.5304 4 21.0391 4.21071 21.4142 4.58579C21.7893 4.96086 22 5.46957 22 6ZM20 6H8V14H20V6Z" fill="white"/></svg>');
              background-repeat: no-repeat;
              background-position: 0 0;
              background-size: 100% auto;
              display: block;
              width: 2rem;
              height: 2rem;
              margin-left: 1rem;
            }
          }
        }
      }
    }

    @media (max-width: 767px) {
      transition: all 300ms;
      transform: translate3d(0, -100vh, 0);
      height: 100vh;
      width: 100%;
      overflow-y: scroll;
      background: rgba(255, 255, 255, 0.9);
      position: absolute;
      left: 0;
      top: 0;
      padding: 20px;

      ul {
        display: block!important;
        padding: 60px 0;

        li {
          text-align: center;

          a {
            padding: 15px;
            display: block;
            color: var(--mainC);
          }


        }
      }
    }
  }

  & .button {
    position: fixed;
    z-index: 100;
    right: 16px;
    height: 20px;
    width: 36px;
    top: 3vw;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    &.is-active {
      & .button-bar {
        height: 0;
        &::before {
          opacity: 1;
          top: 50%;
          transform: rotate(45deg) translateY(-50%);
          transition: 0.3s ease;
        }
        &::after {
          opacity: 1;
          top: 50%;
          transform: rotate(-45deg) translateY(-50%);
          transition: 0.3s ease;
          width: 100%;
        }
      }
    }
    & .button-bar {
      display: block;
      content: "";
      width: 100%;
      height: 1px;
      background: #333333;
      &::before,
      &::after {
        display: block;
        position: absolute;
        content: "";
        width: 100%;
        height: 1px;
        background: #333333;
        transition: 0.3s ease;
      }
      &::before {
        top: 0;
      }
      &::after {
        bottom: 0;
        /* width: 60%; */
      }

    }
  }

}

body:not(.home) .header {
  transform: translate3d(0, 0, 0);
  opacity: 0;
  transition: opacity 0.3s ease;
  &.is-active {
    opacity: 1;
  }
}




.footer {
  background: #D2C8B9;
  padding: 7.5rem 14rem;
  @media (max-width: 767px){
    padding: 6rem 4rem;
    width: 100vw;
    overflow: hidden;
  }
  & .inner{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4rem;
    @media (max-width: 767px) {
      flex-direction: column;
      gap: 4rem;
    }

    & .footer-main{
      & h1{
        margin-bottom: 2rem;
        & svg{
          & path{
            fill: var(--normalC);
          }
        }
      }
      & ul{
        & li{
          margin-bottom: 1rem;
          &.sns{
            display: none;
          }
          & a{
            padding: 0.5rem 0;
          }
        }
      }
    }

    & .footer-company{
      & .footer-company__label{
        font-size: 1.1rem;
        letter-spacing: 0.2em;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: 500;
        margin-bottom: 2rem;
        opacity: 0.6;
      }
      & address{
        font-style: normal;
        line-height: 2;
        & .footer-company__name{
          font-size: 1.3rem;
          margin-bottom: 1.5rem;
          @media (max-width: 767px) {
            font-size: 1.2rem;
          }
        }
        & .footer-company__addr{
          font-size: 1.1rem;
          @media (max-width: 767px) {
            font-size: 1rem;
          }
        }
      }
    }
  }
 
  & .copy{
    height: 100%;
    font-size: 0.9rem;
    margin-top: 3rem;
  }

}

.tablenav {
  margin: 1em auto 7em;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap:1rem;
  justify-content: center;
  a {}
}

a.page-numbers,
.tablenav .current {
  text-decoration: none;
  display: inline-block;
  padding: 5px 15px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 3px;
  background: var(--snob_gray);
  color: var(--snob_deepgray);
}

a.page-numbers:hover {
  color: white;
  background-color: var(--snob_orange);
}

.tablenav .current {
  color: white;
  border-color: var(--snob_orange);
  font-weight: bold;
  background-color: var(--snob_orange);
}

.page-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;

  a {
    display: block;
    text-align: center;
    width: 140px;
    padding: 15px;
  }
}

.home{
  & section{
    padding:6rem 11rem;
    position: relative;
    @media (max-width: 767px){
      padding: 6rem 2rem;
      
    }
  }
  & .fv{
    position: relative;
    height: 100vh;
    @media (max-width: 767px){
      width: 100vw;
    }
    & .fv-slides{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100vh;
    }
    & .fv-slide{
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1.5s ease;
      &.is-active{
        opacity: 1;
      }
      & img{
        width: 100%;
        height: 100vh;
        object-fit: cover;
        object-position: center;
        @media (max-width: 767px){
          width: 100vw;
        }
      }
    }
    & .inner{
      position: relative;
      display: flex;
      align-items: center;
      height: 100%;
      justify-content: flex-end;
     
      max-width: 1400px;
      @media (max-width: 767px){
        padding: 0 2rem 0rem;
        overflow: hidden;
        justify-content: center;
        align-items: center;
      }
    }
    & h1{
      font-family: var(--fm);
      color: #fff;
      font-size: 3.6rem;
      position: relative;
      z-index: 1;
      text-align: right;
      transition: all 1s 300ms;
      opacity: 0;
      filter: blur(30px);
      & svg {
        width: 302px;
        height: auto;
        @media (max-width: 767px){
          width: 236px;
        }
      }
      &.is-active{
        opacity: 1;
        filter: blur(0px);
        @media (max-width: 767px){
          filter: blur(0px) drop-shadow(0 2px 16px rgba(0, 0, 0, 0.85));
        }
      }
    }
  }
  & main{
     @media (max-width: 767px){
      width: 100vw;
     }
    & .target-over-01 , & .target-over-02{
      position: absolute;
      width: 100%;
      height: calc(100vh - 30%);
      top: 70%;
      left: 0;
      z-index: -1;
    }
    & .bg-over{
      position: sticky;
      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;
      margin-bottom: -100vh;
    }
    & .bg-wrap{
      position: relative;
      &.bg-wrap-000, &.bg-wrap-001{
        & .bg-base{
          position: sticky;
          width: 100%;
          height: 100vh;
          top: 0;
          left: 0;
          margin-bottom: -100vh;

          & img{
            width: 100%;
            height: 100vh;
            object-fit: cover;
            object-position: center;
          }
        }
      }
      
    }
    & section{
      & .inner{
        padding: 9rem 0rem 14rem;
        width: 100%;
        margin: 0 auto 0;
        @media (max-width: 767px){
          width: 100%;
          padding: 6rem 2rem;
        }
        
        & .header-area{
          display: flex;
          justify-content: space-between;
          font-family: var(--fm);
          color: #fff;
          position: relative;
          z-index: 1;
          margin-bottom: 6rem;
          transition: all 1s 300ms;
          opacity: 0;
          filter: blur(10px);
          @media (max-width: 767px){
            flex-wrap: wrap;
            transition: all 1s 0ms;
            margin-bottom: 3rem;
          }
          &.blk{
            color: var(--colorB2);
          }
          & .titles{
            width: 300px;
            @media (max-width: 767px){
              width: 100%;
              margin-bottom: 1.5rem;
            }
            & span{
              font-size: 4rem;
              line-height: 1em;
              &.num{
                font-size: 9rem;
                @media (max-width: 767px){
                  font-size: 6rem;
                }
              }

            }
            & p{
              font-size: 2.4rem;
            }
          }
          & hgroup{
            width: calc(100% - 300px);
            @media (max-width: 767px){

              width: 100%;
            }
            & .title{
              @media (max-width: 767px){
                margin-bottom: 1.5rem;
              }
            }
            & .sub{
              font-size: 1.6rem;
              @media (max-width: 767px){
                font-size: 1.2rem;
              }
            }
          }
        }
        & .image-area{
          display: flex;
          position: relative;
          z-index: 1;
          gap: 0 5rem;
          &.oil-balm{
            justify-content: center;
            gap: 0 10rem;
            @media (max-width: 767px){
              flex-direction: column;
              gap: 5rem 0;
            }
            & .image{
              max-width: calc((60% - 20rem) / 2);
              min-width: calc((100% - 10rem) / 4);
              @media (max-width: 767px){
                max-width: 100%;
                min-width: 100%;
              }
            }
          }
          @media (max-width: 767px){
            flex-direction: column;
            gap: 2rem 0;
          }
          & .image{
            width: calc((100% - 10rem) / 4);
           
            @media (max-width: 767px){
              width: 100%;
            }
            & picture{
              & img{
                transition: all 1s 300ms;
                opacity: 0;
                transform: scale(1.1, 1.1, 0);
                width: 100%;
                  height: auto;
                @media (max-width: 767px){
                  
                }
              }
            }
          }
        }

        &.is-active{
          & .header-area{
            opacity: 1;
            filter: blur(0px);
          }
          & .image-area{
            & .image{
              & picture{
                & img{
                  transform: scale(0, 0, 0);
                  opacity: 1;

                }
              }
            }
          }
        }
        
      }
      &.sec-001, &.sec-002, &.sec-003{
        background: #fff;
        /* min-height: 100vh; */
        position: relative;
        padding: 0;

        & .bg{
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          position: sticky;
          position: absolute;

          & img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
          }
        }

      }

      &.sec-001, &.sec-002{
        margin-bottom: 50rem;
        padding: 0 11rem;
        @media (max-width: 767px){
          padding: 0 2rem;
          margin-bottom: 60vh;
        }
      }
      &.sec-003{
        /* margin-top: 40rem; */

        padding: 0 11rem;
        @media (max-width: 767px){
          padding: 0 2rem;
        }
        & .inner{
          & .header-area{
            & .titles{
              & span{
              }
              & p{}
            }
          }
          & hgroup{
            & .sub{
              font-size: 2rem;
              @media (max-width: 767px){
                font-size: 1.2rem;
              }
            }
          }
        }
      }
     

    }
  }
}

.home .sec-top-concept {
  position: relative;
  padding: 8rem 14rem;
  min-height: 74rem;
  display: flex;
  align-items: center;
  overflow: hidden;

  @media (max-width: 767px) {
    padding: 6rem 2rem;
    min-height: 80svh;
  }

  & .bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    & picture {
      display: block;
      width: 100%;
      height: 120%;
    }

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center right;
      @media (max-width: 767px) {
        object-position: center center;
      }
    }
  }

  & .inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0;
  }

  & .text-wrap {
    color: #fff;
  }

  & .sec-top-concept__heading {
    width: 28rem;
    max-width: 100%;

    @media (max-width: 767px) {
      width: 60%;
    }

    & img {
      width: 100%;
      height: auto;
    }
  }

  & .sec-top-concept__body {
    margin-top: 7rem;
    font-family: var(--font-shippori);
    font-size: 1.8rem;
    letter-spacing: 0.128rem;
    color: #fff;
    width: 46rem;
    max-width: 100%;
    line-height: 3.6;

    @media (max-width: 767px) {
      margin-top: 4rem;
      width: 100%;
      font-size: 1.2rem;
    }

    & p {
      margin-bottom: 1.6rem;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.home main section.sec-001,
.home main section.sec-002 {
  padding: 0 14rem;

  @media (max-width: 767px) { padding: 0 2rem; }

  & .bg .overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  & .inner {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    padding-bottom: 16rem;
    @media (max-width: 767px) { gap: 3rem; padding-bottom: 8rem; }
  }

  & .header-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5rem;
    margin-bottom: 0;
    width: 100%;
    @media (max-width: 767px) { gap: 3rem; }
  }

  & .series-label {
    font-family: var(--font-shippori);
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
    @media (max-width: 767px) { font-size: 1.4rem; letter-spacing: 0.14rem; }
  }

  & .product-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5rem;
    @media (max-width: 767px) { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  }

  & .inner .header-area .titles {
    width: 157px;
    flex-shrink: 0;
    @media (max-width: 767px) { width: auto; }
  }

  & .product-title {
    font-family: var(--font-shippori);
    font-size: 2.4rem;
    letter-spacing: 0.192rem;
    @media (max-width: 767px) { font-size: 1.6rem; letter-spacing: 0.1rem; }
  }

  & .flavor-area {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    @media (max-width: 767px) { gap: 1rem; }
  }

  & .flavor-row {
    display: flex;
    align-items: center;
    width: 41.5rem;
    max-width: 100%;
    @media (max-width: 767px) { width: 100%; }
  }

  & .flavor-label {
    font-family: var(--font-shippori);
    font-size: 1.5rem;
    letter-spacing: 0.15rem;
    white-space: nowrap;
    flex-shrink: 0;
    @media (max-width: 767px) { font-size: 1.2rem; }
  }

  & .flavor-line {
    display: block;
    flex: 1;
    height: 1px;
    background: #fff;
    margin: 0 2rem;
    min-width: 0;
    @media (max-width: 767px) { margin: 0 1.2rem; }
  }

  & .flavor-name {
    font-family: var(--font-shippori);
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
    white-space: nowrap;
    flex-shrink: 0;
    @media (max-width: 767px) { font-size: 1.6rem; letter-spacing: 0.1rem; }
  }

  & .sub {
    font-size: 1.6rem;
    letter-spacing: 0.128rem;
    line-height: 1.8;
    max-width: 67.6rem;
    height: auto;
    width: 100%;
    @media (max-width: 767px) { font-size: 1.2rem; letter-spacing: 0.06rem; max-width: 100%; }
  }
}

.home main section.sec-001 { & .bg .overlay { background: rgba(13, 48, 73, 0.5); } }
.home main section.sec-002 { & .bg .overlay { background: rgba(39, 83, 56, 0.5); } }

.home main section.sec-003 {
  padding: 0 14rem;
  background-color: #d9d3c5;

  @media (max-width: 767px) { padding: 0 2rem; }

  & .bg img {
    mix-blend-mode: overlay;
    opacity: 0.5;
  }

  & .inner {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    padding-bottom: 16rem;
    @media (max-width: 767px) { gap: 3rem; padding-bottom: 8rem; }
  }

  & .header-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5rem;
    margin-bottom: 0;
    width: 100%;
    @media (max-width: 767px) { gap: 3rem; }
  }

  & .series-label {
    font-family: var(--font-shippori);
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
    @media (max-width: 767px) { font-size: 1.4rem; letter-spacing: 0.14rem; }
  }

  & .inner .header-area .titles {
    width: auto;
    max-width: 100%;
    & svg { max-width: 100%; height: auto; }
    @media (max-width: 767px) { margin-bottom: 0; }
  }

  & .flavor-area {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    @media (max-width: 767px) { gap: 1rem; }
  }

  & .flavor-row {
    display: flex;
    align-items: center;
    width: 41.5rem;
    max-width: 100%;
    @media (max-width: 767px) { width: 100%; }
  }

  & .flavor-label {
    font-family: var(--font-shippori);
    font-size: 1.5rem;
    letter-spacing: 0.15rem;
    white-space: nowrap;
    flex-shrink: 0;
    @media (max-width: 767px) { font-size: 1.2rem; }
  }

  & .flavor-line {
    display: block;
    flex: 1;
    height: 1px;
    background: var(--colorB2);
    margin: 0 2rem;
    min-width: 0;
    @media (max-width: 767px) { margin: 0 1.2rem; }
  }

  & .flavor-name {
    font-family: var(--font-shippori);
    font-size: 2.4rem;
    letter-spacing: 0.24rem;
    white-space: nowrap;
    flex-shrink: 0;
    @media (max-width: 767px) { font-size: 1.6rem; letter-spacing: 0.1rem; }
  }

  & .sub {
    font-size: 1.6rem;
    letter-spacing: 0.128rem;
    line-height: 1.8;
    max-width: 67.6rem;
    height: auto;
    width: 100%;
    @media (max-width: 767px) { font-size: 1.2rem; letter-spacing: 0.06rem; max-width: 100%; }
  }

  & .image-area.oil-balm {
    justify-content: flex-start;
    gap: 0 5rem;
    @media (max-width: 767px) { flex-direction: column; gap: 3rem 0; }

    & .image {
      width: calc((100% - 10rem) / 4);
      min-width: unset;
      max-width: unset;
      @media (max-width: 767px) { width: 100%; }
    }
  }
}

.sub{
  & main{
    margin-top: 3rem;
    @media (max-width: 767px){
      margin-top: 3rem;
      
    }
  }
}

.btn{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;
  background: var(--snob_brown);
  padding: 1rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 300ms;
  &:hover{
    opacity: 0.92;
  }
  &:has(i) {
    i {
      margin-left: 1rem;
      display: inline-block;
      svg{
        transform: translate3d(0, -0.3rem, 0);
      }
    }
  }

}
.sub-page-products{
  & section{
    padding: 4rem 4rem;
    @media (max-width: 767px){
      padding: 0rem 0rem;
    }
    &.products-bg{
      /*background: url(../assets/img/bg-products.avif) no-repeat center center / cover;*/
    }
    & .inner {
      background: #fff;
      padding: 6rem 10rem;
      @media (max-width: 767px){
        padding: 6rem 2rem;
      }
    }
  }

}
.page-products, .page-products-detail {
  & section{
   
    & .inner {
     
      &.is-active{
        & .products-list{
          & .image{
            & picture{
              & img{
                transform: scale(0, 0, 0);
                opacity: 1;

              }
            }
          }
        }
      }
      .sub-title{
        margin-bottom: 3rem;
        font-weight: normal;
      }
      & .products-list{
        display: flex;
        position: relative;
        gap: 0 5rem;
        margin-bottom: 6rem;
        @media (max-width: 767px){
          flex-wrap: wrap;
          gap: 2rem 0;
        }
        &.oil-balm{
          justify-content: center;
          gap: 0 10rem;
          @media (max-width: 767px){
            flex-direction: column;
            gap: 2rem 0;
          }
          & .image{
            max-width: calc((60% - 20rem) / 2);
            min-width: calc((100% - 10rem) / 4);
            @media (max-width: 767px){
              max-width: 100%;
              min-width: 100%;
            }
          }
        }
        &.product-list-page{
          @media (max-width: 767px){
            /* flex-direction: column; */
            gap: 1rem 1rem;
          }
          & .image{
            @media (max-width: 767px){
              width: calc(50% - 0.5rem);
            }
          }
        }
        & .image{
            width: calc((100% - 10rem) / 4);
            
            @media (max-width: 767px){
              width: 100%;
            }
            & picture{
              & img{
                transition: all 1s 300ms;
                opacity: 0;
                transform: scale(1.1, 1.1, 0);
                width: 100%;
                  height: auto;
                @media (max-width: 767px){
                  
                }
              }
            }
          }
      }
      & h1 {
        font-size: 2.4rem;
        font-weight: bold;
        margin-bottom: 3rem;
      }
    }
  }
}
.page-template-default, .post-type-archive, .wp-singular, .archive {
  padding-top: 3rem;
  @media (max-width: 767px) {
    padding-top: 0;
  }
  & .header {
    background: #D2C8B9;
    @media (max-width: 767px) {
      background: #D2C8B9;
    }
    & h1 {
      svg{
        path{
          fill: var(--colorB2);
        }
      }
    }
    & .gnav {
      &.is-active {
        
      }
      & ul {
        display: flex;
        & li {
          & a {
            color: var(--colorB2);
			  font-size: 80%;
            &:hover {
              color: var(--mainC);
            }
          }
        }
        svg{
        path{
          fill: var(--colorB2);
        }
      }
      }

      @media (max-width: 767px) {
          li {
            text-align: center;
            a {
              padding: 15px;
              display: block;
              color: var(--mainC);
            }
          }
        }
      }
    }
  }



.sec-news-search{
  padding: 6rem 11rem;
  position: relative;

  @media (max-width: 767px){
    padding: 0 0!important;

  }
  & .bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    @media (max-width: 767px){
      display: none;
    }
    
    &::before, &::after{
      content: '';
      width: 50%;
      height: 100%;
      display: block;
      
    }
    &::before{
      background:#D9D9D9;
    }
    &::after{
      background: #877871;
    }
  }
  & .inner{
    position: relative;
    z-index: 1;
    display: flex;
    background: none!important;
    padding: 0!important;
    min-height: 300px;
    @media (max-width: 767px){
      flex-direction: column;
      padding: 0 0;
      flex-wrap: wrap ;
      min-height: auto;
    }
    & > div{
      width: 50%;
      @media (max-width: 767px){
        width: 100%;
        padding: 6rem 4rem;
      }
    }
    
    & .sub-header-area{
      margin-bottom: 5rem;
      & .title{
        font-size: 2.4rem;
        font-family: var(--font-shippori);
      }
      & .sub{
        font-size: 1.6rem;
      }
    }
    & .news-area{
      padding-right: 10rem;
      
      @media (max-width: 767px){
        padding-right: 4rem;
        background:#D9D9D9;

      }
      & ul{
        width: 100%;
        & li{
          border-bottom: 1px dashed #555;
          & a {
            display: block;
            padding: 2rem 0;
            .date{}
            .title{}
          }
        }
      }
    }
  .faq-btn{
        padding:0.6rem 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #877871;
        color: #D9D9D9;
        width: fit-content;
        margin: 0 auto;
        font-size: 1.6rem;
        & svg{
          margin-right: 1rem;
          display: inline-block;
        }
      }
  .faq-note {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #555;
    border: 1px solid #877871;
    padding: 1.5rem 2rem;
    margin-top: 2.5rem;
  }

    & .search-area{
      position: relative;
      display: flex;
      align-items: center;
      margin-right: calc(50% - 50vw);
      width: 50vw;
      @media (max-width: 767px){
        background: #877871;
        display: block;
        margin-right: 0;
        width: 100vw;
      }
      & .sub-header-area{
        color: #fff;
        position: absolute;
        top: 0;
        left: 10rem;
        @media screen and (max-width: 767px){
          position: relative;
          top: auto;
          left: auto;
        }
      }
      & .salon-search-btn{
        padding:0.6rem 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #D9D9D9;
        color: var(--normalC);
        width: fit-content;
        margin: 0 auto;
        font-size: 1.6rem;
        & svg{
          margin-right: 1rem;
          display: inline-block;
        }
      }
    }
  }
}
.page-products-detail {
  & .products-section-detail {
    & .inner {
      & .products-outer-grid {
        display: grid;
        grid-template-columns: 500px 1fr 16rem;
        column-gap: 4rem;
        align-items: start;
        @media (max-width: 767px) {
          display: flex;
          flex-direction: column;
          padding: 0 2rem;
        }
      }
      & .products-detail-area {
        display: contents;
      }
      & .product-image {
        grid-column: 1;
        grid-row: 1;
        @media (max-width: 767px) {
          order: 1;
          width: 100%;
        }
      }
      & .product-sub-images {
        grid-column: 1;
        grid-row: 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
        margin-top: 0.8rem;
        @media (max-width: 767px) {
          order: 2;
          width: 100%;
          margin-top: 0.5rem;
        }
        & .sub-image {
          & img {
            width: 100%;
            height: auto;
            display: block;
          }
        }
      }
      & .product-text-area {
        grid-column: 2;
        grid-row: 1 / span 2;
        border-top: 3px solid var(--colorB2);
        border-bottom: 3px solid var(--colorB2);
        padding-bottom: 3rem;
        @media (max-width: 767px) {
          order: 3;
          width: 100%;
          margin-top: 2rem;
        }
        & h2 {
          font-size: 1.8rem;
          padding: 3rem 0;
          font-weight: normal;
          @media (max-width: 767px) {
            font-size: 1.6rem;
            padding: 2rem 0;
          }
        }
        & .product-info {
          margin-bottom: 20px;
          & table {
            width: 100%;
            border-top: dashed 1px var(--colorB2);
            font-size: 1.2rem;
            @media (max-width: 767px) {
              font-size: 1.2rem;
            }
            & tr {
              border-bottom: dashed 1px var(--colorB2);
              & th {
                font-weight: bold;
                padding: 20px 0;
                width: 120px;
                text-align: left;
                border: none;
                @media (max-width: 767px) {
                  width: 100px;
                }
              }
              & td {
                padding: 20px 0;
                border: none;
              }
            }
          }
          & + p {
            @media (max-width: 767px) {
              font-size: 1.2rem;
              margin-bottom: 2rem;
            }
          }
        }
      }
      & .product-store-col {
        grid-column: 3;
        grid-row: 1;
        padding-top: 3rem;
        @media (max-width: 767px) {
          order: 4;
          width: 100%;
          padding-top: 0;
        }
      }
      & .store-btn {
        & a {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 1rem;
          border: 1px solid var(--colorB2);
          color: var(--colorB2);
          padding: 1.4rem 2rem;
          text-decoration: none;
          font-size: 1.3rem;
          letter-spacing: 0.1rem;
          transition: background 0.3s ease, color 0.3s ease;
          &:hover {
            background: var(--colorB2);
            color: #fff;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .archive, .wp-singular {
    & .sec-news-search {
      & .news-area{
        display: none;
      }
    }
  }
}
.sec-news-search .sub-header-area .title {
  font-family: var(--font-shippori);
}

.page-shopsearch .inner .salon__form__part::after {
  transform: none;
}
.page-shopsearch .inner .salon__form__part::before {
  transform: none;
  padding: 0;
  border-bottom: none;
}
@media screen and (max-width: 767px) {
  .page-shopsearch .inner .salon__form__part {
    height: 44px;
  }
  .page-shopsearch .inner .salon__form__part select {
    height: 44px;
    font-size: 1.3rem;
    padding: 12px 44px 12px 14px;
  }
  .page-shopsearch .inner .salon__form__part::after {
    width: 38px;
    height: 44px;
  }
  .page-shopsearch .inner .salon__form__part::before {
    top: 16px;
    right: 14px;
    border-top: 8px solid #fff;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: none;
  }
  .page-shopsearch .inner .salon__form__inner {
    padding-left: 0;
    padding-right: 0;
  }
  .page-shopsearch .inner .res-wrap {
    padding-left: 0;
    padding-right: 0;
  }
}

/* sec-001 / sec-002 parallax */
.home main section.sec-001,
.home main section.sec-002 {
  overflow: hidden;
}
.home main section.sec-001 .bg,
.home main section.sec-002 .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.home main section.sec-001 .bg picture,
.home main section.sec-002 .bg picture {
  display: block;
  width: 100%;
  height: 120%;
}

/* SP: 各ページ見出し 上下余白統一 */
@media (max-width: 767px) {
  .maintitle_pg {
    margin-bottom: 2.5rem;
  }
  main.concept .maintitle_pg {
    margin-bottom: 4rem;
  }
  .page-shopsearch .inner {
    padding-top: 6rem;
  }
  .page-shopsearch .inner .salon__form__inner {
    padding-top: 0;
  }
  h2.faqh2 {
    margin-top: 2.5rem;
  }
}