/* 全体設定 */

span.bold{
	font-weight: 600;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    max-width: 1280px;
    margin: auto;
}

main {
    width: calc(100% - 320px);
    max-width: 980px;
}

@media screen and (min-width: 1201px){
	main {
		margin-right: 20px;
	}
}

@media screen and (max-width: 1200px){
	main {
		width: 100%;
		max-width: 1200px;
	}
}

aside {
    width: 300px;
	margin: 25px 0;
}

@media screen and (max-width: 1200px){
	aside {
		width: 100%;
		margin: 0;
	}
}

@media screen and (max-width: 1200px){
	aside.ddtop{
		display: none;
	}
	
	aside .side_search{
		display: none;
	}
}

/* ヘッダーナビ */
.site-header .head_h1 {
    background: #0693e3;
	padding: 5px 0;
}

@media screen and (max-width: 640px){
	.site-header .head_h1 {
		padding: 1px 0;
	}
}

.site-header .head_h1 h1,
.site-header .head_h1 p{
	font-size: 12px;
	line-height: 12px;
    color: #fff;
	margin: 0;
	display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media screen and (max-width: 640px){
	.site-header .head_h1 h1,
	.site-header .head_h1 p{
		font-size: 10px;
	}
}

.site-header a.site-logo{
	float: left;
}

.site-header a img{
	display: block;
	max-width: 200px;
	max-height: 40px;
	margin-top: 5px;
}

@media screen and (max-width: 990px){
	.site-header a img{
		max-width: 180px;
	}
}

@media screen and (max-width: 780px){
	.site-header a img{
		max-width: 140px;
		margin-top: 7px;
	}
}

.site-header nav {
    width: calc(100% - 320px);
    max-width: 600px;
    float: right;
	padding: 3px 5px;
}

@media screen and (max-width: 990px){
	.site-header nav {
		width: calc(100% - 220px);
	}
}

@media screen and (max-width: 780px){
	.site-header nav {
		display: none;
	}
}

.site-header nav ul{
	display: flex;
	flex-wrap: wrap;
}

.site-header nav ul li{
	position: relative;
	width: calc(100% / 5);
}

.site-header nav ul li::before{
	content: "";
    background-color: rgba(47, 122, 198, 0.3);
    position: absolute;
    width: 1px;
    height: 30px;
    top: calc(50% - 15px);
    left: -1px;
    z-index: 1;
}

.site-header nav ul li:first-child::before{
	display: none;
}

.site-header nav ul li a {
    display: block;
	font-size: 14px;
    text-align: center;
	color: #2f7ac6;
    padding: 10px 6px;
	transition: 0.3s;
}

@media screen and (max-width: 990px){
	.site-header nav ul li a {
		padding: 3px;
	}
}

.site-header nav ul li a:hover{
	color: #fff;
	background: #2f7ac6;
	transition: 0.3s;
}

/* メインビジュアル */
header.mv{
	background-image: url(/img/top_mv.jpg);
	background-size: cover;
    background-position: center;
}

header.mv .shadow{
	display: flex;
	position: relative;
	max-width: 1280px;
	/* background: rgba(13, 80, 131, 0.7); */
	padding: 5rem 0;
	align-items: center;
}

@media screen and (max-width: 800px){
	header.mv .shadow{
		padding: 3rem 10px;
	}
}

@media screen and (max-width: 640px){
	header.mv .shadow{
		padding: 3rem 10px 2rem;
	}
}

header.mv .catch{
	position: relative;
	width: 65%;
}

@media screen and (max-width: 640px){
	header.mv .catch{
		width: 100%;
	}
}

header.mv .catch p.txt{
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 50px;
	color: #0d5083;
    margin: 0;
	text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff;
}

@media screen and (max-width: 990px){
	header.mv .catch p.txt{
		font-size: 18px;
		line-height: 40px;
	}
}

@media screen and (max-width: 760px){
	header.mv .catch p.txt{
		font-size: 14px;
		font-weight: 600;
		line-height: 30px;
	}
}

header.mv .catch p.txt span{
	font-size: 30px;
	color: #ec6c00;
    vertical-align: bottom;
}

@media screen and (max-width: 990px){
	header.mv .catch p.txt span{
		font-size: 24px;
	}
}

@media screen and (max-width: 760px){
	header.mv .catch p.txt span{
		font-size: 18px;
	}
}

header.mv .catch p.status {
	animation: colors 3s ease 1s infinite forwards;
    position: absolute;
    top: -40px;
    font-size: 14px;
    line-height: 1;
    padding: 8px 20px;
    color: #fff;
    background: #32ab7f;
    border-radius: 30px;
}

@media screen and (max-width: 640px){
	header.mv .catch p.status {
		top: -32px;
		padding: 6px 16px;
	}
}

header.mv .catch p.status span{
	font-weight: 600;
	color: #ffff00;
	margin: 0 2px;
}

/* リード文 */
section.lead {
    margin-top: 40px;
}

@media screen and (max-width: 640px){
	section.lead {
		margin-top: 30px;
	}
	
	section.lead .wrap{
		padding: 0;
	}
}

section.lead .box {
    position: relative;
    border: 1px solid #ec6c00;
	border-radius: 10px;
    padding: 30px 20px 0;
	background-image: url(/img/lead_image2.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}

@media screen and (max-width: 640px){
	section.lead .box {
		border: none;
		border-radius: 0;
		background-image: url(/img/lead_image3.jpg);
		background-size: cover;
	}
}

section.lead .box h2 {
    position: absolute;
    width: 300px;
    top: -20px;
    left: calc(50% - 150px);
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    line-height: 36px;
    text-align: center;
	background: linear-gradient(to right, #ec6c00, #f5ad71, #ec6c00);
    border-radius: 10px;
    padding: 2px;
}

@media screen and (max-width: 640px){
	section.lead .box h2 {
		width: 100%;
		text-align: left;
		left: 0;
		padding: 0 10px 0 25px;
		border-radius: 0;
	}
	
	section.lead .box h2 span{
		font-size: 16px;
		line-height: 2;
	}
	
	section.lead .box h2::after {
		content: "▶";
		position: absolute;
		left: 5px;
		top: 0;
		font-size: 16px;
		color: #fff;
		transition: 0.3s;
	}
}

section.lead .box p {
	font-size: 14px;
	text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}

section.lead .box p span{
	color: #0d5083;
	font-weight: 600;
}

/* TOPランキング */
.ranking {
	margin-bottom: 20px;
}

.ranking h2.top {
    position: relative;
	background: linear-gradient(45deg, #0693e3, #52a7dd, #e1f3ff);
    border: 2px solid #2f7ac6;
    border-radius: 10px;
	margin-top: 50px;
    padding: 5px 10px 5px 100px;
}

@media screen and (max-width: 640px){
	.ranking h2.top {
		line-height: 36px;
    	font-size: 18px;
		background: #2f7ac6;
		padding: 0 10px 0 25px;
		border: 1px solid #2f7ac6;
		border: none;
    	border-radius: 0;
	}
}

.ranking h2.top::before {
	content: "";
    position: absolute;
	background: url(/img/ranking.svg);
    width: 90px;
    height: 100px;
    left: 0;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
	z-index: 1;
}

@media screen and (max-width: 640px){
	.ranking h2.top::before {
		width: 72px;
    	height: 80px;
    	right: 5px;
    	left: unset;
	}
}

@media screen and (min-width: 641px){
	.ranking h2.top::after {
		content: "";
		position: absolute;
		top: 3px;
		left: 3px;
		right: 3px;
		bottom: 3px;
		border: 1px dashed #ffffff;
		border-radius: 10px;
	}
}
@media screen and (max-width: 640px){
	.ranking h2.top::after {
		content: "▶";
		position: absolute;
		left: 5px;
		top: 0;
		font-size: 16px;
		color: #fff;
		transition: 0.3s;
	}
}

.ranking h2.top span{
	width: 100%;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    line-height: 2;
	z-index: 10;
    text-shadow: 2px 2px 2px #0d5083;
}

@media screen and (max-width: 640px){
	.ranking h2.top span{
		font-size: 16px;
		text-shadow: none;
	}
}

.ranking ul{
	list-style: none;
}

.ranking ul li.school_list{
	display: flex;
	position: relative;
	flex-wrap: wrap;
	border: 1px solid #9fb7cf;
	margin-bottom: 10px;
	border-radius: 10px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
	overflow: hidden;
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list{
		border-radius: 5px;
	}
}

.ranking ul li.school_list.hidden {
	display: none;
}

.ranking ul li.school_list .left {
    display: flex;
    width: 200px;
    align-items: center;
	padding: 10px;
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list .left {
		width: 120px;
		padding: 5px;
	}
}

.ranking ul li.school_list figure img {
    width: 100%;
	border: 1px solid #ccc;
	transition: 0.3s;
}

.ranking ul li.school_list figure img:hover {
	opacity: 0.7;
    transition: 0.3s;
}

.ranking ul li.school_list .right {
	position: relative;
	width: calc(100% - 200px);
	padding: 0.3rem 1rem;
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list .right {
		width: calc(100% - 120px);
		padding: 5px 5px 5px 0;
	}
}

.ranking ul li.school_list .right h2 {
	position: relative;
    font-size: 20px;
    font-weight: 600;
    color: #0d5083;
    padding: 5px 0;
	margin: 0;
	border-bottom: 1px solid #9fb7cf;
	transition: 0.3s;
}

.ranking ul li.school_list .right h2:hover {
	color: #0693e3;
	transition: 0.3s;
}

@media screen and (min-width: 641px){
	.ranking ul li.school_list a.sp_only{
		display: none;
	}
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list a.pc_only{
		display: none;
	}
	
	.ranking ul li.school_list a.sp_only{
		width: 100%;
		display: block;
	}
	
	.ranking ul li.school_list a.sp_only h2 {
		position: relative;
		font-size: 18px;
		font-weight: 600;
		color: #0d5083;
		background: #eaf7ff;
		padding: 5px 10px;
		border-bottom: 1px solid #9fb7cf;
		margin: 0;
	}
}

.ranking ul li.school_list .right .feature {
	padding: 5px 0;
	align-items: flex-start;
}

@media screen and (max-width: 800px){
	.ranking ul li.school_list .right .feature {
		padding: 2px 0;
	}
}

.ranking ul li.school_list .feature{
	display: flex;
	width: 100%;
	padding: 5px;
}

@media screen and (max-width: 990px){
	.ranking ul li.school_list .feature{
		display: block;
	}
}

.ranking ul li.school_list .feature table{
	width: 50%;
	margin: 0;
}

@media screen and (max-width: 990px){
	.ranking ul li.school_list .feature table{
		width: 100%;
	}
}

.ranking ul li.school_list .feature table tr{
	display: block;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-bottom: 3px;
	overflow: hidden;
}

.ranking ul li.school_list .feature table tr:first-child{
	border: 2px solid #8ed1fc;
}

.ranking ul li.school_list .feature table tr:last-child{
	margin-bottom: 0;
}

.ranking ul li.school_list .feature table th,
.ranking ul li.school_list .feature table td{
	padding: 3px;
	vertical-align: middle;
}

.ranking ul li.school_list .feature table th{
	width: 100px;
	font-size: 14px;
    text-align: center;
    background: #eee;
    white-space: nowrap;
}

.ranking ul li.school_list .feature table tr:first-child th{
	color: #0d5083;
	background: #ddf2ff;
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list .feature table th{
		width: 70px;
		font-size: 0.8rem;
		padding: 2px 5px;
	}
}

.ranking ul li.school_list .feature table td{
	width: calc(100% - 100px);
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list .feature table td{
		width: calc(100% - 70px);
		padding: 2px 5px;
	}
}

.ranking ul li.school_list .feature .target span,
.ranking ul li.school_list .feature .service span{
	display: flex;
	font-size: 14px;
	font-weight: 600;
	color: #0d5083;
	padding: 0 5px;
	margin: 0 0 0 5px;
	border-radius: 5px;
}

@media screen and (max-width: 990px){
	.ranking ul li.school_list .feature .target span,
	.ranking ul li.school_list .feature .service span{
		font-size: 12px;
		padding: 2px;
		margin: 0 0 0 2px;
	}
}

@media screen and (max-width: 800px){
	.ranking ul li.school_list .feature .target span,
	.ranking ul li.school_list .feature .service span{
		padding: 2px 4px;
		margin: 0 2px;
	}
}

.ranking ul li.school_list .feature .target span.jr{
	background: #ffe8ee; /* 小学生アイコン */
}

.ranking ul li.school_list .feature .target span.jh{
	background: #def3ff; /* 中学生アイコン */
}

.ranking ul li.school_list .feature .target span.hs{
	background: #ffefe5; /* 高校生アイコン */
}

.ranking ul li.school_list .feature .target span.checkoff{
	color: #fff;
	background: #eee; 
}

.ranking ul li.school_list .feature .service span.ico-line{
	background: #00b300; /* LINE相談アイコン */
}

.ranking ul li.school_list .feature .service span.ico-tel{
	background: #0d5083; /* 電話相談アイコン */
}

.ranking ul li.school_list .feature .service span.ico-trial{
	background: #f78da7; /* 無料体験アイコン */
}

@media screen and (min-width: 641px){
	.ranking ul li.school_list .sp_only{
		display: none;
	}
}

.ranking ul li.school_list p.target{
	display: flex;
	align-items: center;
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list p.target{
		padding-left: 5px;
	}
}

.ranking ul li.school_list p.hstar,
.ranking ul li.school_list p.hnumber{
	display: inline-block;
	margin: 0;
	vertical-align: middle;
}

.ranking ul li.school_list p.hstar{
	font-size: 16px;
	color: #0693e3;
	padding: 0 0 0 5px;
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list p.hstar{
		font-size: 16px;
	}
}

.ranking ul li.school_list td.stars .flex {
	align-items: center;
}

.ranking ul li.school_list td.stars img{
	display: inline-block;
	width: 20px;
	vertical-align: sub;
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list td.stars img{
		width: 20px;
		margin: 0;
	}
}

@media screen and (max-width: 400px){
	.ranking ul li.school_list td.stars img{
		width: 18px;
	}
}

.ranking ul li.school_list p.hstar span{
	color: #ccc;
}

.ranking ul li.school_list p.hnumber{
	font-size: 14px;
	line-height: 26px;
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list p.hnumber{
		font-size: 12px;
	}
}

.ranking ul li.school_list p.price {
    font-weight: 600;
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list p.price {
		font-size: 0.8rem;
	}
}

.ranking ul li.school_list p.price span {
    font-size: 16px;
    color: #32ab7f;
    padding: 0 5px 0 10px;
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list p.price span {
		font-size: 1rem;
	}
}

.ranking ul li.school_list p.price span.none {
	color: #999;
}

.ranking ul li.school_list .btn{
	width: 100%;
    display: flex;
    flex-wrap: wrap;
	padding: 10px;
	background: #eaf7ff;
}

@media screen and (min-width: 901px){
	.ranking ul li.school_list .btn{
		width: 40%;
		position: absolute;
		top: 6px;
    	right: 14px;
		padding: 0;
		background: none;
	}
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list .btn{
		padding: 0 3px 3px;
		background: #fff;
	}
}

.ranking ul li.school_list .btn a.link,
.ranking ul li.school_list .btn a.detail,
.ranking ul li.school_list .btn p.noweb{
	width: 49%;
    text-align: center;
	margin: auto;
    padding: 8px;
	color: #fff;
	border: 1px solid;
	border-radius: 5px;
	transition: 0.3s;
}

@media screen and (min-width: 901px){
	.ranking ul li.school_list .btn a.link,
	.ranking ul li.school_list .btn a.detail,
	.ranking ul li.school_list .btn p.noweb{
		padding: 3px;
		border: none;
	}
}

@media screen and (max-width: 990px){
	.ranking ul li.school_list .btn a.link,
	.ranking ul li.school_list .btn a.detail,
	.ranking ul li.school_list .btn p.noweb{
		font-size: 0.9rem;
		padding: 5px;
	}
}

.ranking ul li.school_list .btn a.detail{
	background: linear-gradient(to bottom, #71b1ff, #3573b3);
}

.ranking ul li.school_list .btn a.link{
	background: linear-gradient(to bottom, #f5c7a1, #e17b33);
}

.ranking ul li.school_list .btn p.noweb{
	background: #eee;
}

.ranking ul li.school_list .btn a.link span,
.ranking ul li.school_list .btn a.detail span,
.ranking ul li.school_list .btn p.noweb span{
	position: relative;
	font-size: 14px;
    font-weight: 600;
	padding: 3px 3px 3px 20px;
	line-height: 20px;
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list .btn a.link span,
	.ranking ul li.school_list .btn a.detail span,
	.ranking ul li.school_list .btn p.noweb span{
		padding-left: 20px;
	}
}

.ranking ul li.school_list .btn a.link span:before,
.ranking ul li.school_list .btn a.detail span:before,
.ranking ul li.school_list .btn p.noweb span:before{
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
	top: calc(50% - 8px);
    left: 0;
    background-image: url(/img/arrow.svg);
    background-repeat: no-repeat;
    background-size: cover;
	transition: 0.3s;
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list .btn a.link span:before,
	.ranking ul li.school_list .btn a.detail span:before,
	.ranking ul li.school_list .btn p.noweb span:before{
		width: 16px;
		height: 16px;
		top: calc(50% - 8px);
		background-size: 16px;
	}
}

.ranking ul li.school_list p.price,
.ranking ul li.school_list p.target,
.ranking ul li.school_list p.service,
.ranking ul li.school_list p.description{
	margin: 0;
}

.ranking ul li.school_list .right p.description{
	font-size: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
	margin: 5px 0;
}

@media screen and (max-width: 990px){
	.ranking ul li.school_list .right p.description{
		display: none;
	}
}

.ranking ul li.school_list .bottom{
	width: 100%;
	padding: 10px;
}

@media screen and (min-width: 991px){
	.ranking ul li.school_list .bottom{
		display: none;
	}
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list .bottom{
		padding: 0 5px 5px;
	}
}

@media screen and (max-width: 990px){
	.ranking ul li.school_list .bottom p.description{
		font-size: 0.9rem;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

.ranking ul li.school_list .btn a.link:hover{
	background: linear-gradient(to bottom, #fff7f1, #ffe5d2);
	color: #a3531b;
	transition: 0.3s;
}

.ranking ul li.school_list .btn a.detail:hover{
	background: linear-gradient(to bottom, #f4f9ff, #c9dff7);
	color: #0d5083;
	transition: 0.3s;
}

.ranking ul li.school_list .btn a.detail:hover span:before{
	background-image: url(/img/arrow2.svg);
	transform: rotate(90deg);
	transition: 0.3s;
}

.ranking ul li.school_list .btn a.link:hover span:before{
	background-image: url(/img/arrow3.svg);
	transform: rotate(90deg);
	transition: 0.3s;
}

.ranking ul li.school_list .specright{
	width: calc(50% - 10px);
}

@media screen and (max-width: 990px){
	.ranking ul li.school_list .specright{
		display: none;
	}
}

.ranking ul li.school_list dl{
	display: flex;
    width: 100%;
    margin: 10px 0 0 10px;
    border: 1px solid #52a7dd;
    border-radius: 5px;
	overflow: hidden;
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list dl{
		margin: 3px 0 0;
	}
}

.ranking ul li.school_list dl dt{
	width: 33%;
	color: #fff;
	background: #52a7dd;
	text-align: center;
}

.ranking ul li.school_list dl dd{
	width: 67%;
	color: #0d5083;
	margin: 0;
}

.ranking ul li.school_list dl dt,
.ranking ul li.school_list dl dd{
	font-size: 14px;
	padding: 5px;
}

@media screen and (max-width: 990px){
	.ranking ul li.school_list dl dt,
	.ranking ul li.school_list dl dd{
		font-size: 12px;
	}
}

.ranking ul li.school_list dl dt{
	display: flex;
    align-items: center;
    justify-content: center;
}

.ranking ul li.school_list ul.spec3{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-left: 10px;
}

@media screen and (max-width: 990px){
	.ranking ul li.school_list .bottom ul.spec3,
	.ranking ul li.school_list .bottom dl{
		width: 100%;
		margin-left: 0;
	}
}

@media screen and (min-width: 991px){
	.ranking ul li.school_list .bottom ul.spec3{
		display: none;
	}
}

.ranking ul li.school_list ul.spec3 li{
	width: calc(100% / 3 - 2px);
	    margin: 0 0 2px 2px;
}

.ranking ul li.school_list ul.spec3 li:first-child,
.ranking ul li.school_list ul.spec3 li:nth-child(4){
	width: calc(100% / 3);
	margin: 0 0 2px 0;
}

.ranking ul li.school_list ul.spec3 li span {
    display: block;
    font-size: 14px;
    text-align: center;
    padding: 2px;
    border: 1px solid;
	border-radius: 5px;
}

@media screen and (max-width: 640px){
	.ranking ul li.school_list ul.spec3 li span {
		font-size: 12px;
	}
}

.ranking ul li.school_list ul.spec3 li span.checkon {
	color: #0d5083;
}

.ranking ul li.school_list ul.spec3 li span.checkoff {
	color: #ccc;
}

.ranking a.more,
.pickup a.more{
    display: block;
    max-width: 500px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #0d5083;
    background: #eaf7ff;
    margin: 20px auto;
    padding: 5px;
    border: 1px solid;
    border-radius: 30px;
	transition: 0.3s;
}

@media screen and (max-width: 640px){
	.ranking a.more,
	.pickup a.more{
		max-width: 100%;
		font-size: 14px;
		padding: 5px;
		border-radius: 5px;
	}
}

.ranking a.more span,
.pickup a.more span{
	position: relative;
}

.ranking a.more span::before,
.pickup a.more span::before,
.ranking a.more span::after,
.pickup a.more span::after{
	content: "";
    position: absolute;
    top: calc(50% - 6px);
    width: 12px;
    height: 12px;
	border-top: 2px solid #0d5083;
    border-right: 2px solid #0d5083;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
	transition: 0.3s;
}

@media screen and (max-width: 640px){
	.ranking a.more span::before,
	.pickup a.more span::before,
	.ranking a.more span::after,
	.pickup a.more span::after{
		top: calc(50% - 4px);
    	width: 8px;
    	height: 8px;
	}
}

.ranking a.more span::before,
.pickup a.more span::before{
	left: -24px;
}

@media screen and (max-width: 640px){
	.ranking a.more span::before,
	.pickup a.more span::before{
		left: -16px;
	}
}

.ranking a.more span::after,
.pickup a.more span::after {
    left: -30px;
}

@media screen and (max-width: 640px){
	.ranking a.more span::after,
	.pickup a.more span::after{
		left: -22px;
	}
}

.ranking a.more:hover,
.pickup a.more:hover{
	color: #fff;
	background: #0d5083;
	transition: 0.3s;
}

.ranking a.more:hover span::before,
.ranking a.more:hover span::after,
.pickup a.more:hover span::before,
.pickup a.more:hover span::after{
	border-top: 2px solid #fff;
    border-right: 2px solid #fff;
	transition: 0.3s;
}

.ranking a.more:hover span::before,
.pickup a.more:hover span::before{
	left: -20px;
}

.ranking a.more:hover span::after,
.pickup a.more:hover span::after{
	left: -26px;
}

/* 絞り込み検索用 */
h1.search_name {
    font-size: 24px;
	font-weight: 600;
    color: #0d5083;
    margin: auto;
    padding: 25px 0 0;
    border-bottom: 1px solid #ccc;
}

@media screen and (mIN-width: 641px){
	h1.search_name {
		margin-right: 10px;
		margin-left: 10px;
	}
}

@media screen and (max-width: 640px){
	h1.search_name {
		font-size: 16px;
		text-align: center;
		color: #fff;
		background: #0693e3;
		padding: 10px 0;
		border-bottom: none;
	}
}

h1.osusume_name {
    font-size: 24px;
	font-weight: 600;
    color: #0d5083;
    max-width: 960px;
    margin: 0 auto 20px;
    padding: 20px 0 0;
    border-bottom: 1px solid #ccc;
}

@media screen and (max-width: 640px){
	h1.osusume_name {
		font-size: 16px;
		text-align: center;
		color: #fff;
		background: #0693e3;
		padding: 5px;
		border-bottom: none;
	}
}

p.listing {
    background: #eaf7ff;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #52a7dd;
}

@media screen and (max-width: 640px){
	p.listing {
		font-size: 14px;
	}
}

@media screen and (max-width: 485px){
	p.listing {
		font-size: 12px;
	}
}

p.listing span {
	font-weight: 600;
	color: #ec6c00;
}

p.hits {
	border-bottom: 1px solid #ccc;
}

p.hits span{
	color: #ec6c00;
	font-size: 24px;
	font-weight: 600;
	margin-right: 5px;
}

@media screen and (max-width: 640px){
	p.hits span{
		font-size: 20px;
	}
}

.ranking ul.top_margin{
	margin-top: 20px;
}

/* 運営者情報 */
#company01{
	margin-top: 20px;
}

#company01 .comp_dl {
    display: table;
    table-layout: fixed;
    width: 100%;
}

#company01 dt {
    width: 150px;
    margin-left: 0;
	color: #0d5083;
    background: #eaf7ff;
}

#company01 dd a{
	color: #2f7ac6;
}

#company01 dd a:hover{
	color: #e36a87;
    transition: 0.3s;
}

.comp_dl dd,
.comp_dl dt {
    display: table-cell;
    vertical-align: middle;
	font-size: 14px;
	padding: 10px;
	border-bottom: 1px solid #52a7dd;
}

@media screen and (max-width: 640px){
	.comp_dl dd,
	.comp_dl dt {
		font-size: 12px;
	}
}

/* プライバシーポリシー */
.privacy {
	margin-top: 20px;
}

.privacy p.head {
	font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    color: #0d5083;
    background: #eaf7ff;
}

@media screen and (max-width: 640px){
	.privacy p.head {
		font-size: 16px;
	}
}

.privacy h2{
	font-size: 24px;
	color: #2f7ac6;
	padding: 10px 0 0;
    border-bottom: 1px solid;
}

@media screen and (max-width: 640px){
	.privacy h2{
		font-size: 18px;
	}
}

.privacy h3{
	font-size: 20px;
	color: #fff;
	background: #2f7ac6;
	padding: 5px;
}

@media screen and (max-width: 640px){
	.privacy h3{
		font-size: 16px;
	}
}

.privacy p{
	font-size: 14px;
}

@media screen and (max-width: 640px){
	.privacy p{
		font-size: 12px;
	}
}

.privacy p a{
	color: #ec6c00;
	font-weight: 600;
	text-decoration: underline;
	transition: 0.3s;
}

.privacy p a:hover{
	color: #ed8c47;
	transition: 0.3s;
}

.privacy ol {
	font-size: 14px;
    list-style: decimal;
    margin-left: 30px;
	margin-bottom: 20px;
}

@media screen and (max-width: 640px){
	.privacy ol {
		font-size: 12px;
	}
}

.privacy ol li:not(:last-child){
	margin-bottom: 1rem;
}

/* お問い合わせフォーム */
.contact table {
	width: 100%;
    margin: 20px auto 0;
}

.contact table tr{
	border: none;
}

.contact table th,
.contact table td {
    border: 1px solid #2f7ac6;
    padding: 10px;
}

.contact table th {
    width: 30%;
    font-size: 16px;
    font-weight: 600;
    background: #eaf7ff;
    color: #0d5083;
}

@media screen and (max-width: 640px){
	.contact table th {
		display: block;
    	width: 100%;
    	font-size: 14px;
    	border-bottom: none;
	}
	
	.contact table tr:first-child th {
    	border-top: 2px solid #2f7ac6;
	}
}

.contact table td {
    width: 70%;
    font-size: 16px;
}

@media screen and (max-width: 640px){
	.contact table td {
		display: block;
    	width: 100%;
    	font-size: 14px;
	}
}

.contact table th.required {
    padding: 10px;
}

.contact .btn_area {
    width: 70%;
    margin: 30px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 640px){
	.contact .btn_area {
		width: 100%;
		display: block;
	}
}

.mwform-checkbox-field.horizontal-item, .mwform-radio-field.horizontal-item {
    display: block;
}

.mw_wp_form .horizontal-item + .horizontal-item{
	margin-left: 0!important;
}

.mwform-tel-field input[type="text"],
.mwform-zip-field input[type="text"] {
    display: inline-block;
    width: auto;
}

.contact .btn_area input,
.shomei .btn_area input {
    width: 100%;
    border: none;
    background: #2f7ac6;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 15px 0;
	line-height: 16px;
}

.contact .btn_area input {
	max-width: 450px;
	margin: 0 20px;
}

.shomei .btn_area input {
	max-width: 300px;
	margin-right: auto;
}

@media screen and (max-width: 640px){
	.contact .btn_area input,
	.shomei .btn_area input {
		max-width: 100%;
		font-size: 14px;
    	padding: 10px 0;
    	margin: 0 auto 10px;
	}
}

.contact .btn_area input[type="reset"] {
    background: #ed8c47;
	appearance: button;
	box-sizing: border-box;
    cursor: pointer;
}

.mw_wp_form .description .box{
	border: 1px dashed #0693e3;
	margin: 20px auto 0;
	padding: 20px;
}

@media screen and (max-width: 640px){
	.mw_wp_form .description .box{
		padding: 10px;
	}
}

.mw_wp_form .description .box p{
	font-size: 14px;
}

.mw_wp_form .description .box p:last-child{
	color: #ff0000;
	margin-bottom: 0;
}

/* 確認画面以降 */
.confirm .btn_area input[type="reset"]{
	display: none;
}

.confirm .description{
	display: none;
}

.thanks h2{
	font-weight: 600;
	text-align: center;
	margin-top: 2rem;
}

.thanks p{
	text-align: center;
}

@media screen and (max-width: 768px) {
	.thanks p{
		font-size: 14px;
	}
}

.thanks a{
	display: block;
	width: 100%;
	max-width: 400px;
	text-align: center;
	margin: auto;
	padding: 10px;
	background: #2f7ac6;
    color: #fff;
	border-radius: 10px;
}

/* 固定追従お問い合わせセクション */
.foot_contact,
.foot_contact2{
	display: flex;
	position: fixed;
	z-index: 100;
}

.foot_contact a,
.foot_contact2 a{
	display: block;
	position: relative;
	overflow: hidden;
}

@media screen and (min-width: 1481px){
	.foot_contact,
	.foot_contact2{
		top: 92px;
		right: 0;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
	
	.foot_contact a,
	.foot_contact2 a{
		font-size: 24px;
		padding: 60px 16px 30px;
		margin: 5px;
		background-size: 32px;
		background-repeat: no-repeat;
		background-position: top 20px center;
		border-radius: 5px;
	}
	
	.foot_contact a:hover,
	.foot_contact2 a:hover{
		opacity: 0.6;
		transition: 0.3s;
	}
	
	.foot_contact a.tel,
	.foot_contact2 a.tel{
		color: #fff;
    	background-color: #0693e3;
		background-image: url(/img/tel_icon.svg);
	}
	
	.foot_contact a.tel_none{
		background-image: url(/img/tel_icon2.svg);
	}
	
	.foot_contact a.pamph{
		color: #fff;
		background-color: #e36a87;
		background-image: url(/img/pamph_icon.svg);
	}
	
	.foot_contact a.line{
		color: #fff;
		background-color: #32ab46;
		background-image: url(/img/line_icon.svg);
	}
}

@media screen and (max-width: 1480px){
	.foot_contact,
	.foot_contact2{
		width: 100%;
		background: rgba(64, 64, 64, 0.3);
		bottom: 0;
	}
	
	.foot_contact a{
		width: calc(50% - 20px);
		text-align: center;
		margin: 10px;
		padding: 10px;
	}
	
	.foot_contact2 a{
		width: 100%;
		text-align: center;
		margin: 10px;
		padding: 10px;
	}
	
	.foot_contact a::after,
	.foot_contact2 a::after{
    	content: '';
    	position: absolute;
    	top: -100px;
    	left: -100px;
    	width: 50px;
    	height: 50px;
    	background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
    	animation-name: shiny;
    	animation-duration: 2s;
    	animation-timing-function: ease-in-out;
    	animation-iteration-count: infinite;
	}
	
	.foot_contact a.tel_none::after{
		display: none;
	}
	
	.foot_contact a.tel,
	.foot_contact2 a.tel{
		color: #fff;
    	font-weight: 600;
    	background: -webkit-linear-gradient(top, #8ed1fc 0%, #0693e3 10%, #2f7ac6 90%, #2f7ac6 100%);
    	background: linear-gradient(to bottom, #8ed1fc 0%, #0693e3 10%, #2f7ac6 90%, #2f7ac6 100%);
    	text-shadow: 0 0px 2px #0d5083;
	}
	
	.foot_contact a.pamph{
		color: #fff;
		font-weight: 600;
    	background: -webkit-linear-gradient(top, #ffedf2 0%, #f5a5b8 10%, #d15673 90%, #cd4a69 100%);
    	background: linear-gradient(to bottom, #ffedf2 0%, #f5a5b8 10%, #d15673 90%, #cd4a69 100%);
    	text-shadow: 0 0px 2px #cd3b5e;
	}
	
	.foot_contact a.line{
		color: #fff;
		font-weight: 600;
    	background: -webkit-linear-gradient(to bottom, #76e589 0%, #32ab46 10%, #299f3d 90%, #1f772e 100%);
    	background: linear-gradient(to bottom, #76e589 0%, #32ab46 10%, #299f3d 90%, #1f772e 100%);
    	text-shadow: 0 0px 2px #cd3b5e;
	}
	
	.foot_contact a span,
	.foot_contact2 a span{
		position: relative;	
		font-size: 20px;
		padding-left: 40px;
	}
	
	.foot_contact a span:before,
	.foot_contact2 a span:before{
		content: "";
		position: absolute;
		width: 28px;
		height: 28px;
		top: calc(50% - 14px);
		left: 0;
		background-size: contain;
		background-repeat: no-repeat;
	}
	
	.foot_contact a.tel span:before,
	.foot_contact2 a.tel span:before{
		background-image: url(/img/tel_icon.svg);
	}
	
	.foot_contact a.tel_none span:before{
		background-image: url(/img/tel_icon2.svg);
	}
	
	.foot_contact a.pamph span:before{
		background-image: url(/img/pamph_icon2.svg);
	}
	
	.foot_contact a.line span:before{
		background-image: url(/img/line_icon.svg);
	}
}

@media screen and (max-width: 640px){
	.foot_contact,
	.foot_contact2{
		flex-direction: row-reverse;
		padding: 5px 2px;
	}
	
	.foot_contact a{
		width: calc(50% - 2px);
		margin: 1px;
		border-radius: 5px;
	}
	
	.foot_contact2 a{
		width: 100%;
		margin: 1px;
		border-radius: 5px;
	}
	
	.foot_contact a span,
	.foot_contact2 a span{
		font-size: 16px;
		padding-left: 30px;
		line-height: 26px;
	}
	
	.foot_contact a span:before,
	.foot_contact2 a span:before{
		width: 22px;
		height: 22px;
		top: calc(50% - 11px);
	}
}

/* キーフレーム */
@keyframes shiny {
    0% {
        transform: scale(0) rotate(25deg);
        opacity: 0;
    }

    50% {
        transform: scale(1) rotate(25deg);
        opacity: 1;
    }

    100% {
        transform: scale(50) rotate(25deg);
        opacity: 0;
    }
}

@keyframes colors {
	0% { background-color: #32ab7f; }
	50% { background-color: #52a7dd; }
	100% { background-color: #32ab7f; }
}

/* モバイル全体制御 */
@media screen and (max-width: 640px){
	.pc_only{
		display: none;
	}
}

@media screen and (min-width: 641px){
	.sp_only{
		display: none;
	}
}

/* TOPバナー */
.top_banner{
	margin: 20px 0 0;
}

@media screen and (max-width: 640px){
	.top_banner{
		margin: 10px 0 0;
	}
}

.top_banner a {
    display: block;
    text-align: center;
}

.top_banner a img {
    width: 100%;
    max-width: 800px;
    border: 1px solid #999;
    border-radius: 10px;
	transition: 0.3s;
}

@media screen and (max-width: 640px){
	.top_banner a img {
		border: none;
    	border-radius: 0;
	}
}

.top_banner img:hover{
	opacity: 0.6;
	transition: 0.3s;
}

/* ハウツー（フリースクールの選び方） */
h1.howto_back {
    font-size: 32px;
	font-weight: 600;
    text-align: center;
    color: #0d5083;
    margin: auto;
    padding: 60px 0;
    background: url(/img/howto_back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
	text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff, 0 0 6px #fff, 0 0 7px #fff, 0 0 8px #fff, 0 0 9px #fff;
}

@media screen and (min-width: 1201px){
	h1.howto_back {
		margin-top: 25px;
		border: 10px solid #eaf7ff;
	}
}

@media screen and (max-width: 640px){
	h1.howto_back {
		font-size: 24px;
		padding: 30px 0;
		background-position: center bottom -20px;
	}
}

.howto{
	margin-top: 20px;
}

@media screen and (max-width: 640px){
	.howto{
		margin-top: 0;
	}
}

@media screen and (max-width: 640px){
	.howto .wrap{
		padding-left: 0;
		padding-right: 0;
	}
}

.howto .wrap .left{
	width: 100%;
	padding: 20px;
	border: 1px solid #8ed1fc;
    border-radius: 5px;
	float: left;
	box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
}

@media screen and (max-width: 780px){
	.howto .wrap .left{
    	padding: 10px;
		border: none;
		border-radius: 0;
		box-shadow: none;
		float: none;
	}
}

.howto .left img.right {
    display: inline-block;
    width: 40%;
	max-width: 260px;
    max-height: 10%;
    float: right;
    margin: 0 0 10px 10px;
	border-radius: 10px;
	overflow: hidden;
}

.howto .left p.how{
	font-size: 14px;
}

@media screen and (max-width: 640px){
	.howto .left p.how{
		font-size: 14px;
	}
}

.howto .left p.how span{
	color: #ec6c00;
	font-weight: 600;
}

.howto .left h2.how {
    font-size: 20px;
    font-weight: 600;
    color: #0d5083;
    padding: 5px;
    background: #eaf7ff;
    border-top: 2px solid #9fb7cf;
    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
}

@media screen and (max-width: 640px){
	.howto .left h2.how {
		font-size: 18px;
	}
}

.howto .left h3.how {
    font-size: 18px;
    font-weight: 600;
    color: #0d5083;
    padding: 5px 5px 5px 10px;
    border-left: 10px solid #9fb7cf;
}

@media screen and (max-width: 640px){
	.howto .left h3.how {
		font-size: 16px;
	}
}

.howto .left ul.howlist{
	margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #32ab7f;
    border-radius: 5px;
}

@media screen and (max-width: 640px){
	.howto .left ul.howlist{
		border-radius: 5px;
	}
}

.howto .left ul.howlist li{
	position: relative;
    font-size: 14px;
    padding-left: 40px;
    padding-bottom: 5px;
    margin-bottom: 5px;
    line-height: 32px;
    border-bottom: 1px dashed #ccc;
}

@media screen and (max-width: 640px){
	.howto .left ul.howlist li{
		line-height: 26px;
		padding-left: 30px;
	}
}

.howto .left ul.howlist li::before {
    content: '';
    display: block;
    position: absolute;
    background: #005e3c;
    top: 0px;
    left: 0px;
    width: 24px;
    height: 24px;
    margin: 3px;
    border-radius: 5px;
}

@media screen and (max-width: 640px){
	.howto .left ul.howlist li::before {
		width: 20px;
    	height: 20px;
    	margin: 2px;
	}
}

.howto .left ul.howlist li::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 7px;
    width: 16px;
    height: 10px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
}

@media screen and (max-width: 640px){
	.howto .left ul.howlist li::after {
		top: 6px;
    	left: 5px;
    	width: 14px;
    	height: 8px;
	}
}

.howto .left ul.howlist li:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.howto aside.sidebar{
	width: 240px;
	margin-left: 10px;
	border: 1px solid #1f76e2;
    border-radius: 5px;
	float: left;
	box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
	overflow: hidden;
}

@media screen and (max-width: 780px){
	.howto aside.sidebar{
		display: none;
	}
}

.howto aside.sidebar h2 {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: #fff;
	margin: 0;
    padding: 5px;
    background: #1f76e2;
	border-bottom: 1px solid #eee;
}

.howto aside.sidebar h3 {
	padding: 10px;
	background: #ccc;
}

.howto aside.sidebar h3 {
    font-size: 14px;
    font-weight: 600;
	margin: 0;
    padding: 5px 10px;
    color: #0d5083;
    background: #cee3f1;
}

.howto aside.sidebar ul li{
	border-bottom: 1px dashed #9fb7cf;
	transition: 0.3s;
}

.howto aside.sidebar ul li:hover{
	background: #eee;
	transition: 0.3s;
}

.howto aside.sidebar ul li:last-child{
	border-bottom: none;
}

.howto aside.sidebar ul li a{
	display: block;
    padding: 3px;
    border-radius: 0;
	transition: 0.3s;
}

.howto aside.sidebar ul li a span {
    display: block;
    position: relative;
    font-size: 14px;
    line-height: 14px;
    color: #0d5083;
    padding: 8px 5px;
}

.howto aside.sidebar ul li a span::before {
	content: "";
    position: absolute;
    top: 10px;
    right: 5px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #0d5083;
    border-right: 2px solid #0d5083;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.howto aside.sidebar a.maplink {
    display: flex;
    width: 100%;
	height: 100px;
    font-size: 20px;
    font-weight: 600;
    color: #0d5083;
	padding: 1px;
    background-color: #c8e6f9;
    background-image: url(/img/mapback2.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
	border-top: 1px solid #1f76e2;
    line-height: 30px;
    text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff, 0 0 6px #fff, 0 0 7px #fff, 0 0 8px #fff;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.howto aside.sidebar a.maplink:hover {
    background-color: #8ed1fc;
    transition: 0.3s;
}

/* 教育支援.comとは */
.about {
	margin: 30px 0 20px;
}

@media screen and (max-width: 640px){
	.about .wrap{
		padding: 0;
	}
}

.about .box {
    border: 1px solid #32ab7f;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
}

@media screen and (max-width: 640px){
	.about .box {
		border: none;
		border-radius: 0;
	}
}

.about .box h2 {
	position: relative;
    background: #32ab7f;
    margin: 0;
    padding: 0 10px;
}

@media screen and (max-width: 640px){
	.about .box h2{
		font-size: 18px;
    	line-height: 36px;
		padding: 0 10px 0 25px;
	}
	
	.about .box h2::after {
		content: "★";
    	position: absolute;
    	left: 5px;
    	top: 0;
    	font-size: 16px;
    	color: #fff;
    	transition: 0.3s;
	}
}

.about .box h2 span{
	font-size: 24px;
    font-weight: 600;
    line-height: 2;
    color: #fff;
}

@media screen and (max-width: 640px){
	.about .box h2 span{
		font-size: 16px;
	}
}

.about .box p {
	font-size: 14px;
    margin: 0;
    padding: 20px;
}

@media screen and (max-width: 640px){
	.about .box p {
		font-size: 12px;
		padding: 10px;
	}
}

.about .box p.right {
	width: calc(100% - 140px);
	float: right;
}

@media screen and (max-width: 640px){
	.about .box p.top {
		padding-bottom: 0;
	}
	
	.about .box p.right {
		width: calc(100% - 120px);
		padding-top: 0;
		float: left;
	}
}

.about .box img {
    width: 140px;
    float: left;
    padding: 20px 0 0 20px;
}

@media screen and (max-width: 640px){
	.about .box img{
		width: 120px;
		float: right;
		padding: 20px 20px 20px 0;
	}
}

.about .box p strong{
	font-weight: 600;
	color: #ec6c00;
}

.about .box p span{
	font-weight: 600;
	color: #ec6c00;
}

/* エリア別TOP（SEOペナルティよけ） */
.area_top{
	margin-top: 20px;
}

.area_top ul {
    display: flex;
    flex-wrap: wrap;
}

.area_top ul li {
    width: calc(100% / 3 - 10px);
    margin: 5px;
}

@media screen and (max-width: 900px){
	.area_top ul li {
		width: calc(100% / 2 - 10px);
	}
}

@media screen and (max-width: 640px){
	.area_top ul li {
		width: 100%;
	}
}

.area_top ul li h2 {
    font-size: 18px;
    font-weight: 600;
    color: #0d5083;
    border-bottom: 2px solid;
    margin: 0 0 10px;
    padding: 5px 0;
}

@media screen and (max-width: 640px){
	.area_top ul li h2 {
		font-size: 16px;
		margin: 0 0 5px;
	}
}

.area_top ul li ul.bottoms li{
	width: calc(100% / 3 - 10px);
}

.area_top ul li ul.bottoms li:first-child,
.area_top ul li ul.bottoms li:nth-child(4),
.area_top ul li ul.bottoms li:nth-child(7){
	width: calc(100% / 3 - 5px);
	margin-left: 0;
}

.area_top ul li ul.bottoms li:nth-child(3),
.area_top ul li ul.bottoms li:nth-child(6){
	width: calc(100% / 3 - 5px);
	margin-right: 0;
}

.area_top ul li ul.bottoms li a{
	display: block;
    text-align: center;
    padding: 5px;
    color: #0d5083;
    background: #eaf7ff;
    border-radius: 5px;
}

@media screen and (max-width: 640px){
	.area_top ul li ul.bottoms li a{
		font-size: 14px;
		padding: 3px;
	}
}

/* TOPコラム特集 */
.pickup {
	margin-bottom: 20px;
}

.pickup h2 {
    position: relative;
    border-bottom: 2px solid #0d5083;
    margin-top: 30px;
    padding: 0px 10px 0px 50px;
}

@media screen and (max-width: 640px){
	.pickup h2 {
		line-height: 36px;
    	font-size: 18px;
		background: #2f7ac6;
		padding: 0 10px 0 25px;
		border: 1px solid #2f7ac6;
		border: none;
    	border-radius: 0;
	}
}

.pickup h2::before {
	content: "";
    position: absolute;
	background: url(/img/pickup_icon.svg);
    width: 40px;
    height: 40px;
    left: 0;
    bottom: 5px;
    background-size: contain;
    background-repeat: no-repeat;
	z-index: 1;
}

@media screen and (max-width: 640px){
	.pickup h2::before {
		width: 36px;
    	height: 36px;
    	right: 5px;
    	left: unset;
		background: url(/img/pickup_icon2.svg);
		background-size: contain;
    	background-repeat: no-repeat;
	}
}

@media screen and (max-width: 640px){
	.pickup h2::after {
		content: "▶";
		position: absolute;
		left: 5px;
		top: calc(50% - 8px);
		font-size: 16px;
		line-height: 16px;
		color: #fff;
		transition: 0.3s;
	}
}

.pickup h2 span{
	width: 100%;
    font-size: 24px;
    font-weight: 600;
    color: #0d5083;
    line-height: 40px;
	z-index: 10;
}

@media screen and (max-width: 640px){
	.pickup h2 span{
		font-size: 16px;
		color: #fff;
		text-shadow: none;
	}
}

ul.top_column {
    display: flex;
	flex-wrap: wrap;
}

ul.top_column a {
	display: flex;
	width: calc(100% / 5 - 10px);
	margin: 5px;
}

@media screen and (max-width: 768px){
	ul.top_column a {
		display: block;
		width: 100%;
		margin: 0 0 5px;
	}
}

ul.top_column a.next {
	align-items: center;
    justify-content: center;
}

@media screen and (max-width: 768px){
	ul.top_column a li{
		display: flex;
	}
}

ul.top_column a li figure {
    border-radius: 10px;
    overflow: hidden;
}

@media screen and (max-width: 768px){
	ul.top_column a li figure{
		width: 30%;
		border-radius: 5px;
	}
}

ul.top_column a li figure img{
	width: 100%;
	height: 180px;
	object-fit: cover;
}

@media screen and (max-width: 768px){
	ul.top_column a li figure img{
		height: auto;
	}
}

@media screen and (max-width: 640px){
	ul.top_column a li figure img{
		height: auto;
		max-height: 100px;
	}
}

@media screen and (max-width: 768px){
	ul.top_column a li .box{
		width: 70%;
		padding-left: 10px;
	}
}

ul.top_column a li p.time{
	font-size: 12px;
	margin: 0;
}

@media screen and (min-width: 769px){
	ul.top_column a li p.time{
		margin: 5px 0 0;
	}
}

@media screen and (max-width: 768px){
	ul.top_column a li p.time{
		font-size: 10px;
	}
}

ul.top_column a li h3{
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	color: #0d5083;
	margin: 0;
	padding: 0;
}

@media screen and (max-width: 768px){
	ul.top_column a li h3{
		font-size: 14px;
	}
}

ul.top_column a.next li {
    display: flex;
    position: relative;
    width: 120px;
    height: 120px;
    background: #eaf7ff;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    overflow: hidden;
}

@media screen and (max-width: 768px){
	ul.top_column a.next li {
		width: 100%;
		height: auto;
		border: 1px solid #0d5083;
		border-radius: 10px;
		margin: 10px 0 0;
		padding: 5px 0;
	}
}

@media screen and (min-width: 769px){
	ul.top_column a.next li:hover{
		width: 150px;
		height: 150px;
		background: #0d5083;
		transition: 0.3s;
	}
}

ul.top_column a.next li span{
	font-size: 16px;
	font-weight: 600;
    color: #0d5083;
	transition: 0.3s;
}

@media screen and (max-width: 768px){
	ul.top_column a.next li span{
		font-size: 14px;
	}
}

@media screen and (min-width: 769px){
	ul.top_column a.next li:hover span{
		font-size: 20px;
		color: #fff;
		transition: 0.3s;
	}
}

/* よくある質問 */
.faq {
    margin: 30px 0 20px;
}

.faq h2 {
    position: relative;
    border-bottom: 2px solid #0d5083;
    margin-top: 30px;
    padding: 0px 10px 0px 50px;
}

@media screen and (max-width: 640px){
	.faq h2 {
		line-height: 36px;
    	font-size: 18px;
		background: #2f7ac6;
		padding: 0 10px 0 25px;
		border: 1px solid #2f7ac6;
		border: none;
    	border-radius: 0;
	}
}

.faq h2::before {
	content: "";
    position: absolute;
	background: url(/img/faq_icon.svg);
    width: 36px;
    height: 36px;
    left: 0;
    bottom: 3px;
    background-size: contain;
    background-repeat: no-repeat;
	z-index: 1;
}

@media screen and (max-width: 640px){
	.faq h2::before {
		width: 34px;
    	height: 34px;
    	right: 5px;
    	left: unset;
		background: url(/img/faq_icon2.svg);
		background-size: contain;
    	background-repeat: no-repeat;
	}
}

@media screen and (max-width: 640px){
	.faq h2::after {
		content: "▶";
		position: absolute;
		left: 5px;
		top: calc(50% - 8px);
		font-size: 16px;
		line-height: 16px;
		color: #fff;
		transition: 0.3s;
	}
}

.faq h2 span{
	width: 100%;
    font-size: 24px;
    font-weight: 600;
    color: #0d5083;
    line-height: 40px;
	z-index: 10;
}

@media screen and (max-width: 640px){
	.faq h2 span{
		font-size: 16px;
		color: #fff;
		text-shadow: none;
	}
}

a.btn1,
a.btn2 {
	max-width: 600px;
    display: block;
    font-size: 20px;
    text-align: center;
    margin: 0 auto 4rem;
    padding: 1rem;
}

@media screen and (max-width: 640px){
	a.btn1,
	a.btn2 {
		margin: 0 auto 2rem;
	}
}

a.btn1 {
	color: #195f46;
    background: #e8fff7;
    border: 1px solid #95cdb9;
}

a.btn2 {
	color: #b95a0b;
    background: #fff8f2;
    border: 1px solid #d5bba4;
}

.inline {
	padding-top: 20px;
    overflow-y: scroll;
    border: 1px solid #ccc;
}

@media screen and (min-width: 641px){
	.inline {
		height: calc(100vh - 600px);
	}
}

@media screen and (max-width: 640px){
	.inline {
		margin-top: 0;
	}
}

.shomei input {
	max-width: 120px;
	padding: 0.5em;
}

@media screen and (max-width: 640px){
	.shomei input {
		transform: scale(0.9);
	}
}


@media screen and (max-width: 640px){
	.shomei table th {
		font-size: 0.9rem;
		white-space: nowrap;
	}
	
	.shomei table th,
	.shomei table td {
		padding: 0.1em;
	}
}

@media screen and (max-width: 640px){
	.page_agreement aside,
	.page_agreement footer {
		display: none;
	}
}

/* 資料請求フォームのための追記 */
label.hidden,
tr.hidden{
	display: none;
}

.contact .button_box,
.modal__content5 .button_box{
	display: flex;
    width: 100%;
    max-width: 360px;
	/* border: 1px solid #ccc;
	border-radius: 5px; */
    overflow: hidden;
}

.request .button_box input,
.contact .button_box input,
.modal__content5 .button_box input{
	display: none;
}

.request .button_box label,
.contact .button_box label,
.modal__content5 .button_box label{
	display: block;
	width: 100%;
	/* padding: 10px; */
	cursor: pointer;
	background: #fff;
	transition: 0.3s;
}

.request .button_box label span,
.contact .button_box label span,
.modal__content5 .button_box label span{
	display: flex;
    position: relative;
    align-items: center;
}

.request .button_box label span::before,
.contact .button_box label span::before,
.modal__content5 .button_box label span::before{
	content: "";
    display: inline-block;
	background: #fff;
    border-radius: 30px;
    border: 1px solid #2f7ac6;
    margin-right: 5px;
}

.request .button_box label span::before,
.contact .button_box label span::before {
    width: 24px;
    height: 24px;
}

@media screen and (max-width: 767px) {
	.request .button_box label span::before,
	.contact .button_box label span::before {
		width: 20px;
		height: 20px;
	}
}

.modal__content5 .button_box label span::before{
    width: 20px;
    height: 20px;
}

.request .button_box label span::after,
.contact .button_box label span::after,
.modal__content5 .button_box label span::after{
	content: "";
    position: absolute;
    display: inline-block;
    border-radius: 30px;
    background: #2f7ac6;
    opacity: 0;
    transition: 0.3s;
}

.request .button_box label span::after,
.contact .button_box label span::after{
    width: 14px;
    height: 14px;
    left: 5px;
    top: 6px;
}

@media screen and (max-width: 767px) {
	.request .button_box label span::after,
	.contact .button_box label span::after {
		width: 10px;
		height: 10px;
		left: 5px;
		top: 7px;
	}
}

.modal__content5 .button_box label span::after {
	width: 10px;
	height: 10px;
	left: 5px;
	top: 6px;
}

/* .request .button_box input:checked + label,
.contact .button_box input:checked + label,
.modal__content5 .button_box input:checked + label{
	background: #d6e9ef;
	transition: 0.3s;
} */

.request .button_box input:checked + label span::after,
.contact .button_box input:checked + label span::after,
.modal__content5 .button_box input:checked + label span::after{
    opacity: 1;
	transition: 0.3s;
}

.contact input[name="name1"],
.contact input[name="name2"],
.contact input[name="kana1"],
.contact input[name="kana2"],
.contact input[name="postnum"]{
	width: 160px;
	margin-right: 10px;
}

@media screen and (max-width: 767px) {
	.contact input[name="name1"],
	.contact input[name="name2"],
	.contact input[name="kana1"],
	.contact input[name="kana2"]{
		width: 120px;
	}
}

.contact input[name="number"]{
	width: 200px;
}

.contact input[name="age"] {
	width: 100px;
	margin-right: 10px;
}

.contact select[name="situation"] {
	width: 120px;
	line-height: 1;
    padding: 10px;
}

.request input {
	display: inline-block;
}

.kakunin {
	margin-top: 1rem;
}

.caution2 {
	margin-top: 1rem;
	text-align: center;
}

.contact .btn_area input[type="button"] {
    background: #999;
}

.thanks img {
    display: block;
    max-width: 360px;
    margin: 0 auto 30px;
}

@media screen and (max-width: 768px) {
    .thanks img {
        max-width: 180px;
        margin: 0 auto 20px;
    }
}

::placeholder {
  color: #bbb;
}

.ad_list_a {
	margin-top: 2rem;
}

@media screen and (max-width: 768px) {
	.ad_list_a {
		margin-top: 1rem;
	}
}

.ad_list_a li {
	display: block;
	max-width: 600px;
	margin: auto;
}

.ad_list_a li a,
.ad_list_b li a{
    display: block;
    transition: 0.3s;
}

.ad_list_a li a:hover,
.ad_list_b li a:hover {
    transition: 0.3s;
    opacity: 0.7;
}

.ad_list_b {
	margin: 1rem auto;
}

@media screen and (max-width: 768px) {
	.ad_list_b {
		margin: 0 auto;
	}
}

.ad_list_b img {
	width: 100%;
}

@media screen and (min-width: 769px) {
	.ad_b .wrap{
		padding: 0;
	}
}