@charset "UTF-8";
.l-container {
  width: 100%;
}
.feature,
.l-footer,
.pc-footer{
  margin: 0 !important;
  padding: 0 !important;
}
.feature a{
  text-decoration: none;
}
.feature {
  --color-white: #fff;
  --color-black: #3c3c3c;
  --font-yu: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  --font-tsukuardgothic: "fot-tsukuardgothic-std", sans-serif;
  --font-neue: "neue-haas-grotesk-display", sans-serif;
  --font-mplus: "m-plus-2p";
  --font-proxima: "proxima-nova";
  --font-Practical: "practical-serif", sans-serif;
  --font-ja: var(--font-mplus) , var(--font-proxima) , sans-serif;
  --font-en: var(--font-Practical);
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  font-feature-settings: "palt";
  overflow: clip;
}
@media (min-width: 768px) {
  .feature {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: calc(100vw / var(--pc-width));
    margin-bottom: calc(100*100vw/1200);
    display: flex;
  }
  .feature .f-content_left {
    width: calc(860* (100vw /1920));
    position: sticky;
    top: 0;
    height: 100vh;
  }
  .feature .f-content_left_img {
    width: 100%;
    height: 100vh;
  }
  .feature .f-content_left_img img {
    object-position: top center;
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .feature .f-content {
    width: calc(100% - calc(860* (100vw /1920)));
    margin: 0 auto;
    /* margin-top: -100vh; */
    /* margin-left: auto; */
    /* margin-right: auto; */
  }
  .feature .f-content__inner {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background-color: var(--color-green);
    overflow: clip;
  }
}
@media (max-width: 767px) {
  .feature {
    --ratio: 1;
    --variable: calc(100vw / var(--sp-width));
    color: var(--color-black);
    background-color: var(--color-green);
  }
  .breadlist.f {
    margin-top: calc(150 * (100vw / 750)) !important;
  }
  .main-area.SHpage {
    padding-top: 0!important;
  }
}
@media (min-width: 1400px) {
  .feature {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: calc(100vw / var(--pc-width));
  }
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
component - others
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (min-width: 768px) {
  .feature .hidden-desktop {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .feature .hidden-mobile {
    display: none !important;
  }
}
#Contents {
  overflow: clip;
}
.feature {
  --pc-width: 1920;
  --sp-width: 750;
  --pc-artboard-width: 630.43;
  --sp-artboard-width: 750;
  background: #F4F4F4;
}
.feature .f-section {
  position: relative;
  z-index: 2;
  background-color: var(--color-green);
}
.feature img,
.feature video {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.feature .f-content__inner {
  width: calc(750*var(--variable)*var(--ratio));
}
/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - movie
//////////////////////////////////////////////////////////////////////////////////////////////
*/
.feature .f-section--movie {
  /* position: sticky; */
  /* top: 0; */
}
.feature .f-movie__contents {
  position: relative;
  z-index: 2;
}
.feature .f-movie__btn {
  position: absolute;
  top: calc(37*var(--variable)*var(--ratio));
  right: calc(37*var(--variable)*var(--ratio));
  height: calc(30*var(--variable)*var(--ratio));;
  cursor: pointer;
  z-index: 2;
}
.feature .js-button-off {
  width: calc(150*var(--variable)*var(--ratio));;
}
.feature .js-button-on {
  width: calc(169*var(--variable)*var(--ratio));;
}
.feature .js-button.js-sound_active {
  display: block;
}
.feature .js-button {
  display: none;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
setting - animation
//////////////////////////////////////////////////////////////////////////////////////////////
*/

/* 右からイン */
.js-fadeImage_right {
  transform: translateX(5px);
  opacity: 0;
  transition-duration: 0.2s;
  transition-delay: 0.2s;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(.47, 0, .745, .715);
}
.js-fadeImage_right.is-active {
  transform: translateX(0);
  opacity: 1;
}

/* 左からイン */
.js-fadeImage_left {
  transform: translateX(-5px);
  opacity: 0;
  transition-duration: 0.2s;
  transition-delay: 0.2s;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(.47, 0, .745, .715);
}
.js-fadeImage_left.is-active {
  transform: translateX(0);
  opacity: 1;
}

/* その場でイン */
.js-fadeImage_spot {
  opacity: 0;
  transition-duration: 0.2s;
  transition-delay: 0.2s;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(.47, 0, .745, .715);
}
.js-fadeImage_spot.is-active {
  opacity: 1;
}

/* 下からイン */
.js-fadeImage {
  transform: translateY(5px);
  opacity: 0;
  transition-duration: 0.2s;
  transition-delay: 0.2s;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(.47, 0, .745, .715);
}
.js-fadeImage.is-active {
  transform: translateY(0);
  opacity: 1;
}

/* フェードイン */
.js-fadein {
  opacity: 0;
  transition: ease-in, opacity 1s;
}
.js-fadein.is-active {
  opacity: 1;
}

.js-fadein.delay02 {
  transition-delay: 0.5s;
}
.js-fadein.delay03 {
  transition-delay: 1s;
}

/* ===========================### feature ###=================================== */
/* lp__top_area */
.f__top_area_ttl {
  width: calc(690*var(--variable)*var(--ratio));
  margin: 0 auto calc(35.8*var(--variable)*var(--ratio));
  padding-top: calc(42.4*var(--variable)*var(--ratio));
}
.f__top_area_img {
  width: 100%;
}

/* lp__slide_area */
.f__slide_area {
  padding-top: calc(176*var(--variable)*var(--ratio));
  padding-bottom: calc(210*var(--variable)*var(--ratio));
}
.f__slide_area_top {
  width: calc(473.88*var(--variable)*var(--ratio));
  margin: 0 auto calc(93.6*var(--variable)*var(--ratio));
}
.slide_simple {
  width: calc(590*var(--variable)*var(--ratio));
  margin: 0 auto calc(79*var(--variable)*var(--ratio));
}
.f__slide_area_bottom {
  width: calc(588*var(--variable)*var(--ratio));
  margin: 0 auto;
}

/* lp__look01 */
.f__look_container {
  position: relative;
}
.f__look01 {
  margin-bottom: calc(185*var(--variable)*var(--ratio));
}
.f__look01_img01 {
  position: relative;
  width: calc(590*var(--variable)*var(--ratio));
}
.f__look01_img01_deco {
  position: absolute;
  width: calc(332*var(--variable)*var(--ratio));
  top: calc(25*var(--variable)*var(--ratio));
  right: calc(-145*var(--variable)*var(--ratio));
  pointer-events: none;
}
.f__look01_img02 {
  position: relative;
  width: calc(590*var(--variable)*var(--ratio));
  margin-left: auto;
  margin-top: calc(-61*var(--variable)*var(--ratio));
}
.f__look01_img02_deco {
  width: calc(210*var(--variable)*var(--ratio));
  position: absolute;
  bottom: calc(113*var(--variable)*var(--ratio));
  left: calc(-151*var(--variable)*var(--ratio));
  pointer-events: none;
}
.credit_wrap {
  display: flex;
  gap: 0 calc(20*var(--variable)*var(--ratio));
  margin-top: calc(46*var(--variable)*var(--ratio));
  flex-wrap: wrap;
}
.credit_wrap.text_blue .credit_text {
  color: #364C89;
}
.credit_wrap .credit_text {
  font-family: "aktiv-grotesk", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(23*var(--variable)*var(--ratio));
  letter-spacing: 0.05em;
  line-height: 1.6875;
}

/* lp__look02 */
.f__look02 {
  margin-bottom: calc(276*var(--variable)*var(--ratio));
}
.f__look02_img01 {
  width: calc(550*var(--variable)*var(--ratio));
  margin: 0 auto;
}
.credit_wrap.text_red .credit_text {
  color: #8D1A35;
}
.credit_wrap.credit_center {
  justify-content: center;
}

/* lp__look03 */
.f__look03 {
  margin-bottom: calc(215 *var(--variable)*var(--ratio));
}
.f__look03_img01 {
  width: calc(670*var(--variable)*var(--ratio));
  margin: 0 auto;
  position: relative;
}
.f__look03_img01 .slide {
  position: relative;
  z-index: 20;
}
.credit_wrap.credit03 {
  width: calc(425*var(--variable)*var(--ratio));
  margin-inline: auto;
}
.f__look03_img01_deco {
  width: calc(750*var(--variable)*var(--ratio));
  position: absolute;
  top: calc(-280*var(--variable)*var(--ratio));
  left: calc(-40*var(--variable)*var(--ratio));
  pointer-events: none;
}

/* lp__sticky_img */
.f__sticky_img {
  width: 100%;
  position: sticky;
  top: 0;
  height: fit-content;
}

/* lp__look04 */
.f__look04 {
  padding-top: calc(202*var(--variable)*var(--ratio));
  padding-bottom: calc(176*var(--variable)*var(--ratio));
}
.f__look04_img01 {
  width: calc(632*var(--variable)*var(--ratio));
  margin: 0 auto;
}
.credit_wrap.credit04_1 {
  background-color: #fff;
  width: calc(398*var(--variable)*var(--ratio));
  margin-inline: auto;
  margin-top: calc(52*var(--variable)*var(--ratio));
}
.credit_wrap.credit04_2 {
  background-color: #fff;
  margin-top: calc(10*var(--variable)*var(--ratio));
}

/* lp__look05 */
.bg_f_white {
  background-color: #F4F4F4;
}
.f__look05 {
  padding-top: calc(198*var(--variable)*var(--ratio));
  padding-bottom: calc(133*var(--variable)*var(--ratio));
}
.f__look05_img01 {
  width: calc(510*var(--variable)*var(--ratio));
  margin: 0 auto;
}
.credit_wrap.credit05 {
  width: calc(510*var(--variable)*var(--ratio));
  margin-inline: auto;
}

/* lp__look06 */
.f__look06 {
  padding-bottom: calc(194*var(--variable)*var(--ratio));
}
.f__look06_img01 {
  width: 100%;
}
.credit_wrap.credit06 {
  width: calc(500*var(--variable)*var(--ratio));
  margin-inline: auto;
}

/* lp__look07 */
.f__look07 {
  padding-bottom: calc(236*var(--variable)*var(--ratio));
  /* margin-bottom: calc(121*var(--variable)*var(--ratio)); */
  position: relative;
}
.f__look07_img01 {
  width: calc(670*var(--variable)*var(--ratio));
  margin-left: auto;
  margin-bottom: calc(121*var(--variable)*var(--ratio));
  position: relative;
  z-index: 20;
}
.f__look07_img01_deco {
  position: absolute;
  width: calc(630*var(--variable)*var(--ratio));
  top: calc(-105*var(--variable)*var(--ratio));
  left: calc(-80*var(--variable)*var(--ratio));
  pointer-events: none;
  z-index: -1;
}
.f__look07_img02 {
  width: calc(590*var(--variable)*var(--ratio));
  margin-bottom: calc(226*var(--variable)*var(--ratio));
}
.f__look07_img03 {
  width: calc(590*var(--variable)*var(--ratio));
  margin: 0 auto calc(229*var(--variable)*var(--ratio));
}
.f__look07_img04 {
  width: 100%;
  margin-bottom: calc(10*var(--variable)*var(--ratio));
}
.f__look07_img05 {
  width: 100%;
}
.credit_wrap.credit07 {
  width: calc(510*var(--variable)*var(--ratio));
  margin-inline: auto;
}
.credit_wrap.credit07 .credit_text:first-of-type {
  margin: 0 calc(50*var(--variable)*var(--ratio));
}

/* lp__look08 */
.f__look08 {
  padding-bottom: calc(202  *var(--variable)*var(--ratio));
}
.f__look08_img01 {
  width: calc(670*var(--variable)*var(--ratio));
  margin: 0 auto;
}

/* lp__look09 */
.f__look09 {
  padding-bottom: calc(170*var(--variable)*var(--ratio));
}
.f__look09_img01 {
  width: 100%;
}
.credit_wrap.credit09 {
  width: calc(420*var(--variable)*var(--ratio));
  margin-inline: auto;
}

/* lp__look10 */
.f__look10 {
  padding-bottom: calc(210*var(--variable)*var(--ratio));
  position: relative;
}
.f__look10_deco {
  width: calc(750*var(--variable)*var(--ratio));
  position: absolute;
  top: calc(23*var(--variable)*var(--ratio));
  right: calc(16*var(--variable)*var(--ratio));
}
.f__look10_img01 {
  width: calc(590*var(--variable)*var(--ratio));
  position: relative;
}
.f__look10_img01_deco {
  width: calc(181*var(--variable)*var(--ratio));
  position: absolute;
  top: calc(23*var(--variable)*var(--ratio));
  right: calc(-130*var(--variable)*var(--ratio));
  pointer-events: none;
}
.f__look10_img02 {
  width: calc(690*var(--variable)*var(--ratio));
  margin-top: calc(-55*var(--variable)*var(--ratio));
  margin-left: auto;
  position: relative;
}
.f__look10_img02_deco {
  width: calc(202*var(--variable)*var(--ratio));
  position: absolute;
  bottom: calc(65*var(--variable)*var(--ratio));
  left: calc(-134*var(--variable)*var(--ratio));
  pointer-events: none;
}
.credit_wrap.credit10 {
  width: calc(432*var(--variable)*var(--ratio));
  margin-inline: auto;
  position: relative;
  left: calc(-31*var(--variable)*var(--ratio));
  margin-top: calc(54 * var(--variable) * var(--ratio));
}

/* lp__look11 */
.f__look11 {
  padding-bottom: calc(279*var(--variable)*var(--ratio));
}
.f__look11_img01 {
  width: 100%;
}

/* lp__look12 */
.f__look12 {
  padding-bottom: calc(310*var(--variable)*var(--ratio));
  margin-top: -1px;
}
.f__look12_img01 {
  width: calc(670*var(--variable)*var(--ratio));
  margin: 0 auto;
  position: relative;
  z-index: 20;
}
.f__look12_img01_deco {
  width: calc(750*var(--variable)*var(--ratio));
  position: absolute;
  top: calc(-168*var(--variable)*var(--ratio));
  left: calc(-39*var(--variable)*var(--ratio));
  pointer-events: none;
  z-index: -1;
}
.credit_wrap.credit12 {
  width: calc(436*var(--variable)*var(--ratio));
  margin-inline: auto;
}

/* lp__gift_area */
.f__gift_area {
  position: relative;
  background-color: #72001F;
  overflow: hidden;
}
.background-overlay {
  /* lp__gift_area の全体を覆うように配置 */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* height: 100%; */
  height: calc(1334*var(--variable)*var(--ratio));
  
  /* bg_change_02 の背景画像を設定 */
  background-image: url(../img/bg_change_02.jpg);
  background-size: cover;
  /* background-size: contain; */
  /* background-position: bottom; */
  
  /* 初期状態では透明にしておく */
  /* background-repeat: no-repeat; */
  opacity: 0;
  /* フェードアニメーションの時間設定 */
  transition: opacity 2.0s ease-in-out;
}
.background-overlay.is-visible {
  /* bg_change_02 が画面に入ったら、オーバーレイを表示 */
  opacity: 1;
}
.bg_change_01,
.bg_change_02 {
  position: relative; /* z-index が効くように */
  z-index: 10; /* オーバーレイ (z-index: 9) より手前に */
}

.f__gift_area_top {
  width: calc(608*var(--variable)*var(--ratio));
  margin: 0 auto calc(90*var(--variable)*var(--ratio));
  padding-top: calc(90 * var(--variable) * var(--ratio));
}
.f__gift_area_img01 {
  width: calc(670*var(--variable)*var(--ratio));
  margin: 0 auto calc(146*var(--variable)*var(--ratio));
  position: relative;
}
.f__gift_area_img01_deco01 {
  width: calc(157*var(--variable)*var(--ratio));
  position: absolute;
  top: calc(-72*var(--variable)*var(--ratio));
  right: calc(19*var(--variable)*var(--ratio));
  pointer-events: none;
}
.f__gift_area_img01_deco02 {
  width: calc(157*var(--variable)*var(--ratio));
  position: absolute;
  bottom: calc(-64*var(--variable)*var(--ratio));
  left: calc(-49*var(--variable)*var(--ratio));
  pointer-events: none;
}
.f__gift_area_img01_deco03 {
  width: calc(86*var(--variable)*var(--ratio));
  position: absolute;
  bottom: calc(-107*var(--variable)*var(--ratio));
  left: calc(64*var(--variable)*var(--ratio));
  pointer-events: none;
}
.f__gift_area_img02 {
  width: calc(590*var(--variable)*var(--ratio));
  margin: 0 auto calc(77*var(--variable)*var(--ratio));
}
.f__gift_area_credit {
  width: calc(483*var(--variable)*var(--ratio));
  margin: 0 auto calc(49*var(--variable)*var(--ratio));
}
.f__gift_area_credit_inner {
  display: flex !important;
  justify-content: space-between;
  font-family: "aktiv-grotesk-thin", sans-serif;
  font-weight: 200;
  font-style: normal;
  color: #fff !important;
  font-size: calc(22*var(--variable)*var(--ratio));
  line-height: 2;
  letter-spacing: 0.15em;
}
.f__gift_area_credit_inner_left {
  width: fit-content;
  margin: 0;
}
.f__gift_area_credit_inner_right {
  width: calc(117*var(--variable)*var(--ratio));
  margin: 0;
}
.f__gift_area_credit_button {
  width: calc(350*var(--variable)*var(--ratio));
  margin: 0 auto;
  padding-bottom: calc(203*var(--variable)*var(--ratio));
  display: block;
}
.f__look12_img01_deco .js-fadeImage {
  transform: translateY(0);
  opacity: 1;
}

/* .f__gift_area .bg_change_02 {
  background-image: url(../img/bg_change_02.jpg);
  background-size: cover;
  background-position: center;
} */
.bottom_area {
  padding-top: calc(284*var(--variable)*var(--ratio));
  padding-bottom: calc(282*var(--variable)*var(--ratio));
}
.bottom_area a{
  display: block;
}
.bottom_area_top {
  width: calc(632*var(--variable)*var(--ratio));
  margin: 0 auto calc(94*var(--variable)*var(--ratio));
}
.bottom_credit {
  font-family: "aktiv-grotesk-thin", sans-serif;
  font-weight: 200;
  font-style: normal;
  color: #fff !important;
  font-size: calc(21*var(--variable)*var(--ratio));
  line-height: 1.6666;
  letter-spacing: 0.15em;
  text-align: center;
  margin-bottom: calc(95*var(--variable)*var(--ratio));
  text-transform: uppercase;
}
.bottom_area_button {
  width: calc(350*var(--variable)*var(--ratio));
  margin: 0 auto;
}

.credit_wrap.credit08 {
  margin-top: calc(58 * var(--variable) * var(--ratio));
}
.credit_wrap.credit11 {
  margin-top: calc(42 * var(--variable) * var(--ratio));
}

@media screen and (min-width: 768px) {
  .feature .f-content__inner {
    width: 100%;
  }
  .f__top_area_pc {
    width: calc(916.55 * (100vw / 1920));
    margin: 0 auto;
    position: sticky;
    top: 0;
    left: calc(14 * (100vw / 1920));
    height: 100dvh;
    padding-top: calc(74 * (100vw / 1920));
    padding-bottom: calc(56 * (100vw / 1920));
  }
  .f__top_area_pc_ttl {
   margin-bottom: calc(758.3* (100vw /1920));
  }
  .f__top_area_pc_ttl_bottom {
  width: calc(772.28*var(--variable)*var(--ratio));
  margin: 0 auto;
  position: absolute;
  bottom: calc(145* (100vw /1920));
  left: 50%;
  transform: translate(-50%, 0%);
}

  .f__slide_area {
    padding-bottom: calc(206*var(--variable)*var(--ratio));
    background: #F4F4F4;
    position: relative;
  }
  .f__look01 {
    width: 100%;
    margin-bottom: 0;
    margin-inline: auto;
    background: #F4F4F4;
    position: relative;
    padding-bottom: calc(183*var(--variable)*var(--ratio));
  }
  .f__look01_img02 {
    right: calc(248*var(--variable)*var(--ratio));
    margin-top: calc(-56*var(--variable)*var(--ratio));
  }
  .f__look01_img02_deco {
    left: calc(-236*var(--variable)*var(--ratio));
    bottom: calc(112*var(--variable)*var(--ratio));
  }
  .f__look02_img01 {
    width: calc(512*var(--variable)*var(--ratio));
  }
  .f__look02 {
    margin-bottom: 0;
    background: #F4F4F4;
    position: relative;
    padding-bottom: calc(361*var(--variable)*var(--ratio));
  }
  .f__look03_img01 {
    width: calc(595*var(--variable)*var(--ratio));
  }
  .f__look03_img01_deco {
    width: calc(1536* (100vw /1920));
    top: calc(-445*var(--variable)*var(--ratio));
    left: calc(-672*var(--variable)*var(--ratio));
  }
  .f__look03 {
    margin-bottom: 0;
    background: #F4F4F4;
    position: relative;
    padding-bottom: calc(308*var(--variable)*var(--ratio));
  }
  .credit_wrap {
    margin-top: calc(45*var(--variable)*var(--ratio));
  }
  .credit_wrap .credit_text {
    font-size: calc(19*var(--variable)*var(--ratio));
    letter-spacing: 0.05em;
    line-height: 1.75;
  }
  .credit_wrap .credit_text:hover{
    text-decoration: none;
  }
  .credit_wrap.credit01 {
    margin-left: calc(40 * var(--variable) * var(--ratio));
  }
  .f__look04_img01 {
    width: calc(630*var(--variable)*var(--ratio));
  }
  .f__look05 {
    padding-top: calc(227*var(--variable)*var(--ratio));
    padding-bottom: calc(91*var(--variable)*var(--ratio));
  }
  .credit_wrap.credit04_1 {
    width: calc(358*var(--variable)*var(--ratio));
  }
  .credit_wrap.credit04_2 {
    width: calc(548*var(--variable)*var(--ratio));
    margin-inline: auto;
  }
  .f__look05 {
    padding-bottom: calc(166*var(--variable)*var(--ratio));
  }
  .f__look06_img01 {
    width: calc(750*var(--variable)*var(--ratio));
    margin: 0 auto;
  }
  .f__look06 {
    padding-bottom: calc(257*var(--variable)*var(--ratio));
  }
  .f__look07_img01 {
    width: calc(595*var(--variable)*var(--ratio));
    margin-bottom: calc(158*var(--variable)*var(--ratio));
    left: calc(-124*var(--variable)*var(--ratio));
  }
  .f__look07_img01_deco {
    width: calc(594*var(--variable)*var(--ratio));
    top: calc(-82*var(--variable)*var(--ratio));
    left: calc(-82*var(--variable)*var(--ratio));
  }
  .f__look07_img02 {
    width: calc(535*var(--variable)*var(--ratio));
    margin-bottom: calc(256*var(--variable)*var(--ratio));
    position: relative;
    left: calc(138*var(--variable)*var(--ratio));
  }
  .f__look07_img03 {
    margin: 0 auto calc(255*var(--variable)*var(--ratio));
  }
  .f__look07_img04 {
    width: calc(750*var(--variable)*var(--ratio));
    margin-inline: auto;
    margin-bottom: calc(10*var(--variable)*var(--ratio));
  }
  .f__look07_img05 {
    width: calc(750*var(--variable)*var(--ratio));
    margin-inline: auto;
  }
  .f__look07 {
    padding-bottom: calc(203*var(--variable)*var(--ratio));
  }
  .f__look08_img01 {
    width: calc(595*var(--variable)*var(--ratio));
  }
  .f__look08 {
    padding-bottom: calc(216*var(--variable)*var(--ratio));
  }
  .f__look09_img01 {
    width: calc(750*var(--variable)*var(--ratio));
    margin-inline: auto;
  }
  .f__look09 {
    padding-bottom: calc(306*var(--variable)*var(--ratio));
  }
  .f__look10_img01 {
    left: calc(140*var(--variable)*var(--ratio));
  }
  .f__look10_img01_deco {
    top: calc(23*var(--variable)*var(--ratio));
    right: calc(-283*var(--variable)*var(--ratio));
  }
  .f__look10_deco {
    top: calc(20*var(--variable)*var(--ratio));
    right: calc(321*var(--variable)*var(--ratio));
  }
  .f__look10_img02 {
    width: calc(712*var(--variable)*var(--ratio));
    margin-top: calc(-99*var(--variable)*var(--ratio));
    right: calc(124*var(--variable)*var(--ratio));
  }
  .f__look10_img02_deco {
    bottom: calc(105*var(--variable)*var(--ratio));
    left: calc(-208*var(--variable)*var(--ratio));
  }
  .f__look10 {
    padding-bottom: calc(205*var(--variable)*var(--ratio));
  }
  .f__look11_img01 {
    width: calc(750*var(--variable)*var(--ratio));
    margin-inline: auto;
  }
  .f__look12_img01 {
    width: calc(594*var(--variable)*var(--ratio));
  }
  .f__look12_img01_deco {
    width: calc(1058* (100vw /1920));
    top: calc(-221*var(--variable)*var(--ratio));
    left: calc(-332*var(--variable)*var(--ratio));
  }
  .f__look12 {
    padding-bottom: calc(344*var(--variable)*var(--ratio));
  }
  .f__gift_area_top {
    margin: 0 auto calc(77*var(--variable)*var(--ratio));
    padding-top: calc(130 * var(--variable) * var(--ratio));
  }
  .f__gift_area_img01 {
    width: calc(655*var(--variable)*var(--ratio));
    margin: 0 auto calc(139*var(--variable)*var(--ratio));
  }
  .f__gift_area_img02 {
    margin: 0 auto calc(62*var(--variable)*var(--ratio));
  }
  .f__gift_area_credit_inner {
    font-size: calc(19*var(--variable)*var(--ratio));
    line-height: 2.125;
  }
  .f__gift_area_credit {
    width: calc(463*var(--variable)*var(--ratio));
    margin: 0 auto calc(64*var(--variable)*var(--ratio));
  }
  .f__gift_area_credit_inner_left {
    margin-left: calc(28*var(--variable)*var(--ratio));
  }
  .f__gift_area_credit_button {
    padding-bottom: calc(251*var(--variable)*var(--ratio));
  }
  .bottom_area_top {
    margin: 0 auto calc(115*var(--variable)*var(--ratio));
  }
  .bottom_credit {
    font-size: calc(19*var(--variable)*var(--ratio));
    line-height: 1.75;
    letter-spacing: 0.15em;
    margin-bottom: calc(114*var(--variable)*var(--ratio));
  }
  .bottom_area {
    padding-top: calc(444*var(--variable)*var(--ratio));
    padding-bottom: calc(442*var(--variable)*var(--ratio));
  }

  .credit_wrap.credit07 .credit_text:first-of-type {
    margin: 0 calc(110*var(--variable)*var(--ratio));
  }
  .credit_wrap.credit07 {
    margin-top: calc(65*var(--variable)*var(--ratio));
  } 
  .f__slide_area_bottom {
    width: calc(510*var(--variable)*var(--ratio));
  }

  .credit_wrap.credit09 {
    width: calc(610*var(--variable)*var(--ratio));
  }
  .f__look11 {
    padding-bottom: calc(317*var(--variable)*var(--ratio));
  }
  .credit_wrap.credit10 {
    width: calc(620*var(--variable)*var(--ratio));
    left: calc(-143*var(--variable)*var(--ratio));
    margin-top: calc(40 * var(--variable) * var(--ratio));
  }
  .credit_wrap.credit10 .credit_text:nth-of-type(1) {
    margin-left: calc(50*var(--variable)*var(--ratio));
  }
  .credit_wrap.credit10 .credit_text:nth-of-type(2) {
    margin-right: calc(50*var(--variable)*var(--ratio));
  }
  .background-overlay {
    height: calc(1664*var(--variable)*var(--ratio));
  }

  .credit_wrap.credit09 .credit_text:nth-of-type(1) {
    margin-left: calc(50*var(--variable)*var(--ratio));
  }
  .credit_wrap.credit09 .credit_text:nth-of-type(2) {
    margin-right: calc(50*var(--variable)*var(--ratio));
  }

  a:hover {
    opacity: 1 !important;
  }
  .f__look_container.f__look05,
  .f__look_container.f__look06,
  .f__look_container.f__look07,
  .f__look_container.f__look08,
  .f__look_container.f__look09,
  .f__look_container.f__look10,
  .f__look_container.f__look11,
  .f__look_container.f__look12
  {
    position: relative;
  }
  .f__look_container.f__look05::before,
  .f__look_container.f__look06::before,
  .f__look_container.f__look07::before,
  .f__look_container.f__look08::before,
  .f__look_container.f__look09::before,
  .f__look_container.f__look10::before,
  .f__look_container.f__look11::before,
  .f__look_container.f__look12::before
  {
    content: "";
    background-color: #f4f4f4;
    position: absolute;
    width: 10px;
    left: -10px;
    top: 0;
    height: 100%;
    z-index: 25;
  }

  .f__look01_img01 {
    left: calc(265*var(--variable)*var(--ratio));
  }
}