@charset "UTF-8";
body {
    /* font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic', sans-serif; */
    font-family: YakuHanJP_Narrow, "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: #333;
    -webkit-font-smoothing: antialiased;/*macでサイトのフォントが太くなるのを回避：アンチエイリアス制御*/
}

.bold{font-weight: bold;}

.wrap{width: 100%; height: auto; position: relative; }

.text-wrap a{color: #00a0d9; text-decoration: underline;}
.text-wrap a::after{
  margin: 0 0 0 3px;
  font-family: "Font Awesome 5 Free";
  content: '\f35d';
  font-weight: 900;
}

#wrapper{
  width: 100%;
  height: 100vh; z-index: 9999;
/*描画されるテキストを中央寄せにする*/
	display:flex;
	justify-content: center;
	align-items: center;
    position: relative; top: 0;
    overflow: hidden;
}
#wrapper .slide-img {width: 100%; height: 100vh;}
#wrapper .slide-img img {width: 100%; height: 100%; object-fit: cover;}
#wrapper .main-logo{position: absolute; z-index: 2; width: 90%; top: 45%; left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
 }
#wrapper .main-logo img{width: 100%;}
#wrapper .logo-el{position: absolute; z-index: 3; width: 168px; top: 74px; left: 20px; text-align: center; display: flex; justify-content: center; align-items: center;}
#wrapper .logo-el .logo-el-img{padding-left: 5%;}
#wrapper .logo-el img{width: 100%;}
#wrapper .presents{ color: white; font-size: 13px; line-height: 1.6em; position: absolute; z-index: 3; width: 100%; top: 20px; /*bottom: 8%;*/ left: 20px;}
#wrapper .date{ position: absolute; z-index: 2; width: 53%; top: 55%; left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);}
#wrapper .date img{width: 100%;}
#wrapper .cate{ position: absolute; z-index: 2; width: 62%; top: 62%; left: 50%; display: flex; justify-content: center; align-items: center;
  color: white; font-size: 16px; line-height: 1.5em;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);}
#wrapper .cate img{width: 68%; margin-right: 4px;}
#wrapper .vs{ position: absolute; z-index: 2; width: 53%; top: 71%; left: 50%; display: flex; justify-content: center; align-items: center;
  color: white; font-size: 15px; line-height: 1.5em; font-weight: bold;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);}
  #wrapper .vs img{width: 40px; margin-left: 4px;}
#wrapper .stadium{ position: absolute; z-index: 2; width: 54%; top: 75%; left: 50%; display: flex; justify-content: center; align-items: center;
    color: white; font-size: 13px; line-height: 1.5em;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);}

.header .logo-el{position: sticky; z-index: 3; width: 104px; top: 0; text-align: center; display: flex; justify-content: center; align-items: center;}
.header .logo-el .logo-el-img{padding-left: 5%;}
.header .logo-el img{width: 100%;}


@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoomUp 10s linear 0s 1 normal both;  
}
.slide-img img{
  display: block;
}

.header {width: 100%; height: auto; padding:8px 16px; position: fixed; top: 0; display: flex; justify-content:space-between; z-index: 9998; align-items:center; background-color:rgba(51,51,51,0.4); color: white;}
/* .header .logo-el{width: 52px; text-align: center; font-size: 6px; position: sticky; top: 0;} */


.contemt-wrap{width: 100%; position: relative; letter-spacing: 0.1em; line-height: 1.5em;}

.head-info-wrap{width: 100%; text-align: center; padding: 20px 0;}
.head-info-wrap h3{font-weight: bold; margin-left: 32px; font-size: 16px; display: inline-block; text-align: left;}
.head-info-wrap h3 span{font-weight: normal; color: #cdcaca;}
.head-info-wrap .info-box{width: 100%; padding: 20px 20px 0 20px; font-size: 13px; text-align: left;}
.head-info-wrap .info-headline span{ font-weight: normal;}
.head-info-wrap a{color: #00a0d9; text-decoration: underline;}

.info-wrap{width: 100%; text-align: center;padding: 30px 0;}
.info-wrap h3{font-weight: bold; margin-left: 32px; font-size: 14px; display: inline-block; text-align: left;}
.info-wrap h3 span{font-weight: normal; color: #cdcaca;}
.info-wrap h4{font-size: 14px; font-weight: bold; margin-top: 20px; text-align: left; padding: 0 20px;}
.info-wrap .info-content{width: 100%; padding: 20px; font-size: 13px; text-align: left;}
.info-wrap .info-content img{width: 100%; margin-bottom: 12px;}

.content-01{width: 100%; position: relative; z-index: 1;}
.content-01 .flex-container{ width: 100%; display: flex;}
.content-01 .content-left{width: 50%;}
.content-01 .content-left img{width: 100%; height: 100%; object-fit: cover;}
.content-01 .content-right{width: 50%; text-align: left; display: flex; align-items: center;
background: url(../images/logo-green.webp) no-repeat; 
background-size: 94%; background-position: center; 
/* background-position-x: 743px; 
background-position-y: -386px; */
}

.content-01 .content-right h3{font-weight: bold; margin-left: 32px; font-size: 16px;}
h3 .gray{font-weight: normal; color: #cdcaca;}
h3 .green{color: #063D8A;}
.head-info-wrap h3 .green{color: #063D8A;}
.content-01 .text-wrap{font-size: 13px; padding: 32px 20px;}
.content-01 .text-wrap .cate{ display: flex; align-items: center; font-weight: bold; font-size: 15px; margin-bottom: 16px;}
.content-01 .text-wrap .cate img{width: 56%; margin-right: 12px;}

.content-01-2{width: 100%; position: relative; padding: 12px 0; z-index: 1; background: #f2f2f3;}
.content-01-2 h4{font-weight: bold; margin: 0 auto; font-size: 14px; text-align: center; margin-bottom: 12px;}
.content-01-2 .img-wrap{width: 100%; padding: 0 20px; position: relative; font-size: 13px;}
.content-01-2 .img-wrap .el-sports {display: block; width: 78%;margin-top: 32px; margin-bottom: 18px;}
.content-01-2 .img-wrap .el-sports-img {position: absolute; width: 32%; right: 5px; top: -30px;}
.content-01-2 .access{width: 100%;}
.content-01-2 .program{width: 100%; margin-top: 40px; }
.content-01-2 .program .text-wrap{font-size: 13px; padding: 0 20px;}
.content-01-2 .program .img-wrap{ padding: 0 4px;}
.content-01-2.uniform-wrap{width: 100%; margin-top: 40px; text-align: center; background: white; padding: 0;}
.content-01-2.uniform-wrap .img-wrap{width: 100%; padding: 20px; font-size: 13px;}
.content-01-2.uniform-wrap .img-wrap img{width: 100%;}
.content-01-2.uniform-wrap h4{font-size: 16px;}
.content-01-2.uniform-wrap .img-wrap p,.bg-gra{font-size: 13px; margin-bottom: 20px;    display: inline-block;
  padding: 4px 12px;
  /* background: #063D8A; */
  background-image: linear-gradient(60deg, rgba(1, 36, 145, 1), rgba(9, 194, 84, 1));
  color: white;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 8px;}

.btn-wrap{width: 100%; text-align: center; margin-top: 40px;}
#g-nav-list .btn-wrap{position: relative; top: 57%;}

.content-02{width: 100%; position: relative; padding-top: 40px; z-index: 1; background: white;}
.content-02 h3{font-weight: bold; margin-left: 20px; font-size: 16px;}
.content-02 .text-wrap{font-size: 13px; padding: 20px;}
.content-02 .video-wrap {width: 100%;}
.content-02 .video-wrap  video{width: 100%;}
.content-02 .video-wrap iframe {width: 100%; height: auto; aspect-ratio: 16 / 9;}
.content-02 .el-wrap{width: 100%; }
.content-02 .el-wrap h4{font-weight:bold; text-align: center;}
.content-02 .zoom-text{text-align: center;}
.content-02 .img-wrap{width: 100%;}
.content-02 .img-wrap img{width: 100%; cursor: pointer;}
.content-02 .img-wrap img.bord{width: 72%; margin: 0 auto;}

.modaal-close {top: 68px;}
.zoom-text{font-size: 13px; color: #00a0d9; padding: 4px 12px;}

.content-03{width: 100%; position: relative; padding-top: 40px; text-align: center; z-index: 1; background: white;}

.content-03 h3{font-weight: bold; margin-left: 20px; font-size: 16px; display: inline-block; text-align: left;}
.content-03 .bnr-wrap{font-size: 13px; padding: 2%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px;    margin-bottom: 48px;}
.content-03 .bnr-wrap.disp-pc{display: none;}
.content-03 .bnr-wrap .img-150{width: 100%;}
.content-03 .bnr-wrap .img-100{width: 75.5%;}
.content-03 .bnr-wrap .img-75{width: 100%;}
.content-03 .bnr-wrap .img-50{width: 48.5%;}
.content-03 .bnr-wrap .img-30{width: 48.5%;}
.content-03 .bnr-wrap .img-20{width: 23%;}
.content-03 .bnr-wrap .img-10{width: 23%;}
.content-03 .bnr-wrap img {
  width: 100%;
  flex-grow: 1;
  object-fit: cover;
}
.content-03 .bnr-wrap .img-150,.img-100,.img-75,.img-50,.img-30,.img-20,.img-10{display: block;}
.content-03 .text-sp-wrap{width: 96%; margin: 12px 2%; letter-spacing: normal;}
.content-03 .text-sp-wrap .cate1{font-size: 13px;}
.content-03 .text-sp-wrap .cate2{font-size: 12px;}
.content-03 .text-sp-wrap .cate3{font-size: 11px;}
.content-03 .text-sp-wrap .cate4{font-size: 10px;}
.content-03 .text-sp-wrap .text-container {
  display: grid; border-top: 1px solid #00a0d9;
  grid-template-columns: repeat(2, 1fr); /* Three equal-width columns */
  gap: 8px; /* Adjust the gap between columns */
}
.content-03 .text-sp-wrap .section {
  padding: 12px 0; text-align: left; width: 100%; line-height: 1.8em;
}

/*セロテープ風*/
.box5-6{
	background-color: #f2f2f3; /* ボックス背景色 */
	padding:2.5em 0; /* ボックス内側余白 */
  margin-top: 40px;
	position:relative; /* 配置(ここを基準に) */
}
.box5-6 .box-title {
	/* background-color: rgb(27 178 43 / 70%); */
  background-image: linear-gradient(60deg, rgba(1, 36, 145, .7), rgba(9, 194, 84, .7));
	border-left: 2px dotted rgb(255 255 255 / .5);/* ギザギザ左*/
	border-right: 2px dotted rgb(255 255 255 / .5);/* ギザギザ右*/
	box-shadow: 0 0 5px rgb(0 0 0 / .1); /*テープ影*/
	transform: rotate(-2deg);/*テープの傾き*/
	font-size: 18px;/*タイトル文字の大きさ*/
	color: #fff; /*タイトル文字色 */ font-weight: bold;
	padding: 10px 20px;/*タイトルの余白*/
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;/*配置(ここを動かす)*/
	top: -15px; /*上からの距離*/
	left: 20px; /*左からの距離*/
}
.box5-6 .box-headline{padding: 0 20px;}
.box5-6 .box-title span{font-weight: normal;}
.box5-6 .info-wrap{margin: 0 auto; margin-top: 32px; width: 90%; background: white; border: 2px solid #089708; padding: 16px; text-align: left;}
.box5-6 .head-sub{font-size: 20px; font-weight: bold; margin-bottom: 12px; text-align: center; color: #063D8A;}
.box5-6.el-spo {background: white; margin-top: 60px;}
.box5-6.el-spo.el-spo2 {background: #f2f2f3; padding-top: 60px;}
.box5-6.el-spo.el-spo2 .box-title{line-height: 1.2em;}
.box5-6.el-spo .pre-flex .pre-wrap .img-wrap{margin-top: 0;}
.box5-6.el-spo .pre-flex .pre-wrap { background: #f2f2f3;}
.video-wrap.el-spo-movie{ margin-top: 24px;}
.video-wrap.el-spo-movie .head-title{ font-weight: bold; margin-bottom: 12px; text-align: center; }
.box5-6.el-spo .qr-wrap{display: flex; justify-content: center; margin-top: 12px; gap: 4%;}
.box5-6.el-spo .qr-wrap a{display: block; width: 50%; text-align: center;}
.box5-6.el-spo .qr-wrap img{width: 100%; }
.box5-6.el-spo .insta-link{display: block; width: 100%; text-align: center; margin-top: 12px; color: #00a0d9; text-decoration: underline;}
.box5-6.el-spo .insta-link::after{
  margin: 0 0 0 3px;
  font-family: "Font Awesome 5 Free";
  content: '\f35d';
  font-weight: 900;
}
.box5-6 .info-wrap.added{text-align: center; font-weight: bold; margin-bottom: 32px;}
.box5-6 .info-wrap.added span{color: #063D8A;}

.sns-wrap{width: 100%; text-align: center; margin: 12px auto; margin-top: 20px;}
.sns-wrap .sns-title{font-size: 16px; font-weight: bold; }

.pre-flex {margin-top: 32px;}
.pre-flex .pre-wrap{margin: 0 20px 24px 20px; padding: 16px; border-radius: 8px; background: white;}
.pre-flex .pre-wrap .pre-title{display: flex; align-items: center; font-size: 16px; font-weight: bold; }
.pre-flex .pre-wrap .pre-title .abc-box{font-size: 16px; padding: .4em; padding-bottom: .6em; font-size: 36px;
  color: white; background: url(../images/bg-pre-bl.webp) no-repeat;
background-size: contain; background-position: center; margin-right: 8px;}
.pre-flex .pre-wrap .num-of-people{font-size: 24px; font-weight: bold; line-height: 1.3em; text-align: center; margin: 12px auto; color: #FAC100;
  text-shadow: rgb(102, 102, 102) 2px 0px 0px, rgb(102, 102, 102) 1.75517px 0.958851px 0px, rgb(102, 102, 102) 1.0806px 1.68294px 0px, rgb(102, 102, 102) 0.141474px 1.99499px 0px, rgb(102, 102, 102) -0.832294px 1.81859px 0px, rgb(102, 102, 102) -1.60229px 1.19694px 0px, rgb(102, 102, 102) -1.97998px 0.28224px 0px, rgb(102, 102, 102) -1.87291px -0.701566px 0px, rgb(102, 102, 102) -1.30729px -1.5136px 0px, rgb(102, 102, 102) -0.421592px -1.95506px 0px, rgb(102, 102, 102) 0.567324px -1.91785px 0px, rgb(102, 102, 102) 1.41734px -1.41108px 0px, rgb(102, 102, 102) 1.92034px -0.558831px 0px;
}

.pre-unit{width: 50%;}

.pre-flex .pre-wrap .pre-title .img-wrap img{width: 100%;}
.pre-flex .pre-wrap .num-of-people span{font-size: 20px; color: #fff;}
.pre-flex .pre-wrap .img-wrap{display: flex; gap: 2%; margin-top: 24px;}
.pre-flex .pre-wrap .text-wrap{padding: 0; margin-top: 16px;}
.box5-6.interview .pre-flex .pre-wrap .img-wrap{margin-top: 16px;}
.pre-flex .pre-wrap .pre-title .img-wrap.number{width: 32px; margin-right: 12px; margin-top: 0;}
.box5-6 .btn-text{width: 100%; text-align: center; margin-top: 20px; }

.slideshow-slide{position: relative; width: 100%; height: 300px; overflow: hidden; padding: 0;}
.slideshow-slide li{
  list-style: none;
  width: 100%;
  height: 100%;
  transition: all 1s ease;
  top: 0;
  right: 0;
}
.slideshow-slide li.slide{
  top: 0;
  right: 100%;
  z-index: 10;
}
.slideshow-slide li:first-of-type{
  display: block!important;
}
.slideshow-slide li img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.btn-pre{
  width:280px;
  height:60px;
  line-height:52px;
  margin: auto;
  margin-top: 40px;
}
.btn-pre .btn-link{
  display:block;
  width:100%;
  height:100%;
  text-decoration: none;
  background:#063D8A;
  text-align:center;
  border:5px solid #063D8A;
  color:#FFFFFF;
  font-size:16px;
  font-weight:bold;
  border-radius:35px;
  -webkit-border-radius:35px;
  -moz-border-radius:35px;
  transition: all 0.5s ease;
}
.btn-pre a:hover{
  background:#FFFFFF;
  color:#063D8A;
  margin-left:0px;
  margin-top:0px;
  border:5px solid #FFFFFF;
  box-shadow:none;
}


 .openbtn{
	position: relative;
  right: 0; top: 0;
	cursor: pointer;  font-size: 12px; text-align: center;
    width: 48px;
    height:32px; z-index: 999;
}
.openbtn p{position: absolute; bottom: 0; text-align: center; width: 100%; color: #ddd;}

/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    height: 2px;
    border-radius: 2px; right: 0;
	background: #fff;
  }


.openbtn span:nth-of-type(1) {
	top:0px;	
  	width: 100%;
}

.openbtn span:nth-of-type(2) {
	top:8px;
  	width: 100%;
}


/*activeクラスが付与されると線が回転して×になる*/

.openbtn.active span:nth-of-type(1) {
    top: 10px;
    left: 22px;
    transform: translateY(6px) rotate(-135deg);
    width: 50%;
}

.openbtn.active span:nth-of-type(2) {
	top: 22px;
    left: 22px;
    transform: translateY(-6px) rotate(135deg);
    width: 50%;
}

.openbtn.active p{
    opacity: 0;
}

  /*========= ナビゲーションのためのCSS ===============*/
  #about,#movie,#sponsorship{position: relative; top: -94px;}

  #g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 998;
    /*ナビのスタート位置と形状*/
  top:0;
    right: -120%;
  width:100%;
    height: 100vh;/*ナビの高さ*/
  background:linear-gradient(28deg, rgb(23 85 105 / 88%), rgb(16 186 17 / 68%));
    /*動き*/
  transition: all 0.6s;
}
#g-nav .main-logo{width: 100%; position: absolute; text-align: center; line-height: 1.6em;
  top: 16%;
  left:50%;
  transform: translate(-50%,-50%);
  }
#g-nav .main-logo img{width: 100%;}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:44%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
  list-style: none;
    text-align: center;
}

#g-nav li a{
  color: #fff;
  text-decoration: none;
  padding:20px 0;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
}


.fadeIn{
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}



.icon-wrap {width: 100%; margin: 130px auto 0 auto; text-align: center;}
.icon-wrap img {width: 40px;}
.icon-wrap.innavi {position: relative; top: 53%;}
#navi-close {color: white; position: relative; top: 70%; text-align: center; cursor: pointer;}

#footer {width: 100%; height: auto; min-height: 270px; position: relative; text-align: center; background: url(../images/footer-img.webp) no-repeat; background-position: top left; background-size:cover ; line-height: 1.5em; padding: 30px 16px; margin-top: 60px; color: white; /*background-color: #1b2265;*/}
.footer-text {font-weight: 600; font-size: 16px; text-align: left;}
.footer-content-wrap {display: flex; margin: 20px auto; justify-content: space-between; margin-bottom: 50px;}
#footer address { font-size: small; text-align: left; }
.footer-link {display: flex; flex-direction: column; align-items: center; width: 100%;}
.footer-link .logo-el{position: sticky; z-index: 3; width: 148px; top: 0; text-align: center; display: flex; justify-content: center; align-items: center;}
.footer-link .logo-el .logo-el-img{padding-left: 5%;}
.footer-link .logo-el img{width: 100%;}

span.smoothText {
    overflow: hidden;
    display: block; color: white; font-size: 11px;
}


.message_wrap {width: 100%; margin-top: 60px;}
.video-wrap {width: 100%;}
.video-wrap iframe {width: 100%; height: auto; aspect-ratio: 16 / 9;}


/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#888;
}


.js-text-effect span{
    display: inline-block;
    opacity: 0;
    visibility: visible;
    transform: rotateY(90deg);
}


  #page-top a{
    display: flex;
    justify-content:center;
    align-items:center;
    background-color:rgba(177,177,177,0.4);
    border-radius: 20px;
    width: 40px;
    height: 40px;
    color: #fff;
    text-align: center;
    text-transform: uppercase; 
    text-decoration: none;
    font-size:0.8rem;
    transition:all 0.3s;
  }
  
  /*リンクを右下に固定*/
  #page-top {
    position: fixed;
    right: 18px;
    bottom:90px;
    z-index: 2;
      /*はじめは非表示*/
    opacity: 0;
    transform: translateY(100px);
  }
  
  /*　上に上がる動き　*/
  
  #page-top.UpMove{
    animation: UpAnime 0.5s forwards;
  }
  @keyframes UpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  
  /*　下に下がる動き　*/
  
  #page-top.DownMove{
    animation: DownAnime 0.5s forwards;
  }
  @keyframes DownAnime{
    from {
      opacity: 1;
    transform: translateY(0);
    }
    to {
      opacity: 1;
    transform: translateY(100px);
    }
  }
  .scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	bottom:-17px;
	height:50px;
  opacity: 0.9;
  z-index: 99;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}


.disp-pc { display: none; }


/* for tablet */
@media (min-width: 481px) {
  .join_us img { left: 200px;}
  form.confirm {width: 60%;}
}

/* for pc */
@media (min-width: 960px) {
  .disp-sp { display: none; }
  .disp-pc{ display: inline-block;}
  #about,#movie,#sponsorship{position: relative; top: 0;}
  #wrapper{
    max-height: 1080px;
      .main-logo{width: 64%; top: 44%;
      }
      .date{width: 400px; top: 65%;
      }
      .cate{top: 76%; font-size: 20px;
            width: 20%;}
      .vs{display: none;}
      .stadium{top: 84%; font-size: 20px;}
      .main-pc{width: 100%; height: 100vh;
        img{width: 100%; height: 100%; object-fit: cover;}
      }
      .logo-el{display: none;
      }      
      .presents{top: 48px; left: -56px; text-align: right; font-size: 16px;}
  }
  .navi-pc-fixed{
    position: fixed; top: 0; left: 0; width: 234px; height: 100vh; max-height: 1080px; background-color:rgba(51,51,51,0.4); border-right: solid 1px rgba(255,255,255,0.5); display: flex;
    flex-direction: column;
    align-items: center; padding: 40px 0; justify-content: space-between; z-index: 9999;
    .pc-navi-wrap{ margin-top: 40px;
      .pc-navi-link{display: block; color: white; font-size: 18px; text-align: center; margin-bottom: 24px;
        span{font-size: 14px; color: #cdcaca;}
      }
      .pc-navi-link.el-blue{color: #063D8A;}
    }
    .date{position: static; width: 200px;
      img{width: 100%;};
      .vs{font-size: 16px; font-weight: bold; margin-top: 12px; color: white; display: flex; align-items: center; justify-content: center;
        img{width: 38px; margin-left: 4px;}
      }
      .stadium{font-size: 15px; margin-top: 12px; line-height: 1.6em; color: white;}
    }
    .logo-el{ z-index: 3; width: 192px; top: 44px; left: 20px; text-align: center; display: flex; justify-content: center; align-items: center;
      .logo-el-img{padding-left: 5%;}
      img{width: 100%;};
      a{color: white; font-size: 14px;}
    }
  }
  .slideshow-slide{height: 100vh; position: sticky; top: 0;}
  .contemt-wrap{ line-height: 1.8em;}

  .head-info-wrap {margin-bottom: 60px; border-bottom: 1px solid #ccc;}
  .head-info-wrap .info-box{font-size: 18px;}

.info-wrap{padding-top: 60px; max-width: 862px; margin: auto; margin-bottom: 60px;}
.info-wrap h3{font-size: 20px; }
.info-wrap h3 span{font-weight: normal; color: #cdcaca;}
.info-wrap h4{font-size: 18px; text-align: center;}
.info-wrap .info-content{ font-size: 16px;}
.box5-6.el-spo .info-wrap{max-width: 600px;}
.box5-6.el-spo .info-wrap .qr-wrap{width: 50%;
  margin-right: auto;
  margin-left: auto;}
  .content-01{
    .flex-container{ display: flex; min-height: 100vh; }
    /* .content-left{ height: 100vh;} */
    .content-right{ display: block; padding: 40px; padding-top:100px; /* height: 100vh; */ background-size: 80%;
      overflow-y: scroll;
      -ms-overflow-style: none; /* IEとEdge用にスクロールバーを非表示 */
      scrollbar-width: none; /* Firefox用にスクロールバーを非表示 */
      .content-right::-webkit-scrollbar {
        display: none; /* Chrome、Safari、Opera用にスクロールバーを非表示 */
      }
      h3{ font-size: 20px;}
      .access{width: 100%; margin-top: 48px;
        h4{font-size: 18px; font-weight: bold; text-align: center; margin-bottom: 20px;}
        .img-wrap{width: 100%; padding: 0 20px; position: relative; font-size: 18px;}
        .img-wrap .el-sports {display: block; width: 78%;margin-top: 40px; margin-bottom: 40px;}
        .img-wrap .el-sports-img {position: absolute; width: 32%; right: 5px; top: -30px;}
        .img-wrap.el-spo{background: #f2f2f3; padding-bottom: 16px;}
      }
      .program{width: 100%; margin-top: 80px; margin-bottom: 40px;
        h4{font-size: 18px; font-weight: bold; text-align: center; margin-bottom: 20px;}
        .img-wrap{width: 100%; cursor: pointer; background-color: white; padding: 12px; 
          img{width: 100%;}
          .text-wrap{padding: 12px 0 0 20px; margin: 0;}
        }
      }
    }
    .text-wrap{font-size: 18px; padding: 20px; margin-top: 20px;}
  }
 .img-50-inner2{display: block; margin-top: 8.5%;}
 .content-03 .bnr-wrap.disp-sp{display: none;}

  .content-01-2{padding-left: 234px; display: flex; align-items: baseline; padding-top: 0; padding-bottom: 60px;
    h4{font-size: 18px;}
    .access{width: 50%; padding: 12px;}
    .program{width: 50%; padding: 12px; 
      .text-wrap{ margin-bottom: 20px; font-size: 18px;}
    }
  }
  .content-01-2.disp-sp{display: none;}
  .content-01 .text-wrap .cate{ font-size: 18px;}
  .content-01-2.uniform-wrap .img-wrap{margin-bottom: 60px;}
  .content-01-2.uniform-wrap .img-wrap p{font-size: 20px;}

  .content-02{padding-left: 234px;
    .flex-box{display: flex; align-items: center; padding-left: 60px; padding-bottom: 40px; }
    h3{ font-size: 20px;}
    .text-wrap{font-size: 18px; padding-left: 100px;}
    .el-wrap{width: 50%; margin: 80px auto 0 auto;
      h4{font-size: 18px;}
    }
  }
  .box5-6{padding-top: 5em; font-size: 18px;}
  .box5-6 .box-title{font-size: 40px;}
  .pre-flex{display: flex; flex-wrap: wrap;}
  .pre-flex .pre-wrap{width: 48%; margin: 0 1% 24px 1%;}
  .pre-flex .pre-wrap .img-wrap{display: block; text-align: center;}
  .pre-flex .pre-wrap .img-wrap .pre-uni{width: 74%; margin:0 auto 32px auto;display: flex;
        flex-direction: column; align-items: center;}
  .pre-flex .pre-wrap .pre-title{font-size: 24px; line-height: 1.3em;}
  .pre-flex .pre-wrap .pre-title .abc-box{font-size: 48px;}
  .pre-flex .pre-wrap .num-of-people{font-size: 40px;}

  .info-wrap-title{font-size: 20px; text-align: center;}

  .content-02 .img-wrap img.bord{width: 32%;}

  .content-03 .bnr-wrap.disp-pc {display: flex;}
  
  .content-03{width: 100%; padding-left: 234px;
        h3{ font-size: 20px; margin-top: 30px;}
    .bnr-wrap{padding: 1%; gap: 8px; margin-top: 40px;
      .img-150 { width: 35.5%; }
      .img-100 { width: 26.8425%; }
      .img-75 { width: 35.5%; }
      .img-50 { width: 19.4%; }
      .img-30 { width: 17.4475%; }
      .img-20 { width: 8.165%; }
      .img-10 { width: 8.165%; }
    }
    .text-wrap{font-size: 18px; padding-left: 100px;}
    .text-sp-wrap{width: 96%; margin: 12px 2%; letter-spacing: normal;
      .cate1{font-size: 16px;}
      .cate2{font-size: 15px;}
      .cate3{font-size: 14px;}
      .cate4{font-size: 13px;}
      .text-container {
        display: grid; border-top: 1px solid #00a0d9;
        grid-template-columns: repeat(3, 1fr); /* Three equal-width columns */
        gap: 8px; /* Adjust the gap between columns */
      }
      .section {
        padding: 12px 0; text-align: left; width: 100%; line-height: 1.8em;
      }
    }
  }

  /* .modaal-gallery-item.is_active img {width: auto !important;} */
.modaal-close {top: 68px;}
.zoom-text{font-size: 16px; color: #00a0d9; padding: 4px 12px;}
#footer{min-height: 600px;}
#footer .logo-el{width: 400px; padding-top: 48px;}

.scrolldown1{
  /*描画位置※位置は適宜調整してください*/
left:50%;
bottom:-5px;
height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
  /*描画位置*/
left:-19px;
font-size: 0.9rem;
}

}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
  .modaal-gallery-item.is_active img {width: 180% !important;}
}