@charset "UTF-8";
/* 変数定義 */
/*--------------------------
font-size
---------------------------*/
/*行間計算*/
/*--------------------------
content-width
---------------------------*/
img {
  display: block;
  width: 100%;
  height: auto;
}

a {
  opacity: 1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

a:hover {
  opacity: 0.7;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* ----------------------------------------
con-wrap , inner-con 
---------------------------------------- */
.con-wrap {
  padding-right: 40px;
  padding-left: 40px;
}
@media screen and (max-width: 975px) {
  .con-wrap {
    padding-right: 0px;
    padding-left: 0px;
  }
}

.con-wrap .inner-con {
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 975px) {
  .con-wrap .inner-con {
    width: 100%;
  }
}

/* ----------------------------------------
con-wrap , inner-con 
---------------------------------------- */
.js-count-wrap {
  position: relative;
}

.js-count-num {
  position: absolute;
  bottom: 80px;
  right: 390px;
  font-size: 64px;
  line-height: 1;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  font-family: "Cardo", serif;
  letter-spacing: -0.1em;
}
@media screen and (max-width: 975px) {
  .js-count-num {
    bottom: 34svw;
    right: 27svw;
    font-size: 17svw;
  }
}

/* ----------------------------------------
header
---------------------------------------- */
header {
  background-color: #fff;
}

.header__wrap {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 13px 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 975px) {
  .header__wrap {
    padding: 0;
  }
}

.header__logo {
  width: 212px;
  height: auto;
}
@media screen and (max-width: 975px) {
  .header__logo {
    width: 32svw;
    padding-top: 15px;
    padding-left: 15px;
  }
}

.header__logo img {
  width: 100%;
  height: auto;
}

.header__nav {
  color: #69604F;
  font-family: "Zen Old Mincho", serif;
  font-size: 20px;
  line-height: 40px;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  padding: 17px 0;
  margin-left: auto;
}
@media screen and (max-width: 975px) {
  .header__nav {
    display: none;
  }
}

.header__nav li {
  display: block;
}

.header__nav li a {
  display: block;
}

.header__btn {
  margin-left: 50px;
  width: 240px;
  height: auto;
}
@media screen and (max-width: 975px) {
  .header__btn {
    width: 43.5svw;
    margin-left: auto;
  }
}

.header__btn a {
  display: block;
  width: 100%;
  height: auto;
}

.header__nav--sp {
  display: none;
}
@media screen and (max-width: 975px) {
  .header__nav--sp {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
    padding: 0 5px;
  }
}

@media screen and (max-width: 975px) {
  .header__nav--sp li {
    display: block;
    border-top-right-radius: 18.5px;
    background-color: #DDD2BD;
    color: #69604F;
    font-family: "Zen Old Mincho", serif;
    text-align: center;
    font-size: 3.2svw;
    line-height: 2;
    padding-top: 5px;
  }
}

/* ----------------------------------------
mv
---------------------------------------- */
#mv {
  background-image: url(../img/mv-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.mv__wrap {
  padding-bottom: 30px;
}
@media screen and (max-width: 975px) {
  .mv__wrap {
    padding-bottom: 0px;
  }
}

.mv__con {
  max-width: 960px;
  width: 100%;
}

@media screen and (max-width: 975px) {
  .mv__con .js-count-num {
    bottom: 32svw;
    right: 31svw;
    font-size: 15svw;
  }
}

/* ----------------------------------------
cta
---------------------------------------- */
.cta__head {
  background-color: #002300;
}

.cta__head img {
  max-width: 1440px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.cta__wrap {
  background-image: url(../img/cta-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
}
@media screen and (max-width: 975px) {
  .cta__wrap {
    background-image: url(../img/cta-sp01.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
  }
}

@media screen and (max-width: 975px) {
  .is-flow .cta__wrap {
    background-image: url(../img/cta-sp02.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
  }
}

@media screen and (max-width: 975px) {
  .is-access .cta__wrap {
    background-image: url(../img/cta-sp03.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
  }
}

.cta__wrap {
  padding: 30px 0 70px;
}
@media screen and (max-width: 975px) {
  .cta__wrap {
    padding: 0;
  }
}

.cta__con {
  padding: 0 40px;
}
@media screen and (max-width: 975px) {
  .cta__con {
    padding: 0 0 2svw 0;
  }
}

.cta__con--img {
  max-width: 542.49px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
@media screen and (max-width: 975px) {
  .cta__con--img {
    width: 100%;
  }
}

.cta__btn {
  display: block;
  max-width: 600px;
  height: auto;
  margin: 24px auto 0;
}
.cta__text {
  display: block;
  max-width: 570px;
  height: auto;
  margin: 0 auto;
}
@media screen and (max-width: 975px) {
  .cta__text {
    margin-top: 3svw;
    width: 92svw;
  }
}

/* ----------------------------------------
mv
---------------------------------------- */
#worries {
  background-image: url(../img/worries-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.worries__wrap {
  padding: 60px 0 30px;
}
@media screen and (max-width: 975px) {
  .worries__wrap {
    padding: 0px;
  }
}

.worries__con {
  max-width: 960px;
  width: 100%;
}

/* ----------------------------------------
mv
---------------------------------------- */
#leave {
  background-image: url(../img/leave-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.leave__wrap {
  padding: 50px 0;
}
@media screen and (max-width: 975px) {
  .leave__wrap {
    padding: 0px;
  }
}

.leave__con {
  padding: 0 40px;
}
@media screen and (max-width: 975px) {
  .leave__con {
    padding: 0;
  }
}

.leave__con01 {
  max-width: 1026px;
  width: 100%;
  margin: 0 auto;
}

.leave__con02 {
  max-width: 960px;
  width: 100%;
  margin: 50px auto 0;
}

/* ----------------------------------------
mv
---------------------------------------- */
#reason {
  background-image: url(../img/reason-bg-pc.webp);
  background-repeat: repeat-y;
  background-size: cover;
  background-position: top center;
}
@media screen and (max-width: 975px) {
  #reason {
    background-image: url(../img/reason-bg-sp.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
  }
}

.reason__wrap {
  padding: 50px 0;
}
@media screen and (max-width: 975px) {
  .reason__wrap {
    padding: 0px;
  }
}

.reason__con {
  padding: 30px 40px 80px;
}
@media screen and (max-width: 975px) {
  .reason__con {
    padding: 8svw 0 12svw;
  }
}

.reason__con01,
.reason__con01-1,
.reason__con02,
.reason__con03,
.reason__con04,
.reason__con05 {
  max-width: 960px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 975px) {
  .reason__con01-1 {
    width: 90%;
    margin-bottom: 6svw;
  }
}

.reason__con01-1,
.reason__con02,
.reason__con03,
.reason__con04,
.reason__con05 {
  margin-top: 50px;
}
@media screen and (max-width: 975px) {
  .reason__con01-1,
  .reason__con02,
  .reason__con03,
  .reason__con04,
  .reason__con05 {
    margin-top: 10svw;
  }
}

.swiper {
  position: relative;
  z-index: 2;
}

.swiper-button-prev {
  left: 12px;
  background-image: url(../img/reason-prev.webp);
}

.swiper-button-next {
  right: 12px;
  background-image: url(../img/reason-next.webp);
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  top: 29%;
  width: 10svw;
  height: 10svw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 2;
}

/* ----------------------------------------
mv
---------------------------------------- */
#supervisor {
  background-image: url(../img/supervisor-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  padding: 0 40px;
}
@media screen and (max-width: 975px) {
  #supervisor {
    padding: 0;
  }
}

.supervisor__wrap {
  padding: 60px 0 70px;
}
@media screen and (max-width: 975px) {
  .supervisor__wrap {
    padding: 0px;
  }
}

.supervisor__con {
  max-width: 960px;
  width: 100%;
}

/* ----------------------------------------
mv
---------------------------------------- */
#price {
  background-color: #EBEEE0;
  padding: 0 40px;
}
@media screen and (max-width: 975px) {
  #price {
    padding: 0;
  }
}

.price__wrap {
  padding: 60px 0 70px;
}
@media screen and (max-width: 975px) {
  .price__wrap {
    padding: 0px;
  }
}

.price__con {
  max-width: 960px;
  width: 100%;
}

/* ----------------------------------------
flow
---------------------------------------- */
#flow {
  background-color: #A9B98D;
  padding: 64px 0 50px;
}
@media screen and (max-width: 975px) {
  #flow {
    padding: 0px;
  }
}

.flow__head {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

.flow__row {
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(50%, #fff), to(#fff));
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #fff 50%, #fff 100%);
}

.flow__row.is02 {
  background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(50%, #fff), to(#fff));
  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #fff 50%, #fff 100%);
}

.flow__con01,
.flow__con02 {
  background-color: #fff;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

.flow__con01 {
  border-top-left-radius: 30px;
  margin-top: 50px;
  position: relative;
}
@media screen and (max-width: 975px) {
  .flow__con01 {
    margin-top: 0;
  }
}

.flow__con02 {
  border-top-right-radius: 30px;
  margin-top: 30px;
}
@media screen and (max-width: 975px) {
  .flow__con02 {
    margin-top: 0;
  }
}

.flow__con {
  position: relative;
}

.flow-cta__btn {
  position: absolute;
  width: 400px;
  height: auto;
  display: block;
  bottom: 70px;
  left: 60px;
}
@media screen and (max-width: 975px) {
  .flow-cta__btn {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 75%;
    bottom: 260svw;
    left: 55%;
  }
}

.flow__con {
  max-width: 960px;
  width: 100%;
  margin-top: 50px;
}
@media screen and (max-width: 975px) {
  .flow__con {
    margin-top: 0;
  }
}

/* ----------------------------------------
faq
---------------------------------------- */
#faq {
  background-color: #EBEEE0;
  padding-bottom: 70px;
}

.faq__wrap {
  max-width: 1080px;
  width: 100%;
  padding: 0 40px;
  margin: 30px auto 0;
}
@media screen and (max-width: 975px) {
  .faq__wrap {
    padding: 0 10px;
  }
}

.faq__con:nth-child(n+2) {
  margin-top: 20px;
}
.faq__question {
  background-color: #fff;
  padding: 23px 55px 23px 40px;
  position: relative;
  font-family: "Zen Old Mincho", serif;
  color: #44361D;
  font-weight: bold;
  line-height: 1.2;
  font-size: 24px;
  cursor: pointer;
}
@media screen and (max-width: 975px) {
  .faq__question {
    font-size: 14px;
    padding: 10px 32px 10px 10px;
  }
}

.faq__question::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 5px;
  background: -webkit-gradient(linear, left bottom, left top, from(#A9B98D), to(#535934));
  background: linear-gradient(0deg, #A9B98D 0%, #535934 100%);
  top: 0;
  left: 0;
}

.faq__question::after {
  position: absolute;
  content: "";
  width: 13px; /* SVG の width と同じ */
  height: 7px;
  background: #A9B98D;
  -webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
  -webkit-transition: 0.3s;
  transition: 0.3s;
  top: 50%;
  right: 17px;
}
@media screen and (max-width: 975px) {
  .faq__question::after {
    width: 10px;
    height: 6px;
    right: 12px;
  }
}

.faq__question.open::after {
  -webkit-transform: translateY(-50%) rotate(0deg);
          transform: translateY(-50%) rotate(0deg);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.faq__answer {
  padding: 10px 55px 0 40px;
  display: none;
}
@media screen and (max-width: 975px) {
  .faq__answer {
    padding: 10px 10px 0;
  }
}

.faq__answer p {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 2;
  font-size: 18px;
  color: #44361D;
}
@media screen and (max-width: 975px) {
  .faq__answer p {
    font-size: 14px;
  }
}

/* ----------------------------------------
mv
---------------------------------------- */
#access {
  background: -webkit-gradient(linear, left top, left bottom, from(#A9B98D), to(#535934));
  background: linear-gradient(180deg, #A9B98D 0%, #535934 100%);
  padding: 0 40px;
}
@media screen and (max-width: 975px) {
  #access {
    padding: 0;
  }
}

.access__wrap {
  padding: 60px 0 70px;
}
@media screen and (max-width: 975px) {
  .access__wrap {
    padding: 0px;
  }
}

.access__con {
  max-width: 960px;
  width: 100%;
  position: relative;
}

.access__con iframe {
  position: absolute;
  aspect-ratio: 440/280;
  display: block;
  width: 440px;
  height: auto;
  top: 120px;
  left: 0;
}
@media screen and (max-width: 975px) {
  .access__con iframe {
    width: 88%;
    top: 26.4svw;
    left: 5.2svw;
  }
}

/* ----------------------------------------
mv
---------------------------------------- */
footer {
  background: -webkit-gradient(linear, left top, right top, from(#79A894), to(#002300));
  background: linear-gradient(90deg, #79A894 0%, #002300 100%);
  padding: 24px 0;
}
@media screen and (max-width: 975px) {
  footer {
    padding: 20px 0px;
  }
}

footer p {
  font-size: 16px;
  line-height: 1;
  color: #fff;
  text-align: center;
  font-family: "Zen Old Mincho", serif;
}
@media screen and (max-width: 975px) {
  footer p {
    font-size: 10px;
  }
}

/* ----------------------------------------

---------------------------------------- */
/* ----------------------------------------
last
---------------------------------------- */
.sp-flex, .sp-block {
  display: none !important;
}

@media screen and (max-width: 975px) {
  .sp-hide {
    display: none !important;
  }
  .sp-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .sp-block {
    display: block !important;
  }
}
/*# sourceMappingURL=style.css.map */