@charset "utf-8";

.mect a { text-decoration: none; }
.mect a:hover { text-decoration: none; color: #222; opacity: 1; }
.inliner { display: inline-block; }

.txt { line-height: 1.71; font-size: 1.8rem; }

.mectVisual { position: relative; background: #000; }
.mectVisualLogo { position: absolute; content: ""; inset: clamp(24px, calc(3.13vw + -0px), 50px) clamp(100px, calc(50.00vw + -700px), 260px) auto auto; aspect-ratio: 772/340; min-width: 0; width: clamp(196px, calc(24.52vw + 8px), 400px); z-index: 15; }
.mectVisualFigure { position: relative; margin-inline: auto; max-width: 1600px; display: block; }
.mectVisualFigure::before { position: absolute; content: ""; inset: 0 auto auto 0; width: 100%; height: 100%; background: linear-gradient(to left,rgba(0,0,0,1) 0%,rgba(0, 0, 0, 0) 10%,rgba(0, 0, 0, 0) 90%,rgba(0, 0, 0, 1) 100%); }

.mectAbout { margin-top: 90px; padding-inline: 15px; }
.mectAboutWrap { position: relative; max-width: 780px; margin-inline: auto; }
.mectAboutLavel { position: relative; max-width: 780px; margin-inline: auto; }
.mectAboutLavelE { aspect-ratio: 600/58; min-width: 0; width: 76.9%; }
.mectAboutLavelJ { aspect-ratio: 490/32; min-width: 0; width: 62.8%; margin: 15px 0 auto auto; }
.mectAboutLead { display: block; aspect-ratio: 1327/248; min-width: 0; margin: 20px 8% 0 auto; width: 55%; }
.mectAboutTxt { margin: 90px auto; font-size: 2rem; line-height: 2; }
.mectAboutBanner { margin-top: 90px; }
.mectAboutBannerImg { border: 3px solid #f0f0f0; }
.mectAboutBannerCap { background: #000; color: #fff; position: relative; max-width: 480px; margin: 60px auto 0; text-align: center; width: 100%; padding: 30px 50px 30px clamp(15px, calc(33.33vw + -110px), 50px); font-weight: 700; font-size: 2.4rem; border-radius: 20px; }
.mectAboutBannerCap::after { position: absolute; content: ""; inset: 0 30px 0 auto; margin: auto 0; height: 1em; aspect-ratio: cos(30deg); clip-path: polygon(0 0,100% 50%,0 100%); object-fit: cover; background: #fff; width: 15px; }

.mectExhibit { background: #f0f0f0; margin-top: 120px; padding: 90px 60px; }
.mectExInner { max-width: 1200px; margin-inline: auto; }
.mectExhibitTitle { position: relative; text-align: center; padding-bottom: 30px; font-size: 4.2rem; font-weight: 700; line-height: 1.31; }
.mectExhibitTitle::after { position: absolute; content: ""; inset: auto 0 0; margin-inline: auto; width: 50px; height: 7px; background: #000; border-radius: 5px; }
.mectExhibitList { margin-top: 60px; display: flex; flex-wrap: wrap; gap: 90px clamp(40px, calc(6.33vw + -9px), 80px); }
.mectExhibitList + .mectExhibitList { margin-top: 90px; }
.mectExhibitItem { inline-size: calc((100% - clamp(40px,calc(6.33vw + -9px),80px)) / 2); }
.mectExhibitItem2 { inline-size: calc(((100% - clamp(40px,calc(6.33vw + -9px),80px)) / 2) + 1px); margin-inline: auto; }
a.mectExhibitArea { color: #222; }

.mectExhibitImgStat { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 20px; }
.mectExhibitImgLFV { aspect-ratio: 219/109; min-width: 0; height: 40px; }
.mectExhibitImgEBM { aspect-ratio: 480/110; min-width: 0; height: 40px; }

.mectExhibitEx { margin-top: 35px; }
.mectExhibitExAboutCopy { font-size: 1.7rem; font-weight: 700; }
.mectExhibitExAboutList { margin-top: 30px; }
.mectExhibitExAboutItem { position: relative; padding-left: 1.05em; font-size: 1.7rem; line-height: 1.71; }
.mectExhibitExAboutItem::before { position: absolute; content: ""; inset: 0.45em auto auto 0; width: 0.8em; border-radius: 100%; aspect-ratio: 1/1; min-width: 0; background: #000; }
.mectExhibitExAboutItem + .mectExhibitExAboutItem { margin-top: 5px; }
.mectExhibitExAboutName { position: relative; height: 50px; text-align: left; margin-top: 15px; }
.mectExhibitExAboutTxt { margin-top: 30px; font-size: 1.8rem; line-height: 1.71; }

.logoL32 { aspect-ratio: 41/17; min-width: 0; }
.logoAbx65 { aspect-ratio: 94/18; min-width: 0; }
.logoL20 { aspect-ratio: 64/17; min-width: 0; }
.logoBne65 { aspect-ratio: 359/70; min-width: 0; }
.logoL12 { aspect-ratio: 112/18; min-width: 0; }
.logoBnj51 { aspect-ratio: 141/18; min-width: 0; }
.logoFaf { aspect-ratio: 126/23; min-width: 0; }
.logoAlkap { aspect-ratio: 130/20; min-width: 0; }
.logoLfv { aspect-ratio: 176/21; min-width: 0; height: 38px; }

.logoL32::after,
.logoAbx65::after,
.logoBne65::after,
.logoBnj51::after { position: absolute; content: ""; inset: 0 -60px 0 auto; margin: auto 0; background: url(/cms/cmj/mect2025/images/icon_new.svg) no-repeat center/contain; width: 50px; height: 50px; }

.mectMovie { max-width: 1030px; margin: 120px auto 0; padding: 0 20px; }

.mectWork { margin: 120px auto 0; max-width: 750px; font-size: 1.8rem; padding: 0 20px; }
.mectWorkAbout { margin-top: 60px; }
.mectWorkAboutLabel { text-align: center; font-weight: 700; font-size: 2.6rem; line-height: 1.5; }
.mectWorkAboutInfo { margin-top: 60px; font-size: 2.2rem; }
.mectWorkAboutInfoList { display: flex; flex-wrap: wrap; gap: 10px; }
.mectWorkAboutInfoList + .mectWorkAboutInfoList { margin-top: 10px; }
.mectWorkAboutInfoBatch { width: 2.5em; font-weight: 700; }
.mectWorkAboutInfoEx { flex: 1; }

.mectWorkProf { margin-top: 60px; }
.mectWorkProfItem:nth-child(n+2) { margin-top: 30px; }
.mectWorkProfDivi { font-size: 2rem; line-height: 1.5; }
.mectWorkProfName { margin-top: 10px; font-size: 2.8rem; }
.mectWorkProfName span:nth-child(1) { font-weight: 700; }
.mectWorkEx { margin-top: 30px; }
.mectWorkLabel { font-weight: 700; margin-bottom: 15px; font-size: 2.2rem; }

.mectDoc { margin: 90px auto 0; max-width: 580px; }
.mectDocItem { color: #222;  }
.mectDocLabel { font-weight: 700; font-size: 4.2rem; line-height: 1.31; text-align: center; }
.mectDocWrap { display: flex; flex-wrap: wrap; gap: 30px 30px; align-items: center; margin-top: 30px; }
.mectDocImg { width: 180px; border: 1px solid #f0f0f0; }
.mectDocEx { flex: 1; }

@media (max-width:1600px) {
	.mectVisualLogo { inset: clamp(24px, calc(3.13vw + -0px), 50px) clamp(126px, calc(16.11vw + 2px), 260px) auto auto; }
}
@media (max-width:1000px) {
	.mectExhibitExAboutName { height: 35px; }
	.logoL32::after,
	.logoAbx65::after,
	.logoBne65::after,
	.logoBnj51::after { inset: 0 -40px 0 auto; width: 35px; height: 35px; }
}
@media (max-width:767px) {
	.mectVisualLogo { inset: clamp(25px, calc(6.63vw + 0px), 51px) 0 auto; margin: 0 auto; width: clamp(280px, calc(74.74vw + -0px), 573px); }
	.mectAbout { margin-top: 60px; padding-inline: 20px; }
	.mectAboutWrap { max-width: 500px; margin-inline: auto; }
	.mectAboutLavelE { width: 100%; margin-inline: auto; }
	.mectAboutLavelJ { width: 85%; margin-inline: auto; }
	.mectAboutLead { display: block; aspect-ratio: 974/182; min-width: 0; width: 100%; max-width: 480px; margin-inline: auto; }
	.mectAboutTxt { margin: 30px auto; font-size: 1.8rem; line-height: 1.71; }
	.mectAboutBanner { margin-top: 60px; }
	.mectAboutBannerCap { padding-block: 15px; font-size: 2rem; border-radius: 15px; margin-top: 30px; max-width: 360px; width: 85%; }
	
	.mectExhibit { margin-top: 90px; padding: 60px 20px; }
	.mectExhibitTitle { padding-bottom: 30px; font-size: 3.2rem; }
	.mectExhibitList { margin-top: 30px; gap: 50px 20px; }
	.mectExhibitList + .mectExhibitList { margin-top: 50px; }
	.mectExhibitItem { inline-size: calc((100% - 20px) / 2); }
	.mectExhibitItem2 { inline-size: calc(((100% - 20px) / 2) + 1px); }
	.mectExhibitImgLFV { height: 30px; }
	.mectExhibitImgEBM { height: 30px; }
	
	.mectExhibitEx { margin-top: 25px; }
	.mectExhibitExAboutCopy { font-size: 1.5rem; }
	.mectExhibitExAboutList { margin-top: 20px; }
	.mectExhibitExAboutItem { font-size: 1.5rem; }
	.mectExhibitExAboutName { height: 30px; margin-top: 10px; }
	.logoL32::after,
	.logoAbx65::after,
	.logoBne65::after,
	.logoBnj51::after { inset: 0 -35px 0 auto; width: 30px; height: 30px; }
	.mectExhibitExAboutTxt { margin-top: 20px; font-size: 1.6rem; }
	
	.mectMovie { margin: 90px auto 0; }
	
	.mectWork { margin: 90px auto 0; font-size: 1.6rem; }
	.mectWorkAbout { margin-top: 30px; }
	.mectWorkAboutLabel { font-size: 2.1rem; }
	.mectWorkAboutInfo { margin-top: 30px; font-size: 1.8rem; }
	
	.mectWorkProf { margin-top: 30px; }
	.mectWorkProfItem:nth-child(n+2) { margin-top: 20px; }
	.mectWorkProfDivi { font-size: 1.7rem; }
	.mectWorkProfName { font-size: 2.2rem; }
	.mectWorkEx { margin-top: 20px; }
	.mectWorkLabel { font-size: 2rem; line-height: 1.71; }

	.mectDoc { margin: 60px auto 0; }
	.mectDocLabel { font-size: 3.4rem; }
	.mectDocWrap { gap: 20px; margin-top: 15px; }
	.mectDocImg { width: 180px; margin-inline: auto; }
	.mectDocEx { flex: 0 1 auto; width: 100%; }
}
@media (max-width: 568px) {
	.mectExhibitItem { inline-size: 100%; }
	.mectExhibitItem2 { inline-size: 100%; }
}
@media (hover: hover) {
	a.mectExhibitArea,
	a.mectAboutBannerArea,
	a.mectMovieArea,
	a.mectDocItem { transition: .25s; }
	a.mectExhibitArea:hover,
	a.mectAboutBannerArea:hover,
	a.mectMovieArea:hover,
	a.mectDocItem:hover { opacity: 0.5; }
}

.pointer { opacity: 0; }
.active.pointer { animation: fade_in .75s forwards; }

@keyframes fade_in {
	0% { opacity: 0; display: none; }
	1% { opacity: 0.01; display: block; }
	100% { opacity: 1; }
}


.mectVisual { opacity: 0; animation: fade_in 1.5s forwards; }
.mectVisualLogo { opacity: 0; animation: fade_in .75s forwards .75s; }
.mectAboutLavel { opacity: 0; animation: fade_in .75s forwards 1s; }