@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;
}

/* 枠は画像を使わず、隅切りの輪郭を SVG の border-image で描く
   （PSD 実測: 上辺は角から 10.5 内側で始まり、9 下がった所から 45°で外側 13 へ抜ける） */
.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-image 非対応時に白地＋1px枠として見えるようにしておく */
  background: #fff;
  border: 1px solid #c2b8ac;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M11 .5H49v9l10.5 4v33L49 50.5v9H11v-9L.5 46.5v-33L11 9.5Z' fill='%23ffffff' stroke='%23c2b8ac'/%3E%3C/svg%3E") 26 fill / var(--fantasia-mia-frame) stretch;
}

/* 絵の左の列。テキストの開始位置（カード左端から 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);
}

.fantasia-mia-card__title {
  margin: 0;
  font-size: var(--fantasia-sub-fz-small);
  font-weight: 400;
}

.fantasia-mia-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fantasia-sub-fz-xsmall);
}

.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%;
}

.fantasia-mia-card--chronicle .fantasia-mia-card__figure img {
  width: 100%;
  max-height: clamp(127px, 13.49vw, 276px);
}

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

/* 幅が狭まると文字サイズは下限で止まるのにカードだけ細くなり、
   見出し「＜スイーツシリーズ＞」などが途中で折り返すため段階を増やす */
@media (max-width: 1500px) {
  .fantasia-mia-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

@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 {
    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;
}