@charset "UTF-8";
/* CSS Document */

.event{
  background-attachment: fixed;
  
  width: 100%;
  height: 100%;
}
.event::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(../images/con03_bk.jpg) center center;
  background-size: cover;
  position: fixed;
  transform: scale(1.1);
  opacity: 0;
  left: 0;
  top: 0;
  transition: 1.5s;
} 
.event.mov::before{
  opacity: 1;
  transform: scale(1);
}

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

#con03 h2 {
  color: #FFF; font-weight: bold;
  height: 80px;
  line-height: 80px;
  position: relative;
  top: 0;
  width: 100%;
  margin-bottom: 25px;
}

#con03 h2::before{
  content: '';
  width: calc(100% + 200px);
  height: 1px;
  position: absolute;
  bottom: 0;
  right: 0;
  background: #FFF;
}

#con03 h2 p{
  background: url(../images/con03_i.svg) no-repeat left center;
  text-indent: 45px;
}
#con03 .eve_wrap{
  margin-left: 30px;
}

#con03 .left{
  transform: translateX(-15px);
  opacity: 0;
  transition: 1s;
}
#con03 .left.mov{
  transform: translateX(0px);
  opacity: 1;
}

#con03 .eve_wrap .day{
  font-size: 130px;
  font-weight: 900;
  font-style: oblique;
  font-family: 'Roboto',sans-serif;
  color: #FFF;
  margin-bottom: -30px;
}
#con03 .eve_wrap .day .week{
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 30px;
  background: #FFF;
  border-radius: 100%;
  margin-left: 10px;
  position: relative;
  top: -15px;
  color: #000;
  font-style: normal;
}
#con03 .eve_wrap .day .week::before{
  content: '';
  background: url(../images/con03_shibuki.svg);
  width: 136px;
  height: 96px;
  position: absolute;
  right: -150px;
  bottom: 0;
}

#con03 .week.blue{color: #005AB5 !important;}
#con03 .week.red{color: #FA1A27 !important;}


#con03 .select_day{width: 326px; margin-bottom: 20px;}
#con03 .select_day li{margin-bottom: 5px;}
#con03 .select_day li a {
  display: block;
  background: url(../images/con03_arrow.svg) right 35px center no-repeat #05293A;
  text-align: center;
  color: #FFF;
  border-radius: 30px 3px 30px 3px;
  text-decoration: none;
  line-height: 80px;
  font-family: 'Roboto',sans-serif;
  font-weight: 900;
  font-size: 48px;
  transition: .3s;
}

#con03 .select_day li a:hover{
  transform: translateX(5px);
}

#con03 .select_day li .week{
  display: inline-block;
  width: 26px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  font-size: 16px;
  background: #FFF;
  position: relative;
  border-radius: 100%;
  margin-left: 10px;
  top: -5px;
  color: #000;
  font-style: normal;
  font-weight: bold;
}

.hash{
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}

.hash li{
  line-height: 38px;
  padding: 0 15px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-size: 20px;
  cursor: pointer;
  color: #DCFF00;
  background: #05293A;
}

.hash li.active{
  background: #DCFF00;
  color: #000;
}
.hash li.active{transform: translate(3px,3px);}
.day_wrap{
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 50px;
  gap: 20px; /* お好みの間隔 */
  filter: drop-shadow(0 24px 36px rgba(0,0,0,0.3));
  opacity: 0;
  transition: 1s;
  transform: translateX(15px);
}

.day_wrap.mov{
  opacity: 1;
  transform: translateY(0);
}

.day_wrap .day{width: 100%;}
#con03 .eve_wrap section{
  width: 430px;
  background: #FFF;
}

.eve_wrap section {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: block; /* 初期状態 */
}

/* アニメーションで非表示状態へ */
.eve_wrap section.fadeout {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

/* アニメーション開始用（fadein） */
.eve_wrap section.fadein {
  opacity: 0;
  transform: scale(1); /* 逆に大きくしてから縮むと動きがリッチ */
}

/* 表示状態へ */
.eve_wrap section.show {
  opacity: 1;
  transform: scale(1);
  display: block;
}

/* 完全に非表示にする状態 */
.eve_wrap section.hidden {
  display: none !important;
}

/*日付処理*/
.day_wrap {
  opacity: 1;
  transform: translateX(0px);
}

.day_wrap.fadeout {
  opacity: 0;
  transform: translateX(15px);
  pointer-events: none;
}

.day_wrap.fadein {
  opacity: 0;
  transform: translateX(15px);
}

.day_wrap.show {
  opacity: 1;
  transform: translateX(0px);
}
.day_wrap.hidden{
  display: none;
}

#con03 .eve_wrap .eve_data{
  padding: 25px;
}
#con03 .eve_wrap section .img img{width: 100%;}
#con03 .eve_wrap section .hash{margin-bottom: 12px; pointer-events: none;}
#con03 .eve_wrap section .hash li{
  font-size: 16px;
  line-height: 25px;
  background: #DCFF00;
  color: #000;
}

#con03 .eve_wrap section .mida{
  font-size: 28px;
  font-weight: bold;
  line-height: 1.2em;
  color: #FA1A27;
  margin-bottom: 20px;
}

#con03 .eve_wrap section p{
  font-size: 20px;
  line-height: 1.5em;
}

#con03 .eve_wrap section p .red{ color: #920000;}
#con03 .eve_wrap section p .gray{ color: #6c6c6c;}
#con03 .eve_wrap section p .small{font-size: 0.9em;}

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

body{background:  #EB1623;}

 #con03 h2 {font-size: 22px;}
#con03 .event{
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

 #con03 .left{
  position: relative;
  width: 326px;
  position: sticky;
  top: 20px;
 }

 #con03 .event{
  display: flex;
  justify-content: center;
  padding-top: 30px;
 }

 #con03 .eve_wrap{
  width: 880px;
 }
.hash li:hover{
  background: #DCFF00;
  color: #000;
}

}


/***********************************************************************
「★SP版 CSS★」ブラウザの幅が750px未満ならここの記述が有効になる
**********************************************************************/
@media only all and (max-width: 750px) { 


 #con03{width: 100%;}
 
 #con03 h2 {font-size: 22px; background: none;}

 #con03 h2 p{padding-left: 85px; font-size: 38px; text-indent: 0; line-height: 70px; background-size:70px auto; height: 96px; background-position: left top; position: relative; left: 60px; top: -0px;}
 
#con03 h2{
  width: auto;margin: 0 auto;position: relative;
  padding-bottom: 15px;
  display: block;
  width: 650px;
  margin-bottom: 25px;
  border-bottom: 1px solid #FFF;
}
.event::before{
  display: none;
}
.event{
  background: url(../images/con03_bk.jpg) center center;}

#con03 h2::before{
  display: none;
}

#con03 .left{
  margin-bottom: 30px;
  padding-top: 50px;
}
#con03 .eve_wrap{margin: 0 auto; width: 720px;}
#con03 .eve_wrap .day{
  margin-left: 25px;
  margin-bottom: -30px;
}
#con03 .select_day li .week{width: 36px; height: 36px; line-height: 36px; font-size: 22px;}
#con03 .select_day li a{line-height: 100px; font-size: 66px; text-indent: -35px;}
#con03 .select_day li a .week{
  text-indent: 0;
}
#con03 .select_day{
  width: 650px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 30px auto;
  flex-wrap: wrap;
}
#con03 .select_day li{width: 320px;}

.hash{width: 650px; margin: 0 auto;}
.hash li{line-height: 50px; font-size: 28px;}

#con03 .eve_wrap section{ width: 100%;}
#con03 .eve_wrap section .hash li{font-size: 20px; line-height: 34px;}

#con03 .eve_wrap section .mida{font-size: 48px;}
#con03 .eve_wrap section p{font-size: 28px;}

#con03 .eve_wrap .eve_data{padding: 35px;}

.menu{
  display: block;
  
}


.event{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;
}
#countdown_sp  .text::before,
#countdown_sp  .text::after{
  display: none;
}

    .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;
    }
}