@charset "UTF-8";
/* ==========================================================================
   商品のご紹介 — PC canvas 1366 x 6892.5
   header 0–85 | title 139.6 | circles 258–411.5 | 久月 band 433–575
   雛人形 745–1531 | 五月人形 1670–2559 | 鯉のぼり 2737–3580
   名前旗 3698–4588 | 正月飾り 4781–5591 | shop 5821–6372 | band 6459–6512.5

   The section titles and descriptions are TATEGAKI (縦書き) in the design.
   writing-mode: vertical-rl reproduces that; each block is given the design's
   own height so the columns cannot collapse, and "vhal" half-widths the
   vertical punctuation the way Illustrator does.
   ========================================================================== */
.pr { position: absolute; left: 0; top: 0; width: 1366px; height: 1px; }
.pr > * { position: absolute; }

.pr__title {
  left: 544.8px; top: 135.1px;
  font-family: var(--mincho); font-weight: 700; font-size: 40px;
  line-height: 46.2px; letter-spacing: .2em; color: var(--pink); white-space: nowrap;
}
.pr__lead {
  left: 0; top: 202.6px; width: 1366px; text-align: center;
  font-family: var(--gothic); font-weight: 400; font-size: 20px;
  line-height: 21.9px; letter-spacing: .075em; text-indent: .075em;
}
.pr__hero { left: 1075px; top: 85px; width: 291px; height: 327px; }

.pr__anchors { left: 0; top: 0; width: 1366px; }
.pr__circle {
  position: absolute; top: 258px; width: 153px; height: 153.5px; border-radius: 50%;
  background: var(--pink); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mincho); font-weight: 700; font-size: 20px;
  line-height: 23.1px; letter-spacing: .07em; text-indent: .07em; white-space: nowrap;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.pr__circle:hover { background: #e07f7f; transform: translateY(-3px); }
.pr__circle--1 { left: 215.9px; }
.pr__circle--2 { left: 409.6px; }
.pr__circle--3 { left: 604.1px; }
.pr__circle--4 { left: 798px;   }
.pr__circle--5 { left: 992.3px; }

.pr__kyugetsu {
  left: 0; top: 460.8px; width: 1366px; text-align: center;
  font-family: var(--mincho); font-weight: 700; font-size: 35px;
  line-height: 40.5px; letter-spacing: .11em; text-indent: .11em;
}
.pr__kyugetsu-sub {
  left: 0; top: 513.4px; width: 1366px; text-align: center;
  font-family: var(--mincho); font-weight: 700; font-size: 25px;
  line-height: 28.9px; letter-spacing: .09em; text-indent: .09em;
}

/* --------------------------------------------------------- 5 sections ---- */
.pr__sec { left: 0; width: 1366px; }
.pr__sec--1 { top: 745.6px; }
.pr__sec--2 { top: 1670.2px; }
.pr__sec--3 { top: 2737.7px; }
.pr__sec--4 { top: 3698.4px; }
.pr__sec--5 { top: 4781.2px; }
.pr__sec > * { position: absolute; }

/* tategaki title */
.pr__ttl {
  z-index: 3;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--mincho); font-weight: 700; font-size: 42px;
  line-height: 1; letter-spacing: .135em; white-space: nowrap;
  font-feature-settings: "halt" 1, "vhal" 1;
}
/* each category has its own title colour in the design */
.pr__sec--1 .pr__ttl { left: 1015.5px; top: 0; height: 143px; color: #eb9696; }
.pr__sec--2 .pr__ttl { left: 578.2px;  top: 0; height: 194px; color: #4a6394; }
.pr__sec--3 .pr__ttl { left: 1015.5px; top: 0; height: 194px; color: #c7b273; }
.pr__sec--4 .pr__ttl { left: 578.2px;  top: 0; height: 158px; color: #9c5594; }
.pr__sec--5 .pr__ttl { left: 1015.5px; top: 0; height: 194px; color: #6bc385; }

/* tategaki description — the design's own box height keeps the columns intact */
.pr__desc {
  z-index: 3;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--gothic); font-weight: 400; font-size: 20px;
  letter-spacing: .02em; color: var(--ink);
  font-feature-settings: "halt" 1, "vhal" 1;
}
.pr__sec--1 .pr__desc { left: 680.2px; top: 38.9px;  width: 270px; height: 406px; line-height: 45px; }
.pr__sec--2 .pr__desc { left: 292.9px; top: 39px;    width: 220px; height: 494px; line-height: 44px; }
.pr__sec--3 .pr__desc { left: 630.2px; top: 38.9px;  width: 320px; height: 384px; line-height: 45.7px; }
.pr__sec--4 .pr__desc { left: 292.9px; top: 38.9px;  width: 220px; height: 516px; line-height: 44px; }
.pr__sec--5 .pr__desc { left: 730.2px; top: 39px;    width: 220px; height: 450px; line-height: 44px; }

.pr__main { border-radius: 12px; z-index: 1; }
.pr__sec--1 .pr__main { left: 166.5px; top: 4.9px;   width: 480px;   height: 468px; border-radius: 50%/46%; }
.pr__sec--2 .pr__main { left: 665px;   top: 109.8px; width: 431px;   height: 432.5px; border-radius: 50%; }
.pr__sec--3 .pr__main { left: 184.5px; top: 153.3px; width: 508.5px; height: 358px; }
.pr__sec--4 .pr__main { left: 557px;   top: -79.9px; width: 527.5px; height: 658px; }
.pr__sec--5 .pr__main { left: 240.5px; top: 26.8px;  width: 414.5px; height: 442px; }

.pr__thumbs { position: absolute; width: max-content; display: flex; z-index: 2; }
.pr__sec--1 .pr__thumbs { top: 499.4px; left: 184px;   gap: 9.5px; }
.pr__sec--2 .pr__thumbs { top: 578.8px; left: 352.5px; gap: 41px; }
.pr__sec--3 .pr__thumbs { top: 538.3px; left: 184.5px; gap: 40.5px; }
.pr__sec--4 .pr__thumbs { top: 604.1px; left: 184px;   gap: 40.5px; }
.pr__sec--5 .pr__thumbs { top: 524.3px; left: 184.5px; gap: 28.5px; align-items: flex-start; }
.pr__thumbs img { display: block; border-radius: 6px; }
.pr__sec--1 .pr__thumbs img { width: 192.5px; height: 172px; }
.pr__sec--2 .pr__thumbs img { width: 306px;   height: 209px; }
.pr__sec--3 .pr__thumbs img { width: 306px;   height: 209.5px; }
.pr__sec--4 .pr__thumbs img { width: 306.5px; height: 209.5px; }
.pr__sec--5 .pr__thumbs li:nth-child(2) img { width: 320px; height: 285.5px; }
.pr__sec--5 .pr__thumbs li:nth-child(1) img,
.pr__sec--5 .pr__thumbs li:nth-child(3) img { width: 306px; height: 209.5px; }
.pr__cap {
  display: block; margin-top: 12.5px; text-align: center;
  font-family: var(--gothic); font-weight: 400; font-size: 18px;
  line-height: 19.7px; letter-spacing: .04em;
}

.pr__more {
  z-index: 3;
  left: 519px; width: 320px; height: 50px;
  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: .1em; color: var(--ink);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.pr__more > span { text-indent: .1em; }
.pr__more:hover { background: var(--pink); color: var(--white); }
.pr__more:hover circle, .pr__more:hover path { stroke: #fff; }
.pr__arw { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); }
.pr__sec--1 .pr__more { top: 734.9px; }
.pr__sec--2 .pr__more { top: 838.3px; }
.pr__sec--3 .pr__more { top: 791.8px; }
.pr__sec--4 .pr__more { top: 839.6px; }
.pr__sec--5 .pr__more { top: 761.4px; }

/* ------------------------------------------------------------ shop card -- */
.pr__shop { left: 0; top: 0; width: 1366px; }
.pr__shop > * { position: absolute; }
.pr__shopcard { left: 183px; top: 5821px; width: 1002px; height: 552px; }
.pr__shop-h {
  left: 0; top: 5888.8px; width: 1366px; text-align: center;
  font-family: var(--mincho); font-weight: 900; font-size: 40px;
  line-height: 46.5px; letter-spacing: .04em; text-indent: .04em; color: var(--pink);
}
.pr__shop-lead {
  left: 0; top: 5979.2px; width: 1366px; text-align: center;
  font-family: var(--gothic); font-weight: 400; font-size: 20px;
  line-height: 33.3px; letter-spacing: .04em; text-indent: .04em;
}
.pr__svc {
  top: 6144.8px; width: 145.2px; text-align: center; color: var(--white);
  font-family: var(--mincho); font-weight: 900; font-size: 35px;
  line-height: 40.35px; letter-spacing: .02em;
}
.pr__svc--1 { left: 322px; }
.pr__svc--2 { left: 611.3px; }
.pr__svc--3 { left: 900.6px; }
.pr__shop-btn {
  left: 416px; top: 6282px; width: 536px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--pink); border-radius: 999px;
  font-family: var(--gothic); font-weight: 500; font-size: 20px;
  line-height: 1; letter-spacing: .06em; text-indent: .06em; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.pr__shop-btn::after {
  content: ""; position: absolute; right: 26px; width: 26px; height: 26px;
  border-radius: 50%; border: 1px solid var(--pink);
  background: no-repeat center/9px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='12' viewBox='0 0 9 12'%3E%3Cpath d='M1.4 1 7 6l-5.6 5' fill='none' stroke='%23eb9696' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pr__shop-btn:hover { background: var(--pink-soft); }

/* ----------------------------------------------------------------- band -- */
.pr__band { left: 0; top: 6459px; width: 1366px; height: 53.5px; background: var(--pink); }
.pr__band-bleed {
  position: absolute; top: 0; height: 53.5px;
  width: max(0px, calc((100vw - 1366px) / 2)); background: var(--pink);
}
.pr__band-bleed--l { right: 100%; }
.pr__band-bleed--r { left: 100%; }
.pr__band-txt {
  position: absolute; left: 0; top: 6px; width: 1366px; text-align: center;
  font-family: var(--mincho); font-weight: 900; font-size: 33px;
  line-height: 38.4px; letter-spacing: .09em; text-indent: .09em; color: var(--white);
}

/* ==========================================================================
   SP — canvas 390 x 2970.2 | header 0–70 | title 102.3 | pills 165–305
   久月 332–370 | 雛人形 444–850 | 五月人形 897–1190 | 鯉のぼり 1245–1565
   名前旗 1601–1910 | 正月飾り 1962–2250 | shop 2330–2560 | footer 2618.5
   The SP artboard keeps the tategaki titles and descriptions.
   ========================================================================== */
@media (max-width: 900px) {
  .pr { width: calc(39 * var(--u)); }
  .pr__title { left: 0; top: calc(9.8 * var(--u)); width: calc(39 * var(--u)); text-align: center;
               font-size: calc(2.3 * var(--u)); line-height: 1.16; letter-spacing: .1em; text-indent: .1em; }
  .pr__lead { left: 0; top: calc(13.4 * var(--u)); width: calc(39 * var(--u));
              font-size: calc(1.5 * var(--u)); line-height: 1.1; letter-spacing: .04em; text-indent: .04em; }
  .pr__hero { left: calc(22.12 * var(--u)); top: calc(23.81 * var(--u)); width: calc(16.9 * var(--u)); height: calc(13.5 * var(--u)); }

  .pr__anchors { width: calc(39 * var(--u)); }
  .pr__circle {
    width: calc(13.13 * var(--u)); height: calc(3.98 * var(--u)); border-radius: calc(.4 * var(--u));
    font-size: calc(1.7 * var(--u)); line-height: 1.16; letter-spacing: .06em; text-indent: .06em;
  }
  .pr__circle:hover { transform: none; }
  /* the SP artboard reorders the pills: 雛人形｜名前旗 / 五月人形｜正月飾り / 鯉のぼり */
  .pr__circle--1 { left: calc(5.32 * var(--u)); top: calc(16.5 * var(--u)); }
  .pr__circle--2 { left: calc(5.32 * var(--u)); top: calc(21.52 * var(--u)); }
  .pr__circle--3 { left: calc(5.32 * var(--u)); top: calc(26.55 * var(--u)); }
  .pr__circle--4 { left: calc(20.54 * var(--u)); top: calc(16.5 * var(--u)); }
  .pr__circle--5 { left: calc(20.54 * var(--u)); top: calc(21.52 * var(--u)); }

  .pr__kyugetsu { left: 0; top: calc(32.9 * var(--u)); width: calc(39 * var(--u));
                  font-size: calc(1.6 * var(--u)); line-height: 1.16; letter-spacing: .08em; text-indent: .08em; }
  .pr__kyugetsu-sub { left: 0; top: calc(35.4 * var(--u)); width: calc(39 * var(--u));
                      font-size: calc(1.1 * var(--u)); line-height: 1.16; letter-spacing: .06em; text-indent: .06em; }

  .pr__sec { width: calc(39 * var(--u)); }
  .pr__sec--1 { top: calc(44.43 * var(--u)); }
  .pr__sec--2 { top: calc(89.77 * var(--u)); }
  .pr__sec--3 { top: calc(124.59 * var(--u)); }
  .pr__sec--4 { top: calc(160.17 * var(--u)); }
  .pr__sec--5 { top: calc(196.21 * var(--u)); }

  .pr__ttl { font-size: calc(1.7 * var(--u)); letter-spacing: .13em; }
  .pr__sec--1 .pr__ttl { left: calc(31.57 * var(--u)); top: 0; height: calc(5.78 * var(--u)); }
  .pr__sec--2 .pr__ttl { left: calc(18.63 * var(--u)); top: 0; height: calc(7.82 * var(--u)); }
  .pr__sec--3 .pr__ttl { left: calc(31.51 * var(--u)); top: 0; height: calc(7.82 * var(--u)); }
  .pr__sec--4 .pr__ttl { left: calc(18.29 * var(--u)); top: 0; height: calc(6.39 * var(--u)); }
  .pr__sec--5 .pr__ttl { left: calc(31.82 * var(--u)); top: 0; height: calc(7.82 * var(--u)); }

  .pr__desc { font-size: calc(1 * var(--u)); letter-spacing: .01em; }
  .pr__sec--1 .pr__desc { left: calc(18.28 * var(--u)); top: calc(.68 * var(--u)); width: calc(11.8 * var(--u)); height: calc(16.55 * var(--u)); line-height: 1.686; }
  .pr__sec--2 .pr__desc { left: calc(5.42 * var(--u));  top: calc(.75 * var(--u)); width: calc(11.8 * var(--u)); height: calc(17.12 * var(--u)); line-height: 1.686; }
  .pr__sec--3 .pr__desc { left: calc(18.56 * var(--u)); top: calc(.38 * var(--u)); width: calc(11.8 * var(--u)); height: calc(18.69 * var(--u)); line-height: 1.686; }
  .pr__sec--4 .pr__desc { left: calc(5.29 * var(--u));  top: calc(1.11 * var(--u)); width: calc(11.8 * var(--u)); height: calc(17.05 * var(--u)); line-height: 1.686; }
  .pr__sec--5 .pr__desc { left: calc(18.65 * var(--u)); top: calc(1.11 * var(--u)); width: calc(11.8 * var(--u)); height: calc(15.98 * var(--u)); line-height: 1.686; }

  /* section photo: the SP artboard crops it tighter — reuse the PC asset */
  .pr__main { border-radius: calc(.8 * var(--u)); }
  .pr__sec--1 .pr__main { left: calc(3.6 * var(--u));  top: calc(3.2 * var(--u));  width: calc(13 * var(--u)); height: calc(12.7 * var(--u)); border-radius: 50%/46%; }
  .pr__sec--2 .pr__main { left: calc(20 * var(--u));   top: calc(3.5 * var(--u));  width: calc(13.5 * var(--u)); height: calc(13.5 * var(--u)); border-radius: 50%; }
  .pr__sec--3 .pr__main { left: calc(3.6 * var(--u));  top: calc(10.4 * var(--u)); width: calc(15 * var(--u)); height: calc(10.5 * var(--u)); }
  .pr__sec--4 .pr__main { left: calc(19 * var(--u));   top: calc(.1 * var(--u));   width: calc(15 * var(--u)); height: calc(18.7 * var(--u)); }
  .pr__sec--5 .pr__main { left: calc(3.6 * var(--u));  top: calc(3 * var(--u));    width: calc(12.5 * var(--u)); height: calc(13.3 * var(--u)); }

  .pr__thumbs { flex-wrap: wrap; }
  .pr__sec--1 .pr__thumbs { left: calc(5.4 * var(--u)); top: calc(21.5 * var(--u)); gap: calc(.6 * var(--u)) calc(.9 * var(--u)); width: calc(28.2 * var(--u)); }
  .pr__sec--2 .pr__thumbs { left: calc(9.5 * var(--u)); top: calc(21.5 * var(--u)); gap: calc(.9 * var(--u)); }
  .pr__sec--3 .pr__thumbs { left: calc(5.4 * var(--u)); top: calc(22.5 * var(--u)); gap: calc(.9 * var(--u)); }
  .pr__sec--4 .pr__thumbs { left: calc(5.4 * var(--u)); top: calc(24.5 * var(--u)); gap: calc(.9 * var(--u)); }
  .pr__sec--5 .pr__thumbs { left: calc(5.4 * var(--u)); top: calc(20.5 * var(--u)); gap: calc(.9 * var(--u)); }
  .pr__sec--1 .pr__thumbs img { width: calc(8.8 * var(--u)); height: calc(7.9 * var(--u)); }
  .pr__sec--2 .pr__thumbs img,
  .pr__sec--3 .pr__thumbs img,
  .pr__sec--4 .pr__thumbs img { width: calc(8.8 * var(--u)); height: calc(6 * var(--u)); }
  .pr__sec--5 .pr__thumbs li:nth-child(2) img { width: calc(8.8 * var(--u)); height: calc(8 * var(--u)); }
  .pr__sec--5 .pr__thumbs li:nth-child(1) img,
  .pr__sec--5 .pr__thumbs li:nth-child(3) img { width: calc(8.8 * var(--u)); height: calc(6 * var(--u)); }
  .pr__thumbs img { border-radius: calc(.3 * var(--u)); }
  .pr__cap { margin-top: calc(.6 * var(--u)); font-size: calc(.9 * var(--u)); line-height: 1.1; }

  .pr__more { left: calc(11.9 * var(--u)); width: calc(15.2 * var(--u)); height: calc(2.6 * var(--u)); font-size: calc(1 * var(--u)); }
  .pr__more > span { font-size: calc(1 * var(--u)); }
  .pr__arw { right: calc(.8 * var(--u)); width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); }
  .pr__sec--1 .pr__more { top: calc(38.65 * var(--u)); }
  .pr__sec--2 .pr__more { top: calc(27.32 * var(--u)); }
  .pr__sec--3 .pr__more { top: calc(30.2 * var(--u)); }
  .pr__sec--4 .pr__more { top: calc(29.14 * var(--u)); }
  .pr__sec--5 .pr__more { top: calc(27.05 * var(--u)); }

  .pr__shop { width: calc(39 * var(--u)); }
  .pr__shopcard { left: calc(2.5 * var(--u)); top: calc(230 * var(--u)); width: calc(34 * var(--u)); height: calc(31 * var(--u)); }
  .pr__shop-h { left: 0; top: calc(233.9 * var(--u)); width: calc(39 * var(--u));
                font-size: calc(1.5 * var(--u)); line-height: 1.16; letter-spacing: .04em; text-indent: .04em; }
  .pr__shop-lead { left: 0; top: calc(237.2 * var(--u)); width: calc(39 * var(--u));
                   font-size: calc(1 * var(--u)); line-height: 1.85; letter-spacing: .02em; text-indent: 0; }
  .pr__svc { top: calc(246.3 * var(--u)); width: calc(5 * var(--u));
             font-size: calc(1.2 * var(--u)); line-height: 1.2; letter-spacing: .02em; }
  .pr__svc--1 { left: calc(8.85 * var(--u)); }
  .pr__svc--2 { left: calc(17 * var(--u)); }
  .pr__svc--3 { left: calc(25.15 * var(--u)); }
  .pr__shop-btn { left: calc(9.5 * var(--u)); top: calc(251.5 * var(--u));
                  width: calc(20 * var(--u)); height: calc(2.8 * var(--u));
                  font-size: calc(1.1 * var(--u)); letter-spacing: .04em; text-indent: .04em; }
  .pr__shop-btn::after { right: calc(.8 * var(--u)); width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); }
  .pr__band { display: none; }
}