/*===========================================================================
layout
全ページ共通レイアウト用CSS
接頭辞【.l-】
===========================================================================*/
html {
  --grid-num: 16rem;
  --idt-num: 16rem;
}
/* SP
----------------------------------*/
@media screen and (max-width: 1200px) {
  html {
    --grid-num: 8rem;
    --idt-num: 16rem;
  }
}




/* .wrap関連
------------------------------------*/
.l-wrap {
  /* min-width: 1000rem; */
  /* display: flex;
  flex-wrap: wrap; */
  overflow: clip;
  padding-top: var(--header-height);
  z-index: 1000;
}
/* SP
-------------------------------------*/
@media screen and (max-width: 1200px) {
  .l-wrap {
    min-width: 0;
    padding-top: var(--header-height-sp);
    display: block;
  }
}


/* コンテンツ幅/固定余白関連
------------------------------------*/
.l-inr {
  padding: var(--idt-num);
}
.l-idt {
  padding: 0 var(--idt-num);
}
.l-inrIdt {
  padding: 0 var(--grid-num);
}
.l-wid {
  max-width: 1200rem;
  margin: 0 auto;
}



.l-line-1 {
  width: calc(((100% - 176rem) / 12) * 1 + (0 * var(--grid-num)));
  margin: 0 auto;
}
.l-line-2 {
    width: calc(((100% - 176rem) / 12) * 2 + (1 * var(--grid-num)));
    margin: 0 auto;
}
.l-line-3 {
    width: calc(((100% - 176rem) / 12) * 3 + (2 * var(--grid-num)));
    margin: 0 auto;
}
.l-line-4 {
    width: calc(((100% - 176rem) / 12) * 4 + (3 * var(--grid-num)));
    margin: 0 auto;
}
.l-line-5 {
    width: calc(((100% - 176rem) / 12) * 5 + (4 * var(--grid-num)));
    margin: 0 auto;
}
.l-line-6 {
    width: calc(((100% - 176rem) / 12) * 6 + (5 * var(--grid-num)));
    margin: 0 auto;
}
.l-line-7 {
    width: calc(((100% - 176rem) / 12) * 7 + (6 * var(--grid-num)));
    margin: 0 auto;
}
.l-line-8 {
    width: calc(((100% - 176rem) / 12) * 8 + (7 * var(--grid-num)));
    margin: 0 auto;
}
.l-line-9 {
    width: calc(((100% - 176rem) / 12) * 9 + (8 * var(--grid-num)));
    margin: 0 auto;
}
.l-line-10 {
    width: calc(((100% - 176rem) / 12) * 10 + (9 * var(--grid-num)));
    margin: 0 auto;
}
.l-line-11 {
    width: calc(((100% - 176rem) / 12) * 11 + (10 * var(--grid-num)));
    margin: 0 auto;
}
.l-line-12 {
    width: calc(((100% - 176rem) / 12) * 12 + (11 * var(--grid-num)));
    margin: 0 auto;
}


/* PC
----------------------------------*/
@media screen and (min-width: 1201px) {
  .l-text-pc {
    padding-right: var(--spacing-120);
  }
  .l-wid500-pc {
		max-width: 500rem;
		margin: 0 auto;
	}
	.l-wid560-pc {
		max-width: 560rem;
		margin: 0 auto;
	}
  .l-wid600-pc {
		max-width: 600rem;
		margin: 0 auto;
	}
  .l-wid700-pc {
		max-width: 700rem;
		margin: 0 auto;
	}
  .l-wid1184-pc {
		max-width: 1184rem;
		margin: 0 auto;
	}
  .l-line-1-pc {
    width: calc(((100% - 176rem) / 12) * 1 + (0 * var(--grid-num)));
    margin: 0 auto;
  }
  .l-line-2-pc {
      width: calc(((100% - 176rem) / 12) * 2 + (1 * var(--grid-num)));
      margin: 0 auto;
  }
  .l-line-3-pc {
      width: calc(((100% - 176rem) / 12) * 3 + (2 * var(--grid-num)));
      margin: 0 auto;
  }
  .l-line-4-pc {
      width: calc(((100% - 176rem) / 12) * 4 + (3 * var(--grid-num)));
      margin: 0 auto;
  }
  .l-line-5-pc {
      width: calc(((100% - 176rem) / 12) * 5 + (4 * var(--grid-num)));
      margin: 0 auto;
  }
  .l-line-6-pc {
      width: calc(((100% - 176rem) / 12) * 6 + (5 * var(--grid-num)));
      margin: 0 auto;
  }
  .l-line-7-pc {
      width: calc(((100% - 176rem) / 12) * 7 + (6 * var(--grid-num)));
      margin: 0 auto;
  }
  .l-line-8-pc {
      width: calc(((100% - 176rem) / 12) * 8 + (7 * var(--grid-num)));
      margin: 0 auto;
  }
  .l-line-9-pc {
      width: calc(((100% - 176rem) / 12) * 9 + (8 * var(--grid-num)));
      margin: 0 auto;
  }
  .l-line-10-pc {
      width: calc(((100% - 176rem) / 12) * 10 + (9 * var(--grid-num)));
      margin: 0 auto;
  }
  .l-line-11-pc {
      width: calc(((100% - 176rem) / 12) * 11 + (10 * var(--grid-num)));
      margin: 0 auto;
  }
  .l-line-12-pc {
      width: calc(((100% - 176rem) / 12) * 12 + (11 * var(--grid-num)));
      margin: 0 auto;
  }
  .l-grid .l-line-1-pc,
  .l-grid .l-line-2-pc,
  .l-grid .l-line-3-pc,
  .l-grid .l-line-4-pc,
  .l-grid .l-line-5-pc,
  .l-grid .l-line-6-pc,
  .l-grid .l-line-7-pc,
  .l-grid .l-line-8-pc,
  .l-grid .l-line-9-pc,
  .l-grid .l-line-10-pc,
  .l-grid .l-line-11-pc,
  .l-grid .l-line-12-pc {
      margin: 0;
  }
}
/* SP
----------------------------------*/
@media screen and (max-width: 1200px) {
  .l-wid {
    max-width: none;
  }
  .l-line-all {
    width: 100%;
  }
  .l-line-1-sp {
    width: calc(((100% - 24rem) / 4) * 1 + (0 * var(--grid-num)));
    margin: 0 auto;
  }
  .l-line-2-sp {
      width: calc(((100% - 24rem) / 4) * 2 + (1 * var(--grid-num)));
      margin: 0 auto;
  }
  .l-line-3-sp {
      width: calc(((100% - 24rem) / 4) * 3 + (2 * var(--grid-num)));
      margin: 0 auto;
  }
  .l-line-4-sp {
      width: calc(((100% - 24rem) / 4) * 4 + (3 * var(--grid-num)));
      margin: 0 auto;
  }
}

/*====================================
背景ブロック
====================================*/
.l-background {
  background-color: #FFF;
  z-index: 10;
  position: relative;
  margin-top: calc(100vh - var(--header-height));
}
.l-support {
  background-color: var(--back-color-Sand);
}
/* SP
----------------------------------*/
@media screen and (max-width: 1200px) {
  .l-background {
    background-color: #FFF;
    z-index: 10;
    position: relative;
    margin-top: calc(100vh - var(--header-height));
  }
}

/*====================================
スペーシング関連
====================================*/
:root {
  --spacing-02: 2rem;
  --spacing-04: 4rem;
  --spacing-08: 8rem;
  --spacing-12: 12rem;
  --spacing-16: 16rem;
  --spacing-20: 20rem;
  --spacing-24: 24rem;
  --spacing-32: 32rem;
  --spacing-40: 40rem;
  --spacing-48: 48rem;
  --spacing-56: 56rem;
  --spacing-64: 64rem;
  --spacing-72: 72rem;
  --spacing-80: 80rem;
  --spacing-88: 88rem;
  --spacing-96: 96rem;
  --spacing-120: 120rem;
  --spacing-160: 160rem;
  --spacing-200: 200rem;
}
.l-blockSpacing {
  padding-top: var(--spacing-160);
}
.l-blockSpacing.--type-half {
  padding-top: var(--spacing-80);
}
/* SP
----------------------------------*/
@media screen and (max-width: 1200px) {
  .l-blockSpacing {
    padding-top: var(--spacing-96);
  }
}

.l-blockMargin {
  margin-top: var(--spacing-16);
}
.l-blockMargin.--type-half {
  padding-top: var(--spacing-8);
}
/* SP
----------------------------------*/
@media screen and (max-width: 1200px) {
  .l-blockMargin {
  }
}

.l-blockLowSpacing {
  margin-top: var(--spacing-32);
}
/* SP
----------------------------------*/
@media screen and (max-width: 1200px) {
  .l-blockLowSpacing {
    margin-top: var(--spacing-24);
  }
}

/* 以下が余白のベース */
.l-blockInternalSpacing {
  margin-top: var(--spacing-80);
}
.l-blockInternalSpacing.--type-half {
  margin-top: var(--spacing-40);
}
/* SP
----------------------------------*/
@media screen and (max-width: 1200px) {
  .l-blockInternalSpacing {
    margin-top: var(--spacing-64);
  }
}

/*====================================
フレックス
====================================*/
.l-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--grid-num);
}
/* PC
----------------------------------*/
@media screen and (min-width: 1201px) {
	.l-grid-pc {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--grid-num);
	}
}
/* SP
----------------------------------*/
@media screen and (max-width: 1200px) {
	.l-grid-sp {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--grid-num);
	}
}


/*====================================
パネルグリッド
====================================*/
.l-panelGrid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-80) var(--grid-num);
}
.l-panelGrid.--gap-64 {
	row-gap: var(--spacing-64);
}
/* SP
----------------------------------*/
@media screen and (max-width: 1200px) {
	.l-panelGrid {
		row-gap: var(--spacing-64);
	}
}

/*====================================
横のインデント
====================================*/
.l-indent {
  padding-left: var(--spacing-16);
}



.l-slide {
  padding: var(--spacing-16) var(--spacing-32) var(--spacing-40);
  position: relative;
  max-height: 80vh;
  max-width: 90vw;
  margin: 0 auto;
}
.l-slide > div picture {
  aspect-ratio: 3 / 2;
  position: relative;
  max-height: calc(80vh - 80rem);
  margin: 0 auto;
}
.l-slide > div .l-grid picture {
  aspect-ratio: 3 / 4;
  position: relative;
  max-height: calc(80vh - 80rem);
}
.l-slide > div picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
.l-slide .slick-slide {
  padding: var(--spacing-24);
}
.l-slide .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  padding: var(--spacing-08);
  font-size: 0;
  width: 32rem;
  height: 32rem;
}
.l-slide .slick-prev {
  left: 0;
  background: url(/common/images/icn_arw_l.svg) no-repeat center / contain;
}
.l-slide .slick-next {
  right: 0;
  background: url(/common/images/icn_arw_r.svg) no-repeat center / contain;
}
.l-slide .slick-dots {
  position: absolute;
  bottom: 10rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.l-slide .slick-dots li {
  margin: var(--spacing-04);
}
.l-slide .slick-dots li button {
  padding: var(--spacing-04);
  width: var(--spacing-08);
  height: var(--spacing-08);
  border: 1px solid #333;
  border-radius: 99rem;
  font-size: 0;
  display: block;
  background-color: #FFF;
}
.l-slide .slick-dots li.slick-active button {
  background-color: #333;
}
/* SP
----------------------------------*/
@media screen and (max-width: 1200px) {
  .l-slide {
    padding: var(--spacing-16) 0 var(--spacing-24);
    position: relative;
    width: 100%;
  }
  .l-slide .slick-slide {
    padding: var(--spacing-08);
  }
  .l-slide .slick-prev {
    left: -22rem;
  }
  .l-slide .slick-next {
    right: -22rem;
  }
}


.l-edit ul {

}
.l-edit ul,
.l-edit ol {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-02);
  counter-reset: number 0;
}
.l-edit ul > li {
  position: relative;
  padding-left: 1em;
}
.l-edit ul > li::before {
  content: "・";
  margin-left: -1em;
  width: 1em;
  display: inline-block;
}
.l-edit ol > li {
  position: relative;
  padding-left: 1em;
}
.l-edit ol > li::before {
  counter-increment: number 1;
  content: counter(number) " ";
  margin-left: -1em;
  width: 1em;
  display: inline-block;
}
.l-edit strong {
  font-weight: bold;
}
.l-edit a {
  position: relative;
}
.l-edit a::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url(/common/images/icn_external_link.svg) no-repeat center / contain;
}


.l-subHeader {
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
  background-color: rgb(253, 253, 252,0.9);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  transition: all 0.1s linear;
}
[lang="ja"] .l-subHeader {
  padding-top: 14.5rem;
  padding-bottom: 14.5rem;
}
.l-subHeader.js-show {
  top: var(--header-height);
}


.l-hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  margin: calc(var(--spacing-08) - 1px) 0 calc(var(--spacing-08) - 1px) auto!important;
  /* background-color: var(--font-color-secondary); */
  border-top: 1px solid var(--font-color-secondary);
  border-collapse: separate;
  border-spacing: 0;
}