/*共通*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
/* js-alt-containerを強制的に非表示＆背景色指定 */
.dummy-area {
  display: none !important;
}
body {
  font-family: 'Noto Sans CJK JP', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #000;
  padding: 20px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
.contentArea {
  position: relative;
  z-index: 0;
}
.container {
  padding-top: 5.3125rem;
  padding-inline: 20px;
  padding-bottom: 340px;
  background-position: center top;
  background-image: url(../img/main-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.container.isFirst {
  border-top: 6px solid #000;
}
@media screen and (max-width: 750px) {
  .container.isFirst {
    border-top: 7px solid #000;
  }
}
.container._contact {
  position: relative;
  background: url(../img/slice-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -268px;
  padding-bottom: 100px;
}
@media screen and (max-width: 750px) {
  .container._contact {
    margin-top: -200px;
    padding-top: 90px;
    padding-bottom: 50px;
  }
}
.br-pc {
  display: block;
}
.br-sp {
  display: none;
}
@media screen and (max-width: 750px) {
  .container {
    padding-top: 52px;
  }
  .tams-wrap.isCautions {
    margin-top: 30px;
    padding-inline: 15px;
  }
  .s .tams-wrap.isCautions {
    margin-top: 10px;
  }

  .br-pc {
    display: none;
  }
  .br-sp {
    display: block;
  }

  .container {
    padding-inline: 10px;
    padding-bottom: 186px;
  }
  body {
    padding: 10px;
  }
}
/*section*/
.section {
  max-width: 1100px;
  margin: 130px auto 0 auto;
}
@media screen and (max-width: 750px) {
  .section {
    margin: clamp(3.125rem, 13.333vw, 6.25rem) auto 0 auto;
  }
}
.section-title {
  width: min(48.72vw, 536px);
}
.section-title.isHow {
  width: min(38.36vw, 422px);
}
.section-title._contact {
  width: 391px;
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  .section-title {
    width: 230px;
  }
  .section-title.isHow {
    width: 169px;
  }
  .section-title._contact {
    width: 217px;
    margin: 0 auto 0 0;
  }
}
.section-text {
  font-size: min(1.666vw, 1.5rem);
  font-weight: bold;
  line-height: 2.6;
  letter-spacing: -0.1rem;
  color: #df2027;
}
.section-text._contact {
  text-align: center;
}
@media screen and (max-width: 750px) {
  .section-text._contact {
    text-align: left;
  }
  .section-text {
    font-size: clamp(0.9375rem, 1vw, 1.875rem);
  }
}
@media screen and (max-width: 750px) {
  .isCautions {
    margin-top: 0;
  }
}
/*item*/
.item-text {
  font-size: min(1.666vw, 1.5rem);
  line-height: 2.6;
  font-weight: bold;

  font-feature-settings: 'palt';
}
@media screen and (max-width: 750px) {
  .item-text {
    font-size: 0.75rem;
    line-height: 1.8;
  }
}
.item-text.isFirst {
  font-size: min(1.38888vw, 20px);
  line-height: 1.5;
}
@media screen and (max-width: 750px) {
  .item-text.isFirst {
    font-size: clamp(11px, 2vw /* viewport 768px で 24px */, 24px);
    line-height: 1.8;
  }
}
.item-text.isSecond {
  font-size: min(2vw, 1.5rem) /* 24px (基準16px) */;
  color: #fff;
  font-weight: 400;
  line-height: 1.5;
}
@media screen and (max-width: 750px) {
  .item-text.isSecond {
    font-size: clamp(16px, 4.167vw /* viewport 768px で 20px */, 32px);
    margin-top: 10px;
  }
}
.repost-title.isFirst {
  margin-top: 15px;
}
@media screen and (max-width: 750px) {
  .repost-title.isFirst {
    margin-top: 5px;
  }
}
/*textContent*/
.textContent {
  width: 40%;
  margin-top: -3.125rem;
}
.textContent.isSecond {
  width: 75%;
  margin-top: 0;
}
@media screen and (max-width: 750px) {
  .textContent {
    width: 53%;
    margin-top: -1.125rem;
  }
  .textContent.isSecond {
    width: 100%;
  }
}
@media screen and (max-width: 375px) {
  .textContent.isSecond {
    width: 100%;
  }
}

/*kv*/
.kv {
  text-align: center;
  width: 100%;
}
.kv picture,
.kv img {
  width: 100%;
}
.kv-btnContent {
  position: absolute;
  bottom: calc(100% - 6px);
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  display: flex;
  align-items: flex-end;
  z-index: 123;
}
.s .kv-btnContent {
  width: 100%;
  bottom: calc(100% - 7px);
  display: flex;
  justify-content: space-between;
  left: 50%;
}
.kv-btn {
  position: static;
  width: 49%;

  background: none;
  border: none;
  cursor: pointer;
  transition: background 180ms ease;
}
.kv-btn:nth-of-type(2) {
  /* left: 60%; */
}
.s .kv-btn {
  width: 49%;
}
@media screen and (max-width: 750px) {
  .s .kv-btnContent {
    width: 100%;
  }
  .s .kv-btn {
    width: 48%;
  }
}
@media screen and (max-width: 375px) {
  .s .kv-btn {
    width: 48%;
  }
  .s .kv-btnContent {
    width: 100%;
  }
}
/* アクティブ（クリックされた）状態はグラデーションにする */
.kv-btn.is-active {
  transform: unset;
}

.kv-btnImg {
  width: min(19.51vw, 281px);
  margin: 0 auto;
}
.kv-btn {
  position: relative;
}
.kv-btn._comingsoon::after {
  content: '';
  position: absolute;
  width: min(9.79vw, 141px);
  height: min(4.03vw, 58px);
  top: min(-1.036vw, -20px);
  left: 0;
  background: url(../img/comming-img.png);
  background-size: cover;
}
@media screen and (max-width: 750px) {
  .kv-btn._comingsoon::after {
    width: clamp(55px, 22.13vw, 83px);
    height: clamp(23px, 9.07vw, 34px);
    top: clamp(-10px, -10.13vw, -38px);
  }
}
.s .kv-btnImg {
  width: 100%;
}

/* picture 内の img をボタン領域にフィットさせる（SP/PC 両対応） */
.kv-btnImg {
  display: block; /* picture 要素向け */
}
.kv-btnImg img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 必要に応じて cover に変更可 */
  display: block;
}

/* 左右ボタンの画像切替用ユーティリティ
   - デフォルトは .kv-btnImg--default を表示
   - .kv-btn.is-active のときは .kv-btnImg--active を表示 */
.kv-btnImg--active {
  display: none;
}
.kv-btnImg--default {
  display: block;
  border-bottom: 6px solid #000;
}

.s .kv-btnImg--default {
  border-bottom: 6px solid #000;
  transform: translateX(7px);
}
.s .kv-btnImg--default._left {
  transform: translateX(-4px);
}
.kv-btn.is-active .kv-btnImg--default {
  display: none;
}
.kv-btn.is-active .kv-btnImg--active {
  display: block;
  transform: translateX(7px);
}
.kv-btn.is-active .kv-btnImg--active.clickBtn-left {
  transform: translateX(-3.5px) translateY(0.2px);
}
@media screen and (max-width: 375px) {
  .kv-btn.is-active .kv-btnImg--active.clickBtn-left {
    transform: translateX(-3.5px) translateY(0.19px);
  }
}
.kv-btn.is-active .kv-btnImg--active.clickBtn-right {
  transform: translateX(7px) translateY(0.2px);
}
.s .kv-btn.is-active .kv-btnImg--active.clickBtn-right {
  /* transform: translateX(7px) translateY(4px); */
}
.comming-img {
  position: absolute;
  top: -29%;
  left: 62%;
  transform: translateX(-50%);
  width: min(8.333vw, 120px);
  z-index: 2;
}

.s .comming-img {
  position: absolute;
  top: -42%;
  left: 64%;
  transform: translateX(-50%);
  width: 80px;
  z-index: 2;
}
/* ユーティリティ: 要素を完全に非表示にする（JS での切替に利用） */
.is-hidden {
  display: none !important;
}
/*repost*/
.item-wrap {
  max-width: 1100px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  position: relative; /* 子要素を親基準でオフセットするため */
  padding-top: 2.5rem;
  background-color: #fff699;
  margin: 0 auto;
  border: 4px solid #000;
  z-index: 1;
}
@media screen and (max-width: 750px) {
  .item-wrap {
    border: 3px solid #000;
    gap: 1.5rem;
    padding-top: 1.5rem;
  }
}
.item-wrap.isApplicable {
  flex-direction: column;
  gap: 1rem;
  padding: 2.5rem 0;
}
.item-wrap.isSecond {
  position: relative;
  padding-top: 0;
  padding-bottom: 1.2rem;
  padding-inline: 30px;
  margin: 2.3125rem auto 0 auto;
  background: none;
  border: none;
  align-items: flex-start;
  gap: 1.875rem /* 30px (基準16px) */;
}
@media screen and (max-width: 750px) {
  .item-wrap.isSecond {
    gap: 15px;
    padding-inline: 15px;
    padding-bottom: 1rem;
    align-items: flex-start;
  }
}
.iphone-img {
  width: min(11.597vw, 167px);
}
@media screen and (max-width: 750px) {
  .iphone-img {
    width: 83px;
  }
}
.repost-title {
  width: 100%;
}
.s .repost-title.isReceipt {
  width: 125px;
}
.repost-title.isSecond {
  width: 100%;
}
@media screen and (max-width: 750px) {
  .repost-title.isSecond {
    width: 100%;
  }
}
/*present*/
.item-img {
  width: 43%;
  margin-top: -4.1875rem;
}
@media screen and (max-width: 750px) {
  .item-img {
    width: 100%;
  }
}
.present-text {
  position: absolute;
  right: 6%;
  bottom: 7%;
  font-size: min(1.666vw, 1.5rem);
  font-weight: bold;
  letter-spacing: -0.1rem;
  color: #df2027;
  background: linear-gradient(to right, #ffecaf 0%, #fde38c 100% 60%, #ffecaf 100%);
  padding: 0 15px;
}
@media screen and (max-width: 750px) {
  .present-text {
    bottom: 8%;
    font-size: clamp(1rem, 1vw, 2rem);
  }
}
.present-text span {
  font-size: min(2.2vw, 2.5rem);
}
@media screen and (max-width: 750px) {
  .present-text span {
    font-size: clamp(1.5rem, 2vw, 3.75rem);
  }
}
.how-itemArea {
  max-width: 1100px;
  position: relative;
  display: flex;
  margin-top: 1.125rem;
}
@media screen and (max-width: 750px) {
  .how-itemArea {
    flex-direction: column;
    align-items: center;
    gap: 62px;
  }
}
.how-itemBox {
  width: calc((100% - 50px * 2) / 3);
  /* width: 33.33%; */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: #fff699;
  border: 4px solid #000;
  position: relative;
  z-index: 1;
  padding-top: min(2.083vw, 30px);
  padding-inline: 20px;
  margin: 0 50px 0 0;
  gap: 20px;
}
.how-itemBox.isFirst {
  justify-content: space-between;
  gap: 0;
}
/* 最後の .how-itemBox（親直下の最後の .how-itemBox）にはマージンを無効にする
   :last-child が効かない場合（親の最後の子が picture 等の別要素のとき）に対応 */
.how-itemArea > .how-itemBox:last-of-type {
  margin-right: 0;
}
.how-itemArea > .how-itemBox:first-child {
  padding-bottom: 20px;
}
@media screen and (max-width: 750px) {
  .how-itemBox {
    width: 100%;
    border: 4px solid #000;
    padding-top: clamp(2.5rem, 2vw, 5rem);
    margin: 0;
  }
  .how-itemBox.isSecond {
    padding-bottom: 0;
    gap: 20px;
  }
  .how-itemBox.isSecond {
    padding-bottom: 0;
  }
  .how-itemBox.isFirst {
    padding-bottom: 30px;
  }
  /* 親直下の最初の .how-itemBox にだけ適用 */
  .how-itemArea > .how-itemBox:first-child {
    /* ここにスタイル */
    padding-bottom: 30px;
  }
}

.step-img {
  width: min(12.5vw, 132px);
  position: absolute;
  top: -1.875rem;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 750px) {
  .step-img {
    width: 133px;
    top: -2rem;
  }
}
.how-itemText {
  font-size: min(1.3vw, 1.25rem);
  font-weight: bold;
  text-align: center;
  font-feature-settings: 'palt';
}
@media screen and (max-width: 750px) {
  .how-itemText {
    font-size: clamp(1rem, 1vw, 2rem);
  }
}
.how-itemText.isSecond {
  font-size: min(1.388vw, 1.25rem);
}
@media screen and (max-width: 750px) {
  .how-itemText.isSecond {
    font-size: clamp(1rem, 1vw, 2rem);
  }
}
.how-itemText span {
  border-bottom: 3px solid #df2027;
  padding-bottom: 2px;
}
.text-red {
  color: #df2027;
  border-bottom: none !important;
}
.x-icon {
  width: 47px;
  padding-top: min(1.818vw, 1.25rem);
}
.s .x-icon {
  padding-top: 15px;
}
.step-btn {
  position: relative;
  width: 95%;
  font-size: min(1.555vw, 0.875rem);
  height: min(5.454vw, 60px);
  background-color: #df2027;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  /* はっきり見える濃い影（メインの大きなブラー + 下に張るようなソリッドシャドウ） */
  box-shadow: 0 6px 0 rgba(0, 0, 0, 1.6); /* 下に濃い帯を追加してハッキリ見せる */
  /* transition:
    transform 150ms cubic-bezier(0.2, 0.9, 0.3, 1),
    box-shadow 150ms cubic-bezier(0.2, 0.9, 0.3, 1);
  will-change: transform, box-shadow; */
  margin-top: 20px;
}
.btn-arrow {
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  width: min(0.625vw, 9px);
}
.s .btn-arrow {
  width: 9px;
}
.stepMargin-btn {
  width: min(18.05vw, 260px);
  height: min(5.454vw, 60px);
  background-color: #df2027;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  /* はっきり見える濃い影（メインの大きなブラー + 下に張るようなソリッドシャドウ） */
  box-shadow: 0 6px 0 rgba(0, 0, 0, 1.6); /* 下に濃い帯を追加してハッキリ見せる */
  transition:
    transform 150ms cubic-bezier(0.2, 0.9, 0.3, 1),
    box-shadow 150ms cubic-bezier(0.2, 0.9, 0.3, 1);
  will-change: transform, box-shadow;
}
.login-btn {
  position: relative;
  width: min(18.05vw, 260px);
  height: min(5.454vw, 60px);
  background-color: #fff;
  color: #df2027;
  border: none;
  cursor: pointer;
  font-weight: 600;
  /* はっきり見える濃い影（メインの大きなブラー + 下に張るようなソリッドシャドウ） */
  box-shadow: 0 6px 0 rgba(0, 0, 0, 1.6); /* 下に濃い帯を追加してハッキリ見せる */
  transition:
    transform 150ms cubic-bezier(0.2, 0.9, 0.3, 1),
    box-shadow 150ms cubic-bezier(0.2, 0.9, 0.3, 1);
  will-change: transform, box-shadow;
}

.step-btn.isSecond {
  width: 260px;
  display: block;
  margin-inline: auto;
  margin-top: 30px;
}
@media screen and (max-width: 750px) {
  .step-btn.isSecond {
    margin-top: 30px;
  }
}
@media screen and (max-width: 750px) {
  .step-btn,
  .login-btn,
  .stepMargin-btn {
    width: 260px;
    height: 60px;
    font-size: 16px;
  }
}
/* ホバー時に影を強め、ボタンが浮き上がる表現 */
.step-btn:hover,
.step-btn:focus,
.stepMargin-btn:hover,
.stepMargin-btn:focus,
.login-btn:hover,
.login-btn:focus {
  transform: translateY(-4px);
  box-shadow:
    0 30px 50px rgba(0, 0, 0, 0.82),
    /* 強めの拡大ブラー */ 0 10px 0 rgba(0, 0, 0, 0.7); /* 下の帯も濃く */
}
@media screen and (max-width: 750px) {
  .how-itemArea > .how-itemBox:first-child .step-btn {
    margin-top: 20px; /* SP */
  }
}
@media screen and (max-width: 750px) {
  .how-itemArea > .how-itemBox:nth-child(3) {
    padding-bottom: 20px;
  }
  .how-itemArea > .how-itemBox.isApplicable:nth-child(3) {
    padding-bottom: 0;
  }
}

.arrow-img {
  width: 1.5%;
  position: absolute;
  top: 50%;
  left: 32.5%;
  transform: translate(-50%, -50%);
}
.arrow-img:nth-of-type(2) {
  left: 67.5%;
}
.s .arrow-img {
  width: 47px;
  position: absolute;
  top: 30%;
  left: 50.5%;
  transform: translate(-50%, -50%);
}
.s .arrow-img.isBy {
  top: 28%;
}
.s .arrow-img:nth-of-type(2) {
  left: 51%;
  top: 61%;
}
.small-iphone {
  width: min(11.3vw, 108px);
}
@media screen and (max-width: 750px) {
  .small-iphone {
    width: 96px;
  }
}
.up-icon {
  width: 93px;
  transform: translateY(-20px);
}
.date-img {
  width: min(43.75vw, 630px);
  margin: min(2.363vw, 1.65rem) auto 0 auto;
  margin-top: 40px;
}
.date-img.isSecond {
  margin-top: 40px;
}
@media screen and (max-width: 750px) {
  .date-img {
    margin-top: 20px;
  }
  .date-img.isSecond {
    margin-top: 20px;
  }
}
@media screen and (max-width: 750px) {
  .up-icon {
    width: 108px;
    padding-top: 20px;
  }
  .date-img {
    width: 100%;
  }
}
.tams-wrap {
  max-width: 1100px;
  height: 336px;
  text-align: left;
  background-color: #df2027;
  border: 4px solid #000;
  padding-top: 2.5rem;
  overflow: scroll;
}
.tams-wrap.isCautions {
  margin-top: 30px;
  padding-inline: 30px;
  padding-bottom: 30px;
}
.s .tams-wrap.isCautions {
  margin-top: 10px;
  padding-inline: 14px;
  padding-bottom: 15px;
}
@media screen and (max-width: 750px) {
  .tams-wrap {
    padding-inline: 20px;
    padding-top: 1.25rem;
    text-align: left;
  }
}
.tams-text {
  font-size: 1rem;
  font-feature-settings: 'palt';
  color: #fff;
}
@media screen and (max-width: 750px) {
  .tams-text {
    font-size: clamp(0.875rem, 1vw, 1.625rem);
  }
}
.tams-bold {
  display: block;
  font-family: 'a-otf-gothic-mb101-pr6n', sans-serif;
  font-weight: bold;
  font-size: min(2.0833vw, 1.875rem);
  text-align: center;
  margin-bottom: 30px;
}
.s .tams-bold {
  font-size: 1.25rem;
  margin-bottom: 10px;
}
.contact-wrap {
  max-width: 700px;
  background-color: #fff699;
  border: 4px solid #000;
  padding: 2.8125rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto 0 auto;
}
.contact-text {
  width: min(36.31vw, 523px);
}
@media screen and (max-width: 750px) {
  .contact-text {
    width: 210px;
  }
  .contact-wrap {
    border: 4px solid #000;
    padding: 1.8125rem 20px;
    margin-top: 1rem;
  }
}
.info-flex {
  display: flex;
  align-items: center;
  gap: min(1.25vw, 10px);
  justify-content: center;
  line-height: 1.2;
}
.contact-wrap .info-flex:first-of-type {
  margin-top: 25px;
}

@media screen and (max-width: 750px) {
  /* モバイルで contact 内の最初の .info-flex のみ余白を小さくする
     nth-child(1) は親の最初の子であることを要求するため、
     p.contact-text が先にある構造ではマッチしない。
     first-of-type を使い、親を限定して確実に最初の .info-flex を狙う */
  .contact-wrap .info-flex:first-of-type {
    margin-top: 15px;
  }
}
/* KV の右ボタン（alt）を選択したときだけ電話表示を消したい場合に使うクラス */
.kv-main-active .js-phone {
  display: none !important;
}
/* 左タブ選択時にメール側 info-flex にマージントップを追加 */
.contact-wrap .info-flex.has-margin-top {
  margin-top: 25px;
}
@media screen and (max-width: 750px) {
  .contact-wrap .info-flex.has-margin-top {
    margin-top: 15px;
  }
}
.info-text {
  text-decoration: none;
  font-size: min(2.777vw, 40px);
  font-weight: 600;
  font-family: 'Noto Sans JP', sans-serif;
  color: #000;
}
.s .info-text {
  font-size: 20px;
}
.phone {
  width: 31px;
}
.mail {
  width: 38px;
}
@media screen and (max-width: 750px) {
  .phone {
    width: clamp(1.25rem, 1vw, 2.5rem);
  }
  .mail {
    width: clamp(1.25rem, 1vw, 2.5rem);
  }
}
.time-contact {
  margin-top: 0.625rem;
}
.time-box {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 1rem;
}
.time-box:nth-child(2) {
  margin-top: 0.3125rem;
}
@media screen and (max-width: 750px) {
  .time-box {
    gap: 0.5rem;
  }
  .time-box:nth-child(2) {
    margin-top: 5px;
    align-items: baseline;
  }
}
.time-text {
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background-color: #000;
  padding: 0.3125rem 0.625rem;
}
.time {
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1;
}
.time span {
  font-size: 0.875rem;
}
@media screen and (max-width: 750px) {
  .time-text {
    width: 27%;
    font-size: clamp(0.875rem, 1vw, 1.75rem);
  }
  .time {
    width: 70%;
    font-size: clamp(1rem, 1vw, 2rem);
  }
}
/* Back to top button */
.back-to-top {
  position: fixed;
  right: 96px;
  bottom: 54px;
  width: 108px;
  height: 108px;
  background: none;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  z-index: 9999;
}
.back-to-top.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.back-to-top:focus {
  /* outline: none; */
  /* box-shadow: 0 0 0 6px rgba(223, 39, 39, 0.18); */
}
@media screen and (max-width: 750px) {
  .back-to-top {
    right: 20px;
    bottom: 30px;
    width: 54px;
    height: 54px;
  }
}
.present-itemFlex {
  position: relative;
  width: 92%;
  display: flex;
  justify-content: center;
  margin-top: 50px;
  margin: 0 auto;
  padding-bottom: 50px;
}
.present-itemFlex.isFirst {
  border-top: none !important;
  padding-top: 0 !important;
}
@media screen and (max-width: 750px) {
  .present-itemFlex {
    flex-direction: column;
    align-items: center;
    max-width: 375px;
  }
  .present-itemFlex.isFirst {
    padding-top: 0 !important;
  }
  .present-itemFlex.isLast {
    padding-top: 70px !important;
  }
}
.icon {
  width: min(6.25vw, 90px);
  position: absolute;
  top: -30px;
  left: 0;
}
@media screen and (max-width: 750px) {
  .icon {
    width: 57.5px;
    position: absolute;
    top: -30px;
    left: -8%;
  }
}
.present-itemFlex + .present-itemFlex .icon {
  top: 6%;
}

.present-itemFlex:not(:first-child) {
  border-top: 2px solid #000;
  padding-top: 50px;
}
.present-itemFlex:not(:first-child) {
  border-top: 2px solid #000;
}
.ball,
.shorts {
  width: min(17.36vw, 250px);
  margin-left: 40px;
}
.ball.isFirst {
  transform: translateY(-22px);
}
@media screen and (max-width: 750px) {
  .ball.isFirst {
    transform: translateY(0);
  }
  .present-itemFlex:not(:first-child) {
    padding-top: 30px;
  }
}
@media screen and (max-width: 750px) {
  .ball,
  .shorts {
    width: 156px;
    margin-left: 27%;
  }
  .ball {
    margin-top: -40px;
  }
}
/* 最初の present-itemFlex 内の .ball のみ大きくする（上書き用） */
.present-container > .present-itemFlex:first-child .ball {
  margin-top: -30px;
}
.hundred {
  position: absolute;
  width: min(10.83vw, 156px);
  bottom: 15%;
  right: 0;
}
/* .hundred.isPeople {
  width: min(13vw, 247px);
} */
@media screen and (max-width: 750px) {
  .hundred {
    position: absolute;
    width: 81px;
    bottom: 6%;
    right: 0;
  }
  /* .hundred.isPeople {
    width: 123px;
  } */
}
.muffler {
  width: min(19.236vw, 277px);
}
@media screen and (max-width: 750px) {
  .muffler {
    width: 138px;
  }
}
.present-container {
  position: relative;
  max-width: 1100px;
  margin: 50px auto 0 auto;
  background-color: #fff699;
  border: 4px solid #000;
  padding-bottom: 60px;
}
.s .present-container {
  padding-bottom: 10px;
}
.present-deco {
  position: absolute;
  bottom: calc(100% + 5px);
  left: calc(100% - -36px);
  transform: translateX(-100%);
  width: min(30.486vw, 439px);
}
.present-deco.isFirst {
  bottom: calc(100% + 41px);
  left: calc(100% - -65px);
  z-index: -1;
}
.present-deco.isSecond {
  bottom: calc(100% + 4px);
  left: calc(100% - -35px);
  width: min(24.486vw, 248px);
}
@media screen and (max-width: 1210px) {
  .present-deco {
    position: absolute;
    bottom: calc(100% + 5px);
    left: calc(100% - -20px);
    transform: translateX(-100%);
    width: min(30.486vw, 439px);
  }
  .present-deco.isFirst {
    bottom: calc(100% + 40px);
    left: calc(100% - -36px);
  }
  .present-deco.isSecond {
    bottom: calc(100% + 4px);
    left: calc(100% - -11px);
    width: 121px;
  }
}
@media screen and (max-width: 750px) {
  .present-deco.isFirst {
    bottom: calc(100% + 41px);
    left: calc(100% - -16px);
  }
}

@media screen and (max-width: 750px) {
  .present-deco {
    width: 189px;
    bottom: calc(100% + 3px);
    left: calc(100% - -6px);
    transform: translateX(-100%);
  }
}
.present-item {
  width: 34%;
}

@media screen and (max-width: 750px) {
  .present-item {
    width: 100%;
  }
}
.present-item.isRight {
  width: 50%;
}
.present-item.isFirst {
  margin-top: 50px;
}
@media screen and (max-width: 750px) {
  .present-item.isRight {
    width: 100%;
    margin-top: 5px;
  }
}
.present-container > .present-itemFlex:first-child .present-item.isRight {
  padding-top: 40px;
}
.present-textImg {
  width: min(31.31vw, 451px);
}
@media screen and (max-width: 750px) {
  .present-textImg {
    width: 251px;
  }
}
.present-textItem {
  font-size: min(0.8888vw, 0.8rem);
  font-weight: 600;
  margin-top: 20px;
  font-feature-settings: 'palt';
}
.present-textItem.isBottom {
  text-align: center;
}
.s .present-textItem.isBottom {
  text-align: left;
  font-size: 0.7rem;
}
@media screen and (max-width: 750px) {
  .present-textItem {
    font-size: 0.75rem;
  }
}
.present-subText {
  font-family: 'a-otf-gothic-mb101-pr6n', sans-serif;
  font-size: min(1.9444vw, 1.75rem);
  font-weight: 600;
  margin-top: 20px;
}
@media screen and (max-width: 750px) {
  .present-subText {
    font-size: 1rem;
    margin-top: 10px;
  }
}
.app-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
}
.app-item {
  width: 100%;
  max-width: 140px; /* 必要ならここを小さくしてください */
  object-fit: contain;
  display: block;
}
.box-img {
  width: 60%;
}
/* 対象商品エリア：横3列 x 縦2列（6個）に整列、モバイルは2列 */
.item-wrap.app-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 12px;
  justify-items: center;
  align-items: center;
  width: 100%;
}
.item-wrap.app-wrap {
  width: 100%;
  max-width: 140px; /* 必要ならここを小さくしてください */
  height: auto;
  object-fit: contain;
  display: block;
}
@media screen and (max-width: 750px) {
  .item-wrap.app-wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .item-wrap.app-wrap .app-item {
    max-width: 160px;
  }
}

/* 対象商品エリア：横3列 x 縦2列（6個）に整列、モバイルは2列
   HTML 構造が .item-wrap > .app-wrap となっているためセレクタを調整 */
.item-wrap .app-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 30px;
  justify-items: center;
  align-items: center;
  width: 100%;
  max-width: 700px;
}
.item-wrap .app-wrap .app-item {
  width: 100%;
  max-width: 140px; /* 必要ならここを小さくしてください */
  object-fit: contain;
  display: block;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
@media screen and (max-width: 750px) {
  .item-wrap .app-wrap .app-item {
    max-width: 160px;
  }
}
@media screen and (max-width: 375px) {
  .item-wrap .app-wrap .app-item {
    max-width: 160px;
  }
}
.applicable-text {
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: -0.1rem;
  color: #000;
  text-align: center;
}
@media screen and (max-width: 750px) {
  .applicable-text {
    font-size: 0.6rem;
  }
}
.app-wrap {
  max-width: 1100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.item-wrap.app-wrap .app-item {
  flex: 0 0 calc((100% / 3) - (12px * (2 / 3)));
  max-width: 160px;
}
item-wrap.isApplicable {
  flex-direction: column;
  gap: 30px;
  padding: 60px 0;
  margin-top: 30px;
}
@media screen and (max-width: 750px) {
  .item-wrap.isApplicable {
    padding: 30px 10px 15px 10px;
    gap: 0 !important;
    align-items: baseline;
  }
}
.applicable-notText {
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: -0.1rem;
  color: #666666;
  text-align: center;
}
.s .applicable-notText {
  margin-top: 10px;
}

.cart {
  width: min(5.347vw, 77px);
  margin-top: 20px;
}
.s .cart {
  width: 86px;
}
.receipt {
  width: min(11.8vw, 170px);
}
.s .receipt {
  width: 158px;
}
.upload {
  width: min(8vw, 109px);
}
.s .upload {
  width: 114px;
}
.hoe-itemSubText {
  font-size: min(1.111vw, 1rem);
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  margin-top: min(0.694vw, 10px);
}
@media screen and (max-width: 750px) {
  .hoe-itemSubText {
    font-size: 1rem;
  }
}
.hoe-itemSubText span {
  border-bottom: 3px solid #df2027;
  padding-bottom: 2px;
}
.btn-box {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 30px;
}
@media screen and (max-width: 750px) {
  .btn-box {
    flex-direction: column;
    align-items: center;
    gap: 20px !important;
    margin-top: -30px;
  }
}
/*----------------------------------------- cautions -----------------------------------------*/
.cautions-text {
  font-size: min(1.3888vw, 1.25rem);
  font-weight: 600;
}
@media screen and (max-width: 750px) {
  .cautions-text {
    font-size: 1rem;
  }
}
.precautions-title {
  font-size: min(2.083vw, 1.875rem);
  font-weight: 600;
  text-align: center;
  color: #df2027;
  letter-spacing: -0.09rem;
  margin-top: min(5.5555vw, 5rem);
}
@media screen and (max-width: 750px) {
  .precautions-title {
    font-size: 1.25rem;
    text-align: left;
  }
}
/*----------------------------------------- point-receipt --------------------------------*/
.point-receipt {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  margin-top: min(1.3888vw, 20px);
}
.s .point-receipt {
  max-width: 690px;
  margin: 0 auto;
  text-align: center;
  margin-top: clamp(20px, 2.78vw, 40px);
}
.point-receipt-title {
  position: relative;
  height: 100px;
  line-height: 100px;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  background-color: #df2027;
  border-top: 4px solid #000;
  border-left: 4px solid #000;
  border-right: 4px solid #000;
  border-bottom: 4px solid #000;
  color: #ffffff;
  letter-spacing: clamp(4px, 0.56vw, 8px);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.s .point-receipt-title {
  justify-content: flex-start;
  gap: 10px;
  padding-left: 10px;
}
.point-receipt-title.isFirst {
  padding-right: 52px;
}
.s .point-receipt-title.isFirst {
  padding-right: 0;
}
.point-acordion {
  background-color: #fff699;
  border-left: 4px solid #000;
  border-right: 4px solid #000;
  border-bottom: 4px solid #000;
}
.point-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  gap: clamp(18px, 2.78vw, 32px);
  padding: clamp(20px, 2.78vw, 40px);
  margin: 0 auto;
}

.s .point-box {
  max-width: 570px;
  flex-direction: column;
  padding: 10px;
  padding-bottom: 30px;
}
.s .point-receipt-box {
  width: 100%;
  flex-direction: column;
}
.ng-box {
  max-width: 700px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 30px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
.s .ng-box {
  justify-content: center;
  gap: 30px;
  margin-top: 5px;
}
.ng-box.ng-boxInvalid {
  flex-wrap: wrap;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
.s .ng-item-box {
  width: calc(45% - 15px); /* gapの半分を引いた幅 */
}
.ng-item-box.ng-itemBoxInvalid {
  width: 28%;
}
.ng-item-box.ng-itemBoxHeight {
  margin-top: -22px;
}
.s .ng-item-box.ng-itemBoxInvalid {
  width: 33%;
}
.s .ng-item-box.ng-itemBoxFlex {
  width: 27%;
}
.point-receipt-area {
  padding-inline: clamp(15px, 2.08vw, 30px);
}
.point-receipt-box {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(15px, 2.33vw, 25px);
  color: #333;
}
.receipt-img {
  width: 80%;
  margin: 0 auto 0 auto;
}
.receipt-img.isFirst {
  margin-right: 10px;
}
.s .receipt-img {
  width: 283px;
  margin-left: 20px;
}
.s .receipt-img img {
  width: 100%;
  margin: 0 auto;
}
.point-text-box {
  width: 100%;
  border-radius: 20px;
  background: #fafafa;
  padding: min(3.2vw, 30px) min(3.2vw, 32px);
  text-align: left;
  font-size: clamp(12px, 1.6vw, 16px);
  font-weight: 400;
}
.point-text-box.isLast {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.s .point-text-box.isLast {
  gap: clamp(8px, 0.69vw, 10px);
}
.last-img {
  width: 34%;
}
.s .point-text-box {
  max-width: 450px;
  align-items: center;
  margin: 0 auto;
  font-size: clamp(12px, 3.1vw, 16px);
}
.point-text-box ul {
  padding-left: clamp(20px, 2.22vw, 32px);
}
.point-text-box ol {
  padding-left: clamp(20px, 2.22vw, 20px);
}
.point-text-box li {
  text-align: left;
  margin-top: min(1.05vw, 10px);
}

.point-text-box span {
  color: #333;

  font-family: 'Roboto';
  font-size: clamp(36px, 4.17vw, 60px);
  font-style: normal;
  font-weight: 700;
}
.ng-text {
  color: #df2027;
  margin-top: clamp(5px, 1.39vw, 10px);
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: clamp(0.7px, 0.1vw, 1.4px);
}
.s .ng-text {
  font-size: clamp(0.5rem, 2.1333vw, 1rem);
  word-break: break-word; /* 長い単語での折り返しを許可 */
  margin-top: 5px;
}
.receipt-step {
  width: 111px;
}
.s .receipt-step {
  width: 65px;
}
.precautions-subTitle {
  font-family: 'a-otf-gothic-mb101-pr6n', sans-serif;
  letter-spacing: -0.05rem;
}
.s .precautions-subTitle {
  font-size: 1rem;
}
.required {
  font-size: 1.25rem;
  font-weight: 500;
}
.s .required {
  font-size: 0.875rem;
  line-height: 2;
}
.required span {
  font-weight: 700;
  border-bottom: 2px solid #000;
  padding-bottom: 5px;
}
.valid-title {
  max-width: 700px;
  width: 100%;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: #df2027;
  background-color: #ffd700;
}
.s .valid-title {
  font-size: 0.875rem;
  font-weight: 600;
}
.valid-title.isInvalid {
  height: 65px;
}
.s .valid-title.isInvalid {
  height: 60px;
}
.ng-item-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ng-box.ng-boxFlex {
  align-items: center; /* normalized from anchor-center */
}
.s .ng-box.ng-boxFlex {
  flex-wrap: wrap;
  align-items: center;
  gap: 27px;
}
.ng-item {
  width: 70%;
}
.valid-height {
  height: 178px;
}
@media screen and (max-width: 750px) {
  .valid-height {
    height: min(26vw, 165px);
  }
}
@media screen and (max-width: 375px) {
  .valid-height {
    height: 85px;
  }
}
.ng-item.ng-itemSize02 {
  width: 62%;
}
.ng-item.ng-itemSize03 {
  width: 88%;
}
.s .ng-item.ng-itemSize03 {
  width: 88%;
}
.ng-item.ng-itemHeight {
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 750px) {
  .ng-item.ng-itemHeight {
    height: min(26.666vw, 200px);
  }
}
.s .ng-item {
  width: 72%;
}
.ng-item.ng-itemSize {
  width: 71%;
}
.ng-item.ng-itemSmall {
  width: 75%;
}
.s .ng-item.ng-itemSize02 {
  width: 94%;
}
.s .ng-item.ng-itemSize {
  width: 85%;
}
/**************************************
 * アコーディオン
**************************************/
/* アコーディオンアイコン */
.accordion-icon {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: all 0.3s ease;
  background-color: #ffd700;
}
.s .accordion-icon {
  right: 15px;
  width: 27.5px;
  height: 27.5px;
}
.accordion-trigger.active .accordion-icon {
  transform: translateY(-50%) rotate(180deg);
}
.accordion-trigger.active {
  border-bottom: none;
}

/* プラス記号の縦線 */
.accordion-icon::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 32px;
  background-color: #df2027;
  transition: all 0.3s ease;
}

/* プラス記号の横線 */
.accordion-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 3px;
  background-color: #df2027;
  transition: all 0.3s ease;
}

/* 開いた時：縦線を消してマイナス（－）にする */
.accordion-trigger.active .accordion-icon::before {
  opacity: 0;
}

/* スマホ版 */
.s .accordion-icon::before {
  height: 15px;
}

.s .accordion-icon::after {
  width: 15px;
}

/* アコーディオンコンテンツ */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  opacity: 0;
}

.accordion-content.show {
  max-height: 2000px;
  opacity: 1;
}

/* Point receipt title styles */
.s .point-receipt-title {
  height: 60px;
  line-height: 60px;
  font-size: 14px;
}

@media screen and (max-width: 374px) {
  .s .point-receipt-title {
    height: 40px;
    line-height: 40px;
    font-size: clamp(18px, 5.5vw, 28px);
  }
}

.point-acordion {
  width: 100%;
  background: #fff699;
}
/*------------------追加CSS---------------------------------*/
.present-exArea {
  background: #fff699;
  padding-bottom: 2.875rem;
  padding-inline: clamp(10px, 5vw, 80px);
  border: 4px solid #000;
  margin-top: 50px;
  position: relative;
  overflow: visible;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .present-exArea {
    padding-inline: 10px;
    padding-bottom: 10px;
  }
}
.present-infoArea {
  max-width: 890px;
  margin: 0 auto;
  background-color: #fff699;
  padding: 1rem 3rem /* 48px (基準16px) */;
}
@media screen and (max-width: 768px) {
  .present-infoArea {
    padding: 1rem;
    padding-top: 0;
  }
}
.present-infoBox {
  padding-bottom: 20px;
}
.present-infoBox:nth-child(2) {
  padding-top: 10px;
}
/* @media screen and (max-width: 768px) {
  .present-infoBox:nth-child(2) {
    padding-top: 0;
  }
} */
.present-infoBox:first-child {
  border-bottom: solid 2px #000;
}
.present-ttl {
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-weight: 700;
  font-size: min(1.6667vw, 1.25rem);
  margin-top: 5px;
}
@media screen and (max-width: 768px) {
  .present-ttl {
    font-size: clamp(16px, 4.167vw /* viewport 768px で 32px */, 32px);
    margin-left: -12px;
  }
}
.present-ttlText {
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-weight: 600;
  font-size: min(1.5vw, 1.125rem);
  margin-top: 5px;
}
@media screen and (max-width: 768px) {
  .present-ttlText {
    font-size: clamp(14px, 3.646vw /* viewport 768px で 28px */, 28px);
  }
}
.schedule-flex {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}
.schedule-ttl {
  font-size: min(1.3333vw, 1rem);
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-weight: 700;
  background-color: #000;
  color: #fff;
  padding: 3px 15px;
}
.schedule-text {
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .schedule-ttl {
    font-size: clamp(12px, 2.604vw /* viewport 768px で 20px */, 24px);
    padding: 3px 12px;
  }
  .schedule-text {
    font-size: clamp(12px, 2.604vw /* viewport 768px で 20px */, 24px);
  }
}
.Must-area {
  margin-top: 20px;
}
.Must-text {
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-weight: 700;
  font-size: min(1.6667vw, 1.25rem);
  text-indent: -1em;
  padding-left: 1em;
}
@media screen and (max-width: 768px) {
  .Must-text {
    font-size: clamp(14px, 3.646vw /* viewport 768px で 28px */, 28px);
  }
  .Must-area {
    margin-top: 15px;
    margin-left: -14px;
  }
}
.experience-area {
  margin-top: 20px;
}
.experience-ttl {
  display: inline-block;
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-weight: 700;
  font-size: min(1.6667vw, 1.25rem);
  color: #fff;
  background-color: #df2027;
  padding: 3px 15px;
}
@media screen and (max-width: 768px) {
  .experience-ttl {
    font-size: clamp(16px, 4.167vw /* viewport 768px で 20px */, 32px);
    padding: 3px 12px;
    margin-left: -11px;
  }
}
.experience-subTtlbox {
  margin-top: 10px;
}
.experience-subTtl {
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-weight: 700;
  font-size: min(1.6667vw, 1.25rem);
  letter-spacing: -0.01rem;
}
@media screen and (max-width: 768px) {
  .experience-subTtl {
    font-size: clamp(16px, 4.167vw /* viewport 768px で 20px */, 32px);
  }
}
.experience-text {
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-weight: 500;
  font-size: min(1.5vw, 1.125rem);
  color: #333;
  letter-spacing: -0.05rem;
}
@media screen and (max-width: 768px) {
  .experience-text {
    font-size: clamp(14px, 3.646vw /* viewport 768px で 20px */, 28px);
    margin-left: 13px;
  }
}
.note-area {
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .note-area {
    margin-top: 10px;
    margin-left: -6px;
  }
}
.note-ttl {
  font-family: 'Noto Sans CJK JP', sans-serif;
  font-weight: 700;
  font-size: min(1.6667vw, 1.25rem);
}
@media screen and (max-width: 768px) {
  .note-ttl {
    font-size: clamp(14px, 3.646vw /* viewport 768px で 20px */, 28px);
  }
}
.setumei-logo {
  width: 10%;
}
@media screen and (max-width: 768px) {
  .setumei-logo {
    width: 25%;
  }
}
.setumei-infoBox {
  padding-top: 30px;
  border-top: 2px solid #000;
  font-size: min(1.1667vw, 0.875rem);
  font-feature-settings: 'palt';
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 30px;
}
@media screen and (max-width: 768px) {
  .setumei-infoBox {
    padding-top: 20px;
    font-size: clamp(11px, 2.604vw /* viewport 768px で 20px */, 24px);
    gap: 10px;
  }
}
.setumei-textBox {
  font-size: min(1.118vw, 17px);
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  .Setsumei-ttl {
    font-size: clamp(10px, 2.604vw /* viewport 768px で 20px */, 20px);
  }
  .Setsumei-text {
    font-size: clamp(10px, 2.604vw /* viewport 768px で 20px */, 20px);
    line-height: 1.5;
  }
}

/*----------fifa---------------------------------*/
.fifa-flex {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}
.fifa-img {
  width: 9%;
}
@media screen and (max-width: 768px) {
  .fifa-img {
    width: 26%;
  }
}

/* Swiper slide-area settings */
.slide-area {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0 0 20px;
  position: relative;
}

.swiper-slide.slide-item {
  width: 269px;
  height: 285px;
  display: flex;
  flex-direction: column;
}

.slide-img {
  width: 100%;
  height: 180px;
  overflow: hidden;
  flex-shrink: 0;
}

.slide-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  background-color: #ffd700;
}

.slide-img img.slide-item03 {
  object-fit: contain;
  object-position: center;
}

.slide-textContent {
  background-color: #df2027;
  color: #fff;
  padding: 16px;
  flex: 1;
  min-height: 140px;
  display: flex;
  flex-direction: column;
}

.slide-ttl {
  font-size: min(1.1111vw, 14px);
  font-weight: 700;
  margin-bottom: 8px;
}

.slide-subText {
  font-size: min(0.902vw, 13px);
  font-weight: 500;
  line-height: 1.6;
}

/* Swiper navigation buttons */
.swiper-button-prev,
.swiper-button-next {
  width: 0;
  height: 0;
  position: absolute;
  top: 32%;
  transform: translateY(-50%);
  z-index: 10;
  background: none;
  border-style: solid;
  transition: all 0.3s ease;
}
@media screen and (max-width: 750px) {
  .swiper-button-prev,
  .swiper-button-next {
    top: 35%;
  }
}
@media screen and (max-width: 375px) {
  .swiper-button-prev,
  .swiper-button-next {
    top: 35%;
  }
}
.swiper-button-prev:after,
.swiper-button-next:after {
  content: '';
  display: none;
}

.swiper-button-prev {
  left: clamp(10px, 7vw, 80px);
  border-width: 20px 20px 20px 0;
  border-color: transparent #000 transparent transparent;
}

.swiper-button-next {
  right: clamp(10px, 5vw, 60px);
  border-width: 20px 0 20px 20px;
  border-color: transparent transparent transparent #000;
}

.swiper-button-prev:hover {
  border-color: transparent #333 transparent transparent;
  transform: translateY(-50%) scale(1.1);
}

.swiper-button-next:hover {
  border-color: transparent transparent transparent #333;
  transform: translateY(-50%) scale(1.1);
}

/* Swiper pagination */
.swiper-pagination {
  position: relative;
  margin-top: 45px;
}

.swiper-pagination-bullet {
  background-color: #000;
}

.swiper-pagination-bullet-active {
  background-color: #000;
  transform: scale(1.2);
}

@media screen and (max-width: 768px) {
  .swiper-pagination {
    margin-top: 15px;
    position: relative;
    bottom: auto;
  }
}

@media screen and (max-width: 768px) {
  .slide-area {
    padding: 20px 0;
    width: 90%;
    overflow: hidden;
  }

  .swiper-slide.slide-item {
    width: min(280px, 85vw) !important;
    max-width: 280px;
    height: auto;
    min-height: 260px;
    margin: 0 auto;
  }

  .slide-img {
    height: 200px;
  }

  .slide-textContent {
    padding: 16px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .slide-ttl {
    font-size: 16px;
    margin-bottom: 6px;
  }

  .slide-subText {
    font-size: 15px;
    line-height: 1.5;
    font-feature-settings: 'palt';
  }

  .swiper-button-prev,
  .swiper-button-next {
    border-width: 15px 22px 15px 0;
  }

  .swiper-button-prev {
    left: 5px;
    border-width: 20px 22px 20px 0;
  }

  .swiper-button-next {
    right: 5px;
    border-width: 20px 0 20px 22px;
  }

  .swiper-button-prev:after,
  .swiper-button-next:after {
    font-size: 18px;
  }
}

@media screen and (max-width: 375px) {
  .slide-textContent {
    padding: 16px 34px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .slide-area {
    padding: 20px 5px;
  }

  .swiper-slide.slide-item {
    width: min(90vw, 320px) !important;
    max-width: 320px;
  }

  .slide-img {
    height: 200px;
  }

  .swiper-button-prev,
  .swiper-button-next {
    border-width: 20px 18px 20px 0;
  }

  .swiper-button-prev {
    left: 11px;
    border-width: 20px 18px 20px 0;
  }

  .swiper-button-next {
    right: 11px;
    border-width: 20px 0 20px 18px;
  }
}

.tams-title {
  font-weight: 700;
  margin-top: 20px;
}
.note-title {
  margin-top: 20px;
}
.tams-title._note {
  margin-top: 0;
}
.tams-sub {
  margin-top: 20px;
}
.tams-link {
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}
.tams-link:hover {
  text-decoration: underline;
}