@charset "utf-8";
/* ----------------------------------------------------------------------------------------------------
スケジュール一覧：調整バージョン
---------------------------------------------------------------------------------------------------- */
:root {
    --colorColumnBtn1: #ffc645;
    --colorColumnBtn2: #92d85b;
    --colorColumnBtn3: #62adf2;
	--colorpattern6-1: #f15a24;
	--colorpattern7-1: #22b573;
	--colorpattern8-1: #0071bc;
	--gap: 10px;
}

section{
	padding: 80px 0;
}

section h2{
	font-size: 2.2rem;
	margin-bottom: 80px;
	text-align: center;

}

#timetable{
	margin: 0 80px 60px;
}


.slideArea{
	background: #f1f1f1;
	padding: 40px 0 80px;
	margin-bottom: 80px;
}

.scroll-wrapper{
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	display: flex;
	margin-bottom: 40px;
}

#slideNavi{
	display: flex;
	flex-wrap: nowrap;
	gap: var(--gap);
	width: max-content;
	margin-inline: auto;
	overflow-x: auto;
  	-webkit-overflow-scrolling: touch;

}
#slideNavi li{
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 12px 30px;
	min-width: 200px;
	text-align: center;
	border-radius: 100svh;
	background: #0f1b3d;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	user-select: none;
	opacity: 0.5;
}
#slideNavi li.current{ opacity: 1 !important; }
#slideNavi li:nth-child(1){	background: var(--colorColumnBtn1) !important;}
#slideNavi li:nth-child(2){	background: var(--colorColumnBtn2) !important;}
#slideNavi li:nth-child(3){	background: var(--colorColumnBtn3) !important;}

.panel{
	border-radius: 16px;
	padding: 40px;
	background: #fff;
	box-shadow: 0 6px 16px rgba(0,0,0,0.03);
	margin: 0 10px;
}
.panel h3{ 
	margin: 0 0 20px; 
	font-size: 1.1rem;
}

section article .item .box {
    padding: 40px 0 40px 30px;
}
section article .item dl {
    width: 180px;
	margin-right: 20px;
}
section article .item dl dt {
    padding: 13px 0;
}
section article .item dl dd {
    font-size: 0.75rem;
}

section article.panel1 .item dl dt.num ,section article.panel1 .maker{ 
	background: var(--colorpattern6-1) !important;
}
section article.panel2 .item dl dt.num ,section article.panel2 .maker{ 
	background: var(--colorpattern7-1) !important;
}
section article.panel3 .item dl dt.num ,section article.panel3 .maker{ 
	background: var(--colorpattern8-1) !important;
}

body:is(#p1, #p2, #p3, #p4, #p5, :not([id])) section article.panel1 h3 {
    color: var(--colorpattern6-1) !important;
    background-image: linear-gradient(90deg, var(--colorpattern6-1) 0 20%, #ccd5db 20%) !important;
}
body:is(#p1, #p2, #p3, #p4, #p5, :not([id])) section article.panel2 h3 {
    color: var(--colorpattern7-1) !important;
    background-image: linear-gradient(90deg, var(--colorpattern7-1) 0 20%, #ccd5db 20%) !important;
}
body:is(#p1, #p2, #p3, #p4, #p5, :not([id])) section article.panel3 h3 {
    color: var(--colorpattern8-1) !important;
    background-image: linear-gradient(90deg, var(--colorpattern8-1) 0 20%, #ccd5db 20%) !important;
}

section article p {
    margin-bottom: 40px;
}

.slick-slide img {
    display: inline;
}

/* sp */
@media screen and (max-width: 900px) {

	.sp {
        margin-left: 0rem;
    }

	section {
    	padding: 20px 0;
		margin: 10px;
	}

	section h2{
		font-size: 1.5rem;
		margin-bottom: 20px;
	}

	#timetable {
    	margin: 0 20px 30px;
	}

	.scroll-wrapper {
		padding-left: 20px;
	}

	.slideArea {
    	padding: 40px 0 40px;
    	margin-bottom: 40px;
	}

	section article .item h5 {
        font-size: 0.875rem;
    }

	section article .item .box {
    	padding: 20px 12px 12px;
	}

	section article .item dl {
    	width: 150px;
		margin: 20px auto;
	}
	section article .item dl dt {
    	padding: 12px 0;
	}
	section article .item dl dt img{
		width: 90px;
	}

	.panel{
		margin: 0 8px;
		padding: 20px;
	}

	ul#slideNavi li {
		width: auto;
		min-width: auto;
	}

	#close {
        margin: 0 20px 40px;
    }

}