@charset "UTF-8";

/* ===========================================
 * アフターサポート共通パーツ
 * ======================================== */

/* 表示 */
@media screen and (max-width: 768px) {
  .u-pc-only {
    display: none !important;
  }
}

@media not screen and (max-width: 768px) {
  .u-sp-only {
    display: none !important;
  }
}

/* 中央配置 */
.u-center {
  margin-inline: auto !important;
}

/* 段落 */
.as :where(p) {
  font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
  .as :where(p) {
    font-size: 1.4rem;
  }
}

/* ボタン */
.as-btn__link {
  font-size: 16px;
  font-family: "TBUDゴシック B", "TBUDGothic B";
  letter-spacing: 0;
  line-height: 1.2;
  padding: 20px 10px 20px 14px;
  border: solid 1px #c5c5c5;
  color: #333333;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.as-btn__link img {
  padding: 0 8px 0 20px;
}

.as-btn__link::after {
  content: "";
  flex-shrink: 0;
  display: block;
  width: 24px;
  aspect-ratio: 1;
  mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.2756 13.1309C15.596 12.7382 15.5734 12.1592 15.2073 11.793L10.2073 6.79304C9.81674 6.40252 9.18373 6.40252 8.7932 6.79304C8.40268 7.18357 8.40268 7.81658 8.7932 8.20711L13.0862 12.5001L8.7932 16.793C8.40268 17.1836 8.40268 17.8166 8.7932 18.2071C9.18373 18.5976 9.81674 18.5976 10.2073 18.2071L15.2073 13.2071L15.2756 13.1309Z" fill="%23E7380C"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: #e7380c;
}

/* 丸アイコン見出し */
.as-circle-heading {
  font-size: 24px;
  font-family: "TBUDゴシック B", "TBUDGothic B";
  letter-spacing: 0.05em;
  line-height: 1.2;
  padding-left: 20px;
  margin-bottom: 28px;
  position: relative;
}

.as-circle-heading::before {
  content: "";
  position: absolute;
  top: calc(0.5em * 1.2);
  translate: 0 -50%;
  left: 0;
  width: 12px;
  aspect-ratio: 1;
  background-color: #e7380c;
  border-radius: 50%;
}

@media screen and (max-width: 768px) {
  .as-circle-heading {
    font-size: 18px;
    margin-bottom: 20px;
  }
}

/* ロゴボタン */
.as-logo-btn {
  max-width: fit-content;
  flex-shrink: 0;
}

.as-logo-btn__link {
  font-family: "TBUDゴシック B", "TBUDGothic B";
  letter-spacing: 0;
  line-height: 1.2;
  padding: 16px 16px 16px 32px;
  border: solid 1px #c5c5c5;
  color: #333333;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #fff;
}

.as-logo-btn__link::after {
  content: "";
  flex-shrink: 0;
  display: block;
  width: 24px;
  aspect-ratio: 1;
  mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.2756 13.1309C15.596 12.7382 15.5734 12.1592 15.2073 11.793L10.2073 6.79304C9.81674 6.40252 9.18373 6.40252 8.7932 6.79304C8.40268 7.18357 8.40268 7.81658 8.7932 8.20711L13.0862 12.5001L8.7932 16.793C8.40268 17.1836 8.40268 17.8166 8.7932 18.2071C9.18373 18.5976 9.81674 18.5976 10.2073 18.2071L15.2073 13.2071L15.2756 13.1309Z" fill="%23E7380C"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: #e7380c;
}

.as-logo-btn__link div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.as-logo-btn img {
  max-width: 100%;
  height: auto;
}

.-lg .as-logo-btn__link {
  padding: 20px 12px 20px 30px;
}

.-sm .as-logo-btn__link {
  padding: 8px 6px 8px 16px;
  border-radius: 6px;
  gap: 4px;
}

@media screen and (max-width: 768px) {
  .as-logo-btn__link {
    padding: 12px 10px 12px 24px;
  }
}

/* グリッド */
.as-grid-col2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 16px;
}

@media screen and (max-width: 768px) {
  .as-grid-col2 {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
}

/* ページ内リンク */
.as-page-link {
  display: flex;
  gap: 8px;
  align-items: center;
}

.as-page-link__link {
  font-size: 16px;
  font-family: "TBUDゴシック B", "TBUDGothic B";
  letter-spacing: 0;
  line-height: 1.2;
  padding: 20px 8px 20px 10px;
  border: solid 1px #c5c5c5;
  color: #333333;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.as-page-link__link::after {
  content: "";
  flex-shrink: 0;
  display: block;
  width: 24px;
  aspect-ratio: 1;
  mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 10L12 15L7 10" stroke="%23E7380C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: #e7380c;
}

.-bottom .as-page-link__link::after {
  transform: scale(1, -1);
}

@media screen and (max-width: 1024px) {
  .as-page-link {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 768px) {
  .as-page-link__link {
    font-size: 15px;
    padding: 12px 8px 12px 12px;
  }

  .as-page-link__link::after {
    width: 16px;
  }
}

/* モーダル */
.as-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.as-modal.is-active {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.as-modal__close {
  position: absolute;
  display: block;
  background-color: transparent;
  top: 0;
  right: 0;
  transform: translateX(35%) translateY(-28%);
  z-index: 1;
  cursor: pointer;
}

.as-modal__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.as-modal__content {
  z-index: 1;
  position: relative;
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 1000px;
  background: #fff;
  padding: 30px;
  border-radius: 8px;
}

/* SP時パンクズリスト */
@media screen and (max-width: 768px) {
  .topic-path {
    margin-bottom: 0 !important;
  }

  .topic-path__body {
    margin-bottom: 0px;
    border-bottom: 1px solid #d2d2d2;
  }

  .pagetop {
    order: -1;
  }

  .contents-lower{
    margin-bottom: 0 !important;
  }
}

/* SP時 赤背景メニュー */
@media screen and (max-width: 768px) {
  .lnav__ttl__link {
    padding: 4px 10px 4px 15px !important;
  }
}

/* ===========================================
 * ノーリツ製品の交換部品・消耗品のご購入ページ
 * ======================================== */
/* どんな部品が買えるの？ */
.as-parts-what-kind__inner {
  display: flex;
  align-items: flex-end;
  gap: 20px 28px;
}

.as-parts-what-kind__wrap {
  display: grid;
  grid-template-columns: 225px 1fr;
  align-items: start;
  gap: 12px;
}

.as-parts-what-kind-tab-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.as-parts-what-kind-tab-btn__link {
  background-color: transparent;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 20px;
  align-items: center;
  color: #333333 !important;
  border: solid 1px #c5c5c5;
  border-radius: 6px;
  font-size: 15px;
  font-family: "TBUDゴシック B", "TBUDGothic B";
  letter-spacing: 0;
  line-height: 1.2;
  padding: 8px 12px 12px;
  width: 100%;
  transition: 0.3s all;
  cursor: pointer;
  height: 100%;
}

.as-parts-what-kind-tab-btn__link:hover {
  opacity: 0.6;
}

.as-parts-what-kind-tab-btn__link p {
  text-align: center;
  line-height: 1.4;
}

.as-parts-what-kind-tab-btn__link span {
  font-size: 12px;
}

.as-parts-what-kind-tab-btn__link img {
  margin-inline: auto;
}

.as-parts-what-kind-tab-btn__link.is-active {
  background-color: #fdead6;
  color: #e7380c;
}

.as-parts-what-kind-tab-content__pic {
  display: none;
}

.as-parts-what-kind-tab-content__pic.is-active {
  display: block;
}

@media screen and (max-width: 1024px) {
  .as-parts-what-kind__inner {
    flex-direction: column;
    align-items: start;
  }

  .as-parts-what-kind-tab-btn__link {
    font-size: 14px;
    gap: 4px;
    place-content: center;
  }

  .as-parts-what-kind-tab-btn__link img {
    max-width: 24px;
    height: auto;
  }
}

@media screen and (max-width: 768px) {
  .as-parts-what-kind__wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .as-parts-what-kind-tab-btns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-inline: auto;
  }

  .as-parts-what-kind-tab-btn__link {
    grid-template-columns: 1fr;
    padding: 8px 12px;
  }

  .as-parts-what-kind-tab-btn__link p {
    line-height: 1.2;
  }
}

/* 部品はどこで買えるの？ */
.as-parts-where-card {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  border: solid 1px #c5c5c5;
  border-radius: 6px;
}

.as-parts-where-card__heading {
  font-size: 24px;
  font-family: "TBUDゴシック B", "TBUDGothic B";
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
}

.as-parts-where-card small {
  font-size: 11px;
  margin: 4px;
  display: inline-block;
}

@media screen and (max-width: 768px) {
  .as-parts-where-card {
    padding: 20px;
    gap: 12px;
  }

  .as-parts-where-card__heading {
    font-size: 20px;
  }

  .as-parts-where-card small {
    line-height: 1.6;
    text-indent: -1em;
    padding-left: 1em;
  }
}

/* どれを買ったらいいかわからない方へ */
.as-parts-contact {
  margin-top: 32px;
}

.as-parts-contact__thought {
  text-align: center;
}

.as-parts-contact__thought img {
  width: 100%;
  height: auto;
  max-width: 490px;
}

.as-parts-contact-box {
  background-color: #fdead6;
  padding: 24px 38px;
  border-radius: 6px;
}

.as-parts-contact-box-intro {
  max-width: 675px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 16px;
  margin-top: -7%;
}

.as-parts-contact-box-intro__pic img {
  max-width: 103px;
  width: 100%;
  height: auto;
}

.as-parts-contact-box-intro__txt {
  flex-shrink: 0;
}

.as-parts-contact__heading {
  font-size: 18px;
  font-family: "TBUDゴシック B", "TBUDGothic B";
  letter-spacing: 0;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  width: 100%;
  background-color: #e7380c;
  border-radius: 4px;
  padding: 8px 12px;
}

.as-parts-contact-box-btn {
  display: flex;
}

.as-parts-contact-box-btn__link {
  padding: 32px 4px 32px 12px;
  background-color: #fff;
  border: solid 1px #c5c5c5;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.as-parts-contact-box-btn__link.-tel {
  padding: 24px 12px 24px 12px;
}

.as-parts-contact-box-btn__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  gap: 6px;
  font-size: 24px;
  font-family: "TBUDゴシック B", "TBUDGothic B";
  letter-spacing: 0.03em;
  line-height: 1;
  margin-bottom: 8px;
}

.as-parts-contact-box-btn__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  font-size: 33px;
  font-family: "TBUDゴシック B", "TBUDGothic B";
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: 12px;
}

.as-parts-contact-box-btn__heading::after {
  content: "";
  flex-shrink: 0;
  display: block;
  width: 24px;
  aspect-ratio: 1;
  mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.2756 13.1309C15.596 12.7382 15.5734 12.1592 15.2073 11.793L10.2073 6.79304C9.81674 6.40252 9.18373 6.40252 8.7932 6.79304C8.40268 7.18357 8.40268 7.81658 8.7932 8.20711L13.0862 12.5001L8.7932 16.793C8.40268 17.1836 8.40268 17.8166 8.7932 18.2071C9.18373 18.5976 9.81674 18.5976 10.2073 18.2071L15.2073 13.2071L15.2756 13.1309Z" fill="%23E7380C"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: #e7380c;
}

.as-parts-contact-box-btn__sup {
  font-size: 14px;
  color: #333333;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-align: center;
}

.as-parts-contact-box__note {
  display: block;
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: center;
  margin-top: 12px;
}

@media screen and (max-width: 768px) {
  .as-parts-contact-box {
    padding: 16px;
  }

  .as-parts-contact-box-intro {
    flex-direction: column;
    align-items: center;
    margin: 0;
    gap: 8px;
  }

  .as-parts-contact-box-btn__link,
  .as-parts-contact-box-btn__link.-tel {
    padding: 20px 8px;
  }

  .as-parts-contact-box-intro__pic img {
    max-width: 60px;
  }

  .as-parts-contact__heading {
    font-size: 14px;
    padding: 4px 12px;
  }

  .as-parts-contact-box-btn__heading {
    font-size: 20px;
  }

  .as-parts-contact-box-btn__heading svg {
    width: 24px;
    height: 24px;
  }

  .as-parts-contact-box-btn__tel {
    font-size: 28px;
  }

  .as-parts-contact-box-btn__sup {
    font-size: 12px;
  }

  .as-parts-contact-box__note {
    font-size: 13px;
    text-indent: -1em;
    padding-left: 1em;
    text-align: left;
  }
}

/* サイド用スタイル */
.as-parts-snav-follow {
  position: sticky;
  top: 40px;
  margin-top: 36px;
}

.as-parts-snav-follow .as-logo-btn {
  max-width: 100%;
}

.as-parts-snav-follow .as-logo-btn__link {
  justify-content: center;
}

.-side.as-parts-contact-box {
  padding: 16px 16px 12px;
}

.-side .as-parts-contact-box-intro {
  margin: 0;
  gap: 8px 14px;
}

.-side .as-parts-contact-box-intro__pic {
  max-width: 46px;
}

.-side .as-parts-contact__heading {
  font-size: 14px;
  padding: 4px 12px;
  margin-bottom: 0;
}

.-side .as-parts-contact-box-btn__link {
  padding: 16px 10px 16px 16px;
}

.-side .as-parts-contact-box-btn__link.-tel {
  padding: 16px;
}

.-side .as-parts-contact-box-intro__txt {
  font-size: 14px;
  font-family: "TBUDゴシック B", "TBUDGothic B";
  flex-shrink: 1;
}

.-side .as-parts-contact-box-btn__heading {
  font-size: 16px;
  margin-bottom: 6px;
  gap: 3px;
}

.-side .as-parts-contact-box-btn__heading::after {
  width: 20px;
  height: 20px;
}

.-side .as-parts-contact-box-btn__heading svg,
.-side .as-parts-contact-box-btn__tel svg {
  width: 24px;
  height: 24px;
}

.-side .as-parts-contact-box-btn__tel {
  font-size: 22px;
  margin-bottom: 6px;
}

.-side .as-parts-contact-box-btn + .as-parts-contact-box-btn {
  margin-top: 10px;
}

.-side .as-parts-contact-box-btn__sup {
  font-size: 13px;
  line-height: 1.4;
}

@media screen and (max-width: 1024px) {
  .-side .as-parts-contact-box-intro {
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (max-width: 768px) {
  .as-parts-snav-follow {
    display: none;
  }

  .-side .as-parts-contact-box-intro {
    flex-direction: row;
  }
}

/* 追従ボタン */
.as-parts-follow {
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  padding: 8px 8px;
  z-index: 1;
}

.as-parts-follow__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  max-width: 375px;
  margin-inline: auto;
}

.as-parts-follow-btn__link {
  padding: 8px;
  color: #333333 !important;
  background-color: #fdead6;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  font-size: 12px;
  font-family: "TBUDゴシック B", "TBUDGothic B";
  letter-spacing: 0.05em;
  line-height: 1.35em;
  width: 100%;
  height: 100%;
}

.as-parts-follow-btn__link img {
  max-width: 40px;
  width: 100%;
  height: auto;
}

.as-parts-follow .as-logo-btn {
  max-width: 100%;
}

/* モーダル */
.as-parts-modal .as-modal__bg {
  background-color: transparent;
  pointer-events: auto;
}

.as-parts-modal.is-active {
  align-items: flex-end !important;
  justify-content: flex-end !important;
  padding: 15px;
  pointer-events: none;
}

.as-parts-modal__content {
  max-width: 280px;
  padding: 0;
  background-color: transparent;
  box-shadow: 0px 4px 4px #33333320;
  pointer-events: auto;
  transform: translateY(50px);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.as-parts-modal.is-active .as-parts-modal__content {
  transform: translateY(0);
}

.as-parts-modal .as-modal__close {
  transform: translateX(40%) translateY(-20%);
}