:root {
  --baceFontColor: #333333;
}

#preamble {
  width: auto;
}

figure#top_img {
  margin: 30px auto 0 auto;
  aspect-ratio: 10/3;
  position: relative;
  overflow: hidden;
}
figure#top_img img {
  min-width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

#sisetu {
  padding: 0;
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
}
#sisetu > div {
  display: grid;
  grid-template-columns: 45% 55%;
  -moz-column-gap: 30px;
       column-gap: 30px;
  padding: 40px 0 40px 0;
}
#sisetu > div > div:nth-child(1) {
  font-size: 15px;
  line-height: 22.5px;
  font-size: 0.9375rem;
  line-height: 1.40625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
}
#sisetu > div > div:nth-child(1) h2 {
  font-size: 25px;
  line-height: 37.5px;
  font-size: 1.5625rem;
  line-height: 2.34375rem;
  color: #d61d70;
}
#sisetu > div > div:nth-child(1) h3 {
  margin: 10px auto 0 auto;
  text-align: left;
  font-size: 16px;
  line-height: 24px;
  font-size: 1rem;
  line-height: 1.5rem;
}
#sisetu > div > div:nth-child(1) dl {
  margin: 20px auto 0 auto;
  display: grid;
  grid-template: auto/6em 1fr;
  border-bottom: 1px dotted silver;
}
#sisetu > div > div:nth-child(1) dl dt {
  grid-column: 1;
  padding: 0.5rem 0;
  text-align: left;
  border-top: 1px dotted silver;
}
#sisetu > div > div:nth-child(1) dl dd {
  grid-column: 2;
  text-align: left;
  padding: 0.5rem 0;
  border-top: 1px dotted silver;
}
#sisetu > div > div:nth-child(1) ul {
  margin: 20px auto 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: scenter;
  flex-direction: row;
  flex-wrap: wrap;
}
#sisetu > div > div:nth-child(1) ul li {
  margin: 0 10px;
  border: 2px solid #EB6EA6;
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
  font-size: 1.125rem;
  line-height: 1.6875rem;
  padding: 0.5rem 0.8rem;
}
@media screen and (max-width: 1199px) {
  #sisetu {
    margin-top: -70px;
    padding-top: 70px;
  }
  #sisetu > div {
    display: block;
  }
  #sisetu > div > div:nth-child(1) {
    width: auto;
  }
  #sisetu > div > div:nth-child(2) {
    width: auto;
    margin: 20px auto 0 auto;
  }
  #sisetu > div > div:nth-child(2) figure {
    width: 650px;
    max-width: 100%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  #sisetu > div > div:nth-child(1) {
    padding: 0 15px;
  }
}

#flow {
  padding: 60px 0;
  background: #f8f8f8;
  background: url(grp/flow_bg.png);
}
#flow > div {
  width: 1200px;
  margin: 0 auto;
  max-width: 100%;
}
#flow > div > h2 {
  font-size: 2rem;
}
#flow > div > div {
  margin: 20px auto 0 auto;
}
#flow > div > div ul {
  display: flex;
  justify-content: center;
  gap: 20px;
}
#flow > div > div ul li a {
  display: block;
  background: white;
  text-decoration: none;
  border-radius: 10px;
  border: 2px solid #EB6EA6;
  color: #333333;
  font-size: 1.2rem;
  line-height: 1em;
  padding: 0.5em 1em;
}
#flow > div > div ul li a svg {
  height: 1.1rem;
  margin: 0 0 0 0.3em;
  fill: #EB6EA6;
}
#flow > div > div ul li a:hover {
  color: #d61d70;
}
#flow > div > section ul {
  display: grid;
  margin: 30px auto 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
}
#flow > div > section ul li {
  background: #f19bc2;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
#flow > div > section ul li :is(figure, p) {
  margin: 10px auto 0 auto;
}
#flow > div > section ul li h3 {
  text-align: left;
  padding: 20px 20px 0 55px;
  font-size: 18px;
  line-height: 27px;
  font-size: 1.125rem;
  line-height: 1.6875rem;
  font-weight: 700;
}
#flow > div > section ul li h3 span {
  position: absolute;
  top: 0;
  left: 0;
  background: #e5418a;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  font-size: 1.25rem;
  line-height: 1.875rem;
  color: white;
  padding: 0.5rem;
}
#flow > div > section ul li figure {
  width: 180px;
  max-width: calc(100% - 40px);
}
#flow > div > section ul li p {
  padding: 0 20px 20px 20px;
  text-align: left;
}
@media screen and (max-width: 1199px) {
  #flow {
    padding: 70px 20px 70px 20px;
  }
  #flow > div {
    width: auto;
  }
}
@media screen and (max-width: 768px) {
  #flow > div > div ul {
    display: block;
    width: 22em;
    max-width: auto;
    margin: 0 auto;
  }
  #flow > div > div ul li {
    margin-top: 10px;
  }
  #flow > div > div ul li:first-child {
    margin-top: 0;
  }
  #flow > div > section ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }
}

#faq {
  background: #f8f8f8;
  background: #ffffdb;
  background: url(grp/faq_bg.png);
  margin-top: 0;
  padding: 60px 0;
}
#faq > div > h2 {
  display: inline-block;
  background: #EB6EA6;
  padding: 0.3em 0.8em;
  color: white;
  font-size: 1.8rem;
}
#faq > div > section {
  width: 940px;
  max-width: 100%;
  margin: 0 auto;
}
#faq > div > section ul {
  margin: 30px auto 0 auto;
}
#faq > div > section ul li {
  position: relative;
  margin: 15px 0 0 0;
  cursor: pointer;
  border: 3px solid #EB6EA6;
  background: white;
}
#faq > div > section ul li:first-child {
  margin-top: 0;
}
#faq > div > section ul li h3 {
  font-size: 20px;
  line-height: 30px;
  font-size: 1.25rem;
  line-height: 1.875rem;
  text-align: left;
  position: relative;
  font-family: "Noto Sans JP";
  padding: 10px 50px 10px 20px;
  font-weight: 700;
}
#faq > div > section ul li h3 span {
  color: #EB6EA6;
  margin: 0 0.3em 0 0;
}
#faq > div > section ul li h3:hover {
  -moz-opacity: 0.8;
  transition: 0.3s ease-in-out;
  color: #d61d70;
}
#faq > div > section ul li h3::after {
  display: block;
  content: "";
  background-color: #333333;
  -webkit-mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
  -webkit-mask-size: contain;
  mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
  mask-size: contain;
  height: 16px;
  width: 16px;
  position: absolute;
  top: 20px;
  right: 20px;
}
#faq > div > section ul li h3.open::after {
  transform: rotate(-180deg);
}
#faq > div > section ul li div {
  position: relative;
  margin: 0;
  padding: 20px 20px 20px 60px;
  font-weight: bold;
  background: #f8f8f8;
  cursor: default;
}
#faq > div > section ul li div p {
  text-align: left;
}
#faq > div > section ul li div::before {
  font-size: 22px;
  line-height: 1;
  position: absolute;
  left: 20px;
  display: block;
  content: "A.";
  font-weight: bold;
  color: #d61d70;
}
@media screen and (max-width: 1199px) {
  #faq {
    padding: 60px 20px 70px 20px;
  }
  #faq > div {
    width: auto;
  }
}

footer#globalFooter {
  margin-top: 0;
}/*# sourceMappingURL=index.css.map */