@charset "utf-8";

/* スクール検索　- search - */

/* ==============================

	レイアウト

============================== */
.search {
	background: url("../img/search_bg.svg") no-repeat right top / 100%;
}


@media only screen and (max-width: 767px){
	.search {
		background: none;
	}

}

.search h2 {
	text-align: center;
	background: url("../img/about_h2.svg") no-repeat top right / 50px;
	width: fit-content;
	display:block;
	margin: 0 auto 20px auto;
	padding: 5px 30px;
}

.search h2 span {
	font-size: 1.8rem;
	background: linear-gradient(transparent 60%, #FBED11 0%);
}

.search h2 span span{
	font-size: 2rem;
	font-weight: bold;
}

@media only screen and (max-width: 767px){
	.search h2 {
		padding: 20px 30px 0;
		margin-bottom: 10px;
	}

	.search h2 span {
		font-size: 1.3rem;
	}
}


/* ==============================

	メイン画像

============================== */
/* .search mv */
.search .mv_ttl {
	background: url("../img/mv_search_bg.jpg") no-repeat bottom center / cover ;
}



/* ==============================

	スクール一覧

============================== */


/* list */

.search_list {
    padding: 60px 0;
    background: url(../img/top_list_bg.svg) no-repeat bottom center / 100%;
}

.search_list h2 p {
    font-size: 1.0rem;
    margin-top: 6px;
    color: #9BCB6C;
}

.search_list .txt {
    text-align: center;
    margin-bottom: 40px;
}

.search_list ul {
    display: flex;
    /*justify-content: space-between;*/
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: stretch;
}

.search_list ul li {
    /*width: 16%;*/
    width: 20%;
    transition: all 0.2s ease 0s;
}

.search_list ul li:hover {
    filter: drop-shadow(0px 0px 6px rgba(30, 30, 30, 0.2));
}

.search_list ul li:hover img {
    opacity: 1;
}

@media only screen and (max-width: 767px) {
	.search_list {
		padding: 0;
		background: url(../img/top_list_bg.svg) no-repeat bottom center / 100%;
	}

	.search_list ul li {
        width: 33%;
    }
}


/*検索フォーム*/
.search2_box{ margin: 20px auto;}
.search2_box h3{ display: inline-block; background: #000; color: #fff; font-size: 16px; font-weight: normal; line-height: 1em; padding: 0.75em 2em 0.75em 1.5em; border-radius: 0 1em 0 0;}
.search2_box h3{ background: #ffc336;}
.search2_box h3{ background: #9ccc76;}
.search2_box_in{ background: #f7f5ea; padding: 20px; border-radius: 0 20px 20px 20px;}
@media only screen and (max-width: 767px) {
.search2_box{ margin: 5% auto;}
.search2_box h3{ font-size: 4vw;}
.search2_box_in{ padding: 2.5%; border-radius: 0 2.5vw 2.5vw 2.5vw;}
}
.search2_box ::placeholder{ color: #aaa;}
.search2_box select{ -webkit-appearance: none; width: 100%; padding:1em; border-radius: 8px; box-sizing: border-box; background: #fff; border: 1px solid #fff; font-size: 16px; cursor: pointer; transition: 0.3s;}
.search2_box select:hover{ border: 1px solid #dedede;}
.search2_box ul li{ position: relative;}
.search2_box ul li:before{ content: ""; width: 0.5em; height: 0.5em; border: 2px solid #666; border-left: none; border-top: none; position: absolute; right: 2em; top: 50%; transform: rotate(45deg) translateY(-50%); pointer-events: none;}
.search2_box ul li:not(:last-child){ margin-bottom: 10px;}
@media only screen and (max-width: 767px) {
.search2_box select{ border-radius: 1.25vw; font-size: 3vw;}
.search2_box ul li:before{ right: 1.5em;}
.search2_box ul li:not(:last-child){ margin-bottom: 2.5%;}
}
.search2_box ul{ display: flex; flex-wrap: wrap; width: calc(100% + 10px); margin: -5px 0 -5px -5px;}
.search2_box ul li{ margin: 5px;}
.search2_box ul li label{ display: block; background: #fff; border: 1px solid #fff; padding: 10px 10px 10px 40px; min-width: 100px; font-size: 16px; cursor: pointer; position: relative; transition: 0.3s;}
.search2_box ul li label:hover{ border: 1px solid #dedede;}
.search2_box ul li label input{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); cursor: pointer;}
@media only screen and (max-width: 767px) {
.search2_box ul{ width: calc(100% + 2.5vw); margin: -1.25vw 0 -1.25vw -1.25vw;}
.search2_box ul li{ width: 1.25vw; width: calc(50% - 2.5vw);}
.search2_box ul li label{ padding: 5% 2.5% 5% 15%; width: 100%; font-size: 3vw;}
.search2_box ul li label input{ margin-right: 2.5%; left: 2.5%;}
}


/*検索結果*/
.search2_result .result_box{ margin: 20px auto 60px; border: 1px solid #ccc; background: #fff; padding: 20px ;box-shadow: 0 0 5px rgba(0,0,0,.2);}
@media only screen and (max-width: 767px) {
.search2_result .result_box{ margin: 5% auto 10%; padding: 5%;}
}

.search2_result .result_tit{ display: flex; align-items: center; margin-bottom: 40px;}
.search2_result .result_tit figure{ width: 160px; border: 1px solid #ccc; padding: 10px; margin: 0 20px 0 0;}
.search2_result .result_tit strong{ font-size: 28px;}
@media only screen and (max-width: 767px) {
.search2_result .result_tit{ margin-bottom: 5%;}
.search2_result .result_tit figure{ width: 22.5%; padding: 2.5%; margin: 0 2.5% 0 0;}
.search2_result .result_tit strong{ width: 75%; font-size: 4vw;}
}

.search2_result .result_list ul li{ padding: 20px 40px; border-bottom: 1px solid #ccc;}
.search2_result .result_list ul li:first-child{ border-top: 1px solid #ccc;}
.search2_result .result_list h3{ font-size: 21px; margin-bottom: 10px; color: #003f98;}
.search2_result .result_list table{ width: 100%; border-collapse: separate; border-spacing: 0.5em 0; font-size: 16px;}
.search2_result .result_list table th{ text-align: right; width: 6em; vertical-align: top;}
.search2_result .result_list table td{ vertical-align: top;}
.search2_result .result_list figure.search2_btn{ margin: 20px auto 0; text-align: center;}
.search2_result .result_list figure.search2_btn a{ display: block; background: #fff; border: 1px solid #003f98; border-bottom-width: 4px; color: #003f98; padding: 0.5em; font-size: 16px;}
.search2_result .result_list figure.search2_btn a:after{ content: "▶"; font-size: 66.66%; margin-left: 1em; position: relative; top: -0.15em;}
.search2_result .result_list figure.search2_btn a:hover{ background: #003f98; color: #fff; opacity: 1.0;}
@media only screen and (max-width: 767px) {
.search2_result .result_list ul li{ padding: 5% 0;}
.search2_result .result_list h3{ font-size: 3.5vw; margin-bottom: 2.5%;}
.search2_result .result_list table{ font-size: 3vw;}
.search2_result .result_list figure.search2_btn{ margin: 2.5% auto 0;}
.search2_result .result_list figure.search2_btn a{ font-size: 3vw;}
}


/*221110追加*/
#search2 *{ box-sizing: border-box;}
.search2_box_in dl{ display: flex; align-items: center; width: 100%;}
.search2_box_in dl dt{ width: 6em;}
.search2_box_in dl dd{ width: calc(100% - 6em); display: flex; align-items: center;}
.search2_box_in dl dd select{ width: calc(33.33% - 20px); margin-right: 20px;}
.search2_box_in dl dd select.wide{ width: calc(66.66% - 20px);}
@media only screen and (max-width: 767px){
.search2_box_in dl{ margin: 5% auto; font-size: 4vw;}
.search2_box_in dl dd{ flex-wrap: wrap;}
.search2_box_in dl dd select{ width:100%; margin: 0 auto; font-size: 4vw;}
.search2_box_in dl dd select:not(:nth-child(1)){ margin-top: 2.5%;}
.search2_box_in dl dd select.wide{ width: 100%; margin: 0;}
.search2_box ul{ width: calc(100% + 2.5vw); margin-left: -1.25vw;}
.search2_box ul li{ width: calc(50% - 2.5vw); margin: 1.25vw;}
.search2_box ul li label{ padding: 1.25vw 0 1.25vw 5.5vw; width: 100%; min-width: 100%; font-size: 4vw;}
}
#search2 p.more_txt{ display: flex; align-items: center; justify-content: center; text-align: center; font-size: 18px; line-height: 1em; padding: 1em; border: 1px solid #000; width: 33.33%; border-radius: 2em; margin: 60px auto; cursor: pointer;}
@media only screen and (max-width: 767px){
#search2 p.more_txt{ font-size: 3vw; width: 66.66%; margin: 10% auto;}
}