@charset "utf-8";

:root {
  --rem: 2.56vw;
}

@media (min-width: 768px) {
  :root {
    --rem: clamp(6.37px, 0.83vw, 10px);
  }
}

.sitemap-5m9,
.footer {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

.sitemap-5m9 {
  background: #fff;
}

/* :where() で詳細度をブロック単体(0,1,0)に抑え、後続の BEM クラスルールが
   タイブレーク（後勝ち）で必ず優先されるようにする（.list-sns の中央寄せ等を潰さない） */
.sitemap-5m9 :where(ul),
.footer :where(ul),
.section-sns :where(ul),
.footer__bottom :where(ul) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sitemap-5m9 :where(img),
.footer :where(img),
.section-sns :where(img) {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.sitemap-5m9 :where(a),
.footer :where(a),
.section-sns :where(a) {
  text-decoration: none;
}

:root {
  /* スマホ：390px基準のvw単位（小数点以下切り捨て） */
  --fz-09: 2.30vw;
  /* 390pxで9px */
  --fz-10: 2.56vw;
  /* 390pxで10px */
  --fz-11: 2.82vw;
  /* 390pxで11px */
  --fz-12: 3.07vw;
  /* 390pxで12px */
  --fz-14: 3.58vw;
  /* 390pxで14px */
  --fz-16: 4.10vw;
  /* 390pxで16px */
  --fz-18: 4.61vw;
  /* 390pxで18px */
  --fz-19: 4.87vw;
  /* 390pxで19px */
  --fz-20: 5.12vw;
  /* 390pxで20px */
  --fz-22: 5.64vw;
  /* 390pxで22px */
  --fz-24: 6.15vw;
  /* 390pxで24px */
  --fz-32: 8.20vw;
  /* 390pxで32px */
  --fz-36: 9.23vw;
  /* 390pxで36px */
  --fz-40: 10.25vw;
  /* 390pxで40px */
  /* fluid設定 */
  --fluid-09-16: var(--fz-09);
  --fluid-10-14: var(--fz-10);
  --fluid-11-14: var(--fz-11);
  --fluid-12-14: var(--fz-12);
  --fluid-12-16: var(--fz-12);
  --fluid-12-18: var(--fz-12);
  --fluid-12-20: var(--fz-12);
  --fluid-14-16: var(--fz-14);
  --fluid-14-18: var(--fz-14);
  --fluid-14-20: var(--fz-14);
  --fluid-14-24: var(--fz-14);
  --fluid-16-18: var(--fz-16);
  --fluid-16-20: var(--fz-16);
  --fluid-16-24: var(--fz-16);
  --fluid-18-20: var(--fz-18);
  --fluid-18-24: var(--fz-18);
  --fluid-18-32: var(--fz-18);
  --fluid-19-32: var(--fz-19);
  --fluid-20-24: var(--fz-20);
  --fluid-20-32: var(--fz-20);
  --fluid-24-32: var(--fz-24);
  --fluid-24-36: var(--fz-24);
  --fluid-32-36: var(--fz-32);
  --fluid-32-40: var(--fz-32);
  --fluid-24-40: var(--fz-24);
  --fluid-22-32: var(--fz-22);
  --fluid-22-40: var(--fz-22);
}

:root {
  --c-primary: #637DBC;
  --c-primary-40: #C1CBE4;
  --c-primary-10: #EFF2F8;
  --c-secondary: #73BCEE;
  --c-third: #4F6AA6;
  --c-fourth: #E0E6F1;
  --c-text: #393C42;
  --c-red: #D13122;
  --c-green: #00952D;
  --c-yellow: #FFE500;
  --c-gray01: #F8F8F8;
  --c-gray02: #DDDDDD;
  --ff-sans: YakuHanJPs, "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, ヒラギノ角ゴ ProN, Hiragino Kaku Gothic ProN, YuGothic, "Yu Gothic Medium", "Yu Gothic", sans-serif;
  --ff-serif: "Shippori Mincho", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  /* .zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-kaku-gothic-new-medium {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
} */
}

@media (min-width: 768px) {
  :root {
    /* デスクトップ：768px〜1200pxで均等変化（最大値×0.64切り捨て → 最大値）calc(1*var(--rem)) = 10px */
    --fz-09: clamp(calc(0.55*var(--rem)), 0.75vw, calc(0.9*var(--rem)));
    /* 5.5px → 9px */
    --fz-10: clamp(calc(0.6*var(--rem)), 0.83vw, calc(1*var(--rem)));
    /* 6px → 10px */
    --fz-11: clamp(calc(0.7*var(--rem)), 0.92vw, calc(1.1*var(--rem)));
    /* 7px → 11px */
    --fz-12: clamp(calc(0.7*var(--rem)), 1vw, calc(1.2*var(--rem)));
    /* 7px → 12px */
    --fz-14: clamp(calc(0.8*var(--rem)), 1.17vw, calc(1.4*var(--rem)));
    /* 8px → 14px */
    --fz-16: clamp(calc(1*var(--rem)), 1.33vw, calc(1.6*var(--rem)));
    /* 10px → 16px */
    --fz-18: clamp(calc(1.1*var(--rem)), 1.5vw, calc(1.8*var(--rem)));
    /* 11px → 18px */
    --fz-19: clamp(calc(1.15*var(--rem)), 1.58vw, calc(1.9*var(--rem)));
    /* 11.5px → 19px */
    --fz-20: clamp(calc(1.2*var(--rem)), 1.67vw, calc(2*var(--rem)));
    /* 12px → 20px */
    --fz-22: clamp(calc(1.35*var(--rem)), 1.83vw, calc(2.2*var(--rem)));
    /* 13.5px → 22px */
    --fz-24: clamp(calc(1.5*var(--rem)), 2vw, calc(2.4*var(--rem)));
    /* 15px → 24px */
    --fz-32: clamp(calc(2*var(--rem)), 2.67vw, calc(3.2*var(--rem)));
    /* 20px → 32px */
    --fz-36: clamp(calc(2.3*var(--rem)), 3vw, calc(3.6*var(--rem)));
    /* 23px → 36px */
    --fz-40: clamp(calc(2.5*var(--rem)), 3.33vw, calc(4.0*var(--rem)));
    /* 25px → 40px */
    /* fluid設定 */
    --fluid-09-16: var(--fz-16);
    --fluid-10-14: var(--fz-14);
    --fluid-11-14: var(--fz-14);
    --fluid-12-14: var(--fz-14);
    --fluid-12-16: var(--fz-16);
    --fluid-12-18: var(--fz-18);
    --fluid-12-20: var(--fz-20);
    --fluid-14-16: var(--fz-16);
    --fluid-14-18: var(--fz-18);
    --fluid-14-20: var(--fz-20);
    --fluid-14-24: var(--fz-24);
    --fluid-16-18: var(--fz-18);
    --fluid-16-20: var(--fz-20);
    --fluid-16-24: var(--fz-24);
    --fluid-18-20: var(--fz-20);
    --fluid-18-24: var(--fz-24);
    --fluid-18-32: var(--fz-32);
    --fluid-19-32: var(--fz-32);
    --fluid-20-24: var(--fz-24);
    --fluid-20-32: var(--fz-32);
    --fluid-24-32: var(--fz-32);
    --fluid-24-36: var(--fz-36);
    --fluid-32-36: var(--fz-36);
    --fluid-32-40: var(--fz-40);
    --fluid-24-40: var(--fz-40);
    --fluid-22-32: var(--fz-32);
    --fluid-22-40: var(--fz-40);
  }
}

.fz-14 {
  font-size: var(--fz-14);
}

.text-center {
  text-align: center !important;
}

.pos-rel {
  position: relative;
}

.l-container {
  width: 100%;
  padding-inline: 5.12vw;
  /* 390px base = 20px（切り捨て） */
  margin-inline: auto;
}

@media (min-width: 768px) {
  .l-container {
    max-width: calc(124*var(--rem));
    /* 1240px (1200px + 40px) */
    padding-inline: clamp(calc(1*var(--rem)), 2vw, calc(2*var(--rem)));
    /* 768px:16px → 800px〜1000px可変 → 1000px以上:20px */
    align-items: unset;
  }
}

.inline-icon {
  width: 1em;
  display: inline-block
}

.btn-fill {
  border: 1px solid var(--c-text);
  background-color: var(--c-text);
  display: flex;
  gap: 0;
  border-radius: 4px;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: calc(3.5*var(--rem)) 1fr calc(3.5*var(--rem));
}

.btn-fill__prepend {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-fill__body {
  font-weight: 500;
  display: flex;
  text-align: center;
  font-size: var(--fluid-14-20);
  color: #FFF;
  padding-block: calc(1.14*var(--rem));
  justify-content: center;
  align-items: center;
  gap: calc(0.5*var(--rem));
  min-height: calc(5.6*var(--rem));
}

@media (min-width:768px) {
  .btn-fill__body.sm {
    font-size: var(--fz-16);
    padding-block: calc(1.00*var(--rem))
  }

  .btn-fill__body.lg {
    font-size: var(--fz-20);
    padding-block: calc(1.2*var(--rem))
  }
}

.btn-fill__append {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-fill__append-img {
  height: calc(1.4*var(--rem));
  width: calc(1.4*var(--rem));
  object-fit: contain;
  object-position: center;
}

.btn-fill__append-img.lg {
  height: calc(2.2*var(--rem));
  width: calc(2.2*var(--rem));
}

/* prepend無し + append無し → 1fr */
.btn-fill:not(:has(.btn-fill__prepend)):not(:has(.btn-fill__append)) {
  grid-template-columns: 1fr;
}

/* prepend無し + append有り → 1fr calc(3.5*var(--rem)) */
.btn-fill:not(:has(.btn-fill__prepend)):has(.btn-fill__append) {
  grid-template-columns: 1fr calc(3.5*var(--rem));
}

.btn-fill-primary {
  border: 1px solid var(--c-primary);
  background-color: var(--c-primary);
}

.btn-fill-secondary {
  border: 1px solid var(--c-secondary);
  background-color: var(--c-secondary);
}

/* 背景画像矢印ボタン（シンプル構造） */
.btn-fill-arrow {
  grid-template-columns: 1fr;
  background-image: url("../images/icon/arrow-r-w.svg");
  background-repeat: no-repeat;
  background-size: calc(1.4*var(--rem)) calc(1.4*var(--rem));
  background-position: right calc(1.3*var(--rem)) center;
}

.btn-fill-arrow .btn-fill__body {
  padding-left: calc(3*var(--rem));
  padding-right: calc(3*var(--rem));
  display: flex;
  align-items: center;
  gap: calc(0.6*var(--rem));
  justify-content: center;
}

/* 背景画像外部リンクボタン（シンプル構造） */
.btn-fill-external {
  grid-template-columns: 1fr;
  background-image: url("../images/icon/external-w.svg");
  background-repeat: no-repeat;
  background-size: calc(1.2*var(--rem)) calc(1.2*var(--rem));
  background-position: right calc(1.2*var(--rem)) center;
}

.btn-fill-external .btn-fill__body {
  padding-inline: calc(1.6*var(--rem));
}

/* 背景画像下矢印ボタン */
.btn-fill-arrow-down {
  grid-template-columns: 1fr;
  background-image: url("../images/icon/arrow-d-w.svg");
  background-repeat: no-repeat;
  background-size: calc(1.4*var(--rem)) calc(1.4*var(--rem));
  background-position: right calc(1.3*var(--rem)) center;
}

.btn-fill-arrow-down .btn-fill__body {
  padding-left: calc(3*var(--rem));
  padding-right: calc(3*var(--rem));
}

/* 背景画像検索ボタン */
.btn-fill-search {
  background-image: url("../images/icon/search-sm.svg");
  background-repeat: no-repeat;
  background-size: calc(2.2*var(--rem)) calc(2.2*var(--rem));
  background-position: right calc(1.3*var(--rem)) center;
}

.btn-fill-search .btn-fill__body {
  padding-left: calc(3*var(--rem));
  padding-right: calc(3*var(--rem));
}

.btn-fill__logo {
  width: calc(9*var(--rem));
  padding-bottom: calc(0.3*var(--rem));
}

.btn-fill__note {
  padding-top: calc(0.2*var(--rem));
  white-space: nowrap;
  font-size: calc(1*var(--rem));
}

@media (min-width: 768px) {
  .btn-fill__logo {
    width: calc(11*var(--rem));
  }

  .btn-fill__note {
    font-size: calc(1.2*var(--rem));
    padding-top: 0.3em;
  }
}

.btns__series {
  display: grid;
  gap: calc(2*var(--rem));
  margin-top: calc(3*var(--rem));
  grid-template-columns: calc(23.4*var(--rem));
  justify-content: center;
}

.cartridge-card__certification+.btns__series {
  margin-top: clamp(calc(1.5*var(--rem)), calc(0.78*var(--rem)) + 1.85vw, calc(3*var(--rem)));
}

@media (min-width:768px) {
  .btns__series {
    display: grid;
    gap: calc(3*var(--rem));
    margin-top: calc(6.0*var(--rem));
    grid-template-columns: repeat(auto-fit, calc(32.1*var(--rem)));
    justify-content: center;
  }
}


/* #region MARK:footer */
.footer {
  background-color: var(--c-gray01);
  padding-top: calc(4*var(--rem));
  padding-bottom: 1em
}

.list-sns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(1.5*var(--rem));
  justify-items: center;
  align-items: center;
  margin-top: calc(1*var(--rem));
  width: fit-content;
  margin-inline: auto;
}

.list-sns-item img {
  max-width: unset;
  width: 100%;
}

.list-sns-item:nth-of-type(1) {
  width: calc(5.4*var(--rem));
}

.list-sns-item:nth-of-type(2) {
  width: calc(5.4*var(--rem));
}

.list-sns-item:nth-of-type(3) {
  width: calc(4.5*var(--rem));
}

.footer__credit {
  text-align: center;
  font-size: var(--fz-11);
  margin-top: calc(5*var(--rem))
}

.footer__bottom {
  margin-top: calc(3*var(--rem));
}

.footer__bottom__list__item {
  font-size: calc(1.4*var(--rem));
  margin-block: calc(1*var(--rem))
}

@media (min-width: 768px) {
  .footer {
    padding-top: calc(3*var(--rem));
  }

  .footer__bottom {
    margin-top: calc(5*var(--rem))
  }

  .footer__bottom__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(2*var(--rem));
  }

  .footer__bottom__list__item {
    font-size: calc(1.1*var(--rem));
  }
}

/* #endregion */
/* #region MARK:sitemap */
.sitemap-5m9__scroll-top {
  position: fixed;
  width: calc(5.6*var(--rem));
  height: calc(5.6*var(--rem));
  right: calc(1*var(--rem));
  bottom: calc(1*var(--rem));
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease, top 0.5s ease, bottom 0.5s ease;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  display: none;
}

.sitemap-5m9__scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.sitemap-5m9__scroll-top.is-visible.is-overlap-hidden {
  opacity: 0;
  visibility: hidden;
}

.sitemap-5m9__scroll-top.is-visible.is-docked {
  position: absolute;
  bottom: auto;
  top: calc(-5.0*var(--rem));
  right: calc(1*var(--rem));
  transform: translateY(-50%);
}

@media (min-width:768px) {
  .sitemap-5m9__scroll-top {
    display: block;
  }

  .sitemap-5m9__scroll-top.is-visible.is-docked {
    top: calc(-5.6*var(--rem));
    right: calc(-0.8*var(--rem));
  }
}

.sitemap-5m9_inner {
  position: relative;
}

.sitemap-5m9__scroll-top-image {
  max-width: unset;
  width: 100%;
}

.sitemap-5m9 {
  padding-block: calc(5*var(--rem)) calc(3.4*var(--rem))
}

.sitemap-5m9__logo {
  width: calc(13.4*var(--rem));
  margin-inline: auto;
  margin-bottom: calc(4*var(--rem))
}

.sitemap-5m9__nav {
  line-height: 1;
  display: grid;
  gap: calc(3*var(--rem));
}

.sitemap-5m9__nav+.sitemap-5m9__nav {
  margin-top: calc(3*var(--rem))
}

.sitemap-5m9__nav-item {
  font-size: var(--fz-14);
}

.sitemap-5m9__nav-link {
  display: flex;
  gap: calc(0.8*var(--rem));
  align-items: center;
}

.sitemap-5m9__actions {
  margin-top: calc(5.5*var(--rem));
  display: grid;
  gap: calc(2*var(--rem));
}

.sitemap-5m9__btn {
  display: grid;
  border: 1px solid var(--c-primary);
  border-radius: 4px;
  background-color: #FFF;
  color: var(--c-primary);
  font-weight: 500;
  font-size: var(--fz-14);
  line-height: 1.2;
  text-align: center;
  padding: 0 calc(3*var(--rem));
  background-repeat: no-repeat;
  background-size: calc(1.4*var(--rem));
  background-position: right calc(1.3*var(--rem)) center;
  min-height: calc(5*var(--rem));
  place-items: center;
}

.sitemap-5m9__btn--arrow {
  background-image: url("../images/icon/arrow-r-1.svg");
}

.sitemap-5m9__btn--external {
  background-image: url("../images/icon/external-1.svg");
  background-size: calc(1.4*var(--rem)) calc(1.1*var(--rem));
}

.sitemap-5m9__cta {
  margin-top: calc(5*var(--rem));
  display: grid;
  gap: calc(2*var(--rem));
}

@media (min-width: 768px) {
  .sitemap-5m9 {
    padding-block: calc(6*var(--rem))
  }

  .sitemap-5m9__cta {
    gap: calc(3*var(--rem));
    grid-template-columns: repeat(2, calc(30*var(--rem)));
    justify-content: center;
    margin-top: calc(6*var(--rem));
  }

  .sitemap-5m9_inner {
    display: grid;
    grid-template-columns: 1fr 1fr calc(31*var(--rem));
    grid-template-areas:
      "header header header"
      "nav1 nav2 actions"
      "cta cta cta";
    align-items: start;
  }

  .sitemap-5m9__logo {
    grid-area: header;
  }

  .sitemap-5m9__nav:nth-of-type(1) {
    grid-area: nav1;
    align-self: start;
  }

  .sitemap-5m9__nav:nth-of-type(2) {
    grid-area: nav2;
  }

  .sitemap-5m9__actions {
    grid-area: actions;
    margin-top: 0;
    align-self: start;
    gap: calc(1*var(--rem));
  }

  .sitemap-5m9__btn {
    font-size: var(--fz-16);
  }

  .sitemap-5m9__btn--arrow {}

  .sitemap-5m9__btn--external {}

  .sitemap-5m9__cta {
    grid-area: cta;
  }

  .sitemap-5m9__nav+.sitemap-5m9__nav {
    margin-top: 0;
    align-self: start;
  }

  .sitemap-5m9__logo {
    margin-bottom: calc(6*var(--rem));
    margin-left: 0;
  }
}

/* #endregion */