@charset "UTF-8";
.section-title {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
}
.section-title p {
  font-size: var(--lg3);
  font-weight: 500;
  color: var(--chitose-blue);
  margin-bottom: var(--md);
}
@media screen and (max-width: 768px) {
  .section-title p {
    font-size: var(--xm);
  }
}
.section-title h2 {
  font-size: var(--lg4);
  font-weight: 700;
  color: var(--chitose-blue);
  background-color: var(--white);
  border: 2px solid var(--chitose-blue);
  padding: var(--xxxs) calc(var(--xxxs) * 2);
}
@media screen and (max-width: 768px) {
  .section-title h2 {
    font-size: var(--lg3);
  }
}

.first-view {
  position: relative;
  height: -moz-fit-content;
  height: fit-content;
  margin-bottom: 15vw;
}
@media screen and (max-width: 768px) {
  .first-view {
    margin-bottom: 25vw;
  }
}
.first-view .pattern {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.first-view .pattern * {
  position: absolute;
}
.first-view .pattern .vector1 {
  top: 0;
  left: 0;
}
@media screen and (max-width: 768px) {
  .first-view .pattern .vector1 {
    left: -25vw;
  }
}
.first-view .pattern .vector1 svg:first-of-type {
  width: 47.5vw;
  height: auto;
}
@media screen and (max-width: 768px) {
  .first-view .pattern .vector1 svg:first-of-type {
    width: 55vw;
  }
}
.first-view .pattern .vector1 svg:last-of-type {
  width: 19vw;
  height: auto;
  top: 5vw;
  left: 10vw;
}
.first-view .pattern .vector2 {
  top: 0;
  right: 76vw;
}
@media screen and (max-width: 768px) {
  .first-view .pattern .vector2 {
    right: 100vw;
  }
}
.first-view .pattern .vector2 svg:first-of-type {
  width: 76vw;
  height: auto;
}
@media screen and (max-width: 768px) {
  .first-view .pattern .vector2 svg:first-of-type {
    width: 100vw;
  }
}
.first-view .pattern .vector2 svg:last-of-type {
  width: 14.3vw;
  height: auto;
  top: 0;
  right: -76vw;
}
@media screen and (max-width: 768px) {
  .first-view .pattern .vector2 svg:last-of-type {
    right: -100vw;
  }
}
.first-view .pattern .vector3 {
  bottom: 8.5vw;
  left: 0;
}
@media screen and (max-width: 768px) {
  .first-view .pattern .vector3 {
    bottom: 24vw;
    left: -10vw;
  }
}
.first-view .pattern .vector3 svg:first-of-type {
  width: 30vw;
  height: auto;
}
@media screen and (max-width: 768px) {
  .first-view .pattern .vector3 svg:first-of-type {
    width: 45vw;
  }
}
.first-view .pattern .vector3 svg:last-of-type {
  width: 22.8vw;
  height: auto;
  top: 2.6vw;
  left: 11.3vw;
}
@media screen and (max-width: 768px) {
  .first-view .pattern .vector3 svg:last-of-type {
    width: 30vw;
    left: 10vw;
  }
}
.first-view .pattern .vector4 {
  bottom: 11vw;
  right: 60vw;
}
@media screen and (max-width: 768px) {
  .first-view .pattern .vector4 {
    bottom: 0;
    right: 80vw;
  }
}
.first-view .pattern .vector4 svg:first-of-type {
  width: 60vw;
  height: auto;
}
@media screen and (max-width: 768px) {
  .first-view .pattern .vector4 svg:first-of-type {
    width: 80vw;
  }
}
.first-view .pattern .vector4 svg:last-of-type {
  width: 24.9vw;
  height: auto;
  top: 4vw;
  left: 8.8vw;
}
@media screen and (max-width: 768px) {
  .first-view .pattern .vector4 svg:last-of-type {
    width: 36vw;
  }
}
.first-view .logo {
  display: grid;
  gap: var(--xxs);
  padding-top: var(--lg5);
}
@media screen and (max-width: 768px) {
  .first-view .logo {
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    align-items: center;
    padding: var(--xlg2) 0 var(--lg4);
  }
}
.first-view .logo svg {
  width: 6.6vw;
  height: auto;
  margin: 0 auto var(--xxs);
}
.first-view .logo svg path {
  fill: var(--white);
}
@media screen and (max-width: 768px) {
  .first-view .logo svg {
    width: var(--lg5);
    margin: 0 auto;
  }
}
.first-view .logo p {
  text-align: center;
  color: var(--white);
}
.first-view .logo p:first-of-type {
  font-size: var(--sm);
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .first-view .logo p:first-of-type {
    font-size: var(--xxs);
  }
}
.first-view .logo p:last-of-type {
  font-size: var(--lg3);
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .first-view .logo p:last-of-type {
    font-size: var(--xs);
  }
}
.first-view .main-block {
  display: flex;
  margin-left: 10.1%;
  margin-right: 4.6%;
  gap: calc(var(--lg8) + var(--lg10));
  align-items: center;
}
@media screen and (max-width: 768px) {
  .first-view .main-block {
    display: grid;
    gap: 0;
  }
}
.first-view .main-block-texts {
  width: 35.5vw;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .first-view .main-block-texts {
    width: 100%;
  }
}
.first-view .main-block-texts .title {
  color: var(--normal-text);
}
.first-view .main-block-texts .title p {
  font-size: var(--xlg5);
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .first-view .main-block-texts .title p {
    font-size: var(--xlg2);
  }
}
.first-view .main-block-texts .title h1 {
  font-size: var(--lg10);
  font-weight: 700;
  margin: var(--lg3) 0 var(--lg5);
}
@media screen and (max-width: 768px) {
  .first-view .main-block-texts .title h1 {
    font-size: var(--lg5);
    margin: calc(var(--xlg2) / 2) 0;
  }
}
.first-view .main-block-texts .points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--xxs);
}
@media screen and (max-width: 768px) {
  .first-view .main-block-texts .points {
    gap: 0;
  }
}
.first-view .main-block-texts .points div {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .first-view .main-block-texts .points div {
    margin: 0 calc(var(--xxs) * -1);
    transform: translate(0, calc(var(--base-size) * -1));
  }
}
.first-view .main-block-texts .points div h2 {
  position: absolute;
  color: var(--white);
  font-size: var(--lg3);
}
@media screen and (max-width: 768px) {
  .first-view .main-block-texts .points div h2 {
    font-size: var(--xxs);
  }
}
.first-view .main-block-texts .points div h2 span {
  font-size: var(--lg4);
}
@media screen and (max-width: 768px) {
  .first-view .main-block-texts .points div h2 span {
    font-size: var(--sm);
  }
}
.first-view .main-block-texts .points div svg {
  width: 100%;
  height: auto;
}
.first-view .main-block-texts .points-first path {
  fill: var(--kasai);
}
@media screen and (max-width: 768px) {
  .first-view .main-block-texts .points-second {
    padding-bottom: 90%;
    z-index: 9;
  }
}
.first-view .main-block-texts .points-second path {
  fill: var(--okayama);
}
.first-view .main-block-texts .points-third path {
  fill: var(--chitose-orange);
}
.first-view .main-block-image img {
  width: 41.6vw;
  height: auto;
}
@media screen and (max-width: 768px) {
  .first-view .main-block-image img {
    width: 85vw;
    margin: -20vh auto 0;
  }
}

.phirosophy {
  display: grid;
  gap: calc(var(--md) + var(--lg5));
  padding: calc(var(--lg6) * 4) 0 calc(var(--lg6) * 2);
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .phirosophy {
    padding: calc(var(--xlg2) * 3) 0 calc(var(--lg6) * 2);
  }
}
.phirosophy .pattern {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.phirosophy .pattern * {
  position: absolute;
}
.phirosophy .pattern .vector1 {
  top: 0;
  right: 21vw;
}
.phirosophy .pattern .vector1 svg {
  width: 19.8vw;
  height: auto;
}
@media screen and (max-width: 768px) {
  .phirosophy .pattern .vector1 svg {
    width: calc(var(--xlg2) * 5);
  }
}
.phirosophy .pattern .vector2 {
  top: 14vw;
  left: 2vw;
}
@media screen and (max-width: 768px) {
  .phirosophy .pattern .vector2 {
    top: 30%;
    left: -3vw;
  }
}
.phirosophy .pattern .vector2 svg {
  width: 12.5vw;
  height: auto;
  transform: rotate(49.568deg);
}
@media screen and (max-width: 768px) {
  .phirosophy .pattern .vector2 svg {
    width: calc(var(--xlg2) * 3);
  }
}
.phirosophy .pattern .vector3 {
  top: 33vw;
  right: 28vw;
}
@media screen and (max-width: 768px) {
  .phirosophy .pattern .vector3 {
    top: 71%;
    right: calc(var(--xlg2) * 5);
  }
}
.phirosophy .pattern .vector3 svg {
  width: 18.1vw;
  height: auto;
}
@media screen and (max-width: 768px) {
  .phirosophy .pattern .vector3 svg {
    width: calc(var(--xlg2) * 4);
  }
}
.phirosophy h3 {
  font-size: var(--lg5);
  font-weight: 700;
  color: var(--black);
}
@media screen and (max-width: 768px) {
  .phirosophy h3 {
    font-size: var(--xlg3);
  }
}
.phirosophy > p {
  font-size: var(--md);
  font-weight: 500;
  color: var(--black);
}
@media screen and (max-width: 768px) {
  .phirosophy > p {
    font-size: var(--xm);
    line-height: 1.75;
  }
}
.phirosophy .carousel {
  width: 100%;
  overflow: hidden;
}
.phirosophy .carousel-track {
  display: flex;
  gap: var(--xm);
  animation: scroll 8s linear infinite;
}
@media screen and (max-width: 768px) {
  .phirosophy .carousel-track {
    gap: var(--xxs);
  }
}
.phirosophy .carousel-track img {
  width: auto;
  height: calc(var(--lg8) * 5);
  border-radius: var(--lg5);
}
@media screen and (max-width: 768px) {
  .phirosophy .carousel-track img {
    height: calc(var(--lg5) * 4);
    border-radius: var(--xlg2);
  }
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.message {
  position: relative;
  padding-top: calc(var(--lg10) * 2);
  z-index: 0;
  background: var(--kasai);
  overflow: hidden;
}
.message .pattern {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.message .pattern * {
  position: absolute;
}
.message .pattern .vector1 {
  top: 0;
  left: 0;
}
.message .pattern .vector1 svg {
  width: 100vw;
  height: auto;
  background: linear-gradient(to bottom, var(--white) 99%, var(--kasai) 100%);
}
.message .pattern .vector2 {
  top: 5.2vw;
  right: 21.7vw;
}
@media screen and (max-width: 768px) {
  .message .pattern .vector2 {
    top: 3vw;
    right: 17vw;
  }
}
.message .pattern .vector2 svg {
  width: 13.1vw;
  height: auto;
}
@media screen and (max-width: 768px) {
  .message .pattern .vector2 svg {
    width: calc(var(--xm) * 5);
  }
}
.message .pattern .vector2 svg path {
  fill: var(--white);
}
.message .pattern .vector3 {
  top: 27vw;
  left: 6.4vw;
}
@media screen and (max-width: 768px) {
  .message .pattern .vector3 {
    top: calc(var(--lg6) * 9.5);
    left: calc(var(--lg4) * -2);
  }
}
.message .pattern .vector3 svg {
  width: 14.2vw;
  height: auto;
}
@media screen and (max-width: 768px) {
  .message .pattern .vector3 svg {
    width: calc(var(--lg5) * 4);
  }
}
.message .pattern .vector3 svg path {
  fill: var(--white);
}
.message .pattern .vector4 {
  bottom: 13vw;
  right: 32.3vw;
}
@media screen and (max-width: 768px) {
  .message .pattern .vector4 {
    bottom: 30vw;
    right: calc(var(--lg5) * 3);
  }
}
.message .pattern .vector4 svg {
  width: 32.3vw;
  height: auto;
}
@media screen and (max-width: 768px) {
  .message .pattern .vector4 svg {
    width: calc(var(--lg5) * 5);
  }
}
.message .pattern .vector4 svg path {
  fill: var(--white);
}
.message .title {
  display: flex;
  justify-content: center;
}
.message .title svg {
  width: auto;
  height: var(--lg8);
}
@media screen and (max-width: 768px) {
  .message .title svg {
    height: var(--xlg4);
  }
}
.message .title svg path {
  stroke: var(--white);
}
.message .title svg:first-of-type {
  transform: rotate(-30deg);
}
.message .title svg:last-of-type {
  transform: rotate(30deg);
}
.message .title h2 {
  font-size: var(--xlg4);
  font-weight: 700;
  color: var(--white);
  padding: 0 calc(var(--md) / 2);
}
@media screen and (max-width: 768px) {
  .message .title h2 {
    font-size: var(--xlg2);
  }
}
.message .trouble {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 18.1vw;
  padding: var(--lg5) 0 var(--lg6);
}
@media screen and (max-width: 768px) {
  .message .trouble {
    height: auto;
  }
}
.message .trouble .bg {
  position: absolute;
  z-index: -1;
}
.message .trouble .bg svg {
  width: auto;
  height: 18.1vw;
}
@media screen and (max-width: 768px) {
  .message .trouble .bg svg {
    height: 86vw;
  }
}
.message .trouble .points {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  row-gap: var(--lg4);
  -moz-column-gap: var(--lg5);
       column-gap: var(--lg5);
}
@media screen and (max-width: 768px) {
  .message .trouble .points {
    row-gap: var(--xxs);
    grid-template-columns: repeat(1, max-content);
  }
}
.message .trouble .points .point {
  width: -moz-fit-content;
  width: fit-content;
}
.message .trouble .points .point-sentence {
  display: flex;
  gap: calc(var(--md) / 2);
  align-items: center;
  font-size: var(--md);
  font-weight: 700;
  color: var(--black);
}
@media screen and (max-width: 768px) {
  .message .trouble .points .point-sentence {
    font-size: var(--xm);
  }
}
.message .trouble .points .point-sentence::before {
  content: "";
  display: inline-block;
  width: var(--xlg3);
  height: var(--xlg3);
  background: url(../../images/manmaruchitose/icon_check.png);
  background-size: cover;
}
.message .trouble .points .point::after {
  content: "";
  display: block;
  width: 100%;
  height: calc(var(--md) / 2);
  opacity: 0.4;
  background: url(../../images/manmaruchitose/icon_dot.png);
  background-size: cover;
}
.message .support {
  width: 100%;
  padding: var(--lg5) 0 calc(var(--lg5) * 3);
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--lg5);
  justify-items: center;
}
@media screen and (max-width: 768px) {
  .message .support {
    padding: var(--xm) 0 calc(var(--lg5) * 1.5);
  }
}
.message .support img {
  width: 21.3vw;
  height: auto;
}
@media screen and (max-width: 768px) {
  .message .support img {
    width: calc(var(--lg5) * 5);
  }
}
.message .support h3 {
  font-size: var(--xlg3);
  font-weight: 700;
  text-align: center;
  color: var(--white);
}
@media screen and (max-width: 768px) {
  .message .support h3 {
    font-size: var(--md);
    line-height: 1.8;
  }
}
.message .support-policy {
  display: grid;
  gap: var(--lg4);
  justify-items: center;
  border: 3px solid var(--white);
  padding: var(--lg5) calc(var(--lg6) + var(--lg8)) var(--lg6);
  background-color: var(--kasai);
}
@media screen and (max-width: 768px) {
  .message .support-policy {
    padding: var(--lg4) var(--lg3) var(--lg5);
  }
}
.message .support-policy h4 {
  font-size: var(--lg3);
  font-weight: 700;
  color: var(--white);
}
@media screen and (max-width: 768px) {
  .message .support-policy h4 {
    font-size: var(--xlg2);
  }
}
.message .support-policy p {
  font-size: var(--xm);
  font-weight: 700;
  color: var(--white);
}
.message .support-policy p span {
  color: var(--yellow);
}
@media screen and (max-width: 768px) {
  .message .support-policy p {
    text-align: center;
    line-height: 2;
  }
}

.feature {
  position: relative;
  background-color: var(--kasai);
}
.feature .pattern {
  position: absolute;
  top: 0;
  width: 100%;
}
.feature .pattern * {
  position: absolute;
}
.feature .pattern .vector1 {
  top: 0;
  left: 0;
}
.feature .pattern .vector1 svg {
  width: 13.9vw;
  height: auto;
}
.feature .pattern .vector1 svg path {
  fill: var(--white);
}
.feature .section-title P {
  color: var(--white);
}
.feature-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lg5);
  width: 80%;
  margin: calc(var(--md) + var(--lg10)) auto 0;
  padding-bottom: var(--lg8);
}
@media screen and (max-width: 768px) {
  .feature-points {
    gap: var(--lg4);
    grid-template-columns: repeat(1, 1fr);
    margin: var(--lg3) auto 0;
  }
}
.feature-points-item {
  color: var(--white);
  display: grid;
  grid-template-rows: calc(var(--lg8) * 0.8) 1fr;
  grid-template-columns: subgrid;
}
@media screen and (max-width: 768px) {
  .feature-points-item {
    grid-template-rows: calc(var(--lg6) * 0.8) 1fr;
  }
}
.feature-points-item > p {
  font-family: "Inter";
  font-size: var(--lg8);
  font-weight: 600;
  line-height: 0.8;
}
@media screen and (max-width: 768px) {
  .feature-points-item > p {
    font-size: var(--lg6);
    text-align: center;
  }
}
.feature-points-item-contents {
  display: grid;
  gap: var(--lg3);
  grid-template-rows: var(--xlg3) max-content 1fr;
  justify-items: center;
  padding: var(--lg6);
  border: 2px solid var(--white);
}
@media screen and (max-width: 768px) {
  .feature-points-item-contents {
    padding: var(--lg3);
  }
}
.feature-points-item-contents h3 {
  font-size: var(--xlg3);
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .feature-points-item-contents h3 {
    font-size: var(--xlg2);
  }
}
.feature-points-item-contents img {
  width: 11.6vw;
  height: auto;
}
@media screen and (max-width: 768px) {
  .feature-points-item-contents img {
    width: 80%;
  }
}
.feature-points-item-contents p {
  font-size: var(--xm);
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .feature-points-item-contents p {
    font-size: var(--md);
  }
}

.gap {
  width: 100%;
  position: relative;
  background: linear-gradient(to top, var(--white) 99%, var(--kasai) 100%);
  z-index: -3;
}
.gap .pattern1 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -2;
}
.gap .pattern1 svg {
  width: 81vw;
  height: auto;
}
.gap .pattern1 svg path {
  fill: #FAC101;
}
.gap .pattern2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.gap .pattern2 svg {
  width: 100vw;
  height: auto;
}
.gap .pattern2 svg path {
  fill: var(--kasai);
}
.gap .pattern3 {
  padding-top: var(--lg10);
  padding-left: var(--lg8);
}
@media screen and (max-width: 768px) {
  .gap .pattern3 {
    padding-top: var(--lg6);
    padding-left: var(--xs);
  }
}
.gap .pattern3 svg {
  width: 13vw;
  height: auto;
}
@media screen and (max-width: 768px) {
  .gap .pattern3 svg {
    width: calc(var(--xm) * 4);
  }
}
.gap .pattern3 svg path {
  fill: var(--purple);
}

.service {
  position: relative;
}
.service .pattern1 {
  position: absolute;
  top: 1vw;
  right: 4vw;
  z-index: -1;
}
.service .pattern1 svg {
  width: 9.5vw;
  height: auto;
  transform: rotate(17.909deg);
}
@media screen and (max-width: 768px) {
  .service .pattern1 svg {
    width: calc(var(--sm) * 6);
  }
}
.service .pattern1 svg path {
  fill: var(--green);
}
.service-points {
  width: 100%;
  margin: var(--lg10) auto 0;
}
@media screen and (max-width: 768px) {
  .service-points {
    margin: var(--lg4) auto 0;
  }
}
.service-points input[type=radio] {
  display: none;
}
.service-points-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--xxxs) * 2);
  width: 80%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .service-points-tabs {
    width: 100%;
    gap: 1px;
  }
}
.service-points-tabs label {
  font-size: var(--xlg3);
  font-weight: 700;
  border-radius: calc(var(--md) / 2) calc(var(--md) / 2) 0 0;
  color: var(--white);
  background-color: var(--chitose-gley);
  cursor: pointer;
  padding: var(--md) 0;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .service-points-tabs label {
    font-size: var(--sm);
    border-radius: 0;
  }
}
.service-points #tab1:checked ~ .service-points-tabs label.tab1,
.service-points #tab2:checked ~ .service-points-tabs label.tab2,
.service-points #tab3:checked ~ .service-points-tabs label.tab3 {
  background-color: var(--chitose-blue-thin);
  color: var(--normal-text);
  position: relative;
}
.service-points #tab1:checked ~ .service-points-tabs label.tab1::after,
.service-points #tab2:checked ~ .service-points-tabs label.tab2::after,
.service-points #tab3:checked ~ .service-points-tabs label.tab3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  width: calc(var(--lg10) * 2);
  height: var(--xlg3);
  background: url(../../images/manmaruchitose/tab_active.png) no-repeat;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .service-points #tab1:checked ~ .service-points-tabs label.tab1::after,
  .service-points #tab2:checked ~ .service-points-tabs label.tab2::after,
  .service-points #tab3:checked ~ .service-points-tabs label.tab3::after {
    width: calc(var(--xlg2) * 3);
    height: calc(var(--xm) / 2);
    bottom: calc(var(--xm) / 2);
  }
}
.service-points-contents-element {
  display: none;
  justify-items: center;
  gap: var(--lg5);
  padding: calc(var(--md) + var(--lg5)) 16.1vw calc(var(--md) + var(--lg10));
  background-color: var(--chitose-blue-thin);
}
@media screen and (max-width: 768px) {
  .service-points-contents-element {
    padding: var(--lg4) var(--lg3) calc(var(--lg4) * 2);
  }
}
.service-points-contents-element h3 {
  font-size: var(--lg3);
  font-weight: 500;
  text-align: center;
  color: var(--black);
}
@media screen and (max-width: 768px) {
  .service-points-contents-element h3 {
    font-size: var(--xm);
    word-break: auto-phrase;
  }
}
.service-points-contents-element .annotation {
  width: calc(100% - var(--lg8) * 2);
  padding: var(--lg4) var(--lg8);
  border-radius: var(--lg4);
  background-color: var(--white);
  display: grid;
  gap: var(--sm);
}
@media screen and (max-width: 768px) {
  .service-points-contents-element .annotation {
    gap: var(--xxs);
    padding: var(--lg3) var(--xm);
    border-radius: var(--lg3);
    width: 100%;
    gap: var(--xm);
  }
}
.service-points-contents-element .annotation h4 {
  font-size: var(--lg3);
  font-weight: 700;
  color: var(--kasai);
}
@media screen and (max-width: 768px) {
  .service-points-contents-element .annotation h4 {
    font-size: var(--md);
  }
}
.service-points-contents-element .annotation ul li {
  list-style: inside;
  font-size: var(--lg3);
  font-weight: 500;
  color: var(--normal-text);
}
@media screen and (max-width: 768px) {
  .service-points-contents-element .annotation ul li {
    font-size: var(--xm);
  }
}
.service-points-contents-element .annotation-small {
  font-size: var(--sm);
  font-weight: 500;
  color: var(--normal-text);
}
@media screen and (max-width: 768px) {
  .service-points-contents-element .annotation-small {
    font-size: var(--xs);
  }
}
.service-points-contents-element .annotation-tags {
  display: flex;
  gap: var(--sm);
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .service-points-contents-element .annotation-tags {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
.service-points-contents-element .annotation-tags p {
  font-size: var(--md);
  color: var(--chitose-gley);
  border: 1px solid var(--chitose-gley);
  padding: var(--sm) var(--xlg3);
}
@media screen and (max-width: 768px) {
  .service-points-contents-element .annotation-tags p {
    font-size: var(--xm);
    padding: calc(var(--xxs) / 3) var(--xxs);
  }
}
.service-points-contents .content1 .pentagon {
  position: relative;
  width: 56.9vw;
  height: 56.9vw;
  background: url(../../images/manmaruchitose/pentagon_inner.png) no-repeat;
  background-position: center;
  background-size: 70%;
  /* 各アイテムの基本設定（中央に配置） */
}
@media screen and (max-width: 768px) {
  .service-points-contents .content1 .pentagon {
    width: 86vw;
    height: 86vw;
  }
}
.service-points-contents .content1 .pentagon-item {
  position: absolute;
  width: 20.2vw;
  height: 20.2vw;
  background: var(--white);
  border-radius: 50%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  align-content: center;
}
.service-points-contents .content1 .pentagon-item:nth-child(1) {
  transform: translate(-50%, -50%) rotate(-90deg) translate(20vw) rotate(90deg);
}
.service-points-contents .content1 .pentagon-item:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-18deg) translate(20vw) rotate(18deg);
}
.service-points-contents .content1 .pentagon-item:nth-child(3) {
  transform: translate(-50%, -50%) rotate(54deg) translate(20vw) rotate(-54deg);
}
.service-points-contents .content1 .pentagon-item:nth-child(4) {
  transform: translate(-50%, -50%) rotate(126deg) translate(20vw) rotate(-126deg);
}
.service-points-contents .content1 .pentagon-item:nth-child(5) {
  transform: translate(-50%, -50%) rotate(198deg) translate(20vw) rotate(-198deg);
}
@media screen and (max-width: 768px) {
  .service-points-contents .content1 .pentagon-item {
    width: 30vw;
    height: 30vw;
  }
  .service-points-contents .content1 .pentagon-item:nth-child(1) {
    transform: translate(-50%, -50%) rotate(-90deg) translate(30vw) rotate(90deg);
  }
  .service-points-contents .content1 .pentagon-item:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-18deg) translate(30vw) rotate(18deg);
  }
  .service-points-contents .content1 .pentagon-item:nth-child(3) {
    transform: translate(-50%, -50%) rotate(54deg) translate(30vw) rotate(-54deg);
  }
  .service-points-contents .content1 .pentagon-item:nth-child(4) {
    transform: translate(-50%, -50%) rotate(126deg) translate(30vw) rotate(-126deg);
  }
  .service-points-contents .content1 .pentagon-item:nth-child(5) {
    transform: translate(-50%, -50%) rotate(198deg) translate(30vw) rotate(-198deg);
  }
}
.service-points-contents .content1 .pentagon-item-wrap {
  display: grid;
  gap: calc(var(--xxxs) * 2);
  justify-content: center;
  padding: 0 var(--lg6);
}
@media screen and (max-width: 768px) {
  .service-points-contents .content1 .pentagon-item-wrap {
    padding: 0;
  }
}
.service-points-contents .content1 .pentagon-item-wrap h4 {
  font-size: var(--xlg3);
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .service-points-contents .content1 .pentagon-item-wrap h4 {
    font-size: var(--xs);
  }
}
.service-points-contents .content1 .pentagon-item-wrap p {
  font-size: var(--sm);
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .service-points-contents .content1 .pentagon-item-wrap p {
    display: none;
  }
}
.service-points-contents .content1 .pentagon1 {
  border: 1px solid var(--meguro);
}
.service-points-contents .content1 .pentagon1 h4 {
  color: var(--meguro);
}
.service-points-contents .content1 .pentagon2 {
  border: 1px solid var(--chitose-orange);
}
.service-points-contents .content1 .pentagon2 h4 {
  color: var(--chitose-orange);
}
.service-points-contents .content1 .pentagon3 {
  border: 1px solid var(--kasai);
}
.service-points-contents .content1 .pentagon3 h4 {
  color: var(--kasai);
}
.service-points-contents .content1 .pentagon4 {
  border: 1px solid var(--chitose-red);
}
.service-points-contents .content1 .pentagon4 h4 {
  color: var(--chitose-red);
}
.service-points-contents .content1 .pentagon5 {
  border: 1px solid var(--okayama);
}
.service-points-contents .content1 .pentagon5 h4 {
  color: var(--okayama);
}
.service-points-contents .content1 .support-sp {
  display: grid;
  gap: var(--lg5);
}
@media screen and (min-width: 769px) {
  .service-points-contents .content1 .support-sp {
    display: none;
  }
}
.service-points-contents .content1 .support-sp-text h4 {
  font-size: var(--md);
  margin-bottom: var(--sm);
}
.service-points-contents .content1 .support-sp-text p {
  font-size: var(--xm);
}
.service-points-contents .content1 .support-sp-text:nth-of-type(1) span {
  color: var(--meguro);
}
.service-points-contents .content1 .support-sp-text:nth-of-type(2) span {
  color: var(--chitose-orange);
}
.service-points-contents .content1 .support-sp-text:nth-of-type(3) span {
  color: var(--kasai);
}
.service-points-contents .content1 .support-sp-text:nth-of-type(4) span {
  color: var(--chitose-red);
}
.service-points-contents .content1 .support-sp-text:nth-of-type(5) span {
  color: var(--okayama);
}
.service-points-contents .content2 .other-support {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: var(--lg4);
       column-gap: var(--lg4);
}
@media screen and (max-width: 768px) {
  .service-points-contents .content2 .other-support {
    grid-template-columns: repeat(1, 1fr);
    gap: var(--lg3);
  }
}
.service-points-contents .content2 .other-support-item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}
@media screen and (max-width: 768px) {
  .service-points-contents .content2 .other-support-item {
    gap: 0;
  }
}
.service-points-contents .content2 .other-support-item img {
  width: 100%;
  height: auto;
  border-radius: var(--lg5);
}
.service-points-contents .content2 .other-support-item h4 {
  font-size: var(--lg3);
  font-weight: 700;
  text-align: center;
  color: var(--normal-text);
  margin: var(--xs) 0 var(--md);
}
@media screen and (max-width: 768px) {
  .service-points-contents .content2 .other-support-item h4 {
    font-size: var(--xlg2);
    margin: var(--xxs) 0;
  }
}
.service-points-contents .content2 .other-support-item p {
  font-size: var(--sm);
  font-weight: 500;
  color: var(--normal-text);
}
@media screen and (max-width: 768px) {
  .service-points-contents .content2 .other-support-item p {
    font-size: var(--xm);
  }
}
.service-points-contents .content3 img {
  width: 100%;
  height: auto;
  border-radius: var(--lg5);
}
.service-points #tab1:checked ~ .service-points-contents .content1,
.service-points #tab2:checked ~ .service-points-contents .content2,
.service-points #tab3:checked ~ .service-points-contents .content3 {
  display: grid;
}

.facility {
  display: grid;
  gap: var(--lg5);
  padding: calc(var(--lg6) * 2) 16.1vw calc(var(--lg5) * 3);
  text-align: center;
  position: relative;
}
@media screen and (max-width: 768px) {
  .facility {
    padding: calc(var(--lg4) * 2) 7vw calc(var(--lg5) * 2);
  }
}
.facility .pattern {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.facility .pattern * {
  position: absolute;
}
.facility .pattern .vector1 {
  top: 0;
  left: 0;
}
.facility .pattern .vector1 svg {
  width: calc(var(--lg10) * 3);
  height: auto;
}
@media screen and (max-width: 768px) {
  .facility .pattern .vector1 svg {
    width: calc(var(--lg3) * 4);
  }
}
.facility .pattern .vector2 {
  top: 40%;
  right: calc(var(--lg5) * 4);
}
@media screen and (max-width: 768px) {
  .facility .pattern .vector2 {
    top: auto;
    bottom: calc(var(--lg3) * 5);
    right: calc(var(--lg3) * 4);
  }
}
.facility .pattern .vector2 svg {
  width: calc(var(--lg5) * 4);
  height: auto;
}
@media screen and (max-width: 768px) {
  .facility .pattern .vector2 svg {
    width: calc(var(--lg3) * 4);
  }
}
.facility .pattern .vector3 {
  bottom: calc(var(--xlg5) * 4);
  left: 0;
}
@media screen and (max-width: 768px) {
  .facility .pattern .vector3 {
    display: none;
  }
}
.facility .pattern .vector3 svg {
  width: calc(var(--xlg5) * 5);
  height: auto;
}
.facility h3 {
  font-size: var(--lg3);
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .facility h3 {
    font-size: var(--xm);
  }
}
.facility-class {
  display: grid;
  gap: var(--md);
}
@media screen and (max-width: 768px) {
  .facility-class {
    gap: var(--lg3);
  }
}
.facility-class-item {
  display: flex;
  gap: var(--lg4);
  padding-bottom: var(--md);
  border-bottom: 2px dotted var(--chitose-gley);
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  .facility-class-item {
    display: grid;
    gap: var(--xlg2);
    padding-bottom: var(--lg3);
  }
}
.facility-class-item img {
  width: calc(var(--lg10) * 4);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--lg5);
}
@media screen and (max-width: 768px) {
  .facility-class-item img {
    width: 100%;
    max-height: 200px;
  }
}
.facility-class-item-sentence {
  margin-top: var(--md);
  text-align: left;
}
@media screen and (max-width: 768px) {
  .facility-class-item-sentence {
    margin-top: 0;
  }
}
.facility-class-item-sentence h4 {
  font-size: var(--lg3);
  font-weight: 700;
  color: var(--chitose-blue);
  margin-bottom: var(--xlg3);
  text-decoration: underline;
}
@media screen and (max-width: 768px) {
  .facility-class-item-sentence h4 {
    margin-bottom: var(--xm);
  }
}
.facility-class-item-sentence p {
  font-size: var(--sm);
  font-weight: 500;
  color: var(--normal-text);
}
.facility .annotation {
  text-align: left;
  padding: var(--lg4) var(--lg5);
  border: 2px dotted var(--kasai);
  border-radius: var(--lg4);
}
@media screen and (max-width: 768px) {
  .facility .annotation {
    padding: var(--lg3);
  }
}
.facility .annotation h4 {
  font-size: var(--lg3);
  font-weight: 700;
  color: var(--kasai);
  margin-bottom: var(--sm);
}
@media screen and (max-width: 768px) {
  .facility .annotation h4 {
    font-size: var(--xlg2);
  }
}
.facility .annotation p {
  font-size: var(--sm);
  font-weight: 500;
  color: var(--black);
}
@media screen and (max-width: 768px) {
  .facility .annotation p {
    font-size: var(--xm);
  }
}

.flow {
  display: grid;
  gap: var(--lg5);
  padding: calc(var(--lg6) * 2) 16.1vw calc(var(--lg5) * 3);
  background: url(../../images/manmaruchitose/flow_bg.png);
  background-color: var(--chitose-blue-thin);
}
@media screen and (max-width: 768px) {
  .flow {
    padding: calc(var(--lg4) * 2) 7vw calc(var(--lg5) * 2);
    gap: var(--lg6);
    background-size: contain;
  }
}
.flow-step {
  padding-top: var(--lg4);
  padding-bottom: var(--xlg4);
  padding-left: calc(var(--lg10) * 2);
  padding-right: calc(var(--md) + var(--lg5));
  background-color: var(--white);
  border-radius: var(--lg4);
  display: grid;
  gap: var(--lg3);
  position: relative;
}
@media screen and (max-width: 768px) {
  .flow-step {
    padding: calc(var(--sm) * 5) var(--lg3) var(--xlg4);
    justify-items: center;
  }
}
.flow-step:not(:nth-of-type(1))::before {
  position: absolute;
  top: calc(var(--xlg5) * -1);
  left: calc(var(--xlg4) * -1);
  content: "";
  display: block;
  width: calc(var(--lg10) * 2);
  height: calc(var(--lg10) * 2);
}
@media screen and (max-width: 768px) {
  .flow-step:not(:nth-of-type(1))::before {
    width: calc(var(--xlg2) * 5);
    height: calc(var(--xlg2) * 5);
    left: unset;
  }
}
.flow-step:nth-of-type(2)::before {
  background: url(../../images/manmaruchitose/step1.png) no-repeat;
  background-position: center;
  background-size: contain;
}
.flow-step:nth-of-type(3)::before {
  background: url(../../images/manmaruchitose/step2.png) no-repeat;
  background-position: center;
  background-size: contain;
}
.flow-step:nth-of-type(4)::before {
  background: url(../../images/manmaruchitose/step3.png) no-repeat;
  background-position: center;
  background-size: contain;
}
.flow-step:nth-of-type(5)::before {
  background: url(../../images/manmaruchitose/step4.png) no-repeat;
  background-position: center;
  background-size: contain;
}
.flow-step h3 {
  font-size: var(--lg3);
  font-weight: 700;
  color: var(--normal-text);
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 768px) {
  .flow-step h3 {
    font-size: var(--xlg2);
  }
}
.flow-step h3::after {
  content: "";
  display: block;
  width: 100%;
  height: calc(var(--md) / 2);
  background: url(../../images/manmaruchitose/icon_dot.png);
  background-size: cover;
}
.flow-step p {
  font-size: var(--sm);
  font-weight: 500;
  color: var(--black);
}
@media screen and (max-width: 768px) {
  .flow-step p {
    font-size: var(--xm);
  }
}
.flow-step a {
  display: flex;
  gap: calc(var(--md) / 2);
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  background-color: var(--chitose-red);
  font-size: var(--lg4);
  font-weight: 700;
  text-decoration: none;
  color: var(--white);
  padding: var(--sm) calc(var(--lg10) * 2);
  border-radius: var(--lg10);
}
@media screen and (max-width: 768px) {
  .flow-step a {
    font-size: var(--lg3);
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
  }
}
.flow-step a svg {
  width: var(--lg5);
  height: auto;
}
@media screen and (max-width: 768px) {
  .flow-step a svg {
    width: var(--lg3);
  }
}

.faq {
  display: grid;
  gap: var(--lg5);
  padding: calc(var(--lg6) * 2) 16.1vw calc(var(--lg5) * 3);
  position: relative;
}
@media screen and (max-width: 768px) {
  .faq {
    gap: var(--lg4);
    padding: calc(var(--lg4) * 2) 7vw calc(var(--lg5) * 2);
  }
}
.faq .pattern {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.faq .pattern > * {
  position: absolute;
}
.faq .pattern .vector1 {
  width: calc(var(--lg5) * 7);
  height: auto;
  top: 0;
  left: 0;
}
@media screen and (max-width: 768px) {
  .faq .pattern .vector1 {
    width: calc(var(--lg5) * 3);
  }
}
.faq .pattern .vector2 {
  width: calc(var(--lg5) * 7);
  height: auto;
  bottom: 0;
  right: 0;
}
@media screen and (max-width: 768px) {
  .faq .pattern .vector2 {
    width: calc(var(--lg5) * 3);
  }
}
.faq .section-title {
  margin-bottom: var(--md);
}
.faq-wrap {
  display: grid;
  gap: var(--md);
  font-size: var(--xm);
  font-weight: 700;
  color: var(--normal-text);
}
@media screen and (max-width: 768px) {
  .faq-wrap {
    font-size: var(--xm);
  }
}
.faq-wrap p {
  height: -moz-fit-content;
  height: fit-content;
  padding-top: calc(var(--md) * 1.5);
  padding-bottom: calc(var(--md) * 1.5);
  padding-right: var(--md);
  padding-left: calc(var(--md) * 3 + var(--md) + var(--xxs) * 2);
  grid-template-columns: 1fr auto;
  align-items: center;
  border-radius: var(--xxs);
  position: relative;
}
@media screen and (max-width: 768px) {
  .faq-wrap p {
    padding-top: var(--md);
    padding-bottom: var(--md);
  }
}
.faq-wrap p a {
  text-decoration: none;
  text-decoration: underline;
  color: inherit;
}
.faq-wrap p::before {
  position: absolute;
  left: var(--md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--white);
  font-size: var(--lg3);
  font-weight: 700;
  width: calc(var(--md) * 3);
  height: calc(var(--md) * 3);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .faq-wrap p::before {
    left: var(--xm);
    top: var(--xm);
    transform: translateY(0%);
  }
}
.faq-wrap-question {
  display: grid;
  background-color: #E6F6FD;
}
.faq-wrap-question::before {
  content: "Q";
  background-color: var(--chitose-green);
  border-radius: var(--lg4);
}
.faq-wrap-question .toggle-btn {
  background: none;
  border: none;
  font-size: var(--lg3);
  font-weight: 700;
  color: var(--normal-text);
  cursor: pointer;
}
.faq-wrap-answer {
  display: none;
}
.faq-wrap-answer::before {
  content: "A";
  background-color: var(--chitose-orange);
  border-radius: var(--xxxs);
}

.sticky {
  position: fixed;
  width: calc(var(--lg10) * 3);
  height: calc(var(--lg10) * 3);
  bottom: calc(var(--md) * 3);
  right: var(--lg8);
  z-index: 10;
}
.sticky.scrolled {
  transform: scale(0.8) translate(calc(var(--md) * 3), var(--lg8));
  transition: ease 1s all;
}
@media screen and (max-width: 768px) {
  .sticky {
    width: calc(var(--lg5) * 3.5);
    height: calc(var(--lg5) * 3.5);
    bottom: var(--lg3);
    right: var(--lg3);
  }
  .sticky.scrolled {
    transform: scale(0.8) translate(var(--lg3), var(--lg3));
    transition: ease 1s all;
  }
}
.sticky a {
  text-decoration: none;
  display: grid;
  align-items: center;
  justify-items: center;
}
.sticky a .bg {
  width: 100%;
  height: auto;
}
.sticky a p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: -moz-max-content;
  width: max-content;
  font-size: var(--lg4);
  font-weight: 700;
  text-align: center;
  color: var(--white);
}
@media screen and (max-width: 768px) {
  .sticky a p {
    font-size: var(--xlg2);
  }
}/*# sourceMappingURL=style.css.map */