@charset "utf-8";


/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	For SmartPhone
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* ///////////////////////////////////////////////////// */
/* ============================================ */
/* ------------------------------------ */

@media screen and (max-width:767px){
	.inpageNav{
		display:flex;
		justify-content:space-between;
		width:90%;
		margin:5% auto 0;
	}
	.inpageNav li{
		width:47%;
	}
	.inpageNav li a{
		display:flex;
		justify-content:center;
		align-items:center;
		padding:15px 0;
		font-size:3.4vw;
		color:#333;
		border:1px solid #333;
		position:relative;
	}
	.inpageNav li a::before{
		content:"↓";
		display:flex;
		justify-content:center;
		align-items:center;
		width:4vw;
		height:4vw;
		font-size:3vw;
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		right:0.2em;
	}


	.block.first > .inner .eventBox .innerBox:last-child{
		margin-top:10%;
	}
	.block.first .blockTtlBox h3{
		line-height:1;
	}
	.block.first .blockTtlBox h3:before{
		/*top:28%;*/
	}
	.block.first .blockTtlBox h3 span{
		font-size:4vw;
	}
	/* ------------------------------------ */
	.block.first .itemsBox a{
		display:flex;
		flex-direction:column;
		margin:5% 0 0 0;
		padding:3.5%;
		color:#333;
		border:1px solid #333;
		position:relative;
	}
	.block.first .itemsBox a h4{
		padding:0 0.3em;
		font-size:4.5vw;
		font-weight:400;
	}
	.block.first .itemsBox a h4 span{
		font-size:3.6vw;
	}
	/* ------------------------------------ */
	.block.first .itemsBox a .reqLabel{
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:start;
		padding:1% 2% 1.5% 2%;
		position:absolute;
		top:5px;
		right:-5px;
		background-color:#d60000;
	}
	.block.first .itemsBox a .reqLabel p{
		color:#fff;
	}
	.block.first .itemsBox a .reqLabel p:nth-child(1){
		font-size:3.4vw;
	}
	.block.first .itemsBox a .reqLabel p:nth-child(2){
		font-size:2.2vw;
		margin-top:3px;
	}
	/* ------------------------------------ */
	.block.first .itemsBox a .imgBox{
		/*height:30vw;*/
		padding:0 0.3em;
		margin-top:3%;
	}
	/*.block.first .itemsBox a .imgBox .imgInnerBox{
		width:100%;
		height:100%;
		background-color:#ccc;
	}*/
	/* ------------------------------------ */
	.block.first .itemsBox a .txtBox{
		margin-top:2%;
		padding:0 0.3em;
	}
	.block.first .itemsBox a .txtBox p{
		margin-top:1.5%;
		font-size:3.2vw;
		line-height:1.3;
		padding-left:4.1em;
		text-indent:-4.1em;
		transform: translateX(-1.7%);
	}
	.block.first .itemsBox a .txtBox p:first-child{
		margin-top:0;
	}
	/* ------------------------------------ */
	.block.first .itemsBox a .linkTxtBox{
		display:flex;
		justify-content:end;
		margin-top:3%;
		padding:3% 0.3em 0 0.3em;
		border-top:1px solid #333;
	}
	.block.first .itemsBox a .linkTxtBox p{
		display:flex;
		align-items:center;
		position:relative;
		padding-right:0.3em;
		font-size:3.2vw;
	}
	.block.first .itemsBox a .linkTxtBox p span{
		display:flex;
		justify-content:center;
		align-items:center;
		width:4vw;
		height:4vw;
		/*max-width:25px;
		max-height:25px;
		min-width:18px;
		min-height:18px;*/
		border:1px solid #333;
		font-size:2.8vw;
		transform:translate(3px,3%);
	}
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	For Desktop & Tablet
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* ///////////////////////////////////////////////////// */
/* ============================================ */
/* ------------------------------------ */

@media screen and (min-width:768px){
	.block.first > .inner .eventBox{
		display:flex;
	}
	.block.first > .inner .eventBox .innerBox{
		width:47%;
	}
	.block.first > .inner .eventBox .innerBox:first-child{
		margin-right:4%;
	}
	/* ------------------------------------ */
	.block.first .blockTtlBox h3{
		line-height:0.9;
	}
	.block.first .blockTtlBox h3 span{
		font-size:clamp(1.0rem, 1.8vw, 1.8rem);
		position:relative;
		top:-0.2vw;
	}
	/* ------------------------------------ */
	.block.first .itemsBox{}
	.block.first .itemsBox a{
		display:flex;
		flex-direction:column;
		margin:30px 0 0 0;
		padding:20px;
		color:#333;
		border:1px solid #333;

		transition:all 0.2s ease-in-out;
		transform:scale(1);
		opacity:1;
		position:relative;
	}
	.block.first .itemsBox a:hover{
		transform:scale(1.02);
		opacity:0.7;
	}
	.block.first .itemsBox a h4{
		padding:0 0.3em;
		font-size:clamp(1.3rem, 1.8vw, 1.8rem);
		font-weight:400;
	}
	.block.first .itemsBox a.noLink{
		pointer-events:none;
	}
	/* ------------------------------------ */
	.block.first .itemsBox a .reqLabel{
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:start;
		padding:5px 10px 7px 10px;
		position:absolute;
		top:10px;
		right:-10px;
		background-color:#d60000;
	}
	.block.first .itemsBox a .reqLabel p{
		color:#fff;
	}
	.block.first .itemsBox a .reqLabel p:nth-child(1){
		font-size:clamp(0.8rem, 1.2vw, 1.2rem);
	}
	.block.first .itemsBox a .reqLabel p:nth-child(2){
		font-size:clamp(0.1rem, 0.9vw, 0.9rem);
		margin-top:3px;
	}
	/* ------------------------------------ */
	.block.first .itemsBox a .imgBox{
		/*height:13vw;
		max-height:200px;*/
		padding:0 0.3em;
		margin-top:15px;
	}
	.block.first .itemsBox a .imgBox .imgInnerBox{
		/*width:100%;
		height:100%;
		background-color:#ccc;*/
	}
	/* ------------------------------------ */
	.block.first .itemsBox a .txtBox{
		margin-top:15px;
		padding:0 0.3em;
	}
	.block.first .itemsBox a .txtBox p{
		margin-top:5px;
		font-size:clamp(1.0rem, 1.3vw, 1.3rem);
		line-height:1.3;
		padding-left:4.1em;
		text-indent:-4.1em;
		transform: translateX(-1.7%);
	}
	.block.first .itemsBox a .txtBox p:first-child{
		margin-top:0;
	}
	/* ------------------------------------ */
	.block.first .itemsBox a .linkTxtBox{
		display:flex;
		justify-content:end;
		margin-top:15px;
		padding:15px 0.3em 0 0.3em;
		border-top:1px solid #333;
	}
	.block.first .itemsBox a .linkTxtBox p{
		display:flex;
		align-items:center;
		position:relative;
		padding-right:5.5%;
		font-size:clamp(1.0rem, 1.3vw, 1.3rem);
	}
	.block.first .itemsBox a .linkTxtBox p span{
		display:flex;
		justify-content:center;
		align-items:center;
		width:1.5vw;
		height:1.5vw;
		max-width:25px;
		max-height:25px;
		min-width:18px;
		min-height:18px;
		border:1px solid #333;
		font-size:clamp(0.2rem, 1.1vw, 1.1rem);
		transform:translate(3px,3%);
	}
	/*.block.first .itemsBox a .linkTxtBox p::before{
		content:"→";
		display:flex;
		justify-content:center;
		align-items:center;
		width:1.3vw;
		height:1.3vw;
		max-width:30px;
		max-height:30px;
		font-size:clamp(0.2rem, 1.1vw, 1.1rem);
		font-weight:200;
		border:1px solid #333;
		position:absolute;
		top:50%;
		right:4px;
		transform: translateY(-46%);
	}*/
}