/* CSS Document */
@import url("reset.css");
@import url("common.css");

h2{
	margin: 20px 0;
	color: var(--colorBlue2);
	font-size: 1.4rem;
	font-weight: 700;
}

@media screen and (max-width: 768px) and (orientation:portrait) {
	h2{ font-size: 1.3rem;}
}


/* section
---------------------------------------------------------- */
section{ padding: 50px 5vw;}

section:nth-child(odd){
	border-radius: 50px 0 0 50px;
	background-color: var(--colorOrange2);
}

@media screen and (max-width: 768px) and (orientation:portrait) {
	section{ padding: 20px;}
	section:nth-child(odd){ border-radius: 0;}
}


/* key_hanger
---------------------------------------------------------- */
.key_hanger{
	position: relative;
	z-index: 2;
	width: 100%;
	overflow: hidden;
	border-radius: 0 0 0 50px;
}

.key_inner{
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 0 0 0 50px;
}

.mv_demo{
	width: 100%;
	height: auto;
	padding-top: 50px;
	line-height: 0;
}

.countdown{
	position: relative;
	z-index: 2;
	padding: 15px 20px 20px;
	color: #fff;
	font-size: 1.6rem;
	line-height: 1.4;
	text-align: center;
	background-color: var(--colorBlue1);
}
.countdown span{
	display: inline-block;
	margin: 0 5px;
	font-size: 2.4rem;
}

.sky {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom;
	/* 背景の変化を滑らかにする */
	transition: background 2s ease, opacity 1s ease;
}

/* 朝・昼（5:00～17:00） */
.sky.is-day {
    background: linear-gradient(to bottom, #2591ee 10%, #93cdfd 60%, #d4e2fe 95%);
}

/* 夕方（17:00～19:00） */
.sky.is-evening {
    background: linear-gradient(to bottom, #e67e22 10%, #f1c40f 60%, #ffeaa7 95%);
}

/* 夜（19:00～5:00） */
.sky.is-night {
    background: linear-gradient(to bottom, #0c2461 10%, #1e3799 60%, #4a69bd 95%);
}

#js-mv-img { transition: opacity 0.5s ease;}

.ff {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; /* 花火がクリックを邪魔しないように */
	overflow: hidden;
}

.ff_item {
	position: absolute;
	opacity: 0; /* 初期状態は透明 */
	pointer-events: none;
}
@keyframes firework-animation {
	0% {
		transform: scale(0.3);
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	100% {
		transform: scale(1.1);
		opacity: 0;
	}
}

.ff_item.is-active { animation: firework-animation 2.5s ease-out forwards;}

.ff_item img {
	width: 100%;
	height: auto;
}

.ff_l{ left: 0;}
.ff_r{ right: 0;}

@media screen and (max-width: 768px) and (orientation:portrait) {
	.key_hanger{ border-radius: 0 0 20px 20px;}
	.key_inner{
		border-radius: 0 0 20px 20px;
	}
	.countdown{
		padding: 10px;
		font-size: 1.2rem;
	}
	.countdown span{ font-size: 1.4rem;}	
}


/* intro
---------------------------------------------------------- */
.intro{ padding: 40px 5vw;}

.intro .inner{ margin: 60px auto;}

.intro .copy{
	flex-wrap: nowrap;
	justify-content: center;
}
.intro .copy h2{
	margin: 0 3rem 0 0;
	font-size: 2.4rem;
	color: var(--colorBlack1);
}
.intro .copy p{ font-size: 1.1rem;}

.about30th{
	flex-wrap: nowrap;
	max-width: 1000px;
	border-radius: 30px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
	overflow: hidden;
}
.about30th > div{ padding: 30px 40px;}
.intro_logo{
	width: 30%;
	background-color: #fff;
	text-align: center;
}
.intro_tit{
	width: 70%;
	background-color: var(--colorOrange2-light);
}
.intro_tit h2{
	margin: 0;
	font-size: 1.2rem;
}
.intro_tit p{
	margin: 0;
	text-align: right;
}
.intro_tit p img{
	width: 220px;
	margin: 0;
}

@media screen and (max-width: 768px) and (orientation:portrait) {
	.intro{ padding: 20px;}
	.intro .inner{
		margin: 20px 0;
		flex-direction: column;
	}
	.intro_logo{ width: 72%;}
	.intro .copy{ align-items: flex-start;}
	.intro .copy h2{
		margin: 0;
		font-size: 2.0rem;
	}
	.about30th > div{ padding: 20px;}
	.intro_tit{ width: 100%;}
	.intro_tit h2,
	.intro_tit p{ text-align: center;}
	.intro_tit h2{ margin: 15px 0;}
	.intro_tit h2 br{ display: none;}
}


/* news
---------------------------------------------------------- */
.news dl{
	justify-content: flex-start;
	flex-wrap: nowrap;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid #ccc;
}
.news dl:last-of-type{ border-bottom: none;}

.news dl dt{ width: 8rem;}
.news dl dd{
	width: calc(100% - 8rem);
	margin: 0;
}
.news dl dd a{
	position: relative;
	display: block;
	padding-right: 2rem;
}
.news dl dd a::after{
	content: '';
	position: absolute;
	right: 0;
	top: calc(50% - 10px);
	width: 20px;
	height: 20px;
	background: url(../img/arrow01.svg) no-repeat center / contain;
}

@media screen and (max-width: 768px) and (orientation:portrait) {
	.news dl{ flex-wrap: wrap;}
	.news dl dt,
	.news dl dd{ width: 100%;}
}


/* event
---------------------------------------------------------- */
.event_li{ justify-content: flex-start;}

.event_item{
	width: 25%;
	padding: 10px;
}
.event_item a{ text-decoration: none;}

.event_item_img img{
	object-fit: cover;
	aspect-ratio: 1/1;
	border-radius: 20px;
}
.event_item a[href$=".pdf"] p::after {
	display: inline-block;
	margin-left: .5em;
	vertical-align: text-top;
	width: 1.5rem;
	height: 1.5rem;
	content: url(../img/icon_pdf.svg);
}

.event_item_txt p{
	margin: 10px 0;
	line-height: 1.4;
}
.event_item_txt .period{
	color: var(--colorBlack1);
	font-size: 0.9rem;
	border-top: 1px solid #ccc;
}
.event_item_txt .period::after{ display: none !important;}

@media screen and (max-width: 768px) and (orientation:portrait) {
	.event_item{ width: 50%;}
}


/* message
---------------------------------------------------------- */
.message{ position: relative;}

.message_logo{
	width: 240px;
	margin: auto;
	margin-top: -50px;
}

.message h2{ text-align: center;}

.message_item{ margin: 30px 0;}
.message_item a{
	text-decoration: none;
	color: var(--colorBlack1);
}

.message_item h3{
	margin: 0 0 20px 0;
	font-size: 1.4rem;
	color: var(--colorBlue2);
}
.message_item p{ margin: 0;}
.message_item .btn{ margin: 20px 0 0 0;}

.history{
	background-color: #fff;
	border-radius: 30px;
	overflow: hidden;
}
.history img{ width: 45%;}
.history_txt{
	width: 55%;
	padding: 30px;
}

.interview img{ width: 45%;}
.interview_txt{
	width: 55%;
	padding: 0 30px;
}

@media screen and (max-width: 768px) and (orientation:portrait) {
	.message{ margin-top: 5vh;}
	.message_logo{ width: 180px;}
	.history img,
	.history_txt,
	.interview img,
	.interview_txt{ width: 100%;}
}


/* footer
---------------------------------------------------------- */
@media screen and (max-width: 768px) and (orientation:portrait) {
	footer{
		margin-top: 0;
	}
}


/* Loading Screen
---------------------------------------------------------- */
#loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 1;
	visibility: visible;
	/* 背景が消える時の設定（霧が晴れるようなボカシとフェード） */
	transition: opacity 1s ease-in-out, visibility 1s ease-in-out, filter 1.2s ease-in-out;
}

/* 読み込み完了時：全体を白くぼかしながら消す */
#loader.is-loaded {
	opacity: 0;
	visibility: hidden;
	filter: blur(30px); /* 霧のように溶ける効果 */
}

.loader-content {
	text-align: center;
	width: 80%;
	max-width: 300px;
	opacity: 1;
	transform: scale(1);
	/* 消える時の「拡大」と「ロゴ自身の消去」を制御 */
	transition: transform 1.2s ease-in-out, opacity 1s ease-in-out;
}

/* 背景が消える時、中身（ロゴとバー）を大きくしながら透明にする */
#loader.is-loaded .loader-content {
	transform: scale(1.8); /* ぐっと大きく */
	opacity: 0; /* ふわっと消える */
}

.loader-logo {
	margin-bottom: 30px;
	opacity: 0;
	transform: translateY(10px);
}

/* クラス付与で最初にロゴをフェードインさせる */
.loader-logo.is-visible {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.loader-logo img {
	width: 100%;
	height: auto;
}

.progress-container {
	width: 100%;
	height: 2px;
	background-color: #f0f0f0;
	border-radius: 2px;
	overflow: hidden;
}

.progress-bar {
	width: 0%;
	height: 100%;
	background-color: var(--colorBlue2);
	/* バーが伸びるスピード */
	transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =================================================
   2026/02/16 CSS上書き
   ================================================= */
   
   /* --- 親コンテナ（about30th）の設定 --- */
.flexbox.inner.about30th {
	display: flex;
	align-items: center;      /* ロゴとテキスト群を上下中央に */
	justify-content: flex-start;
	position: relative;
}

/* --- ロゴエリア --- */
.intro_logo {
	flex: 0 0 30%;/* ロゴ用の専有幅 */
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
}

.intro_logo img {
	width: auto;
	max-width: 100%;
	height: auto;
}

/* --- テキストとキャラクターの親 --- */
.intro_tit {
	flex: 1;
	position: relative;
	z-index: 1;
}

.intro_tit h2 {
	position: relative;
	z-index: 2;
}

/* スマホでの改行無視を解除 */
.intro_tit h2 br {
	display: block !important;
}

.intro_tit p {
	position: absolute;
	right: 40px;
	bottom: 30px;
	width: 220px;
	margin: 0;
	z-index: 1;
	pointer-events: none; 
}

.intro_tit p img {
	width: 100%;
	height: auto;
	display: block;
}


/* イベント情報 高さ合わせ */
.flexbox.event_li {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch; 
}

@media screen and (max-width: 768px) {
	.flexbox.inner.about30th {
		flex-direction: column;
		align-items: center;
		padding-bottom: 140px;  /* キャラクターを表示するための余白を下に確保 */
		background-color: var(--colorOrange2-light);
	}
	
	.intro_logo {
		flex: 0 0 auto;
		width: 100%;
		margin-bottom: 20px;
	}

	.intro_tit {
		width: 100%;
		text-align: center;
	}

	/* スマホ版キャラクター：最下段の中央に配置 */
	.intro_tit p {
		right: auto;
		left: 50%; 
		transform: translateX(-50%);
		bottom: -120px;       /* 親要素のさらに下側、またはpadding-bottom内に配置 */
		width: 220px;         /* スマホでのキャラサイズ */
		z-index: 1;
	}
}