@charset "utf-8";

/*----------------------------------------
A Room
©︎ 2022 Cozue Isao Yoshimura
----------------------------------------*/

:root {
	--color-bg-primary: #faf6f5;
	--color-bg-grey: #ebebeb;
	--color-bg-dark: #333333;

	--color-black: #1f2412;
	--color-grey: #666666;
	--color-white: #fff;

	--font-common: "Montserrat", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", sans-serif;
	--font-heading: "Noto Serif Display", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", sans-serif;

	--spacing-common: 1rem;
}

@media screen and (min-width:769px) {
	:root {	
		--spacing-common: 2rem;
	}
}

/*----------------------------------------
ANIMATION
----------------------------------------*/
@-webkit-keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-webkit-keyframes translateXright {
	0% {-webkit-transform: translateX(0);transform: translateX(0);}
	50% {-webkit-transform: translateX(-50%);transform: translateX(-50%);}
	100% {-webkit-transform: translateX(0);transform: translateX(0);}
}
@keyframes translateXright {
	0% {-webkit-transform: translateX(0);transform: translateX(0);}
	50% {-webkit-transform: translateX(-50%);transform: translateX(-50%);}
	100% {-webkit-transform: translateX(0);transform: translateX(0);}
}
@-webkit-keyframes translateXleft {
	0% {-webkit-transform: translateX(0);transform: translateX(0);}
	50% {-webkit-transform: translateX(50%);transform: translateX(50%);}
	100% {-webkit-transform: translateX(0);transform: translateX(0);}
}
@keyframes translateXleft {
	0% {-webkit-transform: translateX(0);transform: translateX(0);}
	50% {-webkit-transform: translateX(50%);transform: translateX(50%);}
	100% {-webkit-transform: translateX(0);transform: translateX(0);}
}

/*----------------------------------------
COMMON SETTINGS
----------------------------------------*/
*, *::after, *::before {
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
}
html {
	scroll-behavior: smooth;
}
body {
	-webkit-animation: fadeIn 2s;
	        animation: fadeIn 2s;
	background-color: var(--color-bg-primary);
}

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

@media screen and (min-width:769px) {
	.sp-only {
		display: none;
	}
}

/*----------------------------------------
FONTS
----------------------------------------*/
*, *::after, *::before {
	color: var(--color-black);
	font-family: var(--font-common);
	font-weight: 500;
	letter-spacing: .05em;
	line-height: 2;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
	font-weight: 500;
	line-height: 1.4;
}
:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4)+* {
	margin-top: 1em;
}
p {
	font-size: .9rem;
}
p+* {
	margin-top: 1em;
}
small, .small {
	font-size: .8rem;
}
span, span::after, span::before {
	color: inherit;
	font-family: inherit;
}

.align-center {
	text-align: center;
}

@media screen and (max-width:768px) {
	.sp-align-center {
		text-align: center;
	}
	.sp-align-left {
		text-align: left;
	}
}

@media screen and (min-width:769px) {
	.pc-align-center {
		text-align: center;
	}
	.pc-align-left {
		text-align: left;
	}
}

/*----------------------------------------
HEADING
----------------------------------------*/
[class^="heading"] {
	font-family: var(--font-heading);
	font-size: 3.2rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
}
[class^="heading"]+* {
	margin-top: 0;
}

.heading-title {
	font-size: 4.8rem;
	letter-spacing: -.02em;
}

@media screen and (min-width:769px) {
	[class^="heading"] {
		font-size: 4.8rem;
	}
	.heading-title {
		font-size: 8rem;
	}
}

/*----------------------------------------
BUTTON
----------------------------------------*/
button, [class^="button"] {
	margin: var(--spacing-common) auto;
	max-width: 100%;
	min-width: 8em;
	position: relative;
	text-align: center;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
}
:is(button, [class^="button"])::after, :is(button, [class^="button"])::before {
	background-color: var(--color-black);
	content: "";
	display: inline-block;
	position: absolute;
		top: calc(50% - 0.25em);
	width: .5em;
	height: .5em;
}
:is(button, [class^="button"])::after {
	-webkit-animation: translateXright 1s infinite;
	        animation: translateXright 1s infinite;
	-webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%);
	        clip-path: polygon(0 50%, 100% 0, 100% 100%);
	right: 0;
}
:is(button, [class^="button"])::before {
	-webkit-animation: translateXleft 1s infinite;
	        animation: translateXleft 1s infinite;
	-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
	        clip-path: polygon(0 0, 100% 50%, 0 100%);
	left: 0;
}
button, [class^="button"]>* {
	display: block;
	text-decoration: none;
}
:is(button, [class^="button"]>*)::after {
	border-bottom: 2px solid var(--color-black);
	content: "";
	display: block;
	-webkit-transform: scaleX(1.2);
	    -ms-transform: scaleX(1.2);
	        transform: scaleX(1.2);
}

@media screen and (min-width:1024px) {
	:is(button, [class^="button"]>*):hover::after {
		-webkit-transform: scaleX(1);
		    -ms-transform: scaleX(1);
		        transform: scaleX(1);
	}
}

/*----------------------------------------
IMAGE
----------------------------------------*/
figure {
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	height: 100%;
}
figure+* {
	margin-top: 1em;
}
img {
	-o-object-fit: cover;
	   object-fit: cover;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	height: 100%;
}

/*----------------------------------------
COMPONENT - MV
----------------------------------------*/
figure.mv {
	aspect-ratio: 1/1;
	max-height: 80vh;
	max-width: 800px;
	position: relative;
}
figure.mv>img {
	position: absolute;
}
figure.mv>img:nth-child(2) {
	padding: 10%;
}

@media screen and (orientation:portrait) {
	figure.mv {
		aspect-ratio: 3/4;
	}
}

/*----------------------------------------
COMPONENT - MAP
----------------------------------------*/
iframe {
	width: 100%;
	height: 50vh;
}

@media screen and (max-width:768px) {
	iframe {
		margin-top: var(--spacing-common)!important;
	}
}

/*----------------------------------------
LIST
----------------------------------------*/
:is(ol, ul):where([class]) {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.list-exhibitors {
	margin: 0 auto;
}
ul.list-exhibitors>li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
	position: relative;
	width: 100%;
}
ul.list-exhibitors>li::before {
	border-top: 2px solid var(--color-black);
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	z-index: -1;
}
ul.list-exhibitors>li>* {
	background-color: var(--color-bg-primary);
	margin: 0;
	padding: .8em;
}
ul.list-exhibitors>li>*:first-child {
	padding-left: 0;
}
ul.list-exhibitors>li>*:last-child {
	padding-right: 0;
}
ul.list-exhibitors>li+li {
	margin-top: var(--spacing-common);
}

ul.list-exhibitors>li .link>* {
	position: relative;
	text-decoration: none;
}
ul.list-exhibitors>li .link>*::before {
	background-color: var(--color-black);
	-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
	        clip-path: polygon(0 0, 100% 50%, 0 100%);
	content: "";
	display: inline-block;
	position: absolute;
		top: calc(50% - 0.25em);
		left: -1em;
	width: .5em;
	height: .5em;
}

ul.list-note {
	font-size: .8rem;
	margin: 1em auto;
}
ul.list-note>li::before {
	content: "*";
	margin-right: .2em;
}

@media screen and (min-width:1024px) {
	ul.list-exhibitors>li .link:hover {
		-webkit-transform: translateX(.8em);
		    -ms-transform: translateX(.8em);
		        transform: translateX(.8em);
	}
}

/*----------------------------------------
UNIT
----------------------------------------*/
[class^="unit"] {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		gap: calc(var(--spacing-common) * 2);
}
[class^="unit"]+[class^="unit"] {
	margin-top: calc(var(--spacing-common) * 3);
}
[class^="unit"]>* {
	margin-top: 0;
	width: 100%;
}

@media screen and (min-width:769px) {
	.unit-flex:not(:where(.col3, .col4, .col5)):nth-child(even) {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		    -ms-flex-direction: row-reverse;
		        flex-direction: row-reverse;
	}
	.unit-flex>* {
		width: calc(50% - var(--spacing-common));
	}

	.unit-flex.exhibitors {
		align-items: flex-start;
	}
	.unit-flex.exhibitors>[class^="heading"] {
		line-height: 1;
		width: 4.8rem;
		writing-mode: vertical-lr;
	}
	.unit-flex.exhibitors>[class^="heading"]+* {
		width: calc(100% - 4.8rem - calc(var(--spacing-common) * 2));
	}
}

@media screen and (min-width:1024px) {
	.unit-flex.col3>* {
		width: calc(calc(100% - calc(var(--spacing-common) * 4)) / 3);
	}
	.unit-flex.col4>* {
		width: calc(calc(100% - calc(var(--spacing-common) * 6)) / 4);
	}
	.unit-flex.col5>* {
		width: calc(calc(100% - calc(var(--spacing-common) * 8)) / 5);
	}
}

/*----------------------------------------
CONTAINER
----------------------------------------*/
:is([class^="container"], [class^="inner"]) {
	margin-right: auto;
	margin-left: auto;
	max-width: 1280px;
	width: 100%;
}
:is([class^="container"], [class^="inner"]).narrow {
	max-width: 800px;
}
:is([class^="container"], [class^="inner"])>*:first-child {
	margin-top: 0;
}
:is([class^="container"], [class^="inner"])>*:last-child {
	margin-bottom: 0;
}

[class^="container"]+[class^="container"] {
	margin-top: calc(var(--spacing-common) * 2);
}

[class^="inner"] {
	padding: 0 var(--spacing-common);
	
}

/*----------------------------------------
WRAPPER
----------------------------------------*/
[class^="wrap"] {
	padding: calc(var(--spacing-common) * 2) 0;
	position: relative;
	width: 100%;
	height: auto;
}

.wrap-mv {
	padding: var(--spacing-common) 0 0;
}
.wrap-mv+[class^="wrap"] {
	margin-top: calc(var(--spacing-common) * -5);
}

@media screen and (orientation:landscape) {
	.wrap-mv+[class^="wrap"] {
		margin-top: calc(var(--spacing-common) * -4.5);
	}
}

/*----------------------------------------
HEADER
----------------------------------------*/
header {
	padding: calc(var(--spacing-common) / 2) 0;
}
header [class^="inner"] {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		gap: var(--spacing-common);
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
}
header [class^="inner"]>* {
	margin: 0;
	min-width: unset;
	width: auto;
}

/*----------------------------------------
FOOTER
----------------------------------------*/
footer {
	padding: calc(var(--spacing-common) * 2) 0;
}
.copyright {
	font-size: .8rem;
	text-align: center;
}