@charset "utf-8";

/*ホーム-home*/
/*
=========================================
 noticeArea
=========================================
*/
#noticeArea {
	margin: 0;
	padding: 0;
	background-color: #fff5b9;
}

#noticeArea .inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 20px 0;
}

#noticeArea .inner .notice {
	max-width: 100%;
	margin: 0 auto;
	background-color: #ffffff;
	box-sizing: border-box;
	line-height: 1;
	font-size: 137.50%;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	text-align: center;
}

#noticeArea .inner .notice a {
	display: block;
	padding: 10px 16px 8px;
}

@media screen and (max-width:768px) {
	#noticeArea .inner .notice {
		max-width: 96%;
		margin: 0 auto;
		background-color: #ffffff;
		box-sizing: border-box;
		line-height: 1.2;
		font-size: 106.25%;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
	}
}

/*
=========================================
 courseArea
=========================================
*/
#courseArea {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#courseArea .inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 30px 0;
}

#courseArea .inner ul li:first-child {
	width: 48%;
	margin: 0;
	padding: 0;
	float: left;
}

#courseArea .inner ul li:last-child {
	width: 48%;
	margin: 0;
	padding: 0;
	float: right;
}

#courseArea .inner img {
	max-width: 100%;
	height: auto;
}

#courseArea .inner img:hover {
	opacity: 0.7;
}

@media screen and (max-width:768px) {
	#courseArea .inner {
		max-width: 960px;
		margin: 0 auto;
		padding: 26px 0;
	}
}

/* 2023/06/30 バナー一行で2枚見せたいのでコメントアウトしました */
/* @media screen and (max-width:480px) {
	#courseArea .inner ul li:first-child {
		width: 96%;
		margin: 0 auto 10px;
		padding: 0;
		float: none;
	}

	#courseArea .inner ul li:last-child {
		width: 96%;
		margin: 0 auto;
		padding: 0;
		float: none;
	}
} */

#courseArea .course_set {
	width: 100%;
	margin: 0 auto 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	-webkit-box-pack: space-around;
	-ms-flex-pack: space-around;
	justify-content: space-around;
	flex-wrap: wrap;
}

#courseArea .course_set li {
	margin: 0 0 20px;
	width: 47.91666%;
}

@media screen and (max-width:480px) {
	#courseArea .course_set {
		width: 96%;
		margin: 0 auto 10px;
	}

	#courseArea .course_set li img {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	/* 2023/06/30 バナー一行で2枚見せたいのでコメントアウトしました */
	/* #courseArea .course_set li {
		margin: 0 0 10px !important;
		width: 100% !important;
	} */
}

#courseArea .inner .opencampus {
	margin: 0 auto;
	width: 49%;
	padding: 0;
}

@media screen and (max-width:768px) {
	#courseArea .course_set {
		margin: 0 auto 10px;
	}

	#courseArea .inner .opencampus {
		margin: 0 auto;
		width: 96%;
		padding: 0;
		text-align: center;
	}
}

/*
=========================================
 contentsArea
=========================================
*/

#contentsArea {
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
}

#contentsArea .inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 0 30px;
}

/*
=========================================
 newsArea
=========================================
*/
#newsArea {
	width: 50%;
	margin: 0;
	padding: 0;
	float: left;
}

#newsArea .inner {
	width: 100%;
	margin: 0;
	padding: 0;
}

#newsArea .ttl {
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
	color: #666666;
	font-weight: bold;
}

#newsArea .blog:hover {
	opacity: 0.7;
}

#newsArea .blog dl {
	margin: 0;
	padding: 0;
	width: 100%;
	box-sizing: border-box;
}

#newsArea dt {
	font-family: Quicksand;
	color: #64b19d;
	width: 100%;
	margin-bottom: 0px;
	font-size: 93.75%;
}

#newsArea dd {
	width: 100%;
	margin: 0 0 10px;
	padding: 0 0 3px;
	color: #333333;
	font-size: 100%;
	border-bottom: 1px dotted #64b19d;
}

#newsArea .inner .list {
	margin: 0;
	font-size: 93.75%;
	padding-left: 10px;
	background: url(../images/com/com_arrow_01.gif) no-repeat;
	background-position: 0 3px;
	display: inline-block;
	box-sizing: border-box;
	float: right;
}

@media screen and (max-width:480px) {
	#newsArea {
		width: 100%;
		margin: 0 auto 8px;
		padding: 0;
		float: none;
	}
}

/*
=========================================
 topicsArea
=========================================
*/
#topicsArea {
	width: 45%;
	margin: 0;
	padding: 0;
	float: right;
}

#contentsArea .inner #topicsArea .inner {
	margin: 0;
	padding: 0;
}

#topicsArea .ttl {
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
	color: #666666;
	font-weight: bold;
}

#topicsArea img {
	margin: 0;
	padding: 0;
	max-width: 100%;
}
#topicsArea .inner ul{
	display: block;
	width: 100%;
}
#topicsArea .inner ul li:first-child{
	margin-bottom: 20px;
}
#topicsArea .inner ul li a{
	display: block;
	width: 100%;
}

#topicsArea .inner ul li img:hover {
	opacity: 0.7;
}

@media screen and (max-width:480px) {
	#topicsArea {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		float: none;
	}
}

/*
=========================================
 advantagesArea
=========================================
*/
#advantagesArea {
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	background-color: #e8f3f0;
}

#advantagesArea .inner {
	max-width: 800px;
	margin: 0 auto;
	padding: 30px 0;
}

#advantagesArea .inner ul {
	margin: 0;
	padding: 20px 0 0 0;
}

#advantagesArea .inner ul li {
	width: 33.25%;
	margin: 0;
	padding: 0px 0px 20px 0px;
	float: left;
	text-align: center;
}

#advantagesArea .inner ul.adv_set {
	margin: 0 auto;
	padding: 20px 0 0 0;
	width: 66.5%;
}

#advantagesArea .inner ul.adv_set li {
	width: 50%;
	margin: 0;
	padding: 0px 0px 20px 0px;
	float: left;
	text-align: center;
}


#advantagesArea .inner ul li span {
	color: #64b19d;
	font-size: 118.75%;
}

.marker_yellow_hoso {
	background: linear-gradient(transparent 60%, rgba(255, 255, 103, 0.8) 60%);
}

#advantagesArea .inner ul li img {
	max-width: 205px;
	height: auto;
	margin: 0 auto 10px;
	padding: 0;
	display: block;
}

#advantagesArea .inner .btn {
	max-width: 96%;
	margin: 0 auto;
	box-sizing: border-box;
	font-size: 137.50%;
	border-radius: 4px;
	line-height: 1;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	background: url(../images/com/bg_details.png) no-repeat #ffffff;
	background-position: 97% center;
}

#advantagesArea .inner .btn a {
	display: block;
	padding: 10px 16px 8px;
}

#advantagesArea .inner .btn .clr {
	color: #ee9e2e;
}

@media screen and (max-width:768px) {
	#advantagesArea .inner .btn {
		max-width: 96%;
		margin: 0 auto;
		box-sizing: border-box;
		font-size: 137.50%;
		border-radius: 4px;
		line-height: 1;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		background: #ffffff;
		background-position: 97% center;
	}
}

@media screen and (max-width:480px) {

	#advantagesArea .inner ul li,
	#advantagesArea .inner ul.adv_set li {
		width: 100%;
		margin: 0;
		padding: 0px 0px 20px 0px;
		float: left;
		text-align: center;
	}

	#advantagesArea .inner .btn {
		max-width: 96%;
		margin: 0 auto;
		box-sizing: border-box;
		font-size: 137.50%;
		border-radius: 4px;
		line-height: 1.4;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		background: #ffffff;
		background-position: 97% center;
	}

	#advantagesArea .inner .btn a {
		display: block;
		padding: 10px 16px 8px;
	}

}

/*
=========================================
 snsArea
=========================================
*/
.snsArea {
	background-color: #fff5b9;
	padding: 100px 0;
}

#wrapper .snsArea .inner {
	max-width: 960px;
	margin: 0 auto;
}

.snsArea .inner>h3 {
	text-align: center;
	margin-bottom: 40px;
}

.snsArea .sec_instagram {
	margin-bottom: 70px;
}

.snsArea ul.inner {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.snsArea ul.inner li {
	border-left: solid 1px#4c4c4c;
	width: 230px;
}

.snsArea ul.inner li:last-child {
	border-right: solid 1px#4c4c4c;
}

.snsArea ul.inner li a {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 118.75%;
	color: #000000;
	line-height: 40px;
}

.snsArea ul.inner li a::before {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	background-image: url(../images/com/logo_x2.svg);
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 15px;
}

.snsArea ul.inner li.youtube_box a::before {
	background-image: url(../images/com/logo_youtube.svg);
}


@media screen and (max-width:768px) {
	.snsArea {
		padding: 50px 0;
	}

	.snsArea .sec_instagram {
		width: 90%;
		margin: 0 auto 50px;
	}

	.snsArea ul.inner li {
		width: 45%;
	}

}