:root {
  --white:#fff;
  --black:#000000;
  --gray-1:#F1F1F1;
  --gray-2:#FBFAF9;
  --red:#E4002B;
  --orange:#FF8368;
  --beige:#FBF9EF;
  --tag-blue:#1A498A;
  --note-bg:#FFFDF6;
  --note-line:#DCDFCE;
  --color-acetobacter:#CBD4F6;/* acetobacter酢酸菌 */
  --color-hyaluronicAcid: #FFE7E7;/* ヒアルロン酸 */
  --color-colin:#FFEDC3;/* 卵黄コリン */

  --gap-1-2:calc(var(--gap-base) / 2); /*8px*/
  --gap-base: 16px;
  --gap-x1-5:calc(var(--gap-base) * 1.5); /*24px*/
  --gap-x2:calc(var(--gap-base) * 2); /*32px*/
  --gap-x2-5:calc(var(--gap-base) * 2.5); /*40px*/
  --gap-x3:calc(var(--gap-base) * 3);/*48px*/
  --gap-x3-5:calc(var(--gap-base) * 3.5); /*56px*/ 
  --gap-x4:calc(var(--gap-base) * 4);/*64px*/

  --font-txt-xl:2.4rem;
  --font-txt-l:2rem; 
  --font-txt-m:1.8rem;
  --font-base: 1.6rem;
  --font-txt-s:1.4rem;
  --font-txt-xs:1.2rem;

  --ttl-type01: 4rem;
  --ttl-type02: 3.4rem;
  --ttl-type03: 2.8rem;
  --ttl-type04: 1.8rem;

  --txt-note:  clamp(1.1rem, calc(100vw * (12 / 390)), 1.3rem);

  --line-base: 1.5;
  --line-heading: 1.3;
}

@media (max-width: 768px) {
  :root {
    --gap-base: calc((12 / 390) * 100vw);

    --font-txt-xl: calc((22 / 390) * 100vw);
    --font-txt-l: calc((20 / 390) * 100vw);
    --font-txt-m: calc((18 / 390) * 100vw);
    --font-base: calc((16 / 390) * 100vw);
    --font-txt-s:calc((14 / 390) * 100vw);
    --font-txt-xs: calc((12 / 390) * 100vw);

    --ttl-type01: calc((32 / 390) * 100vw);
    --ttl-type02: calc((24 / 390) * 100vw);
    --ttl-type03: calc((20 / 390) * 100vw);
    --ttl-type04: calc((18 / 390) * 100vw);
    }
}


a{transition: .4s ease;}

html { font-size: 62.5%;overflow-x: hidden; }

body {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: .04em;
  background: #fff;
  width: 100%;
  font-size: var(--font-base);
  line-height: var(--line-base);
  min-height: 100vh;
}

.wrapper{
  container: wrapper / inline-size;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.box-base {
  width: calc(100% - 80px);
  width: 1280px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 1024px) {
.box-base {
  width: calc(100% - 5vw);
  max-width: 100%;
}
}

.br--sp,
.br--tb,
.br--pc {
  display: contents;
}

@media (max-width: 767px) {
/* .br--pc,
.br--tb{
  display: none;
} */
  .br--sp {
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .br--tb {
    display: block;
  }
}

@media (min-width: 1025px) {
  .br--pc {
    display: block;
  }
}



.line-heading{
line-height: var(--line-heading);
}
.u-txt-c{text-align: center;}
.u-txt-r{text-align: right;}
.u-txt-l{text-align: left;}
.u-txt-note{font-size: var(--txt-note);line-height: 1.3;} /* 注記 */
.u-bold{font-weight: 500;}
.u-x-bold{font-weight: 700;}
.u-txt-s{font-size: var(--font-txt-s);}
.u-txt-l{font-size: var(--font-txt-l);}
.u-txt-xl{font-size: var(--font-txt-xl);}
.u-underline{border-bottom: 1px solid currentColor;}



/* note */
.el-note-bg {
  width: 100%;
    background-color: var(--note-bg);
    background-image:
      repeating-linear-gradient(to bottom,
        transparent 0px,
        transparent 49px,
        var(--note-line) 50px,
        transparent 51px),
      linear-gradient(to bottom, var(--note-line) 3px, transparent 3px);
    background-size: calc(100% - 40px) 100%;
    background-position: center 0, center 49px;
    background-repeat: repeat-y, no-repeat;
  }


@container contetns-container (width <=768px) {
.el-note-bg {
    background-image:
      repeating-linear-gradient(to bottom,
        transparent 0px,
        transparent calc((39 / 390) * 100vw),
        var(--note-line) calc((40 / 390) * 100vw),
        transparent calc((41 / 390) * 100vw)),
      linear-gradient(to bottom, var(--note-line) 3px, transparent 3px);
    background-size: calc(100% - calc((39 / 390) * 100vw)) 100%;
    background-position:center 0, center calc((39 / 390) * 100vw);
  }
}



/* card */
.el-card-flex{
  display: flex;
  flex-wrap: wrap;
}

.el-card--item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--white);
  width: calc((100% - (var(--gap-base) * 3)) / 2);
  box-shadow: 2px 3px 4px 0px rgba(0, 0, 0, 0.15);
  padding: var(--gap-base);
  gap: var(--gap-base);
  border: 1px solid transparent;
}

.el-card--thumb {
  width: 117px;
  flex: 0 1 auto;
  overflow: hidden;
}

.el-card--txt {
  flex: 1;
  color: #000;
  transition: color 0.3s ease;
}

.el-card--thumb>img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.33 / 1;
  object-fit: cover;
  transition: all .4s ease;
}
.el-card--ttl{
  font-size: 2rem;
  line-height: var(--line-heading);
}

.el-card--item:hover .el-card--thumb > img {
  transform: scale(1.15);
}


.el-card-arrow{
font-size:1.8rem;
font-weight: 300;
position: relative;
text-align: right;
padding-right: 28px;
margin-top: .2em;
}

.el-card-arrow span::after {
  content: '';
  background: url(/assets/common/imgs/arrow02.png) no-repeat center / contain;
  width: 28px;
  height: 13.3px;
  position: absolute;
  top: 29%;
  right: 0;
}


/* button */
.el-btn-archive {
  display: block;
  font-size: clamp(1.2rem, calc((14 / 390) * 100vw), 2rem);
  font-weight: 400;
  position: relative;
  padding-right: 33px;
  padding-bottom: 10px;
}
.el-btn-archive span{
  position: relative;
}
.el-btn-archive span::after {
  content: '';
  background: url(/assets/common/imgs/arrow01.svg) no-repeat center / contain;
  width: 2em;
  height: 0.8em;
  position: absolute;
  top:0.2em;
  right: -2.2em;
}
.el-btn-archive span::before {
  content: '';
  background: url(/assets/common/imgs/deco-rough-line.svg) no-repeat bottom left / contain;
  width: calc(100% + 1.4em);
  height: clamp(3px, calc((3/ 390) * 100vw), 6px);
  position: absolute;
  bottom:-0.4em;
  left: -0.2em;
}


@container contetns-container (width <=768px) {
.el-card-flex {
  flex-direction: column;
}
.el-card--item {
    width: 100%;
}
.el-card--thumb {
    width:calc((75 / 390) * 100vw);
}
.el-card-arrow {
    padding-right:calc((23 / 390) * 100vw);
}
.el-card-arrow span::after {
    width:calc((21 / 390) * 100vw);
    height:calc((10/ 390) * 100vw);
}
.el-btn-archive span::before {
  background-size: cover;
width: 120%;
}

.el-card--ttl {
    font-size: calc((14 / 390) * 100vw);
}
.el-card-arrow{
font-size:calc((13 / 390) * 100vw);

}
}

/* tag */
.el-tag-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items:flex-start;
    gap: calc(var(--gap-base) * 2);
  position: relative;
}

.el-tag-label {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--tag-blue);
  padding: .25em 1em;
  font-size: clamp(1.1rem, calc((12 / 390) * 100vw), 1.8rem);
  color: var(--tag-blue);
  border-radius: 50px;
  font-weight: 500;
}

.el-tag-label::before {
  content: '#';
  display: inline;
}
.el-tag-label:hover{
    color: var(--red);
    border: 1px solid var(--red);
}

@container contetns-container (width <=768px) {
.el-tag-list {
    gap:var(--gap-base);
}

}


/* gap */
.u-mt-xs{margin-top: var(--gap-1-2);}
.u-mt-s{margin-top: var(--gap-base);}
.u-mt-m{margin-top: var(--gap-x1-5);}
.u-mt-l{margin-top: var(--gap-x2);}
.u-mt-xl{margin-top: var(--gap-x2-5);}
.u-mb-xs{margin-bottom: var(--gap-1-2);}
.u-mb-s{margin-bottom: var(--gap-base);}
.u-mb-m{margin-bottom: var(--gap-x1-5);}
.u-mb-l{margin-bottom: var(--gap-x2);}
.u-mb-xl{margin-bottom: var(--gap-x2-5);}
.u-pt-xs{padding-top: var(--gap-1-2);}
.u-pt-s{padding-top: var(--gap-base);}
.u-pt-m{padding-top: var(--gap-x1-5);}
.u-pt-l{padding-top: var(--gap-x2);}
.u-pt-xl{padding-top: var(--gap-x2-5);}
.u-pb-xs{padding-bottom: var(--gap-1-2);}
.u-pb-s{padding-bottom: var(--gap-base);}
.u-pb-m{padding-bottom: var(--gap-x1-5);}
.u-pb-l{padding-bottom: var(--gap-x2);}
.u-pb-xl{padding-bottom: var(--gap-x2-5);}

.u-w100p{width: 100%;}

@media (min-width: 768px) {
.u-w50p--pc{width: 50%;}
.u-w55p--pc{width: 55%;}
.u-w60p--pc{width: 60%;}
.u-w65p--pc{width: 65%;}
.u-w70p--pc{width: 70%;}
.u-w75p--pc{width: 75%;}
.u-w80p--pc{width: 80%;}
.u-w85p--pc{width: 85%;}
.u-w90p--pc{width: 90%;}
.u-w95p--pc{width: 95%;}
.u-w100p--pc{width: 100%;}
}


@media (max-width: 768px) {
.u-w50p--sp{width: 50%;}
.u-w55p--sp{width: 55%;}
.u-w60p--sp{width: 60%;}
.u-w65p--sp{width: 65%;}
.u-w70p--sp{width: 70%;}
.u-w75p--sp{width: 75%;}
.u-w80p--sp{width: 80%;}
.u-w85p--sp{width: 85%;}
.u-w90p--sp{width: 90%;}
.u-w95p--sp{width: 95%;}
.u-w100p--sp{width: 100%;}
}

/* layout */
.u-relative{
  position: relative;
}
.u-flex{
  display: flex;
  gap: var(--gap-base);
  flex-wrap: wrap;
}
.u-inlineflex{
  display: inline-flex;
  gap: var(--gap-base);
}
.u-flex--item{position: relative;}

.u-flex.--item-col2 .u-flex--item{
width: calc((100% - var(--gap-base)) / 2);
}
.u-flex.--item-col2-gx2 .u-flex--item{
width: calc((100% - var(--gap-x2)) / 2);
}
.u-flex.--item-col3 .u-flex--item{
  width: calc((100% - var(--gap-x2)) / 3);
}

@container wrapper (width <= 768px) {
.u-flex-dr-column--sp{
  flex-direction: column;
}
.u-flex.--item-col1--sp .u-flex--item{
  width: 100%;
}

}