@charset "UTF-8";

.mono .bg-harf-cercle{
	background: url(../../img/bg-harf-cercle.png) no-repeat;
    background-position: center bottom 300px;
    background-size: cover;
}

.mono #page-nav{
	justify-content: space-between;
	padding:50px 0 36px;
}

#page-nav .card{
	position:relative;
}
#page-nav .card::after,
#page-nav .card::before{
	position:absolute;
	z-index:1;
}
#page-nav .card::before{
	background: url(../../img/no-s01.svg)no-repeat;
	background-position:center;
	background-size:contain;
	width:116px;
	height:106px;
	left:calc((100% - 116px) /2);
	top:-50px;
}
#page-nav .card:nth-child(2)::before{
	background: url(../../img/no-s02.svg)no-repeat;
	background-position:center;
	background-size:contain;
}
#page-nav .card:nth-child(3)::before{
	background: url(../../img/no-s03.svg)no-repeat;
	background-position:center;
	background-size:contain;
}
#page-nav .card:nth-child(4)::before{
	background: url(../../img/no-s04.svg)no-repeat;
	background-position:center;
	background-size:contain;
}



#page-nav .card::after{
	background: url(../../img/i-arrow-bt.svg)no-repeat;
	background-position:center;
	background-size:contain;
	width:20px;
	height:30px;
	left:calc((100% - 13px) /2);
	bottom:-36px;
}

#page-nav .card .ph-cercle{
	margin-bottom:12px;

}
#page-nav .title-nav{
	font-size: clamp(18px, 1.1vw, 24px);
	font-weight:bold;
	margin-bottom:4px;
}
#page-nav .card li{
	text-align:center;

}

.mono .ph-cercle img{
	max-width:154px;
	border-radius:50%;
	overflow:hidden;
	border:solid 2px #fff;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}





@media screen and (max-width: 1179px) {

}
@media screen and (max-width: 1023px) {

}
@media screen and (max-width: 767px) {
	.mono #page-nav{
		flex-wrap: wrap;
	}

	.mono #page-nav .card{
		width:calc(50% - 20px);
		padding:0 10px;

	}
	.mono #page-nav .card:nth-child(4),
	.mono #page-nav .card:nth-child(3){
		margin-top:100px;
	}
	.mono .ph-cercle img{
		    max-width: 120px;
	}
	#ticket-kihon .card{
		max-width: auto;
		width:calc(50% - 40px);
	}
	#ticket-kihon .card .ph-cercle img{
		width: 100%;
		height:auto;
	}
	.mono #ticket-kihon{
		margin-bottom:40px;
	}


}
@media screen and (max-width: 460px) {

}