@charset "UTF-8";
:root {
  /* color */
  --color-white: #ffffff;
  --color-text: #4f4f4f;
  --color-text-blue: #005587;
  --color-bg-light: #eefaff;
  --color-bg-dark: #eaf1f8;
  --color-blue-light: #0bbbef;
  --color-blue-main: #035788;
  --color-blue-medium: #046b9d;
  --color-blue-dark: #032a57;
  --color-green-light: #5083a1;
  --color-orange: #ff8617;
  --color-line: #d9d9d9;
  --color-border: #cfd8e3;
  /* font */
  --font-sans: YuGothic, "Yu Gothic", "游ゴシック体", "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-en: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.p-about {
  background-color: var(--color-white);
}

.p-about-intro {
  position: relative;
  padding: 120rem 0;
  color: var(--color-white);
  background: linear-gradient(238deg, var(--color-blue-medium) 0%, var(--color-blue-dark) 100%);
  overflow: hidden;
}
@media only screen and (max-width: 1271px) {
  .p-about-intro {
    padding: 88rem 0;
  }
}
@media only screen and (max-width: 767px) {
  .p-about-intro {
    padding: 64rem 0;
  }
}

.p-about-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470rem;
  gap: 80rem;
  align-items: start;
}
@media only screen and (max-width: 1271px) {
  .p-about-intro__inner {
    grid-template-columns: 1fr;
    gap: 60rem;
  }
}

.p-about-intro__content {
  position: relative;
  z-index: 2;
}

.p-about-intro__emphasis {
  display: inline-flex;
}

.p-about-intro__emphasis span {
  position: relative;
  display: inline-block;
}

.p-about-intro__emphasis span::before {
  position: absolute;
  top: -2rem;
  left: 50%;
  width: 5rem;
  height: 5rem;
  background-color: var(--color-orange);
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
}

@media only screen and (max-width: 1271px) {
  .p-about-intro__emphasis span::before {
    top: -1.9rem;
    width: 4rem;
    height: 4rem;
  }
}
@media only screen and (max-width: 1271px) and (max-width: 767px) {
  .p-about-intro__emphasis span::before {
    top: -1rem;
    width: 3rem;
    height: 3rem;
  }
}
.p-about-intro__emphasis-gap {
  margin-left: 1.25em;
}

.p-about-intro .c-heading--medium {
  margin: 0;
  font-size: 24rem;
  font-weight: 700;
  line-height: 1.6666666667;
  letter-spacing: 0.96rem;
}
@media only screen and (max-width: 1271px) {
  .p-about-intro .c-heading--medium {
    font-size: 18rem;
    letter-spacing: 0.72rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-about-intro .c-heading--medium {
    font-size: 16rem;
    letter-spacing: 0.64rem;
  }
}

.p-about-intro__list {
  display: grid;
  gap: 30rem;
  margin-top: 56rem;
  padding: 0;
  list-style: none;
}
@media only screen and (max-width: 767px) {
  .p-about-intro__list {
    gap: 24rem;
    margin-top: 40rem;
  }
}

.p-about-intro__item {
  display: grid;
  grid-template-columns: 56rem 560rem;
  gap: 24rem;
  align-items: center;
}
@media only screen and (max-width: 1271px) {
  .p-about-intro__item {
    grid-template-columns: 56rem 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .p-about-intro__item {
    grid-template-columns: 44rem 1fr;
    gap: 14rem;
    align-items: center;
  }
}

.p-about-intro__icon img {
  display: block;
  width: 56rem;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .p-about-intro__icon img {
    width: 44rem;
  }
}

.p-about-intro__text {
  margin: 0;
}

.p-about-intro__map {
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 1271px) {
  .p-about-intro__map {
    max-width: 460rem;
    margin-inline: auto;
  }
}

.p-about-intro__map img {
  display: block;
  width: 100%;
  height: auto;
}

.p-about-products {
  padding-top: 120rem;
  background-color: var(--color-white);
}
@media only screen and (max-width: 1271px) {
  .p-about-products {
    padding-top: 88rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-about-products {
    padding-top: 64rem;
  }
}

.p-about-products__button {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32rem;
  margin-top: 80rem;
}
@media only screen and (max-width: 1271px) {
  .p-about-products__button {
    grid-template-columns: 1fr;
    gap: 24rem;
    margin-top: 64rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-about-products__button {
    gap: 20rem;
    margin-top: 48rem;
  }
}

.p-about-products__button .c-btn-lower {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.p-about__sns {
  padding-top: 120rem;
  padding-bottom: 120rem;
}
@media only screen and (max-width: 1271px) {
  .p-about__sns {
    padding-top: 88rem;
    padding-bottom: 88rem;
  }
}
@media only screen and (max-width: 767px) {
  .p-about__sns {
    padding-top: 64rem;
    padding-bottom: 64rem;
  }
}