@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans+JP:wght@100..900&display=swap');
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-style: normal;
  font-optical-sizing: auto;
  line-height: 0;
  background:linear-gradient(hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 1) 50%),
    repeating-linear-gradient(148.5deg,
      hsl(174, 89%, 89%),
      hsl(174, 89%, 89%) calc(64 / 750 * 100vw),
      hsl(173, 95%, 84%) calc(64 / 750 * 100vw),
      hsl(173, 95%, 84%) calc(128 / 750 * 100vw)
    ),
    hsl(0, 0%, 100%);
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

ul, ol, dl, menu, summary {
  list-style: none;
  margin: 0; padding: 0;
}

ol {
  counter-reset: counter;
}
ol > li {
  counter-increment: counter;
}

em {
  font-style: normal;
}



header {
  display: grid;
  grid-template: auto / auto auto;
  width: 100%; height: calc(100 / 750 * 100vw);
  box-sizing: border-box;
  overflow: hidden;
  position: sticky;
  inset: 0 auto auto 0; z-index: 1;
  padding: calc(18 / 750 * 100vw) calc(50 / 750 * 100vw) 0;
  background: hsl(0, 0%, 100%);
  border-radius: 0 0 calc(38 / 750 * 100vw) calc(38 / 750 * 100vw);
  box-shadow: 0 calc(1 / 750 * 100vw) calc(3 / 750 * 100vw) hsla(0, 0%, 0%, 0.15);
  transition: transform 0.3s;
}
header.deactive {
  transform: translate(0, -100%);
}

header > h1 {
  width: calc(136 / 750 * 100vw);
  margin: calc(7 / 750 * 100vw) 0 0;
}
header > h1 > img {
  width: 100%; height: auto;
}

header > a {
  display: flex;
  justify-self: end;
  justify-content: center; align-items: center;
  width: calc(351 / 750 * 100vw); height: calc(65 / 750 * 100vw);
  box-sizing: border-box;
  font-weight: 900;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  text-decoration: none;
  color: hsl(0, 0%, 0%);
  background: hsl(55, 100%, 61%);
  border: calc(2 / 750 * 100vw) solid hsl(0, 0%, 0%);
  border-bottom: calc(4 / 750 * 100vw) solid hsl(0, 0%, 0%);
  border-radius: calc(65 / 2 / 750 * 100vw);
}



#cover {
  width: 100%; height: calc(1022 / 750 * 100vw);
  position: relative;
  background: url('../../../images/lp/idphotosticker/index_cover_01.webp') calc(1 / 750 * 100vw) top / calc(444 / 750 * 100vw) no-repeat,
    url('../../../images/lp/idphotosticker/index_cover_02_sp.svg') left top / 100% no-repeat;
}

#cover > p:nth-of-type(1) {/* -- Vanfuで人気爆発 */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(10 / 750 * 100vw);
  width: calc(239 / 750 * 100vw);
  position: absolute;
  inset: calc(72 / 750 * 100vw) auto auto calc(441 / 750 * 100vw);
  font-weight: 900;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  color: hsl(221, 90%, 29%);
}
#cover > p:nth-of-type(1) > em {
  display: flex;
  justify-content: center; align-items: center;
  width: calc(239 / 750 * 100vw); height: calc(110 / 750 * 100vw);
  background: hsl(0, 0%, 100%);
  border-radius: calc(12 / 750 * 100vw);
}
#cover > p:nth-of-type(1) > em > img {
  width: calc(182 / 750 * 100vw); height: auto;
}

#cover > h1 {
  width: calc(594 / 750 * 100vw);
  position: absolute;
  inset: calc(247 / 750 * 100vw) auto auto calc(128 / 750 * 100vw);
}
#cover > h1 img {
  width: 100%; height: auto;
}

#cover > p:nth-of-type(2) {/* -- 印刷会社がご提案するステッカー。 */
  width: 100%;
  position: absolute;
  inset: calc(509 / 750 * 100vw) auto auto 0;
  font-weight: 700;
  font-size: calc(24 / 750 * 100vw); line-height: calc(36 / 750 * 100vw);
  letter-spacing: calc(75em / 1000);
  text-align: center;
  color: hsl(216, 60%, 51%);
}

#cover > p:nth-of-type(3) {/* -- 芸能事務所様、アニメゲーム会社様必見！ */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(7 / 750 * 100vw);
  width: 100%;
  position: absolute;
  inset: calc(630 / 750 * 100vw) auto auto 0;
  font-weight: 900;
  font-size: calc(48 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(75em / 1000);
  text-align: center;
  color: hsl(327, 100%, 66%);
}
#cover > p:nth-of-type(3) > em {
  padding: calc(5 / 750 * 100vw) calc(32 / 750 * 100vw) calc(12 / 750 * 100vw);
  background: hsl(0, 0%, 100%);
  border-radius: calc(8 / 750 * 100vw);
}



#issue {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 7.2vw 0 0;
  background: hsl(189, 86%, 77%);
}

#issue > h2 {
  width: calc(662 / 750 * 100vw);
  margin: 0 auto;
}
#issue > h2 img {
  width: 100%; height: auto;
}

#issue > picture {
  display: block;
  width: 100%;
  position: relative;
  inset: 0 auto auto 0;
  margin: 4.8vw 0 0;
}
#issue > picture img {
  width: 100%;
  height: auto;
}



#experience {
  width: 100%;
  padding: calc(80 / 750 * 100vw) 0 9.2vw;
  background: hsl(0, 0%, 100%);
}

#experience > h2 {
  width: calc(690 / 750 * 100vw); height: calc(81 / 750 * 100vw);
  margin: 0 auto;
  font-weight: 900;
  font-size: calc(60 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(75em / 1000);
  text-align: center;
  color: hsl(221, 74%, 33%);
  background: url('../../../images/lp/idphotosticker/index_experience_01.svg') center bottom / calc(450 / 750 * 100vw) no-repeat;
}

#experience > ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(96 / 750 * 100vw) 0;
  width: calc(690 / 750 * 100vw);
  margin: calc(97 / 750 * 100vw) auto 0;
}
#experience > ol > li {
  display: grid;
  grid-template: auto auto auto / calc(208 / 750 * 100vw) auto;
  gap: calc(18 / 750 * 100vw) 0;
  width: calc(690 / 750 * 100vw);
  box-sizing: border-box;
  position: relative;
  padding: 0 calc(36 / 750 * 100vw) calc(24 / 750 * 100vw) calc(16 / 750 * 100vw);
  border: calc(4 / 750 * 100vw) solid hsl(221, 74%, 33%);
  border-radius: calc(16 / 750 * 100vw);
  box-shadow: 0 0 calc(10 / 750 * 100vw) hsla(0, 0%, 0%, 0.18);
}
#experience > ol > li::before {
  content: counter(counter);
  display: block;
  width: calc(150 / 750 * 100vw); height: calc(86 / 750 * 100vw);
  box-sizing: border-box;
  position: absolute;
  inset: calc(-80 / 750 * 100vw) auto auto calc(50% - 150 / 2 / 750 * 100vw);
  padding: calc(35 / 750 * 100vw) 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: calc(52 / 750 * 100vw); line-height: 1;
  text-align: center;
  color: hsl(327, 100%, 66%);
  background: url('../../../images/lp/idphotosticker/index_experience_02_sp.svg') center bottom / calc(150 / 750 * 100vw) no-repeat;
}
#experience > ol > li > h3 {
  grid-row: 1/2; grid-column: 1/3;
  margin: calc(30 / 750 * 100vw) 0 0;
  font-weight: 900;
  font-size: calc(36 / 750 * 100vw); line-height: calc(43 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  text-align: center;
  color: hsl(0, 0%, 0%);
}
#experience > ol > li > img {
  grid-row: 2/3; grid-column: 1/2;
  width: calc(177 / 750 * 100vw); height: auto;
  margin: calc(8 / 750 * 100vw) 0 0;
}
#experience > ol > li > p {
  grid-row: 2/3; grid-column: 2/3;
  align-self: center;
  margin: 0;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: calc(36 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
}
#experience > ol > li > a {
  grid-row: 3/4; grid-column: 2/3;
  margin: 0;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(25em / 1000);
  text-align: right;
  color: hsl(327, 100%, 66%);
  text-decoration: none;
}
#experience > ol > li > a::after {
  content: '';
  display: inline-block;
  width: calc(11 / 750 * 100vw); height: calc(24 / 750 * 100vw);
  margin: 0 0 calc(6 / 750 * 100vw) calc(6 / 750 * 100vw);
  vertical-align: middle;
  background: url('../../../images/lp/idphotosticker/index_experience_04.svg') center / calc(11 / 750 * 100vw) no-repeat;
}



#example {
  width: 100%;
  overflow: hidden;
  padding: calc(88 / 750 * 100vw) 0 calc(66 / 750 * 100vw);
  background: url('../../../images/lp/idphotosticker/index_example_01.svg') center calc(185 / 750 * 100vw) / calc(711 / 750 * 100vw) no-repeat,
    repeating-linear-gradient(148.5deg,
      hsl(173, 96%, 90%),
      hsl(173, 96%, 90%) calc(64 / 750 * 100vw),
      hsl(174, 88%, 93%) calc(64 / 750 * 100vw),
      hsl(174, 88%, 93%) calc(128 / 750 * 100vw)
    );
}

#example > h2 {
  width: 100%;
  font-weight: 900;
  font-size: calc(60 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(75em / 1000);
  text-align: center;
  color: hsl(216, 60%, 51%);
}

#example #slider {
  width: 100%;
  position: relative;
  margin: calc(111 / 750 * 100vw) 0 0; padding: 0 0 calc(101 / 750 * 100vw);
}
#example #slider .splide__slide {
  width: calc(490 / 750 * 100vw);
}
#example #slider .splide__slide > figure {
  width: 100%;
  margin: 0;
}
#example #slider .splide__slide > figure img {
  width: 100%; height: auto;
  border-radius: calc(16 / 750 * 100vw);
  box-shadow: 0 0 calc(5 / 750 * 100vw) hsla(0, 0%, 0%, 0.18);
}
#example #slider .splide__slide > figure > figcaption {
  width: 100%;
  margin: calc(20 / 750 * 100vw) 0 0;
  font-weight: 900;
  font-size: calc(30 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(25em / 1000);
  text-align: center;
  color: hsl(0, 0%, 31%);
}
#example #slider .splide__arrows {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: calc(286 / 750 * 100vw);
  inset: calc(604 / 750 * 100vw) auto auto calc(50% - calc(286 / 2 / 750 * 100vw));
}
#example #slider .splide__arrows .splide__arrow {
  width: calc(50 / 750 * 100vw); height: calc(50 / 750 * 100vw);
  padding: 0;
  border: none;
  background: none;
}
#example #slider .splide__arrows .splide__arrow > img {
  width: 100%;
  height: auto;
}
#example #slider .splide__arrows .splide__slideindex {
  display: flex;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: calc(47 / 750 * 100vw); line-height: 1;
  align-items: center;
  color: hsl(216, 60%, 51%);
}



body > section.fascia {
  width: 100%;
  padding: calc(124 / 750 * 100vw) 0 calc(67 / 750 * 100vw);
  background: url('../../../images/lp/idphotosticker/index_fascia_01_3.webp') right calc(8 / 750 * 100vw) / calc(365 / 750 * 100vw) no-repeat,
    url('../../../images/lp/idphotosticker/index_fascia_01_2_sp.webp') right bottom / calc(726 / 750 * 100vw) no-repeat,
    url('../../../images/lp/idphotosticker/index_fascia_01_1_sp.webp') left top / calc(618 / 750 * 100vw) no-repeat,
    hsl(221, 90%, 29%);
}

body > section.fascia > hgroup {
  display: flex;
  flex-wrap: wrap;
  width: calc(245 / 750 * 100vw);
  margin: 0 0 0 calc(112 / 750 * 100vw);
}
body > section.fascia > hgroup > img {
  width: 100%; height: auto;
}
body > section.fascia > hgroup > h1 {
  width: calc(245 / 750 * 100vw);
  margin: calc(30 / 750 * 100vw) 0 0;
}
body > section.fascia > hgroup > h1 img {
  width: 100%; height: auto;
}

body > section.fascia > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(506 / 750 * 100vw); height: calc(86 / 750 * 100vw);
  margin: calc(45 / 750 * 100vw) auto 0;
  font-weight: 700;
  font-size: calc(36 / 750 * 100vw); line-height: 1;
  text-decoration: none;
  color: hsl(0, 0%, 0%);
  background: hsl(55, 100%, 61%);
  border-radius: calc(86 / 2 / 750 * 100vw);
}



#flow {
  width: 100%;
  padding: calc(80 / 750 * 100vw) 0 0;
  background: linear-gradient(hsl(0, 0%, 100%) calc(1735 / 1872 * 100%), hsl(189, 86%, 77%) calc(1735 / 1872 * 100%));
}

#flow > h2 {
  font-weight: 900;
  font-size: calc(60 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(25em / 1000);
  text-align: center;
  color: hsl(221, 90%, 29%);
}

#flow > p {
  margin: calc(22 / 750 * 100vw) auto 0;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(25em / 1000);
  text-align: center;
  color: hsl(0, 0%, 31%);
}

#flow > ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(30 / 750 * 100vw);
  width: calc(537 / 750 * 100vw);
  margin: calc(90 / 750 * 100vw) auto 0;
}
#flow > ol > li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding: calc(74 / 750 * 100vw) 0 calc(29 / 750 * 100vw);
  background: hsl(0, 0%, 100%);
  border: calc(6 / 750 * 100vw) solid hsl(221, 90%, 29%);
  border-radius: calc(21 / 750 * 100vw);
}
#flow > ol > li::after {
  content: counter(counter);
  display: flex;
  justify-content: center;
  width: calc(108 / 750 * 100vw); height: calc(108 / 750 * 100vw);
  box-sizing: border-box;
  position: absolute;
  inset: calc(-51 / 750 * 100vw) auto auto calc(50% - 108 / 2 / 750 * 100vw);
  padding: calc(29 / 750 * 100vw) 0 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: calc(52 / 750 * 100vw); line-height: 1;
  color: hsl(0, 0%, 100%);
  background: url(../../../images/lp/idphotosticker/index_flow_01.svg) center / contain no-repeat;
}
#flow > ol > li > img {
  height: auto;
}
#flow > ol > li:nth-of-type(1) > img {/* -- お見積り */
  width: calc(205 / 750 * 100vw);
}
#flow > ol > li:nth-of-type(2) > img {/* -- 印刷データ入稿 */
  width: calc(229 / 750 * 100vw);
}
#flow > ol > li:nth-of-type(3) > img {/* -- 内職・出荷 */
  width: calc(231 / 750 * 100vw);
}
#flow > ol > li > h3 {
  width: 100%;
  margin: calc(35 / 750 * 100vw) 0 0;
  font-weight: 700;
  font-size: calc(36 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(25em / 1000);
  text-align: center;
  color: hsl(0, 0%, 0%);
}
#flow > ol > li > p {
  width: calc(470 / 750 * 100vw);
  position: relative;
  margin: calc(29 / 750 * 100vw) auto 0; padding: calc(28 / 750 * 100vw) 0 0;
  font-weight: 700;
  font-size: calc(24 / 750 * 100vw); line-height: calc(34 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  color: hsl(0, 0%, 31%);
}
#flow > ol > li > p::before {
  content: '';
  display: block;
  width: calc(120 / 750 * 100vw); height: calc(4 / 750 * 100vw);
  box-sizing: border-box;
  position: absolute;
  inset: 0 auto auto calc(50% - 120 / 2 / 750 * 100vw);
  background: hsl(327, 100%, 66%);
}



#faq {
  width: 100%;
  padding: calc(96 / 750 * 100vw) 0 21.3333333333vw;
  background: hsl(189, 86%, 77%);
}

#faq > h2 {
  width: 100%;
  font-weight: 900;
  font-size: calc(48 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(25em / 1000);
  text-align: center;
  color: hsl(221, 90%, 29%);
}

#faq > details {
  width: calc(696 / 750 * 100vw);
  box-sizing: border-box;
  margin: calc(26 / 750 * 100vw) auto 0;
  padding: calc(31 / 750 * 100vw) 0 calc(34 / 750 * 100vw);
  background: hsl(0, 0%, 100%);
  border: calc(5 / 750 * 100vw) solid hsl(221, 90%, 29%);
  border-bottom: calc(9 / 750 * 100vw) solid hsl(221, 90%, 29%);
  border-radius: calc(18 / 750 * 100vw);
}
#faq > details:first-of-type {
  margin: calc(61 / 750 * 100vw) auto 0;
}
#faq > details > summary {
  display: grid;
  grid-template-columns: calc(85 / 750 * 100vw) auto calc(53 / 750 * 100vw);
  align-items: center;
  width: calc(616 / 750 * 100vw);
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  font-weight: 700;
  font-size: calc(30 / 750 * 100vw); line-height: calc(35 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  color: hsl(0, 0%, 0%);
}
#faq > details > summary::-webkit-details-marker {/* -- iPhoneSE(1st?)対応 */
  display: none;
}
#faq > details > summary::before {
  content: 'Q.';
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: calc(60 / 750 * 100vw); line-height: 1;
  color: hsl(327, 100%, 66%);
}
#faq > details > summary::after {
  content: '';
  display: block;
  justify-self: end;
  width: calc(28 / 750 * 100vw); height: calc(17 / 750 * 100vw);
  background: url(../../../images/lp/idphotosticker/index_faq_01.svg) center/contain no-repeat;
  transform-origin: center;
}
#faq > details:open > summary::after {
  transform: rotate(180deg);
}
#faq > details > p {
  display: flex;
  align-items: center;
  width: calc(616 / 750 * 100vw); min-height: calc(24 * 2 / 750 * 100vw);
  box-sizing: border-box;
  position: relative;
  margin: calc(25 / 750 * 100vw) auto 0; padding: 0 0 0 calc(85 / 750 * 100vw);
  font-weight: 700;
  font-size: calc(24 / 750 * 100vw); line-height: calc(34 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  color: hsl(0, 0%, 0%);
}
#faq > details > p::before {
  content: 'A.';
  display: block;
  width: calc(85 / 750 * 100vw);
  position: absolute;
  inset: 0 auto auto 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: calc(60 / 750 * 100vw); line-height: 1;
  color: hsl(327, 100%, 66%);
}



body > aside {
  width: 100%; height: 0;
  position: sticky;
  inset: auto auto calc(60 / 750 * 100vw) 0; z-index: 1;
}

body > aside > a {
  display: block;
  width: calc(109 / 750 * 100vw); height: calc(109 / 750 * 100vw);
  box-sizing: border-box;
  overflow: hidden;
  position: absolute;
  inset: auto calc(15 / 750 * 100vw) 0 auto;
  background: hsl(55, 100%, 61%);
  border: calc(4 / 750 * 100vw) solid hsl(221, 90%, 29%);
  border-radius: 50%;
}
body > aside > a img {
  width: 100%; height: auto;
}



footer {
  width: 100%;
  position: relative;
  padding: calc(110 / 750 * 100vw) 0 0;
  background: hsl(0, 0%, 100%) url('../../../images/lp/idphotosticker/index_fascia_01_3.webp') right calc(52 / 750 * 100vw) top calc(21 / 750 * 100vw) / calc(364 / 750 * 100vw) no-repeat;
}

footer > hgroup {
  display: flex;
  flex-wrap: wrap;
  width: calc(251 / 750 * 100vw); height: calc(227 / 750 * 100vw);
  margin: 0 0 0 calc(56 / 750 * 100vw);
}
footer > hgroup > img {
  width: 100%; height: auto;
}
footer > hgroup > h1 {
  width: calc(244 / 750 * 100vw);
  margin: calc(28 / 750 * 100vw) 0 0 calc(5 / 750 * 100vw);
}
footer > hgroup > h1 img {
  width: 100%; height: auto;
}

footer > a {
  display: flex;
  justify-content: center; align-items: center;
  width: calc(514 / 750 * 100vw); height: calc(97 / 750 * 100vw);
  box-sizing: border-box;
  margin: calc(49 / 750 * 100vw) auto 0;
  font-weight: 700;
  font-size: calc(36 / 750 * 100vw); line-height: 1;
  text-decoration: none;
  color: hsl(221, 90%, 29%);
  background: hsl(55, 100%, 61%);
  border: calc(4 / 750 * 100vw) solid hsl(221, 90%, 29%);
  border-bottom: calc(7 / 750 * 100vw) solid hsl(221, 90%, 29%);
  border-radius: calc(97 / 2 / 750 * 100vw);
}

footer > small {
  display: block;
  width: 100%;
  margin: calc(63 / 750 * 100vw) 0 0; padding: calc(19 / 750 * 100vw) 0 calc(24 / 750 * 100vw);
  font-weight: 500;
  font-size: calc(20 / 750 * 100vw); line-height: 1;
  text-align: center;
  color: hsl(0, 0%, 0%);
  border-top: calc(2 / 750 * 100vw) solid hsl(0, 0%, 0%);
  background: hsl(0, 0%, 100%);
}





@media (min-width: 767px) {

body {
  min-width: 1240px;
  background:linear-gradient(hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 1) 50%),
  repeating-linear-gradient(148.5deg,
    hsl(174, 89%, 89%),
    hsl(174, 89%, 89%) 64px,
    hsl(173, 95%, 84%) 64px,
    hsl(173, 95%, 84%) 128px
  ),
  hsl(0, 0%, 100%);
}



header {
  height: 100px;
  padding: 23px 78px 0 62px;
  border-radius: 0 0 40px 40px;
  box-shadow: 0 0 13px hsla(0, 0%, 0%, 0.15);
}

header > h1 {
  width: 136px;
  margin: 0;
}

header > a {
  width: 262px; height: 50px;
  font-size: 18px;
  border: 2px solid hsl(0, 0%, 0%);
  border-bottom: 4px solid hsl(0, 0%, 0%);
  border-radius: calc(50px / 2);
  transition: color 0.3s, background 0.3s;
}
header > a:hover {
  color: hsl(0, 0%, 100%);
  background: hsl(216, 60%, 51%);
  border-bottom: 2px solid hsl(0, 0%, 0%);
  transform: translate(0, 2px);
}



#cover {
  height: 755px;
  background: url('../../../images/lp/idphotosticker/index_cover_01.webp') calc(50% - (600px - 628px / 2)) 38px / 628px no-repeat,
    url('../../../images/lp/idphotosticker/index_cover_02_pc.svg') center 27px / 1610px no-repeat;
}

#cover > p:nth-of-type(1) {/* -- Vanfuで人気爆発 */
  align-items: center;
  gap: 19px;
  width: 386px;
  inset: 36px auto auto calc(50% + 93px);
  font-size: 24px;
}
#cover > p:nth-of-type(1) > em {
  width: 241px; height: 111px;
  border-radius: 12px;
}
#cover > p:nth-of-type(1) > em > img {
  width: 183px;
}

#cover > h1 {
  width: 591px;
  inset: 131px auto auto calc(50% + 9px);
}

#cover > p:nth-of-type(2) {/* -- 印刷会社がご提案するステッカー。 */
  inset: 496px auto auto 0;
  font-size: 22px; line-height: 30px;
}
#cover > p:nth-of-type(2) > br:nth-of-type(2) {/* -- 、出荷まで<br>柔軟に対応 */
  display: none;
}

#cover > p:nth-of-type(3) {/* -- 芸能事務所様、アニメゲーム会社様必見！ */
  gap: 10px 0;
  width: 1200px;
  inset: 579px auto auto calc(50% - 1200px / 2);
  font-size: 39px;
}
#cover > p:nth-of-type(3) > em:nth-of-type(1) {/* -- 芸能事務所様、 */
  padding: 7px 0 8px 19px;
  border-radius: 4px 0 0 4px;
}
#cover > p:nth-of-type(3) > em:nth-of-type(2) {/* -- アニメゲーム会社様必見！ */
  padding: 7px 19px 8px 0;
  border-radius: 0 4px 4px 0;
}
#cover > p:nth-of-type(3) > em:nth-of-type(3) {/* -- “推し”を、証明写真に。 */
  padding: 7px 0 8px 19px;
  border-radius: 4px 0 0 4px;
}
#cover > p:nth-of-type(3) > em:nth-of-type(4) {/* -- レトロ可愛い */
  padding: 7px 0 8px;
  border-radius: 0;
}
#cover > p:nth-of-type(3) > em:nth-of-type(5) {/* -- 証明写真風ステッカー */
  padding: 7px 19px 8px 0;
  border-radius: 0 4px 4px 0;
}



#issue {
  padding: 36px 0 0;
}

#issue > h2 {
  width: 854px;
}

#issue > picture {
  width: 1188px;
  margin: 36px auto 0;
}



#experience {
  padding: 101px 0 100px;
}

#experience > h2 {
  width: 372px; height: 66px;
  font-size: 48px;
  letter-spacing: calc(25em / 1000);
  background: url('../../../images/lp/idphotosticker/index_experience_01.svg') center bottom / 372px no-repeat;
}

#experience > ol {
  gap: 83px 24px;
  width: 1200px;
  margin: 50px auto 0;
}
#experience > ol > li {
  grid-template: auto auto auto / 190px auto;
  gap: 0;
  width: 588px;
  padding: 0 10px 38px;
  border: 2px solid hsl(221, 74%, 33%);
  border-radius: 18px;
  box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.18);
}
#experience > ol > li::before {
  width: 98px; height: 60px;
  inset: -40px auto auto calc(50% - 98px / 2);
  padding: 22px 0 0;
  font-size: 35px;
  background: url('../../../images/lp/idphotosticker/index_experience_02_pc.svg') center top / 98px no-repeat;
}
#experience > ol > li > h3 {
  grid-row: 1/2; grid-column: 2/3;
  margin: 30px 0 0;
  font-size: 22px; line-height: 29px;
  text-align: left;
}
#experience > ol > li > img {
  grid-row: 1/4; grid-column: 1/2;
  width: 177px;
  margin: 49px 0 0;
}
#experience > ol > li > p {
  grid-row: 2/3; grid-column: 2/3;
  align-self: start;
  margin: 7px 24px 0 0;
  font-size: 16px; line-height: 26px;
}
#experience > ol > li > a {
  grid-row: 3/4; grid-column: 2/3;
  font-size: 16px;
}
#experience > ol > li > a::after {
  width: 8px; height: 14px;
  margin: 0 24px 4px 6px;
  background: url('../../../images/lp/idphotosticker/index_experience_04.svg') center / 8px no-repeat;
}
#experience > ol > li > a:hover {
  text-decoration: underline;
}



#example {
  padding: 164px 0 75px;
  background: url('../../../images/lp/idphotosticker/index_example_01.svg') calc(50% - (89px - 1058px / 2)) 158px / 1058px no-repeat,
    repeating-linear-gradient(148.5deg,
      hsl(173, 96%, 90%),
      hsl(173, 96%, 90%) 64px,
      hsl(174, 88%, 93%) 64px,
      hsl(174, 88%, 93%) 128px
    );
}

#example > h2 {
  width: 1200px;
  margin: 0 auto;
  font-size: 48px;
  text-align: left;
}

#example #slider {
  width: calc(600px + 50vw);
  inset: 0 auto auto calc(50% - 600px);
  margin: 50px 0 0; padding: 0 0 88px;
}
#example #slider .splide__slide {
  width: 380px;
}
#example #slider .splide__slide > figure img {
  border-radius: 16px;
  box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.18);
}
#example #slider .splide__slide > figure > figcaption {
  margin: 21px 0 0;
  font-size: 24px;
  text-align: left;
}
#example #slider .splide__slide > figure > figcaption > br {
  display: none;
}
#example #slider .splide__arrows {
  width: 220px;
  inset: 463px auto auto 0;
}
#example #slider .splide__arrows::after {
  content: '';
  display: block;
  width: calc(350px + 50vw); height: 4px;
  position: absolute;
  inset: 14px auto auto 250px;
  background: hsl(216, 60%, 51%);
}
#example #slider .splide__arrows .splide__arrow {
  width: 39px; height: 39px;
  cursor: pointer;
}
#example #slider .splide__arrows .splide__slideindex {
  font-size: 36px;
}



body > section.fascia {
  padding: 127px 0 110px;
  background: url('../../../images/lp/idphotosticker/index_fascia_01_3.webp') calc(50% + 65px + 445px / 2) 10px / 445px no-repeat,
    url('../../../images/lp/idphotosticker/index_fascia_01_1_pc.webp') center / 1544px no-repeat,
    hsl(221, 90%, 29%);
}

body > section.fascia > hgroup {
  width: 524px;
  position: relative;
  inset: 0 0 0 calc(50% - 487px);
  margin: 0;
}
body > section.fascia > hgroup > img {
  width: 252px;
}
body > section.fascia > hgroup > h1 {
  width: 245px;
  margin: 0 0 0 27px;
}

body > section.fascia > a {
  width: 361px; height: 62px;
  position: relative;
  inset: 0 0 0 calc(50% - 417px);
  margin: 51px 0 0;
  font-size: 25px;
  border-radius: calc(62px / 2);
  transition: color 0.3s, background 0.3s;
}
body > section.fascia > a:hover {
  color: hsl(0, 0%, 100%);
  background: hsl(216, 60%, 51%);
}



#flow {
  padding: 99px 0 0;
  background: linear-gradient(hsl(0, 0%, 100%) calc(534 / 652 * 100%), hsl(189, 86%, 77%) calc(534 / 652 * 100%));
}

#flow > h2 {
  font-size: 48px;
}

#flow > p {
  margin: 23px auto 0;
  font-size: 24px;
}

#flow > ol {
  gap: 0 20px;
  width: 1000px;
  margin: 85px auto 0;
}
#flow > ol > li {
  align-content: start;
  width: 320px;
  padding: 49px 0 25px;
  border: 4px solid hsl(221, 90%, 29%);
  border-radius: 21px;
}
#flow > ol > li::after {
  width: 84px; height: 84px;
  inset: -49px auto auto calc(50% - 42px);
  padding: 27px 0 0;
  font-size: 41px;
}
#flow > ol > li::before {
  content: '';
  display: block;
  width: 39px; height: 46px;
  position: absolute;
  inset: 100px auto auto -27px; z-index: 1;
  background: url(../../../images/lp/idphotosticker/index_flow_02.svg) center left/contain no-repeat;
}
#flow > ol > li:first-of-type::before {
  display: none;
}
#flow > ol > li:nth-of-type(1) > img {/* -- お見積り */
  width: 140px;
  margin: 0 0 30px;
}
#flow > ol > li:nth-of-type(2) > img {/* -- 印刷データ入稿 */
  width: 152px;
  margin: 0 0 30px;
}
#flow > ol > li:nth-of-type(3) > img {/* -- 内職・出荷 */
  width: 129px;
  margin: 24px 0 60px;
}
#flow > ol > li > h3 {
  margin: 30px 0 0;
  font-size: 24px;
}
#flow > ol > li > p {
  width: 250px;
  margin: 16px auto 0; padding: 15px 0 0;
  font-size: 16px; line-height: 24px;
}
#flow > ol > li > p::before {
  width: 69px; height: 2px;
  inset: 0 auto auto calc(50% - 69px / 2);
}



#faq {
  padding: 97px 0 96px;
}

#faq > h2 {
  font-size: 48px;
}

#faq > details {
  width: 1000px;
  margin: 28px auto 0; padding: 33px 0 37px;
  border: 4px solid hsl(0, 0%, 0%);
  border-bottom: 7px solid hsl(0, 0%, 0%);
  border-radius: 16px;
}
#faq > details:first-of-type {
  margin: 61px auto 0;
}
#faq > details > summary {
  grid-template-columns: 81px auto 63px;
  width: 923px;
  font-size: 24px; line-height: 1;
  cursor: pointer;
}
#faq > details > summary::before {
  width: 81px;
  font-size: 60px;
}
#faq > details > summary::after {
  width: 28px; height: 17px;
}
#faq > details > p {
  width: 923px; min-height: calc(23px * 2);
  margin: 24px auto 0; padding: 0 0 0 81px;
  font-size: 18px; line-height: 28px;
}
#faq > details > p::before {
  width: 81px;
  font-size: 60px;
}



body > aside {
  inset: auto auto 300px 0;
}

body > aside > a {
  width: 109px; height: 109px;
  inset: auto 154px -270px auto;
  border: 4px solid hsl(0, 0%, 0%);
  transition: background 0.3s;
}

body > aside > a:hover {
  background: hsl(216, 60%, 51%);
}



footer {
  padding: 125px 0 0;
  background: hsl(0, 0%, 100%) url('../../../images/lp/idphotosticker/index_fascia_01_3.webp') calc(50% + 56px + 445px / 2) 10px / 445px no-repeat;
}

footer > hgroup {
  width: 527px; height: 101px;
  margin: 0 0 0 calc(50% - 500px);
}
footer > hgroup > img {
  width: 258px;
}
footer > hgroup > h1 {
  width: 245px;
  margin: 2px 0 0 24px;
}

footer > a {
  width: 365px; height: 69px;
  margin: 39px 0 0 calc(50% - 500px);
  font-size: 25px;
  border: 2px solid hsl(221, 90%, 29%);
  border-bottom: 5px solid hsl(221, 90%, 29%);
  border-radius: calc(69px / 2);
  transition: color 0.3s, background 0.3s;
}
footer > a:hover {
  color: hsl(0, 0%, 100%);
  background: hsl(216, 60%, 51%);
  border-bottom: 2px solid hsl(0, 0%, 0%);
  transform: translate(0, 2px);
}

footer > small {
  margin: 96px 0 0; padding: 27px 0 19px;
  border-top: 2px solid hsl(0, 0%, 0%);
  font-size: 14px;
}

}/* -- /@media (min-width: 767px) */