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

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
 コンテンツページ レイアウトの指定
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/*==========================================
 コンテンツページ／ヘッダー
===========================================*/
header {
  text-align:center;
  position:relative;
  overflow:hidden;
}
header h1 {
  margin:0 auto;
  padding:15px 0;
  width:90%;
}
header h1 img {
  width:100%;
  max-width:419px;
}
header #tel {
  margin:0 auto 10px;
  width:70%;
}
header #tel img {
  width:100%;
  height:auto;
  max-width:265px;
}

/*==========================================
 コンテンツ／タイトル
===========================================*/
#ttl {
	width: 100%;
	margin: 0 auto 30px;
	overflow: hidden;
	text-align:center;
  background:#D8E4F2;
}
#ttl #inner {
	width:90%;
	margin:0 auto;
}
#catch {
  margin:13px auto 0;
  width:70%;
}
#catch img {
  width:100%;
  max-width:315px;
}

#ttl h2 {
  margin:0 auto;
  padding:0;
  width:100%;
}
#ttl h2 img {
  width:100%;
  max-width:400px;
}

/*==========================================
 コンテンツセクションエリア
===========================================*/
#contents {
	width:90%;
	margin:0 auto 20px;	
}
hr.dot_or {
height: 2px;
border: none;
border-top: 2px #FF4000 dotted;
margin: 0 0 20px;
}
.school, .school2, .school3,.school4, .stay {
	width:100%;
	margin:0 auto 20px;
	overflow: hidden;
}
.school4 img {
  width:100%;
  height:auto;
  max-width:497px;	
}

/* about school homestay----------------------------*/
.topic h3, .topic2 h3 {
	font-size:130%;
	font-weight:bold;
	color:#238C00;
	background:url(../common_img/icon_glb_s.jpg) no-repeat left 1px;
	padding: 0 0 3px 25px;
	margin: 0 0 20px;
}
.topic h4, .topic2 h4 {
	font-size:130%;
	font-weight:bold;
	color:#FF3F00;
	background:url(../common_img/icon_clip_s.jpg) no-repeat left 1px;
	padding: 0 0 3px 25px;
	margin: 0 0 20px;
}
.homestay h4 {
	font-size:130%;
	font-weight:bold;
	color:#FF7F00;
	background:url(../common_img/icon_glb_os.jpg) no-repeat left 1px;
	padding: 0 0 3px 25px;
	margin: 0 0 20px;
}
.topic p, .stay p {
	margin: 0 0 20px;
}
.school img, .stay img {
	width:70%;
	overflow: hidden;
	margin:0 0 20px;
	max-width:300px;
}
.lesson h3 img {
	width:90%;
	max-width:373px;
	margin: 0 0 5px;
}
.stay_ttl h3 img {
	width:90%;
	max-width:394px;
	margin: 0 0 5px;
}
.point {
	width:90%;
	border:1px #FF4000 solid;
	background:#FEFFE5;
	padding:10px;
	margin:0 auto 10px;
	text-align:center;
}
.point p {
	text-align:left;
}

/* course ----------------------------*/
.language {
	width:100%;
	margin:0 auto 20px;
	overflow: hidden;
}
.course {
	width: 90%;
	height: auto;
	border: 1px #238C00 solid;
	background: #FEFFE5;
	padding: 10px;
	margin: 0 auto 10px;
}
.course h3 {
	font-size:130%;
	font-weight:bold;
	color:#238C00;
	background: url(../course/img/icon_pcl.gif)no-repeat left 2px;
	border-bottom:2px #FF4000 dotted;
	padding: 0 0 2px 30px;
	margin: 0 0 10px;	
}
.course h3 small {
	font-size:70%;
	color:#238C00;
	line-height:0.5em;
}
.course img {
	float:right;
	margin: 0 0 0 10px;
}
.other {
	width:90%;
	border:1px #FF4000 solid;
	background:#FEFFE5;
	padding:10px;
	margin:0 auto 20px;
}

/* newsletter homestay----------------------------*/
.newsletter h3 {
	font-size: 160%;
	width:95%;
	font-weight:bold;
	color: #228C00;
	background: url(../common_img/mds_bg.jpg) repeat-x 0 center;
	padding:5px 0 5px 10px;
	margin-bottom:20px;
}


/* font */
.b_gr_c {
	font-weight:bold;
	color:#238C00;
}
/* 2023 04 */
.b_gr_c2 {
	font-weight:bold;
	color:#238C00;
	font-size: 110%;
}
.b_gr_c_n {
	color:#238C00;
}
.b_gr_c2_ul {
	font-weight:bold;
	color:#238C00;
	font-size: 110%;
	text-decoration: underline;
}
/* color text */
.ct_org {
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-weight:bold;
	font-size:200%;
	color:#FF9226;
}
.ct_pbl {
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-weight:bold;
	font-size:200%;
	color:#7396FF;
}
.ct_ppl {
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-weight:bold;
	font-size:200%;
	color:#9672FF;
}
.ct_pnk {
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-weight:bold;
	font-size:200%;
	color:#DF97B8;
}
.ct_ylg {
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-weight:bold;
	font-size:200%;
	color:#B2B200;
}

/* 2023 06 color text */
.ppl-12 {
	font-weight:bold;
	font-size:120%;
	color:#9672FF;
}
.blu-12 {
	font-weight:bold;
	font-size:120%;
	color:#7396FF;
}
.grn-12 {
	font-weight:bold;
	font-size:120%;
	color:#238C00;
}
/* 2024-05 */
sup {
vertical-align:text-top;
font-size:11px;
}

/*--- メールフォーム ---*/

.tbl-form {  
  width: 100%;
  margin: 0 auto;
  border-top: 1px solid #999;
}
.tbl-form dt,
.tbl-form dd {
  padding: 10px 20px;
}
.tbl-form dt {
  font-weight: bold;
  color:#238C00;
}
.tbl-form dd {
  font-size:10px;
  padding-top:10px;
  padding-bottom:10px;
  border-bottom: 1px solid #999;
}
.tbl-form dd textarea {
  width:95%;
}
.tbl-form .w300{
  font-size:12px;
  width:95%;	
  height:24px;
}

p.btn {
  text-align: center;
  padding: 20px 0;
}

/*------------------------------------------------------------
	Googleマップ
------------------------------------------------------------*/
.google-maps {
position: relative;
padding-bottom: 75%; // これが縦横比
height: 0;
overflow: hidden;
margin-bottom:20px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

/*==========================================
 ページトップへボタンのスタイル
===========================================*/
a#pagetopBtn img {
  position: fixed;
  bottom: 10px;
  right: 1px;
}


/* メディアクエリによる切り替え */


/* PC向け・大型タブレット向けレイアウト：769px～960px */
@media only screen and (min-width: 580px) {
.lesson {
	width:100%;
	margin: 0 auto;
	overflow:hidden;
}
.point {
	width:43%;
	float:left;
	margin:0 0 10px 10px;
}
.course {
	width:43%;
	height:260px;
	float:left;
	margin:0 0 10px 10px;
}
.course h3 small {
	font-size:60%;
}
.other {
	width:92%;
	margin:0 0 30px 10px;
}
  .tbl-form dt,
  .tbl-form dd {
    padding: 20px 0;
  }
  .tbl-form dt {
    font-size:12px;
    clear: both;
    float: left;
    width: 150px;
  }
  .tbl-form dd {
    font-size:12px;
    padding-left: 170px;
    border-bottom: 1px solid #999;
  }
  .tbl-form .w300{
  font-size:12px;
  width:80%;	
  height:24px;
}

	}

@media only screen and (min-width: 768px) {
header {
	width:90%;
    margin:10px auto 0;
	max-width:960px;
  }
header h1 {
  padding:0;
  width:45%;
  float:left;
}
header #tel {
  padding:10px 0 0 0;
  width:30%;
  float:right;
}

#ttl #inner {
	width:90%;
    margin:0 auto;
	max-width:960px;
}
#catch {
  width:30%;
  float:left;
}
#ttl h2 {
  width:40%;
  float:right;
}

.topic, .homestay {
	width:65%;
	float:right;
}
.topic h3, .topic2 h3 {
	font-size:160%;
	background:url(../common_img/icon_glb.jpg) no-repeat left 1px;
	padding: 0 0 3px 35px;
}
.topic h4, .topic2 h4 {
	font-size:160%;
	background:url(../common_img/icon_clip.jpg) no-repeat left 1px;
	padding: 0 0 3px 35px;
}
.homestay h4 {
	font-size:160%;
	background:url(../common_img/icon_glb_o.jpg) no-repeat left 1px;
	padding: 0 0 3px 35px;
}

.school img, .stay img {
	width:30%;
	float:left;
}

.point {
	width:45%;
	float:left;
	margin:0 0 10px 10px;
}
.course {
	width:45%;
	height:230px;
	float:left;
	margin:0 0 10px 10px;
}
.course h3 small {
	font-size:70%;
}
.other {
	width:95%;
	margin:0 0 30px 10px;
}
.newsletter h3 {
	font-size: 200%;
	width:99%;
}

	}	
/* PC向けレイアウト：961px以上固定レイアウト */
@media print, screen and (min-width: 930px) {
#contents {
	width:960px;
	margin:0 auto;	
	}

.lessong {
	width:100%;
	margin: 0 0 0 -5px;
	overflow:hidden;
}
.point {
	width:17%;
	height:170px;
	float:left;
	margin:0 0 20px 5px;
}
.course {
	width:30%;
	height:240px;
}
.other {
	width:97%;
	margin:0 0 30px 10px;
}
}