@charset "UTF-8";

/*=========================================================================================================
COURSE
=========================================================================================================*/

/*【 COURSE SETTING 】■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*.【 COUSE TITLE SETTING 】===================================■*/
#CRS_T{
	margin: 0;
	padding: 5% 0;
	font-size: clamp(1.563rem, 0.28rem + 6.41vw, 4.688rem);
	font-weight: 700;
	color: #FFFFFF;
	text-shadow: 0 0 10px #000000;
	box-sizing: border-box;
}
#CRS_T > div:first-child{
	font-size: clamp(1.25rem, 0.481rem + 3.85vw, 3.125rem);
	line-height: clamp(1.438rem, 0.668rem + 3.85vw, 3.313rem);
	/*【 VALUES 】min: 20px & max:  50px */
	/*【 VALUES 】min: 23px & max:  53px 	＜line-height＞ */  
	/*【VIEWPORT】min:320px & max:1100px */
}

/*..《《 LECTURER AREA SETTING 》》____________________________●*/
#CRS_T > div:nth-child(2){
	padding:  0 15%;
	font-size: clamp(1rem, 0.641rem + 1.79vw, 1.875rem);
	line-height: clamp(1.625rem, 1.138rem + 2.44vw, 2.813rem);
	display: inline-block;
	vertical-align: text-top;
	background: linear-gradient(to right, rgba(0,0,0,0), #6B2723 25%, #6B2723 75%, rgba(0,0,0,0));
	/*【 VALUES 】min: 16px & max:  30px */
	/*【 VALUES 】min: 26px & max:  45px 	＜line-height＞ */  
	/*【VIEWPORT】min:320px & max:1100px */
}
#CRS_T > div:nth-child(2)::before{
	content: "【講師】";
	font-size: clamp(1rem, 0.641rem + 1.79vw, 1.875rem);
	letter-spacing: 2px;
	/*【 VALUES 】min: 16px & max:  30px */
}

#CRS_T > div:nth-child(2) span::after{
	content: "研究員";
	margin: 0 0 0 8px;
	font-size: clamp(0.875rem, 0.593rem + 1.41vw, 1.563rem);
	letter-spacing: 2px;
	/*【 VALUES 】min: 14px & max:  35px */
}
/* _____________________《《 LECTURER AREA SETTING / END 》》..●*/
/* ============================【 COUSE TITLE SETTING / END 】.■*/



/*.【 YEAR AREA SETTING 】=====================================■*/
.YER{
	padding: clamp(5px,1vw,30px);
	box-sizing: border-box;
	border-radius: 10px;
	background: rgba(255,255,255,0.7);
	backdrop-filter: blur(6px);
	overflow: hidden;
}
.YER > div:nth-child(1){
	margin: 0 0 20px 0;
	padding: 0 25px 0 0;
	font-size: clamp(1.875rem, 1.362rem + 2.56vw, 3.125rem);
	font-weight: 600;
	letter-spacing: 2px;
	display: inline-block;
	position: relative;
	left: 1.6vw;
	/*【 VALUES 】min: 30px & max:  50px */
}
.YER > div:nth-child(1)::before{
	content: "";
	width: 100%;
	height: 23px;
	display: inline-block;
	transform: skewX(-15deg);
	background-image: linear-gradient(to right, #c8beaf 80%,  rgba(0,0,0,0));
	position: absolute;
	bottom: 5px;
	z-index: -1;
}
.YER > div:nth-child(1)::after{
	content: "";
	padding: 0 0 0 3px;
	font-size: 30px;
}
.YER:nth-child( n + 3){
	margin: 30px 0 0 0;
}
/* ==============================【 YEAR AREA SETTING / END 】.■*/


/*.【 DATE AREA SETTING 】=====================================■*/
.DATE{
	width: calc( 100% + 10px );
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	position: relative;
	left: 0px;
}
.DATE a:nth-child(1){
	text-decoration: none;
	display: flex;
}
.DATE > .LINK{
	min-width: 300px; 
	margin: 0 auto clamp(10px,2vw,20px);
	text-align: left;
	list-style: none;
	
	display: flex;
	position: relative;
	box-sizing: border-box;
	
	flex-direction: column;
	align-items: center; /* 子要素を中央に寄せる */
}
.DATE > .LINK > a /*.DATE > li > .LINK */{
	width: 98%;
	margin: 0 10px 0 0;
	text-decoration: none;
	color: #333;
	display: block;
	box-sizing: border-box;
}
.DATE .LINK a > div/*.DATE .LINK > div*/{
	padding: 0;
	display: flex;
	border: dashed 3px transparent;
	box-sizing: border-box;
	border-radius: clamp(5px, 1vw, 10px);
	background: rgba(255,240,230,0.5);
	transition: all 300ms ease;
}

/*..《《 PLAY IMAGE SETTING 》》_______________________________●*/
.DATE a:nth-child(1) > div > div:nth-child(1){
	width: 78px;
	height: 78px;
	border-radius: clamp(5px, 1vw, 10px);
	position: relative;
	background: #fae8e3;
	transition: all 300ms;
}
.DATE a:nth-child(1) > div > div:nth-child(1)::before{
	content: "";
	width: 65px;
	height: 65px;
	border-radius: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: #FFFFFF;
}
.DATE a:nth-child(1) > div > div:nth-child(1)::after{
	content: "";
	border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
	border-left: 30px solid #cf876a;
	position: absolute;
	top: 50%;
	left: 55%;
	transform: translate(-50%,-50%);
	transition: all 300ms;
}
/* ________________________《《 PLAY IMAGE SETTING / END 》》..●*/

/*..《《 DATE TEXT SETTING 》》________________________________●*/
.DATE a:nth-child(1) div > div:nth-child(2){
	width: 212px;
	padding: 5px;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}
.DATE a:nth-child(1) div:nth-child(2) p:first-child{
	padding: 0 15px 0 0;
	font-size: 23px;
	line-height: 35px;
	color: black;
	
	position: relative;
}


.DATE a:nth-child(1) div:nth-child(2) p:first-child::before{
	content: "";
	width: calc( 212px * 0.98 );
	height: 5px;
	position: absolute;
	top: 26px;
	left: 3px;
	
	border-bottom: 5px solid; /* 太さを指定 */
	border-image-source: linear-gradient(to right, #cf876a 20% , rgba(0,0,0,0) 95%); /* グラデーション */
	border-image-slice: 1; /* これを忘れると表示されません */
	
	transition: all 500ms;
}


.tue .LINK a div > div:last-child,
.fri .LINK a div > div:last-child{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
	font-size: 20px;
}
.tue .LINK a p:nth-child(3)::before {
    content: "(火)";
	margin: 0 0 0 -12px;
}
.fri .LINK a p:nth-child(3)::before {
    content: "(金)";
	margin: 0 0 0 -12px;
}


.DATE a:nth-child(1) div:nth-child(2) p:nth-child(2){
	/*
	font-size: 16px; 
	line-height: 20px;
	color: #FFFFFF;
	letter-spacing: -3px;
	background: linear-gradient(to right, #8c1e00 75% , rgba(0,0,0,0));
	*/
	display: none;
}
/* _________________________《《 DATE TEXT SETTING / END 》》..●*/

/*..《《 TEXT BUTTON SETTING 》》______________________________●*/
.SUB{
	width: calc( 97% - 93px);
	height: 22px;
	padding: 0 3px;
	display: flex;
	list-style: none;
	position: absolute;
	left: 87px;
	bottom: 9px;
	z-index: 1;	
	justify-content: center;
	gap: 7px;					/* ボタン同士の隙間 */
	counter-reset: my-count;
	box-sizing: border-box;
}

.TXT{
	width: 100%;
	height: 22px;
}
.TXT a::before{
	content: "TEXT" counter(my-count, circled-decimal);
	counter-increment: my-count;
	
	font-size: 12px;
	color: #FFFFFF;
	line-height: 22px;
	display: block;
	text-align: center;
	white-space: pre-wrap;
	
	border-radius: 20px;
	background: #aac8f0;/*6f94cd*/
	transition: all 500ms;
	flex: 1;				/* 複数ある場合に均等幅にする */
}
.TXT:only-child a::before {
	content: "TEXT";
	font-size: 16px;
}
/* _______________________《《 TEXT BUTTON SETTING / END 》》..●*/


/*..《《［ a href ］SETTING 》》_______________________________●*/
.DATE li a[href=""]{
	pointer-events: none;
	cursor: default;
}
.DATE li a[href=""]:nth-child(1) > div{
	min-width: 270px;
	background: rgba(255,250,245,0.7);
}
.DATE li a[href=""]:nth-child(1) div:nth-child(2) p:first-child,
.tue .DATE li a[href=""]:nth-child(1) div:nth-child(2) p:nth-child(3)::before,
.fri .DATE li a[href=""]:nth-child(1) div:nth-child(2) p:nth-child(3)::before{
	font-size: 18px;
	line-height: 35px;
	color: #999999;
}
.tue .DATE li a[href=""]:nth-child(1) div:nth-child(2) p:nth-child(3)::before,
.fri .DATE li a[href=""]:nth-child(1) div:nth-child(2) p:nth-child(3)::before{
	font-size: 16px;
}
.DATE li a[href=""]:nth-child(1) > div > div:nth-child(1){
	background: #faf0eb;
}
.DATE li a[href=""]:nth-child(1) > div > div:nth-child(1)::after{
	border-left: 30px solid #dcd2cd; 
}

.DATE li a[href=""]:nth-child(1) div:nth-child(2) p:first-child::before{
	border-image-source: linear-gradient(to right, #dcd2cd 65% , rgba(0,0,0,0) 95%);
}
.DATE li a[href=""]:nth-child(2){
	background: rgba(220,210,205,1);
}
/* ________________________《《［ a href ］SETTING / END 》》..●*/


/*..《《 TEXT［ a href ］SETTING 》》__________________________●*/
.SUB:has(a[href=""]),
.SUB:has(a:not([href])) {
    display: none;
}
/* ___________________《《 TEXT［ a href ］SETTING / END 》》..●*/


/* ==============================【 DATE AREA SETTING / END 】.■*/
/*■■■■■■■■■■■■■■■■■■■■■■■【 COURSE SETTING / END 】*/


/*《 COURSE PC SETTING 》□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□*/
@media screen and (min-width: 1101px) {
/*【 COURSE AREA HOVER SETTING 】_■■■■■■■■■■■■■■■■■■■■*/
.DATE a:hover{
	cursor: pointer;
	}	
.DATE a:nth-child(1):hover > div{
	border-color: #8c1e00;
	box-sizing: border-box;
	background: rgba(255,240,230,0.8);
	transition: all 500ms;
}
.DATE a:nth-child(1):hover > div > div:nth-child(1){
	background: #f8c6b5;
	transition: all 500ms;
}
.DATE a:nth-child(1):hover > div > div:nth-child(1)::after{
	content: "";
	border-top: clamp(10px, 2vw, 15px) solid transparent;
    border-bottom: clamp(10px, 2vw, 15px) solid transparent;
    border-left: clamp(18px, 3vw, 25px) solid #8b4513;
	transition: all 500ms;
}

.DATE a:nth-child(1):hover div:nth-child(2) p:first-child::before{
	border-image-source: linear-gradient(to right, #8c1e00 60% , rgba(0,0,0,0) 95%); /* グラデーション */
	transition: all 500ms;
	}



/* ==============================【 YEAR AREA SETTING / END 】.■*/

/*.【 DATE AREA SETTING 】=====================================■*/

/*..《《 PLAY IMAGE SETTING 》》_______________________________●*/


.DATE li:has(.SUB .TXT a:hover) a:nth-child(1) > div > div:nth-child(1){
	background: #6f94cd;
	/*
	width: 78px;
	height: 78px;
	border-radius: clamp(5px, 1vw, 10px);
	position: relative;
	background: #fae8e3;
	transition: all 300ms;*/
}
.DATE li:has(.SUB .TXT a:hover) a:nth-child(1) > div > div:nth-child(1)::after{
	border-top: 18px solid #aac8f0;
	border-bottom: 18px solid #aac8f0;
	border-left: 28px solid #aac8f0;
	border-left: 28px solid #aac8f0;
	left: 50%;
	transform: translate(-50%,-50%) rotate(370deg);
	transition: all 300ms;
}


.DATE li:has(.SUB .TXT a:hover) > a > div {
    border-color: #014381;
	transition: all 500ms;
}
.DATE li:has(.SUB .TXT a:hover) a:nth-child(1) div:nth-child(2) p:first-child::before{
	border-image-source: linear-gradient(to right, #014381 60% , rgba(0,0,0,0) 95%); /* グラデーション */
	transition: all 500ms;
	}
	
.TXT a:hover::before{
	background: #014381;
	transition: all 500ms;
	}

/*■■■■■■■■■■■■■■■■■_【 COURSE AREA HOVER SETTING / END 】*/
}/*□□□□□□□□□□□□□□□□□□□□□□□□□□□《COURSE PC SETTING / END 》*/


/*=========================================================================================================
COURSE / END
=========================================================================================================*/