@charset "utf-8";

/*------------------------------------------------------------------------------
Css name: course-style.css
Css info: コースカテゴリーのメニュー用コンテンツスタイル
------------------------------------------------------------------------------*/

/*//////////////////////////////////////////////////////// */
/* 共通 */
/*//////////////////////////////////////////////////////// */

/*--- ページタイトル ------------------------------*/

.course-cat-page .page-ttl-box {
    color: #ff9100;
}
/* タイトル */
@media screen and (max-width:767px){/*スマホ用指定*/

    .course-cat-page .page-ttl-box .ttl-s1 {
        font-size: clamp(14px, 1.4vw, 14px);
        margin-bottom: 10px;
    }
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

    .course-cat-page .page-ttl-box .ttl-s1 {
        font-size: clamp(16px, 1.8vw, 18px);
        margin-bottom: 10px;
    }
}
/* レイアウト */
@media screen and (max-width:767px){/*スマホ用指定*/

    .course-cat-page .content-box {
        margin-top: 16px;
        margin-bottom: 40px;
    }
    .course-cat-page .content-box2 {
        margin-top: 0;
        margin-bottom: 40px;
    }
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

    .course-cat-page .content-box {
        margin-top: 16px;
        margin-bottom: 160px;
    }
    .course-cat-page .content-box2 {
        margin-top: 0;
        margin-bottom: 160px;
    }
}

/*--- パーツ ------------------------------*/

/* タイトル */
.course-cat-page .ttl-box {
    color: #ff9100;
}
/* タイトル */
@media screen and (max-width:767px){/*スマホ用指定*/

    .course-cat-page .ttl-box .ttl-s1 {
        font-size: clamp(14px, 1.4vw, 14px);
        margin-bottom: 10px;
    }
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

    .course-cat-page .ttl-box .ttl-s1 {
        font-size: clamp(16px, 1.8vw, 18px);
        margin-bottom: 10px;
    }
}

/* TOP画像 */
.course-cat-page .page-top-img {
	margin-bottom: 16px;
}

/* TOP キャプション */
@media screen and (max-width:767px){/*スマホ用指定*/

	.course-cat-page .page-top-caption {
		font-size: clamp(14px, 1.5vw, 14px);
		color: #009191;
		font-weight: 700;
		}
		.course-cat-page .page-top-caption.s1 {
			margin-bottom: 16px;
		}
		.course-cat-page .page-top-caption.s2 {
			margin-bottom: 14px;
		}
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

	.course-cat-page .page-top-caption {
		font-size: clamp(15px, 1.5vw, 15px);
		color: #009191;
		font-weight: 700;
		}
		.course-cat-page .page-top-caption.s1 {
			margin-bottom: 24px;
		}
		.course-cat-page .page-top-caption.s2 {
			margin-bottom: 20px;
		}
}

/* オレンジリスト */
@media screen and (max-width:767px){/*スマホ用指定*/

	.course-cat-page .page-lis-s1 {
		font-size: clamp(14px, 1.4vw, 14px);
		color: #ff9100;
        list-style-type: decimal;
        counter-increment: revert;
        margin-left: 20px;
		}
		#course-comprehensive .page-lis-s1 {
			margin-bottom: 24px;
		}
		#course-cg-animation .page-lis-s1 {
			margin-bottom: 14px;
		}
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

	.course-cat-page .page-lis-s1 {
		font-size: clamp(15px, 1.5vw, 15px);
		color: #ff9100;
        list-style-type: decimal;
        counter-increment: revert;
        margin-left: 20px;
		}
		#course-comprehensive .page-lis-s1 {
			margin-bottom: 32px;
		}
		#course-cg-animation .page-lis-s1 {
			margin-bottom: 16px;
		}
}

/*--- timetable ------------------------------*/
.course-cat-page .course-timetable {
	color: #fff;
	width: 100%;
	box-sizing: border-box;
	border-collapse: collapse;
	word-wrap: break-word;
	overflow-wrap: break-word;
	table-layout: fixed;
	}
	.course-cat-page .course-timetable th,
	.course-cat-page .course-timetable td {
		text-align: center;
		padding: 2px;
		width: 110px;
	}

@media screen and (max-width:767px){/*スマホ用指定*/

	.course-cat-page .course-timetable {
		font-size: clamp(14px, 1.4vw, 14px);
		}
		.course-cat-page .course-timetable .txt-min{
			font-size: clamp(12px, 1.2vw, 12px);
		}
	/* ベーシックコースのI行目（見出し） */
	.course-cat-page .course-timetable.tt-s2 tr:nth-child(1) {
		font-size: clamp(16px, 1.6vw, 16px);
	}

	/* 表下マージン（スクロールBOXに付与） */
	.course-cat-page .scroll-box{
		margin-bottom: 24px;
	}
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

	.course-cat-page .course-timetable {
		font-size: clamp(14px, 1.4vw, 14px);
		}
		.course-cat-page .course-timetable .txt-min{
			font-size: clamp(12px, 1.2vw, 12px);
		}
	/* ベーシックコースのI行目（見出し） */
	.course-cat-page .course-timetable.tt-s2 tr:nth-child(1) {
		font-size: clamp(20px, 2.0vw, 20px);
	}

	/* 表下マージン（スクロールBOXに付与） */
	#course-cg-animation .scroll-box,
	#course-comprehensive .scroll-box {
		margin-bottom: 30px;
	}
	#course-basic .scroll-box  {
		margin-bottom: 40px;
	}
}
.course-cat-page .course-timetable th span {
	display: block;
	font-size: 12px;
}

/* ボーダー */
.course-cat-page .course-timetable th,
.course-cat-page .course-timetable td {
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}
.course-cat-page .course-timetable th:nth-child(6),
.course-cat-page .course-timetable td:nth-child(6) {
	border-right: none;
}
.course-cat-page .course-timetable.tt-s1 tr:nth-child(7) th,
.course-cat-page .course-timetable.tt-s1 tr:nth-child(7) td {
	border-bottom: none
}

/* 色 */
.course-cat-page .course-timetable .blank,
.course-cat-page .course-timetable.tt-s2 tr:nth-child(6) td.blank {
	background: #f5e2b6;
	}
	.course-cat-page .course-timetable.tt-s1 tr:nth-child(1),
	.course-cat-page .course-timetable.tt-s2 tr:nth-child(2) {
		background: #d39d56;
	}
	.course-cat-page .course-timetable.tt-s2 tr:nth-child(1) {
		/* ベーシックコース見出し */
		background: #e8864d;
	}
	.course-cat-page .course-timetable.tt-s1 tr:nth-child(2) th,
	.course-cat-page .course-timetable.tt-s1 tr:nth-child(3) th,
	.course-cat-page .course-timetable.tt-s1 tr:nth-child(4) th,
	.course-cat-page .course-timetable.tt-s1 tr:nth-child(6) th,
	.course-cat-page .course-timetable.tt-s1 tr:nth-child(7) th,
	.course-cat-page .course-timetable.tt-s2 tr:nth-child(3) th,
	.course-cat-page .course-timetable.tt-s2 tr:nth-child(4) th,
	.course-cat-page .course-timetable.tt-s2 tr:nth-child(5) th,
	.course-cat-page .course-timetable.tt-s2 tr:nth-child(7) th,
	.course-cat-page .course-timetable.tt-s2 tr:nth-child(8) th {
		background: #e8864d;
	}
	.course-cat-page .course-timetable.tt-s1 tr:nth-child(2) td,
	.course-cat-page .course-timetable.tt-s1 tr:nth-child(3) td,
	.course-cat-page .course-timetable.tt-s1 tr:nth-child(4) td,
	.course-cat-page .course-timetable.tt-s1 tr:nth-child(6) td,
	.course-cat-page .course-timetable.tt-s1 tr:nth-child(7) td,
	.course-cat-page .course-timetable.tt-s2 tr:nth-child(3) td,
	.course-cat-page .course-timetable.tt-s2 tr:nth-child(4) td,
	.course-cat-page .course-timetable.tt-s2 tr:nth-child(5) td,
	.course-cat-page .course-timetable.tt-s2 tr:nth-child(7) td,
	.course-cat-page .course-timetable.tt-s2 tr:nth-child(8) td {
		background: #c25237;
	}
	.course-cat-page .course-timetable.tt-s1 tr:nth-child(5) td,
	.course-cat-page .course-timetable.tt-s2 tr:nth-child(6) td {
		background: #eca67d;
		}
		.course-cat-page .course-timetable.tt-s1 tr:nth-child(6) td.col-s1,
		.course-cat-page .course-timetable.tt-s1 tr:nth-child(7) td.col-s1 {
			background: #cd7453;
		}
		.course-cat-page .course-timetable.tt-s2 tr:nth-child(3) td.col-s2,
		.course-cat-page .course-timetable.tt-s2 tr:nth-child(6) td.col-s2,
		.course-cat-page .course-timetable.tt-s2 tr:nth-child(8) td.col-s2 {
			background: #eca67d;
		}
		.course-cat-page .course-timetable.tt-s2 tr:nth-child(3) td.col-s3 {
			background: #85b169;
		}
		.course-cat-page .course-timetable.tt-s2 tr:nth-child(3) td.col-s4,
		.course-cat-page .course-timetable.tt-s2 tr:nth-child(6) td.col-s4 {
			background: #838abf;
		}
		.course-cat-page .course-timetable.tt-s2 tr:nth-child(6) td.col-s5 {
			background: #85b169;
		}

/* スクロール */
@media screen and (max-width:767px){/*スマホ用指定*/

	.course-cat-page .course-timetable {

	}
    .course-cat-page .scroll-box {
		overflow-x: auto;
		padding-bottom: 10px;
		-webkit-overflow-scrolling: touch;
	}
    .course-cat-page .scroll-box::before {
        content: "▼横スクロールできます";
        text-align: left;
        color: #999999;
    }
    .course-cat-page .scroll-box::after {
        content: "▲横スクロールできます";
        text-align: left;
        color: #999999;
    }
}

/*//////////////////////////////////////////////////////// */
/* 総合コース：course-comprehensive.html -------------*/
/*//////////////////////////////////////////////////////// */

#course-comprehensive-box03 .photo-box {
	padding: 8px;
	border: 1px solid #919133;
	margin-bottom: 10px;
	}
	#course-comprehensive-box03 .photo-box img {
		width: 100%;
	}

@media screen and (max-width:767px){/*スマホ用指定*/

	/* 表１：2カラムの表 */
	#course-comprehensive-box03 .lis-s1 {
		direction: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		}
		#course-comprehensive-box03 .lis-s1 .item-box {
			min-width: 310px;
			max-width: 430px;
			margin: 0 auto 24px;
		}
	/* 表２：1カラムの表 */
	#course-comprehensive-box03 .lis-s2 .item-box-row.item-s1 {
		/* 一行目は写真のレイアウト */
		direction: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		}
		#course-comprehensive-box03 .lis-s2 .item-box-row.item-s1 .photo-box {
			min-width: 310px;
			max-width: 430px;
			margin: 0 auto 10px;
		}
	#course-comprehensive-box03 .lis-s2 .item-box-row.item-s2 {
		/* 二行目はキャプション */
		max-width: 430px;
		margin: 0 auto 40px;
	}

}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

	/* 表１：2カラムの表 */
	#course-comprehensive-box03 .lis-s1 {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		}
		#course-comprehensive-box03 .lis-s1 .item-box {
			width: calc(50% - 8px);
			min-width: 310px;
			max-width: 430px;
			margin: 0 auto 24px;
		}
	/* 表２：1カラムの表 */
	#course-comprehensive-box03 .lis-s2 .item-box-row.item-s1 {
		/* 一行目は写真のレイアウト */
	}
	#course-comprehensive-box03 .lis-s2 .item-box-row.item-s1 {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		}
		#course-comprehensive-box03 .lis-s2 .item-box-row.item-s1 .photo-box {
			width: calc(50% - 24px);
			min-width: 310px;
			max-width: 430px;
			margin: 0 auto 10px;
		}
	#course-comprehensive-box03 .lis-s2 .item-box-row.item-s2 {
		/* 二行目はキャプション */
		margin-bottom: 24px;
	}
}

/* キャプション */
@media screen and (max-width:767px){/*スマホ用指定*/

	#course-comprehensive-box03 .ttl-s1{
		font-size: clamp(14px, 1.4vw, 14px);
		color: #009191;
		font-weight: 700;
	}
	#course-comprehensive-box03 .ttl-s1 span.detail {
		font-size: clamp(13px, 1.3vw, 13px);
		color: #555555;
		font-weight: 400;
	}
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

	#course-comprehensive-box03 .ttl-s1{
		font-size: clamp(15px, 1.5vw, 15px);
		color: #009191;
		font-weight: 700;
	}
	#course-comprehensive-box03 .ttl-s1 span.detail {
		font-size: clamp(13px, 1.3vw, 13px);
		color: #555555;
		font-weight: 400;
	}
}

/*//////////////////////////////////////////////////////// */
/* CGアニメーションコース：course-cg-animation.html -------------*/
/*//////////////////////////////////////////////////////// */

#course-cg-animation-box03 .photo-box {
	padding: 8px;
	border: 1px solid #919133;
	margin-bottom: 10px;
	}
	#course-cg-animation-box03 .photo-box img {
		width: 100%;
	}

/* キャプション */
@media screen and (max-width:767px){/*スマホ用指定*/

	#course-cg-animation-box03 .ttl-s1{
		font-size: clamp(14px, 1.4vw, 14px);
		color: #009191;
		font-weight: 700;
	}
	#course-cg-animation-box03 .item-box.caption-box {
		margin-bottom: 16px;
	}
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

	#course-cg-animation-box03 .ttl-s1{
		font-size: clamp(15px, 1.5vw, 15px);
		color: #009191;
		font-weight: 700;
	}
	#course-cg-animation-box03 .item-box.caption-box {
		margin-bottom: 24px;
	}
}

/*//////////////////////////////////////////////////////// */
/* ベーシックコース：course-basic.html -------------*/
/*//////////////////////////////////////////////////////// */

/* ステップアップ */
@media screen and (max-width:767px){/*スマホ用指定*/

	#course-basic-box01 .lis-s1 {
		margin-bottom: 24px;
	}
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

	#course-basic-box01 .lis-s1 {
		margin-bottom: 32px;
	}
}
#course-basic-box01 .lis-s1 li img {
	width: 100%;
	height: auto;
	margin-bottom: 8px;
}

/* ANNEX */
@media screen and (max-width:767px){/*スマホ用指定*/

	#course-basic-box01 .box-s1 {
		margin-bottom: 24px;
		}
		#course-basic-box01 .box-s1 .item-lef {
			margin-bottom: 24px;
		}
		#course-basic-box01 .box-s1 .item-rig img {
			max-width: 400px;
			display: block;
			margin: 0 auto;
		}
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

	#course-basic-box01 .box-s1 {
		margin-bottom: 40px;
		/* flex */
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		}
		#course-basic-box01 .box-s1 .item-lef {
			margin-right: 24px;
		}
		#course-basic-box01 .box-s1 .item-rig img {
			width: 200px;
		}
}
/* (text box) */
#course-basic-box01 .box-s1 .item-lef {
	border: 3px solid #009191;
	border-radius: 10px;
		padding: 10px;
	}
	#course-basic-box01 .box-s1 .item-lef .txt-s3{
		color: #009191;
	}
	#course-basic-box01 .box-s1 .item-lef .txt-s3 a{
		color: #009191;
		text-decoration: none;
		float: right;
		padding-right: 12px;
	}

@media screen and (max-width:767px){/*スマホ用指定*/

	#course-basic-box01 .box-s1 .item-lef .txt-s3 {
		font-size: clamp(14px, 1.4vw, 14px);
		font-weight: 700;
		}
	#course-basic-box01 .box-s1 .item-lef .txt-s4 {
		font-size: clamp(14px, 1.4vw, 14px);
		font-weight: 700;
		}
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

	#course-basic-box01 .box-s1 .item-lef .txt-s3 {
		font-size: clamp(18px, 2.0vw, 20px);
		font-weight: 700;
		}
	#course-basic-box01 .box-s1 .item-lef .txt-s4 {
		font-size: clamp(16px, 1.6vw, 16px);
		font-weight: 700;
		}
}

/* 写真 */
#course-basic-box03 .photo-box {
	padding: 8px;
	border: 1px solid #919133;
	margin-bottom: 10px;
	}
	#course-cg-animation-box03 .photo-box img {
		width: 100%;
	}

/*//////////////////////////////////////////////////////// */
/* 進路活動・検定学習・課外活動：course-etc.html -------------*/
/*//////////////////////////////////////////////////////// */

/* レイアウト */
@media screen and (max-width:767px){/*スマホ用指定*/

    #course-activities .content-box3 {
        margin-top: 16px;
        margin-bottom: 40px;
    }
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

    #course-activities .content-box3 {
        margin-top: 16px;
        margin-bottom: 50px;
    }
}
/* パーツ */
#course-activities .photo-box {
	padding: 8px;
	border: 1px solid #919133;
	margin-bottom: 10px;
	}
	#course-activities .photo-box img {
		width: 100%;
	}

@media screen and (max-width:767px){/*スマホ用指定*/

	/* 1カラムの表 */
	#course-activities .lis-s1 .item-box-row.item-s1 {
		/* 一行目は写真のレイアウト */
		direction: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		}
		#course-activities .lis-s1 .item-box-row.item-s1 .photo-box {
			min-width: 310px;
			max-width: 430px;
			margin: 0 auto 10px;
		}
	#course-activities .lis-s1 .item-box-row.item-s2 {
		/* 二行目はキャプション */
		max-width: 430px;
		margin: 0 auto 40px;
	}

}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

	/* 1カラムの表 */
	#course-activities .lis-s1 .item-box-row.item-s1 {
		/* 一行目は写真のレイアウト */
	}
	#course-activities .lis-s1 .item-box-row.item-s1 {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		}
		#course-activities .lis-s1 .item-box-row.item-s1 .photo-box {
			width: calc(50% - 24px);
			min-width: 310px;
			max-width: 430px;
			margin: 0 auto 10px;
		}
	#course-activities .lis-s1 .item-box-row.item-s2 {
		/* 二行目はキャプション */
		margin-bottom: 40px;
	}
}

/* キャプション */
@media screen and (max-width:767px){/*スマホ用指定*/

	#course-activities .lis-s1 .ttl-s1{
		font-size: clamp(14px, 1.4vw, 14px);
		color: #009191;
		font-weight: 700;
		margin-bottom: 16px;
	}
}
@media print, screen and (min-width:768px){/*タブレット・PC用指定*/

	#course-activities .lis-s1 .ttl-s1{
		font-size: clamp(15px, 1.5vw, 15px);
		color: #009191;
		font-weight: 700;
		margin-bottom: 24px;
	}
}