@charset "UTF-8";

/* ===== Reset / base ===== */
* {
  margin: 0;
  padding: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-sizing: border-box;
}
html { -webkit-text-size-adjust: none; background: transparent; }
body {
  position: relative;
  width: 100%;
  font-size: 1rem;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: .1rem;
  background: #fff;
  color: #000;
}
h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; padding: 0; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; padding: 0; word-break: break-all; line-height: 1; }
img {
  -webkit-touch-callout: none;
  -ms-interpolation-mode: bicubic;
  vertical-align: bottom;
  width: 100%;
  height: auto;
  pointer-events: none;
}
a {
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: 0.2s ease-in-out;
  color: #fff;
}
a.black-link { color: #000; }

/* ===== Common ===== */
html, body { height: 100%; }
body {
  min-height: 100svh;        /* モバイルの動的UIにも強いsvh */
  display: flex;
  flex-direction: column;
}
.contents { padding: 3rem 1rem; max-width: 1000px; margin: 0 auto; }
.subtitle {
  position: relative;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .1rem;
}
.subtitle span { color: #fac300; font-size: 1rem; line-height: 2; }
.sp { display: none; }
.mt_1{ margin-top: 1rem; } .mt_2{ margin-top: 2rem; } .mt_3{ margin-top: 3rem; }
.bold{ font-weight: 700; } .font_l{ font-size: 2rem; } .font_m{ font-size: 1.5rem; }

/* ===== MV ===== */
.mv {
  background: #222;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mv_title { text-align: center; margin: 1em auto; }
.mv_subTitle {
  font-family: "Impact", sans-serif;
  color: #fac300;
  font-size: 2.6vw; /* ほんの少しだけ縮小 */
  margin: 2em auto 0;
}
.mv_txt {
  color: #fff;
  font-size: 1.6vw; /* ほんの少しだけ縮小 */
  line-height: 1.5;
  margin: 1em;
}
.as_logo { width: 18vw; margin-top: 1em; }

/* ===== footer ===== */
.footer { padding: 1em; text-align: center; }
.footer p { font-size: .9rem; font-weight: 300; letter-spacing: 0; }
.g_logo{ max-width: 8vw; }
.footer a{display: block; width: 12vw; margin: 1em auto; }

/* ===== fadein ===== */
.fadeIn { opacity: 0; transition: 1.8s; }
.fadeIn.is-show { opacity: 1; }

/* ===== cards/select ===== */
.mv_select {
  display: flex;
  gap: 0.5em;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1em 0.5em 0;
}

/* カード */
.mv_card {
  flex: 1;
  position: relative;
  border-radius: 8px;
  height: auto;
  min-height: 28svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(8px, 1.2vh, 16px);
  padding: clamp(8px, 2vh, 24px);
  padding-bottom: clamp(44px, 6vh, 96px);
  overflow: hidden;
  transition: background-color 0.6s ease, color 0.6s ease, opacity 0.3s ease;
  container-type: size;
}
.mv_card_header { color: #eee; text-align: center; }
.sell { background: linear-gradient(175deg, #a21c1c, #6f1313); }
.buy  { background: linear-gradient(175deg, #086fab, #053451); }
.sell:hover { background: linear-gradient(175deg, #6f1313, #2b0707); }
.buy:hover  { background: linear-gradient(175deg, #054a72, #021927); }

/* 見出し・リード */
.mv_card_header {
  color:#eee;
  line-height:1.2;
  margin:0;
  /* PCでは少し大きめに */
  font-size: clamp(20px, 3vw + 0.35vh, 26px);
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  letter-spacing: 0;        /* bodyの.1remを打ち消し */
  display:block; max-width:100%;
  overflow:hidden; text-overflow: ellipsis;
}
.mv_card_lead {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #eee;
  font-size: clamp(11px, 1.1vw + 0.35vh, 18px); /* ほんの少し下げる */
  line-height: 1.5;
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0 0.2em;
}

/* 下辺に固定される本文 */
.mv_card_txt {
  position: absolute;
  bottom: 1em;
  left: 0; right: 0;
  text-align: center;
  margin: 0;
  padding: 0 1em;
  color: #eee;
  font-size: clamp(16px, 1.2vw + 0.35vh, 22px); 
  line-height: 1.5;
  line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 画像 */
.mv_card_images {
  display: grid;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 1000px;
  margin: clamp(6px, 1vh, 16px) 4em;
}
.mv_card_images img {
  width: 100%;
  object-fit: contain;
  max-height: 14svh;
}

a.mv_card_btn {
  text-decoration: none !important;
  color: inherit !important;
  display: block;
  flex: 1 1 45%;
  max-width: 480px;
}
.mv_card:hover { opacity: 1; background-color: #000; color: #ddd; }

/* ====== Media Queries ====== */
@media screen and (max-width:1160px){
  .contents{ max-width: 900px; padding: 3rem 1.5rem; }
}
@media (min-width:768px){
  .mv_select{
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    padding: 0 24px;
  }
  .mv_card{ padding-bottom: clamp(48px, 6vh, 96px); }
  .mv_card_images{ grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 1em !important; }
}

/* スマホ（768以下） */
@media screen and (max-width:768px){
  .contents{ padding: 2rem 1.5rem; }
  .sp{ display: block; } .pc{ display: none; }
  .font_l{ font-size: 5.6vw; } /* 少し縮小 */
  .font_m{ font-size: 5.2vw; } /* 少し縮小 */

  /* headerが折り返されないよう更に下げる＆抑止を強化 */
  .mv_card_header {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    letter-spacing: 0;
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mv_card{
    min-height: 32svh;
    padding: clamp(10px, 2.4vh, 24px);
    padding-bottom: clamp(48px, 7vh, 96px);
  }
  .mv_card_lead{font-size: clamp(12px, 7cqw, 14px); }
  .mv_card_txt{font-size: clamp(12px, 7cqw, 20px) }
  .mv_subTitle{ font-size: 6.6vw; } 
  .mv_txt{ font-size: 2.8vw; }

  /* as_logo, g_logo, mintlogo を確実に適用 */
  .as_logo{
    width: 50vw !important;
    max-width: none;
    height: auto;
    display: block;
    margin: 1em auto 0;
  }
  .g_logo{ max-width: 30vw; }
  .footer-mintlogo { width: 50vw; margin: 1em auto; }
}

/* スマホ画像 3×2 */
@media (max-width:767px){
  .mv_card_images{
    grid-template-columns: repeat(3,1fr);
    margin: clamp(6px,1vh,12px) 1em 0;
    margin-top: 3em;
  }
  .mv_card_images img:nth-child(n+4){ display:none; }
}


/* コンテナ幅に応じた更なる縮小（対応ブラウザ向け） */
@supports (font-size: 1cqw) {
  @media screen and (max-width: 768px) {
    .mv_card { container-type: inline-size; }
    .mv_card_header {
    font-size: clamp(18px, 5.8vw, 24px); 
    line-height: 1.1;
    }
    /* 万一 .sp を差し込んでも改行させない */
    .mv_card_header .sp{ display:inline !important; }
  }
  @supports (container-type: inline-size) {
    @container (width < 340px) {
    .mv_card{ container-type:inline-size; }
    .mv_card_header{ font-size: clamp(16px, 7cqw, 24px); }
      }
    }
  }

/* 画面が低い時（フォールバック） */
@media (max-height:700px){
  .mv_card_header { font-size:clamp(18px,1.2vw,20px); }
  .mv_card_lead{ font-size:clamp(10px,1vw,14px); }
  .mv_card_txt{ -webkit-line-clamp:2; line-clamp:2; }
}
@media (max-height:600px){ .mv_card_images{ display:none; } }

/* 追加：メイン部分を伸ばしてフッターを最下部へ */
.mv, .contents {
  flex: 1 0 auto;            /* どちらか“フッター直前”の要素1つで十分 */
  min-height: 0;             /* 内部のはみ出し計算を安定させる */
}

/* 追加：フッターはサイズ固定で下に居座る */
.footer {
  flex: 0 0 auto;
  margin-top: 0;             /* 万一の余白をリセット */
}

@media (max-width: 768px) {
  .mv_card_header .sp {
    display: inline !important;
  }
}