@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

/* MediaQuery = SP => Tablet => PC */
/* 1em = 1vw */

/* -------------------------
  root設定
------------------------- */
:root {
  font-size: 62.5%;

  /* カラー変数 */
  --color_main:           hsl(0, 0%, 100%);
  --color_base:           #DA1D00;
  --color_baseRGB:        218, 29, 0;
  --color_baseHalf:       rgb(194, 26, 0);
  --color_baseHalfRGB:    194, 26, 0;
  --color_baseDark:       rgb(163, 22, 0);
  --color_baseDarkRGB:    163, 22, 0;
  --color_accent:         #C09A5E;
  --color_accentRGB:      192, 154, 94;
  --color_accentDark:     #996515;
  --color_accentDarkRGB:  153, 101, 21;
  --color_text:           hsl(0, 0%, 100%);

  /* フォントファミリー変数 */
  --font_family_ENG: "Roboto", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  --font_weight_ENG: 700;
  
  /* border-radius変数 */
  --radius_xs:   3px;
  --radius_sm:   6px;
  --radius_md:   8px;
  --radius_lg:  12px;
  --radius_xl:  24px;

  /* line-height変数 */
  --line_height_sm: 1.3;
  --line_height_md: 1.5;
  --line_height_lg: 1.7;
  --line_height_xl: 2.0;

  /* サイズ変数 */
  --header_height: 50px;
  --contents__maxWidth: 100%;

 /* フォントサイズ変数 */
  --font_size_xs:   1.3vw;
  --font_size_sm:   1.4vw;
  --font_size_md:   1.6vw;
  --font_size_lg:   2.0vw;
  --font_size_xl:   2.4vw;
  --font_size_2xl:  3.0vw;
  --font_size_3xl:  3.8vw;
  --font_size_4xl:  5.2vw;
}

/* タブレット変数 */
@media (min-width: 600px) {
  :root {
    /* サイズ変数 */
    --header_height: 50px;
  }
}

/* PC変数 */
@media (min-width: 1024px) {
  :root {
    font-size: 72.5%;

    /* サイズ変数 */
    --header_height: 70px;
    --contents__maxWidth: 600px;
  }
}


/* -------------------------
  デバイス判定
------------------------- */
@media (max-width: 599px) {
  .pc {
    display: none !important;
  }
  .tablet:not(.sp) {
    display: none !important;
  }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .tablet ~ .pc:not(.tablet) {
    display: none !important;
  }
  .sp:not(.tablet) {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .sp {
    display: none !important;
  }
  .tablet:not(.pc) {
    display: none !important;
  }
}
/* デバイスが縦長の向き */
@media (orientation: portrait) {
  .landscape {
    display: none !important;
  }
}
/* デバイスが横長の向き */
@media (orientation: landscape) {
  .portrait {
    display: none !important;
  }
}


/* -------------------------
  html body
------------------------- */
html {
  touch-action: manipulation;
  /* background-color: var(--color_base); */
  overscroll-behavior: none;
}
body {
  font-family: 'Noto Sans JP', "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 1vw;
  font-weight: normal;
  line-height: var(--line_height_md);
  background: var(--color_base);
  color: var(--color_text);
  text-align: left;
  font-feature-settings: "palt";
  background-color: var(--color_base);
}
@media (min-width: 1024px) {
  body {
    font-size: calc(var(--contents__maxWidth) * 0.01);
  }
}
body * {
  letter-spacing: 0.05em;
}


/* -------------------------
  common
------------------------- */
img {
  display: block;
  /* Microsoft Edgeで画像検索無効に */
  pointer-events: none;
}
span.br {
  display: inline-block;
}
::selection {
  /* background-color: yellow; */
}
h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0.1em;
  line-height: var(--line_height_sm);
}
/* @media (any-hover: hover) {
  a[href] {
    transition: opacity 0.1s;
  }
  a[href]:hover {
    transition: opacity 0.2s;
    opacity: 0.5;
  }
} */
a[href] {
  transition: opacity 0.15s, scale 0.15s;
}
@media (any-hover: hover) {
  a[href]:hover {
    opacity: 0.8;
    transition: opacity 0.1s, scale 0.1s;
  }
}
a[href]:active {
  transition: opacity 0.1s, scale 0.1s;
  opacity: 0.8;
  scale: 0.95;
}

.btn__pageTrans {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.75em;
  min-width: 64%;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  overflow: hidden;
}
.btn__pageTrans::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 100%, 0.15);
  /* clip-path: polygon(100% 0, 0% 100%, 100% 100%); */
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}
.btn__pageTrans.btn__search {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}
.btn__pageTrans.btn__search::after {
  content: "";
  position: relative;
  display: inline-block;
  width: 2.2rem;
  aspect-ratio: 1/1;
  background: url(../img/comment/icon__search.svg);
  order: -1;
}


/* -------------------------
  ローディング中の画面
------------------------- */
.loading__mask {
  z-index: 1001;
  position: fixed;
  top: 0;
  left: 0;
  width:  100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  user-select: none;
  text-align: center;
  background: var(--color_base);
  clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 57%, 100% 43%, 100% 43%, 0 57%, 0 100%, 100% 100%, 100% 0%);
  transition: clip-path 0.75s, opacity 0s 0.75s;
  will-change: clip-path;
}
body.loaded .loading__mask {
  /* clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%); */
  /* clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 7%, 100% 0, 100% 93%, 0 100%, 0 100%, 100% 100%, 100% 0%); */
  clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% -7%, 100% 100%, 0 107%, 0 100%, 100% 100%, 100% 0%);
  opacity: 0;
}

.loading__progress {
  --progress_percent: 0%;
  --bar_height: 4px;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 70%;
  height: auto;
  max-width: 300px;
  pointer-events: none;
}
.loading__progressText {
  position: absolute;
  top: -1.3em;
  left: 0;
  width: 100%;
  font-size: 12px;
  height: 1em;
  line-height: 1;
}
.loading__progressText::before,
.loading__progressText::after {
  content: '';
  color: currentColor;
  font-family: system-ui;
  letter-spacing: 0.05em;
  opacity: 0.8;
}
.loading__progressText::before {
  content: 'LOADING...';
  text-align: left;
  position: absolute;
  top: 0;
  left: 0;
  animation: loadingText 0.75s infinite linear;
}
@keyframes loadingText {
  0%   {content: 'LOADING   ';}
  25%  {content: 'LOADING.  ';}
  50%  {content: 'LOADING.. ';}
  75%  {content: 'LOADING...';}
  100% {content: 'LOADING   ';}
}

.loading__progressText::after {
  content: attr(data-progress);
  text-align: right;
  position: absolute;
  top: 0;
  right: 0;
}

.loading__progressBar {
  width: 100%;
  height: var(--bar_height);
  background-color: hsla(0, 0%, 100%, 0.25);
  border-radius: var(--bar_height);
  overflow: hidden;
}
.loading__progressBarFill {
  border-radius: var(--bar_height);
  height: 100%;
  width: var(--progress_percent);
  background-color: hsla(0, 0%, 100%, 1);
  transition: width 0.2s ease-in-out;
}


/* -------------------------
  header
------------------------- */
header {
  height: var(--header_height);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--color_base);
  z-index: 1000;
  display: flex;
}
@media (min-width: 1024px) {
  header {
    position: fixed !important;
    top: 0 !important;
    transition: none !important;
    transform: none !important;
    background-color: transparent;
    pointer-events: none;
  }
}
.header__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 13px;
  gap: 8px;
  flex: 1;
}
@media (min-width: 1024px) {
  .header__inner {
    padding: 17px 3vw;
    gap: 17px;
    pointer-events: none;
  }
  .header__inner > * {
    pointer-events: all;
  }
}
.header__logo {
  display: block;
  height: 100%;
}
.header__logo img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}
.gnav__trigger {
  position: relative;
  margin-left: auto;
  height: 100%;
  width: auto;
  aspect-ratio: 1.1/1;
  padding: 10px 13px;
}
@media (min-width: 1024px) {
  .gnav__trigger {
    margin-right: 2.5em;
    pointer-events: all;
    aspect-ratio: 1/1;
    padding: 10px;
    }
}
.gnav____menuBtn {
  position: relative;
  height: 100%;
  width:  100%;
  display: flex;
  align-items: center;
  transition: all 0.15s;
}
.gnav____menuBtn>span {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #fff;
  position: absolute;
}
@media (min-width: 1024px) {
  .gnav____menuBtn>span {
    height: 3px;
  }
}
.gnav____menuBtn>span:nth-child(1) {
  transform: translateY(-8px);
  transition: transform 0.1s;
  will-change: transform;
}
.gnav____menuBtn>span:nth-child(2) {
  width: 70%;
  margin-left: 30%;
  transition: opacity 0.1s;
}
.gnav____menuBtn>span:nth-child(3) {
  transform: translateY(8px);
  transition: transform 0.1s;
}
@media (min-width: 1024px) {
  .gnav____menuBtn>span:nth-child(1) {
    transform: translateY(-11px);
  }
  .gnav____menuBtn>span:nth-child(3) {
    transform: translateY(11px);
  }
}
.isActive .gnav____menuBtn>span:nth-child(1) {
  transform: translateY(0) rotate(-45deg);
  transition: transform 0.2s;
}
.isActive .gnav____menuBtn>span:nth-child(2) {
  opacity: 0;
  transition: opacity 0.2s;
}
.isActive .gnav____menuBtn>span:nth-child(3) {
  transform: translateY(0) rotate(45deg);
  transition: transform 0.2s;
}

/* -------------------------
  gnav
------------------------- */
.gnav {
  position: fixed;
  top: 0;
  left: 0;
  padding-top: var(--header_height);
  width: 100%;
  height: 100%;
  background-color: var(--color_baseDark);
  background-color: hsl(8, 77%, 29%);
  opacity: 0;
  /* transform: translateY(-100%); */
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 999;
}
@media (min-width: 1024px) {
  .gnav {
    padding-top: 0;
    width: var(--contents__maxWidth);
    overflow: hidden;
    margin-left: auto;
    right: 0;
  }
}
.gnav.isActive {
  opacity: 1;
  /* transform: translateY(0); */
  pointer-events: all;
  transition: opacity 0.15s;
}
.gnav__inner {
  overflow-y: auto;
  overscroll-behavior: none;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 60px 20px;
  /* background: linear-gradient(rgba(0,0,0, 0.25), rgba(0,0,0, 0.25)),linear-gradient(rgba(var(--color_baseDarkRGB), 0.9), rgba(var(--color_baseDarkRGB), 0.9)),url(../img/main__bg.jpg) no-repeat center / cover; */
}
.gnav__inner::before {
  content: "";
  position: fixed;
  /* top:  calc(50% + calc(var(--header_height) * 0.5)); */
  top:  50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width:  80%;
  /* height: 80%; */
  height: calc(100% - var(--header_height));
  background: url(../img/logo__title.svg) no-repeat center / contain;
  opacity: 0.2;
  /* filter: invert(100%); */
  mix-blend-mode: soft-light;
}
@media (min-width: 1024px) {
  .gnav__inner::before {
    width: calc(var(--contents__maxWidth) * 0.8);
    left: auto;
    right: calc(var(--contents__maxWidth) * 0.5);
    transform: translate(50%,-50%);
  }
}
.gnav__list {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  /* align-items: center; */
  width: fit-content;
  margin: 0 auto;
  /* padding-right: 10%; */
}
.gnav__listSubTitle {
  opacity: 0.7;
  /* font-size: 1.2rem; */
  font-size: 3.4em;
  font-weight: bold;
  margin-top: 2em;
  letter-spacing: 0.15em;
  width: fit-content;
}
.gnav__listItem {
  /* font-size: 2.4rem; */
  /* font-size: 6.4em; */
  font-size: 5.867em;
  font-weight: bold;
  width: fit-content;
}
.gnav__listItem br {
  display: none;
}
.gnav__listItem.listSmall {
  /* font-size: 1.8rem; */
  font-size: 4.8em;
}
.gnav__listItem a {
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .gnav__list {
    gap: 25px;
    /* padding-right: 20%; */
    padding-right: 10%;
  }
  .gnav__listSubTitle {
    font-size: 2.8em;
  }
  .gnav__listItem {
    font-size: 4.8em;
  }
  .gnav__listItem.listSmall {
    font-size: 3.6em;
  }
}


/* -------------------------
  main
------------------------- */
main {
  margin-top: var(--header_height);
  /* background-color: var(--color_base); */
  /* max-width: 600px; */
  /* margin: 0 auto; */
}
@media (min-width: 1024px) {
  main {
    margin-top: 0;
  }
}
.contents__container {
  width: 100%;
  background-color: var(--color_base);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .contents__container {
    width: var(--contents__maxWidth);
    margin-left: auto;
  }
}
.youtube__container {
  display: none;
  width: 0;
  height: 0;
}
.youtube__container iframe {
  display: none;
}
@media (min-width: 1024px) {
  .youtube__container {
    position: fixed;
    width:  calc(100% - var(--contents__maxWidth));
    /* height: calc(100vh  - var(--header_height)); */
    /* height: calc(100dvh - var(--header_height)); */
    height: 100vh;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: sticky; */
    /* top: var(--header_height); */
    top: 0;
    background-color: #420d04;
    padding: 3vw;
    padding-top: calc(3vw + var(--header_height));
  }
  .youtube__container::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 8px;
    background-image: linear-gradient(90deg, rgba(0,0,0, 0), rgba(0,0,0, 0.2));
  }
  @media (min-width: 1280px) {
    .youtube__container {
      padding: 3vw 3.5vw;
      padding-top: calc(3vw + var(--header_height));
    }
  }
  @media (min-width: 1440px) {
    .youtube__container {
      padding: 3vw 4.5vw;
      padding-top: calc(3vw + var(--header_height));
    }
  }
  @media (min-width: 1680px) {
    .youtube__container {
      padding: 3vw 6.5vw;
      padding-top: calc(3vw + var(--header_height));
    }
  }
  @media (min-width: 1920px) {
    .youtube__container {
      padding: 3vw 10vw;
      padding-top: calc(3vw + var(--header_height));
    }
  }
  .youtube__container::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    opacity: 0.1;
    background: url(../img/main__bg.jpg) no-repeat center/ cover;
  }
  .youtube__container iframe {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    max-width: calc((100vh - var(--header_height) - 6vw) * 1.78);
    filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.4));
  }  
}


/* -------------------------
  hero
------------------------- */
.hero__wrap {
  position: relative;
  width: 100%;
  height: auto;
}
.hero__youtube {
  position: absolute;
  right:  4em;
  bottom: 4em;
  width:  24em;
  max-width: 140px;
  aspect-ratio: 1/1;
  z-index: 10;
}
.hero__youtube img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
}

.hero {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.41;
  background-color: var(--color_baseDark);
  clip-path: polygon(0 10%, 100% 0, 100% 90%, 0% 100%);
  /* will-change: transform; */
}
.index .hero {
  aspect-ratio: auto;
  height: calc(100vh  - var(--header_height));
  height: calc(100svh - var(--header_height));
  min-height: 141em;
  max-height: 200em;
}
@media (min-width: 1024px) {
  .index .hero {
    aspect-ratio: auto;
    height: 100vh;
    height: 100svh;
    min-height: 141em;
    max-height: 200em;
  }
}
.hero__bg {
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: calc(100% + 50px);
  background: url(../img/main__bg.jpg) center / cover;
  will-change: transform;
  opacity: 0.25;
}
.hero__innerOverlayLight {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.2;
}
.hero__innerOverlayLight::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width:  55%;
  height: auto;
  aspect-ratio: 1 / 1.16;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  background-image: linear-gradient(-90deg, hsla(0, 0%, 100%, 0.2) 25%, hsla(0, 0%, 100%, 1));
}
.hero__innerOverlayLight::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 48%;
  height: auto;
  aspect-ratio: 1 / 1.16;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0.15) 25%, hsla(0, 0%, 100%, 0.85));
}
.hero__inner {
  position: relative;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 55% 0, 100% 12%, 100% 100%, 45% 100%, 0 88%);
  background-color: rgba(0, 0, 0, 0.35);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 10%;
  will-change: transform;
}
.hero__innerOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  will-change: opacity;
}

.hero__title {
  width: 76%;
  will-change: transform;
}
.hero__title img.desvg {
  opacity: 0;
}
.hero__title .hero__titleText {
  position: absolute;
  opacity: 0;
  font-size: 0;
  pointer-events: none;
}
#logoTitle {
  width: 100%;
  overflow: visible;
}
#logoTitle * {
  /* トランスフォーム基準位置を各オブジェクト基準に */
  /* transform-box: fill-box; */
  transform-origin: center center;
  /* will-change: transform; */
}

/* hero アニメーション設定
------------------------- */

/* 初期状態 */
#logoTitle               {opacity: 1; scale: 1.20; transition: all 2.00s 0.0s ease;}
#logoTitle #item01       {opacity: 0; scale: 1.25; transition: all 0.75s 0.1s;}
#logoTitle #item02       {opacity: 0; scale: 1.40; transition: all 0.75s 0.2s;}
#logoTitle #item03       {opacity: 0; scale: 1.60; transition: all 0.75s 0.3s;}
#logoTitle #item04       {opacity: 0; scale: 1.40; transition: all 0.75s 0.4s;}
#logoTitle #item05       {opacity: 0; scale: 1.25; transition: all 0.75s 0.5s;}

#logoTitle #star01  {opacity: 1; transform-box: fill-box; scale: 0 4; transition: all 0.3s 0.7s;}
#logoTitle #star02  {opacity: 1; transform-box: fill-box; scale: 0 5; transition: all 0.3s 0.8s;}
#logoTitle #star03  {opacity: 1; transform-box: fill-box; scale: 0 6; transition: all 0.3s 0.9s;}
#logoTitle #star04  {opacity: 1; transform-box: fill-box; scale: 0 5; transition: all 0.3s 1.0s;}
#logoTitle #star05  {opacity: 1; transform-box: fill-box; scale: 0 4; transition: all 0.3s 1.1s;}


/* 終了状態 */
.start #logoTitle               {opacity: 1; scale: 1 1; translate: 0 0;}
.start #logoTitle #item01       {opacity: 1; scale: 1 1; translate: 0 0;}
.start #logoTitle #item02       {opacity: 1; scale: 1 1; translate: 0 0;}
.start #logoTitle #item03       {opacity: 1; scale: 1 1; translate: 0 0;}
.start #logoTitle #item04       {opacity: 1; scale: 1 1; translate: 0 0;}
.start #logoTitle #item05       {opacity: 1; scale: 1 1; translate: 0 0;}

.start #logoTitle #star01  {opacity: 1; scale: 1 1; translate: 0 0;}
.start #logoTitle #star02  {opacity: 1; scale: 1 1; translate: 0 0;}
.start #logoTitle #star03  {opacity: 1; scale: 1 1; translate: 0 0;}
.start #logoTitle #star04  {opacity: 1; scale: 1 1; translate: 0 0;}
.start #logoTitle #star05  {opacity: 1; scale: 1 1; translate: 0 0;}


.contents__wrapper {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: 50px 0 0px;
}


/* -------------------------
  history
------------------------- */
.contents__history {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  gap: 8em;
}
.history__title {
  width: 70%;
  margin: 0 auto;
}
.history__SwipersWrap {
  position: relative;
  width: 100%;
  height: auto;

  /* swiper高さの変数 */
  --swiper-height: 70em;
}
@media (min-width: 1024px) {
  .history__SwipersWrap {
    /* swiper高さの変数 */
    /* --swiper-height: calc(var(--contents__maxWidth) * 0.9); */
  }
}

/* -------------------------
  historySwiper
------------------------- */
.historySwiper {
  position: relative;
  /* top: 60px; */
  width: 100%;
}
.historySwiper .swiper-wrapper {
  transition-timing-function: linear;
}
.historySwiper .swiper-slide {
  text-align: center;
  display: inline-block;
  width: fit-content;
  margin: 0 3em;
}
.historySwiper .swiper-slide a {
  position: relative;
  display: block;
  height: var(--swiper-height);
  width: fit-content;
  /* pointer-events: none; */
}
.historySwiper .swiper-slide a::after,
.badge__product::after {
  content: "商品を見る";
  position: absolute;
  bottom: 0.5em;
  right:  0.5em;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0.25em 0.75em;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 2em;
  overflow: hidden;
}
.badge__product::after {
  font-size: 1.1rem;
}
.historySwiper .swiper-slide a img {
  height: 100%;
}

.historySlide__detailWrap {
  padding-top: 10px;
}
.historySlide__year,
.historySlide__detailWrap {
  /* opacity: 0; */
  transition: opacity 0s;
}
.historySlide__year {
  width: 100%;
  font-family: var(--font_family_ENG);
  font-weight: var(--font_weight_ENG);
  /* font-size: 5.2rem; */
  font-size: 10em;
  line-height: 0.9;
  /* height: 60px; */
  padding-bottom: 10px;
  /* margin-bottom: var(--swiper-height); */
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow: hidden; */
}
.historySlide__year * {
  font-feature-settings: "tnum";
  letter-spacing: 0.025em;
}
.historySlide__title {
  font-weight: bold;
  /* font-size: 1.6rem; */
  font-size: 3.6em;
  line-height: 1.3;
  letter-spacing: 0.1em;
}
.historySlide__name {
  font-weight: bold;
  /* font-size: 3.2rem; */
  font-size: 6.0em;
  line-height: 1.3;
  letter-spacing: 0.1em;
}


/* -------------------------
  movie
------------------------- */
.contents__movie {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* gap: 20px; */
  background-color: var(--color_baseDark);
  scale: 1;
}
@media (min-width: 1024px) {
  .contents__movie {
    display: none;
  }
}
.movie__bgTop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.movie__bgTop::before,
.movie__bgTop::after {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  /* top: -20px; */
  top: -5.3em;
  /* height: 60px; */
  height: 16em;
  background-color: var(--color_base);
  z-index: -1;
}
.movie__bgTop::before {
  background-color: var(--color_base);
  clip-path: polygon(100% 0, 0 0, 0 100%);
}
.movie__bgTop::after {
  background-color: var(--color_baseDark);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
.movie__bgBottom::before,
.movie__bgBottom::after {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  /* bottom: -30px; */
  bottom: -8em;
  /* height: 60px; */
  height: 16em;
  background-color: var(--color_base);
  z-index: -1;
}
.movie__bgBottom::before {
  background-color: var(--color_baseDark);
  clip-path: polygon(100% 0, 0 0, 0 100%);
}
.movie__bgBottom::after {
  background-color: var(--color_baseHalf);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
.movie__title {
  width: 50%;
}
.movie__subTitle {
  width: 100%;
  font-size: 3.73em;
  font-weight: bold;
  text-align: center;
}
.iframeClickable__wrap {
  position: relative;
  width: 90%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-color: #000;
  margin: 20px 0;
}
.contents__movie iframe {
  width: 100%;
  height: 100%;
}
.iframeClickable__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.iframeClickable__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.iframeClickable__thumb::after {
  content: "";
  position: absolute;
  top:  50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width:  34%;
  height: 34%;
  opacity: 0.9;
  background: url(../img/iframeClickable__thumbIcon.svg) no-repeat center / contain;
}


/* -------------------------
  introduction
------------------------- */
.contents__introduction {
  position: relative;
  width: 100%;
  text-align: center;
  background-color: var(--color_baseHalf);
}
.contents__introduction::before,
.contents__introduction::after {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  height: 80px;
  background-color: var(--color_baseHalf);
  z-index: 0;
}
.contents__introduction::before {
  /* top: -50px; */
  top: calc(8em - 80px);
}
.contents__introduction::after {
  bottom: -80px;
}
@media (min-width: 1024px) {
  .contents__introduction {
    padding-top: 16em;
  }
  .contents__introduction::before {
    content: none;
  }
  .introduction__bgTop::before,
  .introduction__bgTop::after {
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    /* top: -20px; */
    top: -5.3em;
    /* height: 60px; */
    height: 16em;
    background-color: var(--color_base);
    /* z-index: -1; */
  }
  .introduction__bgTop::before {
    background-color: var(--color_base);
    clip-path: polygon(100% 0, 0 0, 0 100%);
  }
  .introduction__bgTop::after {
    background-color: var(--color_baseHalf);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  }
}
.introduction__text {
  position: relative;
  font-size: 4.0em;
  font-weight: bold;
  line-height: 2.2;
  letter-spacing: 0.1em;
  margin: 2em 0;
}
.introduction__text * {
  letter-spacing: 0.1em;
}
.introduction__catch {
  position: relative;
  font-size: 6.0em;
  font-weight: bold;
  line-height: 1.7;
  margin: 1.5em 0;
}
.introduction__notesWrap {
  position: relative;
  width: 100%;
  padding: 0 3%;
}
.introduction__note {
  display: block;
  font-size: 1.0rem;
  line-height: 1.5;
  margin-top: 0.5em;
}
.introduction__note:first-child {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .introduction__text {
    /* font-size: 2.5rem; */
  }
  .introduction__catch {
    /* font-size: 3.6rem; */
  }
  .introduction__note {
    font-size: 1.3rem;
  }
}


/* -------------------------
  result
------------------------- */
.result__titleWrap {
  position: relative;
  margin-bottom: 20px;
}
.result__title {
  display: block;
  width: 60%;
  margin: 0 auto;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10;
}

.resultSwiper {
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  position: relative;
}
.resultSwiper::before,
.resultSwiper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.resultSwiper::before {
  background: rgba(0, 0, 0, 0.7);
}
.resultSwiper::after {
  background-image: linear-gradient(180deg, rgba(var(--color_baseRGB), 0) 25%, rgba(var(--color_baseRGB), 1));
}
.resultSwiper .swiper-wrapper {
  transition-timing-function: linear;
}
.resultSwiper .swiper-slide {
  width: 50%;
  height: auto;
  aspect-ratio: 1 / 1.618;
  overflow: hidden;
}
.resultSwiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.3;
  transform-origin: center 40%;
}

.result__itemWrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px 0;
  align-items: end;
  margin-bottom: 60px;
}
.result__itemWrap:last-child {
  margin-bottom: 0;
}
.result__item {
  position: relative;
  z-index: 0;
  width: 100%;
  text-align: center;
  overflow: hidden;
}
.result__itemCrown {
  margin: 0 auto;
  width: 20%;
}
.result__itemTitle {
  font-weight: bold;
  font-size: 4.5em;
  margin: 0.25em 0.25em 0.5em;
  letter-spacing: 0.1em;
}
.result__itemTitle:has(br) {
  line-height: 1.2;
}
.result__itemDetail {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.618;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 5% 0;
  overflow: hidden;
}
.result__itemDetail::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.8); */
  background-image: linear-gradient(180deg, rgba(0,0,0,0.95), rgba(0,0,0,0.7) 70%);
  opacity: 0;
  z-index: -1;
}
.result__itemDetail::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  z-index: -1;
  background-image: linear-gradient(180deg, rgba(var(--color_baseRGB), 0), rgba(var(--color_baseRGB), 1));
}
.result__itemPhoto {
  position: absolute;
  top:  50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width:  100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: -2;
}
.result__itemNameWrap {
  width: 100%;
  position: relative;
}
.result__itemNameEng {
  position: relative;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
}
.result__itemName {
  position: relative;
  font-weight: bold;
  font-size: 2.8rem;
  line-height: 1.3;
  margin-bottom: 0.5em;
  letter-spacing: 0.1em;
}
.result__itemName + .result__itemName {
  font-size: 1.4rem;
  margin-top: -0.9em;
  margin-bottom: 0.75em;
}
.result__itemName2 {
  font-size: 1.0rem;
  margin-top: -1.0em;
  margin-bottom: 1.2em;
}
.result__item .btn__pageTrans {
  font-size: 1.4rem;
  width: 80%;
}

/* 2カラム使用のレイアウト */
.result__item--span2 {
  grid-column: span 2;
}
.result__item--span2 .result__itemDetail {
  aspect-ratio: 1 / 1.41;
}
.result__item--span2 .result__itemTitle {
  font-size: 6.0em;
  line-height: 1.3;
}
.result__item--span2 .result__itemNameEng {
  font-size: 1.3rem;
}
.result__item--span2 .result__itemName {
  font-size: 3.6rem;
}
.result__item--span2 .result__itemDetail::after {
  aspect-ratio: 1 / 0.5;
}


/* -------------------------
  historyLink
------------------------- */
.contents__historyLink {
  position: relative;
  width: 100%;
  text-align: center;
}
.historyLink__wrapper {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 10%;
  gap: 8%;
}
.historyLink__title {
  width: 70%;
  opacity: 0.9;
}
.historyLink__title span {
  font-size: 86%;
  display: block;
  letter-spacing: 0;
}
.contents__historyLink .btn__pageTrans {
  z-index: 10;
}

.contents__historyLink .resultSwiper::after {
  background-image: linear-gradient(180deg, rgba(var(--color_baseDarkRGB), 0) 25%, rgba(var(--color_baseDarkRGB), 1));
}


/* -------------------------
  footer
------------------------- */
footer {
  position: relative;
  width: 100%;
  /* background: var(--color_base); */
  /* background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.5)); */
  background-color: var(--color_baseDark);
  text-align: center;
}
.footer__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px 30px;
  gap: 20px;
}
.footer__btnPageBack {
}
.footer__btnSiteBack {
  font-size: 1.4rem;
  font-weight: bold;
  border-bottom: 1px solid #FFF;
}
.footer__logo {
  width: 70%;
  max-width: 280px;
  margin-top: 15px;
}
.footer__notice {
  font-size: 1.1rem;
  line-height: 1.7;
}
.footer__copyright {
  font-size: 1.0rem;
  opacity: 0.7;
}


/* -------------------------
  pagetop
------------------------- */
#pageTop {
  position: fixed;
  bottom: 13px;
  right:  13px;
  margin: 0;
  padding: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  transition: bottom 0.3s;
}
@media (min-width:600px){
  #pageTop {
    bottom: 20px;
    right:  20px;
    padding-bottom: 0;
  }
}
#pageTop.aos-init:not(.aos-animate) {
  bottom: -50px;
}
#pageTop .pageTop__btn {
  width: 50px;
  height: 50px;
  line-height: 1;
  text-align: right;
  background: rgba(0,0,0,0.25);
  border-radius: 25px;
  transition: 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
#pageTop .pageTop__btn img {
  margin-top: 2px;
}
@media (any-hover: hover) {
  #pageTop .pageTop__btn:hover {
    background: rgba(0,0,0,0.75);
  }
}
#pageTop .pageTop__btn:active {
  background: rgba(0,0,0,1);
}


/* -------------------------
  AOS animation
------------------------- */
.aos-init {
}
.aos-init.aos-animate {
}

section.aos-init {
  opacity: 0;
  scale: 1.1;
  transition: all 0.6s ease-out;
  transform-origin: top center;
}
section.aos-init.aos-animate {
  opacity: 1;
  scale: 1;
}

.contents__introduction *.aos-init {
  opacity: 0;
  scale: 1.2;
  transition: all 0.6s;
  transform-origin: top center;
}
.contents__introduction *.aos-init.aos-animate {
  opacity: 1;
  scale: 1;
}

.contents__introduction .introduction__notesWrap.aos-init {
  opacity: 0.2;
  scale: 1;
  transition: all 0.6s;
}
.contents__introduction .introduction__notesWrap.aos-init.aos-animate {
  opacity: 1;
}

.result__title.aos-init {
  opacity: 0;
  scale: 1.5;
  transition: all 0.6s;
  transform-origin: top left;
}
.result__title.aos-animate {
  opacity: 1;
  scale: 1;
}

.aos-init.result__item .result__itemDetail::before {
  opacity: 1;
  transition: all 0.75s;
}
.aos-init.result__item:nth-child(even) .result__itemDetail::before {
  transition: all 0.75s 0.25s;
}
.aos-animate.result__item .result__itemDetail::before {
  opacity: 0;
}

.aos-init.result__item .result__itemDetail .result__itemNameWrap {
  opacity: 0;
  scale: 0.97;
  transition: all 0.5s 0.00s;
  transform-origin: center bottom;
}
.aos-init.result__item:nth-child(even) .result__itemDetail .result__itemNameWrap {
  transition: all 0.5s 0.25s;
}
.aos-animate.result__item .result__itemDetail .result__itemNameWrap {
  opacity: 1;
  scale: 1;
  transform: translateY(0);
}

.aos-init.result__item .result__itemDetail>img {
  scale: 1;
  transition: all 1.0s 0.0s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center left;
}
.aos-init.result__item:nth-child(even) .result__itemDetail>img {
  transition: all 1.0s 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.aos-animate.result__item .result__itemDetail>img {
  scale: 1.05;
}

.aos-init.historyLink__title {
  opacity: 0.2;
  transition: opacity 0.5s;
}
.aos-animate.historyLink__title {
  opacity: 1;
}