@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
	.l_wrap
---------------------------------------------*/
.l_wrap {
	width: 1000px;
	margin: 0 auto;
}

/*.l_bg {
	background: url(../images/page_bg.jpg) center bottom no-repeat, #053b90;
	background-size: cover;
	background-attachment: fixed;
}

#top .l_bg {
	background-size: auto;
	background-attachment: inherit;
    background-position: center calc(100% - -25px);
}*/

/* .en .l_bg {
	background: url(../images/en_page_bg.jpg) left bottom -200px no-repeat, #053b90;
	background-size: cover;
	background-attachment: fixed;
} */

/*----------------------------------------------
	.l_fade_bg
---------------------------------------------*/
.l_fade_bg {
	background: -moz-linear-gradient(to bottom, rgba(5,59,144,1) 0px,rgba(5,59,144,1) 200px,rgba(5,59,144,0.8) 240px,rgba(5,59,144,0.6) 280px,rgba(5,59,144,0.4) 359px,rgba(5,59,144,0) 380px,rgba(5,59,144,0) 50%);
	background: -webkit-linear-gradient(to bottom, rgba(5,59,144,1) 0px,rgba(5,59,144,1) 200px,rgba(5,59,144,0.8) 240px,rgba(5,59,144,0.6) 280px,rgba(5,59,144,0.4) 359px,rgba(5,59,144,0) 380px,rgba(5,59,144,0) 50%);
	background: linear-gradient(to bottom, rgba(5,59,144,1) 0px,rgba(5,59,144,1) 200px,rgba(5,59,144,0.8) 240px,rgba(5,59,144,0.6) 280px,rgba(5,59,144,0.4) 359px,rgba(5,59,144,0) 380px,rgba(5,59,144,0) 50%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#053b90', endColorstr='#00053b90',GradientType=0 );
}

.jp .l_fade_bg {
	background: -moz-linear-gradient(to bottom, rgba(5,59,144,1) 0,rgba(5,59,144,1) 270px,rgba(5,59,144,0.8) 320px,rgba(5,59,144,0.6) 350px,rgba(5,59,144,0.4) 390px,rgba(5,59,144,0) 450px,rgba(5,59,144,0) 50%);
	background: -webkit-linear-gradient(to bottom, rgba(5,59,144,1) 0,rgba(5,59,144,1) 270px,rgba(5,59,144,0.8) 320px,rgba(5,59,144,0.6) 350px,rgba(5,59,144,0.4) 390px,rgba(5,59,144,0) 450px,rgba(5,59,144,0) 50%);
	background: linear-gradient(to bottom, rgba(5,59,144,1) 0,rgba(5,59,144,1) 270px,rgba(5,59,144,0.8) 320px,rgba(5,59,144,0.6) 350px,rgba(5,59,144,0.4) 390px,rgba(5,59,144,0) 450px,rgba(5,59,144,0) 50%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#053b90', endColorstr='#00053b90',GradientType=0 );
}

/*----------------------------------------------
	.l_logo_sp
---------------------------------------------*/
.l_logo_sp { display: none; }


/*----------------------------------------------
	.l_container
---------------------------------------------*/
.l_container {
	padding-top: 30px;
	padding-bottom: 20px;
	position: relative;
	/*min-height: 1080px;*/
}
.inner .l_container {
	padding-bottom: 160px;
}
.en .l_container {
	min-height: 870px;
}

/*----------------------------------------------
	.l_language
---------------------------------------------*/
.l_language {
	display: inline-block;
	margin-left: 10px;
}

.l_language > a {
	background: #DDD;
	width: 90px;
	color: #053b90;
	display: inline-block;
	vertical-align: middle;
	padding: 4px 0;
	border-radius: 20px;
	text-align: center;
	text-decoration: none;
}

.l_language > a.c_lang_active,
.l_language > a:hover {
	background: #053b90;
	color: #FFF;
}

.l_language > a:first-child {
	margin-right: 5px;
}

/*----------------------------------------------
	.l_top_header_area
---------------------------------------------*/
.l_top_header_area {
	background: #FFF;
	height: 50px;
}

.l_top_header {
	padding-top: 6px;
}
.l_top_header > div,
.l_top_header > a {
	display: inline-block;
	text-decoration: none;
}

.l_social_icons {
	float: right;
	padding-top: 4px;
}
.l_social_icons > a {
	margin: 0 3px;
}

/*----------------------------------------------
	.l_header_area
---------------------------------------------*/
.l_header_area {
	position: relative;
	height: 190px;
}

.l_header_area h1,
.l_header_title,
.l_header_detail {
	display: inline-block;
	vertical-align: top;
}

.l_header_title {
	margin-top: 41px;
	border-right: 1px solid rgba(255, 255, 255, 0.3);
	padding-right: 29px;
	margin-right: 25px;
}

.l_header_detail {
	margin-top: 55px;
}

.l_header_logo {
	position: absolute;
	bottom: 10px;
	right: 0;
}

.jp .l_header_area {
	position: relative;
	height: 250px;
}
.jp .l_header_title {
	margin-top: 40px;
	margin-right: 19px;
}
.jp .l_header_detail {
	margin-top: 63px;
}
.jp .l_header_logo {
	right: 20px;
}

/*----------------------------------------------
	.l_side_contents
---------------------------------------------*/
.l_side_contents {
	width: 270px;
	float: left;
	-webkit-box-shadow: 0px 0px 10px 2px rgba(4,0,0,0.3);
	-moz-box-shadow: 0px 0px 10px 2px rgba(4,0,0,0.3);
	box-shadow: 0px 0px 10px 2px rgba(4,0,0,0.3);
}

/*----------------------------------------------
	.l_banner
---------------------------------------------*/
.l_banner {
	width: 270px;
	height: 210px;
	border: 1px solid #e4e4e4;
	background: url(../images/l_banner_bg.png) left -21px bottom -57px no-repeat;
}

/*----------------------------------------------
	.l_main_contents
---------------------------------------------*/
.l_main_contents {
	width: 700px;
	position: relative;
	float: right;
	min-height: 220px;
	-webkit-box-shadow: 0px 0px 10px 2px rgba(4,0,0,0.3);
	-moz-box-shadow: 0px 0px 10px 2px rgba(4,0,0,0.3);
	box-shadow: 0px 0px 10px 2px rgba(4,0,0,0.3);
}

.inner .l_main_contents {
	min-height: 600px;
}
/*----------------------------------------------
	.l_poster_area
---------------------------------------------*/
.l_poster_area{
	position: relative;
	border: 2px solid #5094d0;
  padding: 30px;
}

/*----------------------------------------------
	.l_poster_ttl
---------------------------------------------*/
/*.l_poster_header {
	position: absolute;
	top: 30px;
	left: 29px;
}*/
.l_poster_header {
  margin-bottom: 30px;
}

/*----------------------------------------------
	.l_poster_date
---------------------------------------------*/
/*.l_poster_date {
	position: absolute;
	top: 133px;
	left: 30px;
}
.jp .l_poster_date {
	top: 180px;
}*/
.l_poster_date {
  margin-bottom: 40px;
}

/*----------------------------------------------
	.l_poster_details
---------------------------------------------*/
/*.l_poster_detail {
	position: absolute;
	bottom: 73px;
	left: 30px;
}
.l_poster_detail2 {
	position: absolute;
	bottom: 30px;
	left: 313px;
}*/
.l_poster_detail {
  display: flex;
  flex-wrap: wrap;
}
.l_poster_detail_l {
  margin-right: 55px;
}

/*----------------------------------------------
	.l_poster_logo
---------------------------------------------*/
.l_poster_logo {
	position: absolute;
	top: 30px;
	right: 30px;
}

/*----------------------------------------------
	.l_news_area
---------------------------------------------*/
.l_news_area {
	overflow: hidden;
	background: rgba(255, 255, 255, 0.9);
	padding: 27px;
}

/*----------------------------------------------
  .l_news_header
	---------------------------------------------*/
.l_news_header {
	height: 40px;
	font-size: 2rem;
	color: #053b90;
	position: relative;
	font-weight: bold;
}

/*----------------------------------------------
  .l_content
---------------------------------------------*/
.l_content {
	background: rgba(255, 255, 255, 0.9);
	min-height: 600px;
	padding: 30px;
}

/*----------------------------------------------
  .l_link_content
---------------------------------------------*/
.l_link_content p {
	padding: 10px 0px;
}
.l_link_content p:not(:last-child) {
	border-bottom: 1px solid #CCC;
}
/*----------------------------------------------
  .l_banner_area
---------------------------------------------*/
.l_banner_list {
	font-size: 0;
}
.l_banner_large {
	margin: 0 -20px;
}
.l_banner_small {
	margin: 0 -4px;
}
.l_banner_list li {
	display: inline-block;
	list-style: none;
	/*float: left;*/
}
.l_banner_large li {
	width: 220px;
	margin: 5px 20px;
}
.l_banner_small li {
	width: 160px;
	margin: 5px 4px;
}
.l_banner_list li img {
	max-width: 100%;
}
.l_banner_list li a {
	transition: all .2s ease;
}
.l_banner_list li a:hover {
	opacity: .7;
}
/*----------------------------------------------
  .l_footer_area
---------------------------------------------*/
.l_footer_area {
	position: relative;

}

/*----------------------------------------------
  .l_contact_area
---------------------------------------------*/
.l_contact_area {
	padding-bottom: 0px;
	background: rgba(5, 59, 144, 0.8);
}
/*----------------------------------------------
  .l_contact
---------------------------------------------*/
.l_contact {
	padding: 20px 0;
	color: #FFF;
}
.l_contact > div{
	display: inline-block;
	vertical-align: top;
}

.l_contact > div:first-child {
	width: 48%;
}
.l_contact > div:last-child {
	width: 48%;
	float: right;
}

.l_contact div a {
	color: #FFF;
	text-decoration: underline;
}

.l_contact div a:hover {
	color: #FFF!important;
}

/*----------------------------------------------
  .l_copyright
---------------------------------------------*/
.l_copyright {
	padding: 10px;
	font-size: 13px;
	color: #fff;
	background: #000;
}

/*----------------------------------------------
  .l_pagetop_area
---------------------------------------------*/
.l_pagetop_area { position: relative; }
/*----------------------------------------------
  .l_pagetop
---------------------------------------------*/
.l_pagetop {
  position: fixed;
  right: 30px;
  bottom: 50px;
	z-index: 99;
}
.l_pagetop a {
	line-height: 0;
	display: block;
	background-color: #000;
	border-radius: 50% 50% 0 0;
	width: 50px;
	height: 50px;
	text-align: center;
	padding: 15px 0;
	box-sizing: border-box;
}
.l_pagetop img {
	width: 8px;
	height: auto;
	margin-left: -2px;
}
/*----------------------------------------------
  .l_double
---------------------------------------------*/
.l_double {
  width: 47%;
  display: inline-block;
  margin: 0 2%;
}
.l_double:nth-child(1) { margin-left: 0; }
.l_double:nth-child(2) { margin-right: 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.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; }