@charset "utf-8";

/*
Theme Name: planet
Theme URI: 
Description: 
Version:
Author: 
Author URI: 
*/

/* CSS Document */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline:0;
	font-size: 62.5%;
	vertical-align: baseline;
	background: transparent;
}

body {
	font-family: "fot-tsukuardgothic-std", sans-serif;
	font-weight: 400;
	font-style: normal;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-style: normal;
	line-height: 1;
	background-color: #fff; /* ベースの背景色 */
 	background-image:
    radial-gradient(#05a2c4 20%, transparent 20%);
 	 background-size: 5px 4px;
	 background-position: 0 0;
}
@media screen and (min-width: 961px) {
	body {
			margin-top: 25px;
		margin-bottom: 25px;
		 	background-image:url("images/bg3.png");
	background-size: contain;
		background-attachment: fixed;

	}
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display: block;
}

ul,li {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
	color: #333;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* change colours to suit your needs */
ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

/* change colours to suit your needs */
mark {
	background-color: #ff9;
	color: #000; 
	font-style: italic;
	font-weight: bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
	display: block;
	height: 1px;
	border: 0;   
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}

input, select {
	vertical-align: middle;
}

p,h1,h2,h3,h4,h5,h6,h7,tr,th,td {
	font-weight: normal;
	color: #393333;
}

img{
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}

.clear {
	clear: both;
}

.tg1{
	display: block;
    padding-top: 100px;
    margin-top: -100px;
}
.tg2{
	display: block;
    padding-top: 60px;
    margin-top: -60px;
}
.tg3{
	display: block;
    padding-top: 100px;
    margin-top: -100px;
}
.tg4{
	display: block;
    padding-top: 60px;
    margin-top: -60px;
}
.tg5{
	display: block;
    padding-top: 100px;
    margin-top: -100px;
}
.tg6{
	display: block;
    padding-top: 60px;
    margin-top: -60px;
}
.tg7{
	display: block;
    padding-top: 100px;
    margin-top: -100px;
}

/* ---------- header----------*/

#nav_back {
  background: #fff;
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  z-index: 9999;
  box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}
#header_logo {
  height: 60px;
  padding-left: 20px;
}
#header_logo img {
  height: 40px;
  padding: 7px 0 13px 0;
}
.hamburger {
  display: block;
  position: fixed;
  z-index: 10000;
  right: 20px;
  top: 10px;
  width: 40px;
  height: 40px;
  background: #37869b;
  border-radius: 2px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  position: absolute;
  width: 26px;
  height: 4px;
  left: 7px;
  background: #fff;
  transition: 0.2s ease-in-out;
}
.hamburger span:nth-child(1) { top: 10px; }
.hamburger span:nth-child(2) { top: 18px; }
.hamburger span:nth-child(3) { top: 26px; }
.hamburger.active span:nth-child(1) { transform: translateY(8px); }
.hamburger.active span:nth-child(3) { transform: translateY(-8px); }

/* 初期状態（スマホ） */
nav.globalMenuSp {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.95);
  transform: translateX(100%);
  transition: all 0.2s ease;
}
nav.globalMenuSp.active {
  transform: translateX(0%);
}
.menu_logo {
  display: none;
}
.menu_list {
  padding-top: 60px;
}
.menu_list li {
  text-align: center;
  padding: 20px 0;
}
.menu_list a {
  font-size: 1.2rem;
  text-decoration: none;
  color: #333;
}

/* PC用（961px以上） */
@media screen and (min-width: 961px) {
  .hamburger,
  #header_logo {
    display: none;
  }

  nav.globalMenuSp {
    position: fixed;
    top: 0;
    left: 0;
    width: 36%;
    height: 100%;
    transform: none !important;
    display: block;
	  padding: 50px 30px;
	  box-sizing: border-box;
  }

  .menu_logo {
    display: block;
    padding: 0  0 50px 0;
	  text-align:center;
  }
	.menu_logo p{
			font-weight: 800;
	font-size:11px;
	}
  .menu_logo a {
    font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 800;
	font-style: normal;
	font-size: 28px;
	color: #05a2c4;
	  line-height: 1.4;
  
  }
	.menu_logo img {
		margin:0 auto;
		width:80%;
	object-fit:cover;
	}

  .menu_logo span {
	font-size: 15px;
	font-weight: 300;
  }

  .menu_list {
    display: block;
    padding: 0;
  }

  .menu_list li {
    text-align: left;
  }

  .menu_list a {
	font-weight: 800;
	font-style: normal;
	font-size: 18px;
	color: #37869b;
	  line-height: 1.2;
	  font-family:m-plus-rounded-1c, sans-serif;
  }

  #main_content {
    margin-left: 36%;
	  border-left: solid 2px rgba(0,0,0,0.1);
  }
}

@media screen and (min-width: 961px) {
  /* スマホ用ヘッダー非表示 */
  #nav_back {
    display: none;
  }
}
@media screen and (min-width: 1201px) {
  /* 左メニュー幅を36%に */
  nav.globalMenuSp {
    width: 36%;
	padding: 25px 5%;
	box-sizing: border-box;
	background-color: transparent;
  }

  /* メインコンテンツの幅も37%、右の余白26%は残す */
  #main_content {
    width: 44%;
    margin-left: 36%;
    margin-right: 20%;
	border: solid 3px #37869b;
  }
}

@media screen and (min-width: 1201px) {
	
.menuPC {
	background:#fff;
	border: solid 3px #37869b;
	padding:50px 0;
	}

	
.menuPC li {

	text-align:center;
	padding:0 0 30px 0;
	}	
}


/* ----------
 * アイキャッチ----------*/
#eyecatch{
	width: 100%;
	padding-top: 60px;
}
#eyecatch img{
	width: 100%;
	height: auto;
}
@media screen and (min-width: 961px) {
	#eyecatch{
		width: 100%;
		padding: 0;
	}
	#eyecatch img{
		width: 100%;
		height: auto;
	}
}
/* ----------
 * トップ----------*/
#top{
	width: 100%;
	padding: 40px 40px 60px 40px;
	box-sizing: border-box;
		  background:#fff;
}
#top h2{
	font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 40px;
	text-align: center;
	color: #37869b;
	margin: 20px 0 45px 0;
	letter-spacing:1px;
	line-height:50px;
}
#top p{
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	margin: 0 0 38px 0;
	line-height: 1.4;
	letter-spacing:1px;
	line-height:30px;
}
.top_button{
	text-align: center;
}
.top_button a{
	display: inline-block;	
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	background: #37869b;
	padding: 10px;
	border-radius: 5px;
}

/* ---------- 
 * お知らせ ----------*/
#information_back{
	width: 100%;
	padding: 40px 0 60px;
	background: #e8f8fb;
}
#information {
	width: 100%;
	padding: 0 40px;
	box-sizing: border-box;
}
#information h2 {
	font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	color: #37869b;
    border-left: 5px solid #37869b;
	padding: 0 0 0 15px;
 	margin: 0 0 40px 0;
	line-height: 1.2;
}

.info_container{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 0 38px 0;
}
.info_box{
	width: 48%;
	overflow: hidden;
	background: #ffffff;
	margin: 0 0 20px 0;
}
.info_img{
	width: 100%;
	aspect-ratio: 4 / 3;        /* アスペクト比4:3 */
	overflow: hidden;           /* はみ出た部分を非表示 */
	position: relative;
}
.info_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;          /* トリミング表示 */
	display: block;
}
.info_text{
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}
.info_date {
	margin: 0 0 10px 0;
}
.info_date p{
	font-size: 10px;
}
.info_title {
}
.info_title p{
	font-size: 13px;
	font-weight:700;
	line-height:16px;
}
.info_button{
	text-align: center;
}
.info_button a{
	display: inline-block;	
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	background: #37869b;
	padding: 10px;
	border-radius: 5px;
}

/* ---------- 
 * 特色 ----------*/
#feature{
	width: 100%;
	padding: 40px 40px 60px 40px;
	box-sizing: border-box;
		  background:#fff;

}
#feature h2 {
	font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	color: #37869b;
    border-left: 5px solid #37869b;
	padding: 0 0 0 15px;
 	margin: 0 0 30px 0;
	line-height: 1.2;
}
#feature h3{
	font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
 	margin: 0 0 30px 0;
	line-height: 1.4;
	text-align: center;
}
#feature p{
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 38px 0;
	line-height: 1.6;
}
.feature_button{
	text-align: center;
}
.feature_button a{
	display: inline-block;	
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	background: #37869b;
	padding: 10px;
	border-radius: 5px;
}

/* ---------- 
 * 流れ ----------*/
#flow_back{
	width: 100%;
	padding: 40px 0 60px;
	background: #e8f8fb;
}
#flow {
	width: 100%;
	padding: 0 40px;
	box-sizing: border-box;
}
#flow h2 {
	font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	color: #37869b;
    border-left: 5px solid #37869b;
	padding: 0 0 0 15px;
 	margin: 0 0 40px 0;
	line-height: 1.2;
}

.flow_container{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.flow_box{
	width: 48%;
	overflow: hidden;
	background: #ffffff;
	padding: 15px 15px 20px 15px;
	box-sizing: border-box;
	margin: 0 0 15px 0;
}
.flow_img{
	width: 100%;
}
.flow_img img{
	width: 64%;
	padding: 0 18%;
}
.flow_text{
	width: 100%;
}
.flow_text h4{
	font-size: 16px;
	color: #37869b;
	font-weight: 700;
	margin: 0 0 10px 0;
}
.flow_text p{
	font-size: 13px;
	line-height: 1.4;
	font-weight: 700;
}
.flow_button{
	text-align: center;
}
.flow_button a{
	display: inline-block;	
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	background: #6ccfe4;
	padding: 10px;
	border-radius: 5px;
}

/* ---------- 
 * 受給者証 ----------*/
#certificate{
	width: 100%;
	padding: 40px 40px 30px 40px;
	box-sizing: border-box;
		  background:#fff;

}
#certificate h2 {
	font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	color: #37869b;
    border-left: 5px solid #37869b;
	padding: 0 0 0 15px;
 	margin: 0 0 30px 0;
	line-height: 1.2;
}
#certificate h3{
	font-size: 16px;
	color: #37869b;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 10px 0;
}
#certificate p{
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	margin: 0 0 30px 0;
}

/* ---------- 
 * よくあるご質問 ----------*/
#qa_back{
	width: 100%;
	padding: 40px 0 60px;
	background: #e8f8fb;
}
#qa {
	width: 100%;
	padding: 0 40px;
	box-sizing: border-box;
}
#qa h2 {
	font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	color: #37869b;
    border-left: 5px solid #37869b;
	padding: 0 0 0 15px;
 	margin: 0 0 40px 0;
	line-height: 1.2;
}

.qa_container{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.qa_box{
	width: 100%;
	padding: 15px 20px;
	box-sizing: border-box;
	background: #ffffff;
	margin: 0 0 20px 0;
	cursor: pointer;
	border-radius: 10px;
}
.q, .a {
	position: relative;
	padding: 0 28px; /* Q. / A. の分だけ余白を確保 */
}
.q {
	font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 16px;
	color: #37869b;
	margin: 0;
	line-height:19px;
	letter-spacing:1px;

}
.q::before {
	position: absolute;
	left: 0;
	top: 0;
	content: "Q. ";
	color: #37869b;
	font-weight: 700;
	font-size: 16px;
	margin-right: 5px;
	
}
.q::after {
	content: "▼";
	position: absolute;
	right: 0;
	top: -2.5px;
	font-size: 10px;
	color: #ffffff;
	transition: transform 0.3s ease;
	background: #6ccfe4;
	border-radius: 50%;
	padding: 5px 8px;
	box-sizing: border-box
}

/* 開いてるときは▲に変更 */
.qa_box.active .q::after {
	content: "▲";
}
.a {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	margin: 15px 0;
	display: none;
	transition: all 0.3s ease;
}
.a::before {
	position: absolute;
	left: 0;
	top: 0;
	content: "A. ";
	font-weight: 700;
	font-size: 16px;
	margin-right: 5px;
}

/* ---------- 
 * 送迎 ----------*/
#pickup{
	width: 100%;
	padding: 40px 40px 60px 40px;
	box-sizing: border-box;
		  background:#fff;

}
#pickup h2 {
	font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	color: #37869b;
    border-left: 5px solid #37869b;
	padding: 0 0 0 15px;
 	margin: 0 0 30px 0;
	line-height: 1.2;
}
#pickup p{
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
}

/* ---------- 
 * 所在地 ----------*/
#contact_back{
	width: 100%;
	padding: 40px 0 60px;
	background: #e8f8fb;
}
#contact{
	width: 100%;
	padding: 0 40px;
	box-sizing: border-box;
	margin-bottom:20px;
}
#contact h2 {
	font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	color: #37869b;
    border-left: 5px solid #37869b;
	padding: 0 0 0 15px;
 	margin: 0 0 30px 0;
	line-height: 1.2;
}
#contact p{
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	margin: 0 0 10px 0;
}
.map{
	
	width: 100%;
}

/* ---------- 
 * 系列教室 ----------*/
#group{
	width: 100%;
	padding: 40px 40px 20px 40px;
	box-sizing: border-box;
		  background:#fff;

}
#group h2 {
	font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	color: #37869b;
    border-left: 5px solid #37869b;
	padding: 0 0 0 15px;
 	margin: 0 0 30px 0;
	line-height: 1.2;
}
.group_box{
	width: 100%;
	margin: 0 0 40px 0;
	text-align: center;
}
.group_box h4{
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 10px 0;
}
.group_box p{
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	margin: 0 0 10px 0;
}
.group_button{
	text-align: center;
}
.group_button a{
	display: inline-block;	
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	background: #37869b;
	padding: 10px;
	border-radius: 5px;
}
/* ---------- 
 * フッター ----------*/
#footer{
	width: 100%;
	padding: 40px 0 40px;
	background: #e8f8fb;
	text-align: center
}
#footer img{
	width: 35%;
	margin: 0 0 20px 0;
}
#footer p{
	font-size: 10px;
}


/* ---------- 
 * 初めての方へ ----------*/
#first{
	width: 100%;
	padding: 90px 40px 60px 40px;
	box-sizing: border-box;
	background:#fff;
}
@media screen and (min-width: 961px) {
  #first {
	padding: 40px 40px 60px 40px;
  }
}
#first h2 {
	font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	color: #37869b;
    border-left: 5px solid #37869b;
	padding: 0 0 0 15px;
 	margin: 0 0 30px 0;
	line-height: 1.2;
}
#first h3{
	font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
 	margin: 0 0 30px 0;
	line-height: 1.4;
	text-align: center;
}
#first p{
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 38px 0;
	line-height: 1.6;
}
.first_button{
	text-align: center;
}
.first_button a{
	display: inline-block;	
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	background: #37869b;
	padding: 10px;
	border-radius: 5px;
}

/* ---------- 
 * 本校の特色 ----------*/
#feature2{
	width: 100%;
	padding: 90px 40px 60px 40px;
	box-sizing: border-box;
	background:#fff;
}
@media screen and (min-width: 961px) {
  #feature2 {
	padding: 40px 40px 60px 40px;
  }
}
#feature2 h2 {
	font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	color: #37869b;
    border-left: 5px solid #37869b;
	padding: 0 0 0 15px;
 	margin: 0 0 30px 0;
	line-height: 1.2;
}
#feature2 h3{
	font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
 	margin: 0 0 30px 0;
	line-height: 1.4;
	text-align: center;
}
#feature2 p{
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
}
#feature2_box_back{
	width: 100%;
	padding: 40px 0 0 0;
	background: #e8f8fb;	
}
#feature2_box{
	width: 100%;
	padding: 40px 40px 30px 40px;
	box-sizing: border-box;
}
#feature2_box h2 {
	font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	color: #37869b;
    border-left: 5px solid #37869b;
	padding: 0 0 0 15px;
 	margin: 0 0 20px 0;
	line-height: 1.2;
}
#feature2_box h3{
	font-size: 16px;
	color: #37869b;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 10px 0;
}
#feature2_box p{
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	margin: 0 0 50px 0;
}

/* ---------- 
 * お知らせ一覧 ----------*/

#information_back2{
	width: 100%;
	padding: 90px 0 60px;
	background: #e8f8fb;
}
@media screen and (min-width: 961px) {
  #information_back2 {
	padding: 40px 0 60px;
  }
}

/* お知らせページネーション */
.info_pagenation{
	width: 100%;
	margin-top: 20px;
	text-align: center;
	font-size: 18px;
	line-height: 40px;
}
.page-numbers.current {
    display: inline-block;
	background: #37869b;
	width: 40px;
	height: 40px;
	border-radius:3px;
	color:#FFF;
}
a.page-numbers{
	display: inline-block;
	background: #393333;
	width: 40px;
	height: 40px;
	border-radius:3px;
	color:#FFF;
}
.news_pagenation a.prev.page-numbers{
	font-size: 18px;
}
.news_pagenation a.next.page-numbers{
	font-size: 18px;
}


/* ---------- 
 * お知らせ詳細 ----------*/
#single_infomation{
	width: 100%;
	padding: 90px 40px 60px 40px;
	box-sizing: border-box;
	background:#fff;
}
@media screen and (min-width: 961px) {
  #single_infomation {
	padding: 40px 40px 60px 40px;
  }
}
.single_infomation_top{
	width: 100%;
}
.single_infomation_date{
	font-size: 13px;
    font-weight: 700;
	margin: 0 0 10px 0;
}
.single_infomation_top h2{
	font-family: m-plus-rounded-1c, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	color: #37869b;
    border-left: 5px solid #37869b;
	padding: 0 0 0 15px;
 	margin: 0 0 30px 0;
	line-height: 1.2;
}
.single_infomation_top_img{
	width: 100%;
	aspect-ratio: 4 / 3;        /* アスペクト比4:3 */
	overflow: hidden;           /* はみ出た部分を非表示 */
	position: relative;
	margin: 0 0 20px 0;
}
.single_infomation_top_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;          /* トリミング表示 */
	display: block;
}
.single_infomation_box{
	width: 100%;
	padding: 0 0 60px 0;
	border-bottom: 1px dotted #dAdAd9;
}
.single_infomation_box p{
	font-size: 13px;
    margin: 0 0 20px 0;
    line-height: 1.6;
}
.single_infomation_box img{
	width: 100%;
	height: auto;
	margin: 0 0 20px 0;
}