@charset "UTF-8";
/*========== courses.css ==========*/
/*===== basic =====*/
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-optical-sizing: auto;
}

h1, h2, h3, h4, h5, h6, p, figure {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

picture {
  display: block;
}
picture > img {
  display: block;
  height: auto;
  width: 100%;
}

* {
  letter-spacing: calc(var(--ls) * -0.01em);
}

#menu li.a06 a{
	/*color:#006636;*/
	color: #8BC361;
	pointer-events: none;
	border-bottom: 3px solid #8BC361;
	/*border-image:url("../img/top/border.png") 30 space;*/
}
/* --------------------
  basic-classes
-------------------- */
.page__container {
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.cmn-content-width {
  margin-left: auto;
  margin-right: auto;
  width: 90vw;
}
@media screen and (min-width: 768px) {
  .cmn-content-width {
    width: 740px;
  }
}
@media screen and (min-width: 992px) {
  .cmn-content-width {
    width: 922px;
  }
}
@media screen and (min-width: 1200px) {
  .cmn-content-width {
    width: 1080px;
  }
}

.cmn-detail-link {
  color: #006636;
  display: inline-block;
  transition: filter 0.15s ease;
}
.cmn-detail-link::after {
  background: url(../img/top/img-icon02.png) 0 50%/contain no-repeat;
  content: "";
  display: inline-block;
  height: 2em;
  margin-left: 0.25em;
  position: relative;
  top: -0.1em;
  vertical-align: middle;
  width: 1em;
}
.cmn-detail-link:hover {
  text-decoration: underline;
  filter: brightness(150%);
}

.page__border-bottom {
  border-bottom: 1px solid #006636;
  margin: 0 auto;
  padding-top: 80px;
  width: 60%;
}

#gototop {
  z-index: 2;
}

/* --------------------
  utility-classes
-------------------- */
.sr-only {
  display: none;
}

@media screen and (min-width: 375px) {
  .xs-only {
    display: none;
  }
}

@media screen and (max-width: 374px) {
  .ssm-only {
    display: none;
  }
}
@media screen and (min-width: 576px) {
  .ssm-only {
    display: none;
  }
}

@media screen and (max-width: 575px) {
  .sm-only {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .sm-only {
    display: none;
  }
}

@media screen and (min-width: 576px) {
  .xs-ssm {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .xs-sm,
  .sp-only {
    display: none;
  }
}

@media screen and (max-width: 374px) {
  .ssm-over {
    display: none;
  }
}

@media screen and (max-width: 575px) {
  .sm-xxl,
  .sm-over {
    display: none;
  }
}

@media screen and (min-width: 992px) {
  .xs-md {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }
}

.no-bullet {
  list-style: none;
  padding: 0;
}

.no-margin {
  margin: 0;
}

.inblock {
  display: inline-block;
}

/*=== courses: mainv-sect ===*/
@media screen and (min-width: 768px) {
  .mainv__sect {
    margin: 0 auto;
    padding: 10px 0;
    width: 90vw;
  }
  .mainv__sect > img {
    border-radius: 50px;
  }
}

/*=== courses: cours-sect ===*/
.cours__sect {
  position: relative;
  overflow: hidden;
}

.cours__header {
  padding-bottom: 4.6875vw;
}
@media screen and (min-width: 768px) {
  .cours__header {
    padding-bottom: 61px;
  }
}
.cours__header h1 {
  background: url(../img/courses/co-h1@2x.png) 50% 0/contain no-repeat;
  height: 21.5375vw;
  margin-top: 40px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .cours__header h1 {
    height: 6.7307692308vw;
    margin-top: 80px;
  }
}
.cours__header .note {
  color: #8bc361;
  font-size: 3.75vw;
  font-weight: 600;
  text-align: center;
}

.cours__selector {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.cours__selector label {
  background-color: #9cdb6d;
  background-position: 50% 0.3em;
  background-repeat: no-repeat;
  background-size: 1.2em auto;
  border: 2px solid #9cdb6d;
  border-bottom: none;
  border-radius: 0.65em 0.65em 0 0;
  color: #fff;
  cursor: pointer;
  flex: 0 0 48.2639%;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.35;
  padding: 1.5em 0.4em 0.4em;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .cours__selector label {
    background-position: 5% 50%;
    background-size: 1.5em auto;
    font-size: 24px;
    padding: 0.9583333333em 0;
    transition: filter 0.15s ease;
  }
  .cours__selector label:hover {
    filter: contrast(120%);
  }
}
@media screen and (min-width: 992px) {
  .cours__selector label {
    background-position: 12% 50%;
  }
}
.cours__selector label[for=co_select_trip] {
  background-image: url(../img/courses/trip/co-trip-off-icon@2x.png);
}
.cours__selector label[for=co_select_stay] {
  background-image: url(../img/courses/stay/co-stay-off-icon@2x.png);
}

.cours__details {
  background-color: #fff;
  border: 2px solid #8bc361;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  position: relative;
}

.cours__sect input[value=trip]:checked ~ .cours__details .cours__timeline.trip {
  display: block;
  left: 0;
  margin: 0 auto;
  position: relative;
}
.cours__sect input[value=trip]:checked ~ .cours__selector label[for=co_select_trip] {
  background-image: url(../img/courses/trip/co-trip-on-icon@2x.png);
  background-color: #fff;
  border-color: #8bc361;
  color: #006636;
  font-weight: 600;
  pointer-events: none;
  transform: translateY(2px);
}

.cours__sect input[value=stay]:checked ~ .cours__details .cours__timeline.stay {
  display: block;
  left: 0;
  margin: 0 auto;
  position: relative;
}
.cours__sect input[value=stay]:checked ~ .cours__selector label[for=co_select_stay] {
  background-image: url(../img/courses/stay/co-stay-on-icon@2x.png);
  background-color: #fff;
  border-color: #8bc361;
  color: #006636;
  font-weight: 600;
  pointer-events: none;
  transform: translateY(2px);
}

.cours__timeline {
  left: 110vw;
  padding-top: 50px;
  position: absolute;
  top: 0;
  width: 100%;
}
.cours__timeline h2 {
  background-image: url(../img/courses/co-timeline-heading-icon@2x.png), url(../img/courses/co-timeline-heading-icon@2x.png);
  background-repeat: no-repeat;
  background-position: 0% 50%, 100% 50%;
  background-size: auto 24px;
  color: #006636;
  margin-inline: auto;
  margin-bottom: 50px;
  text-align: center;
  width: 234px;
}
.cours__timeline h2 span {
  display: block;
}
.cours__timeline h2 .lead {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.15em;
  margin-left: 0.15em;
}
.cours__timeline h2 .day {
  font-family: "Paytone One", "Noto Sans JP", "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 36px;
  font-weight: normal;
  letter-spacing: 0.2em;
  margin-left: 0.2em;
}
.cours__timeline article + h2 {
  margin-top: 50px;
}
.cours__timeline article {
  font-size: 15px;
  line-height: 1.778;
  padding: 1.2em;
  position: relative;
}
@media screen and (min-width: 768px) {
  .cours__timeline article {
    align-items: start;
    display: grid;
    grid-template-columns: repeat(2, 47.62%);
    grid-template-rows: auto;
    justify-content: space-between;
    padding: 0 20px 30px;
  }
}
@media screen and (min-width: 992px) {
  .cours__timeline article {
    font-size: 17px;
    padding-inline: 70px;
  }
}
@media screen and (min-width: 1200px) {
  .cours__timeline article {
    font-size: 18px;
    padding-inline: 118px;
  }
}
.cours__timeline article:nth-of-type(odd) {
  background-color: #faffe0;
}
@media screen and (min-width: 768px) {
  .cours__timeline article:nth-of-type(odd) {
    background: linear-gradient(to bottom, #fff 30px, #faffe0 30px);
    grid-template-areas: "txt img";
  }
}
.cours__timeline article:nth-of-type(even) {
  background-color: #f4fff0;
}
@media screen and (min-width: 768px) {
  .cours__timeline article:nth-of-type(even) {
    background: linear-gradient(to bottom, #fff 30px, #f4fff0 30px);
    grid-template-areas: "img txt";
  }
}
.cours__timeline article .post-txt {
  margin-bottom: 1.5333333333em;
}
@media screen and (min-width: 768px) {
  .cours__timeline article .post-txt {
    grid-area: txt;
    margin-bottom: 0;
    padding-top: 50px;
  }
}
.cours__timeline article .post-txt .post-time {
  color: #8bc361;
  font-family: "Paytone One", "Noto Sans JP", "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 1.8em;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1;
  margin-bottom: 0.1851851852em;
}
.cours__timeline article .post-txt .post-time .suf {
  font-size: 0.6666666667em;
}
.cours__timeline article .post-txt h3 {
  font-size: 1.3333333333em;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 1.15em;
}
.cours__timeline article .post-txt p {
  text-align: justify;
}
.cours__timeline article .post-txt p + p {
  margin-top: 0.5555555556em;
}
.cours__timeline article .post-txt .callout {
  margin-top: 0.5555555556em;
  padding-top: 3.0555555556em;
}
.cours__timeline article .post-txt .callout.pet {
  background: url(../img/courses/trip/co-callout-fig-pet@2x.png) right 0.7777777778em top/3.5555555556em auto no-repeat;
}
.cours__timeline article .post-txt .callout.tea {
  background: url(../img/courses/stay/co-callout-fig-tea@2x.png) 50% 3%/contain no-repeat;
}
@media screen and (min-width: 375px) {
  .cours__timeline article .post-txt .callout.tea {
    background-size: 18.2222222222em auto;
    background-position: 50% 0;
  }
}
.cours__timeline article .post-txt .callout .callout-content {
  background-color: #8bc361;
  border-radius: 0.6666666667em;
  color: #fff;
  padding: 1em 1.1111111111em;
}
.cours__timeline article .post-txt .callout .callout-content h4 {
  font-size: 1.1111111111em;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 0.6em;
}
.cours__timeline article .post-txt .callout .callout-content p {
  font-size: 0.7777777778em;
  line-height: 1.45;
  text-align: left;
}
.cours__timeline article .post-txt dl dt {
  font-weight: 600;
}
.cours__timeline article .post-txt dl dd + dt {
  margin-top: 1.5555555556em;
}
.cours__timeline article .post-img {
  overflow: hidden;
  position: relative;
}
@media screen and (min-width: 768px) {
  .cours__timeline article .post-img {
    grid-area: img;
  }
}
.cours__timeline article .post-img img {
  border-radius: 4px;
  display: block;
  height: auto;
  width: 100%;
}
.cours__timeline article .post-img .swiper-pagination {
  bottom: auto;
  line-height: 30px;
  position: relative;
}
.cours__timeline article .post-img .swiper-pagination .swiper-pagination-bullet {
  background-color: #006636;
  height: 10px;
  margin-left: 8px;
  margin-right: 8px;
  opacity: 0.25;
  width: 10px;
}
.cours__timeline article .post-img .swiper-pagination .swiper-pagination-bullet-active {
  opacity: 0.75;
}
.cours__timeline article + article {
  margin-top: 58px;
}
@media screen and (min-width: 768px) {
  .cours__timeline article + article {
    margin-top: 76px;
  }
}
.cours__timeline article + article::before {
  background: url(../img/courses/co-timeline-dots@2x.png) 50% 50%/auto 30px no-repeat;
  content: "";
  display: block;
  height: 58px;
  left: 0;
  position: absolute;
  top: -58px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .cours__timeline article + article::before {
    background-size: auto 36px;
    height: 76px;
    top: -76px;
  }
}

/*=== courses: infor__sect (infomation.htmlと同じ) ===*/
.infor__sect {
  background-color: #f4eecf;
  color: #333;
  margin-top: 20px;
  padding: 35px 0 0;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .infor__sect {
    margin-top: 40px;
    padding: 65px 0 0;
  }
}
.infor__sect h2 {
  margin: 0 auto 20px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .infor__sect h2 {
    margin: 0 auto 40px;
    width: 25%;
  }
}
.infor__sect .tell {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 25px;
}
@media screen and (min-width: 768px) {
  .infor__sect .tell {
    letter-spacing: 2px;
  }
}
.infor__sect .adds {
  font-size: 14px;
  line-height: 26px;
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .infor__sect .adds {
    font-size: 18px;
    margin-bottom: 48px;
  }
}
.infor__sect .banner {
  margin: 0 auto;
  width: 90%;
}
@media screen and (min-width: 375px) {
  .infor__sect .banner {
    width: 340px;
  }
}
.infor__sect a {
  color: #333;
}
.infor__sect .snsicon {
  display: flex;
  justify-content: center;
  /*margin: 50px 20px 60px;*/
	padding: 50px 20px 60px; 
}
@media screen and (min-width: 768px) {
  .infor__sect .snsicon {
    /*margin-inline: 0;*/
	padding: 50px 0 60px; 
  }
}
.infor__sect .snsicon li {
  margin: 0 15px;
  width: 50px;
}
.infor__sect .txtlink {
  display: flex;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  padding: 0 10%;
  line-height: 1.45;
}
@media screen and (min-width: 768px) {
  .infor__sect .txtlink {
    font-size: 16px;
    font-weight: 400;
  }
}
.infor__sect .txtlink a {
  color: #006636;
  text-decoration: underline;
}
.infor__sect .txtlink span {
  margin-left: 5px;
  width: 17px;
}
/*# sourceMappingURL=courses.css.map */