@charset "UTF-8";

/*----------------------------------------------------
	HEADER STYLE
----------------------------------------------------*/
header{
  position: relative;
  width: 100vw;
  height: 100vh;
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 0;
  background: url('../img/main_bg.jpg');
  background-size: cover;
}
header .header_item{
  position: absolute;
}
header .jr_logo{
  width: 55px;
  top: 2%;
  left: 2.5%;
}
header .first_logo,header .cp_ttl{
  top: 50%;
  left: 17%;
  transform: translate(-50% ,-50%);
}
header .first_logo{
  width: 364px;
}
header .cp_ttl{
  width: 340px;
}
header .copy{
  font-family: "Montserrat", sans-serif;
  right: 2.5%;
  bottom: 1%;
  font-size: .8rem;
  color: #fff;
  letter-spacing: 1px;
}
header .app_conductor{
  text-align: center;
  width: 290px;
  background: #fff;
  right: 18%;
  top: 50%;
  transform: translate(50% ,-50%);
  padding: 30px 20px;
  border-radius: 20px;
}
header .app_conductor .app_ttl{
  font-weight: bold;
  margin-bottom: 20px;
}
header .app_conductor .app_btn{
  margin-bottom: 20px;
}
header .app_qr{
  max-width: 100px;
  margin: 0 auto;
}

.fade {
  transition: opacity 0.8s ease;
}
.hidden {
  opacity: 0;
  pointer-events: none;
}
.visible {
  opacity: 1;
}


@media only screen and (max-width: 768px) {
  header{
    display: none;
  }
}
/*----------------------------------------------------
	MV STYLE
----------------------------------------------------*/
.mv{
  margin-bottom: 5%;
}
@media only screen and (max-width: 768px) {
  .mv{
    margin-bottom: 2%;
  }
}
/*----------------------------------------------------
	CONTES STYLE
----------------------------------------------------*/

/* section */
.section{
  padding: 10% 5%;
}
.section_inr_box{
  background: #fff;
  padding: 10% 6% 9% 6%;
  border-radius: 10px;
}
/* content */
.content{

}
.content .chara{
  max-width: 148px;
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .content .chara{
    max-width: 100%;
    width: 50%;
  }
 .section_03 .content .chara{
    width: 44%;
  }
}
.content .content_ttl{
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: bold;
  margin-top: 1%;
}
.content .content_txt{
  font-size: 1.125rem;
  margin-top: 10%;
  font-weight: bold;
  line-height: 1.9;
}
.content .content_txt_caution{

}
.content .content_txt_caution li{
  font-size: .85rem;
  padding-left: .9rem;
  text-indent: -.9rem;
}
.content .content_txt .scale{
  font-weight: normal;
  font-size: .9rem;
}
.content hr{
  border-top: 1px solid #222;
  max-width: 110px;
  margin: 10% auto;
}

/* アプリダウンロード */
.dl_app{}
.dl_app.dl_app_02{
  margin-top: 12%;
}
.dl_app .dl_app_ttl{
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 3%;
}
.dl_app .dl_app_txt{
  font-size: .85rem;
  margin-bottom: 5.5%;
}
.dl_app .dl_app_btn{
  display: flex;
  justify-content: center;
}
.dl_app .dl_app_btn .android{
  margin-left: 3%;
}

/* content_01 */
.section_01 {}
.section_01 .section_ttl{
  max-width: 258px;
  margin: 0 auto -8% auto;
}
@media only screen and (max-width: 768px) {
  .section_01 .section_ttl{
    max-width: 100%;
    width: 70%;
  }
}
/* content_02 */
.section_02 {
  padding: 8% 0;
}
.section_02 .section_ttl{
  max-width: 320px;
  margin: 0 auto -6% auto;
}
@media only screen and (max-width: 768px) {
  .section_02 .section_ttl{
    max-width: 100%;
    width: 73%;
  }
}
.slide_area{
  padding: 10% 0;
}
.flow-ttl{
  text-align: center;
  font-weight: bold;
  font-size: 1.6rem;
  padding: 5% 0;
}
.flow-slider {
  position: relative;
}
.flow-slider .slick-item {
  background: #fff;
  text-align: center;
  padding: 1.5%;
  margin: 0 1.4rem;
  text-align: center;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 10px;
}
.flow-slider .slick-arrow {
  width: 3%;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 100;
}
.flow-slider .slick-arrow.prev { left: 8%; }
.flow-slider .slick-arrow.next { right: 8%; }

.slick-dots {
  text-align: center;
  margin-top: 1rem;
  padding: 0;
}
.slick-dots li {
  display: inline-block;
  margin: 0 .5rem;
}
.slick-dots li button {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #bbb;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0;
  transition: background-color 0.3s ease;
}
.slick-dots li.slick-active button {
  background-color: #C1A536;
}
.slick-item .num{
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 1%;
}
.slick-item .name{
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 4%;
}
.slick-item .txt{
  text-align: left;
}
/* content_03 (キャンペーン詳細) */
.table{
  padding-top: 9%;
}
.table_inr{
  padding: 5% 5% 9% 5%;
}
.table .table_ttl{
  text-align: center;
  background: #9A0018;
  color: #fff;
  padding: 2% 1%;
}
.table .table_content_txt{
  font-size: 1.2rem;
  font-weight: bold;
}
.table_kikan{
  margin-bottom: 5%;
}
.cat{
  font-weight: bold;
}
.date{
  font-size: 1.2rem;
  font-weight: bold;
}
.scle{
  font-size: .85rem;
}
.kikan_caution{
  border-radius: 10px;
  padding: 4% 5%;
  font-size: .85rem;
}
.hotel_list{}
.hotel_list li{
  margin-bottom: 1%;
}
/* content_04 (キャンペーン後) */
.section_04 .section_ttl{
  max-width: 320px;
  margin: 0 auto -7% auto;
}
@media only screen and (max-width: 768px) {
  .section_04 .section_ttl{
    max-width: 100%;
    width: 85%;
  }
}
.section_04 .content_txt{
  margin-top: 6%;
}
.section_inr_box {
  padding: 6% 6% 8% 6%
}
/* content_05 (注意事項) */
.section_05 .section_ttl{
  text-align: center;
  font-weight: bold;
  font-size: 1.025rem;
  margin-bottom: 8%;
}
.precautions{
  padding: 0 5%;
}
.precautions li{
  font-size: .85rem;
  padding-left: .9rem;
  text-indent: -.9rem;
  margin-bottom: 2.5%;
}
.section_05 .chara{
  max-width: 148px;
  margin: 8% auto 0 auto;
}

/*----------------------------------------------------
	FOOTER STYLE
----------------------------------------------------*/
#footer{
  display: none;
}

@media only screen and (max-width: 768px) {
  #footer{display: block;}
  #footer .copy{
    color: #fff;
    font-size: .8rem;
    text-align: center;
    padding: 4% 0;
  }
}
