@charaset utf-8;

/* ========================================================
page_shortterm.css - 短期コース用カスタムスタイル
======================================================== */
.banner-short {
  background: url(../../img/class/shortterm/bg_banner_short.jpg) no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

.banner.banner-short {
  position: relative;
  z-index: 0;
}

.banner-short .banner-txt {
  padding: 3rem 5rem .5rem;
}

.shortterm {
  position: relative;
  margin: 0 auto;
}

.shortterm-bg {
  padding: 5rem 0 0;
  background: #fff;
}

.course {
  padding: 3rem 0;
  border: 1px solid #fce212;
}

.course .s-fs-16 {
  letter-spacing: 0.1rem;
}

.width-800 {
  width: 800px;
  margin: 0 auto;
}

.width-880 {
  width: 880px;
  margin: 0 auto;
}

.course-ttl {
  margin-bottom: 30px;
}

.course-ttl p {
  letter-spacing: 3px;
  transform: rotate(-3deg);
}

.course-ttl span {
  display: block;
  position: relative;
  z-index: 1;
  margin-top: -7px;
}

.gray-box {
  background: #F5F5EF;
  margin: 2rem 2rem 0;
  padding: 3rem;
  line-height: 2;
}

.w-812 {
  width: 812px;
  margin: 8rem auto 10rem;
}

.w-812 li {
  float: left;
  margin: 0 0 1rem 0;
  text-align: center;
  overflow: hidden;
}

.w-812 li ol li {
  float: none;
  height: auto !important;
  margin: 0 !important;
}

.w-812 li ol li:first-child {
  margin: 0 0 10px 0 !important;
}

.w-812 li ol li .blue-border {
  height: auto !important;
}

.w-812 li:nth-child(odd) {
  margin: 0 1rem 0 0;
}

.w-812 li a {
  position: relative;
  display: table-cell;
  vertical-align: middle;
}

.sum-border {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.sum-border::before, .sum-border::after {
  position: absolute;
  content: "";
  width: 3px;
  height: 0;
  background: #FCE212;
  transition: all 0.2s linear;
  z-index: 99;
}

.sum-border::before {
  transition-delay: 0s;
  bottom: 0;
  left: 0;
}

.sum-border::after {
  top: 0;
  right: 0;
  transition-delay: 0.4s;
}

.w-812 li a::before, .w-812 li a::after, .common-btn-01::before, .common-btn-01::after {
  position: absolute;
  content: "";
  width: 0;
  height: 3px;
  background: #FCE212;
  transition: all 0.2s linear;
  z-index: 9;
}

.prepare-btn.common-btn-01::before, .prepare-btn.common-btn-01::after {
  display: none;
}

.prepare-btn.common-btn-01:hover .prepare {
  opacity: 1;
}

.w-812 li a::after, .common-btn-01::after {
  right: 0;
  bottom: 0;
  transition-delay: 0.2s;
}

.w-812 li a::before, .common-btn-01::before {
  top: 0;
  left: 0;
  transition-delay: 0.6s;
}

.w-812 li a:hover::before, .common-btn-01:hover::before {
  transition-delay: 0s;
}

.w-812 li a:hover::before, .w-812 li a:hover::after, .common-btn-01:hover::before, .common-btn-01:hover::after {
  width: 100%;
}

.w-812 li a:hover .sum-border::before, .w-812 li a:hover .sum-border::after, .common-btn-01:hover .sum-border::before, .common-btn-01:hover .sum-border::after {
  height: 100%;
}

.w-812 li a:hover .sum-border::after, .common-btn-01:hover .sum-border::after {
  transition-delay: 0.2s;
}

.w-812 li a:hover::after, .common-btn-01:hover::after {
  transition-delay: 0.4s;
}

.w-812 li a:hover .sum-border::before, .common-btn-01:hover .sum-border::before {
  transition-delay: 0.6s;
}

.common-btn-01 {
  position: relative;
  display: block;
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: 0.4rem;
}

.common-btn-01:hover, .common-btn-01:active, .common-btn-01:focus {
  background: none;
  color: #172071;
}

.common-btn-01 .s-ptb {
  padding: 2.8rem 2rem 2.5rem;
}

.blue-border {
  display: block;
  vertical-align: middle;
  border: 1px solid #172071;
  padding: 3rem 0;
}

.w-812 .blue-border {
  display: table-cell;
  vertical-align: middle;
  width: 398px;
  border: 1px solid #172071;
  padding: 3rem 0;
}

.w-812 li:nth-of-type(3) .blue-border, .w-812 li:nth-of-type(4) .blue-border {
    padding: 2rem 0;
}

.short-link01 {
  margin: 1rem 0 0 0;
  padding: 0 1rem;
  font-weight: 800;
  font-size: 2.2rem;
  letter-spacing: 0.3rem;
  color: #172071;
}

.w-480 {
  width: 480px;
}

.w-980 {
  width: 980px;
  margin: 0 auto;
}

.short-sec01 {
  margin: 0 0 10rem 0;
}

.short-sec01in {
  margin: 5rem 0 0 0;
}

.gray-box02 {
  padding: 4rem 3rem;
  background: #F5F5EF;
  border: 2px solid #172071;
}

.gray-box02 ul li {
  position: relative;
  padding: .5rem 0 0 5rem;
  font-size: 1.4rem;
  color: #172071;
  line-height: 1.8;
}

.gray-box02 ul li::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
}

.gray-box02 ul li:first-child::before {
  background: url(../../img/class/shortterm/icon_02.png) no-repeat;
  width: 30px;
  height: 30px;
}

.gray-box02 ul li:nth-of-type(2)::before {
  background: url(../../img/class/shortterm/icon_03.png) no-repeat;
  width: 32px;
  height: 22px;
}

.gray-box02 ul li:nth-of-type(3)::before {
  background: url(../../img/class/shortterm/icon_04.png) no-repeat;
  width: 27px;
  height: 33px;
}

.time ul, .price ul {
  padding: 0 0 0 5rem;
  font-size: 1.4rem;
  color: #172071;
  line-height: 2.1;
}

.time-ttl, .price-ttl, .time-ttl02 {
  position: relative;
  padding: 1rem 0 0 5rem;
  margin: 0 0 2rem 0;
}

.time-ttl::before {
  position: absolute;
  content: "\f017";
  font-size: 2.8rem;
  font-family: 'Font Awesome 5 Free';
  color: #172071;
  top: 4px;
  left: 0;
}

.time-ttl::after {
  position: absolute;
  content: "";
  width: 55%;
  height: 5px;
  background: #FCE212;
  top: 12px;
  right: 0;
}

.price-ttl::before {
  position: absolute;
  content: "\f157";
  font-size: 2.8rem;
  font-family: 'Font Awesome 5 Free';
  color: #172071;
  top: 4px;
  left: 0;
}

.price-ttl::after {
  position: absolute;
  content: "";
  width: 55%;
  height: 5px;
  background: #FCE212;
  top: 12px;
  right: 0;
}

.title-block img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

.short-ttl01 {
  width: 400px;
  margin: 15px auto 0;
  padding: 2rem 1rem 1.6rem;
  background: #E5E5DE;
}

.short-sec02in {
  margin: 8rem 0 5rem 0;
}

.shortterm .s-fs-14 {
  font-size: 1.4rem;
}

.time-ttl02::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  background: url(../../img/class/shortterm/icon_06.png) no-repeat;
  width: 33px;
  height: 30px;
}

.time-ttl02::after {
  position: absolute;
  content: "";
  width: 60%;
  height: 5px;
  background: #FCE212;
  top: 12px;
  right: 0;
}

.gray-box03 {
  margin: 4rem 0;
  padding: 4rem 3rem;
  background: #F5F5EF;
  border: 2px solid #172071;
}

.short-sec02 .btn-wrap {
  display: table;
}

.btn-wrap .btn {
  position: relative;
  padding: 2.6rem 3rem 2.7rem;
}

.short-sec02 .btn-wrap .btn a {
  display: block;
  vertical-align: middle;
}

.short-sec02 .btn-wrap .btn:hover {
  background: #172071;
}

.short-sec02 .btn-wrap .btn:hover a {
  color: #fff;
}

.btn-wrap .btn .fa.fa-chevron-right {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translate(0, -50%);
}

/* .accommodation {
  padding: 18rem 0 10rem 0;
} */

.accommodation .ttl01, .activity .ttl01 {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.4rem;
}

.accommodation .ttl02, .activity .ttl02 {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
}

.short-sec03 {
  margin: 0 0 14rem 0;
}

.short-sec04 {
  margin: 9rem 0 0 0;
}

.short-sec04 .common-btn-01 {
  margin-top: 4rem;
}

.short-activity {
  width: 940px;
  margin: 6rem auto 4rem;
}

.short-activity .grid-item {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 20px 20px 0;
}

.short-activity .grid-item:nth-child(4), .short-activity .grid-item:nth-child(8) {
  margin-right: 0;
}

.student-wrap {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 6rem 1rem 4rem;
  background: rgba(25, 45, 114, 0.7098039215686275);
  box-sizing: border-box;
  text-align: center;
  transition: all .3s ease-in-out;
}

.short-activity .grid-item:hover .student-wrap {
  display: block;
}

.student-tit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  line-height: 1.5;
  color: #fff;
  letter-spacing: 2px;
}

.short-video {
  position: relative;
  height: 280px;
}

#common-bgndVideo, video.video-parallax {
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
  transition: 1s opacity;
}

#common-bgndVideo, .video-parallax {
  -webkit-transition-position: fixed;
  position: fixed;
}


.shortterm-v-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 1.6rem 0 1.6rem 0;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  background: rgba(39, 39, 39, 0.3);
  color: #fff;
  text-align: center;
}

.shortterm-v-txt p {
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1.6;
}

.shortterm-v-txt span {
  font-weight: 800;
  font-size: 0.9rem;
}

.white-bg-none {
  background: none;
}

.content.white-bg-none {
  z-index: inherit;
  background: none;
  margin: -24rem auto 0;
}

.wrapper.height01 {
  height: auto;
}

.white-bg {
  background: #fff;
  padding: 0 0 8rem 0;
}

.white-bg02 {
  background: #fff;
  padding: 0 0 20rem 0;
}

.width-980 {
  width: 980px;
  margin: 0 auto;
}

.short-student {
  margin: 0 0 14rem;
}

.sum-btn01 {
  position: relative;
  display: block;
  width: 600px;
  margin: 5rem auto 0;
  color: #172071;
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: 0.4rem;
}

.sum-btn01 .blue-border {
  padding: 2rem 0;
}

.introduce {
  margin: 0 3rem 3rem;
  padding-top: 5rem;
}

.introduce .float-right {
  width: 680px;
  margin-top: 6rem;
}

.introduce .float-right li {
  padding-bottom: .8rem;
  border-bottom: 2px solid #FDF39F;
}

.introduce .float-right li:first-child {
  margin-bottom: 1.5rem;
}

.short-video-bg02 {
  background: url(../../img/class/shortterm/student_shortterm.png) no-repeat;
  background-size: cover;
  background-position: 36% 10%;
}


/* sp */
@media screen and (max-width: 767px) {
  .content.white-bg-none {
    margin: -10rem auto 0;
    padding: 0;
  }

  .banner-short {
    background-attachment: inherit;
  }

  .shortterm {
    margin: 0 auto;
    padding: 0;
  }

  .shortterm-bg {
    padding: 3rem 0 0;
  }

  .width-880 {
    width: 93%;
    padding: 7% 3%;
  }

  .width-800 {
    width: 100%;
  }

  .course-ttl .s-fs-30 {
    font-size: 2rem;
  }

  .course-ttl span {
    margin-top: -4px;
    font-size: 2rem;
  }

  .gray-box {
    margin: 2rem 1rem 0;
    padding: 2rem;
    font-size: 1.4rem;
  }

  .w-812 {
    width: 100%;
    margin: 4rem auto 4rem;
  }

  .w-812 li {
    width: 49%;
  }

  .w-812 li ol li {
    width: 100% !important;
  }

  .w-812 li ol li .blue-border {
    padding: 2.4rem 0 !important;
  }

  .w-812 li:nth-child(odd) {
    margin: 0 2% 0 0;
  }

  .short-link01 {
    font-size: 1rem;
    line-height: 1.4;
  }

  .w-980 {
    width: 100%;
  }

  .short-sec01in {
    margin: 2rem 0 0 0;
  }

  .gray-box02 {
    padding: 3rem 1rem;
  }

  .gray-box02 ul li {
    padding: .5rem 0 0 4rem;
  }

  .w-480 {
    width: 100%;
  }

  .short-sec01 {
    margin: 0 0 2rem 0;
  }

  .short-ttl01 {
    width: auto;
    padding: 2rem 1rem 1.6rem;
    font-size: 1.6rem;
    word-break: break-all;
}

  .short-sec01 .float-right {
    margin: 4rem 0 0 0;
  }

  .time-ttl, .price-ttl, .time-ttl02 {
    padding: 1rem 0 0 4rem;
    font-size: 1.8rem;
  }

  .time-ttl::after,.price-ttl::after {
    width: 40%;
  }

  .time ul, .price ul {
    padding: 0 0 0 4rem;
  }

  .short-sec02in {
    margin: 2rem 0 4rem 0;
  }

  .short-sec02in .float-right {
    margin: 0 0 2rem 0;
  }

  .short-sec02in .float-right img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
  }

  .short-sec02in .s-fs-20 {
    font-size: 1.8rem;
  }

  .time-ttl02::after {
    width: 6%;
  }

  .gray-box03 {
    margin: 4rem 0;
    padding: 3rem 2rem;
  }

  .gray-box03 .s-fs-18 {
    font-size: 1.4rem;
    line-height: 1.5;
  }

  .btn-wrap .btn {
    width: 100%;
    display: block;
    line-height: 1.5;
  }

  .btn-wrap .btn:nth-of-type(2), .btn-wrap .btn:nth-of-type(3) {
    margin-bottom: 2rem;
  }

  /* .accommodation {
    padding: 4rem 0 4rem 0;
  } */

  .accommodation .ttl01, .activity .ttl01 {
    font-size: 2.2rem;
  }

  .short-sec03 {
    width: 96%;
    margin: 0 auto 4rem;
  }

  .short-sec03 .s-mb-50 {
    margin-bottom: 2rem;
  }

  .common-btn-01 {
    font-size: 1.8rem;
  }

  .short-sec04 {
    width: 96%;
    margin: 2rem auto 4rem;
  }

  .short-activity {
    width: 100%;
    margin: 2rem auto;
  }

  .short-activity .grid-item {
    width: 48%;
    height: auto;
    margin: 0 3% 3% 0;
  }

  .short-activity .grid-item:nth-child(2n+2) {
    margin-right: 0;
  }

  .student-tit {
    font-size: 1.6rem;
  }

  .banner-short .banner-wrapper {
    top: 6rem;
  }

  .banner-short .banner-txt {
    padding: 1rem 5rem .5rem;
  }

  .short-sec02 .btn-wrap {
    display: block;
  }

  .width-980 {
    width: 100%;
  }

  .introduce {
    width: 98%;
    margin: 1rem auto;
  }

  .introduce .float-left img {
    max-width: 100%;
    margin: 0 auto;
    display: block;
  }

  .introduce .float-right {
    width: 100%;
    margin-top: 1rem;
  }

  .introduce .float-right li {
    border-bottom: none;
    line-height: 1.7;
    text-decoration: underline;
    text-decoration-color: #FDF39F;
  }

  .sum-btn01 {
    width: 96%;
    margin: 3rem auto 0;
    font-size: 2rem;
  }

  .short-student {
    margin: 0 0 5rem;
  }

  .white-bg, .white-bg02 {
    padding: 0 0 5rem 0;
  }

  .shortterm-v-txt {
    width: 96%;
    margin: 0 auto;
  }

}