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

/*----------------------------------------------
  .l_bg
---------------------------------------------*/
.l_bg {
  background-image: url(../images/page_bg.png);
  /*background-repeat: repeat;*/
  /*background-size: 100% auto;*/
  background-position: top center;
  background-color: #1C50A8;
  background-attachment: fixed;
}
@media only screen and (min-width: 1920px) {
  .l_bg {
    background-size: 100% auto;
  }
}
/*----------------------------------------------
  .l_container
---------------------------------------------*/
.l_container {
  padding-bottom: 65px;
}

/*----------------------------------------------
  .l_header
---------------------------------------------*/
.l_header_area {
  height: 114px;
}

.l_header {
  position: relative;
}

.l_header_title {
  position: absolute;
  top: 30px;
  width: 1000px;
}

.l_header_detail {
  top: 20px;
  right: 0;
}

/*----------------------------------------------
  .l_side_contents
---------------------------------------------*/
.l_side_contents {
  width: 240px;
  float: left;
}

/*----------------------------------------------
  .l_nav_area
---------------------------------------------*/

/*----------------------------------------------
  .l_main_contents
---------------------------------------------*/
.l_main_contents {
  width: 730px;
  position: relative;
  float: right;
}

/*----------------------------------------------
  .l_poster_area
---------------------------------------------*/
.l_poster_area {
  height: 1002px;
  position: relative;
  background-image: url(../images/poster_bg.jpg);
  background-size: contain;
}

/*----------------------------------------------
  .l_poster_ttl
---------------------------------------------*/
.l_poster_header {
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  margin: auto;
  width: 690px;
}

/*----------------------------------------------
  .l_poster_details
---------------------------------------------*/
.l_poster_detail {
  position: absolute;
  top: 724px;
  left: 0;
  right: 0;
  margin: auto;
  width: 648px;
}

/*----------------------------------------------
  .l_poster_date
---------------------------------------------*/
.l_poster_date {
  position: absolute;
  top: 672px;
  left: 0;
  right: 0;
  margin: auto;
  width: 400px;
}

.l_poster_date2 {
  position: absolute;
  top: 865px;
  left: 0;
  right: 0;
  margin: auto;
  width: 638px;
}

/*----------------------------------------------
  .l_news_area
---------------------------------------------*/
.l_news_area {
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(226, 190, 175, .16);
}

/*----------------------------------------------
  .l_news_header
  ---------------------------------------------*/
.l_news_header {
  font-size: 2.4rem;
  color: #fff;
  position: relative;
  background: linear-gradient(to right, #0073A2, #FFEEEE);
  padding: 10px 20px;
  font-weight: bold;
}

/*----------------------------------------------
  .l_content
---------------------------------------------*/
.l_content {
  background: #fff;
  padding: 25px;
  padding-bottom: 40px;
  min-height: 600px;
}

/*----------------------------------------------
  .l_link_content
---------------------------------------------*/
.l_link_content p {
  border-bottom: 2px dotted #385173;
  padding: 20px 0px;
}

/*----------------------------------------------
  .l_footer_area
---------------------------------------------*/
.l_footer_area {
  position: relative;
  background: #fff;
  color: #333;
  padding: 30px 0;
}

/*----------------------------------------------
  .l_contact_area
---------------------------------------------*/
.l_footer_area .l_contact_area {
  padding: 0 30px;
}

/*----------------------------------------------
  .l_copyright
---------------------------------------------*/
.l_copyright {
  padding: 10px;
  font-size: 1.2rem;
  background: #0073A2;
  color: #fff;
}

/*----------------------------------------------
  .l_pagetop
---------------------------------------------*/
.l_pagetop {
  position: fixed;
  right: 25px;
  bottom: 74px;
  z-index: 99;
}

.l_pagetop a {
  line-height: 0;
  display: block;
}

.l_pagetop a img {
  width: 80px;
  height: 82px;
}

.l_pagetop a img:hover {
  opacity: 0.9;
}

/*----------------------------------------------
  .l_double
---------------------------------------------*/
.l_double>div {
  width: 49%;
  display: inline-block;
}

.l_double:nth-child(1) {
  margin-left: 0;
}

.l_double:nth-child(2) {
  margin-right: 0;
}

/*----------------------------------------------
  .l_double02
---------------------------------------------*/
.l_double02 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.l_double02>* {
  width: 49% !important;
}

/*----------------------------------------------
  .l_double_table
---------------------------------------------*/
.l_double_table {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.l_double_table .c_table_type01 th {
  width: 15%;
  text-align: center;
}

.l_double_table .c_table_type01:first-child td {
  border-right: none;
}

.l_bnr_area {
  text-align: center;
}

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