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

*{
	margin:0;padding:0;
	font-feature-settings: "palt";
	box-sizing: border-box;
	
}
html{
	background-color: #050505;
}


body{
	/**background-image: url("../img/back.jpg");**/
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	background: #000;
}


.body1 {
		background: transparent;
	width: calc(100% - 2em);
	max-width: 900px; /** デザインの最大幅 **/
	margin: 0 auto;
	/*font-family: 'M PLUS 1p', sans-serif;*/
	font-family: "Helvetica Neue",Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
	padding-top: 190px;
	padding-bottom: 28px;
	position: relative;
	z-index: 1;
}
img {border:0;}
address {font-style:normal;}
a{text-decoration:none;}

.m0auto{margin: 0 auto;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px!important;}
.mb30{margin-bottom: 30px!important;}
.mb50{margin-bottom: 50px!important;}
.mt10{margin-top: 10px!important;}
.mt15{margin-top: 15px!important;}
.mt30{margin-top: 30px!important;}
.mt50{margin-top: 50px!important;}

.mb1em{margin-bottom: 1em!important;}
.mb2em{margin-bottom: 2em!important;}
.mb3em{margin-bottom: 3em!important;}
.mt1em{margin-top: 1em!important;}
.mt2em{margin-top: 2em!important;}
.mt3em{margin-top: 3em!important;}


.red {color: red;}
.yelllow {color: yellow;}
.white{color:white;}
.blue{color:blue;}
.green{color:green;}
.DechauOrange{color:#FF4200;}

.clear {clear:both;}
.copyright {font-size: 0.5em;margin: 20px 0;text-align: center;color: #b7b7b7;}

.embeddedWrap{
	display: flex;
	justify-content: center;
	background: white;
	border: 1px solid red;
	border-radius: 10px;
}
.embedded1{
	width: 100%;
	max-width: 812px;
	height: 600px;
	border-radius: 10px;
}


/* =========================================================
   Title
   ========================================================= */

.title img{
	display: block;
	width: 100%;
}





/* =========================================================
   Schedule Heading
   ========================================================= */

.schedule-heading{
	--main-orange: #ea5504;

	align-items: center;
	background: linear-gradient(135deg, #ff8a00 0%, var(--main-orange) 54%, #c51212 100%);
	border: 2px solid #ffb13d;
	border-radius: 10px;
	box-shadow:
		0 5px 0 #711008,
		0 10px 20px rgba(0, 0, 0, 0.5);
	color: #fff;
	display: flex;
	font-size: clamp(1.25rem, 4.6vw, 1.8rem);
	font-weight: 900;
	justify-content: center;
	line-height: 1.25;
	margin: 0 0 18px;
	padding: 14px 16px;
	text-align: center;
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.32);
}

.schedule-icon{
	align-items: center;
	background: rgba(255, 255, 255, 0.18);
	border: 2px solid rgba(255, 255, 255, 0.72);
	border-radius: 6px;
	display: inline-flex;
	font-size: 0.86em;
	height: 1.65em;
	justify-content: center;
	line-height: 1;
	width: 1.65em;
}

.schedule-list{
	display: grid;
	gap: 18px;
	margin-bottom: 24px;
	max-width: 100%;
	min-width: 0;
	overflow-x: visible;
	padding-bottom: 0;
}


/* =========================================================
   Schedule Card
   ========================================================= */

.schedule-card{
	--main-orange: #ea5504;
	--schedule-top-size: clamp(3rem, 13vw, 6.8rem);
	--date-main-size: var(--schedule-top-size);
	--date-week-size: calc(var(--schedule-top-size) * 0.5);

	/* 演者画像の大きさと間隔 */
	--cast-scale: 1;
	--cast-size: calc(var(--schedule-top-size) * var(--cast-scale));
	--cast-gap: clamp(3px, 10vw, 6px);

	background: #fff;
	border: 7px solid var(--main-orange);
	border-radius: 24px;
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38);
	box-sizing: border-box;
	color: #111;
	display: grid;
	gap: clamp(10px, 1.7vw, 16px);
	grid-template-areas:
		"top"
		"main";
	grid-template-columns: minmax(0, 1fr);
	margin-inline: auto;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	width: 100%;
	padding:2em;
}

.schedule-top{
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px clamp(10px, 1.8vw, 16px);
	grid-area: top;
	justify-content: flex-start;
	min-width: 0;
	width: 100%;
}


/* =========================================================
   Date
   ========================================================= */

.schedule-date{
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--main-orange);
	display: flex;
	align-items: flex-end;
	flex: 0 0 auto;
	font-weight: 900;
	letter-spacing: -0.08em;
	line-height: 0.82;
	margin: 0;
	max-width: 100%;
	min-width: 0;
	padding: 0;
	text-align: left;
	text-shadow: none;
	white-space: nowrap;
}


/* =========================================================
   Cast
   ========================================================= */

.cast-list{
	align-items: center;
	background: transparent;
	display: flex;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	gap: var(--cast-gap);
	justify-content: flex-end;
	margin: 0 0 0 auto;
	max-width: 100%;
	min-width: 0;
	overflow: visible;
	padding: 0;
}

.cast-list::before{
	content: none;
	display: none;
}

.cast-img{
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
	display: block;
	flex: 0 0 var(--cast-size);
	flex-shrink: 0;
	height: var(--cast-size);
	opacity: 0;
	object-fit: cover;
	transform: translateY(20px) scale(0.95);
	width: var(--cast-size);
}

.schedule-card.is-visible .cast-img{
	animation: castFloatIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.schedule-card.is-visible .cast-img:nth-child(2){ animation-delay: 0.12s; }
.schedule-card.is-visible .cast-img:nth-child(3){ animation-delay: 0.24s; }
.schedule-card.is-visible .cast-img:nth-child(4){ animation-delay: 0.36s; }

.schedule-card:has(.cast-list:not(:has(.cast-img))){
	--cast-gap: 0;
}

/* =========================================================

   Date

   日付：文字間を広げる

   ========================================================= */

.date-main{

	color: var(--main-orange);
	display: inline-block;
	font-family:
		Impact,
		"Arial Black",
		"Helvetica Neue",
		Arial,
		sans-serif;
	font-size: var(--date-main-size);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 0.82;
	flex-shrink: 0;
	transform: scaleX(0.94);
	transform-origin: left bottom;

}

.date-week{

	color: var(--main-orange);
	display: inline-block;
	font-family:
		"M PLUS 1p",
		"M PLUS 1",
		"M PLUS Rounded 1c",
		"Hiragino Kaku Gothic ProN",
		"Hiragino Sans",
		Meiryo,
		sans-serif;
	font-size: var(--date-week-size);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 0.82;
	margin-left: -0.15em;
	padding-bottom: 0.2em;
	flex-shrink: 0;

}



/* =========================================================
   Hall Layout
   店舗写真の高さを店舗詳細エリアに合わせる
   ========================================================= */

.hall-layout{
	align-items: stretch;
	display: grid;
	gap: clamp(10px, 1.8vw, 16px);
	grid-area: main;
	grid-template-columns: minmax(120px, 38%) minmax(0, 1fr);
	padding: 0;
}


/* =========================================================
   Hall Photo
   店舗写真
   ========================================================= */

.hall-photo{
	height: 100%;
	margin: 0;
	min-height: 0;
	min-width: 0;
}

.hall-photo img{
	aspect-ratio: auto;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	display: block;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
	width: 100%;
}


/* =========================================================
   Hall Detail
   ========================================================= */

.hall-detail{
	min-width: 0;
}

.hall-name{
	border-bottom: 2px solid var(--main-orange);
	color: #000;
	font-size: clamp(1.9rem, 4.2vw, 3.3rem);
	font-weight: 900;
	letter-spacing: -0.05em;
	line-height: 1.03;
	margin: 0 0 clamp(6px, 1vw, 10px);
	padding: 0 0 clamp(5px, 0.8vw, 8px);
	text-align: left;
	text-shadow: none;
}

.hall-info{
	display: grid;
	gap: clamp(3px, 0.7vw, 6px);
	margin: 0;
	min-width: 0;
}

.hall-info div{
	background: transparent;
	border: 0;
	border-radius: 0;
	display: grid;
	gap: 0;
	grid-template-columns: auto minmax(0, 1fr);
	padding: 0;
}

.hall-info dt{
	align-self: baseline;
	color: var(--main-orange);
	font-size: clamp(0.9rem, 2.2vw, 1.4rem);
	font-weight: 900;
	line-height: 1.35;
	padding: 0;
	text-align: left;
	white-space: nowrap;
}

.hall-info dt::after{
	content: "：";
}

.hall-info dd{
	color: #555;
	font-size: clamp(0.9rem, 2.2vw, 1.4rem);
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	min-width: 0;
}


/* =========================================================
   Other Parts
   ========================================================= */

.visitor-info{
	background: #fff;
	border: 2px solid #ff4200;
	border-radius: 999px;
	color: #d71912;
	font-size: clamp(1.05rem, 4.4vw, 1.35rem);
	font-weight: 900;
	line-height: 1.35;
	margin-top: 16px;
	padding: 10px 14px;
	text-align: center;
}

.page-top{
	background: #fff;
	border: 1px solid #8b8b8b;
	border-radius: 10px;
	color: #111;
	display: block;
	font-size: 1.35em;
	font-weight: 900;
	margin-top: 10px;
	padding: 10px;
	text-align: center;
}

.read1 p{
	color: #fff;
	font-size: 1em;
	margin-bottom: 1em;
	text-align: center;
}

.catsch1 h2{
	color: red;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
	margin: 0.3em;
	text-align: center;
}


/* =========================================================
   Flex Utility
   ========================================================= */

.flexContainer{
	display: flex;
	justify-content: center;
}

.flexItem{
	margin: 0 4%;
}


/* =========================================================
   Image Utility
   ========================================================= */

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

img.yohaku1{
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 20px auto;
}

img.yohaku2{
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 2em auto;
}
}


/* =========================================================
   Animation
   ========================================================= */

.title,
.event-description h2,
.event-description p,
.schedule-heading,
.schedule-card,
.page-top{
	animation: storyReveal 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.title{ animation-delay: 0.05s; }
.event-description h2{ animation-delay: 0.22s; }
.event-description p:nth-of-type(1){ animation-delay: 0.34s; }
.event-description p:nth-of-type(2){ animation-delay: 0.44s; }
.event-description p:nth-of-type(3){ animation-delay: 0.54s; }
.schedule-heading{ animation-delay: 0.68s; }
.schedule-card{ animation-delay: 0.78s; }
.page-top{ animation-delay: 1.18s; }

.fadeInUp{
	opacity: 0;
	transform: translateY(20px);
	transition: 1.5s;
}

@keyframes storyReveal{
	0%{
		filter: blur(12px);
		opacity: 0;
		transform: translateY(16px);
	}
	100%{
		filter: blur(0);
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes castFloatIn{
	0%{
		opacity: 0;
		transform: translateY(20px) scale(0.95);
	}
	100%{
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 813px){
	.body1{
		font-family:
			"Helvetica Neue",
			Arial,
			"Hiragino Kaku Gothic ProN",
			"Hiragino Sans",
			Meiryo,
			sans-serif;
		margin: 0 auto;
		max-width: 900px;
		padding-top: 120px;
		width: calc(100% - 2em);
	}
}


@media (max-width: 700px){
	.schedule-card{
		padding:1.8em;
		/* 700px以下の日付・曜日サイズ */
		--schedule-top-size: clamp(3.4rem, 15.5vw, 5.4rem);

		/* 700px以下の演者画像サイズ */
		--cast-scale: 1;

		/* 700px以下の演者同士の間隔 */
		--cast-gap: clamp(3px, 0.8vw, 8px);
	}

	.date-main{
		letter-spacing: -0.04em;
		transform: scaleX(0.96);
	}

	.date-week{
		letter-spacing: -0.03em;
		margin-left: -0.04em;
	}

	.hall-layout{
		grid-template-columns: 1fr;
	}

	.hall-photo img{
		aspect-ratio: 16 / 9;
		height: auto;
		min-height: 0;
	}

	.schedule-top{
		gap: 6px 10px;
	}

	.cast-list{
		margin: 0 0 0 auto;
		justify-content: flex-end;
	}
}


@media (prefers-reduced-motion: reduce){
	.title,
	.event-description h2,
	.event-description p,
	.schedule-heading,
	.schedule-card,
	.cast-img,
	.page-top{
		animation: none;
		filter: none;
		opacity: 1;
		transform: none;
	}
}



/* =========================================================
   Cast layout / size
   演者画像：PCは右寄せ、700px以下は日付下に配置
   ========================================================= */

/* 演者画像の基本サイズ：1人時の大きさで固定 */
.schedule-card{
	--cast-scale: 0.95;
	--cast-size: calc(var(--schedule-top-size) * var(--cast-scale));
	--cast-gap: clamp(4px, 0.7vw, 10px);
}

.cast-list{
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--cast-gap);
	justify-content: flex-end;
	margin: 0 0 0 auto;
}

.cast-img{
	flex: 0 0 var(--cast-size);
	height: var(--cast-size);
	width: var(--cast-size);
}

/* 700px以下：日付の下に演者画像を配置 */
@media (max-width: 700px){
	.schedule-top{
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
		justify-items: center;
	}

	.schedule-date{
		grid-column: 1;
		justify-content: center;
	}

	.cast-list{
		grid-column: 1;
		justify-content: center;
		margin: 0 auto;
	}

	.schedule-card{
		--cast-scale: 0.95;
		--cast-gap: clamp(4px, 0.8vw, 8px);
	}
}