@charset "UTF-8";

/* ==================================================
Page Header
================================================== */
#page-hdr {
	margin-bottom: var(--clamp8);
}

#page-title {
	margin-bottom: 20px;
}

#hdr-contents {
	background-color: rgba(var(--rgb-black), 0.6);
	padding: 35px min(3%, 30px) 30px;
	width: min(94%, 1000px);
	margin: 0 auto;
	border: 1px solid rgba(var(--rgb-yellow), 0.6);
}

#hdr-contents .info-block {
	width: min(100%, 800px);
  margin-inline: auto;
}

#hdr-contents .ttl {
	font-size: clamp(18px, 10.276px + 2.414vw, 32px);
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: var(--clamp2);
}
#hdr-contents .ttl b {
	display: inline-block;
}
#hdr-contents .comment {
}
#hdr-contents .comment p {
	display: inline-block;
	margin-inline: auto;
	text-align: left;
	color: var(--color-aqua);
}
#hdr-contents .btn-block {
}
#hdr-contents .btn-block a.btn-more {
	position: relative;
	z-index: 1;
	display: block;
	width: min(60%, 260px);
	margin-inline: auto;
	margin-top: var(--clamp2);
	padding: 0.4em 1.2em 0.4em 0.8em;
	/*font-family: var(--font-mix);*/
	font-family: var(--font-en);
	color: var(--color-black) !important;
	background-color: var(--color-orange);
	font-size: var(--fz-extra);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	transition: var(--transition-def);
	overflow: hidden;
}

#hdr-contents .btn-block a.btn-more:hover {
	filter: var(--hover-filter-def);
}

#hdr-contents .btn-block a.btn-more::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0.8em;
	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);
	transform: rotate(90deg) translateX(-1px);
}

#hdr-contents .btn-block a.btn-more:hover::after {
	transform: rotate(90deg) translateX(3px);
}


#hdr-contents .btn-block a.btn-more span {
}


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


/* ==================================================
Technology Booth Area
================================================== */
#booth-area {
}

#booth-area .area-inner {
	width: 94%;
	margin-inline: auto;
}

#area-head {
	margin-bottom: 60px;
}

#area-body {
}

#area-foot {
	margin-top: var(--clamp10);
}

a.link-btn.type-ticket {
  clip-path: polygon(12% 0, 100% 0%, 88% 100%, 0% 100%);
  background-color: var(--color-blue);
	color: var(--color-white) !important;
	font-family: var(--font-en);
	font-weight: 400;
	font-size: var(--fz-large);
	line-height: 1;
	letter-spacing: 0;
	margin: 0 auto;
  padding: 1.2em 2em;
  vertical-align: baseline;
	width: 200px;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
	transition: var(--transition-def);
}

a.link-btn.type-ticket:hover {
	background-color: var(--color-blue-dark);
	filter: var(--hover-filter-def);
	color: var(--color-aqua) !important;
}


/* ==================================================
#head-caution
================================================== */
#head-caution {
	color: var(--color-white);
	font-size: var(--fz-extra);
	letter-spacing: 0.08em;
}

#head-caution p {
	margin-bottom: var(--clamp2);
}

#head-caution p>span {
	display: inline-block;
}

@media (width <= 640px) {
	#head-caution p>span {
		display: block;
	}
}

#head-caution p b.label {
	display: inline-block;
	color: var(--color-aqua);
	border: 1px solid rgba(var(--rgb-aqua), 0.6);
	background-color: rgba(var(--rgb-black), 0.7);
	border-radius: 4px;
	line-height: 1.2;
	font-weight: 700;
	padding: 1px 2px 1px 6px;
}

#head-caution p b.label.day1 {
	color: var(--color-day1);
	border: 1px solid rgba(var(--rgb-day1), 0.6);
}

#head-caution p b.label.day2 {
	color: var(--color-day2);
	border: 1px solid rgba(var(--rgb-day2), 0.6);
}

#head-caution p b.label.day3 {
	color: var(--color-day3);
	border: 1px solid rgba(var(--rgb-day3), 0.6);
}

#head-caution dl {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
	margin-inline: auto;
	padding: 0 15px 6px;
	border-bottom: 1px solid var(--color-yellow);
	color: var(--color-yellow);
	font-weight: 700;
}

#head-caution dl dt {
	margin-right: 16px;
}

#head-caution dl dd {
	
}


/* ==================================================
.booth-block
================================================== */
.booth-block {
	position: relative;
	width: min(100%, 1100px);
	margin-inline: auto;
	border: 1px solid rgba(var(--rgb-aqua), 0.3);
	background-color: rgba(0,0,0,0.8);
}

.booth-block:nth-of-type(n+2) {
	margin-top: var(--clamp10);
}

.booth-block-inner {
	position: relative;
	width: 100%;
	padding: 50px 3% 60px;
	z-index: 1;
}


.booth-block::before,
.booth-block::after,
.booth-block-inner::before,
.booth-block-inner::after {
	content: "";
	background-image: url(/iwf2023/asset_subpage/img/svg/frame_corner.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	position: absolute;
	width: 60px;
	aspect-ratio: 1 / 1;
}

.booth-block::before {
	top: -3px;
	left: -3px;
}

.booth-block::after {
	top: -3px;
	right: -3px;
	transform: rotate(90deg);
}

.booth-block-inner::before {
	bottom: -3px;
	left: -3px;
	transform: rotate(-90deg);
}

.booth-block-inner::after {
	bottom: -3px;
	right: -3px;
	transform: rotate(180deg);
}

/* .type-foodtruck */
.booth-block.type-foodtruck {
	border: 1px solid rgba(var(--rgb-orange), 0.3);
}

.booth-block.type-foodtruck::before,
.booth-block.type-foodtruck::after,
.type-foodtruck .booth-block-inner::before,
.type-foodtruck .booth-block-inner::after {
	content: "";
	background-image: url(/iwf2023/asset_subpage/img/svg/frame_corner_orange.svg);
}


/* .block-ttl
------------------------------ */
h2.block-ttl {
	line-height: 1.4;
  color: var(--color-aqua);
  /*color: var(--color-white);*/
  font-weight: 700;
  font-size: clamp(18px, 12.483px + 1.724vw, 28px);
	margin-bottom: var(--clamp4);
}

/* .type-foodtruck */
.type-foodtruck h2.block-ttl {
  color: var(--color-yellow);
}


/* .block-detail
------------------------------ */
dl.block-detail {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
}

dl.block-detail dt {
	width: 48%;
	border: 1px solid rgba(var(--rgb-aqua), 0.8);
	padding: 6px;
}

dl.block-detail dd {
	width: 50%;
	text-align: left;
}

dl.block-detail dd h3 {
	color: var(--color-yellow);
  font-size: clamp(16px, 13.793px + 0.69vw, 20px);
  line-height: 1.4;
  font-weight: 700;
  margin-bottom: 0.3em;
	border-bottom: 2px dotted rgba(var(--rgb-aqua), 0.4);
	padding: 0.4em 0 0.8em;
	margin-bottom: 1em;
}

dl.block-detail dd p {
	color: var(--color-aqua);
  font-size: var(--fz-xlarge);
  letter-spacing: 0.08em;
}

dl.block-detail dd p a {
	
}

dl.block-detail dd p a:link,
dl.block-detail dd p a:visited {
	color: var(--color-blue-light);
	text-decoration: underline;
}

dl.block-detail dd p a:hover,
dl.block-detail dd p a:active {
	color: var(--color-blue);
	text-decoration: none;
}

/* .type-foodtruck */
.type-foodtruck dl.block-detail {
	display: block;
}

.type-foodtruck dl.block-detail dt {
	width: min(100%, 680px);
	margin-inline: auto;
	margin-bottom: var(--clamp4);
	border: 1px solid rgba(var(--rgb-orange), 0.8);
}

.type-foodtruck dl.block-detail dd {
	width: min(100%, 680px);
	margin-inline: auto;
}

.type-foodtruck dl.block-detail dd h3 {
	color: var(--color-yellow);
	border-bottom: 2px dotted rgba(var(--rgb-orange), 0.4);
}

.type-foodtruck dl.block-detail dd p {
	color: var(--color-aqua);
}


@media (width <= 900px) {
	h2.block-ttl {
		text-align: left;
		width: min(100%, 680px);
		margin-inline: auto;
	}

	dl.block-detail {
		display: block;
		text-align: left;
		width: min(100%, 680px);
		margin-inline: auto;
	}
	
	dl.block-detail dt {
		width: min(100%, 680px);
		margin-inline: auto;
		text-align: left;
		margin-bottom: var(--clamp4);
	}
	
	dl.block-detail dd {
		width: 100%;
	}
}

/* .link-btn */
dl.block-detail a.link-btn {
	position: relative;
	z-index: 1;
	display: block;
	text-align: left;
	width: min(60%, 170px);
	margin-inline: auto;
	margin-top: 2em;
	padding: 0.4em 1.2em 0.4em 0.8em;
	font-family: var(--font-mix);
	color: var(--color-black) !important;
	background-color: var(--color-aqua);
	font-size: var(--fz-regular);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	transition: var(--transition-def);
	overflow: hidden;
}

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

dl.block-detail a.link-btn.type-external {
	letter-spacing: 0.08em;
	margin-inline: 0 auto;
}

dl.block-detail a.link-btn::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);
}

dl.block-detail a.link-btn:not(.type-external):hover::after {
	transform: translateX(4px);
}

dl.block-detail a.link-btn.type-external::after {
	width: 14px;
	aspect-ratio: 1 / 1;
	background-image: url(/iwf2023/asset_subpage/img/svg/icon_link_target_black.svg);
}

dl.block-detail a.link-btn:not(.type-external):hover::after {
	transform: translateX(4px);
}

dl.block-detail a.link-btn.type-external:hover::after {
}

dl.block-detail a.link-btn.type-external {
}


/* #foodtruck
------------------------------ */
#foodtruck {
	padding-top: var(--clamp5);
}

#foodtruck .frame-ttl {
	width: min(96%, 800px);
	margin-inline: auto;
	margin-top: var(--clamp8);
}

#foodtruck .frame-ttl::before,
#foodtruck .frame-ttl::after {
	content: "";
	display: block;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

#foodtruck .frame-ttl::before {
	background-image: url(/iwf2023/asset_subpage/img/svg/frame_comment_head_orange.svg);
	background-position: right top;
	height: 32px;
	margin-bottom: 20px;
}

#foodtruck .frame-ttl::after {
	background-image: url(/iwf2023/asset_subpage/img/svg/frame_comment_foot_orange.svg);
	background-position: left bottom;
	height: 34px;
	margin-top: 30px;
}

#foodtruck .frame-ttl p {
	display: inline-block;
	color: var(--color-yellow);
	font-size: clamp(24px, 18.483px + 1.724vw, 34px);
	font-weight: 700;
	line-height: 1.6;
}

#foodtruck .frame-ttl p b {
	display: inline-block;
}

#foodtruck + .booth-block {
	margin-top: var(--clamp8);
}

/* #foodtruck
------------------------------ */
.block-menu {
	width: min(100%, 680px);
	margin-inline: auto;
	color: var(--color-orange);
	margin-top: var(--clamp5);
	margin-bottom: var(--clamp2);
	border: 1px solid rgba(var(--rgb-orange), 0.8);
}

.block-menu .block-ttl {
	color: var(--color-black);
	background-color: rgba(var(--rgb-orange), 0.8);
	font-family: var(--font-en);
	line-height: 1.2;
	letter-spacing: 0.1em;
	font-size: var(--fz-xextra);
	padding: 2px 10px;
}

.block-menu .block-ttl b {
	display: inline-block;
}

.block-menu ul {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	flex-direction: row;
	padding: 30px 3% 10px;
}

.block-menu ul li {
	width: 47%;
	margin: 0 0 24px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	line-height: 1.2;
	font-size: var(--fz-xlarge);
	border-bottom: 1px dotted rgba(var(--rgb-orange), 0.6);
	padding-bottom: 8px;
}

.block-menu ul li.note {
	display: block;
	width: 100%;
	margin: 0;
	border-bottom: none;
	text-align: right;
	font-size: var(--fz-small);
}

.block-menu ul li.wide {
	width: 100%;
}

.block-menu ul li.blank {
	width: 100%;
	margin: 0;
	border-bottom: none;
	padding-bottom: 0;
	min-height: 16px;
}

.block-menu ul li .menu {
	width: calc(100% - 90px);
	text-align: left;
}

.block-menu ul li .price {
	width: 90px;
	text-align: right;
}


@media (width <= 640px) {
	.block-menu ul {
		display: block;
	}

	.block-menu ul li {
		width: 100%;
		margin: 0 0 24px;
	}
}