:root {
  --note-bg-top:#FAF6E8;
}
.contetns-container {
  container: contetns-container / inline-size;
  overflow: hidden;
}

.mv-block {
  width: 100%;
  height: auto;
  background: url(/assets/imgs/bg-mv.png) repeat 0 0;
  padding: 60px 0 50px;
  text-align: center;
}

.mv-block-inner {
  width: 1280px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  gap: 100px;
}

.mv-block--item {
width: 390px;
  height: 412px;
  background: url(/assets/imgs/bg-mvbox.png) repeat 0 0 / cover;
  box-shadow: 3px 6px 4px 0px rgba(0, 0, 0, 0.35);
  text-align: left;
}

.mv-block--item a {
  display: block;
}

.--left {
  transform-origin: 0 0;
  transform: rotate(-6.96deg);
}

.--right {
  transform-origin: 0 0;
  transform: rotate(3.87deg);
}

.mv-ph {
  width: 336px;
  margin: 30px auto auto 20px;
  position: relative;
}

.mv-ph > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.33 / 1;
  object-fit: cover;
}

.icon-clip::before {
  content: '';
  position: absolute;
}

.icon-clip.mv-clip::before {
  width: 24px;
  height: 38px;
  background: url(/assets/imgs/icon-clip01.svg) no-repeat center / contain;
}

.mv-clip01::before {
  top: -8px;
  left: 10px;
}

.mv-clip02::before {
  top: -8px;
  right: 10px;
  transform: scale(-1, 1);
}

.mv-pickup {
  width: 326px;
  background: rgba(255, 255, 255, 0.6);
  padding: 10px 24px;
  position: relative;
  margin: 0 20px 30px auto;
  box-shadow: 1.2px 1.7px 2.3px 0px rgba(0, 0, 0, 0.15);
  font-size: clamp(1.3rem, calc((16 / 390) * 100vw), 1.6rem);
}

.mv-pickup::before {
  content: 'pick up';
  color: var(--black);
  font-size: 16px;
  font-weight: 500;
  background-color: #d8e5d5;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  letter-spacing: 0;
  padding: 2px 8px;
  height: 32px;
  position: absolute;
  top: -32px;
  left: 0;
  z-index: 10;
}

.mv-pickup--ttl {
  color: #ff8368;
  font-size:2rem;
  font-weight: 500;
  margin-bottom: 0.2em;
}

.mv-pickup--txt {
  padding-right: 8px;
  font-size: clamp(1.3rem, calc((14 / 390) * 100vw), 1.4rem);
  line-height: var(--line-heading);
  position: relative;
}

.mv-pickup--txt::after {
  content: '';
  position: absolute;
  top: 40%;
  right: -4px;
  width: 12px;
  height: 12px;
  border-top: 2px solid #ff8368;
  border-right: 2px solid #ff8368;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg) translateY(-50%);
}
.block-deco {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

@keyframes mv-motion01 {
  0%, 33%   { opacity: 1; }
  66%       { opacity: 0; }
  100%         { opacity: 1; }
}
@keyframes mv-motion02 {
  0%, 33%   { opacity: 0; }
  66%       { opacity: 1; }
  100%         { opacity: 0; }
}


@container contetns-container (width > 1024px) {
.mv-deco01 {
  background-image: url(/assets/imgs/deco01.png);
  top: 0;
  left: 24px;
  width: 154px;
  height: 136px;
    animation: mv-motion01 10s ease-in-out infinite;
}

.mv-deco02 {
  background-image: url(/assets/imgs/deco02.png);
  bottom: 0;
  left: 28px;
  width: 158px;
  height: 134px;
animation: mv-motion02 10s ease-in-out infinite;
}

.mv-deco03 {
  background-image: url(/assets/imgs/deco04.png);
  top: -50px;
  right: 0;
  width: 191px;
  height: 135px;
  animation: mv-motion02 10s ease-in-out infinite;
}

.mv-deco04 {
  background-image: url(/assets/imgs/deco03.png);
  top: 110px;
  right: 52px;
  width: 119px;
  height: 179px;
      animation: mv-motion02 10s ease-in-out infinite; 
}

.mv-deco05 {
  background-image: url(/assets/imgs/deco05.png);
  bottom: -90px;
  right: 56px;
  width: 103px;
  height: 179px;
  animation: mv-motion01 10s ease-in-out infinite;
}

}

@container contetns-container (width <= 1024px) {
.mv-block-inner {
  width: 100%;
}
}



@container contetns-container (width <= 768px) {
  .mv-block {
    background: url(/assets/imgs/bg-mvbox.png) repeat 0 0;
    padding: calc(var(--gap-base) * 2) 0;
    text-align: center;
  }
  .mv-block-inner {
        width: 100%;
display: block;
  }
  .--left,
  .--right {
    transform-origin: 0 0;
    transform: rotate(0);
  }
 .mv-block--item {
   width: 100%;
   height: auto;
   background: none;
   box-shadow: none;
   text-align: left;
display: none;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.6s ease, visibility 0.6s ease;
 }
/* 表示状態 */
.mv-block--item.show {
  display: block;
  opacity: 1;
  visibility: visible;
}
  .mv-ph {
    width: 86%;
    margin: 0 auto 0 20px;
  }
  .mv-pickup {
    width: 86%;
    padding: 10px 24px;
    margin: 0 20px 0 auto;
  }
  .block-deco[class^="mv-"]{
    display: none;
  }
.mv-pickup--ttl {
font-size:calc((20 / 390) * 100vw);
}
.mv-pickup--txt {
font-size:calc((14 / 390) * 100vw);
}


}

/* alert-block */
.alert-block {
  background: var(--white);
}

.alert-box {
  font-size: clamp(1.4rem, 3vw, 1.7rem);
  display: flex;
  gap: 0 var(--gap-base);
  padding: 0.5em 0 0.5em 1em;
}

.alert-box dt {
  color: #dd8989;
  position: relative;
}

.alert-box dt::before {
  content: '';
  background: url(/assets/imgs/icon-alert.svg) no-repeat center / cover;
  width: 4px;
  height: 18px;
  position: absolute;
  top: 4px;
  left: -12px;
}

@container contetns-container (width <=768px) {
  .alert-box {
    flex-direction: column;
    padding-left: 0;
  }

  .alert-box dt {
    padding-left: 1em;
  }

  .alert-box dt::before {
    width: 1vw;
    height: 4.6vw;
    top: 0;
    left: 0;
  }
}

/* newarticle-block */
.newarticle-block {
  background-color: #f1f1f1;
}

.newarticle-ttl {
  font-family: 'Klee One', cursive;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  font-size: var(--ttl-type02);
}

.newarticle-ttl::after {
  content: '';
  background: url(/assets/imgs/deco-newarticle.svg) no-repeat center / contain;
  width: 100%;
  height: 7px;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

@container contetns-container (width > 769px) {
  .newarticle-block {
    padding: calc(var(--gap-base) * 1.5) 0;
  }
  .newarticle-card {
    justify-content: space-between;
    gap: calc(var(--gap-base) * 2) var(--gap-base);
  }

}

@container contetns-container (width <= 768px) {
.newarticle-block .el-card--ttl {
    font-size: calc((13 / 390) * 100vw);
}
.newarticle-block .el-card-arrow{
font-size:calc((12 / 390) * 100vw);
}
.newarticle-block .el-card--item {
  padding: var(--gap-1-2);
  gap: var(--gap-1-2);

}




}

.el-note-bg {
  background-color: var(--note-bg-top);
  background-position: center 0, center 0;
}

.note-bottom {
  background: var(--note-bg-top);
  position: relative;
  height: 52px;
}

.note-bottom::before {
  content: '';
  width: calc(100% - 40px);
  height: 3px;
  display: block;
  background-color: var(--note-line);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.about-ttl {
  font-family: 'Klee One', cursive;
  font-weight: 300;
  position: relative;
  background: var(--note-bg-top);
  padding: calc(var(--gap-base) * 2) 0 var(--gap-base);
  font-size: var(--ttl-type02);
}

.about-card {
  width: 884px;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 40px;
  display: grid;
  gap: 0 20px;

}

.about-card--01 {
    grid-template-columns: 55% 45%;
    grid-template-areas:
    'item-acetobacter01 item-acetobacter02';
  position: relative;
}
.about-card--02 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    'item-hyaluronicAcid item-colin';
  position: relative;
}


.about-item-acetobacter01 {
  aspect-ratio: 4 / 3;
  grid-area: item-acetobacter01;
  display: grid;
  place-items: center;
  background: url(/assets/imgs/bg-about01.svg) no-repeat 0 0;
background-size: contain;
  width: 100% ;
  height: auto;
}

.about-item-acetobacter01-inner {
  width: 80%;
  margin-left: 1em;
  margin-top: 24px;
}

.about-item-acetobacter01--ttl {
  text-align: center;
  font-size: 2.8rem;
  padding-bottom: 0.25em;
  margin-left: -.6em;
}
.about-item-acetobacter01--txt {
  font-size: 1.6rem;
}

.about-item-acetobacter01 .el-btn-archive {
  font-size: 1.5rem;
}

.about-item-acetobacter02 {
  align-items: center;
  justify-self: center;
  align-self: center;
  grid-area: item-acetobacter02;
  position: relative;
  width: 100%;
}
.about-item-acetobacter02 .el-card--ttl{
font-size:1.8rem;
}

.about-item-hyaluronicAcid,
.about-item-colin {
  aspect-ratio: 6 / 5;
  justify-self: center;
  align-self: start;
  display: grid;
  place-items: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: auto;
  position: relative;
  padding-bottom: 0.5em;
}

.about-item-hyaluronicAcid {
  grid-area: item-hyaluronicAcid;
  background-image: url(/assets/imgs/bg-about02.svg);
}

.about-item-colin {
  grid-area: item-colin;
  background-image: url(/assets/imgs/bg-about03.svg);
}

.about-item-hyaluronicAcid-inner,
.about-item-colin-inner {
  font-size: 1.6rem;
  width: 82%;
  display: grid;
  place-items: center;
}

.about-item-hyaluronicAcid--ttl,
.about-item-colin--ttl {
  font-size: 2.4rem;
  padding-top: 1em;
  padding-bottom: 0.5em;
}

.about-deco-tape::before {
  content: '';
  background: url(/assets/imgs/deco-tape.png) no-repeat center / contain;
  width: 154.26px;
  height: 49.83px;
  position: absolute;
  top: -26px;
right: -40px;
  transform: rotate(5deg);
}

.about-txt-soon {
  font-family: 'Amatic SC', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.6rem, calc((22 / 390) * 100vw), 2.9rem);
  padding-top: 0.5em;
}

.about-clip01::before {
  background: url(/assets/imgs/icon-clip02.svg) no-repeat center / cover;
  width: 29px;
  height: 60px;
  top: -20px;
  left: 50%;
}

.about-clip02::before {
  background: url(/assets/imgs/icon-clip03.svg) no-repeat center / cover;
  width: 29px;
  height: 60px;
  top: -20px;
  left: 50%;
}

.about-deco01 {
  background-image: url(/assets/imgs/deco06.png);
  top: -20%;
  left: -140px;
  width: 129px;
  height: 147px;
}

.about-deco02 {
  background-image: url(/assets/imgs/deco07.png);
  bottom:0;
  right: 0;
  width: 114px;
  height: 134px;
}

@container contetns-container (width <=768px) {
.about-ttl {
  font-size: var(--ttl-type03);
}

  .about-card {
    width: 88%;
    padding-top: 5.12vw;
    padding-bottom: 6vw;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 8vw;
  }

.about-card--01 {
    grid-template-areas: 
    'item-acetobacter01'
    'item-acetobacter02';
}
.about-card--02 {
    grid-template-areas: 
'item-hyaluronicAcid' 
'item-colin';
}

  .about-item-acetobacter01 {
  aspect-ratio: 18 / 17;
   background: url(/assets/imgs/bg-about01-sp.svg) no-repeat 0 0;
    width: 100%;
  }

  .about-item-acetobacter01-inner {
    width: 76%;
    margin-left: 1em;
    margin-top: .7em;
  }

.about-item-acetobacter01--ttl,
.about-item-hyaluronicAcid--ttl,
.about-item-colin--ttl{
  font-size: calc((18/ 390) * 100vw);
}
.about-item-acetobacter02 .el-card--ttl  {
  font-size: calc((16/ 390) * 100vw);
}

.about-item-acetobacter01--txt,
.about-item-hyaluronicAcid-inner,
.about-item-colin-inner {
  font-size: calc((14/ 390) * 100vw);
}
  .about-item-acetobacter02 {
    width: 100%;
  }

  .about-deco-tape::before {
    width: 22vw;
    height: 14vw;
    position: absolute;
    top: -7vw;
    right: -6vw;
  }

  .about-item-hyaluronicAcid,
  .about-item-colin {
    width: 100%;
  }

  .about-clip01::before,
  .about-clip02::before {
    width: 5.4vw;
    height: 11vw;
    top: -4.5vw;
    left: 50%;
  }

  .about-txt-soon {
    padding-top: 0.1em;
  }

.about-item-acetobacter01 .el-btn-archive {
    font-size: calc((12/ 390) * 100vw);
}
.about-deco01,.about-deco02{
  display: none;
}
}

/* tag */
.tag-block {
  background-color: #fff;
  background-image: linear-gradient(
      to right,
      rgba(171, 213, 255, 0.42) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(171, 213, 255, 0.42) 1px, transparent 1px);
  background-size: 26px 26px;
  margin-top: -1px;
  padding: calc(var(--gap-base) * 2) 0 calc(var(--gap-base) * 4);
}

.tag-ttl {
  font-family: 'Klee One', cursive;
  font-weight: 300;
  font-size: var(--ttl-type02);
  padding-bottom: calc(var(--gap-base) * 2);
}

.el-tag-list {
  width: 80%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.el-tag-label {
  background: transparent;
  font-size: clamp(1.2rem, calc((13.5 / 390) * 100vw), 1.8rem);
}

.tag-deco01 {
  background-image: url(/assets/imgs/deco08.png);
  width: 143px;
  height: 138px;
  top: -97px;
  left: -90px;
}

.tag-deco02 {
  background-image: url(/assets/imgs/deco09.png);
  width: 139px;
  height: 124.65px;
  top: -90px;
  right: -80px;
}

@container contetns-container (width <=768px) {
  .tag-block {
    padding-top: calc(var(--gap-base) * 3);
    padding-bottom: calc(var(--gap-base) * 2);
    background-size: 4vw 4vw;
  }

  /* .tag-ttl {
    padding-bottom: calc(var(--gap-base) * 3);
  } */

  .el-tag-list {
    width: 100%;
  }

  .tag-deco01 {
    width: 16vw;
    height: 16vw;
    top: -18vw;
    left: .5vw;
  }

  .tag-deco02 {
    width: 16vw;
    height: 16.15vw;
    top: -18vw;
    right: .5vw;
  }
}

.bottom-tabnavi {
  display: none;
}



@container wrapper (width <=375px) {

  .tag-deco01 {
    width: 14vw;
    height: 15vw;
    top: -18vw;
    left:1vw;
  }

  .tag-deco02 {
    width: 14vw;
    height: 16.15vw;
    top: -19vw;
    right: 1vw;
  }
}

/* swiper */