@charset "UTF-8";
/*reset*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}
a img {
  display: block;
}

ul li, ol li {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/*common*/
html, body {
  width: 100%;
  height: 100%;
  font-size: clamp(16px,2vw,24px);

}

body {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 300;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0.025em;
  line-height: 1;
  background: #fff;
  scroll-behavior: smooth;
  color: #000;
}

.bold{
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: bold;
}

h1, h2, h3, h4, h5, p, li {
  letter-spacing: 0.025em;
  font-weight: normal;
  font-feature-settings: "palt";
}

h2{
  font-size: 2rem;
  @media (width < 600px) {
    line-height: 1.5;    
  }
}

p{
  line-height: 1.8;
}
a{
  color:#000;
}

a:hover {
  cursor: pointer;
}

a.line {
  text-decoration: underline;
  text-underline-offset: 4px;
}
a.line:hover {
  opacity: 0.8;
}

.container {
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
}

@media (width <= 1240px){
  .container{
    padding: 0 20px;
  }
}

.sp-view{
  @media (600px <= width){
    display: none;
  }
}

/*mainvisual*/
#mv{
  background-image: url(./images/mv.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 51.24vw;
  background-position: center right;
  .container{
    width: 100%;
    height: 100%;
    h1{
      width: clamp(114px,20.5vw,246px);
    }
  }
  @media (width < 600px) {
    height: 128.88vw;
    background-image: url(./images/mv-sp.jpg);
    .container{
      padding-top: 30px;
    }
  }
  @media (600px <= width){
    .container{
      position: relative;
      h1{
        position: absolute;
        left: 25%;
        top: 50%;
        transform: translate(-50%,-50%);
      }
    }
  }
}

/*mv下*/
#mv-btm{
  h2,p{
    text-align: center;
    margin-bottom: 32px;
  }
  padding: clamp(56px, 5.8vw ,80px) 0 clamp(96px, 13.4vw ,184px);
}
.lineup{
  display: flex;
  gap:30px;
  .item{
    display: block;
    span{
      margin-top: 16px;
      display: block;
      text-align: center;
      color:#000;
    }
  }
  @media (600px <= width){
    .item{
      width: calc((100% - (30px * 3)) / 4);
    }
  }
  @media (width < 600px){
    overflow-x: auto;
    white-space: nowrap;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    .item{
      width: 32%;
      flex-shrink: 0;
    }
  }
}
.insta a{
  background:#999376;
  color:#fff;
  width: 100%;
  max-width: 400px;
  margin: 32px auto 0;
  display: block;
  text-align: center;
  padding: 20px 0;
  font-weight: bold;
}
#problem{
  .container{
    h2{
      line-height: 1.5;
      margin-bottom: clamp(42px,1.5rem,64px);
    }
    ul li{
      position: relative;
      padding-left: 2.5em;
      line-height: 1;
      padding-bottom: 1.5em;
      &::before{
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        content: '';
        width: 1.54em;
        height: 1.54em;
        background: url(./images/check.png) no-repeat;
        background-size: cover;
      }
    }
    @media (600px <= width){
      display: flex;
      align-items: center;
      justify-content: flex-end;
      &::after{
        content: '';
        display: block;
        background: url(./images/problem.jpg) no-repeat center;
        width: min(27.4vw,375px);
        aspect-ratio: 1 / 1.198;
        background-size: contain;
        margin-right: 5.27vw;
      }
      .wrap{
        margin-right: 12.88vw;
      }
    }
    @media (width < 600px){
      position: relative;
      padding-top: 119.8vw;
      &::after{
        z-index: -10;
        content: '';
        display: block;
        width: 100vw;
        aspect-ratio: 1 / 1.198;
        margin: 0;
        background: url(./images/problem.jpg) no-repeat center;
        position: absolute;
        background-size: cover;
        top:0;
        left: 0;
      }
      /*白グラデ*/
      &::before{
        width: 100vw;
        aspect-ratio: 1 / 1.198;
        display: block;
        content: '';
        background: linear-gradient(rgba(255,255,255,0) 70%, rgba(255,255,255,1));
        position: absolute;
        left: 0;
        top:0;
        z-index: -1;
      }
      h2,p{
        text-align: center;
      }
      ul{
        display: table;
        margin: 0 auto;
      }
    }
  }
  padding-bottom: clamp(32px,5.27vw,72px);
}

#memory{
  .container{
    .wrap{
      &::before{
        content: '';
        display: block;
        width: 1px;
        height: 100px;
        background: #000;
        margin: 0 auto 32px;
      }
      h2{
        font-size: 1.25rem;
        text-align: center;
        margin-bottom: clamp(50px,4.68vw,64px);
        img{
          display: block;
          margin-top: 32px;
          width: min(37.48vw,500px);
          @media (width < 600px){
            width: 100%;
          }
        }
      }
      p{
        text-align: center;
        @media (width < 600px){
          margin-bottom: 56px;
        }
      }
    }
    &::after{
      content: '';
      display: block;
      background: url(./images/memory.jpg) no-repeat center;
      aspect-ratio: 1 / 1.198;
      background-size: cover;
    }
    @media (600px <= width ){
      display: flex;
      align-items: center;
      justify-content: flex-end;
      &::after{
        width: min(27.4vw,375px);
        margin-right: 5.27vw;
      }
      .wrap{
        margin-right: min(12.88vw,140px);
      }
    }
    @media ( width < 600px){
      &::after{
        width: 100%;
      }
    }
  }
  padding-bottom: clamp(36px,8.41vw,115px);
  @media (width < 600px){
    position: relative;
    &::after{
      content: '';
      display: block;
      width: 100%;
      height: 31.4vw;
      background: #efedea;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: -10;
    }
  }
}

#value{
  padding-top: clamp(32px,7.02vw,96px);
  background: #efedea;
  h2{
    text-align: center;
    margin-bottom: clamp(28px,2.92vw,40px);
  }
  .point3 h2::before{
    content: '';
    display: block;
    width: 64px;
    height: 16px;
    background: url(./images/value.png) no-repeat center;
    background-size: contain;
    margin: 0 auto 24px;
  }  
  .point3{
    .point{
      img{
        display: block;
        width: 32px;
      }
      &::before{
        display: block;
        content: '';
        background-repeat: no-repeat;
        background-size: contain;
        width: 10vw;
        height: 10vw;
        @media (width < 600px){
          width: 16.4vw;
          height: 16.4vw;
        }
      }
      &:nth-of-type(1)::before{ background-image: url(./images/value01.png); }
      &:nth-of-type(2)::before{ background-image: url(./images/value02.png); }
      &:nth-of-type(3)::before{ background-image: url(./images/value03.png); }
    }
    margin-bottom: clamp(96px, 13.4vw ,184px)
  }
  @media (600px <= width){
    .point3 .wrap, .quality-safety .wrap{
      display: flex;
      justify-content: space-between;
    }
    .point3 .wrap{
      gap: 9.95vw;
    }
    .point3 .point::before{
      margin: 0 auto 24px;
    }
    .point3 .point img{
      margin: 0 auto 8px;
    }
    .point3 .point p{
      text-align: center;
    }
    .quality-safety .wrap{
      gap: 56px;
      .left,.right{
        width: calc((100% - 56px) / 2);
      }
    }

  }
  @media (width < 600px){
    .point3 .point{
      height: 16.4vw;
      display: flex;
      align-items: center;
      margin-bottom: 24px;
      &::before{
        margin-right: 24px;
      }
      img{
        width: 22px;
        margin-bottom: 8px;
      }
    }
  }
  .quality-safety{
    img{
      margin-bottom: clamp(16px,2.34vw,32px);
    }
    .left,.right{
      &>p{
        text-align: center;
        margin-bottom: 16px;
      }
    }
    .veterinarian{
      display: flex;
      gap: 16px;
      align-items: center;
      justify-content: center;
      img{
        max-width: 140px;
        @media (width < 600px){
          max-width: 125px;
        }
      }
      p{
        font-size: 0.85em;
      }
      img,p{
        margin-bottom: 0;
      }
      @media (width < 600px) {
        margin-bottom: 40px;
        
      }
    }
    padding-bottom: clamp(96px, 13.4vw ,184px);
  }
}

#lineup{
  padding: clamp(56px, 5.8vw ,80px) 0 clamp(96px, 13.4vw ,184px);
  h2{
    text-align: center;
    img{
      display: block;
      width: 80px;
      margin: 0 auto 16px;

    }
    margin-bottom: 40px;
  }
  .lineup{
    @media (width < 600px){
      overflow-x: none;
      white-space: nowrap;
      overflow-scrolling: unset;
      -webkit-overflow-scrolling: unset;
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      .item{
        flex-shrink: 1;
        width: calc((100% - 24px) / 2 );
      }
   }
  

  }
  .similar-look{
     margin-top: clamp(100px,11.7vw,160px);
    h2,p{
      text-align: center;
    }
    @media (width < 600px){
      .ttl::after{
        width: 100%;
        height: 115.11vw;
        content: '';
        display: block;
        background: url(./images/matching.png) no-repeat center;
        background-size: contain;
      }
      .content{
        margin-top: 30px;
      }
    }
    @media (600px <= width) {
      display: flex;
      align-items: center;
      &::before{
        width: 50%;
        max-width: 600px;
        aspect-ratio: 1/1.07;
        content: '';
        display: block;
        background: url(./images/matching.png) no-repeat center;
        background-size: contain;
        margin-left: calc((100vw - 1200px) / 2);
      }
      .wrap{
        margin-right: calc((100vw - 1200px) / 2);
        margin-left: 20px;
      }
    }
    @media (600px <= width <= 1240px){
      &::before{
        margin-left: 20px;
      }
      .wrap{
        margin-right: 20px;
      }
    }
    .example{
      display: flex;
      margin-top: 30px;
      .item{
        img{
          width: clamp(100px,10.9vw,150px);
          height: (100px,10.9vw,150px);
        }
        .name{
          text-align: center;
          display: block;
          margin-top: 16px;
        }
        &:not(:last-of-type) span.img{
          position: relative;
          display: block;
          margin-right: 2em;
          &::after{
            content: '＋';
            display: block;
            position: absolute;
            top: 50%;
            right: -1em;
            transform: translateY(-50%);
          }
        }
      }
    }
  }
}

footer{
  .up{
    text-align: center;
    img{
      display: block;
      width: 156px;
      margin: 32px auto 80px;
    }
    .list{
      display: flex;
      gap: 2em;
      margin-bottom: 54px;
      justify-content: center;
      a{
        text-decoration: underline;
        text-underline-offset: 4px;
      }
      @media (width < 600px){
        flex-direction: column;
      }
    }
  }
  .bottom{
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(./images/foot-img.jpg);
    background-size: cover;
    width: 100%;
    height: 43.92vw;
    @media (width < 600px){
      background-image: url(./images/foot-img-sp.jpg);
      height: 88.88vw;
    }
    position: relative;
    .inner{
      position: absolute;
      bottom: clamp(12px,2.34vw,32px);
      left:20px;
      width: calc(100% - 40px);
      @media (1240px <= width){
        left: calc((100% - 1200px) / 2);
        width: 1200px;
      }
      display: flex;
      justify-content: space-between;
      align-items: center;
      .copyright{
        color: #fff;
        text-shadow: 0px 2px 10px rgba(0,0,0,0.8);
        font-size: 0.75rem;
        @media (width < 600px){
          font-size: 0.5rem;
        }
      }
      .btn img{
        width: 120px;
        @media (width < 600px){
          width: 80px;
        }
      }
    }
  }
}
p.attention{
  font-size: .75rem;
  margin: 16px 0;
  color: #9c1d1d;
  letter-spacing: .05em;
  text-align: center;
  padding-left: 1em;
}