@charset "utf-8";
/* CSS Document */
/*==============================
==============================
★　TYPE　★
==============================
==============================*/
.front_content {
  padding: 100px 0;
}
.front_content p {
  margin-top: 5px;
  text-align: center;
  text-transform: uppercase;
}
.type-title {
  width: 100%;
  background-color: #890406;
  padding: 15px 0;
  text-align: center;
}
.type-title img {
  width: 150px;
  height: 150px;
  opacity: 0.3;
  margin: 0 10px;
}
.type { /*ul*/
  width: 1050px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.type-bg { /*円*/
  display: block;
  width: 330px;
  height: 330px;
  border: 3px dotted #D8D8D8;
  border-radius: 50%;
  position: relative;
  margin: 10px;
}
.type-01, .type-02, .type-03, .type-04, .type-05 {
  width: 110px; /*70%;*/
  height: 110px;
  position: absolute;
  top: 30px;
  left: 110px;
}
.type-01 {
  background: url("../../images/icon/castle.png")no-repeat center/contain;
}
.type-02 {
  background: url("../../images/icon/gloup.png")no-repeat center/contain;
}
.type-03 {
  background: url("../../images/icon/smartphone.png")no-repeat center/contain;
}
.type-04 {
  background: url("../../images/icon/timer.png")no-repeat center/contain;
}
.type-05 {
  background: url("../../images/icon/hourglass.png")no-repeat center/contain;
}
#how-to-play-01 h5 {
  margin-top: 140px;
  text-shadow: 0 0 20px #D8D8D8;
}
/*==============================
==============================*/
@media screen and (max-width: 1210px) {
  .type { /*ul*/
    width: 930px;
  }
  .type-bg { /*円*/
    width: 290px;
    height: 290px;
  }
  .type-01, .type-02, .type-03, .type-04, .type-05 {
    width: 90px;
    height: 90px;
    top: 30px;
    left: 100px;
  }
  #how-to-play-01 h5 {
    margin-top: 110px;
  }
}
/*==============================
==============================*/
@media screen and (max-width: 961px) {
  .type-title img {
    width: 100px;
    height: 100px;
  }
  .type { /*ul*/
    width: 620px;
  }
  .type-bg { /*円*/
    width: 290px;
    height: 290px;
  }
  .type-01, .type-02, .type-03, .type-04, .type-05 {
    width: 90px;
    height: 80px;
    top: 30px;
    left: 100px;
  }
  #how-to-play-01 h5 {
    margin-top: 100px;
  }
}
/*==============================
==============================*/
@media screen and (max-width: 651px) {
  .front_content {
    padding: 80px 0;
  }
  .type-title img {
    width: 80px;
    height: 80px;
    margin: 0 5px;
  }
  .type { /*ul*/
    width: 320px;
  }
  .type-bg { /*円*/
    width: 300px;
    height: 300px;
    border: 2px dotted #D8D8D8;
  }
  .type-01, .type-02, .type-03, .type-04, .type-05 {
    width: 90px;
    height: 90px;
    top: 40px;
    left: 105px;
  }
  #how-to-play-01 h5 {
    margin-top: 120px;
      text-shadow: 0 0 10px #D8D8D8;
	 
  }
}
/*==============================
==============================*/
@media screen and (max-width: 426px) {
  .front_content {
    padding: 60px 0;
  }
  .type-title img {
    width: 50px;
    height: 50px;
  }
  .type { /*ul*/
    width: 320px;
  }
  .type-bg { /*円*/
    width: 300px;
    height: 300px;
  }
  .type-01, .type-02, .type-03, .type-04, .type-05 {
    width: 90px;
    height: 90px;
    top: 40px;
    left: 105px;
  }
  #how-to-play-01 h5 {
    margin-top: 120px;
  }
}
/*==============================
==============================
★　THE SUN COURSE　★
★　THE SUN COURSE　★
   - TITLE -
==============================
==============================*/
.the-sun-title {
  width: 100%;
  background-color: #900B0E;
  padding: 15px 0;
  text-align: right;
  left: 0;
}
.the-sun-title img {
  width: 150px;
  height: 150px;
  opacity: 0.3;
  margin: 0 10px;
}
.the-moon-title {
  width: 100%;
  background-color: #900B0E;
  padding: 15px 0;
  text-align: left;
  left: 0;
}
.the-moon-title img {
  width: 140px;
  height: 140px;
  opacity: 0.3;
  margin: 0 10px;
}
/*==============================
==============================*/
@media screen and (max-width: 961px) {
  .the-sun-title img {
    width: 100px;
    height: 100px;
  }
  .the-moon-title img {
    width: 90px;
    height: 90px;
  }
}
/*==============================
==============================*/
@media screen and (max-width: 651px) {
  .the-sun-title img {
    width: 80px;
    height: 80px;
    margin: 0 5px;
  }
  .the-moon-title img {
    width: 70px;
    height: 70px;
    margin: 0 5px;
  }
}
/*==============================
==============================*/
@media screen and (max-width: 465px) {
  .the-sun-title img {
    width: 50px;
    height: 50px;
  }
  .the-moon-title img {
    width: 40px;
    height: 40px;
  }
}
/*==============================
==============================
★　THE SUN COURSE　★
★　THE SUN COURSE　★
   - SLIDER -
==============================
==============================*/
.how-to-play-slider {
  width: 1170px;
  margin: 0 auto;
}
.how-to-play-bg {
  display: block;
  width: 370px; /*40%;*/
  height: 340px;
  border: 3px dotted #D8D8D8;
  position: relative;
}
.how-to-play-pic-01, .how-to-play-pic-02, .how-to-play-pic-03, .how-to-play-pic-04, .how-to-play-pic-05, .how-to-play-pic-06, .how-to-play-pic-07, .how-to-play-pic-08, .how-to-play-pic-09, .how-to-play-pic-10, .how-to-play-pic-11, .how-to-play-pic-12 {
  width: 230px;
  height: 150px;
  position: absolute;
  top: 30px;
  left: 70px;
}
.how-to-play-pic-01 {
  background: url("../../images/icon/calendar.png")no-repeat center/contain;
}
.how-to-play-pic-02 {
  background: url("../../images/icon/ticket.png")no-repeat center/contain;
}
.how-to-play-pic-03 {
  background: url("../../images/icon/attractions.png")no-repeat center/contain;
}
.how-to-play-pic-04 {
  background: url("../../images/icon/stationary.png")no-repeat center/contain;
}
.how-to-play-pic-05 {
  background: url("../../images/icon/key.png")no-repeat center/contain;
}
.how-to-play-pic-06 {
  background: url("../../images/icon/clear.png")no-repeat center/contain;
}
.how-to-play-pic-07 {
  background: url("../../images/icon/attention.png")no-repeat center/contain;
}
.how-to-play-pic-08 {
  background: url("../../images/icon/opening.png")no-repeat center/contain;
}
.how-to-play-pic-09 {
  background: url("../../images/icon/castle.png")no-repeat center/contain;
}
.how-to-play-pic-10 {
  background: url("../../images/icon/bat.png")no-repeat center/contain;
}
.how-to-play-pic-11 {
  background: url("../../images/icon/hourglass.png")no-repeat center/contain;
}
.how-to-play-pic-12 {
  background: url("../../images/icon/vampire.png")no-repeat center/contain;
}
#how-to-play-02 h5, #how-to-play-03 h5 {
  margin-top: 180px;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.how-to-play-slider .slick-slide {
  margin: 0 10px;
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev, .slick-next {
  position: absolute; /*絶対配置にする*/
  top: 42%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #D8D8D8; /*矢印の色*/
  border-right: 2px solid #D8D8D8; /*矢印の色*/
  height: 15px;
  width: 15px;
  opacity: 0.5;
}
.slick-prev:hover, .slick-next:hover {
  opacity: 1.0;
  filter: brightness(150%);
}
.slick-prev { /*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}
.slick-next { /*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slick-dots {
  text-align: center;
  margin: 20px 5px 5px 0;
}
.slick-dots li {
  display: inline-block;
}
.slick-dots button {
  color: transparent;
  outline: none;
  width: 8px; /*ドットボタンのサイズ*/
  height: 8px; /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #303030; /*ドットボタンの色*/
  margin: 0 5px;
}
.slick-dots .slick-active button {
  background: #D8D8D8; /*ドットボタンの現在地表示の色*/
  opacity: 0.5;
}
/*==============================
==============================*/
@media screen and (max-width: 1210px) {
  .how-to-play-slider {
    width: 780px;
  }
  .how-to-play-bg {
    width: 370px;
    height: 340px;
  }
  .how-to-play-pic-01, .how-to-play-pic-02, .how-to-play-pic-03, .how-to-play-pic-04, .how-to-play-pic-05, .how-to-play-pic-06, .how-to-play-pic-07, .how-to-play-pic-08, .how-to-play-pic-09, .how-to-play-pic-10, .how-to-play-pic-11, .how-to-play-pic-12 {
    width: 210px;
    height: 130px;
    top: 30px;
    left: 75px;
  }
  #how-to-play-02 h5, #how-to-play-03 h5 {
    margin-top: 160px;
  }
}
/*==============================
==============================*/
@media screen and (max-width: 851px) {
  .how-to-play-slider {
    width: 420px;
  }
  .how-to-play-bg {
    max-width: 400px;
    height: 370px;
  }
  .how-to-play-pic-01, .how-to-play-pic-02, .how-to-play-pic-03, .how-to-play-pic-04, .how-to-play-pic-05, .how-to-play-pic-06, .how-to-play-pic-07, .how-to-play-pic-08, .how-to-play-pic-09, .how-to-play-pic-10, .how-to-play-pic-11, .how-to-play-pic-12 {
    max-width: 230px;
    height: 140px;
    top: 30px;
    left: 85px;
  }
  #how-to-play-02 h5, #how-to-play-03 h5 {
    margin-top: 180px;
  }
}
/*==============================
==============================*/
@media screen and (max-width: 651px) {
  .how-to-play-slider {
    width: 320px;
  }
  .how-to-play-bg {
    max-width: 300px;
    height: 300px;
    border: 2px dotted #D8D8D8;
  }
  .how-to-play-pic-01, .how-to-play-pic-02, .how-to-play-pic-03, .how-to-play-pic-04, .how-to-play-pic-05, .how-to-play-pic-06, .how-to-play-pic-07, .how-to-play-pic-08, .how-to-play-pic-09, .how-to-play-pic-10, .how-to-play-pic-11, .how-to-play-pic-12 {
    max-width: 170px;
    height: 100px;
    top: 30px;
    left: 65px;
  }
  #how-to-play-02 h5, #how-to-play-03 h5 {
    margin-top: 130px;
  }
  #how-to-play-02 p, #how-to-play-03 p {
    font-size: 14px;
  }
}