/* 変数 */
:root {
	--okm-red: #e60039; 
	--okm-gray: #f5f5f3; 
	--okm-gray-line: #ccc; 
	--okm--solution--green: #74AAB9; 

	--okm-shin-go-l: "UD Shin Go Light", sans-serif;
	--okm-shin-go-r: "UD Shin Go Regular", sans-serif;
	--okm-shin-go-m: "UD Shin Go Medium", sans-serif;
	--okm-shin-go-db: "UD Shin Go DemiBold", sans-serif;
	--okm-shin-go-b: "UD Shin Go Bold", sans-serif;
	--okm-shin-go-hb: "UD Shin Go Heavy", sans-serif;


	@media only screen and (min-width: 768px) {

	}

	@media only screen and (min-width: 1024px) {

	}

}

a[target="_blank"]:after{
	content: ""; 
	display: inline-block; 
	width: 15px; 
	height: 15px; 
	margin: 0 10px;
	mask-image: url("/global_assets/images/icon_external_link.svg");
	mask-repeat: no-repeat;
	mask-position: 0 0;
	mask-size: 15px 15px;

	-webkit-mask-image: url("/global_assets/images/icon_external_link.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: 0 0;
	-webkit-mask-size: 15px 15px;
	background-color: #999; 
	transform: translateY(2px);
}

/* 各セクション */
.okm--event--title--section,
.okm--event--info--section,
.okm--event--topics--section,
.okm--event--products--section,
.okm--event--solution--sections,
.okm--event--archives--section {
	display: block; 
}

/* セクションタイトル */
.okm--event--section--title {
	display: block; 
	font-size:clamp(16px, 100vw * 22 / 1200 , 22px); 
	margin-bottom: 30px;
}

/*タイトルバナー*/

.okm--event--title--banner--wrapper {
max-width: 100vw;
width: 100%;
height: fit-content;
display: flex;
position: relative; 
align-items: center;
justify-content: center;
overflow: hidden;
margin: 0;
z-index: -1; 
}

.okm--event--title--banner--wrapper * {
	border: none;
	background-color: transparent; 
}

.okm--event--title--banner--block {
	width: 100%;
	height: fit-content;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative; 
	z-index: 3; 
}

.okm--event--title--banner--contents {
	aspect-ratio: 384 / 216; /* = 16:9 */
	max-width: 100vw;
	max-height: calc(100vh - 101px); 
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative; 
}

.okm--event--title--banner--contents .okm--event--title--banner {
	aspect-ratio: 384 / 216;
	width: 100vw;
	height: auto;
	position: relative; 
	display: block;
	overflow: hidden; 
}

.okm--event--title--banner--contents .okm--event--title--banner video {
	aspect-ratio: 384 / 216;
	width: auto; 
	height: 100%; 
}


/* イベントの概要 */
.okm--event--info--section {
	background-color: var(--okm-gray); 
	padding: 60px 0; 
}

.okm--event--info--section:has(.okm--event--report--wrapper) {
	padding-bottom: 0;
}

.okm--event--info .okm--event--title {
	font-size:clamp(18px, 100vw * 20 / 1200 , 20px); 
	margin: 1em 0;
	display: block; 
	text-align: center; 
	word-break: keep-all; 
	font-family: var(--okm-shin-go-db);
}

.okm--event--info .okm--event--title:has( + .okm--event--sub ) {
	margin: 1em 0 0.25em;
}

.okm--event--info .okm--event--sub {
	margin: 0 0 2em;
	text-align: center; 
	font-family: var(--okm-shin-go-m);
}

.okm--event--info .okm--event--sub span {
	display: inline-block; 
	padding: 0 100px; 
	position: relative; 
}



.okm--event--info .okm--event--sub span:before,
.okm--event--info .okm--event--sub span:after {
	content: ""; 
	width: 80px; 
	height: 1px; 
	border-top: 1px solid #888;
	position: absolute; 
	top: 50%; 
}

.okm--event--info .okm--event--sub span:before {
	left: 0px; 
}

.okm--event--info .okm--event--sub span:after {
	right: 0px; 
}





.okm--event--info {
	width: min(calc(100% - 40px), 840px); 
	max-width: 840px; 
	margin: 0 auto;
}

.okm--event--info .okm--event--logo {
	/* width: min(calc(100% - 20px), 420px);  */
	width: 100%; 
	max-width: 420px; 
	margin: 0 auto 60px;
}

.okm--event--info .okm--event--logo img {
	width: 100%; 
}

.okm--event--info--block {
  display: grid;
  grid-template-columns: fit-content(12em) 1fr; /* 左:dt, 右:dd */
}

.okm--event--info--block > dl {
	display: grid;
	grid-template-columns: subgrid;
    grid-column: span 2;
	column-gap:clamp(20px, calc(100vw * 60 / 1200) , 60px); 
	padding: 10px 0; 
	border-bottom: 1px solid #ddd;

}

.okm--event--info dl:first-of-type {
	border-top: 1px solid #ddd;
}

.okm--event--info dl dt,
.okm--event--info dl dd {
font-size:clamp(14px, calc(100vw * 16 / 1200) , 16px); 
}

.okm--event--info dl dt {
	font-family: var(--okm-shin-go-m);
}

.okm--event--info dl dd {
	font-family: var(--okm-shin-go-r);
}

.okm--event--info dl dd span {
	display: inline-block; 
	margin-left: 1em;
	font-size: 14px; 
}

.main article .okm--event--note p {
	margin: 0;
	display: block; 
	position: relative; 
}

.okm--event--note {
	margin-top: 20px; 
}

.okm--event--note p {
	padding-left: 1.25em; 
	font-size: 14px; 
}


.okm--event--note p:before {
	content: "※"; 
	display: block; 
	position: absolute; 
	left: 0px; 
	top: 0px; 
}



/* イベント終了 */

.okm--event--info .okm--event--lead {
	display: block; 
	line-height: 1.8; 
}



.okm--event--info .okm--event--lead p {
	display: block; 
	text-align: center; 
	word-break: break-all; 
}

.okm--event--free--message {
	margin-bottom: 1em;
	border: 1px solid #000;
}

.okm--event--info .okm--event--lead .okm--event--free--message p {
	text-align: left; 
}


/* イベントリポートリンク */
.okm--event--report--wrapper {
	margin-top: 40px;
	position: relative; 
	width: 100%; 
	aspect-ratio: 6 / 1;
	display: grid;
	place-items: center;

}


.okm--event--report--backdrop {
	position: absolute; 
	top: 0px; 
	left: 0px; 
	width: 100%; 
	height: 100%; 
	overflow: hidden; 
}

.okm--event--report--backdrop:after {
	content: ""; 
	display: block; 
	position: absolute; 
	top: 0px; 
	left: 0px; 
	background: rgba(0,0,0,0.5); 
	width: 100%; 
	height: 100%; 
}

.backdrop--columns {
	width: 100%;
	height: 100%; 
	display: flex;
	gap: 0; 
	flex-direction: column; 
}

.backdrop--item {
	flex: 1; 
}

.backdrop--item:nth-of-type(2),
.backdrop--item:nth-of-type(3) {
	display: none; 
}

.backdrop--item img {
	aspect-ratio: 1;
	width: 100%;
	height: 100%; 
	object-fit: cover; 
}

.okm--event--report--block {
	width: min(calc(100% - 40px), 1200px); 
	max-width: 1200px; 
	justify-content: space-between;
	display: flex;
	align-items: center; 
	flex-direction: column; 

	gap: 40px; 
	position: relative; 
	margin: 40px auto; 


}


.okm--event--report--block .okm--event--report--text {
	color: #fff; 
}

.okm--event--report--title {
	font-size:clamp(32px, 100vw * 72 / 1200 , 72px); 
	font-family: "Times New Roman", serif ;
	line-height: 1.4; 
	text-shadow: 3px 3px 10px rgba(0,0,0,0.5); 
	display: block; 
	margin-bottom: 20px;
}

.okm--event--report--lead {
	display: block; 
}

.okm--event--report--block .okm--event--report--link {
	border: 1px solid #fff;
	flex: 1 1 auto;
	width: 100%; 
}

.okm--event--report--block .okm--event--report--link a[class*="btn--"][class*="--em"] {
	background: rgba(0,0,0,0.5); 
}

.okm--event--report--block .okm--event--report--link a[class^="okm--btn"][class*="btn--middle"] span, 
.okm--event--report--block .okm--event--report--link a[class^="okm--btn"][class*="btn--large"] span {
		white-space:nowrap;
}

/* 出展予定・お知らせ */
.okm--event--topics--section {
	margin-top: 60px;
}

.okm--event--topics--block {
	background-color: var(--okm-gray); 
	border: 1px solid var(--okm-gray-line);
	width: min(calc(100% - 40px), 1200px); 
	max-width: 1200px; 
	margin: auto;

	display: flex;
	flex-wrap: wrap;
	align-items: flex-start; 
	flex-direction: row; 
	padding: clamp(20px, 100vw * 40 / 1200 , 40px); 
	gap: clamp(20px, 100vw * 40 / 1200 , 40px); 
	
	font-size:clamp(16px, 100vw * 18 / 1200 , 18px); 
}

.okm--event--topics--block .okm--event--topics--title {
	font-family: var(--okm-shin-go-m);
	width: 9em; 
	width: 100%; 
}

.okm--event--topics--block .okm--event--topics--headline {
	width: calc(100% - (9em + 40px)); 
	width: 100%; 
}


.okm--event--topics--block .okm--event--topics--headline dl {
	
	font-size:clamp(14px, 100vw * 16 / 1200 , 16px); 
	border-bottom: 1px solid var(--okm-gray-line);
	margin-bottom: 1em;
	padding-bottom: 1em; 
	width: 100%;
	display: flex;
	flex-direction: column; 
	gap: 0; 
}

.okm--event--topics--block .okm--event--topics--headline dl:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0; 
	border-bottom: none; 
}

.okm--event--topics--block .okm--event--topics--headline dl dt {
	width: 100%; 
	
}

.okm--event--topics--block .okm--event--topics--headline dl dd {
	width: 100%; 
}

.okm--event--topics--block .okm--event--topics--headline dl dd a {
	display: block; 
}


/* 注目製品 */

.okm--event--products--section {
	margin-top: 60px;
}

.okm--event--products--block {
	width: min(calc(100% - 40px), 1200px); 
	max-width: 1200px; 
	margin: auto;

}

.okm--event--products--item--wrapper {
	display: grid;
	gap: 40px;
	gap:clamp(20px, 100vw * 40 / 1200 , 40px); 
	grid-template-columns: repeat(auto-fit, minmax(calc((100% - ((clamp(20px, 100vw * 40 / 1200 , 40px))*2)) / 3), 1fr)); 
}



.okm--event--products--item--wrapper.columns-4 {
	grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); 
}

.okm--event--products--item {
	aspect-ratio: 3 / 2;
	background-color: var(--okm-gray); 
}

.okm--event--products--item a {
	display: block; 
	position: relative; 
}

.okm--event--products--title {
	position: absolute; 
	z-index: 3; 
	top: 1em; 
	left: 1em; 
	font-size:clamp(16px, 100vw * 24 / 1200 , 24px); 
	font-family: var(--okm-shin-go-b);
	color: #fff; 
}

.okm--event--products--item a figure {
	position: relative; 
	border-radius: 10px;
	overflow: hidden; 
}

.okm--event--products--item a figure:before,
.okm--event--products--item a figure:after {
	content: ""; 
	display: block; 
	position: absolute; 
	width: 100%; 
	left: 0px; 
	background: rgba(0,0,0,0.5); 
	height: 40%; 
}

.okm--event--products--item a figure:before {
	top: 0px; 
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 1; 
}

.okm--event--products--item a figure:after {
	bottom: 0px; 
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 2; 
}

/* ソリューション */

.okm--event--solutions--section {
	margin-top: 60px;
}

.okm--event--solutions--block {
	width: min(calc(100% - 40px), 1200px); 
	max-width: 1200px; 
	margin: auto;
}


/* ソリューションバナー */
.okm--event--solutions--banner--wrapper {
	display: grid; 
	gap:clamp(10px, 100vw * 40 / 1200 , 40px); 
	grid-template-columns: repeat(1, 1fr); 
	margin-bottom: clamp(10px, 100vw * 40 / 1200 , 40px); 
}

.okm--event--solutions--banner--wrapper .okm--event--solutions--item {

}

.okm--event--solutions--banner--wrapper a {
	display: block; 
	box-shadow: 2px 2px 5px rgba(0,0,0,0.15);
	border-radius:clamp(10px, 100vw * 12 / 1200 , 12px); 
	overflow: hidden; 

}

.okm--event--solutions--banner--wrapper .solution--thumbnail {

}



/* ソリューション ブロック */
.okm--event--solutions--item--wrapper {
	display: grid; 
	gap:clamp(10px, 100vw * 40 / 1200 , 40px); 
	grid-template-columns: repeat(2, 1fr); 
}

.okm--event--solutions--item--wrapper .okm--event--solutions--item {
	border: 1px solid var(--okm-gray-line);
	border-radius: 5px;
	overflow: hidden; 
}

.okm--event--solutions--item--wrapper .okm--event--solutions--item.large {
	grid-column: span 2;
}

.okm--event--solutions--item--wrapper a {
	display: block; 
}



.okm--event--solutions--item--wrapper h4 {
	display: block; 
	width: calc(100% + 2px); 
	margin: -1px -1px 0;

	text-align: center; 
	font-size:clamp(14px, 100vw * 20 / 1200 , 20px); 
	padding: 0.7em 0; 
	background: var(--okm--solution--green); 
	color: #fff; 
	font-family: var(--okm-shin-go-db);

}

.okm--event--solutions--item--wrapper .solution--thumbnail {

}

.okm--event--solutions--item--wrapper .solution--lead--text {
	padding: 20px;
}

.okm--event--solutions--item--wrapper .solution--lead--text p {
	font-size:clamp(12px, 100vw * 16 / 1200 , 16px); 
}


/* 過去のイベント（アーカイブ） */

.okm--event--archives--section {
	margin-top: 60px;
} 

.okm--event--archives--block {
	width: min(calc(100% - 40px), 1200px); 
	max-width: 1200px; 
	margin: auto;
}

.okm--block--column {
	border: 1px solid #ddd;
}


/* イベントリポート */
.okm--event--report {
	width: min(calc(100% - 40px), 1200px); 
	max-width: 1200px; 
	margin: auto;
}

.okm--event--report .lead--text {
	display: block; 
	margin: 0 0 100px;
}

.okm--event--report .lead--text p {
	text-align: center; 
}

.okm--event--report .okm--event--col {
/* 
	display: grid; 
	grid-template-columns: repeat(3, 1fr); 
	gap: 30px; 
	margin: 60px auto 80px;
 */
	margin: auto;
	margin-top:clamp(20px, calc(100vw * 60 / 1200) , 60px); 
	margin-bottom:clamp(20px, calc(100vw * 80 / 1200) , 80px); 

}

.okm--event--report .okm--event--col--item {

} 

.okm--event--report .okm--event--col--item figure,
.okm--event--report .okm--event--col--item p {
	display: block; 
	aspect-ratio: 3 / 2;
}

.okm--event--report .okm--event--col--item figure img,
.okm--event--report .okm--event--col--item p img {
	aspect-ratio: 3 / 2;
	object-fit: cover; 
	border-radius: 10px;
}


.okm--store--exhibits--block {
	width: min(calc(100% - 40px), 1200px); 
	max-width: 1200px; 
	margin: auto;
}


/* 展示内容 */
.okm--store--exhibits--section {
	width: min(calc(100% - 20px), 840px); 
	width: min(calc(100% - 40px), 1200px); 
	max-width: 840px; 
	max-width: 1200px; 

	margin: auto;
}

.okm--store--exhibits--section .exhibits--lead--text {

}

.okm--store--exhibits--section .exhibits--lead--text h2,
.okm--store--exhibits--section .exhibits--lead--text h3 {
	display: block; 
	font-family: var(--okm-shin-go-m);
	font-size:clamp(18px, calc(100vw * 24 / 1200) , 24px); 
	margin-bottom:clamp(20px, calc(100vw * 30 / 1200) , 30px); 
}


.okm--store--exhibits--section .exhibits--lead--text p {
	margin: 0; 
	font-size:clamp(14px, calc(100vw * 16 / 1200) , 16px); 
	line-height: 1.8; 
	margin-bottom: 20px;
}

.okm--store--exhibits--section .okm--store--exhibits--col {
	display: grid; 
	grid-template-columns: repeat(2, 1fr);  
	margin: auto;
	margin-bottom:clamp(60px, calc(100vw * 60 / 1200) , 60px); 
	gap: clamp(10px, calc(100vw * 38 / 1200) , 30px); 
}

.okm--store--exhibits--section .okm--store--exhibits--col:has(+.okm--store--exhibits--col) {
	margin-bottom: clamp(10px, calc(100vw * 38 / 1200) , 30px); 
}

.okm--store--exhibits--section .okm--store--exhibits--col p, 
.okm--store--exhibits--section .okm--store--exhibits--col figure {
	display: block; 
}

.okm--store--exhibits--section .okm--store--exhibits--col figure figcaption {
	display: block; 
	font-size: 14px; 
	margin: 10px 0 0;
}

.okm--store--exhibits--section .okm--store--exhibits--col img {
	border-radius:clamp(4px, calc(100vw * 10 / 1200) , 10px); 
}


/* ==================================================
= Media Queries
================================================== */

/* 480px未満 */
@media only screen and (max-width: 479px) {


}

/* 480px以上 */
/* スマホ */
@media only screen and (min-width: 480px) {


}

/* 568px以上 */
/* タブレット */
@media only screen and (min-width: 568px) {


}

/* 667px以上 */
/* タブレット */
@media only screen and (min-width: 667px) {


}

/* 768px以上 */
/* タブレット */
@media only screen and (min-width: 768px) {


	.okm--event--title--banner--wrapper {
		margin: -52px 0 0; 
	}

	/* 出展予定・お知らせ */
	.okm--event--topics--block {

	}

	.okm--event--topics--block .okm--event--topics--title {
		width: 9em; 
	}

	.okm--event--topics--block .okm--event--topics--headline {
		width: calc(100% - (9em + 40px)); 
	}

	.okm--event--topics--block .okm--event--topics--headline dl {
		flex-direction: row; 
	}

	.okm--event--topics--block .okm--event--topics--headline dl dt {
		width: 220px; 
	}

	.okm--event--topics--block .okm--event--topics--headline dl dd {
		width: 100%; 
		width: calc(100% - 220px); 
	}


	/* イベントリポート */
	.backdrop--columns {
		flex-direction: row; 
	}

	.backdrop--item:nth-of-type(2),
	.backdrop--item:nth-of-type(3) {
		display: block; 
	}

	.backdrop--item img {
		height: 100%; 
	}

	.okm--event--report--block {
		flex-direction: row; 
	}

	.okm--event--report--title {
		margin-bottom: 0;
	}

	.okm--event--report--block .okm--event--report--link {
		width: 380px; 
	}

	/* ソリューションバナー */
	.okm--event--solutions--banner--wrapper {
		grid-template-columns: repeat(2, 1fr); 
	}


	/* ソリューション ブロック */
	.okm--event--solutions--item--wrapper {
		grid-template-columns: repeat(4, 1fr); 
	}


	.okm--event--report .okm--event--col {
		display: grid; 
		grid-template-columns: repeat(3, 1fr); 
		gap: 20px; 
		margin: auto;

		margin-top:clamp(20px, calc(100vw * 60 / 1200) , 60px); 
		margin-bottom:clamp(20px, calc(100vw * 80 / 1200) , 80px); 

	}


}

/* 1024px以上 */
/* PC */
@media only screen and (min-width: 1024px) {



}