@charset "utf-8";
.invisible-style{
  display: none!important;
}

html {
  word-break: auto-phrase;
}

body{
  font-family: "Noto Sans JP", sans-serif;
  color: #000;
  font-size: clamp(0.875rem, 0.792rem + 0.17vw, 1rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: #000;
  transition: all 0.5s;
}

a:hover {
  text-decoration: none;
  color: #000;
  transition: all 0.5s;
}
.link-opacity:hover {
  opacity: 0.5;
}

img {
  max-width: 100%;
  display: block;
  width: 100%;
}

p,
body,
h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}


/* 共通パーツ */
.inner {
  max-width: 1920px!important;
  margin: 0 auto;
}

.js-split-fv {
  visibility: hidden;
}

/* フロントのみ（#wrapperが無い＝公開側） */
body:not(#wrapper) .js-split-fv {
  visibility: hidden;
}

/* ローディング後に表示（フロントだけ） */
body:not(#wrapper).loadingComplete .js-split-fv {
  visibility: visible;
}

/* 管理画面（#wrapperあり）は常に表示 */
#wrapper .js-split-fv {
  visibility: visible !important;
}

.js-split .char {
  display: inline-block;
}
/* パンくずリスト　*/
.pg-breadcrumb {
      padding-top: clamp(0.25rem, -0.25rem + 1.04vw, 1rem);
    display: flex;
    align-items: center;
    column-gap: 0.5em;
    max-width: 1920px!important;
    position: absolute;
    width: 100%;
    padding-left: clamp(1.25rem, -5.917rem + 14.93vw, 12rem);
    left: 0;
    z-index: 100;
}
.breadcrumb__text {
      font-weight: 400;
    font-size: clamp(0.625rem, 0.458rem + 0.35vw, 0.875rem);
}

/* pcとspの文字切り替え */
.sp-content {
  display: none;
}
@media (max-width: 767px) {
    .pc-content {
    display: none;
  }
  .sp-content {
    display: block;
  }
}

/* 縦書き */
.vertical {
  width: auto;
  writing-mode: vertical-rl;
}

/* pg__fv */
.pg__fv {
      padding-top: clamp(3.188rem, 2.229rem + 2vw, 4.625rem);
    background-color: #9F2018;
}
.pg-fv__inner {
      padding: 0 clamp(1.25rem, -5.917rem + 14.93vw, 12rem);
    position: relative;
}
.pg-fv__container {
      display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(3rem, 2.333rem + 1.39vw, 4rem) 0;
}
.pg-fv__sub {
      font-size: clamp(0.75rem, 0.667rem + 0.17vw, 0.875rem);
    font-weight: 400;
    color: #fff;
}
.pg-fv__main {
      font-size: clamp(3rem, 2.333rem + 1.39vw, 4rem);
    font-weight: 500;
    color: #fff;
    font-family: "IBM Plex Sans JP", sans-serif;
}

/* btn1 */
.btn1 {
  position: relative;
  display: inline-block;
  padding: clamp(1rem, 0.667rem + 0.69vw, 1.5rem)
           clamp(1rem, 0.333rem + 1.39vw, 2rem);
  text-decoration: none;
  overflow: hidden;
  color: #fff;
  background: transparent;
  transition: all 0.5s;
}
/* =========================
   LINE（初期状態のみ）
========================= */
.btn-line {
  position: absolute;
  background: #fff;
}
.btn-line1 {
  top: 0;
  left: 0;
  width: 0%;   /* JSで伸ばす */
  height: 1px;
}
.btn-line2 {
  top: 0;
  right: 0;
  width: 1px;
  height: 0%;   /* JSで伸ばす */
}
.btn-line3 {
  bottom: 0;
  right: 0;
  width: 0%;   /* JSで伸ばす */
  height: 1px;
}
.btn-line4 {
  bottom: 0;
  left: 0;
  width: 1px;
  height: 0%;   /* JSで伸ばす */
}
/* =========================
   TEXT
========================= */
.btn__content {
  display: flex;
  align-items: center;
  column-gap: clamp(1rem, 0.417rem + 1.22vw, 1.875rem);
  position: relative;
}
.btn__text-wrap {
  overflow: hidden;
}
.btn__text-wrap p {
  margin: 0;
  color: #fff;
  transform: translateY(120%);
  opacity: 0;
  font-size: clamp(0.875rem, 0.708rem + 0.35vw, 1.125rem);
  transition: all 0.5s;
}
#wrapper .btn__text-wrap {
  overflow: visible;
}
#wrapper .btn__text-wrap p {
  opacity: 1!important;
  color: #000 !important;
  transform: translate(0px, 0px);
}
/* =========================
   UNDERLINE
========================= */
.btn__underline {
  display: block;
  width: 0%;   /* JSで伸ばす */
  height: 1px;
  margin-top: clamp(0.563rem, 0.313rem + 0.52vw, 0.938rem);
  background: #fff;
}
/* =========================
   ARROW
========================= */
.btn__arrow {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: all 0.5s;
}
.btn__arrow--hover {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  transition: all 0.5s;
}
/* =========================
   arrow animation
========================= */
.btn__arrow img,
.btn__arrow--hover img {
  width: clamp(0.625rem, 0.417rem + 0.43vw, 0.938rem);
  height: auto;
  object-fit: contain;
  opacity: 0;
  animation: arrowWave 1.2s linear infinite;
}
.btn__arrow img:nth-child(1),
.btn__arrow--hover img:nth-child(1) {
  animation-delay: 0s;
}
.btn__arrow img:nth-child(2),
.btn__arrow--hover img:nth-child(2) {
  animation-delay: .15s;
}
.btn__arrow img:nth-child(3),
.btn__arrow--hover img:nth-child(3) {
  animation-delay: .3s;
}
@keyframes arrowWave {
  0% {
    opacity: 0;
    transform: translateX(-8px);
  }
  25% {
    opacity: 1;
    transform: translateX(0);
  }
  75% {
    opacity: 1;
    transform: translateX(4px);
  }
  100% {
    opacity: 0;
    transform: translateX(10px);
  }
}
/* =========================
   hover
========================= */
.btn1:hover {
  background: #fff;
}
.btn1:hover p {
  color: #a4281e;
}
.btn1:hover .btn__underline {
  background: #a4281e;
}
.btn1:hover .btn__arrow {
  opacity: 0;
}
.btn1:hover .btn__arrow--hover {
  opacity: 1;
}

/* btn2 */
.btn__link{
  display:inline-block;
  text-decoration:none;
  color:#222;
}
.btn-link__inner{
  position:relative;
  display:flex;
  align-items:center;
  gap:24px;
  margin-bottom:12px;
}
.btn-link__text{
  font-size: clamp(0.875rem, 0.708rem + 0.35vw, 1.125rem);
  line-height:1;
  transition:.3s;
}
/* ---------- */
/* 下線 */
/* ---------- */
.btn-link__line{
  display:block;
  width:100%;
  height:1px;
  background:#222;
  transition:.3s;
}
/* ---------- */
/* 矢印 */
/* ---------- */
.btn-link__arrow,
.btn-link__arrow-hover{
  display:flex;
  gap:2px;
}
.btn-link__arrow-hover{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  opacity:0;
  transition:.3s;
}
.btn-link__arrow{
  transition:.3s;
}
.btn-link__arrow img,
.btn-link__arrow-hover img{
  width: clamp(0.625rem, 0.417rem + 0.43vw, 0.938rem);
  height: auto;
  object-fit: contain;
  opacity:0;
  animation:arrowWave 1.2s linear infinite;
}
.btn-link__arrow img:nth-child(1),
.btn-link__arrow-hover img:nth-child(1){
  animation-delay:0s;
}
.btn-link__arrow img:nth-child(2),
.btn-link__arrow-hover img:nth-child(2){
  animation-delay:.15s;
}
.btn-link__arrow img:nth-child(3),
.btn-link__arrow-hover img:nth-child(3){
  animation-delay:.3s;
}
/* ---------- */
/* hover */
/* ---------- */
.btn__link:hover .btn-link__line{
  background:#9F2018;
}
.btn__link:hover .btn-link__arrow{
  opacity:0;
}
.btn__link:hover .btn-link__arrow-hover{
  opacity:1;
}
/* ---------- */
/* animation */
/* ---------- */
@keyframes arrowWave{
  0%{
    opacity:0;
    transform:translateX(-6px);
  }
  25%{
    opacity:1;
    transform:translateX(0);
  }
  75%{
    opacity:1;
    transform:translateX(4px);
  }
  100%{
    opacity:0;
    transform:translateX(10px);
  }
}

/* entry-btn */
.entry-btn{
  display:inline-block;
  text-decoration:none;
  transition:all .5s;
      padding: clamp(0.75rem, 0.25rem + 1.04vw, 1.5rem) clamp(4.063rem, 1.438rem + 5.47vw, 8rem);
    border: 1px solid #9F2018;
    background: #9F2018;
}
.entry-btn__inner{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:all .5s;
  gap:24px;
}
/* ==========================
TEXT
========================== */
.entry-btn__content{
  text-align:center;
}
.entry-btn__en{
  display:block;
  font-size:clamp(0.875rem, 0.458rem + 0.87vw, 1.5rem);
  line-height:1;
  color:#fff;
  margin-bottom:12px;
  transition:.5s ease;
}
.entry-btn__jp{
  display:block;
  font-size:clamp(1.125rem, 0.542rem + 1.22vw, 2rem);
  line-height:1;
  color:#fff;
  transition:.5s ease;
}
/* ==========================
ARROW
========================== */
.entry-btn__arrow,
.entry-btn__arrow-hover{
  display:flex;
  gap:2px;
}
.entry-btn__arrow{
  transition:.5s ease;
}
.entry-btn__arrow-hover{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  opacity:0;
  transition:.5s;
}
.entry-btn__arrow img,
.entry-btn__arrow-hover img{
  width:15px;
  height:auto;
  opacity:0;
  animation:entryArrowWave 1.2s linear infinite;
}
.entry-btn__arrow img:nth-child(1),
.entry-btn__arrow-hover img:nth-child(1){
  animation-delay:0s;
}
.entry-btn__arrow img:nth-child(2),
.entry-btn__arrow-hover img:nth-child(2){
  animation-delay:.15s;
}
.entry-btn__arrow img:nth-child(3),
.entry-btn__arrow-hover img:nth-child(3){
  animation-delay:.3s;
}
/* ==========================
HOVER
========================== */
.entry-btn:hover {
  background:#fff;
}
.entry-btn:hover .entry-btn__en,
.entry-btn:hover .entry-btn__jp{
  color:#9F2018;
}
.entry-btn:hover .entry-btn__arrow{
  opacity:0;
}
.entry-btn:hover .entry-btn__arrow-hover{
  opacity:1;
}

@keyframes entryArrowWave{
  0%{
    opacity:0;
    transform:translateX(-6px);
  }
  25%{
    opacity:1;
    transform:translateX(0);
  }
  75%{
    opacity:1;
    transform:translateX(4px);
  }
  100%{
    opacity:0;
    transform:translateX(10px);
  }
}

/* title1 */
.title1 {
      display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 5px;
}
.title1__sub {
      font-size: clamp(0.75rem, 0.667rem + 0.17vw, 0.875rem);
    color: #9F2018;
    font-weight: 400;
}
.title1__sub--white {
    color: #fff;
}
.title1__main {
      font-size: clamp(1.75rem, 1.583rem + 0.35vw, 2rem);
    font-weight: 400;
    color: #9F2018;
}
.title1__main--white {
    color: #fff;
}
.title1__line {
      width: 128px;
    height: 1px;
    background-color: #9F2018;
}
@media (max-width: 374px) {
  .title1__main {
    font-size: clamp(1.5rem, 0.019rem + 7.41vw, 1.75rem);
  }
}
   
/* アニメーション */
.anime2 {
  animation-delay: 0.5s;
}
.anime3 {
  animation-delay: 1s;
}
.anime4 {
  animation-delay: 1.5s;
}
.anime5 {
  animation-delay:2s;
}
.anime6 {
  animation-delay: 2.5s;
}
.anime7 {
  animation-delay: 3s;
}
.anime8 {
  animation-delay: 3.5s;
}
.anime9 {
  animation-delay: 4s;
}
.anime10 {
  animation-delay: 4.5s;
}
.anime11 {
  animation-delay: 5s;
}
.anime12 {
  animation-delay: 5.5s;
}
.anime13 {
  animation-delay: 6s;
}
.anime14 {
  animation-delay: 6.5s;
}