@charset "utf-8";

@media screen and ( max-width:1200px) {
	.main_visual{background-size:56%;background-position:left bottom;}
	.main_visual h1{padding:5vw 0;}
	.main_visual h1 img {width:70%;}
	
}
@media screen and ( max-width:1100px) {
/*
============================================================
タブレット
============================================================
*/	
    
/* ---------------------------------------------------------
■ トップへ戻るボタン
--------------------------------------------------------- */	
#page-top a:hover {
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
}
        
    #page-top a {
        width: 50px;
        padding: 10px 0;
    }
    /* ---------------------------------------------------------
    ■ フェードイン
    --------------------------------------------------------- */
    .fadein_delay {
        -webkit-animation-delay: 0s;
        -ms-animation-delay: 0s;
        animation-delay: 0s;
    }
    /* ---------------------------------------------------------
    ■ ベース
    --------------------------------------------------------- */
    body:before,body:after {
        top: 300px;
	}
}

@media screen and (max-width: 950px) {
	header .wrapper {
		padding: 0 20px;
	}
	.sanaru_logo img{
		max-height:40px;
		width:auto;
	}
}

@media screen and (max-width: 870px) {
	.school_box .inner {
		width: 45%;
	}
	.school_box p, .mark_box p{
		font-size: 19px;
		letter-spacing: -0.02em;
	}

}

@media screen and (max-width: 767px) {
/*
============================================================
コンテンツ　スマホ上書き
============================================================
*/
/* ---------------------------------------------------------
■ トップへ戻るボタン
--------------------------------------------------------- */
	#page-top {
    	bottom: 5px;
    	right: 5px;
	}
	
/*----------index ボタン---------*/	
	.index_btn a{
		width: 100%;
	}
	
/*----------MV---------*/
	
	.main_visual{background-size:64%;}
	
	.main_visual h1{padding:4vw 0 18vw;}
	
	.main_visual img[src*="sp"] {
		max-width:450px;
	}

/*----------導入文---------*/
.seminar_wrap{
	display: block;
	flex-direction: row;
}
	.seminar_wrap img{
		width:80%;
		max-width:420px;
	}
.seminar_text{
	margin: auto;
	width:80%;
}
	
/*----------ポイント---------*/
	
	.point_title {
    	display: block;
	}
	.point_title h3 span {
    	padding-left: 0;
	}
	.point_num{
	    width: 80%;
		margin:0 auto 5px;
    	aspect-ratio:auto;
		background-color: #D2101A;
	}
	.point_num span{
		padding:3px 0;
		margin:5px auto;
		width:calc(100% - 12px);
		border:#fff 2px solid;
		font-size: 22px;
		text-align: center;
	}
	.point_box p.point_text{
		width:80%;
		margin: auto;
		padding:0 0 15px;
	}
	
/*---------申し込みボタン----------*/
	.button{
		margin: 40px auto;
		max-width: 420px;
	}
	
/*----------受験資格---------*/	
	.voice_wrap{
		display: block;
	}
	.voice_wrap p{
		width:80%;
		margin-bottom: 20px;
	}
	
/*----------受験資格---------*/	
	#exam p.attention{
		font-size: 24px;
	}
	.ql_detail{
		display: block;
	}
	.ql_detail_box.lft,
	.ql_detail_box.rit{
		width:80%;
	}
	.school_box .inner{
		width:150px;
	}
	.single .school_box {
		padding: 15px 10px;
	}
	.single .school_box .inner {
		width: 150px;
		padding:0;
	}
	.school_box p, .mark_box p{
		line-height: 1.4em;
	}
	.ql_detail img[src*="plus"]{
		margin: -20px auto -10px;
	}
	
	/*----------静岡版---------*/

.school_box.shizuoka p{
	width:calc(((100% - 15px) / 3) - 0.8em);
}

	

/*----------実施概要（スケジュール）---------*/
	.schedule_date_box{
		display: block;
		margin: auto;
	}
	
	.schedule_wrap{
		max-width: 510px;
		padding:0 15px;
	}
	.schedule_wrap::after{
		left: 57px;
	}
	.schedule_wrap.fst::after{
		top: 40px;
	}
	.schedule_wrap.last::before{
		left: 32px;
	}
	
	.schedule_time{
		font-size:22px;
	}

	.schedule_img-box{
		max-width: 510px;
	}
	.schedule_img{
		width:88%;
	}
	.schedule_img img{
		width:98%;
	}
	
	
	/*愛知版*/
	.schedule_img.aichi{
		justify-content: center;
		max-width: 350px;
	}
	.schedule_img.aichi img{
		display: block;
	}
	.schedule_img.aichi img:nth-child(1){
		width:100%;
	}
	.schedule_img.aichi img:nth-child(2){
		width:12%;
		padding:15px 30% 0;
		margin: auto;
	}
	.schedule_img.aichi img:nth-child(3){
		width:100%;
		margin: 0 auto auto 0;
	}
	.schedule_test-aichi{
		max-width: 510px;
	}
	
	

	/*静岡版*/
	.schedule_img.shizuoka{
		justify-content: center;
		max-width: 350px;
	}
	.schedule_img.shizuoka img{
		display: block;
	}
	.schedule_img.shizuoka img:nth-child(1){
		width:100%;
	}
	.schedule_img.shizuoka img:nth-child(2){
		width:12%;
		padding:10px 30%;
		margin: auto;
	}
	.schedule_img.shizuoka img:nth-child(3){
		width:86%;
		margin: 0 auto auto 0;
	}

	.schedule_wrap.last_shizuoka{
		padding:10px 15px;
	}
	.schedule_wrap.last_shizuoka::after {
		border-right: #1C287D solid 5px;
		height: 80%;
	}
	.schedule_date_test {
		padding: 8px 0;
		width: calc(100% - 110px);
	}
	.schedule_date_test span{
		display: block;
	}
	
	.schedule_note {
		margin-top: 0;
		padding-left:115px;
		text-align: left;
	}
	
/*----------scholarship---------*/
	#scholarship h2 img{
		width:90%;
	}
	.scholarship_text{
		padding:0 20px;
	}
	
/*----------受験会場---------*/
	.area_wrap h3 {
		padding: 15px 50px 9px;
		line-height: 1.2em;
		font-size: 28px;
	}
	.area_wrap h3 span {
		display: block;
		margin-top: -5px;
	}
	.area_wrap ul li a span {
		display: block;
	}
	.area_wrap.shizuoka ul li a span {
		display: inline;
	}
	
	
/*----------申込の流れ---------*/
	.step_inner.ex {
    	display: block;
    	margin-right: 30px;
	}
	#step a{
		margin:10px auto 20px;
	}
	
}


/* ---------------------------------------------------------
■ アイフォン対応
--------------------------------------------------------- */
@media screen and (max-width: 520px) {

/*----------header----------*/
	header .wrapper {
  		height: 50px;
		padding: 0;
	}
	
/*----------エントリーボタンえ---------*/
	.entry_btn_box{
		margin:60px auto;
	}
	.entry_btn a {
		font-size: 18px;
	}
	
	
/*----------top画像---------*/
	.main_visual {padding-top:50px;background-size: 75%;background-position: -6% 130%;}
	
	.main_visual h1 {padding: 4vw 0 38vw;}
	.main_visual h1 img {width:88%;filter:drop-shadow(0 0 14px rgba(255,255,255,1))}
	
	
	/*----------導入文---------*/
.seminar_text{
	width:100%;
}

/*---------申し込みボタン----------*/
	.button_area{
		margin:0 auto 60px;
	}
	
	.button{
		padding:0;
	}
	.button a,
	.botton span.gray{
		font-size:22px;
	}
	
/*----------point---------*/
	#point h2{
		margin:15px auto;
		font-size:28px;
	}

	.point_box{
		margin-bottom:20px;
	}
	.point_num{
		width:100%;
	}
	.point_box p.point_text{
		width:100%;
	}
	.point_title h3{
		font-size:20px;
	}
	
	
/*----------受講生の声---------*/	
	#voice {
  margin: 40px auto 60px;
}
	#voice h2 {
  font-size: 28px;
}

/*----------受験資格---------*/	

	.voice_wrap p{
		width:80%;
		padding:20px 5%;
	}
	
/*----------概要---------*/
	#exam h2{
		position: relative;
		overflow: hidden;
		text-align: center;
	}
	#exam h2 img{
		position: relative;
		width:170%;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
	.qualified_box {
		padding: 15px 0 30px ;
	}
	#exam p.attention {
        font-size: 22px;
		padding-top:12px;
    }
	
/*----------受験資格---------*/
	.ql_detail_box.lft,
	.ql_detail_box.rit{
		width:100%;
	}
	
	/*----------静岡版---------*/

.school_box.shizuoka p{
	width:calc(((100% - 10px) / 2) - 0.8em);
}

	
/*----------スケジュール---------*/
	.schedule_box{
		padding: 20px 0 10px;
	}
	.schedule_wrap{
		width:100%;
		max-width:380px;
		padding:0 15px 20px;
	}
	.schedule_wrap::after{
		left: 54px;
	}
	.schedule_wrap.last::before{
		left: 29px;
	}
	
	.schedule_comment{
		display: none;
	}
	.schedule_num{
		font-size: 30px;
    	width: 80px;
	}
	.schedule_num div span.digits{
		font-size: 30px;
	}
	
	.schedule_time{
		margin-top: -0.5em;
		display: block;
		padding-bottom: 10px;
	}
	
	.schedule_date_box p{
		display: block;
		text-align: center;
		color:#009EAA;
		font-weight:600;
		background-color: #fff;
		border:#1C287D solid 2px;
		border-radius: 5px;
		padding: 6px 10px;
		margin-top: -0.4em;
		line-height: 1.2em;
	}
	
	.schedule_img-box h3{
		width: 90%;
		margin: auto;
	}
	
/*愛知版*/
	.schedule_test-aichi{
		width: 96%;
		max-width: 350px;
		font-size: 28px;
	}
	.schedule_test-aichi div:nth-child(1){
		width:100%;
		font-size: 45px;
	}
	.schedule_test-aichi div:nth-child(2) {
		width:100%;
	}
	
/*静岡版*/
	.schedule_date_test {
    	font-size: 20px;
		letter-spacing: -0.02em;
		width:calc(100% - 90px);
	}
	
	.schedule_note {
		padding-top: 8px;
		padding-left: 85px;
		font-size: 90%;
		letter-spacing: 0;
	}
	
	
		
/*----------試験科目・持ち物---------*/

	.sub_wrap{
		display: block;
	}
	.sub_item{
		width: 100%;
		padding:5px 0;
		border-bottom: none;
		margin-bottom: 3px;
	}
	.sub_item span{
		letter-spacing: 0.1em;
	}
	.sub_content{
		width: 100%;
		padding:5px 20px 10px;
	}
	
	
/*----------スカラシップ---------*/
	.schedule_title{
		font-size: 25px;
		line-height: 1.3em;
	}
	
	.scholarship_text{
		padding:0;
	}
	
	.scholarship_wrap{
		display: block;
		padding: 0 ;
	}
	.scholarship_wrap img{
		max-width:220px;
		width:80%;
		margin-bottom: 15px;
	}
	.scholarship_attention h3{
		line-height: 1.3em;
	}
	.scholarship_detail {
		padding:0 10px;
	}
	

/*----------実施校舎---------*/
	.area_box{
		margin: 25px auto 30px;
	}
	
	.area_box h2{
		font-size: 32px;
	}
	.area_box p{
		font-size: 16px;
	}
	.area_wrap h3 {
        padding: 15px 25px 9px 50px;
		font-size: 23px;
    }
	.area_wrap ul li a {
		padding: 8px;
	}
	.area_wrap ul li:before {
		left: 5px;
	}
	.area_wrap ul li a span {
		padding: 0 10px 0 20px;
	}
	.area_wrap.shizuoka ul li a span {
		display: block;
	}
	
	
/*----------流れ---------*/
	#step h2 {
		padding:5px 0;
		font-size: 28px;
	}
	
	.method_step {
		display: block;
		width:90%;
		margin:0 auto;
		border: #D2101A 2px solid;
		padding-bottom: 10px;
	}
	
	.method_step h3,
	.method_step .step_inner {
    	width: 100%;
		text-align: center;
		margin: auto;
	}
	.method_step h3{
		margin:8px auto 4px;
	}
	
	.method_step .step_inner p {
		margin: 0 20px 20px;	
	}
	
	.step_inner.ex .ex_inner p.bold {
		text-align: center;
		font-size:110%;
	}
	
	
	.method_step p.step {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 6px 0 3px;
	}
	.method_step p.step img {
		display: none;
	}
	
	.step_inner.ex .ex_inner {
		width:100%;
	}

   }

@media screen and (max-width: 420px) {
	.school_box.shizuoka p {
		margin: auto;
        width: 100%;
		max-width: 135px;
	}
	
}


@media screen and (max-width: 374px) {
	.area_wrap h3 {
		padding: 15px 15px 9px 50px;
		line-height: 1.4em;
		font-size: 19px;
	}
}