@charset "UTF-8";
/* CSS Document */
.main {
  background-color: #fefefe;
}
.section-top {
  position: relative;
  text-align: right;
}
.section-top-img {
  padding-left: 20px;
  width: 90%;
}
.section-top h2 img {
  position: absolute;
  top: 76%;
  left: 5%;
  width: 165px;
  mix-blend-mode: difference;
}
.section-top_title-jp {
  display: block;
  position: absolute;
  top: 65%;
  left: 6%;
  mix-blend-mode: difference;
  color: #fff;
  font-size: 1.6rem;
}

.section-course_price-span {
    font-size: 2.0rem;
  }

 .section-course_name {
    font-size: 2.4rem;
  }

@media (min-width:768px) {
  
  .section-top-img-pc {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: 0;
    padding-left: 150px;
  }
  .section-top-img {
    display: none;
  }
  .section-top h2 img {
    width: 345px;
    left: 8%;
  }
  .section-top_title-jp {
    left: 21%;
    font-size: 2.4rem;
  }
  
  
}


.section-menu {
  padding: 65px 24px;
}
.section-menu li {
  list-style: none;
}
.section-menu img {
  width: 99%;
  vertical-align: bottom;
}
.section-menu h2 {
  font-size: 1.8rem;
  text-align: center;
  display: inline-block;
  margin: 0 auto;
}
.section-menu_name {
  font-weight: 600;
}
.section-menu_price {
  font-size: 1.4rem;
  font-family: sans-serif;
}
.section-menu_content {
  background: radial-gradient(ellipse at top, #d7e3e2, transparent), radial-gradient(ellipse at bottom, #e9e9d6, transparent);
  padding: 30px 10px;
}
.section-wrap {
  background-image: url("../images/menu/section-menu_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.section-course h2 {
  padding-top: 40px;
  font-size: 2.4rem;
  border-bottom: 3px solid;
  border-image: linear-gradient(to right, #d0d0c4 0%, #929f9d 100%) 1;
  width: 80%;
  margin: 0 auto;
}
.section-course ul {
  padding: 45px 6% 0;
}
.section-course li {
  list-style: none;
  padding-bottom: 40px;
}
.section-course li p {
  text-align: left;
  /*  -lmargin: 0 auto;*/
}
.section-course_price {
  font-family: sans-serif;
}
.section-course_price-span {
  display: inline-block;
  margin-left: auto;
}
.section-course_name {
  font-size: 1.8rem;
  font-weight: 900;
  text-align: left;
}
.section-course_content {
  padding: 20px 0 30px;
  font-size: 1.4rem;
}
.section-course_price-minutes {
  font-size: 1.5rem;
}
.section-course_price-jpy {
  font-size: 1.5rem;
}
.section-option h2 {
  padding-top: 40px;
  font-size: 2.4rem;
  border-bottom: 3px solid;
  border-image: linear-gradient(to right, #d0d0c4 0%, #929f9d 100%) 1;
  width: 80%;
  margin: 0 auto;
}
.section-option_wrap {
  padding: 45px 6%;
  text-align: left;
  margin: 0 auto;
  display: inline-block;
}
.section-option_wrap p {
  font-weight: 500;
}
.section-option_ptice {
  display: block;
  text-align: left;
  font-weight: 500;
  font-size: 1.8rem;
  font-family: sans-serif;
  margin-left: auto;
}
.section-option_content {
  padding-bottom: 35px;
}

.option_text {
    font-size: 1.6rem;
  }









@media (min-width: 600px) {
  
  .section-course ul {
    padding: 45px 6% 0;
    width: 70%;
    margin: 0 auto;
  }
  
}


@media(min-width:1024px) {
  
  
  
  
  .section-course ul {
    padding: 45px 4% 0;
    margin: 0 auto;
    width: 100%;
  }
  .section-course h2 {
    padding-top: 90px;
    font-size: 3.0rem;
    border-image: linear-gradient(to right, #d0d0c4 0%, #929f9d 100%) 1;
    width: 40%;
    margin-bottom: 80px;
  }
  .section-course li p {
    text-align: left;
  }
  .section-course_content {
    width: 60%;
    padding-top: 0;
  }
  .section-course div {
    display: flex;
    align-items: center;
    justify-content: sspace-between;
    padding-bottom: 35px;
  }
 
  
  
  .section-course_price {
    margin-left: auto;
  }
  .section-option_content {
    display: flex;
    justify-content: space-between;
  }
  .section-option_ptice {
    text-align: right;
    font-size: 2.0rem;
    margin-left: auto;
  }
  .section-option_wrap {
    font-size: 2.2rem;
    display: block;
    width: 75%;
  }
  .section-option h2 {
    padding-top: 90px;
    font-size: 3.0rem;
    border-image: linear-gradient(to right, #d0d0c4 0%, #929f9d 100%) 1;
    width: 40%;
    margin-bottom: 80px;
  }
}
/*スライダーのためのcss*/
.slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 94%;
  margin: 0 auto;
}
.slider a {
  text-decoration: none;
  color: #333;
}
.slider img {
  width: 100%; /*スライダー内の画像を横幅100%に*/
  height: auto;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
  margin: 0 10px;
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev, .slick-next {
  position: absolute; /*絶対配置にする*/
  top: 42%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666; /*矢印の色*/
  border-right: 2px solid #666; /*矢印の色*/
  height: 15px;
  width: 15px;
}
.slick-prev { /*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}
.slick-next { /*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slick-dots {
  text-align: center;
  margin: 20px 0 0 0;
}
.slick-dots li {
  display: inline-block;
  margin: 0 5px;
}
.slick-dots button {
  color: transparent;
  outline: none;
  width: 6px; /*ドットボタンのサイズ*/
  height: 15px;
  display: block;
  border-radius: 50%;
  padding: 3px 5px;
}
.slick-dots .slick-active button {
  background: #d9e4e1; /*ドットボタンの現在地表示の色*/
}
.button {
  background-color: -internal-light-dark(rgb(255, 255, 255), rgb(255, 255, 255));
}