@charset "UTF-8";
/* ==========================================================================
   坪井人形会館のこと — PC canvas 1366 x 4545.3
   header 0–85 | title 139.6 | anchors 228–425 | ごあいさつ 593–1300
   会社概要 1449–2050 | shots 2092 | front 2481 | 会社情報 2871–3164
   contact 3250–3484 | map 3532–4098 | ribbon 4111.5–4165.5 | footer 4165.3
   ========================================================================== */
.ab { position: absolute; left: 0; top: 0; width: 1366px; height: 1px; }
.ab > * { position: absolute; }

.ab__title {
  left: 472.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;
}

/* ------------------------------------------------------- anchor circles ---- */
.ab__anchors { left: 0; top: 0; width: 1366px; }
.ab__circle {
  position: absolute; top: 228px; width: 197px; height: 197px; 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: 23.4px;
  line-height: 27.1px; letter-spacing: .09em; text-indent: .09em; white-space: nowrap;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.ab__circle:hover { background: #e07f7f; transform: translateY(-3px); }
.ab__circle--1 { left: 250px; }
.ab__circle--2 { left: 486px; }
.ab__circle--3 { left: 722px; }
.ab__circle--4 { left: 958px; }

/* --------------------------------------------------------------- bodies ---- */
.ab__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);
}
.ab__h--greet   { top: 588.8px; }
.ab__h--outline { top: 1445.1px; }

.ab__body {
  left: 0; width: 1366px; text-align: center;
  font-family: var(--gothic); font-weight: 400; font-size: 20px;
  letter-spacing: .079em; text-indent: .079em; color: var(--ink);
}
.ab__body--greet   { top: 654px;   line-height: 41px; }
.ab__p { display: inline; }
.ab__body--outline { top: 1510.5px; line-height: 42px; letter-spacing: .025em; text-indent: .025em; }

.ab__ph { border-radius: 10px; }
.ab__ph--gl { left: 0;      top: 857px;   width: 306px; height: 298px;
              border-radius: 0 10px 10px 0; }
.ab__ph--gr { left: 1039px; top: 916.5px; width: 327px; height: 557px;
              border-radius: 10px 0 0 10px; }

.ab__shots { left: 183px; top: 2092px; display: flex; gap: 41px; }
.ab__shots li { width: 306px; height: 230px; }
.ab__shots img { width: 306px; height: 230px; border-radius: 8px; }
.ab__front { left: 281px; top: 2481px; width: 703px; height: 382px; border-radius: 8px; }

.ab__kids {
  left: 281.5px; top: 2689.5px; width: 173.5px; height: 173.5px; 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: 700; font-size: 23.4px;
  line-height: 29.75px; letter-spacing: .09em; text-align: center;
}

/* ---------------------------------------------------------- 会社情報 ---- */
.ab__kind {
  left: 289.8px; top: 2866px;
  font-family: var(--noto); font-weight: 100; font-size: 18.56px;
  line-height: 1.4; letter-spacing: 0; white-space: nowrap;
}
.ab__logo { left: 290px; top: 2903.5px; width: 360.5px; height: 60.75px; }
.ab__logo img { width: 360.5px; height: 60.75px; }
.ab__kyugetsu {
  left: 284px; top: 2973px; width: 372px; height: 38.5px;
  background: var(--pink-soft); border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mincho); font-weight: 700; font-size: 22px;
  line-height: 1; letter-spacing: .02em; white-space: nowrap;
}
.ab__badge {
  top: 3028.5px; height: 35px; background: var(--pink); color: var(--white);
  border-radius: 3px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mincho); font-weight: 700; font-size: 19.33px;
  line-height: 1; letter-spacing: .04em; white-space: nowrap;
}
.ab__badge--1 { left: 283.5px; width: 290px; }
.ab__badge--2 { left: 592.5px; width: 490px; }
.ab__tel {
  left: 0; top: 3055px; width: 1366px; text-align: center;
  font-family: var(--mincho); font-weight: 700; font-size: 44px;
  line-height: 50.8px; letter-spacing: .01em; color: var(--pink);
}
.ab__tel a { transition: opacity .3s var(--ease); }
.ab__tel a:hover { opacity: .75; }
.ab__tel-l { font-size: 34px; }
.ab__info {
  left: 682.6px; top: 2880px;
  font-family: var(--noto); font-weight: 100; font-size: 18px;
  line-height: 34.5px; letter-spacing: .065em; white-space: nowrap;
}
/* the designer padded the 3-char labels out to the width of 営業時間 */
.ab__lbl { display: inline-block; width: 76px; text-align: justify; text-align-last: justify; }

/* -------------------------------------------------------- mail / sns ---- */
.ab__mail-lead {
  left: 425.3px; top: 3245.8px; white-space: nowrap;
  font-family: var(--mincho); font-weight: 700; font-size: 25px;
  line-height: 28.9px; letter-spacing: .049em; text-indent: .049em;
}
.ab__mail-btn {
  left: 403px; top: 3293px; width: 560px; height: 46px;
  border: 1px solid var(--pink); background: var(--white);
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-family: var(--mincho); font-weight: 700; font-size: 25px;
  line-height: 1; letter-spacing: .09em; color: var(--ink);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.ab__mail-btn:hover { background: var(--pink); color: var(--white); }
.ab__mail-btn:hover rect, .ab__mail-btn:hover path { stroke: #fff; }
.ab__sns { left: 557px; top: 3381px; display: flex; gap: 46px; }
.ab__sns a { display: block; width: 103px; height: 103px; transition: opacity .3s var(--ease); }
.ab__sns a:hover { opacity: .75; }
.ab__sns img { width: 103px; height: 103px; }

.ab__map { left: 183px; top: 3532px; width: 1001px; height: 566px; }
.ab__map img { width: 1001px; height: 566px; }

/* ------------------------------------------------------------- ribbon ---- */
.ab__ribbon { left: 0; top: 4111.5px; width: 1366px; height: 54px; background: var(--pink); }
.ab__ribbon-bleed {
  position: absolute; top: 0; height: 54px;
  width: max(0px, calc((100vw - 1366px) / 2)); background: var(--pink);
}
.ab__ribbon-bleed--l { right: 100%; }
.ab__ribbon-bleed--r { left: 100%; }
.ab__ribbon-txt {
  position: absolute; left: 0; top: 6.5px; 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 3010.4 | header 0–70 | title 103.3 | anchors 139–355
   ごあいさつ 431–900 | 会社概要 1026–1500 | 会社情報 1853–2200
   contact 2143–2263 | map 2278–2580 | footer 2657.5
   ========================================================================== */
@media (max-width: 900px) {
  .ab { width: calc(39 * var(--u)); }
  .ab__title {
    left: 0; top: calc(9.87 * 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;
  }
  .ab__anchors { width: calc(39 * var(--u)); }
  .ab__circle {
    left: calc(5.25 * var(--u)); width: calc(28.5 * var(--u)); height: calc(4 * var(--u));
    border-radius: calc(.4 * var(--u));
    font-size: calc(1.7 * var(--u)); line-height: 1.16; letter-spacing: .08em; text-indent: .08em;
  }
  .ab__circle:hover { transform: none; }
  .ab__circle--1 { top: calc(13.9 * var(--u)); }
  .ab__circle--2 { top: calc(19.75 * var(--u)); }
  .ab__circle--3 { top: calc(25.65 * var(--u)); }
  .ab__circle--4 { top: calc(31.5 * var(--u)); }

  .ab__h { width: calc(39 * var(--u)); font-size: calc(2.3 * var(--u)); line-height: 1.16;
           letter-spacing: .1em; text-indent: .1em; }
  .ab__h--greet   { top: calc(42.7 * var(--u)); }
  .ab__h--outline { top: calc(102.2 * var(--u)); }

  /* the SP artboard sets these as area text: the paragraphs wrap on their own,
     so the PC line breaks are suppressed (README note 11) */
  .ab__body {
    left: calc(5.27 * var(--u)); width: calc(28.5 * var(--u)); text-align: left;
    font-size: calc(1.3 * var(--u)); letter-spacing: .01em; text-indent: 0;
  }
    .ab__body--greet   { top: calc(46.1 * var(--u)); line-height: 2.15; }
  .ab__body--outline { top: calc(106.2 * var(--u)); line-height: 2.15; }
  .ab__p { display: block; }
  .ab__p + .ab__p { margin-top: 1.05em; }

  .ab__ph--gl { left: 0; top: calc(84.85 * var(--u)); width: calc(10.85 * var(--u)); height: calc(9.45 * var(--u));
                border-radius: 0 calc(.6 * var(--u)) calc(.6 * var(--u)) 0; }
  .ab__ph--gr { left: calc(17.4 * var(--u)); top: calc(84.85 * var(--u)); width: calc(21.6 * var(--u)); height: calc(25.15 * var(--u));
                border-radius: calc(.6 * var(--u)) 0 0 calc(.6 * var(--u)); }

  .ab__shots { left: calc(5.25 * var(--u)); top: calc(148.25 * var(--u)); gap: calc(1.75 * var(--u)); }
  /* the SP artboard shows two shots, not three */
  .ab__shots li:nth-child(3) { display: none; }
  .ab__shots li { width: calc(13.4 * var(--u)); height: calc(10.05 * var(--u)); }
  .ab__shots img { width: calc(13.4 * var(--u)); height: calc(10.05 * var(--u)); border-radius: calc(.5 * var(--u)); }
  .ab__front { left: calc(5.3 * var(--u)); top: calc(159.8 * var(--u)); width: calc(28.5 * var(--u)); height: calc(24 * var(--u)); }
  .ab__kids {
    left: calc(4.6 * var(--u)); top: calc(159.5 * var(--u));
    width: calc(9 * var(--u)); height: calc(9 * var(--u));
    font-size: calc(1.4 * var(--u)); line-height: 1.28; letter-spacing: .04em;
  }

  .ab__kind { left: 0; top: calc(184.6 * var(--u)); width: calc(39 * var(--u)); text-align: center;
              font-size: calc(1.217 * var(--u)); white-space: normal; }
  .ab__logo { left: calc(7.8 * var(--u)); top: calc(187.4 * var(--u)); width: calc(23.65 * var(--u)); height: calc(4 * var(--u)); }
  .ab__logo img { width: calc(23.65 * var(--u)); height: calc(4 * var(--u)); }
  .ab__kyugetsu { left: 0; top: calc(192.2 * var(--u)); width: calc(39 * var(--u)); height: auto;
                  background: none; font-size: calc(1.4 * var(--u)); letter-spacing: .04em; }
  .ab__info { left: 0; top: calc(195.5 * var(--u)); width: calc(39 * var(--u)); text-align: center;
              font-size: calc(1.35 * var(--u)); line-height: 2.2; letter-spacing: .01em; white-space: normal; }
  .ab__lbl { width: auto; }
  .ab__badge { top: calc(204.5 * var(--u)); height: calc(1.95 * var(--u));
               font-size: calc(1.264 * var(--u)); letter-spacing: .02em; border-radius: calc(.2 * var(--u)); }
  .ab__badge--1 { left: calc(5.3 * var(--u)); width: calc(9.75 * var(--u)); }
  .ab__badge--2 { left: calc(15.75 * var(--u)); width: calc(18.05 * var(--u)); }
  .ab__tel { left: 0; top: calc(205.7 * var(--u)); width: calc(39 * var(--u));
             font-size: calc(2.157 * var(--u)); line-height: 1.16; }
  .ab__tel-l { font-size: .78em; }

  .ab__mail-lead { left: 0; top: calc(214.1 * var(--u)); width: calc(39 * var(--u)); text-align: center;
                   font-size: calc(1.4 * var(--u)); letter-spacing: .06em; text-indent: .06em; white-space: normal; }
  .ab__mail-btn { left: calc(5.25 * var(--u)); top: calc(216.6 * var(--u));
                  width: calc(28.5 * var(--u)); height: calc(2.85 * var(--u));
                  gap: calc(.8 * var(--u)); font-size: calc(1.4 * var(--u)); letter-spacing: .06em; }
  .ab__mail-btn svg { width: calc(1.8 * var(--u)); height: calc(1.26 * var(--u)); }
  .ab__sns { left: calc(13.05 * var(--u)); top: calc(221.05 * var(--u)); gap: calc(2.3 * var(--u)); }
  .ab__sns a, .ab__sns img { width: calc(5.25 * var(--u)); height: calc(5.25 * var(--u)); }
  .ab__map { left: calc(7.2 * var(--u)); top: calc(227.8 * var(--u)); width: calc(25.15 * var(--u)); height: calc(30.15 * var(--u)); }
  .ab__map img { width: calc(25.15 * var(--u)); height: calc(30.15 * var(--u)); }

  .ab__ribbon { display: none; }   /* not present on the SP artboard */
}