@charset "UTF-8";

/* ==================================================
ARTICLE AREA
================================================== */
#articleArea {
}

#articleArea.area {
	padding-top: 100px;
}

#articleArea .areaTitle {
}

#articleArea .borderBox {
}

#articleArea .separateBlock {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
}

#articleArea .separateBlock .pct {
	width: 35%;
	border-radius: 6px;
	overflow: hidden;
}

#articleArea .separateBlock .pct img {
}

#articleArea .separateBlock .txt {
	width: 60%;
	text-align: left;
}

#articleArea .separateBlock .txt .ttl {
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.4;
	color: #305267;
	margin-bottom: 30px;
}

#articleArea .separateBlock .txt .doc {
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.1em;
}

#articleArea .separateBlock .txt .doc p {
}

@media screen and (max-width: 900px) {
	#articleArea {
	}
	
	#articleArea.area {
		padding-top: 60px;
	}
	
	#articleArea .areaTitle {
	}
	
	#articleArea .borderBox {
	}
	
	#articleArea .separateBlock {
		display: block;
		max-width: 520px;
		margin: 0 auto;
	}
	
	#articleArea .separateBlock .pct {
		width: 100%;
	}
	
	#articleArea .separateBlock .pct img {
	}
	
	#articleArea .separateBlock .txt {
		width: 100%;
		padding: 30px 0 10px;
	}
	
	#articleArea .separateBlock .txt .ttl {
		font-size: 1.8rem;
		margin-bottom: 20px;
	}
	
	#articleArea .separateBlock .txt .doc {
		line-height: 1.6;
		letter-spacing: 0.06em;
	}
	
	#articleArea .separateBlock .txt .doc p {
	}
}


/* ==================================================
SCRIPT AREA
================================================== */
#scriptArea {
}

#scriptArea .areaTitle {
}

#scriptArea .borderBox {
}


/* ==================================================
ABOUT AREA
================================================== */
#aboutArea {
}

#aboutArea .areaTitle {
}

#aboutArea .borderBox {
	padding-top: 60px;
	padding-bottom: 70px;
}

#aboutArea .separateBlock {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	margin: 0 auto;
}

#aboutArea .separateBlock .credit {
	width: calc(100% - 220px - 40px);
	text-align: left;
}

#aboutArea .separateBlock .credit .ttl {
	font-size: 2.2rem;
	font-weight: 600;
	color: #305267;
	margin-bottom: 30px;
}

#aboutArea .separateBlock .credit .ttl i {
}

#aboutArea .separateBlock .credit .comment {
}

#aboutArea .separateBlock .credit .comment p {
	line-height: 1.8;
}

#aboutArea .separateBlock .pct {
	max-width: 220px;
}

#aboutArea .separateBlock .pct a.navigator {
	display: block;
	border-radius: 6px;
	overflow: hidden;
	transition: all 0.4s ease-out 0s;
}

#aboutArea .separateBlock .pct a.navigator .thumb {
}

#aboutArea .separateBlock .pct a.navigator .thumb img {
	transition: all 0.4s ease-out 0s;
}

#aboutArea .separateBlock .pct a.navigator .name {
	position: relative;
	/*background: rgba(83,110,126,0.2);*/
	background: #d4dade;
	font-size: 1.8rem;
	color: #305267;
	transition: all 0.4s ease-out 0s;
}

#aboutArea .separateBlock .pct a.navigator .name::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 16px;
	margin: auto 0;
	width: 11px;
	height: 8px;
	background: url("../img/svg_common/icon_window.svg") no-repeat center center;
	background-size: contain;
}

/* hover */
#aboutArea .separateBlock .pct a.navigator:hover {
}

#aboutArea .separateBlock .pct a.navigator:hover .thumb {
}

#aboutArea .separateBlock .pct a.navigator:hover .thumb img {
	opacity: 1;
	transform: scale(1.06);
}

#aboutArea .separateBlock .pct a.navigator:hover .name {
	/*background: rgba(83,110,126,0.4);*/
	background: #b0bbc3;
}


@media screen and (max-width: 900px) {
	#aboutArea {
	}
	
	#aboutArea .areaTitle {
	}
	
	#aboutArea .borderBox {
		padding-top: 40px;
		padding-bottom: 50px;
	}
	
	#aboutArea .separateBlock {
		display: block;
		max-width: 700px;
		margin: 0 auto;
	}
	
	#aboutArea .separateBlock .credit {
		width: 100%;
	}
	
	#aboutArea .separateBlock .credit .ttl {
		font-size: 1.8rem;
		margin-bottom: 20px;
	}
	
	#aboutArea .separateBlock .credit .ttl i {
	}
	
	#aboutArea .separateBlock .credit .comment {
	}
	
	#aboutArea .separateBlock .credit .comment p {
		line-height: 1.5;
	}
	
	#aboutArea .separateBlock .pct {
		max-width: 260px;
		width: 60%;
		margin: 40px auto 0;
	}
	
	#aboutArea .separateBlock .pct a.navigator {
	}
	
	#aboutArea .separateBlock .pct a.navigator .thumb {
	}
	
	#aboutArea .separateBlock .pct a.navigator .thumb img {
	}
	
	#aboutArea .separateBlock .pct a.navigator .name {
		font-size: 1.6rem;
	}
	
	#aboutArea .separateBlock .pct a.navigator .name::after {
	}
}


/* #scheduleBox
------------------------------ */
#scheduleBox {
	margin-top: 50px;
}

#scheduleBox .ttl {
	font-size: 3rem;
	font-weight: 500;
	margin-bottom: 10px;
}

#scheduleBox ul.weekList {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
	border: 1px solid #697782;
	border-radius: 6px;
	position: relative;
}

#scheduleBox ul.weekList::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 1px;
	height: 100%;
	background: #697782;
}

#scheduleBox ul.weekList > li {
	width: 50%;
	padding: 30px 2.6% 20px;
}

#scheduleBox ul.weekList > li .week {
	font-size: 3.2rem;
	letter-spacing: 0;
	line-height: 1.2;
	margin-bottom: 15px;
}

#scheduleBox ul.weekList > li:nth-child(1) .week {
	color: #6aaab2;
}

#scheduleBox ul.weekList > li:nth-child(2) .week {
	color: #f09cc6;
}

#scheduleBox ul.timeList {
}

#scheduleBox ul.timeList li {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap: wrap;
	flex-direction: row;
}

#scheduleBox ul.timeList li b {
	border-radius: 30px;
	border: 1px solid #385165;
	width: calc(100% / 4 - 6px);
	margin: 0 3px 10px;
	padding: 3px 0;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
	color: #305267;
}

#scheduleBox ul.timeList li b::after {
	content: "-";
	display: inline-block;
	margin-left: 0.2em;
	transform: translateY(-1px);
}


@media screen and (max-width: 900px) {
	#scheduleBox {
	}
	
	#scheduleBox .ttl {
		font-size: 2.4rem;
	}
	
	#scheduleBox ul.weekList {
		display: block;
		max-width: 520px;
		margin: 0 auto;
	}
	
	#scheduleBox ul.weekList::after {
		display: none;
	}
	
	#scheduleBox ul.weekList > li {
		width: 100%;
		padding: 20px 2% 10px;
	}

	#scheduleBox ul.weekList > li:nth-child(2) {
		border-top: 1px solid #697782;
	}
	
	#scheduleBox ul.weekList > li .week {
		font-size: 2.2rem;
		margin-bottom: 15px;
	}
	
	#scheduleBox ul.timeList {
	}
	
	#scheduleBox ul.timeList li {
	}
	
	#scheduleBox ul.timeList li b {
	}
	
	#scheduleBox ul.timeList li b::after {
	}
}

@media screen and (max-width: 420px) {
	#scheduleBox ul.timeList li b {
		font-size: 1.7rem;
		width: calc(100% / 3 - 6px);
	}
}