@charset "utf-8";

:root{
	--title-color:#00225D;
	--link-color:#00225D;
	--light-color:rgba(0,160,233,.17);
	--main-color:#00225D;
}

@media screen and ( max-width:1100px) {
/*
============================================================
タブレット
============================================================
*/
	
	.details_sml_wrap .wrap_pack .stdt{
		font-size:16px;
		width: 200px;
	}
	
/*-------------------------------------
			テーブル一括指定
---------------------------------------*/

 table{
		font-size:13px;
	}
    
/* ---------------------------------------------------------
■ トップへ戻るボタン
--------------------------------------------------------- */	
#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:900px) {
	.test_box{
		overflow: scroll;
		overflow-x: scroll;
		overflow-y:hidden;
		padding:0;
		margin:0 20px;
		scrollbar-arrow-color:var(--main-color);
		scrollbar-face-color:var(--main-color);
		scrollbar-3dlight-color:var(--main-color);
		scrollbar-darkshadow-color:var(--main-color);
		scrollbar-highlight-color:var(--main-color);
		scrollbar-shadow-color:var(--main-color);
		scrollbar-track-color:var(--main-color);
	}
	
/*スクロールバーの横幅指定*/
	.test_box::-webkit-scrollbar {
		width: 3px;
		height:7px;
	}
	/*スクロールバーの背景色・角丸指定*/
	.test_box::-webkit-scrollbar-track {
		background: #eee;
	}
	/*スクロールバーの色・角丸指定*/
	.test_box::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background:var(--title-color);
	}
	
	.test_box table{
		min-width:900px;
	}
	.test_box table td.sub{
		position: sticky;
		left:0;
		background-color:#fff9ac;
	}
		.test_box table td.sub:before{
		content: "";
		position: absolute;
		top: -2px;
		left: -2px;
		width: 100%;
		height: 100%;
		border: 2px solid #fff;
	}
	
	.test tr:nth-child(1) td.sub{
		background-color: #00A29A;
	}
	.test tr:nth-child(5) td.sub,
	.test tr:nth-child(9) td.sub,
	.test tr:nth-child(14) td.sub{
		background-color:#fffbcf;
	}	
}

@media screen and ( max-width:840px) {
	/*----------実施要項---------*/
	.details_outbox {
		display: block;
		margin: auto;
		text-align: center;
	}
	.details_box.lft,
	.details_box.rit{
    	width: 100%;
		margin: auto;
	}
	.details_box_point {
    	display: block;
		margin-bottom: 25px;
	}
	.details_result .note {
		margin: -30px auto 30px;
		text-align: center;
	}
	.details_sml_wrap .wrap_pack {
		width:360px;
    	margin: 5px auto;
	}
	.details_apply .itnt {
		text-align: center;
	}
	.details_attention h3 {
		text-align: center;
	}
}


@media screen and (max-width: 767px) {
/*
============================================================
コンテンツ　スマホ上書き
============================================================
*/

/* ---------------------------------------------------------
■ トップへ戻るボタン
--------------------------------------------------------- */
	#page-top {
    	bottom: 5px;
    	right: 5px;
	}
	
/*-------------------------------------
			テーブル一括指定
---------------------------------------*/

 	table{
		font-size:12px;
	}
	
	.test table td span.tb_90{
		transform:rotate(90deg);
		display: inline-block;
		margin:0 0 2px -3px;
	}
	
/*----------メインビジュアル---------*/	
	.visual_area{
		background: none;
	}
	
	.visual_area h1{
		padding:0;
	}
	
	.visual_area img{
		width:100%;
		max-width:none;
	}
	
/*----------リード文---------*/
	.lead_wrap{
	display: block;
	flex-direction: row;
}
	.lead_text_box {
		width:100%;
		padding: 20px 30px 0;
	}
	.lead_mv_box {
		width: 100%;
		padding: 20px 30px 0;
	}
	
	.lead_wrap_single h2{
		font-size:30px;
	}
	.lead_wrap_single p{
		font-size:100%;
	}
	
/*----------リンクボタン---------*/
	.btn_area_apply {
		margin: 40px auto;
	}
	
	.btn_area_link {
		margin: 25px auto;
		display: block;
	}
	.btn_area_link a{
		width:auto;
		margin:10px;
		padding: 5px 20px;
		position: relative;
	}
	
	.btn_area_link a:before{
		content: "";
		position: absolute;
		top:10px;
		left:20px;
		width:10px;
		height:10px;
		border-bottom:#fff 2px solid;
		border-right:#fff 2px solid;
		transform: rotate(45deg);
		transition: .2s;
	}

/*----------特徴---------*/
	.feature_wrap {
		display: block;
	}
	
	.feature_wrap .inner_img,
	.feature_wrap .inner_text{
    	width: 90%;
    	padding:0;
		margin:auto;
		z-index: 12;
	}
	
	.feature_wrap.fst::after,
	.feature_wrap.scd::after,
	.feature_wrap.trd::after{
    	top:auto;
		bottom:0;
		font-size: 210px;
	}
	.feature_wrap.scd::after{
		bottom:15px;
	}

/*----------特徴 2 先生紹介---------*/
	.feature_box .online {
    	display: block;
	}
	
	.feature_box .online .wrap{
		padding:5px 20px;
	}
	

/*----------実施時間割---------*/

	.table_twin {
		display: block;
		width: 84%;
		padding-bottom: 0;
	}
	
	.time_table .table_box.lft,
	.time_table .table_box.rit{
		margin: 0 auto 15px;
	}
	
	.course {
		font-size:16px;
		padding:5px 45px;
		letter-spacing: 0.04em;
		position: relative;
	}
	
	.course:after{
		content: "";
		position: absolute;
		top:17px;
		left:20px;
		width:10px;
		height:10px;
		border-bottom:#fff 3px solid;
		border-right:#fff 3px solid;
		transform: rotate(45deg);
		transition: .2s;
	}
	
	.course.mov:after{
		top:19px;
		transform: rotate(-135deg);
		transition: .2s;
	}
	
	.time_table .table_box .box{
		display: none;
	}
	
	.table_box .tips, .table_box .attn {
		max-width:none;
		width:90%;
		margin: 25px auto;
	}
	
/*----------受験会場---------*/
	.location ul li a span {
		display: block;
	}
	
/*----------流れ---------*/
	.step_inner.ex{
		display:block;
		margin-right: 30px;
	}
	.step_inner.ex .ex_inner {
    width: 100%;
}
	.step_inner.ex .ex_inner p {
    margin-bottom: 0;
}
	
	#step a{
		margin:10px auto 20px;
	}
	
}


/* ---------------------------------------------------------
■ アイフォン対応
--------------------------------------------------------- */

.lead_wrap_single p br.tb-559{display:none;}

@media screen and (max-width: 599px) {
	.lead_wrap_single p br.tb-559{
		display:inline;
	}
}

@media screen and (max-width: 520px) {
	
	
	.lead_area{
		margin: 25px auto;
	}
	
	.feature_box h3 {
		line-height: 1.4em;
		padding-bottom: 8px;
		font-size:23px;
	}
	
	.lead_wrap_single {
		padding:0 30px;
	}
	.lead_wrap_single p{
		text-align: left;
		margin-bottom: 10px;
	}
	.lead_wrap_single p br,
	.lead_wrap_single p br.tb-559{
		display:none;
	}
	

/*----------申し込みボタン---------*/
	.btn_area_apply a {
		font-size:22px;
		line-height: 1.3em;
	}
	
/*----------特徴 2 先生紹介---------*/
	.feature_box .online .wrap{
		display: block;
	}
	.feature_box .online .wrap .inner_img{
		width: 210px;
		margin: auto;
	}
	.feature_box .online .wrap .inner_text{
    	width: 100%;
	}
	
	.feature_box .online .wrap .inner_text p{
    	padding: 10px 0;
	}
	

/*----------特徴---------*/
	
	#feature h2 {
		padding: 40px 20px 10px;
		line-height: 0;
	}
	
	.details_box h3 {
		display:block;
	    padding: 6px 20px 2px;
		font-size: 26px;
		line-height: 1.2em;
	}
	.details_box nobr{
		line-height: 3em;
	}
	
	.details_box.lft, .details_box.rit {
		width: 90%;
		margin: auto;
	}
	.date.main time {
		font-size: 80px;
	}
	
	.details_box h4:not(.inner_h4) {
		display: block;
		padding: 4px 12px 2px;
		font-size: 18px;
		line-height:1.3em;
	}
	
	.date time, .details_time_wrap time,
	.details_time_wrap p{
		font-size:60px;
	}
	
	time.t_m {
		display: inline-block;
		font-size: 40px;
		margin-top: -10px;
	}
	
	.details_box_point {
		display: block;
		margin-top: 4px;
	}

	.details_result .note {
		margin: -15px auto 30px;
		text-align: center;
	}
	
	.details_sml_wrap .wrap_pack {
		display:block;
    	width: 100%;
	}
	.details_sml_wrap .wrap_pack .stdt {
    width: calc(100% - 2px);
}
	
	.details_sml_wrap .wrap_pack p {
    padding: 4px 0 2px;
    font-size: 28px;
		text-align: center;
}
	
	.apply_btn a {
		font-size:18px;
		padding: 4px 30px 4px 14px;
		letter-spacing: -0.05em;
		line-height: 1.4em;
	}
	.apply_btn a::after{
		top:8px;
		right:12px;
        width: 14px;
    	height: 14px;
	}
	
	.details_location a {
		font-size:18px;
	}
	
	.details_location a::after {
		top: 6px;
	}

	.details_attention h3{
		font-size: 22px;
		padding:10px 10px;
		border-left:var(--main-color) 6px solid;
		border-right:var(--main-color) 6px solid;
	}
	.details_attention h3:before,
	.details_attention h3:after{
		content: none;
	}
	.details_attention p {
		padding: 5px 20px 20px;
		font-size:13px;
		line-height: 1.4em;
	}
	
	
/*----------実施要項---------*/
	
	#details h2{
		padding: 25px 20px 0;
	}
	
/*----------申込型・試験科目---------*/
	.test h2 {
		font-size: 24px;
		letter-spacing: 0;
	}
	.test h2:before {
		width: 24px;
		height: 24px;
		margin: 0 15px -3px 0;
	}
	
	
/*----------出題範囲---------*/
	
	#range h2 {
		font-size: 24px;
		letter-spacing: 0;
	}
	#range h2:before {
		width: 24px;
		height: 24px;
		margin: 0 15px -3px 0;
	}
	
/*----------実施時間割---------*/
	.time_table h2 {
		font-size: 24px;
		letter-spacing: 0;
	}
	.time_table h2:before {
		width: 24px;
		height: 24px;
		margin: 0 15px -3px 0;
	}
	
/*----------受験会場---------*/
	.location{
		margin:0 auto 15px;
	}
	.location ul li a {
		font-size:13px;
	}

/*----------流れ---------*/
	#step h2 {
		line-height: 1.2em;
		font-size: 28px;
	}
	
	.method_step {
		display: block;
		width:90%;
		margin:0 auto;
		border: var(--main-color) 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%;
	}
	
	
/*----------FAQ---------*/
	#faq h2{
		font-size:30px;
	}
	#faq h3.title::before {
		bottom: 12px;
	}
	
/*----------フッター---------*/
	footer {
    padding: 30px 0 50px;
}
	
	footer .logo{
		min-width:auto;
		width:80%;
	}
	
   }