@charset "UTF-8";

html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,main2,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}img{max-width: 100%;}


/*BUTTON*/
.round_button {
	display:block ;
	width: 180px ;
	padding: 7px 0 9px 0;
  margin: 0 auto; /* ←センターにした */
	border-radius: 16px;
	text-align: center;
	transition-duration:0.375s;
  }
.round_button p {
	font-size: 20px;
	line-height: 14px;
	letter-spacing: 1px;
  }
.round_button_m {
  border:1px solid #FFF;
  background:#2c537d;
  }
.round_button_m p {
  color:#FFF;
  font-weight: 100;
  }
.round_button_m:hover {
  background:rgba(187, 187, 187, 0.603);
  }
.round_button_m:hover p {
  color:#FFF;
  font-weight:100;
  }



html {
font-size: 100%;
/* Adobeフォント：ここから */
font-family: dnp-shuei-mgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
/* Adobeフォント：ここまで */
}
body {
background-color: #fff;
color: #3e3a39;
}
a {
color: #3e3a39;
font-size: 15px;
text-decoration: none;
}
.subtitle{
display: block;
color: #003c80;
font-size: 24px;
line-height: 34px;
margin-top: 50px;
margin-bottom: 15px;
letter-spacing: 2px;
text-align: justify;/* 両端揃え(均等割り付け) */
}
.subtitle2{
display: block;
font-size: 17px;
line-height: 28px;
letter-spacing: 0.5px;
text-align: justify;/* 両端揃え(均等割り付け) */
}
.subtitle22{
display: block;
width: 34%;
font-size: 18px;
line-height: 28px;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
li {
list-style: none;
}

/* ヘッダーロゴ */
.logo {
width: 190px;
margin: 8px -20px 10px 34px;
}
.logo a {
display: block;
}

/* 区切り点線 */
.line{
width: 87.5%;
margin: 30px auto;
border-top: 1px dashed #8c8b8b;
}
.line2{
width: 87.5%;
margin: 30px auto;
border-top: 1px dashed #8c8b8b;
}

/*
横幅を設定するための共通クラス
*/
.wrapper {
width: 88%;
padding: 0;
margin: auto;
}

/* ///// 各タイトルと動くアンダーライン ///// */
.section-title {
font-weight: normal;
line-height: 1;
margin-bottom: 50px;
position: relative;
z-index: 1;
}

.section-title:after {
content: '';
position: absolute;
left: 0;
bottom: -14px;
width: 0%;
height: 6px;
background-color: #c8d8fa;
z-index: -1;
transition: 1.2s; /* ラインの動くスピード */
}
.section-title.isActive:after {
width: 100%;
}
/*
「display: inline-block;」を設定してブロック化することで、
改行されてmargin-bottomが使用できるようになる
*/
.section-title .en {
display: block;
font-size: 29px; /* TOPタイトル動く文字サイズ：PC用 */
margin: 5px auto;
padding: 5px;
/* color: hotpink; */
}

.section-title .en-2 {
display: block;
font-size: 29px;
margin: 5px auto;
padding: 5px;
line-height: 35px;
/* color: rgb(15, 144, 230); */
}

.section-title .ja {
display: block;
font-size: 18px;
margin: 5px auto;
padding: 5px;
letter-spacing: 5px;
}

/* ///// 画像クリック説明テキスト部分 ///// */
.gazoclick {
display: block;
font-size: 16px;
text-align: center;
margin: -5px auto;
letter-spacing: 2px;
}

/* ///// 各学年タイトル ///// */
.section-title-gakunen {
font-weight: normal;
position: relative;
top: 80px;
}

/* .section-title-gakunen:after {
content: '';
position: absolute;
left: -7px;
bottom: -5px;
width: 0%;
height: 6px;
background: #dfd5cede;
z-index: -1;
transition: 1.2s; */ /* ラインの動くスピード */
/* }
.section-title-gakunen.isActive:after {
width: 304px;
} */
/*
「display: inline-block;」を設定してブロック化することで、
改行されてmargin-bottomが使用できるようになる
*/
.section-title-gakunen .en {
display: block;
font-size: 29px;
margin: -77px auto;
padding: 5px;
}
.section-title-gakunen .ja {
display: block;
font-size: 16px;
margin: 5px auto;
padding: 5px;
}


/* 動くタイポ用 */
.typo{
display: flex;
margin-bottom: -5px;
}
.typo_t{
display: flex;
margin-bottom: -5px;
margin-top: 22px;
}

/* 各学年の上部リンク文字 */
/* PC表示・SP非表示 */
/* 文字横並び */
.pc-on_sp-off{
display:inline-block;
font-size: 14px;
}



/*-------------------------------------------
ヘッダー
-------------------------------------------*/
header {
width: 100%;

display: flex;
justify-content: space-between;
align-items: center;
background-color: #FFF;
position: fixed;
top:0;
z-index: 400;/* ヘッダーを固定 */
}
.inner {
display: flex;
justify-content: space-between;
}
.g-nav{
display: flex;
align-items: center;
}
.g-nav ul {
display: flex;
}
.g-nav  li {
height: 50px;
text-align: center;
line-height: 50px;
width: calc(750px/3);
border-right: dashed 1px #8c8b8b;
}
.g-nav  li:first-child {
border-left: dashed 1px #8c8b8b;
}

/* ヘッダー：スクロールしたら影がつく */
header.active {
box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

/* nav アンダーラインホバー #a58878 */
.g-nav li a::after{
display: block;
content: "";
width: 70%;
height: 5px;
margin: -13px auto;
background-color: #c8d8fa;
transform: scale(0);
transition: 0.25s;
}
.g-nav li a:hover::after{
transform: scale(1);
}

/*-------------------------------------------
メイン
-------------------------------------------*/
main{
position: relative;
margin-left: 50px;
margin-right: 50px;
padding: 50px;
top: 50px;
}

main2{
margin: auto 80px;
}

/* ///// スライダー写真・丸ロゴ部分：NEW ///// */
.photo-logo_box{
  position: relative;
  background-color: #e6f0f7;
  top: 65px;
  padding: 30px;
  opacity: 0.7; /* 写真を透明 */
}

.logo_center { /* 丸ロゴ */
z-index:10;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45%; /* 丸ロゴのサイズ設定 */
  filter: drop-shadow(0 0 3px #000); /* 影 */
  opacity: 0.5; /* 丸ロゴを透明 */
}


/* 各コースの画像上のロゴ */
.box4 {
z-index:10;
position:absolute;
left:425px;
top:-225px;
width:100%;
height:100%;
}
.box4 .svglogo{
width: 100px;
height:100%;
background: url(../img/sw_logo_main.svg) no-repeat center center/contain;
margin: 0 auto;
filter: drop-shadow(0 0 3px #000);
}

/* ///// ホバーアニメーション設定 ///// */
/* .wrapper .img img:hover{
transform: scale(1.05);
} */
/* .wrapper img{
transition: 0.5s;
} */
.img{
position: relative;
overflow: hidden;
}

/*-------------------------------------------
N E W S
-------------------------------------------*/
#news{
margin-top: -10px;
}

#news .list {
display: flex;
justify-content: space-between;
}
/*
「width: calc(100%/3);」で横幅を3等分する
*/
#news .list li {
text-align: center;
font-size: 15px; /* 日付サイズ */
width: calc(100%/3);
border-right: dashed 1px #8c8b8b;
/* padding: 10px 20px; */
}
#news .list li:first-child {
border-left: dashed 1px #8c8b8b;
}
#news a{
font-size: 17px; /* タイトルサイズ */
line-height: 23px; display:block; /* 行の高さを指定する */

}


#news .list li .date-area {
margin-bottom: 16px;
}
#news .list li .date-area span { /*「NEWS」マーク */
width: 50px;
height: 20px;
line-height: 20px;
background-color: #815945;
color: #fff;
display: inline-block;
font-size: 12px;
margin-left: 10px;
text-align: center;
}

/*-------------------------------------------
A B O U T
-------------------------------------------*/
#about {
display: flex;
justify-content: space-between;
margin: 35px auto;
}
#about .img {
width: 46%;
height: 370px;
border-radius: 8px;
filter: drop-shadow( 0 0 4px rgba(7, 7, 7, 0.37));
margin: 10px;
}
#about .img img {
width: 100%;
height: 370px;
object-fit: cover;
object-position: 68% center center; /* 位置調整 */
opacity: 0.8; /* 写真を透明 */
}
#about .text {
width: 46%;
padding: 10px 0;
}
#about .text p {
font-size: 17px;
line-height: 28px;
}
/* ------------------------------- */
#about_an {
display: flex;
justify-content: space-between;
margin: 35px auto;
}

#about_an .text {
width: 100%;
padding: 10px 0;
}
#about_an .text p {
font-size: 17px;
line-height: 28px;
}
/* ------------------------------- */
#about2 {
display: flex;
justify-content: space-between;
margin: 35px auto;
flex-direction:row-reverse; /* 逆向きに */
}
#about2 .img {
width: 42%;
height: 380px;
border-radius: 8px;
filter: drop-shadow( 0 0 4px rgba(7, 7, 7, 0.37));
margin: 10px;
}
#about2 .img img {
width: 100%;
height: 380px;
object-fit: cover;
}
    #about2 .img .shogaku_ichi {
    object-position: 100% top; /* 小学生：位置調整 */
    }
    #about2 .img .chugaku_ichi {
    object-position: 95% top; /* 中学生：位置調整 */
    }
    #about2 .img .koukou_ichi {
    object-position: 30% top; /* 高校生：位置調整 */
    }

#about2 .text {
width: 52%;
padding: 10px 0;
}
#about2 .text p {
font-size: 17px;
line-height: 28px;
}
/* ------------------------------- */
#about3 {
display: flex;
justify-content: space-between;
margin: 35px auto;
}
#about3 .img {
width: 42%;
height: 380px;
align-items: center;
border-radius: 8px;
filter: drop-shadow( 0 0 4px rgba(7, 7, 7, 0.37));
margin: 10px;
}

#about3 .img img {
width: 100%;
height: 380px;
object-fit: cover;
}
    #about3 .img .shogaku_ichi {
    object-position: 34% top; /* 小学生：位置調整 */
    }
    #about3 .img .chugaku_ichi {
    object-position: 40% top; /* 中学生：位置調整 */
    }
    #about3 .img .koukou_ichi {
    object-position: 20% top; /* 高校生：位置調整 */
    }

#about3 .text {
width: 52%;
padding: 10px 0;
}
#about3 .text p {
font-size: 17px;
line-height: 28px;
}
/* ------------------------------- */

/* ///// ABOUT：写真上のロゴ設定 ///// */
.box3 {
position: relative;
width: 100%;
}
.copy_icon{ /* トップのABOUTアイコン：左 */
position: absolute;
bottom: 185px;
left: 8px;
width: 180px;
height: 180px;
/* background: url(../img/copy_1.svg) no-repeat bottom left/contain; */
opacity: 0.95;
filter: drop-shadow( 0 0 5px rgba(6, 6, 6, 0.623));
}

.copy_icon2{ /* 小学生コース：コピーアイコン：左 */
position: absolute;
bottom: 225px;
left: 8px;
width: 150px;
height: 150px;
background: url(../img/shogaku/s_jyuken.svg) no-repeat bottom left/contain;
opacity: 0.95;
filter: drop-shadow( 0 0 5px rgba(6, 6, 6, 0.623));
}
.copy_icon3{ /* 小学生コース：コピーアイコン：右 */
position: absolute;
bottom: 225px;
left: 8px;
width: 150px;
height: 150px;
background: url(../img/shogaku/s_test.svg) no-repeat bottom left/contain;
opacity: 0.95;
filter: drop-shadow( 0 0 5px rgba(6, 6, 6, 0.623));
}

.copy_icon2_2{ /* 中学生コース：コピーアイコン：左 */
position: absolute;
bottom: 225px;
left: 8px;
width: 150px;
height: 150px;
background: url(../img/chugaku/c_jyuken.svg) no-repeat bottom left/contain;
opacity: 0.95;
filter: drop-shadow( 0 0 5px rgba(6, 6, 6, 0.623));
}
.copy_icon3_2{ /* 中学生コース：コピーアイコン：右 */
position: absolute;
bottom: 225px;
left: 8px;
width: 150px;
height: 150px;
background: url(../img/chugaku/c_test.svg) no-repeat bottom left/contain;
opacity: 0.95;
filter: drop-shadow( 0 0 5px rgba(6, 6, 6, 0.623));
}

.copy_icon2_3{ /* 高校生コース：コピーアイコン：左 */
position: absolute;
bottom: 225px;
left: 8px;
width: 150px;
height: 150px;
background: url(../img/koukou/k_jyuken.svg) no-repeat bottom left/contain;
opacity: 0.95;
filter: drop-shadow( 0 0 5px rgba(6, 6, 6, 0.623));
}
.copy_icon3_3{ /* 高校生コース：コピーアイコン：右 */
position: absolute;
bottom: 225px;
left: 8px;
width: 150px;
height: 150px;
background: url(../img/koukou/k_test.svg) no-repeat bottom left/contain;
opacity: 0.95;
filter: drop-shadow( 0 0 5px rgba(6, 6, 6, 0.623));
}

.circle{
  float:right;
  border-radius: 100%;
  shape-outside: circle();
width: 290px;
position: relative;
left: 8px;
bottom: 6px;
filter: drop-shadow( 0 0 5.5px rgba(0, 0, 0, 0.199));

}
.circle_sp{ /* SP用は無効化 */
display: none;
}

/* はこはこはこ */
.hako{
display: flex;
justify-content: space-between;
width: 100%;
height: 180px;
margin-top: 15px;
/* background-color: rgb(167, 167, 170); */
}
.hako img{
object-fit: cover;
width: 100%;
height: 100%;
padding: 4px;
}

@media screen and (max-width: 768px) {
.hako{
display: block;
margin: 0 auto;
width: 95%;
height: auto;
margin-top: 35px;
}
}

/* /// 各コース3並び：写真上のボタン設定 /// */
.box3_2 {
position: relative;
top: -40px; /* ボタンの位置 */
left: 0;
}

/*-------------------------------------------
コース案内（各学年3つ並べ）
-------------------------------------------*/
figure {
  width: 350px;
  height: 230px; /* 各ウインドウ高さ */
  margin: 10px;
  border-radius: 10px;
}

.transform01 {
  width: 100%;
  height: 230px; /* 各Windowの高さ */
object-fit: cover;
  transform: scale(1);
  transition: all 0.8s ease-in-out;
}
figure:hover .transform01 {
  transform: scale(1.07);
}

figure h3 { /* 文字タイトル(h3) */
width: 93%;
margin: 0 auto;
  line-height: 33px; /* h3「点線」の位置：高さ */
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 0 0 8px #000; /* h3 テキスト 影 */
  border-bottom: 2px dashed rgba(255, 255, 255, 0.568);
}
figure p { /* h3下のp */
  font-size: 14px;
  letter-spacing: 3px;
  color: rgb(255, 255, 255);
  text-align: center;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.603); /* p テキスト 影 */
}

.window figcaption h3 { /* h3「テキスト＆点線」の位置 */
  padding: 130px 0 0;
  font-size: 18px;
}

/* ///// Effect 14 ///// */
.window{
margin: 18px auto;
padding: 20px;
display: flex;
justify-content: space-around;
background-color: #e6f0f7; /*  Window囲みグレー背景 */
border-radius: 8px;
}
.window figure {
  position: relative;
  overflow: hidden;
}
.window figcaption { /* Window 背景カラー部分 */
  position: absolute;
  bottom: 48px; /* ホバーWindow 背景カラーの向きと位置 */
  z-index: 2;
  width: 100%;
  height: 100%; /* ホバーWindow 背景カラーの高さ */
  background: #0047795b;
  transition: 1s;
}

.window figure:hover figcaption {
  bottom: 100%; /* ホバーWindowの向き設定 */
}


/*-------------------------------------------
料 金 表
-------------------------------------------*/
.price{
margin: 30px auto 0;
}

.price_main{
width: 100%;
display: block;
margin-top: 20px;
margin-bottom: 10px;
}
.price_main_2{
width: 100%;
display: block;
margin: 30px auto;
}

/* PCではSP画像非表示 */
.price_sp, .price_sp_2, .price_sp_3{
display: none;
}

.card{
margin: 15px auto 0;
padding: 15px;
display: flex;
justify-content: center;
background-color: #F0EEED;
border-radius: 10px;
}
.card_main > img{
height: 280px;
}
.ue{
z-index: 200;
}

.taiken_info{
width: 848px;
margin: 0 auto;
margin-top: 70px;
margin-bottom: -30px;
}

/*-------------------------------------------
講師紹介
-------------------------------------------*/
#teacher {
display: flex;
justify-content: space-between;
background-color: #f3f3f3;
border-radius: 8px;
width: 88.5%;
}

#teacher .text {
width: 70%;
margin-left: 30px;

}
#teacher .text p {
margin-top: -8px;
margin-bottom: 30px;
font-size: 17px;
line-height: 28px;
}
  @media screen and (max-width: 768px) {
  #teacher .text p {
  margin-top: 5px;
  margin-bottom: -20px;
  font-size: 16px;
  line-height: 25px;
  text-align: justify;/* 両端揃え(均等割り付け) */
  }
  }

.gallery-wrapper{
width: 400px;
margin: auto;
padding: 27px;
}

.gallery-wrapper .ppp {
transition: 0.5s;
}
.gallery-wrapper .ppp:hover{
transform: scale(1.05);
}

/* ///// ホバーアニメーション設定 ///// */
/* .wrapper .img img:hover{
transform: scale(1.05);
} */
/* .wrapper img{
transition: 0.5s;
} */


/*-------------------------------------------
アクセス
-------------------------------------------*/
#access {
width: 88%;
display: flex;
justify-content: space-between;
}

#access .text {
width: 46%;
padding: 10px 0;
}

#access .map {
width: 50%;
}

#access .g-map{
width: 100%;
height: 440px;
position: relative;
top: 10px;
border-radius: 10px;

/* mapの色変更 */
	filter: grayscale(1.8);
	opacity: 0.8;
	vertical-align: bottom;
}

.box_a{
width: 100%;
display: flex;
}

.logo2 {
display: none;

margin: auto 30px;
}

#access .info {
font-size: 16px;
align-items: center;
flex-wrap: wrap;
}

#access .info span {
width: 350px;
height: 25px;
line-height: 25px;
background-color: #e6f0f7;
color: #393e3b;
display: inline-block;
font-size: 15px;
letter-spacing: 6px;
text-align: center;
}

/* 店舗内テキスト */
#access .info .tenpo {
font-size: 16px;
text-align:center;
line-height: 50px;
letter-spacing: 0.5px;
color: #393e3b;
}

#access .text3 {
font-size: 16px;
text-align:center;
line-height: 25px;
letter-spacing: -0.8px;
color: #ce3838;
}

/*-------------------------------------------
TOPへ戻るアイコン設定
-------------------------------------------*/
#to-top{
z-index:5;
width: 40px;
position: fixed;
bottom: 30px;
right: 28px;
}

#to-top >a:hover{
  color:rgba(187, 187, 187, 0.603);
}

/*-------------------------------------------
各ページ背景（TOP以外）
-------------------------------------------*/
.backcolor_0 {
background-color: #f7f7f7;
}

.backcolor {
width: 100%;
height: 100%;
padding: 22px 25px 22px 25px;
position: relative;
}

/*-------------------------------------------
よくある質問
-------------------------------------------*/
/* 各ページ：動くタイポ用 */
.typo_2, .typo_3{
display: flex;
justify-content: center;
}
.kakutitle{
width: 45%;
margin: 110px auto 50px;
}
/* ////////////////////// */

/* 質問：区切り線 */
.line_qa{
width: 92%;
margin: 30px auto;
border-top: 1px dashed #8c8b8b;
}
/* ////////////////////// */

.qa-list{
width: 90%;
margin: 0 auto;
}
.qa-list dl {
    position: relative;
    margin: 30px 0 0;
    cursor: pointer;
    border: 1px solid #DDD;
    border-radius: 5px;
}
.qa-list dl:first-child {
  margin-top: 0;
}
.qa-list dl::after {
    position: absolute;
    top: 27px;
    right: 26px;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    content: '';
    transform: rotate(135deg);
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}
.qa-list .open::after {
    transform: rotate(-45deg);
}
.qa-list dl dt {
    position: relative;
    margin: 0;
    padding: 20px 20px 20px 60px;
    font-weight: 600; /* bold */
    background: rgb(233, 233, 233);
    border-radius: 5px;
}

/* 質問：Qマーク */
.qa-list dl dt::before {
    font-size: 20px;
    line-height: 20px;
    position: absolute;
    top: 26px;
    left: 20px;
    display: block;
    content: 'Q.';
    color: #815945;
}

/* 質問：Aマーク */
.qa-list dl dd::before {
    font-size: 20px;
    line-height: 32px;
    position: absolute;
    left: 20px;
    display: block;
    content: 'A.';
    font-weight: 600; /* bold */
    color: #e98655;
}

.qa-list dl dd {
    position: relative;
    margin: 0;
    padding: 20px 50px 20px 60px;
}

.qa-list dl dd>.a1 {
    font-size: 16px;
    color: #f76e29;
    font-weight: 600; /* bold */
    margin: 30px 0 0;
    line-height: 24px;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}

.qa-list dl dd>.a2 {
    margin: 10px 0 0;
    line-height: 1.5;
    text-align: justify;/* 両端揃え(均等割り付け) */
}
.no_kg {
display: inline-block;
}

/* 質問カテゴリーアイコン：
生徒 */
.qa-list dl dt .ko {
width: 100px;
height: 20px;
line-height: 20px;
background-color: #6c8145;
color: #fff;
display: inline-block;
font-size: 12px;
margin-right: 15px;
text-align: center;
border-radius: 3.5px;
}

/* 質問カテゴリーアイコン：
保護者 */
.qa-list dl dt .oya {
width: 113px;
height: 20px;
line-height: 20px;
background-color: #8b5889;
color: #fff;
display: inline-block;
font-size: 12px;
margin-right: 15px;
text-align: center;
border-radius: 3.5px;
}

/*-------------------------------------------
テキストポップアップ
-------------------------------------------*/
/*クリック前に表示されないように*/
.featherlight-sample {
display: none;
}
.featherlight-sample>time { /* ポップアップ内：日付 */
font-size: 12px;
color: #706b6a;
}

.pop_title{ /* ポップアップ内：タイトル */
font-size: 28px;
font-weight: 600; /* bold */
line-height: 34px;
color: #7a5843;
/* text-align: justify; 両端揃え(均等割り付け) */
text-align: center;
margin: 18px auto;
border-bottom: 4px solid #eee5df; /* タイトル下線 */
padding-bottom: 8px; /* タイトル下線位置 */
}
.pop_bun{ /* ポップアップ内：文章 */
font-size: 16px;
line-height: 34px;
color: #3e3a39;
/* text-align: justify; 両端揃え(均等割り付け) */
text-align: center;
}

@media screen and (max-width: 768px) {
.pop_title{ /* ポップアップ内：タイトル */
font-size: 20px;
text-align: center;
letter-spacing: 0.3px;/* 文字間隔 */
padding-bottom: 4px; /* タイトル下線位置 */
}
.pop_bun{ /* ポップアップ内：文章 */
font-size: 14px;
line-height: 25px;
letter-spacing: -0.8px;/* 文字間隔 */
}
}


/*-------------------------------------------
確認画面
-------------------------------------------*/
.k_title{
text-align:center;
font-size: 16px;
color: #f76e29;
font-weight: 600; /* bold */
margin-bottom: 20px;
}

/*-------------------------------------------
サンクスページ
-------------------------------------------*/
.thanks{
width: 100%;
margin: 0 center;
font-size: 20px;
text-align:center;
align-items: center;
}

.thanks-text-0{
font-size: 16px;
color: #f76e29;
line-height:1.5;
text-align:center;
margin-top: 30px;
}

.thanks-text-1{
font-size: 14px;
color: rgb(117, 117, 117);
margin:0 auto;
text-align:center;
line-height:1.5;
margin-top: 35px;
}

.renewal-text-1{
font-size: 15px;
color: rgb(117, 117, 117);
margin:0 auto;
text-align:center;
line-height:2;
margin-top: 35px;
}

/*-------------------------------------------
蛍光ペンのような下線 アンダーライン
-------------------------------------------*/
.under_line {
  background: linear-gradient(transparent 0, #f3d6ff 0);
  padding: 1px;
}

.under_line2 {
  background: linear-gradient(transparent 70%, #ffd18c 0%);
  padding: 1.5px;
}

.under_line3 {
  background: linear-gradient(transparent 75%, #e6dcd7 0%);
  padding: 3px;
}

.under_line4 {
  background: linear-gradient(transparent 80%, #ffd18c 0%);
  padding-bottom: 6px;
}

.under_line5 {
  font-size: 28px;
  background: linear-gradient(transparent 80%, #ffd18c 0%);
  padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
.under_line5 {
  font-size: 22px;
  background: linear-gradient(transparent 80%, #ffd18c 0%);
  padding-bottom: 10px;
  }
.fin_title{
margin-top: 30px;
}
}


/* TOPの体験授業・資料請求ボタンのアンダーライン */
.under_line_0{
    padding: 10px;
    display: inline-block;
    position: relative;
}
.under_line_0::after{
    content: "";
    display: block;
    width: 80%;
    height: 3px;
    background: rgb(248, 227, 135);
    position: absolute;
    bottom: 11px;
    left: -9px;
    right: 0;
    margin: auto;
    transition: .3s;
}
.under_line_0:hover::after{
    width: 0;
}

/*-------------------------------------------
TOP：体験授業・資料請求ボタン
-------------------------------------------*/
.btn-div{
width: 100%;
text-align:center;
}
.Form-Btn-0 {
  margin: auto 30px;
  border-radius: 6px;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 360px;
  display: inline-block;
  letter-spacing: 0.5em;/* 文字間隔 */
  background: #9fbd89;
  color: #fff;
  font-weight: 600; /* bold */
  font-size: 19px;
  text-align:center;
  
}
.Form-Btn-0:hover{
background: #abc996;
}

.btn-div-2{
width: 100%;
text-align:center;
margin-top: 90px;
}
.btn-div-2 >a{
color:#3e3a39;
font-size: 15px;
letter-spacing: 0.5em;/* 文字間隔 */
}

.btn-div-3{
width: 100%;
margin-top: 10px;
margin-left: 65px;
letter-spacing: 0.1em;/* 文字間隔 */
color:#a0a0a0;
}
.class_link{
font-size: 15px;
}


@media screen and (max-width: 768px) {
/* ///// 動くアンダーライン ///// */
.section-title:after {
bottom: -8px;
}

/* 各ページ：動くタイポ用 */
.kakutitle{
width: 90%;
margin: 0 auto 35px;
}

.typo span.en{
font-size: 23px; /* TOPタイトル動く文字サイズ：スマホ用 */
letter-spacing: -5px;
line-height: 40px;
padding: 3px;
}

.typo_2 span.en{
margin-top: 15px;
font-size: 22px;
letter-spacing: -5px;
/* color:blue; */
}

.typo_3 span.en{
margin-top: 12px;
font-size: 20px;
letter-spacing: -9px;
/* color:green; */
}

.qa-list{
width: 100%;
}

.qa-list dl {
    margin: 10px 0 0;
}
.qa-list dl:after {
    top: 20px;
    right: 20px;
    width: 7px;
    height: 7px;
}
.qa-list dl dt {
    padding: 16px 40px 16px 50px;
    font-size: 16px;
    line-height: 25px;
}

/* SP：質問：Qマーク */
.qa-list dl dt::before {
    font-size: 16px;
    top: 20px;
    left: 20px;
}

/* SP：質問：Aマーク */
.qa-list dl dd::before {
    font-size: 17px;
    left: 20px;
    margin-top: 1px;
}

.qa-list dl dd {
    margin: 0;
    padding: 16px 43px 16px 50px;
    font-size: 14px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}

/* ● SP：質問カテゴリーアイコン：
生徒 */
.qa-list dl dt .ko {
display: block;
margin-top: 3.5px;
margin-bottom: 13px;
}

/* ● SP：質問カテゴリーアイコン：
保護者 */
.qa-list dl dt .oya {
display: block;
margin-top: 3.5px;
margin-bottom: 13px;
}
}



/*-------------------------------------------
footer
-------------------------------------------*/
footer {
background-color: #e6f0f7;
padding-bottom: 20px;
}
footer .flex {
display: flex;
align-items: center;
justify-content: space-between;
padding: 40px 0;
}
footer .flex .logo {
width: 20%;
}

footer .flex .info {
margin-right: 32px;
font-size: 15px;
line-height: 1.5;
}
footer .footer_step {
font-size: 18px;
font-weight: 600; /* bold */
color: #003c80;
}

footer .copyright {
font-size: 0.75rem;
}


/*//////// メディアクエリ：769px以上の時（PC） ////////*/
@media screen and (min-width: 769px){
#btn .hamburger, .hamburger-box, .hamburger-inner{
display: none !important; /* 強制優先度上げる設定 */
}
  /* PCのみ改行させる */
  .br-pc {
  display: block;
  }
  .br-sp {
  display: none;
  }

}

/*-------------------------------------------
//////////////////// SP ////////////////////
-------------------------------------------*/

/*//////// メディアクエリ：768px以下の時 ////////*/
@media screen and (max-width: 768px) {

  /* SPは改行させない */
  .br-pc {
  display: none;
  }
  .br-sp {
  display: block;
  }


#btn{ /* ハンバーガーメニューの位置 */
display: block;
position: fixed;
top: 0;
right: 0;
height: 53px; /* ハンバーガーメニュー四角の高さ */
background-color: #c8d8fa;
z-index: 200;
}

header {
/* position: static; /* ヘッダー固定解除 */
position: fixed; /* ヘッダーを固定 */
z-index: 400;
}


/* //OPEN時のナビゲーション */
.g-nav{
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #003c80;
z-index: 100;
padding: 10%;
/* opacity: 1; */
visibility: hidden;
transition: 0.3s;
}

.g-nav.is-active{
opacity: 0.9;
visibility: visible;
}
.g-nav ul{
display: block;
text-align:center;
}

.g-nav  li {
width: 55%;
height: calc(500px/7);
margin: 0 auto;
border-right: none;
line-height: 73px;
border-top: dashed 1px #c8d8fa;
}
.g-nav  li:first-child {
border-left: none;
}
.g-nav  li:last-child {
border-bottom: dashed 1px #c8d8fa;
}
.g-nav a{
color: rgb(255, 255, 255);
}

/* nav アンダーラインホバー */
.g-nav li a::after{
display: block;
content: "";
position: relative;
top: -20px;
width: 50%;
height: 4px;
margin:0 auto;
background-color: #c8d8fa;
transform: scale(0);
transition: 0.08s;
}
.g-nav li a:hover::after{
transform: scale(1);
}

.logo {
width: 156px;
margin: 10px auto 10px 15px;
}
.section-title {
margin-bottom: 34px;
}
.section-title .ja {
font-size: 14px; /* TOPメインの動く文字下のコピー文字サイズ：スマホ */
letter-spacing: 1px;
}

/* ///// 画像クリック説明テキスト部分 ///// */
.gazoclick {
font-size: 13px;
text-align: center;
margin: -5px auto;
letter-spacing: 1px;
}


/*
横幅を設定するための共通クラス
*/
.wrapper {
width: 100%;
margin: 0 auto;
}

.section-title .en {
font-size: 20px; /* TOPメインの動く文字サイズ：スマホ */
letter-spacing: -8px;
}



/*-------------------------------------------
● SP：メインビジュアル
-------------------------------------------*/
/* ///// スライダー写真・丸ロゴ部分：NEW ///// */

.photo-logo_box{
  top: 58px;
  padding: 15px;
}
.logo_center { /* 丸ロゴ */
    width: 90%;/* 丸ロゴのSPサイズ設定 */
}

.mainvisual .ichi_01 {
object-position: right 40% top 0%; ; /* 位置調整 */
}
.mainvisual .ichi_02 {
object-position: right 53% top 0%; ; /* 位置調整 */
}
.mainvisual .ichi_03 {
object-position: right 77% top 0%; ; /* 位置調整 */
}
.mainvisual .ichi_04 {
object-position: right 50% top 0%; ; /* 位置調整 */
}
.mainvisual .ichi_05 {
object-position: right 63% top 0%; ; /* 位置調整 */
}

.box2 {
z-index:10;
display: flex;
position:absolute;
top: 46%;
transform: translate(0,-50%);
}

/* SP：メイン画像：小学生 */
.mainvisual_course {
width: 82%;
height: 100px;
margin: 0 auto;
padding: 22px 45px 22px 45px;
background-color: #eee5df8f;
border-radius: 10px;
position: relative;
top: 75px;
}


/*-------------------------------------------
● SP：N E W S
-------------------------------------------*/
main{
margin-left: 2px;
margin-right: 2px;
padding: 30px;
top: 10px;
}

#news {
margin-bottom:  30px;
}

#news .list {
flex-direction: column;
}
#news .list li {
font-size: 15px;
width: 100%;
border-bottom: dashed 1px #8c8b8b;
padding: 10px 0;
margin-bottom: 10px;
border-right: none;
}

#news .list li:first-child {
border-left: none;
}

/*-------------------------------------------
● SP：区切り点線
-------------------------------------------*/
.line{
width: 100%;
margin: 30px auto;
border-top: 1px dashed #8c8b8b;
}
.line2{
display: none;
}

/*-------------------------------------------
● SP：A B O U T
-------------------------------------------*/
#about {
flex-direction: column;
margin-bottom: 30px;
}
#about .img {
display: none; /* ←←← SPでは無効化 */
width: 95%;
height: 200px;
border-radius: 5px;
filter: drop-shadow( 0 0 3px rgba(7, 7, 7, 0.37));
}
#about .img img {
height: 200px;
object-position: center center; /* SP 位置調整 */
}
#about .text {
width: 100%;
}

.copy_icon{ /* SP：トップのABOUTアイコン：左 */
top: -297px;
left: 3px;
width: 100px;
height: 100px;
opacity: 0.8;
}
/* ------------------------------- */
#about2, #about3 {
flex-direction:column; /* 正しい向きに */
margin-bottom: 30px;
}
#about2 .img, #about3 .img {
width: 95%;
height: 200px;
border-radius: 5px;
filter: drop-shadow( 0 0 3px rgba(7, 7, 7, 0.37));
}
#about2 .img img, #about3 .img img {
height: 200px;
}
#about2 .text, #about3 .text {
width: 100%;

}

.subtitle{ /* 見出し */
font-size: 20px;
font-weight: 600; /* bold */
line-height: 28px;
margin-top: 0;
margin-bottom: 0;
letter-spacing: 2px;
/* color: red; */
}

.subtitle2{ /* 説明文章 */
font-size: 16px;
line-height: 25px;
margin-top: 14px;
letter-spacing: 0px;
}

.circle{ /* PC用は無効化 */
display: none;
}

.circle_sp{
display:block;
  float: right;
  border-radius: 100%;
  shape-outside: circle();

width: 200px;
position: relative;
left: 6px;
bottom: -5px;
filter: drop-shadow( 0 0 4px rgba(0, 0, 0, 0.199));
}

/*-------------------------------------------
● SP：各学年ページ：アイコン
-------------------------------------------*/
/* 各学年ページ：コピーアイコン */
.copy_icon2, .copy_icon3,
.copy_icon2_2, .copy_icon3_2,
.copy_icon2_3, .copy_icon3_3
{
bottom: 88px;
left: 1px;
width: 110px;
height: 110px;
opacity: 0.85;
}

/*-------------------------------------------
● SP：コース案内（各学年3つ並べ）
-------------------------------------------*/
main2{
position: relative;
top: 100px;
margin: auto 35px 110px;
}

figure {
  width: 100%;
  height: 190px;
  border-radius: 6px;
}

figure h3 { /* 文字タイトル(h3) */
width: 88%;
margin: -10px auto;
  letter-spacing: 3px;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 8px #000; /* h3 テキスト 影 */
  border-bottom: 2px dashed rgba(255, 255, 255, 0.568);
}

.window figcaption h3 { /* h3「テキスト＆点線」の位置 */
  padding: 130px 0 0;
  font-size: 17px;
    line-height: 28px; /* h3「点線」の位置：高さ */
}

/* ///// SP：Effect 14 ///// */
.window{
flex-direction: column;
align-items: center;
border-radius: 6px;
}
.window figcaption { /* Window(ベージュ)部分 */
  bottom: 55px; /* ホバーWindow(ベージュ)の向きと位置 */
}


/* ///// SP：各コース3並び：写真上のボタン設定 ///// */
.box3_2 {
position: relative;
top: -80px; /* ボタンの位置 */
left: 0;
}


/*BUTTON*/
.round_button {
	display:block ;
	width: 125px ;
	padding: 7px 0 9px 0;
  margin: 0 auto; /* ←センターにした */
	border-radius: 16px;
	text-align: center;
	transition-duration:0.375s;
  }
.round_button p {
	font-size: 18px;
	letter-spacing: -1px;
  }

/*-------------------------------------------
● SP：料 金 表
-------------------------------------------*/
.price{
border-radius: 6px;
}

.price_sp{
margin-top: -30px;
display: flex;
justify-content: center; 
}
.price_sp_2{
margin-bottom: 25px;
display: flex;
justify-content: center; 
}
.price_sp_3{
margin-top: -10px;
margin-bottom: 50px;
display: flex;
justify-content: center; 
}

.price_sp > img{
width: 100%;
margin: 30px auto 0;
}

/* SPではPC画像非表示 */
.price_main, .price_main_2, .card, .card_main{
display: none;
}

/* PC表示・SP非表示 */
.pc-on_sp-off_2{
display: none;
}

.taiken_info{
display: none;
}

/*-------------------------------------------
● SP：講師紹介
-------------------------------------------*/
#teacher {
flex-direction: column;
align-items: center;
border-radius: 6px;
width: 100%;
margin-bottom: 30px;
}

#teacher .text {
width: 90%;
margin: 0 auto;
padding: 0px 8px 25px;
}

.gallery-wrapper{
width: 80%;
margin-top: 10px;
margin-bottom: 18px;
padding: 5px;
}

/*-------------------------------------------
● SP：アクセス
-------------------------------------------*/
#access {
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
margin-bottom: 30px;
}

#access .text {
width: 100%;
padding: 0 0 0 0;
}

#access .map {
width: 100%;
height: 300px;
}

#access .text3 {
font-size: 14px;
}

/* 店舗内テキスト */
#access .info .tenpo {
font-size: 14px;
line-height: 33px;
letter-spacing: 0px;
}

/* -------------------- */
.box_a{
flex-direction: column;
margin-bottom: 20px;
}

.logo2 {
width: 38%;
height: 38%;
margin: 0 auto 20px;
}

#access .info {
width: 100%;
text-align: center;
}

#access .info span {
width: 100%;
}

/*-------------------------------------------
● SP：TOPへ戻るアイコン設定
-------------------------------------------*/
#to-top{
width: 35px;
bottom: 18px;
right: 12px;
}

/*-------------------------------------------
● SP：フォーム全体枠スペース
-------------------------------------------*/
.backcolor {
width: 100%;
height: 100%;
padding: 25px 8px 40px 8px;
position: relative;
}

/*-------------------------------------------
● SP：footer
-------------------------------------------*/
footer .flex {
flex-direction: column;
align-items: flex-start;
}

footer .flex .logo {
width: 60%;
height: 100%;
text-align: center;
margin: 0 auto 18px;

}

footer .flex .info {
width: 100%;
text-align: center;
}

footer .copyright {
text-align: center;
}

/*-------------------------------------------
● SP：サンクスページ
-------------------------------------------*/
.thanks{
font-size: 16px;
padding: 15px;
}

.thanks-text-0{
font-size: 13px;
}

.thanks-text-1{
padding: 15px;
}

/* SP：TOP：体験授業・資料請求ボタン */
.Form-Btn-0 {
  margin: 5px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 300px;
  font-size: 16px;
}

/* SP：各学年タイトル */
.section-title-gakunen {
font-weight: normal;
position: relative;
top: -9px;
}

/* SP：各学年ページのリンク文字部分 */
.btn-div-2{
width: 87%;
margin: 0 auto;
margin-top: 88px;
margin-bottom: -100px;
}

.btn-div-3{
width: 87%;
margin-top: 5px;
margin-left: -2px;
}

.class_link{
font-size: 14px;
}

}

/*-------------------------------------------
● SP：スマホ電話設定
-------------------------------------------*/
@media screen and (min-width: 751px) {
  .tel {
    pointer-events: none;
  }
}