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

container d-flex flex-column flex-md-row justify-content-between{background-color: beige;}

.midasi{text-align: center;
}


	
html,body{background-color: #FFFBEA;
    height: 100%;
   padding-left: 5px;
	padding-right: 3px;
width: 375px;
}
.header{
	top:0;
	left: 0;
margin: 0;
	width: 100%;
	height: 100px;
    z-index: 9999;
	background-color: #FFFFFF;
	font-weight: bold;
}
.syoukai{padding: 10px;}


.header a{color: #17C7D5;}



#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #17C7D5;
  opacity: 0.7;
  border-radius: 50%;
  }
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 40px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f062';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}


.btn-outline-info{font-size: 1.5em;
	margin-left: 80px;
	margin-bottom: 50px;
width: 200px;
height:80px;
	padding: 20px;
}

.btn-outline-dark{
	font-size: 1.5em;
	margin-left: 80px;
	margin-bottom: 50px;
width: 200px;
height:100px;
	padding: 10px;}




.slider {
    width: 100%;
    margin: 0 auto 80px;
}

.slick-slide img {
    width: 100%;
    height: auto;
}

.mypattern {
    width: 100%;
}

.mypattern .slick-slide {
    margin: 10px;
}

/*slick setting*/

.mypattern .slick-slide:not(.slick-center) {
    -webkit-filter: opacity(60%);
    -moz-filter: opacity(60%);
    -o-filter: opacity(60%);
    -ms-filter: opacity(60%);
    filter: opacity(60%);
    transition: 0.2s linear;
}

/*slick setting*/

.slick-prev:before,
.slick-next:before {
    color: #000;
}



th{color: aliceblue;}



hr{border-bottom: 1px;}


h1.cover{font-size: 43px;
color:  #FFB246;
text-shadow: 0 2px 1px #FFFFFF , 1px 1px 2px #8D8C87;

}

/*1番見出し*/
h1 {
     text-align: center;
}
 
h1 span{
     position: relative;
     display: inline-block;
     padding-bottom:0.4em;
     border-bottom: 1px solid black;
}
      
h1 span::before,
h1 span::after {
     position: absolute;
     top: 100%;
     left:50%;
     transform:translateX(-50%);
     content: '';
     border: 10px solid transparent;
}
 
h1 span::before {
     border-top: 10px solid black;
}
 
h1 span::after {
     margin-top: -1px;
     border-top: 10px solid #FFFBEA;
}



/*入試 アクセスとオーキャン　*/
h2{ 
position: relative; 
padding: .4em .75em; 
text-align:center; 
border-top: solid 1px #17C7D5; 
border-bottom: solid 1px #17C7D5;
}
h2:before,h2:after{ 
content: ''; 
position: absolute; 
top: -.3em; 
width: 1px; 
height: calc(100% + 0.9em); 
background-color: #17C7D5;
}
h2:before{
left: 0.6em;
}
h2:after{
right: .5em;
}


/*1年から４年　授業内容*/
h3 {
padding-bottom: 0;
border-bottom: 2px solid #17C7D5;
}
h3:first-letter {
margin-right: 0em;
font-size: 1.8em;
color:#17C7D5;
}


/*授業名　*/
h4{font-size: 23px;
    color:#4EDBE6;
	text-shadow: 2px 2px #fff, 3px 3px rgba(0, 188, 212, 0.4);}


h6{color: #fff;}



/*３年コース授業　*/
.maru1{position: relative;
	 display: table-cell;
	vertical-align: middle;
	height: 180px;
width: 180px;
background:#BCECA7;
border-radius: 180px;
}




.maru2{position: relative;
	 display: table-cell;
	vertical-align: middle;
	
	height: 180px;
width: 180px;
background: #FCEE64;
border-radius: 180px;}



.kiso img{margin-left: 60px;
margin-bottom: 30px;}

.under {
  background: linear-gradient(transparent 50%, #FAC87C 50%);
}

.balloon1-top {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FCEE64;
}

.balloon1-top:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #FCEE64;
}

.balloon1-top p {
  margin: 0;
  padding: 0;
}

.balloon {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 160px;
  max-width: 200px;
  color: #555;
  font-size: 18px;
  background: #FCEE64;
}

.balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #FCEE64;
}








.balloon2 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 3px;
  min-width: 320px;
  max-width: 200px;
  color: #555;
  font-size: 16px;
  background: #FCEE64;
}

.balloon2:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #FCEE64;
}








/*オーキャン画像　*/
.square1 {position: relative;
   width: 240px;
   height: 150px;
	
	left: 10px;
   background: #FAC87C;
}
.square1 img{position: absolute;
left:-27px;
top:70px;
margin-bottom: 30px;}
.square1 p{color: #fff;
padding-left: 10px;}


.square2 {position: relative;
   width: 240px;
   height: 170px;
	top: 250px;
	left: 120px;
   background: #FAC87C;	
}

.square2 img{position: absolute;
left:-140px;
top:90px;}

.square2 p{color: #fff;
padding-left: 10px;}


.square3 {position: relative;
   width: 260px;
   height: 170px;
	top: 460px;
	left: 10px;
   background: #FAC87C;
}
.square3 p{color: #fff;
padding: 10px;}



 

/* ボタン全体 */


.flowbtn12{
font-family:'Verdana',sans-serif;	
border-radius: 10px;
display:inline-block;
text-align: center;
margin-top: 10px;
;

width:80%;
font-size:20px;
transition:.4s;	
text-decoration:none;
}
/* ボタン内テキストマウスホバー時 */
.flowbtn12:hover{
color:#fff!important;
text-decoration:none;
}
/* Twitter */
.flowbtn12.fl_tw2{
border:solid 1px #55acee;
	margin-bottom: 20px;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn12.fl_tw2:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Facebook */
.flowbtn12.fl_fb2{
border:solid 1px #3b5998;
color:#3b5998;
	margin-bottom: 20px;
}
/* Facebookマウスホバー時 */
.flowbtn12.fl_fb2:hover{
border:solid 1px #3b5998;
background:#3b5998;
}
/* YouTube */
.flowbtn12.fl_yu2{
border:solid 1px #fc0d1c;
color:#fc0d1c;
}
/* YouTubeマウスホバー時 */
.flowbtn12.fl_yu2:hover{
border:solid 1px #fc0d1c;
background:#fc0d1c;
}



footer{text-align: center;}