@charset "utf-8";

/* ----------------------------------------------------
	phone.css
---------------------------------------------------- */
.wrapper {
	padding: 0 0.7em 0 0.8em;
}

h1 {
	width: 100%;
	margin: 0 auto;
	font-weight: bold;
	padding-bottom: 5px;
	font-size: 14px;
}

.header-main {
	background:none;
}

#title-back {
	width: 100%;
	background: #D3EDF9;
/*	border-bottom: 5px solid #4782BD;*/
}

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

.header-title {
	width: 100%;
}

.header-title h2{
	padding: 30px 0 0 0;
}

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


.spmenu { /*mobile では非表示としていたこの class を上書きして無効に*/
	display:inherit;
}

.pcmenu { /*この class を用いると pc では表示されなくなる*/
	display:none !important;
}

.description {
	width: 95%;	
	margin-left: 0.7em;
}

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

.header-main-btn {
	margin: 0;
}

.h_in {
	text-align: center;
	margin: 0.5em 0 -0.2em -0.5em;
}


nav ul {
	width: 100%;
	margin: 0 auto;
}

nav li {
	width: 47%;
	float: left;
	line-height: 3;
	background-color: #000;
	list-style-type: none;
	letter-spacing: 0.02em;
	margin: 2px 2% 4px;
	text-align: center;
	font-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
	font-size: 16px;
}

nav li:nth-child(even) {
	margin-left: 0%;
}

#except-for-top nav{
	padding: 4px 0;
	height: auto;
	border-bottom: none; /* mobile では global-navi とページタイトル(考える教材と授業等)との間の線を消す*/
}



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

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


#nav2 ul {
	width: 100%;
	margin: 0 auto;
}

#nav2 li {
	width: 49.4%; /* ボタンの横幅*/ 
	float: left; /* これによりボタンが横並びになる*/
	line-height: 2; /* ボタンの縦幅を 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-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
	font-size: 15px;
}

#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: 100%;
	margin: 0 auto;
}

#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-style: normal;
	font-family: fot-klee-pro, essonnes-display, serif;
    font-weight: 500;
	font-size: 15px;
}

#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;
}


.bg-blue {
	width: 100%;
	padding: 0 8px;
	box-sizing: border-box;
}

.bg-blue img { /*.main ctr内のすべての画像を中央揃えにする*/
	display: block;
	margin-left: auto;
	margin-right: auto;
}

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

.box-achi {
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.box-achi p {
		text-indent: 0;
}

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

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

.page-title {
	margin-top: 5px;
}

.page-title h3 {
	width: 100%;
	padding: 0;
	font-size: 2.8em;
	text-align: center;	
	letter-spacing: -0.05em;
}

h4 {
	font-size: 2em;
	padding: 0.2em 0 0.2em 0.6em;
	letter-spacing: 0.01em;
}

.hello h5 {
	font-size: 2em;
	border: none;
	text-align: left;
	line-height: 1.2;
}

.home_movie_frame {
	width: 80%;
	margin: 0 auto 20px;
	padding: 20px 15px 10px;
}

.home_movie_frame h5 { 
	text-align: center;
 	font-size: 1.7em;
 	font-weight: bold;
	margin-bottom: 0.2em;
}

.home_movie_frame p { 
	font-size: 1.3em;
	margin:0 0 0.2em;
}

.page-inner-pc {
	padding: 15px 0 0px;
}


.page-inner {
	width: 100%;
	margin: 0 auto;
	padding: 40px 0;
}


.bg-lblue .no-indent {
	margin: 0 -0.3em 0;
}

.tg .m_frame {
	width: 80%;
	margin: 0 auto 40px;
	padding: 20px 15px 20px;
}

/* ▼▼▼▼▼▼ アコーディオン 専用 ▼▼▼▼▼▼ */
/*ベース*/
.Label {		/*タイトル*/
	box-sizing: border-box;
	width: 100%;
	padding: 0.2em 0 0.2em 1em;
	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 0 0 1em;
	padding:0;
	overflow: hidden;
}

.toggle:checked + .Label + .content {	/*開閉時*/
	height: auto;
	padding: 0 5px;
	transition: all .3s;
}

.toggle:checked + .Label::before {
	transform: rotate(-45deg) !important;
}

.content ul {
	margin: 0.5em 0 0.5em 0.5em ;
}
.content ul li{
	padding-left: 1em;
	margin-left: 1em;
	text-indent: -1.3em;
}


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

/* ▼▼▼▼▼▼ junior 専用 ▼▼▼▼▼▼ */

label span{
    display: block;
    width: 15px;
    height: 15px;
    padding: 45px 7px 7px;
    border-radius: 100%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.box_blue {
	box-sizing: border-box;
	width: 90%;
	border: 2px solid #00BFFF;
	border-radius: 10px;
	padding: 20px 15px 5px 20px;
	margin: 10px auto 20px;
}

.box_sprgr {
	box-sizing: border-box;
	width: 90%;
	border: 2px solid #00fa9a;
	border-radius: 10px;
	padding: 20px 0 5px 10px;
	margin: 10px auto 20px;
}

.box_magenta {
	box-sizing: border-box;
	width: 90%;
	border: 2px solid #F959B9;
	border-radius: 10px;
	padding: 10px 15px 0 20px;
	margin: 10px auto 20px;
}

.box_progress {
	border-radius: 5px;
	padding: 1.5em 1em 0;
	margin: -1em 1.5em 1.5em;
}

.box_lblue .box_progress {
	margin: -1em -1em 1.5em;
	padding: 1.5em 1em 0;
}

.box_cl {
	padding: 0 1em;
	margin: 0;
}

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

.lbox {
	grid-column: 1;
	grid-row: 1;
}

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

.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;/* ◆右側の帯全体の背景色を指定◆ */
}

.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: 30px;/* ◆各ブロックの上側にとる余白を指定◆ */
	margin-bottom: 30px;/* ◆各ブロックの下側にとる余白を指定◆ */
	padding: 20px;
	background: #f1ffef;/* ◆左側の帯全体の背景色を指定◆ */
}

.note {
	padding: 1.5em 1em 0.5em;
	width: 100%;
	margin: 0;
}

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


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

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

.rbox {
	grid-column: 1;
	grid-row: 2;
}

.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: #ffffff;/* ◆右側の帯の最初のタイトルの文字色を指定◆ */
	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 70px;/* ◆各ブロックの上側にとる余白を指定◆ */
	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.4em;/* ◆テーブル内の文字(項目名・本文共に)の大きさを指定◆ */
	background: #effaff;/* ◆テーブルの背景色を指定◆ */
}

.rbox-in th {
	width: 21%; /* ◆項目名の横幅を指定◆ */
	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クラスを付与して、背景色と同色の上線を設定している◆ */
}

.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;/* ◆右側の帯全体の背景色を指定◆ */
}

.balloon_1 {
	font-size: 1em; 
}


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

.lbox2 {
	grid-column: 1;
	grid-row: 1;
}

.rbox2 {
	grid-column: 1;
	grid-row: 2;
}


.load {
	font-family: fot-klee-pro, essonnes-display, serif;
	font-size: 1.5em;
	display: inline-block;
	text-decoration: none;
	max-width: 70%;
	height: auto;
}

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

.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%);/*グラデーションを明るく*/
}

.feature h5 {
	font-size: 18px;
	font-weight:bold;
	margin: 2em 0 0.3em;
}

.schedule table {
	font-size: 14px;
}

.schedule table th {
	text-align: center;
	padding: 6px 8px;
	line-height: 1.3;
}

.schedule table td {
	text-align: center;
	padding: 6px 8px;
	line-height: 1.3;
}

.schedule table .wh60 {
	width: 47px;
	height: 50px;
	font-size: 14px;
}

.schedule table td ul {
	font-size: 14px;
}

.schedule p {
	font-size: 1.5em;
	text-indent: 0;
	line-height: 1.7;
	margin-bottom: 10px;
}

table td.tal {
	padding: 6px 6px 6px 10px !important;
	font-size: 1em;
 }

.typ table th {
	font-size: 1.5em;
}
.typ table td {
	text-align: left;
}

.typ table .point {
	font-size: 1.2em;
}
	
.typebox {
    margin: 0.5em 0.5em 0;
	padding: 0.6em 1em 0.1em 1.5em;
	border-radius: 10px;
}

.typebox p {
	text-align: left;
	font-size: 1.2em;
	line-height: 1.5em;
}

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

.noti p {
	width: 100%;
}

.noti h5 {
	width: 100%;
}

#cl {
	width: 50%;
}

.FAQbox {
	box-sizing: border-box;
	width: 100%;
	padding: 0px 5px;
}

.FAQbox h6 {
	background: #d4fae0;/* ◆右側の帯の最初のタイトルの背景色を指定◆ */
	text-align: left;/* ◆右側の帯の最初のタイトルの位置揃えを指定◆ */
	font-size: 16px;/* ◆右側の帯の最初のタイトルの文字の大きさを指定◆ */
	margin-top: 50px;
	margin-bottom: 15px;/* ◆各ブロックの上側にとる余白を指定◆ */
	padding: 0px 10px;
	line-height: 2;/* ◆右側の帯の最初のタイトルの行の高さを指定◆ */
}

.FAQbox div {
	padding: 0;
}

.FAQbox p{
	font-size: 14px;
	text-indent: 1em;
}

.w_fig {
	box-sizing: border-box;
	display: block;
}


.feature-y {
	padding: 10px;
	width: 100%;
	margin: 0 auto 40px; /*コンテンツを左右の中央に配置*/
	background: #DEFCE7;
}

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

.feature-y p {
	font-size: 16px;
	margin-bottom: 30px;
}

div.feature-y-in h6 {
	padding: 0 0 0 -1.5em;
	line-height: 1.8;/* ◆ h6タイトルの行の高さを指定◆ */
	font-size: 1.5em;
	margin: 0.5em 0;
}

div.feature-y-in div {
	float:none;
	max-width: 95%;
	margin: 0 auto 20px;
}

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

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



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

.feature-exp h5 {
	box-sizing: border-box;
	font-size: 2em;/* h5タイトルの文字の大きさを指定◆ */
	line-height: 2;/* h5タイトルの行の高さを指定◆ */
}

.feature-exp h6 {
	box-sizing: border-box;
	font-size: 20px;/* ◆ h6タイトルの文字の大きさを指定◆ */
	font-weight: bold;
	padding: 0em 0.5em;
	border-radius: 25px 25px 25px 25px;
}

.feature-exp p {
	margin-bottom: 20px;
}

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

.f_exp_l {
	grid-column: 1;
	grid-row: 1;
	box-sizing: border-box;
	width: 100%;
	padding: 15px;
	margin: 0 auto;
	background-color: #efffed;
}

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

.f_exp_r {
	grid-column: 1;
	grid-row: 2;
	box-sizing: border-box;
	width: 100%;
	padding: 15px;
	margin: 0 auto;
	background-color: #eff9ff;
}

.schedule_exp table {
	max-width: 100%;
	font-size: 15px;
}

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

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

.schedule_exp table th span {
	font-size: 140%;
}

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

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

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

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

.window_b {
	box-sizing: border-box;
	max-width: 97%;
    padding: 1em 0.2em 1em;
    border: solid 3px #62c1ce;
}

.box-title {
    position: absolute;
    display: inline-block;
    top: -37px;
    left: -3px;
    padding: 5px;
    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 {
    font-size: 1.4em;
}

.nowp_p {
	white-space: nowrap;
	background: linear-gradient(transparent 50%, #fcc4bd 50%);
}

















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

#s-nav ul li {
	width: 47%;
	line-height: 2.5;
	float: left;
	margin: 2px 2% 4px;
	font-size: 15px;
}

#s-nav li:nth-child(even){
	margin-left: 0%;	
}

.footer {
	padding: 0px 8px;
}

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


/*.footer-name {
	float: inherit;
}
*/

.footer-tel {
	margin: 10px 10px 0;
	max-width: 30%;
}

.copyright {
	font-size: 10px;
	
}


/* ---------- フロート /　画像関連---------- */
div.img-ctr img { /*.main 内のすべての画像を中央揃えにする*/
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.fl-l { /*左寄せしていた画像の float を解除*/
	float: none;
	margin: 5px auto 20px;
}

img.fl-r { /*右寄せしていた画像の float を解除*/
	float:none;
	margin: 5px auto 20px;
}

.page-inner div.fl-l { /*左寄せした、注釈つきの写真用の div の float を解除*/
	float: none;
}

.page-inner div.fl-r { /*右寄せした、注釈つきの写真用の div の float を解除*/
	float: none;
}

.page-inner-pc div.fl-l { /*左寄せした、注釈つきの写真用の div の float を解除*/
	float: none;
}

.page-inner-pc div.fl-r { /*右寄せした、注釈つきの写真用の div の float を解除*/
	float: none;
}

.r-img-margin { /*注釈つきの写真用の div 内の画像を中央揃え*/
	margin: 5px auto 20px;
}

.l-img-margin { /*注釈つきの写真用の div 内の画像を中央揃え*/
	margin: 5px auto 20px;
}


/* ---------- ＰＣでは縮小していた画像を拡大 ---------- */
.maxw20 {
	max-width: 95%;
	height: auto;
}
.maxw25 {
	max-width: 95%;
	height: auto;
}

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

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

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

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

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

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

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

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

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


/* ---------- mobile でも縮小する場合に利用 ---------- */

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

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

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

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

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

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

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

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

.smaller {
	max-width: 60%;	
	height: auto;
	float: none;
	margin: 5px auto 20px;
}

/* ---------- mobile でのみ利用する margin ---------- */

.mt10 {
	margin-top: 10px;
}

.mt20 {
	margin-top: 20px;
}

.mt30 {
	margin-top: 30px;
}