@charset "UTF-8";
/* CSS Document */
.page_course{text-align: center;padding-bottom: 80px}
.page_course .main_mv img{width: 100%;height: auto}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
}

.page_course .index{padding: 100px 0 0;position: relative}
.page_course .index h3{font-size: 3rem;color: #f08329;font-weight: bold;letter-spacing: 0.1em;}
.page_course .index dl{margin-top: 80px;position: relative}
.page_course .index dt{width: 50%;color: #fff;position: relative;z-index: 2}
.page_course .index dd{width: 50%;min-height: 500px}
.page_course .index dd img{object-fit: cover;height: 500px}
.page_course .index dl.re dd{-webkit-box-ordinal-group:1;-ms-flex-order:1;-webkit-order:1;order:1;}
.page_course .index dl.re dt{-webkit-box-ordinal-group:2;-ms-flex-order:2;-webkit-order:2;order:2;}

.course1{background: #008ccf url("../course/images/bg.png") repeat}
.course2{background: #f08329 url("../course/images/bg.png") repeat}
.course3{background: #e84d8c url("../course/images/bg.png") repeat}
.course4{background: #3eb370 url("../course/images/bg.png") repeat}

.page_course .index dt h4{font-size: 4rem;font-weight: bold;letter-spacing: 0.1em;}
.page_course .index dt .waku{width: 480px;margin: auto;}
.page_course .index .week{background: #fff;border-radius: 30px;color: #231815;font-size: 2.2rem;font-weight: bold;letter-spacing: 0.1em;margin-bottom: 12px;}
.page_course .index .point{text-align: left}
.page_course .index .point p{padding: 3px 0}
.page_course .index .bt{margin: 50px auto;width: 80%}
@media screen and (max-width: 1200px) {/*スマホのスタイル*/
.page_course .index dt{width: 70%;color: #fff;position: relative;z-index: 2}
.page_course .index dd{width: 30%;min-height: 500px}
}

@media screen and (max-width: 768px) {/*スマホのスタイル*/
.page_course .index{padding: 0px 0 0;}
.page_course .index h3{padding: 60px 0 0;}
.page_course .index h3{font-size: 2rem;}
.page_course .index dl{margin-top: 50px;}
.page_course .index dt{width: 100%;color: #fff;position: relative;z-index: 2}
.page_course .index dd{width: 100%;min-height:inherit}
.page_course .index dd img{height: auto}
.page_course .index dl dd{-webkit-box-ordinal-group:1;-ms-flex-order:1;-webkit-order:1;order:1;}
.page_course .index dl dt{-webkit-box-ordinal-group:2;-ms-flex-order:2;-webkit-order:2;order:2;}

.page_course .index dt .waku{width:90%;padding-top: 30px}
.page_course .index dt h4{font-size: 2.5rem;}
.page_course .index .bt{margin: 30px auto;width: 90%}





}

.kirikae{background: #fff6e9;padding: 50px 0;margin-top: 80px;text-align: left}
.kirikae dl{width: 65%;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;}
.kirikae dl{border-left: 2px solid #036eb8;padding-left: 30px;}
.kirikae dt{color:#036eb8;font-size: 3rem;font-weight: bold;letter-spacing: 0.1em;margin-bottom: 12px}
.kirikae dd{font-size: 2rem}
.kirikae .img{width: 30%}

.hennyu{background: #e0f1f4;padding: 50px 0 0;text-align: left}
.hennyu dl{border-left: 2px solid #036eb8;padding-left: 30px;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;}
.hennyu dt{color:#036eb8;font-size: 3.9rem;font-weight: bold;letter-spacing: 0.1em;margin-bottom: 12px}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
.kirikae{padding: 30px 0;margin-top: 50px;}
.kirikae dl{width: 90%;margin: auto}
.kirikae .img{width: 80%;margin: 20px auto 0}
.kirikae dt{font-size: 1.9rem;}
.kirikae dd{font-size: 1.5rem}

.hennyu{padding: 30px 0 0;}
.hennyu  dl{width: 90%;margin: auto}
.hennyu dt{font-size: 3rem;}
}

/*コース詳細*/
.page_course .naiyo{padding: 80px 0}
.page_course .naiyo .point{text-align: left;margin: 60px 0;font-size: 2rem;font-weight: bold;}
.page_course .naiyo .point p{padding: 3px 0}

.page_course.couse_1 .naiyo .point span{color: #008ccf}
.page_course.couse_2 .naiyo .point span{color: #f08329}
.page_course.couse_3 .naiyo .point span{color: #e84d8c}
.page_course.couse_4 .naiyo .point span{color: #3eb370}


.oneday{background: #fffbc7  url("../course/images/bg2.png") repeat;padding: 60px 0}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
.page_course .naiyo{padding: 0px 0  50px}
.page_course .naiyo .point{margin: 30px 0;font-size: 1.7rem;}
}

.swiper-container {
    padding: 0 20px;
}
.swiper-container img{width: 100%;height: auto}
.swiper-container .swiper-wrapper {
    padding: 30px 0;
}
.swiper-container .swiper-wrapper .swiper-slide {
    width: 430px;
    height: auto;
	display: flex;
    align-items: center;
     flex-direction: column;
    
}
.swiper-container .swiper-wrapper .swiper-slide p{margin-top: 12px}
.swiper-container .swiper-wrapper .slide2 {
    width: 60px!important;
	display: flex;
    align-items: center;
    justify-content: center;margin-top: -96px
}
/* ナビゲーションボタンとページネーションの位置 */
.wrapper {
  --swiper-navigation-sides-offset: -25px; /* ナビゲーションボタンの位置 */
  --swiper-pagination-bottom: -20px; /* ページネーションの位置 */
}
.swiper-pagination {

  bottom: -20px !important;
}
.swiper-pagination-bullet {
  background-color: #000;

}
/* 矢印ボタン */
.swiper-button-next, .swiper-button-prev {
  width: 50px; /* 矢印幅 */
  height: 50px; /* 矢印高さ */
}
.swiper-button-next svg, .swiper-button-prev svg {
  width: 50px; /* 矢印幅 */
  height: 50px; /* 矢印高さ */  
  fill: #000; /* 矢印の色 */
  stroke: #000; /* 外周円の色 */
  transition: 0.2s;
}
.swiper-button-next svg:hover, .swiper-button-prev svg:hover {
  opacity: 0.7; /* ボタンホバー時 */
}
.swiper-button-prev svg {
  transform: rotate(180deg); /* ボタンを反転（prev用） */
}
.swiper-button-prev::after, .swiper-rtl .swiper-button-next::after {
  content: ''; /* デフォルトの矢印を削除 */
}
.swiper-button-next::after, .swiper-rtl .swiper-button-prev::after {
  content: ''; /* デフォルトの矢印を削除 */
}
.wrapper {
  --swiper-pagination-color: #000;  /* ページネーション、アクティブ時のドットの色 */
}
@media screen and (max-width: 768px) {/*スマホのスタイル*/
.swiper-container .swiper-wrapper .swiper-slide {
    width: 100%;
    height: auto;
	display: flex;
    align-items: center;
     flex-direction: column;
    
}

.swiper-container .swiper-wrapper .slide2 {
   display: none
}
/* 矢印ボタン */
.swiper-button-next, .swiper-button-prev {
  width: 30px; /* 矢印幅 */
  height: 30px; /* 矢印高さ */
}
.swiper-button-next svg, .swiper-button-prev svg {
  width: 30px; /* 矢印幅 */
  height: 30px; /* 矢印高さ */  
  fill: #000; /* 矢印の色 */
  stroke: #000; /* 外周円の色 */
  transition: 0.2s;
}
}