/*===========================================================================
layout
全ページ共通レイアウト用CSS
接頭辞【.l-】

【予測変換用 _base.css記述】
:root {
  --font-color-base: #000;
  --font-family-base: "Noto Sans JP", sans-serif;
  --back-color-base: #fff;
  --design-size-pc: 1400;
  --design-size-sp: 750;
}
===========================================================================*/

/* .wrap関連
------------------------------------*/
.l-wrap {
  overflow: clip;
  min-width: 1000rem;
  padding-top: var(--pc-hdr-height);
  container-type: inline-size;
  --pc-hdr-height: 120rem;
  --hdr-transform: 0.3s linear;
}
/* SP
-------------------------------------*/
@media screen and (max-width: 768px) {
  .l-wrap {
    min-width: 0;
    padding-top: var(--sp-hdr-height);
    --sp-hdr-height: 55rem;
  }
}

/* .main関連
------------------------------------*/

.l-main.l-detail {
  margin-top: 36rem;
}
/* SP
----------------------------------*/
@media screen and (max-width: 768px) {
  .l-main.l-detail {
    margin-top: 40rem;
  }
}


/* コンテンツ幅/固定余白関連
------------------------------------*/
.l-wid {
  max-width: 1200rem;
  margin: 0 auto;
}
.l-idt {
  padding: 0 20rem;
}
/* SP
----------------------------------*/
@media screen and (max-width: 768px) {
  .l-wid {
    max-width: none;
  }
  .l-idt {
    padding: 0 20rem;
  }
}

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


/* スライダーdoc
------------------------------------*/
.l-sldDoc {
  display: flex;
  justify-content: center;
  align-items: center;
}
.l-sldDoc__inr {
  padding: 0 30rem;
}
.l-sldDoc .slick-dots {
  display: flex;
  justify-content: center;
  align-items: center;
}
.l-sldDoc .slick-dots li {
  margin: 0 8rem;
}
.l-sldDoc .slick-dots button {
  display: block;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background-color: #fff;
  font-size: 0;
}
.l-sldDoc .slick-dots .slick-active button {
  background-color: var(--back-color-main);
}
.l-sldDoc .slick-arrow {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40rem;
  height: 40rem;
  border: 1px solid var(--back-color-main);
  border-radius: 50%;
  color: var(--font-color-main);
  transition: opacity 0.3s linear;
}
.l-sldDoc .slick-arrow::before {
  content: "";
  display: block;
  width: 20rem;
  height: 20rem;
  background-color: var(--back-color-main);
  mask: url(/common/images/icn_arw_right_bl.svg) no-repeat center / contain;
}
.l-sldDoc .slick-prev::before {
  transform: rotate(180deg);
}
@media (any-hover: hover) {
  .l-sldDoc .slick-arrow:hover {
    opacity: 0.7;
  }
}
/* SP
----------------------------------*/
@media screen and (max-width: 768px) {
  .l-sldDoc .slick-arrow {
    width: 32rem;
    height: 32rem;
  }
  .l-sldDoc .slick-arrow::before {
    width: 16rem;
    height: 16rem;
  }
}