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

main {
	font-family:"M PLUS Rounded 1c", serif;
}

.inner {
	max-width:1200px;
	margin: 30px auto;
	padding: 50px 0 50px;
}

@media only screen and (max-width:1300px){
.inner {
	width:80%;}
}

@media only screen and (max-width:1100px){
.inner {
	width:90%;}
}

@media only screen and (max-width:767px){
.inner {
	width:80%;
	margin:30px auto;
	padding:50px 0 60px;
}	
}

.parallax-box {
	clip-path: inset(0);
	width:100%;
	margin:auto;
	height: 85vh;
	padding: 16px;
	box-sizing:border-box;
	color: #fff;
}

.parallax-box img.parallax-box-logo {
	width:600px;
	position: absolute;
	bottom: 28vh;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-webkit-filter: drop-shadow(0px 3px 10px rgba(46, 49, 146, 0.8));
	/* SafariなどのWebkitブラウザ用 */
	filter: drop-shadow(0px 3px 10px rgba(46, 49, 146, 0.7));
	mix-blend-mode:hard-light;
}

.parallax-box::after {
  content: '';
  position: fixed;
  top:50px;
  left: 0;
  z-index:-10;
  width:100%;
  height:90vh;
  background-image: url(../img/main/main-img-3000.webp);
  background-repeat:no-repeat;
  background-size:100%;
}


@media only screen and (max-width:1500px){
.parallax-box::after {
  background-image: url(../img/main/main-img-2000.webp);
}
}

@media only screen and (max-width:1200px){
.parallax-box::after {
  background-image: url(../img/main/main-img-1500.webp);
}
}

@media only screen and (max-width:1000px){
.parallax-box {
	height:75vh;
}
.parallax-box img.parallax-box-logo {
	width:55%;
	bottom:35vh;
}
}

@media only screen and (max-width:1024px){
.parallax-box {
	height: 61.5vh;
}
.parallax-box img.parallax-box-logo {
	width:55%;
	bottom: 50vh;
}
}

@media only screen and (max-width: 930px){
.parallax-box {
	height: 69vh;
}
.parallax-box img.parallax-box-logo {
	width:55%;
	bottom:40vh;
}
}

@media only screen and (max-width:880px){
.parallax-box img.parallax-box-logo {
	width:55%;
	bottom:40vh;
}
}

@media only screen and (max-width:820px){
.parallax-box {
	height: 58vh;
}
.parallax-box img.parallax-box-logo {
	width:55%;
	bottom: 51vh;
}
}

@media only screen and (max-width: 767px){
.parallax-box {
	height: 65vh;
}
.parallax-box::after {
  background-image: url(../img/main/main-img-sp.webp);
}
.parallax-box img.parallax-box-logo {
	width:60%;
	bottom: 43vh;
}
}

@media only screen and (max-width: 680px){
.parallax-box {
	height: 54vh;
}
.parallax-box img.parallax-box-logo {
	width:60%;
	bottom: 55vh;
}
}

@media only screen and (max-width:480px){
.parallax-box {
	height: 52vh;
}
.parallax-box img.parallax-box-logo {
	width: 75%;
	bottom:48vh;
}
}

@media only screen and (max-width:390px){
.parallax-box img.parallax-box-logo {
	bottom:45vh;
}	
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation: landscape){
.parallax-box {
        height: 90vh;
}
.parallax-box img.parallax-box-logo {
	bottom:27vh;
}
}


@media only screen and (min-device-width:844px) and (max-device-width:932px) and (orientation: landscape){
.parallax-box {
	height:100vh;
}
.parallax-box::after {
  top:20px;
  height:200vh;
}
.parallax-box img.parallax-box-logo {
	bottom:14vh;
}
}

@media only screen and (min-device-width:375px) and (max-device-width:667px) and (orientation: landscape){
.parallax-box {
	height:100vh;
}
.parallax-box::after {
  top:20px;
  height:200vh;
}
.parallax-box img.parallax-box-logo {
	bottom:18vh;
}
}


/* スケジュール */
.top-schedule {
	background:#2e3192;
	width:700px;
	position:relative;
	z-index:2;
	margin:-100px auto 0;
	color:#fff;
	letter-spacing: 1px;
	font-weight:600;
	padding:30px 0 35px;
	border-radius:6px;
	text-align:center;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.top-schedule .fes-title {
	font-size: 40px;
}

.top-schedule .fes-date {
	font-size:30px;
	position: relative;
}

.top-schedule .fes-location {
	font-size:20px;
}

.top-schedule .fes-date div.sat {
	font-size:20px;
	position:relative;
	display:inline-block;
	vertical-align:middle;
	margin:0 0 8px 10px;
}
.top-schedule .fes-date div.sat::after {
	background:#1e90ff;
}

.top-schedule .fes-date div.sun {
	font-size:20px;
	position:relative;
	display:inline-block;
	vertical-align:middle;
	margin:0 0 8px 10px;
}

.top-schedule .fes-date div.sun::after {
	background:#ff4606;
}

.top-schedule .fes-date div.sat::after,
.top-schedule .fes-date div.sun::after {
position:absolute;
content:"";
width:33px;
height:33px;
border-radius:50%;
top:53%;
left:50%;
z-index:-1;
transform: translate(-50%, -50%);
}

@media only screen and (max-width:1000px){
.top-schedule {
	margin:-8vh auto 0;
}	
}

@media only screen and (max-width:930px){
.top-schedule {
	margin: -7vh auto 0;
}
}

@media only screen and (max-width:880px){
.top-schedule {
	margin: -6vh auto 0;
}	
}

@media only screen and (max-width:790px){
.top-schedule {
	margin: -6vh auto 0;
}	
}

@media only screen and (max-width:767px){
.top-schedule {
	width:80%;
	margin: -55px auto 0;
	padding:15px 0 25px;
}
.top-schedule .fes-title {
	font-size:35px;
}
.top-schedule .fes-date {
	font-size:25px;
}
.top-schedule .fes-date div.sat {
	font-size:18px;
}
.top-schedule .fes-date div.sun {
	font-size:18px;
}
.top-schedule .fes-date div.sat::after,
.top-schedule .fes-date div.sun::after {
width:30px;
height:30px;
}
.top-schedule .fes-location {
	font-size:18px;
}
}

@media only screen and (max-width: 680px){
.top-schedule {
	width:80%;
	padding:15px 0 25px;}
}

@media only screen and (max-width:480px){
.top-schedule {
	width:80%;
	margin:-65px auto 0;
	padding:12px 0 23px;
}
.top-schedule .fes-title {
	font-size:28px;
}
.top-schedule .fes-date {
	font-size:20px;
}
.top-schedule .fes-date div.sat {
	font-size:15px;
}
.top-schedule .fes-date div.sun {
	font-size:15px;
}
.top-schedule .fes-date div.sat::after,
.top-schedule .fes-date div.sun::after {
width:25px;
height:25px;
}
.top-schedule .fes-location {
	font-size:15px;
}
}

@media only screen and (max-width:390px){
.top-schedule {
	margin:-35px auto 0;
}
.top-schedule .fes-title {
	font-size:26px;
}
.top-schedule .fes-location {
	font-size:14px;
}
}

/* 開催終了時 */
p.finish {
	margin-top:10px;
	font-size:16px;
	background:#ff4606;
	padding:3px 20px 4px;
}

/*　ユーチューブ　*/
.top-youtube {
	max-width:650px;
	height:400px;
	margin:30px auto 80px;
}

@media only screen and (max-width:1000px){

.top-youtube {
	width:70%;
	height:300px;
	margin:30px auto 80px;
}
}

@media only screen and (max-width:1000px){
.top-youtube {

	width:90%;
	height:250px;
	margin:30px auto 80px;
}
}

.feslogo { 
	max-width:480px;
	margin:0 auto -150px;
	text-align:center;
}
.feslogo img {
	width:100%;
}

@media only screen and (max-width:1000px){
.feslogo { 
	max-width:60%;
	margin:0 auto -150px;
	text-align:center;
}	
}


/* 協賛企業 */
#sponsor-banner {
	clear:both;
	/*background:#ececf1;*/
	background-image:url(../img/dust_scratches.png);
	background-repeat:repeat;
	margin:50px auto;
	padding:150px 0;
}

#sponsor-banner h3 {
  position: relative;
  padding: 0 65px;
font-size:28px;
text-align: center;
color:#2e3192;
}

#sponsor-banner h3:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background:#2e3192;
}

#sponsor-banner h3 span {
  position: relative;
  padding: 0 1em;
background-image:url(../img/dust_scratches.png);
background-repeat:repeat;
}

#sponsor-banner h2 {background:#2e3192;color:#fff;font-weight:600;font-size:16px;max-width:1200px;padding: 10px 0 10px 20px;margin:50px auto 20px;}

@media only screen and (max-width:820px){
#sponsor-banner h3 {
width:90%;
margin:0 auto;}
#sponsor-banner h2 {
max-width:90%;
}
}

@media only screen and (max-width:480px){
#sponsor-banner h3 {
position: relative;
padding: 0 30px;
font-size:24px;
text-align:center;
color:#2e3192;
}
}

/*　プラチナスポンサー　*/
#sponsor-banner ul.platina  {
    font-size: 14px;
    margin: 0 auto;
    max-width:1100px;
    padding: 20px 20px;
    margin-bottom: 3px;
    list-style-type: none;
    color: #41536a;
    display: flex;
    flex-wrap: wrap;
    gap:40px;
}

#sponsor-banner ul.platina li {
    width: calc(100% / 3 - 40px);
    text-align:center;
    height:110px;
	flex: 1 0 auto;
	position:relative;
}

#sponsor-banner ul.platina li a {
display:block;
	width:100%;
	height:100%;
    background: #fff;
	-webkit-transition: all .3s;
	transition: all .3s;
}

#sponsor-banner ul.platina li a:hover { 
-ms-filter: "alpha( opacity=70 )";
filter: alpha( opacity=70 );
opacity: 0.7;
box-sizing: border-box;
}

#sponsor-banner ul.platina li img.linoas {
	max-width:65%;
	max-height:70%;
	position:absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom:0;
	margin:auto;
}
#sponsor-banner ul.platina li img {
	max-width:90%;
	max-height:100%;
	position:absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom:0;
	margin:auto;
}

@media only screen and (max-width:1260px){
#sponsor-banner ul.platina {
	max-width:90%;}
}
@media only screen and (max-width:767px){
#sponsor-banner ul.platina {
    gap:30px;}

#sponsor-banner ul.platina li {
    width:70%;
    text-align:center;
    height:100px;
	flex:1 0 auto;
	position:relative;
}
}

/*　ゴールドスポンサー　*/
#sponsor-banner ul.gold  {
    font-size: 14px;
    margin: 0 auto;
    max-width:1200px;
    padding: 20px 0;
    margin-bottom: 3px;
    list-style-type: none;
    color: #41536a;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

#sponsor-banner ul.gold li {
    width: calc(100% / 4 - 30px);
    text-align:center;
    height:80px;
	flex: 1 0 auto;
	position:relative;
}

#sponsor-banner ul.gold li a {
display:block;
	width:100%;
	height:100%;
    background: #fff;
		-webkit-transition: all .3s;
	transition: all .3s;
}

#sponsor-banner ul.gold li.banner_self a {
display:block;
	width:100%;
	height:100%;
    background:none;
		-webkit-transition: all .3s;
	transition: all .3s;
}

#sponsor-banner ul.gold li a:hover { 
-ms-filter: "alpha( opacity=70 )";
filter: alpha( opacity=70 );
opacity: 0.7;
box-sizing: border-box;
}

#sponsor-banner ul.gold li img {
    max-width: 90%;
    max-height: 83%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

#sponsor-banner ul.gold li.banner_self img {
    max-width:100%;
    max-height:100%;
}

#sponsor-banner ul.gold li img.small {
	max-width:90%;
	max-height:90%;
}

@media only screen and (max-width:1260px){
#sponsor-banner ul.gold {
    max-width:90%;}
#sponsor-banner ul.gold  {
    gap:20px;}
}

@media only screen and (max-width:767px){
#sponsor-banner ul.gold li {
    width: calc(100% / 2 - 30px);
}
}

/*　シルバースポンサー　*/
#sponsor-banner ul.silver  {
    margin: 0 auto;
    max-width:1200px;
    padding: 20px 0;
    margin-bottom: 3px;
    list-style-type: none;
    color: #41536a;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

#sponsor-banner ul.silver li {
    width: calc(100% / 4 - 30px);
    text-align:center;
    height:80px;
    flex: 1 0 auto;
    background: #fff;
}

#sponsor-banner ul.silver li.backnone {
    background:none;
}

#sponsor-banner ul.silver li p {
	line-height:1.4;
	font-size:17px;
	font-weight: 600;
	text-align:center;
	position: relative;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

#sponsor-banner ul.silver li p span {
	font-size:14px;
	font-weight: 600;
}

@media only screen and (max-width:1260px){
#sponsor-banner ul.silver {
    max-width:90%;
	gap:20px;
}
#sponsor-banner ul.silver li p {
    font-size:14px;
	letter-spacing:-0.2px;
}
#sponsor-banner ul.silver li p.rows {
    line-height:1.8;
}
#sponsor-banner ul.silver li p span {
    font-size:11px;
	line-height:1.3;
	letter-spacing:-0.2px;
}
}

@media only screen and (max-width:767px){
#sponsor-banner ul.silver li {
    width: calc(100% / 2 - 30px);
    text-align:center;
	padding:0 10px;
    height:70px;
    flex: 1 0 auto;
    background: #fff;
}
#sponsor-banner ul.silver li p span {
    font-size: 10px;
}
}

/*　ブロンズスポンサー　*/
#sponsor-banner ul.bronze {
    margin: 0 auto;
    max-width:1200px;
    padding: 20px 0;
    margin-bottom: 3px;
    list-style-type: none;
    color: #41536a;
	text-align:center;
}

#sponsor-banner ul.bronze li {
    display: inline-block;
	width:auto;
	position:relative;
	font-size:16px;
	line-height:2.2;
}

#sponsor-banner ul.bronze li p:after {
    content:"／";
    display:inline-block;
	padding:0 0.5em 0 0.5em;
	letter-spacing:0.5px;
}

#sponsor-banner ul.bronze li:last-child p:after {
    display:none;
}


@media only screen and (max-width:1260px){
#sponsor-banner ul.bronze {
    margin:0 auto;
    max-width:90%;
}

#sponsor-banner ul.bronze li p:after {
    content:"／";
    display:inline-block;
	padding:0 0.25em 0 0.25em;
	letter-spacing:0.5px;
}
	
#sponsor-banner ul.bronze li p {
 font-size:14.5px;}	
}


/* 新着情報 */
section.news-title {
	width:60%;
	margin:0 auto 0;
	padding:50px 0 0px;
}
.news-title h2 {
	color:#2e3192;
	font-size:28px;
	font-weight:600;
	letter-spacing:2px;
	position:relative;
}

.news-title h2::before {
	content:"";
	background:url("../img/info_orange.svg");
	background-repeat:no-repeat;
	width:53px;
	height:38px;
	left:-70px;
	top:-3px;
	background-size:cover;
	position:absolute;

}

section#news-top {
	margin:0;
	padding:0;
	background-image:url(../img/dust_scratches.png);
	background-repeat:repeat;
}

section#news-top > .inner {
	padding: 50px 0 120px;
}


#news-top ul {
	list-style: none;
	margin: 10px 0 0px 0;
	padding: 10px 0 10px 0;
}

#news-top ul li {
clear: both;
    /* margin: 0 0 1.5em; */
    /* padding-top: 1.5em; */
    /* line-height: 1.7; */
    border-top: 3px solid #fff;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
	font-weight:600;
}

#news-top ul li a {
    text-decoration: none;
    color: #0a174f;
    padding: 1.2em 0.5em;
    display: inline-block;
}

#news-top ul li a:hover {
	text-decoration: underline;
}

#news-top ul li:last-child {
	margin: 0 0 1em;
	/*padding-bottom:1.5em;*/
	border-bottom:3px solid #fff;
}

#news-top ul li div {
	/* padding: 2px 3px 5px; */
	font-size:18px;
	margin:1.4em;
}

[class^="cat-"] > div.catName {
	display: inline;
    text-align: center;
    vertical-align: middle;
    padding: 3.5px 0 0;
    width: 7em;
    height: 2.1em;
    color: #fff;
    font-size: 13.5px !important;
}

.cat-general-info > div.catName {
	color:#2e3192;
	border:1px solid #2e3192;
}

.cat-f47 > div.catName { 
	background:#2e3192;}

.cat-f48 > div.catName { 
	background:#65318e;}

.cat-eventday > div.catName { 
	background:#ff4606;}


#news-top ul li div.ymd {
	display: inline-block;
	font-size:15px;
	padding: 2px 0;
	color: #2e3192;
	text-align: center;
	width:10em;
	vertical-align: middle;
}

#news-top ul li div.article-title {
	display: inline;
	color: #2e3192;
	text-align:left;
	width:auto;
	margin:0;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0); /* 初期位置 */
  }
  40% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(-3px);
  }
}

/* バウンドアニメーションを適用する要素のスタイル */
.element-2 {
   /* 2秒間隔で無限にバウンドする */
}

#news-top ul li div.article-title span.new {
animation: bounce 2s infinite;
display:inline-block;
vertical-align:top;
margin: 1.7em 0 0;
font-size:11px;
background:yellow;
padding:0 2px;
}



@media only screen and (max-width:1360px){
section.news-title {
	width:70%;
	margin:0 auto 0;
	padding:50px 0 0px;
}
.news-inner {
	width:70%;
	margin:30px auto;
	padding:50px 0 60px;
}	
}

@media only screen and (max-width:840px){
section.news-title {
	width:65%;
	margin:0 auto 0;
	padding:50px 0 0px;
}
.news-inner {
	width:80%;
	margin:30px auto;
	padding:50px 0 60px;
}
#news-top ul li {
	font-size:16px;
}	
}

@media only screen and (max-width:767px){
section.news-title {
	width:55%;
	margin:0 auto 0;
	padding:50px 0 0px;
}
.news-title h2 {
	font-size:26px;
	letter-spacing:1px;
}
#news-top ul li div {
    font-size: 18px;
    margin: 1.2em 0 0;
}
#news-top ul li {
	font-size:15px;
}
#news-top ul li div.article-title span.new {
    display: block;
    vertical-align: top;
    margin: -10px 10px 10px;
    font-size: 11px;
    width: 4em;
    text-align: center;
	}
}


.moreLinkText {float:right;padding:30px 0;box-sizing: border-box;clear:both;}

.moreLinkText a {
padding:16px 65px 18px 50px;
background:#fff;
color:#0a174f;
font-size:15px;
border-radius:60px;
text-decoration:none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
position:relative;
}

.moreLinkText a::after,
.moreLinkText a::before {
content:"";
position:absolute;
background:#0a174f;
top:50%;
transform: translateY(-50%);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}

.moreLinkText a::after {
height:1px;
width:40px;
top:50%;
right:20px;
}

.moreLinkText a::before {
height:8px;
width:8px;
border-radius:50%;
right:20px;
}

.moreLinkText a:hover {
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}

.moreLinkText a:hover::after,
.moreLinkText a:hover::before {
right:14px;
}



/* 申込関係 */
section#apply {
margin-top:80px;
position:relative;
z-index:1;
}
section#apply ul {
	display:flex;
	flex-wrap:wrap;
	position:relative;
	gap:30px;
	width:100%;
	margin:auto;
}
section#apply ul li {
	width:calc( 33.333333333333333% - 30px );
	height:100%;
	aspect-ratio: 1;
	margin:0 auto 0;
	position:relative;
	overflow:hidden;
}

section#apply ul li a {
	display:block;
	width:100%;
	height: auto;
	transition: .6s cubic-bezier(0.33, 1, 0.68, 1);
}
section#apply ul li a:hover {
	transform: scale(1.05);
}

section#apply ul li a img {
	margin: 0;
	padding:0;
}

section#apply ul li a::before,
section#apply ul li a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  transition: .6s cubic-bezier(0.33, 1, 0.68, 1);
}
section#apply ul li a::before {
width: 100%;
height:100%;
z-index:999;
opacity:0.9;
}
section#apply ul li a::after {
content:"";
background-repeat:no-repeat;
background-size:contain;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width:180px;
height:224px;
opacity:1.0;
z-index:999;
}


/* チラシダウンロード */
section#apply ul li.Fes01 a::before {
background:rgba(46,49,146,0.8);
}
section#apply ul li.Fes01 a::after {
background-image: url(../img/top/top_01.svg);
}


/* ご協賛のお願い */
section#apply ul li.Fes02 a::before {
background:rgba(255,70,6,1.0);
}
section#apply ul li.Fes02 a::after {
background-image: url(../img/top/top_02.svg);
}

/* ご協賛のお願い */
section#apply ul li.Fes03 a::before {
background:rgba(240,240,240,1.0);
}
section#apply ul li.Fes03 a::after {
background-image: url(../img/top/top_03.svg);
}

section#apply ul li a:hover::before {
opacity: 1;
cursor: pointer;
letter-spacing:0.1em;
}

/* 終了後の文字*/
section#apply ul li.finish a {
	opacity:0.5;
	pointer-events: none;
}

section#apply ul li.finish p.notice {
	background:rgba(255,70,6,1.0);
	padding:8px 8px 8px 8px;
	color:#fff;
	width: calc(8em + 16px);
	z-index:99999;
	content:"";
	text-align:center;
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}



@media only screen and (max-width:1260px){
section#apply ul li a::after {
width:150px;
height:187px;
}
}

@media only screen and (max-width:767px){
section#apply ul {
	gap:20px 10px;
}
section#apply ul li {
	width:100%;
}
section#apply ul li a::after {
content:"";
background-repeat:no-repeat;
background-size:contain;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width:200px;
height:249px;
opacity:1.0;
z-index:999;
}
}

@media only screen and (max-width:680px){
section#apply ul li a::after {
width:170px;
height:211px;
}
}

@media only screen and (max-width:430px){
section#apply ul li a::after {
width:150px;
height:187px;
}
}


/* 八尾フェスバナー */
#other-banner img {
	max-width:500px;
	margin:auto;
	border:1px solid #ddd;
}

@media only screen and (max-width:900px){
#other-banner img {
	width:90%;
	margin:auto;
}
}