.LB260121valentine {
  --pc-width: 1400;
  --sp-width: 750;
  --pc-artboard-width: 420;
  --sp-artboard-width: 750;
  --formula: calc(var(--variable) * var(--ratio));
  --formula_pc: calc(var(--variable) * 1);

  --font-en: neue-haas-unica, sans-serif;
  --font-ja: "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", Osaka, sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-black: 900;

  --color-white: #fff;
  --color-black: #000;
  --color-gray: #b7b7b7;
  --color-red: #bf1920;

  font-family: var(--font-ja);
  color: var(--color-gray);
}

.main-area .main-inner{
  width: 100%;
}

.main-area{
  overflow-x: clip;
}

.LB260121valentine a{
  display: inline-block;
}

.LB260121valentine img{
  width: 100%;
  height: auto;
}

@media (min-width: 1400px) {
  .LB260121valentine {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: 1px;
  }
}

@media (min-width: 768px) and (max-width: 1400px) {
  .LB260121valentine {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: calc(100vw / var(--pc-width));
  }
}

/* @media (min-width: 768px) {
  .LB260121valentine {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: calc(100vw / var(--pc-width));
  }
} */

@media (max-width: 767px) {
  .LB260121valentine {
    --ratio: 1;
    --variable: calc(100vw / var(--sp-width));
  }
}

/* ******************************************************************
PC：レイアウト
***************************************************************** */
@media (max-width: 767px) {
  .hidden-mobile {
    display: none;
  }
}

@media only screen and (min-width: 768px) {
  .valentine26{
    display: grid;
    grid-template-columns: 1fr calc(420 * var(--formula_pc)) 1fr;
    transition: background-color 0.8s ease-in-out;
    background-color: var(--color-red);
  }

  .fixed_container{
    width: 100%;
    height: 100%;
  }

  .content_left{
    position: sticky;
    top: 0;
    height: 100vh;
    place-content: center;
    z-index: 1;
    grid-column: 1;
  }

  .content_center{
    grid-column: 2;
    overflow: clip;
  }

  .content_right{
    position: sticky;
    top: 0;
    height: 100vh;
    place-content: center;
    z-index: 1;
    grid-column: 3;
  }

  .content_left__wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-family: var(--font-en);
    text-align: center;
  }

  .content_left_title{
    font-weight: var(--font-weight-medium);
    font-size: calc(50 * var(--formula_pc));
    line-height: 1.2172;
    white-space: nowrap;
    letter-spacing: 0.03em;
    transition: background-color 0.8s ease-in-out;
    color: var(--color-white);
  }

  .content_left_subtitle01{
    font-weight: var(--font-weight-medium);
    font-size: calc(18 * var(--formula_pc));
    line-height: 1.8705555556;
    letter-spacing: 0.02em;
    transition: background-color 0.8s ease-in-out;
    color: var(--color-white);
  }

  .content_left_subtitle02{
    font-weight: var(--font-weight-medium);
    font-size: calc(15 * var(--formula_pc));
    line-height: 2.2446666667;
    letter-spacing: 0.02em;
    transition: background-color 0.8s ease-in-out;
    color: var(--color-white);
    padding-top: calc(28 * var(--formula));
  }

  .content_right .check_btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-family: var(--font-en);
    font-weight: var(--font-weight-regular);
    text-align: center;
    font-size: calc(22 * var(--formula_pc));
    line-height: 1;
    transition: background-color 0.8s ease-in-out;
    color: var(--color-white);
    border-bottom: 1px solid var(--color-white);
    width: calc(156 * var(--formula_pc));
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding-bottom: calc(13 * var(--formula_pc));
  }

  /* background color change */
  .valentine26.bg-active {
    background-color: var(--color-white);
  }

  .valentine26.bg-active .content_left_title{
    color: var(--color-red);
  }

  .valentine26.bg-active .content_left_subtitle01{
    color: var(--color-black);
  }

  .valentine26.bg-active .content_left_subtitle02{
    color: var(--color-black);
  }

  .valentine26.bg-active .content_right .check_btn{
    color: var(--color-black);
    border-bottom: 1px solid var(--color-black);
  }
}

/* ******************************************************************
コンテンツ
***************************************************************** */

.content_center{
  background-color: var(--color-white);
}

.item__wrapper{
  padding: calc(164 * var(--formula)) 0 0;
}

.credit_list{
  display: flex;
  flex-wrap: wrap;
  gap: calc(20 * var(--formula)) calc(23 * var(--formula));
  margin: calc(30 * var(--formula)) 0 0 0;
}

.crdt{
  font-family: var(--font-en);
  font-weight: var(--font-weight-regular);
  font-size: calc(24 * var(--formula));
  letter-spacing: 0.02em;
  word-spacing: calc(2 * var(--formula));
  line-height: 1;
  color: var(--color-gray);
}

.item__wrapper .heart-bg{
  position: relative;
  width: 100%;
}

.item__wrapper .heart-bg img{
  position: absolute;
  top: 0;
  left: 0;
}

/* -----------------------  .first-content" */
.content-mv__container{
  position: relative;
}

.content-mv__container::after{
  content: "";
  position: absolute;
  bottom: calc(-50 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: calc(100 * var(--formula));
  background: var(--color-black);
  animation: scroll 2s ease-in-out infinite;
}

@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
      transform: scale(1, 1);
      transform-origin: 0 0;
  }
  51% {
      transform: scale(1, 1);
      transform-origin: 0 100%;
  }
  100% {
      transform: scale(1, 0);
      transform-origin: 0 100%;
  }
}

.mv-ttl{
  position: absolute;
  width: calc(410 * var(--formula));
  top: calc(218 * var(--formula));
  right: calc(32 * var(--formula));
  z-index: 2;
  pointer-events: none;
}

.content-mv__image{
  width: 100%;
}

.content-mv_lead{
  padding-top: calc(160 * var(--formula));
  text-align: center;
  color: var(--color-black);
}

.content-mv_lead_title{
  /* position: relative; */
  font-family: var(--font-en);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  line-height: 1;
  font-size: calc(36 * var(--formula));
  color: var(--color-black);
  padding-bottom: calc(50 * var(--formula));
}

.content-mv_lead .heart{
  width: calc(26 * var(--formula));
  margin: 0 auto;
  display: inline-block;
  will-change: transform;
  line-height: 0;
  margin: 0 auto calc(40 * var(--formula));
  transition: transform 0.1s linear;
}

.heart img {
  display: block;
  width: 100%;
  transform-origin: center;
}
/* .scroll-area{
  height: calc(5751.5439 * var(--formula));
} */
/* .content-mv_lead_title::after{
  content: "";
  position: absolute;
  background-image: url(../img/SVG/heart.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(26 * var(--formula));
  height: calc(26.1036 * var(--formula));
  bottom: calc(40 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
} */

.content-mv_lead_txt{
  font-family: var(--font-ja);
  font-weight: var(--font-weight-light);
  line-height: 2;
  letter-spacing: 0.076em;
  font-size: calc(24 * var(--formula));
  color: var(--color-black);
}

.item__wrapper.--01{
  padding: calc(145 * var(--formula)) 0 0;
}

.item__wrapper.--01 .credit_list{
  padding-left: calc(50 * var(--formula));
}

.item__wrapper.--02{
  width: calc(646 * var(--formula));
  margin: 0 auto;
}

.item__wrapper.--02 .img__wrapper{
  position: relative;
  width: calc(646 * var(--formula));
  height: calc(892 * var(--formula));
}

.item__wrapper.--02 .item_img{
  position: absolute;
  top: calc(53.8 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  width: calc(530 * var(--formula));
  z-index: 2;
}

.item__wrapper.--03{
  width: calc(700 * var(--formula));
  margin: 0 0 0 auto;
}

.item__wrapper.--03 .img_txt{
  /* font-family: var(--font-en);
  font-weight: var(--font-weight-regular);
  line-height: 2;
  letter-spacing: 0.09em;
  text-align: justify;
  color: var(--color-red);
  font-size: calc(24 * var(--formula)); */
  width: calc(569.2285 * var(--formula));
  padding-bottom: calc(70 * var(--formula));
}

.item__wrapper.--03 .item_credit__wrapper{
  width: calc(550 * var(--formula));
  margin: 0 0 0 auto;
}

.item__wrapper.--04{
  position: relative;
}

.item__wrapper.--04::after{
  content: "";
  position: absolute;
  background-image: url(../img/img04-dec.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(260 * var(--formula));
  height: calc(399.4043 * var(--formula));
  top: calc(90 * var(--formula));
  right: calc(-70 * var(--formula));
  z-index: 2;
  pointer-events: none;
}

.item__wrapper.--04 .item_img{
  width: calc(700 * var(--formula));
  margin: 0 auto 0 0;
}

.item__wrapper.--04 .credit_list{
  padding-left: calc(50 * var(--formula));
}

/* -----------------------  .second-content */
.item__wrapper.--05{
  width: calc(510 * var(--formula));
  margin: 0 auto;
}

.item__wrapper.--06{
  width: 100%;
  padding: calc(194 * var(--formula)) 0 0;
}

.item__wrapper.--06 .credit_list{
  width: calc(530 * var(--formula));
  padding-left: calc(50 * var(--formula));
}

.item__wrapper.--07{
  position: relative;
  width: calc(470 * var(--formula));
  margin: 0 auto;
}

.item__wrapper.--07::after{
  content: "";
  position: absolute;
  background-image: url(../img/img07-dec.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(260 * var(--formula));
  height: calc(399.4043 * var(--formula));
  top: calc(78 * var(--formula));
  left: calc(-120 * var(--formula));
  z-index: 2;
  pointer-events: none;
}

.item__wrapper.--08{
  display: flex;
  justify-content: flex-end;
  flex-direction: row-reverse;
  column-gap: calc(34 * var(--formula));
}

.item__wrapper.--08 .img_txt{
  width: calc(70.127 * var(--formula));
  transform: translateY(calc(-4 * var(--formula)));
}

.item__wrapper.--08 .item_credit__wrapper{
  width: calc(610 * var(--formula));
}

.item__wrapper.--08 .credit_list{
  padding-left: calc(50 * var(--formula));
}

.item__wrapper.--09{
  width: calc(700 * var(--formula));
  margin: 0 0 0 auto;
}

.item__wrapper.--09 .item_img:first-of-type{
  margin-bottom: calc(20 * var(--formula));
}

.item__wrapper.--10{
  width: calc(648 * var(--formula));
  margin: 0 auto;
}

.item__wrapper.--10 .img__wrapper{
  position: relative;
}
.item__wrapper.--10 .img-bg{
  width: 100%;
  height: calc(732 * var(--formula));
}

.item__wrapper.--10 .item_img{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(61.6 * var(--formula));
  width: calc(410 * var(--formula));
}

.item__wrapper.--11{
  width: calc(610 * var(--formula));
  margin: 0 0 0 auto;
}

/* -----------------------  .third-content */
.item__wrapper.--12{
  position: relative;
  width: calc(550 * var(--formula));
  margin: 0 auto 0 0;
}

.item__wrapper.--12::after{
  content: "";
  position: absolute;
  background-image: url(../img/img12-dec.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(269.3671 * var(--formula));
  height: calc(429.4516 * var(--formula));
  bottom: calc(-44 * var(--formula));
  right: calc(-210 * var(--formula));
  z-index: 2;
  pointer-events: none;
}

.item__wrapper.--12 .credit_list{
  padding-left: calc(50 * var(--formula));
  margin: calc(25 * var(--formula)) 0 0 0;
}


.item__wrapper.--13{
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  column-gap: calc(53 * var(--formula));
}

.item__wrapper.--13 .img_txt{
  width: calc(70.6104 * var(--formula));
  height: calc(875.2734 * var(--formula));
  font-size: 0;
}

@media (max-width: 767px) {
  @supports (-webkit-touch-callout: none) {
    .item__wrapper.--13 .img_txt{
      transform: translateY(calc(-10 * var(--formula)));
    }
  }
}

.item__wrapper.--13 .item_credit__wrapper{
  width: calc(590 * var(--formula));
}

.item__wrapper.--14 .credit_list{
  width: calc(500 * var(--formula));
  padding-left: calc(50 * var(--formula));
}

.item__wrapper.--15 {
  width: calc(646 * var(--formula));
  margin: 0 auto;
}

.item__wrapper.--15 .img__wrapper{
  position: relative;
  width: calc(646 * var(--formula));
  height: calc(892 * var(--formula));
}

.item__wrapper.--15 .img__wrapper .item_img{
  position: absolute;
  top: calc(83.4 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  width: calc(490 * var(--formula));
  z-index: 2;
}


/* -----------------------  .content_center .check_btn */
.content_center .check_btn{
  font-family: var(--font-en);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  width: calc(254 * var(--formula));
  font-size: calc(36 * var(--formula));
  color: var(--color-black);
  border-bottom: 1px solid var(--color-black);
  padding-bottom: calc(25 * var(--formula));
  margin: calc(160 * var(--formula)) auto;
}

/* -----------------------  .last-img__wrapper */
.last-img__wrapper{
  position: relative;
}

.last-img__wrapper .img_txt{
  position: absolute;
  width: calc(645 * var(--formula));
  top: calc(60 * var(--formula));
  left: calc(52 * var(--formula));
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 767px) {
  .last-img__wrapper{
    padding-bottom: calc(150 * var(--formula));
  }
}


/* ******************************************************************
animation
***************************************************************** */
/* ______________________blur */
.js-show.blur{
  filter: blur(10px);
  opacity: 0;
  transition: filter 1s ease, opacity 1s ease;
  will-change: filter, opacity; /* パフォーマンス向上 */
}

.js-show.blur.is-active{
  filter: blur(0px);
  opacity: 1;
}

/* ______________________blink-anim */


.blink-anim{
  -webkit-animatio: flash 1.8s ease .5s infinite alternate;
  animation: flash 1.8s ease .5s infinite alternate;
}

.blink-anim.speed01{
  -webkit-animation: flash 3s ease infinite;
  animation: flash 3s ease infinite;
}

.blink-anim.speed02{
  -webkit-animation: flash 2s ease infinite;
  animation: flash 2s ease infinite;
}

@keyframes flash {
  0% {
    opacity: 1;
  }
  80% {
      opacity: 1;
  }
  90% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

/* 
.blink-anim02{
  animation: blink 2s infinite alternate;
} */


/* .blink-anim{
  animation: blink 2s infinite alternate;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
} */

/* ______________________PC */
.js-fixedBtn {
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.js-fixedBtn.is-show {
  visibility: visible;
  opacity: 1;
}