@charset "UTF-8";
/*
Theme Name: kotonoheart style
Theme URI: http://kotonoheart.com
Description: kotonoheart
Version: 1.0
Author: croisnote
*/
html,body,div,h1,h2,h3,h4,h5,h6,p,ul,li{
	margin:0;
	padding:0;
	}
body{
	font-family: '游ゴシック', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo,'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	line-height:150%;
	}

html { font-size: 62.5%; } /* 10px */
body { font-size: 1.6rem; } /* 16px */
h1 { font-size:2.4rem; } /* 24px */
h2 { font-size:2.2rem; } /* 22px */
h3 { font-size:1.8rem; } /* 18px */
p  { font-size: 1.6rem; } /* 16px */
li { font-size: 1.6rem; } /* 16px */
li p { font-size: 1.6rem; } /* 16px */

.dash-icons-ga{
  display: block;
  height: 70px;
  width: 70px;
  margin: 10px auto 0;
  padding: 5px;
  font-size: 70px;
  background-color: #FFF;
  border-radius:5px
}

/* 新入生募集ページ関連 */
.cover {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #fff;
  }
.full-bg{
  width:100%;
  height:100vh;
  background-size: cover;
  }
.full-bg-5{
  width:100%;
  height:120vh;
  background-size: cover;
  }
.sin-section1{background: #5599ff no-repeat fixed;}
.sin-section2{background: #ffa630 no-repeat fixed;}
.sin-section3{background: #ffd400 no-repeat fixed;}
.sin-section4{background: #999af2 no-repeat fixed;}
.sin-section5{background: #99dbf2 no-repeat fixed;}
.sin-section6{background: #FFA78F no-repeat fixed;}
.centerBox {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 634px;
  height: 80%;
  text-align: center;
  }
.centerBox-5 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 634px;
  height: 90%;
  text-align: center;
  }
		.button-sin-top{
			margin:0px 0px 10px 0px;
			background:#990000;
			border-radius:8px;
			text-align:center;
			line-height:3em;
			font-weight: bold;
			font-size: 1.5em;
			color:#fff;
			}
		.button-sin-top a{
			color:#fff;
			}
.sinbo-i{
  margin:3%;
  width:60%;
  }
.ryo_btn1 {
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding:1%;
	width:96%;
	margin: 1.5%;
	border-radius:8px;
    line-height: 3em;
    font-size: 1.3em;
    text-decoration: none;
    color: #FFF;
    background: #a180dc;
    transition: .4s;
}

.ryo_btn1>span {
    border-bottom: solid 2px #FFF;
}

.ryo_btn1:hover {
    background: #91b5fb;
}
/* 新入生募集ページ　学年別コース料金ボタン */
.ryo-ma{
	margin:auto;
	margin-bottom: 3em;
	text-align:center;
}
.ryo_btn {
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding:1%;
	margin: 1.5%;
    width: 80px;
    height: 80px;
    line-height: 3em;
    font-size: 1.5em;
    text-decoration: none;
    color: #FFF;
    background: #a180dc;
    transition: .4s;
}

.ryo_btn>span {
    border-bottom: solid 2px #FFF;
}

.ryo_btn:hover {
    background: #91b5fb;
}
.s4{background: #5599ff;}/*小4*/
.s5{background: #ffa630;}/*小5*/
.s6{background: #ffd400;}/*小6*/
.c1{background: #999af2;}/*中1*/
.c2{background: #99dbf2;}/*中2*/
.c3{background: #FFA78F;}/*中3*/
.k1{background: #14dc58;}/*高1*/

.ryo-time{
	text-align:right;
}
/* 予定表小中高ボタン */
.yo-btn{
    position: relative;
    display: inline-block;
    padding: 0.25em 0.5em;
	margin: 0 0.15em;
    text-decoration: none;
    color: #333;
    background: #ffff98;/*背景色*/
    border-radius: 4px;/*角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
    font-weight: bold;
	}
.yl{background: #ffff98;/*小学生*/}
.green{background: #cdffcc;/*中学生*/}
.gray{background: #efede2;/*高校生*/}
.light-green{background: #c1ff9e;/*受験生*/}
.ev_btn {
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding: 0.25em 0.5em;
    text-decoration: none;
    color: #FF0000;
    background: #ffff00;
    transition: .4s;
}
.ev_btn>span{
    border-bottom: solid 2px #FF0000;
    border-top: solid 2px #FF0000;
}
.day_btn{
	display: inline-block;
    padding: 0.5em 1.25em;
    text-decoration: none;
    background: #f7f7f7;
	border-bottom: solid 6px #222;
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
	}
.nichi{
	border-bottom: solid 6px #ff7c5c;
	}
.doyou{
	border-bottom: solid 6px #4444ff;
	}
#bg-wrapper{
	width:100%;
	height:797px;
	/* background:#002266; */
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
		background-size:100% 797px;
	}
#wrapper{
	margin:auto;
	width:980px;
	height:797px;
	background:url("image/illust.png");
	}
	#left{
		float:left;
		width:260px;
		height:377px;
		padding:80px 0px 0px 40px;
		}
.sp-logo{
display:none;
}
.sp-osirase{
	display:none;
}
		.button-top{
			width:203px;
			height:40px;
			margin:0px 0px 10px 0px;
			background:#990000;
			border-radius:8px;
			text-align:center;
			line-height:42px;
			color:#fff;
			}
			.button-top a{
				color:#fff;
				text-decoration:none;
				}
		.button{
			width:203px;
			height:40px;
			margin:0px 0px 10px 0px;
			background:#990000;
			border-radius:8px;
			text-align:center;
			line-height:42px;
			color:#fff;
			}
			.button a{
				color:#fff;
				text-decoration:none;
				}
			.orange{
				background:#FFA630;
				}
			.yellow{
				background:#FFD400;
				}
			.red{
				background:#FE7070;
				border-radius:0px 0px 0px 0px ;
				}
			.pink{
				background:#FFA78F;
				}
			.ocean{
				background:#99DBF2;
				}
			.blue{
				background:#999AF2;
				}
			.green{
				background:#B3E235;
				}
			.pea-green{
				background:#5CF64A;
				}
			.topics-blog{
				height:auto;
				width:200px;
				background: rgba(255, 255, 255, 0.7) none repeat scroll 0% 0%;
				margin: 0px 0px 0px 0px;
				padding: 12px 0px 12px 3px;
				border-radius:8px;
				}
				.topics-blog ul li a{
					list-style-type:none;
					font-size: 1em;
					text-decoration:none;
					}
				.topics-blog h2 a{
					margin-left:12px;
					text-decoration:none;
					}
	#right{
		float:right;
		width:680px;
		height:657px;
		}
		#right img{
			margin: 50px 0px 0px 10px;
			}
	.topics{
		height:auto;
		width:450px;
		background: rgba(255, 255, 255, 0.7) none repeat scroll 0% 0%;
		margin: 60px 0px 0px 166px;
		padding: 12px;
		}
		.topics ul li {
			list-style-type:none;
			font-size: 1em;
			}
#bg-footer{
	clear:both;
	width:100%;
	height:120px;
	background:#002266;
	}
#footer{
	clear:both;
	margin:auto;
	width:956px;
	height:88px;
	padding:12px;
	background:#fff;
	}
	.footer-left{
		float:left;
		width:288px;
		padding-top:36px;
		}
		.footer-left img{width:80%; height:auto;}
		.footer-left a{text-decoration:none;}
		.footer-left a h3{
			font-size: 24px;
			color:#333;
			}
	.footer-right{
		float:left;
		width:668px;
		}
	.footer-top{
		height:68px;
		text-align:right;
		color:#333;
		}
		#menu ul li{
			float:right;
			}
			#menu:after{
				content:".";
				display:block;
				visibility:hidden;
				height:0.1px;
				font-size:0.1em;
				line-height:0;
				clear:both;
				}
			#menu ul li{
				padding:0px 10px 0px 10px;
				text-decoration:underline;
				list-style-type:none;
				}
	.footer-bottom{
		height:20px;
		padding-right:2%;
		text-align:right;
		color:#333;
		}
.sp{display:none;}

/* kizi-page */
.pattern4.card {
  display: flex;
  flex-wrap: wrap;
}

.pattern4 .card_item {
    width: calc(33.333% - 10px);
    margin: 3% 1% 3% 0%;
    border: solid 2px #0000ff;
}

.pattern4 .card_item:nth-child(3n) {
  margin-right: 0;
}
.card-title{
height: auto;
padding: 1% 2% 0% 0%;
background-color: #ffffff;
overflow: hidden;
}
.card-title h2 a{
  color:#333333;
  text-decoration:none;
}
.card-sec{
	padding-left: 1%;
min-height: 12rem;
  background-color:#f9f9f9;
}
.sp-kizi-iti{
	display:none;
}
.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(260px, 280px));
}
.card_item {
    margin: 1% 0% 1% 0%;
    border: solid 1px #ececec;
}
/* page */
.main-con{
	padding-top: 16px;
	}
.page-h2{
	padding:6px 0px 0px 0px ;
	}
	
.oshirase-wrapper{
	margin:auto;
	width:980px;
	height:auto;
	padding: 60px 0px 10px 0px;
	background:url("image/sky.jpg");
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
		background-size:100% 100%;
	}
	.oshirase-contents{
		margin:auto;
		float:left;
		width:88%;/* 634px */
		height:auto;
		margin:0px;/* 0px 16px 0px 0px */
		padding: 0% 6%;/*  0px 12px 10px 12px */
		background:#fcfcfc;
		}
/* <?php get_sidebar("l"); ?> */
	.calendar{
		margin:auto;
		padding-top:1%;
		float:right;
		width:306px;
		height:auto;
		background:#fcfcfc;
		}
	.calendar a{
		text-decoration:none;
		}
/* yotei-page */
	
.yotei-bg-wrapper{
	width:100%;
	height:auto;
	background:#002266;
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
		background-size:100% 797px;
	}
.yotei-wrapper{
	margin:auto;
	width:980px;
	height:auto;
	padding:60px 0px 0px 0px;
	background:url("image/sky.jpg");
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
		background-size:100% 100%;
	}
	.contents{
		margin:auto;
		width:90%;
		height:auto;
		padding: 0px 0px 10px 0px;
		}
		.contents img{
			width:100%;
			height:auto;
			}
.sp-plan{display:none;}
/* single */
.content-erea{
	padding:1% 0%;
	}
		.button-single{
			width:100%;
			margin:0px 0px 10px 0px;
			border-radius:0px;
			text-align:center;
			line-height:4em;
			color:#fff;
			}
			.button-single a{
				color:#fff;
				text-decoration:none;
				}
.kizi-erea{
	margin:0;
	width:980px;
	height:auto;
}
.kizi-section{
	float:left;
	margin: 0px 0px 0px 30px;
	width:632px;
	min-height:600px;
	background-color:#fcfcfc;
	border-left:2px solid #bbb;
	border-bottom:2px solid #bbb;
}
.kizi-relative{
	float:left;
	margin: 0px 30px 0px 26px;
	width:260px;
	background-color:#fcfcfc;
}
.kizi-title{
	margin:2% 0% 0% 0%;	
	border-bottom:2px solid #999;
}
.kizi-title a{
	color:#333;
	text-decoration:none;
}
.kizi-content{
	margin:1% 0% 0% 2%;
	padding-bottom:5%;
}
/* overall */
	
.clearfix:after{
	content:".";
	display:block;
	visibility:hidden;
	height:0.1px;
	font-size:0.1em;
	line-height:0;
	clear:both;
	}
#related-article{
	padding: 12px 0px;
	}
				.pager{
					padding:2px 20px 2px 20px;
					clear:both;
					}
				.pager a:hover{
					text-decoration:underline;
					}
					.leftkizi{
						float:left;
						text-align:left;
						}
					.rightkizi{
						float:right;
						text-align:right;
						}
body{
	background:#002266;
	}
.effect2{
		position: relative;
		}
	.effect2:before, .effect2:after{
		z-index: -1;
		position: absolute;
		content: "";
		bottom: 15px;
		left: 10px;
		width: 50%;
		top: 80%;
		max-width:300px;
		background: #000;
		-webkit-box-shadow: 0 15px 10px #000;
		-moz-box-shadow: 0 15px 10px #000;
		box-shadow: 0 15px 10px #000;
		-webkit-transform: rotate(-3deg);
		-moz-transform: rotate(-3deg);
		-o-transform: rotate(-3deg);
		-ms-transform: rotate(-3deg);
		transform: rotate(-3deg);
		}
	.effect2:after{
		-webkit-transform: rotate(3deg);
		-moz-transform: rotate(3deg);
		-o-transform: rotate(3deg);
		-ms-transform: rotate(3deg);
		transform: rotate(3deg);
		right: 10px;
		left: auto;
		}
@media screen and (max-width: 634px) {
	html { font-size: 62.5%; }
	body { font-size: 14px; font-size: 1.4rem; }
	li   { font-size: 16px; font-size: 1.6rem; }
	h1   { font-size: 18px; font-size: 1.8rem; }
	h2   { font-size: 16px; font-size: 1.6rem; }
	p    { font-size: 14px; font-size: 1.4rem; }
	td   { font-size: 12px; font-size: 1.2rem;}
	body{
		background:#333;
		}
	#wrapper{
		margin:auto;
		width:100%;
		
		background:url("image/illust.png");
background-size: cover;
		}
/* 新入生募集用固定ページ */
.centerBox {width: 90%;}
.centerBox-5 {width: 90%;}
.sinbo-i{ width:60%; }

	#left{
		width:92%;
		height:auto;
		padding: 0px 4% 0px;
		}
	.sp-logo{
		display:inline;
		width:100%;
		height:auto;
		}
		.button{
			float:left;
			width:50%;
			height:40px;
			margin:0px;
			border-radius:0px;
			text-align:center;
			line-height:42px;
			color:#fff;
			}
			.button a{
				color:#fff;
				text-decoration:none;
				}
/* kizi-page */
.pattern4.card {
  display: flex;
  flex-wrap: wrap;
}

.pattern4 .card_item {
    width: calc(33.333% - 10px);
    margin: 3% 1% 3% 0%;
    border: solid 2px #0000ff;
}

.pattern4 .card_item:nth-child(3n) {
  margin-right: 0;
}
.card-title{
  height:auto;
  padding: 6% 2% 0% 0%;
  background-color:#ffffff;
  overflow:hidden;
}
.card-title h2 a{
  color:#333333;
  text-decoration:none;
}
.card-sec{
  height: auto;
  padding-left:3%;
}
.sp-kizi-iti{
	display:inline;
}
.pc-kizi-iti{
	display:none;
}


/* 新入生募集関連料金ボタン */
.ryo-ma{
	margin-right:auto;
	text-align:center;
}
.ryo_btn {
	width: 70px;
    height: 70px;
    padding: 1%;
	margin: 1.5%;
    line-height: 3em;
    font-size: 1.5em;
}
.ryo-time{
	text-align:left;
}
	
	.topics-blog{
float: left;
width: 100%;
padding: 12px 0px 12px 0px;
}
#right{display:none;}

	.sp{
	float:left;
	display:inline;
		}
	.sp-osirase{
	float:left;
	margin:4% 0% 0% 0%;
	display:inline;
		width:100%;
		background: rgba(255, 255, 255, 0.8) none repeat scroll 0% 0%;
		}
	.sp-topics{
		margin:0px;
		padding: 0%;
		background: rgba(255, 255, 255, 0.8) none repeat scroll 0% 0%;
		border-bottom:2px solid #000;
		height:auto;
		}
		.sp-topics ul,li{list-style:none;}

#bg-footer{
	clear:both;
	width:100%;
	height:120px;
	background:#002266;
	}
#footer {
  clear: both;
  margin: 0%;
  width: 100%;
  height: 10em;
  padding: 12px 0px;
  background: #fff;
}
.footer-left {
    width: 100%;
    padding-top: 2px;
}
.footer-right {
    float: left;
    width: 96%;
	padding:0% 2%;
}
.footer-top {
    height: 68px;
    text-align: right;
    color: #333;
}
.footer-bottom {
    height: 20px;
    padding-right: 2%;
    text-align: right;
    color: #333;
}
.related-entry-content{
	margin:1% 0%;
	}
#menu ul li {
    padding: 0px 2px;
    font-size: 12px;
}
.sp-plan{display:inline;}
/* single記事 */

.kizi-erea{
	margin:0;
	width:100%;
	height:auto;
}
.kizi-section{
	float:left;
	margin: 1% 2%;
	width:96%;
	min-height:0px
	border-left:0px solid #bbb;
}
.kizi-relative{
	float:left;
	margin: 0% 2%;
	width:96%;
}

.oshirase-wrapper{
	width:100%;
	height:auto;
	padding:0px;
	}
.oshirase-contents {
    margin: 0% 2%;
    width: 96%;
    height: auto;
    padding: 0px 0% 10px;
    background: #fcfcfc;
}
	.calendar{
		display:none;
		}
.oshirase-contents img{
    width: 100%;
height: auto;
}
.osirase-btn{
    width: 20px;
height: auto;
}
.content-erea {
    padding: 12px 2%;
}

/* page固定記事 */

.yotei-wrapper {
    width: 100%;
    padding: 20px 0px 0px 0px;
	}
}