@charset "UTF-8";

/* ==================================================
Page Header
================================================== */
#page-hdr {
	margin-bottom: var(--clamp8);
	padding: clamp(90px, 24%, 100px) min(3%, 30px) 0;
}

#page-hdr .hdr-inner {
	padding-bottom: 0;
	max-width: 1100px;
}

#invitation-title {
	font-family: var(--font-mix);
	font-weight: 400;
	text-transform: initial;
	line-height: 0.8;
	padding: max(6%, 40px) 3%;
	border: 4px solid var(--color-aqua);
	position: relative;
}

#invitation-title::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: 6px;
	left: 6px;
	width: calc(100% - 12px);
	height: calc(100% - 12px);
	border: 1px solid rgba(var(--rgb-aqua), 0.5);
}

#invitation-title h1 {
	position: relative;
	z-index: 1;
}

#invitation-title .txt {
	text-shadow: 1px 2px 3px rgba(0,0,0,0.8);
}

#invitation-title .block1 {
	font-size: clamp(18px, 10.276px + 2.414vw, 32px);
	font-weight: 700;
	margin-bottom: 1.5em;
}

#invitation-title .block2 {
	font-size: clamp(30px, 11.241px + 5.862vw, 64px);
	letter-spacing: 0;
}

#invitation-title .block3 {
	color: var(--color-yellow);
	font-size: clamp(26px, 9.448px + 5.172vw, 56px);
	font-weight: 700;
	margin-top: 0.4em;
}


/* ==================================================
Main
================================================== */
#page-main {
	padding-bottom: var(--clamp16);
}


/* ==================================================
Frame
================================================== */
.subpage .frame-wrap {
	width: min(94%, 1000px);
	margin-left: auto;
	margin-right: auto;
	position: relative;
	border: 1px solid rgba(var(--rgb-aqua), 0.3);
	background-color: rgba(0,0,0,0.8);
}

.subpage .frame-wrap .frame-inner {
	position: relative;
	width: 100%;
	padding: 30px 5%;
}

.subpage .frame-wrap::before,
.subpage .frame-wrap::after,
.subpage .frame-wrap .frame-inner::before,
.subpage .frame-wrap .frame-inner::after {
	content: "";
	position: absolute;
	width: 60px;
	height: 60px;
	border-top: 3px solid var(--color-aqua);
	border-left: 3px solid var(--color-aqua);
}

.subpage .frame-wrap::before {
	bottom: -1px;
	left: -1px;
	transform: rotate(-90deg);
}

.subpage .frame-wrap::after {
	bottom: -1px;
	right: -1px;
	transform: rotate(-180deg);
}

.subpage .frame-wrap .frame-inner::before {
	top: -1px;
	left: -1px;
}

.subpage .frame-wrap .frame-inner::after {
	top: -1px;
	right: -1px;
	transform: rotate(90deg);
}

@media screen and (max-width: 900px) {
	.subpage .frame-wrap {
		max-width: 740px;
	}
	
	.subpage .frame-wrap .frame-inner {
		padding: 30px 5%;
	}
	
	.subpage .frame-wrap::before,
	.subpage .frame-wrap::after,
	.subpage .frame-wrap .frame-inner::before,
	.subpage .frame-wrap .frame-inner::after {
		width: 40px;
		height: 40px;
	}
}


/* ==================================================
Article Area
================================================== */
#article-head {
	margin-bottom: var(--clamp10);
}

#article-head .message {
	display: inline-block;
	margin-inline: auto;
	width: min(90%, 640px);
	text-align: center;
	font-size: var(--fz-large);
}

#article-head .message p {
}

#article-head .message p b {
	display: inline-block;
}

#article-head .link {
	margin-top: var(--clamp5);
}

#article-head .link a {}


@media screen and (max-width: 900px) {
	#article-head .message {
		text-align: left;
	}
}

#article-foot {
	margin-top: var(--clamp3);
}

#article-foot .note {
	font-size: var(--fz-regular);
	color: var(--color-gray-3);
}


/* .entry-period */
.entry-period {
	width: min(80%, 520px);
	margin: var(--clamp4) auto 0;
	padding-bottom: 0.8em;
	border-bottom: 1px solid var(--color-aqua);
}

@media screen and (max-width: 480px) {
	.entry-period {
		margin-bottom: var(--clamp6);
	}
}

.entry-period dt {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-aqua);
	margin-bottom: 0.5em;
}

.entry-period dt::before,
.entry-period dt::after {
	content: "";
	display: inline-block;
}

.entry-period dt::before {
	content: "[";
	padding-right: 1em;
}

.entry-period dt::after {
	content: "]";
	padding-left: 1em;
}

.entry-period dd {
	font-size: clamp(16px, 13.793px + 0.69vw, 20px);
	color: var(--color-yellow);
	font-weight: 700;
	line-height: 1.4;
}


/* ==================================================
Article Area
================================================== */
.article-wrap {
}

.article-wrap:nth-child(n+1) {
	margin-top: var(--clamp3);
}

.article-wrap dl {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	flex-direction: row;
	--dt-width: 240px;
}

@media screen and (max-width: 900px) {
	.article-wrap:nth-child(n+1) {
		margin-top: var(--clamp6);
	}

	.article-wrap dl {
		display: block;
	}
}


/* dt
------------------------------ */
.article-wrap dl dt {
	width: var(--dt-width);
	color: var(--color-aqua);
	padding-top: 1em;
}

.article-wrap dl dt .date-week {
	line-height: 1;
	border: 1px solid var(--color-aqua);
	/*background-color: rgba(var(--rgb-aqua), 0.2);*/
	font-family: var(--font-en);
	font-weight: 400;
	text-transform: initial;
	letter-spacing: 0;
	padding: 0.8em 0.4em;
}

.article-wrap dl dt .date-week .date {
	font-size: clamp(24px, 16.276px + 2.414vw, 38px);
}

.article-wrap dl dt .date-week .week {
	font-size: clamp(13px, 9.138px + 1.207vw, 20px);
	margin-top: 0.2em;
}

.article-wrap dl dt .time {
	font-family: var(--font-mix);
	font-size: clamp(14px, 11.793px + 0.69vw, 18px);
	margin-top: 0.6em;
	letter-spacing: 0.08em;
}

@media screen and (max-width: 900px) {
	.article-wrap dl dt {
		width: 100%;
		padding-top: 0;
	}
	
	.article-wrap dl dt .date-week {
		padding: 0.4em 0.4em;
	}
	
	.article-wrap dl dt .date-week .date {
	}
	
	.article-wrap dl dt .date-week .week {
		margin-top: 0.2em;
	}
	
	.article-wrap dl dt .time {
		margin-top: 0.6em;
	}
}

/* day1 */
.article-wrap dl.day1 dt { color: var(--color-day1); }
.article-wrap dl.day1 dt .date-week {
	border-color: var(--color-day1);
	/*background-color: rgba(var(--rgb-day1), 0.2);*/
}

/* day2 */
.article-wrap dl.day2 dt { color: var(--color-day2); }
.article-wrap dl.day2 dt .date-week {
	border-color: var(--color-day2);
	/*background-color: rgba(var(--rgb-day2), 0.2);*/
}

/* day3 */
.article-wrap dl.day3 dt { color: var(--color-day3); }
.article-wrap dl.day3 dt .date-week {
	border-color: var(--color-day3);
	/*background-color: rgba(var(--rgb-day3), 0.2);*/
}


/* dd
------------------------------ */
.article-wrap dl dd {
	width: calc(96% - var(--dt-width));
	border-left: 1px solid rgba(var(--rgb-aqua), 0.5);
	padding: 0 0 1% 4%;
}

.article-wrap dl dd .head {
	font-family: var(--font-mix);
	font-size: clamp(14px, 10.69px + 1.034vw, 20px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-aqua);
	border-bottom: 1px solid rgba(var(--rgb-aqua), 1);
	padding-bottom: 1em;
	margin-bottom: 1em;
}

.article-wrap dl dd .body {
}

.article-wrap dl dd .body p {
	margin-bottom: 0;
}

.article-wrap dl dd .body p b {
	display: inline-block;
}

.fz-copy {
	font-size: clamp(15px, 11.138px + 1.207vw, 22px);
	line-height: 1.4;
}

.article-wrap dl dd .body a {
}


@media screen and (max-width: 900px) {
	.article-wrap dl dd {
		width: 100%;
		border-left: none;
		padding: 1.2em 0 1% 0;
	}
	
	.article-wrap dl dd .head {
		border-bottom: 1px solid rgba(var(--rgb-aqua), 0.5);
	}
	
	.article-wrap dl dd .body {
	}
	
	.article-wrap dl dd .body p {
	}
	
	.fz-copy {
	}
	
	.article-wrap dl dd .body a {
	}
}


/* .link-btn
------------------------------ */
.link {
	margin-top: 1.5em;
}

.link a.link-btn {
	display: block;
	margin-inline: auto;
	padding: 0 6px;
	color: var(--color-black) !important;
	font-family: var(--font-mix);
	font-size: var(--fz-large);
	font-weight: 400;
	line-height: 1;
	transition: var(--transition-def);
	position: relative;
	z-index: 1;
	width: min(90%, 280px);
	letter-spacing: 0.06em;
}

.link a.link-btn.wide {
	font-size: var(--fz-extra);
	letter-spacing: 0.08em;
	font-weight: 700;
	width: min(90%, 480px);
}

.link a.link-btn:hover {
	filter: var(--hover-filter-def);
}

.link a.link-btn::before,
.link a.link-btn::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(var(--rgb-aqua), 0.5);
}

.link a.link-btn.wide::before,
.link a.link-btn.wide::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(var(--rgb-yellow), 0.5);
}

.link a.link-btn::before {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
}

.link a.link-btn::after {
	width: calc(100% - 12px);
	height: calc(100% + 12px);
	top: -6px;
	left: 6px;
	z-index: -2;
}

.link a.link-btn span {
	display: block;
	padding: 0.5em 1.4em;
	position: relative;
	background-color: var(--color-aqua);
}

.link a.link-btn.wide span {
	padding: 0.8em 1.4em;
	background-color: var(--color-yellow);
}

.link a.link-btn span::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 8px;
	margin: auto 0;
	width: 7px;
	aspect-ratio: 7 / 16;
	background-image: url(/iwf2023/asset_subpage/img/svg/icon_arrow_black.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	transition: var(--transition-def);
}

.link a.link-btn:hover dl::after,
.link a.link-btn:hover span::after {
	transform: translateX(4px);
}