@charset "UTF-8";
@font-face {
  font-family: "NotoSansJP";
  src: url(../font/NotoSansJP-VariableFont_wght.ttf) format("truetype");
  font-weight: normal;
}
:root {
  --font: 游ゴシック体, YuGothic, 游ゴシック Medium, Yu Gothic, メイリオ, sans-serif;
  --font-mincho: NotoSerifJP, ＭＳ Ｐ明朝, MS PMincho, serif;
}

* > .main-area {
  font-family: var(--font);
  font-weight: var(--fontweight-medium);
  font-feature-settings: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: unset;
  min-width: auto;
}

/* ▼ -----------可変設定---------- ▼ */
.lp_variable {
  --pc-width: 1400; /*PCデザイン幅*/
  --sp-width: 750; /*SPデザイン幅*/
  --pc-artboard-width: 425; /*SP共通デザイン幅*/
  --sp-artboard-width: 750; /*PC共通デザイン幅*/
  --formula: calc(var(--variable) * var(--ratio)); /*SP→PC 可変設定*/
  --formula_pc: calc(var(--variable) * 1); /*PC 1400以上は固定*/
}

/* PC画面幅 1400px以上 固定 */
@media (min-width: 1401px) {
  .lp_variable {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --variable: calc(100vw / var(--pc-width));
    /*--variable: 1px;  固定値（可変しない）*/
  }
}
/* PC画面幅 768～1400px 可変 */
@media (min-width: 768px) and (max-width: 1400px) {
  .lp_variable {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}
/* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  .lp_variable {
    --ratio: 1; /* 比率は1（変わらない） */
    --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}
/* ▲ -----------可変設定---------- ▲ */

.spOnly {
  display: none;
}
@media screen and (max-width: 767px) {
  .spOnly {
    display: block;
  }
  .pcOnly {
    display: none;
  }
}

.main-area * {
  box-sizing: border-box;
}
.main-area img {
  height: auto;
  opacity: 1;
  width: 100%;
}
.main-area a {
  text-decoration: none;
}
.main-area picture {
  display: block;
}
.main-area p, .main-area ul, .main-area ol, .main-area dl {
  list-style: none;
}
@media only screen and (max-width: 767px) {
  .main-area .pc_only {
    display: none;
  }
  .main-area .sp_only {
    display: block;
  }
}

@media only screen and (min-width: 768px) {
  .main-area .pc_only {
    display: block;
  }
  .main-area .sp_only {
    display: none;
  }
}

#FR250903champion {
  --font-centry: "century-gothic", sans-serif;
  --font-notosans: "DM Sans", sans-serif;
  --font-ja: var(--font-notosans);
  --font-en: var(--font-centry);
  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray: #595757;
  --color-darkgray: #3E3A39;
  --color-orange: #D8B59E;
  --color-brown: #7C4340;
  font-feature-settings: "palt";
  text-align: center;
  color: var(--color-darkgray);
  overflow: clip;
}
#FR250903champion .contents__bottom {
  padding-bottom: calc(200 * var(--formula));
}
#FR250903champion .mv-inner {
  width: 100%;
  position: relative;
}
#FR250903champion .mv_txt {
  width: calc(351 * var(--formula));
  position: absolute;
  left: calc(60 * var(--formula));
  bottom: calc(86 * var(--formula));
  z-index: 5;
}

@media only screen and (min-width: 768px) {
  .footer {
    width: 100%;
  }
  .archive {
    border-top: 1px solid #58595b;
  }
  #FR250903champion {
    --header-container-height: 120px;
    display: flex;
    width: 100%;
    padding-bottom: calc(230 * var(--formula));
  }
  #FR250903champion::-webkit-scrollbar {
    display: none;
  }
  #FR250903champion .contents__left {
    position: sticky;
    top: 0;
    width: 50%;
    height: 100vh;
    z-index: 1;
    overflow: hidden;
    height: calc(100vh - (var(--header-container-height, 0px)));
    top: var(--header-container-height, 0);
  }
  #FR250903champion .product__block--mv {
    width: auto;
    height: calc(100vh - (var(--header-container-height, 0px)));
    overflow: hidden;
  }
  #FR250903champion .product__block--mv .mv-inner {
    width: 100%;
    height: 100%;
    position: relative;
  }
  #FR250903champion .product__block--mv .mv_img {
    width: 100%;
    height: 100%;
  }
  #FR250903champion .product__block--mv .mv_img a {
    display: block;
    width: 100%;
    height: 100%;
  }
  #FR250903champion .product__block--mv .mv_img a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 80% top;
  }
  #FR250903champion .product__block--mv .mv_img picture {
    width: 100%;
    height: 100%;
  }
  #FR250903champion .product__block--mv .title_box {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      pointer-events: none;
      z-index: 1;
  }
  #FR250903champion .mv_txt {
    width: calc(250 * (100vw / 1400));
    left: calc(52 * (100vw / 1400));
    bottom: initial;
    top: 5.6dvh;
  }
  #FR250903champion .contents__right {
    width: 50%;
    position: relative;
    overflow: clip;
  }
}

/* 共通 スタイル */
.FR250903champion img {
  width: 100%;
  height: 100%;
}
.credit {
  font-size: calc(20 * var(--formula));
  letter-spacing: 0.06em;
  font-family: var(--font-en);
  font-weight: var(--fw-regular);
  font-style: normal;
  line-height: 1.8;  
  display: block;
  margin-top: calc(40 * var(--formula));
  /* display: flex;
  flex-direction: column;
  align-items: center; */
}

.credit > a {
  display: inline-block;
}

.credit span {
  margin: 0 calc(5 * var(--formula)) 0 calc(5 * var(--formula));
}

.collection__txt img {
  background: none;
}

/*=======================================
  lead_box   
========================================*/
.lead_box {
  width: calc(750 * var(--formula));
  margin: calc(124 * var(--formula)) auto 0;
}
.lead_box .main_lead_title {
  width: calc(569 * var(--formula));
  margin: 0 auto;
}
.lead_box .line-draw {
  position: relative;
  transform: translate3d(0, 0, 0);
  width: calc(2 * var(--formula));
  height: calc(70 * var(--formula));
  display: block;
  margin: calc(52 * var(--formula)) auto 0;
}
/* 縦線のスタイル（アニメーション前） */
.lead_box .line-draw::before {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--formula));
  content: "";
  transition: height 0.8s;
  transform: translate(0);
  width: calc(2 * var(--formula));
  height: 0;
  background: var(--color-brown);
}
/* JSによってこのクラスが付与されるとアニメーションが開始 */
.lead_box .line-draw.is-active::before {
  transform: translate(0);
  height: 100%;
}

.lead_box .main_lead{
  font-family: var(--font-ja);
  font-size: calc(23 * var(--formula));
  line-height: 2;
  letter-spacing: 0.14em;
  color: var(--color-gray);
  font-weight: var(--fw-regular);
  margin: calc(40 * var(--formula)) auto 0;
}

@media screen and (min-width: 768px) {
.lead_box {
  margin: calc(125 * var(--formula)) auto 0;
}
.lead_box .main_lead {
  margin: calc(39 * var(--formula)) auto 0;
}
.lead_box .line-draw::before {
  transition-delay: 1s;
}
}

/*=======================================
  contents01   
========================================*/
.contents01 {
  width: calc(750 * var(--formula));
  margin: calc(136 * var(--formula)) auto 0;
}
.contents01 .collection__shell01 {
  width: 100%;
  position: relative;
}
.contents01 .collection__shell01 .collection__txt {
  width: calc(71 * var(--formula));
  position: absolute;
  bottom: calc(40 * var(--formula));
  right: calc(131 * var(--formula));
  z-index: 5;
  pointer-events: none;
}

@media screen and (min-width: 768px) {
  .contents01 {
    margin: calc(138 * var(--formula)) auto 0;
  }
}

/*=======================================
  contents02   
========================================*/
.contents02 {
  width: calc(750 * var(--formula));
  margin: calc(191 * var(--formula)) auto 0;
}
.contents02 .collection__shell01 {
  width: calc(660 * var(--formula));
  margin-left: calc(90 * var(--formula));
}
.contents02 .collection__shell02 {
  width: calc(750 * var(--formula));
  position: relative;
}
.contents02 .img0202 {
  position: absolute;
  width: calc(758 * var(--formula));
  top: calc(-43 * var(--formula));
  left: calc(-64 * var(--formula));
  z-index: 3;
}
.contents02 .collection__shell02 .collection__txt {
  width: calc(221 * var(--formula));
  position: absolute;
  top: calc(88 * var(--formula));
  right: calc(140 * var(--formula));
  z-index: 5;
  pointer-events: none;
}

.contents02 .credit {
  margin-top: calc(1006 * var(--formula));
}

@media screen and (min-width: 768px) {

}

/*=======================================
  contents03   
========================================*/
.contents03 {
  width: calc(750 * var(--formula));
  margin: calc(193 * var(--formula)) auto 0;
}
.contents03 .collection__shell01 {
  width: 100%;
  position: relative;
}
.contents03 .collection__shell01 .collection__txt0301 {
  width: calc(292 * var(--formula));
  position: absolute;
  top: calc(370 * var(--formula));
  left: calc(46 * var(--formula));
  z-index: 5;
  pointer-events: none;
}
.contents03 .collection__shell02 {
  width: 100%;
  background-color: var(--color-orange);
  padding-bottom: calc(142 * var(--formula));
}
.contents03 .collection__shell02 .collection__warp {
  width: calc(640 * var(--formula));
  margin: 0 auto;
  padding-top: calc(160 * var(--formula));
  position: relative;
}
.contents03 .collection__shell02 .credit_img01 {
  position: absolute;
  width: calc(263 * var(--formula));
  top: calc(125 * var(--formula));
  right: calc(126 * var(--formula));
  z-index: 3;
}
.contents03 .collection__shell02 .credit_img02 {
  position: absolute;
  width: calc(17 * var(--formula));
  top: calc(220 * var(--formula));
  right: calc(112 * var(--formula));
  z-index: 3;
}
.contents03 .collection__shell02 .credit_img03 {
  position: absolute;
  width: calc(87 * var(--formula));
  top: calc(230 * var(--formula));
  right: calc(28 * var(--formula));
  z-index: 3;
}
.contents03 .collection__shell02 .credit_img04 {
  position: absolute;
  width: calc(19 * var(--formula));
  top: calc(360 * var(--formula));
  right: calc(22 * var(--formula));
  z-index: 3;
}
.contents03 .collection__shell02 .credit_img05 {
  position: absolute;
  width: calc(54 * var(--formula));
  top: calc(372 * var(--formula));
  right: calc(-24 * var(--formula));
  z-index: 3;
}
.contents03 .collection__shell02 .collection__txt0302 {
  width: calc(631 * var(--formula));
  margin: calc(90 * var(--formula)) auto 0;
}
.contents03 .collection__shell02 .collection__txt0303 {
  width: calc(564 * var(--formula));
  margin: calc(14 * var(--formula)) auto 0 calc(89 * var(--formula));
}

@media screen and (min-width: 768px) {

}

/*=======================================
  contents04   
========================================*/
.contents04 {
  width: calc(750 * var(--formula));
  margin: calc(159 * var(--formula)) auto 0;
}
.contents04 .collection__shell01 {
  width: calc(660 * var(--formula));
  margin-left: 0;
}
.contents04 .collection__shell02 {
  width: calc(750 * var(--formula));
  position: relative;
}
.contents04 .img0202 {
  position: absolute;
  width: calc(768 * var(--formula));
  top: calc(-48 * var(--formula));
  left: calc(57 * var(--formula));
  z-index: 3;
}
.contents04 .collection__shell02 .collection__txt {
  width: calc(214 * var(--formula));
  position: absolute;
  top: calc(172 * var(--formula));
  right: calc(42 * var(--formula));
  z-index: 5;
  pointer-events: none;
}

.contents04 .credit {
  margin-top: calc(1008 * var(--formula));
}

@media screen and (min-width: 768px) {

}

/*=======================================
  lp__end_area  
========================================*/
.lp__end_area {
  width: calc(750 * var(--formula));
  margin: calc(192 * var(--formula)) auto calc(154 * var(--formula));
}
.lp__end_area .all_link {
  width: calc(560 * var(--formula));
  margin: 0 auto;
}

.lp__end_area .staff__area {
  width: calc(435 * var(--formula));
  margin: calc(158 * var(--formula)) auto 0;
}
.lp__end_area .staff__area .staff_title {
  font-family: var(--font-centry);
  font-weight: var(--fw-regular);
  font-size: calc(20 * var(--formula));
  letter-spacing: 0.06em;
  color: var(--color-darkgray);
  font-feature-settings: "palt";
  text-align: center;
  white-space: nowrap;
}
.lp__end_area .staff_txt {
  font-family: var(--font-centry);
  font-weight: var(--fw-regular);
  font-size: calc(20 * var(--formula));
  letter-spacing: 0.06em;
  color: var(--color-darkgray);
  font-feature-settings: "palt";
  text-align: center;
  line-height: 1.8;
  margin-top: calc(10 * var(--formula));
}


.js-trigger.collection__txt {
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-trigger.collection__txt {
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
}

.js-trigger.collection__txt .txt--body {
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
}

.js-trigger.collection__txt0301 {
  -webkit-clip-path: inset(100% 0 0 0);
          clip-path: inset(100% 0 0 0);
}
.js-trigger.collection__txt0301 .txt--body {
  -webkit-clip-path: inset(100% 0 0 0);
          clip-path: inset(100% 0 0 0);
}

.js-trigger.collection__txt0302 {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.js-trigger.collection__txt0302 .txt--body {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}

.js-trigger.collection__txt0303 {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.js-trigger.collection__txt0303 .txt--body {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}

.js-trigger.collection__txt.is-active {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
.js-trigger.collection__txt.is-active .txt--body {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}

.js-trigger .txt--body {
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* フェード */
.js-fade {
  opacity: 0;
  transform: translate(0, 0);
  filter: blur(5px);
  transition: all 1.1s ease;
}

.js-fade.is-active {
  opacity: 1;
  filter: blur(0px);
  transform: translate(0, 0);
}

.js-fade-rotate {
  opacity: 0;
  transform: translate(0, 0) rotate(9.2deg);
  filter: blur(5px);
  transition: all 1.1s ease;
}

.js-fade-rotate.is-active {
  opacity: 1;
  filter: blur(0px);
  transform: translate(0, 0);
}

.js-fade-rotate02 {
  opacity: 0;
  transform: translate(0, 0) rotate(-9.2deg);
  filter: blur(5px);
  transition: all 1.1s ease;
}

.js-fade-rotate02.is-active {
  opacity: 1;
  filter: blur(0px);
  transform: translate(0, 0);
}

.js-fade-up {
  opacity: 0;
  transform: translate(0, 20px);
  filter: blur(5px);
  transition: all 1.1s ease;
}

.js-fade-up.is-active {
  opacity: 1;
  filter: blur(0px);
  transform: translate(0, 0);
}


#FR250903champion .delay01 {
  transition-delay: 0.2s;
  animation-delay: 0.2s;
}

#FR250903champion .delay02 {
  transition-delay: 0.6s;
  animation-delay: 0.6s;
}

.model_bg {
  background: #fff;
}
@media screen and (max-width: 767px) {
  .archive {
    width: calc(750 * 100vw / 750) !important;
  }
}

@media screen and (min-width: 768px) {
  #FR250903champion .delay03 {
    transition-delay: 0.8s;
    animation-delay: 0.8s;
  }

  #FR250903champion .lead_box .delay01 {
    transition-delay: 1.4s;
    animation-delay: 1.4s;
  }
}