@charset "utf-8";
/*
サイト上の構成の大枠としてページ内に1度しか出てこないものと、グリッドレイアウトについてを記述します。
We will write about thing the only comes out once on the page as a frame and grid(column) layout.

接頭辞はLayoutの頭文字を取って【l_】とします。
Prefix will take the "Layout" first letter and use it as "l_". 

ここで指定するのは以下の様なものと予想されます。
You might use the following.
.l_wrap/.l_container/.l_header/
.l_nav/.l_main/.l_contents/.l_footer

モディファイヤを使用する場合は接頭辞【has_】をつけ、各レイアウトの下に記述します。
When using modifier put the prefix "has_" and write it under each layout.

フォントサイズはremで指定します。
"rem" will be used for font-size.
*/
/*----------------------------------------------
	.l_wrap
---------------------------------------------*/
.l_wrap {
	width: 960px;
	margin: 0 auto;
}
.l_inner_wrap {
	padding: 0 20px 40px;
}
.l_inner_wrap2 {
	padding: 0 0 50px;
}
.l_inner_wrap:last-child, .l_inner_wrap2:last-child {
	padding-bottom: 0;
}
.l_inner_wrap p { line-height: 2; }
@media screen and (max-width: 640px) {
	.l_wrap {
		width: 94%;
    		margin: 0 3%;
	}
	.l_inner_wrap {
		padding: 0 0 30px;
	}
}
.wp-caption {
  max-width: 100% !important;
  width: auto !important;
}

.wp-caption img {
  width: 100%;
  height: auto;
  display: block;
}
.wp-caption-text {
  font-size: 0.9rem !important;          /* 少し小さめに */
  color: #666;                /* グレーで控えめに */
  margin-top: 0.5em;          /* 上の画像との余白 */
  text-align: center !important;         /* 中央揃え */
  line-height: 1.4;
  font-style: italic;         /* 斜体でキャプション感UP */
}
/*----------------------------------------------
	.l_contents
---------------------------------------------*/


/*----------------------------------------------
	.l_study_type
---------------------------------------------*/
.l_study_type {
	padding: 30px;
	border: 6px solid #F1F1F1;
}
@media screen and (max-width: 640px) {
	.l_study_type {
		padding: 10px;
	}
}

.Htext {
    font-size: 10px;
    color: #FFF;
    background: #F9BE00;
    padding: 0 0 0 8px;
    padding-left: 30px;
}

/*----------------------------------------------
	.l_header
---------------------------------------------*/
.l_header {
	background: #003D22;
	padding-left: 30px;
	box-sizing: content-box;
}
@media screen and (max-width: 640px) {
	.l_header {
		padding: 0 10px;
	}
.Htext {
		padding: 0 10px;
}
}

/*----------------------------------------------
	.l_nav
---------------------------------------------*/
.l_nav {
	float: right;
	xwidth: 960px;
}
.l_nav a, .l_nav_footer a {
	color: #FFFFFF;
}
@media only screen and (max-width: 1270px) and (min-width: 641px) {
	.l_nav {
		width: 70%;
    		text-align: center;
	}
}
@media screen and (max-width: 959px) {
	#pmenu, #smenu { display: none; }
	.l_nav {
		float: none;
		width: 100%;
	}
	#smenu {
		position: absolute;
		width: 100%;
        z-index: 100;
		right: 0;
		left: 0;
		top: 103px;
		background: rgba(1, 47, 27, 0.95);
	}
}

/*----------------------------------------------
	.l_main_image
---------------------------------------------*/
.l_main_image {
	height: 380px;
	background: url(../../images/img_main_top.png) no-repeat center center;
	background-size: cover;
    margin: 10px;
}
@media screen and (max-width: 640px) {
	.l_main_image {
		height: 170px;
		background: url(../../images/img_main_top.png) no-repeat center center;
		background-size: cover;
		margin: 0;
	}
}

/* .inner */
.inner .l_main_image {
	display: table;
	width: 98.6%;
	height: 200px;
	background: url(../images/bg_image_inner.png) no-repeat center center;
	background-size: cover;
	margin-bottom: 0;
}
.inner#school .l_main_image { background: url(../images/bg_image_inner_school.png) no-repeat center center; }
.inner#course .l_main_image { background: url(../images/bg_image_inner_course.png) no-repeat center center; }
.inner#facilities .l_main_image { background: url(../images/bg_image_inner_facilities.png) no-repeat center center; }
.inner#cebu .l_main_image { background: url(../images/bg_image_inner_cebu.png) no-repeat center center; }
.inner#study_abroad .l_main_image { background: url(../images/bg_image_inner_study_abroad.png) no-repeat center center; }
.inner#questions .l_main_image { background: url(../images/bg_image_inner_questions.png) no-repeat center center; }
.inner#contact_us .l_main_image { background: url(../images/bg_image_inner_contact_us.png) no-repeat center center; }
.inner#application .l_main_image { background: url(../images/bg_image_inner_application.png) no-repeat center center; }
.inner .l_main_image h1 {
    font-size: 3.0rem;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.inner .l_main_image h1 span {
    background-color: rgba(255,255,255,0.6);
    padding: 5px 10px;
    color: #003d22;
}
.inner .l_main_image h2 {
    font-size: 2.2rem;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.inner .l_main_image h2 span {
    background-color: rgba(255,255,255,0.6);
    padding: 5px 10px;
    color: #003d22;
}
@media screen and (max-width: 640px) {
	.inner .l_main_image {
		width: 100%;
		xheight: inherit;
		padding: 10px;
	}
}

/*----------------------------------------------
	.l_submenu
---------------------------------------------*/
.l_submenu {
	text-align: center;
	border-bottom: 1px solid #EAEAEA;
}

/*----------------------------------------------
	.l_footer
---------------------------------------------*/
.l_footer {
    background: #0C462D;
    text-align: center;
    padding: 40px 0 0;
}

/*----------------------------------------------
	.l_nav_footer
---------------------------------------------*/
.l_nav_footer {
	background: #003D22;
}
@media screen and (max-width: 640px) {
	.l_nav_footer .l_wrap {
		width: 100%;
		margin: 0;
	}
}

/*----------------------------------------------
	.l_nav_footer
---------------------------------------------*/
.l_copyright {
	font-size: 1rem;
    color: #FFFFFF;
    text-align: center;
    border-top: 1px solid #FFFFFF;
    line-height: 1;
    padding: 10px 0;
}


/*ここから下は触らない　Do not touch from here*/
/*----------------------------------------------
	.l_column_warp
---------------------------------------------*/
/*
コラムの使い方の説明
How to use column

コラムはサイト上の構成の大枠としては使用せず、コンテンツエリア内で使用してください。
Do not use the column as the frame but, use it inside the contents area.

HTMLは以下の形が基本形です。
The following will be the base for HTML.
----------------------------------------------
<div class="l_column_wrap">
	<div class="l_column has_column_pc00unit has_column_sp00unit">
		コンテンツが入る
	</div>
</div>
----------------------------------------------


00部分はコンテンツ幅を12分割した値が入ります。
In the "00" part will have the values 1 to 12.
The values are from dividing the content width into 12.

以下のclassをl_columnに追加する事で、コラムの分割数をPC/SPそれぞれに設定する事ができます。
By adding the following class into "l_column", you can set the column's number of partitions on the PC and SP.

下記はPCの場合の例です。
Example for PC
has_column_pc1unit : 12分割 12 partition
has_column_pc2unit : 6分割
has_column_pc3unit : 4分割
has_column_pc4unit : 3分割
has_column_pc5unit : 5/12分割
has_column_pc6unit : 2分割
has_column_pc7unit : 7/12分割
has_column_pc8unit : 2/3分割
has_column_pc9unit : 3/4分割
has_column_pc10unit : 5/6分割
has_column_pc11unit : 11/12分割
has_column_pc12unit : 1分割

以下のclassをl_columnに追加する事で、コラムの左右余白を設定する事ができます。
By adding the following class into "l_column", you can set the padding.

has_column_padding10 : 左右5px
has_column_padding20 : 左右10px
has_column_padding30 : 左右15px
has_column_padding40 : 左右20px
has_column_padding50 : 左右25px

以下のclassをl_column_wrapに追加する事で、両端の余白を調整する事ができます。
By adding the following class into "l_column_wrap", you can adjust the padding.

has_column_wrap_fill10 : 左右5pxづつ埋める
has_column_wrap_fill20 : 左右10pxづつ埋める
has_column_wrap_fill30 : 左右15pxづつ埋める
has_column_wrap_fill40 : 左右20pxづつ埋める
has_column_wrap_fill50 : 左右25pxづつ埋める
*/

/* .l_column unit */
.l_column {
	box-sizing: border-box; /* border-widthとpaddingをwidthに含める　Include border-width and padding into width. */
	float: left;
}
.l_column img { width: 100%; vertical-align: bottom;}
.l_column.has_column_pc1unit { width: 8.33%; }
.l_column.has_column_pc2unit { width: 16.66%; }
.l_column.has_column_pc3unit { width: 25%; }
.l_column.has_column_pc4unit { width: 33.32%; }
.l_column.has_column_pc5unit { width: 41.65%; }
.l_column.has_column_pc6unit { width: 50%; }
.l_column.has_column_pc7unit { width: 58.33%; }
.l_column.has_column_pc8unit { width: 66.66%; }
.l_column.has_column_pc9unit { width: 74.99%; }
.l_column.has_column_pc10unit { width: 83.32%; }
.l_column.has_column_pc11unit { width: 91.65%; }
.l_column.has_column_pc12unit { width: 100%; }

@media screen and (max-width: 640px) {
	.l_column.has_column_sp1unit { width: 8.33%; }
	.l_column.has_column_sp2unit { width: 16.66%; }
	.l_column.has_column_sp3unit { width: 25%; }
	.l_column.has_column_sp4unit { width: 33.32%; }
	.l_column.has_column_sp5unit { width: 41.65%; }
	.l_column.has_column_sp6unit { width: 50%; }
	.l_column.has_column_sp7unit { width: 58.33%; }
	.l_column.has_column_sp8unit { width: 66.66%; }
	.l_column.has_column_sp9unit { width: 74.99%; }
	.l_column.has_column_sp10unit { width: 83.32%; }
	.l_column.has_column_sp11unit { width: 91.65%; }
	.l_column.has_column_sp12unit { width: 100%; }
}

/* column padding */
.l_column.has_column_padding10 { padding: 0 5px; }
.l_column.has_column_padding20 { padding: 0 10px; }
.l_column.has_column_padding30 { padding: 0 15px; }
.l_column.has_column_padding40 { padding: 0 20px; }
.l_column.has_column_padding50 { padding: 0 25px; }

/* column fill */
.l_column_wrap.has_column_wrap_fill10 { margin: 0 -5px; }
.l_column_wrap.has_column_wrap_fill20 { margin-left: -10px; margin-right: -10px; }
.l_column_wrap.has_column_wrap_fill30 { margin: 0 -15px; }
.l_column_wrap.has_column_wrap_fill40 { margin: 0 -20px; }
.l_column_wrap.has_column_wrap_fill50 { margin: 0 -25px; }

/* ===============================
   共通：表示制御アニメーション
=============================== */
.fixed-footer-btns a {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all 0.3s ease;
}

.fixed-footer-btns.show a {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.fixed-footer-btns a:hover {
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* ===============================
   PC：右下に縦並び
=============================== */
.btns-pc {
  position: fixed;
  bottom: 32px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

.btns-pc a {
  display: block;
  text-decoration: none;
  padding: 10px 18px;
  color: #fff;
  border-radius: 6px;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
}

/* 個別カラー（PC） */
.btns-pc a.btn-top {
  background: #003D22;
}
.btns-pc a.btn-consult {
  background: #ED7700;
}
.btns-pc a.btn-apply {
  background: #E53935;
}

/* ===============================
   SP：下部横並びフッター固定
=============================== */
.btns-sp {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: none;
  justify-content: space-around;
  background: #fff;
  padding: 10px 0;
  z-index: 9999;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.btns-sp a {
  width: 32%;
  padding: 6px 4px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  text-align: center;
}

/* アイコン調整 */
.btns-sp a i {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
}

/* 個別カラー（SP） */
.btns-sp a.btn-top {
  background: #003D22;
}
.btns-sp a.btn-consult {
  background: #ED7700;
}
.btns-sp a.btn-apply {
  background: #E53935;
}

/* ===============================
   レスポンシブ表示切替
=============================== */
@media screen and (max-width: 768px) {
  .btns-pc { display: none; }
  .btns-sp { display: flex; }
}
@media screen and (min-width: 769px) {
  .btns-pc { display: flex; }
  .btns-sp { display: none; }
}