@charset "UTF-8";

/* ----------------------------------------------------
	reset
---------------------------------------------------- */

html {
	font-size: 62.5%;
}

body,h1,h2,h3,h4,h5,h6,body p,ul,ol,dl,dt,dd,li,table,th,td,form,select,option,address,pre,strong,em {
	font-style: normal;
    font-family: fot-klee-pro, essonnes-display, serif;
	line-height: 1.8;
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: 100%;
}

body h1,h2,h3,h4,h5,h6,body form,select,option,address,pre,em {
    font-weight: 700;
}

body {
	font-size: 12px;
	color: #000;
	background: #FFF;
}

img {
	border: 0px;
	vertical-align: bottom;
}

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

th, caption {
	text-align: left;
	font-weight: bolder;
}

a {
	text-decoration: underline;
	/* color: #000; */
}

a:hover {
	text-decoration: none;
}

a:focus {
	outline: none;
}

a img {
	vertical-align: top;
	text-decoration: none;
}

.line01 hr {
	height: 1px;         /* 高さ(※古いIE用) */
	border: none;
	border-top: 1px #FFF solid;
}

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

body {
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
}

.wrapper {
	margin: auto;
}

header {
	margin-top: 5px;
}

strong {
	font-size: 100%;
	font-family: vdl-v7marugothic, ryo-gothic-plusn, sans-serif;
	line-height: 1.8;
    font-weight: 500;
}

#title-back {
	width: 100%;
	background: #D3EDF9;
}

h1 {
	width: 960px;
	margin: 0 auto;
	font-weight: bold;
	padding: 5px 0 5px 5px;
	font-size: 1.5em;
	max-width: 100%;
}

/* ▼▼▼▼▼ toppage専用 ▼▼▼▼▼ */

.header-main {
	width: 960px;
	background: url(../img/bg_top01-w.webp)no-repeat center top;
	position: relative;
	margin: 0 auto;
	padding: 1px 0 0 0;
	max-width: 100%;
}

.header-main p {
	font-size: 16px;
	line-height: 1.5em;
	text-indent: 1em;
	margin: 0.3em 0;
	font-family: fot-klee-pro, essonnes-display, serif;
}

.header-main h2 {
	font-size: 22px;
	text-align: center;
	line-height: 1.2em;
}

.h_in {
	margin: 10px 0 0 25px;
	font-size: 1.3em;
	font-family: fot-klee-pro, essonnes-display, serif;
}

.header-main-btn {
	margin: 10px 0 0;
/*	border-top: 1px solid #000;*/
/*	border-bottom: 1px solid #000*/
}

/* ▲▲▲▲▲ toppage専用 ▲▲▲▲▲ */


/* ▼▼▼▼▼ toppage以外で利用　▼▼▼▼▼ */

.header-title {
	width: 960px;
	margin: 0 auto 10px;
	zoom: 1;
	max-width: 100%;
}

.header-title:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0.1em;
	line-height: 0;
}

.header-title h2{
	float: left;
	padding: 35px 0 0 0;
	max-width: 40%;
}

.h2in {
	font-size: 7em;
	line-height: 1em;
	text-align: center;
	font-weight: bold;
}

.header-title p {
	float: right;
	padding: 20px 0 8px 0;
}

.header-tel { /* toppage 以外の header 部分右側の連絡先画像用 */
	margin-right: 10px;
	float: right;
}

/* ▲▲▲▲▲ toppage以外で利用　▲▲▲▲▲*/

.spmenu {/* この class を使用すると mobile では表示されなくなる */
	display:none;
}


/* ----------------------------------------------------
	global-navigation
---------------------------------------------------- */

/* ▼▼▼▼▼ toppage専用 ▼▼▼▼▼ */

.description {
	box-sizing: border-box;
	width: 55%;	
	margin-top: 0.5em;
}

.header-main-btn ul {
	width: 960px;
	margin: 0 auto;
	zoom: 1;
	padding: 4px 0;
	max-width: 100%;
}

.header-main-btn ul:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0.1em;
	line-height: 0;
}

/* ▲▲▲▲▲ toppage専用 ▲▲▲▲▲ */


/* ▼▼▼▼▼ toppage以外で利用　▼▼▼▼▼ */

#except-for-top nav{
	padding: 4px 0;
	height: 142px;
	border-bottom: 1px solid #000000; /* global-navi とページタイトル(考える教材と授業等)との間に線を入れる*/
}

@media (max-width:900px)
{
	#except-for-top nav	{ 
	height: 182px;
    }
}

/* ▲▲▲▲▲ toppage以外で利用　▲▲▲▲▲*/


nav {
	background-color: #D3EDF9;
	height: auto;
}

nav ul {
	width: 960px;
	margin: 0 auto;
	max-width: 100%;
}

nav li {
	width: 24.4%; /* ボタンの横幅*/ 
	float: left; /* これによりボタンが横並びになる*/
	line-height: 2.35; /* ボタンの縦幅を font-size の何倍にするかを指定 */
	background-color: #000; /* ボタンの色*/
	list-style-type: none; /* li を用いると出る "・" などの記号を消す */
	letter-spacing: 0.05em; /* ボタン名の文字間をあけている */
	margin: 2px 0.3%; /* 左右 margin はボタンの横幅と足すと 25% となりボタン4つで 100％ になっている*/
	margin-bottom:4px;
	text-align: center; /* ボタン名をボタンの中央に配置 */
	font-family: fot-klee-pro, essonnes-display, serif;
	font-size: 1.5em; /* ボタン名の文字サイズ */
}

@media (max-width:900px)
{
    nav li {
        width: 32%;
        margin: 2px 0.6%;
    }
}

nav li span {
	letter-spacing: -1px;
}

nav a {
	display: block;
	text-decoration: none;
	color: #FFFFFF;
}

nav a:hover{ /* ボタンにマウスのカーソルが載った場合に以下のスタイルに変化する */
	background-color: #3C72A9;
	color: #FFFFFF;
}
nav #currentpage{ /*global-navi の現在開いているページの li にのみ使用する事で以下のスタイルにしている */
	background-color: #3C72A9;
	color: #FFFFFF;
}

/* ----------------------------------------------------
	voice button
---------------------------------------------------- */

#nav2 {
	height: auto;
	margin: 0 0 2em 0;
}

#nav2 ul {
	width: 960px;
	margin: 0 auto;
	max-width: 100%;
}

#nav2 li {
	width: 49.4%; /* ボタンの横幅*/ 
	float: left; /* これによりボタンが横並びになる*/
	line-height: 2; /* ボタンの縦幅を font-size の何倍にするかを指定 */
	background-color: #000; /* ボタンの色*/
	list-style-type: none; /* li を用いると出る "・" などの記号を消す */
	letter-spacing: 0.1em; /* ボタン名の文字間をあけている */
	margin: 2px 0.3%; /* 左右 margin はボタンの横幅と足すと 25% となりボタン4つで 100％ になっている*/
	margin-bottom:4px;
	text-align: center; /* ボタン名をボタンの中央に配置 */
	font-family: fot-klee-pro, essonnes-display, serif;
	font-size: 1.7em; /* ボタン名の文字サイズ */
}

#nav2 li span {
	letter-spacing: -1px;
}

#nav2 a {
	display: block;
	text-decoration: none;
	color: #FFFFFF;
}

#nav2 a:hover{ /* ボタンにマウスのカーソルが載った場合に以下のスタイルに変化する */
	background-color: #3C72A9;
	color: #FFFFFF;
}

#nav2 #currentpage2{ /*global-navi の現在開いているページの li にのみ使用する事で以下のスタイルにしている */
	background-color: #3C72A9;
	color: #FFFFFF;
}

#nav3 {
	height: auto;
	margin: 0 0 2em 0;
}

#nav3 ul {
	width: 880px;
	margin: 0 auto;
    max-width: 100%;
}

#nav3 li {
	width: 49.4%; /* ボタンの横幅*/ 
	float: left; /* これによりボタンが横並びになる*/
	line-height: 2; /* ボタンの縦幅を font-size の何倍にするかを指定 */
	background-color: #000; /* ボタンの色*/
	list-style-type: none; /* li を用いると出る "・" などの記号を消す */
	letter-spacing: 0.1em; /* ボタン名の文字間をあけている */
	margin: 2px 0.3%; /* 左右 margin はボタンの横幅と足すと 25% となりボタン4つで 100％ になっている*/
	margin-bottom:4px;
	text-align: center; /* ボタン名をボタンの中央に配置 */
	font-family: fot-klee-pro, essonnes-display, serif;
	font-size: 1.7em; /* ボタン名の文字サイズ */
 }

#nav3 li span {
	letter-spacing: -1px;
}

#nav3 a {
	display: block;
	text-decoration: none;
	color: #FFFFFF;
}

#nav3 a:hover{ /* ボタンにマウスのカーソルが載った場合に以下のスタイルに変化する */
	background-color: #3C72A9;
	color: #FFFFFF;
}

#nav3 #currentpage3{ /*global-navi の現在開いているページの li にのみ使用する事で以下のスタイルにしている */
	background-color: #3C72A9;
	color: #FFFFFF;
}

.btn-leap {
  display: inline-block;
  padding: 2px 20px;
  margin: -3px auto 5px;
  border-radius: 25px;
  text-decoration: none;
  color: #FFF;
  background-image: linear-gradient(45deg, #208eff 0%, #8bc0f5 100%);
  transition: .4s;
}

.btn-leap:hover {
  background-image: linear-gradient(45deg, #208eff 0%, #8baff5 100%);
}

.btn-leapr {
  display: inline-block;
  padding: 2px 20px;
  margin: -3px auto 5px;
  border-radius: 25px;
  text-decoration: none;
  color: #FFF;
  background-image: linear-gradient(45deg, #ff5f1f 0%, #ffcc6e 100%);
  transition: .4s;
}

.btn-leapr:hover {
  background-image: linear-gradient(45deg, #ff5f1f 0%, #ffcc6e 100%);
}

.btn-leapg {
  display: inline-block;
  padding: 2px 20px;
  margin: -3px auto 5px;
  border-radius: 25px;
  text-decoration: none;
  color: #FFF;
  background-image: linear-gradient(45deg, #07fc03 0%, #8cff8a 100%);
  transition: .4s;
}

.btn-leapg:hover {
  background-image: linear-gradient(45deg, #07fc03 0%, #8cff8a 100%);
}

/* ----------------------------------------------------
	popup
---------------------------------------------------- */
.s{
  /*リンクテキストのスタイル*/
  text-decoration: none;
  position: relative;
}

.s-balloon {
  /*バルーンのスタイル*/

  /*表示位置を指定*/
  position: absolute;
  top: 20px;
  left: 50px;

  /*非表示にしておく*/
  display: none;
  opacity: 0;

  /*表示スタイルを指定*/
  width: 150px; /* ボタンの横幅*/ 
  padding: 5px;
  border-radius: 50px;
  color: white;
  font-size: 1.5em;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  background-color: #FE6385;
  /*影をつける*/
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 1px 0 0 rgba(255, 255, 255, 0.3),
    inset -1px 0 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);

  /*アニメーションを指定*/
  animation-duration: 0.3s;
  animation-name: show-balloon;
}

.s:hover .s-balloon {
  /*マウスホバー時のバルーンのスタイル*/

  /*表示するようにする*/
  display: inline-block;
  opacity: 1;
  top: -40px;
}

.s-balloon::before {
  /*吹き出し部分の三角形を表示*/
  content: "";
  position: absolute;
  top: 97%;
  left: 30px;
  border: 6px solid transparent;
  border-top: 6px solid #FE6385;
}

@keyframes show-balloon {
  /*アニメーションを定義*/
  0% {
    display: none;
    opacity: 0;
    top: -30px;
  }

  1% {
    display: inline-block;
    opacity: 0;
    top: -30px;
  }

  100% {
    display: inline-block;
    opacity: 1;
    top: -40px;
}
}


/* ----------------------------------------------------
	main
---------------------------------------------------- */

/* ▼▼▼▼▼ フロート /　画像関連 ▼▼▼▼▼ */

.fl-l { /* 説明なしの写真を配置する際、 写真を左寄せにする際には、img にこれを使用する */
	float: left;
}

.fl-r { /* 説明なしの写真を配置する際、 写真を右寄せにする際には、img にこれを使用する */
	float: right;
}

img.fl-l { /* 説明なしの写真を配置するため img に .fl-l を使用すると、写真の周囲に左寄せ用の margin が作られる  */
	float: left;
	margin: 5px 25px 20px 0;
}

img.fl-r { /* 説明なしの写真を配置する際 img に .fl-r を使用すると、写真の周囲に右寄せ用の margin が作られる */
	float: right;
	margin: 5px 0 20px 25px;
}

.r-img-margin { /* 説明つきの右寄せ写真を配置するための div の周囲に margin を作るために .fl-r と一緒に使用する */
	margin: 5px 0 15px 25px;
}

.l-img-margin { /* 説明つきの左寄せ写真を配置するための div の周囲に margin を作るために .fl-l と一緒に使用する  */
	margin: 5px 25px 15px 0;
}

.fl-r, .fl-l p { /* 説明つきの右寄せ写真を配置するための div (.fl-r を指定したもの) 内にある写真の説明が中央寄せになる */
	text-align: center;
	text-indent: 0;
	line-height: 1.5;
}

/* ▲▲▲▲▲ フロート /　画像関連 ▲▲▲▲▲*/



/* ▼▼▼▼▼ PC 表示で画像等の横幅を決める際に使用する class
		 BOX 幅に対して最大(※最小のものもあり)何 % にするのかを指定。これを使用して横幅を指定した BOX 内でさらに使用すると、その BOX の幅に対して何 ％ にするのかという意味となる事に注意
		 例えば、説明つきの写真を配置するための div に対して使用して横幅を指定したなら、その div 内の img に対して .maxw100 を指定すると、写真はその div の横幅と同じ大きさになる
		 
	★★★ 以下に、新たな class を追加したら phone.css にも同じ class を必ず追加する事！！！ ★★★　　　▼▼▼▼▼ */
.maxw10 { 
	max-width: 10% !important;
	height: auto;
}

.maxw15 { /* この class のみ、curriculum ページの "数学科より" ＆ "英語科より" のアイコン専用 */
	max-width: 15%;
	height: auto;
	margin: 5px 25px 5px 0 !important;
}

.maxw20 {
	max-width: 20% !important;
	height: auto;
}

.maxw25 {
	max-width: 25%;
	height: auto;
}

.maxw28 {
	max-width: 28%;
	height: auto;
}

.maxw30 {
	max-width: 35%;
	height: auto;
}

.maxw35 {
	max-width: 35%;
	height: auto;
}

.maxw40 {
	max-width: 40%;
	height: auto;
}

.maxw42 {
	max-width: 42%;
	height: auto;
}

.maxw45 {
	max-width: 45%;
	height: auto;
}

.maxw50 {
	max-width: 50%;
	height: auto;
}

.maxw53 {
	max-width: 53%;
	height: auto;
}

.maxw55 {
	max-width: 55%;
	height: auto;
}

.maxw60 {
	max-width: 60%;
	height: auto;
}

.maxw65 {
	max-width: 65%;
	height: auto;
}

.maxw70 {
	max-width: 70%;
	height: auto;
}

.maxw80 {
	max-width: 80%;
	height: auto;
}

.maxw85 {
	max-width: 85%;
	height: auto;
}

.maxw90 {
	max-width: 90%;
	height: auto;
}

.maxw100 {
	max-width: 100%;
	height: auto;
}



.minw20 {
	min-width: 20%;
	height: auto;
}


.minw32 {
	min-width: 32%;
	height: auto;
}

.minw37 {
	min-width: 37%;
	height: auto;
}

.minw40 {
	min-width: 40%;
	height: auto;
}

.minw50 {
	min-width: 50%;
	height: auto;
}

/* ▲▲▲▲▲▲ PC 表示で画像等の横幅を決める際に使用する class ▲▲▲▲▲*/



/* ▼▼▼▼▼ table (費用の表など) 内の各セルの大きさを指定　▼▼▼▼▼ */

.w10 {	width: 10%; }
.w14 {	width: 14%; }
.w15 {	width: 15%; }
.w16 {	width: 16%; }
.w17 {	width: 17%; }

.w20 { 	width: 20%; }
.w25 { 	width: 25%; }

.w30 {	width: 30%; }
.w32 {	width: 32%; }
.w33 {	width: 33%; }
.w34 {	width: 34%; }

.w40 {	width: 40%; }

.w50 {	width: 50%; }

/* ▲▲▲▲▲▲ table 内の各セルの大きさを指定 ▲▲▲▲▲*/

/* ▼▼▼▼▼ toppage専用　▼▼▼▼▼ */

.achievement {
	text-align: left;
	padding: 0.5em;
}

.achievement img {
	text-align: center;
}

.box-achi {
 	background: #444;
	line-height: 2;
	padding: 0.5em;
	margin: 1em 0;
	letter-spacing: -0.04em;
	text-align: center;
}

.box-achi h5 {
	color: #FFF;
	font-size: 1.4em;
	font-weight: bold;
}

.box-achi p {
	color: #FFF;
	font-size: 1.7em;
	font-weight: bold;
}

.bg-blue .box-achi p {
	margin-bottom: 0;
}

.achi {
    max-width: 100%;
}

.achi table {
	display: inline-block;
	margin: 5px auto;
	font-size: 1.3em;
	font-weight: bold;
}

.achi table th{
	background: #4782BD;
	color: #FFF;
	border: 1px solid #FFF;
	text-align: center;
	width: 114.4px;
	padding: 0.5em 0em;
	line-height: 1;
}

.achi table td{
	background: #EAF4F9;
	color: black;
	border: 1px solid #FFF;
	text-align: center;
	line-height: 1.1;
	padding: 0.5em 0.5em 0.8em;
}

.box-achi .font_m, .typ table tr .font_m{
	white-space: nowrap;
	font-size: 1.3em;
}

.box-achi .font_m2 {
	white-space: nowrap;
	font-size: 1.5em;
}

.font_l, .font_l0 {
	font-size: 5em;
	letter-spacing: -0.2em;
}

.font_l0 {
	color: #EAF4F9;
}

.box_indexblue {
	box-sizing: border-box;
	border: 2px solid #4CA9FF;
	border-radius: 10px;
	padding: 1.5em 1em 0;
	margin: 1.5em 0;
}

.box_indexblue h5 {
	background: #9AC3F3;/* ◆タイトルの背景色を指定◆ */
	border-style: none; /*見出しの線の形状*/
	text-align: center;/* ◆タイトルの位置揃えを指定◆ */
	font-size: 1.6em;/* ◆タイトルの文字の大きさを指定◆ */
	line-height: 1.5;/* ◆タイトルの行の高さを指定◆ */
	padding: 0.3em 2em;
	margin: 0.5em 0 1em;
}

.box_indexpink {
	box-sizing: border-box;
	border: 3.5px solid #FFA9B7;
	border-radius: 10px;
	padding: 1.5em 1em 0;
	margin: 1em 0;
}

.box_lblue {
	box-sizing: border-box;
	padding: 1.5em 2em 0;
	margin: 0 auto 1.5em;
	border-top: 2px dashed #9BB1FD;
	border-bottom: 2px dashed #9BB1FD;
	background-color: #F3F5FD;
}

.box_new {
	box-sizing: border-box;
	border: 2px solid #ffc668;
	border-radius: 10px;
	padding: 1em 1em 0;
	margin: -4em 0.5em 2em;
}

.ribbn {
  display: inline-block;
  position: relative;
  height: 40px;/*高さ*/
  line-height: 40px;/*高さ*/
  text-align: center;
  padding: 0 40px 0 18px;/*文字の左右の余白*/
  font-size: 18px;/*文字サイズ*/
  background: #FF8251;/*背景色*/
  color: #FFF;/*文字色*/
  box-sizing: border-box;
}

.ribbn:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbn:after {
  top: 0;
  right: 0;
  border-width: 20px 15px 20px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

.box_progress {
	box-sizing: border-box;
	border: 2px solid #4CA9FF;
	border-radius: 10px;
	padding: 1.5em 2em 0;
	margin: 1.5em 7em;
}

.box_cl {
	box-sizing: border-box;
	padding: 0 2em;
	margin: 0 7em;
}

h6.data {
	font-size: 1.5em;
	line-height: 1.5;
	margin: 0 0 0.3em;
}

h5.feature {
	font-size: 1.8em;
	font-weight:bold;
	margin: 2em 0 0.3em;
    padding: 0 0 0 1.5em;
	text-indent: -1.5em;
}

.featurebox {
	background: #EAF6FD;
	padding: 15px 10px;
	margin: 0 -5px;
}

.featurebox p {
	background: #EAF6FD;
	padding: 5px 10px;
}

.featurebox_last {
	padding: 15px 10px 40px;
}

/* ▲▲▲▲▲ toppage専用 ▲▲▲▲▲ */




/* ▼▼▼▼▼ main の主なもの ▼▼▼▼▼*/

#main {
	max-width: 100%;
	clear: both;
	margin: 0 auto;
	margin-bottom: 1px;
}

.bg-blue {/*背景を水色にしたい時に使用*/
	background: #D3EDF9;
	width: 100%;
	padding: 0 0.8em 1.5em;
	box-sizing: border-box;
}

.bg-blue p{
	margin-bottom: 1em;
}

.bg-lblue {/*背景を淡い水色にしたい時に使用*/
	background: #EAF6FD;
	width: 100%;
	padding: 0em 0.8em 1.5em;
	box-sizing: border-box;
	border-top: 5px solid #FFF;
}

.bg-lblue p{
	margin-bottom: 1em;
}

.bg-green {/*背景を薄緑色にしたい時に使用*/
	background: #d4fae0;
	width: 100%;
	box-sizing: border-box;
}

.page-inner, .page-inner-pc {/*pcは段落間にスペース*/
	width: 960px; /*コンテンツの幅を 960 pxに*/
	margin: 0 auto; /*コンテンツを左右の中央に配置*/
	padding: 40px 0 0;
	max-width: 100%;
}

.page-inner p{
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
	font-size: 1.5em;
	text-indent: 1em;
}

.page-inner-pc p{
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
 	font-size: 1.5em;
	text-indent: 1em;
	margin-bottom: 1em;
}

.page-inner h4.margin-t0b20 { /**/
	margin: 0 auto 20px;
}

.page-inner h4.margin-t-b20 { /**/
	margin: -40px auto 20px;
}


.intro {
	margin: 0.5em 0.5em 1em;
}

.intro p{
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
	font-size: 1.5em;
	font-weight:bold;
	line-height: 1.5
}

.notice_3 p{
	font-size: 2.5vw;
	font-style: normal;
	font-family: fot-klee-pro, serif;
    font-weight: 500;
	line-height: 1.1;
	text-align: left;
}

.nowp {
	white-space: nowrap;
	overflow: scroll;
	width: 200px;
}

.nowp_p {
	white-space: nowrap;
	overflow: scroll;
	width: 200px;
	background: linear-gradient(transparent 80%, #fcc4bd 50%);
}

.page-title {
	width: 100%;
	background: #D3EDF9;/*ページタイトルの背景色*/
	padding: 10px 0;
}

.page-title h3 {
	width: 960px; /*ページタイトルの幅を 960 pxに*/
	margin: 0 auto; /*ページタイトルを左右の中央に配置*/
	padding: 0 0 0 1em;
	font-size: 3.0em;
	max-width: 100%;
}

h4 { /*主な見出しのスタイル*/
	font-size: 2.4em;
	border-width: 0 0 0.1em 0.8em ; /*見出しの左と下にのみ、この太さで線を表示*/
	border-color: #3C72A9;  /*見出しの線の色*/
	border-style: solid; /*見出しの線の形状*/
	padding: 0.2em 0 0.2em 0.6em;
	letter-spacing: 0.01em; /*見出しの文字の間隔*/
}

h4.margin-b40 { /* Ｈ4 見出しの下にのみ margin を設ける場合に使用。主に最初の Ｈ4 見出しにのみ使用 → 上の余白は page-inner の上の padding で十分なため*/
	margin-bottom: 40px;
}

h4.margin-t60b40 { /* Ｈ4 見出しの上下両方に margin を設ける場合に使用。主に 2 つめ~最後の Ｈ4 見出しに使用*/
	margin: 60px 0 40px !important;
}

h4.access { /*主な見出しのスタイル*/
	font-size: 2.4em;
	border: none;
	margin: 2em 0 1.0em;
	padding: 0.2em 0.6em;
	letter-spacing:0.2em;
	text-align: center;
	color: #ffffff;
	background: #000000;
}

h5.note { 
	margin-bottom: 15px;
}

.hello h5 {
	font-size: 3em;
	border: none;
	text-align: left;
	line-height: 1.2;
	margin-bottom: 0.3em;
}

.ribbon_box {    
    display: block;
    position: relative;
    margin: 0 10px 40px;
    padding: 20px 15px 40px 20px;
	max-width: 100%;
    background: #f1f1f1;
  }

.ribbon1 {
    display: inline-block;
	position: absolute;
    left: 0;
    top: 5px;
    box-sizing: border-box;
    padding: 0 35px;
    margin: 15px 0 10px;
    height: 35px;
    line-height: 35px;
    font-size: 18px;
    letter-spacing: 0.1em;
    color: white;
    background: #70c7ff;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.12);
}

.ribbon1:before {
    position: absolute;
    content: '';
    top: 0;
    left: -7px;
    border: none;
    height: 44px;
    width: 7px;
    background: #70c7ff;
    border-radius: 5px 0 0 5px;
}

.ribbon1:after {
    position: absolute;
    content: '';
    bottom: -7px;
    left: -5px;
    border: none;
    height: 7px;
    width: 5px;
    background: #4d99ca;
    border-radius: 5px 0 0 5px;
}

.ribbon_box h6 {  /* 背景が灰色の note の見出し */
	text-align: left;
	font-size: 2em;
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
	font-weight: bold;
	padding: 0.2em 0 0.2em 0.6em;
	letter-spacing: 0.07em; /*見出しの文字の間隔*/
	margin: 35px 0 10px;
}

.list ul {
 	list-style-type: none;
	margin: 0 10px 0 5px;
}

.list ul li{
	padding-left: 2rem;
	text-indent: -2rem;
	font-size: 1.5em;
}

.check {
		padding: 0 0.5em 0 1.5em;
}

.check ul {
	list-style-type: none;
}

.check li+li {
  margin-top: 5px;
}

.check li {
  position: relative;
  padding-left: 25px;
	font-size: 1.5em;
}

.check li:before {
  content: "";
  position: absolute;
  width: 4px;
  height: 8.5px;
  top: .50em;
  left: 6px;
  -webkit-transform: rotate(50deg);
  -ms-transform: rotate(50deg);
  transform: rotate(50deg);
  border-right: 2.5px solid #00A423;
  border-bottom: 2.5px solid #00A423;
}

.check li:after {
  content: "";
  position: absolute;
  top: 0.4em;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #3A3A3A;
  border-radius: 2px;
}

.margin-b20 p {
	margin-bottom: 20px;
}

.margin-b40 {
	margin-bottom: 40px !important;
}

.margin-b0 {
	margin-bottom: 0px !important;
}

.margin-t-20 {
	margin-top: -20px !important;
}

p.indent0 {
	text-indent: 0;
}

p.margin0 {
	margin: 0 auto;	
}

.mg0 {
	margin: 0 !important;
}

/* ▼▼▼▼▼ youtube関連 ▼▼▼▼▼*/

.home_movie_frame {
	width: 67%;
	margin: 10px auto 15px;
	padding: 20px 15px;
	background: #c7d4ea;/* ◆背景色を指定◆ */
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
}

.home_movie_frame p {
	margin: 0.3em 0 0.3em;
	text-align: left;	
    font-weight: bold;
	font-size: 1.4em;
}

.home_movie_frame h5 { 
	text-align: center;
 	font-size: 3vw;
 	font-weight: bold;
	line-height: 1.5em;
	margin: 0 0 0.4em;
}

.movie-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
	margin-bottom: 5px;
}

iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.color1 {
  color: red;
}

/* ▲▲▲▲▲▲ youtube関連 ▲▲▲▲▲▲*/

/* ▼▼▼▼▼▼ jump ▼▼▼▼▼▼ */
.leap{
 text-align: right;
 margin: 0;
 font-size: 1.5em;
}

.btn-square {
  display: inline-block;
  padding: 0 0.5em;
  text-decoration: none;
  background: #7997DE;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 3px #627295;
  border-radius: 10px;
  font-size: 0.7em;
}

.btn-square:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}
/* ▲▲▲▲▲▲ jump ▲▲▲▲▲▲*/

/* ▼▼▼▼▼▼ アコーディオン 専用 ▼▼▼▼▼▼ */
/*ベース*/
.accordion {
	margin-bottom: 2em;
}
.toggle {
	display: none;
}
.Label {		/*タイトル*/
	box-sizing: border-box;
	width: 100%;
	padding: 0.2em 0 0.2em 1.5em;
	display: inline-block;
	color: #fff;
	background:#000000;
	font-size: 1.5em;
	font-weight:bold;
	font-family: fot-klee-pro, essonnes-display, serif;
	border-radius: 25px 0px 0px 25px;
}

.Label::before{		/*タイトル横の矢印*/
	content:"";
	width: 7px;
	height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 5px );
	right: 25px;
	transform: rotate(135deg);
}
.Label,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.content {		/*本文*/
	height: 0;
	margin: 0 auto 0 12px;
	overflow: hidden;
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
	font-size: 1.5em;
	background: #EAF4F9;
	padding: 0 1em;
}
.toggle:checked + .Label + .content {	/*開閉時*/
	height: auto;
	padding: 0 20px;
	transition: all .3s;
}
.toggle:checked + .Label::before {
	transform: rotate(-45deg) !important;
}

.content ul {
	list-style: none;
}

.content ul li{
	padding: 0 1em;
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
	font-size: 17px;
	line-height: 2;
}

/* ▲▲▲▲▲▲ アコーディオン ▲▲▲▲▲▲*/



/* ▼▼▼▼▼▼ read more ▼▼▼▼▼▼ */
.cp_box1 {
  position: relative;
}
.cp_box1 input {
  display: none;
}
/*開くためのボタンとテキストを隠すグラデーションの設定*/
.cp_box1 label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  bottom: -10px;
  width: 100%;
  height: 140px; /* グラデーションの高さ */
  cursor: pointer;
  text-align: center;
  /* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
  background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}
/* 開いた時にグラデーションを消す */
.cp_box1 input:checked + label {
  background: inherit;
}
.cp_box1 input:checked + label {
  /* display: none ; 閉じるボタンを消す場合コメントアウトを外す */
}
.cp_box1 .cp_container {
  overflow: hidden;
  height: 250px; /* 開く前に見えている部分の高さ */
  transition: all 0.5s;
}
/*続きをよむボタン*/
.cp_box1 label:after,
.cp_box1 label::before {
  content: '';
  position: absolute;
  line-height: 2.5rem;
}
.cp_box1 label:after {
  z-index: 2;
  bottom: 28px;
  width: 13em;
  content: 'つづきを見る';
  color: #ffffff;
  background: #1b2538;
  border-radius: 20px;
}
.cp_box1 label::before {
  position: absolute;
  bottom: 37px;
  left: calc(50% - 4em);
  z-index: 3;
  width: 10px;
  height: 5px;
  background: #ffffff;
  clip-path: polygon(50% 100%, 0 0, 100% 0)
}
/*閉じるボタン*/
.cp_box1 input:checked + label:after {
  content: '閉じる';
}
.cp_box1 input:checked + label:before {
  left: calc(50% - 2.5em);
  transform: scale(1, -1);
}
.cp_box1 input:checked ~ .cp_container {
  height: auto;
  padding-bottom: 40px; /* 閉じるボタンのbottomからの位置 */
  transition: all 0.5s;
}
/* ▲▲▲▲▲▲ read more ▲▲▲▲▲▲*/

/* ▼▼▼▼▼▼ curriculum 専用 ▼▼▼▼▼▼ */

.box_c_blue {
	background: #EAF6FD;
	width: 100%;
	padding: 1.5em 1em 0.5em 1.5em;
	margin: 0.5em auto 1em;
	box-sizing: border-box;
}

.box_c_blue h5{
	border-style: none; /*見出しの線の形状*/
	text-align: center;/* ◆タイトルの位置揃えを指定◆ */
	font-size: 1.6em;/* ◆タイトルの文字の大きさを指定◆ */
	line-height: 1.5;/* ◆タイトルの行の高さを指定◆ */
	padding: 0.5em 3em;
}

.maths h5{
	background: #E5F4FC;
	font-size: 1.8em;
	font-weight:bold;
	text-align: center;
	margin: -1em auto 0.5em;
    padding: 0.3em 0;
}

.point h5{
	background: #B2D1F5;
	font-size: 1.8em;
	font-weight:bold;
	text-align: center;
	margin: 0.5em auto;
    padding: 0.3em 0;
}

/* ▲▲▲▲▲▲ curriculum ▲▲▲▲▲▲*/

/* ▼▼▼▼▼▼ junior 専用 ▼▼▼▼▼▼ */
.out{
    position: relative;
}
.in img{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .5s;
    z-index: 0;
}
img{
    display: block;
    width: 100%;
    height: auto;
}
input{
    display: none;
}
.in{
    display: flex;
    justify-content: center;
}
label span{
    display: block;
    width: 15px;
    height: 15px;
    padding: 12px 7px 7px;
    margin: -35px 0 0;
    border-radius: 100%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
label span::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #4287f5;
    opacity: 0.5;
    border-radius: 100%;
}            
input:nth-of-type(1):checked ~ .in label:nth-of-type(1) span::before,
input:nth-of-type(2):checked ~ .in label:nth-of-type(2) span::before,
input:nth-of-type(3):checked ~ .in label:nth-of-type(3) span::before,
input:nth-of-type(4):checked ~ .in label:nth-of-type(4) span::before,
input:nth-of-type(5):checked ~ .in label:nth-of-type(5) span::before,
input:nth-of-type(6):checked ~ .in label:nth-of-type(6) span::before,
input:nth-of-type(7):checked ~ .in label:nth-of-type(7) span::before,
input:nth-of-type(8):checked ~ .in label:nth-of-type(8) span::before{
    background: #FDA1EF;
    opacity: 1;
}
label span::before{
    animation: slidebutton 14s infinite;
}
@keyframes slidebutton{
    0%{opacity: 0.5;background: #4287f5;}
    3.5%{opacity: 1;background: #FDA1EF;}/* b÷x×100=y */
    25%{opacity: 1;background: #FDA1EF;}/* 100÷c=z */
    28.5%{opacity: 0.5;background: #4287f5;}/* y+z */
}            
label:nth-of-type(2) span::before,label:nth-of-type(2) img{
    animation-delay: 3.5s;
}            
label:nth-of-type(3) span::before,label:nth-of-type(3) img{
    animation-delay: 7s;
}            
label:nth-of-type(4) span::before,label:nth-of-type(4) img{
    animation-delay: 10.5s;
}            
label:nth-of-type(5) span::before,label:nth-of-type(2) img{
    animation-delay: 14s;
}            
label:nth-of-type(6) span::before,label:nth-of-type(3) img{
    animation-delay: 17.5s;
}            
label:nth-of-type(7) span::before,label:nth-of-type(4) img{
    animation-delay: 21s;
}
label:nth-of-type(8) span::before,label:nth-of-type(4) img{
    animation-delay: 24.5s;
}       
input:nth-of-type(1):checked ~ .in label:nth-of-type(1) img,
input:nth-of-type(2):checked ~ .in label:nth-of-type(2) img,
input:nth-of-type(3):checked ~ .in label:nth-of-type(3) img,
input:nth-of-type(4):checked ~ .in label:nth-of-type(4) img,
input:nth-of-type(5):checked ~ .in label:nth-of-type(5) img,
input:nth-of-type(6):checked ~ .in label:nth-of-type(6) img,
input:nth-of-type(7):checked ~ .in label:nth-of-type(7) img,
input:nth-of-type(8):checked ~ .in label:nth-of-type(8) img{
    opacity: 1;
    z-index: 1;
}
.in img{
    animation: slide 14s infinite;/* (a+b)×c=x */
    opacity: 0;
}
@keyframes slide{
    0%{opacity: 0;}
    3.5%{opacity: 1;z-index: 1;}/* b÷x×100=y */
    25%{opacity: 1;}/* 100÷c=z */
    28.5%{opacity: 0;z-index: 0;}/* y+z */
}
input:checked ~ .in img,input:checked ~ .in span::before{
    animation: none;
}
.in:hover img,.in:hover span::before{
    animation-play-state:paused;/* マウスを載せると一時停止 */
}

.box_blue {
	box-sizing: border-box;
	border: 2px solid #00BFFF;
	border-radius: 10px;
	padding: 1.5em 1em 0.5em 1.5em;
	margin: 10px 10px 20px;
}

.box_blue h5{
	border-style: none; /*見出しの線の形状*/
	text-align: center;/* ◆タイトルの位置揃えを指定◆ */
	font-size: 1.8em;/* ◆タイトルの文字の大きさを指定◆ */
	line-height: 1.5;/* ◆タイトルの行の高さを指定◆ */
	padding: 0.5em 3em;
}

.box_look1, .box_look2, .box_look3 {
	box-sizing: border-box;
	border-radius: 10px;
	padding: 1.5em 1em 1em;
	margin: 1em 1em 1em;
}


.box_look1 {
	border: 2px solid #00fa9a;
}

.box_look1 ul{
	margin: 0 0 0.5em 1em;
}

.box_look1 ul li{
	font-size: 1.5em;
}

.box_look2 {
	border: 2px solid #F959B9;
	font-size: 1em;
}

.box_look3 h5{
	background: #E5F4FC;/* ◆タイトルの背景色を指定◆ */
	border-style: none; /*見出しの線の形状*/
	text-align: center;/* ◆タイトルの位置揃えを指定◆ */
	font-size: 1.5em;/* ◆タイトルの文字の大きさを指定◆ */
	line-height: 1.5;/* ◆タイトルの行の高さを指定◆ */
	padding: 0.3em 3em;
	margin: 0.5em 1em 1em;
}

.box_look3 ul{
 	list-style-type: none;
	margin: -1em 0 0 1em;
	padding-left: 1em;
}

.box_look3 ul li{
	margin: 0.25em 0 0 1em;
	font-size: 1.5em;
	font-weight: 500;
	text-indent: -1.5em;
}

.box_look3 {
	border: 2px solid #C7FFE9;
}

.col {
	box-sizing: border-box;
	width: 960px;
	max-width: 100%;
	display: grid;
	grid-template-columns: 55% 5% 40%;
}

.lbox {
	grid-column: 1;
	box-sizing: border-box;
}

.lbox h5 {
	margin: 1em 0;
	background: #d1f0ff;/* ◆タイトルの背景色を指定◆ */
	border-style: none; /*見出しの線の形状*/
	text-align: center;/* ◆タイトルの位置揃えを指定◆ */
	font-size: 1.7em;/* ◆タイトルの文字の大きさを指定◆ */
	line-height: 2;/* ◆タイトルの行の高さを指定◆ */
}

.lbox ul {
	list-style-type: none!important; /*ポチ消す*/
  }

.lbox-blue {
	box-sizing: border-box;
	width: 100%;
	margin: 30px auto;/* ◆各ブロックの上側にとる余白を指定◆ */
	padding: 10px 15px 10px;
	background: #cce6ff;/* ◆右側の帯全体の背景色を指定◆ */
	text-align: center;
}

.lbox-blue figure {
  display: flex;
  justify-content: center;
  align-items: center;
}

.lbox-blue h6 {
	margin-top: 15px;/* ◆各ブロックの上側にとる余白を指定◆ */
	margin-bottom: 15px;/* ◆各ブロックの下側にとる余白を指定◆ */
	background: #444444;/* ◆左側の帯の最初のタイトルの背景色を指定◆ */
	color: #ffffff;/* ◆左側の帯の最初のタイトルの文字色を指定◆ */
	text-align: center;/* ◆左側の帯の最初のタイトルの位置揃えを指定◆ */
	font-size: 1.5em;/* ◆左側の帯の最初のタイトルの文字の大きさを指定◆ */
	line-height: 2;/* ◆左側の帯の最初のタイトルの行の高さを指定◆ */
	text-indent: 1em
}

.lbox-lightblue {
	box-sizing: border-box;
	width: 100%;
	margin: -15px 0px 20px;
	padding: 15px;
	background: #E9F5FC;/* ◆右側の帯全体の背景色を指定◆ */
}

.box_look4 {
	box-sizing: border-box;
	border-radius: 10px;
	padding: 1.5em 1em 0.5em;
	margin: 1em 1em 2em;
	border: 2px solid #C7FFE9;
	background: #fff;
}

.box_look4 h6{
	background: #EAF6FD;/* ◆タイトルの背景色を指定◆ */
	border-style: none; /*見出しの線の形状*/
	text-align: center;/* ◆タイトルの位置揃えを指定◆ */
	font-size: 1.5em;/* ◆タイトルの文字の大きさを指定◆ */
	line-height: 1.2;/* ◆タイトルの行の高さを指定◆ */
	padding: 0.3em 3em;
	margin: 0 1em 0.5em;
}

.box_look4 p{
	font-size: 1.3em;
	margin-bottom: 1em;
}

.box_look4 ul{
 	list-style-type: none;
	padding-left: 1em;
}

.box_look4 ul li{
	margin: 0.25em 0.5em 0 1em;
	font-size: 1.3em;
	text-indent: -1.5em;
}

.lbox-blue table {
	width: 100%;
	margin-left: 20px;/* ◆各ブロックの下側にとる余白を指定◆ */
	font-size: 150%;
}

.leftbox-blue table th {
	border: 1px;
	text-align: left;
	padding: 10px 0px;
	line-height: 1.2;
}

.lbox-blue table td {
	border: 1px;
	text-align: left;
	line-height: 1.2;
}

.lbox-blue table .left-b {
	width: 80px; 
}

.lbox-gr {
	box-sizing: border-box;
	width: 100%;
	margin-top: 25px;/* ◆各ブロックの上側にとる余白を指定◆ */
	margin-bottom: 25px;/* ◆各ブロックの下側にとる余白を指定◆ */
	padding: 20px;
	background: #E8FFE5;/* ◆左側の帯全体の背景色を指定◆ */
	text-align: center;
}

.note {
	box-sizing: border-box;
	width: 90%;
	margin: 0 5%;
	padding: 1.5em 1em 0.5em;
    text-align: left;
	background: #FFF;
	border-radius: 15px;
}

.lbox-gr h5, .lbox-blue h5 {
	margin-top: 15px;/* ◆各ブロックの上側にとる余白を指定◆ */
	margin-bottom: 15px;/* ◆各ブロックの下側にとる余白を指定◆ */
	background: #444444;/* ◆左側の帯の最初のタイトルの背景色を指定◆ */
	color: #fff;/* ◆左側の帯の最初のタイトルの文字色を指定◆ */
	text-align: center;/* ◆左側の帯の最初のタイトルの位置揃えを指定◆ */
	font-size: 2em;/* ◆左側の帯の最初のタイトルの文字の大きさを指定◆ */
	line-height: 2;/* ◆左側の帯の最初のタイトルの行の高さを指定◆ */
}

.lbox img {
	width: auto;
	max-width: 100%;
	margin-bottom: 5px;
}

.lbox-tgblue {
	box-sizing: border-box;
	width: 100%;
	margin: -15px auto 20px;
	padding: 20px 15px 25px;
	background: #E9F5FC;
}

.lbox-tgblue h5 {
	margin: 10px -5px 20px;
	text-align: center;
	font-size: 2em;
	line-height: 2;
	letter-spacing: -0.05em;
	background: #5C5C5C;
	color: #fff;
}

.lbox-tgblue p {
	margin: 15px auto 0;
}

.col .lbox h6 { /* h6 juniorの英数の項目用*/
	background: #EAF6FD;/* ◆タイトルの背景色を指定◆ */
	border-style: none; /*見出しの線の形状*/
	text-align: left;/* ◆タイトルの位置揃えを指定◆ */
	font-size: 1.5em;/* ◆タイトルの文字の大きさを指定◆ */
	line-height: 1.5;/* ◆タイトルの行の高さを指定◆ */
	padding: 0.3em 1em;
	margin: 0 0 0.5em;
}

.tg_title {
    display: inline-block;
    padding: 0 20px 0 5px;
	margin: -5px 10px 0 -15px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px;
}

.arrow-p {
    position: relative;	
    width: 0;
	height: 0;
	border: 16px solid transparent;
	border-top: 18px solid #d1f0ff;
    left: 50%; /* 中央寄せに使用 */ 
    margin-left: -8px; /* 中央寄せに使用*/
	margin-bottom: -20px;
}

/* ◆◆◆ここから右側の帯のスタイルの指定◆◆◆ */

/* 【色の指定の注意事項】 */
/* illustrator からコピーして使用。"#147acf" の様な、"#" + 6桁の英数字で指定。"#000000" は黒、"#ffffff" は白を表す */

.rbox {
	grid-column: 3;
	box-sizing: border-box;
}

.rbox p {
	margin-bottom: 0;
}

.rbox-yellow-top {
	box-sizing: border-box;
	width: 100%;
	padding: 20px 15px 0px;
	background: #feffef;/* ◆右側の帯全体の背景色を指定◆ */
}

.rbox-yellow-top h5 {
	margin-top: 15px;/* ◆各ブロックの上側にとる余白を指定◆ */
	background: #3C72A9;/* ◆右側の帯の最初のタイトルの背景色を指定◆ */
	color: #fff;/* ◆右側の帯の最初のタイトルの文字色を指定◆ */
	text-align: center;/* ◆右側の帯の最初のタイトルの位置揃えを指定◆ */
	font-size: 2em;/* ◆右側の帯の最初のタイトルの文字の大きさを指定◆ */
	line-height: 2;/* ◆右側の帯の最初のタイトルの行の高さを指定◆ */
}

.rbox-yellow-top h4 {
    background: #d1f0ff;/* ◆タイトルの背景色を指定◆ */
	border-style: none; /*見出しの線の形状*/
	text-align: center;/* ◆タイトルの位置揃えを指定◆ */
	font-size: 1.7em;/* ◆タイトルの文字の大きさを指定◆ */
	line-height: 1.7;/* ◆タイトルの行の高さを指定◆ */
}

.rbox-in {
	margin: 0 0 30px;/* ◆各ブロックの上側にとる余白を指定◆ */
	box-sizing: border-box;
	width: 100%;
	padding: 10px 15px 30px;
	background: #feffef;/* ◆右側の帯全体の背景色を指定◆ */
}

.rbox-in img {
	width: auto;
	max-width: 100%;
}

.rbox-in h3 {
	background: #3C72A9;/* ◆右側の帯の最初のタイトルの背景色を指定◆ */
	color: #ffffff;/* ◆右側の帯の最初のタイトルの文字色を指定◆ */
	text-align: center;/* ◆右側の帯の最初のタイトルの位置揃えを指定◆ */
	font-size: 2em;/* ◆右側の帯の最初のタイトルの文字の大きさを指定◆ */
	line-height: 2;/* ◆右側の帯の最初のタイトルの行の高さを指定◆ */
}

.rbox-in div {
	box-sizing: content-box;
}

.rbox-in h5 {
	margin: 10px 0 0;
	background: #d1f0ff;/* ◆タイトルの背景色を指定◆ */
	border-style: none; /*見出しの線の形状*/
	text-align: center;/* ◆タイトルの位置揃えを指定◆ */
	font-size: 1.7em;/* ◆タイトルの文字の大きさを指定◆ */
	line-height: 2;/* ◆タイトルの行の高さを指定◆ */
}

.rbox-in table {
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
	width: 100%;
	font-size: 1.3em;/* ◆テーブル内の文字(項目名・本文共に)の大きさを指定◆ */
	background: #effaff;/* ◆テーブルの背景色を指定◆ */
}

.rbox-in th {
	width: 18%; /* ◆項目名の横幅を指定◆ */
	background: #000000;/* ◆項目名の背景色を指定◆ */
	color: #ffffff;/* ◆項目名の文字色を指定◆ */
	text-align: center;/* ◆項目名の位置揃えを指定◆ */
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
	line-height: 1.6;
	border: solid 10px #effaff;/* ◆テーブルの背景色と同じ色の線を<tr>の周囲に作って間隔をあけている◆ */
	border-bottom: none;/* ◆<tr>の下線のみあらためて無くす事で<tr>が含まれる1行目と、<tr>が存在しない行との行間が空きすぎないようしている。<tr>が含まれる行同士の行間は上線があるので10pxの間隔が保たれる◆ */
}

.rbox-in td {
	text-align: left;/* ◆各セル内の文字の位置揃えを指定◆ */
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
	line-height: 1.5;
	border-left: solid 10px #effaff;/* ◆テーブルの背景色と同じ色の左線を<td>に作って間隔をあけている。これがないと<tr>が存在しない行の体裁がおかしくなる◆ */
	border-right: solid 10px #effaff;/* ◆テーブルの背景色と同じ色の右線を<td>に作って間隔をあけている。これがないと<tr>が存在しない行の体裁がおかしくなる◆ */
}

.rbox-in th + td{
	border-top: solid 10px #effaff;/* ◆テーブルの背景色と同じ色の上線を、<th>のすぐ隣にある<td>(th + td と表記)にだけ作る事で、<th>と<td>の文字の縦位置がずれないようにしている◆ */
}

.rbox-in .note {
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
	font-size: 0.9em;
	border-top: solid 10px #effaff;/* ◆注釈欄に背景色と同色の上線を設定して,上に余白を設ける◆ */
	padding-left: 1.4em;/* ◆注釈欄の左側に余白を設けて全体を右にずらしている◆ */
	text-indent: -1.33em;/* ◆注釈欄のインデントにマイナスの値を設定して、1行目の位置を左側に戻すことにより、結果的に2行目だけ右にずらした状態にしている◆ */
}

.rbox-in .notelarge {
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
	font-size: 1em;
	border-top: solid 10px #effaff;/* ◆注釈欄に背景色と同色の上線を設定して,上に余白を設ける◆ */
	padding-left: 0.8em;/* ◆注釈欄の左側に余白を設けて全体を右にずらしている◆ */
	text-indent: -1em;/* ◆注釈欄のインデントにマイナスの値を設定して、1行目の位置を左側に戻すことにより、結果的に2行目だけ右にずらした状態にしている◆ */
}

.rbox-in table tr:last-child {
	border-bottom: solid 14px #effaff;/* ◆上記の.rightbox thに対して下辺の線のみ無くした事に伴い、テーブルの一番下に余白を設けるために、最後(:last-child)の<tr>にだけあらためて背景色と同色の下線を設定している◆ */
}

td.border-t {
	border-top: solid 10px #effaff;/* ◆上に余白を設けたい<td>に対して、border-tクラスを付与して、背景色と同色の上線を設定している◆ */
}

td.num {
	text-align-last: right;
	border-top: solid 10px #effaff;/* ◆上に余白を設けたい<td>に対して、border-tクラスを付与して、背景色と同色の上線を設定している◆ */
	background: #effaff;
}

.rbox-in ol li {
	list-style-type: none; /*ポチ消す*/
	padding: 0.5em 0.5em 0.5em 2em;
	margin: 10px 0 0;
	line-height: 1.5;
	background: #fff;
	border-radius: 15px 0px 0px 15px;/*左側の角を丸く*/
	font-size: 1em;
	text-indent: -1.2em;
}

.rbox-in ol li:before {/*疑似要素*/
	display:inline-block;
	vertical-align: middle; 
	/*以下丸をつくる*/
	content: '';
	width: 1em;
	height: 1em;
	background: #d1f0ff;
	border-radius: 50%;
	margin-right: 8px;
}

.rbox-in .com p {
	font-size: 1.3em;
	text-align: center;
	text-indent: 0;
}

.rtg_box {
	display: grid;
	grid-template-rows: 42px 42px 42px 42px 42px 42px;
	grid-template-columns:  42px 42px 42px 42px 42px 42px 42px;
	padding:5px;
	width:296px;
	margin: 0 auto 10px;
	background: #E8E8E8;
	font-size: 1.25em;
	text-align: center
}

.rtg_boxm {
	display: grid;
	grid-template-rows: 42px 42px 42px 42px 42px 42px 42px;
	grid-template-columns:  42px 42px 42px 42px 42px 42px 42px;
	padding:5px;
	width:296px;
	margin: 0 auto 10px;
	background: #E8E8E8;
	font-size: 1.25em;
	text-align: center
}


.rtg_1,.rtg_2,.rtg_3,.rtg_4,.rtg_5,.rtg_6 {
	margin:5px;
	border-radius: 5px;
	align-items: center;
	justify-content: center;
	display: flex;
}

.rtg_1 {
	background-color:#9999FF;
	color:#FFF;
    }    

.sub1 {
	text-decoration: none;
	color:#FFF;
}

.sub1 .hover1 {
	display: none;/* 通常時はホバー時の文字を非表示にする */
	text-decoration: none;
}

/* ホバー時は通常時の文字を非表示にする */
.sub1:hover .nomal{
	display: none;
}

/* ホバー時に、ホバー時の文字を表示する */
.sub1:hover .hover1 {
	display: inline;
	border-bottom: 2px solid #87FDCC;
}

.subhov .sub1h {
	border-bottom: 2px solid #87FDCC;
}
.intg table {
	font-size: 1.3em;
}

.sub2 {
	text-decoration: none;
	color:#FFF;
}

.sub2 .hover2 {
	display: none;/* 通常時はホバー時の文字を非表示にする */
	text-decoration: none;
}

/* ホバー時は通常時の文字を非表示にする */
.sub2:hover .nomal{
	display: none;
}

/* ホバー時に、ホバー時の文字を表示する */
.sub2:hover .hover2 {
	display: inline;
	border-bottom: 2px solid #90DEFD;
}

.subhov .sub2h {
	border-bottom: 2px solid #90DEFD;
}

.rtg_2 {
	background-color:#CFE0FF;
	color: #444;
    }    

.rtg_3 {
	background-color:#fff;
	color: #444;
    }    

.rtg_4 {
	background-color:#9FC0FF;
 	color:#FFF;
}

.rtg_5 {
	background-color:#C9C9FF;
 	color:#FFF;
}
.rtg_6 {
	background-color:#7272FF;
 	color:#FFF;
}

.yellow_2fig {
	background: #feffef;/* ◆右側の帯全体の背景色を指定◆ */
	display: flex;
	justify-content: space-between;
}

.yellow_2fig figure {
	margin:0 auto;
}

.yellow_2fig figcaption {
  font-size: 1.1em;
}

.bg_lightyellow {
	padding: 10px 0;
}

.bg_lightyellow p {
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
	font-size: 1.2em;
	text-align: left;/* ◆各セル内の文字の位置揃えを指定◆ */
	line-height: 1.5;
}

.bg_lightblue {
	margin: 15px 0;/* ◆各ブロックの上側にとる余白を指定◆ */
	padding: 10px 10px;
	background: #effaff;/* ◆右側の帯全体の背景色を指定◆ */
	border-radius: 10px;
}

.bg_lightblue p {
	font-size: 1.3em;
	text-align: left;/* ◆各セル内の文字の位置揃えを指定◆ */
	line-height: 1.5;
	background: #effaff;/* ◆右側の帯全体の背景色を指定◆ */
}

.bg_lightblue .pre{
	margin: 0px 0 10px;
}

.bg_lightblue .pre p {
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
}

.bg_pink div {
	padding: 10px 10px;
	background: #d1f0ff;/* ◆右側の帯全体の背景色を指定◆ */
}

.bg_pink p {
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
	font-size: 1.3em;
	text-align: left;/* ◆各セル内の文字の位置揃えを指定◆ */
	line-height: 1.5;
	background: #d1f0ff;/* ◆右側の帯全体の背景色を指定◆ */
}

.j_movie_frame {
	width: 90%;
	margin: 0 auto;
	padding: 30px 15px 10px;
	text-align: center;/* ◆左側の帯の最初のタイトルの位置揃えを指定◆ */
	background: #c7d4ea;/* ◆背景色を指定◆ */
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
	font-size: 1em;
}

.col2 {
	box-sizing: border-box;
	width: 960px;
	max-width: 100%;
	display: grid;
	grid-template-columns: 48% 4% 48%;
}

.lbox2 {
	grid-column: 1;
	box-sizing: border-box;
}

.rbox2 {
	grid-column: 3;
	box-sizing: border-box;
}

.box_data {
	box-sizing: border-box;
	border: 2.5px solid #BCE0FF;
	border-radius: 10px;
	padding: 1em 1em 0.5em;
	margin: 0 0 1.5em;
}

.box_data h5{
	background: #D4FADC;/* ◆タイトルの背景色を指定◆ */
	border-style: none; /*見出しの線の形状*/
	text-align: center;/* ◆タイトルの位置揃えを指定◆ */
	font-size: 1.6em;/* ◆タイトルの文字の大きさを指定◆ */
	line-height: 1.5;/* ◆タイトルの行の高さを指定◆ */
	padding: 0.3em 0em;
	margin: 0.5em 0 1em;
}

.box_data ul, ol {
 	list-style-type: none;
	margin: 1em 0 0;
}

.box_data ul li{
	margin: 0.5em 0 0 1em;
	font-size: 1.5em;
	font-weight: 500;
}

.box_data ol li{
	margin: 0.5em 0 0 1em;
	font-size: 1.5em;
	font-weight: 500;
}

/* ▼▼▼▼▼ exp-l専用　▼▼▼▼▼ */

.listb {	
	padding: 0 0 0 1.5em;
	margin: 1em auto;
}

.listb ul li {
	font-size: 1.5em;
}

.tg {
    max-width: 100%;
	text-align: center;
}

.tg table {
	display: inline-block;
	margin: 10px auto 20px;
	font-size: 1.3em;
	font-weight: bold;
}

.tg table th{
	background: #4782BD;
	color: #FFF;
	border: 1px solid #FFF;
	text-align: center;
	width: 185px;
	padding: 0.5em 0em;
	line-height: 2;
}

.tg table td{
	background: #EAF4F9;
	color: black;
	border: 1px solid #FFF;
	text-align: left;
	line-height: 2;
	padding: 0.5em 0.5em 0.5em 0.8em;
}

.tg table td{
	background: #EAF4F9;
	color: black;
	border: 1px solid #FFF;
	text-align: left;
	line-height: 2;
	padding: 0.5em 0.5em 0.5em 0.8em;
}

.tg table th.diagonal, .schedule_exp table the.diagonal{
  background-image: linear-gradient(to top right, transparent, transparent 49%, #fff 50%, #fff 50%, transparent 51%, transparent);
}

.tg .m_frame {
	display: inline-block;/*inline-blockにします*/
	width: 30%;
	margin: 0 auto 2em;
	padding: 10px 10px;
	background: #c7d4ea;/* ◆背景色を指定◆ */
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
}

.tg .m_frame h5 { 
	text-align: center;
 	font-size: 1.4em;
 	font-weight: bold;
	line-height: 1em;
	padding: 0.2em 0 0.4em;
}

.tg .movie-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
	margin-bottom: 5px;
}

.tg iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.font_tg {
	font-size: 1.1em;
}

.load {
	font-family: fot-klee-pro, essonnes-display, serif;
	font-size: 1.5em;
	color: #53A1BF;
	display: inline-block;
	text-decoration:none;
	width: 390px;
	height: 35px;
	line-height: 25px;
	border-radius: 40px;
	text-align: center;
	overflow: hidden;
	font-weight: bold;
	background: linear-gradient(#E0FFFF 0%, #87CEFA 100%);
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
	box-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.28);
	margin-bottom: 15px;
}

.load a {
	color: #3C72A9;
	text-decoration:none;
}

.load:active {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(#d6efff 0%, #87CEFA 100%);/*グラデーションを明るく*/
}

.balloon_1 { 
	position: relative;
	display: inline-block; 
	margin: 0 0 1em; 
	padding: 5px 5px; 
	min-width: 120px; 
	max-width: 100%; 
	color: #444; 
	font-size: 1.6em; 
	background: #fcdcef; 
	border-radius: 30px;
}

.balloon_1:before { 
	content: ""; 
	position: absolute; 
	top: 100%; 
	left: 50%; 
	margin-left: -30px; 
	border: 10px solid transparent; 
	border-top: 30px solid #fcdcef;
}

.balloon_1 p {
	font-weight: 600;
	margin: 0; 
	padding: 0;
}

.expq {
	box-sizing: border-box;
	width: 100%;
	text-align: center;
}

.expq ul {
font-size:0;
/*フォントサイズを0にすると隙間がなくなる*/
}
li {
display:
inline-block;
font-size:14px;/*liのフォントサイズを再度設定*/
}

/* ▼▼▼▼▼ schedule専用　▼▼▼▼▼ */
.schedule h4 {
	font-size: 2.4em;
	border: none;
	margin: 0 0 1em;
	padding: 0.2em 0.2em;
	letter-spacing:0.01em;
	text-align: center;
	color: #ffffff;
	background: #000000;
	}

.schedule table {
	width: 100%;
	font-size: 1.5em;
	margin-top: -20px;
}

.schedule table th {
	background: #4782BD;
	color: #FFF;
	border: 1px solid #FFF;
	text-align: center;
	padding: 8px 3px;
	line-height: 1.3;
}

.schedule table td {
	background: #D3EDFB;
	border: 1px solid #FFF;
	text-align: center;
	padding: 8px 3px 8px 3px;
	line-height: 1.3;
}

.schedule table td small {
	font-size: 70%;
}

.schedule table td span {
	font-size: 65%;
	line-height: 1.3;
	display: block;
}

.schedule table td span em {
	color: #dc0000;
}

.page-inner-pc .list_sche { /* */
	margin: 10px 0 5px !important;
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
	font-size: 1.5em;
}

.page-inner-pc .list_sche ul {
 	list-style-type: none;
	margin: 0 10px -20px;
	padding-left:1.5em;
}

.page-inner-pc .list_sche ul li {
	margin-bottom: 0.5em;
	font-size: 1em;
	text-indent:-1.25em;
}

/*.schedule table .w50 {
	width: 50px;
	padding: 12px 0;
}*/

.arrow-bl {
    position: absolute;	
    width: 0;
	height: 0;
	border: 16px solid transparent;
	border-top: 18px solid #4782BD;
    left: 50%; /* 中央寄せに使用 */ 
    margin-left: -8px; /* 中央寄せに使用*/ 
}

.arrow-after {
	margin: 30px 0 50px;/*schedile.htmlのarrowのみ*/
	font-size: 0;
}

.schedule-arrow {
	text-align: center;
	margin: -1px 0 10px 0;
	font-size: 0;
}

.schedule table th.wh60 {
	width: 55px; 
	height: 60px;
	font-size: 1.7em;
}

table td.tal {
	text-align: left !important;
	padding: 10px 10px 10px 20px !important;
 }

.schedule .fee table {
	padding: 1em; 
}

.schedule_note {
	box-sizing: border-box;
	width: 100%;
	margin-top: 10px;
	padding: 0em 3em;
}

.schedule_note p{
	font-size: 1.5em;
	text-indent: -1.2em;
}

.typ table {
	margin: -20px auto 20px;
}

.typ table th {
	background: #4782BD;
	color: #FFF;
	border: 1px solid #FFF;
	text-align: center;
	padding: 1em 0.5em;
	line-height: 1.5;
}

.typ table td {
	background: #D3EDFB;
	border: 1px solid #FFF;
	text-align: left;
	padding: 1em;
	line-height: 1.3;
	font-size: 1em;
}

.typ table .point {
	display: inline-block;
	margin: 0.5em 0 0.2em;
	font-size: 1em;
	width: 80px;
	height: 1.7em;
	line-height: 1.5em;
	border-radius: 30px;
	text-align: center;
	background: #63B0F0;
	color: #fff;  
}

.typebox {
    margin: 0.5em 2em 0;
	padding: 0 1em;
    color: #2c2c2f;
    background: #fff;/*背景色*/
    border-radius: 30px;
	text-align: center;
	font-size: 1.1em;
}

.typ p {
	font-size: 1em;
	text-indent: 0;
}

.typ table .pros_and_cons ul {
	list-style-type: none;
}

.typ table .pros_and_cons ul li{
	font-size: 1em;
}

/* ▼▼▼▼▼ ＦＡＱ専用　▼▼▼▼▼ */

.noti {
 	box-sizing: border-box;
	width: 100%;
	margin:0 auto -1em;
}

.noti p {
	background: #5D9EEA;
	color: #FFF;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 1.5;
	margin: 10px 0 12px;
}

.noti h5 {
	width: 45%;
	background: #5D9EEA;
	color: #FFF;
	text-align: center;/* h5タイトルの位置揃えを指定◆ */
	font-size: 18px;/* h5タイトルの文字の大きさを指定◆ */
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 1.5;/* h5タイトルの行の高さを指定◆ */
	margin: 10px 0 10px;
	border-radius: 25px;
}

.bg-lb {/*背景を淡い水色にしたい時に使用*/
	background: #EBF6FC;
	margin: 1em auto 1em;
	padding: 1.5em 1.5em 1.5em;
	box-sizing: border-box;
}

#cl {
	width: 25%;
	font-size: 1.4em;
	color: #FFF;
	background: #000;
	margin: -0.6em 0 0 0;
	border-radius: 25px;
	text-align: center;
}

/*ボックス全体*/
.accbox {
 	box-sizing: border-box;
	width: 100%;
	padding: 0 0.5em;
	margin: 2em 0;
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding: 0.5em 0.5em 0.5em 1em;
	font-weight: bold;
	font-size: 1.5em;
    cursor :pointer;
    transition: all 0.5s;
	border-radius: 25px 0px 0px 25px;
}

.accbox label:nth-child(odd) {
    color :#002933;
	background :#eff9ff;
}

.accbox label:nth-child(even) {
    color :#00331f;
	background :#efffed;
}


/*ラベルホバー時*/
.accbox label:hover:nth-child(odd) {
    background :#e0f4ff;
}

.accbox label:hover:nth-child(even) {
    background :#e2ffdd;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
	margin: 0em 0em 0em 1.5em;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

.accshow p{
	margin: 0 0 1em 0.5em;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    padding: 1.5em 1em 1.5em;
    opacity: 1;
}

.cssacc:checked + .accshow:nth-child(odd) {
    background: #f7fcff;
}

.cssacc:checked + .accshow:nth-child(even) {
    background: #f8fff7;
}

.box_r {
	box-sizing: border-box;
	width: 100%;
	text-align: right;	
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
	font-size: 1.5em;
	margin-bottom: 50px;/* ◆各ブロックの上側にとる余白を指定◆ */
}


.h50 { height: 50px !important; }
.h60 { height: 60px !important; }
.h70 { height: 70px !important; }
.h85 { height: 85px !important; }
.h120 { height: 120px !important; }


.w_fig {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}

/* ▲▲▲▲▲ teacher 専用 ▲▲▲▲▲ */

/* ▼▼▼▼▼▼ access 専用 ▼▼▼▼▼▼ */

.access {
	padding: 0 0 30px 0;
}

.no-indent p{
	text-indent: 0;
}

.access-btn a {
	position: relative;
	float: right;
	display: block;
	width: 193px;
	height: 39px;
}

.access-btn img {
	position: absolute;
	left: 0;
	top: 0;
}

.access table {
	width: 100%;
	font-size: 1.5em;
	margin: 10px auto 0;
}

.access table th {
	background: #4782BD;
	color: #FFF;
	border: 1px solid #FFF;
	text-align: center;
	padding: 0.5em 0.5em;
	line-height: 1.3;
}

.access table td {
	background: #D3EDFB;
	border: 1px solid #FFF;
	text-align: left;
	padding: 1em 0.5em;
	line-height: 1.3;
}

.directions {
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
	font-size: 1.5em;
	margin: 1.5em 0;
}

.directions .direct {
 	font-size: 1.2em;
	line-height: 1.3;
	text-indent: 1.5em;
}

.directions ol{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 1em 1em 1em 1.5em;
  background: #EAF4F9;
}

.directions p {
	font-size: 1em;
}

.directions ol li{
  position: relative;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 2.8em;
  text-indent: 0;
  border-radius: 45px 0 0 45px;
  font-size: 1em;
}

.directions ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #5c9ee7;
  color: white;
  font-family: sans-serif,'Avenir','Arial Black','Arial';
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 1em;
  width: 25px;
  height: 25px;
  line-height: 27px;
  text-indent: 1px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);

}


.feature-g {
	box-sizing: border-box;
	width: 960px; /*コンテンツの幅を 960 pxに*/
	max-width: 100%;
	padding: 20px 40px 10px;
	margin: 30px auto; /*コンテンツを左右の中央に配置*/
}

.feature-y {
	background: #d4fae0;
}

/* ▼▼▼▼▼▼ voice 専用 ▼▼▼▼▼▼ */

.feature-y {
	box-sizing: border-box;
	padding: 10px 40px 30px;
	width: 960px; /*コンテンツの幅を 960 pxに*/
	margin: 30px auto 30px; /*コンテンツを左右の中央に配置*/
	background: #E2FBEB;
	max-width: 100%;
}

.feature-y h5 {
	width: 100%;
	background: #444;/* h5タイトルの背景色を指定◆ */
	color: #fff;/* h5タイトルの文字色を指定◆ */
	text-align: center;/* h5タイトルの位置揃えを指定◆ */
	font-size: 22px;/* h5タイトルの文字の大きさを指定◆ */
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 2;/* h5タイトルの行の高さを指定◆ */
	margin: 30px 0 20px;
}

.feature-y p {
	font-size: 18px;
	margin: 0em 1em 2em 1em;
}

.feature-y-in h6 {
	box-sizing: border-box;
	width: 100%;
	background: #fff;/* h6タイトルの背景色を指定◆ */
	color: #000;/* h6タイトルの文字色を指定◆ */
	text-align: left;/* h6タイトルの位置揃えを指定◆ */
	font-size: 18px;/* ◆ h6タイトルの文字の大きさを指定◆ */
	line-height: 2;/* ◆ h6タイトルの行の高さを指定◆ */
	margin: 1em 1em 1em -0.5em;
	padding: 0 0.5em 0 1.5em;
	border-radius: 25px 0px 0px 25px;
}


.feature-y-in div {
	float: left;
	max-width: 47%;
	margin-bottom: 20px;
}

.feature-y-in div:nth-child(even) {
	margin-right: 6%;
}

.feature-y-in img {
	max-width: 100%;
} 

.feature-y-in p { /*  */
	margin: 0.5em 0em 1em 0em;
	text-indent: 0;
	font-size: 16px;
} 

.padding-40 {
	padding: 40px;
}
/* ▲▲▲▲▲ access 専用 ▲▲▲▲▲ */



/* ▼▼▼▼▼▼ exp-l 専用 ▼▼▼▼▼▼ */
a#have-a-look {
	text-decoration: none;	
}

.underl-r {
	border-bottom: solid 3px #DC143C;
}

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

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

.under-p {
	background: linear-gradient(transparent 80%, #fcc4bd 50%);
}
.under-bl {
	border-bottom: solid 1px #000000;
}

.squ {
	padding: 2px 3px; /* 枠と文字の空間 */
	margin: 0; /* 枠の外の空間 */
	border: 1px solid #000000; /* 枠の線の太さ・種類・色 */
	border-radius: 2px; /* 枠の角を丸くする */
	font-family: inherit; /* フォントの種類を継承する */
	font-size: 0.85em;	/* フォントの大きさ */
}

.squ3 {
	padding: 1.5px 7px; /* 枠と文字の空間 */
	margin: 0; /* 枠の外の空間 */
	border: 1px solid #96ABDE; /* 枠の線の太さ・種類・色 */
	border-radius: 10px; /* 枠の角を丸くする */
	background: #96ABDE;
	font-family: inherit; /* フォントの種類を継承する */
	font-size: 0.85em;	/* フォントの大きさ */
	color: #ffffff;
	text-decoration:none;
}

a#take-a-look, a#have-a-look, a#have-a-good-look {
	text-decoration: none;
}

a#look, a#see, a#have-a-close-look {
	text-decoration: none;
}

.feature-exp {
	box-sizing: border-box;
	background:linear-gradient(90deg,#efffed 0%,#efffed 50%,#eff9ff 50%,#eff9ff 100%);
	width: 960px;
	max-width: 100%;
	padding-bottom: 15px;
}

.feature-exp h5 {
	width: 900px;
	max-width: 90%;
	background: #444;/* h5タイトルの背景色を指定◆ */
	color: #fff;/* h5タイトルの文字色を指定◆ */
	text-align: center;/* h5タイトルの位置揃えを指定◆ */
	font-size: 2em;/* h5タイトルの文字の大きさを指定◆ */
	letter-spacing: 0.1em;
	line-height: 2;/* h5タイトルの行の高さを指定◆ */
	margin: 10px auto;
}

.feature-exp h6 {
	box-sizing: border-box;
	width: 900px;
	max-width: 90%;
	background: #fff;/* h6タイトルの背景色を指定◆ */
	color: #000;/* h6タイトルの文字色を指定◆ */
	text-align: center;/* h6タイトルの位置揃えを指定◆ */
	font-size: 20px;/* ◆ h6タイトルの文字の大きさを指定◆ */
	font-weight: bold;
	line-height: 2;/* ◆ h6タイトルの行の高さを指定◆ */
	margin: 1em auto 0.5em;
	padding: 0em 0.5em 0em 2em;
	border-radius: 25px 25px 25px 25px;
}

.feature-exp p {
	margin: 5px 0 5px;
}

.feature-exp_in {
	width: 960px;
	max-width: 100%;
	display: grid;
	grid-template-columns: 50% 50%;
	background:linear-gradient(90deg,#efffed 0%,#efffed 50%,#eff9ff 50%,#eff9ff 100%);
}

.f_exp_l {
	grid-column: 1;
	box-sizing: border-box;
	width: 430px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 15px;
}

.f_exp_r {
	grid-column: 2;
	box-sizing: border-box;
	width: 430px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 15px;
}

.schedule_exp table {
	border: 1px solid #FFF;
	table-layout: fixed;
	width: 100%;
	font-size: 150%;
}

.schedule_exp table th {
	border: 1px solid #FFF;
	background: #4782BD;
	color: #FFF;
	text-align: center;
	padding: 1em 0;
}

th.width25{
	width: 25%;
}

th.width30{
	width: 30%;
}

.schedule_exp table td {
	border: 1px solid #FFF;
	background: #D3EDFB;
	padding: 1em;
	line-height: 1.6;
	text-align: left;
}

.schedule_exp table td p{
	line-height: 1.4;
	font-size: 1em;
	margin: 0.3em 0;
	text-align: left;
}
p.indent-1{
	text-indent: -0.1em;
}
.schedule_exp table th span {
	font-size: 150%;
}

.schedule_exp table td span {
	font-size: 120%;
}

.schedule_exp table td ul {
	text-align: left;
	margin-left: 6em;
}

.schedule_expbox {
    padding: 0 1em;
    margin: 0.5em 6em 0;
    color: #2c2c2f;
    background: #fff;/*背景色*/
    border-radius: 30px;
}

.schedule_expbox p {
	font-size: 100%;
    margin: 0; 
    padding: 0;
}

.schedule_exp ul {
	list-style-type: none;
}

.schedule_exp table th.diagonal{
  background-image: linear-gradient(to top right, transparent, transparent 49.8%, #fff 50%, #fff 50%, transparent 50.3%, transparent);
}

.r-jun table {
	width: 100%;
	font-size: 130%;
}

.r-jun table th {
	background: #4782BD;
	color: #FFF;
	border: 1px solid #FFF;
	text-align: center;
	padding: 1em 0.5em;
	line-height: 1.2;
}

.r-jun table td {
	background: #D3EDFB;
	border: 1px solid #FFF;
	text-align: center;
	padding: 1em 0;
	line-height: 1.3;
}

.r-jun table th span {
	font-size: 130%;
}

.r-jun table td ul {
	text-align: left;
	margin-left: 1em;
}

.r-junbox1 {
    padding: 0.3em 1em;
    margin: 0 0.8em 0.2em;
    background: #fff;/*背景色*/
    border-radius: 5px;
}

.r-junbox1 p {
	font-size: 120%;
	line-height: 1.2;
}

.r-junbox {
    padding: 0.3em 0em;
    margin: 0em 0.5em;
    background: #EBF6FD;/*背景色*/
    border-radius: 30px;
}

.r-junbox p {
	font-size: 100%;
	line-height: 1.2;
}

.r-jun ul {
	list-style-type: none;
}

.window_b {
	box-sizing: border-box;
	width: 600px;
	max-width: 100%;
	margin: 50px auto 15px;
	background: #E9F5FC;
    position: relative;
    padding: 1em 0.3em 1em 0.5em;
    border: solid 3px #62c1ce;
}

.window_b a {
		text-decoration: none;
		color: #000000;
}

.box-title {
    position: absolute;
    display: inline-block;
    top: -37px;
    left: -3px;
    padding: 5px 20px;
    height: 25px;
    line-height: 28px;
    vertical-align: middle;
    font-size: 1.5em;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

.window_b p {
    margin: 0 0 -0.5em; 
    padding: 0 1em 0.5em 3em;
	text-indent: -2em;
}

.dli-box-in {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  position: relative;
  width: 1.15em;
  height: 1.15em;
}

.dli-box-in::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.46em;
  border: 0.1em solid currentColor;
  border-top: 0;
  border-radius: 0 0 0.15em 0.15em;
  box-sizing: border-box;
}

.dli-box-in > span {
  width: 0.1em;
  height: 0.625em;
  background: currentColor;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.353em;
  margin: auto;
}

.dli-box-in > span::before {
  content: '';
  width: 0.40625em;
  height: 0.40625em;
  border: 0.1em solid currentColor;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  transform-origin: bottom left;
  position: absolute;
  left: 50%;
  bottom: -0.05em;
  box-sizing: border-box;
}



/* ----------------------------------------------------
	footer
---------------------------------------------------- */

#s-nav {
	background-color: #D3EDF9 ;
	width: 100%;
	height: auto;
}

#s-nav ul{
	width: 960px;
	margin: 0 auto;
	max-width: 100%;
}

#s-nav ul li {
	width: 24.4%;
	float: left;
	line-height: 1.8em;
	background-color: #B5DFF3;
	list-style-type: none;
	letter-spacing: 0.04em;
	margin: 2px 0.3%; 
	margin-bottom: 4px;
	font-size: 1.4em;
	text-align: center;
	font-weight: bold;
}

#s-nav a {
	display: block;
	text-decoration: none;
	color: #000000;
}

#s-nav p {
	text-align: right;
	font-size: 1.4em;
}

#s-nav a:hover {
	background-color: #72C5E9;
	color: #FFFFFF;
}

#s-nav #s-currentpage {
	background-color: #72C5E9;
	color: #FFFFFF;
}

footer {
	background: #D3EDF9;
	width: 100%;

}

.footer-top {
	width: 960px;
	margin: 0 auto;
	zoom: 1;
	padding: 15px 0 8px 0;
	position: relative;
	max-width: 100%;
}

.footer-top:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0.1em;
	line-height: 0;
}

.footer-btn {
	position: absolute;
	right: 0;
	top: -40px;
	text-decoration:none;
	font-family: fot-klee-pro, essonnes-display, serif;
	font-size: 1.5em;
	color: #3C72A9;
	display: inline-block;
	width: 120px;
	height: 35px;
	line-height: 25px;
	border-radius: 40px;
	text-align: center;
	overflow: hidden;
	font-weight: bold;
	background: linear-gradient(#E0FFFF 0%, #87CEFA 100%);
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.footer-btn a {
	color: #3C72A9;
	text-decoration:none;
}

.footer-btn:active {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(#d6efff 0%, #87CEFA 100%);/*グラデーションを明るく*/
}

.footer-name {
	float: left;
}

.footer-tel {
	float: right;
}

.copyright {
	max-width: 100%;   
	width: 960px; /* 最大幅 */
	margin: auto;
	height: auto;
}

.box_inq { /* logo+inquiry */
	position: relative;
	max-width: 100%;   
	width: 960px; /* 最大幅 */
	height: auto;
}

.box_inq:after {
	content: "";
	display: block;
	clear: both;	
}

.box_inq .box_a {	
}

.box_inq .box_a img {
	min-width: 280px; 
	height: auto;
}

.box_inq .box_b {	
	position: absolute;
	top: 0;
	right: 0;
}

.box_inq .box_b img {
	min-width: 20%; 
	max-width: 35%;
	margin-right: 10px;
	float: right;
	height: auto;
}

/* ----------------------------------------------------
	#clearfix
---------------------------------------------------- */


.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;

}

.clearfix {
 display: inline-table;
}

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */