@charset "UTF-8";
/* CSS Document */
#pageWrap {
    background-color: #000;
	color: #fff;
    padding: 0% 0;
}
.rankBox {
	display: none;
}
.contactBox {
	width: 100%;
	max-width: 100%;
	background-color: #d9dfe0;
}
#pageWrap .boxWidth {
/*	max-width: 1000px;*/
}

#sec01 {
	padding: 5% 0;
}
#sec01 .svgWrap {
	width: 40%;
	max-width: 400px;
}
#sec02 {
	align-items: flex-end;
	position: relative;padding-bottom: 3%;
}
#sec02 .leftBox {
	width: 27.5%;
}
#sec02 .leftBox .txtBox {
	padding: 20px 0;
}
#sec02 .leftBox .txtBox p {
	padding-top: 1em;
}
#sec02 .rightBox {
	width: 70%;
	position: relative;
}
#sec02 .rightBox p {
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 13px;
}
#sec02 .h3Box {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
.h3Box h3 {
	font-size: 28px;
	padding-bottom: 1em;
	line-height: 2;
}
.h3Box .lead {
	font-size: 16px;
	line-height: 2.4;
}
#sec03 {
	padding-bottom: 5%;
}
#sec03 .h3Box h3,#sec03 .h3Box .lead  {
	text-align: center;
}
#sec03 .flex1 {
	padding: 0;
	position: relative;
	margin-top: 50px;
	padding-bottom: 50px;
	border-bottom: #fff dotted 1px;
}
#sec03 .flex1::before {
	content: "";
	position: absolute;
	width: 1px;
	border-left: #fff dotted 1px;
	left: 50%;
	height: calc(100% - 50px);
}
#sec03 .flex1 .itemBox {
	width: 46%;
	margin: 0px 0;
	align-items: flex-start;
}

#sec03 .flex1 .itemBox .imgBox {
	width: 48%;
	max-width: 260px;
}
#sec03 .flex1 .itemBox dl {
	width: 48%;
}
#sec03 .flex1 .itemBox dd {
	
	letter-spacing: 0em;
	line-height: 1.3;
	padding-top: 1em;
}
#sec03 .flex1 .itemBox dd .caption {
	font-size: 10px;
	padding: 0.3em 0 0;
}
#sec03 .flex1 .lineBox,
#sec04 .lineBox {
	width: 100%;
	margin: 30px 0;
	height: 1px;
	border-top: #fff dotted 1px;
}

#sec03 .flex2 {
	margin-top: 50px;
	container-type: inline-size;
}
#sec03 .flex2 h3 {
	width: 100%;
	text-align: center;
	font-size: clamp(13px, 1.7cqw, 16px);
	font-size: 2.2cqw;
	padding-bottom: 1em;
	
}
#sec03 .flex2 .leftBox {
	width: 44%;
	max-width: 520px;
}
#sec03 .flex2 .rightBox {
	width: 54%;
	max-width: 640px;
	container-type: inline-size;
}
#sec03 .flex2 .rightBox h4 {
	font-size: 2.2cqw;
	padding-bottom: 1.5em;
}

#sec04 {
	padding: 5% 0;
	background-color: #3b332a;
}
#sec04 .flex01 {
	gap:50px 0;
}
#sec04 .flex01 .txtBox {
	width: 38.8%;
	container-type: inline-size;
	position: relative;
}
#sec04 .flex01 .txtBox .ico {
	width: 18%;
	position: absolute;
	right: -2%;
	top: 35%;
}
#sec04 .flex01 .txtBox p {
	font-size: clamp(13px, 1.7cqw, 16px);
	font-size: 3.2cqw;
	line-height: 2;
}
#sec04 .flex01 .txtBox p.caption {
	font-size: 10px;
	line-height: 1.3;
}
#sec04 .flex01 .itemBox {
	width: 18.4%;
	max-width: 220px;
}

#sec04 .lineBox {
	margin: 30px auto;
}

#sec04 .flex02 {
	background-color: #c8c9ca;
	border: #fff solid 1px;
	color: #000;
	align-items: flex-start;
}
#sec04 .flex02 .leftBox {
	position: relative;
	container-type: inline-size;
	width: 40%;
}
#sec04 .flex02 .leftBox dl {
	color: #fff;
	position: absolute;
	width: 94%;
	left: 3%;
	bottom: 3%;
}
#sec04 .flex02 .leftBox dt {
	font-size: 4.4cqw;
}
#sec04 .flex02 .leftBox dt span {
	font-size: 60%;
	margin-left: 1em;
}
#sec04 .flex02 .leftBox dd {
	font-size: 2.3cqw;
	
}
#sec04 .flex02 .rightBox {
	width: 60%;
	padding: 20px;
	container-type: inline-size;
}
#sec04 .flex02 .rightBox h4 {
	font-size: 2.2cqw;
	position: relative;
	padding-left: 6em;
	margin-bottom: 1em;
}
#sec04 .flex02 .rightBox h4::before {
	display: block;
	content: "　";
	position: absolute;
	left: 0;
	bottom: -5%;
	width: 5em;
	height: 5em;
	background-image: url("../img/ico-merit.svg");
	background-size: contain;
	background-position: left center;
	background-repeat: no-repeat;
}
#sec04 .flex02 .rightBox .flex03 {
	gap:15px 0;
}
#sec04 .flex02 .rightBox .flex03 dl {
	width: 48%;
	padding-left: 2%;
}
#sec04 .flex02 .rightBox .flex03 dt {
	font-size: 2.0cqw;
	background-color: #fff;
	padding-left: 0.4em;
	position: relative;
}
#sec04 .flex02 .rightBox .flex03 dt span {
	background-color: #7d7d7d;
	color: #fff;
	width: 1.2em;
	text-align: center;
	display: inline-block;
	position: absolute;
	right: 100%;
	top: 0;
}
#sec04 .flex02 .rightBox .flex03 dd {
	font-size: 1.7cqw;
	line-height: 1.4;
	padding-top: 0.5em;
	letter-spacing: -0.02em;
}

#sec05 {
	background-color: #000;
	padding: 5% 0 0;
}
#sec05 .ent {
	align-items: flex-end;
	container-type: inline-size;
}
#sec05 .lounge {
	margin-top: 3%;
}
#sec05 .leftBox {
	width: 60%;
}
#sec05 .rightBox {
	width: calc(40% - 30px);
}
#sec05 .rightBox dl {

}
#sec05 .rightBox dt {
	text-align: center;
	font-size: 1.6cqw;
}
#sec05 .rightBox dd {
	text-align: center;
	font-size: 0.86cqw;
	padding: 2em 0 3em;
	line-height: 2.4;
}

#sec05 .hall {
	flex-direction: row-reverse;
	padding-top: 3%;
}
#sec05 .hall .leftBox {
	width: 50%;
}
#sec05 .hall .rightBox {
	width: calc(50% - 30px);
}
.zoom {
	overflow: hidden;
}
.zoom img {
	transform: scale(1.1);
	
}
.zoom.active img {
	transform: scale(1.0);
	transition-duration: 5s;
}

#sec06 {
	padding-bottom: 3%;
}
#sec06 .flex {}
#sec06 .flex .imgBox {
	width: 27%;
	max-width: 320px;
}
#sec06 .flex dl {
	width: 72%;
}
#sec06 .flex dt {
	text-align: center;
	font-size: 21px;
	
}
#sec06 .flex dt span {
	font-size: 50%;
}
#sec06 .flex dd {
	text-align: center;
	font-size: 14px;
	line-height: 2.4;
	padding-top: 1em;
}



@media screen and (max-width: 959px) {
	#sec02 .h3Box {
		position: static;
		z-index: 1;
	}
	.h3Box h3 {
		font-size: clamp(22px, 3.0vw, 24px);
	}
	.h3Box .lead {
		font-size: clamp(13px, 1.9vw, 15px);
	}
	#sec04 h3 {
		font-size: clamp(20px, 2.7vw, 22px);
	}
	#sec04 .flex01 {
		justify-content: center;
		gap:20px 20px;
	}
	#sec04 .flex01 .txtBox {
    width: 60%;
    container-type: inline-size;
    position: relative;
	}
	#sec04 .flex01 .itemBox {
    width: calc((100% / 4) - 18px);
    max-width: 220px;
	}
	#sec04 .flex02 .leftBox {
		width: 100%;
	}
	#sec04 .flex02 .rightBox {
		width: 100%;
	}
	#sec04 .flex02 .leftBox dt,
	#sec05 .rightBox dt,
	#sec06 .flex dt {
		font-size: clamp(20px, 2.7vw, 22px);
	}

	#sec04 .flex02 .leftBox dd,
	#sec05 .rightBox dd,
	#sec06 .flex dd{
		font-size: clamp(13px, 1.9vw, 15px);

	}
	#sec05 .leftBox,#sec05 .hall .leftBox {
		width: 100%;
	}
	#sec05 .rightBox,#sec05 .hall .rightBox {
		width: 100%;
	}
	#sec05 .rightBox dt {
		padding-top: 1.5em;
	}
	#sec05 .rightBox dt br {
		display: none;
	}
	#sec06 .flex .imgBox {
		width: 27%;
		max-width: 320px;
		margin: 0 auto;
	}
	#sec06 .flex dl {
		width: 100%;
		padding-top: 30px;
	}
	#sec06 .flex dt span {
		display: block;
	}
	#sec06 .flex dd {
		text-align: justify;
	}
	#sec06 .flex dd br {
		display: none;
	}
}
@media screen and (max-width: 599px) {
	#sec01 .svgWrap {
    width: 50%;
		padding-top: 10px;
	}
	.h3Box h3,#sec03 .flex2 h3 {
		font-size: clamp(17px, 4.8vw, 19px);
		line-height: 1.5;
		text-align: center;
	}
	.h3Box .lead {
		font-size: clamp(13px, 3.5vw, 14px);

		text-align: center;
	}
	#sec02 {
		width: 100%;
		display: block;
	}
	#sec02 .leftBox {
		padding-top: 30px;
	}
	#sec02 .leftBox {
    width: 90%;
		margin: 0 auto;
	}
	#sec02 .leftBox .txtBox h4 {
		width: 75%;
		max-width: 300px;
		margin: 0 auto;
	}
	#sec02 .rightBox {
		width: 100%;
		overflow: hidden;
	}
	#sec02 .rightBox img {

	}
	#sec02 .rightBox p {
		font-size: 10px;
		right: 1em;
	}
	#sec03 .flex1 {
		padding-bottom: 0px;
	}
	#sec03 .flex2 {
		margin-top: 20px;
	}
	#sec03 .flex1 .itemBox {
		width: 80%;
		max-width: 300px;
		margin: 0 auto 20px;
	}
	#sec03 .flex1 .itemBox .imgBox {
    width: 100%;
    max-width: 100%;
		margin: 0 auto;
	}
	#sec03 .flex1 .itemBox dl {
    width: 100%;
		padding-top: 10px;
}
	#sec03 .flex1::before,
	#sec03 .flex1 .lineBox, #sec04 .lineBox {
		display: none;
	}
	#sec03 .flex2 h3 {
		font-size: clamp(16px, 2.2vw, 18px);
	}
	#sec03 .flex2 .leftBox {
		width: 100%;
		max-width: 520px;
	}
	#sec03 .flex2 .rightBox {
		width: 100%;
		max-width: 640px;
		container-type: inline-size;
	}
	#sec03 .flex2 .rightBox h4 {
    font-size: 4cqw;
    padding-bottom: 1em;
		text-align: center;
		padding-top: 1em;
	}
	#sec04 {
		padding-bottom: 0;
	}
	    #sec04 .flex01 .txtBox {
        width: 100%;
        container-type: inline-size;
        position: relative;
    }
	  #sec04 .flex01 .txtBox p {
    font-size: clamp(13px, 1.7cqw, 16px);
    font-size: 3.2cqw;
    line-height: 2;
}
	#sec04 .flex01 {
        justify-content: center;
        gap: 10px 20px;
		padding-bottom: 30px;
    }
	    #sec04 .flex01 .itemBox {
        width: calc((100% / 2) - 10px);
        max-width: 180px;
    }
	#sec04 .flex02 {
		width: 100%;
	}
	#sec04 .flex02 .leftBox dl {
		position: static;
		color: #000;
		width: 90%;
		margin: 0 auto;
		padding-top: 20px;
	}
	#sec04 .flex02 .rightBox h4 {
    font-size: 3.8cqw;
    position: relative;
    padding-left: 7em;
    margin-bottom: 1em;
}
	#sec04 .flex02 .rightBox h4::before {
    width: 6em;
    height: 6em;
}
	#sec04 .flex02 .rightBox .flex03 dl {
    width: 100%;
    padding: 1em;
	}
	#sec04 .flex02 .rightBox .flex03 dt {
		font-size: 3.8cqw;

	}
	#sec04 .flex02 .rightBox .flex03 dt span {
		background-color: #7d7d7d;
		color: #fff;
		width: 1.2em;
		text-align: center;
		display: inline-block;
		position: absolute;
		right: 100%;
		top: 0;
	}
	#sec04 .flex02 .rightBox .flex03 dd {
		font-size: clamp(13px, 1.9vw, 15px);
		line-height: 1.4;
		padding-top: 0.5em;
		letter-spacing: -0.02em;
	}
	#sec05 .hall .rightBox dt br {
		display: inline;
	}
	#sec06 {
		padding-top: 30px;
	}
	    #sec06 .flex .imgBox {
        width: 50%;
    }

}