@charset "utf-8";

/*----------------------------------------------
	.l_wrap
---------------------------------------------*/
.l_wrap {
	width:90%;
	margin: 0 auto;
	max-width: var(--wrap);
}

/*----------------------------------------------
	.l_bg
---------------------------------------------*/
/*
.l_bg {
	background:#F9F7F4;
  position: relative;
}
*/
/*----------------------------------------------
	.l_container
---------------------------------------------*/
.l_container {
}

/*----------------------------------------------
	.l_header
---------------------------------------------*/
.l_header_area {
  background: var(--white);
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); 
}

.l_header img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*----------------------------------------------
	.l_side_contents
---------------------------------------------*/


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

/*----------------------------------------------
	.l_main_contents
---------------------------------------------*/
.l_main_contents {
	background:#F9F7F4;
}
/*----------------------------------------------
	.l_poster_area
---------------------------------------------*/

.l_mv{
  position: sticky;
  top: 0;
  z-index: 0 !important;
}

.l_poster_area{
  position: relative;
  width: 100%;
  height: 500px;
/*  aspect-ratio: 1920 / 980; */
}

.l_poster_area::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/poster_bg.png") center / cover no-repeat;
  pointer-events: none;
  z-index: -1;
}

/*
.l_poster_area::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.20);
  pointer-events: none;
  z-index: -1;
}
*/

/*
.l_poster_area img{
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
}
*/

/*
.l_poster_area .is_catch{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;
  z-index: 1;
}
*/

.l_poster_area .is_catch{
  position: absolute;
  top: 0; right: -50%; bottom: 0; left: 0;
  margin: auto;
  width: fit-content; /* ← これを追加 */
  height: fit-content; /* ← これも追加 */
  text-align: center;
  transform:none;
	 z-index: 1;
}
.l_poster_area.-mv02 .is_catch{
  top:inherit; right: 0; bottom:3vw; left: 0;
}


.l_poster_area .is_catch p{
  margin-bottom: 40px;
  color: var(--white);
  font-size: 4.2vw;
  font-weight: 600;
  font-family: "Yu Mincho","YuMincho","Hiragino Mincho ProN","MS PMincho",serif;
  text-shadow: 0 0 10px rgba(255,255,255,0.15);
}

/*----------------------------------------------
	.l_main_contents
---------------------------------------------*/

.l_main_contents{
  position: relative;
  z-index: 1;
}

/*----------------------------------------------
	section
---------------------------------------------*/
section {
	padding: 120px 0 0;
}

/*----------------------------------------------
  .l_copyright
---------------------------------------------*/
.l_copyright {
	padding: 15px 0;
	background:#545454;
	color:var(--white);
	font-size: 1.2rem;
}

/*----------------------------------------------
  .l_pagetop
---------------------------------------------*/
.l_pagetop {
  position: fixed;
  right: 25px;
/*	left: calc(50% + 550px);*/
  bottom: 50px;
	z-index: 99;
}
.l_pagetop a{
	line-height: 0;
	display: block;
}
.l_pagetop 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;
}

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