@charset "UTF-8";
/* ==========================================================================
   初めての方へ — PC canvas 1366 x 4809.4
   header 0–85 | title 139.6 | anchors 266–463 | 人形の選び方 573–1230
   オリジナルサービス 1409–2600 | お客様の声 2762–3560 | よくある質問 3740–4306
   band 4376–4429 | footer 4429.4
   Note (designer):「それぞれを押すとこの表示」→ the FAQ is an accordion. The
   artboard draws the first row already open, so it ships open; the rest closed.
   ========================================================================== */
.fs { position: absolute; left: 0; top: 0; width: 1366px; height: 1px; }
.fs > * { position: absolute; }

.fs__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;
}
.fs__lead {
  left: 0; top: 209.4px; width: 1366px; text-align: center;
  font-family: var(--gothic); font-weight: 400; font-size: 20px;
  line-height: 21.9px; letter-spacing: .103em; text-indent: .103em;
}

/* ------------------------------------------------------------- anchors ---- */
.fs__anchors { left: 0; top: 0; width: 1366px; }
.fs__circle {
  position: absolute; top: 266px; width: 197px; height: 197px; border-radius: 50%;
  background: var(--pink); color: var(--white);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--mincho); font-weight: 700; font-size: 23.4px;
  line-height: 29.75px; letter-spacing: .09em; text-indent: .09em;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.fs__circle:hover { background: #e07f7f; transform: translateY(-3px); }
.fs__circle--1 { left: 231px; }
.fs__circle--2 { left: 467px; }
.fs__circle--3 { left: 702px; }
.fs__circle--4 { left: 938px; }

/* -------------------------------------------------------------- bodies ---- */
.fs__h {
  left: 0; width: 1366px; text-align: center;
  font-family: var(--mincho); font-weight: 700; font-size: 40px;
  line-height: 46.2px; letter-spacing: .2em; text-indent: .2em; color: var(--pink);
}
.fs__h--choose  { top: 568.7px; }
.fs__h--service { top: 1405.4px; }
.fs__h--voice   { top: 2758.3px; }
.fs__h--faq     { top: 3736px; }

.fs__body {
  left: 0; width: 1366px; text-align: center;
  font-family: var(--gothic); font-weight: 400; font-size: 20px;
  line-height: 43px; letter-spacing: .051em; text-indent: .051em;
}
.fs__body--1 { top: 634px; }
.fs__body--2 { top: 1151.5px; }
.fs__body--3 { top: 2124px; }
.fs__body--4 { top: 2378.6px; }
.fs__body--5 { top: 2829.9px; line-height: 21.9px; }

.fs__shots { left: 183px; top: 866px; display: flex; gap: 40.5px; }
.fs__shots img { width: 307px; height: 230px; border-radius: 8px; }
.fs__cap {
  display: block; margin-top: 13.7px; text-align: center;
  font-family: var(--gothic); font-weight: 400; font-size: 20px;
  line-height: 21.9px; letter-spacing: .04em;
}

/* --------------------------------------------------- original services ---- */
.fs__ribbon { border: 0; }
.fs__ribbon--1 { left: 284.5px; top: 1467px;   width: 797px; height: 113px; }
.fs__ribbon--2 { left: 284.5px; top: 2278.5px; width: 797px; height: 112px; }
.fs__ribbon-txt {
  left: 0; width: 1366px; text-align: center; color: var(--white);
  font-family: var(--mincho); font-weight: 700; font-size: 40px;
  line-height: 46.2px; letter-spacing: .12em; text-indent: .12em;
}
.fs__ribbon-txt--1 { top: 1505.5px; }
.fs__ribbon-txt--2 { top: 2317px; }
.fs__sub {
  left: 0; top: 1558.1px; width: 1366px; text-align: center;
  font-family: var(--gothic); font-weight: 400; font-size: 20px;
  line-height: 21.9px; letter-spacing: .04em; text-indent: .04em;
}

.fs__opts { left: 0; top: 0; width: 1366px; }
.fs__opt {
  position: absolute; top: 1609px; width: 197px; height: 197px; border-radius: 50%;
  background: #f57f90; color: var(--white);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--mincho); font-weight: 700; font-size: 23.4px;
  line-height: 29.75px; letter-spacing: .09em; text-indent: .09em;
}
.fs__opt--1 { left: 231px; }
.fs__opt--2 { left: 467px; }
.fs__opt--3 { left: 703px; }
.fs__opt--4 { left: 939px; }

.fs__ph { border-radius: 8px; }
.fs__ph--base { left: 311.5px; top: 1845.5px; width: 343px; height: 262px; }
.fs__ph--arr  { left: 714.5px; top: 1844.5px; width: 343px; height: 262px; }
.fs__pcap {
  font-family: var(--gothic); font-weight: 400; font-size: 20px;
  line-height: 21.9px; letter-spacing: .04em; white-space: nowrap;
}
.fs__pcap--base { left: 430.8px; top: 2075.6px; }
.fs__pcap--arr  { left: 844.1px; top: 2074.1px; }
.fs__truck { left: 577px; top: 2484px; width: 263px; height: 131px; }

/* ---------------------------------------------------------------- voices -- */
.fs__voices { left: 0; top: 0; width: 1366px; }
.fs__voice { position: absolute; left: 0; width: 1366px; }
.fs__voice--1 { top: 2913.5px; }
.fs__voice--2 { top: 3138.5px; }
.fs__voice--3 { top: 3363px; }
.fs__av { position: absolute; left: 357px; top: 0; width: 122px; height: 122px; border-radius: 50%; }
.fs__who {
  position: absolute; left: 357px; top: 121px; width: 122px; text-align: center;
  font-family: var(--maru); font-weight: 700; font-size: 25px;
  line-height: 30.5px; letter-spacing: .02em;
}
.fs__bought {
  position: absolute; left: 509.2px; top: -1px;
  font-family: var(--maru); font-weight: 700; font-size: 25px;
  line-height: 30.5px; letter-spacing: .02em; white-space: nowrap;
}
.fs__said {
  position: absolute; left: 512.8px; top: 44px; width: 487px;
  font-family: var(--gothic); font-weight: 400; font-size: 20px;
  line-height: 32.4px; letter-spacing: .055em;
}

/* ------------------------------------------------------------------ FAQ --- */
.faq { left: 283px; top: 3819px; width: 800.5px; }
.faq__item + .faq__item { margin-top: 18px; }
.faq__item.is-open + .faq__item { margin-top: 13.5px; }
.faq__q {
  display: flex; align-items: center; width: 800.5px; height: 59.5px; padding-top: 16px;
  background: var(--cream); border-radius: 8px; text-align: left;
  transition: background-color .3s var(--ease);
}
.faq__q:hover { background: #efe7e7; }
.faq__badge {
  flex: 0 0 auto; margin-left: 33.5px; width: 44px; height: 44px; border-radius: 50%;
  background: #754c24; color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 24.09px;
  line-height: 1;
}
.faq__badge--a { background: var(--white); color: #754c24; }
.faq__qtxt {
  margin-left: 20.9px;
  font-family: var(--noto); font-weight: 100; font-size: 19.84px;
  line-height: 1.4; letter-spacing: .02em; color: #4a3a2c;
}
.faq__chev { margin-left: auto; margin-right: 26px; transition: transform .3s var(--ease); }
.faq__item.is-open .faq__chev { transform: rotate(90deg); }
.faq__a {
  display: flex; align-items: flex-start; gap: 20.9px;
  margin-top: 13px; padding: 14px 26px 14px 33.5px;
  min-height: 108.5px; background: #fff22b; border-radius: 8px;
}
/* the design uses pure yellow here — confirmed as intentional? README note 8 */
.faq__a--tbd { background: #fff7b8; }
.faq__atxt {
  font-family: var(--noto); font-weight: 100; font-size: 19.84px;
  line-height: 35.1px; letter-spacing: -.014em; color: #4a3a2c;
}

/* ------------------------------------------------------------------ band -- */
.fs__ribbon-band { left: 0; top: 4376px; width: 1366px; height: 53px; background: var(--pink); }
.fs__band-bleed {
  position: absolute; top: 0; height: 53px;
  width: max(0px, calc((100vw - 1366px) / 2)); background: var(--pink);
}
.fs__band-bleed--l { right: 100%; }
.fs__band-bleed--r { left: 100%; }
.fs__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 2494.1 | header 0–70 | title 104.9 | anchors 188–378
   人形の選び方 462–900 | オリジナルサービス 942–1430 | お客様の声 1485–1935
   よくある質問 1990–2100 | footer 2142.3
   ========================================================================== */
@media (max-width: 900px) {
  .fs { width: calc(39 * var(--u)); }
  .fs__title { left: 0; top: calc(10.05 * var(--u)); width: calc(39 * var(--u)); text-align: center;
               font-size: calc(2 * var(--u)); line-height: 1.16; letter-spacing: .1em; text-indent: .1em; }
  .fs__lead { left: 0; top: calc(13.6 * var(--u)); width: calc(39 * var(--u));
              font-size: calc(1.2 * var(--u)); line-height: 1.5; letter-spacing: .02em; text-indent: 0; }

  .fs__anchors { width: calc(39 * var(--u)); }
  .fs__circle {
    left: calc(5.22 * var(--u)); width: calc(28.35 * var(--u)); height: calc(3.98 * var(--u));
    border-radius: calc(.4 * var(--u));
    font-size: calc(1.6 * var(--u)); line-height: 1.16; letter-spacing: .06em; text-indent: .06em;
  }
  .fs__circle:hover { transform: none; }
  .fs__circle br { display: none; }
  .fs__circle--1 { top: calc(18.84 * var(--u)); }
  .fs__circle--2 { top: calc(23.86 * var(--u)); }
  .fs__circle--3 { top: calc(28.88 * var(--u)); }
  .fs__circle--4 { top: calc(33.86 * var(--u)); }

  .fs__h { width: calc(39 * var(--u)); font-size: calc(2 * var(--u)); line-height: 1.16;
           letter-spacing: .1em; text-indent: .1em; }
  .fs__h--choose  { top: calc(45.8 * var(--u)); }
  .fs__h--service { top: calc(93.7 * var(--u)); }
  .fs__h--voice   { top: calc(148 * var(--u)); }
  .fs__h--faq     { top: calc(184.6 * var(--u)); }

  .fs__body { width: calc(39 * var(--u)); font-size: calc(1 * var(--u));
              line-height: 2.05; letter-spacing: .01em; text-indent: 0; }
  .fs__body--1 { top: calc(49.4 * var(--u)); }
  .fs__body--2 { top: calc(76.5 * var(--u)); }
  .fs__body--3 { top: calc(118.9 * var(--u)); }
  .fs__body--4 { top: calc(130.6 * var(--u)); }
  .fs__body--5 { top: calc(150.9 * var(--u)); line-height: 1.65; }

  .fs__shots { left: calc(5.28 * var(--u)); top: calc(65.8 * var(--u)); gap: calc(.07 * var(--u)); }
  .fs__shots img { width: calc(9.6 * var(--u)); height: calc(7.2 * var(--u)); border-radius: calc(.4 * var(--u)); }
  .fs__cap { margin-top: calc(.9 * var(--u)); font-size: calc(.9 * var(--u)); line-height: 1.1; }

  .fs__ribbon--1 { left: calc(5.32 * var(--u)); top: calc(97.5 * var(--u)); width: calc(28.35 * var(--u)); height: calc(3 * var(--u)); }
  .fs__ribbon--2 { left: calc(5.32 * var(--u)); top: calc(128.8 * var(--u)); width: calc(28.35 * var(--u)); height: calc(3 * var(--u)); }
  .fs__ribbon-txt { width: calc(39 * var(--u)); font-size: calc(1.4 * var(--u)); line-height: 1.16;
                    letter-spacing: .08em; text-indent: .08em; }
  .fs__ribbon-txt--1 { top: calc(98.7 * var(--u)); }
  .fs__ribbon-txt--2 { top: calc(129.7 * var(--u)); }
  .fs__sub { left: 0; top: calc(100 * var(--u)); width: calc(39 * var(--u));
             font-size: calc(1 * var(--u)); letter-spacing: .02em; text-indent: 0; }

  .fs__opts { width: calc(39 * var(--u)); }
  .fs__opt {
    top: calc(102.6 * var(--u)); width: calc(6.4 * var(--u)); height: calc(6.4 * var(--u));
    font-size: calc(.9 * var(--u)); line-height: 1.28; letter-spacing: .02em; text-indent: 0;
  }
  .fs__opt--1 { left: calc(5.4 * var(--u)); }
  .fs__opt--2 { left: calc(12.8 * var(--u)); }
  .fs__opt--3 { left: calc(20.9 * var(--u)); }
  .fs__opt--4 { left: calc(28.3 * var(--u)); }

  .fs__ph--base { left: calc(7.06 * var(--u)); top: calc(109.09 * var(--u)); width: calc(11.44 * var(--u)); height: calc(8.76 * var(--u)); }
  .fs__ph--arr  { left: calc(20.49 * var(--u)); top: calc(109.09 * var(--u)); width: calc(11.44 * var(--u)); height: calc(8.76 * var(--u)); }
  .fs__pcap { font-size: calc(.9 * var(--u)); line-height: 1.1; }
  .fs__pcap--base { left: calc(10.5 * var(--u)); top: calc(117.44 * var(--u)); }
  .fs__pcap--arr  { left: calc(24.49 * var(--u)); top: calc(117.39 * var(--u)); }
  .fs__truck { left: calc(15.72 * var(--u)); top: calc(137.99 * var(--u)); width: calc(9.05 * var(--u)); height: calc(4.53 * var(--u)); }

  .fs__voices { width: calc(39 * var(--u)); }
  .fs__voice { width: calc(39 * var(--u)); }
  .fs__voice--1 { top: calc(156.3 * var(--u)); }
  .fs__voice--2 { top: calc(164.26 * var(--u)); }
  .fs__voice--3 { top: calc(172.22 * var(--u)); }
  .fs__av { left: calc(7.86 * var(--u)); width: calc(4.28 * var(--u)); height: calc(4.28 * var(--u)); }
  .fs__who { left: calc(7.5 * var(--u)); top: calc(5.23 * var(--u)); width: calc(5 * var(--u));
             font-size: calc(1 * var(--u)); line-height: 1.2; }
  .fs__bought { left: calc(13.31 * var(--u)); top: calc(.76 * var(--u));
                font-size: calc(1 * var(--u)); line-height: 1.2; }
  .fs__said { left: calc(13.44 * var(--u)); top: calc(2.35 * var(--u)); width: calc(19.5 * var(--u));
              font-size: calc(.9 * var(--u)); line-height: 1.9; letter-spacing: .01em; }

  .faq { left: calc(5.32 * var(--u)); top: calc(187.8 * var(--u)); width: calc(28.35 * var(--u)); }
  .faq__item + .faq__item { margin-top: calc(.37 * var(--u)); }
  .faq__item.is-open + .faq__item { margin-top: calc(.56 * var(--u)); }
  .faq__q { width: calc(28.35 * var(--u)); height: calc(2.4 * var(--u)); padding-top: calc(.4 * var(--u));
            border-radius: calc(.4 * var(--u)); }
  .faq__badge { margin-left: calc(.75 * var(--u)); width: calc(1.75 * var(--u)); height: calc(1.75 * var(--u));
                font-size: calc(1 * var(--u)); }
  .faq__qtxt { margin-left: calc(.65 * var(--u)); font-size: calc(.9 * var(--u)); }
  .faq__chev { margin-right: calc(.9 * var(--u)); width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); }
  .faq__a { margin-top: calc(.34 * var(--u)); padding: calc(.5 * var(--u)) calc(.8 * var(--u));
            min-height: calc(3.6 * var(--u)); gap: calc(.65 * var(--u)); border-radius: calc(.4 * var(--u)); }
  .faq__atxt { font-size: calc(.9 * var(--u)); line-height: 1.8; }

  .fs__ribbon-band { left: 0; top: calc(208 * var(--u)); width: calc(39 * var(--u)); height: calc(6.2 * var(--u)); }
  .fs__band-bleed { display: none; }
  .fs__band-txt { top: calc(.75 * var(--u)); width: calc(39 * var(--u));
                  font-size: calc(1.7 * var(--u)); line-height: 1.5; letter-spacing: .04em; text-indent: .04em; }
}
