@charset "UTF-8";
/* CSS Document */
#con01{
  background: #005AB5;
}

/*******************************
共通
********************************/

.top{
  background: url(../images/con01_awa.svg) center top -140px no-repeat;
  position: relative;
}


#con01 h2 {
  color: #FFF; font-weight: bold;
  height: 80px;
  border-bottom: 1px solid #FFF;
  line-height: 80px;
  padding-left: 40px;
  position: absolute;
  top: 0;
}
#con01 h2 p{
  background: url(../images/con01_i.svg) no-repeat left center;
  text-indent: 45px;}
.top {color: #FFF; padding-top: 65px;}
.top .mida{
  font-size: 60px;
  font-weight: 700;
  text-align: center;
  font-family: "heisei-mincho-std", serif;
  line-height: 76px;
  margin-bottom: 38px;
  filter: drop-shadow(0 0 30px #FFF);
  transform: scale(1.5);
  opacity: 0;
  transition: 1s;
}

.top .mida.mov{
  opacity: 1;
  transform: scale(1);}

.top .lead{
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  line-height: 40px;
  padding-bottom: 200px;
  opacity: 0;
  transform: translateY(10px);
  transition: 1s;
  transition-delay: 1s;
}
.top .lead.mov{
  opacity: 1;
  transform: translateY(0);}

.rule{
  margin-top: -160px;
  background: #67B5D6;
  clip-path: polygon(0 160px, 100% 0, 100% 100%, 0% 100%);
  display: flex;
  justify-content: center;
  padding-left: 80px;
  padding-top: 200px;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.rule h3{
  font-size: 60px;
  font-weight: 700;
  line-height: 1em;
  padding-top: 30px;
  font-family: "heisei-mincho-std", serif;}

.rule h3 .ja{
  margin-bottom: 15px;
  text-align: center;
  filter: drop-shadow(0 0 30px #FFF);
}

.rule h3 .en{
  font-size: 18px;
  line-height: 18px;
  font-family: 'Marcellus',sans-serif;
  color: #002D76;
  font-weight: 100;
  width: 100%;
  letter-spacing: 1.02em;
  white-space: nowrap;
  text-align: center;
}
.rule_lead{width: 390px;
  position: sticky;
  top: 0;
  transform: translateX(-10px);
  opacity: 0;
  transition: 1s;
}
.rule_lead.mov{
  opacity: 1;
  transform: translateX(0);
}

.rule_lead .txt{
  border-top: 1px solid #002D76;
  color: #002D76;
  font-size: 18px;
  font-weight: bold;
  border-right: 1px solid #002D76;
  padding-top: 28px;
  padding-right: 20px;
  line-height: 40px;
  position: relative;
  margin-bottom: 30px;
}

.rule_lead .txt p{
  width: 370px;
}

.rule_main{
  margin-left: 100px;
  /* overflow: hidden; */
  margin-right: -200px;
}

.rule_lead ul li{
  margin-bottom: 15px;
  transition: .3s;
}
.rule_lead ul li:hover{
  transform:translateX(5px);
}
.rule_main{
  position: relative;
}
.rule_main:before{
  content: '';
  width: 12px;
  height: 3120px;
  background: #1079AB;
  left: -6px;
  top: 20px;
  z-index: 1;
  display: block;
  position: absolute;
}

#rule01,#rule02,#rule03{
  position: relative;
}


.rule_main .day1,
.rule_main .day2,
.rule_main .day3,
.rule_main .day4,
.rule_main .day5{
  position: absolute;
  left: -60px;
  z-index: 1;
  opacity: 0;
  transform: scale(0) rotate(-180deg);
  transition: .5s;
  transition-delay: .3s;
}
.rule_main .day1.mov,
.rule_main .day2.mov,
.rule_main .day3.mov,
.rule_main .day4.mov,
.rule_main .day5.mov{
  opacity: 1;
  transform: scale(1) rotate(0);

}


.rule_main .day1{top: 150px;}
.rule_main .day2{top: 490px;}
.rule_main .day3{top: 160px;}
.rule_main .day4{top: 550px;}
.rule_main .day5{top: 170px;}

.rule_main  #rule01 .day1 img,
.rule_main  #rule01 .day2 img,
.rule_main  #rule02 .day3 img,
.rule_main  #rule02 .day4 img,
.rule_main  #rule03 .day5 img{
  width:120px !important;

}

/***********************************************************************
「★PC版 CSS★」ブラウザの幅が769px以上ならここの記述が有効になる
**********************************************************************/
@media only all and (min-width: 769px) {


 #con01 h2 {font-size: 22px;}

#rule01,#rule02{margin-bottom: -50px;}


}


/***********************************************************************
「★SP版 CSS★」ブラウザの幅が750px未満ならここの記述が有効になる
**********************************************************************/
@media only all and (max-width: 750px) { 
.top .lead{font-size: 28px;
  line-height: 2em;
 text-align: left;}
 #con01{width: 100%;}
 
 #con01 h2 {font-size: 22px; background: none;}

 .top .lead{width: 650px; margin: 0 auto;
}

 .top {
    background: url(../images/con01_awa.svg) center top 280px no-repeat;
    position: relative;
}
 .rule{padding: 0; padding-top: 100px;}
 .rule h3 .ja{text-align: right;}
 .rule{display: block;}
 .rule_lead{
  width: 650px;
  margin: 0 auto;
  position: relative;
 }
 #con01 h2 p{padding-left: 85px; font-size: 38px; text-indent: 0; line-height: 70px; background-size:70px auto; height: 70px; background-position: left top; position: relative; left: 60px; top: -0px;}
 
#con01 h2{
  width: auto;margin: 0 auto;position: relative;
  padding-bottom: 15px;
  display: block;
  width: 650px;
  margin-bottom: 50px;
}
 .rule_lead .txt{font-size: 28px;  line-height: 2em;}.rule h3 .en {font-size: 30px;
 }
#rule01,#rule02{margin-bottom: -50px;}
.rule_main:before{height: 3120px;}

.menu{
  display: block;
  
}


.rule{padding-bottom: 340px;}
.menu h2{display: none;}
.menu .logo{display: none;}
#countdown_sp{background:none;}
#countdown_sp p{
  display: none;
}
#countdown_sp::before{
  top: 20px;
}
    .menu_right {
        background: url(../images/menu_boat_sp.svg) center bottom 80px no-repeat ;}

    /* メニュー本体 */
    .menu_right_wrapper {
      display: block;
      height: 100%;
      position: relative;
      top: 0;
      z-index: 100;
      margin-top: 10px;
      margin-top: -300px;
    }
    .menu_right{
      position: relative;
    }
}



#countdown_sp  .text::before,
#countdown_sp  .text::after{
  display: none;
}