@charset "UTF-8";
/* ==========================================================================
   Top page — PC canvas 1366 x 4510
   Coordinates are page coordinates measured off the design render:
     header 0–85 | hero 85–853 | 久月 band 853–922.5 | news | category
     1666–2285 | online shop 2320–2720 | instagram 2881–3216 | access
     3308–4026 | footer 4130–4510
   ========================================================================== */

/* ---------------------------------------------------------------- hero ---- */
.fv { position: absolute; left: 0; top: 0; width: 1366px; height: 1px; }
.fv__stage {
  position: absolute; top: 85px; left: 50%; transform: translateX(-50%);
  width: max(1366px, 100vw); height: 768px; overflow: hidden;
}
.fv__slides { position: absolute; inset: 0; }
.fv__slide {
  position: absolute; inset: 0; display: block;
  opacity: 0; transition: opacity .9s var(--ease);
}
.fv__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fv__slide.is-on { opacity: 1; }

.fv__lead {
  position: absolute; left: 596.3px; top: 110.3px;
  font-family: var(--mincho); font-weight: 700; font-size: 23px;
  line-height: 26.6px; letter-spacing: .030em; white-space: nowrap;
  color: var(--ink);
}
.fv__badge {
  position: absolute; top: 146px; height: 26.5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border-radius: 4px;
  font-family: var(--mincho); font-weight: 700; font-size: 17px;
  line-height: 1; letter-spacing: .015em; color: #ed8099; white-space: nowrap;
}
.fv__badge--1 { left: 878px;   width: 140px; }
.fv__badge--2 { left: 1027.5px; width: 259px; }

.fv__ctrl {
  position: absolute; left: 590px; top: 790px;
  display: flex; align-items: center; gap: 3px; height: 36px;
}
.fv__dot {
  width: 21px; height: 21px; border-radius: 50%;
  border: 1.6px solid var(--white); background: transparent;
  transition: background-color .3s var(--ease);
}
.fv__dot.is-on { background: var(--white); }
.fv__dot:hover { background: rgba(255,255,255,.55); }
.fv__pause { margin-left: 9px; width: 36px; height: 36px; line-height: 0;
  transition: opacity .3s var(--ease); }
.fv__pause:hover { opacity: .7; }

/* --------------------------------------------------------- 久月 band ---- */
.band-kyugetsu {
  position: absolute; left: 0; top: 853px; width: 1366px; height: 69.5px;
  background: var(--pink-soft);
}
.band-kyugetsu__bleed {
  position: absolute; top: 0; height: 69.5px;
  width: max(0px, calc((100vw - 1366px) / 2)); background: var(--pink-soft);
}
.band-kyugetsu__bleed--l { right: 100%; }
.band-kyugetsu__bleed--r { left: 100%; }
.band-kyugetsu__txt {
  position: absolute; left: 460.7px; top: 12.1px;
  font-family: var(--mincho); font-weight: 700; font-size: 38px;
  line-height: 43.9px; letter-spacing: .075em; white-space: nowrap;
  color: var(--ink);
}

/* ---------------------------------------------------------------- news ---- */
.news { position: absolute; left: 0; top: 0; width: 1366px; height: 1px; }
.news__h   { position: absolute; left: 424.8px; top: 965.4px; }
.news__rule { position: absolute; left: 283px; top: 1038px; width: 801px; }
.news__list { position: absolute; left: 0; top: 0; width: 1366px; }
.news__item { position: absolute; left: 0; width: 1366px; }
.news__list > li:nth-child(1) { top: 1065.9px; }
.news__list > li:nth-child(2) { top: 1154.2px; }
.news__list > li:nth-child(3) { top: 1242.4px; }
.news__date {
  position: absolute; left: 290.8px; top: 0;
  font-family: var(--gothic); font-weight: 500; font-size: 20px;
  line-height: 21.7px; letter-spacing: .098em; color: var(--pink);
  white-space: nowrap;
}
.news__body {
  position: absolute; left: 429.2px; top: -5.65px;
  font-family: var(--gothic); font-weight: 400; font-size: 16px;
  line-height: 35.5px; letter-spacing: .080em; white-space: nowrap;
}
.news__more {
  position: absolute; left: 525px; top: 1338.5px; width: 319px; height: 49.5px;
}

/* ------------------------------------------------------------ category ---- */
.cat { position: absolute; left: 0; top: 0; width: 1366px; height: 1px; }
.cat__h { position: absolute; left: 448.8px; top: 1587.6px; }
.cat__item { position: absolute; width: 307px; height: 291px; }
.cat__item--1 { left: 183px; top: 1666px; }
.cat__item--2 { left: 530px; top: 1666px; }
.cat__item--3 { left: 877px; top: 1666px; }
.cat__item--4 { left: 356px; top: 1995px; }
.cat__item--5 { left: 703px; top: 1995px; }
.cat__item > a { display: block; position: relative; width: 307px; height: 291px; }
.cat__item picture {
  display: block; position: absolute; left: 0; top: 0;
  width: 307px; height: 224px; border-radius: 8px 8px 0 0; overflow: hidden;
}
.cat__item--4 picture, .cat__item--5 picture { height: 219.5px; }
.cat__item img { width: 100%; height: 100%; transition: filter .35s var(--ease); }
/* the pink label bar is a flat rect in the design — rebuilt in CSS so the photo
   crop carries no baked text and keeps the truth's colour exactly */
.cat__bar {
  position: absolute; left: 0; bottom: 0; width: 307px; height: 66.5px;
  background: var(--pink); border-radius: 0 0 8px 8px;
}
.cat__item--4 .cat__bar, .cat__item--5 .cat__bar { height: 70.5px; }
.cat__item > a:hover img { filter: brightness(1.05); }
.cat__name, .cat__sub {
  position: absolute; display: block; color: var(--white);
  font-family: var(--noto); font-weight: 100; white-space: nowrap;
}
.cat__name { font-size: 26px; line-height: 50.2px; letter-spacing: .05em; }
.cat__sub  { font-size: 16px; line-height: 30.9px; letter-spacing: .05em; }
/* label positions are page coords minus the card origin */
.cat__item--1 .cat__name { left: 112.8px; top: 218.2px; }
.cat__item--1 .cat__sub  { left:  52.4px; top: 257.7px; }
.cat__item--2 .cat__name { left:  98.7px; top: 217.7px; }
.cat__item--2 .cat__sub  { left:  53.0px; top: 257.6px; }
.cat__item--3 .cat__name { left: 114.0px; top: 218.2px; }
.cat__item--3 .cat__sub  { left:  60.2px; top: 257.7px; }
.cat__item--4 .cat__name { left:  86.3px; top: 212.5px; }
.cat__item--4 .cat__sub  { left:  75.0px; top: 252.4px; }
.cat__item--5 .cat__name { left: 101.5px; top: 212.9px; }
.cat__item--5 .cat__sub  { left:  75.3px; top: 252.4px; }

/* --------------------------------------------------------- online shop ---- */
.shop { position: absolute; left: 0; top: 0; width: 1366px; height: 1px; }
.shop__art { position: absolute; left: 150px; top: 2320px; width: 1060px; height: 400px; display: block; }
.shop__art img { width: 100%; height: 100%; }
.shop__h {
  position: absolute; left: 406.1px; top: 2394.1px;
  font-family: var(--mincho); font-weight: 900; font-size: 40px;
  line-height: 46.5px; letter-spacing: .05em; white-space: nowrap;
  color: var(--pink);
}
.shop__h a { transition: opacity .3s var(--ease); }
.shop__h a:hover { opacity: .75; }
.shop__lead {
  position: absolute; left: 483.9px; top: 2515.5px; width: 400px; white-space: nowrap;
  font-family: var(--gothic); font-weight: 400; font-size: 20px;
  line-height: 39px; letter-spacing: .095em; text-align: center;
}

/* ----------------------------------------------------------- instagram ---- */
.ig { position: absolute; left: 0; top: 0; width: 1366px; height: 1px; }
.ig__grid {
  position: absolute; left: 183px; top: 2881px; width: 692px;
  display: grid; grid-template-columns: 161px 162px 162px 162px;
  column-gap: 15.3px; row-gap: 14px;
}
.ig__grid img { width: 100%; height: 161px; transition: opacity .3s var(--ease); }
.ig__grid a:hover img { opacity: .82; }
.ig__card {
  position: absolute; left: 933px; top: 2882px; width: 250px; height: 334.5px;
  background: var(--pink); color: var(--white);
  display: flex; flex-direction: column; align-items: center;
  transition: background-color .3s var(--ease);
}
.ig__card:hover { background: #e58a8a; }
.ig__ttl {
  font-family: var(--mincho); font-weight: 900; font-size: 30px;
  line-height: 34.9px; letter-spacing: .097em; margin-top: 51.1px; text-indent: .097em;
}
.ig__txt {
  font-family: var(--gothic); font-weight: 500; font-size: 16px;
  line-height: 24.2px; letter-spacing: 0; text-align: center;
  margin-top: 11.4px;
}

/* -------------------------------------------------------------- access ---- */
.acs { position: absolute; left: 0; top: 0; width: 1366px; height: 1px; }
.acs__lead {
  position: absolute; left: 0; top: 3295.5px; width: 1366px; text-align: left;
  font-family: var(--mincho); font-weight: 900; font-size: 33px;
  line-height: 59.5px; letter-spacing: .09em; color: var(--pink);
  white-space: nowrap;
}
.acs__lead span { display: block; }
.acs__lead span:nth-child(1) { letter-spacing: .1001em; margin-left: 349.5px; }
.acs__lead span:nth-child(2) { letter-spacing: .0793em; margin-left: 248.5px; }
.acs__kind {
  position: absolute; left: 184.5px; top: 3472.5px;
  font-family: var(--noto); font-weight: 100; font-size: 18.56px;
  line-height: 1.4; letter-spacing: 0; white-space: nowrap;
}
.acs__logo { position: absolute; left: 184px; top: 3509px; width: 362px; height: 61px; }
.acs__logo img { width: 362px; height: 61px; }
.acs__info {
  position: absolute; left: 568.4px; top: 3474.5px;
  font-family: var(--noto); font-weight: 100; font-size: 19px;
  line-height: 27px; letter-spacing: .059em; white-space: nowrap;
}
.acs__info a { transition: color .3s var(--ease); }
.acs__info a:hover { color: var(--pink); }
.acs__badge {
  position: absolute; top: 3556.5px; height: 26.5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pink); color: var(--white); border-radius: 4px;
  font-family: var(--mincho); font-weight: 700; font-size: 17px;
  line-height: 1; letter-spacing: .04em; white-space: nowrap;
}
.acs__badge--1 { left: 568.5px; width: 129px; }
.acs__badge--2 { left: 706.5px; width: 239px; }
.acs__circle {
  position: absolute; left: 963px; top: 3445px; width: 220px; height: 152px;
  border-radius: 50%; background: var(--pink); color: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--mincho); font-weight: 900; font-size: 20px;
  line-height: 36.3px; letter-spacing: .04em; text-align: center;
}
.acs__map { position: absolute; left: 183px; top: 3597px; width: 1000px; height: 429px; }
.acs__map picture { display: block; }
.acs__map img { width: 1000px; height: 429px; }

/* ==========================================================================
   SP — canvas 390 x 4204.9 (1em = 10px at 390 wide)
   header 0–70 | hero 70–403.5 | lead 429.9 | badges 482.5–540
   news 570.7–1023 | category 1152–2426 | shop 2441.5–2761
   instagram 2799–3138 | access 3179–3768 | footer 3853.2
   ========================================================================== */
@media (max-width: 900px) {
  .fv { width: calc(39 * var(--u)); }
  .fv__stage { top: calc(7 * var(--u)); left: 0; transform: none; width: calc(39 * var(--u)); height: calc(33.35 * var(--u)); }
  .fv__lead {
    left: 0; top: calc(42.4 * var(--u)); width: calc(39 * var(--u)); text-align: center;
    font-size: calc(1.7 * var(--u)); line-height: 1.55; letter-spacing: .04em; white-space: normal;
  }
  .fv__badge {
    left: calc(5.32 * var(--u)); width: calc(28.35 * var(--u)); height: calc(2.6 * var(--u)); border-radius: .3em;
    background: var(--pink); color: var(--white); font-size: calc(1.7 * var(--u));
    letter-spacing: .04em;
  }
  .fv__badge--1 { top: calc(48.25 * var(--u)); }
  .fv__badge--2 { top: calc(51.37 * var(--u)); }
  .fv__ctrl { display: none; }   /* the SP comp draws no slider controls */

  .band-kyugetsu { display: none; }  /* not present on the SP artboard */

  .news { width: calc(39 * var(--u)); }
  .news__h { left: 0; top: calc(56.4 * 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; }
  .news__rule { display: none; }
  .news__list, .news__item { width: calc(39 * var(--u)); }
  .news__list > li:nth-child(1) { top: calc(61.2 * var(--u)); }
  .news__list > li:nth-child(2) { top: calc(72.9 * var(--u)); }
  .news__list > li:nth-child(3) { top: calc(85.1 * var(--u)); }
  .news__date { left: calc(5.3 * var(--u)); top: 0; font-size: calc(1.5 * var(--u)); line-height: 1.1; letter-spacing: .06em; }
  .news__body { left: calc(5.53 * var(--u)); top: calc(1.9 * var(--u)); width: calc(29.4 * var(--u)); font-size: calc(1.5 * var(--u));
                line-height: calc(2.41 * var(--u)); letter-spacing: .02em; white-space: normal; }
  .news__more { left: calc(9.4 * var(--u)); top: calc(98.79 * var(--u)); width: calc(20.2 * var(--u)); height: calc(3.48 * var(--u)); font-size: calc(1 * var(--u)); }
  .news__more > span { font-size: calc(1.4 * var(--u)); letter-spacing: .08em; }
  .news__more .btn-pill__arw { right: calc(1.2 * var(--u)); width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u)); }

  .cat { width: calc(39 * var(--u)); }
  .cat__h { left: 0; top: calc(114.74 * 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; }
  .cat__item { width: calc(24.72 * var(--u)); height: calc(23.38 * var(--u)); left: calc(7.26 * var(--u)); }
  .cat__item--1 { top: calc(118.14 * var(--u)); }
  .cat__item--2 { top: calc(143.51 * var(--u)); }
  .cat__item--3 { top: calc(168.88 * var(--u)); }
  .cat__item--4 { top: calc(194.25 * var(--u)); }
  .cat__item--5 { top: calc(219.23 * var(--u)); }
  .cat__item > a, .cat__item img { width: calc(24.72 * var(--u)); height: calc(23.38 * var(--u)); border-radius: .8em; }
  .cat__name { font-size: calc(1.8 * var(--u)); line-height: 1.2; letter-spacing: .04em; }
  .cat__sub  { font-size: calc(1.3 * var(--u)); line-height: 1.2; letter-spacing: .04em; }
  .cat__item--1 .cat__name { left: calc(9.63 * var(--u)); top: calc(18.86 * var(--u)); }
  .cat__item--1 .cat__sub  { left: calc(4.28 * var(--u)); top: calc(21.44 * var(--u)); }
  .cat__item--2 .cat__name { left: calc(8.7 * var(--u));  top: calc(18.86 * var(--u)); }
  .cat__item--2 .cat__sub  { left: calc(4.33 * var(--u)); top: calc(21.44 * var(--u)); }
  .cat__item--3 .cat__name { left: calc(9.72 * var(--u)); top: calc(18.86 * var(--u)); }
  .cat__item--3 .cat__sub  { left: calc(4.92 * var(--u)); top: calc(21.44 * var(--u)); }
  .cat__item--4 .cat__name { left: calc(7.81 * var(--u)); top: calc(18.86 * var(--u)); }
  .cat__item--4 .cat__sub  { left: calc(6.08 * var(--u)); top: calc(21.44 * var(--u)); }
  .cat__item--5 .cat__name { left: calc(8.88 * var(--u)); top: calc(18.86 * var(--u)); }
  .cat__item--5 .cat__sub  { left: calc(6.1 * var(--u));  top: calc(21.44 * var(--u)); }

  .shop { width: calc(39 * var(--u)); }
  .shop__art { left: .1em; top: calc(244.15 * var(--u)); width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
  .shop__h {
    left: 0; top: calc(251.5 * var(--u)); width: calc(32.1 * var(--u)); text-align: center;
    font-size: calc(2 * var(--u)); line-height: 1.21; letter-spacing: .04em; white-space: normal;
  }
  .shop__lead {
    left: 0; top: calc(256.87 * var(--u)); width: calc(32.1 * var(--u)); text-align: center; white-space: normal;
    font-size: calc(1.4 * var(--u)); line-height: 1.9; letter-spacing: .02em;
  }

  .ig { width: calc(39 * var(--u)); }
  .ig__grid { left: calc(7.3 * var(--u)); top: calc(279.9 * var(--u)); width: calc(24.9 * var(--u)); height: calc(24.8 * var(--u));
              display: block; background: no-repeat center/cover; }
  .ig__grid li { display: none; }
  .ig__grid::before {
    content: ""; display: block; width: calc(24.9 * var(--u)); height: calc(24.8 * var(--u));
    background: no-repeat center/100% 100% url(../img/photo/sp-iggrid.jpg);
  }
  .ig__card { left: calc(7.31 * var(--u)); top: calc(304.19 * var(--u)); width: calc(24.67 * var(--u)); height: calc(9.6 * var(--u));
              flex-direction: column; align-items: center; }
  .ig__ttl { margin-top: calc(1.1 * var(--u)); font-size: calc(2 * var(--u)); line-height: 1.16; letter-spacing: .02em; }
  .ig__txt { margin-top: .6em; font-size: calc(1.4 * var(--u)); line-height: 1.33; }

  .acs { width: calc(39 * var(--u)); }
  .acs__lead {
    left: 0; top: calc(317.44 * var(--u)); width: calc(39 * var(--u)); text-align: center;
    font-size: calc(1.6 * var(--u)); line-height: 1.71; letter-spacing: .04em; white-space: normal;
  }
  .acs__lead span { display: block; letter-spacing: .04em; margin-left: 0 !important; }
  .acs__kind { left: 0; top: calc(331.4 * var(--u)); width: calc(39 * var(--u)); text-align: center;
               font-size: calc(1.217 * var(--u)); line-height: 1.5; letter-spacing: .02em; white-space: normal; }
  .acs__logo { left: calc(9.77 * var(--u)); top: calc(335.2 * var(--u)); width: calc(19.46 * var(--u)); height: calc(3.27 * var(--u)); }
  .acs__logo img { width: calc(19.46 * var(--u)); height: calc(3.27 * var(--u)); }
  .acs__info { left: 0; top: calc(338.4 * var(--u)); width: calc(39 * var(--u)); text-align: center; white-space: normal;
               font-size: calc(1.2 * var(--u)); line-height: 1.9; letter-spacing: .02em; }
  .acs__badge { top: calc(344.3 * var(--u)); height: calc(1.9 * var(--u)); font-size: calc(1.1 * var(--u)); letter-spacing: .02em; border-radius: .25em; }
  .acs__badge--1 { left: calc(7.83 * var(--u)); width: calc(8.3 * var(--u)); }
  .acs__badge--2 { left: calc(16.95 * var(--u)); width: calc(15.4 * var(--u)); }
  .acs__circle {
    left: 0; top: calc(377.3 * var(--u)); width: calc(39 * var(--u)); height: auto; border-radius: 0;
    background: none; color: var(--pink); font-size: calc(1.5 * var(--u)); line-height: 1.5;
    letter-spacing: .04em;
  }
  .acs__map { left: calc(7.3 * var(--u)); top: calc(346.6 * var(--u)); width: calc(25.2 * var(--u)); height: calc(30.2 * var(--u)); }
  .acs__map picture, .acs__map img { width: calc(25.2 * var(--u)); height: calc(30.2 * var(--u)); }
}