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

/*----------------------------------------------
	.l_bg
---------------------------------------------*/
.l_bg {
	background: #fff;
}

/*----------------------------------------------
	.l_block_type
---------------------------------------------*/
.l_block_type01 {
  background: #f7f7f7;
  width: 100%;
  padding-top: 70px;
  padding-bottom: 70px;
}
.l_block_type01.is_ttl_over {
  position: relative;
  padding-top: 1px;
}
.l_block_type01.is_ttl_over.is_index2 {
  position: relative;
  padding-top: 100px;
}
.l_block_type01.is_ttl_over .fadeUpTrigger {
  position: absolute;
  top: -50px;
}
.l_block_type02 {
  background: #fff;
  width: 100%;
  padding-top: 70px;
  padding-bottom: 70px;
}
.l_block_type03 {
  background: #108968;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 20px;
}

.l_block_flex {
  display: flex;
  justify-content: space-between;
}
.l_block_flex_item {
  width: 47%;
}

.l_space01 {
    height: 45px;
  }

/*----------------------------------------------
	.l_header
---------------------------------------------*/
.l_header_area {
	background: #002b27;
	height: 70px;
  position: absolute;
  width: 100%;
  z-index: 90;
}
.l_header {
	position: relative;
  display: flex;
  justify-content: space-between;
}
.l_header h1 { 
  color: #fff;
  font-size: 1.8rem;
  font-weight: normal;
}
.l_header img {
	position: absolute;
}
.l_header_title {
  top: 20px;
}
.l_header_detail {
	top: 20px;
	right: 0;
}

.l_header_left {
  padding: 22px 20px 20px 20px;
}
.l_header_right {
  display: flex;
}

/*----------------------------------------------
	.l_header02
---------------------------------------------*/
.l_header02{
	background: #fff;
	height: 90px;
  position: relative;
  width: 100%;
}

.l_header02 div { 
  text-align: center;
}
.l_header02 div img {
	position: absolute;
  
  z-index: 5;
  width: 460px;
  top: -190px;
  left: 50%;
  transform: translateX(-50%);
}


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

/*----------------------------------------------
  .l_footer_area
---------------------------------------------*/
.l_footer_area {
	position: relative;
	background: #002b27;
	color: #fff;
	padding: 30px 0 0 0;
  overflow:hidden;
}


/*----------------------------------------------
  .l_copyright
---------------------------------------------*/
.l_copyright {
	padding-top: 10px;
	font-size: 1.1rem;
  color: #fff;
	background: #002b27;
}
.l_sns_box {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #fff;
  padding: 15px 0;
  align-items: center
}
.l_sns_box a {
  margin-right: 18px;
}
.l_sns_box a:hover {
  opacity: 0.6;
}

/*----------------------------------------------
  .l_double_footer
---------------------------------------------*/
.l_double_footer {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.l_double_footer .l_column01 {
  width: 20%;
}
.l_double_footer .l_column02 {
  width: 58%;
}
.l_double_footer .l_column03 {
  width: 15%;
}


/*----------------------------------------------
  .l_mv
---------------------------------------------*/
.l_mv{
  /*height: 100vh;*/
  display: flex;
  /*align-items: center;*/
  justify-content: center;
  height: auto;
  margin-bottom: 50px;
  background: #f5f4f3;
}


.inner{
  width: 100%;
  /*width: calc(100% - 100px);
  max-width: 600px;*/
}
.slide{
  padding: 100px 0 20px 0;
}

/* arrow */
.slick-arrow{
  z-index: 2;

}
.slick-arrow::before{
  content: '';
}
.slick-prev{
  left: 30px !important;
  /*top:35% !important;*/
}
.slick-next{
  right: 60px !important;
  /*top:35% !important;*/
}
/* dots */
.slick-dots{
  bottom: -25px;
}
.slick-dots li,
.slick-dots li button,
.slick-dots li button::before{
  width: 12px;
  height: 12px;
}
.slick-dots li{
  margin: 0 7px;
}
.slick-dots li button{
  background-color: #fff;
  opacity: .8;
  border-radius: 100%;
}
.slick-dots li.slick-active button{
  opacity: .4;
}
.slick-dots li button::before{
  content: '';
}



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


/*ns03*/
.ns03 .slide {
  max-width: 100vw;
}
.ns03 .slider {
  max-height: 700px;
  overflow: hidden;
}
.ns03 .slick-dots {
  bottom: 15px !important;
}

.ns03 .is_full_mv img {
  margin: 0 auto;
  width: 100% !important;
  object-fit: cover;
}
.ns03 .slide.is_full_mv {
  padding: 0 !important;
}
.ns03 .slick-dotted.slick-slider {
  margin-bottom: 0 !important;
}
.ns03 .slick-dots li button:before {
  font-size: 10px !important;
}

/*mvの表示*/
@media only screen and (min-width: 1500px) {
  .ns03 .is_full_mv .is_lg { display: block !important; }
  .ns03 .is_full_mv .is_md, .ns03 .is_full_mv .is_sm, .ns03 .is_full_mv .is_xs, .ns03 .is_full_mv .is_s { display: none !important; }
}
.ns03 .is_full_mv .is_lg, .ns03 .is_full_mv .is_sm, .ns03 .is_full_mv .is_xs, .ns03 .is_full_mv .is_s { display: none; }
.ns03 .is_full_mv .is_md { display: block; }

@media only screen and (max-width: 1140px) {
  .ns03 .is_full_mv .is_lg, .ns03 .is_full_mv .is_md, .ns03 .is_full_mv .is_xs, .ns03 .is_full_mv .is_s { display: none !important; }
  .ns03 .is_full_mv .is_sm { display: block !important; }
}
@media only screen and (max-width:600px) {
  .ns03 .is_full_mv .is_lg, .ns03 .is_full_mv .is_md, .ns03 .is_full_mv .is_sm, .ns03 .is_full_mv .is_xs { display: none !important; }
  .ns03 .is_full_mv .is_s { display: block !important; }
}
@media only screen and (max-width:450px) {
  .ns03 .is_full_mv .is_lg, .ns03 .is_full_mv .is_md, .ns03 .is_full_mv .is_sm, .ns03 .is_full_mv .is_s { display: none !important; }
  .ns03 .is_full_mv .is_xs { display: block !important; }
}

/*.ns03 .is_full_mv .is_xs {
  padding: 20px 20px 46px 20px;
}
.ns03 .is_full_mv .is_xs img { 
  text-align: center;
}*/