/*============================
#pr
============================*/
section#pr {
  display: flex;
  padding: var(--padding-block) var(--padding-inline);
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  background: var(--surface-variant, #f5f5f7);
  gap: var(--scale-56);
}

section#pr h2 {
  display: flex;
  justify-content: center;
  align-self: stretch;
  align-items: unset;
  color: var(--surface, #fff);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 170%; /* 34px */
  max-width: var(--width-md);
  margin-inline: auto;
  width: 100%;
}
section#pr h2 > svg {
  width: var(--scale-8);
}
section#pr h2 div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  background: var(--secondary, #f89000);
}
section#pr h2 div :is(svg, img) {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

section#pr h2 div img {
  width: var(--scale-32, 32px);
  height: 30.86px;
  aspect-ratio: 32/30.86;
}

section#pr div.pr__container {
  display: flex;
  max-width: var(--width-md, 1100px);
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  margin-inline: auto;
  position: relative;
}
section#pr div.pr__container::before {
  content: "PR";
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
  background: var(--primary);
  padding: 6px 40px;
  font-size: 9px;
  text-align: center;
}
section#pr div.pr__container div.pr__left {
  display: flex;
  width: min(40px, 100vw / 375 * 32);
  height: 108px;
  padding-top: calc(32px + 3px);
  flex-direction: column;
  align-items: flex-end;
  aspect-ratio: 10/27;
}
section#pr div.pr__container div.pr__left::before {
  content: "";
  display: block;
  width: 100%;
  height: min(56px, 100vw / 375 * 32);
  background: var(--primary, #4a64ba);
}
section#pr div.pr__container div.pr__left svg {
  color: var(--primary, #4a64ba);
  width: 100%;
}

section#pr div.pr__container div.pr__main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex: 1 0 0;
  border: 3px solid var(--primary, #4a64ba);
  background: #fff;
  box-shadow: 12px 12px 0 0 rgba(0, 0, 0, 0.08);
}
section#pr div.pr__container div.pr__title {
  display: flex;
  padding: 32px min(40px, 100vw / 375 * 24) 32px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: min(20px, 100vw / 375 * 15);
  flex: 1 0 0;
  border-right: 1px solid var(--primary, #4a64ba);
  align-self: stretch;
}
@media screen and (max-width: 768px) {
  section#pr div.pr__container div.pr__main {
    flex-direction: column;
  }
  section#pr div.pr__container div.pr__title {
    border-right: none;
    padding-bottom: 0;
  }
}

section#pr div.pr__container div.pr__title h2 {
  display: flex;
  align-items: center;
  align-self: stretch;
  height: min(56px, 100vw / 375 * 32);
  background: var(--primary, #4a64ba);
  color: var(--surface, #fff);
  font-family: "Noto Sans JP";
  font-size: min(28px, 100vw / 375 * 20);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

section#pr div.pr__container div.pr__title figure.screenshot {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;

  display: flex;
  padding-left: min(40px, 100vw / 375 * 24);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
section#pr div.pr__container div.pr__title figure.screenshot img {
  width: 100%;
  aspect-ratio: 450/253;
  border: 1px solid var(--border);
}
section#pr div.pr__container div.pr__company {
  padding-left: min(40px, 100vw / 375 * 24);
  color: var(--on-surface, #1b1c1f);
  font-family: "Noto Sans JP";
  font-size: var(--scale-12, 12px);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  width: 100%;
}
section#pr div.pr__container div.pr__company.sp {
  padding-left: 0;
}
section#pr div.pr__container div.pr__features {
  display: flex;
  padding: min(32px, 100vw / 375 * 21) min(40px, 100vw / 375 * 24);
  flex-direction: column;
  align-items: center;
  gap: min(32px, 100vw / 375 * 21);
  flex: 1 0 0;
}
section#pr div.pr__container div.pr__features h3 {
  display: flex;
  align-items: center;
  gap: min(24px, 100vw / 375 * 18);
  align-self: stretch;
  color: var(--primary, #4a64ba);
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  font-size: min(28px, 100vw / 375 * 24);
}
section#pr div.pr__container div.pr__features h3:before,
section#pr div.pr__container div.pr__features h3:after {
  content: "";
  background: var(--primary, #4a64ba);
  height: 1.5px;
  flex: 1 0 0;
}
section#pr div.pr__container div.pr__features h3 big {
  font-size: min(40px, 100vw / 375 * 36);
}
section#pr div.pr__container div.pr__features ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: min(20px, 100vw / 375 * 15);
  align-self: stretch;
}
section#pr div.pr__container div.pr__features ul li {
  display: flex;
  align-items: flex-start;
  gap: min(8px, 100vw / 375 * 6);
  align-self: stretch;

  color: var(--on-surface, #1b1c1f);
  font-family: "Noto Sans JP";
  font-size: min(14px, 100vw / 375 * 11);
  font-style: normal;
  font-weight: 500;
  line-height: 160%; /* 22.4px */
}
section#pr div.pr__container div.pr__features ul li svg {
  aspect-ratio: 1 / 1;
  width: 1em;
  display: inline-block;
  margin: 0;
}
section#pr div.pr__container div.pr__features ul li div.num {
  display: flex;
  width: calc(1em / 16 * 40);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: 1000px;
  background: var(--primary-container, #ebf5ff);
  color: var(--primary, #4a64ba);
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: min(16px, 100vw / 375 * 13);
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 16px */
  flex: 0 0 auto;
}
section#pr div.pr__container div.pr__features a {
  padding: var(--scale-16, 13px) var(--scale-8, 6px);
  justify-content: center;
  align-items: center;
  gap: var(--scale-8, 6px);
  align-self: stretch;
  border-radius: var(--scale-8, 6px);
  border: 1px solid rgba(0, 0, 0, 0.24);
  background: var(--secondary, #f89000);
  display: flex;
  align-items: center;
  gap: var(--scale-4, 4px);
  align-self: stretch;
  color: var(--surface, #fff);
  text-align: center;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
  font-family: "Noto Sans JP";
  font-size: var(--scale-20, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 20.8px */
  position: relative;
}

section#pr div.pr__container div.pr__features a:before {
  position: absolute;
  left: 1px;
  top: 1px;
  content: "";
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: var(--scale-8, 8px);
  border: 1px solid rgba(255, 255, 255, 0.64);
}

section#pr div.pr__container div.pr__features a div {
  flex: 1 0 0;
}
section#pr div.pr__container div.pr__features a svg {
  margin: 0;
  width: var(--scale-20, 16px);
  aspect-ratio: 1/1;
}
@media screen and (max-width: 768px) {
  section#pr {
    background: #fff;
  }
}
/*============================
#go-to-top
============================*/

section#go-to-top {
  display: flex;
  padding: var(--scale-24, 24px) var(--padding-inline, 24px);
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  position: sticky;
  right: 0;
  bottom: 0;
  z-index: 10;
}

section#go-to-top .go-to-top__container {
  width: 100%;
  max-width: var(--width-md);
  margin-inline: auto;
}
section#go-to-top .go-to-top__container a {
  width: var(--scale-40, 40px);
  aspect-ratio: 1/1;
  display: block;
  margin-left: auto;
}

/*============================
#note
============================*/
section#note {
  display: flex;
  padding: var(--scale-40, 40px) var(--padding-inline, 24px);
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background: var(--surface-variant, #f4eded);
}
section#note .note__container {
  max-width: var(--width-md, 1100px);
  flex: 1 0 0;
  color: var(--on-surface-variant, #6e6e6e);
  font-family: "Noto Sans JP";
  font-size: var(--scale-12, 12px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 15.6px */
  width: 100%;
  display: flex;
  justify-content: center;
}
section#pr div.pr__note ul {
  list-style-type: disc;
  margin-left: var(--padding-inline);
}
section#pr div.pr__note ul li {
}