@charset "UTF-8";
/* CSS Document */
/* --------------------------------------------------

初期設定

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

hover

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

スマホサイズのフォント指定

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

breakpoint

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

course

-------------------------------------------------- */
.course-ttl-block .course-ttl .ttl {
  font-size: 3.8rem;
  font-weight: bold;
  margin-bottom: 1.6rem;
}
@media only screen and (max-width: 768px) {
  .course-ttl-block .course-ttl .ttl {
    font-size: 3rem;
  }
}
.course-ttl-block .course-ttl .ttl span {
  font-size: 1.3rem;
  font-weight: normal;
  display: block;
  margin-top: 1.6rem;
}
@media only screen and (max-width: 768px) {
  .course-ttl-block .course-ttl .ttl span {
    margin-top: 0.8rem;
  }
}

.course-heading {
  display: flex;
}
@media only screen and (max-width: 1100px) {
  .course-heading {
    display: block;
  }
}
.course-heading .ph-part {
  width: 63%;
}
@media only screen and (max-width: 1100px) {
  .course-heading .ph-part {
    width: 100%;
  }
}
.course-heading .ph-part img {
  width: 100%;
}
.course-heading .txt-part {
  flex: 1;
  padding-left: 6rem;
}
@media only screen and (max-width: 1100px) {
  .course-heading .txt-part {
    flex: none;
    padding-left: 0;
    margin-top: 5%;
  }
}

.course-toc {
  width: 74%;
  margin: 4em auto;
  background-color: #F5FAF9;
  padding: 2em 11%;
}
@media only screen and (max-width: 1100px) {
  .course-toc {
    width: 100%;
    padding: 2em 1em;
    margin: 2em auto;
  }
}
.course-toc h4 {
  font-size: 3rem;
  font-weight: 500;
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 1100px) {
  .course-toc h4 {
    font-size: 1.8rem;
  }
}
.course-toc h4:before, .course-toc h4:after {
  position: relative;
  top: 0.7em;
  display: block;
  font-size: 2rem;
}
@media only screen and (max-width: 1100px) {
  .course-toc h4:before, .course-toc h4:after {
    font-size: 1.8rem;
    top: 0;
  }
}
.course-toc h4:before {
  content: "＼";
  margin-right: 1em;
}
.course-toc h4:after {
  content: "／";
  margin-left: 1em;
}
.course-toc .toc-content {
  position: relative;
}
.course-toc .toc-content ul {
  margin-top: 2em;
  max-height: 220px;
  overflow: hidden;
  transition: all 0.5s ease-out;
}
@media only screen and (max-width: 1100px) {
  .course-toc .toc-content ul {
    max-height: 15rem;
    margin-top: 1em;
  }
}
.course-toc .toc-content ul.open {
  max-height: 600px;
}
.course-toc .toc-content ul li {
  border-bottom: 1px solid #D6D6D6;
  padding: 1em;
}
.course-toc .toc-content ul li dl {
  display: flex;
}
.course-toc .toc-content ul li dl dt {
  background-color: #DAEDEA;
  width: 3.6rem;
  height: 3.6rem;
  line-height: 3.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.course-toc .toc-content ul li dl dd {
  flex: 1;
  font-size: 1.8rem;
  padding-left: 1.6rem;
}
@media only screen and (max-width: 1100px) {
  .course-toc .toc-content ul li dl dd {
    font-size: 1.6rem;
    padding-left: 1em;
  }
}
.course-toc .toc-content ul li dl dd a {
  text-decoration: underline;
}
.course-toc .toc-content .btn-toggle {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1em;
  margin-top: 1em;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.6rem;
  color: #323131;
  position: relative;
}
.course-toc .toc-content .btn-toggle:after {
  content: "+";
  display: inline-block;
  margin-left: 0.5em;
  font-size: 2rem;
  font-weight: normal;
  line-height: 1;
  transition: transform 0.3s ease;
}
.course-toc .toc-content .btn-toggle.open-search:after {
  content: "-";
}

.info-block {
  margin-top: 3rem;
}
.info-block .btn-block {
  text-align: center;
  gap: 1em;
}
@media only screen and (max-width: 1100px) {
  .info-block .btn-block {
    display: flex;
    gap: 0;
  }
}
.info-block .btn-block p {
  margin-bottom: 0;
}
@media only screen and (max-width: 1100px) {
  .info-block .btn-block p {
    order: 2;
    margin: 0;
  }
}
@media only screen and (max-width: 1100px) {
  .info-block .btn-block p + p {
    order: 1;
  }
}
@media only screen and (max-width: 1100px) {
  .info-block .btn-block p a {
    width: 100%;
  }
}
.info-block .btn-base.ac-p {
  position: relative;
  transition: all 0.3s ease;
}
.info-block .btn-base.ac-p span {
  display: inline-block;
  margin-left: 0.5em;
  transition: transform 0.3s ease;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
}
.info-block .btn-base.ac-p span:after {
  content: "+";
  font-size: 1.5em;
  display: inline-block;
  transition: transform 0.3s ease;
}
.info-block .btn-base.ac-p.active span:after {
  content: "−";
}
.info-block .btn-base.ac-p:hover {
  background: #D8EBE9;
}
.info-block .btn-base.detail {
  background: #323131;
  color: #fff;
}
.info-block .ac-c {
  text-align: left;
  display: none;
}
.info-block .ac-c dl dt {
  font-weight: bold;
  font-size: 2.4rem;
}
.info-block .ac-c dl dd {
  margin-top: 0.5em;
}

.course-contents {
  background-color: #F5F9F8;
  padding-block: 10rem;
}
@media only screen and (max-width: 1100px) {
  .course-contents {
    padding-block: 1em;
  }
}
.course-contents .inner {
  position: relative;
}
.course-contents .inner:after {
  display: block;
  height: 100%;
  content: "";
  border-left: 1px dashed #323131;
  position: absolute;
  top: 0;
  left: 4.5rem;
  z-index: 0;
}
.course-contents h4 {
  background-color: #87C2BC;
  font-size: 2.4rem;
  text-align: center;
  padding: 0.9em 0;
  margin-block: 3em 0;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 1100px) {
  .course-contents h4 {
    font-size: 1.8rem;
    padding: 0.9em 0;
    margin-block: 6% 0;
  }
}
.course-contents-card {
  background-color: #fff;
  margin-top: 2em;
  position: relative;
  z-index: 1;
}
.course-contents-card .ttl {
  display: flex;
  align-items: center;
}
.course-contents-card .ttl dt,
.course-contents-card .ttl span {
  width: 5rem;
  height: 5rem;
  line-height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #D8EBE9;
  color: #323131;
  font-size: 2.2rem;
  font-weight: 700;
}
@media only screen and (max-width: 1100px) {
  .course-contents-card .ttl dt,
  .course-contents-card .ttl span {
    font-size: 1.8rem;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
  }
}
.course-contents-card .ttl dd {
  padding-left: 1em;
}
.course-contents-card.card-s {
  padding: 2rem;
}
.course-contents-card.card-s .ttl dt {
  width: auto;
  height: auto;
  padding: 0.1em 1em;
}
.course-contents-card.card-s .ttl dd {
  font-size: 2.2rem;
  font-weight: 700;
}
@media only screen and (max-width: 1100px) {
  .course-contents-card.card-s .ttl dd {
    font-size: 1.8rem;
  }
}
.course-contents-card.card-s h5 {
  font-size: 3rem;
}
@media only screen and (max-width: 1100px) {
  .course-contents-card.card-s h5 {
    font-size: 2.1rem;
  }
}
.course-contents-card.card-l {
  padding: 5rem;
}
@media only screen and (max-width: 1100px) {
  .course-contents-card.card-l {
    padding: 5%;
  }
}
.course-contents-card.card-l .ttl {
  font-size: 3rem;
  font-weight: 700;
}
@media only screen and (max-width: 1100px) {
  .course-contents-card.card-l .ttl {
    font-size: 2.1rem;
  }
}
.course-contents-card.card-l .ttl span {
  margin-right: 1em;
}
.course-contents-card.card-l .list-icon {
  margin-top: 1em;
}
.course-contents-card.card-l dl dt {
  font-size: 2.4rem;
  font-weight: 700;
}
@media only screen and (max-width: 1100px) {
  .course-contents-card.card-l dl dt {
    font-size: 1.9rem;
  }
}
.course-contents-card.card-l dl dd {
  font-size: 1.8rem;
}
@media only screen and (max-width: 1100px) {
  .course-contents-card.card-l dl dd {
    font-size: 1.6rem;
  }
}
.course-contents-card.card-l .spot-data dl dt {
  font-size: 1.6rem;
}
.course-contents-card.card-l .spot-data dl dd {
  margin-top: 0;
}
.course-contents-wrap {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 1100px) {
  .course-contents-wrap {
    display: block;
  }
}
.course-contents-wrap .txt-part {
  width: 48%;
}
@media only screen and (max-width: 1100px) {
  .course-contents-wrap .txt-part {
    width: 100%;
  }
}
.course-contents-wrap .slider-block {
  width: 48%;
}
@media only screen and (max-width: 1100px) {
  .course-contents-wrap .slider-block {
    width: 100%;
    margin-top: 5%;
  }
}
.course-contents-wrap .slider-block .swiper {
  padding-bottom: 5em;
  position: relative;
}
@media only screen and (max-width: 1100px) {
  .course-contents-wrap .slider-block .swiper {
    padding-bottom: 5em;
  }
}
.course-contents-wrap .slider-block .swiper .swiper-pagination {
  text-align: left;
  bottom: 1.5rem;
  width: auto;
}
.course-contents-wrap .slider-block .swiper .swiper-pagination span:first-child {
  margin-left: 0 !important;
}
.course-contents-wrap .slider-block .swiper .swiper-button-next,
.course-contents-wrap .slider-block .swiper .swiper-button-prev {
  opacity: 1;
  position: absolute;
  top: auto;
  bottom: 1rem;
  right: auto;
  left: auto;
}
.course-contents-wrap .slider-block .swiper .swiper-button-next:before,
.course-contents-wrap .slider-block .swiper .swiper-button-prev:before {
  width: 4.3rem;
  height: 4.3rem;
}
.course-contents-wrap .slider-block .swiper .swiper-button-next {
  right: 1.5rem;
}
.course-contents-wrap .slider-block .swiper .swiper-button-prev {
  right: 6.5rem;
}
.course-contents .traffic {
  padding: 0 0 0 2rem;
  margin-top: 2em;
  position: relative;
  z-index: 1;
}
.course-contents .traffic dl {
  display: flex;
  align-items: center;
}
.course-contents .traffic dl dt {
  width: 5rem;
  height: 5rem;
  line-height: 5rem;
}
.course-contents .traffic dl dd {
  margin-left: 1em;
}

.spot-other {
  margin-top: 5em;
}