@charset "UTF-8";
/* ==========================================================================
   坪井人形会館 — shared stylesheet
   Design canvas: PC 1366 x N / SP 390 x N (Illustrator).
   Every px below is measured off the Illustrator/PDF renders, not estimated.

   Layout model (fixed-canvas print design):
     .site is a 1366px canvas, centred. Each element is absolutely positioned
     at its measured page coordinate. Page background art ships as one
     transparent PNG (.decor) generated from the 背景/罫線/イラスト layers, so
     no band colour is ever guessed. Beyond the canvas, .bleed-l/.bleed-r
     stretch a 1px strip of the page's own left/right edge outwards, which
     reproduces the edge colour at every y — including through the wave
     transitions — instead of leaving white gutters on wide screens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* palette — sampled from the renders, never from CMYK swatch names */
  --pink:        #eb9696;   /* brand pink: buttons, bars, rules, badges */
  --pink-soft:   #ffe3db;   /* 人形の久月 band, footer */
  --pink-hdr:    #faf5f2;   /* header ground */
  --cream:       #f5f0f0;   /* category band ground */
  --ink:         #262832;   /* body text */
  --white:       #ffffff;

  /* type */
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --noto:   "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --maru:   "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;

  /* canvas */
  --canvas: 1366px;
  --half:   683px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 16px;
  line-height: 1.6;
  /* Illustrator half-widths punctuation only. "halt" matches that; "palt"
     also narrows kana and drifts a long line — see README note 6. */
  font-feature-settings: "halt" 1;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; border: 0; }
picture { display: block; }
/* photos are placed at measured boxes; if a box and the file disagree, crop — never squash */
.ab__ph img, .ab__shots img, .ab__front img, .ab__map img, .acs__map img,
.cat__item img, .fs__shots img, .fs__ph img, .fs__av img, .pr__main, .pr__hero img,
.pr__thumbs img, .ig__grid img, .shop__art img, .fv__slide img
  { width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
a[href] { transition: opacity .3s var(--ease), color .3s var(--ease); }
a[href]:hover { opacity: .78; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; font-size: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
/* 約物半角 — Illustrator trims punctuation per glyph. "halt" covers 、。・ in
   these families but NOT brackets, so brackets are trimmed by hand.
   Use the LOGICAL properties: margin-left does nothing useful in vertical text. */
.hw  { letter-spacing: -.5em; }          /* 、。 space on the right */
.hwc { margin-inline: -.25em; }          /* ・： both sides         */
.hwo { margin-inline-start: -.5em; }     /* （「『〈【 space before  */
.hwe { margin-inline-end: -.5em; }       /* ）」』〉】 space after   */

.sp-only { display: none; }
@media (max-width: 900px) {
  .sp-only { display: revert; }
  .pc-only { display: none; }
}

.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Canvas + bleed
   -------------------------------------------------------------------------- */
.site {
  position: relative;
  width: var(--canvas);
  height: var(--page-h);
  margin: 0 auto;
}
.decor--sp { display: none; }
.decor {
  position: absolute; inset: 0 auto auto 0;
  width: var(--canvas); height: var(--page-h);
  pointer-events: none; user-select: none;
  z-index: 0;
}
/* stretch the page's own edge colour outwards on wide viewports */
.bleed {
  position: absolute; top: 0; height: var(--page-h);
  width: max(0px, calc((100vw - 1366px) / 2));
  min-width: 0; z-index: 0; pointer-events: none;
  background-repeat: no-repeat; background-size: 100% 100%;
}
.bleed--l { right: 100%; }
.bleed--r { left: 100%; }

/* content sits above the decor. NB: never write `.site > *` here — it has the
   same specificity as .decor/.bleed and would silently un-absolute them
   (that turned a 4510px page into 13530px). */
.fv, .band-kyugetsu, .news, .cat, .shop, .ig, .acs,
.about, .prod, .first, .newsp, .form, .privacy { z-index: 1; }

/* --------------------------------------------------------------------------
   4. Header (85px, ground #faf5f2 + 七宝 pattern from the part file)
   -------------------------------------------------------------------------- */
.hdr {
  position: absolute; top: 0; left: 0; z-index: 30;
  width: var(--canvas); height: 85px;
}
.hdr__bleed {
  position: absolute; top: 0; height: 85px; width: max(0px, calc((100vw - 1366px) / 2));
  background: var(--pink-hdr);
}
.hdr__bleed--l { right: 100%; }
.hdr__bleed--r { left: 100%; }
.hdr__bg { position: absolute; inset: 0; width: var(--canvas); height: 85px; }
.hdr__logo { position: absolute; left: 47.5px; top: 23px; width: 229.7px; height: 38.7px; }
.hdr__logo img { width: 100%; height: 100%; }

.hdr__nav { position: absolute; left: 309.5px; top: 38.5px; }
.hdr__nav ul { display: flex; gap: 25.5px; }
.hdr__nav a {
  display: block;
  font-family: var(--gothic); font-weight: 500; font-size: 18px;
  line-height: 1; letter-spacing: 0; white-space: nowrap;
  transition: color .3s var(--ease);
}
.hdr__nav a:hover, .hdr__nav a[aria-current="page"] { color: var(--pink); }

/* SP-only chrome: keep it out of the PC flow, or its links overlay the page
   and intercept every click (this made the news year tabs unclickable). */
.hdr__menu, .spmenu { display: none; }

.hdr__ig { position: absolute; left: 1072.5px; top: 23.2px; width: 43px; height: 43px; }
.hdr__ig img { width: 100%; height: 100%; }
.hdr__shop {
  position: absolute; left: 1129px; top: 23px;
  width: 208.2px; height: 43.2px; border-radius: 21.6px;
  background: var(--pink); color: var(--white);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--gothic); font-weight: 500; font-size: 17px; line-height: 1;
  transition: background-color .3s var(--ease);
}
.hdr__shop:hover { background: #e07f7f; }
.hdr__shop svg { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   5. Footer (380px, ground #ffe3db + 七宝 pattern)
   -------------------------------------------------------------------------- */
.ftr {
  position: absolute; left: 0; top: var(--footer-y); z-index: 20;
  width: var(--canvas); height: 380px;
}
.ftr__bleed {
  position: absolute; top: 0; height: 380px; width: max(0px, calc((100vw - 1366px) / 2));
  background: var(--pink-soft);
}
.ftr__bleed--l { right: 100%; }
.ftr__bleed--r { left: 100%; }
.ftr__bg { position: absolute; inset: 0; width: var(--canvas); height: 380px; }
.ftr > * { position: absolute; }

.ftr__logo { left: 186.3px; top: 65.7px; width: 188.4px; height: 29.3px; }
.ftr__logo picture, .ftr__logo img { width: 100%; height: 100%; }
.ftr__addr {
  left: 186.2px; top: 104px;
  font-family: var(--gothic); font-weight: 400; font-size: 13px;
  line-height: 22px; letter-spacing: .054em; white-space: nowrap;
}
.ftr__nav { font-family: var(--gothic); }
.ftr__nav > li > a, .ftr__nav > li > span {
  display: block; font-weight: 500; font-size: 18px; line-height: 1;
  letter-spacing: .02em; white-space: nowrap;
}
.ftr__nav a { transition: color .3s var(--ease); }
.ftr__nav a:hover { color: #c96a6a; }
.ftr__sub { margin-top: 11px; }
.ftr__sub li + li { margin-top: 12.7px; }
.ftr__sub a {
  display: block; font-weight: 400; font-size: 14px; line-height: 1;
  letter-spacing: .02em; white-space: nowrap;
}
.ftr__sub a::before { content: "− "; }

.ftr__col--a { left: 452.8px; top: 64.8px; }
.ftr__col--a .ftr__sub { padding-left: 4px; }
.ftr__col--a .ftr__gap { margin-top: 20px; }
.ftr__col--b { left: 660px;   top: 97.7px; }
.ftr__col--c { left: 844.7px; top: 97.7px; }
.ftr__col--d { left: 1048px;  top: 97.7px; }
.ftr__col--d li + li { margin-top: 33px; }

.ftr__sns { left: 1085.3px; top: 239.3px; display: flex; gap: 26.7px; }
.ftr__sns a { display: block; width: 59.7px; height: 59.7px; transition: opacity .3s var(--ease); }
.ftr__sns a:hover { opacity: .75; }
.ftr__sns img { width: 100%; height: 100%; }

.ftr__top {
  left: 1278px; top: 4300px; /* overridden per page via --pagetop-y */
  top: var(--pagetop-y, 300px);
  width: 87px; height: 79px; background: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--gothic); font-weight: 400; font-size: 11px; letter-spacing: .06em;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.ftr__top:hover { background: #fffdfc; transform: translateY(-2px); }
.ftr__copy {
  left: 0; top: 344.5px; width: var(--canvas); text-align: center;
  font-family: var(--gothic); font-weight: 400; font-size: 18px; line-height: 1;
  letter-spacing: .034em;
}

/* --------------------------------------------------------------------------
   6. Shared page furniture
   -------------------------------------------------------------------------- */
/* section heading — 明朝 Bold, widely tracked (measured 0.2em at 40px) */
.h-sec {
  font-family: var(--mincho); font-weight: 700; color: var(--pink);
  font-size: 40px; line-height: 1.155; letter-spacing: .2em; white-space: nowrap;
}
.rule-pink { background: var(--pink); height: 1px; }

/* pill button (一覧を見る etc.) */
.btn-pill {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--pink); border-radius: 999px; background: var(--white);
  font-family: var(--gothic); font-weight: 500; font-size: 20px; line-height: 1;
  letter-spacing: .2em; color: var(--ink);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.btn-pill > span { text-indent: .1em; }
.btn-pill:hover { background: var(--pink); color: var(--white); }
.btn-pill:hover .btn-pill__arw circle { stroke: var(--white); }
.btn-pill:hover .btn-pill__arw path { stroke: var(--white); }
.btn-pill__arw { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }


/* --------------------------------------------------------------------------
   7. SP — the SP artboards are their own fixed canvas (390 x N).
   1em = 10px at 390 wide (font-size: 100vw/39), so every measured SP px is
   written as (px/10)em and the whole page scales fluidly with the viewport
   instead of breaking at odd widths.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .site {
    --u: calc(100vw / 39);   /* 1 unit = 10px of the 390px SP artboard */
    width: calc(39 * var(--u)); height: var(--sp-page-h);
    font-size: calc(1 * var(--u));
  }
  .decor--pc { display: none; }
  .decor--sp { display: block; width: calc(39 * var(--u)); height: var(--sp-page-h); }
  .bleed { display: none; }

  /* ---- header (390 x 70) ---- */
  .hdr { width: calc(39 * var(--u)); height: calc(7 * var(--u)); }
  .hdr__bleed { display: none; }
  .hdr__bg { width: calc(39 * var(--u)); height: calc(7 * var(--u)); object-fit: cover; }
  .hdr__logo { left: calc(2.6 * var(--u)); top: calc(1.98 * var(--u)); width: calc(19.47 * var(--u)); height: calc(3.27 * var(--u)); }
  .hdr__nav, .hdr__ig, .hdr__shop { display: none; }

  .hdr__menu {
    display: flex; position: absolute; left: calc(32.7 * var(--u)); top: calc(1.1 * var(--u)); width: calc(5 * var(--u)); height: calc(4.95 * var(--u));
    background: var(--pink); border-radius: .8em; color: var(--white);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em;
  }
  .hdr__bars { display: block; width: calc(2.9 * var(--u)); }
  .hdr__bars i { display: block; height: .22em; background: currentColor; border-radius: .2em; }
  .hdr__bars i + i { margin-top: .42em; }
  .hdr__menu-lbl { font-family: var(--gothic); font-weight: 900; font-size: calc(1.42 * var(--u)); line-height: 1; letter-spacing: .02em; }
  .hdr__menu { transition: background-color .3s var(--ease); }
  .hdr__menu:hover { background: #e07f7f; }

  /* ---- slide-in menu (390 x 470) ---- */
  .spmenu {
    display: block; position: fixed; inset: 0; z-index: 60; background: rgba(38,40,50,.34);
    overflow: hidden; clip-path: inset(0);   /* the off-screen panel must not widen the document */
    opacity: 0; visibility: hidden; transition: opacity .32s var(--ease), visibility .32s var(--ease);
  }
  .spmenu.is-open { opacity: 1; visibility: visible; }
  .spmenu__panel {
    position: absolute; right: 0; top: 0; width: calc(39 * var(--u)); max-width: 100%; height: calc(47 * var(--u));
    background: var(--white); font-size: calc(100vw / 39);
    transform: translateX(100%); transition: transform .32s var(--ease);
    overflow: auto;
  }
  .spmenu.is-open .spmenu__panel { transform: none; }
  .spmenu__bar { position: relative; height: calc(7 * var(--u)); background: #fcecef; }
  .spmenu__ttl {
    position: absolute; left: 0; right: 0; top: calc(2.4 * var(--u)); text-align: center;
    font-family: var(--gothic); font-weight: 700; font-size: calc(2.98 * var(--u));
    line-height: 1; letter-spacing: .06em; color: #754c24;
  }
  .spmenu__close {
    position: absolute; left: calc(32.7 * var(--u)); top: calc(1.1 * var(--u)); width: calc(5 * var(--u)); height: calc(4.95 * var(--u));
    background: var(--pink); border-radius: .8em; color: var(--white);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em;
  }
  .spmenu__list { padding: 0 0 0 0; }
  .spmenu__list li { position: relative; }
  .spmenu__list a {
    display: flex; align-items: center; height: calc(4.71 * var(--u)); margin: 0 calc(5.55 * var(--u)) 0 calc(6.05 * var(--u));
    font-family: var(--gothic); font-weight: 400; font-size: calc(1.8 * var(--u));
    letter-spacing: .06em; color: var(--ink);
  }
  .spmenu__list li::after {
    content: ""; position: absolute; left: calc(5.55 * var(--u)); right: calc(5.45 * var(--u)); bottom: 0;
    height: 1px; background: #cfc7c4;
  }
  .spmenu__list a::after {
    content: ""; position: absolute; right: -3.2em; width: calc(1.95 * var(--u)); height: calc(1.95 * var(--u));
    border-radius: 50%; border: 1px solid var(--pink);
    background: no-repeat center/.5em .7em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='10' viewBox='0 0 7 10'%3E%3Cpath d='M1.2.9 5.4 5l-4.2 4.1' fill='none' stroke='%23eb9696' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .spmenu__sns { position: absolute; left: calc(20.9 * var(--u)); top: calc(38.95 * var(--u)); display: flex; gap: calc(2.4 * var(--u)); }
  .spmenu__sns a { display: block; width: calc(5.2 * var(--u)); height: calc(5.2 * var(--u)); }
  .spmenu__sns img { width: 100%; height: 100%; }

  /* ---- footer (390 x 351.8) ---- */
  .ftr { width: calc(39 * var(--u)); height: calc(35.18 * var(--u)); top: var(--sp-footer-y); }
  .ftr__bleed { display: none; }
  .ftr__bg { width: calc(39 * var(--u)); height: calc(35.18 * var(--u)); object-fit: cover; }
  .ftr__logo { left: calc(9.77 * var(--u)); top: calc(4.8 * var(--u)); width: calc(19.46 * var(--u)); height: calc(3.27 * var(--u)); }
  .ftr__addr, .ftr__sub, .ftr__top { display: none; }
  .ftr__nav > li > a, .ftr__nav > li > span {
    font-size: calc(1.2 * var(--u)); letter-spacing: .04em; line-height: 1;
  }
  .ftr__nav > li + li { margin-top: calc(1.8 * var(--u)); }
  .ftr__col--a { left: calc(6.167 * var(--u)); top: calc(10.35 * var(--u)); }
  .ftr__col--a .ftr__gap { margin-top: calc(1.8 * var(--u)); }
  .ftr__col--b { left: calc(20.837 * var(--u)); top: calc(10.35 * var(--u)); }
  .ftr__col--c { left: calc(20.837 * var(--u)); top: calc(13.35 * var(--u)); }
  .ftr__col--d { left: calc(20.837 * var(--u)); top: calc(16.35 * var(--u)); }
  .ftr__col--d li + li { margin-top: calc(1.8 * var(--u)); }
  .ftr__sns { left: calc(20.9 * var(--u)); top: calc(24.07 * var(--u)); display: flex; gap: calc(2.4 * var(--u)); }
  .ftr__sns a { width: calc(5.15 * var(--u)); height: calc(5.15 * var(--u)); }
  .ftr__copy { left: 0; top: calc(31.7 * var(--u)); width: calc(39 * var(--u)); font-size: calc(1.1 * var(--u)); letter-spacing: .04em; }
}