table {
    border-collapse: collapse;
    width: 100%;
}

table, th, td {
    border: 1px solid #000;
}

th, td {
    padding: 10px;
    text-align: center;
}

#contents .scroll_table {
    overflow-x: auto;
}
#contents .scroll_table table {
    width: 1047px;
}

.submenu {
    display: none;
}
.submenu.active {
    display: block;
}
.page_nav {
    list-style-type: none;
    padding: 0;
}
.page_nav li {
    margin-bottom: 10px;
}
.page_nav li a {
    text-decoration: none;
    color: black;
    display: block;
}
.page_nav li a:hover {
    background-color: #eee;
}

.map-list {
    display:flex;
    flex-direction:column;
    align-items: center;
    gap:20px;
}
.map-list-item {
    flex-basis: 100%;
	font-size:1rem;
}
.map-list-item img {
    display:block;
    margin:auto;
}	

.poster {
    width:90%;
    margin:auto;
    height:auto;
}

@media screen and (min-width:630px) {
    .map-list {
        display:flex;
        flex-direction:row;
        justify-content:space-around;
        align-items: flex-start;
    }
    .map-list-item {
        flex-basis: 40%;
    }	
    .map-list-item img {
        display:block;
        margin:0;
    }
    .poster {
        width:40%;
        margin:0 auto 0 5%;
        height:auto;
    }
}


*,*::after,::before {
    box-sizing: border-box;
}

#contents .title_xs_chara.recruit {
    font-weight:600;
    padding-left:1em;
}

.inner_width-ptag {
    margin:0 1em;
}
.inner_width-ptag p {
    padding-bottom:1em;
    font-size:1rem;
    letter-spacing: 0.07rem;
    line-height: 1.6;
}

.inner_width-ptag p.indent {
    padding-bottom:1em;
    text-indent:calc(1em + 0.07rem);
    font-size:1rem;
    letter-spacing: 0.07rem;
    line-height: 1.6;
}

.inner_width-panf,
.inner_width-link {
    container-type:inline-size;
    container-name:contain-recruit;
}
.inner_width-panf .recruit-panf-cover {
    padding:10px;
    width:90%;
    margin:auto;
}
.inner_width-panf .recruit-panf-cover a {
    display:block;
    margin:10px;
    padding:5px;
}

.inner_width-panf .recruit-panf-cover a img {
    object-fit:contain;
    aspect-ratio: 2480 / 3508;
    border:1px solid #000000;
}

.inner_width-link ul {
    padding:0 1em;
    font-size:0.9rem;
}
        
.inner_width-link ul li {
    padding:5px;
}
        
@container contain-recruit (min-width:688px) {

    .inner_width-panf .recruit-panf-cover {
        display:grid;
        grid-template-columns:repeat(3,1fr);
        grid-template-rows:auto;
        gap:5px;
        width:100%;
    }

    .inner_width-link ul {
        font-size:1rem;
    }

}


.container-recruit {
	container-type:inline-size;
	container-name:grid-container;
}


#contents .grid-recruit-outline {

	display:grid;
	grid-template-columns:1fr;
	grid-template-rows:auto;
	grid-template-areas:
		"date-header-sp"
		"date"
		"place-header-sp"
		"place"
		"host-header-sp"
		"host"
		"details-header-sp"
		"details";
	width:95%;
	margin:0 auto;
	padding:.5em;
	font-size:1rem;
	line-height:1.6;
	letter-spacing:.07rem;
	gap:3px;
 
	& .recruit-date-header-sp,
	  .recruit-place-header-sp,
	  .recruit-host-header-sp,
	  .recruit-details-header-sp {
		margin-top:.3em;
		padding:.5em;
		text-align:center;
		font-weight:600;
		background-color:rgba(70,130,180,.85);
		color:#ffffff;
	}

	& .recruit-date,
	  .recruit-place,
	  .recruit-host,
	  .recruit-details {
		padding:.5em;
		text-align:center;
		font-weight:400;
		font-size:1em;
		background-color:rgba(70,130,180,.1);
		color:#000000;
	}

	& .recruit-details {
		text-align:left;
	}

	& .recruit-date-header-sp {
		text-align:center;
	}

	& .recruit-header {
		display:none;
	}

	& .recruit-date {
		grid-area:date;
	}
	& .recruit-place {
		grid-area:place;
	}
	& .recruit-host {
		grid-area:host;
	}
	& .recruit-details {
		grid-area:details;
	}

	& .recruit-date-header-sp {
		grid-area:date-header-sp;
		margin-bottom: 5px;
	}
	& .recruit-place-header-sp {
		grid-area:place-header-sp;
		margin-bottom: 5px;
	}
	& .recruit-host-header-sp {
		grid-area:host-header-sp;
		margin-bottom: 5px;
	}
	& .recruit-details-header-sp {
		grid-area:details-header-sp;
		margin-bottom: 5px;
	}
	& pre {
		white-space:pre-wrap;
	}
	& .date-place {
		display:grid;
		gap:3px;
	}

}

#contents .grid-recruit-outline > * {

}

#contents .inner_width-seminar {
	margin:0 1em;
	padding-bottom:1em;
	text-indent:calc(1em + 0.07rem);
	font-size:1rem;
	letter-spacing:.07rem;
	line-height:1.6;

}

#contents .inner_width-ptag .date-info-flex {
	display:flex;
	flex-direction:column;
}

#contents h5.title_s {
	font-size:1.1rem;
	font-weight:600;
	margin:.5em auto .5em;
	line-height:1.6;
	letter-spacing:0.07em;
	color:#0017c1;
	position:relative;
	padding:10px 0 5px 20px;
	border-bottom:3px solid #0017c1; 
}



@container grid-container (min-width:820px) {

	#contents .grid-recruit-outline .recruit-header {

		display:grid;
		grid-template-columns:repeat(4,1fr);
		grid-template-columns:1fr 1fr .6fr 1.4fr;
		grid-template-rows:auto;
		grid-template-areas:
			"date place host details";
		width:100%;
		margin:0 auto;
		font-size:1rem;
		line-height:1.6;
		letter-spacing:.07rem;
		gap:3px;

		& .recruit-date {
			text-align:left;
		}

		& .recruit-date {
			text-align:center;
		}




	}

	#contents .grid-recruit-outline .recruit {

		display:grid;
		grid-template-columns:repeat(4,1fr);
		grid-template-columns:1fr 1fr .6fr 1.4fr;
		grid-template-rows:auto;
		grid-template-areas:
			"date-place date-place host details";
		width:100%;
		margin:0 auto;
		font-size:1rem;
		line-height:1.6;
		letter-spacing:.07rem;
		gap:3px;

		& .recruit-date-header-sp,
	  	  .recruit-place-header-sp,
	  	  .recruit-host-header-sp,
	  	  .recruit-details-header-sp {
			display:none;
		}

		& .recruit-date {
			text-align:left;
		}

		& .date-place {
			grid-area:date-place;
            display:grid;
			gap:3px;
		}

		& .date-place-item {
			display:flex;
			flex-direction:row;
			flex-grow:1;
			gap:3px;

		}

		& .date-place-item > * {
			width:50%;
		}

	}

	#contents .grid-recruit-outline .recruit-header > * {
		padding:.5em;
		text-align:center;
		font-weight:600;
		font-size:.925em;
		background-color:rgba(70,130,180,.85);
		color:#ffffff;
	}
	
	#contents .inner_width-ptag pre {
		text-indent:calc(1em + 0.07rem);
	}
	
	#contents .inner_width-ptag .date-info-flex {
		display:flex;
		flex-direction:row;
	}

	#contents h5.title_s {
		width:98%;
		font-size:1.3rem;
		margin:1rem auto 1rem;
		padding:10px 0 10px 1em;
	}

}