@charset "utf-8";
/* CSS Document */

.mainTtl{
	max-width: 760px;
	width: calc(100% - 40px);
	margin: 30px auto 10px;
}


.mainVisual{
	background: url("../img/mv_bg_pc.webp") no-repeat center / cover;
	aspect-ratio: 1367/651;
}
#mainBlock .mainVisual .contents{
	padding-top: 4.1vw;
	max-width: 1514px;
}

.mainVisual p{
	max-width: 761px;
	width: 52%;
}

h2{
	font-size: 5rem;
	color: #0f218b;
	font-weight: 600;
	letter-spacing: 0.06em;
	margin-bottom: 30px;
}

#jmsInfo{
	background: url("../img/bg_01_pc.webp") no-repeat bottom / cover;
	padding-top: 50px;
	padding-bottom: 212px;
}

#jmsInfo .txt{
	font-size: 2.4rem;
	font-weight: 500;
	font-family: 'Noto Sans JP';
	margin-top: 40px;
    letter-spacing: 0.08em;
}
#jmsInfo > .contents{
	max-width: 868px;
}

#jmsInfo .label{
	font-size: 2.3rem;
	color: #fff;
	background: #0f218b;
	display: inline-block;
	line-height: 2.174;
	letter-spacing: 0.08em;
	padding: 0 20px;
	margin-top: 30px;
	width: 292px;
}
#jmsInfo ul{
	max-width: 1021px;
	width: 100%;
	margin: 144px auto 0;
	align-items: flex-start;
	gap: 70px;
}

#jmsInfo ul li a:hover{
	opacity: 1;
}

#jmsInfo ul li figure{
	border: solid 5px #fff;
	border-radius: 50%;
	overflow: hidden;
	max-width: 291px;
	margin-bottom: 30px;
	position: relative;
}
#jmsInfo ul li figure::before{
	opacity: 0;
	white-space: pre;
	content: "クリックして\A詳細をチェック！";
	font-weight: 500;
	font-size: 2rem;
	color: #fff;
	background: rgba(16,45,62,0.6);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#jmsInfo ul li:hover figure::before{
	opacity: 1;
}
#jmsInfo ul li h3{
	font-size: 2.2rem;
	letter-spacing: 0.05em;
	line-height: 1.4;
}
#jmsInfo ul li:hover h3{
	opacity: 0.7;
}
#jmsInfo ul li h3 span{
	display: inline-block;
	font-size: 1.4rem;
	font-weight: 400;
	margin-top: 35px;
}
#jmsInfo ul li.booth figure{
	margin-bottom: 45px;
}
#jmsInfo ul li.booth h3 span{
	margin-top: 51px;
}

#jmsInfo .pressBnr{
	max-width: 631px;
	margin: 100px auto 0;
}
#jmsInfo .pressBnr a{
	display: block;
	width: 100%;
}

#boothMap{
	background: url("../img/bg_02_pc.webp") no-repeat center / cover;
	padding: 96px 0 130px;
}

#boothMap h2{
	line-height: 1.2;
	margin-bottom: 63px;
}

#boothMap .mainLead{
	font-size: 1.9rem;
	font-weight: 500;
	margin-bottom: 30px;
}

#boothMap .contents{
	position: relative;
	z-index: 1;
}

#boothMap h2 span{
	font-size: 1.8rem;
	font-weight: 400;
}


#boothMap .boxWrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 768px;
	width: 100%;
	margin: 0 auto;
	gap: 70px;
}

#boothMap h3{
	font-size: 3.1rem;
	text-align: left;
	line-height: 0.8;
	padding: 10px 0 4px;
	padding-left: 10px;
	border-left: solid 11px;
	letter-spacing: 0.04em;
	cursor: pointer;
}
#boothMap h3:hover{
	opacity: 0.7;
}
#boothMap h3 span{
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}
#boothMap h3 span.minfnt{
	font-size: 1.9rem;
	font-weight: 700;
}
#boothMap h3 + h3{
	margin-top: 26px;
}
#boothMap h3.booth1{
	border-color: #d80c24;
}
#boothMap h3.booth2{
	border-color: #0d57a7;
}
#boothMap h3.booth3{
	border-color: #f3981c;
}
#boothMap h3.booth4{
	border-color: #00a84d;
}
#boothMap h3.booth5{
	border-color: #748f9d;
}

@media screen and (max-width: 820px){
	.mainVisual{
		background: url("../img/mv_bg_sp.webp") no-repeat center / cover;
		aspect-ratio: 750/837;
	}
	#mainBlock .mainVisual .contents{
		padding-top: 8.4vw;
		text-align: left;
	}
	.mainVisual p{
		margin-left: 6.5%;
		max-width: 544px;
		width: 70%;
	}
	h2{
		font-size: 4rem;
	}
	#jmsInfo{
		padding-top: 59px;
		padding-bottom: 157px;
		margin-bottom: 5px;
		background-image: url("../img/bg_01_sp.webp");
	}
	#jmsInfo figure{
		max-width: 650px;
		margin: 0 auto;
	}
	#jmsInfo .txt{
		margin-top: 50px;
	}
	#jmsInfo .label{
		line-height: 2.5;
		max-width: 332px;
		width: 100%;
	}
	#jmsInfo ul{
		flex-direction: column;
		max-width: 650px;
		gap: 0px;
	}
	#jmsInfo ul li{
		width: 100%;
	}
	#jmsInfo ul li + li{
		border-top: solid 3px #0f218b;
		margin-top: 50px;
		padding-top: 52px;
	}
	#jmsInfo ul li a{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	#jmsInfo ul li h3{
		font-size: 3rem;
		text-align: left;
		margin-bottom: 13px;
		margin-left: 45px;
	}
	#jmsInfo ul li h3 span{
		margin-top: 20px !important;
		font-size: 1.8rem;
	}
	#jmsInfo ul li figure{
		width: 260px;
		height: 260px;
		margin: 0;
		flex-shrink: 0;
	}
	#jmsInfo ul li.booth figure{
		margin-bottom: 0;
	}
	
	#boothMap{
		padding: 76px 0 183px;
		position: relative;
		background: url("../img/bg_02_sp.webp") no-repeat center 100% / cover;
	}
	#boothMap .boxWrap{
		max-width: 481px;
		flex-direction: column;
		gap: 30px;
	}
	#boothMap .boxWrap .btnBox{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: stretch;
		gap: 40px;
		max-width: 410px;
		width: 100%;
	}
	#boothMap .btnBox h3{
		width: calc(100% / 2 - 20px);
	}
	#boothMap .btnBox h3.booth1{
		order: 1;
	}
	#boothMap .btnBox h3.booth2{
		order: 3;
	}
	#boothMap .btnBox h3.booth3{
		order: 2;
	}
	#boothMap .btnBox h3.booth4{
		order: 4;
	}
	#boothMap .btnBox h3.booth5{
		order: 5;
		width: 100%;
	}
	
	
	#boothMap h3 + h3{
		margin-top: 0;
	}
	
	#boothMap h2{
		font-size: clamp(2rem, -0.368rem + 11.84vw, 5.7rem);
		margin-bottom: 26px;
	}
	#boothMap h2 span{
		font-size: 2.2rem;
	}
}
@media screen and (max-width: 767px){
	h2 {
		font-size: 5.5vw;
		margin-bottom: 15px;
	}
	.mainTtl{
		margin-top: 10px;
	}
	.mainVisual p{
		margin-left: 4.5%;
		width: 73%;
	}
	#jmsInfo{
		padding-top: 29px;
		padding-bottom: 82px;
	}
	#jmsInfo .txt{
		font-size: 1.4rem;
		margin-top: 30px;
	}
	#jmsInfo .label{
		max-width: 196px;
		font-size: 1.4rem;
		margin-top: 15px;
	}
	#jmsInfo ul{
		margin-top: 74px;
	}
	#jmsInfo ul li figure{
		width: 130px;
		height: 130px;
	}
	#jmsInfo ul li figure::before{
		font-size: 1.2rem;
	}
	#jmsInfo ul li h3{
		font-size: 1.6rem;
		margin-left: 21px;
	}
	#jmsInfo ul li h3 span{
		margin-top: 10px !important;
		font-size: 1.2rem;
	}
	#jmsInfo ul li + li {
		border-top: solid 2px #0f218b;
		margin-top: 25px;
		padding-top: 25px;
	}
	#jmsInfo .pressBnr{
		margin-top: 74px;
	}
	
	#boothMap{
		padding-top: 29px;
		padding-bottom: 95px;
	}
	#boothMap h2{
		font-size: 3rem;
		margin-bottom: 15px;
	}
	#boothMap h2 span {
		font-size: 1.4rem;
	}
	
	#boothMap .mainLead{
		font-size: 1.6rem;
		margin-bottom: 15px;
	}
	
	#boothMap h3{
		font-size: 1.8rem;
		border-left: solid 7px;
		max-width: 285px;
		padding: 6px 0 4px;
		padding-left: 6px;
	}
	#boothMap h3 span,
	#boothMap h3 span.minfnt{
		font-size: 1rem;
		letter-spacing: 0;
	}
	
	#boothMap .boxWrap .btnBox{
		gap: 20px;
		padding: 0 26px;
	}
	#boothMap .btnBox h3 {
		width: calc(100% / 2 - 10px);
	}
}
@media screen and (max-width: 374px){
	#boothMap .boxWrap .btnBox{
		padding: 0 10px;
	}
	#boothMap .btnBox h3 {
		width: calc(100% / 2 - 10px);
	}
	#boothMap .mainLead{
		font-size: 1.4rem;
	}
}

/* モーダル
--------------------------------------------------*/
.modal {
	display: none;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	overflow: hidden;
}
.modal__bg {
	background: rgba(159,160,160,0.8);
	height: 100vh;
	position: absolute;
	width: 100%;
}
.modal .modal__outer{
	position: relative;
	height: 100%;
	overflow-y: auto;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 20px;
}

.modal__content {
	position: relative;
	max-width: 1010px;
	width: 95%;
	background: #fff;
	padding: 40px;
	border: solid 8px;
	text-align: left;
	border-radius: 30px;
}
#modal01 .modal__content{
	border-color: #d80c24;
}
#modal02 .modal__content{
	border-color: #0d57a7;
}
#modal03 .modal__content{
	border-color: #f3981c;
}
#modal04 .modal__content{
	border-color: #00a84d;
}

#modal05 .modal__content{
	border-color: #748f9d;
}

#modal01 .modal__content h3{
	color: #d80c24;
}
#modal02 .modal__content h3{
	color: #0d57a7;
}
#modal03 .modal__content h3{
	color: #f3981c;
}
#modal04 .modal__content h3{
	color: #00a84d;
}
#modal05 .modal__content h3{
	color: #748f9d;
}

.modal__content > .inner > .item_container{
	align-items: flex-start;
}
.modal__content > .inner > .item_container .img_box{
	max-width: 450px;
	width: 48%;
	
}
.modal__content > .inner > .item_container .txt_box{
	width: 47.5%;
	text-align: left;
}
	.modal__content > .inner > .item_container .txt_box h5{
		font-size: 2rem;
		color: #00317C;
		line-height: 1.1;
		margin-bottom: 18px;
	}
	.modal__content > .inner > .item_container .txt_box p{
		margin-bottom: 69px;
	}
	.modal__content > .inner > .item_container .txt_box p:last-of-type{
		margin-bottom: 0;
	}

a.js-modal-close{
	position: absolute;
	top: -20px;
	left: calc(100% + 10px);
	font-size: 45px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	width: 29px;
	height: 29px;
}
a.js-modal-close span{
	display: block;
	width: 100%;
	height: 2px;
	background: #fff;
}
a.js-modal-close span:first-child{
	transform: translateY(14px) rotate(45deg);
}
a.js-modal-close span:last-child{
	transform: translateY(12px) rotate(-45deg);
}

#boothMap .modal h3{
	margin-left: 0;
	margin-bottom: 35px;
	font-size: 5.3rem;
	cursor: auto;
}
#boothMap .modal h3:hover{
	opacity: 1;
}
#boothMap .modal h3 span{
	font-size: 1.9rem;
}
#boothMap .modal h3 span.minfnt{
	font-size: 4rem;
	font-weight: 500;
}

.modal ruby{
	ruby-align: center;
}

.modal .topContainer{
	margin-bottom: 20px;
}
.modal .subttlBox > .flex{
	justify-content: flex-start;
	margin-bottom: 30px;
}
.modal .subttlBox h4{
	font-size: 3.3rem;
	line-height: 1;
	color: #d80c24;
}
.modal .subttlBox h4 .txten{
	font-size: 1.8rem;
}
.modal .subttlBox .label{
	font-size: 1.5rem;
	font-weight: 500;
	flex-shrink: 0;
	margin-left: 50px;
}
.modal .subttlBox .label span{
	background: #e3007f;
	color: #fff;
	font-size: 2.2rem;
	font-weight: 700;
	display: block;
	padding: 0 12px;
}
.modal .subttlBox .lead{
	font-size: 2.1rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}
.modal .subttlBox .txt.txten{
	font-size: 1.6rem;
	color: #5d6970;
}

.modal .container {
	border-radius: 12px;
	overflow: hidden;
}
.modal .container + .container{
	margin-top: 40px;
}

.modal .topContainer .subttlBox{
	margin-bottom: 40px;
}
.modal .topContainer .subContainer + .subContainer{
	margin-top: 65px;
}

.modal .hd01{
	font-size: 2.8rem;
}
	.modal .hd01 .txten{
		font-size: 0.67857em;
	}

.modal .hd02{
	justify-content: flex-start;
	font-size: 3.1rem;
	background: #FBE7E9;
	background: linear-gradient(90deg, rgba(251, 231, 233, 1) 0%, rgba(255, 255, 255, 0) 100%);
	padding: 12px 5px 13px 20px;
	border-radius: 40px;
	margin: 50px 0 25px;
	line-height: 1.3;
}

.modal .hd02 .num{
	font-size: 0.8em;
	font-weight: 700;
	font-family: 'Noto Sans JP', sans-serif;
	background: #fff;
	border-radius: 50%;
	line-height: 1;
	margin-right: 10px;
	padding-bottom: 3px;
	width: 38px;
	height: 38px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
}

.modal .hd02 .txten{
	font-size: 0.5em;
	color: #5d6970;
	display: inline-block;
}

.modal .topContainer .subContainer h4{
	font-size: 3.3rem;
	color: #0d57a7;
	line-height: 0.8;
	margin-bottom: 35px;
	text-indent: -0.6em;
	letter-spacing: 0.05em;
}
.modal .topContainer .subContainer h4 .txten{
	font-size: 1.8rem;
	font-weight: 700;
}
.modal .topContainer .subContainer h4 .minfnt{
	font-size: 0.78788em;
}

.modal .topContainer .subContainer .subttlBox.flex{
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: 0;
}
.modal .topContainer .subContainer .box.flex{
	align-items: flex-start;
}
.modal .topContainer .subContainer .box.flex .txtBox{
	width: 58%;
}
.modal .topContainer .subContainer .box .txtBox .lead{
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}
.modal .topContainer .subContainer .box .txtBox .lead .minfnt{
	font-size: 0.8em;
}

.modal .topContainer .subContainer .box .txtBox .txten{
	color: #5d6970;
	margin-top: 20px;
}
.modal .topContainer .subContainer .box.flex figure{
	text-align: center;
	max-width: 301px;
	width: 37%;
}

.modal .topContainer .subContainer figure figcaption{
	margin-top: 10px;
}

.modal .topContainer .subContainer3 .box.flex .txtBox{
	width: 66%;
}
.modal .topContainer .subContainer3 .box.flex figure{
	text-align: right;
	width: 30%;
}

#modal03.modal .topContainer .subContainer h4{
	color: #f3981c;
	text-indent: 0;
}
#modal04.modal .topContainer .subContainer h4{
	color: #00a84d;
}
#modal05.modal .topContainer .subContainer h4{
	color: #748f9d;
	text-indent: 0;
}

.modal .topContainer .subContainer .txtBox .label{
	color: #82939c;
	font-size: 2.2rem;
	font-weight: 400;
	margin-bottom: 10px;
}
.modal .topContainer .subContainer .txtBox .label .txten{
	font-size: 1.5rem;
	font-weight: 600;
}

@media screen and (max-width: 1024px){
	.modal .topContainer .subContainer h4{
		line-height: 1;
	}
}
@media screen and (max-width: 820px){
	a.js-modal-close{
		left: calc(100% + 0px);
		width: 26px;
		height: 26px;
	}
	.modal .subttlBox > .flex{
		justify-content: space-between;
	}
	.modal .topContainer .subContainer .box.flex{
		display: block;
	}
	.modal .topContainer .subContainer .box.flex .txtBox,
	.modal .topContainer .subContainer .box.flex figure{
		margin: 0 auto;
		width: 100%;
	}
	.modal .topContainer .subContainer .box.flex figure{
		margin-top: 25px;
	}
	.modal .topContainer .subContainer .subttlBox.flex{
		justify-content: space-between;
	}
	.modal .topContainer .subContainer h4{
		line-height: 1.2;
	}
	.modal .topContainer .subContainer h4 span{
		font-size: 2rem;
		text-indent: -0.5em;
		display: inline-block;
	}
	.modal .topContainer .subContainer3 .box.flex figure{
		text-align: center;
	}
}
@media screen and (max-width: 767px){
	.modal .modal__outer{
		padding-bottom: 100px;
	}
	.modal__content{
		border: solid 4px;
		padding: 20px;
	}
	
	.modal .hd01,
	.modal .hd02{
		font-size: 1.6rem;
	}
	
	.modal .hd02{
		padding-left: 10px;
	}
	.modal .hd02 .num{
		width: 30px;
		height: 30px;
		padding-bottom: 0;
	}
	.modal .hd02 .txten{
		display: block;
		margin-top: 0.5em;
	}
	
	#boothMap .modal h3{
		font-size: 2rem;
		margin-bottom: 15px;
	}
	#boothMap .modal h3 span{
		font-size: 1rem;
		letter-spacing: 0;
	}
	#boothMap .modal h3 span.minfnt{
		font-size: 1.4rem;
	}

	.modal .subttlBox h4{
		font-size: 1.6rem;
	}
	.modal .subttlBox h4 .txten {
		font-size: 1.2rem;
	}
	.modal .subttlBox .label{
		font-size: 1rem;
		text-align: center;
		margin-left: 10px;
	}
	.modal .subttlBox .label span{
		font-size: 1.4rem;
		padding: 0 8px;
	}
	.modal .subttlBox > .flex{
		margin-bottom: 10px;
	}
	.modal .subttlBox .lead{
		font-size: 1.4rem;
	}
	.modal .subttlBox .txt.txten{
		margin-top: 5px;
		font-size: 1rem;
	}
	.modal .topContainer .subttlBox {
		margin-bottom: 20px;
	}
	.modal .container{
		border-radius: 6px;
	}
	.modal .container + .container {
		margin-top: 15px;
	}
	
	.modal .topContainer .subContainer h4{
		font-size: 1.6rem;
		margin-bottom: 10px;
	}
	.modal .topContainer .subContainer h4 .txten{
		font-size: 1.2rem;
		padding-left: 0.5em;
	}
	.modal .topContainer .subContainer .box .txtBox .lead,
	.modal .topContainer .subContainer figure figcaption{
		font-size: 1.4rem;
	}
	.modal .topContainer .subContainer .box .txtBox .txten{
		font-size: 1rem;
		margin-top: 10px;
	}
	.modal .topContainer .subContainer .box.flex figure{
		width: 90%;
		margin-top: 30px;
	}
	.modal .topContainer .subContainer3 .box.flex figure{
		width: 50%;
	}
	.modal .topContainer .subContainer + .subContainer {
		margin-top: 40px;
	}
	.modal .topContainer .subContainer h4 span{
		font-size: 1.2rem;
	}
	
	.modal .topContainer .subContainer .txtBox .label{
		text-indent: -0.6em;
		font-size: 1.2rem;
		margin-bottom: 5px;
	}
}


/* Animation
--------------------------------------------------------------------------- */
.js-fadein{
	opacity: 0;
	transition: 1s;
	transform: translateY(50px);
}
.js-fadein.is-show{
	opacity: 1;
	transform: translateY(0);
}