@charset "utf-8";
  html{
    font-size:62.5%;
  }
  body{

    background-color: #000;
  }
  a{
    text-decoration: none;
  }
  img{
    width: 100%;
  }
  .lp_wrap{
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    background-color: #000;
    overflow: hidden;
  }
  .lp_wrap *{
    box-sizing: border-box;
  }
  .content_wrap{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
 .obi{
  scale: 1;
 }
.pc_only{
  display: block;
}
.sp_only{
  display: none;
}
.flight_sp{
  display: none;
}
section{margin-bottom: 0;}
 @media screen and (max-width:820px){

  .obi{
    scale: 2;
  }
  .pc_only{
    display: none;
  }
  .sp_only{
    display: block;
  }
 }
@media screen and (max-width:520px) {
  .flight_sp{
    display: block;
  }
}

/*ハンバーガーメニュー追記*/

.navInner h2.no_open a{
  color: #333;
  display: block;
  width: 100%;
}
.navInner h2.no_open::before, .navInner h2.no_open::after {
  content: none;
}
.navWrap.panel-active{
  overflow-y: auto;
}
@media screen and (max-width: 1199px) {
  .navInner li a{
    padding: 15px 15px 15px 0 !important;
  }
  .navInner h2{
    padding-right: 15px;
  }
  .navInner .accordion i {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(50%);
      font-size: 14px;
      margin-top: -7px;
  }
  .navInner h2::before {
        top: 60%;
  }
  .navInner h2::after {
        top: 60%;
  }

}



  /*メインビジュアル*/
  .fv{
    position: relative;
    background-image: url("../img/fv_background.png");
    aspect-ratio: 1920 / 1032;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .fv_main{
    position: relative;
    width: 100%;
    display: grid;
    justify-content: center;
  }
  .choshu_illust,
  .choshu_images{
    position: absolute;
    z-index: 1;
    opacity: 0;
    transform: translateY(100px);
    animation: fadeUp 0.5s ease-out forwards;
  }
  .choshu_illust{
    top: 1vw;
    left: 0vw;
    width: 30%;
    aspect-ratio: 513 / 970;
  }
  .choshu_images{
    top: 2vw;
    right: 0;
    width: 28%;
    aspect-ratio: 483 / 970;
  }
  .fv_info{
    position: relative;
    width: 46.875vw;
    margin: 0 auto;
    top: 4vw;
  }
  .fv_info .animation_down{
    width: 100%;
    max-width: 881px;
    aspect-ratio: 881 / 800;
    height: auto;
    margin: auto;
  }
  .fv_copyright{
    position: absolute;
    right: 2vw;
    bottom: 5vw;
    line-height: 1.2;
  }
  .fv_copyright .copyright01{
    font-size: 12px;
    text-align: left;
    color: #FFF;
    display: inherit;
  }
  .fv_copyright .copyright02{
    aspect-ratio: 72 / 13;
    width: 72px;
  }
  .animation_down img {
    display: block;
    height: auto;
    opacity: 0;
    transform-origin: 50% 50%;
    will-change: transform;
    transform: rotate(-25deg) skew(-3deg) scale(2);
    animation:
      unslant 0.2s cubic-bezier(.2,.8,.2,1) 0.5s forwards,
      micro-bounce 0.1s cubic-bezier(.25,.9,.25,1) 0.7s forwards;
  }
  .fv_btn{
    position: relative;
    max-width: 350px;
    width: 100%;
    overflow: hidden;
    color: #FFF;
    font-size: 1.6rem;
    border-radius: 5px;
    text-align: center;
    margin: 3rem auto;
    padding: 2rem 0;
    z-index: 5;
    background: linear-gradient(to right, rgba(64, 91, 208, 0.6) 50%, #405bd0 50%);background-size: 200% 100%;
    background-position: right bottom;
    transition: background-position 0.4s ease;
  }
  .fv_btn:hover{
      background-position: left bottom;
  }
  .fv_btn::after{
    position: absolute;
    content: "";
    background-image: url(../img/arrow-left.png);
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 45 / 33;
    width: 25px;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
  .fv .obi{
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-5deg);
    z-index: 1;
    opacity: 0;
    transform: translate(-120%, 0%) rotate(-5deg);

    /* 斜めに飛び込んで止まる */
    animation: obiDiagonalIn 0.5s ease-out forwards;
  }

  /*fvアニメーション*/
    @keyframes fadeUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 斜め＆拡大の初期状態→まっすぐ等倍に戻す */
    @keyframes unslant {
      0%   { opacity: 0; transform: rotate(-25deg) skew(-3deg) scale(2); }
      100% { opacity: 1; transform: rotate(0deg)   skew(0deg)   scale(1); }
    }
    /* 微バウンド */
    @keyframes micro-bounce {
      0%   { transform: rotate(0) skew(0) scale(1); }
      50%  { transform: rotate(0) skew(0) scale(0.97); }
      100% { transform: rotate(0) skew(0) scale(1); }
    }
    @keyframes obiDiagonalIn {
      0% {
        opacity: 0;
        transform: translate(-120%, 0%) rotate(-5deg);
      }
      100% {
        opacity: 1;
        transform: translate(-1%, 0%) rotate(-5deg);
      }
    }

  @media screen and (max-width:1440px){
    .fv_info{
      width: 42vw;
    }
  }
  @media screen and (max-width:1440px){
    .fv_copyright{
      right: -1vw;
    }
  }
  @media screen and (max-width:1199px){
    .choshu_illust {
        left: -2vw;
    }
    .choshu_images{
        right: -2vw;
    }
  }

  @media screen and (max-width:820px){
    .fv{
      position: relative;
      background-image: url("../img/fv_background_sp.jpg");
      aspect-ratio: 800 / 1186;
      overflow: hidden;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .fv_info {
      width: 98vw;
      z-index: 2;
      top: 26vw;
    }

    .choshu_illust {
      top: 5vw;
      left: 0vw;
      width: 21%;
      aspect-ratio: 170 / 750;
    }
    .choshu_images{
      top: 4vw;
      right: 0;
      width: 26%;
      aspect-ratio: 221 / 750;
    }
    .fv_btn{
      width: 70%;
    }
    .fv_copyright{
      bottom: -5vw;
    }
  }

  @media screen and (max-width:520px){
    .fv_info {
      top: 18vw;
      line-height: 1;
    }
     .fv_btn{
      padding: 1.5rem 0;
      margin: 1.5rem auto;
    }
    .fv_copyright{
      bottom: -8vw;
      line-height: 1;
    }

    .fv_copyright .copyright01{
      font-size: 10px;
      text-align: left;
      color: #FFF;
      display: inherit;
    }
    .fv_copyright .copyright02{
      aspect-ratio: 72 / 13;
      width: 62px;
    }
  }
  @media screen and (max-width:400px){
    .fv .obi{
      top: -3vw;
    }
  }
  @media screen and (max-width:320px){
    .fv .obi{
      top: -5vw;
    }
    .fv_info{
      top: 13vw;
    }
    .fv_copyright{
      position: absolute;
      bottom: -5vw;
      line-height: 0.75;
    }
    .fv_copyright .copyright01{
      font-size: 8px;
    }
    .fv_copyright .copyright02{
      width: 53px;
    }
  }
  /*メインビジュアル*/


/*スペシャルボイス*/
.voice{
  position: relative;
  background-color: #FFFFFF00;
}
.voice_content{
  position: relative;
  text-align: center;
  padding: 10rem 0;
}

.voice_content i{
  display: inline;
  position: relative;
}
.voice_content i audio{
  position: absolute;
  display:block;
  margin-top:10px;
  border-radius: 5px;
  width:13vw;
  bottom: 4vw;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 4;
  height: 15%;
  filter: invert(1);
  background: white;
}
/* Firefox 専用の書き方 */
@-moz-document url-prefix() {
.voice_content i audio {
    filter: none !important;
    background: #000 !important;
  }
}

/* プレイヤーの位置合わせ（必要なら調整） */
.voice_content i {
  position: relative;
  display: block;
}

/* プレイヤー全体 */
.voice_content i .audio-player {
  position: absolute;
  display: flex;
  gap: .8rem;
  align-items: center;
  margin-top:10px;
  border-radius: 5px;
  width:13vw;
  min-width: 130px;
  bottom: 4vw;
  left: 50%;
  transform: translateX(-50%);
  z-index:4;
  padding:1rem;
  background:#1e1e1e;
  color:#000;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* 再生ボタン */
.audio-player .play-toggle {
  border: none;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  width: 40px;
  line-height: 2rem;
  text-align: center;
  user-select: none;
  color: #FFF;
  background: #656565;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.audio-player .play-toggle img{
  width: 10px;
}
/* 時間表示 */
.audio-player .time {
  font-variant-numeric: tabular-nums;
  min-width: 3.8rem;
  text-align: right;
}

/* ============================= */
/* シークバー（つまみなし）      */
/* ============================= */
.audio-player .seek {
  --fill: #fff;   /* 再生済みの色（白） */
  --rest: #ccc;   /* 未再生の色（グレー） */
  --h: 4px;       /* バーの高さ */
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  height: var(--h);
  border-radius: 9999px;
  background: transparent;
  outline: none;
  margin: 0;
  width: 100%;
}

/* Chrome / Safari / Edge */
.audio-player .seek::-webkit-slider-runnable-track {
  height: var(--h);
  border-radius: 9999px;
  background: linear-gradient(
    to right,
    var(--fill) 0 var(--seek-pct,0%),
    var(--rest) var(--seek-pct,0%) 100%
  );
}
.audio-player .seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 0;
  background: transparent;
  border: none;
}

/* Firefox */
.audio-player .seek::-moz-range-track {
  height: var(--h);
  border-radius:9999px;
  background: var(--rest);
}
.audio-player .seek::-moz-range-progress {
  height: var(--h);
  border-radius:9999px;
  background: var(--fill);
}
.audio-player .seek::-moz-range-thumb {
  width: 0;
  height: 0;
  border: none;
  background: transparent;
}
.basetime {
  font-size: 1.4rem;
  font-style: normal;
  color: #fff;
}
/* キーボードフォーカス時の見やすさ */
.audio-player .seek:focus-visible {
  outline: 2px solid #2684ff33;
}
.audio-player .play-toggle:focus-visible {
  outline: 2px solid #2684ff33;
  border-radius:6px;
}

/* ダークモード対応（任意） */
@media (prefers-color-scheme: dark) {
  .audio-player {
    background:#111;
    color:#fff;
  }
  .audio-player .seek {
    --rest:#888;
    --fill:#fff;
  }
}
@media screen and (max-width:820px){
  .voice_content i .audio-player{
    width: 25vw;
    bottom: 7vw;
  }
}

@media screen and (max-width:520px){

  .voice_content{
    padding: 10rem 0 6rem;
  }
  .voice_content i .audio-player{
    padding: 0.5rem;
  }
  .audio-player .play-toggle{
    width: 80px;
  }
  .basetime{
    font-size: 1rem;
  }
}

audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-mute-button{
  display: none !important;
}
.voice_content::before {
  content: "";
  position: absolute;
  right: 0;
  top: -5vw;
  background: url("../img/voice_bg02.png") no-repeat;
  background-size: cover;
  aspect-ratio: 997 / 380;
  width: 100vw;
  transform: translate(120%, -120%);
  opacity: 0;
  z-index: 1;
  will-change: transform, opacity;
}
.voice_content::after {
  content: "";
  position: absolute;
  left: 0;
   top: -4vw;
  background: url("../img/voice_bg01.png") no-repeat;
  background-size: cover;
  aspect-ratio: 1678 / 636;
  width: 100vw;
  transform: translate(-120%, -120%);
  opacity: 0;
  z-index: 2;
  will-change: transform, opacity;
}
.voice_content.is-animate::before {
  animation: bg02In 0.2s ease-out forwards;
}

.voice_content.is-animate::after {
  animation: bg01In 0.2s ease-out forwards;
  animation-delay: 0.1s;
}
@keyframes bg02In {
  from { transform: translate(120%, -120%); opacity: 0; }
  to   { transform: translate(0, 0);        opacity: 1; }
}

@keyframes bg01In {
  from { transform: translate(-120%, -120%); opacity: 0; }
  to   { transform: translate(0, 0);         opacity: 1; }
}
.voice_content i{
  display: inline-block;
  position: relative;
  width: 17.1875vw;
  height: 17.1875vw;
  margin: 0 auto;
}
.voice_content i img{
  position: relative;
  z-index: 4;
}
.voice_content i::before{
  position: absolute;
  content: "";
  background-image: url("../img/voice_text.png");
  background-size: contain;
  top: 50%;
  right: 0%;
  transform: translateY(-50%);
  aspect-ratio: 696 / 137;
  width: 696px;
  z-index: 3;
}
.voice_content i::after{
  position: absolute;
  content: "";
  background-image: url("../img/voice_icon.png");
  background-size: contain;
  display: inline-block;
  top: -25%;
  right: -30%;
  aspect-ratio: 222 / 234;
  width: 65%;
  z-index: 5;
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
.voice_content.playing i::after {
  animation: pulse 1s infinite ease-in-out;
}
.voice_content i {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.voice_content.show-voice i {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 3;
}
.voice .obi {
  position: absolute;
  bottom: -2vw;
  left: 0;
  z-index: 2;
  opacity: 0;
  transform: translate(-120%, 0%) rotate(3deg);
}
.voice .obi.animate {
  animation: obiDiagonalInVoice 0.5s ease-out forwards;
}

@keyframes obiDiagonalInVoice {
  0% {
    opacity: 0;
    transform: translate(-120%, 0%) rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: translate(-1%, 0%) rotate(3deg);
  }
}
@media screen and (max-width:820px){
  .voice_content i{
    width: 43vw;
    height: 43vw;;
  }
  .voice_content i::before{
  background-image: url("../img/voice_text_sp.png");
  background-size: contain;
  width: 170%;
    top: -13vw;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    }
    .voice_content::before {
      top: -7vw;
      width: 200vw;
    }
    .voice_content::after {
      top: -6vw;
      width: 200vw;
    }
    .voice_content i audio{
      width: 30vw;
      bottom: 7vw;
    }

}
@media screen and (max-width:520px) {
    .voice_content::before {
      top: -7vw;
      width: 240vw;
    }
    .voice_content::after {
      top: -6vw;
      width: 240vw;
    }
}
@media screen and (max-width:420px) {
    .voice_content::before {
      top: -0vw;
      width: 240vw;
    }
    .voice_content::after {
      top: 0vw;
      width: 240vw;
    }
}


/*キャンペーン*/
.campaign{
  position: relative;
  background-image: url("../img/campaign_background.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-top: -5vw;
}
.campaign .content_wrap{
 padding: 10vw 2rem;
}
.campaign_box{
  position: relative;
  background-color: #FFFFFF;
  max-width: 950px;
  width: 100%;
  margin: 20rem auto 10rem;
  padding: 15rem 10rem 6rem;
}
.campaign_box::before{
  position: absolute;
  content: "";
  background-image: url("../img/campaign_ttl.png");
  background-size: contain;
  aspect-ratio: 1050 / 256;
  width: 100%;
  top: -15vh;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.campaign_box .campaign_copy{
  text-align: right;
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.campaign_img{
  margin-bottom: 4rem;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.4);
}
.campaign_text{
  font-size: 1.8rem;
  color: #000000;
  margin-bottom: 3rem;
}
.campaign_text .to{
  margin-left: 3%;
}
.campaign_text .color_red{
  font-size: 1.8rem;
  color: #ff0007;
}
.campaign_btnarea{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:5rem;
}
.campaign_btnarea a{
  position: relative;
  width: calc(100% / 2 - 2.5rem);
  font-size: 20px;
  color: #FFF;
  text-align: center;
  border-radius: 10px;
  padding: 2rem 0;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 50%, #000 50%);background-size: 200% 100%;
  background-position: right bottom;
  transition: background-position 0.4s ease;
}
.campaign_btnarea a:hover{
    background-position: left bottom;
}
.campaign_btnarea a p{
  display: flex;
  justify-content: center;
  align-items: center;
}
.campaign_btnarea a p::after{
    position: absolute;
    content: "";
    background-image: url(../img/arrow-left.png);
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 45 / 33;
    width: 25px;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.campaign_btnarea a i{
  display: inline-block;
  margin-left: 1rem;
}
.campaign_btnarea a i img{
  width: 45px;
}
.campaign {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.campaign.show {
  opacity: 1;
  transform: translateY(0);
}
.campaign .strong{
  background-color: #fefa41;
  font-weight: 500;
  font-size: 100%;
}
@media screen and (max-width:820px){
  .voice .obi{
    bottom: 5vw;
  }
  .campaign{
    background-size: cover;
    margin-top: -20vw;
  }
  .campaign_box{
    padding: 10rem 2rem 6rem;
    margin: 15rem auto 10rem;
  }
  .campaign_box::before {
    top: -10vh;
  }
  .campaign_btnarea{
    display: block;
    max-width: 540px;
    margin: 0 auto;
  }
  .campaign_btnarea a{
    display: block;
    width: 100%;
    margin-bottom: 3rem;
  }
  .campaign_btnarea a:last-child{
    margin-bottom: 0;
  }
}
@media screen and (max-width:520px){
  .campaign_box::before{
    top: -5vh;
  }
  .campaign_text{
    font-size: 1.4rem;
  }
  .campaign_text .color_red{
    font-size: 1.4rem;
    color: #ff0007;
  }
  .campaign_box{
    padding: 6rem 2rem 6rem;
    margin: 10rem auto 10rem;
  }
  .campaign_btnarea a{
    padding: 1.5rem 0;
  }
.campaign_btnarea a i img{
  width: 32px;
}
.campaign_btnarea a{
  font-size: 18px;
}
}

@media screen and (max-width:320px){
  .campaign_box{
    padding: 10rem 1rem 6rem;
  }
  .campaign_btnarea a{
    font-size: 16px;
  }
}
/*コラボ商品一覧*/

/*--ナビ*/
.product{
  position: relative;
  z-index: 2;
}
.nav{
  position: relative;
  z-index: 2;
  margin-bottom: 15rem;
}
.product .obi {
  position: absolute;
  top: -3vw;
  left: 0;
  z-index: 3;
  opacity: 0;
  transform: translate(-120%, 0%) rotate(3deg);
}
.product .obi.animate {
  animation: obiDiagonalIn2 0.5s ease-out forwards;
}
@keyframes obiDiagonalIn2 {
  0% {
    opacity: 0;
    transform: translate(-120%, 0%) rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: translate(-1%, 0%) rotate(3deg);
  }
}
.nav::before {
  content: "";
  position: absolute;
  left: -10vw; bottom: -2vw;
  background: url("../img/product_bg01.png") no-repeat;
  background-size: cover;
  aspect-ratio: 1789 / 672;
  width: 100vw;
  transform: translate(120%, -120%);
  opacity: 0;
  z-index: -1;
  will-change: transform, opacity;
}
.nav.is-animate::before {
  animation: navBgIn 0.3s ease-out forwards;
}
.nav .content_ttl,
.nav .nav_list {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.nav.show-content .content_ttl,
.nav.show-content .nav_list {
  opacity: 1;
  transform: translateY(0);
}
@keyframes navBgIn {
  from { transform: translate(120%, -120%); opacity: 0; }
  to   { transform: translate(0, 0);        opacity: 1; }
}
.content_ttl{
  max-width: 902px;
  width: 100%;
  margin: 0 auto 4rem;
}
.nav_list{
  position: relative;
  display: flex;
  justify-content: space-between;
  gap:3rem;
  z-index: 1;
}
.nav_list li{
  width:calc(100% / 3);
  margin-bottom: 0;
  text-align: center;
}
.nav_list li a{
  display: inline-block;
  width: 100%;
  border-radius: 10px;
  color: #FFF;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  padding: 2rem 0;
  font-family: "ads-strong", sans-serif;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);

  background: linear-gradient(to right, rgba(255, 0, 7, 0.6) 50%, #ff0007 50%);background-size: 200% 100%;
  background-position: right bottom;
  transition: background-position 0.4s ease;
}
.nav_list li a:hover{
    background-position: left bottom;
}
@media screen and (max-width:1400px){
  .nav::before {
    width: 120vw;
  }
}
@media screen and (max-width:820px){
  .product .obi{
    top: -9vw;
  }
  .nav_list{
    display: block;
    max-width: 540px;
    padding: 0 2rem;
    margin: 0 auto;
  }
  .nav_list li{
    width: 100%;
    margin: 0 auto 3rem;
  }
  .nav_list li:last-child{
    margin-bottom: 0;
  }

  .nav::before{
    left: -50vw;
    bottom: 0;
    width: 240vw;
  }
}
@media screen and (max-width:520px){
  .nav_list li a{
    width: 90%;
    margin: 0 auto;
    font-size: 2rem;
    padding: 1.5rem 0;
  }
}


/*---商品--*/
.product_category{
  position: relative;
  font-size: 6.5rem;
  font-weight: bold;
  color: #FFf;
  text-align: center;
  margin-bottom: 20rem;
  z-index: 2;
  font-family: "ads-strong", sans-serif;
}
.product_category span{
  display: block;
  font-size: 45%;
  font-family: "ads-strong", sans-serif;
}
/*--ダーツライブカード*/
#Card .product_category::before{
  position: absolute;
  content: "";
  background-image: url("../img/card_ttl.png");
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 1377 / 95;
  width: 100%;
  top: -2vw;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: -1;
}
/*--オリジナルフライト*/
#Flight .product_category::before{
  position: absolute;
  content: "";
  background-image: url("../img/flight_ttl.png");
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 1387 / 95;
  width: 100%;
  top: -2vw;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: -1;
}
/*--スローライン*/
.throwline .product_category::before{
  position: absolute;
  content: "";
  background-image: url("../img/throw_ttl.png");
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 990 / 95;
  width: 100%;
  top: -4vw;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: -1;
}
.product_list{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4rem;
  padding: 0;
}
.product_ttl{
  font-size: 4rem;
  font-weight: 400;
  text-align: left;
  color: #000;
  margin-bottom: 3rem;
  text-align: center;
  font-family: "ta-fuga-fude", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product_ttl.is-inview{
  animation:
    unslant-ttl 0.2s cubic-bezier(.2,.8,.2,1) 0.5s forwards,
    micro-bounce-ttl 0.1s cubic-bezier(.25,.9,.25,1) 0.7s forwards;
}
.product_ttl.auto{
  animation:
    unslant-ttl 0.2s cubic-bezier(.2,.8,.2,1) 0.5s forwards,
    micro-bounce-ttl 0.1s cubic-bezier(.25,.9,.25,1) 0.7s forwards;
}
@keyframes unslant-ttl{
  0%   { opacity: 0; transform: rotate(-25deg) skew(-3deg) scale(2); }
  100% { opacity: 1; transform: rotate(0deg)   skew(0deg)   scale(1); }
}
@keyframes micro-bounce-ttl{
  0%   { transform: rotate(0) skew(0) scale(1); }
  50%  { transform: rotate(0) skew(0) scale(0.97); }
  100% { transform: rotate(0) skew(0) scale(1); }
}
/* アニメーションを苦手とするユーザー配慮（任意） */
@media (prefers-reduced-motion: reduce){
  .product_ttl{ opacity: 1; transform: none; }
  .product_ttl.is-inview,
  .product_ttl.auto{ animation: none; }
}
.product_ttl .price{
  background-color: #ff0007;
  color: #FFF;
  padding: 10px 0px;
  border-radius: 999px;
  font-size: 1.8rem;
  font-weight: 500;
  font-family: "ads-strong", sans-serif;
  margin: 0;
  max-width: 23rem;
  width: 100%;
}
.product_ttl .price.ma{
  margin: 0;
}
.product_bg04 .product_ttl .price{
  max-width: 20rem;
  width: 100%;
}
.product_ttl .price .num{
  font-size: 2.6rem;
}

/* 初期状態 */
.product_img {
  display: block;
  height: auto;
  margin-bottom: 2rem;
  transform-origin: 50% 50%;
  opacity: 0;
  will-change: transform;
  transform: rotate(-25deg) skew(-3deg) scale(2);
}
.col3 .product_img  img{
  border-radius: 10px;
}

.product_img.is-inview {
  animation:
    unslant 0.2s cubic-bezier(.2,.8,.2,1) 0.5s forwards,
    micro-bounce 0.1s cubic-bezier(.25,.9,.25,1) 0.7s forwards;
}

.product_img.auto {
  animation:
    unslant 0.2s cubic-bezier(.2,.8,.2,1) 0.5s forwards,
    micro-bounce 0.1s cubic-bezier(.25,.9,.25,1) 0.7s forwards;
}

/* キーフレーム（元と同じ） */
@keyframes unslant {
  0%   { opacity: 0; transform: rotate(-25deg) skew(-3deg) scale(2); }
  100% { opacity: 1; transform: rotate(0deg)   skew(0deg)   scale(1); }
}
@keyframes micro-bounce {
  0%   { transform: rotate(0) skew(0) scale(1); }
  50%  { transform: rotate(0) skew(0) scale(0.97); }
  100% { transform: rotate(0) skew(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .product_img { opacity: 1; transform: none; }
  .product_img.is-inview,
  .product_img.auto { animation: none; }
}

.product_name{
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 2rem;
}
 .product_btnarea{
  display: block;
 }
.Card .col1 .product_btnarea{
  display: block;
  justify-content: center;
  gap: 4rem;
}
.product_btn{
  position: relative;
  max-width: 425px;
  width: 100%;
  border-radius: 10px;
  color: #FFF;
  padding: 2rem 0;
  text-align: center;
  font-size: 2rem;
  margin: 0 auto;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);

  background: linear-gradient(to right, rgba(255, 0, 7, 0.6) 50%, #ff0007 50%);background-size: 200% 100%;
  background-position: right bottom;
  transition: background-position 0.4s ease;
}
.product_btn:hover{
    background-position: left bottom;
}
.product_btn::after{
    position: absolute;
    content: "";
    background-image: url(../img/arrow-left.png);
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 45 / 33;
    width: 25px;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.digital_btn{
  position: relative;
  max-width: 425px;
  width: 100%;
  border-radius: 10px;
  color: #FFF;
  padding: 2rem 0;
  text-align: center;
  font-size: 2rem;
  margin: 0 auto;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);

  background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 50%, #000 50%);background-size: 200% 100%;
  background-position: right bottom;
  transition: background-position 0.4s ease;
}
.digital_btn:hover{
    background-position: left bottom;
}
.digital_btn::after{
    position: absolute;
    content: "";
    background-image: url(../img/arrow-left.png);
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 45 / 33;
    width: 25px;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
@media screen and (max-width:1120px){
  .product_ttl{font-size: 3.4rem;}
  .product_ttl .price{max-width: 20rem;}
}
@media screen and (max-width:820px){
  #dartslivecard01 .product_ttl{
    margin-bottom: 0rem;
  }
  .product_list{
    padding: 0 2rem;
    gap: 5rem;
  }
  .product_category{
    margin-bottom: 15rem;
  }

  .product_bg01 .product_ttl{
    display: grid;
  }

  .product_ttl .price.ma{
    margin: 10px auto 0;
  }
}

@media screen and (max-width:520px){
  .product_category {
    font-size: 3.8rem;
  }
  .product_ttl {
    font-size: 2.4rem;
  }
  .product_ttl .price{
    max-width: 13rem;
    font-size: 1.4rem;
  }
  .product_ttl .price .num{
    font-size: 1.6rem;
  }

.product_btn{
  padding: 1.5rem 0;
  font-size: 1.6rem;
}
.digital_btn{
  padding: 1.5rem 0;
  font-size: 1.6rem;
}
}
@media screen and (max-width:430px){
  .product_ttl {
    font-size: 2.2rem;
  }
  .product_ttl .price{
    max-width: 15rem;
  }
  .product_category{
    margin-bottom: 10rem;
  }
}

@media screen and (max-width:320px){
  .product_list{
    padding: 0 1rem;
  }
  .product_category{
    font-size: 3rem;
  }
  .product_ttl {
        font-size: 2rem;
    }
  .product_ttl .price{
    font-size: 1.4rem;
    width: 13rem;
  }
}


/*背景*/
.product_bg01{
  position: relative;
  z-index: 2;
  margin-bottom: 10rem;
}
.product_bg01::before {
  content: "";
  position: absolute;
  top: -7vw;
  left: 50%;
  transform: translateX(-50%);
  background: url("../img/product_bg02.png") no-repeat center center;
  background-size: cover;
  aspect-ratio: 1906 / 880;
  width: clamp(0vw, 280vw - 811px, 1920px);
  opacity: 1;
  z-index: -1;
  will-change: transform, opacity;
}
.product_bg01 .product_btn{
  margin-bottom: 2rem;
}

.product_bg02 {
  position: relative;
  z-index: 2;
  margin-bottom: 30rem;
}
.product_bg02::before {
  content: "";
  position: absolute;
  top: -4vw;
  left: 50%;
  transform: translateX(-50%);
  background: url("../img/product_bg03.png") no-repeat center center;
  background-size: cover;
  aspect-ratio: 1906 / 1527;
  width: clamp(0vw, 340vw - 1000px, 1920px);
  opacity: 1;
  z-index: -1;
}
.product_bg02 .product_list li {
  width: calc(100% / 2 - 20px);
}
.product_bg02 .product_btn{
  margin-bottom: 2rem;
}
@media screen and (max-width:820px){
  .product_bg01{
    margin-bottom: 5rem;
  }
  .product_bg01::before {
    content: "";
    position: absolute;
    top: -15vw;
    background: url("../img/product_bg02_sp.png") no-repeat;
    background-size: cover;
    aspect-ratio: 4623 / 3840;
    width: clamp(0vw, 800vw - 800px, 4850px);
    /* width: clamp(0vw, 1000vw - 1000px, 3840px); */
    opacity: 1;
    z-index: -1;
    scale: 1;
  }
  .product_bg02::before{
    content: "";
    z-index: -2;
    opacity: 0;
  }
  .product_bg02 .product_list li {
    width: 100%;
    opacity: 1;
  }
}
@media screen and (max-width:768px){
  .product_bg01::before{
    top: -20vw;
  }
}
@media screen and (max-width:520px){

  .product_bg01::before {
    left: 90%;
    width: clamp(0vw, 800vw - 170px, 4850px);
  }
  .product_bg02{
    margin-bottom: 20rem;
  }
}

@media screen and (max-width:405px){
  .product_bg01::before{
      width: clamp(0vw, 855vw - 190px, 4850px);
  }
}

@media screen and (max-width:320px){
  .product_bg01::before{
      width: clamp(0vw, 970vw - 190px, 4850px);
  }
}


.product_bg04 {
  position: relative;
  z-index: 2;
  margin-bottom: 43rem;
}
.product_bg04::before {
  content: "";
  position: absolute;
  top: -12vw;
  left: 50%;
  transform: translateX(-50%);
  background: url("../img/product_bg05.png") no-repeat center center;
  background-size: cover;
  aspect-ratio: 1878 / 1866;
  width: clamp(0vw, 300vw - 1000px, 1920px);
  opacity: 1;
  z-index: -1;
}
.product_bg04 .product_list li {
  width: calc(100% / 3 - 30px);
}
.product_bg04 .product_name{
  color: #FFF;
}
@media screen and (max-width:820px){
  .product_bg04{
    margin-bottom: 30rem;
  }
  .product_bg04::before {
    content: "";
    position: absolute;
    left: 0vw;
    top: -20vw;
    background: url("../img/product_bg05_sp.png") no-repeat;
    background-size: cover;
    aspect-ratio: 800 / 2295;
    width: clamp(0vw, 575vw - 1000px, 1890px);
    opacity: 1;
    z-index: -1;
    scale: 1;
  }
  .product_bg04 .product_list li{
    width: 100%;
  }
  .product_bg04 .product_list li .product_img{
    max-width: 550px;
    margin: 0 auto 2rem;
  }
  .product_bg04.show-content .product_ttl{
    display: grid;
    line-height: 0;
  }
  .product_bg04.show-content .product_ttl i img{
    width: auto !important;
  }
  /*SPアニメーション制御*/
  .product_bg04.product_img {
    opacity: 1;
    scale: 1;
  }
  .product_bg04 .product_img.is-inview {
    animation: unset;
    transition: unset;
    transform: rotate(-0deg) skew(-0deg) scale(1);
    opacity: 1;
  }
  .product_img.auto {
      animation:unset;
  }
  /*SPアニメーション制御*/
}
@media screen and (max-width:520px){
  .product_bg04::before{
      top: -30vw;
      width: clamp(0vw, 565vw - 950px, 1890px);
  }
}
@media screen and (max-width:405px){
  .product_bg04::before{
      top: -30vw;
      width: clamp(0vw, 595vw - 870px, 1890px);
  }
}
@media screen and (max-width:400px){
  .product_bg04::before{
      top: -30vw;
      width: clamp(0vw, 575vw - 870px, 1890px);
  }
}
@media screen and (max-width:380px){
  .product_bg04::before{
      top: -30vw;
      width: clamp(0vw, 595vw - 870px, 1890px);
  }
}
@media screen and (max-width: 320px) {
    .product_bg04::before {
        width: clamp(0vw, 665vw - 870px, 1890px);
    }
}

.product_bg05 {
  position: relative;
  z-index: 0;
  margin-bottom: 20rem;
}
.product_bg05::before {
content: "";
  position: absolute;
  top: -8vw;
  left: 50%;
  transform: translateX(-50%);
  background: url("../img/product_bg06.png") no-repeat center center;
  background-size: cover;
  aspect-ratio: 1906 / 880;
  width: clamp(0vw, 310vw - 811px, 1920px);
  opacity: 1;
  z-index: -1;
}
.Flight .ttl_bg{
  background-image: url("../img/ttl_bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 1200 / 139;
  width: 100%;
  margin-bottom: 6rem;
  font-size: 3rem;
  gap:15px;
}
.Flight .product_list{
  margin-bottom: 6rem;;
}
.Flight .product_list.mb0{
  margin-bottom: 0;
}
@media screen and (max-width:820px){
  .product_bg04 .product_ttl{
    background-image: url("../img/ttl_bg_sp.png");
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 800 / 294;
    width: 100%;
    margin-bottom: 6rem;
    font-size: 3rem;
    display: grid;
    padding: 2rem 0;
  }
  .product_bg04 .product_ttl i img {
    width: auto !important;
  }
  .product_bg05{
    margin-bottom: 10rem;
  }
  .product_bg05 .product_ttl {
    display: grid;
  }
  .product_bg05::before {
    width: clamp(0vw, 370vw - 320px, 1600px);
  }
}

@media screen and (max-width:520px){
  .product_bg04{
    margin-bottom: 20rem;
  }
  .product_bg04 .product_ttl{
    font-size: 2.4rem;
  }
  .product_bg05::before{
    top: -18vw;
    left: 0%;
  }
}

@media screen and (max-width:430px){
  .product_bg04 .product_ttl{
    font-size: 2rem;
  }
}
@media screen and (max-width:430px){
  .product_bg05::before{
    width: clamp(0vw, 410vw - 320px, 1600px);
  }
}
@media screen and (max-width:320px) {
  .product_bg05 {
    margin-bottom: 6rem;
  }
}
/*各種端末*/
/* 390 × 844 */
@media screen and (width: 390px) and (height: 844px) {
  .product_bg01::before {
    width: clamp(0vw, 800vw - 0px, 4850px);
  }
  .product_bg04::before {
    width: clamp(0vw, 560vw - 830px, 1890px)
  }
}

/* 393 × 873 */
@media screen and (width: 393px) and (height: 873px) {
  .product_bg01::before {
    width: clamp(0vw, 800vw - 15px, 4850px);
  }
  .product_bg04::before {
    width: clamp(0vw, 565vw - 840px, 1890px);
  }
}

/* 412 × 869 */
@media screen and (width: 412px) and (height: 869px) {
  .product_bg01::before {
    width: clamp(0vw, 800vw - 50px, 4850px);
  }
  .product_bg04::before {
    width: clamp(0vw, 565vw - 900px, 1890px);
  }
}

/* 412 × 915 */
@media screen and (width: 412px) and (height: 915px) {
  .product_bg01::before {
    width: clamp(0vw, 800vw - 50px, 4850px);
  }
  .product_bg04::before {
    width: clamp(0vw, 565vw - 905px, 1890px);
  }
}

/* 411 × 960 */
@media screen and (width: 411px) and (height: 960px) {
  .product_bg01::before {
    width: clamp(0vw, 800vw - 80px, 4850px);
  }
  .product_bg04::before {
    width: clamp(0vw, 565vw - 885px, 1890px);
  }
}

/* 360 × 800 */
@media screen and (width: 360px) and (height: 800px) {
  .product_bg01::before {
    width: clamp(0vw, 800vw - -180px, 4850px); /* - -180px → +180px */
  }
  .product_bg04::before {
    width: clamp(0vw, 565vw - 715px, 1890px);
  }
}

/* 393 × 851 */
@media screen and (width: 393px) and (height: 851px) {
  .product_bg01::before {
    width: clamp(0vw, 800vw - 15px, 4850px);
  }
  .product_bg04::before {
    width: clamp(0vw, 550vw - 840px, 1890px);
  }
}
/* 393 × 852 */
@media screen and (width: 393px) and (height: 852px) {
  .product_bg01::before {
    width: clamp(0vw, 800vw - 15px, 4850px);
  }
  .product_bg04::before {
    width: clamp(0vw, 550vw - 840px, 1890px);
  }
}

/* 440 × 956 */
@media screen and (width: 440px) and (height: 956px) {
  .product_bg04::before {
    width: clamp(0vw, 565vw - 975px, 1890px);
  }
}

/* 402 × 874 */
@media screen and (width: 402px) and (height: 874px) {
  .product_bg04::before {
    width: clamp(0vw, 565vw - 870px, 1890px);
  }
}

/* 360 × 808 */
@media screen and (width: 360px) and (height: 808px) {
  .product_bg01::before {
    width: clamp(0vw, 850vw - -10px, 4850px); /* - -10px → +10px */
  }
  .product_bg04::before {
    width: clamp(0vw, 565vw - 715px, 1890px);
  }
}






/*-------最後のアニメーションコンテンツ----------*/

.dartshive_section{
  position: relative;
  background: url("../img/section_bg.png") no-repeat;
  background-size: contain;
  aspect-ratio: 1882 / 1010;
  width: 100%;
  margin-top: -6vw;
}
.dartshive_section_text{
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%); /* 既存 */
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  aspect-ratio: 286 / 770;
  width: 15vw;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
/* 再生用（任意のタイミングで class を付与） */
.dartshive_section_text.animate{
  animation:
    dht-unslant 0.2s cubic-bezier(.2,.8,.2,1) 0.2s forwards,
    dht-micro-bounce 0.1s cubic-bezier(.25,.9,.25,1) 0.4s forwards;
}
/* 斜傾＆拡大 → 等倍へ */
@keyframes dht-unslant {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-25deg) skew(-3deg) scale(2); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg)   skew(0deg)   scale(1); }
}
/* 微バウンド（等倍を中心に0.97へ→戻る） */
@keyframes dht-micro-bounce {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(0.97); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
/* ユーザーが reduced motion を選択している場合はフェードのみ */
@media (prefers-reduced-motion: reduce){
  .dartshive_section_text.animate{
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
.choshu {
  position: absolute;
  bottom: -2vw;
  left: 0;
  width: 30%;
  aspect-ratio: 513 / 855;
  opacity: 0;
  transform: translateY(120%); /* 画面外の下に隠しておく */
}
.choshu.animate {
  animation: choshuSlideUp 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes choshuSlideUp {
  0% {
    opacity: 0;
    transform: translateY(120%);
  }
  60% {
    opacity: 1;
    transform: translateY(-10%); /* 勢い余って少し跳ね上がる */
  }
  80% {
    transform: translateY(5%); /* 戻り */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.dartshive_section .obi {
  position: absolute;
  top: 6vw;
  left: 0;
  z-index: 3;
  opacity: 0;
  transform: translate(-120%, 0%) rotate(3deg);
}
.dartshive_section .obi.animate {
  animation: obiDiagonalIn2 0.5s ease-out forwards;
}

@keyframes obiDiagonalIn2 {
  0% {
    opacity: 0;
    transform: translate(-120%, 0%) rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: translate(-1%, 0%) rotate(3deg);
  }
}

.section_copy{
  position: absolute;
  aspect-ratio: 74 / 14;
  width: 74px;
  bottom: 1vw;
  left: 13vw;
}

@media screen and (max-width:820px){
.dartshive_section{
  position: relative;
  background: url("../img/section_bg_sp.png") no-repeat;
  background-size: contain;
  aspect-ratio: 800 / 1075;
  width: 100%;
  margin-top: -3vw;
}
.dartshive_section_text{
  top: 50%;
  width: 35vw;
}
.dartshive_section .obi{
  top:0vh;
}
}

@media screen and (max-width:520px){
  .dartshive_section_text{
    width: 35vw;
  }
  .choshu{
    bottom: -6vw;
  }
  .section_copy{
    width: 64px;
    bottom: 13vw;
    left: 5vw;
  }
}


/*フッター追記*/
.sns li a img{
  width: 60%;
}
@media screen and (max-width:768px) {
  footer{
    margin-top: -5vh;
    z-index: 1;
    position: relative;
  }
}
@media screen and (max-width:520px){
  footer{
    margin-top: -3vh;
  }
}