@charset "utf-8";
/*----------------------------------------------
	大くくりコメントアウト large part
---------------------------------------------*/

/*  中くくりコメントアウト middle part
------------------------------------- */

/* 小くくりコメントアウト small part */

/*----------------------------------------------
	#loading
---------------------------------------------*/
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s .5s;
  background-color: #2c9dc3;
	opacity: 1;
	position: fixed;
  top: 0;
  left: 0;
	overflow: hidden;
  z-index: 998;
}
#loading img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100px;
	margin: auto;
}
.loaded {
	opacity: 0 !important;
	z-index: -1 !important;
}
@media screen and (max-width: 960px) {
	#loader {
		width: 250px;
		height: 250px;
		top: 80px;
	}
}

/*----------------------------------------------
	.l_container
---------------------------------------------*/
.l_container {
  overflow-x: hidden;
}

/*----------------------------------------------
	.l_header_area
---------------------------------------------*/

/*----------------------------------------------
	.l_nav_area
---------------------------------------------*/
.l_nav_area {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	z-index: 99;
	background-color: #fff;
	transition: all .3s ease;
}
.l_nav_area.view {
	box-shadow: 5px 0 10px 0 rgba(0, 0, 0, .1);
}
.l_nav_area.view ul {
	padding: 20px;
}
.l_nav_area ul {
	display: flex;
	align-items: center;
	padding: 40px;
	transition: all .3s ease;
}
.l_nav_area li {
	margin-left: 40px;
}
.l_nav_area a {
	color: #535a60;
	text-decoration: none;
	position: relative;
	transition: all .3s;
}
.l_nav_area a:hover {
	opacity: .5;
}
.l_nav_area a::before {
	content: '';
	width: 10px;
	height: 10px;
	border: 1px solid #535a60;
	border-radius: 50px;
	position: absolute;
	top: -100%;
	right: -100%;
	bottom: -100%;
	left: -100%;
	margin: auto;
	opacity: 0;
}
.l_nav_area a:hover::before {
	animation: .5s ease bubble;
}
.l_nav_area .l_nav_contact {
	display: inline-block;
	padding: 8px 13px;
	border-radius: 50px;
	background-color: #2c9dc3;
	color: #fff;
}
@keyframes bubble {
	0% {
		width: 10px;
		height: 10px;
		opacity: 0;
	}
	30% {
		opacity: .6;
	}
	100% {
		width: 80px;
		height: 80px;
		opacity: 0;
	}
}
@media screen and (max-width: 960px) {
	.l_nav_area ul {
		display: none;
		height: 240px;
		position: fixed;
		top: calc(50% - 120px);
		right: 0;
		left: 0;
		margin: auto;
		z-index: 998;
		transition: all .2s ease;
	}
	.l_nav_area::before {
		content: '';
		display: none;
		width: 100%;
		height: 100vh;
		z-index: 99;
		background-color: rgba(83, 90, 96, .8);
		position: absolute;
		top: 0;
		left: 0;
		transition: all .2s ease;
	}
	.l_nav_area.open ul {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.l_nav_area.open::before {
		display: block;
	}
	.l_nav_area li {
		margin-left: 0;
		margin: 10px 0;
	}
	.l_nav_area a {
		display: block;
		color: #fff;
		text-align: center;
	}
}
/*  .l_h_logo
------------------------------------- */
.l_h_logo {
	vertical-align: middle;
	margin-left: 40px;
	transition: all .3s ease;
}
.l_h_logo img {
	width: 240px;
	transition: all .3s ease;
}
.l_nav_area.view .l_h_logo {
	margin-left: 20px;
}
.l_nav_area.view .l_h_logo img {
	width: 190px;
}
@media screen and (max-width: 960px) {
	.l_h_logo {
		margin: 5px 0 5px 10px;
		font-size: 2rem;
	}
	.l_h_logo svg {
		width: 40px;
		height: 40px;
	}
}
/*  .l_menu
------------------------------------- */
.l_menu,
.l_menu_full {
	display: none;
}
@media screen and (max-width: 960px) {
	.l_menu {
		display: block;
		width: 30px;
		height: 2px;
		background-color: #2c9dc3;
		position: absolute;
		top: 0;
		right: 10px;
		bottom: 0;
		margin: auto;
		z-index: 999;
		transition: all .2s ease;
	}
	.l_menu::before,
	.l_menu::after {
		content: '';
		width: 30px;
		height: 2px;
		background-color: #2c9dc3;
		position: absolute;
		top: inherit;
		right: 0;
		bottom: inherit;
		margin: auto;
		transition: all .2s ease;
	}
	.l_menu::before {
		top: -10px;
	}
	.l_menu::after {
		bottom: -10px;
	}
	.open .l_menu {
		transform: rotate(45deg);
		background-color: #fff;
	}
	.open .l_menu::before {
		top: 0;
		bottom: 0;
		transform: rotate(-85deg);
		background-color: #fff;
	}
	.open .l_menu::after {
		content: none;
	}
	.l_menu_full {
		display: block;
	}
}

/*----------------------------------------------
  .l_footer_area
---------------------------------------------*/
.l_bg {
  background: url("../images/bg.png") top center;
  /*background-size: cover;*/
  background-repeat: repeat-y;
}

@media screen and (max-width: 960px) {
  .l_bg {
  background-size: contain;
  }
}


/*----------------------------------------------
  .l_footer_area
---------------------------------------------*/
.l_f_logo {
	text-align: center;
	margin-bottom: 60px;
}
.l_f_logo a {
	position: relative;
	transition: all .3s;
}
.l_f_logo a:hover {
	opacity: .3;
}
.l_f_logo a::before {
	content: '';
	width: 10px;
	height: 10px;
	border: 1px solid #535a60;
	border-radius: 50px;
	position: absolute;
	top: -100%;
	right: -100%;
	bottom: -100%;
	left: -100%;
	margin: auto;
	opacity: 0;
}
.l_f_logo a:hover::before {
	animation: .5s ease bubble;
}
@media screen and (max-width: 960px) {
	.l_f_logo {
		width: 500px;
		max-width: calc(100% - 80px);
		margin: 0 auto 60px;
	}
}

/*----------------------------------------------
  .l_copyright
---------------------------------------------*/
.l_copyright {
	padding: 10px 0;
	text-align: center;
	font-size: 1.2rem;
  /*background-image: -moz-linear-gradient( 0deg, rgb(0,162,216) 0%, rgb(62,183,153) 100%);
  background-image: -webkit-linear-gradient( 0deg, rgb(0,162,216) 0%, rgb(62,183,153) 100%);
  background-image: -ms-linear-gradient( 0deg, rgb(0,162,216) 0%, rgb(62,183,153) 100%);*/
  background: #3E3A39;
  color: #FFFFFF;
}

/*----------------------------------------------
  .l_pagetop
	---------------------------------------------*/
.l_pagetop {
	position: fixed;
	left: 40px;
	bottom: 80px;
	z-index: 98;
	transition: all .3s ease;
	opacity: 0;
}
.l_pagetop a::before {
	content: '';
	width: 10px;
	height: 10px;
	border: 1px solid #535a60;
	border-radius: 50px;
	position: absolute;
	top: -100%;
	right: -100%;
	bottom: -100%;
	left: -100%;
	margin: auto;
	opacity: 0;
}
.l_pagetop a:hover::before {
	animation: .5s ease bubble;
}
.l_pagetop.view {
	opacity: 1;
}
@media screen and (max-width: 960px) {
	.l_pagetop {
		left: 20px;
		bottom: 20px;
	}
}

/*ここから下は触らない　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 {
    margin-bottom: 10px;
  }
	.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-right: -5px;
  margin-left: -5px;
}
.l_column_wrap.has_column_wrap_fill20 {
  margin-right: -10px;
  margin-left: -10px;
}
.l_column_wrap.has_column_wrap_fill30 {
  margin-right: -15px;
  margin-left: -15px;
}
.l_column_wrap.has_column_wrap_fill40 {
  margin-right: -20px;
  margin-left: -20px;
}
.l_column_wrap.has_column_wrap_fill50 {
  margin-right: -25px;
  margin-left: -25px;
}