@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: 980px;
  margin: 0 auto;
  overflow: hidden;
}

.l_wrap02 {
  width: 900px;
  margin: 0 auto;
}

.l_inner_wrap {
  width: 590px;
  margin: 0 auto;
}

@media screen and (max-width: 640px) {
  .l_wrap {
    width: 94%;
    margin: 0 3%;
  }
  .l_wrap02 {
    width: 90%;
    margin: 0 5%;
  }
  .l_inner_wrap {
    width: 100%;
  }
}

/*ここから下は触らない　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.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: 0 -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;
}

/*----------------------------------------------
	.l_header
---------------------------------------------*/
.l_header {
  position: relative;
  padding: 23px 0 15px;
}
@media screen and (max-width: 640px) {
  .l_header {
    padding-top: 15px;
  }
}

/*----------------------------------------------
	.l_logo
---------------------------------------------*/
.l_logo {
  line-height: 1;
  float: left;
}

/*----------------------------------------------
	.l_btn_smenu
---------------------------------------------*/
.l_btn_smenu {
  display: none;
  width: 60px;
  height: 60px;
  text-align: center;
  background-color: #2bcae2;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto;
  line-height: 1;
  padding: 12px 0 20px;
}
.l_btn_smenu:after {
  content: "メニュー";
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #000000;
}
.l_btn_smenu span {
  display: block;
  width: 40px;
  height: 5px;
  background-color: #000000;
  margin: 0 auto 5px;
}
.l_btn_smenu:hover {
  cursor: pointer;
}
@media screen and (max-width: 640px) {
  .l_btn_smenu {
    display: block;
  }
}

/*----------------------------------------------
	..l_navbar
---------------------------------------------*/
.l_navbar {
}
.l_navbar ul {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.l_navbar a {
  font-size: 14px;
  font-size: 1.4rem;
  color: #000000;
  text-decoration: none;
  display: block;
  border-top: 2px solid #b6b6b6;
  padding: 10px 10px 0;
  line-height: 1;
}
.l_navbar a:hover,
.home .l_navbar li:first-child a,
#about .l_navbar li:nth-child(2) a,
.registrant .l_navbar li:nth-child(3) a,
#application .l_navbar li:nth-child(4) a {
  border-top: 6px solid #2bcae2;
  padding-top: 6px;
}
/* LINE btn */
.btn-line {
  margin-left: 16px;
}
.btn-line a,
.btn-line a:hover {
  padding: 0;
  border: none;
}
.btn-line img {
  width: 105px;
  height: auto;
}

@media screen and (max-width: 640px) {
  .l_navbar {
    display: none;
    width: 100%;
    position: absolute;
    left: 0;
    top: 72px;
    text-align: center;
    border-bottom: 4px solid #2bcae2;
    box-shadow: 0 4px 4px #ccc;
  }
  .l_navbar ul {
    display: block;
  }
  .l_navbar a {
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: bold;
    display: block;
    color: #000000;
    border-top: 1px solid #2bcae2;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px 12px !important;
  }
  .l_navbar a:hover,
  .home .l_navbar li:first-child a,
  #about .l_navbar li:nth-child(2) a,
  .registrant .l_navbar li:nth-child(3) a,
  #application .l_navbar li:nth-child(4) a {
    border: none;
    color: #fff;
    background-color: #2bcae2;
  }
  /* LINE btn */
  .btn-line {
    margin-left: 0;
  }
  .btn-line a {
    padding: 16px 12px !important;
  }
  .btn-line img {
    width: 120px;
  }
}

/*----------------------------------------------
	.l_navbar
---------------------------------------------*/
footer .nav-line img {
  width: 120px;
  height: auto;
}

/*----------------------------------------------
	.l_main_image
---------------------------------------------*/
.l_main_image {
  height: 548px;
  background: url(../images/img_top_mainimage.jpg) no-repeat top center;
  background-size: cover;
  line-height: 0;
  text-align: center;
  display: table;
  width: 100%;
}
.l_main_image p {
  display: table-cell;
  vertical-align: middle;
}
@media screen and (max-width: 640px) {
  .l_main_image {
    min-height: 355px;
    height: inherit;
    background: url(../images/img_mainimage_sp.jpg) no-repeat top center;
    background-size: cover;
  }
  .l_main_image img {
    width: 80%;
  }
}

/*----------------------------------------------
	.l_footer
---------------------------------------------*/
@media screen and (max-width: 640px) {
  .l_footer {
    padding-bottom: 72px;
  }
}
.l_footer .l_wrap {
  position: relative;
}

/*----------------------------------------------
	.l_footer_navbar
---------------------------------------------*/
.l_footer_navbar {
  background-color: #d9d9d9;
}
.l_footer_navbar ul {
  display: flex;
  justify-content: center;
}
.l_footer_navbar a {
  font-size: 14px;
  font-size: 1.4rem;
  color: #000000;
  text-decoration: none;
  display: block;
  line-height: 2;
  padding: 6px 24px;
}
@media screen and (max-width: 640px) {
  .l_footer_navbar ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .l_footer_navbar li {
    width: calc(100% / 2);
  }
  .l_footer_navbar a {
    padding: 6px 5px;
  }
  .l_footer_navbar a::before {
    content: url(/common/images/ico_balck_arrow_right.png);
    padding-right: 4px;
  }
}
@media screen and (max-width: 380px) {
  .l_footer_navbar li:nth-child(odd) {
    width: 39%;
  }
}

/*----------------------------------------------
	.l_footer_info
---------------------------------------------*/
.l_footer_info {
  padding: 20px 0;
}

/*----------------------------------------------
	.l_footer_right
---------------------------------------------*/
.l_footer_right {
  float: right;
}
@media screen and (max-width: 640px) {
  .l_footer_right {
    float: none;
    text-align: center;
  }
}

/*----------------------------------------------
	.l_footer_left
---------------------------------------------*/
.l_footer_left {
  float: left;
}
.l_footer_left .clearfix {
  margin-bottom: 8px;
}

/*----------------------------------------------
	.l_footer_logo
---------------------------------------------*/
.l_footer_logo {
  float: left;
  line-height: 0;
  padding: 0 18px 51px 0;
}
@media screen and (max-width: 640px) {
  .l_footer_logo {
    float: none;
    padding: 20px 0 16px;
  }
}

/*----------------------------------------------
	.l_footert_contact
---------------------------------------------*/
.l_footert_contact {
  float: right;
}
@media screen and (max-width: 640px) {
  .l_footert_contact {
    float: none;
  }
}

/*----------------------------------------------
	.l_sns_grp
---------------------------------------------*/
.l_sns_grp {
  display: flex;
  justify-content: space-between;
}
.l_sns_grp .c_twt {
  margin: 0 6px;
}

/*----------------------------------------------
	.l_top_page
---------------------------------------------*/
.l_top_page {
  position: absolute;
  bottom: 30px;
  right: 0;
  color: #ffffff;
  background-color: #2bcae2;
  width: 135px;
  height: 30px;
  text-align: center;
  line-height: 1;
  padding: 8px 0;
}
.l_top_page:hover {
  color: #2c2c2c;
}
@media screen and (max-width: 640px) {
  .l_top_page {
    display: block;
    position: initial;
    float: right;
    margin-right: -13px;
  }
}