@charset "utf-8";
/* CSS Document */

/*全体　はじめ*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td
 {
  margin: 0;
  padding: 0;
 }
body {
	font-family: ‘Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, Osaka, ‘MS PGothic’, arial, helvetica, sans-serif,egular ;

}

html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
}


a {
  text-decoration: none;
}

h1{
  font-size:27px;
}

h2{
  font-size:17px;
}
h3{
  font-size:15px;
}

h4{
  font-size:12px;
}
h3 {
  color: black;/*文字色*/
  padding: 0.5em;/*文字周りの余白*/
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: mediumseagreen;/*背景色*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}


h3:before {
  content: '●';
  color: white;
  margin-right: 8px;
}

@media screen and (min-width: 768px){
.br-sp {display: none; }
}
a {
  text-decoration: none;
}

.text { display: inline-block; }


.fontsize-80{ fontsize:80%; }



.diploma_img {
width: 10%;
}
.logo40 img {
 width: 40%;
 }
@media screen and (max-width: 480px){
.logo40 img { width:100%; }
}
/*全体　おわり*/

/*header はじめ*/

h1 {
  position: relative;
  padding: 0.35em 0.5em;
   background:#eaccff;
  color: #393939;
 text-align: center 
}
h1:before {
  content: " ";
  position: absolute;
  top: -16px;
  left: 0;
  width: -webkit-calc(100% - 16px);
  width: calc(100% - 16px);
  height: 0;
  border: solid 8px transparent;
  border-bottom-color:#9500ff ;
  }

/*header おわり*/

#container {
  max-width: 960px;
  margin: 0 auto;
}
.main{
width: 100%;}
　
@media screen and (max-width: 480px){
.main{
width: 95%;
}}
@media screen and (max-width: 480px){
#container {
width: 95%;
}}


.center {
text-align: center
 }



/*メニュー*/
.menu-container {
  margin: 0;
}

.menu {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu .menu-item {
  flex: 1;
}

.menu .menu-item a {
  background: #fff;
  border: 1px solid #ccc;
  border-right: none;
  color: #333;
  display: block;
  padding: 0.6em 0.4em;
  text-align: center;
  text-decoration: none;
}

.menu .menu-item a:hover {
  background: #ccc;
  color: #ffffff;
}

.menu .menu-item:last-child a {
  border-right: 1px solid #ccc;
}

/*メニュー*終り/




/*更新情報*/

table.company {
width: 500px;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0px 15px;
font-size: 12px;
}

table.company th,
table.company td {
padding: 10px;
}

table.company th {
background: #295890;
vertical-align: middle;
text-align: left;
width: 100px;
overflow: visible;
position: relative;
color: #fff;
font-weight: normal;
font-size: 15px;
}

table.company th:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-left-color: #295890;
border-width: 10px;
margin-top: -10px;
}
 table  
 {margin-left:auto;margin-right:auto;
 text-align: center;
}


table.company th {/*table内のthに対して*/
  padding: 10px;/*上下左右10pxずつ*/
text-align: left;
}

table.company td {/*table内のtdに対して*/
  padding: 3px 10px;/*上下3pxで左右10px*/
}

table.company {
  border-collapse: collapse;
　width: 100%;
}

 table.company th, table.company td
 {
  border: solid 1px blue;
  /*実線 1px 青*/
}



.box29 {
    margin: 2em 0;
    background: #dcefff;
　　
       }
.box29 .box-title {
    font-size: 1.2em;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
    }

.box29 p {
    padding: 15px 20px;
    margin: 0;
}





/*更新情報*おわり/



#mainpage table td {/*table内のtdに対して*/
  padding: 5px 5px;/*上下5pxで左右30px*/
}

#mainpage table {
 border-collapse: collapse;
　width: 100%;
}

 #mainpage table {
  border-collapse: collapse;
}
 #mainpage table th, #mainpage table td
 {border: solid 1px black;  /*実線 1px 黒*/
}

#mainpage table tbody th {
 
padding: 10px;/*上下左右10pxずつ*/
 text-align: center;
  background-color:#fbccff ;
}

/*メインページ*/


width: 90%;
font-size:90%;
}}

/*メインページ*おわり/

/*ボタン はじまり*/

section {
  max-width: 300px;
  margin: 0 auto;
}
a.btn_10 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  background: #fff;
  position: relative;
}
a.btn_10 span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background: #fff;
  box-sizing: border-box;
  color: #333;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-decoration: none;
  box-shadow: 0px 5px 12px #CAD4E2, -6px -6px 12px #FFF;
  border-radius: 10px;
  position: absolute;
  top: -5px;
  left: 0;
  transition-duration: 0.2s;
}
a.btn_10:hover span {
  left: 0;
  top: 0;
  box-shadow: 0 0 4px #CAD4E2, -2px -2px 4px #FFF;
}

/************************************
** ボタン
************************************/
.on-line {
    position: relative;
    background-color: #f0f08b; /* 背景色 */
    color: black; /* 文字色 */
    padding: 15px 32px; /* パディング */
    text-align: center; /* 文字のアライメント */
    text-decoration: none; /* 文字装飾 */
    display: inline-block; /* ボタンの表示方法 */
   font-size: 16px; /* フォントサイズ */
　　font-family: Arial, sans-serif; /* フォント */
    margin: 4px 2px; /* 外側の余白 */
    cursor: pointer; /* カーソル */
    border: 2px solid #f0f048; /* 枠線 */
    border-radius: 5px; /* ボタンの角丸 */
}
.pink {
    font-size: 16px; /* フォントサイズ */
    background-color:#ffccff ; /* 背景色 */
     border: 1px solid pink; /* 枠線 */
border-radius: 10px; /* ボタンの角丸 */
}

/*その他box等*/
.box4{
    padding: 8px 19px;
    margin: 2em 0;
    color: #2c2c2f;
    background: #cde4ff;
    border-top: solid 5px #5989cf;
    border-bottom: solid 5px #5989cf;
}
.box4 p {
    margin: 0; 
    padding: 0;
}


.box15 {
    padding: 0.2em 0.5em;
     margin: 2em 0;
    color: #565656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
    width:90%;
}
.box15 p {
    margin: 0; 
    padding: 0;
}

.box27 {
    width:78%;
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}


.box29 {
    width: 80%;
　display: block;
    margin: 0 auto 0 auto;
}
.box29 p {
    padding: 15px 20px;
    margin: 0;
}



.box29 {
    margin: 2em 0;
    background: #dcefff;
　　
       }
.box29 .box-title {
    font-size: 1.2em;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
    }

.box29 p {
    padding: 15px 20px;
    margin: 0;
}

.box29-red {
    margin: 2em 0;
    background:#ffe6e6 ;
　　
       }
.box29-red .box-title {
    font-size: 1.2em;
    background: #e83929;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
    }

.box29-red p {
    padding: 15px 20px;
    margin: 0;
}

@media screen and (max-width: 480px){
.box29-red .box-title  {
      font-size:15px;
　   } }
.font1{
font-weight: bold;
 color: blue;
}
.red{
font-weight: bold;
 color: red;
}
.redfont25{
font-weight: bold;
 color: red;
font-size:25px;
}
.blue{
 color: blue;

}

.komoku{
  display: inline-block;
  width: 80px;
  height: 30px;
  border-radius:10px;
  background:skyblue;
  text-align:center;
  line-height: 30px;
 
　}

/*その他おわり*/

/*授業*/
#schedule table {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width: 650px;
  table-layout: fixed;
}

#schedule table tr {
  background-color: #e6f2f5;
  padding: .35em;
  border-bottom: 2px solid #fff;
}
#schedule table th,
#schedule table td {
  padding: 1em 10px 1em 1em;
  border-right: 2px solid #fff;
}
#schedule table th {
  font-size:12px;
}
#schedule tablethead tr{
  background-color: #167F92;
  color:#fff;
}
#schedule table tbody th {
    background: #78bbc7;
    color: #fff;
}
.txt{
   text-align: center;
   font-size:12px;
}
.price{
  text-align: center;
  color: #167F92;
  font-weight: bold;
}
.non{
  background:#fff
}
@media screen and (max-width: 600px) {
 #schedule table{
    border: 0;
    width:100%
  }
#schedule table th{
    background-color: #167F92;
    display: block;
    border-right: none;
  }
#schedule table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
 #schedule table tr {
    display: block;
    margin-bottom: .625em;
  }
#schedule  table td {
    border-bottom: 1px solid #bbb;
    display: block;
    font-size:12px;
    text-align: right;
    position: relative;
    padding: .625em .625em .625em 4em;
    border-right: none;
  }
  
 #schedule table td::before {
    content: attr(data-label);
    font-weight: bold;
    position: absolute;
    left: 10px;
    color: #167F92;
  }
#schedule table td:last-child {
    border-bottom: 0;
  }
#schedule table tbody th {
    color: #fff;
}
}

/* 吹き出し本体 */
.balloon1{
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #ffffff;
  background-color:pink;
  margin-left: 110px;          /* 左に余白を設ける */
  width: 150px;
  font-size :20px;

}
/* 画像 - 絶対配置で左上に配置 */
.balloon1 .icon{
  position: absolute;
  left: -110px;
  top: 0;
}
/* 三角アイコン */
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid pink;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}


/*フッター はじまり*/
.footer{
 position: sticky;
  top: 100vh;
 text-align: center;
  width:100%;
　height: 75px;
  background: #FFFFAA ;
  color: blue;
  clear: both;

 }

.footer img{
    vertical-align: middle;
    display: inline-block;
}


@media screen and (max-width: 480px){
.box29 {
       width:100%;
}
@media screen and (max-width: 480px){
.box27 {
       width:90%;
}

@media screen and (max-width: 480px){
.box29 p {
       line-height:1
    }


@media screen and (max-width: 480px){
table.company {
width: 95%;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0px 15px;
font-size: 12px;
}
@media screen and (max-width: 480px){
ul.menu {
font-size: 12px;
}
@media screen and (max-width: 480px){
.calendar {
width: 95%;

@media screen and (max-width: 650px) {
  .menu-container .menu {
    flex-wrap: wrap;
    width: 100%;
  }
  .menu-container .menu .menu-item {
    flex: auto;
    width: 33.33333333%;
  }
  .menu-container .menu .menu-item:nth-child(3n) a {
    border-right: 1px solid #ccc;
  }
  .menu-container .menu .menu-item:nth-child(n + 4) a {
    border-top: none;
  }

@media screen and (max-width: 480px){
table.company th {
width: 50px;}
@media screen and (max-width: 480px){
table.company td {
font-size: 11px;}
 
@media screen and (max-width: 480px){
table.company th {
font-size: 11px;}



@media screen and (max-width: 480px){
table.company th {
width: 50px;}
@media screen and (max-width: 480px){
table.company td {
font-size: 11px;}
 
@media screen and (max-width: 480px){
table.company th {
font-size: 11px;}

@media screen and (max-width: 480px){
table.company {
width: 95%;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0px 15px;
font-size: 12px;
}