@charset "UTF-8";

/*
============================================================
◆ index
============================================================
*/

.index_btn_box{
}
.index_btn{
	max-width: 1140px;
	margin:60px auto;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap:20px;
	padding:0 20px;
}

.index_btn a{
	position: relative;
	box-sizing: border-box;
	display: block;
	width: calc(50% - 10px);
	background-color: #D2101A;
	border: 4px solid #D2101A;
	color: #fff;
	font-weight: 600;
	font-size: 26px;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
	transition: .2s;
}
.index_btn a::before {
    content: "";
    position: absolute;
    top:calc(50% - 10px);
    right: 22px;
    width: 15px;
    height: 15px;
    border-top: #fff 4px solid;
    border-right: #fff 4px solid;
    transform: rotate(45deg);
    transition: .2s;
}
@media screen and ( min-width:768px) {
	.index_btn a:hover{
		background-color:rgba(255,255,255,0);
		color:#D2101A;
		box-shadow: 2px 2px 5px rgba(0,0,0,0);
	}
}


	
/*
============================================================
◆ エントリー
============================================================
*/
	
.entry_btn_box{
	max-width: 840px;
	margin:100px auto;
	box-sizing: border-box;
	padding:0 20px;
}
.entry_btn_box h2{
	font-size: 18px;
	font-weight:600;
	padding:10px;
}

.entry_btn a{
	position: relative;
	box-sizing: border-box;
	display: block;
	border-bottom: #7BC6C1 dotted 2px;
	text-decoration: underline;
	font-size: 20px;
	padding:5px 15px 5px 30px;
	text-align: left;
	font-weight:600;
	color: #172A74;
	transition: .2s;
}
.entry_btn a::before {
    content: "";
    position: absolute;
    top:calc(50% - 10px);
    left: 5px;
    width: 10px;
    height: 10px;
    border-top: #172A74 4px solid;
    border-right: #172A74 4px solid;
    transform: rotate(45deg);
    transition: .2s;
}
@media screen and ( min-width:768px) {
	.entry_btn a:hover{
		background-color:rgba(255,255,255,0);
		color:#D2101A;
		box-shadow: 2px 2px 5px rgba(0,0,0,0);
	}
	.entry_btn a:hover::before{
		border-color:rgba(255,255,255,0);
	}
}
	
	
	


/*
============================================================
コンテンツ　設定
============================================================
*/


.title{
	cursor: pointer;
}
.box{
	display: none;
}


header {
    position: fixed;
    width: 100vw;
    z-index: 15;
    transition:0.2s;
	background-color: rgba(0, 61, 129,1);
}
header .wrapper {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    transition: height 0.3s;
}
.sanaru_logo{
	transition:0.2s;
	margin: 5px 10px;
	padding-top: 6px;
}

/*----------メインビジュアル---------*/
.main_visual_area{
	background:linear-gradient(to bottom,#fff 60%,#ea5c30);
}

.main_visual{
	width:100%;
	padding-top: 60px;
	background-image: url("../images/mv_bk.webp");
	background-repeat: no-repeat;
	background-size:900px;
	background-position:calc(50vw - 660px) 75px;
}
.main_visual h1{
	margin: auto;
	text-align:right;
	line-height: 0;
	padding: 60px 0;
	max-width:1300px; 
}

.main_visual h1 img{
	max-width:900px;
}


.mv .img_line{
	margin: auto;
	background-color:#fff;
	padding: 20px;
}
.mv .img_line img{
	max-width:1100px;
}
.mv img.phone{
	max-width:300px;
}

/*----------導入文---------*/
.seminar_box{
	max-width:1100px;
	margin:20px auto;
}
.seminar_wrap{
	display: flex;
	flex-direction: row-reverse;
}

.seminar_wrap img{
	width:35%;
	margin: auto;
}
.seminar_text{
	display: flex;
	padding:10px 20px;
	width:65%;
}
.seminar_text div{
	margin: auto;
}
.seminar_text div p{
	margin-bottom: 15px;
}
.seminar_text h2{
	margin:auto auto 15px;
	color:#9C0004;
	font-size:20px;
	letter-spacing: -0.04em;
	font-weight:600;
}
.seminar_text h2 span{
	color:#222;
}

/*----------ボタンエリア---------*/

.button_area{
	margin:40px auto;
}

.button{
	margin:auto;
	padding:30px 0 60px;
	max-width: 630px;
}

.button a{
  display: block;
  background-color: #D2101A;
	border: 2px solid #D2101A;
  color: #fff;
  font-weight: 600;
  font-size: 26px;
  padding:13px 20px;
  border-radius: 12px;
  margin: 0 10px;
  transition: .2s;
}
.button_area .oshirase{
	border: solid 3px #dd5057;
	border-radius: 10px;
	padding: 10px 20px;
	width: 600px;
	max-width: 90%;
	margin: auto;
}
.button_area .oshirase span{
	font-weight: 600;
	color: #9C0004;
	font-size: 19px;
}
@media screen and ( min-width:521px) {
	.button a:hover{
		background-color:rgba(255,255,255,0);
		color:#D2101A;
	}
}

.button span.gray{
  display: block;
  background-color: rgba(0,0,0,.3);
  color: #fff;
  font-weight: 600;
  font-size: 26px;
  padding: 5px 20px;
  border-radius: 12px;
  margin: 0 10px;
  transition: .2s;
}

.button p{
	text-align: center;
	font-size: 17px;
	color: #333;
	font-weight: 600;
}


/*----------受講生の声---------*/
#voice{
	margin: 60px auto;
}

.voice_box{
	max-width:1100px;
	margin:20px auto;
}
.voice_box h2{
	margin:auto auto 15px;
	color:#9C0004;
	font-size:34px;
	letter-spacing: -0.04em;
	font-weight:600;
}

.voice_wrap{
	display: flex;
	margin-bottom: 20px;
}
.voice_wrap p{
	position: relative;
	width:42%;
	margin:0 auto 10px;
	padding:35px 3%;
	background-color: #FFFACA;
}
.voice_wrap p::after{
	content: "";
	position: absolute;
	width: 0;
	height:0;
	bottom:0;
	right:0;
	border-top:12px solid rgba(0,0,0,.2);
	border-bottom:12px solid #f6f6f6;
	border-right:12px solid #f6f6f6;
	border-left:12px solid rgba(0,0,0,.2);
}





/*----------ポイント---------*/

#point{
	background-color: #FFF7F4;
	padding:30px 0;
}

#point h2{
	margin:25px auto;
	color:#9C0004;
	font-size:34px;
	font-weight:600;
}

.point_box{
	max-width:860px;
	padding:0 20px;
	margin:5px auto 30px;
}

.point_title{
	display:flex;
}
.point_title h3{
	display:flex;
	color:#222;
	font-size:24px;
	letter-spacing: -0.04em;
	font-weight:600;
}
.point_title h3 span{
	margin: auto;
	padding-left:0.8em;
}
.point_num{
	position: relative;
	display: flex;
	width:160px;
	height: auto;
	aspect-ratio: 2 / 1;
}
.point_num span{
	display: inline-block;
	margin: auto;
	padding:0.1em 11% 0 0 ;
	color:#fff;
	font-size:28px;
	letter-spacing: -0.04em;
	font-weight:600;
	z-index: 2;
}
.point_num img{
	position: absolute;
	top:0;
	left:0;
}
.point_box p.point_text{
	padding-top:10px;
}


/*----------実施概要---------*/
#exam{
	width:100%;
}

#exam h2{
	line-height: 0;
	background: linear-gradient(to right,#DC2525 40%, rgba(220, 37, 37,.25) 40%);
}
#exam h2 img{
	max-width: 820px;
}

/*----------実施概要（受験資格）---------*/

#exam p.attention{
	text-align: center;
	color:#D2101A;
	font-size:26px;
	line-height: 1.4em;
	letter-spacing: -0.04em;
	font-weight:600;
	padding:5px 20px 10px;
}

.qualified_box{
	padding:30px 0;
}

.ql_detail{
	display: flex;
	max-width:1140px;
	margin: auto;
	padding:0 20px;
	width:100%;
}

.ql_detail img[src*="plus"]{
	max-width:80px;
	height:auto;
	margin: auto -50px;
	z-index: 5;
}

.ql_detail_box{
	border: #1C287D solid 3px;
	margin:0 auto;
}
.ql_detail_box.lft{
	width:48%;
}
.ql_detail_box.rit{
	width:42%;
}
.ql_detail_box.single{
	width:100%;
	max-width: 700px;
}
.ql_detail_box h3{
	color:#fff;
	font-size:36px;
	letter-spacing: 0.04em;
	font-weight:600;
	background-color: #1C287D;
}

.ql_detail_text{
	padding:0 20px 20px;
}

.ql_detail_text .attention{
	padding-top:5px;
}

.ql_detail_text .small_90{
	font-weight:600;
}

.school_box{
	display: flex;
	background-color: #FFFACA;
	margin:0 auto 5px;
}

.school_box .inner{
	width:40%;
	margin:0 auto;
	padding:10px 0;
}
.single .school_box .inner{
	width:30%;
}

.mark_box{
	background-color: #FFFACA;
	margin:0 auto 5px;
	padding:10px 15px;
}
.school_box p,
.mark_box p{
	font-size: 20px;
	font-weight:600;
	line-height: 1.6em;
	text-indent: -1em;
	padding-left:1em;
}
.school_box p::before,
.mark_box p::before{
	content: "■";
	font-size: 25px;
	color:#D2101A;
}

#point > .small_85{
	text-align: center;
	max-width:1140px;
	margin: auto;
	width:100%;
}

/*----------静岡版---------*/

.school_box.shizuoka{
	flex-wrap: wrap;
	padding: 10px;
}
.school_box.shizuoka p{
	width: 30%;
}

/*----------実施概要（スケジュール）---------*/

.schedule_box{
	background-color: #FFFACA;
	padding:30px 0;
}

.schedule_wrap{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	max-width: 710px;
	margin: auto;
	padding-bottom: 20px;
}
.schedule_wrap::after{
	position: absolute;
	content: "";
	width:0;
	height: 100%;
	border-right:#1C287D solid 5px;
	top:0;
	left:42px;
}

.schedule_wrap.last{
	padding-bottom:25px;
}

.schedule_wrap.last::before{
	position: absolute;
	content: "";
	width:0;
	height: 0;
	border-right:#1C287D solid 30px;
	border-bottom:rgba(255,255,255,0) solid 38px;
	bottom:-20px;
	left:17px;
	z-index: 5;
}
.schedule_wrap.last::after{
	height: 100%;
}

.schedule_img-box{
	max-width: 710px;
	margin:auto;
	padding:30px 0 0;
}
.schedule_img-box h3{
	padding: 5px 0;
	color:#fff;
	font-size: 20px;
	font-weight: 600;
    background-color: #222;
	width:100%;
}

.schedule_img{
	margin:auto;
	padding:15px 0 30px;
}
.schedule_img img{
	width:48%;
	padding:0 1%;
}


/*愛知版*/
.schedule_img.aichi{
	display: flex;
	flex-wrap: wrap;
	max-width: 740px;
}
.schedule_img.aichi img:nth-child(1){
	width:48%;
	padding:0;
	margin:0 auto auto;
}
.schedule_img.aichi img:nth-child(2){
	width:6%;
	margin:auto;
}
.schedule_img.aichi img:nth-child(3){
	width:43%;
	padding:0;
	margin:0 auto auto;
}

.schedule_test-aichi{
	display: flex;
	flex-wrap: wrap;
	color:#fff;
	font-size: 36px;
	font-weight:600;
	background-color:#1C287D;
	padding:15px;
	max-width: 710px;
    margin:30px auto 0;
}
.schedule_test-aichi div:nth-child(1){
	width:125px;
	margin: auto 0;
	font-style: italic;
    font-family: "Times", serif;
}
.schedule_test-aichi div:nth-child(1) span{
	font-style: normal;
	font-family:sans-serif;
	font-size:65%;
}
.schedule_test-aichi div:nth-child(2){
	width:calc(100% - 125px);
}
.schedule_test-aichi div:nth-child(2) span{
	display: block;
	font-size:75%;
}



/*静岡版*/
.schedule_img.shizuoka{
	display: flex;
	flex-wrap: wrap;
	max-width: 740px;
}
.schedule_img.shizuoka img:nth-child(1){
	width:49%;
	padding:0;
	margin: auto;
}
.schedule_img.shizuoka img:nth-child(2){
	width:6%;
	margin:auto auto 0.5%;
}
.schedule_img.shizuoka img:nth-child(3){
	width:39%;
	padding:0;
	margin: auto;
}



/*スケジュール 青●*/
.schedule_num{
	position: relative;
	display: flex;
	color:#fff;
	font-size:36px;
	width:88px;
	height:auto;
	letter-spacing: 0.04em;
	font-weight:600;
	background-color: #1C287D;
	border-radius: 50%;
	aspect-ratio: 1/1;
	margin: auto 0;
}
.schedule_num div{
	display: inline-block;
	margin: auto;
	padding:12px 15px 10px;
	z-index:5 ;
}
.schedule_num div span{
	font-size: 72%;
}

.schedule_num span.year{
	position: absolute;
	top:9px;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	font-size: 14px;
	z-index:5 ;
}

/*スケジュール 青●(10~12月用)*/
.schedule_num div.digits{
	padding:0;
}
.schedule_num div span.digits{
	font-size:34px;
	letter-spacing: -0.1em;
	padding-right:0.1em;
}

/*スケジュール 日付*/
.schedule_date_box{
	display: flex;
	margin: auto;
}
.schedule_date_box p{
	display: none;
}

/*スケジュール 赤文字*/
.schedule_date{
	display: flex;
	color:#D2101A;
	font-size:60px;
	font-weight:900;
	font-style: italic;
	font-family:"Times",serif;
	letter-spacing: -0.02em;
	margin: auto;
	width:190px;
}
.schedule_date div{
	display: inline-block;
	margin: auto;
}
.schedule_date div span{
	font-size: 55%;
	font-style: normal;
	font-family: "Gill Sans", sans-serif;
}

/*スケジュール 時間太字*/
.schedule_time{
	display: flex;
	color:#333;
	font-size:28px;
	font-weight:600;
	letter-spacing: -0.04em;
	margin: auto;
}
.schedule_time div{
	display: inline-block;
	margin: auto;
}

/*スケジュール 吹き出し*/
.schedule_comment{
	width:200px;
	display: flex;
	margin: auto;
}
.schedule_comment img{
	margin: auto;
}

/*スケジュール 静岡*/
.schedule_date_test{
	padding: 15px 0;
	color:#fff;
	font-size: 28px;
	font-weight: 600;
    background-color: #1C287D;
	width:calc(100% - 130px);
	margin: auto 0 auto auto;
}
.schedule_date_test span:nth-child(2){
	font-size: 70%;
}
.schedule_wrap.last_shizuoka::after {
	border: none;
}

.schedule_note{
	margin-top: -15px;
	width:100%;
	padding-left: 100px;
  text-align: left;
  font-size: 90%;
}

/*----------実施概要（科目・持ち物）---------*/

.subject_box{
	max-width: 820px;
	margin:30px auto 60px;
}

.sub_wrap{
	display: flex;
	padding:0 20px;
}

.sub_item{
	display: flex;
	width:20%;
	background-color: #1C287D;
	color:#fff;
	font-weight: 600;
	font-size: 18px;
	border-bottom: rgba(255,255,255,1) 3px solid;
}
.sub_item span{
	margin: auto;
}

.sub_content{
	width:80%;
	padding:20px;
	text-align: left;
	font-size: 16px;
}


/*----------スカラシップ---------*/

#scholarship{
	background-color: #D2101A;
	color:#fff;
	padding: 0 0 30px;
}

#scholarship h2{
	background-color: #9C0004;
	padding:18px 0 15px;
}
#scholarship h2 img{
	max-width:570px;
}

.scholarship_box{
	margin: auto;
	padding: 0 20px;
}

.schedule_title{
	max-width:800px;
	margin:0 auto 15px;
	border-bottom: #fff 3px solid;
	font-size: 28px;
	font-weight:600;
	letter-spacing: -0.04em;
	padding: 20px 0 10px;
	text-align: center;
}
.schedule_title span{
	color:#fff000;
}

.scholarship_wrap{
	display: flex;
	margin: auto;
	max-width:800px;
	padding:0 20px;
}
.scholarship_wrap img{
	width:220px;
	margin: auto;
}

.scholarship_detail{
	padding-left:10px;
	margin: auto;
}
.scholarship_detail h3{
	font-size: 20px;
	text-align: left;
	font-weight:600;
}
.scholarship_detail h3::before{
	content: "";
	display: inline-block;
	width: 19px;
	height:auto;
	aspect-ratio: 1/1;
	background-color: #FFF000;
	margin:0 3px -3px 0;
}
.scholarship_detail p{
	margin-bottom: 10px;
}

.scholarship_attention{
	margin:25px auto 0;
	max-width:800px;
	padding:15px 30px;
	background-color: #faf9ed;
	border-radius: 7px;
}
.scholarship_attention h3{
	color:#1C287D;
	font-size: 22px;
	font-weight:600;
	letter-spacing: -0.04em;
	padding:0 0 10px;
}
.scholarship_attention p{
	color:#222;
	line-height: 1.4em;
}


/*----------各地域の要項---------*/

.area_box{
	margin:60px auto;
}

.area_box h2{
	font-weight: 600;
    font-size: 40px;
    padding: 30px 15px 0;
    letter-spacing: 0.1em;
    margin: 0 auto;
}
.area_box p{
	font-size: 20px;
	text-align: center;
	font-weight: 600;
	padding: 0 0 10px;
}

.area_wrap{
	margin: 0 auto 25px;
    padding: 0 20px;
    max-width: 800px;
}

.area_wrap h3{
	background-color: #1C287D;
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    transition: .2s;
    padding: 20px 28px 12px;
    position: relative;
    box-shadow: 2px 2px 5px rgba(0,0,0,.5);
    z-index: 5;
	line-height:0.8em;
}

.area_wrap h3::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 22px;
    width: 15px;
    height: 15px;
    border-bottom: #fff 4px solid;
    border-right: #fff 4px solid;
    transform: rotate(45deg);
    transition: .2s;
}

.area_wrap h3.mov::before{
	top: 22px;
	transform: rotate(-135deg);
	transition: .2s;
}

.area_wrap h3 span{
	font-size: 16px;
}

.area_wrap ul{
	padding-top: 18px;
}


.area_wrap ul li{
	border-bottom:#7BC6C1 dotted 2px;
	position: relative;
}

.area_wrap ul li:last-child{
	border-bottom:none;
}

.area_wrap ul li a{
	display:inline-block;
	width:calc(100% - 30px);
	text-align: left;
	color:#222;
	padding: 11px 15px;
}

.area_wrap ul li a span{
	display:inline-block;
	text-decoration: underline;
	font-size:20px;
	padding:0 20px 0 30px;
	text-align: left;
	color:#172A74;
	font-weight: 600;
	transition: .2s;
	min-width:160px;
}

.area_wrap ul li:before{
	content: "";
	position: absolute;
	top:20px;
	left:15px;
	width:10px;
	height:10px;
	border-bottom:#172A74 3px solid;
	border-right:#172A74 3px solid;
	transform: rotate(-45deg);
	transition: .2s;
}

@media screen and ( min-width:521px) {
	.area_wrap ul li:hover{
		background-color:#FFFACA;
		text-decoration: none;
		transition: .2s;
	}
}

.area_wrap ul li p{
	margin: auto 0;
	padding:0 10px;
}


/*----------申込の流れ---------*/
#step{
	margin:0 auto 40px;
	padding: 10px 0 50px;
}

#step h2{
	max-width:750px;
	background-color:#222;
	color:#fff;
	font-weight:600;
	font-size:40px;
	padding:0 15px 0;
	letter-spacing: 0.1em;
	margin:30px auto 20px;	
}

#step .attention{
	text-align: center;
	letter-spacing: -0.04em;
	font-weight:600;
	margin:0 auto 25px;
	padding:0 20px;
}
#step .attention span{
	color:#D2101A;
	font-size:22px;
}

.step_box{
	max-width: 750px;
	margin: auto;
}

.method_step{
	display: flex;
}

.method_step p.step{
	background-color:#D2101A;
	color:#fff;
	font-size: 20px;
	font-weight:600;
	letter-spacing: 0.1em;
	width:30%;
	max-width: 180px;
	text-align: center;
	padding:30px 0;
	display: flex;
	margin: 0 0 0 20px;
	position: relative;
}
.method_step p.step img{
	position: absolute;
	bottom:-10px;
	left:0;
	max-width: 180px;
	z-index: 5;
}

.method_step p.step span{
	margin: auto;
}

.method_step .step_inner{
	width:70%;
	margin: 0 30px 25px 20px;
}

.method_step .step_inner p{
	margin-bottom: 10px;
}

.method_step .step_inner .small_12{
	font-size:12px;
}

.method_step h3{
	text-align: left;
	color:#D2101A;
	font-size:24px;
	font-weight:600;
}

.step_inner.ex{
	display: flex;
	margin-right: 0;
}

.step_inner.ex .ex_inner{
	width:275px;
	
}

.step_inner.ex .ex_inner p{
	margin-bottom: 0;
}

#step a{
	display: inline-block;
	margin: auto auto auto 0;
    background-color: #D2101A;
	border: 2px solid #D2101A;
    color: #fff;
    font-weight: 600;
    font-size: 21px;
    padding: 3px 18px;
    border-radius: 12px;
    transition: .2s;
    width:80%;
	max-width:230px;
	letter-spacing: -0.01em;
}
#step span.gray{
	display: inline-block;
	margin: auto auto auto 0;
    background-color: rgba(0,0,0,.25);
    color: rgba(255,255,255,.85);
    font-weight: 600;
    font-size: 21px;
    padding: 5px 20px;
    border-radius: 12px;
    transition: .2s;
    width:80%;
	max-width:230px;
	letter-spacing: -0.01em;
}


@media screen and ( min-width:521px) {
	#step a:hover{
		background-color:rgba(255,255,255,0);
		color:#D2101A;
	}
}


/*----------フッター---------*/
footer{
	background-color: rgba(0, 61, 129,1);
	padding:60px 0;
}

footer .logo{
	width:15%;
	min-width:160px;
}