@charset "utf-8";

/* =======================================================================
 TOPページレスポンシブ対応 640px以下
======================================================================= */

/* ================================================================
 reset
================================================================ *


/* ================================================================
 common
================================================================ */
/* サブタイトル */
#main .subttl {
	padding: 15px;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.5;
	color: #fff;
	text-align: left;
	background-image: none;
	background-color: #0e357f;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
#main .subttl span {
	padding-left: 0;
	background: none;
}


@media (max-width: 480px) {
	.no-tb { display: block; }
}

/* ================================================================
 override
================================================================ */


@media (max-width: 370px) {
	#header_copy_sp {
		margin-bottom: 5px;
		font-size: 2vw;
		line-height: 1;
	}
}

/* ================================================================
 contents
================================================================ */


/* スライダー
--------------------------------------------------------- */
#slider {
	margin: 0;
	width: 100%;
}
.swiper-container .swiper-wrapper {
	margin-bottom: 0;
}
.swiper-container .swiper-slide img {
	border-radius: 0;
}
@media (max-width: 480px) {
	.swiper-button-prev,
	.swiper-button-next {
		width: 30px;
		height: 30px;
		top: calc(50% - 15px);
		background-size: 16px 31px;
	}
	.swiper-button-prev {
		left: 0;
	}
 .swiper-button-next {
		right: 0;
	}
}



/* 重要なお知らせ
--------------------------------------------------------- */
.important_news {
}


/* 在校生緊急のお知らせボタン */
#main .btn_students {
}


/* ボタン群 */
ul#top_menu_mid {
	width: 90%;
}
@media (max-width: 480px) {
	ul#top_menu_mid {
		width: 100%;
	}
}

/* 在校生 緊急のお知らせ */
@media (max-width: 480px) {
	#kyuukou p a img {
		width: 100%;
	}
}



/* 学年別コースのご案内
--------------------------------------------------------- */
#course {
	padding-top: 10px;
	padding-bottom: 15px;
}
#course .wrapper {
	padding: 0;
}

/* タイトル */
#course .course_ttl_area {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	background-color: #0e357f;
}
#course .course_ttl_area .ttl {
	margin-bottom: 0;
	padding: 15px 0 15px 15px;
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
	text-align: left;
}

/* 保護者の皆様へ */
#course .course_ttl_area .course_parents {
	margin: 5px 10px 0 0;
}
#course .course_parents a {
	padding: 10px 20px 10px 10px;
}
#course .course_parents a:hover {
	opacity: 1;
}
#course .course_parents a::after {
	right: 10px;
}

/* コース一覧 */
#course #course_list {
	width: 97%;
	margin-right: auto;
	margin-left: auto;
}
#course #course_list li a {
	min-height: 70px;
	padding-top: 12px;
	padding-right: 0;
	font-size: 1.5rem;
	border-top: 1px solid #ccc !important;
	border-right: 1px solid #ccc !important;
	border-left: 1px solid #ccc !important;
	border-bottom-width: 5px;
	border-radius: 0;
	background: linear-gradient(#fff 70%, #eff1ef 100%);
}

#course #course_list li a::after {
	display: none;
}
#course #course_list li.course_tsushinsei a {
	padding-top: 12px;
	font-size: 1.5rem;
}
#course #course_list li.course_nenrei a {
	padding-top: 12px;
	font-size: 1.5rem;
}
#course #course_list li a strong {
	font-size: 2rem;
}

@media (max-width: 480px) {
	#course {
		padding-bottom: 10px;
	}
	#course #course_list li.course_online a,
	#course #course_list li.course_tsushinsei a,
	#course #course_list li.course_nenrei a {
		font-size: 4vw;
	}
	#course #course_list li.course_tsushinsei a {
		padding-top: 5px;
		font-size: 1.3rem;
	}
	#course #course_list li.course_nenrei a {
		padding-top: 12px;
		font-size: 1.3rem;
	}
	#course #course_list li a strong {
		font-size: 5vw;
	}
}


/* ダブル教育
--------------------------------------------------------- */
#wt {
	background: none;
	padding: 25px 10px;
}

#wt_link {
	display: none;
}

#wt_link_sp {
	display: block;
}

/* ダブル教育バナー */
#wt_link_sp .bnr_wteachers {
	margin-bottom : 10px;
	padding-top: 10px;
	text-align: center;
	background-color: #fff211;
	border-radius: 4px;
}
#wt_link_sp .bnr_wteachers a {
	font-size: 4vw;
	font-weight: bold;
	color: #333;
	text-decoration: none;
}
#wt_link_sp .bnr_wteachers a span {
	font-size: 5.2vw;
}

/* クラス授業・55バナー */
#w_teachers_nav {
	display: flex;
	justify-content: space-between;
}
#w_teachers_nav li{
	width: 49%;
/*	margin-bottom: 2%;*/
}
/*#w_teachers_nav li:last-child{
	width: 100%;
	margin-bottom: 0;
}*/



/* トピックス
--------------------------------------------------------- */
#topics {
	padding-top: 15px;
	padding-bottom: 15px;
	background-color: #fff104;
	background-image: none;
}

#topics .ttl {
	height: auto;
	margin-bottom: 10px;
	padding: 0 0 0 5px;
	font-size: 2rem;
	font-weight: bold;
	color: #0e357f;
	text-align: left;
}


/* 一覧型トピックス */
#topics .topics_list_area.sponly {
	display: block;
}
#topics .topics_list_area.pctbonly {
	display: none;
}

#topics .topics_list_area {
	margin-bottom: 0;
	padding: 0;
	border: 0;
	background-color: #fff;
}
#topics .topics_list_area .topics_list {
	margin-bottom: 0;
	border-radius: 4px 4px 0 0;
}
#topics .topics_list_area .topics_list li {
	width: 100%;
	max-width: none;
	margin-bottom: 0;
	padding: 10px;
	border: 0;
	border-bottom: 1px solid #ccc;
	box-shadow: none;
	border-radius: 0;
}
#topics .topics_list_area .topics_list li.new::after {
	display: none;
}
#topics .topics_list_area .topics_list li.photo {
	display: block;
}
#topics .topics_list_area .topics_list li p {
	display: none;
}
#topics .topics_list_area .topics_list li p.notice {
	/* リンクのないお知らせなど */
	display: block;
}
#topics .topics_list_area .topics_list li a {
	width: 100%;
}
#topics .topics_list_area .topics_list li h3 {
	width: 100%;
	padding: 0;
	display: inline-block;
	font-size: 1.6rem;
	font-weight: normal;
	background-position: top 50% right 0;
}
#topics .topics_list_area .topics_list li h3 a {
	background-position: top 50% right 0;
}
#topics .topics_list_area .topics_list li.new h3::after {
	display: none;
}
#topics .topics_list_area .topics_list li.new h3::before {
	display: none;
}
#topics .topics_list_area .topics_list li.new h3 strong::after {
	position: static;
	display: inline;
	content: "NEW";
	text-align: center;
	vertical-align: middle;
	background-color: #ffed00;
	margin-left: 5px;
	padding: 1px 5px;
	font-size: 0.9rem;
	font-weight: normal;
	/*vertical-align: baseline;*/
	background-image: none;
	animation: blink 2s step-end infinite;
}
@keyframes blink {
	0% {opacity: 1;}
	50% {opacity: 0;}
	100% {opacity: 1;}
}

/* もっと見るボタン */
#topics .topics_list_area .display-more-button {
	padding: 0 0 5px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}
#topics .topics_list_area .display-more-button a {
	margin-top: 5px;
	padding: 7px 10px 20px;
	color: #0e357f;
	border: 0;
	background-color: transparent;
}
#topics .topics_list_area .display-more-button a::after {
	display: none;
}
#topics .topics_list_area .display-more-button.open a::after {
	bottom: 0;
}
#topics .topics_list_area .display-more-button a:hover {
	color: #0e357f;
	background-color: transparent;
}
#topics .topics_list_area .display-more-button a:hover::after {
	border-top: 4px solid #0e357f;
	border-right: 4px solid #0e357f;
}


/* ボックス型トピックス */
#topics .topics_box_list {
	display: none;
}



/* 合格体験記
--------------------------------------------------------- */
#exp {
	padding: 0 0 30px;
	background: none;
}
#exp .wrapper {
	padding: 0;
}
#exp .lead_txt {
	margin-bottom: 20px;
	color: #0e357f;
	font-weight: bold;
}

#exp .deco {
	display: none;
}

#exp #exp_list {
	padding: 0 10px;
}
#exp_list li.exp_list_long {
	max-height: none;
}

#exp_list li a.exp_soku_bnr {
	border: 0;
}
#exp_list li a.exp_soku_bnr .pc {
	display: none;
}
#exp_list li a.exp_soku_bnr .sp {
	display: block;
}

#exp_list li .exp_img {
	width: 200px;
}
#exp_list li a .exp_right {
	padding: 15px;
	width: calc(100% - 200px);
}

@media (max-width: 480px) {
	#exp .lead_txt {
		font-size: 1.8rem;
	}
	
	#exp_list li .exp_img {
		width: 160px;
		object-fit: cover;
		margin-left: -40px;
	}
	#exp_list li .exp_img img {
		width: 200px;
	}
	#exp_list li a .exp_right {
		width: auto;
		background-color: #fff;
		z-index: 100;
	}
}

/* 環境設備＆サポート
--------------------------------------------------------- */
#env {
	padding: 0 0 30px;
}
#env .ttl {
	margin-bottom: 20px;
}
#env .env_list + h2 {
	margin-top: 30px;
}

#env .lead_txt {
	display: none;
}

#env .env_list {
	padding: 0 10px;
}

#env .env_list li a .env_ttl {
	margin-top: 5px;
}

#env .env_list.support li a .env_ttl {
	font-size: 1.5rem;
}


/* 校舎案内
--------------------------------------------------------- */
#map {
}



/* 早わかり動画紹介
--------------------------------------------------------- */
#dvd_area {
	display: none;
}

#dvd_area_sp {
	display: block;
}

#dvd_area_sp .dvd_area_sp {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 25px;
	padding-bottom: 35px;
}


/* リンク集
--------------------------------------------------------- */
.relatedlink {
	padding: 0 0 30px;
}
.relatedlink .wrapper {
	padding-left: 0;
	padding-right: 0;
}

.relatedlink #cm_ttl {
	display: block;
	margin-bottom: 20px;
}

.relatedlink .cm_list,
.relatedlink .sns_list {
	width: 94%;
	margin: 0 auto;
}
.relatedlink .cm_list {
	display: block;
}
.relatedlink .cm_list li {
	margin-bottom: 30px;
}
.relatedlink .sns_list li {
	padding: 0 10px;
}


@media (max-width: 480px) {
	.relatedlink .univ_list {
		display: block;
		margin-bottom: 40px;
	}
	.relatedlink .univ_list li {
		width: 100%;
	}

}


.relatedlink .related_list {
	width: 94%;
	margin: 0 auto;
}
.relatedlink .related_list li {
	margin-bottom: 15px;
}
@media (max-width: 480px) {
	.relatedlink .related_list {
		display: block;
	}
	.relatedlink .related_list li {
		width: 100%;
		text-align: center;
		max-width: none;
	}
}


/* 四谷学院とは
--------------------------------------------------------- */
#about {
}



/* 相談会＆パンフレット
--------------------------------------------------------- */
@media (max-width: 480px) {
	.info_area {
		padding: 0;
		margin: 0;
	}
	.info_area .info_items {
		margin-bottom: 0;
	}
	.info_area li {
		padding-top: 10px;
		padding-bottom: 30px;
	}
	.info_area li:first-child {
		margin-bottom: 15px;
		padding-bottom: 20px;
	}
}

/* ================================================================
 フッター
================================================================ */