@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_header
---------------------------------------------*/
.l_header-area {
	background: #FFF;
}

/*----------------------------------------------
	.l_navigation-area
---------------------------------------------*/
.l_navigation-area {
	border-bottom: 0;
	padding: 13px 0 5px;
	background: rgb(2,11,80);
	background: -moz-linear-gradient(left,  rgba(2,11,80,1) 0%, rgba(2,42,137,1) 50%, rgba(2,11,80,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(2,11,80,1) 0%,rgba(2,42,137,1) 50%,rgba(2,11,80,1) 100%);
	background: linear-gradient(to right,  rgba(2,11,80,1) 0%,rgba(2,42,137,1) 50%,rgba(2,11,80,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020b50', endColorstr='#020b50',GradientType=1 );
}

.l_navigation-inner {
	background: #FFF;
}

.l_navigation-wrap {
	position: relative;
	width: 960px;
	margin: 0 auto;
	padding: 22.5px 0;
}

.l_comp-logo {
	position: absolute;
}

/*----------------------------------------------
	.l_header-title
---------------------------------------------*/
#top .l_header-title {
	height: 600px;
	background: url(../images/bg_top-header.png) center center no-repeat;
	background-size: cover;
}

#customer .l_header-title {
	height: 300px;
	background: url(../images/customer-header.png) center center no-repeat;
	background-size: cover;
}

#contact .l_header-title {
	height: 300px;
	background: url(../images/contact-header.png) center center no-repeat;
	background-size: cover;
}

#outline .l_header-title {
	height: 300px;
	background: url(../images/outline-header.png) center center no-repeat;
	background-size: cover;
}

#information .l_header-title {
	height: 300px;
	background: url(../images/information-header.png) center center no-repeat;
	background-size: cover;
}

#products .l_header-title {
	height: 300px;
	background: url(../images/products-header.png) center center no-repeat;
	background-size: cover;
}


.l_header-content {
	color: #FFF;
	text-shadow: 4px 2px 5px rgba(0,0,0,0.3);
	position: relative;
	top: 25%;
}

#top .l_header-content img {
	width: 700px;
}

/*----------------------------------------------
	.l_main-container
---------------------------------------------*/
.l_main-container {
	width: 100%;
	position: relative;
	background: #FFF;
	min-height: 300px;
}

.inner .l_container {
	width: 960px;
	margin: 0 auto;
	min-height: 800px;
	padding: 85px 0 130px;
}

/*----------------------------------------------
	.l_section
---------------------------------------------*/
.l_section-product {
	height: 745px;
	background: url(../images/bg_top-productinfo.png) center center no-repeat;
	background-size: cover;
	padding: 115px 0 100px;
}

/*----------------------------------------------
	.product_info
---------------------------------------------*/
.l_product_info-wrap {
	width: 990px;
	margin: 0 auto;
}

.product_info {
	height: 310px;
	display: flex;
	justify-content: space-between;
}

.product_info div {
	display: inline-block;
	width: 32%;
}

.product_info div img {
	width: 100%;
}

.l_product_info-btn {
	margin: 0 20px;
	border-bottom: 1px solid rgba(255,255,255,0.3);
	padding-bottom: 30px;
	text-align: right;
}

.slick-track,
.slick-list {
	height: inherit;
}

/*----------------------------------------------
	.workflow
---------------------------------------------*/
.l_section-workflow {
	height: 800px;
	background: url(../images/bg_top-workflow.png) center center no-repeat;
	background-size: cover;
	padding: 85px 0 100px;
}

.l_workflow-wrap {
	min-width: 1000px;
	max-width: 1350px;
	height: 400px;
	margin: 0 auto;
	position: relative;
	background: url(../images/workflow_bg.png) center center no-repeat;
}


.l_workflow-content,
.workflow_img-desc {
	width: 49%;
	display: inline-block;
	vertical-align: top;
	position: relative;
}

.l_workflow-content{
	right: 0;
	top: 25px;
}

.l_workflow-content > div {
	width: 450px;
	left: 5%;
	position: absolute;
}

.workflow-header {
	color: #FFF;
	font-weight: bold;
	font-size: 2.1rem;
	border-bottom: 1px solid #999;
	margin-bottom: 20px;
	padding-bottom: 5px;
}

.workflow_img-desc {
	left: 0;
	top: 30px;
}

.workflow_img-desc > div {
	width: 450px;
	right: 5%;
	position: absolute;
}

.workflow_img-desc img {
	margin: 0 auto 20px;
	display: inherit;
	width: 260px;
}

.workflow_img-header,
.workflow_img-sub {
	font-size: 2rem;
	display: block;
	color: #FFF;
	font-weight: bold;
}


/*----------------------------------------------
	.about
---------------------------------------------*/
.l_section-about {
	height: 765px;
	background: url(../images/bg_top-about.png) center center no-repeat;
	background-size: cover;
	padding-top: 70px;
}

.l_about-wrap {
	width: 970px;
	margin: 0 auto;
}

/*----------------------------------------------
	.contact
---------------------------------------------*/
.l_section-contact {
	height: 585px;
	background: url(../images/bg_top-contact.png) center center no-repeat;
	background-size: cover;
	padding-top: 75px;
}

.l_contact {
	margin: 0 auto;
	width: 965px;
	height: 430px;
	background: #E7F4FB;
	box-shadow: 2px 2px 10px 0px #585858;
	padding: 55px;
}

.l_contact-logo {
	margin-bottom: 20px;
}

.l_contact-phone {
	color: #21110D;
	font-size: 2.6rem;
	font-weight: bold;
	position: relative;
	padding-left: 90px;
	top: 10px;
}

.l_contact-phone:before {
	content: url(../images/icon_phone.png);
	display: inline-block;
	position: absolute;
	width: 54px;
	height: 38px;
	left: 0;
}

/*----------------------------------------------
	.l_section-greeting
---------------------------------------------*/
.l_greeting {
	background: #E6E6E6;
}
.l_greeting:before {
	content: "";
	background: #E6E6E6;
	width: 100%;
	position: absolute;
	height: 470px;
	left: 0;
}
.l_greeting-wrap {
	height: 470px;
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}

.l_greeting-president {
	position: relative;
	top: 25px;
	left: 55px;
	width: 423px;
}

.l_greeting-message {
	position: absolute;
	top: 120px;
	right: 40px;
}

.l_greeting-content {
	position: relative;
	top: -80px;
	padding: 35px 40px;
	background: #FFF;
	box-shadow: 3px 3px 5px 0 #999;
}

/*----------------------------------------------
	.l_access
---------------------------------------------*/
.l_access > div {
	display: inline-block;
}

.l_access > div:first-child {
	width: 465px;
	float: right;
}

.l_access > div:last-child {
	width: 487px;
	float: left;
}

/*----------------------------------------------
	.l_form-contact
---------------------------------------------*/
.l_form-contact label {
	/* width: 250px; */
	width: 100%;
	display: inline-block;
	vertical-align: top;
	margin-top: 14.5px;
	position: relative;
	line-height: 1.4;
}
.l_form-contact label div{
	width: 250px;
	display: inline-block;
}
.l_form-contact label div .error-msg-container{
	display: block;
}
.l_form-contact label .has_require:after {
	content: "必須";
	color: #FFF;
	background: #ED1C24;
	display: inline-block;
	position: absolute;
	line-height: 1;
	padding: 3.5px 12px;
	right: 710px;
}

#confirm .clearfix label{
	display: flex;
}
#confirm .clearfix label .form_title{
	width: 40%;
	margin-right: 10%;
	text-align: right;
}
#confirm #backBtn{
	display: inline-block;
	float: none;
	width: 40%;
	margin-right: 9%;
	background: #FFF;
	border: 1px solid #A0A0A0;
	padding: 19px 10px;
}
#confirm #sendBtn{
	display: inline-block;
	float: none;
	width: 50%;
	background: #FFF;
	border: 1px solid #A0A0A0;
	padding: 19px 10px;
}

.thankyou{
	height: 300px;
}


.l_form-contact textarea,
.l_form-contact input {
	width: 700px;
	display: inline-block;
	border: 1px solid #000;
	padding: 14.5px 10px;
	line-height: 1.3;
	float: right;
}

.l_form-contact textarea {
	height: 330px;
}

.l_form-contact input.form_btn {
	display: inline-block;
	float: none;
	width: 495px;
	background: #FFF;
	border: 1px solid #A0A0A0;
	padding: 19px 10px;
}
.l_form-contact input.form_btn:hover {
	opacity: 0.8;
	cursor: pointer;
}

.error-msg{
	color: red;;
}
/*----------------------------------------------
	.l_rotary
---------------------------------------------*/
.l_rotary {
	margin-right: -20px;
}
.l_rotary > div {
 	display: inline-block;
 	position: relative;
 	line-height: 1;
}
.l_rotary > div:not(:last-child) {
	margin-right: 14px;
}
.l_rotary > div:not(:last-child):after {
	content: url(../images/icon_rotary-arrow.png);
	position: absolute;
	top: -20px;
	bottom: 0;
	right: -16px;
	margin: auto 0;
	height: 13px;
	z-index: 99;
}
.l_rotary > div > p {
	font-size: 1.4rem;
	margin-top: 5px;
}

/*----------------------------------------------
	.l_box_layout
---------------------------------------------*/
.l_box-dbl > *:first-child {
	margin-right: 60px;
}
/*----------------------------------------------
  .l_link_content
---------------------------------------------*/
.l_link_content p {
	border-bottom: 2px dotted #385173;
	padding: 20px 0px;
}
/*----------------------------------------------
  .l_footer_area
---------------------------------------------*/
.l_footer_area {
	position: relative;
	background: rgb(2,11,80);
	background: -moz-linear-gradient(left,  rgba(2,11,80,1) 0%, rgba(2,42,137,1) 50%, rgba(2,11,80,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(2,11,80,1) 0%,rgba(2,42,137,1) 50%,rgba(2,11,80,1) 100%);
	background: linear-gradient(to right,  rgba(2,11,80,1) 0%,rgba(2,42,137,1) 50%,rgba(2,11,80,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020b50', endColorstr='#020b50',GradientType=1 );
	padding: 50px 0;
	font-size: 1.8rem;
	color: #FFF;
}

.l_footer-content {
	width: 965px;
	margin: 0 auto;
}

.l_footer-navigation {
	text-align: center;
}

.l_footer-navigation > p {
	display: inline-block;
}
.l_footer-navigation > p:not(:last-child):after {
	content: "/";
	display: inline-block;
	padding: 0 15px;
}
.l_footer-navigation p a {
	color: #FFF!important;
	text-decoration: none;;
}
.l_footer-navigation p a:hover {
	color: #FFA500!important;
}

/*----------------------------------------------
  .l_pagetop
---------------------------------------------*/
.l_pagetop {
  position: relative;
	z-index: 99;
	text-align: center;
	background: #999;
	line-height: 0;
}

.l_pagetop a {
	display: inline-block;
	color: #FFF!important;
}

.l_pagetop a:hover {
	opacity: 0.9;
}
/*----------------------------------------------
  .l_list-double
---------------------------------------------*/
.l_list-double > ul {
  width: 49%;
  display: inline-block;
}

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

.l_double > div:last-child {
	float: right;
}

.l_double > div img {
	width: 100%;
}

/*----------------------------------------------
  .l_double-customer
---------------------------------------------*/
.l_double-customer > * {
	display: inline-block;
	width: 49%;
	vertical-align: top;
}

.l_double-customer > *:first-child {
	width: 42%;
}

.l_double-customer > *:last-child {
	float: right;
}
/*----------------------------------------------
  .l_display-dbl
---------------------------------------------*/
.l_display-dbl > * {
	display: inline-block;
}
.l_display-dbl > *:last-child {
	float: right;
}

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