@charset "UTF-8";
:root {
  --footer-height: 500px;

  --space-0: 0;
  --space-1: 0.5rem;  /* 8px */
  --space-2: 1rem;    /* 16px */
  --space-3: 1.5rem;  /* 24px */
  --space-4: 2rem;    /* 32px */
  --space-5: 3rem;    /* 48px */
  --space-6: 4rem;    /* 64px */
  --space-7: 6rem;    /* 96px */
  --space-8: 8rem;    /* 128px */

}

/*====== TB(600px～) ======*/
@media (min-width: 600px) {
  :root {
    --space-1: 0.8rem;   /* 12px */
    --space-2: 1.4rem;   /* 22px */
    --space-3: 2rem;     /* 32px */
    --space-4: 2.5rem;   /* 40px */
    --space-5: 3.5rem;   /* 56px */
    --space-6: 5rem;     /* 80px */
    --space-7: 7rem;     /* 112px */
    --space-8: 9rem;     /* 144px */
  }
}

/*====== PC(1024px～) ======*/
@media (min-width: 1024px) {
  :root {
    --footer-height: 800px;

    --space-1: 1rem;     /* 16px */
    --space-2: 1.6rem;   /* 26px */
    --space-3: 2.4rem;   /* 38px */
    --space-4: 3rem;     /* 48px */
    --space-5: 4rem;     /* 64px */
    --space-6: 6rem;     /* 96px */
    --space-7: 8rem;     /* 128px */
    --space-8: 10rem;    /* 160px */
  }
}



/**************************************************
* 共通
***************************************************/
#container {
  
}

/* ヘッダーとコンテンツの被さりを調整 */
#contents {
  padding-top: 60px;
}
@media screen and (min-width: 600px) {

}
@media screen and (min-width: 1024px) {
  #contents {padding-top: 80px;}
}

/*フッター位置調整*/
.l-wrapper {
  min-height: calc(100vh - var(--footer-height));
  /* padding-bottom: 50px; */
}


/* 上余白 */
.l-mt-0 { margin-top: var(--space-0); }
.l-mt-1 { margin-top: var(--space-1); }
.l-mt-2 { margin-top: var(--space-2); }
.l-mt-3 { margin-top: var(--space-3); }
.l-mt-4 { margin-top: var(--space-4); }
.l-mt-5 { margin-top: var(--space-5); }
.l-mt-6 { margin-top: var(--space-6); }

/* 下余白 */
.l-mb-0 { margin-bottom: var(--space-0); }
.l-mb-1 { margin-bottom: var(--space-1); }
.l-mb-2 { margin-bottom: var(--space-2); }
.l-mb-3 { margin-bottom: var(--space-3); }
.l-mb-4 { margin-bottom: var(--space-4); }
.l-mb-5 { margin-bottom: var(--space-5); }
.l-mb-6 { margin-bottom: var(--space-6); }

/* 左余白 */
.l-ml-0 { margin-left: var(--space-0); }
.l-ml-1 { margin-left: var(--space-1); }
.l-ml-2 { margin-left: var(--space-2); }
.l-ml-3 { margin-left: var(--space-3); }
.l-ml-4 { margin-left: var(--space-4); }
.l-ml-5 { margin-left: var(--space-5); }
.l-ml-6 { margin-left: var(--space-6); }

/* 右余白 */
.l-mr-0 { margin-right: var(--space-0); }
.l-mr-1 { margin-right: var(--space-1); }
.l-mr-2 { margin-right: var(--space-2); }
.l-mr-3 { margin-right: var(--space-3); }
.l-mr-4 { margin-right: var(--space-4); }
.l-mr-5 { margin-right: var(--space-5); }
.l-mr-6 { margin-right: var(--space-6); }

/* padding（セクション内コンテンツ用） */
.l-pt-3 { padding-top: var(--space-3); }
.l-pb-3 { padding-bottom: var(--space-3); }
.l-pt-4 { padding-top: var(--space-4); }
.l-pb-4 { padding-bottom: var(--space-4); }
.l-pt-5 { padding-top: var(--space-5); }
.l-pb-5 { padding-bottom: var(--space-5); }
.l-pt-6 { padding-top: var(--space-6); }
.l-pb-6 { padding-bottom: var(--space-6); }


/**************************************************
* Layout: Section spacing
**************************************************/

/* 上下余白（基本セクション） */
.l-section {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
/* 上のみ余白 */
.l-section-pt {
  padding-top: var(--space-6);
}
/* 下のみ余白 */ 
.l-section-pb {
  padding-bottom: var(--space-6);
}



/*====== TB(600px～) ======*/
@media (min-width: 600px) {
  .l-section {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }
  .l-section-pt {
    padding-top: var(--space-7);
  }
  .l-section-pb {
    padding-bottom: var(--space-7);
  }
}
/*====== PC(1024px～) ======*/
@media (min-width: 1024px) {
  .l-section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  .l-section-pt {
    padding-top: var(--space-8);
  }
  .l-section-pb {
    padding-bottom: var(--space-8);
  }
}


/*--------------------------------------
  下層ページ共通 レイアウト
--------------------------------------*/
/* .l-pages{;} */



/* ==========================
   Wrap（横幅制御）
========================== */
.l-wrap,
.l-wrap-l,
.l-wrap-m,
.l-wrap-s,
.l-wrap-full {
  margin-inline: auto; /* 中央寄せ */
}

.l-wrap {
  width: 92%;
}
.l-wrap-l {
  width: min(92%, 1500px); /* メインコンテンツ領域 */
}
.l-wrap-m {
  width: min(100%, 1200px);
}
.l-wrap-s {
  width: min(100%, 1000px);
}
.l-wrap-full {
  width: 100%;
  max-width: none;
  padding-inline: 0; /* 必要なら余白ゼロ */
}


/*------------------------------
表示非表示 ※変更不可
------------------------------*/
.l-dp-block{  display: block;}

.l-sp {  display: block;}
.l-tb {  display: none;}
.l-pc {  display: none;}
.l-sp-tb-nav {  display: block;}

/*====== TB(600px～) ======*/
@media screen and (min-width: 600px) {
.l-sp {  display: none;}
.l-tb {  display: block;}

}
/*====== PC(1024px～) ======*/
@media (min-width: 1024px) {
.l-tb {  display: none;}
.l-pc {  display: block;}
.l-sp-tb-nav {  display: none;}

}


/*--------------------------------------
  flex
--------------------------------------*/
.l-flex {
  display: flex;
  flex-wrap: wrap;
}
.l-flex_align-center {
  align-items: center;
}
.l-flex_row-reverse {
  flex-direction: row-reverse
}




/*--------------------------------------
  grid
--------------------------------------*/
.l-grid {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch; /* 子要素の高さを揃える */
}


/* 汎用：カード系のグリッド */
.l-grid--cards {
  grid-template-columns: 1fr; /* SPは1カラム */
  gap: 16px;
}
 
.l-grid--cards-all2 {
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 16px;
}
.l-grid--cards-all3 {
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  gap: 16px;
}

/*====== TB(600px～) ======*/
@media screen and (min-width: 600px) {
  .l-grid--cards {
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    gap: 24px 24px;
  }

  .l-grid--cards-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .l-grid--cards-4 {
    grid-template-columns: repeat(3, 1fr);
  }

}
/*====== PC(1024px～) ======*/
  @media (min-width: 1024px) {
    .l-grid--cards {
      grid-template-columns: repeat(3, 1fr); /* 3列 */
      gap: 30px ; /* ちょい広げる */
    }

  .l-grid--cards-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .l-grid--cards-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}














/*******************************
ふわっと
*******************************/
.fade-in {
  opacity: 0;
  transform: translateY(30px); /* 下からスライドイン */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.active {
  opacity: 1;
  transform: translateY(0);
}

/*******************************
背景色の後に画像が表示されるアニメーション
*******************************/
.mask_wrap{
	/*display: table;*/
	overflow: hidden;
}
.mask-wrap .mask{
	/*display: table;*/
	position: relative;
	left: -100%;
	overflow: hidden;
}
.mask-wrap .mask-bg{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color--key);
}
.mask-wrap .mask-orange .mask-bg{
  background-color: var(--color--orange);
}

.mask-wrap .mask-bk .mask-bg{
  background-color: var(--color--bk);
}

/*====== TB(700px～) ======*/
@media screen and (min-width: 700px) {



}
/*====== TB(700px～)ここまで ======*/


/*====== PC(1024px～) ======*/
@media screen and (min-width: 1024px) {
 
}
/*====== PC(1024px～)ここまで ======*/