@charset "utf-8";

/*~~*/

#cover {

	position: relative;

	#gtranslate {
		position: absolute;
		top: 0;
		right: 80px;
		z-index: 100;
		display: inline-block;
		padding: 1px;
		border: 1px solid var(--bd-base-light);
		border-top: none;
		border-radius: 0 0 5px 5px;
		background: #fff;
		.gt-current-lang {
			padding: 5px 5px;
		}
		.gt_float_switcher {
			box-shadow: none !important;
		}
	}

	ul {
		display: flex;
		flex-wrap: wrap;
	}

	li {
		border-bottom: 10px solid #000;
		border-radius: 0 0 5px 5px;
		background-color: var(--bg-nav);
		font-size: var(--fs-body);
		text-align: center;

		a {
			width: 100%;
			height: 100%;
			padding: 5px 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	li.admission { border-color: var(--bg-admission); }
	li.admission:hover { background-color: var(--bg-admission); }

	li.access { border-color: var(--bg-access); }
	li.access:hover { background-color: var(--bg-access); }

	li.events { border-color: var(--bg-events); }
	li.events:hover { background-color: var(--bg-events); }

	li.exhibitors { border-color: var(--bg-exhibitors); }
	li.exhibitors:hover { background-color: var(--bg-exhibitors); }

	li.floormap { border-color: var(--bg-floormap); }
	li.floormap:hover { background-color: var(--bg-floormap); }

	li:hover a { color: #fff; }

	/*ENGLISH*/
	li.enoverview { border-color: var(--bg-en); }
	li.enoverview:hover { background: var(--bg-en); }
	li.enapplication { border-color: var(--bg-en); }
	li.enapplication:hover { background: var(--bg-en); }
	li.enschedule { border-color: var(--bg-en); }
	li.enschedule:hover { background: var(--bg-en); }
	li.enaccess { border-color: var(--bg-access); }
	li.enaccess:hover { background: var(--bg-access); }
	li.japanese { border-color: var(--bg-jp); }
	li.japanese:hover { background: var(--bg-jp); }

}

#cont {
	color: #fff;
	background-color: rgba(235,0,45,.8);
	position: relative;
}

#event {
	#line, #icon-base { fill: var(--bg-events); }
	.name { border-bottom: 7px solid var(--bg-events); }
}
#exhibitors {
	#line, #icon-base { fill: var(--bg-exhibitors); }
	.name { border-bottom: 7px solid var(--bg-exhibitors); }
}
#floormap {
	#line, #icon-base { fill: var(--bg-floormap); }
	.name { border-bottom: 7px solid var(--bg-floormap); }
}

#parking {
	#line, #icon-base { fill: var(--bg-parking); }
	.name { border-bottom: 7px solid var(--bg-parking); }
}
#qa {
	#line, #icon-base { fill: var(--bg-qa); }
	.name { border-bottom: 7px solid var(--bg-qa); }
}
#localbooth {
	#line, #icon-base { fill: var(--bg-localbooth); }
	.name { border-bottom: 7px solid var(--bg-localbooth); }
}
#photogallery {
	#line, #icon-base { fill: var(--bg-photogallery); }
	.name { border-bottom: 7px solid var(--bg-photogallery); }
}

#navi {
	display: flex;
	flex-wrap: wrap;
}

#menu {
	display: flex;
	flex-wrap: wrap;
}

#followpage {
	#line {
		fill: var(--bg-exhibitors);
	}
	dt {
		width: 50%;
	}
	div {
		display: flex;
		flex-direction: column;
		gap: 10px;
		dd {
			a {
				padding: 3px 10px;
				display: block;
				background-color: var(--bg-exhibitors);
				border-radius: 5px;
				color: #fff;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				min-width: 0;
			}
			a:hover {
				background-color: #000;
				border-radius: 5px;
			}
		}
	}
}


/*SP*/
@media screen and (max-width: 768px) {
/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/

	#cover {
		height: 100dvh;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;

		h1 {
			position: absolute;
			bottom: 75px;
			padding: 15px;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 5px;

			img:first-child { width: 100%; }
			img:last-child  { width: 90%; }

		}
		svg { display: none; }

		nav {
			position: absolute;
			top: 40px;
			left: 15px;
			right: 15px;
			background: rgba(255,255,255,.5);
			padding: 10px;
			border-radius: 5px;
			max-height: 0;
			opacity: 0;
			overflow: hidden;
			transition: max-height .35s ease, opacity .25s ease;
		}
		nav.open {
			max-height: 60vh;
			opacity: 1;
		}

		ul {
			display: flex;
			flex-wrap: wrap;
			gap: 2px;
		}
		li {
			width: calc((100% - 2px) / 2);
		}
		li:last-child { width: 100%; }

		#nav-btn {
			position: absolute;
			top: 0px;
			right: 15px;
			padding: 10px;
			background-color: #000;
			border: none;
			border-radius: 0 0 5px 5px ;
			cursor: pointer;
			z-index: 1000;
			.bar {
				position: relative;
				display: block;
				width: 35px;
				height: 2px;
				background: #fff;
				border-radius: 2px;
				transition: transform .25s ease, opacity .2s ease, width .2s ease;
			}
			.bar + .bar { margin-top: 7px; }
			.bar:nth-child(1),
			.bar:nth-child(3) { transform-origin: 50% 50%; }
			&[aria-expanded="true"] {
				.bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
				.bar:nth-child(2) { opacity: 0; transform: scaleX(.5); }
				.bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
			}
		}

	}

	main {
		margin-top: -80px;

		#cont {
			height: 80px;
			padding: 5px 15px;
			display: grid;
			grid-template-columns: 1fr auto;
			grid-template-rows: min-content auto;
			gap: .5rem 1rem;
			align-items: end;

			> div { display: contents; }

			> h2 {
				grid-row: 2;
				grid-column: 1;
				margin: 0;
				transform: translateY(-.5em);

				img { display: block; height: auto; }
			}

			#conttxt { font-size: 10px; line-height: 1.25; }

			#counter {
				grid-row: 1 / span 2;
				grid-column: 2;
				align-self: end;
				display: flex;
				align-items: flex-end;
				gap: .25rem;
				white-space: nowrap;
				line-height: 1;

				span { line-height: 1; display: inline-block; }
				span:first-child { font-size: 70px; }
				span:last-child { font-size: 32px; transform: translateY(-.25em); }
			}
		}

		#news {
			margin-top: 15px;
			padding: 0 15px;

			li {
				margin-bottom: 15px;
				padding-bottom: 15px;
				border-bottom: 1px dotted #000;

				&:first-child { margin-top: 0; padding-top: 0; }
				> div {
					display: grid;
					grid-template-columns: auto minmax(0, 1fr);
					grid-template-columns: max-content minmax(0, 1fr);
					grid-template-areas:
						"head  title"
						"desc  desc";
					column-gap: .75rem;
					row-gap: .5rem;
					align-items: center;

					.body { display: contents; }

					.head {
						grid-area: head;
						width: 120px;
						border-radius: 5px;

						.cate {
							padding: 5px;
							display: flex;
							align-items: center;
							justify-content: center;
							height: 100%;
							font-size: 1.2rem;
						}
						.date {
							margin-top: auto;
							padding: 5px;
							text-align: center;
							background-color: #000;
							color: #fff;
							border-radius: 0 0 5px 5px;
							font-size: 1.2rem;
							line-height: 100%;
						}
					}

					h3 {
						grid-area: title;
						margin: 0;
						font-size: 1.6rem;
						line-height: 1.25;
					}
					p {
						grid-area: desc;
						margin: 0;
						line-height: 1.6;
					}
				}
			}
		}

		#navi {
			padding: 0 15px 15px;
			flex-direction: column;
			gap: 25px;
			li {
				width: 100%;
				.name {
					margin-top: 5px;
					font-size: 1.2rem;
					text-align: center;
				}
			}
		}

		#menu {
			margin-top: 15px;
			padding: 0 15px 15px;
			gap: 20px;
			li {
				width: calc((100% - 20px) / 2);
				.name {
					margin-top: 5px;
					font-size: 1.2rem;
					text-align: center;
				}
			}
		}

		#followpage {
			margin-top: 15px;
			padding: 0 15px 15px;
			dt {
				margin-left: 10px;
			}
			div {
				margin-top: -18px;
				padding: 30px 10px 10px;
				background-color: var(--bg-base);
				border-radius: 10px;
			}
		}

	}
/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/
}

/*PC*/
@media screen and (min-width: 769px) {
/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/

	#cover {
		margin-top: 25px;

		#gtranslate {
			right: 20px;
		}

		h1 {
			width: 80%;
			position: absolute;
			z-index: 2;
			bottom: 15%;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			gap: 6%;

			img:first-child { width: 52%; }
			img:last-child  { width: 42%; }
		}

		.crip {
			position: relative;
			z-index: 1;
			width: 100%;
			display: block;
			aspect-ratio: 1000 / 500;
			height: auto;
			pointer-events: none;
		}

		nav {
			width: 70%;
			height: 12%;
			position: absolute;
			z-index: 0;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}

		ul {
			display: flex;
			height: 100%;
			column-gap: 10px;
		}

		li {
			width: calc((100% - 40px) / 5);
			border-radius: 0 0 10px 10px;
		}
		li:last-child {
			width: calc((100% - 40px) / 5);
		}
		li a {
			padding: 10px 0 0;
		}
	}

	main {
		margin-top: 50px;
		min-height: 500px;
		background-image: url("../img/fshow2026-bgimg-home.jpg");
		#info {
			display: flex;

			#cont {
				display: flex;
				flex-direction: column;
				width: 230px;
				padding: 15px;
				background-color: rgba(235,0,45,1);
				border-radius: 10px 0 0 10px;

				> div {
					margin-top: auto;
					display: flex;
					flex-direction: column;
					gap: .25em;
				}

				p { margin: 0; text-align: center; }

				#counter {
					display: inline-flex;
					align-items: flex-end;
					justify-content: center;
					font-size: 70px;
					line-height: 1;

					span:nth-child(2) { font-size: 35px; line-height: 1.45; }
				}
			}

			#news {
				flex: 1;
				padding: 15px;
				background-color: var(--bg-base);
				border-radius: 0 10px 10px 0;

				li {
					margin-top: 15px;
					padding-top: 15px;
					border-top: 1px dotted #000;

					&:first-child { margin-top: 0; padding-top: 0; border-top: none; }
					> div { display: flex; }
				}

				.head {
					display: flex;
					flex-direction: column;
					width: 120px;
					border-radius: 5px;

					.cate {
						padding: 5px;
						display: flex;
						align-items: center;
						justify-content: center;
						height: 100%;
					}
					.date {
						margin-top: auto;
						padding: 5px;
						text-align: center;
						background-color: #000;
						color: #fff;
						border-radius: 0 0 5px 5px;
						font-size: 1.2rem;
						line-height: 100%;
					}
				}

				.body {
					flex: 1;
					margin-left: 10px;
					padding-right: 5px;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}

				.awrap:has(a):hover > div {
  					background-color: rgba(0, 0, 0, 0.3);
					border-radius: 5px;
				}

				h3 { font-size: 1.6rem; }

				/*ENGLISH*/
				.endate {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120px;
					padding: 5px;
					border-radius: 5px;
					background-color: #0061ff;
					color: #fff;
				}

			}
		}

		#navi {
			width: 100%;
			min-width: 800px;
			margin: 50px auto;
			flex-direction: row;
			justify-content: center;
			column-gap: 25px;

			li {
				width: calc(calc(100% - 50px) / 3);
				.name {
					padding: 5px 0 5px;
					text-align: center;
				}
			}

			#event:hover #base { fill: var(--bg-events); }
			#exhibitors:hover #base { fill: var(--bg-exhibitors); }
			#floormap:hover #base { fill: var(--bg-floormap); }
		}

		#menu {
			width: 80%;
			min-width: 800px;
			margin: 50px auto 0;
			justify-content: center;
			column-gap: 20px;

			li {
				width: calc((100% - 60px) / 4);
				.name {
					padding: 15px 0 5px;
					text-align: center;
				}
			}

			#parking:hover #base { fill: var(--bg-parking); }
			#qa:hover #base { fill: var(--bg-qa); }
			#localbooth:hover #base { fill: var(--bg-localbooth); }
			#photogallery:hover #base { fill: var(--bg-photogallery); }
		}

		#followpage {
			margin-top: 70px;
			display: flex;
			align-items: center;
			dt {
				width: 160px;
			}
			div {
				margin-top: 0px;
				padding: 5px;
				flex: 1;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				gap: 10px;
				background-color: var(--bg-base);
				background-color: color-mix(in srgb, var(--bg-base), transparent 50%);
				border-radius: 5px;
				dd {
					width: calc((100% - 50px) / 6);
				}
			}
		}

	}

/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/
}