/* ==========================================================
   北海道水引 トップページ（D3：写真が主役のシンプル案）
   置き場所：子テーマ /assets/css/mzk-top.css（トップページだけで読み込む）
   PC 1440px 基準 → 959px 以下でタブレット → 599px 以下でスマホ
   ========================================================== */

/* ---- 1. 色・書体 ---- */
:root,
.mzk-top {
  --mzk-bg: #ffffff;
  --mzk-ink: #1f1b17;       /* 墨 */
  --mzk-sub: #6b6560;       /* 薄墨 */
  --mzk-line: #e6e2dc;      /* 罫線 */
  --mzk-gray: #f6f5f3;      /* ストーリーの帯 */
  --mzk-photo: #eef1f4;     /* 写真の読み込み前 */
  --mzk-accent: #c0262d;    /* 水引の朱赤 */
  --mzk-ff: "しまなみ", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --mzk-ff-en: "Cormorant Garamond", "Times New Roman", serif;
  --mzk-ff-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --mzk-ease: cubic-bezier(.2, .7, .2, 1);
  --mzk-ease-io: cubic-bezier(.7, 0, .2, 1);
  --mzk-sec: 140px;
}

/* SWELL の #content（幅制限・上下余白）を外して、画面幅いっぱいに使う */
.mzk-lism #content.l-content {
  display: block;
  max-width: none;
  padding: 0;
  margin: 0;
}
.mzk-lism #content > .mzk-top { width: 100%; }

.mzk-top {
  background: var(--mzk-bg);
  color: var(--mzk-ink);
  font-family: var(--mzk-ff-body);
  font-feature-settings: "palt" 0;
  overflow-x: clip;
}

/* ---- 2. SWELL の本文スタイルを打ち消す ---- */
.mzk-top :where(h1, h2, h3, p, ul, dl, dd) {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
}
.mzk-top.mzk-top :is(h1, h2, h3)::before,
.mzk-top.mzk-top :is(h1, h2, h3)::after { content: none; }
.mzk-top.mzk-top ul { list-style: none; }
.mzk-top :where(a) { color: inherit; text-decoration: none; }
.mzk-top a:focus-visible { outline: 2px solid var(--mzk-ink); outline-offset: 4px; }
.mzk-top img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- 書体の使い分け：本文はゴシック、目立つ文字は明朝 ---- */
.mzk-top .mzk-hero__title,
.mzk-top .mzk-head__title,
.mzk-top .mzk-catch,
.mzk-top .mzk-history__title,
.mzk-top .mzk-duo__title,
.mzk-top .mzk-name,
.mzk-top .mzk-column__title {
  font-family: var(--mzk-ff);
  font-weight: 400 !important; /* しまなみは1ウェイト */
}

/* 作家名の署名 */
.mzk-top .mzk-sign { font-family: var(--mzk-ff); font-size: 15px; letter-spacing: .16em; }

/* ---- 背景の梅結び（front-page.php のスクリプトが配置する） ---- */
.mzk-top { position: relative; isolation: isolate; }
.mzk-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mzk-knot { position: absolute; translate: 0 var(--py, 0); will-change: translate; }
.mzk-knot svg { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(var(--rot, 0deg)); animation: mzkSpin 280s linear infinite; }
.mzk-knot--float svg { animation-duration: 220s; }
.mzk-knot--float:nth-child(even) svg { animation-direction: reverse; }
.mzk-knot--float.is-far { filter: blur(.7px); opacity: .7; }
.mzk-dot { position: absolute; border-radius: 50%; background: #eae4d0; translate: 0 var(--py, 0); }
/* 花がひらくように：全体はぼかしが晴れながら少し大きくなり、10束は中心から順にひらく */
.mzk-knot--tie { opacity: 0; filter: blur(16px); transform: scale(.78); transition: opacity 1.4s ease var(--delay, 0s), filter 2.2s cubic-bezier(.16, 1, .3, 1) var(--delay, 0s), transform 2.4s cubic-bezier(.16, 1, .3, 1) var(--delay, 0s); }
.mzk-knot--tie.is-tied { opacity: 1; filter: blur(0); transform: none; }
.mzk-petal { transform-box: view-box; transform-origin: 1069px 399px; transform: scale(.55) rotate(-18deg); opacity: 0; transition: transform 2.2s cubic-bezier(.16, 1, .3, 1), opacity 1.6s ease; transition-delay: calc(var(--delay, 0s) + var(--d, 0) * 60ms); }
.is-tied .mzk-petal { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mzk-knot--tie, .mzk-petal { opacity: 1 !important; filter: none !important; transform: none !important; } }
@keyframes mzkSpin { from { transform: rotate(var(--rot, 0deg)); } to { transform: rotate(calc(var(--rot, 0deg) + 360deg)); } }

/* ---- 3. 枠・見出し ---- */
.mzk-wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
  box-sizing: border-box;
}
.mzk-sec { padding-top: var(--mzk-sec); }
.mzk-sec--s { padding-top: 120px; }
.mzk-sec--last { padding-bottom: 120px; }

.mzk-rule { height: 1px; background: var(--mzk-ink); }

.mzk-head__group { display: flex; flex-direction: column; gap: 10px; }
.mzk-head__num {
  font-family: var(--mzk-ff-en);
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--mzk-sub);
}
.mzk-top .mzk-head__title {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.5;
}
.mzk-head--row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  padding: 32px 0 40px;
}
.mzk-head__note { font-size: 14px; color: var(--mzk-sub); letter-spacing: .06em; }

.mzk-top .mzk-catch { font-size: 24px; line-height: 1.9; letter-spacing: .1em; font-weight: 500; }
.mzk-top .mzk-text { font-size: 15px; line-height: 2.2; }
.mzk-center { display: flex; justify-content: center; padding-top: 56px; }

/* ---- 4. ボタン・リンク ---- */
.mzk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  box-sizing: border-box;
  font-size: 14px;
  letter-spacing: .14em;
  background-image: linear-gradient(var(--mzk-ink), var(--mzk-ink));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  border-radius: 999px;
  transition: background-size .5s var(--mzk-ease-io), color .3s;
}
.mzk-top .mzk-btn--accent { background-color: var(--mzk-accent); color: #fff; }
.mzk-top .mzk-btn--line { border: 1px solid var(--mzk-ink); }
.mzk-btn--wide { min-height: 56px; padding: 0 48px; letter-spacing: .16em; }
@media (hover: hover) { .mzk-top .mzk-btn:hover { background-size: 100% 100%; color: #fff; } }

.mzk-link {
  align-self: flex-start;
  font-size: 14px;
  letter-spacing: .1em;
  padding-bottom: 5px;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 100% 1px no-repeat;
  transition: background-size .5s var(--mzk-ease-io);
}
@media (hover: hover) { .mzk-link:hover { background-size: 0 1px; background-position: 0 100%; } }
.mzk-link--end { align-self: flex-end; }

/* ---- 5. メインビジュアル ---- */
.mzk-hero {
  position: relative;
  max-width: 1440px;
  height: 840px;
  margin-inline: auto;
  margin-top: 8px;
  padding-inline: 40px;
  box-sizing: border-box;
}
.mzk-hero__photo {
  position: absolute;
  top: 0; bottom: 0; right: 40px;
  left: calc(40px + 440px);
  overflow: hidden;
  background: var(--mzk-photo);
}
.mzk-hero__photo img { object-position: 50% 55%; }
.mzk-top .mzk-hero__title {
  position: absolute;
  left: 96px;
  top: 56px;
  display: flex;
  flex-direction: row-reverse;
  gap: 26px;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: .26em;
  line-height: 1.4;
}
.mzk-hero__title span { display: block; writing-mode: vertical-rl; }
.mzk-hero__title .mzk-l2 { padding-top: 64px; }
.mzk-hero__body {
  position: absolute;
  left: 96px;
  bottom: 32px;
  width: 330px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mzk-top .mzk-hero__lead { font-size: 15px; line-height: 2.2; letter-spacing: .05em; }
.mzk-hero__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.mzk-hero__foot {
  position: absolute;
  right: 72px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.mzk-top .mzk-hero__cap {
  display: grid;
  justify-items: end;
  font-size: 13px;
  color: #4a4540;
  letter-spacing: .08em;
}
.mzk-hero__capitem { grid-area: 1 / 1; }

/* スライド（6秒ごとに写真とキャプションが入れ替わる。秒数は calc の 6s を変える） */
.mzk-slides, .mzk-slide { position: absolute; inset: 0; }
.mzk-slide img { object-position: var(--pos, 50% 50%); }
.mzk-slides { transform: scale(1.12); animation: mzkSettle 3s var(--mzk-ease) .1s forwards; }
.has-slides .mzk-slide,
.has-slides .mzk-hero__capitem { opacity: 0; animation: mzkSlide calc(var(--mzk-n) * 6s) linear infinite; animation-delay: calc(var(--i) * 6s - 1.2s); }
.has-slides .mzk-hero__capitem { animation-name: mzkCap; }
.has-slides.is-paused .mzk-slide,
.has-slides.is-paused .mzk-hero__capitem { animation-play-state: paused; }
.mzk-hero__pause {
  position: relative;
  width: 32px; height: 32px;
  padding: 0;
  border: 1px solid #cfc9c1;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.mzk-hero__pause span, .mzk-hero__pause span::before {
  position: absolute; top: 50%; left: 50%;
}
.mzk-hero__pause span { width: 8px; height: 10px; transform: translate(-50%, -50%); border-left: 2px solid var(--mzk-ink); border-right: 2px solid var(--mzk-ink); box-sizing: border-box; }
.is-paused .mzk-hero__pause span { width: 0; height: 0; border: none; border-left: 9px solid var(--mzk-ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: translate(-35%, -50%); }
.mzk-hero__pause:focus-visible { outline: 2px solid var(--mzk-ink); outline-offset: 3px; }

/* ---- 6. お知らせ ---- */
.mzk-news {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  padding-top: 32px;
}
.mzk-news__body { display: flex; flex-direction: column; gap: 24px; }
.mzk-news__list li { border-bottom: 1px solid var(--mzk-line); }
.mzk-row {
  display: grid;
  grid-template-columns: 190px 80px minmax(0, 1fr) 24px;
  gap: 24px;
  align-items: baseline;
  padding: 22px 12px;
  transition: background-color .3s;
}
.mzk-row:hover { background-color: #f8f7f5; }
.mzk-row__date { font-size: 14px; color: var(--mzk-sub); letter-spacing: .06em; }
.mzk-row__cat { font-size: 12px; letter-spacing: .14em; color: var(--mzk-accent); }
.mzk-row__title { font-size: 16px; letter-spacing: .04em; }
.mzk-row__arrow { color: var(--mzk-sub); transition: transform .4s var(--mzk-ease); }
.mzk-row:hover .mzk-row__arrow { transform: translateX(4px); }
.mzk-row.has-thumb { grid-template-columns: 80px 170px 72px minmax(0, 1fr) 24px; align-items: center; padding: 16px 12px; }
.mzk-row__thumb { display: block; width: 80px; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: #f6f5f3; }
.mzk-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--mzk-ease); }
.mzk-row:hover .mzk-row__thumb img { transform: scale(1.05); }

/* ---- 7. 作品カード ---- */
.mzk-works {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 44px 24px;
}
.mzk-card { display: flex; flex-direction: column; gap: 12px; }
.mzk-card__img { aspect-ratio: 1 / 1; overflow: hidden; background: var(--mzk-photo); }
.mzk-card__img img { transition: transform .9s var(--mzk-ease); }
.mzk-card:hover .mzk-card__img img { transform: scale(1.05); }
.mzk-card__meta { display: flex; flex-direction: column; gap: 12px; }
.mzk-name {
  align-self: flex-start;
  font-size: 16px;
  letter-spacing: .06em;
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--mzk-ease);
}
.mzk-name small { font-size: 13px; color: var(--mzk-sub); }
.mzk-card:hover .mzk-name { background-size: 100% 1px; }
.mzk-card__price { font-size: 13px; color: var(--mzk-sub); }

.mzk-card--main { grid-column: span 2; grid-row: span 2; gap: 14px; }
.mzk-card--main .mzk-card__img { aspect-ratio: auto; flex-grow: 1; min-height: 540px; }
.mzk-card--main .mzk-card__meta { flex-direction: row; justify-content: space-between; align-items: baseline; }
.mzk-card--main .mzk-name { font-size: 19px; letter-spacing: .08em; }
.mzk-card--main .mzk-card__price { font-size: 14px; }

/* ---- 8. ストーリー ---- */
.mzk-story { margin-top: var(--mzk-sec); background: rgba(246, 245, 243, .8); } /* 梅結びがうっすら透けるように */
.mzk-story__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 72px;
  align-items: start;
  padding-bottom: var(--mzk-sec);
}
.mzk-story__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--mzk-photo); margin-top: -60px; }
.mzk-story__body { display: flex; flex-direction: column; gap: 32px; padding-top: 120px; }
.mzk-history { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; }
.mzk-top .mzk-history__title { font-size: 17px; font-weight: 500; letter-spacing: .16em; }
.mzk-history__list { border-top: 1px solid #ddd8d0; }
.mzk-history__list li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #ddd8d0;
  font-size: 15px;
  line-height: 1.8;
}
.mzk-history__list li span:first-child { font-size: 13px; color: var(--mzk-sub); }
.mzk-top .mzk-history__shops { font-size: 13px; line-height: 2; color: var(--mzk-sub); }

/* ---- 9. ワークショップ ---- */
.mzk-ws {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 64px;
  padding-top: 32px;
  align-items: start;
}
.mzk-ws__body { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.mzk-ws .mzk-catch { font-size: 22px; }
.mzk-top .mzk-ws__info {
  align-self: stretch;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px 16px;
  padding: 24px 0;
  border-top: 1px solid var(--mzk-line);
  border-bottom: 1px solid var(--mzk-line);
  font-size: 15px;
}
.mzk-ws__info dt { color: var(--mzk-sub); font-size: 13px; letter-spacing: .1em; }
.mzk-ws__photo {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--mzk-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--mzk-sub);
}

/* ---- 10. 贈り物・法人 ---- */
.mzk-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mzk-gift, .mzk-biz { position: relative; min-height: 420px; overflow: hidden; box-sizing: border-box; }
.mzk-gift { display: block; background: var(--mzk-photo); }
.mzk-gift__img { position: absolute; inset: 0; aspect-ratio: auto; }
.mzk-gift__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 32px 36px;
  background: linear-gradient(transparent, rgba(255, 255, 255, .92) 35%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mzk-top .mzk-biz {
  justify-content: flex-end;
  gap: 12px;
  padding: 32px 36px;
  background: var(--mzk-ink);
  color: #fff;
}
.mzk-biz .mzk-head__num { color: #c9c3ba; }
.mzk-top .mzk-duo__title { font-size: 24px; font-weight: 500; letter-spacing: .1em; }
.mzk-duo__text { font-size: 14px; line-height: 1.9; }

/* ワークショップの写真：3枚を6秒ごとにふわっと切り替え */
.mzk-ws__photo { position: relative; }
.mzk-ws__slide { position: absolute; inset: 0; }
.mzk-ws__photo.has-slides .mzk-ws__slide { opacity: 0; animation: mzkWsFade 18s linear infinite; animation-delay: calc(var(--i) * 6s - 1.2s); }
@keyframes mzkWsFade { 0% { opacity: 0; transform: scale(1.04); } 7% { opacity: 1; } 33.3% { opacity: 1; } 40% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }
/* 法人カード：写真の上に暗いグラデーションを重ねて白文字を読みやすく */
.mzk-biz__img { position: absolute; inset: 0; aspect-ratio: auto; z-index: 0; }
.mzk-biz__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 27, 23, .15), rgba(31, 27, 23, .82) 70%); }
.mzk-biz > :not(.mzk-biz__img) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .mzk-ws__photo.has-slides .mzk-ws__slide:first-child { opacity: 1 !important; } }

/* ---- 11. 読みもの ---- */
.mzk-column { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.mzk-column .mzk-card { gap: 14px; }
.mzk-card__img--wide { aspect-ratio: 3 / 2; }
.mzk-column__cat { font-size: 12px; letter-spacing: .12em; color: var(--mzk-sub); }
.mzk-top .mzk-column__title { font-size: 17px; line-height: 1.75; letter-spacing: .02em; }

/* ---- 12. Instagram ---- */
.mzk-insta {
  padding-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
}
.mzk-insta p { font-size: 16px; line-height: 2; }

/* ==========================================================
   動き
   ========================================================== */
/* 開いたとき：写真が上から開き、寄りがほどける。コピーは一行ずつ */
.mzk-photo { clip-path: inset(0 0 100% 0); animation: mzkWipe 1.6s var(--mzk-ease-io) .1s forwards; }
.mzk-l1, .mzk-l2 { opacity: 0; transform: translateY(-14px); animation: mzkFade 1.1s var(--mzk-ease) forwards; }
.mzk-l1 { animation-delay: 1.1s; }
.mzk-l2 { animation-delay: 1.45s; }
.mzk-in { opacity: 0; transform: translateY(16px); animation: mzkFade 1s var(--mzk-ease) 1.9s forwards; }
@keyframes mzkWipe { to { clip-path: inset(0 0 0 0); } }
@keyframes mzkSettle { to { transform: scale(1); } }
@keyframes mzkFade { to { opacity: 1; transform: none; } }

/* スクロール：区切り線が伸び、写真が開き、文字が浮かぶ（対応ブラウザのみ。非対応は最初から表示） */
@supports (animation-timeline: view()) {
  .mzk-rule { transform-origin: left; animation: mzkRule linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
  .mzk-rv { clip-path: inset(0 0 100% 0); animation: mzkWipe linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  .mzk-rv img { transform: scale(1.12); animation: mzkSettle linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  .mzk-up { opacity: 0; transform: translateY(24px); animation: mzkFade linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  @keyframes mzkRule { from { transform: scaleX(0); } }
}

@media (prefers-reduced-motion: reduce) {
  .mzk-top *, .mzk-top *::before, .mzk-top *::after { animation: none !important; transition: none !important; }
  .mzk-photo, .mzk-rv { clip-path: none !important; }
  .mzk-photo img, .mzk-rv img, .mzk-rule, .mzk-slides, .mzk-slide { transform: none !important; }
  .has-slides .mzk-slide:not(:first-child), .has-slides .mzk-hero__capitem:not(:first-child) { opacity: 0 !important; }
  .has-slides .mzk-slide:first-child, .has-slides .mzk-hero__capitem:first-child { opacity: 1 !important; }
  .mzk-hero__pause { display: none; }
  .mzk-l1, .mzk-l2, .mzk-in, .mzk-up { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================
   タブレット（959px 以下）
   ========================================================== */
@media (max-width: 959px) {
  .mzk-top { --mzk-sec: 100px; }
  .mzk-wrap { padding-inline: 32px; }

  .mzk-hero { height: auto; padding-inline: 0; margin-top: 0; display: flex; flex-direction: column; }
  .mzk-hero__photo { position: relative; inset: auto; height: 62vw; max-height: 560px; }
  .mzk-hero__foot { position: static; order: 2; align-self: flex-end; padding: 12px 32px 0; }
  .mzk-top .mzk-hero__title {
    position: static;
    order: 3;
    flex-direction: column;
    gap: 4px;
    padding: 40px 32px 0;
    font-size: 34px;
    letter-spacing: .14em;
  }
  .mzk-hero__title span { writing-mode: horizontal-tb; }
  .mzk-hero__title .mzk-l2 { padding-top: 0; }
  .mzk-hero__title .mzk-l1, .mzk-hero__title .mzk-l2 { transform: translateY(12px); }
  .mzk-hero__body { position: static; order: 4; width: auto; max-width: 560px; padding: 24px 32px 0; }

  .mzk-news { grid-template-columns: 1fr; gap: 24px; }
  .mzk-works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
  .mzk-card--main .mzk-card__img { aspect-ratio: 1 / 1; min-height: 0; }
  .mzk-story__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .mzk-story__body { padding-top: 64px; }
  .mzk-ws { grid-template-columns: 1fr; gap: 40px; }
  .mzk-duo { grid-template-columns: 1fr; }
  .mzk-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================
   スマホ（599px 以下）
   ========================================================== */
@media (max-width: 599px) {
  .mzk-top { --mzk-sec: 80px; }
  .mzk-wrap { padding-inline: 20px; }

  .mzk-hero__photo { height: 118vw; max-height: 520px; }
  .mzk-hero__foot { padding: 12px 20px 0; }
  .mzk-top .mzk-hero__cap { font-size: 12px; }
  .mzk-top .mzk-hero__title { padding: 36px 20px 0; font-size: 27px; line-height: 1.7; letter-spacing: .1em; }
  .mzk-hero__body { padding: 20px 20px 0; }
  .mzk-hero__btns { flex-direction: column; }
  .mzk-hero__btns .mzk-btn { width: 100%; }

  .mzk-top .mzk-head__title { font-size: 24px; }
  .mzk-head--row { padding: 24px 0 28px; }
  .mzk-news { padding-top: 24px; }
  .mzk-row { grid-template-columns: auto 1fr; gap: 6px 16px; padding: 18px 0; }
  .mzk-row__title { grid-column: 1 / -1; font-size: 15px; line-height: 1.7; }
  .mzk-row__arrow { display: none; }
  .mzk-row.has-thumb { grid-template-columns: 72px auto minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 16px 0; }
  .mzk-row.has-thumb .mzk-row__thumb { width: 72px; grid-row: 1 / span 2; }
  .mzk-row.has-thumb .mzk-row__title { grid-column: 2 / -1; }

  .mzk-works { gap: 28px 12px; }
  .mzk-card--main { grid-row: auto; }
  .mzk-card--main .mzk-card__meta { flex-direction: column; gap: 6px; }
  .mzk-name { font-size: 15px; }
  .mzk-card__price { font-size: 12px; }

  .mzk-story__inner { grid-template-columns: 1fr; gap: 0; }
  .mzk-story__photo { margin-top: -40px; aspect-ratio: 1 / 1; }
  .mzk-story__body { padding-top: 48px; gap: 26px; }
  .mzk-top .mzk-catch { font-size: 21px; }
  .mzk-ws .mzk-catch { font-size: 20px; }
  .mzk-btn { width: 100%; }
  .mzk-hero__btns .mzk-btn, .mzk-btn--wide { width: 100%; }

  .mzk-gift, .mzk-biz { min-height: 360px; }
  .mzk-gift__body, .mzk-top .mzk-biz { padding: 24px; }
  .mzk-top .mzk-duo__title { font-size: 21px; }
  .mzk-column { grid-template-columns: 1fr; gap: 36px; }
  .mzk-insta { padding-top: 32px; }
}