@charset "UTF-8";

/************************************************************************
* MIAについて
* 数値は PSD 保存値 / カンプ実測（実寸 = カンプ@2x ÷ 2、画面幅 2046px で等倍）
************************************************************************/

.fantasia-mia-main {
  /* 本文の左端 x=64 に対しコンテナ左端が x=59。差の 5px をブロックの内側余白に */
  --fantasia-sub-inset: clamp(2px, 0.244vw, 5px);
  /* 見出しの下端 → 本文の上端 = 19.5（about 19.6 / music 19.2 / ramda 20.7 / draw 18.7） */
  --fantasia-sub-gap-heading: clamp(9px, 0.953vw, 19.5px);
  /* 作品カードの枠（隅切り）を border-image で描くための帯幅 */
  --fantasia-mia-frame: clamp(13px, 1.271vw, 26px);
}

/*------------------------------------------------------------------
ヒーロー
--------------------------------------------------------------------*/

/* mia_hero.png は見出し文字が焼き込み済み。x=0 で画面幅いっぱい
   （上端 y=248 は .fantasia-sub-main の padding-top が担う） */
.fantasia-mia-hero {
  margin: 0;
  line-height: 0;
}

.fantasia-mia-hero img {
  width: 100%;
  height: auto;
}

/* ヒーロー下端 763 → about の見出し上端 857 */
.fantasia-mia-main > .fantasia-sub-container {
  margin-top: clamp(36px, 4.594vw, 94px);
}

/*------------------------------------------------------------------
セクション見出し（花アイコン＋テキスト）
--------------------------------------------------------------------*/

/* アイコン x=75 / 見出しテキスト x=142（ブロックの内容左端 x=64 が基準） */
.fantasia-mia-heading {
  display: flex;
  align-items: flex-start;
  column-gap: clamp(12px, 1.271vw, 26px);
  margin-left: clamp(5px, 0.538vw, 11px);
}

.fantasia-mia-heading__icon {
  flex: 0 0 clamp(20px, 2.004vw, 41px);
  margin-top: clamp(9px, 0.929vw, 19px);
}

.fantasia-mia-heading__icon img {
  display: block;
  width: 100%;
  height: auto;
}

/*------------------------------------------------------------------
本文 ＋ 画像の 2 カラム（about / music / ramda）
--------------------------------------------------------------------*/

.fantasia-mia-block__cols {
  display: flex;
  align-items: flex-start;
}

/* 本文の幅 943 / ブロック内容幅 1918 */
.fantasia-mia-block__text {
  flex: 0 0 49.17%;
  margin-top: var(--fantasia-sub-gap-heading);
}

.fantasia-mia-block__aside img {
  display: block;
  width: 100%;
  height: auto;
}

/* ブロック間の余白・罫線位置はカンプ上で 1 ブロックずつ違うため個別に当てる */
.fantasia-mia-main .fantasia-mia-block--music {
  margin-top: clamp(32px, 4.081vw, 83.5px);
}

.fantasia-mia-main .fantasia-mia-block--ramda {
  margin-top: clamp(30px, 3.788vw, 77.5px);
}

.fantasia-mia-main .fantasia-mia-block--draw {
  margin-top: clamp(34px, 4.35vw, 89px);
}

.fantasia-mia-block--about {
  padding-bottom: clamp(22px, 2.678vw, 54.8px);
}

.fantasia-mia-block--music {
  padding-bottom: clamp(30px, 3.749vw, 76.7px);
}

.fantasia-mia-block--ramda {
  padding-bottom: clamp(31px, 3.91vw, 80px);
}

/* 最終ブロック → フッター飾りまで 157（.fantasia-sub-main の padding-bottom 80 との差分） */
.fantasia-mia-block--draw {
  padding-bottom: clamp(28px, 3.568vw, 73px);
}

/* about: mia_kagami.png x=1046 y=876 w=854（見出しの右横まで上げる） */
.fantasia-mia-block--about .fantasia-mia-block__aside {
  flex: 0 0 44.53%;
  margin-top: clamp(-51px, -2.493vw, -25px);
  margin-left: 2.03%;
}

/* music: 本文の折り返し位置をカンプに合わせるため本文カラムだけ 951 にする */
.fantasia-mia-block--music .fantasia-mia-block__text {
  flex-basis: 49.6%;
}

/* music: mia_music.png x=1034 y=1443 w=888 */
.fantasia-mia-block--music .fantasia-mia-block__aside {
  flex: 0 0 46.3%;
  margin-top: clamp(15px, 1.491vw, 30.5px);
  margin-left: 0.99%;
}

/* ramda: mia_ramda.png x=986 y=2263 w=1005（本文カラムに少し食い込む） */
.fantasia-mia-block--ramda .fantasia-mia-block__aside {
  flex: 0 0 52.4%;
  margin-top: clamp(15px, 1.539vw, 31.5px);
  margin-left: -1.09%;
}

/*------------------------------------------------------------------
about: 画像下の人物名
--------------------------------------------------------------------*/

.fantasia-mia-about__names {
  display: flex;
  justify-content: space-between;
  margin: clamp(-8px, -0.391vw, -4px) 0 0;
  padding: 0;
  list-style: none;
}

.fantasia-mia-about__name {
  width: 31.38%;
  font-size: clamp(14px, 1.222vw, 25px);
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
  text-indent: 0.1em; /* letter-spacing の末尾分を戻して中央に見せる */
}

.fantasia-mia-about__role {
  display: block;
  font-size: clamp(13px, 0.88vw, 18px);
  line-height: 1.4;
}

/*------------------------------------------------------------------
music: ジャンル名の 1 行（40px / #4f3c44）
--------------------------------------------------------------------*/

.fantasia-mia-genre {
  color: #4f3c44;
  font-size: clamp(22px, 1.955vw, 40px);
  line-height: 1.375;
}

/*------------------------------------------------------------------
draw: 作品カード
--------------------------------------------------------------------*/

/* 4 列 / カード幅 440 / 列間 51.5 / 行間 31.5 */
.fantasia-mia-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(16px, 2.517vw, 51.5px);
  row-gap: clamp(14px, 1.539vw, 31.5px);
  margin: clamp(12px, 1.29vw, 26.4px) 0 0;
  padding: 0;
  list-style: none;
}

/* 枠は PSD のカード枠（cat の box・角が小さくえぐれた形・金がかった線）をそのまま 9 分割で伸ばす。
   切り出し 37px（@2x）を --fantasia-mia-frame（2046px で 26px）で描くので角の形は PSD と同じ倍率。
   2026-10：以前は白の background が角の切り欠きの外まで塗っていたため、背景は border-image の fill に任せる */
.fantasia-mia-card {
  display: flex;
  align-items: center;
  padding:15px 0;
  min-height: clamp(150px, 13.612vw, 278.5px);
  padding-right: clamp(9px, 0.929vw, 19px);
  padding-left: clamp(13px, 1.32vw, 27px);
  border: 1px solid #ddcbb8;
  border-image: url("../img/mia/card_frame.png") 37 fill / var(--fantasia-mia-frame) stretch;
  border-image-source: image-set(url("../img/mia/card_frame.webp") type("image/webp"), url("../img/mia/card_frame.png") type("image/png"));
}

/* 絵の左の列。テキストの開始位置（カード左端から 198px）を全カードで揃える */
.fantasia-mia-card__figure {
  flex: 0 0 43.4%;
}

.fantasia-mia-card__figure img {
  display: block;
  height: auto;
}

/* sweets  カンプ: 幅152 / カード左端から30 */
.fantasia-mia-cards > li .fantasia-mia-card__figure img {
  width: 88.89%;
  margin-left: 1.75%;
}


.fantasia-mia-card__body {
  flex: 1 1 auto;
  align-self: flex-start;
  min-width: 0;
  letter-spacing: 0.03em;
  line-height: clamp(15px, 1.124vw, 23px);
}

/* 文字はカンプ実値（見出し 18px / 本文 16px・2046px 時）。
   共通の --fantasia-sub-fz-small / xsmall は太洋堂側で小さく調整済みのため変数は触らず、
   カードにだけ当てる（2026-10 完全版カンプ対応） */
.fantasia-mia-card__title {
  margin: 0;
  font-size: clamp(13px, 0.88vw, 18px);
  font-weight: 400;
  line-height: clamp(16px, 1.222vw, 25px);
}

.fantasia-mia-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(12px, 0.782vw, 16px);
}

.fantasia-mia-card__list li::before {
  content: '・';
}

/* 3 行目は横長 1 枚（絵は右側） */
.fantasia-mia-card--chronicle {
  grid-column: span 2;
  margin-top: clamp(2px, 0.244vw, 5px);
  padding-right: 0;
  padding-left: clamp(20px, 2.444vw, 50px);
}

/* 見出しは絵（透明部分）の上まで伸びるので、カラム幅はカードに対する % で持たせる */
.fantasia-mia-card--chronicle .fantasia-mia-card__body {
  flex: 0 0 70.35%;
  padding-top: clamp(20px, 2.092vw, 42.8px);
  line-height: 1.4;
}

.fantasia-mia-card--chronicle .fantasia-mia-card__title {
  font-size: clamp(20px, 1.955vw, 40px);
}

.fantasia-mia-card__text {
  margin: clamp(10px, 1.146vw, 23.45px) 0 0;
  font-size: clamp(14px, 1.222vw, 25px);
  line-height: 1.58;
}

.fantasia-mia-card--chronicle .fantasia-mia-card__figure {
  flex: 0 0 48.11%;
  margin-right: 3.4%;
  margin-left: -22.24%;
}

/* 2026-10：幅 100% と高さの上限（max-height）を両方指定していたため、カードが広い幅で
   高さだけ止まって絵が横に伸びていた（1050〜761px で縦横比 1.53 → 2.13）。
   高さの上限をやめ、幅を上限に変えて縦横比を保つ（276px × 1.531 = 423px） */
.fantasia-mia-card--chronicle .fantasia-mia-card__figure img {
  width: 100%;
  max-width: clamp(195px, 20.65vw, 423px);
  height: auto;
  margin-left: auto;
}

/* 絵は枠の右寄せ（カンプ：カードの右端から 3.4%）。picture が inline のままだと
   img の margin-left: auto が効かず左に寄るため block にする */
.fantasia-mia-card--chronicle .fantasia-mia-card__figure picture {
  display: block;
}

/* 小カード用の .fantasia-mia-cards > li .fantasia-mia-card__figure img（幅 88.89%・左余白 1.75%）が
   詳細度で勝って右寄せが効かなかったため、同じ詳細度＋クラスで上書きする */
.fantasia-mia-cards > li.fantasia-mia-card--chronicle .fantasia-mia-card__figure img {
  width: 100%;
  margin-left: auto;
}

/* ブログへのバナー（Chronicle の右・2 列分）。カード枠ごと 1 枚の画像（PSD の BLOG グループ）。
   画像は PSD の枠の上の透明部分（23px@2x）を切り落とした 1313×395。上端・高さとも Chronicle と揃う */
.fantasia-mia-card--blog {
  grid-column: span 2;
  align-self: start;
  margin-top: clamp(2px, 0.244vw, 5px);
}

.fantasia-mia-blog-link {
  display: block;
  transition: filter 180ms ease;
}

/* ccz の CTA・既存 .fantasia-card__link と同じホバー表現 */
.fantasia-mia-blog-link:hover,
.fantasia-mia-blog-link:focus-visible {
  filter: brightness(1.05) drop-shadow(0 3px 3px rgb(84 55 29 / 22%));
  outline: none;
}

.fantasia-mia-blog-link img {
  display: block;
  width: 100%;
  height: auto;
}

/*------------------------------------------------------------------
狭い画面
--------------------------------------------------------------------*/

/* 幅が狭まると文字サイズは下限で止まるのにカードだけ細くなり、
   見出し「＜スイーツシリーズ＞」などが途中で折り返すため段階を増やす */
@media (max-width: 1500px) {
  /* 3 列。Chronicle とブログのバナー（各 2 列分）を横に並べるため 6 分割にし、
     小カードは 2 マス（3 枚並び）、横長 2 枚は 3 マス（2 枚並び）にする */
  .fantasia-mia-cards {
    grid-template-columns: repeat(6, 1fr);
  }

  .fantasia-mia-card {
    grid-column: span 2;
  }

  .fantasia-mia-card--chronicle,
  .fantasia-mia-card--blog {
    grid-column: span 3;
  }
}

@media (max-width: 1050px) {
  .fantasia-mia-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .fantasia-mia-card {
    grid-column: auto;
  }

  .fantasia-mia-card--chronicle,
  .fantasia-mia-card--blog {
    grid-column: span 2;
  }

  /* 2 列の幅では横長 2 枚が全幅（最大 984px）に広がり、本の絵（元画像 848px・もともと柔らかい画質）と
     バナー（1313px）が引き伸ばされて粗く見える。最大 656px（バナーを Retina で等倍以下に保てる幅）で中央へ */
  .fantasia-mia-card--chronicle,
  .fantasia-mia-card--blog {
    width: 100%;
    max-width: 656px;
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .fantasia-mia-block__cols {
    display: block;
  }

  .fantasia-mia-block--about .fantasia-mia-block__aside,
  .fantasia-mia-block--music .fantasia-mia-block__aside,
  .fantasia-mia-block--ramda .fantasia-mia-block__aside {
    margin: 24px 0 0;
  }

  .fantasia-mia-cards {
    grid-template-columns: 1fr;
  }

  .fantasia-mia-card--chronicle,
  .fantasia-mia-card--blog {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  /* カンプと同じ「左に絵・右にテキスト」を狭い画面でも保つ。
     縦積みにすると絵が中央・文字が左揃えになって間延びするため */
  .fantasia-mia-card {
    align-items: flex-start;
    min-height: 0;
    padding: 16px clamp(12px, 3.4vw, 16px);
  }

  .fantasia-mia-card__figure {
    flex: 0 0 30%;
    margin-right: 5%;
  }

  /* カード個別の幅・位置指定（nth-child）を打ち消すため同じ詳細度で上書きする */
  .fantasia-mia-cards > li:nth-child(n) .fantasia-mia-card__figure img {
    width: 100%;
    margin-left: 0;
  }

  .fantasia-mia-card__body {
    padding-top: 0;
  }

  /* 横長カードは絵が右側。テキスト幅の固定（70.35%）を解除しないと
     絵と合わせて 100% を超えて横にはみ出す */
  .fantasia-mia-card--chronicle .fantasia-mia-card__body {
    flex: 1 1 auto;
  }

  .fantasia-mia-card--chronicle .fantasia-mia-card__figure {
    flex: 0 0 34%;
    margin-right: 0;
    margin-left: 5%;
  }

  .fantasia-mia-card--chronicle .fantasia-mia-card__body {
    padding-top: 0;
  }
}

/* ジャンル名は「×」が行頭に来ないよう、区切りの後ろで折り返す */
.fantasia-mia-genre__term {
  white-space: nowrap;
}

/* 全角の「ＭＩＡ」は 1 字ずつ改行できてしまうため、狭い画面で「Ｍ／ＩＡ」と割れないようにする */
.fantasia-mia-nowrap {
  white-space: nowrap;
}

/* ジャンル表記：PC はカンプどおり全角スペースの字下げで 1 行。
   折り返す幅では字下げを外し、ジャンル名を 1 行ずつ中央にそろえて「×」を間に置く
   （以前は字下げと「×」が行末に残り、ガタついて読みにくかった） */
@media (max-width: 1050px) {
  .fantasia-mia-genre {
    display: block;
    margin: 0.4em 0;
    text-align: center;
  }

  .fantasia-mia-genre__space {
    display: none;
  }

  .fantasia-mia-genre__term {
    display: block;
  }

  .fantasia-mia-genre__sep {
    display: block;
    font-size: 0.75em;
    line-height: 1.2;
  }

  .fantasia-mia-genre + br {
    display: none;
  }
}

/* 1 列になる幅（760px 以下）で、カードが横に伸びすぎて絵だけ大きく・右側が空くのを防ぐ。
   2 列時（761〜1050px）のカード幅とほぼ同じ 480px を上限にして中央へ。
   横長の Chronicle とブログのバナーも同じ上限にして、全カードの左右の端をそろえる */
@media (max-width: 760px) {
  .fantasia-mia-card,
  .fantasia-mia-card--chronicle,
  .fantasia-mia-card--blog {
    width: 100%;
    max-width: 480px;
    justify-self: center;
  }
}

/* 1 列（760px 以下）の Chronicle：PC 用の比率（文字 70% ＋絵を左へ重ねる）のままだと
   見出しが 2 行に詰まり、本文の改行（<br>）も中途半端な位置で折れる。
   文字と絵を左右に分けて上下中央にそろえ、見出しの行間をあけ、本文の改行は外す */
@media (max-width: 760px) {
  .fantasia-mia-card--chronicle {
    align-items: center;
    padding: 18px 16px 18px 22px;
  }

  .fantasia-mia-card--chronicle .fantasia-mia-card__body {
    flex: 1 1 auto;
    padding-top: 0;
  }

  .fantasia-mia-card--chronicle .fantasia-mia-card__title {
    font-size: clamp(18px, 4.6vw, 24px);
    line-height: 1.35;
  }

  .fantasia-mia-card--chronicle .fantasia-mia-card__text {
    margin-top: 8px;
    font-size: clamp(13px, 3.4vw, 16px);
    line-height: 1.7;
  }

  .fantasia-mia-card--chronicle .fantasia-mia-card__text br {
    display: none;
  }

  .fantasia-mia-card--chronicle .fantasia-mia-card__figure {
    flex: 0 0 36%;
    margin: 0 0 0 4%;
  }
}

/* Chronicle とブログのバナーが横に並ぶ幅（1051px 以上）では、2 枚の高さをそろえる。
   バナーは画像なので高さ＝幅 × 395/1313 で決まる。Chronicle は中身（絵の高さ＋上下の余白）で
   高さが決まっていたため約 28px 高かった。
   → Chronicle にもバナーと同じ縦横比を与え、絵の大きさはカードの幅から計算して収める
     （カードの高さ = 30.08cqw。絵の高さはその 94% まで、幅は × 1.531） */
@media (min-width: 1051px) {
  .fantasia-mia-card--chronicle {
    container-type: inline-size;
    aspect-ratio: 1313 / 395;
    min-height: 0;
    padding-block: 0;
  }

  .fantasia-mia-cards > li.fantasia-mia-card--chronicle .fantasia-mia-card__figure img {
    max-width: min(100%, calc(30.08cqw * 0.94 * 1.531));
  }
}