@charset "UTF-8";
/*
Theme Name: SWELL CHILD 北海道水引
Template: swell
Version: 1.1.0
Description: 北海道水引 公式サイト用の SWELL 子テーマ（INDIGO SWELL Starter 準拠 / Lism CSS / D3デザイン）
Author: INDIGO
*/

/* ==========================================================
   サイト全体（ヘッダー・フッター・下層ページ）
   トップページだけのCSSは assets/css/mzk-top.css
   ========================================================== */

:root {
  --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);
}

body {
  background: var(--mzk-bg);
  color: var(--mzk-ink);
  font-family: var(--mzk-ff-body);
  font-weight: 400;
}

/* ---------- ヘッダー ---------- */
.l-header__bar { display: none; }
#header.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .62) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  color: var(--mzk-ink);
  box-shadow: none;
  border-bottom: 1px solid rgba(31, 27, 23, .06);
}
.admin-bar #header.l-header { top: 32px; }
@media (max-width: 782px) { .admin-bar #header.l-header { top: 46px; } }
/* ぼかしに対応していないブラウザは白をしっかり敷く */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #header.l-header { background: rgba(255, 255, 255, .96) !important; }
}
#header .l-header__inner {
  max-width: 1440px;
  padding: 0 40px;
  min-height: 92px;
  box-sizing: border-box;
}
#header .c-headLogo { font-family: var(--mzk-ff); }
#header .c-headLogo__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .26em;
  color: var(--mzk-ink);
}
#header .c-headLogo__link::after {
  content: none;
  font-family: var(--mzk-ff-en);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--mzk-sub);
}
/* ロゴ：手書きの「北海道水引」（SVGをCSSに埋め込み。差し替えるときは url() の中を書き換える） */
.c-headLogo__link { display: flex; align-items: center; font-size: 0 !important; letter-spacing: 0 !important; line-height: 1; }
.c-headLogo__link::before {
  content: "";
  display: block;
  width: 168px;
  height: 27px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='481 352 404 64'%3E%3Cpath fill='%231f1b17' d='M795.8,375.5c-4.3,1-8.6,2-12.8,3.2-.6.2-1.1,1.5-1.1,2.3,0,9.7,0,19.4,0,29.1,0,3.7-1.2,4.5-5.2,3.6-1.4-.3-2.9-.6-4.2-1.2-.7-.3-1.5-1.2-1.6-1.9,0-.5,1-1.6,1.6-1.6,3.9-.2,3.6-2.6,3.5-5,0-7.3,0-14.6,0-22.5-3.3,1.8-6.2,3.4-9.1,5.1,2.2,4.4,2.9,8.7,1.5,13.1-1.4,4.6-5.5,7.5-10,7.4-6.4-.1-10.5-5.5-7.9-11.1,1.4-3,4-5.6,6.2-8.3.6-.8,1.5-1.3,2.8-2.3-2.8-2.3-5.2-4.4-7.8-6.3-2-1.5-2.1-2.2-.4-4.5,1.4-1.9,2.7-1,3.9,0,3,2.3,5.9,4.8,8.8,7.2,3.5-1.8,7.2-3.7,10.9-5.8.6-.3.9-1.3.9-2,0-5.3.1-10.5,0-15.8,0-2,.7-2.8,3-2.8,2.3,0,3.1.7,3,2.8-.1,4.2,0,8.4,0,12.6,0,.7,0,1.5,0,2.4,3.1-.7,5.9-1.5,8.7-1.9,4.4-.5,8.9-.8,13.4-.9,1.1,0,2.6.8,3.3,1.7,1,1.4.9,3.1-.7,4.3-1.3,1-2.7,1.8-4,2.6-4.6,3-7.3,7-6.5,12.3.8,5.5,4.8,8.7,10.2,10.6,1.8.6,3.2,1.1,2.4,3.3-1,2.8-1.7,3.2-4.8,2.1-13.3-4.8-18.2-17.3-10.6-27.7.8-1.1,1.9-2.1,2.8-3.1,0-.2-.1-.5-.2-.7ZM761.5,390.1c-1.9,2.5-3.7,4.5-5.1,6.6-1.3,2-.6,3.9,1,4.5,1.9.7,3.9-.4,4.8-2.6,1.1-2.7,1-5.3-.7-8.6Z M528.1,380.6c4.2-.8,6.9-2.9,9-5.7,1.2-1.6,2.2-3.4,3-5.1,1-2.1,2.7-1.7,4.4-1,1.8.7,1.5,1.8.9,3.2-3.4,7-8.4,12.4-17.3,14,0,6,0,11.9,0,17.8,0,1.5,1,2.4,2.7,2.4,2.6,0,5.1.1,7.7,0,.6,0,1.4-.9,1.5-1.4.4-1.8.2-3.8.7-5.6,0-.2.2-.5.4-.7.9-1.1,2.8-1.1,3.5.1s.2.4.2.5c.5,3.4.7,6.9.8,10.3,0,.6-1.2,1.7-1.9,1.7-5.2.1-10.4.1-15.5,0-3.1-.1-5.5-2.7-5.5-5.7-.1-5.8,0-11.6,0-17.3,0-1.1-.2-1.9-1.6-2.1-6.2-.8-9.1-4.5-10.1-9.7-.9-4.4-.7-8.8.8-13.1,1.5-4.3,4.6-6.6,8.6-6.6,3.9,0,6.6,1.8,7.2,5.5.5,4,.4,8.1.6,12.1,0,2,0,4,0,6.4ZM522.4,380.7c0-5.4,0-10.8,0-16.2,0-.7-.2-1.5-.6-2.2-.7-1.5-2.2-1.9-3.6-.8-.7.6-1.4,1.4-1.7,2.2-1.6,4.1-2,8.3-.5,12.6,1,2.9,3.2,4.3,6.3,4.4Z M501.7,400.4c-5.1,1.2-9.7,2.2-14.3,3.3-1.9.4-3.4.5-4-1.7-.6-2,0-3,2.2-3.4,4.7-1,9.4-2.2,14.2-3.2,1.5-.3,2.1-.8,2-2.3,0-3.4-.1-6.9,0-10.4,0-1.5-.5-2.1-2.2-2.1-4.4,0-8.8,0-13.2,0-1.8,0-2.9-.4-3-2.4,0-2,.8-2.7,2.9-2.7,4.1,0,8.3,0,12.4,0,.9,0,1.8,0,3,0,0-4.3,0-8.3,0-12.3,0-2,.5-2.8,2.9-2.8,2.3,0,2.8.8,2.8,2.7,0,16.1,0,32.1,0,48.2,0,2.3-.8,2.9-3.3,2.7-1.7-.1-2.5-.8-2.4-2.4,0-3.6,0-7.2,0-11.3Z M844.7,391.7c-2.4,0-4.8,0-7.2,0-3-.1-4.6-1.6-4.4-4.3.1-2.2.4-4.5.8-6.7.5-2.4,2.7-1.5,4.2-1.5,1.7,0,1.7,1.1,1.6,2.2,0,.1,0,.3,0,.4q-.7,4.9,4.7,4.9c3.4,0,6.8,0,10.2,0,3.9,0,5.5,1.6,5.6,5.2.1,5-.2,10-3.1,14.6-2.9,4.6-11.4,8-17,6.6-.9-.2-2.2-1.5-2.2-2.3,0-2.5.2-5.1.6-7.6,0-.2.1-.3.2-.5.7-1.1,2.3-1.2,3.3-.3s.5.5.6.7c.5.8.5,1.9.6,2.9,0,1.4.5,2,2.3,1.6,5.2-1.2,8.4-4.8,8.7-10.7.3-5.7,1-5.2-5.2-5.2-1.4,0-2.8,0-4.2,0,0,0,0,0,0,0Z M876.9,384.7c0-8.4,0-16.8,0-25.2,0-2,.7-2.9,3-2.9,2.3,0,3,.9,3,2.9,0,16.8,0,33.6,0,50.5,0,2-.6,3-3.1,3-2.5,0-2.8-1.1-2.8-3,0-8.4,0-16.8,0-25.2Z M844.3,357.9c3.2,0,6.3,0,9.5,0,3.6,0,5.6,1.7,5.7,5,.1,3.2.1,6.5,0,9.7-.1,3.2-1.9,4.9-5.4,5-6,.2-12.1,0-18.2,0-1.9,0-2.2-1.2-2.2-2.6,0-1.6.4-2.7,2.4-2.7,4.9,0,9.8,0,14.7,0,2,0,2.9-.5,2.8-2.4-.1-1.5-.1-3,0-4.5.1-1.9-.7-2.7-2.9-2.7-5.2,0-10.4,0-15.7,0-2.2,0-2.9-.8-2.9-2.7,0-2,1.1-2.4,3-2.3,3.1,0,6.1,0,9.2,0h0Z M627.1,385.8c2.1,0,3.9,0,5.7,0,1.9,0,2.1,1,2.1,2.3,0,1.3.2,2.7-2,2.6-1.9,0-3.8,0-6.1,0v9.3c1,0,2.2,0,3.3,0,2,0,2.8.9,2.7,2.6,0,1.7-.8,2.5-2.7,2.4-1.3,0-2.6,0-3.9,0-.4,1.3-.6,2.4-1.1,3.4-1.4,3.6-5.1,5.8-9.3,5.5-1.5,0-2.2-.9-2.3-2.2-.1-1.5-.1-2.9,2-3.3,2-.4,3.6-1.1,4.1-3.3-.9,0-1.7-.1-2.5-.1-6.4,0-12.8,0-19.2,0-5.8,0-7.9-2.2-7.1-7.5.3-2.1.6-4.3,1-6.9-1.5,0-3,0-4.4,0-2.1,0-2.4-1-2.5-2.6,0-1.6.5-2.5,2.4-2.4,0,0,.2,0,.2,0,5.3-.2,5.3-.2,5.8-4.9.2-1.6.5-3.3.9-4.9.8-3.3,2.1-4.4,5.8-4.5,7-.1,13.9-.2,20.9,0,4.4.1,5.9,1.8,5.9,5.9,0,2.7,0,5.4,0,8.3ZM620.4,399.9c.2-2.6.4-5.1.4-7.5,0-.5-.7-1.5-1.1-1.5-2.5-.1-5,0-7.6,0-.3,3.2-.6,6.1-.8,9.1h9.1ZM598.1,390.9c-.4,2.5-.9,4.9-1.1,7.3,0,.6.9,1.7,1.4,1.7,2.3.2,4.7,0,7.2,0,.3-3.2.6-6,.9-9.1h-8.4ZM612.6,385.7h8.6c0-2.6,0-5.1,0-7.5,0-.5-1-1.4-1.6-1.5-1.9-.2-3.9,0-6.1,0-.3,3-.6,5.9-.9,9.1ZM599,385.7h8c.3-3,.6-5.9.9-9-2.2,0-4.2-.1-6.1,0-.6,0-1.4.8-1.5,1.4-.5,2.4-.8,4.9-1.2,7.6Z M600,361.1c8.4,0,16.5,0,24.6,0,1.4,0,2.8,0,4.2,0,2.9,0,4.1,1.4,3,3.9-.3.6-1.7,1.1-2.5,1.1-5.8.1-11.6,0-17.4,0-4.2,0-8.4,0-12.7,0-1.6,0-2.6.4-3.4,1.7-1.2,1.9-2.7,3.7-4.1,5.6-1,1.3-2.1,1.6-3.5.5-1.3-1-2.4-2-1-3.6,4.1-4.4,6.8-9.3,8.9-14.7.7-1.8,1.8-2,3.6-1.6,1.9.5,2.2,1.6,1.8,3.1-.4,1.2-.9,2.4-1.5,4Z M577.3,405.3c2.1-1.1,3.8-2.1,5.7-2.9.5-.2,1.6-.3,1.8,0,.4.5.6,1.5.3,1.8-2.2,2.6-4.4,5.3-6.8,7.7-1.2,1.2-2.4,0-3.4-.8-4.6-4.5-5.9-10-4.2-15.7,1.2-4,3.5-7.8,5.4-11.9-1.2-.3-2.9-.9-4.6-1.2-2.7-.6-2.1-2.2-1.7-3.9.4-1.7,1.4-2.2,3.3-1.6,2.7.8,5.4,1.4,8.1,2.2,3.7,1.1,4.4,4.4,1.5,6.9-1.7,1.5-3.7,2.9-5,4.7-2.7,3.6-4.1,7.6-2.3,11.9.5,1.1,1.3,2,2,3Z M575.8,358.5c1,.4,1.6.5,2.1.8,2.7,1.7,5.4,3.3,8.1,5.1,1.2.7,1.7,1.7.6,2.8-1.1,1.1-2,2.9-4.1,1.7-2.7-1.5-5.4-3.1-7.9-5-.7-.5-.8-2-.6-2.9.2-.9,1.2-1.7,1.8-2.5Z M672.1,398.5c.8-3.9.4-4.3-3.1-5.6-.9-.3-1.7-1.4-1.9-2.3-.4-1.3-.5-2.6,1-3.6,1.7-1.1,3.4-2.4,4.6-4,1.2-1.5.6-2.2-1.5-2.3-2.2,0-4.3,0-6.5,0-2.1,0-2.7-.9-2.7-2.7,0-1.8.8-2.5,2.7-2.5,3.3,0,6.6,0,9.9.3,2.9.2,4.1,1.6,4.3,4.3.3,3.6-1.4,6.5-4.3,9.2,3.7,2.3,3.6,5.6,3.3,9-.2,1.6.5,2.3,2.1,2.9,13.7,5.3,27.9,7.7,42.8,7.9,1.6,0,3.2,0,3.4,2,.2,2.2-.5,3-3.1,3-15.3.1-29.9-2.6-43.9-8.2-2.1-.8-3.2-.8-4.5,1.1-2.2,3.3-6.6,4.6-10.7,3.7-4-.9-5.9-3.3-5.6-7.1.3-3.1,3.2-5.5,6.9-5.6,2.2,0,4.4.2,6.8.4ZM670.6,403c-2.2-.2-3.9-.6-5.5-.4-.9.1-1.7,1.3-2.6,1.9.9.7,1.6,1.8,2.6,1.9,2.5.3,4-1.2,5.5-3.4Z M699.4,367.8c-5.1,0-10.2,0-15.3,0-2.2,0-2.9-.7-2.9-2.6,0-1.9.8-2.5,2.8-2.5,7.5,0,15.1,0,22.6,0,.6,0,1.3,0,1.5,0-.5-1.3-1.7-2.8-1.3-3.6,1-1.9,2.7-3.6,4.4-5,.5-.4,2.5.4,3.4,1.1.5.4.4,1.9,0,2.5-1,1.7-2.5,3.2-4,5,4.1,0,7.9,0,11.6,0,2,0,2.8.5,2.8,2.4,0,2-.8,2.7-2.9,2.6-4.1-.1-8.3,0-12.4,0-3.2,0-3.5.2-4.8,3.6,2.6,0,5.2,0,7.7,0,5,0,6.7,1.6,6.8,6.1,0,4.3,0,8.6,0,12.8,0,3,0,6,0,9,0,3-.3,3.2-2.9,3.3-2.7.1-2.8-1.4-2.8-3.2,0-6.5,0-13.1,0-19.6,0-3-.1-3-3.3-3-4.6,0-9.3,0-13.9,0-2,0-2.7-.8-2.6-2.4,0-1.4-.1-2.7,2.2-3.1,1.4-.3,2.5-1.8,3.7-2.8l-.5-.7Z M692.3,387.2c0,4.3,0,8.7,0,13,0,2-.9,2.4-2.8,2.4-2,0-2.8-.7-2.8-2.5,0-8.8,0-17.5,0-26.3,0-1.9.8-2.5,2.8-2.5,2,0,2.8.7,2.8,2.6,0,4.4,0,8.8,0,13.3Z M703.2,385.4c-2.3,0-4.6,0-6.9,0-2,0-2.3-1.1-2.3-2.5,0-1.4.2-2.6,2.2-2.6,4.7,0,9.4,0,14.1,0,2.1,0,2.1,1.3,2.1,2.6,0,1.4-.3,2.5-2.3,2.5-2.3,0-4.6,0-6.9,0Z M703.3,394c-2.2,0-4.5,0-6.7,0-2,0-2.6-.9-2.6-2.5,0-1.5.4-2.6,2.5-2.6,4.5,0,8.9,0,13.4,0,2,0,2.5.9,2.6,2.5,0,1.6-.4,2.6-2.5,2.6-2.2,0-4.5,0-6.7,0Z M703.1,402.6c-2.2,0-4.5,0-6.7,0-1.9,0-2.4-1-2.4-2.5,0-1.4.4-2.5,2.3-2.5,4.6,0,9.1,0,13.7,0,2.1,0,2.4,1.1,2.5,2.6,0,1.5-.5,2.4-2.4,2.4-2.3,0-4.6,0-7,0Z M700,356.5c.5.2.8.6.7,1.1-.5,2-2.5,4.1-4.2,4.7-1.9.6-2.9-.7-3.9-1.7-.7-.7-1.4-1.5-2-2.3-1.1-1.2-2-2.3-.1-3.6,1.6-1.2,2.9-1.4,4.5.1.7.7,2.3.8,3.4,1.1.6.2,1.2.4,1.7.5Z M673.4,366c0,.7,0,1.5,0,2.2,0,2.7-.9,3.4-3.7,2.8-.7-.1-1.7-1.1-1.7-1.7-.2-2.3,0-4.6,0-6.9,0-1.7,1.3-1.8,2.7-1.8,1.4,0,2.7,0,2.7,1.8,0,1.2,0,2.4,0,3.6,0,0,0,0,0,0Z'/%3E%3C/svg%3E") no-repeat left center / contain;
}
/* 追従ヘッダー：線だけ出す */
.l-fixHeader { box-shadow: none !important; border-bottom: 1px solid var(--mzk-line); background: rgba(255, 255, 255, .96) !important; }
.l-fixHeader .c-headLogo__link::after { display: none; }
.l-fixHeader .c-headLogo__link::before { width: 140px; height: 22px; }

.c-gnav > .menu-item > a {
  padding: 0 15px;
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--mzk-ink);
}
.c-gnav > .menu-item > a .ttl { position: relative; padding-bottom: 4px; }
.c-gnav > .menu-item > a .ttl::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--mzk-ease-io);
}
.c-gnav > .menu-item > a:hover .ttl::after,
.c-gnav > .current-menu-item > a .ttl::after { transform: scaleX(1); transform-origin: left; }
.c-gnav > .menu-item > a::after { display: none; } /* SWELL標準の下線を消す */
/* メニュー項目に「mzk-nav-shop」クラスを付けるとボタンになる */
.c-gnav > .mzk-nav-shop { margin-left: 15px; display: flex; align-items: center; }
.c-gnav > .mzk-nav-shop > a {
  height: 44px;
  padding: 0 24px;
  border: 1px solid var(--mzk-accent);
  color: var(--mzk-accent);
  letter-spacing: .12em;
  background-image: linear-gradient(var(--mzk-accent), var(--mzk-accent));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .5s var(--mzk-ease-io), color .3s;
  align-self: center;
}
.c-gnav > .mzk-nav-shop > a:hover { background-size: 100% 100%; color: #fff; }
.c-gnav > .mzk-nav-shop > a .ttl::after { display: none; }

/* ---------- スマホのメニューボタン（細い2本線） ---------- */
.l-header__customBtn { display: none !important; }
.l-header__menuBtn { order: 3; margin-left: auto; }
.l-header__menuBtn .c-iconBtn,
#sp_menu .p-spMenu__closeBtn .c-iconBtn {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none !important;
  color: var(--mzk-ink);
}
.l-header__menuBtn .c-iconBtn__icon,
#sp_menu .p-spMenu__closeBtn .c-iconBtn__icon { display: none; }
.l-header__menuBtn .c-iconBtn::before,
.l-header__menuBtn .c-iconBtn::after,
#sp_menu .p-spMenu__closeBtn .c-iconBtn::before,
#sp_menu .p-spMenu__closeBtn .c-iconBtn::after {
  content: "";
  position: absolute;
  right: 10px;
  height: 1px;
  background: currentColor;
  transition: transform .5s var(--mzk-ease-io), width .5s var(--mzk-ease-io);
}
.l-header__menuBtn .c-iconBtn::before { top: 20px; width: 28px; }
.l-header__menuBtn .c-iconBtn::after { top: 28px; width: 18px; }
.l-header__menuBtn .c-iconBtn:hover::after { width: 28px; }
/* 閉じるボタンは × に */
#sp_menu .p-spMenu__closeBtn { display: flex; justify-content: flex-end; padding: 10px 14px 0; }
#sp_menu .p-spMenu__closeBtn .c-iconBtn::before,
#sp_menu .p-spMenu__closeBtn .c-iconBtn::after { top: 24px; width: 28px; }
#sp_menu .p-spMenu__closeBtn .c-iconBtn::before { transform: rotate(30deg); }
#sp_menu .p-spMenu__closeBtn .c-iconBtn::after { transform: rotate(-30deg); }

/* ---------- スマホのメニュー（右から出る、すりガラス） ---------- */
#sp_menu .p-spMenu__inner {
  width: min(86vw, 380px);
  background: rgba(255, 255, 255, .78) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  color: var(--mzk-ink);
  box-shadow: none;
  border-left: 1px solid rgba(31, 27, 23, .06);
}
#sp_menu .p-spMenu__overlay { background: rgba(31, 27, 23, .18) !important; opacity: 1; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#sp_menu .c-widget__title.-spmenu { display: none; }
#sp_menu .p-spMenu__body { padding: 24px 32px 48px; }
#sp_menu .c-spnav { border: none; }
#sp_menu .c-spnav > li { border: none; opacity: 0; transform: translateX(16px); transition: opacity .6s var(--mzk-ease), transform .6s var(--mzk-ease); }
[data-spmenu="opened"] #sp_menu .c-spnav > li { opacity: 1; transform: none; }
[data-spmenu="opened"] #sp_menu .c-spnav > li:nth-child(1) { transition-delay: 0.13s; }
[data-spmenu="opened"] #sp_menu .c-spnav > li:nth-child(2) { transition-delay: 0.18s; }
[data-spmenu="opened"] #sp_menu .c-spnav > li:nth-child(3) { transition-delay: 0.23s; }
[data-spmenu="opened"] #sp_menu .c-spnav > li:nth-child(4) { transition-delay: 0.28s; }
[data-spmenu="opened"] #sp_menu .c-spnav > li:nth-child(5) { transition-delay: 0.33s; }
[data-spmenu="opened"] #sp_menu .c-spnav > li:nth-child(6) { transition-delay: 0.38s; }
[data-spmenu="opened"] #sp_menu .c-spnav > li:nth-child(7) { transition-delay: 0.43s; }
[data-spmenu="opened"] #sp_menu .c-spnav > li:nth-child(8) { transition-delay: 0.48s; }
#sp_menu .c-spnav a {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid rgba(31, 27, 23, .1);
  font-family: var(--mzk-ff);
  font-size: 19px;
  letter-spacing: .16em;
  color: var(--mzk-ink);
}
#sp_menu .c-spnav a::before { display: none; }
#sp_menu .c-spnav a:is(:hover, :focus) { background: none; opacity: .6; }
#sp_menu .c-spnav a:focus-visible { outline: 1px solid var(--mzk-ink); outline-offset: 4px; opacity: 1; }
#sp_menu .c-spnav .mzk-nav-shop { margin-top: 32px; }
/* メニュー下の Instagram（ウィジェット「スマホ開閉メニュー下」） */
#sp_menu .p-spMenu__bottom, #sp_menu .w-spMenuBottom { padding: 24px 0 0; margin: 0; }
.mzk-sp-insta { display: flex; align-items: center; gap: 12px; padding: 18px 0; border-top: 1px solid rgba(31, 27, 23, .1); color: var(--mzk-ink) !important; text-decoration: none !important; }
.mzk-sp-insta svg { width: 22px; height: 22px; flex: none; }
.mzk-sp-insta__txt { display: flex; flex-direction: column; line-height: 1.5; }
.mzk-sp-insta__en { font-family: var(--mzk-ff-en); font-size: 15px; letter-spacing: .1em; }
.mzk-sp-insta__id { font-size: 12px; letter-spacing: .06em; color: var(--mzk-sub); }
#sp_menu .c-spnav .mzk-nav-shop > a {
  display: flex;
  justify-content: center;
  padding: 16px 0;
  border: 1px solid var(--mzk-accent);
  border-radius: 999px;
  color: var(--mzk-accent);
  font-family: var(--mzk-ff-body);
  font-size: 15px;
}
@media (prefers-reduced-motion: reduce) {
  #sp_menu .c-spnav > li { opacity: 1; transform: none; transition: none; }
}

/* ---------- フッター ---------- */
#footer.l-footer {
  background: #fff;
  color: var(--mzk-sub);
  border-top: 1px solid var(--mzk-line);
  font-family: var(--mzk-ff-body);
}
#footer .l-footer__foot { background: #fff; padding: 0; }
#footer .l-footer__foot .l-container {
  max-width: 1280px;
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  justify-content: space-between;
  align-items: center;
}
#footer .l-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; border: none; order: 2; }
#footer .l-footer__nav li { border: none !important; }
#footer .l-footer__nav a { padding: 0; font-size: 13px; letter-spacing: .08em; color: var(--mzk-sub); border: none; }
#footer .l-footer__nav a:hover { color: var(--mzk-ink); }
#footer .copyright { order: 1; font-size: 13px; letter-spacing: .08em; color: var(--mzk-sub); }

/* ぱんくず（ヘッダーの下。区切りは細い線） */
#breadcrumb.p-breadcrumb { background: transparent !important; border: none; margin: 0; padding: 22px 0 0; }
#breadcrumb .p-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
  font-family: var(--mzk-ff-body);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--mzk-sub);
}
#breadcrumb .p-breadcrumb__item { display: flex; align-items: center; margin: 0; padding: 0; }
#breadcrumb .p-breadcrumb__item::after {
  content: "" !important;
  display: block;
  width: 20px;
  height: 1px;
  margin: 0 12px;
  border: none !important;
  background: #c9c3ba;
  transform: none !important;
  position: static !important;
}
#breadcrumb .p-breadcrumb__item:last-child::after { display: none; }
#breadcrumb .p-breadcrumb__text { color: var(--mzk-sub); padding: 0; }
#breadcrumb .p-breadcrumb__item:last-child .p-breadcrumb__text { color: var(--mzk-ink); }
#breadcrumb a.p-breadcrumb__text { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--mzk-ease), color .3s; padding-bottom: 2px; }
#breadcrumb a.p-breadcrumb__text:hover { color: var(--mzk-ink); background-size: 100% 1px; opacity: 1; }
#breadcrumb .__home::before { display: none !important; }
#breadcrumb + #content .mzk-phead { padding-top: 40px; }

/* ==========================================================
   下層ページ（page.php / single.php / 一覧）
   ========================================================== */
.mzk-site #content.l-content { display: block; max-width: none; padding: 0; margin: 0; }
.mzk-site #content > .mzk-page { width: 100%; }

.mzk-page { background: #fff; color: var(--mzk-ink); font-family: var(--mzk-ff-body); padding-bottom: 140px; }
.mzk-page a { color: inherit; }
.mzk-pwrap { max-width: 1280px; margin-inline: auto; padding-inline: 40px; box-sizing: border-box; }

/* ページの頭 */
.mzk-phead { padding-top: 64px; }
.mzk-phead__rule { height: 1px; background: var(--mzk-ink); transform-origin: left; animation: mzkRuleIn 1.2s var(--mzk-ease-io) .1s both; }
.mzk-phead__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding-top: 32px;
  align-items: end;
}
.mzk-phead__group { display: flex; flex-direction: column; gap: 14px; animation: mzkUpIn 1s var(--mzk-ease) .4s both; }
.mzk-phead__en { font-family: var(--mzk-ff-en); font-size: 15px; letter-spacing: .12em; color: var(--mzk-sub); }
.mzk-page .mzk-phead__title { margin: 0; padding: 0; border: none; background: none; font-size: clamp(30px, 2.6vw, 38px); font-weight: 500; letter-spacing: .1em; line-height: 1.6; word-break: auto-phrase; text-wrap: balance; font-feature-settings: "palt"; }
/* 記事など長いタイトルは、少し小さく・字間を詰めて読みやすく */
.mzk-page .mzk-phead__title.is-long { font-size: clamp(24px, 2.1vw, 30px); letter-spacing: .06em; line-height: 1.7; }
.mzk-page .mzk-phead__title::before, .mzk-page .mzk-phead__title::after { content: none; }
.mzk-phead__lead { margin: 0; font-size: 15px; line-height: 2.2; letter-spacing: .04em; animation: mzkUpIn 1s var(--mzk-ease) .6s both; }
.mzk-phead__meta { font-size: 13px; color: var(--mzk-sub); letter-spacing: .08em; }
.mzk-phead__photo {
  margin-top: 56px;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--mzk-photo);
  clip-path: inset(0 0 100% 0);
  animation: mzkWipeIn 1.6s var(--mzk-ease-io) .3s forwards;
}
.mzk-phead__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); animation: mzkSettleIn 3s var(--mzk-ease) .3s forwards; }
@keyframes mzkRuleIn { from { transform: scaleX(0); } }
/* ページの頭の写真を3枚切り替え（ワークショップ） */
.mzk-phead__photo.has-slides { position: relative; }
.mzk-phead__slide { position: absolute; inset: 0; }
.mzk-phead__photo.has-slides .mzk-phead__slide { opacity: 0; animation: mzkPhFade 18s linear infinite; animation-delay: calc(var(--i) * 6s - 1.2s); }
.mzk-phead__photo.has-slides img { transform: none; animation: none; }
@keyframes mzkPhFade { 0% { opacity: 0; transform: scale(1.04); } 7% { opacity: 1; } 33.3% { opacity: 1; } 40% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }
@keyframes mzkUpIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes mzkWipeIn { to { clip-path: inset(0 0 0 0); } }
@keyframes mzkSettleIn { to { transform: scale(1); } }

/* 本文（ブロックエディタで書いた内容） */
.mzk-prose { max-width: 760px; margin: 88px auto 0; padding-inline: 40px; box-sizing: content-box; font-size: 16px; line-height: 2.1; letter-spacing: .04em; }
.mzk-prose > * { margin-top: 0; margin-bottom: 1.8em; }
.mzk-prose > .alignwide { max-width: 1200px; width: calc(100vw - 80px); margin-left: 50%; transform: translateX(-50%); }
.mzk-prose > .alignfull { width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); }
.mzk-page .mzk-prose h2 {
  margin: 96px 0 32px;
  padding: 28px 0 0;
  border: none;
  border-top: 1px solid var(--mzk-ink);
  background: none;
  color: var(--mzk-ink);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.6;
}
.mzk-page .mzk-prose h2:first-child { margin-top: 0; }
.mzk-page .mzk-prose h3 { margin: 56px 0 20px; padding: 0; border: none; background: none; font-size: 19px; font-weight: 500; letter-spacing: .12em; }
.mzk-page .mzk-prose :is(h2, h3, h4)::before, .mzk-page .mzk-prose :is(h2, h3, h4)::after { content: none; }
.mzk-prose .mzk-en { display: block; margin-bottom: 8px; font-family: var(--mzk-ff-en); font-size: 15px; letter-spacing: .12em; color: var(--mzk-sub); font-weight: 400; }
.mzk-prose a:not(.wp-block-button__link) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.mzk-prose ul, .mzk-prose ol { padding-left: 1.4em; }
.mzk-prose li { margin-bottom: .4em; }
.mzk-prose figure { margin-bottom: 2.4em; }
.mzk-prose figure img { display: block; width: 100%; height: auto; }
.mzk-prose figcaption { margin-top: 12px; font-size: 13px; color: var(--mzk-sub); text-align: left; }
.mzk-prose .wp-block-columns { gap: 32px; }
.mzk-prose .wp-block-separator { border: none; border-top: 1px solid var(--mzk-line); margin: 64px 0; }

/* 作家名の署名（段落に「mzk-sign」クラス） */
.mzk-prose .mzk-sign { margin-top: -.6em; text-align: right; font-family: var(--mzk-ff); font-size: 16px; letter-spacing: .16em; }

/* 表（料金・会社情報など） */
.mzk-prose .wp-block-table table, .mzk-prose table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--mzk-line); font-size: 15px; }
.mzk-prose th, .mzk-prose td { padding: 18px 12px; border: none; border-bottom: 1px solid var(--mzk-line); text-align: left; vertical-align: top; background: none; }
.mzk-prose th, .mzk-prose td:first-child { width: 30%; color: var(--mzk-sub); font-weight: 400; font-size: 14px; letter-spacing: .08em; }

/* 一覧の行（活動実績など） */
.mzk-prose .mzk-list { list-style: none; padding: 0; border-top: 1px solid var(--mzk-line); }
.mzk-prose .mzk-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--mzk-line); }
.mzk-prose .mzk-list li strong { font-weight: 400; font-size: 14px; color: var(--mzk-sub); }

/* ボタン */
.mzk-prose .wp-block-buttons { gap: 10px; margin-top: 40px; }
.mzk-page .wp-block-button__link, .mzk-page .mzk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  border-radius: 0;
  border: 1px solid var(--mzk-ink);
  background-color: transparent;
  color: var(--mzk-ink);
  font-size: 14px;
  letter-spacing: .14em;
  text-decoration: none;
  box-shadow: none;
  background-image: linear-gradient(var(--mzk-ink), var(--mzk-ink));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .5s var(--mzk-ease-io), color .3s;
}
.mzk-page .is-style-fill .wp-block-button__link, .mzk-page .mzk-btn--accent { background-color: var(--mzk-accent); border-color: var(--mzk-accent); color: #fff; }
@media (hover: hover) { .mzk-page .wp-block-button__link:hover, .mzk-page .mzk-btn:hover { background-size: 100% 100%; color: #fff; border-color: var(--mzk-ink); opacity: 1; } }

/* よくある質問（詳細ブロック） */
.mzk-prose details { border-bottom: 1px solid var(--mzk-line); margin: 0; padding: 0; }
.mzk-prose details:first-of-type { border-top: 1px solid var(--mzk-line); }
.mzk-prose details summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; font-size: 16px; letter-spacing: .06em; }
.mzk-prose details summary::-webkit-details-marker { display: none; }
.mzk-prose details summary::after { content: "+"; position: absolute; right: 8px; top: 18px; font-family: var(--mzk-ff-en); font-size: 22px; color: var(--mzk-sub); transition: transform .3s; }
.mzk-prose details[open] summary::after { transform: rotate(45deg); }
.mzk-prose details > :not(summary) { margin: 0 0 22px; color: #3d3833; font-size: 15px; }
.mzk-prose details + details { margin-top: 0; }

/* 写真付きの段組（左右） */
.mzk-prose .mzk-media { align-items: center !important; }

/* 商品一覧（ショートコード [mzk_products]） */
.mzk-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; margin: 0 0 2em; padding: 0; list-style: none; }
.mzk-products li { margin: 0; }
.mzk-products a { display: flex; flex-direction: column; gap: 10px; text-decoration: none !important; }
.mzk-products__img { aspect-ratio: 1 / 1; overflow: hidden; background: var(--mzk-photo); }
.mzk-products__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--mzk-ease); }
.mzk-products a:hover img { transform: scale(1.05); }
.mzk-products__name { font-size: 15px; line-height: 1.6; letter-spacing: .04em; }
.mzk-products__price { font-size: 13px; color: var(--mzk-sub); }
.mzk-products-more { text-align: center; }
.mzk-products[aria-busy="true"] { min-height: 320px; background: linear-gradient(90deg, #f6f5f3 25%, #efede9 50%, #f6f5f3 75%) 0 0 / 200% 100%; animation: mzkShimmer 1.4s linear infinite; }
@keyframes mzkShimmer { to { background-position: -200% 0; } }

/* ページ下のご案内 */
.mzk-pcta { margin-top: 140px; }
.mzk-pcta__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mzk-pcta__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: 240px;
  padding: 32px 36px;
  box-sizing: border-box;
  background: var(--mzk-gray);
  text-decoration: none;
}
.mzk-pcta__item--dark { background: var(--mzk-ink); color: #fff !important; }
.mzk-pcta__en { font-family: var(--mzk-ff-en); font-size: 15px; letter-spacing: .12em; color: var(--mzk-sub); }
.mzk-pcta__item--dark .mzk-pcta__en { color: #c9c3ba; }
.mzk-pcta__title { font-size: 22px; font-weight: 500; letter-spacing: .1em; }
.mzk-pcta__text { font-size: 14px; line-height: 1.9; }
.mzk-pcta__title { align-self: flex-start; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--mzk-ease); padding-bottom: 3px; }
.mzk-pcta__item:hover .mzk-pcta__title { background-size: 100% 1px; }

/* 記事一覧（読みもの・お知らせ） */
.mzk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 24px; margin-top: 64px; }
.mzk-cards a { display: flex; flex-direction: column; gap: 14px; text-decoration: none; }
.mzk-cards__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--mzk-photo); }
.mzk-cards__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--mzk-ease); }
.mzk-cards a:hover img { transform: scale(1.05); }
.mzk-cards__cat { font-size: 12px; letter-spacing: .12em; color: var(--mzk-sub); }
.mzk-cards__title { font-size: 17px; line-height: 1.75; }
.mzk-rows { margin-top: 56px; padding: 0; list-style: none; border-top: 1px solid var(--mzk-line); }
.mzk-rows li { margin: 0; border-bottom: 1px solid var(--mzk-line); }
.mzk-rows a { display: grid; grid-template-columns: 190px 90px minmax(0, 1fr) 24px; gap: 24px; align-items: baseline; padding: 24px 12px; text-decoration: none; transition: background-color .3s; }
.mzk-rows a:hover { background: #f8f7f5; }
.mzk-rows a.has-thumb { grid-template-columns: 96px 170px 90px minmax(0, 1fr) 24px; align-items: center; padding: 18px 12px; }
.mzk-rows__thumb { display: block; width: 96px; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: #f6f5f3; }
.mzk-rows__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mzk-rows__date { font-size: 14px; color: var(--mzk-sub); }
.mzk-rows__cat { font-size: 12px; letter-spacing: .14em; color: var(--mzk-accent); }
.mzk-rows__arrow { color: var(--mzk-sub); }
.mzk-empty { margin-top: 56px; color: var(--mzk-sub); }
.mzk-pager { margin-top: 64px; display: flex; justify-content: center; gap: 8px; }
.mzk-pager .page-numbers { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mzk-line); text-decoration: none; }
.mzk-pager .current { border-color: var(--mzk-ink); }

/* 記事の前後 */
.mzk-back { max-width: 760px; margin: 96px auto 0; padding-inline: 40px; box-sizing: content-box; }

/* お問い合わせページのフォーム切り替えリンク */
.mzk-prose .mzk-anchors { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 72px; }
.mzk-prose .mzk-anchors a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--mzk-line); font-size: 14px; letter-spacing: .08em; text-decoration: none; transition: border-color .3s; }
.mzk-prose .mzk-anchors a::after { content: "↓"; margin-left: 10px; color: var(--mzk-sub); }
.mzk-prose .mzk-anchors a:hover { border-color: var(--mzk-ink); }
.mzk-prose h2[id] { scroll-margin-top: 110px; }

/* フォーム置き場（Contact Form 7 を入れるまでの仮表示） */
.mzk-note { padding: 24px 28px; background: var(--mzk-gray); font-size: 14px; line-height: 2; color: var(--mzk-sub); }

/* ---------- 書体の使い分け：本文はゴシック、目立つ文字は明朝 ---------- */
#header .c-headLogo,
.mzk-page .mzk-phead__title,
.mzk-page .mzk-prose h2,
.mzk-page .mzk-prose h3,
.mzk-pcta__title,
.mzk-cards__title,
.mzk-products__name {
  font-family: var(--mzk-ff);
  font-weight: 400 !important; /* しまなみは1ウェイト */
}

/* ---------- ボタンは角丸 ---------- */
.mzk-page .wp-block-button__link,
.mzk-page .mzk-btn,
.c-gnav > .mzk-nav-shop > a,
.mzk-prose .mzk-anchors a {
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .mzk-page *, .c-gnav * { animation: none !important; transition: none !important; }
  .mzk-phead__photo { clip-path: none !important; }
  .mzk-phead__photo img { transform: none !important; }
}

/* ---------- タブレット ---------- */
@media (max-width: 959px) {
  #header .l-header__inner { padding: 0 24px; min-height: 64px; }
  #header .c-headLogo__link { font-size: 18px; }
  .mzk-pwrap { padding-inline: 32px; }
  .mzk-phead__inner { grid-template-columns: 1fr; gap: 24px; }
  .mzk-page .mzk-phead__title { font-size: 32px; }
  .mzk-page .mzk-phead__title.is-long { font-size: 26px; }
  .mzk-phead__photo { aspect-ratio: 16 / 9; }
  .mzk-prose { padding-inline: 32px; margin-top: 64px; }
  .mzk-prose > .alignwide { width: calc(100vw - 64px); }
  .mzk-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mzk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mzk-page { padding-bottom: 100px; }
  .mzk-pcta { margin-top: 100px; }
  #footer .l-footer__foot .l-container { padding: 32px; }
}

/* ---------- スマホ ---------- */
@media (max-width: 599px) {
  #header .c-headLogo__link { gap: 10px; }
  #header .c-headLogo__link::before { width: 132px; height: 21px; }
  #header .c-headLogo__link::after { font-size: 12px; }
  .mzk-pwrap { padding-inline: 20px; }
  .mzk-phead { padding-top: 32px; }
  .mzk-page .mzk-phead__title { font-size: 26px; letter-spacing: .08em; line-height: 1.6; }
  .mzk-page .mzk-phead__title.is-long { font-size: 21px; letter-spacing: .04em; line-height: 1.75; }
  .mzk-phead__photo { margin-top: 36px; aspect-ratio: 4 / 3; }
  .mzk-prose { padding-inline: 20px; margin-top: 48px; font-size: 15px; }
  .mzk-prose > .alignwide { width: calc(100vw - 40px); }
  .mzk-page .mzk-prose h2 { margin-top: 72px; font-size: 22px; }
  .mzk-page .mzk-prose h3 { font-size: 17px; }
  .mzk-prose th, .mzk-prose td { display: block; width: auto !important; padding: 12px 0; }
  .mzk-prose th, .mzk-prose td:first-child { border-bottom: none; padding-bottom: 0; }
  .mzk-prose .mzk-list li { grid-template-columns: 1fr; gap: 4px; }
  .mzk-prose .wp-block-button, .mzk-prose .wp-block-button__link { width: 100%; }
  .mzk-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .mzk-pcta__inner { grid-template-columns: 1fr; }
  .mzk-pcta__item { min-height: 200px; padding: 24px; }
  .mzk-cards { grid-template-columns: 1fr; gap: 40px; }
  .mzk-rows a { grid-template-columns: auto 1fr; gap: 6px 16px; padding: 18px 0; }
  .mzk-rows__title { grid-column: 1 / -1; }
  .mzk-rows__arrow { display: none; }
  .mzk-rows a.has-thumb { grid-template-columns: 76px auto minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 18px 0; }
  .mzk-rows a.has-thumb .mzk-rows__thumb { width: 76px; grid-row: 1 / span 2; }
  .mzk-rows a.has-thumb .mzk-rows__title { grid-column: 2 / -1; }
  .mzk-page { padding-bottom: 80px; }
  .mzk-pcta { margin-top: 80px; }
  .mzk-back { padding-inline: 20px; }
  #footer .l-footer__foot .l-container { padding: 28px 20px; flex-direction: column; align-items: flex-start; }
  #breadcrumb .p-breadcrumb__list { padding-inline: 20px; }
}

/* ---------- 404：ほどけた結び目を、結びなおす ---------- */
.mzk-404 { overflow: hidden; }
.mzk-404__wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 72px; }
.mzk-404__en { margin: 0; font-family: var(--mzk-ff-en); font-size: 15px; letter-spacing: .24em; color: var(--mzk-sub); }
.mzk-404__num { display: flex; align-items: center; justify-content: center; gap: .04em; margin: 28px 0 12px; font-family: var(--mzk-ff-en); font-size: clamp(120px, 17vw, 220px); font-weight: 400; line-height: 1; color: var(--mzk-ink); }
.mzk-404__knot { all: unset; display: block; width: .82em; aspect-ratio: 1; margin-inline: .06em; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.mzk-404__knot:focus-visible { outline: 1px solid var(--mzk-ink); outline-offset: 8px; }
.mzk-404__knot svg { display: block; width: 100%; height: 100%; overflow: visible; fill: var(--mzk-ink); }
.mzk-404__petal { transform-box: view-box; transform-origin: 1069px 399px; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg)) scale(.86); opacity: 0; filter: blur(.6px); transition: transform 1.2s var(--mzk-ease) calc(var(--i, 0) * 55ms), opacity .9s ease calc(var(--i, 0) * 55ms), filter .9s ease calc(var(--i, 0) * 55ms); }
.mzk-404.is-ready .mzk-404__petal { opacity: .5; }
.mzk-404__drift { animation: mzk404Drift 6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.mzk-404__knot:hover .mzk-404__drift { animation-duration: 2.4s; }
.mzk-404.is-tied .mzk-404__petal { transform: none; opacity: 1; filter: none; }
.mzk-404.is-tied .mzk-404__drift { animation: none; }
.mzk-404.is-tied .mzk-404__knot svg { animation: mzk404Pop .9s var(--mzk-ease) .55s both; }
@keyframes mzk404Drift { from { transform: translate(-3px, 2px) rotate(-6deg); } to { transform: translate(4px, -3px) rotate(7deg); } }
@keyframes mzk404Pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.mzk-404__title { display: grid; margin: 28px 0 0; padding: 0; border: none; background: none; font-family: var(--mzk-ff); font-size: clamp(22px, 2.2vw, 30px); font-weight: 400 !important; letter-spacing: .1em; line-height: 1.8; }
.mzk-404__title::before, .mzk-404__title::after { content: none; }
.mzk-404__msg { grid-area: 1 / 1; transition: opacity .8s ease, transform .8s var(--mzk-ease), filter .8s ease; }
.mzk-404__msg--tied { opacity: 0; transform: translateY(8px); filter: blur(4px); }
.mzk-404.is-tied .mzk-404__msg--loose { opacity: 0; transform: translateY(-8px); filter: blur(4px); }
.mzk-404.is-tied .mzk-404__msg--tied { opacity: 1; transform: none; filter: none; transition-delay: .5s; }
.mzk-404__lead { margin: 24px 0 0; font-size: 15px; line-height: 2.1; letter-spacing: .04em; color: var(--mzk-sub); }
.mzk-404__hint { margin: 20px 0 0; }
.mzk-404__retie { all: unset; cursor: pointer; font-size: 13px; letter-spacing: .16em; color: var(--mzk-ink); padding-bottom: 4px; border-bottom: 1px solid currentColor; transition: opacity .3s; }
.mzk-404__retie:hover { opacity: .6; }
.mzk-404__retie:focus-visible { outline: 1px solid var(--mzk-ink); outline-offset: 6px; }
.mzk-404__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin-top: 56px; }
.mzk-404 .mzk-pc { display: inline; }
@media (max-width: 600px) {
  .mzk-404__wrap { padding-top: 40px; }
  .mzk-404 .mzk-pc { display: none; }
  .mzk-404__lead { font-size: 14px; text-align: left; }
  .mzk-404__nav { flex-direction: column; align-items: stretch; width: 100%; margin-top: 40px; }
  .mzk-404__nav .mzk-btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mzk-404__petal, .mzk-404__msg { transition: none; }
  .mzk-404__drift, .mzk-404.is-tied .mzk-404__knot svg { animation: none; }
}