@charset "UTF-8";

/************************************************************************
* MIA BLOG（月別ページ blog_YYYYMM.html で共有）
* カンプ KF_official_BLOG_261002（2880px = 1440 の @2x）。
* 他の中ページと同じく「画面幅 2046px で等倍」の基準に揃えるため、
* 以下の px は カンプ@2x ÷ 2 × 1.42 の値（本文 16.2 → 23px で subpage.css と一致）。
************************************************************************/

.fantasia-blog-page {
  --fantasia-blog-ink: #33272c;
  --fantasia-blog-board-width: clamp(560px, 42.03vw, 860px);
  --fantasia-blog-board-pad: clamp(20px, 4.2vw, 86px);
  --fantasia-blog-fz-title: clamp(40px, 4.155vw, 85px);
  --fantasia-blog-fz-date: clamp(20px, 1.735vw, 35.5px);

  /* 背景：横は画面幅に追従、縦はタイリング（三浦さん指定） */
  background-color: #e9cfd3;
  background-image: url("../img/blog/bg.jpg");
  background-image: image-set(url("../img/blog/bg.webp") type("image/webp"), url("../img/blog/bg.jpg") type("image/jpeg"));
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
}

/* カンプの書体は YuMinPr6N-Demi（ccz.css と同じく 600 で表現）。
   fantasia.css の "Yu Mincho" は Windows 名で Mac では一致せずヒラギノになるため、
   本文エリアだけ Mac 名 "YuMincho" を先頭に足す（ヘッダー・フッターは他ページと揃える） */
.fantasia-blog {
  width: var(--fantasia-blog-board-width);
  margin-inline: auto;
  color: var(--fantasia-blog-ink);
  font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", Georgia, serif;
  font-weight: 600;
}

/*------------------------------------------------------------------
タイトル（MIA BLOG / 月名）
--------------------------------------------------------------------*/

/* 本文開始 y=248（.fantasia-sub-main）→ MIA BLOG の字面上端 267 */
.fantasia-blog-title {
  margin: 0;
  text-align: center;
}

.fantasia-blog-title__main {
  margin: 0;
  color: var(--fantasia-sub-purple);
  font-size: var(--fantasia-blog-fz-title);
  font-weight: inherit;
  letter-spacing: 0.1em;
  line-height: 1.2;
  /* 字送りの末尾の余りを相殺して中央に揃える */
  margin-right: -0.1em;
}

/* MIA BLOG 字面下端 332 → September 字面上端 368 */
.fantasia-blog-title__month {
  margin: clamp(2px, 0.318vw, 6.5px) 0 0;
  font-size: var(--fantasia-sub-fz-heading);
  letter-spacing: 0.03em;
  line-height: 1.2;
}

/*------------------------------------------------------------------
記事ボード（白 75% の角丸パネル）
--------------------------------------------------------------------*/

/* September 字面下端 419 → パネル上端 457 */
.fantasia-blog-board {
  margin-top: clamp(20px, 1.955vw, 40px);
  padding: clamp(28px, 3.617vw, 74px) var(--fantasia-blog-board-pad) clamp(40px, 5.86vw, 120px);
  border-radius: clamp(10px, 1.04vw, 21px);
  background: rgb(255 255 255 / 75%);
}

/* 罫線 → 次の日付の字面上端 74.5 */
.fantasia-blog-post + .fantasia-blog-post {
  margin-top: clamp(28px, 3.25vw, 66.5px);
}

/* 本文最終行の字面下端 → 罫線 81.6 */
.fantasia-blog-post {
  padding-bottom: clamp(30px, 3.6vw, 73.5px);
  border-bottom: 1px solid rgb(0 0 0 / 30%);
}

.fantasia-blog-post__date {
  margin: 0;
  color: var(--fantasia-sub-purple);
  font-size: var(--fantasia-blog-fz-date);
  font-weight: inherit;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: center;
}

/* 日付の字面下端 → 本文の字面上端 84.5 */
.fantasia-blog-post__body {
  margin-top: clamp(26px, 3.275vw, 67px);
  font-size: var(--fantasia-sub-fz-text);
  letter-spacing: 0.03em;
  line-height: 1.74;
}

.fantasia-blog-post__body p {
  margin: 0;
}

/*------------------------------------------------------------------
PREV / NEXT（月送り）
--------------------------------------------------------------------*/

/* パネル下端 → PREV 字面上端 30。左右はパネル端から 10 内側 */
.fantasia-blog-pager {
  display: flex;
  justify-content: space-between;
  margin-top: clamp(14px, 1.27vw, 26px);
  padding-inline: clamp(4px, 0.5vw, 10px);
}

/* .fantasia-page a（color: inherit）より優先させるため親を付ける */
.fantasia-blog .fantasia-blog-pager__link {
  color: var(--fantasia-sub-purple);
  font-size: var(--fantasia-blog-fz-date);
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.fantasia-blog-pager__link--next {
  margin-left: auto;
}

.fantasia-blog .fantasia-blog-pager__link:hover,
.fantasia-blog .fantasia-blog-pager__link:focus-visible {
  opacity: 0.7;
}

.fantasia-blog-pager__arrow {
  font-size: 0.8em;
  letter-spacing: -0.15em;
}

/*------------------------------------------------------------------
フッター（HTML 側で花画像を外し、飾り枠を地が透明な blog/footer.png に差し替え）
--------------------------------------------------------------------*/

/* カンプは PREV の字面下端の直下から飾り枠が始まる */
.fantasia-blog-main {
  padding-bottom: clamp(4px, 0.4vw, 8px);
}

/* 高さを飾り枠（2048×275）に合わせる */
.fantasia-blog-page .fantasia-footer {
  min-height: clamp(190px, 13.43vw, 275px);
}

/*------------------------------------------------------------------
レスポンシブ
--------------------------------------------------------------------*/

@media (max-width: 1050px) {
  .fantasia-blog-page {
    --fantasia-blog-board-width: min(calc(100% - 80px), 640px);
    --fantasia-blog-board-pad: 48px;
  }
}

/* 980px 以下はヘッダーの高さが別の式になり、共通の上余白（subpage.css）だと
   760px 付近でタイトルがヘッダーに接する（間隔 2px）。
   ヘッダー下端（top 6px + clamp(70px, 11vw, 86px)）から 24px 空ける */
@media (max-width: 980px) {
  .fantasia-blog-main {
    padding-top: calc(clamp(70px, 11vw, 86px) + 30px);
  }
}

@media (max-width: 760px) {
  .fantasia-blog-page {
    --fantasia-blog-board-width: calc(100% - 32px);
    --fantasia-blog-board-pad: 24px;
  }
}

@media (max-width: 460px) {
  .fantasia-blog-page {
    --fantasia-blog-board-width: calc(100% - 24px);
    --fantasia-blog-board-pad: 18px;
    --fantasia-blog-fz-title: 36px;
  }
}