@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;
 padding: 5%;
 background: #fff
}
.early-header .inbox h3 {
 margin: 0 auto
}
.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: 7% 0 2%;
 background: #ccc
}
.trouble .trouble-list h2 {
 margin: 0 auto 1%;
 color: #222;
 font-size: 250%;
 font-weight: 700;
 line-height: 0;
 letter-spacing: .05em
}
.trouble .trouble-list ul {
 display: flex;
 flex-wrap: wrap
}
.trouble .trouble-list ul li {
 width: calc(33.3333% - 1%);
 margin: 0 1.5% 2% 0;
 box-sizing: border-box
}
.trouble .trouble-list ul li:nth-child(3n) {
 margin: 0
}
.trouble h3 {
 padding: 3% 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 4%;
 color: #222;
 font-size: 250%;
 font-weight: 900;
 line-height: 1.5
}
.trouble h4 em {
 color: #fd9749;
 font-style: normal;
 background: linear-gradient(transparent 50%, #ffd34c 50%)
}
.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-06ab6d2b-9a3e-430f-a1d1-09106dcf3e24); ?>/img/early/merit-back.png") 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 {
 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) 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 {
 position: absolute;
 right: 0;
 top: -50px
}
.flow .flown:nth-of-type(2) li:nth-child(1) .pic {
 position: absolute;
 right: 0;
 top: -90px
}
.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) 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-9e69afac-79ca-434c-be50-1f17b544edae); ?>/img/early/i-q.svg") 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-68a276ad-14a1-45f3-80db-038559077cb9); ?>/img/early/i-a.svg") 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-eeeba3ea-2352-4b11-b30c-ac6686e5c27e); ?>/img/early/i-q.svg") no-repeat center 15px/25% auto
 }
 .faq dl dd span::before {
  width: 10%;
  background: var(--wpr-bg-524a3684-9b4c-44ed-a774-af6c415c327c); ?>/img/early/i-a.svg") no-repeat center 20px/25% auto
 }
}
.bottom {
 width: 100%;
 padding: 4% 0;
 background: rgba(250, 223, 3, .1) var(--wpr-bg-734c6c5f-ad24-49e7-b6b1-451569a0b419); ?>/img/early/bottom-back.png") 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/css/<?php echo get_template_directory_uri(); ?>/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-a3df7ab0-a63a-421e-978e-293c830927d9); ?>/img/early/contact.png") 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-55778c61-76fd-43a4-92c5-96861de2e9e3); ?>/img/early/lady.png") 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-c693b034-2169-44dc-9e61-c6e35ac11a02); ?>/img/early/lady.png") 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
 }
}