.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

.tc {
  display: block !important;
}

.tb {
  display: none !important;
}

@media print, screen and (max-width: 991px) {
  .tc {
    display: none !important;
  }
  .tb {
    display: block !important;
  }
}
@media only screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}
@media print, screen and (min-width: 769px) {
  .pc-hide {
    display: none !important;
  }
}
@media only screen and (max-width: 768px) {
  .sp-hide {
    display: none !important;
  }
}
#wrapper {
  position: relative;
  width: 100%;
}

main {
  position: relative;
}

/* input */
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
select,
textarea {
  position: relative;
  background-color: #FFFFFF;
  border: 1px solid #858585;
  box-sizing: border-box;
  padding: 1.2rem 1.6rem;
  width: 100%;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.4;
  text-align: left;
  color: #000000;
  outline: none !important;
  transition: all 0.3s;
}
@media only screen and (max-width: 768px) {
  input[type=text],
  input[type=email],
  input[type=tel],
  input[type=number],
  input[type=password],
  select,
  textarea {
    padding: 1rem 1.2rem;
  }
}

select option {
  font-size: inherit;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password] {
  height: 6.8rem;
}
@media only screen and (max-width: 768px) {
  input[type=text],
  input[type=email],
  input[type=tel],
  input[type=number],
  input[type=password] {
    height: 4.5rem;
  }
}

input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=password]:focus,
select:focus,
textarea:focus {
  border-color: #00C34D;
}

select {
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url(../img/select-down.png);
  background-position: calc(100% - 1.2rem) 50%;
  background-size: 1.2rem 0.6rem;
  background-repeat: no-repeat;
  z-index: 0;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  select {
    background-position: calc(100% - 1rem) 50%;
  }
}

picture,
figure,
.image_wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.scroll {
  position: relative;
  max-width: 100%;
  width: 100%;
  overflow: auto;
}
@media only screen and (max-width: 768px) {
  .scroll {
    padding-bottom: 1.2rem;
  }
  .scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 0.6rem;
  }
  .scroll::-webkit-scrollbar {
    height: 0.6rem;
    background-color: #F5F5F5;
  }
  .scroll::-webkit-scrollbar-thumb {
    border-radius: 0.6rem;
    background-color: #FAFC8A;
  }
}

.essential {
  padding: 0.2rem 0.5rem;
  color: white !important;
  width: -moz-fit-content;
  width: fit-content;
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.2rem !important;
  background-color: rgb(196, 37, 37);
  border-radius: 1.5rem;
}

.text-center {
  text-align: center;
}

#wrapper {
  position: relative;
  width: 192rem;
  margin: 0 auto;
}

#main {
  position: relative;
}
#main .mainvisual-section {
  position: relative;
}
#main .mainvisual-section .pc-mv {
  position: relative;
  display: block;
  width: 100%;
  background-position: 100%;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 768px) {
  #main .mainvisual-section .pc-mv {
    display: none;
  }
}
#main .mainvisual-section .sp-fv {
  position: relative;
  display: none;
}
@media only screen and (max-width: 768px) {
  #main .mainvisual-section .sp-fv {
    display: block;
    width: 100%;
  }
}

.sapsheet-intro-section {
  position: relative;
  margin-top: 8rem;
}
.sapsheet-intro-section .container {
  width: 100%;
}
.sapsheet-intro-section .container .section-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7.7rem;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .section-title {
    display: block;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-left: 0;
    margin-right: 0;
  }
}
.sapsheet-intro-section .container .section-title .img-title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sapsheet-intro-section .container .section-title .img-title .pc {
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .section-title .img-title .pc {
    display: none;
  }
}
.sapsheet-intro-section .container .section-title .img-title .sp {
  display: none;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .section-title .img-title .sp {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1.6rem;
  }
}
.sapsheet-intro-section .container .section-title .bg-title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sapsheet-intro-section .container .section-title .bg-title p {
  display: block;
  font-size: 6rem;
  color: #58492C;
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .section-title .bg-title p {
    font-size: 3rem;
  }
}
.sapsheet-intro-section .container .subtitle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  margin-top: 2.9rem;
  font-size: 5rem;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .subtitle {
    display: block;
  }
}
.sapsheet-intro-section .container .subtitle h2 {
  font-size: 5rem;
  color: #F2A878;
  font-weight: 600;
  text-shadow: 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff, 1px 1px 5px #555;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .subtitle h2 {
    font-size: 2.5rem;
    padding-bottom: 0.5rem;
  }
}
.sapsheet-intro-section .container .subtitle h3 {
  font-size: 5rem;
  color: #58492C;
  font-weight: 600;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .subtitle h3 {
    font-size: 2.5rem;
    font-weight: 550;
  }
}
.sapsheet-intro-section .container .intro {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5.1rem;
  margin-top: 3rem;
  color: #58492C;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .intro {
    display: block;
  }
}
.sapsheet-intro-section .container .intro .foot {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .intro .foot {
    display: flex;
  }
}
.sapsheet-intro-section .container .intro .foot img {
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .intro .foot img {
    width: 80%;
    height: auto;
    margin-top: 3.9rem;
  }
}
.sapsheet-intro-section .container .intro .intro1 {
  position: relative;
  font-size: 3rem;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .intro .intro1 {
    font-size: 1.5rem;
    margin: 0 auto;
    margin-top: 2.3rem;
  }
}
.sapsheet-intro-section .container .intro .intro1 h2 {
  position: relative;
  padding-bottom: 7.2rem;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .intro .intro1 h2 {
    padding-bottom: 3.8rem;
  }
}
.sapsheet-intro-section .container .intro .intro1 p {
  position: relative;
  padding-bottom: 4.9rem;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .intro .intro1 p {
    padding-bottom: 1.8rem;
  }
}
.sapsheet-intro-section .container .intro .intro1 p span {
  color: #F2A878;
}
.sapsheet-intro-section .container .intro2 {
  position: relative;
  font-size: 3rem;
  margin-top: 4.1rem;
  color: #58492C;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .intro2 {
    font-size: 1.5rem;
    margin: 0 auto;
    margin-top: 2.3rem;
  }
}
.sapsheet-intro-section .container .intro2 h2 {
  padding-bottom: 4.2rem;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .intro2 h2 {
    padding-bottom: 1.8rem;
  }
}
.sapsheet-intro-section .container .intro2 h3 {
  padding-bottom: 4.1rem;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .intro2 h3 {
    padding-bottom: 1.8rem;
  }
}
.sapsheet-intro-section .container .intro2 h4 {
  padding-bottom: 9.2rem;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .intro2 h4 {
    padding-bottom: 1.8rem;
  }
}
.sapsheet-intro-section .container .intro2 h4 span {
  position: absolute;
  bottom: 13rem;
  left: 74rem;
  font-size: 1rem;
}
@media only screen and (max-width: 768px) {
  .sapsheet-intro-section .container .intro2 h4 span {
    display: none;
  }
}

.amazing-section {
  position: relative;
  background: url(../../../assets/img/section2-background.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: auto;
}
.amazing-section .title {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  padding-top: 10rem;
}
@media only screen and (max-width: 768px) {
  .amazing-section .title {
    display: block;
    padding-top: 5.4rem;
    text-align: center;
  }
}
.amazing-section .title h2 {
  font-size: 6rem;
  font-weight: 600;
  color: #58492C;
}
@media only screen and (max-width: 768px) {
  .amazing-section .title h2 {
    font-size: 2.5rem;
  }
}
.amazing-section .title h3 {
  position: relative;
  color: #F2A878;
  font-size: 6rem;
  font-weight: 600;
  text-shadow: 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff, 1px 1px 5px #555;
}
@media only screen and (max-width: 768px) {
  .amazing-section .title h3 {
    font-size: 2.5rem;
  }
}
.amazing-section .contents {
  position: relative;
  margin-top: 3.5rem;
  font-size: 3rem;
  color: #58492C;
}
@media only screen and (max-width: 768px) {
  .amazing-section .contents {
    font-size: 1.5rem;
  }
}
.amazing-section .contents h3 {
  position: relative;
  padding-bottom: 4rem;
}
@media only screen and (max-width: 768px) {
  .amazing-section .contents h3 {
    padding-bottom: 1.8rem;
  }
}
.amazing-section .contents h4 {
  position: relative;
  font-size: 3.3rem;
  font-weight: 600;
  color: #58492C;
  padding-bottom: 4.7rem;
}
@media only screen and (max-width: 768px) {
  .amazing-section .contents h4 {
    font-size: 1.8rem;
    font-weight: 550;
    padding-bottom: 1.7rem;
  }
}
.amazing-section .contents h5 {
  font-size: 3rem;
  color: #58492C;
}
@media only screen and (max-width: 768px) {
  .amazing-section .contents h5 {
    font-size: 1.5rem;
  }
}
.amazing-section .contents h5 span {
  position: absolute;
  top: 31rem;
  left: 60rem;
  font-size: 1rem;
  color: #58492C;
}
@media only screen and (max-width: 768px) {
  .amazing-section .contents h5 span {
    display: none;
  }
}

.different-intro-section {
  position: relative;
  background: url(../../../assets/img/section3-background.png);
  background-size: 100% 100%;
}
.different-intro-section .container {
  position: relative;
}
.different-intro-section .container .title {
  position: relative;
  text-align: center;
  padding-top: 11rem;
}
.different-intro-section .container .title p span:nth-child(1) {
  font-size: 6rem;
  font-weight: 600;
  color: #58492C;
  padding-right: 0.1rem;
}
@media only screen and (max-width: 768px) {
  .different-intro-section .container .title p span:nth-child(1) {
    font-size: 2.5rem;
  }
}
.different-intro-section .container .title p span:nth-child(2) {
  font-size: 6rem;
  color: #F2A878;
  position: relative;
  font-weight: 600;
  text-shadow: 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff, 1px 1px 5px #555;
}
@media only screen and (max-width: 768px) {
  .different-intro-section .container .title p span:nth-child(2) {
    font-size: 2.5rem;
  }
}
.different-intro-section .container .title .contents {
  position: relative;
  margin-top: 4.3rem;
  font-size: 3rem;
  color: #58492C;
  text-align: left;
}
@media only screen and (max-width: 768px) {
  .different-intro-section .container .title .contents {
    font-size: 1.5rem;
    margin-top: 2rem;
  }
}
.different-intro-section .container .information {
  position: relative;
  padding-top: 2.6rem;
  text-align: center;
}
.different-intro-section .container .information .information1 {
  width: auto;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .different-intro-section .container .information .information1 {
    display: none;
  }
}
.different-intro-section .container .information .information2 {
  padding-top: 3rem;
  width: auto;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .different-intro-section .container .information .information2 {
    display: none;
  }
}
.different-intro-section .container .information .information-sp {
  display: none;
}
@media only screen and (max-width: 768px) {
  .different-intro-section .container .information .information-sp {
    display: block;
    width: 100%;
  }
}
.different-intro-section .container .pr {
  position: relative;
  padding-top: 4rem;
}
@media only screen and (max-width: 768px) {
  .different-intro-section .container .pr {
    font-size: 2.3rem;
  }
}
.different-intro-section .container .pr p {
  font-size: 3rem;
  color: #58492C;
  letter-spacing: -1.3px;
}
@media only screen and (max-width: 768px) {
  .different-intro-section .container .pr p {
    font-size: 1.5rem;
  }
}

.afford-section {
  position: relative;
  background: url(../../../assets/img/section4-background.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.afford-section .container {
  position: relative;
}
.afford-section .container .title {
  position: relative;
  padding-top: 14rem;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .afford-section .container .title {
    padding-top: 8rem;
  }
}
.afford-section .container .title .afford-wrap {
  font-size: 6rem;
  color: #F2A878;
}
@media only screen and (max-width: 768px) {
  .afford-section .container .title .afford-wrap {
    display: none;
  }
}
.afford-section .container .title .afford-wrap span:nth-child(1) {
  padding-right: 6.3rem;
  font-weight: 600;
  text-shadow: 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff, 1px 1px 5px #555;
}
.afford-section .container .title .afford-wrap span:nth-child(2) {
  position: absolute;
  top: 13rem;
  left: 29rem;
  font-size: 1.5rem;
  color: #58492C;
}
.afford-section .container .title .afford-wrap span:nth-child(3) {
  color: #58492C;
  font-weight: 600;
}
.afford-section .container .title .afford-title {
  display: none;
}
@media only screen and (max-width: 768px) {
  .afford-section .container .title .afford-title {
    display: block;
    text-align: center;
  }
}
.afford-section .container .contents {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .afford-section .container .contents {
    display: block;
  }
}
.afford-section .container .contents .contents-pc {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .afford-section .container .contents .contents-pc {
    display: none;
  }
}
.afford-section .container .contents .contents-pc .wrap {
  text-align: left;
  font-size: 3rem;
  color: #58492C;
}
@media only screen and (max-width: 768px) {
  .afford-section .container .contents .contents-pc .wrap h2 {
    font-size: 1.5rem;
  }
}
.afford-section .container .contents .contents-pc .wrap h4 {
  margin-top: 5.9rem;
}
@media only screen and (max-width: 768px) {
  .afford-section .container .contents .contents-pc .wrap h4 {
    font-size: 1.5rem;
    margin-top: 2rem;
  }
}
.afford-section .container .contents .contents-pc .wrap h4 span {
  position: absolute;
  bottom: 8.5rem;
  left: 23rem;
  font-size: 1rem;
  color: #58492C;
}
.afford-section .container .contents .contents-pc .thumb {
  position: relative;
}
.afford-section .container .contents .contents-pc .thumb img {
  width: 100%;
  height: auto;
}
.afford-section .container .contents .contents-sp {
  display: none;
}
@media only screen and (max-width: 768px) {
  .afford-section .container .contents .contents-sp {
    display: block;
  }
  .afford-section .container .contents .contents-sp .wrap {
    text-align: left;
    font-size: 3rem;
    color: #58492C;
  }
}
@media only screen and (max-width: 768px) and (max-width: 768px) {
  .afford-section .container .contents .contents-sp .wrap h2 {
    font-size: 1.5rem;
    text-indent: 0.5rem;
  }
}
@media only screen and (max-width: 768px) {
  .afford-section .container .contents .contents-sp .wrap h4 {
    margin-top: 5.9rem;
  }
}
@media only screen and (max-width: 768px) and (max-width: 768px) {
  .afford-section .container .contents .contents-sp .wrap h4 {
    text-indent: 0.5rem;
    font-size: 1.5rem;
    margin-top: 2rem;
  }
}
@media only screen and (max-width: 768px) {
  .afford-section .container .contents .contents-sp .wrap h4 span {
    position: absolute;
    bottom: 17.5rem;
    left: 23rem;
    font-size: 1rem;
    color: #58492C;
  }
  .afford-section .container .contents .contents-sp .thumb {
    position: relative;
  }
  .afford-section .container .contents .contents-sp .thumb img {
    width: auto;
    height: auto;
  }
}
@media only screen and (max-width: 768px) and (max-width: 768px) {
  .afford-section .container .contents .contents-sp .thumb img {
    width: 100%;
    height: auto;
  }
}
.afford-section .container .saps {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12.2rem;
  margin-top: 2.1rem;
}
@media only screen and (max-width: 768px) {
  .afford-section .container .saps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }
}
.afford-section .container .saps .sap1 {
  position: relative;
}
.afford-section .container .saps .sap1 h4 {
  text-align: center;
  font-size: 3rem;
  color: #58492C;
  font-weight: 600;
}
@media only screen and (max-width: 768px) {
  .afford-section .container .saps .sap1 h4 {
    font-size: 1rem;
  }
}
.afford-section .container .saps .sap1 img {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.8rem;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .afford-section .container .saps .sap1 img {
    width: 10.5rem;
  }
}
.afford-section .container .saps .sap2 {
  position: relative;
}
.afford-section .container .saps .sap2 h4 {
  text-align: center;
  font-size: 2.5rem;
  color: #58492C;
}
@media only screen and (max-width: 768px) {
  .afford-section .container .saps .sap2 h4 {
    font-size: 0.7rem;
  }
}
.afford-section .container .saps .sap2 img {
  padding-top: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .afford-section .container .saps .sap2 img {
    width: 10.5rem;
  }
}

.noneed-activity-section {
  position: relative;
  background: url(../../../assets/img/section5-background.png);
  padding-bottom: 6rem;
}
.noneed-activity-section .container {
  position: relative;
  max-width: 118rem !important;
}
.noneed-activity-section .container .title {
  position: relative;
  padding-top: 20rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .title {
    padding-top: 5rem;
    display: block;
  }
}
.noneed-activity-section .container .title h3 {
  position: relative;
  font-size: 6rem;
  color: #F2A878;
  font-weight: 600;
  padding-right: 3.9rem;
  text-shadow: 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff, 1px 1px 5px #555;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .title h3 {
    font-size: 2.5rem;
    padding: 0;
  }
}
.noneed-activity-section .container .title h4 {
  position: relative;
  font-size: 6rem;
  font-weight: 600;
  color: #58492C;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .title h4 {
    font-size: 2.5rem;
  }
}
.noneed-activity-section .container .subtitle {
  position: relative;
}
.noneed-activity-section .container .subtitle p {
  position: relative;
  padding-top: 4.9rem;
  font-size: 3rem;
  color: #58492C;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .subtitle p {
    text-indent: 4.5rem;
    text-align: center;
    font-size: 1.5rem;
    padding-top: 1.8rem;
  }
}
.noneed-activity-section .container .contents {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4.5rem;
  padding-top: 3.9rem;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .contents {
    display: block;
    padding-top: 0.5rem;
  }
}
.noneed-activity-section .container .contents .pc-contents {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4.5rem;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .contents .pc-contents {
    display: none;
  }
}
.noneed-activity-section .container .contents .pc-contents .doc {
  position: relative;
  width: auto;
  height: auto;
}
.noneed-activity-section .container .contents .pc-contents .doc img {
  display: block;
  width: auto;
}
.noneed-activity-section .container .contents .pc-contents .sentences {
  font-size: 3rem;
  color: #58492C;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .contents .pc-contents .sentences {
    font-size: 1.5rem;
  }
}
.noneed-activity-section .container .contents .pc-contents .sentences h3 {
  padding-bottom: 4.7rem;
}
.noneed-activity-section .container .contents .sp-contents {
  display: none;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .contents .sp-contents {
    display: block;
  }
}
.noneed-activity-section .container .contents .sp-contents .doc {
  position: relative;
  width: auto;
  height: auto;
}
.noneed-activity-section .container .contents .sp-contents .doc h3 {
  font-size: 1.5rem;
  color: #58492C;
  padding-bottom: 3rem;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .contents .sp-contents .doc h3 {
    text-indent: 0.5rem;
  }
}
.noneed-activity-section .container .contents .sp-contents .doc img {
  display: block;
  width: auto;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .contents .sp-contents .doc img {
    width: 100%;
  }
}
.noneed-activity-section .container .contents .sp-contents .doc h4 {
  font-size: 1.5rem;
  color: #58492C;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.noneed-activity-section .container .contents .sp-contents .sentences {
  font-size: 3rem;
  color: #58492C;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .contents .sp-contents .sentences {
    font-size: 1.5rem;
  }
}
.noneed-activity-section .container .contents .sp-contents .sentences h3 {
  padding-bottom: 4.7rem;
}
.noneed-activity-section .container .subintro {
  position: relative;
  text-align: center;
  font-size: 3rem;
  color: #58492C;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .subintro {
    font-size: 1.5rem;
  }
}
.noneed-activity-section .container .subintro h3 {
  padding-top: 5.1rem;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .subintro h3 {
    padding-top: 1.4rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
.noneed-activity-section .container .subintro h4 {
  padding-top: 5rem;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .subintro h4 {
    padding-top: 1rem;
  }
}
.noneed-activity-section .container .lower-contents {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.8rem;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .lower-contents {
    display: block;
  }
}
.noneed-activity-section .container .lower-contents .back-sap {
  position: relative;
}
.noneed-activity-section .container .lower-contents .back-sap img {
  display: block;
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .lower-contents .back-sap img {
    width: 100%;
  }
}
.noneed-activity-section .container .lower-contents .back-sap p {
  position: absolute;
  text-align: center;
  bottom: 0;
  left: 2.7rem;
  font-size: 1.8rem;
  color: #58492C;
  font-weight: 550;
  line-height: 1.1;
  text-shadow: 1px -3px 3px #FBEEBF;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .lower-contents .back-sap p {
    font-size: 1.8rem;
    position: absolute;
    text-align: center;
    bottom: -1rem;
    left: 5rem;
  }
}
.noneed-activity-section .container .lower-contents .sentences {
  position: relative;
  font-size: 3rem;
  color: #58492C;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .lower-contents .sentences {
    font-size: 1.5rem;
    margin-top: 2.4rem;
  }
}
.noneed-activity-section .container .lower-contents .sentences h4 {
  position: relative;
  padding-left: 3rem;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .lower-contents .sentences h4 {
    padding-left: 0;
  }
}
.noneed-activity-section .container .lower-contents .sentences h5 {
  font-size: 3rem;
  color: #58492C;
  font-weight: 600;
  padding-left: 1.5rem;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .lower-contents .sentences h5 {
    font-size: 1.5rem;
    padding-left: 0;
  }
}
.noneed-activity-section .container .lower-contents .sentences h5 .wavy {
  color: #58492C;
  text-decoration: none;
  padding-bottom: 0.5rem;
  background-image: url("https://daks2k3a4ib2z.cloudfront.net/56d8a8f1100bc1bb7928eebd/583235fcbb16630f49a50a8f_wavy-w.png");
  background-repeat: repeat-x;
  background-position: -200px 100%;
  background-size: 230px;
}
.noneed-activity-section .container .lower-contents .sentences h5 a:hover {
  animation: slideleft 900s infinite linear;
}
@keyframes slideleft {
  from {
    background-position-x: -200px;
  }
  to {
    background-position-x: -90000px;
  }
}
.noneed-activity-section .container .lower-contents .sentences h6 {
  padding-top: 2rem;
}
@media only screen and (max-width: 768px) {
  .noneed-activity-section .container .lower-contents .sentences h6 {
    padding-top: 1.8rem;
  }
}

.developer-idea-section {
  position: relative;
  background-size: 100% 100%;
  background-color: #ffffff;
}
.developer-idea-section .title {
  position: relative;
  text-align: center;
  padding-top: 8.7rem;
}
.developer-idea-section .title img {
  display: block;
  width: auto;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .developer-idea-section .title img {
    width: 100%;
    height: auto;
    text-align: center;
    padding: 0 2rem;
  }
}
.developer-idea-section .title h2 {
  position: relative;
  padding-top: 3.7rem;
  font-size: 3rem;
  color: #58492C;
}
@media only screen and (max-width: 768px) {
  .developer-idea-section .title h2 {
    font-size: 1.5rem;
    width: 80%;
    margin: 0 auto;
  }
}
.developer-idea-section .article {
  position: relative;
  margin-top: 3.7rem;
  background-color: #FCF7E3;
  border-radius: 4rem;
  width: 137rem;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 768px) {
  .developer-idea-section .article {
    display: none;
  }
}
.developer-idea-section .article .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3.3rem 4.5rem;
  gap: 3rem;
}
.developer-idea-section .article .wrap img {
  display: block;
  width: auto;
  height: auto;
}
.developer-idea-section .article .wrap h3 {
  font-size: 2.8rem;
  color: #58492C;
}
.developer-idea-section .sp-article {
  display: none;
}
@media only screen and (max-width: 768px) {
  .developer-idea-section .sp-article {
    display: block;
  }
}
.developer-idea-section .sp-article img {
  display: block;
}
@media only screen and (max-width: 768px) {
  .developer-idea-section .sp-article img {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 1.8rem;
  }
}
.developer-idea-section .conclusion {
  position: relative;
  text-align: center;
  padding-top: 4.7rem;
}
@media only screen and (max-width: 768px) {
  .developer-idea-section .conclusion {
    margin: 0 auto;
  }
}
.developer-idea-section .conclusion .so {
  font-size: 4rem;
  color: #58492C;
}
@media only screen and (max-width: 768px) {
  .developer-idea-section .conclusion .so {
    font-size: 1.8rem;
    margin: 0 auto;
    padding-top: 1.7rem;
    padding: 1.7rem 6rem 1.4rem;
  }
}
.developer-idea-section .conclusion span:nth-child(2) {
  font-size: 4rem;
  color: #F2A878;
  font-weight: 550;
  padding: 0 9rem;
}
@media only screen and (max-width: 768px) {
  .developer-idea-section .conclusion span:nth-child(2) {
    font-size: 1.8rem;
    padding: 0 6rem;
  }
}
.developer-idea-section .conclusion :nth-last-child(1) {
  font-size: 4rem;
  color: #58492C;
  font-weight: 550;
}
@media only screen and (max-width: 768px) {
  .developer-idea-section .conclusion :nth-last-child(1) {
    font-size: 1.8rem;
  }
}
.developer-idea-section .sales {
  position: relative;
  padding-top: 6rem;
}
@media only screen and (max-width: 768px) {
  .developer-idea-section .sales {
    padding-top: 2rem;
  }
}
.developer-idea-section .sales .sp-sales {
  display: none;
}
@media only screen and (max-width: 768px) {
  .developer-idea-section .sales .sp-sales {
    display: block;
    font-size: 1.5rem;
    color: #58492C;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.2rem;
  }
}
.developer-idea-section .sales img:nth-child(1) {
  display: block;
  width: auto;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .developer-idea-section .sales img:nth-child(1) {
    display: none;
  }
}
.developer-idea-section .sales img:nth-child(2) {
  display: none;
}
@media only screen and (max-width: 768px) {
  .developer-idea-section .sales img:nth-child(2) {
    display: block;
    width: 100%;
    height: auto;
    margin-right: 1rem;
    margin-left: 1rem;
    margin-bottom: 3rem;
  }
}

.recommend-section {
  position: relative;
  background-color: #fff8f4;
  padding-bottom: 8rem;
}
@media only screen and (max-width: 768px) {
  .recommend-section {
    padding-bottom: 1rem;
  }
}
.recommend-section .container {
  position: relative;
}
.recommend-section .container .title {
  position: relative;
  text-align: center;
  padding-top: 7rem;
}
.recommend-section .container .title h3 {
  font-size: 6rem;
  color: #58492C;
  font-weight: 600;
}
@media only screen and (max-width: 768px) {
  .recommend-section .container .title h3 {
    font-size: 3rem;
    color: #58492C;
    padding: 0 6rem;
  }
}
.recommend-section .container .title h3 span {
  color: #F2A878;
  border-bottom: 7px solid #F2A878;
}
.recommend-section .container .items {
  position: relative;
  margin: 3.2rem 0 8.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.recommend-section .container .items .item-contents {
  padding: 4.1rem 10rem;
  border-radius: 8rem;
  background-color: #ffffff;
}
@media only screen and (max-width: 768px) {
  .recommend-section .container .items .item-contents {
    padding: 3.3rem 2.1rem 3.3rem 1.8rem;
    border-radius: 5rem;
  }
}
.recommend-section .container .items .item-contents .each-items1 {
  width: 100%;
  height: auto;
  background-color: #F2DAAC;
  display: flex;
  align-items: center;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .recommend-section .container .items .item-contents .each-items1 {
    width: 100%;
    height: auto;
  }
}
.recommend-section .container .items .item-contents .each-items1 img {
  display: block;
  width: auto;
  height: auto;
  padding-left: 6.3rem;
  padding-right: 2.1rem;
}
@media only screen and (max-width: 768px) {
  .recommend-section .container .items .item-contents .each-items1 img {
    padding-right: 0;
    padding-left: 2rem;
    padding-right: 1rem;
  }
}
.recommend-section .container .items .item-contents .each-items1 span {
  font-size: 3rem;
  font-weight: 550;
  color: #58492C;
  padding: 2rem;
}
@media only screen and (max-width: 768px) {
  .recommend-section .container .items .item-contents .each-items1 span {
    font-size: 1.5rem;
    padding: 1rem 2rem 1rem 0;
    text-align: left;
  }
}
.recommend-section .container .items .item-contents .each-items2 {
  width: 110.9rem;
  height: auto;
  background-color: #F0C48D;
  display: flex;
  align-items: center;
  text-align: center;
  margin: 2.4rem 0 2.4rem;
}
@media only screen and (max-width: 768px) {
  .recommend-section .container .items .item-contents .each-items2 {
    width: 31rem;
    height: auto;
  }
}
.recommend-section .container .items .item-contents .each-items2 img {
  display: block;
  width: auto;
  height: auto;
  padding-left: 6.3rem;
  padding-right: 2.1rem;
}
@media only screen and (max-width: 768px) {
  .recommend-section .container .items .item-contents .each-items2 img {
    padding-right: 0;
    padding-left: 2rem;
    padding-right: 1rem;
  }
}
.recommend-section .container .items .item-contents .each-items2 span {
  font-size: 3rem;
  font-weight: 550;
  color: #58492C;
  padding: 2rem;
}
@media only screen and (max-width: 768px) {
  .recommend-section .container .items .item-contents .each-items2 span {
    font-size: 1.5rem;
    padding: 1rem 2rem 1rem 0;
    text-align: left;
  }
}
.recommend-section .container .items .item-contents .each-items3 {
  width: 110.9rem;
  height: auto;
  background-color: #F0C48D;
  display: flex;
  align-items: center;
  text-align: center;
  margin: 2.4rem 0 2.4rem;
}
@media only screen and (max-width: 768px) {
  .recommend-section .container .items .item-contents .each-items3 {
    width: 31rem;
    height: auto;
  }
}
.recommend-section .container .items .item-contents .each-items3 img {
  display: block;
  width: auto;
  height: auto;
  padding-left: 6.3rem;
  padding-right: 2.1rem;
}
@media only screen and (max-width: 768px) {
  .recommend-section .container .items .item-contents .each-items3 img {
    padding-right: 0;
    padding-left: 2rem;
    padding-right: 1rem;
  }
}
.recommend-section .container .items .item-contents .each-items3 span {
  font-size: 3rem;
  font-weight: 550;
  color: #58492C;
  padding: 2rem;
}
@media only screen and (max-width: 768px) {
  .recommend-section .container .items .item-contents .each-items3 span {
    font-size: 1.5rem;
    padding: 2rem 2rem 2rem 0;
    text-align: left;
  }
}

.recommend-reason-section {
  position: relative;
  background-color: #ffffff;
}
.recommend-reason-section .container {
  position: relative;
}
.recommend-reason-section .container .title {
  padding-top: 8.7rem;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .recommend-reason-section .container .title {
    padding-top: 4.5rem;
  }
}
.recommend-reason-section .container .title h3 {
  font-size: 6rem;
  color: #58492C;
  font-weight: 550;
}
@media only screen and (max-width: 768px) {
  .recommend-reason-section .container .title h3 {
    font-size: 3rem;
    padding: 0 4rem;
  }
}
.recommend-reason-section .container .title h3 span:nth-child(1) {
  border-bottom: 6px solid #58492C;
}
.recommend-reason-section .container .title h3 span:nth-child(2) {
  font-size: 6rem;
  font-weight: 900;
  color: #F2A878;
}
@media only screen and (max-width: 768px) {
  .recommend-reason-section .container .title h3 span:nth-child(2) {
    font-size: 3rem;
  }
}
.recommend-reason-section .container .reasons {
  position: relative;
  padding-top: 2.2rem;
}
.recommend-reason-section .container .reasons .inner {
  display: block;
}
.recommend-reason-section .container .reasons .inner .reason-pc {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  padding-bottom: 5rem;
}
@media only screen and (max-width: 768px) {
  .recommend-reason-section .container .reasons .inner .reason-pc {
    display: none;
  }
}
.recommend-reason-section .container .reasons .inner .reason-sp {
  display: none;
}
@media only screen and (max-width: 768px) {
  .recommend-reason-section .container .reasons .inner .reason-sp {
    display: block;
    width: 100%;
    height: auto;
  }
}

.attention-section {
  position: relative;
  background: url(../../../assets/img/attention-background.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
@media only screen and (max-width: 768px) {
  .attention-section {
    padding-bottom: 5rem;
  }
}
.attention-section .container {
  position: relative;
}
.attention-section .container .title {
  padding-top: 17rem;
}
@media only screen and (max-width: 768px) {
  .attention-section .container .title {
    padding-top: 3.5rem;
  }
}
.attention-section .container .title img:nth-child(1) {
  display: block;
  width: auto;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .attention-section .container .title img:nth-child(1) {
    display: none;
  }
}
.attention-section .container .title img:nth-child(2) {
  display: none;
}
@media only screen and (max-width: 768px) {
  .attention-section .container .title img:nth-child(2) {
    display: block;
    width: auto;
    height: auto;
  }
}
.attention-section .container .article2 {
  position: relative;
  text-align: center;
  top: -7rem;
}
@media only screen and (max-width: 768px) {
  .attention-section .container .article2 {
    position: relative;
    top: 0;
  }
}
.attention-section .container .article2 img:nth-child(1) {
  display: block;
  width: auto;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .attention-section .container .article2 img:nth-child(1) {
    display: none;
  }
}
.attention-section .container .article2 img:nth-child(2) {
  display: none;
}
@media only screen and (max-width: 768px) {
  .attention-section .container .article2 img:nth-child(2) {
    display: block;
    width: 100%;
  }
}
.attention-section .container .article2 h4 {
  padding-top: 4.9rem;
  font-size: 3rem;
  color: #58492C;
  font-weight: 300;
}
@media only screen and (max-width: 768px) {
  .attention-section .container .article2 h4 {
    font-size: 1.8rem;
    padding-top: 2rem;
  }
}
.attention-section .container .article2 h5 {
  padding-top: 2.5rem;
  font-size: 3rem;
  color: #58492C;
  font-weight: 300;
}
@media only screen and (max-width: 768px) {
  .attention-section .container .article2 h5 {
    font-size: 1.8rem;
    padding-top: 1.2rem;
  }
}
.attention-section .container .article2 h6 {
  padding-top: 1.9rem;
  font-size: 3rem;
  font-weight: 550;
}
@media only screen and (max-width: 768px) {
  .attention-section .container .article2 h6 {
    font-size: 1.8rem;
    padding-top: 1.2rem;
  }
}
.attention-section .container .article2 h6 span:nth-child(1) {
  color: #58492C;
}
.attention-section .container .article2 h6 span:nth-child(2) {
  color: #F2A878;
  border-bottom: 2px dotted #F2A878;
}

.client-voice-section {
  position: relative;
  background-color: #ffffff;
  padding-bottom: 10.5rem;
}
@media only screen and (max-width: 768px) {
  .client-voice-section {
    padding-bottom: 4.5rem;
  }
}
.client-voice-section .container {
  position: relative;
}
.client-voice-section .container .title {
  padding-top: 3.5rem;
  text-align: center;
}
.client-voice-section .container .title span:nth-child(1) {
  font-size: 6rem;
  color: #58492C;
  font-weight: 600;
}
@media only screen and (max-width: 768px) {
  .client-voice-section .container .title span:nth-child(1) {
    font-size: 3rem;
  }
}
.client-voice-section .container .title span:nth-child(2) {
  font-size: 6rem;
  color: #F2A878;
  font-weight: 600;
}
@media only screen and (max-width: 768px) {
  .client-voice-section .container .title span:nth-child(2) {
    font-size: 3rem;
  }
}
.client-voice-section .container .voices {
  position: relative;
}
.client-voice-section .container .voices .voice1 {
  position: relative;
  padding-top: 5.3rem;
}
@media only screen and (max-width: 768px) {
  .client-voice-section .container .voices .voice1 {
    padding-top: 0;
  }
}
.client-voice-section .container .voices .voice1 .voice-pc {
  display: block;
}
@media only screen and (max-width: 768px) {
  .client-voice-section .container .voices .voice1 .voice-pc {
    display: none;
  }
}
.client-voice-section .container .voices .voice1 .voice-pc .number1 {
  position: absolute;
  top: 2.8rem;
  left: 7.5rem;
  width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #ffffff;
  padding: 0.5rem 0.3rem;
  font-size: 3rem;
  color: #F0C48D;
  font-weight: 600;
}
.client-voice-section .container .voices .voice1 .voice-pc .wrap {
  width: 87%;
  height: auto;
  border-top: 3px solid #F1BE5F;
  border-right: 3px solid #F1BE5F;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}
.client-voice-section .container .voices .voice1 .voice-pc .wrap .peoples {
  position: relative;
}
.client-voice-section .container .voices .voice1 .voice-pc .wrap .peoples img {
  width: 100%;
  height: auto;
  padding-top: 2.7rem;
}
.client-voice-section .container .voices .voice1 .voice-pc .wrap .contents {
  text-align: left;
  width: 80%;
  padding: 2rem 0.5rem 2rem 0;
}
.client-voice-section .container .voices .voice1 .voice-pc .wrap .contents h2 {
  font-size: 3.5rem;
  font-weight: 600;
  color: #F2A878;
  padding-left: 2rem;
}
.client-voice-section .container .voices .voice1 .voice-pc .wrap .contents h3 {
  font-size: 3rem;
  color: #58492C;
  padding-top: 1.5rem;
}
.client-voice-section .container .voices .voice1 .voice-sp {
  display: none;
}
@media only screen and (max-width: 768px) {
  .client-voice-section .container .voices .voice1 .voice-sp {
    display: block;
    width: 100%;
    height: auto;
  }
}
.client-voice-section .container .voices .voice1 .voice-sp img {
  display: block;
  width: 100%;
  height: auto;
}
.client-voice-section .container .voices .voice2 {
  position: relative;
  padding-top: 5.9rem;
  padding-left: 11.4rem;
}
@media only screen and (max-width: 768px) {
  .client-voice-section .container .voices .voice2 {
    padding: 0;
  }
}
.client-voice-section .container .voices .voice2 .voice-pc {
  display: block;
}
@media only screen and (max-width: 768px) {
  .client-voice-section .container .voices .voice2 .voice-pc {
    display: none;
  }
}
.client-voice-section .container .voices .voice2 .voice-pc .number2 {
  position: absolute;
  top: 3.2rem;
  left: 20rem;
  width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #ffffff;
  padding: 0.5rem 0.3rem;
  font-size: 3rem;
  color: #F0C48D;
  font-weight: 600;
}
.client-voice-section .container .voices .voice2 .voice-pc .wrap {
  width: 100%;
  height: auto;
  border-top: 3px solid #F2C3AC;
  border-right: 3px solid #F2C3AC;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}
.client-voice-section .container .voices .voice2 .voice-pc .wrap .peoples {
  position: relative;
}
.client-voice-section .container .voices .voice2 .voice-pc .wrap .peoples img {
  width: 100%;
  height: auto;
  padding-top: 2.7rem;
}
.client-voice-section .container .voices .voice2 .voice-pc .wrap .contents {
  text-align: left;
  width: 80%;
  padding: 2rem 0.5rem 2rem 0;
}
.client-voice-section .container .voices .voice2 .voice-pc .wrap .contents h2 {
  font-size: 3.5rem;
  font-weight: 600;
  color: #F2A878;
  padding-left: 2rem;
}
.client-voice-section .container .voices .voice2 .voice-pc .wrap .contents h3 {
  font-size: 3rem;
  color: #58492C;
  padding-top: 1.5rem;
}
.client-voice-section .container .voices .voice2 .voice-sp {
  display: none;
}
@media only screen and (max-width: 768px) {
  .client-voice-section .container .voices .voice2 .voice-sp {
    display: block;
    width: 100%;
    height: auto;
  }
}
.client-voice-section .container .voices .voice2 .voice-sp img {
  display: block;
  width: 100%;
  height: auto;
}

.useguide-section {
  position: relative;
  background-color: #FBF3D5;
}
.useguide-section .container .title {
  position: relative;
  padding-top: 6.5rem;
  font-size: 6rem;
  font-weight: 550;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .useguide-section .container .title {
    font-size: 3rem;
    padding-left: 4rem;
    padding-right: 4rem;
    padding-top: 4.5rem;
  }
}
.useguide-section .container .title span:nth-child(1) {
  color: #58492C;
}
.useguide-section .container .title span:nth-child(2) {
  color: #F2A878;
}
.useguide-section .container .how-to-use {
  position: relative;
  padding-top: 5.4rem;
}
@media only screen and (max-width: 768px) {
  .useguide-section .container .how-to-use {
    padding-top: 2rem;
  }
}
.useguide-section .container .how-to-use img:nth-child(1) {
  display: block;
  width: auto;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .useguide-section .container .how-to-use img:nth-child(1) {
    display: none;
  }
}
.useguide-section .container .how-to-use img:nth-child(2) {
  display: none;
}
@media only screen and (max-width: 768px) {
  .useguide-section .container .how-to-use img:nth-child(2) {
    display: block;
    width: 100%;
    height: auto;
  }
}
.useguide-section .container .how-to-use .use-guide {
  margin: 0 auto;
  padding-top: 4.4rem;
  padding-left: 4rem;
  padding-right: 4rem;
  position: relative;
  color: #58492C;
  font-size: 2.6rem;
}
@media only screen and (max-width: 768px) {
  .useguide-section .container .how-to-use .use-guide {
    font-size: 1.5rem;
    padding-left: 0;
    padding-right: 0;
    padding-top: 1.7rem;
  }
}
.useguide-section .container .caution {
  position: relative;
  padding-top: 8rem;
}
@media only screen and (max-width: 768px) {
  .useguide-section .container .caution {
    padding-top: 4rem;
  }
}
.useguide-section .container .caution .precaution {
  padding-bottom: 4.8rem;
}
@media only screen and (max-width: 768px) {
  .useguide-section .container .caution .precaution {
    padding-bottom: 2rem;
  }
}
.useguide-section .container .caution .precaution .subtitle {
  position: relative;
  top: 3rem;
  width: 37.5rem;
  margin: 0 auto;
  font-size: 3.5rem;
  font-weight: 600;
  text-align: center;
  background-color: #F2A878;
  padding: 1.3rem 6.5rem;
  color: #ffffff;
  border-radius: 4rem;
}
@media only screen and (max-width: 768px) {
  .useguide-section .container .caution .precaution .subtitle {
    position: relative;
    top: 2rem;
    width: 18.5rem;
    font-size: 1.8rem;
    padding: 0.5rem 2rem;
  }
}
.useguide-section .container .caution .precaution .intro {
  background-color: #ffffff;
  border-radius: 2rem;
  padding: 4.7rem 13.7rem;
  font-size: 3rem;
  color: #58492C;
  font-weight: 550;
}
@media only screen and (max-width: 768px) {
  .useguide-section .container .caution .precaution .intro {
    padding: 4.1rem 1.8rem 1.5rem;
    font-size: 1.5rem;
  }
}
.useguide-section .container .caution .details {
  position: relative;
  padding-bottom: 10rem;
}
@media only screen and (max-width: 768px) {
  .useguide-section .container .caution .details {
    padding-bottom: 4rem;
  }
}
.useguide-section .container .caution .details .subtitle {
  position: relative;
  top: 3rem;
  width: 37.5rem;
  margin: 0 auto;
  font-size: 3.5rem;
  font-weight: 600;
  text-align: center;
  background-color: #F2A878;
  padding: 1.3rem 6.5rem;
  color: #ffffff;
  border-radius: 4rem;
}
@media only screen and (max-width: 768px) {
  .useguide-section .container .caution .details .subtitle {
    position: relative;
    top: 2rem;
    width: 18.5rem;
    font-size: 1.8rem;
    padding: 0.5rem 2rem;
  }
}
.useguide-section .container .caution .details .intro {
  background-color: #ffffff;
  border-radius: 2rem;
  padding: 4.7rem 13.7rem;
  font-size: 3rem;
  color: #58492C;
  font-weight: 550;
}
@media only screen and (max-width: 768px) {
  .useguide-section .container .caution .details .intro {
    padding: 4.1rem 1.8rem 1.5rem;
    font-size: 1.5rem;
  }
}

.faq-section {
  position: relative;
}
.faq-section .title img:nth-child(1) {
  display: block;
  width: auto;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .faq-section .title img:nth-child(1) {
    display: none;
  }
}
.faq-section .title img:nth-child(2) {
  display: none;
}
@media only screen and (max-width: 768px) {
  .faq-section .title img:nth-child(2) {
    display: block;
    width: 100%;
    height: auto;
  }
}
.faq-section .container {
  position: relative;
}
.faq-section .container .wrapper {
  color: #58492C;
  margin: 5.1rem 0;
}
@media only screen and (max-width: 768px) {
  .faq-section .container .wrapper {
    margin: 2rem 0;
  }
}
.faq-section .container .wrapper li:nth-child(1) {
  margin-top: 6rem;
}
.faq-section .container .wrapper .faq-list {
  background-color: #FFFFFF; /* White background for items */
  border: 1px solid #E0E0E0; /* Light border */
  border-radius: 2rem;
  margin-bottom: 3.8rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Softer shadow */
}
.faq-section .container .wrapper .faq-list .question {
  background-color: #F2DAAC; /* Soft purple */
  color: #58492C; /* White text */
  padding: 1.5rem;
  font-size: 3rem;
  font-weight: 600;
  border: none;
  border-top-right-radius: 2rem;
  border-top-left-radius: 2rem;
  width: 100%;
  height: 8rem;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s ease;
}
@media only screen and (max-width: 768px) {
  .faq-section .container .wrapper .faq-list .question {
    font-size: 1.8rem;
  }
}
.faq-section .container .wrapper .faq-list .question .q {
  font-size: 3.5rem;
  font-weight: 600;
  color: #F2A878;
  padding-left: 6.9rem;
  padding-right: 2.5rem;
}
@media only screen and (max-width: 768px) {
  .faq-section .container .wrapper .faq-list .question .q {
    padding-right: 0.8rem;
    padding-left: 0;
    font-size: 1.8rem;
  }
}
.faq-section .container .wrapper .faq-list .question::after {
  content: "+";
  font-size: 4rem;
  position: absolute;
  right: 6rem;
  transition: 0.2s;
}
@media only screen and (max-width: 768px) {
  .faq-section .container .wrapper .faq-list .question::after {
    display: none;
  }
}
.faq-section .container .wrapper .faq-list .question.active::after {
  transform: rotate(45deg);
}
.faq-section .container .wrapper .faq-list .question:hover {
  background-color: #F0C48D; /* Darker shade of purple */
}
.faq-section .container .wrapper .faq-list .accordion-content {
  display: none;
  position: relative;
  background-color: #FEFCF3; /* Very light grey for content */
  overflow: hidden;
  padding: 2rem 15.2rem;
  border-radius: 2rem;
  transition: max-height 0.3s ease;
}
@media only screen and (max-width: 768px) {
  .faq-section .container .wrapper .faq-list .accordion-content {
    position: relative;
    padding: 0 2.4rem;
  }
}
.faq-section .container .wrapper .faq-list .accordion-content span {
  position: absolute;
  top: 2.6rem;
  left: 11rem;
  font-size: 3rem;
  color: #F2A878;
}
@media only screen and (max-width: 768px) {
  .faq-section .container .wrapper .faq-list .accordion-content span {
    position: absolute;
    top: 1.5rem;
    left: 1rem;
    font-size: 1.5rem;
  }
}
.faq-section .container .wrapper .faq-list .accordion-content .answer {
  margin: 1.5rem 0;
  line-height: 1.5;
}
@media only screen and (max-width: 768px) {
  .faq-section .container .wrapper .faq-list .accordion-content .answer {
    font-size: 1.5rem;
    margin: 1.5rem 0;
  }
}
.faq-section .container .wrapper .faq-list .accordion-content .subcontent {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 2.3rem;
  margin-top: -1rem;
}
@media only screen and (max-width: 768px) {
  .faq-section .container .wrapper .faq-list .accordion-content .subcontent {
    display: block;
  }
}
.faq-section .container .wrapper .faq-list .accordion-content .subcontent img {
  visibility: visible;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .faq-section .container .wrapper .faq-list .accordion-content .subcontent img {
    margin: 2rem 0;
  }
}
.faq-section .container .wrapper .faq-list .accordion-content .subcontent p {
  font-size: 2.5rem;
  color: #58492C;
  line-height: 1.5;
}
@media only screen and (max-width: 768px) {
  .faq-section .container .wrapper .faq-list .accordion-content .subcontent p {
    font-size: 1.5rem;
  }
}
.faq-section .container .wrapper .faq-list .accordion-content .subcontent .video {
  width: 100%;
  height: auto;
}

.Kyuback-part {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}
@media only screen and (max-width: 768px) {
  .Kyuback-part {
    display: block;
    margin: 1.5rem 0;
  }
}
.Kyuback-part img {
  width: 100%;
  height: 100%;
}
.Kyuback-part p {
  font-size: 2.5rem;
  color: #58492C;
  line-height: 1.5;
}
@media only screen and (max-width: 768px) {
  .Kyuback-part p {
    font-size: 1.5rem;
  }
}

.question2 {
  position: relative;
  background-color: #F2DAAC; /* Soft purple */
  color: #58492C; /* White text */
  padding: 15px;
  padding-left: 14rem;
  font-size: 3rem;
  font-weight: 600;
  border: none;
  border-top-right-radius: 2rem;
  border-top-left-radius: 2rem;
  width: 100%;
  height: 13rem;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s ease;
}
@media only screen and (max-width: 768px) {
  .question2 {
    font-size: 1.8rem;
    padding: 1.5rem 2rem 0 4rem;
  }
}
.question2 .q {
  font-size: 3.5rem;
  font-weight: 600;
  color: #F2A878;
  padding-left: 6.9rem;
  padding-right: 2.5rem;
  position: absolute;
  top: 1rem;
  left: 1.5rem;
}
@media only screen and (max-width: 768px) {
  .question2 .q {
    padding-right: 0.8rem;
    padding-left: 0;
    font-size: 1.8rem;
  }
}

.question2::after {
  content: "+";
  font-size: 4rem;
  position: absolute;
  top: 3rem;
  right: 4.3rem;
  transition: 0.2s;
}
@media only screen and (max-width: 768px) {
  .question2::after {
    display: none;
  }
}

.question2.active::after {
  transform: rotate(45deg);
}

.question2:hover {
  background-color: #F0C48D; /* Darker shade of purple */
}

.accordion-content {
  position: relative;
  display: none;
  background-color: #FAFAFA; /* Very light grey for content */
  overflow: hidden;
  padding: 0 15.2rem;
  border-radius: 2rem;
  font-size: 2.5rem;
  transition: max-height 0.3s ease;
}
@media only screen and (max-width: 768px) {
  .accordion-content {
    padding: 0 2.4rem;
  }
}
.accordion-content span {
  position: absolute;
  top: 0.6rem;
  left: 11rem;
  font-size: 3rem;
  color: #F2A878;
}
@media only screen and (max-width: 768px) {
  .accordion-content span {
    position: absolute;
    top: 1.9rem;
    left: 1rem;
    font-size: 1.5rem;
  }
}
.accordion-content .answer {
  margin: 1.5rem 0;
  line-height: 1.5;
}
@media only screen and (max-width: 768px) {
  .accordion-content .answer {
    font-size: 1.5rem;
    margin: 1.5rem 0;
  }
}
.accordion-content .subcontents {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: -1rem;
}
@media only screen and (max-width: 768px) {
  .accordion-content .subcontents {
    display: none !important;
  }
}
.accordion-content .subcontents img {
  width: 32rem;
  height: 17rem;
}
.accordion-content .subcontents p {
  font-size: 2rem;
  color: #58492C;
  line-height: 1.5;
}
.accordion-content .subcontent-sp {
  display: none;
}
@media only screen and (max-width: 768px) {
  .accordion-content .subcontent-sp {
    display: block;
  }
}
.accordion-content .subcontent-sp h3 {
  font-size: 1.5rem;
  color: #58492C;
  line-height: 1.5;
}
.accordion-content .subcontent-sp img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1rem;
}
.accordion-content .subcontent-sp h4 {
  font-size: 1rem;
  color: #58492C;
  line-height: 1.5;
  padding-bottom: 2rem;
}

#footer {
  position: relative;
}
#footer .inner {
  position: relative;
  background-color: #F2A878;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10.9rem;
  padding: 6rem 54rem 4.8rem;
}
@media only screen and (max-width: 768px) {
  #footer .inner {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    display: block;
    text-align: center;
    padding: 6rem 1rem 1.8rem;
  }
}
#footer .inner h2 {
  position: relative;
  top: -3.6rem;
  font-size: 3rem;
  font-weight: 550;
  color: #58492C;
}
#footer .inner h3 {
  font-size: 2.5rem;
  font-weight: 550;
  color: #58492C;
}
@media only screen and (max-width: 768px) {
  #footer .inner h3 {
    font-size: 1.8rem;
    text-align: left;
  }
}

.scroll-to-top {
  position: absolute;
  right: 2rem;
  bottom: 1rem;
  background-color: #58492C;
  padding: 2rem 2.6rem;
  border-radius: 50%;
}
@media only screen and (max-width: 768px) {
  .scroll-to-top {
    position: absolute;
    right: 1rem;
    bottom: 10rem;
    padding: 1rem 1.6rem;
    padding: 1rem 1.8rem;
  }
}

.scroll-to-top:hover {
  background-color: #F2DAAC;
}

.fa-arrow-up {
  font-size: 4rem;
}/*# sourceMappingURL=style.css.map */