@charset "UTF-8";

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

kv

----------------------------------------------------------------------------------------------------  */
.kv {
  position : relative;
  padding : 4rem;
  background : url(../img/bg-1.jpg) no-repeat center / cover;
}
.header-logo {
  line-height : 1;
  position : absolute;
  z-index : 10;
  top : 1.2rem;
  left : 8rem;
  width : 16rem;
}

.kv h1 {
  position : absolute;
  z-index : 10;
  bottom : -3rem;
  left : 6rem;
  width : 64rem;
}
.kv figure {
  width : 72%;
  margin-left : auto;
}
@media screen and (max-width: 768px) {
  .kv {
    padding : 1rem 0 2rem 0;
  }
  .header-logo {
    position : relative;
    top : 0;
    left : 0;
    width : 10rem;
    margin : 0 auto;
  }
  .kv h1 {
    position : relative;
    z-index : 10;
    bottom : auto;
    left : auto;
    overflow : hidden;
    width : 100%;
    margin : 1rem auto 2rem auto;
  }
  .kv h1 img {
    width : 100%;
    margin-left : 0;
  }
  .kv figure {
    width : 100%;
    margin-top : -4.5rem;
    padding : 0 1rem;
  }
}

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

cv

----------------------------------------------------------------------------------------------------  */
.cv {
  position : relative;
  display : flex;
  height : 13rem;
  color : #ffffff;
  background : var(--bg-grd);
}
/* ------------- 今なら ------------- */
.cv > div:nth-of-type(1) {
  font-size : 2.4rem;
  font-weight : 900;
  position : relative;
  display : flex;
  align-items : center;
  justify-content : flex-end;
  width : 15%;
  color : var(--blue-2);
  background : var(--yellow);
}
.cv > div:nth-of-type(1)::before {
  position : absolute;
  top : 0;
  right : -3.4rem;
  width : 0;
  height : 0;
  content : "";
  border-top : 6.5rem solid transparent;
  border-bottom : 6.5rem solid transparent;
  border-left : 3.5rem solid var(--yellow);
}

/* ------------- 超一流プロ野球選手〜 ------------- */
.cv > div:nth-of-type(2) {
  font-size : 2.1rem;
  display : flex;
  align-items : center;
  width : 45%;
  padding-left : 5.5rem;
}
.cv > div:nth-of-type(2) strong {
  color : var(--yellow);
}

/* ------------- 簡単30秒でお申し込み完了！ ------------- */
.cv > div:nth-of-type(3) {
  display : flex;
  align-items : center;
  width : 50%;
  padding-right : 0;
}
.cv > div:nth-of-type(3) a {
  position : relative;
  display : block;
}
/* btn */
.cv > div:nth-of-type(3) a > span:nth-child(1) {
  font-size : 1.6rem;
  font-weight : bold;
  position : absolute;
  z-index : 10;
  top : -3.7rem;
  left : calc(50% - 14rem);
  display : flex;
  align-items : center;
  justify-content : center;
  width : 28rem;
  height : 6.5rem;
  padding-bottom : 0.9rem;
  padding-left : 1.1rem;
  background : url(../img/fukidashi.png) no-repeat;
  background-size : 28rem 6.5rem;
}
.cv > div:nth-of-type(3) a > span:nth-child(2) {
  font-weight : bold;
  position : relative;
  display : flex;
  align-items : center;
  flex-direction : column;
  width : 44rem;
  padding : 2.4rem 0 1.5rem 0;
  color : #ffffff;
  border-radius : 10rem;
  background : var(--green);
  box-shadow : 0 0.1rem 0.9rem 0.05rem rgba(33, 62, 10, 0.4);
}
.cv > div:nth-of-type(3) a > span:nth-child(2) > span:nth-child(2) {
  font-size : 2.3rem;
}
.cv > div:nth-of-type(3) a > span:nth-child(2) i {
  font-size : 2.4rem;
  position : absolute;
  top : 50%;
  right : 2.5rem;
  transform : translate(0, -50%);
}
@media screen and (max-width: 768px) {
  .cv {
    flex-direction : column;
    height : auto;
    padding-bottom : 2rem;
  }
  /* ------------- 今なら ------------- */
  .cv > div:nth-of-type(1) {
    justify-content : center;
    width : 100%;
    padding : 0.5rem 0 0.6rem 0;
  }
  .cv > div:nth-of-type(1)::before {
    display : none;
  }

  /* ------------- 超一流プロ野球選手〜 ------------- */
  .cv > div:nth-of-type(2) {
    font-size : 1.8rem;
    line-height : 1.6;
    justify-content : center;
    width : 100%;
    margin-bottom : 3rem;
    padding : 1.5rem 0;
    padding-left : 0;
    text-align : center;
  }

  /* ------------- 簡単30秒でお申し込み完了！ ------------- */
  .cv > div:nth-of-type(3) {
    justify-content : center;
    width : 100%;
    padding-right : 0;
  }
  .cv > div:nth-of-type(3) a {
    position : relative;
  }
  /* btn */
  .cv > div:nth-of-type(3) a > span:nth-child(2) {
    width : 36rem;
  }
  .cv > div:nth-of-type(3) a > span:nth-child(2) > span:nth-child(1) {
    font-size : 1.3rem;
  }
  .cv > div:nth-of-type(3) a > span:nth-child(2) > span:nth-child(2) {
    font-size : 2.2rem;
  }
  .cv > div:nth-of-type(3) a > span:nth-child(2) i {
    font-size : 2rem;
    right : 1.8rem;
  }
}

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

about

----------------------------------------------------------------------------------------------------  */
/* ------------- 夢道場はあなたの夢を叶えます ------------- */
.about .wrap-1 {
  padding : 10rem 0 5rem 0;
}
.about .wrap-1 h2 {
  color : var(--blue-1);
}
.about .adjust {
  font-size : 3.2rem;
  display : block;
}
.about .wrap-1 > div {
  position : relative;
}
.about .wrap-1 p {
  position : absolute;
  right : 0;
  bottom : 7rem;
  width : 42%;
}

/* ------------- このような目的をお持ちの方にご利用頂いております ------------- */
.about .wrap-2 {
  padding : 6rem 0;
  background : var(--bg-blue);
}
.about .wrap-2 h3 {
  font-size : 2.8rem;
  font-weight : normal;
  margin-bottom : 3rem;
  text-align : center;
}
.about .wrap-2 ul {
  display : flex;
  justify-content : space-between;
  padding : 3rem 3rem 6rem 3rem;
  border-radius : 2rem;
  background : #ffffff;
}
.about .wrap-2 ul li {
  width : 30%;
}
.about .wrap-2 figure {
  position : relative;
}
.about .wrap-2 figure img {
  border-radius : 2rem;
}
.about .wrap-2 figure figcaption {
  line-height : 1.3;
  position : absolute;
  right : -2rem;
  bottom : -4rem;
  display : flex;
  align-items : center;
  justify-content : center;
  width : 12rem;
  height : 12rem;
  color : #ffffff;
}
.about .wrap-2 figure figcaption::before {
  position : absolute;
  z-index : 0;
  top : 0;
  left : 0;
  width : 100%;
  height : 100%;
  content : "";
  opacity : 0.8;
  border-radius : 50%;
  background : var(--bg-grd);
}
.about .wrap-2 figure figcaption span {
  position : relative;
  z-index : 10;
  text-align : center;
}
@media screen and (max-width: 768px) {
  /* ------------- 夢道場はあなたの夢を叶えます ------------- */
  .about .wrap-1 {
    padding : 6rem 0 3rem 0;
  }
  .about .wrap-1 h2 {
    color : var(--blue-1);
  }
  .about .adjust {
    font-size : 3.2rem;
    display : block;
  }
  .about .wrap-1 > div {
    position : relative;
  }
  .about .wrap-1 p {
    position : relative;
    right : auto;
    bottom : auto;
    width : 100%;
    margin-top : 2rem;
    padding : 0 3rem;
  }

  /* ------------- このような目的をお持ちの方にご利用頂いております ------------- */
  .about .wrap-2 h3 {
    font-size : 2.2rem;
    font-weight : normal;
    margin-bottom : 3rem;
    text-align : center;
  }
  .about .wrap-2 ul {
    display : block;
    width : calc(100% - 6rem);
    margin : 0 auto;
  }
  .about .wrap-2 ul li {
    width : 100%;
  }
  .about .wrap-2 ul li:not(:last-child) {
    margin-bottom : 5rem;
  }
  .about .wrap-2 figure figcaption {
    line-height : 1.3;
    width : 11.5rem;
    height : 11.5rem;
  }
}

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

point

----------------------------------------------------------------------------------------------------  */
.point {
  background : var(--blue-1);
}
.point .jp {
  display : flex;
  align-items : center;
  flex-direction : column;
}
.point .adjust {
  font-size : 3.2rem;
}

/* ------------- num ------------- */
.point .num {
  font-weight : 300;
  line-height : 1;
  position : absolute;
  top : 2rem;
  display : flex;
  align-items : center;
  flex-direction : column;
}
.point .num i:nth-child(1) {
  padding-bottom : 0.5rem;
  border-bottom : solid 0.12rem var(--grey);
}
.point .num i:nth-child(2) {
  font-size : 4.4rem;
  font-weight : 100;
}
.point ul li:nth-child(odd) .num {
  left : 3rem;
}
.point ul li:nth-child(even) .num {
  right : 3rem;
}

/* ------------- ul ------------- */
.point ul li {
  position : relative;
  border-radius : 2rem;
  background : #ffffff;
}
.point ul li:nth-child(odd) {
  padding : 3rem 6rem 3rem 10rem;
}
.point ul li:nth-child(even) {
  padding : 3rem 10rem 3rem 6rem;
}
.point ul li:not(:last-child) {
  margin-bottom : 3rem;
}
.point ul li .wrap {
  display : flex;
  align-items : center;
}
.point ul li:nth-child(even) .wrap {
  flex-direction : row-reverse;
}
.point ul li .wrap > figure {
  width : 30%;
}
.point ul li .wrap > div {
  width : 70%;
}
.point ul li:nth-child(odd) .wrap > div {
  padding-left : 3rem;
}
.point ul li:nth-child(even) .wrap > div {
  padding-right : 3rem;
}
.point ul li h3 {
  font-size : 2.2rem;
  font-weight : normal;
  margin-bottom : 1.5rem;
}
.point ul li h3 span {
  font-size : 1.5rem;
  display : block;
}
@media screen and (max-width: 768px) {
  .point .adjust {
    font-size : 2.4rem;
  }

  /* ------------- num ------------- */
  .point .num {
    top : 2rem;
  }
  .point .num i:nth-child(2) {
    font-size : 4rem;
  }
  .point ul li:nth-child(odd) .num {
    left : 2rem;
  }
  .point ul li:nth-child(even) .num {
    right : auto;
    left : 2rem;
  }

  /* ------------- ul ------------- */
  .point ul li:nth-child(odd) {
    padding : 4.5rem 3rem 3rem 3rem;
  }
  .point ul li:nth-child(even) {
    padding : 4.5rem 3rem 3rem 3rem;
  }
  .point ul li:not(:last-child) {
    margin-bottom : 3rem;
  }
  .point ul li .wrap {
    display : block;
  }
  .point ul li .wrap > figure {
    width : 100%;
    margin-bottom : 1rem;
  }
  .point ul li .wrap > div {
    width : 100%;
  }
  .point ul li:nth-child(odd) .wrap > div {
    padding-left : 0;
  }
  .point ul li:nth-child(even) .wrap > div {
    padding-right : 0;
  }
  .point ul li h3 {
    font-size : 2rem;
  }
}

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

result

----------------------------------------------------------------------------------------------------  */
.result .wrap {
  position : relative;
}

/* ------------- table ------------- */
.result table {
  width : 100%;
  border-spacing : 0.3rem;
  border-collapse : separate;
}
.result table th {
  font-weight : normal;
  color : #ffffff;
  background : var(--blue-2);
}
.result table th.void {
  background : transparent;
}
.result table th,
.result table td {
  font-size : 1.2rem;
  line-height : 1;
  padding : 1rem 0 1.1rem 0;
  text-align : center;
  vertical-align : middle;
}
.result table thead th {
  border-radius : 0.6rem 0.6rem 0 0;
}
.result table tbody th {
  border-radius : 0.6rem 0 0 0.6rem;
}
.result table td {
  background : #ffffff;
}
.result table th.gr {
  background : var(--green);
}
.result table tbody tr > td:last-of-type {
  font-size : 1.6rem;
  color : var(--blue-2);
}
.result p {
  font-size : 1.3rem 1.3rem 1.5rem 1.3rem;
  line-height : 1.5;
  margin-top : 1rem;
  padding : 1.5rem;
  background : #ffffff;
}

/* ------------- slide ------------- */
.swiper {
  padding : 0 1rem !important;
}
.swiper-wrapper {
  padding : 2rem 0 !important;
}
.swiper-slide {
  padding : 2rem;
  border-radius : 2rem;
  background : var(--bg-blue);
  box-shadow : 0 0 0.8rem rgba(136, 169, 197, 0.5);
}
.swiper-slide figure {
  position : relative;
  margin-bottom : 2.5rem;
}
.swiper-slide figure figcaption {
  line-height : 1;
  position : absolute;
  right : 0;
  bottom : -1rem;
  padding : 0.8rem 1.5rem 1rem 1.5rem;
  color : #ffffff;
  background : var(--blue-2);
}
.swiper-slide figure figcaption i {
  font-size : 1.2rem;
}
.swiper-button-prev,
.swiper-button-next {
  position : absolute;
  z-index : 999999;
  top : calc(50% - 1.25rem) !important;
  width : 2.5rem !important;
  height : 2.5rem !important;
  transition : all 0.3s;
}
.swiper-button-prev {
  left : -3rem !important;
  background : url(../img/prev.png) no-repeat !important;
  background-size : 2.5rem !important;
}
.swiper-button-next {
  right : -3rem !important;
  background : url(../img/next.png) no-repeat !important;
  background-size : 2.5rem !important;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  cursor : pointer;
  opacity : 0.5;
}
.swiper-pagination-bullet {
  width : 8px;
  height : 8px;
  opacity : 1;
  border-radius : 100%;
  background : #000000;
}
.swiper-pagination-bullet-active {
  background : #007aff;
}
@media screen and (max-width: 768px) {
  .swiper {
    padding : 0 1rem !important;
  }
  .swiper-button-prev {
    left : 0 !important;
  }
  .swiper-button-next {
    right : 0 !important;
  }
}

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

course

----------------------------------------------------------------------------------------------------  */
.course {
  position : relative;
  padding : 10rem 0 0 0;
  background : var(--bg-blue);
}
.course .jp {
  display : flex;
  align-items : center;
  flex-direction : column;
}
.course .adjust {
  font-size : 3.2rem;
}
.course h2 strong {
  font-size : 4.8rem;
}

/* ------------- ul ------------- */
.course ul {
  display : flex;
  flex-wrap : wrap;
  justify-content : space-between;
}
.course ul li {
  width : 23.5%;
  padding : 2rem;
  border-radius : 1.5rem;
  background : #ffffff;
  box-shadow : 0 0 0.8rem rgba(136, 169, 197, 0.5);
}
.course ul li:nth-child(n + 5) {
  margin-top : 2.5rem;
}
.course ul figure {
  width : 70%;
  margin : 0 auto;
}
.course dl dt {
  font-size : 1.5rem;
  margin : 1.5rem 0 1rem 0;
  text-align : center;
  white-space : nowrap;
}
.course dl dd {
  font-size : 1.3rem;
}

/* ------------- wrap ------------- */
.course .wrap {
  padding : 14rem 0 3rem 0;
  color : #ffffff;
  background : url(../img/arrow.png) no-repeat center top -0.1rem;
  background-color : var(--blue-1);
  background-size : 100% auto;
}
.course .wrap > div {
  font-size : 4.8rem;
  line-height : 1;
  display : flex;
  align-items : center;
  flex-direction : column;
}
.course .wrap > div > span:nth-child(2) {
  font-weight : 900;
  margin-top : 0.6rem;
}
.course .wrap > div > span:nth-child(2) strong {
  font-size : 6.8rem;
  font-weight : 900;
  color : var(--yellow);
}
.course .wrap > div > span:nth-child(2) span {
  font-size : 1.4rem;
  font-weight : normal;
  display : block;
  margin-top : 1rem;
  margin-right : -0.5rem;
  text-align : right;
}
@media screen and (max-width: 768px) {
  .course {
    padding : 6rem 0 0 0;
  }
  .course .adjust {
    font-size : 2.4rem;
  }
  .course h2 strong {
    font-size : 3.6rem;
    display : block;
    margin-top : -0.5rem;
  }

  /* ------------- ul ------------- */
  .course ul {
    width : calc(100% - 6rem);
    margin : 0 auto;
    padding-bottom : 3rem;
  }
  .course ul li {
    width : 100%;
  }
  .course ul li:not(:last-child) {
    margin-bottom : 3rem;
  }
  .course ul li:nth-child(n + 5) {
    margin-top : 0;
  }
  .course ul figure {
    width : 60%;
  }
  .course dl dt {
    font-size : 1.9rem;
    line-height : 1.4;
    margin : 1.5rem 0 1.5rem 0;
    white-space : normal;
  }
  .course dl dd {
    font-size : 1.4rem;
  }

  /* ------------- wrap ------------- */
  .course .wrap {
    padding : 6rem 0 2rem 0;
  }
  .course .wrap > div {
    font-size : 3rem;
  }
  .course .wrap > div > span:nth-child(2) strong {
    font-size : 4.8rem;
  }
}

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

howto

----------------------------------------------------------------------------------------------------  */
.howto {
  padding : 10rem 0;
  background : var(--bg-blue);
}
.howto .jp strong {
  font-size : 4.8rem;
}

/* ------------- ul ------------- */
.howto ul {
  display : flex;
  justify-content : space-between;
  padding : 6rem 3rem 3rem 3rem;
  border-radius : 2rem;
  background : #ffffff;
}
.howto ul li {
  position : relative;
  width : 22%;
}
.howto ul li div {
  font-size : 1.4rem;
  margin : 1.5rem 0 1rem 0;
  text-align : center;
}

/* ------------- step ------------- */
.step {
  line-height : 1;
  position : absolute;
  top : -3rem;
  right : -2rem;
  display : flex;
  align-items : center;
  flex-direction : column;
  justify-content : center;
  width : 8rem;
  height : 8rem;
  color : #ffffff;
  border-radius : 50%;
  background : var(--bg-grd);
}
.step > span:nth-child(1) {
  font-weight : 300;
}
.step > span:nth-child(2) {
  font-size : 3.6rem;
  font-weight : 100;
  margin-top : -0.15rem;
  padding-left : 0.15rem;
}
@media screen and (max-width: 768px) {
  .howto {
    padding : 6rem 3rem;
  }
  .howto .jp strong {
    font-size : 4rem;
    display : block;
  }

  /* ------------- step ------------- */
  .step {
    top : -2rem;
  }

  /* ------------- ul ------------- */
  .howto ul {
    display : block;
    justify-content : space-between;
    padding : 3rem 3rem 3rem 3rem;
  }
  .howto ul li {
    position : relative;
    width : 100%;
  }
  .howto ul li:not(:last-child) {
    margin-bottom : 3.5rem;
  }
  .howto ul li div {
    font-size : 1.9rem;
  }
}

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

media

----------------------------------------------------------------------------------------------------  */
/* ------------- ul ------------- */
.media ul {
  display : flex;
  flex-wrap : wrap;
  justify-content : space-between;
}
.media ul li {
  display : flex;
  /* width: 48.5%; */
  width : 100%;
  padding : 1.5rem;
  border-radius : 1.5rem;
  box-shadow : 0 0 0.8rem rgba(0, 0, 0, 0.1);
}
.media ul li:nth-child(n + 3) {
  margin-top : 3%;
}
.media ul li > figure {
  width : 35%;
}
.media ul li > figure img {
  border-radius : 1.2rem;
}
.media ul li > dl {
  width : 65%;
  padding-left : 1.5rem;
}
.media ul li > dl dt {
  font-size : 1.5rem;
  font-weight : bold;
  line-height : 1.4;
  display : flex;
  flex-direction : column;
}
.media ul li > dl dt span {
  font-size : 1.2rem;
  font-weight : normal;
  padding-bottom : 0.15rem;
  padding-left : 0.8rem;
  border-left : solid 0.15rem var(--blue-1);
}
.media ul li > dl dd {
  margin-top : 0.6rem;
  padding-left : 0.8rem;
}
@media screen and (max-width: 768px) {
  /* ------------- ul ------------- */
  .media ul {
    display : block;
  }
  .media ul li {
    display : block;
    width : 100%;
  }
  .media ul li:not(:last-child) {
    margin-bottom : 3rem;
  }
  .media ul li:nth-child(n + 3) {
    margin-top : 0;
  }
  .media ul li > figure {
    width : 100%;
    margin-bottom : 1.5rem;
  }
  .media ul li > figure img {
    border-radius : 1.2rem;
  }
  .media ul li > dl {
    width : 100%;
    padding-left : 0;
  }
  .media ul li > dl dt {
    font-size : 1.6rem;
  }
  .media ul li > dl dt span {
    font-size : 1.4rem;
  }
}

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

instructor

----------------------------------------------------------------------------------------------------  */
.instructor {
  background : var(--bg-blue);
}
.instructor figure img {
  border-radius : 1.5rem;
}

.name {
  font-size : 1.8rem;
  margin-bottom : 2rem;
  padding-left : 1.2rem;
  border-left : solid 0.2rem var(--blue-1);
}
.name span {
  font-size : 1.2rem;
  display : block;
}

/* ------------- dl ------------- */
.instructor dl dt {
  font-size : 1.8rem;
  display : flex;
  flex-direction : column;
  padding-bottom : 0.2rem;
  padding-left : 1.2rem;
  border-left : solid 0.2rem var(--blue-1);
}
.instructor dl dt span {
  font-size : 1.2rem;
  line-height : 1;
  margin-top : 0.2rem;
  padding-bottom : 0.3rem;
}
.instructor dl dd {
  font-size : 1.2rem;
  padding : 1.2rem 2rem 0 1.2rem;
}
.instructor dl dd:not(:last-of-type) {
  margin-bottom : 2rem;
}

/* ------------- sns ------------- */
.sns {
  display : flex;
  align-items : center;
  margin-top : 1.5rem;
}
.sns li {
  width : 3rem;
}

/* ------------- ul ------------- */
.instructor > ul {
  display : flex;
  flex-wrap : wrap;
  justify-content : space-between;
}
.instructor > ul > li {
  display : flex;
  width : 49%;
  padding : 2rem;
  border-radius : 2rem;
  background : #ffffff;
  box-shadow : 0 0 0.8rem rgba(0, 0, 0, 0.1);
}
.instructor > ul > li:nth-child(n + 3) {
  margin-top : 2%;
}
.instructor > ul > li > figure {
  width : 45%;
}
.instructor > ul > li > div {
  width : 55%;
  padding-left : 1.5rem;
}
@media screen and (max-width: 768px) {
  .name {
    font-size : 2.2rem;
  }
  .name span {
    font-size : 1.5rem;
  }

  /* ------------- dl ------------- */
  .instructor dl dt {
    font-size : 2.2rem;
  }
  .instructor dl dt span {
    font-size : 1.2rem;
    line-height : 1;
    margin-top : 0.2rem;
    padding-bottom : 0.3rem;
  }
  .instructor dl dd {
    font-size : 1.5rem;
  }

  /* ------------- ul ------------- */
  .instructor > ul {
    display : block;
  }
  .instructor > ul > li {
    display : block;
    width : 100%;
  }
  .instructor > ul > li:nth-child(n + 3) {
    margin-top : 0;
  }
  .instructor > ul > li:nth-child(n + 2) {
    margin-top : 3rem;
  }
  .instructor > ul > li > figure {
    width : 100%;
    margin-bottom : 1.5rem;
  }
  .instructor > ul > li > div {
    width : 100%;
    padding-left : 0;
  }
}

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

faq

----------------------------------------------------------------------------------------------------  */
.faq {
  position : relative;
}
.faq dl dt {
  margin-bottom : 2rem;
}
.faq-ttl {
  font-size : 1.6rem;
  position : relative;
  align-items : center;
  padding : 1.8rem 6rem 1.8rem 1.8rem;
  transition : all 0.3s;
  border-radius : 0.8rem;
  background : var(--bg-blue);
}
.faq-ttl:hover {
  cursor : pointer;
  opacity : 0.5;
}
.faq-ttl i {
  position : absolute;
  top : calc(50% - 2rem);
  right : 2rem;
  width : 4rem;
  height : 4rem;
}
.faq-ttl i::before,
.faq-ttl i::after {
  position : absolute;
  top : 50%;
  left : 50%;
  content : "";
  transition : all 0.3s;
  transform : translate(-50%, -50%);
  background : #bfcbcf;
}
.faq-ttl i::before {
  width : 2.5rem;
  height : 0.2rem;
}
.faq-ttl i::after {
  width : 0.2rem;
  height : 2.5rem;
}
.faq-ttl.open i::after {
  transform : translate(-50%, -50%) rotate(90deg);
}
.faq-ttl,
.faq-content {
  display : flex;
  justify-content : space-between;
}
.faq-ttl > span:nth-child(1),
.faq-content > span:nth-child(1) {
  font-size : 2.2rem;
  display : flex;
  align-items : center;
  justify-content : center;
  width : 5rem;
  height : 5rem;
  padding-bottom : 0.25rem;
  padding-left : 0.15rem;
  color : #ffffff;
  border-radius : 0.6rem;
  background : var(--blue-2);
}
.faq-content > span:nth-child(1) {
  background : var(--blue-1);
}
.faq-ttl > span:nth-child(2),
.faq-content > span:nth-child(2) {
  width : calc(100% - 7rem);
}
.faq-content {
  padding : 0 1.8rem 2.5rem 1.8rem;
}
@media screen and (max-width: 768px) {
  .faq-ttl i {
    top : calc(50% - 1.5rem);
    right : 1rem;
    width : 3rem;
    height : 3rem;
  }
  .faq-ttl i::before {
    width : 2rem;
    height : 0.2rem;
  }
  .faq-ttl i::after {
    width : 0.2rem;
    height : 2rem;
  }
}

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

contact

----------------------------------------------------------------------------------------------------  */
.contact {
  padding : 6rem 0 4rem 0;
  background : var(--bg-grd);
}
.contact .wrap {
  display : flex;
  align-items : center;
  justify-content : center;
}
.contact h2 {
  font-weight : normal;
  display : flex;
  align-items : center;
  flex-direction : column;
  margin-right : 5rem;
  text-align : center;
  color : #ffffff;
}
.contact h2 .jp {
  font-size : 2.8rem;
}
.contact a {
  position : relative;
  display : block;
}

/* ------------- btn ------------- */
.contact a > span:nth-child(1) {
  font-size : 1.6rem;
  font-weight : bold;
  position : absolute;
  z-index : 10;
  top : -3.7rem;
  left : calc(50% - 14rem);
  display : flex;
  align-items : center;
  justify-content : center;
  width : 28rem;
  height : 6.5rem;
  padding-bottom : 0.9rem;
  padding-left : 1.1rem;
  background : url(../img/fukidashi.png) no-repeat;
  background-size : 28rem 6.5rem;
}
.contact a > span:nth-child(2) {
  font-size : 2.2rem;
  font-weight : bold;
  position : relative;
  display : flex;
  align-items : center;
  flex-direction : column;
  width : 44rem;
  padding : 3.4rem 0 2.5rem 0;
  color : #ffffff;
  border-radius : 10rem;
  background : #0db4d2;
  box-shadow : 0 0.1rem 0.9rem 0.05rem rgba(33, 62, 10, 0.4);
}
.contact a > span:nth-child(2) i {
  font-size : 2.4rem;
  position : absolute;
  top : 50%;
  right : 2.5rem;
  transform : translate(0, -50%);
}
@media screen and (max-width: 768px) {
  .contact {
    padding : 4rem 0;
  }
  .contact .wrap {
    flex-direction : column;
  }
  .contact h2 {
    margin-right : 0;
    margin-bottom : 5rem;
  }
  .contact h2 .jp {
    font-size : 2.8rem;
  }
  .contact a {
    position : relative;
    display : block;
  }

  /* ------------- btn ------------- */
  .contact a > span:nth-child(2) {
    width : 33rem;
    padding : 3rem 0 2.2rem 0;
  }
  .contact a > span:nth-child(2) i {
    right : 1.5rem;
  }
}

.pc_swiper {
  width : 33.3333%;
  /* margin: 0 9rem; */
}
.pc_slide1 {
  margin-right : 5%;
  margin-left : 45%;
}
.pc_slide2 {
  margin-right : 45%;
  margin-left : 5%;
}
.media ul a {
  width : 48.5%;
}
.media ul a:nth-child(n + 3) {
  margin-top : 3%;
}

@media screen and (max-width: 768px) {
  .media ul li {
    margin-bottom : 3rem;
  }
}

@media screen and (min-width: 768px) {
  #op_btn {
    font-size : 15px;
    line-height : 1;
    position : fixed !important;
    z-index : 9999;
    bottom : 1rem;
    left : 1rem;
    margin : 0;
  }

  #op_btn a {
    font-weight : bold;
    line-height : 50px;
    display : block;
    width : 180px;
    transition : all 0.4s;
    text-decoration : none;
    -ms-writing-mode : tb-rl;
    color : #ffffff;

        writing-mode : vertical-rl;
  }
}

@media screen and (max-width: 768px) {
  #op_btn {
    font-size : 15px;
    line-height : 1;
    position : fixed;
    z-index : 99;
    bottom : 0;
    left : 50%;
    width : 100%;
    transform : translateX(-50%);
    text-align : center;

    writing-mode : unset;
  }

  #op_btn a {
    display : block;
    /* height: 60px; */
    width : 100%;
    padding : 0 0;
    text-decoration : none;
    color : #ffffff;
    background : var(--bg-grd);

    writing-mode : initial;
  }
  #op_btn img {
    width : 100%;
    padding : 0.5rem 0.5rem 0.5rem 0;
  }
}