@charset "UTF-8";
.early-header {
  width: 100%;
  position: relative;
  line-height: 0
}
.early-header img.kv {
  width: 100%;
  height: 600px !important;
  object-fit: cover
}
.early-header .inbox {
  max-width: 1000px;
  margin: auto;
  position: absolute;
  top: 45%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center
}
.early-header .inbox h2 {
  margin: 0 auto;
}
.early-header .inbox h3 {
  margin: -30px auto 0
}
.early-header h4 {
  width: 100%;
  padding: 1em 0;
  text-align: center;
  background: #ffd34c;
  display: block;
  color: #222;
  font-size: 250%;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em
}
.early-header h4 em {
  color: #ff7817;
  font-style: normal
}
@media screen and (min-width:768px) and (max-width:1023px) {
  .early-header .inbox {
    max-width: 500px;
    top: 40%
  }
  .early-header h4 {
    font-size: 160%
  }
}
@media screen and (min-width:1px) and (max-width:767px) {
  .early-header img.kv {
    height: auto !important
  }
  .early-header h4 {
    padding: .5em 0;
    font-size: 160%;
    letter-spacing: -.05em;
    line-height: 1.3
  }
}
.trouble {
  width: 100%;
  padding: 0 0 4%;
  text-align: center
}
.trouble .trouble-list {
  margin: 0 auto 3%;
  padding: 5% 0 2%;
  background: #fff7f4
}
.trouble .trouble-list h2 {
  margin: 0 auto;
  color: #222;
  font-size: 250%;
  font-weight: 900;
  line-height: 0;
}
.trouble .trouble-list h2 em {
  color: #ff7817;
  font-style: normal;
  background: linear-gradient(transparent 80%, #ffd34c 80%)
}
.trouble .trouble-list h2 + figure {
  max-width: 1000px;
  margin: auto;
  padding: 2% 0;
  line-height: 0;
}
.trouble h3 {
  padding: 2%;
  position: relative;
  top: -2.5em;
  display: inline-table;
  background: #ff7817;
  color: #fff;
  font-size: 250%;
  font-weight: 700;
  line-height: 0;
  letter-spacing: .05em
}
.trouble h4 {
  margin: 0 auto 2%;
  color: #222;
  font-size: 250%;
  font-weight: 900;
  line-height: 1.5
}
.trouble h4 em {
  color: #ff7817;
  font-style: normal;
  background: linear-gradient(transparent 80%, #ffd34c 80%)
}
.trouble .scrollbox {
  max-width: 1000px;
  margin: auto
}
.trouble .scrollbox figure {
  width: 100%
}
@media screen and (min-width:768px) and (max-width:1023px) {
  .trouble .trouble-list {
    padding: 7% 2% 2%
  }
  .trouble .trouble-list h2 {
    font-size: 200%
  }
  .trouble h3 {
    font-size: 180%
  }
  .trouble h4 {
    font-size: 200%
  }
  .trouble .scrollbox {
    max-width: 90%;
    margin: 3% auto
  }
}
@media screen and (min-width:1px) and (max-width:767px) {
  .trouble .trouble-list {
    margin: 0 auto;
    padding: 10% 2% 6%
  }
  .trouble .trouble-list ul {
    display: none
  }
  .trouble .trouble-list h2 {
    margin: 0 auto 3%;
    font-size: 180%;
    line-height: 1.3
  }
  .trouble h3 {
    width: 100%;
    padding: 2%;
    top: 0;
    display: table;
    font-size: 160%;
    line-height: 1.3
  }
  .trouble h4 {
    margin: 4% auto;
    font-size: 180%
  }
  .trouble .scrollbox {
    max-width: 90%;
    margin: 3% auto;
    overflow-x: auto
  }
  .trouble .scrollbox figure img {
    min-width: 600px;
    height: 300px !important;
    object-fit: contain;
    object-position: left
  }
}
.merit {
  width: 100%;
  padding: 5% 0;
  background: #fffcf2 var(--wpr-bg-b5370204-47a3-4080-a354-4a1f7e00b15f) no-repeat 0 0/cover
}
.merit .inner-box {
  max-width: 1080px;
  margin: auto;
  text-align: center;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  border-radius: 20px
}
.merit .inner-box h2 {
  line-height: 0
}
.merit .inner-box h2 img {
  width: 100%
}
.merit .inner-box ul {
  padding: 5% 8% 2%;
  display: flex;
  flex-wrap: wrap
}
.merit .inner-box ul li {
  width: calc(50% - 3%);
  margin: 0 5.5% 5% 0;
  box-sizing: border-box
}
.merit .inner-box ul li:nth-child(even) {
  margin: 0 0 5%
}
.merit .inner-box ul li figure {
  position: relative
}
.merit .inner-box ul li figure span {
  max-width: 80px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1
}
.merit .inner-box ul li figure .images {
  width: 100%
}
.merit .inner-box ul li figure figcaption {
  margin: 2% auto 0;
  color: #222;
  font-size: 160%;
  font-weight: 700;
  line-height: 1.3
}
.merit .inner-box ul li figure figcaption em {
  color: #fd9749;
  font-style: normal
}
@media screen and (min-width:768px) and (max-width:1023px) {
  .merit .inner-box {
    max-width: 90%
  }
  .merit .inner-box ul {
    padding: 5% 5% 2%
  }
  .merit .inner-box ul li figure span {
    width: 20%
  }
  .merit .inner-box ul li figure figcaption {
    font-size: 120%
  }
}
@media screen and (min-width:1px) and (max-width:767px) {
  .merit {
    padding: 12% 0
  }
  .merit .inner-box {
    max-width: 90%
  }
  .merit .inner-box ul {
    padding: 8% 12% 5%
  }
  .merit .inner-box ul li {
    width: 100%;
    margin: 0 auto 5%
  }
  .merit .inner-box ul li:nth-child(even) {
    margin: 0 auto 5%
  }
  .merit .inner-box ul li figure span {
    width: 20%
  }
  .merit .inner-box ul li figure figcaption {
    font-size: 120%
  }
}
.support {
  width: 100%;
  padding: 0 0 3%
}
.support .balloon {
  width: 100%;
  margin: 0 auto 7%;
  padding: 1.5em 0;
  text-align: center;
  background: rgba(204, 0, 0, .05);
  display: block
}
.support .balloon span {
  padding: .5% 7%;
  position: relative;
  display: inline-table;
  background: #ff7817;
  color: #fff;
  font-size: 250%;
  font-weight: 700;
  letter-spacing: .05em
}
.support .balloon span::after {
  content: "";
  margin-left: -15px;
  position: absolute;
  top: 100%;
  left: 50%;
  border: 25px solid transparent;
  border-top: 35px solid #ff7817
}
.support h2 {
  margin: 0 auto 1%;
  text-align: center;
  color: #fd9749;
  font-size: 250%;
  font-weight: 700;
  line-height: 0;
  letter-spacing: .05em
}
.support ul {
  display: flex;
  flex-wrap: wrap
}
.support ul li {
  width: calc(33.3333% - 1.5%);
  margin: 0 2.2% 2% 0;
  position: relative;
  box-sizing: border-box;
  line-height: 0;
}
.support ul li:nth-child(3n) {
  margin: 0 0 2%
}
.support ul li a {
  display: block;
  border: 3px solid #fff;
  border-radius: 10px;
}
.support ul li a:hover {
  border: 3px solid #fd9749;
  color: #222;
}
.support ul li a img {
  border-radius: 10px
}
.support ul li a span {
  padding: 3% 5%;
  position: absolute;
  left: 0;
  bottom: 5%;
  z-index: 1;
  line-height: 1;
  display: inline-table;
  background: rgba(255, 255, 255, .8);
  border-left: 5px solid #fd9749
}
@media screen and (min-width:768px) and (max-width:1023px) {
  .support .balloon span {
    font-size: 200%
  }
  .support .balloon span::after {
    top: 95%
  }
  .support ul {
    max-width: 95% !important
  }
}
@media screen and (min-width:1px) and (max-width:767px) {
  .support .balloon {
    margin: 0 auto 10%
  }
  .support .balloon span {
    padding: .5% 0;
    display: block;
    font-size: 170%
  }
  .support .balloon span::after {
    margin-left: -10px;
    top: 90%;
    border: 10px solid transparent;
    border-top: 25px solid #ff7817
  }
  .support h2 {
    font-size: 180%
  }
  .support ul li {
    width: calc(50% - 2%);
    margin: 0 3.7% 3% 0
  }
  .support ul li:nth-child(3n) {
    margin: 0 3.7% 3% 0
  }
  .support ul li:nth-child(even) {
    margin: 0 0 3%
  }
}
.area {
  width: 100%;
  padding: 7% 0;
  text-align: center;
  background: rgba(204, 0, 0, .05)
}
.area h2 {
  margin: 0 auto 3%;
  color: #222;
  font-size: 250%;
  font-weight: 700;
  line-height: 0;
  letter-spacing: .05em
}
.area h2 em {
  color: #ff7817;
  font-style: normal;
  font-weight: 900
}
.area .inner-box {
  max-width: 1080px;
  margin: 0 auto 3%;
  padding: 5em 15em;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  border-radius: 20px;
  box-sizing: border-box
}
.area .inner-box + p {
  width: 350px;
  margin: 0 auto;
  display: inline-table
}
@media screen and (min-width:768px) and (max-width:1023px) {
  .area h2 {
    margin: 0 auto 5%;
    font-size: 200%
  }
  .area .inner-box {
    max-width: 95%;
    padding: 5em 10em
  }
}
@media screen and (min-width:1px) and (max-width:767px) {
  .area {
    padding: 12% 0
  }
  .area h2 {
    margin: 0 auto 7%;
    font-size: 160%
  }
  .area .inner-box {
    max-width: 90%;
    margin: 0 auto 6%;
    padding: 2em
  }
  .area .inner-box + p {
    width: 60%
  }
}
.voice {
  width: 100%;
  padding: 7% 0;
  text-align: center;
  background: rgba(250, 223, 3, .1)
}
.voice h2 {
  max-width: 400px;
  margin: 0 auto 2%;
  line-height: 0
}
.voice ul {
  display: flex;
  flex-wrap: wrap
}
.voice ul li {
  width: calc(33.3333% - 1.5%);
  margin: 0 2.2% 2% 0;
  position: relative;
  box-sizing: border-box
}
.voice ul li:nth-child(3n) {
  margin: 0 0 2%
}
.voice ul li figure figcaption h5 {
  padding: 10% 0;
  color: #222;
  font-size: 120%;
  line-height: 0;
  letter-spacing: .05em
}
.voice ul li figure figcaption p {
  text-align: left
}
.voice ul + p {
  max-width: 1000px;
  margin: -20px auto 0;
  text-align: right;
  color: #ccc;
  font-size: 80%
}
.voice p.more01 {
  width: 350px;
  margin: 0 auto;
  display: inline-table
}
@media screen and (min-width:768px) and (max-width:1023px) {
  .voice h2 {
    max-width: 40%
  }
  .voice ul {
    max-width: 95% !important
  }
}
@media screen and (min-width:1px) and (max-width:767px) {
  .voice {
    padding: 12% 0
  }
  .voice h2 {
    max-width: 50%
  }
  .voice ul li {
    width: 100%;
    margin: 0 auto 8%
  }
  .voice ul li:nth-child(3n) {
    margin: 0 auto 8%
  }
  .voice ul li figure figcaption h5 {
    padding: 8% 0 5%;
    font-size: 150%
  }
  .voice ul li figure figcaption p {
    width: 90%;
    margin: auto
  }
  .voice ul + p {
    max-width: 90%;
    margin: -20px auto 30px;
    font-size: 100%
  }
  .voice p.more01 {
    width: 60%;
    display: table
  }
}
.flow {
  width: 100%;
  padding: 7% 0 5%;
  background: rgba(204, 0, 0, .05)
}
.flow h2 {
  max-width: 300px;
  margin: 0 auto 3%;
  text-align: center;
  line-height: 0
}
.flow .flown {
  max-width: 880px;
  margin: 0 auto 2%;
  padding: 2%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, .05)
}
.flow .flown::before {
  content: "";
  position: absolute;
  left: 70px;
  bottom: -25px;
  display: block;
  border-style: solid;
  border-width: 24px 14px 0 14px;
  border-color: #fd9749 transparent transparent transparent
}
.flow .flown:last-of-type::before {
  display: none
}
.flow .flown li {
  box-sizing: border-box
}
.flow .flown li:nth-child(1) {
  width: 75%;
  position: relative
}
.flow .flown li:nth-child(2) {
  width: 20%
}
.flow .flown li:nth-child(1) .recommend {
  width: 38%;
  position: absolute;
  left: -33px;
  top: -70px
}
.flow .flown li:nth-child(1) h3 {
  margin: 0 auto 3% -25px;
  padding: 0 0 2% 25px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  color: #fd9749;
  font-size: 200%;
  font-weight: 900
}
.flow .flown:nth-of-type(1) li:nth-child(1) .pic {
  width: 65%;
  position: absolute;
  right: 0;
  top: -40px
}
.flow .flown:nth-of-type(2) li:nth-child(1) .pic {
  width: 22%;
  position: absolute;
  right: 0;
  top: -75px
}
.flow .flown li:nth-child(1) .txt {
  font-size: 120%
}
.flow .flown .contactbox {
  margin: 2% auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}
.flow .flown .contactbox li:nth-child(1), .flow .flown .contactbox li:nth-child(2) {
  width: 48%
}
.flow .flown .contactbox img {
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2)
}
@media screen and (min-width:768px) and (max-width:1023px) {
  .flow h2 {
    max-width: 28%
  }
  .flow .flown {
    max-width: 95%
  }
  .flow .flown li:nth-child(1) h3 {
    margin: 0 auto 3% -5px;
    padding: 0 0 2% 5px;
    font-size: 180%
  }
}
@media screen and (min-width:1px) and (max-width:767px) {
  .flow {
    padding: 12% 0 8%
  }
  .flow h2 {
    max-width: 40%;
    margin: 0 auto 10%
  }
  .flow .flown {
    max-width: 90%;
    margin: 0 auto 10%;
    padding: 0
  }
  .flow .flown::before {
    left: 48%;
    bottom: -30px;
    border-width: 20px 10px 0 10px
  }
  .flow .flown li:nth-child(1) {
    width: 70%;
    padding: 2%
  }
  .flow .flown:nth-of-type(1) li:nth-child(1) {
    width: 100%;
    padding: 5% 2% 2%
  }
  .flow .flown:nth-of-type(1) .contactbox li:nth-child(1) {
    width: 48%;
    padding: 0
  }
  .flow .flown:nth-of-type(1) .contactbox li:nth-child(2) img {
    margin: 0
  }
  .flow .flown li:nth-child(2) {
    width: 30%
  }
  .flow .flown li:nth-child(2) img {
    margin: 35px 0 0
  }
  .flow .flown li:nth-child(1) .recommend {
    width: 40%;
    left: 0;
    top: -20px
  }
  .flow .flown li:nth-child(1) h3 {
    margin: 0 auto 3% 0;
    padding: 0 0 2% 0;
    font-size: 140%
  }
  .flow .flown:nth-of-type(1) li:nth-child(1) .pic {
    width: 50%;
    right: 10px;
    top: 5px
  }
  .flow .flown:nth-of-type(2) li:nth-child(1) .pic {
    width: 30%;
    right: -30px;
    top: -35px
  }
  .flow .flown li:nth-child(1) .txt {
    padding: 0 2%;
    font-size: 90%
  }
  .flow .flown:nth-of-type(4) li:nth-child(1) h3 {
    margin: -30px auto 3% 0
  }
}
.faq {
  width: 100%;
  padding: 7% 0
}
.faq h2 {
  max-width: 250px;
  margin: 0 auto 3%;
  text-align: center;
  color: #222;
  font-size: 250%;
  font-weight: 700;
  line-height: 0;
  letter-spacing: .05em
}
.faq dl {
  max-width: 1000px;
  margin: 0 auto 2%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2)
}
.faq dl dt {
  width: 100%;
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  background: #fff
}
.faq dl dt span {
  padding: 3% 5% 3% 8%;
  position: relative;
  display: block
}
.faq dl dt span::before {
  content: "";
  width: 6%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  background: #fd9749 var(--wpr-bg-59d210b3-eb85-4bde-8828-49c52b02405f) no-repeat center/20% auto
}
.faq dl dt::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  right: 3%;
  top: 40%;
  display: block;
  border-bottom: 2px solid #222;
  border-right: 2px solid #222;
  transform: rotate(45deg)
}
.faq dl dt.active {
  background: rgba(250, 223, 3, .1)
}
.faq dl dt.active::after {
  transform: rotate(-135deg)
}
.faq dl dd {
  width: 100%;
  box-sizing: border-box;
  display: none
}
.faq dl dd span {
  padding: 3% 5% 3% 8%;
  position: relative;
  display: block;
  line-height: 1.8
}
.faq dl dd span::before {
  content: "";
  width: 6%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  background: var(--wpr-bg-39dc19ce-5875-4ea1-890d-23334c5b4810) no-repeat center/20% auto
}
@media screen and (min-width:768px) and (max-width:1023px) {
  .faq dl {
    max-width: 95%
  }
  .faq h2 {
    max-width: 23%
  }
}
@media screen and (min-width:1px) and (max-width:767px) {
  .faq {
    padding: 12% 0
  }
  .faq h2 {
    max-width: 30%;
    margin: 0 auto 8%
  }
  .faq dl {
    max-width: 90%
  }
  .faq dl dt span, .faq dl dd span {
    padding: 5% 8% 5% 12%
  }
  .faq dl dt span::before {
    width: 10%;
    background: #fd9749 var(--wpr-bg-d5fcd81d-e27c-4a2f-a8cf-55be0a6757cb) no-repeat center 15px/25% auto
  }
  .faq dl dd span::before {
    width: 10%;
    background: var(--wpr-bg-2ac6d3f8-1b4a-4d5c-964a-0ee90c0b2bd6) no-repeat center 20px/25% auto
  }
}
.bottom {
  width: 100%;
  padding: 4% 0;
  background: rgba(250, 223, 3, .1) var(--wpr-bg-9b39acb6-1a57-40df-b5f3-f91eabab6875) no-repeat 0 0/cover
}
.bottom h2 {
  margin: 0 auto 2%;
  text-align: center;
  color: #ff7817;
  font-size: 150%;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.5
}
.bottom h2 small {
  display: block;
  color: #222
}
.bottom h2 em {
  font-size: 250%
}
.bottom .inner-box {
  max-width: 1000px;
  margin: auto;
  padding: 3% 7% 2%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  border-radius: 20px;
  box-sizing: border-box
}
.bottom .inner-box li {
  margin: 0 0 2%;
  padding: 0 0 1%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  font-size: 170%;
  font-weight: 700
}
.bottom .inner-box li::before {
  content: url(../../../../../../../../themes/bssp/img/early/i-list.svg);
  width: 40px;
  height: 40px
}
.bottom .inner-box li span {
  width: 92%
}
@media screen and (min-width:768px) and (max-width:1023px) {
  .bottom h2 em {
    font-size: 180%
  }
  .bottom .inner-box {
    max-width: 95%
  }
  .bottom .inner-box li {
    font-size: 150%
  }
  .bottom .inner-box li span {
    width: 88%
  }
}
@media screen and (min-width:1px) and (max-width:767px) {
  .bottom {
    padding: 12% 0
  }
  .bottom h2 {
    margin: 0 auto 5%;
    font-size: 130%;
    letter-spacing: 0
  }
  .bottom h2 em {
    font-size: 170%
  }
  .bottom .inner-box {
    max-width: 90%;
    padding: 6% 7% 4%
  }
  .bottom .inner-box li {
    font-size: 140%
  }
  .bottom .inner-box li::before {
    width: 30px;
    height: 30px
  }
  .bottom .inner-box li span {
    width: 85%;
    line-height: 1.3
  }
}
.contact {
  width: 100%;
  text-align: center;
  background: #ffc000 var(--wpr-bg-b4c4c7d4-4221-4011-a439-d4f9e9c2d8bb) no-repeat center/auto 100%
}
.contact.c1 {
  padding: 50px 0 40px
}
.contact.c2 {
  padding: 60px 0 50px
}
.contact h5 {
  max-width: 1000px;
  margin: 0 auto 1%;
  padding: 0 0 2%;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 250%;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 0
}
.contact h5 + p {
  margin: 0 auto 1%;
  font-size: 150%;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.3
}
.contact ul {
  max-width: 750px;
  margin: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}
.contact.c1 ul::after {
  content: "";
  width: 280px;
  height: 380px;
  position: absolute;
  right: -150px;
  bottom: -40px;
  display: block;
  background: var(--wpr-bg-762f379a-b6c0-40b7-86c2-a5ad9694fefd) no-repeat 0 bottom/100% auto
}
.contact.c2 ul::after {
  content: "";
  width: 280px;
  height: 380px;
  position: absolute;
  right: -150px;
  bottom: -50px;
  display: block;
  background: var(--wpr-bg-0f476d80-a991-451d-b2a8-abb6de7360c5) no-repeat 0 bottom/100% auto
}
.contact ul li {
  width: calc(50% - 3%);
  margin: 0 1%;
  position: relative;
  z-index: 1;
  line-height: 0
}
.contact ul li img {
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2)
}
@media screen and (min-width:768px) and (max-width:1023px) {
  .contact h5 {
    max-width: 80%;
    font-size: 200%
  }
  .contact h5 + p {
    margin: 0 auto 3%;
    font-size: 120%
  }
  .contact.c1 ul::after, .contact.c2 ul::after {
    width: 250px;
    height: 350px;
    right: 0
  }
}
@media screen and (min-width:1px) and (max-width:767px) {
  .contact {
    text-align: left
  }
  .contact.c1 {
    padding: 30px 0 20px
  }
  .contact.c2 {
    padding: 30px 0
  }
  .contact h5 {
    max-width: 90%;
    margin: 0 auto 2%;
    padding: 0 0 5%;
    font-size: 150%
  }
  .contact h5 + p {
    margin: 0 auto 3%;
    padding: 0 0 0 5%;
    font-size: 110%;
    line-height: 1.3 !important
  }
  .contact ul {
    max-width: 95%
  }
  .contact.c1 ul::after {
    width: 180px;
    height: 280px;
    right: -10px;
    bottom: -20px
  }
  .contact.c2 ul::after {
    width: 180px;
    height: 280px;
    right: -10px;
    bottom: -30px
  }
}