@charset "UTF-8";

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Audiowide&display=swap);


/* ==================================================
Subpage Base
================================================== */

/* Color List
------------------------------ */
:root {
	/* Hex */
	--color-day1: #44db65;
	--color-day2: #2277f7;
	--color-day3: #ff4646;

	--color-talk: #2277f7;
	--color-live: #fb2553;
	--color-camp: #2277f7;
	--color-session: #2277f7;
	--color-other: #ffffff;
	--color-special: #16ece4;

	--color-talk-bg: #92befd;
	--color-live-bg: #D05A73;
	--color-session-bg: #92BEFD;
	--color-other-bg: #ffffff;

	--color-blue-dark: #0054d1;
	--color-blue-light: #92befd;
	--color-blue: #2277f7;
	--color-aqua: #16ece4;
	--color-yellow: #d4f835;
	--color-orange: #ffa724;
	--color-green: #44db65;
	--color-pink: #f32e89;
	--color-pink-light: #ff44ad;
	--color-pink-dark: #d05a73;
	--color-red: #fb2553;
	--color-lightred: #ff4646;
	--color-purple: #d356ff;

	--color-gray-1: #e5e5e5;
	--color-gray-2: #cccccc;
	--color-gray-3: #b2b2b2;
	--color-gray-4: #999999;
	--color-gray-5: #808080;
	--color-gray-6: #666666;
	--color-gray-7: #4d4d4d;
	--color-gray-8: #333333;
	--color-gray-9: #1a1a1a;

	--color-gray: #808080;
	--color-black: #000;
	--color-white: #fff;
	--color-white-off: #f0f0f0;

	/* RGB */
	--rgb-day1: 68, 219, 101;
	--rgb-day2: 34, 119, 247;
	--rgb-day3: 255, 70, 70;

	--rgb-talk: 34, 119, 247;
	--rgb-live: 251, 37, 83;
	--rgb-session: 34, 119, 247;
	--rgb-other: 255, 255, 255;
	--rgb-special: 22, 236, 228;

	--rgb-talk-bg: 146, 190, 253;
	--rgb-live-bg: 208, 90, 115;
	--rgb-camp-bg: 146, 190, 253;
	--rgb-session-bg: 146, 190, 253;
	--rgb-other-bg: 255, 255, 255;

	--rgb-blue-dark: 0, 84, 209;
	--rgb-blue-light: 146, 190, 253;
	--rgb-blue-light: 146, 190, 253;
	--rgb-blue: 34, 119, 247;
	--rgb-aqua: 22, 236, 228;
	--rgb-yellow: 212, 248, 53;
	--rgb-orange: 255, 167, 36;
	--rgb-green: 68, 219, 101;
	--rgb-pink: 243, 46, 137;
	--rgb-pink-light: 255, 68, 173;
	--rgb-pink-dark: 208, 90, 115;
	--rgb-red: 251, 37, 83;
	--rgb-lightred: 255, 70, 70;
	--rgb-purple: 211, 86, 255;

	--rgb-gray-1: 229, 229, 229;
	--rgb-gray-2: 204, 204, 204;
	--rgb-gray-3: 178, 178, 178;
	--rgb-gray-4: 153, 153, 153;
	--rgb-gray-5: 128, 128, 128;
	--rgb-gray-6: 102, 102, 102;
	--rgb-gray-7: 77, 77, 77;
	--rgb-gray-8: 51, 51, 51;
	--rgb-gray-9: 26, 26, 26;

	--rgb-gray: 128, 128, 128;
	--rgb-black: 0, 0, 0;
	--rgb-white: 255, 255, 255;
	--rgb-white-off: 240, 240, 240;

	/* hover */
	--hover-filter-def: brightness(110%) contrast(110%) saturate(120%) drop-shadow(0 0 16px rgba(var(--rgb-aqua), 0.7));
	--hover-filter-bright: brightness(110%) contrast(110%) saturate(120%);
	--hover-filter-shadow: drop-shadow(0 0 9px rgba(var(--rgb-aqua), 0.7));
	--hover-transform-zoom: scale(1.06);
}


/* Text Color
------------------------------ */
/*.subpage-format .txtcolor-red { color: #f00; }
.subpage-format .txtcolor-blue { color: #00f; }*/

.subpage-format .txtcolor-white { color: var(--color-white); }
.subpage-format .txtcolor-black { color: var(--color-black); }
.subpage-format .txtcolor-aqua { color: var(--color-aqua); }
.subpage-format .txtcolor-yellow { color: var(--color-yellow); }
.subpage-format .txtcolor-pink { color: var(--color-pink); }
.subpage-format .txtcolor-red { color: var(--color-red); }

.subpage-format .txtcolor-day1 { color: var(--color-day1); }
.subpage-format .txtcolor-day2 { color: var(--color-day2); }
.subpage-format .txtcolor-day3 { color: var(--color-day3); }

.subpage-format .txtcolor-talk { color: var(--color-talk); }
.subpage-format .txtcolor-live { color: var(--color-live); }
.subpage-format .txtcolor-camp { color: var(--color-camp); }
.subpage-format .txtcolor-session { color: var(--color-session); }
.subpage-format .txtcolor-other { color: var(--color-other); }


/* Font
------------------------------ */
:root {
	--font-jp: "Inter", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-en: "Audiowide","Inter",sans-serif;;
	--font-mix: "Audiowide","Inter", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
}

@media(prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth
	}
}


.subpage-format {
	font-family: var(--font-jp);
	font-weight: 400;
	font-style: normal;
	font-size: var(--fz-xlarge);
	line-height: 1.8;
	letter-spacing: 0.12em;
	color: var(--color-white);

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

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

/* 言語指定 */
.subpage-format .font-jp {
	font-family: var(--font-jp);
	font-weight: 400;
	text-transform: initial;
	letter-spacing: inherit;
}

.subpage-format .font-en {
	font-family: var(--font-en);
	font-weight: 400;
	text-transform: initial;
	letter-spacing: 0;
}


/* font-weight  */
.subpage-format .fw300,
.subpage-format .fw-light { font-weight: 300; }

.subpage-format .fw400,
.subpage-format .fw-regular { font-weight: 400; }

.subpage-format .fw500,
.subpage-format .fw-medium { font-weight: 500; }

.subpage-format .fw600,
.subpage-format .fw-semibold { font-weight: 600; }

.subpage-format .fw700,
.subpage-format .fw-bold { font-weight: 700; }


/* Links
------------------------------ */
.subpage-format a {
	font-size: inherit;
}

.subpage-format a img {
	transition: var(--transition-def);
}

.subpage-format a:hover img {
	opacity: 0.7;
}

.subpage-format a:link { text-decoration: none; color: var(--color-aqua); }
.subpage-format a:visited { text-decoration: none; color: var(--color-aqua); }
.subpage-format a:hover { text-decoration: none; color: var(--color-blue-light); }
.subpage-format a:active { text-decoration: none; color: var(--color-blue-light); }
.subpage-format :focus { outline: 0; }

.subpage-format a.link-txt:link { text-decoration: underline; color: var(--color-aqua); }
.subpage-format a.link-txt:visited { text-decoration: underline; color: var(--color-aqua); }
.subpage-format a.link-txt:hover { text-decoration: none; color: var(--color-blue-light); }
.subpage-format a.link-txt:active { text-decoration: none; color: var(--color-blue-light); }
.subpage-format .link-txt:focus { outline: 0; }


/* Element Format
------------------------------ */
html {
	scroll-behavior: smooth;
}

.subpage-format * {
	margin: 0;
	padding: 0;
	line-height: inherit;
	color: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-size: inherit;
	font-family: inherit;
	box-sizing: border-box;
}

.subpage-format {
	position: relative;
	width: 100%;
	min-width: 320px;
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: transparent;
}

.subpage-format *, .subpage-format *::after, .subpage-format *::before { box-sizing: inherit; }

.subpage-format h1,
.subpage-format h2,
.subpage-format h3,
.subpage-format h4,
.subpage-format h5,
.subpage-format h6,
.subpage-format p {
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	line-height: inherit;
	border: none;
	/*margin: 0;
	padding: 0;*/
	text-align: inherit;
	background: transparent;
	position: relative;
}

.subpage-format p { line-height: inherit; letter-spacing: inherit; }
.subpage-format p:not(:last-child) { margin-bottom: 1.5em; }

.subpage-format pre { white-space: pre-wrap; }

.subpage-format ul, .subpage-format ol, .subpage-format dl { /*margin: 0; padding: 0;*/ vertical-align: baseline; background: transparent; }
.subpage-format ol, .subpage-format li { list-style: none; }
.subpage-format dt, .subpage-format dd { font-weight: inherit; font-style: normal; /*margin: 0; padding: 0;*/ }
.subpage-format table{ border-collapse: collapse; border-spacing: 0; }
.subpage-format th, .subpage-format td { font-size: inherit; font-weight: inherit; font-style: normal; empty-cells: show; }
.subpage-format input, .subpage-format select { vertical-align: middle; }
.subpage-format input, .subpage-format textarea, .subpage-format select { font-family: inherit; font-size: inherit; font-weight: inherit; }


.subpage-format figure { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background: transparent; }

.subpage-format img { font-size: 0; line-height: 0; border: 0; vertical-align: bottom; }
.subpage-format img, .subpage-format object, .subpage-format embed, .subpage-format video { max-width: 100%; }

.subpage-format iframe { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }


/* Add Setting */
.subpage-format img,
.subpage-format svg {
	display: block;
	margin: 0 auto;
	width: initial;
	max-width: 100%;
	height: auto;
}

.subpage-format em, .subpage-format i {
	display: inline-block;
	font-style: normal;
	font-weight: inherit;
}

.subpage-format strong, .subpage-format b {
	font-style: normal;
	font-weight: inherit;
}


/* ==================================================
Library
================================================== */

/* Mediaquery
------------------------------ */
@media screen and (min-width: 901px) {}
@media screen and (max-width: 900px) {}

@media screen and (min-width: 769px) {}
@media screen and (max-width: 768px) {}

@media screen and (max-width: 640px) {}
@media screen and (max-width: 520px) {}
@media screen and (max-width: 480px) {}


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

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


/* Introduction Animation
------------------------------ */
#subpage-wrap {
	will-change: animation;
	animation: accessFadein 0.6s linear 0.1s both;
}

@keyframes accessFadein {
	0% { opacity: 0; }
	40% { opacity: 0; }
	100% { opacity: 1.2; }
}


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


/* 検証用
------------------------------ */
.scrollto {}
.none { display: none; }


/* transition: var(--transition-def);
------------------------------ */
:root {
	--transition-def: all 0.4s ease-out 0s;
}


/* ==================================================
Fonts Size - Variable ※w320-w900px間で可変
================================================== */

/* Variable Fonts Size */
:root {
	/*font-size: 10px;*/
	--fz-xxsmall: clamp(9px, 7.897px + 0.345vw, 11px);
	--fz-xsmall: clamp(10px, 8.897px + 0.345vw, 12px);
	--fz-small: clamp(11px, 9.897px + 0.345vw, 13px);
	--fz-regular: clamp(12px, 10.897px + 0.345vw, 14px);
	--fz-large: clamp(13px, 11.897px + 0.345vw, 15px);
	--fz-xlarge: clamp(14px, 12.897px + 0.345vw, 16px);
	--fz-xxlarge: clamp(15px, 13.897px + 0.345vw, 17px);
	--fz-extra: clamp(16px, 14.897px + 0.345vw, 18px);
	--fz-xextra: clamp(18px, 16.897px + 0.345vw, 20px);
	--fz-xxextra: clamp(19px, 17.345px + 0.517vw, 22px);
	--fz-xxxextra: clamp(20px, 17.793px + 0.69vw, 24px);
	
	/*--fz-page-ttl: clamp(28px, -0.69px + 8.966vw, 80px);*/
	--fz-page-ttl: clamp(26px, -0.483px + 8.276vw, 74px);
	--fz-page-caption: clamp(15px, 10.034px + 1.552vw, 24px);
	--fz-area-ttl: clamp(24px, 10.759px + 4.138vw, 48px);
	--fz-area-ttl-large: clamp(24px, 5.241px + 5.862vw, 58px);
}

/* 11 */ #subpage-wrap .fz-xxsmall { font-size: var(--fz-xxsmall); }
/* 12 */ #subpage-wrap .fz-xsmall { font-size: var(--fz-xsmall); }
/* 13 */ #subpage-wrap .fz-small { font-size: var(--fz-small); }
/* 14 */ #subpage-wrap .fz-regular { font-size: var(--fz-regular); }
/* 15 */ #subpage-wrap .fz-large { font-size: var(--fz-large); }
/* 16 */ #subpage-wrap .fz-xlarge { font-size: var(--fz-xlarge); }
/* 17 */ #subpage-wrap .fz-xxlarge { font-size: var(--fz-xxlarge); }
/* 18 */ #subpage-wrap .fz-extra { font-size: var(--fz-extra); }
/* 20 */ #subpage-wrap .fz-xextra { font-size: var(--fz-xextra); }
/* 22 */ #subpage-wrap .fz-xxextra { font-size: var(--fz-xxextra); }
/* 24 */ #subpage-wrap .fz-xxxextra { font-size: var(--fz-xxxextra); }


/* 80 */ #subpage-wrap .fz-page-ttl { font-size: var(--fz-page-ttl); }
/* 24 */ #subpage-wrap .fz-page-caption { font-size: var(--fz-page-caption); }
/* 48 */ #subpage-wrap .fz-area-ttl { font-size: var(--fz-area-ttl); }
/* 68 */ #subpage-wrap .fz-area-ttl-large { font-size: var(--fz-area-ttl-large); }


/* ==================================================
Variable Magine & Padding ※w320-w900px間で可変
================================================== */
:root {
	--clamp1: clamp(6px, 3.793px + 0.69vw, 10px);
	--clamp2: clamp(12px, 7.586px + 1.379vw, 20px);
	--clamp3: clamp(18px, 11.379px + 2.069vw, 30px);
	--clamp4: clamp(24px, 15.172px + 2.759vw, 40px);
	--clamp5: clamp(30px, 18.966px + 3.448vw, 50px);
	--clamp6: clamp(36px, 22.759px + 4.138vw, 60px);
	--clamp7: clamp(42px, 26.552px + 4.828vw, 70px);
	--clamp8: clamp(48px, 30.345px + 5.517vw, 80px);
	--clamp9: clamp(54px, 34.138px + 6.207vw, 90px);
	--clamp10: clamp(60px, 37.931px + 6.897vw, 100px);
	--clamp12: clamp(72px, 45.517px + 8.276vw, 120px);
	--clamp14: clamp(84px, 53.103px + 9.655vw, 140px);
	--clamp15: clamp(90px, 56.897px + 10.345vw, 150px);
	--clamp16: clamp(96px, 60.69px + 11.034vw, 160px);
	--clamp18: clamp(108px, 68.276px + 12.414vw, 180px);
	--clamp20: clamp(120px, 75.862px + 13.793vw, 200px);
	--clamp22: clamp(132px, 83.448px + 15.172vw, 220px);
	--clamp24: clamp(144px, 91.034px + 16.552vw, 240px);
	--clamp26: clamp(156px, 98.621px + 17.931vw, 260px);
	--clamp28: clamp(168px, 106.207px + 19.31vw, 280px);
	--clamp30: clamp(180px, 113.793px + 20.69vw, 300px);
}

/* margin-top */
#subpage-wrap .mt-1 { margin-top: var(--clamp1); }
#subpage-wrap .mt-2 { margin-top: var(--clamp2); }
#subpage-wrap .mt-3 { margin-top: var(--clamp3); }
#subpage-wrap .mt-4 { margin-top: var(--clamp4); }
#subpage-wrap .mt-5 { margin-top: var(--clamp5); }
#subpage-wrap .mt-6 { margin-top: var(--clamp6); }
#subpage-wrap .mt-7 { margin-top: var(--clamp7); }
#subpage-wrap .mt-8 { margin-top: var(--clamp8); }
#subpage-wrap .mt-9 { margin-top: var(--clamp9); }
#subpage-wrap .mt-10 { margin-top: var(--clamp10); }
#subpage-wrap .mt-12 { margin-top: var(--clamp12); }
#subpage-wrap .mt-14 { margin-top: var(--clamp14); }
#subpage-wrap .mt-15 { margin-top: var(--clamp15); }
#subpage-wrap .mt-16 { margin-top: var(--clamp16); }
#subpage-wrap .mt-18 { margin-top: var(--clamp18); }
#subpage-wrap .mt-20 { margin-top: var(--clamp20); }
#subpage-wrap .mt-22 { margin-top: var(--clamp22); }
#subpage-wrap .mt-24 { margin-top: var(--clamp24); }
#subpage-wrap .mt-26 { margin-top: var(--clamp26); }
#subpage-wrap .mt-28 { margin-top: var(--clamp28); }
#subpage-wrap .mt-30 { margin-top: var(--clamp30); }

/* margin-bottom */
#subpage-wrap .mb-1 { margin-bottom: var(--clamp1); }
#subpage-wrap .mb-2 { margin-bottom: var(--clamp2); }
#subpage-wrap .mb-3 { margin-bottom: var(--clamp3); }
#subpage-wrap .mb-4 { margin-bottom: var(--clamp4); }
#subpage-wrap .mb-5 { margin-bottom: var(--clamp5); }
#subpage-wrap .mb-6 { margin-bottom: var(--clamp6); }
#subpage-wrap .mb-7 { margin-bottom: var(--clamp7); }
#subpage-wrap .mb-8 { margin-bottom: var(--clamp8); }
#subpage-wrap .mb-9 { margin-bottom: var(--clamp9); }
#subpage-wrap .mb-10 { margin-bottom: var(--clamp10); }
#subpage-wrap .mb-12 { margin-bottom: var(--clamp12); }
#subpage-wrap .mb-14 { margin-bottom: var(--clamp14); }
#subpage-wrap .mb-15 { margin-bottom: var(--clamp15); }
#subpage-wrap .mb-16 { margin-bottom: var(--clamp16); }
#subpage-wrap .mb-18 { margin-bottom: var(--clamp18); }
#subpage-wrap .mb-20 { margin-bottom: var(--clamp20); }
#subpage-wrap .mb-22 { margin-bottom: var(--clamp22); }
#subpage-wrap .mb-24 { margin-bottom: var(--clamp24); }
#subpage-wrap .mb-26 { margin-bottom: var(--clamp26); }
#subpage-wrap .mb-28 { margin-bottom: var(--clamp28); }
#subpage-wrap .mb-30 { margin-bottom: var(--clamp30); }

/* padding-top */
#subpage-wrap .pt-1 { padding-top: var(--clamp1); }
#subpage-wrap .pt-2 { padding-top: var(--clamp2); }
#subpage-wrap .pt-3 { padding-top: var(--clamp3); }
#subpage-wrap .pt-4 { padding-top: var(--clamp4); }
#subpage-wrap .pt-5 { padding-top: var(--clamp5); }
#subpage-wrap .pt-6 { padding-top: var(--clamp6); }
#subpage-wrap .pt-7 { padding-top: var(--clamp7); }
#subpage-wrap .pt-8 { padding-top: var(--clamp8); }
#subpage-wrap .pt-9 { padding-top: var(--clamp9); }
#subpage-wrap .pt-10 { padding-top: var(--clamp10); }
#subpage-wrap .pt-12 { padding-top: var(--clamp12); }
#subpage-wrap .pt-14 { padding-top: var(--clamp14); }
#subpage-wrap .pt-15 { padding-top: var(--clamp15); }
#subpage-wrap .pt-16 { padding-top: var(--clamp16); }
#subpage-wrap .pt-18 { padding-top: var(--clamp18); }
#subpage-wrap .pt-20 { padding-top: var(--clamp20); }
#subpage-wrap .pt-22 { padding-top: var(--clamp22); }
#subpage-wrap .pt-24 { padding-top: var(--clamp24); }
#subpage-wrap .pt-26 { padding-top: var(--clamp26); }
#subpage-wrap .pt-28 { padding-top: var(--clamp28); }
#subpage-wrap .pt-30 { padding-top: var(--clamp30); }

/* padding-bottom */
#subpage-wrap .pb-1 { padding-bottom: var(--clamp1); }
#subpage-wrap .pb-2 { padding-bottom: var(--clamp2); }
#subpage-wrap .pb-3 { padding-bottom: var(--clamp3); }
#subpage-wrap .pb-4 { padding-bottom: var(--clamp4); }
#subpage-wrap .pb-5 { padding-bottom: var(--clamp5); }
#subpage-wrap .pb-6 { padding-bottom: var(--clamp6); }
#subpage-wrap .pb-7 { padding-bottom: var(--clamp7); }
#subpage-wrap .pb-8 { padding-bottom: var(--clamp8); }
#subpage-wrap .pb-9 { padding-bottom: var(--clamp9); }
#subpage-wrap .pb-10 { padding-bottom: var(--clamp10); }
#subpage-wrap .pb-12 { padding-bottom: var(--clamp12); }
#subpage-wrap .pb-14 { padding-bottom: var(--clamp14); }
#subpage-wrap .pb-15 { padding-bottom: var(--clamp15); }
#subpage-wrap .pb-16 { padding-bottom: var(--clamp16); }
#subpage-wrap .pb-18 { padding-bottom: var(--clamp18); }
#subpage-wrap .pb-20 { padding-bottom: var(--clamp20); }
#subpage-wrap .pb-22 { padding-bottom: var(--clamp22); }
#subpage-wrap .pb-24 { padding-bottom: var(--clamp24); }
#subpage-wrap .pb-26 { padding-bottom: var(--clamp26); }
#subpage-wrap .pb-28 { padding-bottom: var(--clamp28); }
#subpage-wrap .pb-30 { padding-bottom: var(--clamp30); }



/* ==================================================
Common Parts
================================================== */
body.subpage {
	position: relative;
}

@media screen and (min-width: 1000px) {
	body.subpage {
		padding-top: 78px;
	}
}


#subpage-wrap {
	position: relative;
	z-index: 1;
}

#subpage-bg {
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100lvh;
	background-color: #000;
	background-image: url(/iwf2023/asset_subpage/img/bg_body1.jpg);
	background-repeat: repeat;
	background-position: center top;
	transition: all 0.6s ease-out 0s;
	animation: stardust 12s ease-in-out 0s infinite both;
	will-change: top, background-position;
	-webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes stardust {
	0% {
		opacity: 0.5;
		filter: brightness(100%) contrast(100%) saturate(100%);
	}

	50% {
		opacity: 1;
		filter: brightness(140%) contrast(140%) saturate(120%);
	}

	100% {
		opacity: 0.5;
		filter: brightness(100%) contrast(100%) saturate(100%);
	}
}

.marker-black {
	color: #fff;
	background:linear-gradient(transparent 0%, #000 0%);
}

.marker-yellow {
	color: #000;
	/*background:linear-gradient(transparent 0%, var(--color-yellow) 0%);*/
	background:linear-gradient(transparent 3%, var(--color-yellow) 3%, var(--color-yellow) 97%, transparent 97%);
}

.marker-green {
	color: #000;
	/*background:linear-gradient(transparent 0%, var(--color-yellow) 0%);*/
	background:linear-gradient(transparent 3%, var(--color-green) 3%, var(--color-green) 97%, transparent 97%);
}

.marker-orange {
	color: #000;
	/*background:linear-gradient(transparent 0%, var(--color-yellow) 0%);*/
	background:linear-gradient(transparent 3%, var(--color-orange) 3%, var(--color-orange) 97%, transparent 97%);
}

.marker-special,
.marker-red {
	color: #000;
	/*background:linear-gradient(transparent 0%, var(--color-yellow) 0%);*/
	background:linear-gradient(transparent 3%, var(--color-red) 3%, var(--color-red) 97%, transparent 97%);
}



/* ==================================================
Page Header
================================================== */
#page-hdr {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: clamp(90px, 24%, 140px) min(3%, 30px) 0;
	margin-bottom: var(--clamp10);
}

#hdr-bg-wrap {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#hdr-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 70%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	will-change: top, background-position;
	-webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#hdr-bg::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.8;
}


/*#page-hdr::before,
#page-hdr::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 70%;
}

#page-hdr::after {
	z-index: -1;
	background-color: #000;
	opacity: 0.8;
}

#page-hdr::before {
	z-index: -2;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}*/


#page-hdr .hdr-inner {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	width: 100%;
	max-width: 1400px;
	position: relative;
	margin: 0 auto;
	/*padding-bottom: 60px;*/
	padding-bottom: 50px;
	box-shadow: 0 0 32px rgba(var(--rgb-aqua),0.12);
	/*filter: drop-shadow(0 0 32px rgba(var(--rgb-aqua), 0.12));*/
}

#page-hdr .hdr-inner::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0;
}

#page-hdr .hdr-inner>* {
	position: relative;
	z-index: 2;
}

/* about */
.page-about #hdr-bgr::after {
	opacity: 0.8;
}

.page-about #hdr-bg {
	background-image: url(/iwf2023/asset_subpage/img/about/bg_about.jpg);
}

.page-about #page-hdr .hdr-inner::after {
	opacity: 0;
}

.page-about #page-hdr .hdr-inner {
	background-image: url(/iwf2023/asset_subpage/img/about/bg_about.jpg);
	aspect-ratio: 120 / 68;
	min-height: 340px;
	max-height: 760px;
}


/* topics */
.page-topics #hdr-bg::after {
	opacity: 0.3;
}

.page-topics #hdr-bg {
	background-image: url(/iwf2023/asset_subpage/img/topics/bg_topics.jpg);
	transform: rotate(180deg);
}

.page-topics #page-hdr .hdr-inner::after {
	opacity: 0;
}

.page-topics #page-hdr .hdr-inner {
	background-image: url(/iwf2023/asset_subpage/img/topics/bg_topics.jpg);
	/*aspect-ratio: 120 / 18;
	min-height: 180px;*/
	padding-bottom: 20px;
}


/* invitation */
.page-invitation #hdr-bg::after {
	opacity: 0.6;
}

.page-invitation #hdr-bg {
	background-image: url(/iwf2023/asset_subpage/img/ticket/bg_ticket.jpg);
}

.page-invitation #page-hdr .hdr-inner::after {
	opacity: 0.2;
}

.page-invitation #page-hdr .hdr-inner {
	background-image: url(/iwf2023/asset_subpage/img/invitation/bg_invitation.jpg);
}


/* timetable */
.page-timetable #hdr-bg::after {
	opacity: 0.7;
}

.page-timetable #hdr-bg {
	background-image: url(/iwf2023/asset_subpage/img/timetable/bg_timetable.jpg);
}

.page-timetable #page-hdr .hdr-inner::after {
	opacity: 0.5;
}

.page-timetable #page-hdr .hdr-inner {
	background-image: url(/iwf2023/asset_subpage/img/timetable/bg_timetable.jpg);
	min-height: 180px;
}


/* live */
.page-live #hdr-bg::after {
	opacity: 0.6;
}

.page-live #hdr-bg {
	background-image: url(/iwf2023/asset_subpage/img/live/bg_live.jpg);
}

.page-live #page-hdr .hdr-inner::after {
	opacity: 0.4;
}

.page-live #page-hdr .hdr-inner {
	background-image: url(/iwf2023/asset_subpage/img/live/bg_live.jpg);
	min-height: 180px;
}


/* talk */
.page-talk #hdr-bg::after {
	opacity: 0.6;
}

.page-talk #hdr-bg {
	background-image: url(/iwf2023/asset_subpage/img/talk/bg_talk.jpg);
}

.page-talk #page-hdr .hdr-inner::after {
	opacity: 0.2;
}

.page-talk #page-hdr .hdr-inner {
	background-image: url(/iwf2023/asset_subpage/img/talk/bg_talk.jpg);
	min-height: 180px;
}


/* booth */
.page-booth #hdr-bg::after {
	opacity: 0.6;
}

.page-booth #hdr-bg {
	background-image: url(/iwf2023/asset_subpage/img/booth/bg_booth.jpg);
}

.page-booth #page-hdr .hdr-inner::after {
	opacity: 0.4;
}

.page-booth #page-hdr .hdr-inner {
	background-image: url(/iwf2023/asset_subpage/img/booth/bg_booth.jpg);
	padding-bottom: 50px;
}


/* lineup */
.page-lineup #hdr-bg::after {
	opacity: 0.7;
}

.page-lineup #hdr-bg {
	background-image: url(/iwf2023/asset_subpage/img/lineup/bg_lineup.jpg);
}

.page-lineup #page-hdr .hdr-inner::after {
	opacity: 0.2;
}

.page-lineup #page-hdr .hdr-inner {
	background-image: url(/iwf2023/asset_subpage/img/lineup/bg_lineup.jpg);
	min-height: 180px;
}


/* ticket */
.page-ticket #hdr-bg::after {
	opacity: 0.7;
}

.page-ticket #hdr-bg {
	background-image: url(/iwf2023/asset_subpage/img/ticket/bg_ticket.jpg);
}

.page-ticket #page-hdr .hdr-inner::after {
	opacity: 0.2;
}

.page-ticket #page-hdr .hdr-inner {
	background-image: url(/iwf2023/asset_subpage/img/ticket/bg_ticket.jpg);
	min-height: 180px;
}

/**/


/* #page-title
------------------------------ */
#page-title {
	text-align: left;
	padding: 0 1% 0 3%;
	transform: translateY(-2em);
}

@media screen and (max-width: 640px) {
	#page-title {
		transform: translateY(-1em);
	}
}


#page-title h1 {
	line-height: 1;
	margin-bottom: clamp(20px, 4%, 40px);
	position: relative;
	font-size: var(--fz-page-ttl);
	--icon-width: clamp(24px, 6.345px + 5.517vw, 56px);
	--indent-width: clamp(36px, 18.345px + 5.517vw, 68px);

	padding-left: var(--indent-width);
}

#page-title h1::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	/*bottom: 0;
	margin: auto 0;*/
	width: var(--icon-width);
	aspect-ratio: 56 / 72;
	background: url(/iwf2023/asset_subpage/img/svg/icon_title.svg) no-repeat center center;
	background-size: contain;
	/*vertical-align: middle;
	margin-right: 0.2em;*/
	transform: translateY(3px);
}

#page-title h1 b {
	display: inline-block;
}


#page-title .caption {
	font-size: var(--fz-page-caption);
}

#page-title .caption p {
	line-height: 1.6;
}