@charset "UTF-8";

/* ==================================================
FONT
================================================== */
/* Google Fonts */
/*@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700;900&display=swap');*/
/*

/* Adobe Fonts - webfonts.js にて読込み */
/*
---
https://fonts.adobe.com/fonts/fot-udkakugo-large-pr6n
■FOT-UDKakugo_Large Pr6N M
font-family: fot-udkakugo-large-pr6n,sans-serif;
font-weight: 500;
font-style: normal;

■FOT-UDKakugo_Large Pr6N DB
font-family: fot-udkakugo-large-pr6n,sans-serif;
font-weight: 600;
font-style: normal;

---
https://fonts.adobe.com/fonts/cinder
■Cinder Regular
font-family: cinder,sans-serif;
font-weight: 400;
font-style: normal;

https://fonts.adobe.com/fonts/condor
■Condor Compressed Medium
font-family: condor-compressed, sans-serif;
font-weight: 500;
font-style: normal;

■Condor Compressed Bold
font-family: condor-compressed, sans-serif;
font-weight: 700;
font-style: normal;
*/

.fontJp {
	font-family: fot-udkakugo-large-pr6n,sans-serif;
	font-weight: 500;
}

.fontEn {
	font-family: condor-compressed, sans-serif;
	font-weight: 500;
}

.fontEn-bold {
	font-family: condor-compressed, sans-serif;
	font-weight: 700;
}


.areaTitle {
	font-size: 7rem;
	margin-bottom: 40px;
}

.areaTitle.fontEn {
	font-family: cinder,sans-serif;
	font-weight: 400;
	font-size: 7rem;
}

.fw400 { font-weight: 400; }
.fw500 { font-weight: 500; }
.fw600 { font-weight: 600; }
.fw700 { font-weight: 700; }


html { font-size: 62.5%; overscroll-behavior: none; }

body,
#allWrap {
	font-family: fot-udkakugo-large-pr6n,sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: #45194a;

	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: "palt" 1;
  font-feature-settings: "palt" 1;
  overscroll-behavior: none;

	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

/* ==================================================
LINK
================================================== */
a:link { text-decoration: none; color: inherit; }
a:visited { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; color: inherit; }
a:active { text-decoration: none; color: inherit; }
:focus { outline: 0; }

a.txtLink:link { text-decoration: underline; color: inherit; }
a.txtLink:visited { text-decoration: underline; color: inherit; }
a.txtLink:hover { text-decoration: none; color: inherit; }
a.txtLink:active { text-decoration: none; color: inherit; }

a img { transition: all 0.4s ease-out 0s; }
/*a:hover img { opacity: 0.6; }*/
a:hover img {
	filter: brightness(110%) contrast(110%) saturate(115%);
}

a.btnStyle {
	display: block;
	background: #45194a;
	max-width: 220px;
	padding: 4px;
	margin: 0 auto;
}

a.btnStyle span {
	display: block;
	border: 2px solid #f2dc6d;
	padding: 8px 30px;
	position: relative;
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.2;
	color: #f2dc6d;
}

a.btnStyle span::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 15px 0 0;
	border-color: #f2dc6d transparent transparent transparent;
	position: absolute;
	top: 3px;
	left: 3px;
	z-index: 1;
	transition: all .2s ease-in-out;
}

a.btnStyle span::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 15px 15px;
	border-color: transparent transparent #f2dc6d transparent;
	position: absolute;
	bottom: 3px;
	right: 3px;
	z-index: 2;
	transition: all .2s ease-in-out;
}

a.btnStyle span:hover::before {
	top: 0;
	left: 0;
}

a.btnStyle span:hover::after {
	bottom: 0;
	right: 0;
}

a.btnStyle span img {}


/* ==================================================
VIEW SWITCH
================================================== */

/* View Switch
------------------------------ */
@media screen and (min-width: 901px) {
	.spOnly { display: none !important; }
}

@media screen and (max-width: 900px) {
	.pcOnly { display: none !important; }
}


/* ==================================================
PAGE BASE
================================================== */
body {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	min-width: 320px;
	background: #f2dc6d;
}

#allWrap {
	position: relative;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
	
	min-width: 320px;
	font-size: 1.5rem;
	z-index: 3;
}

img,
svg {
	display: block;
	margin: 0 auto;
}

p {
	line-height: 1.6;
}

p:not(:last-child) {
	margin-bottom: 1.5em;
}

i,
em {
	display: inline-block;
}

.transition2 {
	transition: all 0.2s ease-out 0s;
}

.transition4 {
	transition: all 0.4s ease-out 0s;
}

.transition6 {
	transition: all 0.6s ease-out 0s;
}

/*.colorBeige { color: #fff6dd; }
.bgBeige { background-color: #fff6dd; }*/

/*.colorBeige2 { color: #ffefbf; }
.bgBeige2 { background-color: #ffefbf; }*/

/*.colorGold { color: #bca972; }
.bgBGold { background-color: #bca972; }*/

/*.bgGradation {
	background: linear-gradient(15deg, #ffff04 0%, #ff9d00 100%);
}*/

/* リンクボタン */
a.linkBtn {
	display: block;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	padding: 3px;
	border: 1px solid #45194a;
	background: #fff;
}

a.linkBtn>span {
	display: block;
	overflow: hidden;
	position: relative;
	border: 2px solid #45194a;
	padding: 16px;
}

a.linkBtn>span::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 20px 0 0;
	border-color: #45194a transparent transparent transparent;
	position: absolute;
	top: 2px;
	left: 2px;
	z-index: 1;
	transition: all .2s ease-in-out;
}

a.linkBtn>span::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 20px 20px;
	border-color: transparent transparent #45194a transparent;
	position: absolute;
	bottom: 2px;
	right: 2px;
	z-index: 2;
	transition: all .2s ease-in-out;
}

a.linkBtn>span:hover::before {
	top: 0;
	left: 0;
}

a.linkBtn>span:hover::after {
	bottom: 0;
	right: 0;
}

/* リンクバナー */
.banner {

}

a.linkBnr {
	display: block;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	padding: 3px;
	border: 1px solid #45194a;
	background: #fff;
}

a.linkBnr>span {
	display: block;
	overflow: hidden;
	position: relative;
	border: 2px solid #45194a;
	padding: 6px;
}

a.linkBnr>span::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 20px 0 0;
	border-color: #45194a transparent transparent transparent;
	position: absolute;
	top: 2px;
	left: 2px;
	z-index: 1;
	transition: all .2s ease-in-out;
}

a.linkBnr>span::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 20px 20px;
	border-color: transparent transparent #45194a transparent;
	position: absolute;
	bottom: 2px;
	right: 2px;
	z-index: 2;
	transition: all .2s ease-in-out;
}

a.linkBnr>span:hover::before {
	top: 0;
	left: 0;
}

a.linkBnr>span:hover::after {
	bottom: 0;
	right: 0;
}


.bannerSeparate {
	width: 100%;
	max-width: 800px;
	margin: 0 auto 30px;
}

.bannerSeparate .bnrHead {
}

.bannerSeparate .bnrHead img {
}

.bannerSeparate ul {
	padding: 10px 8px 4px;
	background: #41b3f0;
	border: 8px solid #5a1362;
	border-top: none;
	background: #a25baa;
}

.bannerSeparate ul li {
	margin: 0 auto 6px;
}

/**/
.bannerAttention {
	margin: 10px auto 40px;
}

.bannerAttention ul {
	max-width: 800px;
	margin: 0 auto;
	text-align: left;
}

.bannerAttention li {
	font-size: 1.5rem;
	padding-left: 18px;
	text-indent: -18px;
}

.bannerAttention li:nth-child(n+2) {
	margin-top: 5px;
}

.bannerAttention li::before {
	content: "※";
	text-indent: 0;
	display: inline-block;
	width: 18px;
}

.bannerAttention li a:link {
	text-decoration: underline;
	color: #7e04cb;
}

.bannerAttention li a:hover {
	color: #a25baa;
}


/* リンクテキスト */
a.txtType {
	text-decoration: none;
	position: relative;
	padding: 0 24px 5px 0;
	display: inline-block;
	line-height: 1.2;
	transform: translateY(-2px);
}

a.txtType::before {
	content: "";
	position: absolute;
	bottom: 8px;
	right: 6px;
	width: 11px;
	height: 8px;
	background: url("../img/common/svg/icon_window.svg") no-repeat center center;
	background-size: 100%;
}

a.txtType::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: #a276b0;
}

a.txtType img {
}

a.txtType:hover {
}

a.txtType:hover img {
}


/* YouTube */
.youtube {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 0;
	padding: 30px 0 56.25%;
	/*アスペクト比 16:9の場合の縦幅*/
	/*padding: 0 0 56.25%;*/
	/*アスペクト比 16:9の場合の縦幅*/
	/* margin: 0 0 20px; */
}

.youtube iframe {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}


/* ==================================================
GLOBAL NAVIGATION
================================================== */
#globalNav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background: #45194a;
	z-index: 10000;
}

#globalNav::after {
	content: "";
	position: absolute;
	bottom: 6px;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
}

#menuWrap {
	height: 100%;
}

#accordionBtn {
	display: none;
}

#accordionBtn a {
}

#menulistWrap {
	height: 100%;
}

#menulistWrap .menulistInner {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
	margin: 0 auto;
	height: calc(100% - 8px);
	width: 100%;
	padding: 0 calc(2% + 180px + 20px) 0 2%;
	max-width: 1400px;
}

#menulistWrap .menulistInner li {
	height: 100%;
	margin: 0;
	position: relative;
}

/*@media screen and (max-width: 1000px) {
	#menulistWrap .menulistInner {
		justify-content: flex-start;
		padding-left: 4%;
	}
	
	#menulistWrap .menulistInner li {
		margin: 0 30px 0 0;
	}
}*/

#menulistWrap .menulistInner li a {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
	font-family: cinder, sans-serif;
	font-weight: 400;
	font-size: 1.9rem;
	color: #fff;
	height: 100%;
	transition: all 0.4s ease-out 0s;
}

#menulistWrap .menulistInner li a:hover {
	color: #f2dc6d;
}

.timetablePage #menulistWrap .menulistInner li:nth-child(5) a,
.omiyagePage #menulistWrap .menulistInner li:nth-child(6) a,
.kokugikanPage #menulistWrap .menulistInner li:nth-child(7) a,
.reportPage #menulistWrap .menulistInner li:nth-child(8) a {
	opacity: 0.3;
	pointer-events: none;
}

@media screen and (min-width: 1100px) {
	#menulistWrap .menulistInner li a {
		font-size: 2.4rem;
	}
}


#menulistWrap .menulistInner li::after {
	content: "";
	z-index: 10;
	position: absolute;
	margin: 0 auto;
	bottom: -8px;
	left: 0;
	right: 0;
	width: 60px;
	height: 16px;
	background: none;
	color: #fff;
	text-align: center;
	font-family: cinder, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 0.9;
	letter-spacing: 0.1em;
	padding: 0px 0 0px 2px;
}

#menulistWrap .menulistInner li.new::after {
	content: "update";
	background: #f14737;
}

#menuAttention {
	position: fixed;
	top: 14px;
	right: 2%;
	width: 180px;
	height: 24px;
}

#menuAttention a {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
	margin: 0 auto;
	height: 100%;
	width: 100%;
	border-radius: 50px;
	background: #fff;
	color: #45194a;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1;
	transition: all 0.4s ease-out 0s;
}

#menuAttention a:hover {
	background: #f2dc6d;
}


@media screen and (max-width: 900px) {
	#globalNav {
		transition: all 0.4s ease-out 0s;
	}

	#globalNav.menuOpen {
		height: 370px;
	}
	
	#globalNav::after {
	}
	
	#menuWrap {
		height: 370px;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		transition: all 0.4s ease-out 0s;
	}
	
	#menulistWrap {
	}
	
	#menulistWrap .menulistInner {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
		flex-direction: row;
		margin: 0 auto;
		padding: 0 0 80px;
		transition: all 0.4s ease-out 0s;
	}
	
	.menuOpen #menulistWrap .menulistInner {
		padding: 100px 3% 60px;
		background: url(../img/bg04.png) repeat left top;
	}
	
	#menulistWrap .menulistInner li {
		height: 40px;
		margin: 0 auto;
		width: calc(100% / 3);
		padding: 0;
	}
		
	#menulistWrap .menulistInner li a {
		font-size: 3.6rem;
	}
	
	#menulistWrap .menulistInner li a:hover {
	}

	#menulistWrap .menulistInner li,
	#menulistWrap .menulistInner li.new {
	}

	#menulistWrap .menulistInner li::after,
	#menulistWrap .menulistInner li.new::after {
		bottom: -16px;
	}
	
	/* #accordionBtn
	------------------------------ */
	#accordionBtn {
		display: block;
		position: fixed;
		top: 10px;
		right: 20px;
		width: 30px;
		height: 30px;
		background: #fff;
		z-index: 100;
		transition: all 0.4s ease-out 0s;
	}

	.menuOpen #accordionBtn {
		transform: rotate(-315deg);
		background: #45194a;
	}
	
	#accordionBtn a {
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
	}

	#accordionBtn a::before,
	#accordionBtn a::after {
		content: "";
		width: 6px;
		height: 100%;
		position: absolute;
		top: 0;
		left: calc(50% - 3px);
		background-color: #45194a;
		transition: all 0.4s ease-out 0s;
	}

	.menuOpen #accordionBtn a::before,
	.menuOpen #accordionBtn a::after {
		background-color: #fff;
	}

	#accordionBtn a::before {
		z-index: 1;
	}

	#accordionBtn a::after {
		z-index: 2;
		transform: rotate(90deg);
	}

	/* #menuAttention
	------------------------------ */
	#menuAttention {
		right: initial;
		left: 20px;
	}
	
	#menuAttention a {
	}
	
	#menuAttention a:hover {
	}
}

@media screen and (max-width: 640px) {
	#globalNav {

	}

	#globalNav.menuOpen {
		height: 320px;
	}
	
	#globalNav::after {
	}
	
	#menuWrap {
		height: 320px;
	}
	
	#menulistWrap {
	}
	
	#menulistWrap .menulistInner {
	}
	
	.menuOpen #menulistWrap .menulistInner {
		padding: 70px 20px 10px;
		max-width: 400px;
	}
	
	#menulistWrap .menulistInner li {
		height: 30px;
		margin: 0;
		width: calc(100% / 2);
	}
		
	#menulistWrap .menulistInner li a {
		font-size: 2.4rem;
	}
	
	#menulistWrap .menulistInner li a:hover {
	}

	#menulistWrap .menulistInner li,
	#menulistWrap .menulistInner li.new {
		/*! margin-bottom: 12px; */
	}

	#menulistWrap .menulistInner li::after,
	#menulistWrap .menulistInner li.new::after {
		bottom: -12px;
		width: 54px;
		height: 14px;
		font-size: 14px;
		line-height: 0.8;
	}
	
}


/* ==================================================
HEADER
================================================== */
#hdrWrap {
	/*padding: 80px 3% 15px;*/
	padding: 80px 3% 25px;
	background: url(/special/guitarjamboree2022/asset/img/hdr_visual.jpg) no-repeat center center;
	background-size: cover;
}

#hdrWrap .hdrInner {
	max-width: 1400px;
	margin: 0 auto;
}

#hdrWrap .hdrInner #hdrVisual {
}

#hdrWrap .hdrInner #hdrVisual img {
}


@media screen and (max-width: 900px) {
	#hdrWrap {
		padding: 60px 0 0;
		background: #fff;
		border-bottom: 5px solid #45194a;
	}
}


/* ==================================================
CONTENTS
================================================== */
#mainCnt {
	padding: 60px 3%;
}

#mainCnt .areaWrap {
	border: 6px solid #45194a;
	padding: 0 3%;
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
}

#mainCnt .areaWrap+.areaWrap {
	margin-top: 50px;
}

#mainCnt .areaWrap .area {
	padding: 60px 0;
	border-bottom: 6px solid #45194a;
	position: relative;
}

@media screen and (max-width: 900px) {
	#mainCnt {
		padding: 60px 2%;
	}
	
	#mainCnt .areaWrap {
		padding: 0 2%;
	}
	
	#mainCnt .areaWrap+.areaWrap {
	}
	
	#mainCnt .areaWrap .area {
	}
}


/* ノボリアニメーション
------------------------------ */
.noboriBlock {
	position: relative;
	padding-bottom: 340px !important;
}

.noboriScroll {
	background: url("../img/line_nobori_2022.png") repeat-x 0 0;
	background-size: auto 100%;
	animation: nobori-line 60s linear infinite;
	width: 100%;
	height: 314px; /* 背景画像の高さ */
	position: absolute;
	bottom: 0;
	left: 0;
}

@media screen and (max-width: 640px) {
	.noboriBlock {
		padding-bottom: 170px !important;
	}

	.noboriScroll {
		animation: nobori-line-sp 40s linear infinite;
		height: 157px; /* 背景画像の高さ÷2 */
	}
}

@keyframes nobori-line {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -2600px 0;
	}
	/* 2600px＝使用した背景画像の長さ */
}

@keyframes nobori-line-sp {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -1300px 0;
	}
	/* 1300px＝使用した背景画像の長さ÷2 */
}


/* ==================================================
FOOTER CREDIT
================================================== */
#ftrCredit {
	margin: 60px auto;
}

#ftrCredit ul {
	text-align: left;
	max-width: 640px;
	margin: 0 auto;
	display: inline-block;
}

#ftrCredit ul li {
	margin-bottom: 8px;
}

#ftrCredit ul li em {
	display: inline-block;
	border: 1px solid #45194a;
	line-height: 1.2;
	padding: 3px 0;
	font-weight: 600;
	font-size: 1.3rem;
	width: 110px;
	text-align: center;
	margin-right: 20px;
	font-weight: 900;
}

#ftrCredit ul li span {
	display: inline-block;
	font-weight: 600;
	font-size: 1.4rem;
}

#ftrCredit ul li span i {
}

#ftrCredit ul li span b {
}

#ftrCredit ul li span .fontS {
	font-size: 90%;
	display: inline-block;
	margin-left: 5px;
}

@media screen and (max-width: 640px) {
	#ftrCredit {
		text-align: center;
	}

	#ftrCredit ul {
		display: inline-block;
		margin: 0 auto;
		text-align: center;
	}

	#ftrCredit ul li {
		margin-bottom: 12px;
	}

	#ftrCredit ul li em {
		margin: 0 auto 5px;
		font-size: 1.2rem;
		width: 200px;
	}

	#ftrCredit ul li span {
		width: 100%;
		padding-left: 1em;
	}

	#ftrCredit ul li span i {}

	#ftrCredit ul li span b {
		display: block;
		margin-bottom: 3px;
	}
}

/* ==================================================
FOOTER
================================================== */
#ftrAbove {
	padding: 80px 3% 60px;
	margin: 0 auto;
	background-color: #fff;
}

/* PAGE TOP BUTTON
------------------------------ */
#pagetopBtn {
}

#pagetopBtn a {
}

#pagetopBtn a img {
}

/* ------------------------------ */

#ftrWrap {
	background-color: #000;
	padding: 40px 3%;
}

#ftrWrap .ftrInner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
}

#ftrWrap .logo {
	width: 160px;
	height: 20px;
}

#ftrWrap .logo a {
	display: block;
}

#ftrWrap .copyright {
	font-size: 1.2rem;
	color: #fff;
}

#ftrWrap .copyright b {
	display: inline-block;
	margin-right: 6px;
	font-size: 110%;
	transform: translateY(1px);
}

@media screen and (max-width: 900px) {
	#ftrWrap .ftrInner {
		display: block;
	}

	#ftrWrap .logo {
		width: 140px;
		margin: 0 auto 20px;
	}

	#ftrWrap .copyright {}
}


/* ==================================================
ANIMATION
================================================== */
#allWrap {
	will-change: animation;
	animation: accessFadein 1.2s linear 0.2s both;
}

@keyframes accessFadein {
	0% { opacity: 0; }
	30% { opacity: 0; }
	100% { opacity: 1; }
}

/* BACKGROUND BLOCK for CANVAS - bg1
------------------------------ */
#bg1 {
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 120vh;
	overflow: hidden;
}

#bg1 .inner {
	position: absolute;
	width: 2000px;
	height: 2000px;
	top: 0;
	left: calc(50% - 1000px);
}

#cvs1 {
	background-color: transparent;
}

/* BACKGROUND BLOCK for CANVAS - bg2
------------------------------ */

#bg2 {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 120vh;
	overflow: hidden;
}

#bg2 .inner {
	position: absolute;
	width: 2000px;
	height: 2000px;
	top: 0;
	left: calc(50% - 1000px);
}

#cvs2 {
	background-color: transparent;
}


/* ////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////// */


/* ==================================================
OTHERS
================================================== */
.scrollto {}

/* clrfix */
.clrfix::before, .clrfix::after { display: table; content: ''; }
.clrfix::after { clear: both; }

.none { display: none; }