@charset "UTF-8";

@media screen and (min-width: 768px) {
   .wrap {
      width: 100%;
      max-width: 1000px;
   }
}

#key {
   background: url('../img/course/key.jpg') no-repeat center / cover;
}

@media only screen and (max-width: 767px) {
   #key {
      background-position: center left 83%;
   }
}

.bg-parallax {
   position: relative;
   height: 70vw;
   min-height: inherit;
}

.text-latin {
   position: relative;
   text-transform: uppercase;
   padding-left: 30px;
   letter-spacing: 2px;
   margin-bottom: 20px;
}

.text-latin::before {
   content: "";
   background: url('../img/index/floor-deco.png') no-repeat 0 0/100%;
   width: 40px;
   height: 11px;
   left: -20px;
   top: 50%;
   transform: translateY(-50%);
   position: absolute;
}

.btn-t1 a {
   display: block;
   text-align: center;
   background: #30393e;
   padding: 10px;
   box-sizing: border-box;
   width: 280px;
   margin: 0 auto;
   color: #e2e2e2;
   position: relative;
}

.btn-t1 a::after {
   content: "";
   background: url(../img/course/icon_arrow1.png) no-repeat 0 0/100%;
   width: 24px;
   height: 7px;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   position: absolute;
   transition: 0.5s;
}

.btn-t1 a:hover {
   opacity: 0.7;
}

.btn-t1 a:hover::after {
   left: 5px;
   transition: 0.5s;
}

h2,
h3 {
   font-weight: 600;
   letter-spacing: 2px;
}

@media screen and (min-width: 768px) {
   .bg-parallax {
      height: 355px;
   }

   .text-latin {
      font-size: 15px;
      padding-left: 55px;
      letter-spacing: 6px;
      margin-bottom: 0;
   }

   .text-latin::before {
      left: 0;
   }

   .btn-t1 a {
      padding: 2px 0;
      width: 265px;
   }
}

.object-fit-cover {
   position: relative;
}

.object-fit-cover img {
   -o-object-fit: cover;
   object-fit: cover;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 100%;
   width: 100%;
}

@media screen and (min-width: 768px) {
   .object-fit-cover-pc {
      position: relative;
   }

   .object-fit-cover-pc img {
      -o-object-fit: cover;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
   }
}

#sec1 {
   padding: 15vw 0;
}

#sec1 h2 {
   text-align: center;
   margin-bottom: 8vw;
}

#sec1 h2 span {
   display: block;
}

#sec1 h2 span:first-child {
   font-size: 4vw;
}

#sec1 h2 span:last-child {
   font-size: 6vw;
}

#sec1 .txt {
   margin-bottom: 15vw;
}

#sec1 .bg-parallax {
   width: 80%;
   margin-left: auto;
}

#sec1 .bg-parallax::before {
   content: "";
   background: url(../img/course/sec1_deco1.png) no-repeat 0 0/100%;
   width: 25%;
   height: 20vw;
   left: -20%;
   top: -10vw;
   position: absolute;
   z-index: -1;
}

@media screen and (min-width: 768px) {
   #sec1 {
      padding: 100px 0 65px;
   }

   #sec1 h2 {
      margin-bottom: 50px;
   }

   #sec1 h2 span:first-child {
      font-size: 30px;
      letter-spacing: 5px;
      margin-bottom: 20px;
   }

   #sec1 h2 span:last-child {
      font-size: 40px;
      letter-spacing: 8px;
   }

   #sec1 .txt {
      margin-bottom: 90px;
      text-align: center;
   }

   #sec1 .bg-parallax {
      width: calc(50% + 450px);
   }
	#sec1 .img-obj{
		object-position: 50% 75%;
	}
   #sec1 .bg-parallax::before {
      width: 220px;
      height: 220px;
      left: -170px;
      top: -110px;
   }
}

#sec2 {
   padding: 10vw 0;
}

#sec2 .top-content {
   max-width: 340px;
   margin: 0 auto 30px;
   padding: 40px 0;
   position: relative;
   background: url(../img/course/sec2_ttl_deco1.png) no-repeat right top/30%, url(../img/course/sec2_ttl_deco2.png) no-repeat left bottom/30%;
}

#sec2 .price {
   text-align: center;
   margin-bottom: 20px;
}

#sec2 .price>span {
   display: block;
   font-weight: 600;
}

#sec2 .price>span:first-child {
   font-size: 22px;
   letter-spacing: 2px;
}

#sec2 .desc {
   text-align: center;
   margin-bottom: 20px;
   font-weight: 600;
}

#sec2 h2 {
   font-size: 7vw;
   margin-bottom: 8vw;
   text-align: center;
}

#sec2 h2 span {
   font-size: 6vw;
}

#sec2 h3 {
   color: #fff;
   font-size: 18px;
}

#sec2 .row-1 .col-left {
   position: relative;
   margin-bottom: 25px;
}

#sec2 .row-1 .col-left h3 {
   position: absolute;
   right: 10px;
   bottom: 10px;
}

#sec2 .row-1 .col-right {
   position: relative;
   margin-bottom: 10vw;
}

#sec2 .row-1 .col-right::before {
   content: "";
   background: url(../img/course/sec2_deco1.png) no-repeat 0 0/100%;
   width: 126%;
   height: 50vw;
   left: 5vw;
   top: 5vw;
   position: absolute;
}

#sec2 .row-1 .col-right h3 {
   position: absolute;
   left: 10px;
   bottom: 10px;
}

#sec2 .row-2 {
   margin-bottom: 30px;
}

#sec2 .row-2 .photo-3 {
   margin-bottom: 20px;
}

#sec2 .row-2 .col-right h3 {
   color: #000000;
   margin-bottom: 15px;
}

#sec2 .row-2 .col-right h3 span {
   display: block;
}

#sec2 .row-2 .col-right h3 span:first-child {
   font-size: 20px;
   margin-bottom: 5px;
}

#sec2 .row-2 .col-right h3 span:last-child {
   font-size: 28px;
}

#sec2 .row-2 .col-right .txt {
   margin-bottom: 20px;
}

#sec2 .row-3 .col-left {
   position: relative;
   margin-bottom: 25px;
}

#sec2 .row-3 .col-left::before {
   content: "";
   background: url(../img/course/sec2_deco2.png) no-repeat 0 0/100%;
   width: 30%;
   height: 40vw;
   left: -12vw;
   bottom: -32vw;
   position: absolute;
}

#sec2 .row-3 .col-left h3 {
   position: absolute;
   right: 12vw;
   top: 10px;
}

#sec2 .row-3 .col-right {
   position: relative;
   margin-bottom: 25px;
}

#sec2 .row-3 .col-right h3 {
   position: absolute;
   left: 12vw;
    bottom: 6vw;
}

#sec2 .box-1 {
   position: relative;
}

#sec2 .box-1 h3 {
   position: absolute;
   left: 10px;
   bottom: 10px;
}

#sec2 .pin-trigger {
   position: relative;
   padding: 10vw 0;
}

#sec2 .box-vege {
   position: relative;
   width: 100%;
   aspect-ratio: 1600/1200;
   overflow: hidden;
   clip-path: inset(0% 68% 58% 0% round 0px);
}

#sec2 .box-vege .photo-bg {
   position: absolute;
   inset: 0;
   margin: 0;
   line-height: 0;
}

#sec2 .box-vege .content {
   position: absolute;
   bottom: 10%;
   left: 5%;
   z-index: 2;
   max-width: 420px;
   width: 80%;
}

#sec2 .box-vege .content h3 {
   font-size: 24px;
   color: #fff;
   margin-bottom: 15px;
}

#sec2 .box-vege .content .txt {
   color: #fff;
}

#sec2 .box-2 {
   position: relative;
   margin-bottom: 25px;
}

#sec2 .box-2 h3 {
   position: absolute;
   left: 10px;
   top: 10px;
}

#sec2 .row-4 .photo-9 {
   margin-bottom: 22vw;
   position: relative;
}

#sec2 .row-4 .photo-9::before {
   content: "";
   background: url(../img/course/sec2_deco3.png) no-repeat 0 0/100%;
   width: 110%;
   height: 80vw;
   left: 0;
   bottom: -35vw;
   position: absolute;
}

#sec2 .row-4 .content {
   margin-bottom: 40px;
}

#sec2 .row-4 .content h3 {
   font-size: 24px;
   color: #000;
   margin-bottom: 15px;
}

#sec2 .box-3 {
   position: relative;
}

#sec2 .box-3 h3 {
   position: absolute;
   right: 10px;
   top: 10px;
}

@media screen and (max-width: 767px) {
   #sec2 .row-2 {
      display: flex;
      flex-direction: column;
   }
	#sec2 .row-1 .col-left {
		margin-right: 10vw;
	}
	#sec2 .row-1 .col-right{
		margin-left: 5vw;
	}
   #sec2 .row-2 .photo-3 {
      order: 1;
   }

   #sec2 .row-2 .photo-4 {
	   width: 80%;
      order: 2;
	   padding-left: 20%;
   }

   #sec2 .row-2 .col-right {
      order: 3;
      padding-top: 6vw;
   }

   #sec2 .row-3 {
      /*display: grid;
      grid-template-columns: 49% 47%;
      gap: 4%;*/
      padding-bottom: 7vw;
   }
	#sec2 .row-3 .photo-5 {
      padding-bottom: 4vw;
		margin-right: 10vw;
   }
	#sec2 .row-3 .photo-6 {
      padding-bottom: 4vw;
		margin-left: 9vw;
   }

   #sec2 .row-3 .col-left,
   #sec2 .row-3 .col-right {
      margin-bottom: 0;
   }

   #sec2 .row-3 .col-left::before {
      left: -6vw;
   }

   #sec2 .box-1 {
      /*margin-left: 15vw;*/
   }

   #sec2 .box-vege-content {
      padding-bottom: 10vw;
   }

   #sec2 .box-vege-content h3 {
      color: #000;
      padding-bottom: 5vw;
   }
}

@media screen and (min-width: 768px) {
   #sec2 {
      padding: 48px 0 100px;
   }

   #sec2 .wrap {
      max-width: 1500px;
   }

   #sec2 .top-content {
      max-width: 790px;
      margin: -20px auto 90px;
      padding: 65px 0 70px;
      background: url(../img/course/sec2_ttl_deco1.png) no-repeat right top/auto, url(../img/course/sec2_ttl_deco2.png) no-repeat left bottom/auto;
   }

   #sec2 .price {
      margin-bottom: 20px;
   }

   #sec2 .price>span:first-child {
      font-size: 30px;
      letter-spacing: 3px;
      margin-bottom: -10px;
   }

   #sec2 .price>span:first-child small {
      font-size: 20px;
   }

   #sec2 .price>span:last-child {
      font-size: 15px;
   }

   #sec2 .desc {
      font-size: 15px;
      margin-bottom: 25px;
   }

   #sec2 h2 {
      font-size: 40px;
      margin-bottom: 60px;
      letter-spacing: 7px;
   }

   #sec2 h2 span {
      font-size: 30px;
   }

   #sec2 h3 {
      font-size: 22px;
      letter-spacing: 4.2px;
   }

   #sec2 .row-1 {
      max-width: 1300px;
      margin: 0 auto 100px;
      position: relative;
      min-height: 500px;
   }

   #sec2 .row-1 .col-left {
      margin-bottom: 25px;
      max-width: 500px;
      margin-right: calc(50% + 150px);
   }

   #sec2 .row-1 .col-left .photo-1 {
      height: 350px;
   }

   #sec2 .row-1 .col-left h3 {
      position: absolute;
      right: 12px;
      bottom: 7px;
   }

   #sec2 .row-1 .col-right {
      position: absolute;
      top: 130px;
      margin-bottom: 0;
      left: calc(50% - 50px);
      right: 0;
   }

   #sec2 .row-1 .col-right::before {
      width: 880px;
      height: 600px;
      left: 40px;
      top: 40px;
   }

   #sec2 .row-1 .col-right .photo-2 {
      height: 350px;
      max-width: 700px;
   }

   #sec2 .row-1 .col-right h3 {
      left: 15px;
      bottom: 7px;
   }

   #sec2 .row-2 {
      margin-bottom: -50px;
      position: relative;
      min-height: 500px;
   }

   #sec2 .row-2 .photo-3 {
      margin-bottom: 20px;
      height: 500px;
      position: absolute;
      left: 0;
      top: 0;
      right: calc(50% + 10px);
   }

   #sec2 .row-2 .col-right {
      max-width: 505px;
      margin-left: calc(50% + 85px);
      padding-top: 70px;
      width: calc(50% - 110px);
   }

   #sec2 .row-2 .col-right h3 {
      margin-bottom: 40px;
   }

   #sec2 .row-2 .col-right h3 span:first-child {
      font-size: 30px;
      margin-bottom: 15px;
      letter-spacing: 7px;
   }

   #sec2 .row-2 .col-right h3 span:last-child {
      font-size: 40px;
      letter-spacing: 9px;
   }

   #sec2 .row-2 .col-right .txt {
      margin-bottom: 20px;
   }

   #sec2 .row-2 .photo-4 {
      width: -moz-max-content;
      width: max-content;
      margin-left: auto;
      margin-top: 30px;
   }

   #sec2 .row-3 {
      max-width: 1300px;
      margin: 0 auto 140px;
      min-height: 560px;
      position: relative;
   }

   #sec2 .row-3 .col-left {
      margin-bottom: 25px;
      max-width: 600px;
      margin-right: calc(50% + 50px);
   }

   #sec2 .row-3 .col-left::before {
      width: 289px;
      height: 400px;
      left: -140px;
      bottom: -320px;
   }

   #sec2 .row-3 .col-left .photo-5 {
      height: 400px;
   }

   #sec2 .row-3 .col-left h3 {
      position: absolute;
      right: 10px;
      top: 10px;
   }

   #sec2 .row-3 .col-right {
      position: absolute;
      margin-bottom: 0;
      left: calc(50% + 35px);
      top: 180px;
      right: 65px;
   }

   #sec2 .row-3 .col-right h3 {
      left: 10px;
      bottom: 10px;
   }

   #sec2 .row-3 .col-right .photo-6 {
      height: 380px;
   }

   #sec2 .box-1 {
      position: relative;
      margin-right: 70px;
      margin-left: calc(50% - 220px);
      margin-bottom: 110px;
   }

   #sec2 .box-1 h3 {
      position: absolute;
      left: 10px;
      bottom: 10px;
   }

   #sec2 .box-1 .photo-7 {
      height: 500px;
   }

   #sec2 .pin-trigger {
      padding: 0;
      margin-bottom: 80px;
   }

   #sec2 .box-vege {
      aspect-ratio: 1600/700;
      overflow: hidden;
   }

   #sec2 .box-vege .content {
      bottom: 10%;
      left: 5%;
      z-index: 2;
      max-width: 420px;
      width: 80%;
   }

   #sec2 .box-vege .content h3 {
      font-size: 40px;
      margin-bottom: 40px;
   }

   #sec2 .box-2 {
      position: relative;
      margin-bottom: 80px;
      width: 600px;
      margin-left: auto;
      margin-right: calc(50% - 100px);
   }

   #sec2 .box-2 h3 {
      left: 10px;
      top: 10px;
   }

   #sec2 .row-4 {
      position: relative;
      min-height: 500px;
   }

   #sec2 .row-4 .photo-9 {
      margin-bottom: 0;
      position: absolute;
      top: 0;
      right: 50px;
      left: calc(50% - 190px);
      height: 500px;
   }

   #sec2 .row-4 .photo-9::before {
      width: 981px;
      height: 768px;
      left: 0;
      bottom: -305px;
   }

   #sec2 .row-4 .content {
      margin-bottom: 85px;
      width: 415px;
      margin-left: auto;
      margin-right: calc(50% + 235px);
      padding-top: 210px;
   }

   #sec2 .row-4 .content h3 {
      font-size: 40px;
      margin-bottom: 40px;
      letter-spacing: 9px;
   }

   #sec2 .box-3 {
      position: relative;
      width: 500px;
      margin-left: auto;
      margin-right: calc(50% + 10px);
   }

   #sec2 .box-3 h3 {
      right: 10px;
      top: 10px;
   }
}

#sec3 {
   padding: 10vw 0;
   position: relative;
}

#sec3::before {
   content: "";
   background: #bcbcbc;
   right: 0;
   bottom: 20vw;
   width: 100%;
   position: absolute;
   height: 250vw;
}

#sec3 .row-1 {
   margin-bottom: 40px;
}

#sec3 .row-1 .photo-1 {
   margin-bottom: 15px;
}

#sec3 .row-2 {
   margin-bottom: 40px;
}

#sec3 .row-2 .photo-2 {
   margin-bottom: 15px;
}

#sec3 .row-3 .photo-3 {
   margin-bottom: 15px;
}

#sec3 .row-3 .content {
   margin-bottom: 30px;
   margin-top: 30px;
   padding-top: 25px;
   position: relative;
}

#sec3 .row-3 .content::before {
   content: "";
   background: #5e5e5e;
   height: 1px;
   width: calc(100% + 6vw);
   left: 0;
   top: 0;
   position: absolute;
}

#sec3 .row-3 .content .t-desc-1 {
   margin-bottom: 20px;
   font-size: 12px;
   line-height: 20px;
}

#sec3 .row-3 .content .price {
   margin-bottom: 10px;
}

#sec3 .row-3 .content .price dl {
   font-weight: 600;
   display: flex;
   justify-content: space-between;
}

#sec3 .row-3 .content .t-desc-2 {
   font-size: 12px;
   line-height: 20px;
}

@media screen and (min-width: 768px) {
   #sec3 {
      padding: 135px 0 110px;
   }

   #sec3::before {
      bottom: 205px;
      width: calc(50% + 375px);
      height: 725px;
   }

   #sec3 .wrap {
      max-width: 1500px;
   }

   #sec3 .row-1 {
      margin-bottom: 0;
      position: relative;
      min-height: 585px;
   }

   #sec3 .row-1 .photo-1 {
      margin-bottom: 15px;
      position: absolute;
      right: 0;
      height: 600px;
      left: calc(50% - 150px);
      top: -85px;
   }

   #sec3 .row-1 .txt {
      max-width: 445px;
      margin-left: auto;
      margin-right: calc(50% + 230px);
      padding-top: 35px;
      padding-left: 30px;
      box-sizing: border-box;
   }

   #sec3 .row-2 {
      margin-bottom: 40px;
      position: relative;
      min-height: 270px;
   }

   #sec3 .row-2 .photo-2 {
      margin-bottom: 15px;
      height: 480px;
      position: absolute;
      left: 0;
      top: -270px;
      right: calc(50% + 50px);
   }

   #sec3 .row-2 .txt {
      width: 400px;
      margin-left: calc(50% + 50px);
   }

   #sec3 .row-3 {
      position: relative;
      min-height: 380px;
   }

   #sec3 .row-3 .photo-3 {
      margin-bottom: 15px;
      position: absolute;
      top: 0;
      right: calc(50% + 110px);
      left: 145px;
      height: 380px;
      min-width: 380px;
   }

   #sec3 .row-3 .content {
      margin-left: calc(50% + 40px);
      width: 490px;
      margin-bottom: 30px;
      margin-top: 30px;
      padding-top: 55px;
   }

   #sec3 .row-3 .content::before {
      width: calc(100% + 50vw);
      left: 15px;
      top: 10px;
   }

   #sec3 .row-3 .content .t-desc-1 {
      margin-bottom: 25px;
      font-size: 16px;
      line-height: 38px;
      padding-left: 12px;
   }

   #sec3 .row-3 .content .price {
      margin-bottom: 12px;
   }

   #sec3 .row-3 .content .price dl {
      width: 345px;
      font-size: 20px;
      letter-spacing: 4px;
      margin-bottom: 3px;
   }

   #sec3 .row-3 .content .t-desc-2 {
      font-size: 16px;
      line-height: 38px;
      padding-left: 12px;
   }

   #sec3 .photo-4 {
      width: -moz-max-content;
      width: max-content;
      margin-left: auto;
      margin-right: 40px;
      margin-top: -55px;
   }
}

#bnr {
   padding: 10vw 0;
}

#bnr a {
   display: block;
   padding-right: 40px;
   position: relative;
}

#bnr a::after {
   content: "";
   background: url(../img/course/bnr_arrow.png) no-repeat center center/10px, #30393e;
   height: 100%;
   width: 40px;
   position: absolute;
   top: 0;
   right: 0;
}

#bnr a .photo-bg {
   height: 50vw;
}

#bnr a .photo-bg img {
   height: 50vw;
   -o-object-fit: cover;
   object-fit: cover;
}

#bnr a h3 {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   padding-bottom: 20px;
   width: -moz-max-content;
   width: max-content;
   color: #fff;
}

#bnr a h3::after {
   content: "";
   background: url(../img/course/icon_arrow1.png) no-repeat 0 0/100%;
   width: 24px;
   height: 7px;
   left: 50%;
   transform: translateX(-50%);
   bottom: 0;
   position: absolute;
}

@media screen and (min-width: 768px) {
   #bnr {
      padding: 0 0 50px;
   }

   #bnr .wrap {
      max-width: 1440px;
      padding: 0 20px;
   }

   #bnr a {
      padding-right: 70px;
      overflow: hidden;
   }

   #bnr a::after {
      background: url(../img/course/bnr_arrow.png) no-repeat center center/auto, #30393e;
      width: 70px;
   }

   #bnr a .photo-bg::after {
      content: "";
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      border: 1px solid #aa9d8e;
      position: absolute;
      transition: all 0.3s;
      opacity: 0;
   }

   #bnr a .photo-bg {
      height: 450px;
   }

   #bnr a .photo-bg img {
      height: 450px;
      transition: all 0.5s linear;
   }

   #bnr a:hover .photo-bg {
      position: relative;
   }

   #bnr a:hover .photo-bg:after {
      opacity: 1;
   }

   #bnr a:hover,
   #bnr a:hover .photo-bg img {
      opacity: 1;
   }

   #bnr a:hover .photo-bg img {
      transform: scale(1.1);
   }

   #bnr a h3 {
      padding-bottom: 25px;
      font-size: 21px;
   }
}

#reservation.reservation-1:before {
   display: none;
}

#reservation.reservation-1 .wrap {
   background-color: #bcbcbc;
}

#reservation.reservation-1 h2 {
   text-align: center;
}

@media screen and (max-width: 767px) {
   #reservation.reservation-1 {
      padding-top: 15vw;
   }

   #reservation.reservation-1:after {
      bottom: 0;
   }

   #reservation.reservation-1 .wrap {
      padding: 15vw 6.6vw;
   }

   #reservation.reservation-1 .wrap:before {
      content: '';
      width: 15vw;
      height: 40vw;
      background: url("../img/shared/bg-pattern-1.jpg") repeat center top;
      position: absolute;
      top: -15vw;
      left: 0;
   }

   #reservation.reservation-1 h2 {
      width: auto;
      height: auto;
      position: static;
   }

   #reservation.reservation-1 .txt {
      text-align: center;
      padding-top: 8vw;
   }
}

@media screen and (min-width: 768px) {
   #reservation.reservation-1 .wrap {
      width: 100%;
      min-width: 1000px;
      max-width: 1300px;
      padding: 85px 20px 100px;
   }

   #reservation.reservation-1 .wrap:before {
      bottom: -70px;
      right: -52px;
   }

   #reservation.reservation-1 .wrap:after {
      content: '';
      width: 210px;
      height: 210px;
      background: url('../img/shared/bg-pattern-1.jpg') repeat center top;
      position: absolute;
      top: 350px;
      left: -53px;
   }

   #reservation.reservation-1 h2 {
      width: auto;
      height: auto;
      position: static;
      line-height: 40px;
   }

   #reservation.reservation-1 h2 .sub {
      padding-top: 0;
   }

   #reservation.reservation-1 .txt {
      padding: 15px 0 40px;
   }

   #reservation.reservation-1 .cancel {
      max-width: 820px;
      margin: 0 auto;
      padding: 63px 0 50px 76px;
   }

   #reservation.reservation-1 .box-2 {
      max-width: 860px;
      margin: 0 auto;
   }
}