@charset "utf-8";

@media screen and ( max-width:1300px) {
	
	.point_wrap{gap:20px;}
	.point_inner:nth-child(3){width:calc(55% - 20px);}
	.point_iner_list {padding: 45px 10px 15px;}
	
	.contents_button_list ul li a h3{font-size:34px;}
	
	.campaign_inner::before{top: -50px;}
	.campaign_inner::after{top:19px;}
}

@media screen and ( max-width:1200px) {
	
	.point_iner_list h3{font-size:22px;}
	
	.contents_button_list ul li a h3{font-size:30px;padding-bottom: 5px;}
	
	.school_wrap ul li a > div span{font-size:12px;}
}

@media screen and ( max-width:1150px) {
	
	.movie_main{max-width:900px;}
	
	.briefing_banner{max-width:900px;}
	.briefing_banner a{font-size: 70px;}
	
	
	.campaign_inner_h3box h3::after{bottom:-21px;}
	
	
}

@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;
	}
	
	/* ---------------------------------------------------------
	■ MV
	--------------------------------------------------------- */
	.mv_period_title{font-size:50%;}
	.mv_period_date{line-height:1.2em;}
	
	/* ---------------------------------------------------------
	■ 導入文
	--------------------------------------------------------- */
	.intro_wrap{padding-bottom:0;}
	.intro_inner_text{width:100%;}
	.intro_inner_h2box h2{font-size:45px;}
	.intro_inner_img{margin:auto;width:55%;}
	.intro_inner_imgwrap{
		width:100%;
		height:auto;
		aspect-ratio:1 / 1;
		overflow: hidden;
		padding: 10% 10% 0;
	}
	.intro_inner_imgwrap img[src*="sub"]{top:2%;transform:rotate(10deg);}
	.intro_inner_imgwrap img[src*="main"] {width:100%;}
	
	
	/* ---------------------------------------------------------
	■ 公開説明会ボタン
	--------------------------------------------------------- */
	.briefing_banner_area {padding: 80px 20px 20px;}
	.briefing_banner {max-width: 700px;}
	.briefing_banner a{font-size:50px;}
	
	
	/* ---------------------------------------------------------
	■ 動画エリア
	--------------------------------------------------------- */
	.movie_box {padding: 80px 30px 130px;}
	
	/* ---------------------------------------------------------
	■ ここがすごい
	--------------------------------------------------------- */
	
	.point_wrap{max-width:760px;}
	.point_inner:nth-child(2){width:100%;}
	.point_inner:nth-child(3){width:100%;}
	
	.point_inner_h2box h2::after{bottom: -14.5px;}
	.point_iner_list{margin:auto;max-width:600px;}
	
	
	/* ---------------------------------------------------------
	■ 受講コース
	--------------------------------------------------------- */
	.tab_content{padding:20px;}
	
	/* ---------------------------------------------------------
	■ コンテンツ紹介
	--------------------------------------------------------- */
	
	.course_area{padding-bottom:100px;}
	.contents_button_list ul li {width: calc((100% - (20px * 1)) / 2);}
	.contents_main h2{font-size:54px;line-height:1.2em;padding-bottom:10px;}
	.contents_button_list ul li a[href*="reading_power"] h3{transform:none;}
	
	/* ---------------------------------------------------------
	■ 申し込みの流れ
	--------------------------------------------------------- */
	.flow_list_cts{width:calc(100% / 3);}
	.flow_list_cts:first-child, .flow_list_cts:last-child{display:none;}
	
	
	/* ---------------------------------------------------------
	■ キャンペーン
	--------------------------------------------------------- */
	.campaign_inner_h3box h3{line-height:1.1em;}

	
	/* ---------------------------------------------------------
	■ 開校校舎
	--------------------------------------------------------- */
	.school_wrap ul{gap:0 20px;}
	.school_wrap ul li{width:calc((100% - 40px)/ 3);}
	.school_wrap ul li a h4{width:100%;}
	.school_wrap ul li a > div{padding:4px 0 0 1.7em;}

}


@media screen and (max-width: 950px) {
	header .wrapper {padding: 0 20px;}
	
	
	.point_inner:nth-child(2) .point_iner_list{max-width:400px;}
	.point_inner:nth-child(3) .point_iner_list{max-width:500px;}
	
	
	.course_box img[src*="course_img"]{width:180px;top:-80px;right: -25px;}
	
	/* ---------------------------------------------------------
	■ 申し込みの流れ
	--------------------------------------------------------- */
	.flow_list{margin:auto; max-width:530px;}
	.flow_list_cts{
		width:100%;
		padding-bottom:10px;
		margin-bottom:20px;
		background-color:#fff;
		border:3px solid #ffaa09;
		border-radius:0 20px 20px 20px;
	}
	.flow_list_cts:nth-child(2){margin-top:0;}
	.flow_list_cts:nth-child(3){margin-top:0;}
	.flow_list_cts:nth-child(4){margin-top:0;}
	.flow_list_cts::before{content:none;}
	
	.flow_list_cts_num{left:0;}
	.flow_list_cts:nth-child(3) .flow_list_cts_num{top:0;}
	.flow_list_cts:nth-child(4) .flow_list_cts_num{top:0;}
	
	.flow_list_border{display:none;}
	.flow_list_cts_text{min-height:auto;padding:10px 30px;}
	.flow_list_cts_text::after{content:none;}
	
	/* ---------------------------------------------------------
	■ キャンペーン
	--------------------------------------------------------- */
	
	.campaign_inner_h3box h3::after {bottom: -17px;}
	.campaign_inner::before{font-size:28px;top: -20px;padding:10px 25px;}
	.campaign_inner::after{top:28px;left:60px;}
	
	.campaign_inner_h3box h3{font-size:55px;}
	
	.campaign_main{display:flex;flex-wrap:wrap;}
	.campaign_main > br{display:none;}
	.campaign_main span{display:block;}
	
	.campaign_main.chikara span{width:100%;}
	.campaign_main.chikara span:nth-child(4){line-height:1.2em;}
	
	.campaign_main.hi{justify-content:center;}
	.campaign_main.hi span:nth-child(1){width:100%;padding-bottom:15px;}
	.campaign_main.hi span:nth-child(4){width:100%;padding-top:20px;}
	
	.campaign_main.hi span.small{margin-top:auto;line-height:1.8em;}
	
	.school_box{padding:50px 30px 80px;}
	
	.sns_text {width:46%;margin-right:3%;}
	.sns_text div p.sns_bold{font-size: 46px;}
	.sns_text div p.sns_small{padding-bottom:10px;}
	
}

@media screen and (max-width: 860px) {
	
	.top_link{margin-left: 6px;padding: 8px 6px;}
	
	.head_apply_btn a span:nth-child(1){width:25px;}
	.head_apply_btn a span:nth-child(2) {width: calc(100% - 30px);}
	
	.school_wrap ul li{width:calc((100% - 20px)/ 2);}
}

@media screen and (max-width: 767px) {
	
	
/*----------ヘッダー---------*/
	header .wrapper {
  		height: 50px;
		padding: 0 5px;
		justify-content: space-between;
	}
	.sanaru_logo img{
		height: 35px;
		width:auto;
	}
	.top_link{
		display: none;
	}
	
	.head_apply_btn{margin: auto 40px auto auto;}
	.head_apply_btn a{padding:1px 12px;}
	.head_apply_btn a span:nth-child(1){width:18px;}
	.head_apply_btn a span:nth-child(2){width:calc(100% - 18px - 5px);}
	
/*-------MVエリア 767px--------*/
	.top_mv{padding-top:50px;}
	
	
	.applybtn_box a{font-size:4.2vw;padding: 15px 20px;}
	
/* ---------------------------------------------------------
■ 導入文
--------------------------------------------------------- */
	.intro_box{padding: 60px 5vw 0;}
	.intro_wrap{padding:40px 6vw 0;}
	.intro_inner_h2box{padding:0 5vw;}
	.intro_inner_h2box::before, .intro_inner_h2box::after{width:5vw;border-width:1.8vw;}
	.intro_inner_h2box h2{font-size:6.8vw;}
	.intro_inner_textbox {padding:25px 0;}
	.intro_inner_textbox p{font-size: 20px;}
	.intro_inner_img{width:78%;}
	
	
/* ---------------------------------------------------------
■ 公開説明会バナー
--------------------------------------------------------- */
	.briefing_banner_area{padding:10vw 5vw 0;}
	.briefing_banner a{font-size:6.6vw;}
	.briefing_banner a::after{right:.5em;width:.9em;}
	.briefing_banner a div:nth-child(1){width:72%;margin:-.8em auto 0 0;padding-left:6%;}
	.briefing_banner a div:nth-child(2){width:100%;text-align:left;padding-left:6%;}
	.briefing_banner a div:nth-child(3){justify-content:flex-start;padding-left:6%;}
	
	
/* ---------------------------------------------------------
■ 動画エリア
--------------------------------------------------------- */
	.movie_box {padding: 10vw 5vw 15vw;}
	.movie_title{font-size:4.5vw;}

	
/* ---------------------------------------------------------
■ ここがすごい
--------------------------------------------------------- */
	.point_box{padding:12vw 5vw;}
	.point_wrap > img[src*="point_img"]{top:-25vw;width:30vw;}
	
	.point_inner{padding:30px 4vw;}
	.point_iner_list h3{font-size:20px;}

	
/* ---------------------------------------------------------
■ コース例
--------------------------------------------------------- */
	
	.course_area{padding:11vw 5vw;}
	.course_box{padding:8vw 3vw;}
	
	.course_box h2{text-align:right;padding-right:140px;font-size:8.7vw;}
	.course_h2sub{text-align:right;padding-right:140px;}
	.course_box img[src*="course_img"]{top: -70px;right:-5vw;}
	
	
	.tab_item{padding:10px 0;border-radius:10px 10px 0 0;width: calc((100% - (10px * 4)) / 5);font-size:2.5vw;letter-spacing:-.03em;}
	.tab_container{gap: 5px 10px;}
	.tab_container input:checked + .tab_item{padding-top:.9em;padding-bottom:.9em;}
	.tab_content{padding:10px;border-radius:15px;}
	
	.tab_content#tab1_content{border-radius:0 15px 15px 15px;}
	.tab_content#tab5_content{border-radius:15px 0 15px 15px;}
	
	
	
/* ---------------------------------------------------------
■ コンテンツ紹介
--------------------------------------------------------- */
	.contents_area{padding: 0 5vw 10vw;}
	.contents_box{padding:8vw 3vw;}
	.contents_main h2{font-size:7vw;line-height:1.4em;}
	
	.contents_h2sub{font-size:4vw;}
	
	.contents_button_list ul{max-width:500px;margin: auto;}
	.contents_button_list ul li{width:100%;}
	
	
/* ---------------------------------------------------------
■ 声
--------------------------------------------------------- */
	.voice_list_box{max-width:600px;}
	.voice_inner{width:100%;}
	
	
/* ---------------------------------------------------------
■ 申し込み方
--------------------------------------------------------- */
	.flow_box {padding:50px 30px;}
	
/* ---------------------------------------------------------
■ キャンペーン
--------------------------------------------------------- */
	.campaign_inner_h3box h3 {font-size:7vw;}
	.campaign_inner_h3box h3::after {bottom: -12px;}
	
	.campaign_inner_target{font-size:21px;}
	
	.campaign_main.hi span:nth-child(2){font-size:1.9em;}
	
	
/* ---------------------------------------------------------
■ 開校校舎
--------------------------------------------------------- */
	.school_wrap{width:100%;}
	.school_wrap ul li{width:100%;}
	.school_wrap ul li a h4{width:auto;}

	
/*----------Instagram 767px---------*/
  .inst_btn {
	  display: block;
	  width:100%;
	}
	.sns_text {
	    width: 100%;
    	margin:0 auto 20px;
	}
	.sns_text div {
		display: block;
		max-width: 320px;
		position: relative;
		height:auto;
		border: none;
		margin: auto;
	}
	.sns_text div::before {
		content: "";
		position: absolute;
		text-align: center;
		bottom: 0;
		left: 0px;
		height: 80%;
		width: 10px;
		border-left: 3px solid #333;
		transform: skewX(26deg);
	}
	.sns_text div::after {
		content: "";
		position: absolute;
		text-align: center;
		bottom: 0;
		right: 0px;
		height: 80%;
		width: 10px;
		border-right: 3px solid #333;
		transform: skewX(-26deg);
	}
	.sns_text div p.sns_small {
		padding-bottom: 10px;
	}
	.inst_btn a {
		max-width: 500px;
		width: 100%;
	}
	
	
}


@media screen and (max-width: 580px) {
	
	.head_apply_btn a{padding:1px 8px;}
	
	
/*----------MVエリア----------*/
	.mv_period{padding:5vw;}
	.mv_period_wrap{
		display:flex;
		flex-wrap:wrap;
		justify-content: center;
		gap:1.5vw 0;
		font-size:9.5vw;
	}
	.mv_period_date {line-height: 1.1em;padding-top:1vw;}
	.mv_period_note {font-size: 43%;}
	
/*----------導入文----------*/
	.intro_box{padding:8vw 5vw 0;}
	.intro_wrap{padding:6vw 5vw 0;}
	.intro_inner_textbox{padding:3vw 0 2vw;}
	.intro_inner_textbox p{font-size: 16px;line-height:1.4em;}
	.intro_inner_img{width:100%;}
	
/*----------ボタン----------*/
	.briefing_banner a{padding: .2em 0 .5em;padding-right: 1.6em;filter: drop-shadow(1.8vw 1.8vw 0 rgba(200, 140, 0, .6));}
	.briefing_banner a::after {width: 1.2em;}
	.briefing_banner a div:nth-child(1) {width: 100%;margin:-1.3em auto -.2em 0;padding-left:0;text-align:center;}
	.briefing_banner a div:nth-child(2) {font-size:.65em;margin-top:-.3em;padding-left:0;text-align:center;}
	.briefing_banner a div:nth-child(3) {line-height: 1.2em;}

/*--------------------*/
	.movie_box{padding:10vw 5vw 18vw;}
	.movie_title{margin:1.5vw auto 0;font-size:6vw;line-height:1.2em;padding:2vw 5vw;}
	.movie_title span{display:block;}
	
/*--------------------*/
	.point_wrap > img[src*="point_img"]{top: -34vw;width:38vw;}
	.point_box {padding:16vw 5vw 6vw;}
	
	.point_inner_h2box::before, .point_inner_h2box::after{width:50%;}
	.point_inner_h2box h2{font-size:7vw;line-height:1.1em;padding-bottom:3vw;}
	.point_inner_h2box h2::after {content:none;}
	
	.point_iner_list{padding:5vw 2vw 0;}
	.point_inner{padding:7vw 4vw;}
	.point_inner:nth-child(2) .point_iner_list{max-width:none;}
	.point_iner_list li {padding-bottom:5vw;}
	.point_iner_list h3{font-size:4.8vw;}
	.point_iner_list h3 br.phone{display:inline;}
	.point_iner_list h3::before{top:0;transform:none;}
	
/*--------------------*/
	.course_box img[src*="course_img"]{width:38vw;top:-9vw;z-index:0;}
	.course_box h2{padding-right: 24vw;line-height:1.2em;}
	.course_h2sub{padding-right:0;text-align:left;padding-left:calc(100% - 76vw);font-size:3vw;}
	
	.course_wrap{position: relative;z-index:3;}
	.tab_container{padding:3vw 0 0;gap: 5px 3px;}
	
	.tab_item{
		width: calc((100% - (3px * 4)) / 5);padding:8px 0;
		border-width:2px;
	}
	.tab_container input:checked + .tab_item {
		padding-top: 8px;
		padding-bottom:16px;
	}
	#tab1:checked ~ .tab_item[for="tab1"]::after, #tab2:checked ~ .tab_item[for="tab2"]::after, #tab3:checked ~ .tab_item[for="tab3"]::after, #tab4:checked ~ .tab_item[for="tab4"]::after, #tab5:checked ~ .tab_item[for="tab5"]::after{
		border-width:0 2px;left: -2px;height: 15px;bottom: -9px;
	}
	
	.tab_content{padding:3px;border-width:2px;}
	
	.course_note{text-align:left;font-size:3.5vw;padding: 2vw 2vw 4vw;}
	
/*--------------------*/
	.applybtn_box{gap:5vw;}
	.applybtn_box a{padding: 4vw 2vw;}
	
/*--------------------*/
	.contents_area {padding: 0 5vw 20vw;}
	.contents_h2sub{padding-bottom:2vw;font-size:4.5vw;}
	
	.contents_button_list ul{gap:0;}
	.contents_button_list ul li{padding:2.5vw 0;}
	.contents_button_list ul li a{padding:2vw;position:relative;}
	.contents_button_list ul li a::after {
		content: "";
		position: absolute;
		top: 46%;
		right: 3vw;
		width: 10px;
		height: 10px;
		border-bottom: #fff 2px solid;
		border-right: #fff 2px solid;
		transform: rotate(-45deg) translateY(-50%);
		}
	.contents_button_list ul li a h3{font-size:6vw;}
	.contents_button_list ul li a > div{font-size:3.8vw;}
	
/*--------------------*/
	
	.voice_box{padding:0 5vw 14vw;}
	
	.voice_box h2{margin-bottom:3vw;}
	.voice_box h2 img {margin-top: -10vw;}
	
	.voice_list_box{gap:20px;}
	
	.voice_inner{padding:15px;}
	.voice_inner_head{gap:7px;}
	.voice_inner_img {width: calc(25% - 7px);}
	.voice_inner_head h3{font-size:20px;}
	.voice_inner_head h3 span:nth-child(3) i{letter-spacing:-.02em;}
	.voice_inner_text h4{font-size:18px;line-height:1.3em;}
	
	.voice_btn_area{padding:8vw 0 0;}
	
	
/*--------------------*/
	.flow_box{padding:0 5vw ;}
	.flow_main{padding-top:10vw}
	
	.flow_main h2{font-size:9vw;line-height:1.2em;}
	.flow_list{padding:3vw 0 0;}
	.flow_list_cts_img{width:50%;}
	.flow_list_cts:nth-child(2) .flow_list_cts_text{margin-top:-5vw;}
	
	
/*--------------------*/
	.campaign_box{padding:10vw 5vw 0;}
	
	.campaign_box h2{font-size:8vw;padding-bottom:9vw;}
	
	.campaign_inner{padding:8vw 5vw 4vw;}
	
	.campaign_inner::before{left:50%;transform:translateX(-50%);font-size:18px;padding:5px 25px;}
	.campaign_inner::after{content:none;}
	
	.campaign_inner_h3box::before, .campaign_inner_h3box::after{width:50%;}
	.campaign_inner_h3box h3::after{display:none;}
	
	.campaign_inner_period{line-height:1.2em;padding:2vw 0;}
	
	.campaign_inner_text{padding:3vw 0 0;}
	.campaign_inner_target {font-size: 20px;}
	.campaign_main{font-size:8vw;}
	
	.campaign_main.chikara{padding:3vw 0 0}
	
	.campaign_main.hi{padding:3vw 0 0}
	.campaign_main.hi span:nth-child(1){padding:0;}
	.campaign_main.hi span:nth-child(2){font-size: 1.7em;}
	.campaign_main.hi span.small{line-height:2em;}
	.campaign_main.hi span:nth-child(4){padding-top:3vw;}
	
	.campaign_inner_note{padding:4vw 3px;}
	.campaign_inner_note p{font-size:12px;}
	
	.campaign_btn_area{padding:6vw 0 0;}

	
/*--------------------*/
	.school_box{padding:12vw 5vw 8vw;}
	.school_main{padding:8vw 5vw;gap: 25px;}
	
	.school_wrap h3{font-size:17px;}
	.school_wrap ul li a{padding:6px 2px;}
	.school_wrap ul li a h4{font-size:15px;padding-left: 1em;letter-spacing:-0.07em;}
	.school_wrap ul li a > div{gap:2px;width:auto;padding:0;}
	.school_wrap ul li a > div span{font-size:10px;padding: .2em 5px 0;}
	
	.inst_btn_area{padding:8vw 5vw;}
	.inst_btn{padding:20px 40px;margin:0 auto 20px;}
	
}


@media screen and (max-width: 520px) {
/* ---------トップへ戻るボタン----------- */
	#page-top {
		bottom:25px;
		right:10px;
	}

/*----------ヘッダー----------*/
	header .wrapper {
  		height: 42px;
	}
	.sanaru_logo img{
		height: 28px;
	}
	.top_link{
		font-size: 12px;
		border-width: 1px;
		padding:7px 16px;
		margin:0 20px 0 0;
	}
	
/*-------MVエリア 520px--------*/
	.top_mv{padding-top:42px;}
	
	

	
/*----------Instagram---------*/
	.sns_text div {
    	max-width: 280px;
	}
	.sns_text div p.sns_bold {
    	font-size: 35px;
	}
	
/*--------フッター------------*/
	footer {padding: 60px 0;}

	
}


@media screen and (max-width: 460px) {
	
	.point_inner_h2box h2::after {bottom: -19.5px;}
	
	.campaign_inner:nth-child(1) .campaign_inner_target{letter-spacing:-0.03em;}
}

@media screen and (max-width: 380px) {
	.point_inner_h2box h2::after {bottom: -17px;}
}

/* ---------------------------------------------------------
■ アイフォン（小）対応
--------------------------------------------------------- */
@media screen and (max-width: 374px) {
	
	.head_apply_btn a span:nth-child(1){display:none;}
	.head_apply_btn a span:nth-child(2){width:100%;font-size: 11px;}
	
	.top_link {
		font-size: 11px;
	    padding: 7px 10px;
		letter-spacing: 0;
   }
	
}