@charset "utf-8";

@media screen and (max-width: 960px) {
		
/* ---------------------------------------------------------
■ 学年選択
--------------------------------------------------------- */
	.select_list ul{gap:13px;}
	.select_list ul li{width: calc((100% - 13px) / 2);}
	.select_list ul li a{font-size: 22px;padding:13px 0;border-radius:8px;}
	.select_list ul li a::after{
		width:15px;height:12px;
		left:auto;bottom:auto;
		right:15px;top:50%;
		transform:translateY(-50%);
	}
	
}

@media screen and (max-width: 767px) {
/*
============================================================
佐鳴予備校2022年夏期講座　スマホ上書き
============================================================
*/
.pc{display: none;}
.pc_only{display: none;}
.tb{display: block;}
.sp{display: block;}



header {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
  background-color: #002b69;
  overflow: hidden;
  padding: 8px;
}

/* ---------------------------------------------------------
■ first-view
--------------------------------------------------------- */




/* ---------------------------------------------------------
■ information
--------------------------------------------------------- */

section{clear: both;}
/*
iframe#information{
  height: 220px;
  
}
*/

/* ---------------------------------------------------------
■ CONTENTS
--------------------------------------------------------- */

.box_contents{
  width: 90%;
  margin: 0 auto;
  padding: 2%;
  overflow: hidden;
}

h3{text-align: center;}
h3 img{
  width: 100%;
  margin: auto;
}

.left{
  width: 100%;
  margin-left:0%;
  float:none;
}
.right{
  width: 100%;
  margin-right: 0%;
  text-align: center;
  float:none;
}

a.text_link_blue {
	padding:15px 25px;
}
a.text_link_pink {
	padding:15px 15px;
}
a.text_link_yellow {
	padding:15px 15px;
}

p.big {
  font-size: 120%;
  font-weight: bold;
  color: #424242;
  margin-bottom: 10px;
}

/* ---------------------------------------------------------
■ section#about
--------------------------------------------------------- */
section#about{
  padding: 30px 0;
}
section#about .box_contents p{
  text-align: center;
  font-size: 16px;
}
section#about .box_contents h2{
  font-size: 21px;
  margin-bottom: 0;
}
section#about .left{
  margin-bottom: 0;

}
section#about .right{
}


/* ---------------------------------------------------------
■ slider
--------------------------------------------------------- */

section#slider{
  padding: 30px 0;
}
section#slider h3{
  text-align: center;
  margin-bottom: 15px;
}
.autoplay-slider {
  display: flex;
  min-width: 100%;
  width: min-content;
  animation: 40s linear infinite sliderAnimation;
}
.slide {
  width: 280px;
  height: 190px;
  margin: 0 20px;
  position: relative;
}
.slide img{
  /*border-radius: 15px;
  border: solid 8px #ffffff;*/
}
@keyframes sliderAnimation {
  100% {
    transform: translateX(-50%);
  }
}

/* ---------------------------------------------------------
■ section#eljr
--------------------------------------------------------- */
section#eljr{
  margin-top: 30px;
}
section#eljr .box_contents{
  overflow: visible;
}
section#eljr .left{
  position: unset;
  margin-left: 10px;
  margin-top: 20px;
}
section#eljr .left img{
  position: unset;
}
section#eljr .right{
  margin-top: 0px;
}

/* ---------------------------------------------------------
■ section#jrhi
--------------------------------------------------------- */
section#jrhi{
  margin-top: 30px;
}
section#jrhi .box_contents{
  overflow: visible;
}
section#jrhi .right{
  position: unset;
  margin-left: -5px;
  margin-top: 20px;
}
section#jrhi .right img{
  position: unset;
}
section#jrhi .left{
  margin-top: 0px;
}

/* ---------------------------------------------------------
■ section.banner-area
--------------------------------------------------------- */
section.banner-area{
  width: 90%;
  margin: 0 auto;
  padding: 2%;
  overflow: hidden;
  margin-top: 30px;
}
section.banner-area h3{
  text-align: center;
  font-size: 22px;
}


/* ---------------------------------------------------------
■ section.campaign-area
--------------------------------------------------------- */
section.campaign-area{
  padding-bottom: 20px;
  margin: auto;
  /*

  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  */
}
section.campaign-area .left{
  width: 100%;
  margin-right: 0;
  float: none;
}
section.campaign-area .right{
  width: 100%;
  float: none;
}
section.campaign-area a img{
  margin-top: 10px;
  filter: drop-shadow(0px 2px 7px rgba(0,0,0,0.3));
}
section.campaign-area p{
  font-size: 80%;

}

/* ---------------------------------------------------------
■ section#sanasta
--------------------------------------------------------- */
section#sanasta h2{
}
section#sanasta .box_contents{
  overflow: visible;
}
section#sanasta .left{
  position: unset;
  margin-left: 10px;
  margin-top: 20px;
}
section#sanasta .left img{
  position: unset;
}
section#sanasta .right{
  margin-top: 0px;
}

/* ---------------------------------------------------------
■ section#kobetsu
--------------------------------------------------------- */
section#kobetsu .box_contents{
  overflow: visible;
}
section#kobetsu .right{
  position: unset;
  margin-left: -5px;
  margin-top: 20px;
}
section#kobetsu .right img{
  position: unset;
}
section#kobetsu .left{
  margin-top: 0px;
}


/* ---------------------------------------------------------
■ section#hischool
--------------------------------------------------------- */
section#hischool{
  margin-top: 30px;
  margin-bottom: 30px;
}
section#hischool h2{
}
section#hischool .box_contents{
  overflow: visible;
}
section#hischool .left{
  position: unset;
  margin-left: 10px;
  margin-top: 20px;
}
section#hischool .left img{
  position: unset;
}
section#hischool .right{
  margin-top: 0px;
}

/* ---------------------------------------------------------
■ section#entry
--------------------------------------------------------- */
section#entry{
  margin-top: 30px;
}







/* ---------------------------------------------------------
■ トップへ戻るボタン
--------------------------------------------------------- */
#page-top {
	display: none;
}

/* ---------------------------------------------------------
■ フッター
--------------------------------------------------------- */
footer {
	width: 100%;
	margin: 20px 0 0;
	text-align: center;
  background-color:#002B69;
}

/* ---------------------------------------------------------
■ comingsoon
--------------------------------------------------------- */
/*#comingsoon{
  width: 80%;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
}*/


/* ---------------------------------------------------------
■ ライトボックス
--------------------------------------------------------- */
.lightbox img{ 
	width: 100%;
}
    
 	




/* ---------------------------------------------------------
■ 2022
--------------------------------------------------------- */
section {
  margin-top: 50px;
  margin-bottom: 80px;
}
h3 {
  text-align: left;
}
p{
  font-size: 14px;
}
.content-text p{padding:0 4vw;}

.contents_01, .contents_02{
  display: block;
}
p.big{
  font-size: 18px;
  margin-bottom: 5px;
}
header img {
  width: 180px;
}
.contents_01 .content-text{
  padding-right: 0;
}
.contents_02 .content-text{
  padding-left: 0;
}
.content-text{
  width: 100%;
  margin-top:-1px;
}
.content-img{
  width: 100%;
}
.detail {
  display: block;
  margin-bottom: 1em;
}
.detail-link{
  width: 100%;
  margin-bottom: 10px;
  padding-right: 0;
}

.link-button{
  text-align: left;
  padding: 10px;
  min-width: auto;
  font-size: 19px;
  width: 90%;
  line-height: 1.2;
}
.content-img img{
  box-shadow: none;
}


.head-02.open {
  transform: translateX(0px);
}
.head-wrap {
  height: 35px;
  padding-top: 0;
}

#btn-area{
  margin-top: 0px;
}
.text-link{
  font-size: 16px;
  margin-top: 0px;
  margin-bottom: 5px;
}
#mv_area{
  margin-top: 0!important;
  margin-bottom: 20px!important;
}
#heijitsu{
  margin-top: 0!important;
}
#kobetsu h3{
  width: auto;
}
h3 img {
  width: 100%;
}
#kobetsu h3 img {
  margin: 0 auto 0 0;
}
#chikara h3 img{
  width: 100%;
}
.detail{
  margin-top: 20px;
}
.head-nav .head-logo{
  width: 190px;
}
.detail-link__text h4{
  font-size: 130%;
}

.btn_push{
  width: 100%;
  font-size: 17px;
  border-radius: 35px;
  padding: 12px;
  margin-top: 30px;
}
.btn_push:after{
  right: 8%;
}
.pc.push-dot{
  display: none;
}
#koutoubu{
  margin-bottom: 20px!important;
}

/*さなる個別のみ適応・キャンペーンのバナー追加時コード削除↓*/
#kobetsu .btn_push{
  margin-top: 20px;
}
/*さなる個別のみ適応・キャンペーンのバナー追加時コード削除↑*/

.detail_button.triple a{
	width: 95%;line-height: 1.2em;padding:15px 25px 10px;
}
	
.detail_button li{width:100%;max-inline-size:350px;}
a.text_link_blue{display: block;width:100%;box-shadow: 0px 0px 6px 3px #e8e8e8;}
.detail_button {margin: 20px auto;row-gap: 13px;}

	
}

@media screen and (max-width: 580px) {
	.before_box {font-size:4.5vw;padding:4vw 0;height:30vh;}
	
	
/* ---------------------------------------------------------
■ 学年選択
--------------------------------------------------------- */
	
	section.select {margin-top:0;margin-bottom: 10vw;}

	.select_box{padding: 35px 20px 20px;}
	
	.course_flex{padding:23px 50px 0 0;}
	.rtl .course_flex{padding: 23px 0 0 50px;}
	
	.select_text{line-height:1.2em;}
	
	.select_list ul li{width:100%;}
	.select_list ul li a {
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		gap:2px;
        font-size:16px;
		letter-spacing:0.05em;
        padding: 4px 5px;
        border-radius: 8px;
		text-shadow: 1px 1px 3px rgba(25, 50, 89, .25);
    }
	.select_list ul li a::after {width: 13px;height: 10px;}
	.select_list ul li a span{width:auto;margin:auto 0;}
	.select_list ul li a span.min{padding-top:.2em;}
	
	.select_list ul li a svg{margin: 3px 0 0 auto;width:20px;}
}

@media screen and (max-width: 374px) {
	.select_list ul li a{justify-content:flex-start;}
	.select_list ul li a svg{display:none;}
}