@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.

↓↓↓↓↓↓コメントアウト表記サンプル Comment out sample ↓↓↓↓↓↓
*/
/*----------------------------------------------
	大くくりコメントアウト large part
---------------------------------------------*/

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

/* 小くくりコメントアウト small part */
/*
↑↑↑↑↑↑コメントアウト表記サンプル Comment out sample ↑↑↑↑↑↑
*/
/*----------------------------------------------
	.l_wrap
---------------------------------------------*/
.l_wrap {
	max-width: 1400px;
	margin: 0 auto;
}
.l_mainimage .l_wrap{
  position: relative;
  width: 1400px;
}
@media screen and (min-width:767px) {
  .l_wrap,
  .l_mainimage .l_wrap{
    width: 90%;
  }
}

/*----------------------------------------------
	.l_mainimage
---------------------------------------------*/
/*.l_mainimage{
  min-height: 396px;
  background: url("../images/img_main_pc.jpg") no-repeat;
  background-position: center top;
  background-size: 100% auto;
}
@media screen and (max-width:1500px) {
  .l_mainimage {
    min-height: 263px;
  }
}*/

/*----------------------------------------------
	.l_header
---------------------------------------------*/
.l_header{
  width: 100%;
}

/*----------------------------------------------
	.l_logo
---------------------------------------------*/
.l_logo img{
  width: 35%;
  position: absolute; 
  left: -1%;
}
@media screen and (max-width:1200px){
  .l_logo{
    left: 3%;
  }
}

/*----------------------------------------------
	.l_size
---------------------------------------------*/
.l_size{
  font-size: 14px!important;
  position: absolute;
  right: 0;
  background: #fff;
  padding: 12px 5px;
  margin-top: 2%;
}
.l_size span{
  padding-right: 8px;
}
@media screen and (max-width:1200px){
  .l_size{
    right: 5%;
  }
}

/*----------------------------------------------
	.l_nav_area
---------------------------------------------*/
.l_nav_area{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/*----------------------------------------------
	.l_main_contents
---------------------------------------------*/
.l_main_contents{
  padding: 60px 0;
  background: #E3D5F8;
}
.l_content{
  background: #fff;
  padding: 60px 120px;
  margin-bottom: 60px;
}
@media screen and (max-width:1200px) {
  .l_content {
    padding: 60px;
  }
}

/*----------------------------------------------
	.l_bnr
---------------------------------------------*/
.l_bnr .u_ALcenter img{
  height: 100px;
}
.l_bnr a:hover{
  opacity: .5;
}

/*----------------------------------------------
  .l_copyright
---------------------------------------------*/
.l_copyright{
  color: #333;
  font-size: 1.4rem;
  padding: 10px 0;
}

/*----------------------------------------------
  .l_pagetop
---------------------------------------------*/
.l_pagetop {
  position: fixed;
  right: 50px;
  bottom: 100px;
  z-index: 99;
}
.l_pagetop a {
	line-height: 0;
	display: block;
}
.l_pagetop img:hover {
	opacity: 0.9;
}