/* ============== fv area ============== */
.fv-area.life-fv .fv-wrapper {
  position: relative;
  aspect-ratio: 1425 / 550;
  margin-inline: auto 0;
  background-image: url(../image/life/fv-life.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.fv-area.life-fv .fv-wrapper::before,
.fv-area.life-fv .fv-wrapper::after {
  position: absolute;
  content: "";
  inset-block-end: clamp(
    -18px * var(--fluid-max-ratio),
    -18 * var(--fluid),
    -18px * var(--fluid-min-ratio)
  );
  inset-inline-start: clamp(
    40px,
    calc(40 * var(--fluid-sp)),
    calc(40px * var(--fluid-max-ratio))
  );
  inline-size: clamp(
    380px * var(--fluid-min-ratio),
    380 * var(--fluid),
    380px * var(--fluid-max-ratio)
  );
  block-size: clamp(
    380px * var(--fluid-min-ratio),
    380 * var(--fluid),
    380px * var(--fluid-max-ratio)
  );
  background-image: url(../image/life/bg-life-left.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.fv-area.life-fv .fv-wrapper::before {
  inset-block-end: clamp(
    -28px * var(--fluid-max-ratio),
    -28 * var(--fluid),
    -28px * var(--fluid-min-ratio)
  );
  inset-inline-start: auto;
  inset-inline-end: 0;
  inline-size: clamp(
    416px * var(--fluid-min-ratio),
    416 * var(--fluid),
    416px * var(--fluid-max-ratio)
  );
  block-size: clamp(
    416px * var(--fluid-min-ratio),
    416 * var(--fluid),
    416px * var(--fluid-max-ratio)
  );
  background-image: url(../image/life/bg-life-right.webp);
}

.life-fv .fv-wrapper .fv-inner {
  aspect-ratio: 1425 / 550;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-block-end: clamp(
    116px * var(--fluid-min-ratio),
    116 * var(--fluid),
    116px * var(--fluid-max-ratio)
  );
}

.life-fv .fv-wrapper .fv-inner h1 {
  aspect-ratio: 592 / 83;
  inline-size: clamp(
    592px * var(--fluid-min-ratio),
    592 * var(--fluid),
    592px * var(--fluid-max-ratio)
  );
  margin: 0;
  background-image: url(../image/life/ttl-life.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.life-fv .fv-wrapper .fv-inner p {
  text-align: center;
  margin-block-start: clamp(
    54px * var(--fluid-min-ratio),
    54 * var(--fluid),
    54px
  );
  color: var(--color-primaryWhite);
  font-size: clamp(
    18px * var(--fluid-min-ratio),
    18 * var(--fluid),
    18px * var(--fluid-max-ratio)
  );
  font-weight: bold;
  line-height: 1.8;
  letter-spacing: 1.5px;
}

.breadcrumb {
  margin-inline: clamp(
    130px * var(--fluid-min-ratio),
    130 * var(--fluid),
    130px
  );
  margin-block-start: clamp(
    24px * var(--fluid-min-ratio),
    24 * var(--fluid),
    24px
  );
}

.post-fv .breadcrumb {
  margin-inline: clamp(40px * var(--fluid-min-ratio), 40 * var(--fluid), 40px);
}

/* ============== post fv area ============== */
.fv-area.post-fv {
  inline-size: clamp(
    1280px * var(--fluid-min-ratio),
    1280 * var(--fluid),
    1280px
  );
  margin-block-start: clamp(
    177px * var(--fluid-min-ratio),
    177 * var(--fluid),
    177px
  );
  margin-inline: auto;
}

.post-fv .fv-wrapper {
  aspect-ratio: 1280 / 429;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(80px * var(--fluid-min-ratio), 80 * var(--fluid), 80px)
    clamp(120px * var(--fluid-min-ratio), 120 * var(--fluid), 120px);
  border-radius: clamp(
    26px,
    calc(26 * var(--fluid-sp)),
    calc(26px * var(--fluid-max-ratio))
  );
  background-image: url(../image/life/bg-life.webp);
  background-size: cover;
  background-position: center bottom 10px;
  background-repeat: no-repeat;
}

.post-fv .fv-wrapper.no-video {
  background-position: center;
}

.post-fv .fv-wrapper .fv-content {
  aspect-ratio: 1280 / 479;
}

.post-fv .title {
  flex-direction: column;
  gap: 0;
}

.post-fv .title > p {
  position: relative;
  inset: 0;
  gap: clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px);
  color: var(--color-primaryWhite);
  writing-mode: horizontal-tb;
}

.post-fv .left-area > p {
  color: var(--color-primaryWhite);
  font-size: clamp(20px * var(--fluid-min-ratio), 20 * var(--fluid), 20px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 1.5px;
}
.post-fv .left-area > p strong {
  display: block;
  margin-block-start: clamp(
    16px * var(--fluid-min-ratio),
    16 * var(--fluid),
    16px
  );
  font-size: clamp(24px * var(--fluid-min-ratio), 24 * var(--fluid), 24px);
}

.post-fv h1 {
  max-inline-size: clamp(
    535px * var(--fluid-min-ratio),
    535 * var(--fluid),
    535px
  );
  inline-size: 100%;
  margin-block: clamp(32px * var(--fluid-min-ratio), 32 * var(--fluid), 32px)
    clamp(80px * var(--fluid-min-ratio), 80 * var(--fluid), 80px);
  color: var(--color-primaryWhite);
  font-size: clamp(40px * var(--fluid-min-ratio), 40 * var(--fluid), 40px);
  line-height: 1.3;
  letter-spacing: 1.5px;
}

.post-fv .no-video h1 {
  max-inline-size: none;
}

.post-fv .right-area {
  display: flex;
  align-items: flex-end;
  align-self: normal;
  gap: clamp(24px * var(--fluid-min-ratio), 24 * var(--fluid), 24px);
}

.post-fv .right-area .hash-tag {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: column;
  gap: clamp(8px * var(--fluid-min-ratio), 8 * var(--fluid), 8px);
}

.post-fv .right-area .hash-tag p {
  inline-size: fit-content;
  padding: clamp(8px * var(--fluid-min-ratio), 8 * var(--fluid), 8px)
    clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px);
  color: var(--color-primaryWhite);
  font-size: clamp(13px * var(--fluid-min-ratio), 13 * var(--fluid), 13px);
  line-height: 1.1;
  letter-spacing: normal;
  border-radius: 100vmax;
  background-color: var(--color-primaryBlack);
}

.post-fv .right-area .thumbnail {
  max-inline-size: clamp(
    270px * var(--fluid-min-ratio),
    270 * var(--fluid),
    270px
  );
  inline-size: 100%;
  box-shadow: 0 0 24px 0 rgba(14, 14, 14, 0.3);
  border-radius: clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px);
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .fv-area.life-fv .fv-wrapper::before,
  .fv-area.life-fv .fv-wrapper::after {
    content: none;
  }
  .fv-area.life-fv .fv-wrapper .fv-inner {
    aspect-ratio: 393 / 300;
    margin: 0;
    background: none;
  }
  .life-fv .fv-wrapper .fv-inner {
    padding-block: clamp(
        146px,
        calc(146 * var(--fluid-sp)),
        calc(146px * var(--fluid-max-ratio))
      )
      0;
  }
  .life-fv .fv-wrapper .fv-inner h1 {
    inline-size: clamp(
      290px,
      calc(290 * var(--fluid-sp)),
      calc(290px * var(--fluid-max-ratio))
    );
  }
  .life-fv .fv-wrapper .fv-inner p {
    margin-block-start: clamp(
      28px,
      calc(28 * var(--fluid-sp)),
      calc(28px * var(--fluid-max-ratio))
    );
    margin-inline: clamp(
      32px,
      calc(32 * var(--fluid-sp)),
      calc(32px * var(--fluid-max-ratio))
    );
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      calc(14px * var(--fluid-max-ratio))
    );
    text-align: left;
  }
}

/* ============== masonry section ============== */
.masonry {
  margin-block-start: clamp(
    80px,
    calc(80 * var(--fluid)),
    calc(80px * var(--fluid-max-ratio))
  );
  margin-inline: clamp(
    160px * var(--fluid-min-ratio),
    160 * var(--fluid),
    160px
  );
}

.masonry .masonry-sizer {
  inline-size: calc((100% - 96px) / 3);
}

.masonry .masonry-item {
  inline-size: calc((100% - 96px) / 3);
  margin-block-end: clamp(
    48px * var(--fluid-min-ratio),
    48 * var(--fluid),
    48px
  );
}

.masonry .masonry-item .img-area {
  border-radius: clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px);
  overflow: hidden;
}

.masonry .masonry-item .img-area img {
  inline-size: 100%;
}

.masonry .masonry-item .text-area {
  margin-block-start: clamp(
    16px * var(--fluid-min-ratio),
    16 * var(--fluid),
    16px
  );
  font-size: clamp(20px * var(--fluid-min-ratio), 20 * var(--fluid), 20px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.5px;
}

.masonry .masonry-item .text-area > p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.masonry .masonry-item .tag {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px * var(--fluid-min-ratio), 8 * var(--fluid), 8px);
  margin-block-start: clamp(
    16px * var(--fluid-min-ratio),
    16 * var(--fluid),
    16px
  );
}

.masonry .masonry-item .tag p {
  padding: clamp(8px * var(--fluid-min-ratio), 8 * var(--fluid), 8px)
    clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px);
  color: var(--color-primaryWhite);
  font-size: clamp(13px * var(--fluid-min-ratio), 13 * var(--fluid), 13px);
  line-height: 1.1;
  letter-spacing: normal;
  border-radius: 100vmax;
  background-color: var(--color-primaryBlack);
}
/* ============== message section ============== */
#message .sec-inner {
  display: flex;
  justify-content: center;
  gap: clamp(120px * var(--fluid-min-ratio), 120 * var(--fluid), 120px);
  margin-inline: clamp(64px * var(--fluid-min-ratio), 64 * var(--fluid), 64px)
    clamp(120px * var(--fluid-min-ratio), 120 * var(--fluid), 120px);
}

#message .title .title-content {
  flex-direction: column;
  align-items: flex-start;
}

#message .title .title-content .text-summary {
  inline-size: max-content;
  font-size: clamp(18px * var(--fluid-min-ratio), 18 * var(--fluid), 18px);
  line-height: 1.8;
  font-weight: 500;
  letter-spacing: 1.5px;
}

#message .title .title-content .text-summary p + p {
  margin-block-start: clamp(
    40px * var(--fluid-min-ratio),
    40 * var(--fluid),
    40px
  );
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.5px;
}
#message .title .title-content .text-summary p strong {
  display: block;
  margin-block-start: clamp(
    8px * var(--fluid-min-ratio),
    8 * var(--fluid),
    8px
  );
  font-size: clamp(24px * var(--fluid-min-ratio), 24 * var(--fluid), 24px);
}

#message .img-area {
  max-inline-size: clamp(
    480px * var(--fluid-min-ratio),
    480 * var(--fluid),
    480px
  );
  inline-size: 100%;
}

/* ============== life section ============== */
#life {
  margin-block: 0;
  margin-inline: 3.33vw;
}

/* ============== post area ============== */
.post-area .sec-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(80px * var(--fluid-min-ratio), 80 * var(--fluid), 80px);
  max-inline-size: clamp(
    1200px * var(--fluid-min-ratio),
    1200 * var(--fluid),
    1200px
  );
  inline-size: 100%;
  margin-inline: auto;
}

.post-area article {
  display: flex;
  gap: clamp(80px * var(--fluid-min-ratio), 80 * var(--fluid), 80px);
}

.post-area article .img-area {
  max-inline-size: clamp(
    520px * var(--fluid-min-ratio),
    520 * var(--fluid),
    520px
  );
  inline-size: 100%;
  border-radius: clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px);
  overflow: hidden;
}
.post-area article:nth-child(even) .img-area {
  order: 2;
}

.post-area article .text-area {
  inline-size: 100%;
}

.post-area article .text-area h2 {
  margin-block-end: clamp(
    24px * var(--fluid-min-ratio),
    24 * var(--fluid),
    24px
  );
  font-size: clamp(32px * var(--fluid-min-ratio), 32 * var(--fluid), 32px);
  line-height: 1.3;
  letter-spacing: 1.5px;
}

.post-area article .text-area p {
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.5px;
}

/* ============== schedule ============== */
.time-schedule {
  max-inline-size: clamp(
    1280px * var(--fluid-min-ratio),
    1280 * var(--fluid),
    1280px
  );
  inline-size: 100%;
  margin-inline: auto;
  padding: 4px;
  border-radius: clamp(48px * var(--fluid-min-ratio), 48 * var(--fluid), 48px);
  background-image: var(--color-primaryGradient);
}

.time-schedule .sec-inner {
  padding-block-end: clamp(
    48px * var(--fluid-min-ratio),
    48 * var(--fluid),
    48px
  );
  border-radius: clamp(44px * var(--fluid-min-ratio), 44 * var(--fluid), 44px);
  background: url(../image/life/logo_orange.svg) no-repeat bottom
      clamp(40px * var(--fluid-min-ratio), 40 * var(--fluid), 40px) right
      clamp(64px * var(--fluid-min-ratio), 64 * var(--fluid), 64px) /
      clamp(300px * var(--fluid-min-ratio), 300 * var(--fluid), 300px)
      clamp(237px * var(--fluid-min-ratio), 237 * var(--fluid), 237px),
    var(--color-primaryWhite);
}

.time-schedule .sec-inner > p {
  display: inline-block;
  padding: clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px)
    clamp(32px * var(--fluid-min-ratio), 32 * var(--fluid), 32px);
  color: var(--color-primaryWhite);
  font-size: clamp(24px * var(--fluid-min-ratio), 24 * var(--fluid), 24px);
  line-height: 1.3;
  letter-spacing: 1.5px;
  border-radius: clamp(40px * var(--fluid-min-ratio), 40 * var(--fluid), 40px) 0
    clamp(48px * var(--fluid-min-ratio), 48 * var(--fluid), 48px) 0;
  background-image: var(--color-primaryGradient);
}

.time-schedule .schedule-list {
  display: flex;
  flex-direction: column;
  gap: clamp(32px * var(--fluid-min-ratio), 32 * var(--fluid), 32px);
  margin-block-start: clamp(
    40px * var(--fluid-min-ratio),
    40 * var(--fluid),
    40px
  );
  margin-inline: clamp(64px * var(--fluid-min-ratio), 64 * var(--fluid), 64px);
}

.time-schedule .schedule-list .list-item {
  position: relative;
  display: flex;
}
.time-schedule .schedule-list .list-item:not(:first-of-type)::before {
  position: absolute;
  content: "";
  inset-block-start: -100%;
  inset-inline-start: min(50px, 5.138vw);
  inline-size: 2px;
  block-size: 200%;
  background-image: url(../image/life/line.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.time-schedule .schedule-list .list-item .schedule-item {
  display: flex;
  align-items: center;
}

.time-schedule .schedule-list .list-item .time {
  position: relative;
  align-self: center;
  min-inline-size: 100px;
  padding: clamp(4px * var(--fluid-min-ratio), 4 * var(--fluid), 4px)
    clamp(16px * var(--fluid-min-ratio), 16 * var(--fluid), 16px);
  color: var(--color-primaryWhite);
  font-size: clamp(18px * var(--fluid-min-ratio), 18 * var(--fluid), 18px);
  line-height: 1.3;
  letter-spacing: 1.5px;
  text-align: center;
  border-radius: 100vmax;
  background-image: var(--color-primaryGradient);
  z-index: 99;
}

.time-schedule .schedule-list .list-item .title {
  align-self: center;
  min-inline-size: 80px;
  margin-inline: clamp(40px * var(--fluid-min-ratio), 40 * var(--fluid), 40px)
    clamp(24px * var(--fluid-min-ratio), 24 * var(--fluid), 24px);
  font-size: clamp(20px * var(--fluid-min-ratio), 20 * var(--fluid), 20px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.5px;
}

.time-schedule .schedule-list .list-item .description {
  max-inline-size: clamp(
    600px * var(--fluid-min-ratio),
    600 * var(--fluid),
    600px
  );
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.5px;
}

@media screen and (max-width: 768px) {
  .masonry {
    margin-block-start: clamp(
      48px,
      calc(48 * var(--fluid-sp)),
      calc(48px * var(--fluid-max-ratio))
    );
    margin-inline: clamp(
      40px,
      calc(40 * var(--fluid-sp)),
      calc(40px * var(--fluid-max-ratio))
    );
  }

  .masonry .sec-inner {
    max-inline-size: none;
  }

  .masonry .masonry-sizer,
  .masonry .masonry-item {
    inline-size: 100%;
  }

  .masonry .masonry-item {
    margin-block-end: clamp(
      40px,
      calc(40 * var(--fluid-sp)),
      calc(40px * var(--fluid-max-ratio))
    );
  }

  .masonry .masonry-item .img-area {
    border-radius: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }

  .masonry .masonry-item .text-area {
    margin-block-start: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
    font-size: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }
  .masonry .masonry-item .tag {
    gap: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      calc(8px * var(--fluid-max-ratio))
    );
    margin-block-start: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }
  .masonry .masonry-item .tag p {
    padding: clamp(
        8px,
        calc(8 * var(--fluid-sp)),
        calc(8px * var(--fluid-max-ratio))
      )
      clamp(
        16px,
        calc(16 * var(--fluid-sp)),
        calc(16px * var(--fluid-max-ratio))
      );
    font-size: clamp(
      13px,
      calc(13 * var(--fluid-sp)),
      calc(13px * var(--fluid-max-ratio))
    );
  }

  .fv-area.life-fv .fv-wrapper {
    aspect-ratio: 393 / 515;
    inline-size: 100%;
    border-radius: 0 0
      clamp(
        26px,
        calc(26 * var(--fluid-sp)),
        calc(26px * var(--fluid-max-ratio))
      )
      clamp(
        26px,
        calc(26 * var(--fluid-sp)),
        calc(26px * var(--fluid-max-ratio))
      );
    background-image: url(../image/life/fv-life_sp.webp);
    background-size: contain;
  }
  .fv-area.life-fv::before,
  .fv-area.life-fv::after {
    content: none;
  }

  .life-fv .fv-wrapper h1 {
    aspect-ratio: 290 / 46;
    inline-size: clamp(
      290px,
      calc(290 * var(--fluid-sp)),
      calc(290px * var(--fluid-max-ratio))
    );
  }
  .life-fv .fv-wrapper p {
    margin-block-start: clamp(
      28px,
      calc(28 * var(--fluid-sp)),
      calc(28px * var(--fluid-max-ratio))
    );
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      calc(14px * var(--fluid-max-ratio))
    );
  }

  #message {
    margin-block-start: clamp(
      64px,
      calc(64 * var(--fluid-sp)),
      calc(64px * var(--fluid-max-ratio))
    );
    padding-block: clamp(
        48px,
        calc(48 * var(--fluid-sp)),
        calc(48px * var(--fluid-max-ratio))
      )
      clamp(
        64px,
        calc(64 * var(--fluid-sp)),
        calc(64px * var(--fluid-max-ratio))
      );
  }
  .single-life #message {
    padding: 0;
  }
  #message .sec-inner {
    flex-direction: column;
    margin-inline: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
    gap: clamp(
      32px,
      calc(32 * var(--fluid-sp)),
      calc(32px * var(--fluid-max-ratio))
    );
  }
  #message .sec-inner .sp-only .img-area {
    max-inline-size: clamp(
      280px,
      calc(280 * var(--fluid-sp)),
      calc(280px * var(--fluid-max-ratio))
    );
    margin-inline: auto;
  }
  #message .sec-inner .sp-only .text-summary {
    margin-block-start: clamp(
      32px,
      calc(32 * var(--fluid-sp)),
      calc(32px * var(--fluid-max-ratio))
    );
    line-height: 1.8;
    letter-spacing: 1.5px;
  }
  #message .sec-inner .sp-only .text-summary p:last-of-type {
    margin-block-start: clamp(
      12px,
      calc(12 * var(--fluid-sp)),
      calc(12px * var(--fluid-max-ratio))
    );
    font-weight: 700;
    text-align: right;
    line-height: 1.3;
  }
  #message .sec-inner .sp-only .text-summary p:last-of-type strong {
    display: block;
    margin-block-start: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      calc(8px * var(--fluid-max-ratio))
    );
    font-size: clamp(
      18px,
      calc(18 * var(--fluid-sp)),
      calc(18px * var(--fluid-max-ratio))
    );
  }

  /* ============== post area ============== */
  .fv-area.post-fv {
    max-inline-size: none;
    inline-size: 100%;
    margin-block-start: clamp(
      103px,
      calc(103 * var(--fluid-sp)),
      calc(103px * var(--fluid-max-ratio))
    );
  }
  .post-fv .fv-wrapper {
    aspect-ratio: 361 / 759;
    flex-direction: column;
    justify-content: flex-start;
    margin-inline: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
    padding: 0;
    background-image: url(../image/life/bg-life_sp.webp);
    background-position: center top;
  }
  .post-fv .fv-wrapper.no-video {
    aspect-ratio: 361 / 275;
    background-image: url(../image/life/bg-lifeNoVideo_sp.webp);
  }

  /* 動画あり（single-life SP のみ。PC・動画なしは従来スタイル） */
  .post-fv .fv-wrapper.has-video {
    --fv-thumb-overlap: clamp(
      250px,
      calc(250 * var(--fluid-sp)),
      calc(250px * var(--fluid-max-ratio))
    );
    aspect-ratio: auto;
    overflow: visible;
    background-image: none;
    background-color: transparent;
  }
  .post-fv .fv-wrapper.has-video .left-area {
    aspect-ratio: 361 / 550;
    background-image: url(../image/life/bg-life_sp.webp);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    /* テキスト下にサムネ重なり用の余白だけ確保（高さ固定はしない） */
    padding-block-end: var(--fv-thumb-overlap);
  }
  .post-fv .fv-wrapper.has-video .right-area {
    position: relative;
    z-index: 1;
    /* 余白分だけ引き上げ。left-area が伸びても重なり位置は下端基準 */
    margin-block-start: calc(-1 * var(--fv-thumb-overlap));
  }
  .post-fv .fv-wrapper.has-video .right-area .thumbnail {
    position: relative;
    z-index: 2;
  }
  .post-fv .fv-wrapper.has-video .right-area .hash-tag {
    order: 2;
    margin-block-start: -15px;
    padding-block: 0;
    padding-inline: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
    border-radius: 0 0
      clamp(
        26px,
        calc(26 * var(--fluid-sp)),
        calc(26px * var(--fluid-max-ratio))
      )
      clamp(
        26px,
        calc(26 * var(--fluid-sp)),
        calc(26px * var(--fluid-max-ratio))
      );
    z-index: 10;
  }

  .post-fv .fv-wrapper .left-area {
    padding-block: clamp(
        48px,
        calc(48 * var(--fluid-sp)),
        calc(48px * var(--fluid-max-ratio))
      )
      clamp(
        40px,
        calc(40 * var(--fluid-sp)),
        calc(40px * var(--fluid-max-ratio))
      );
    padding-inline: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }
  .post-fv h1 {
    max-inline-size: none;
    margin-block: clamp(
        16px,
        calc(16 * var(--fluid-sp)),
        calc(16px * var(--fluid-max-ratio))
      )
      clamp(
        32px,
        calc(32 * var(--fluid-sp)),
        calc(32px * var(--fluid-max-ratio))
      );
    font-size: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      calc(24px * var(--fluid-max-ratio))
    );
  }
  .post-fv .left-area > p {
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      calc(14px * var(--fluid-max-ratio))
    );
  }
  .post-fv .left-area > p strong {
    margin-block-start: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      calc(8px * var(--fluid-max-ratio))
    );
    font-size: clamp(
      18px,
      calc(18 * var(--fluid-sp)),
      calc(18px * var(--fluid-max-ratio))
    );
  }

  .post-fv .right-area {
    flex-direction: column;
    align-items: center;
  }
  .post-fv .fv-wrapper:not(.has-video) .right-area .hash-tag {
    align-items: flex-start;
    gap: clamp(
      4px,
      calc(4 * var(--fluid-sp)),
      calc(4px * var(--fluid-max-ratio))
    );
    order: 2;
    inline-size: 100%;
    margin-block-start: calc(-39 * var(--fluid-sp));
  }
  .post-fv .fv-wrapper.has-video .right-area .hash-tag {
    align-items: flex-start;
    gap: clamp(
      4px,
      calc(4 * var(--fluid-sp)),
      calc(4px * var(--fluid-max-ratio))
    );
    inline-size: 100%;
  }
  .post-fv .right-area .hash-tag p {
    padding: clamp(
        8px,
        calc(8 * var(--fluid-sp)),
        calc(8px * var(--fluid-max-ratio))
      )
      clamp(
        16px,
        calc(16 * var(--fluid-sp)),
        calc(16px * var(--fluid-max-ratio))
      );
    font-size: clamp(
      13px,
      calc(13 * var(--fluid-sp)),
      calc(13px * var(--fluid-max-ratio))
    );
  }
  .post-fv .right-area .thumbnail {
    max-inline-size: clamp(
      225px,
      calc(225 * var(--fluid-sp)),
      calc(225px * var(--fluid-max-ratio))
    );
    border-radius: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }

  .breadcrumb {
    margin-block-start: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
    margin-inline: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }

  .post-fv .breadcrumb {
    margin-block-start: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
    margin-inline: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }

  .single-life #life {
    margin-inline: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }

  section.post-area {
    margin-block-start: clamp(
      48px,
      calc(48 * var(--fluid-sp)),
      calc(48px * var(--fluid-max-ratio))
    );
    padding-inline: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
  }
  section.post-area .sec-inner {
    max-inline-size: none;
    gap: clamp(
      64px,
      calc(64 * var(--fluid-sp)),
      calc(64px * var(--fluid-max-ratio))
    );
  }
  .post-area article {
    flex-direction: column;
    gap: clamp(
      32px,
      calc(32 * var(--fluid-sp)),
      calc(32px * var(--fluid-max-ratio))
    );
  }
  .post-area article:nth-child(even) .img-area {
    order: 1;
  }
  .post-area article:nth-child(even) .text-area {
    order: 2;
  }
  .post-area article .img-area {
    max-inline-size: none;
    aspect-ratio: 361 / 243;
    border-radius: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
    overflow: hidden;
  }
  .post-area article .img-area img {
    object-fit: cover;
    inline-size: 100%;
    block-size: 100%;
  }
  .post-area article .text-area h2 {
    margin-block-end: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
    font-size: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      calc(20px * var(--fluid-max-ratio))
    );
  }

  .time-schedule {
    max-inline-size: calc(
      100% -
        clamp(
          32px,
          calc(32 * var(--fluid-sp)),
          calc(32px * var(--fluid-max-ratio))
        )
    );
    padding: 2px;
    border-radius: clamp(
      40px,
      calc(40 * var(--fluid-sp)),
      calc(40px * var(--fluid-max-ratio))
    );
  }
  .time-schedule .sec-inner {
    border-radius: clamp(
      40px,
      calc(40 * var(--fluid-sp)),
      calc(40px * var(--fluid-max-ratio))
    );
    background: var(--color-primaryWhite);
  }
  .time-schedule .sec-inner > p {
    padding: clamp(
        12px,
        calc(12 * var(--fluid-sp)),
        calc(12px * var(--fluid-max-ratio))
      )
      clamp(
        24px,
        calc(24 * var(--fluid-sp)),
        calc(24px * var(--fluid-max-ratio))
      );
    font-size: clamp(
      20px,
      calc(20 * var(--fluid-sp)),
      calc(20px * var(--fluid-max-ratio))
    );
    border-radius: clamp(
        40px,
        calc(40 * var(--fluid-sp)),
        calc(40px * var(--fluid-max-ratio))
      )
      0
      clamp(
        40px,
        calc(40 * var(--fluid-sp)),
        calc(40px * var(--fluid-max-ratio))
      )
      0;
  }
  .time-schedule .schedule-list {
    position: relative;
    gap: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      calc(24px * var(--fluid-max-ratio))
    );
    margin: clamp(
        24px,
        calc(24 * var(--fluid-sp)),
        calc(24px * var(--fluid-max-ratio))
      )
      clamp(
        16px,
        calc(16 * var(--fluid-sp)),
        calc(16px * var(--fluid-max-ratio))
      );
  }
  .time-schedule .schedule-list::before {
    position: absolute;
    content: "";
    inset-block-start: 0;
    inset-inline-start: clamp(
      32px,
      calc(32 * var(--fluid-sp)),
      calc(32px * var(--fluid-max-ratio))
    );
    inline-size: 2px;
    block-size: 100%;
    background-image: url(../image/life/line.svg);
    background-size: cover;
    background-position: center;
    background-repeat: repeat-y;
  }
  .time-schedule .schedule-list .list-item {
    justify-content: flex-start;
    gap: clamp(
      24px,
      calc(24 * var(--fluid-sp)),
      calc(24px * var(--fluid-max-ratio))
    );
  }
  .time-schedule .schedule-list .list-item:not(:first-of-type)::before {
    content: none;
  }
  .time-schedule .schedule-list .list-item .schedule-item {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(
      8px,
      calc(8 * var(--fluid-sp)),
      calc(8px * var(--fluid-max-ratio))
    );
  }
  .time-schedule .schedule-list .list-item .time {
    align-self: flex-start;
    min-inline-size: 70px;
    padding: clamp(
        4px,
        calc(4 * var(--fluid-sp)),
        calc(4px * var(--fluid-max-ratio))
      )
      clamp(
        10px,
        calc(10 * var(--fluid-sp)),
        calc(10px * var(--fluid-max-ratio))
      );
    font-size: clamp(
      14px,
      calc(14 * var(--fluid-sp)),
      calc(14px * var(--fluid-max-ratio))
    );
  }
  .time-schedule .schedule-list .list-item .title {
    align-self: flex-start;
    min-inline-size: auto;
    margin: 0;
    font-size: clamp(
      16px,
      calc(16 * var(--fluid-sp)),
      calc(16px * var(--fluid-max-ratio))
    );
    text-align: left;
  }
  .time-schedule .schedule-list .list-item .description {
    max-inline-size: 100%;
  }
}

#life .slide-area .slide-item {
  overflow: hidden;
  border-radius: 20px;
}

#life .slide-area .slide-item.video-slide-item {
  border-radius: 16px;
}

#life .slide-area .slide-item video {
  inline-size: clamp(220px, 24vw, 350px);
  max-inline-size: clamp(220px, 24vw, 350px);
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

#life .slide-area .vertical-slide-item video {
  inline-size: clamp(170px, 18vw, 270px);
  max-inline-size: clamp(170px, 18vw, 270px);
}