@charset "utf-8";
/********************
その他ページ用CSS
  /products/fire_manufacturing/
  /products/fire_engine/
  /products/fire_information/
  /products/aluminium/
  /products/halon/
  /equip-list/
  /equip-list/list01/
  /equip-list/list02/
  /equip-list/list03/
 ********************/

.prod-pageHeader {
  position: relative;
  & > div:first-child {
    z-index: 10;
  }
}

.prod-observerArea {
  & > .prod-section:nth-child(2) {
    padding-block-start: 0;
  }
}

.prod-section {
  position: relative;
  z-index: 1;
  [data-header="hero"] +& {
    padding-block-start: min(8.78vw,120px);
  }
}

.etc-pageHeader_img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: 100% !important;
  height: auto;
  aspect-ratio: 1366/357;
  margin: auto;
  padding-inline: 0 !important;
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (width <= 760px) {
  .etc-pageHeader_img {
    height: 100%;
  }
}


/***** 製造の様子 *****/
.etc-stepBox {
  position: relative;
  width: min(60.03vw,820px);
  padding-inline: min(3.66vw,50px);
  border-radius: min(0.44vw,6px);
  background-color: #F8F8F8;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  &:nth-child(odd) {
    border: 1px solid #A83B3E;
    &::before {
      right: calc(min(22.69vw,310px) * -1);
      background: url(../img/page_etc/img_manufacturing_road_01.svg) no-repeat center/contain;
    }
  }
  &:nth-child(even) {
    margin-inline-start: auto;
    &::before {
      left: calc(min(22.69vw,310px) * -1);
      background: url(../img/page_etc/img_manufacturing_road_02.svg) no-repeat center/contain;
    }
  }
  &:not(:first-child) {
    margin-block-start: min(5.86vw,80px);
  }
  &:last-of-type {
    &::before {
      content: none;
    }
  }
  &::before {
    position: absolute;
    bottom: calc(min(18.81vw,257px) * -1);
    z-index: -1;
    display: block;
    width: min(28.26vw,386px);
    height: auto;
    aspect-ratio: 386/367;
    opacity: 0.2;
    content: "";
  }
}
@media (width <= 760px) {
  .etc-stepBox {
    width: 100%;
    padding-inline: 4vw;
    &:nth-child(odd) {
      &::before {
        right: 2.67vw;
      }
    }
    &:nth-child(even) {
      &::before {
        left: 2.67vw;
      }
    }
    &:not(:first-child) {
      margin-block-start: 14.13vw;
    }
    &::before {
      bottom: -48vw;
      width: 89.33vw;
    }
  }
}

.etc-stepBox_header {
  padding-block: min(2.71vw,37px);
  & + .etc-stepBox_header {
    border-block-start: 3px solid #FFF;
  }
}
@media (width <= 760px) {
  .etc-stepBox_header {
    padding-block: 5.87vw;
  }
}

.etc-stepBox_hgroup {
  display: flex;
}
@media (width <= 760px) {
  .etc-stepBox_hgroup {
    flex-wrap: wrap;
  }
}

.etc-stepBox_step {
  align-self: flex-start;
  flex-shrink: 0;
  width: min(3.8vw,52px);
  height: auto;
  aspect-ratio: 52/66;
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .etc-stepBox_step {
    width: 13.87vw;
  }
}

.etc-stepBox_ttl {
  flex-shrink: 0;
  margin-block-start: min(1.24vw,17px);
  margin-inline-start: min(1.46vw,20px);
  font-size: min(2.49vw,34px);
  font-weight: 600;
  line-height: 1.44;
}
@media (width <= 760px) {
  .etc-stepBox_ttl {
    margin-block-start: 4.53vw;
    margin-inline-start: 5.33vw;
    font-size: 6.4vw;
  }
}

.etc-stepBox_txt {
  align-self: center;
  margin-block-start: min(1.02vw,14px);
  margin-inline-start: min(2.2vw,30px);
  font-size: min(1.17vw,16px);
  letter-spacing: 0.005em;
  line-height: 1.5;
}
@media (width <= 760px) {
  .etc-stepBox_txt {
    margin-block-start: 6.4vw;
    margin-inline-start: 0;
    font-size: 4.27vw;
  }
}

.etc-stepBox_body {
  .etc-stepBox:nth-child(odd) & {
    padding-block: min(1.46vw,20px) min(2.93vw,40px);
  }
  .etc-stepBox:nth-child(even) & {
    padding-block: 0 min(3.66vw,50px);
  }
}
@media (width <= 760px) {
  .etc-stepBox_body {
    .etc-stepBox:nth-child(odd) & {
      padding-block: 2.67vw 12vw;
    }
    .etc-stepBox:nth-child(even) & {
      padding-block-end: 8vw;
    }
  }
}

.etc-stepBox_img {
  width: min(37.34vw,510px);
  height: auto;
  aspect-ratio: 510/245;
  margin-inline: auto;
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .etc-stepBox_img {
    width: 100%;
  }
}

.etc-stepBox_items {
  & ul {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: min(3.22vw,44px) min(3.66vw,50px);
  }
}
@media (width <= 760px) {
  .etc-stepBox_items {
    & ul {
      grid-template-columns: 100%;
      gap: 8vw 0;
    }
  }
}

.etc-stepBoxItem {
  .etc-stepBox_body > & {
    display: grid;
    align-items: center;
    gap: 0 3.66vw;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (width <= 760px) {
  .etc-stepBoxItem {
    .etc-stepBox_body > & {
      gap: 3.73vw 0;
      grid-template-columns: 100%;
    }
  }
}

.etc-stepBoxItem_img {
  border-radius: min(0.44vw,6px);
  overflow: hidden;
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .etc-stepBoxItem_img {
    border-radius: 1.6vw;
  }
}

.etc-stepBoxItem_ttl {
  margin-block-start: min(0.88vw,12px);
  font-size: min(1.76vw,24px);
  font-weight: 500;
  letter-spacing: 0.025em;
}
@media (width <= 760px) {
  .etc-stepBoxItem_ttl {
    margin-block-start: 3.2vw;
    font-size: 6.4vw;
  }
}

.etc-stepBoxItem_txt {
  margin-block-start: min(0.88vw,12px);
  font-size: min(1.17vw,16px);
  letter-spacing: 0.015em;
  line-height: 1.5;
}
@media (width <= 760px) {
  .etc-stepBoxItem_txt {
    margin-block-start: 3.2vw;
    font-size: 4.27vw;
  }
}

.etc-stepBoxSlogan {
  margin-block-start: min(4.39vw,60px);
  color: #A83B3E;
  font-size: min(1.32vw,18px);
  font-weight: 500;
  letter-spacing: -0.015em;
  text-align: center;
}
@media (width <= 760px) {
  .etc-stepBoxSlogan {
    margin-block-start: 10.67vw;
    font-size: 4.8vw;
  }
}


/***** 日本ドライケミカルの消防車 *****/
.etc-catalogs {
  & ul {
    display: grid;
    gap: 3.51vw;
    grid-template-columns: repeat(5,minmax(0,1fr));
  }
}
@media (width <= 760px) {
  .etc-catalogs {
    & ul {
      gap: 5.33vw 8vw;
      grid-template-columns: repeat(3,minmax(0,1fr));
    }
  }
}

.etc-catalog {
  display: block;
}

.etc-catalog_img {
  & img {
    width: 100%;
    height: 100%;
  }
}

.etc-catalog_name {
  margin-block-start: min(1.17vw,16px);
  font-size: min(1.46vw,20px);
  font-weight: 500;
  line-height: 1.7;
  transition: color 0.3s ease-out;
}
@media (width <= 760px) {
  .etc-catalog_name {
    margin-block-start: 4.27vw;
    font-size: 3.47vw;
  }
}
@media (hover: hover) {
  .etc-catalog:hover {
    .etc-catalog_name {
      color: var(--hover-color);
      text-decoration: underline;
    }
  }
}


/***** 自火報リニューアル *****/
.etc-introductionWrap {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-block-end: min(5.86vw,80px);
  padding-inline: 60px;
}
@media (width <= 760px) {
  .etc-introductionWrap {
    padding-inline: 2.67vw;
  }
}

.etc-introductionWrap_slogan {
  padding-block: min(8.56vw,80px);
  font-size: min(2.56vw,35px);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--txt-black-color);
}
@media (width <= 760px) {
  .etc-introductionWrap_slogan {
    padding-block: 13.33vw;
    font-size: 7.47vw;
    line-height: 1.64;
  }
}

.etc-introduction {
  display: grid;
  gap: 0 min(6.73vw,92px);
  grid-template-columns: min(49.78vw,680px) minmax(0,1fr);
}
@media (width <= 760px) {
  .etc-introduction {
    gap: 12vw 0;
    grid-template-columns: 100%;
  }
}

.etc-introduction_ttl {
  font-size: min(1.61vw,22px);
  font-weight: 600;
  color: var(--txt-black-color);
  letter-spacing: 0.03em;
}
@media (width <= 760px) {
  .etc-introduction_ttl {
    font-size: 5.87vw;
    line-height: 1.81;
  }
}

.etc-introduction_txt {
  margin-block-start: min(2.2vw,30px);
  font-size: min(1.32vw,18px);
  letter-spacing: 0.015em;
  line-height: 1.83;
}
@media (width <= 760px) {
  .etc-introduction_txt {
    margin-block-start: 6.67vw;
    font-size: 4.8vw;
  }
}

.etc-introduction_strong {
  margin-block-start: min(1.76vw,24px);
  font-size: min(1.32vw,18px);
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.83;
  color: var(--txt-black-color);
}
@media (width <= 760px) {
  .etc-introduction_strong {
    margin-block-start: 8vw;
    font-size: 4.8vw;
  }
}

.etc-introduction_img {
  & img {
    width: 100%;
    height: 100%;
  }
}

.etc-introduction_linkBtnWrap {
  margin-block-start: min(1.61vw,22px);
}
@media (width <= 760px) {
  .etc-introduction_linkBtnWrap {
    margin-block-start: 12vw;
  }
}

.prod-section[data-bg="offwhite"] {
  background-color: #F8F7F4;
}

.etc-necessityBox {
  margin-block-start: min(3.66vw,50px);
  & + .etc-necessityBox {
    margin-block-start: min(7.32vw,100px);
  }
}
@media (width <= 760px) {
  .etc-necessityBox {
    margin-block-start: 8vw;
    & + .etc-necessityBox {
      margin-block-start: 21.33vw;
    }
  }
}

.etc-necessityBox_ttl {
  padding-block: min(0.51vw,7px);
  border: 2px solid #EAA100;
  border-radius: 9999px;
  background-color: #FFF;
  color: #EAA100;
  font-size: min(1.46vw,24px);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
}
@media (width <= 760px) {
  .etc-necessityBox_ttl {
    padding-block: 1.07vw;
    font-size: 6.4vw;
  }
}

.etc-necessityItems {
  margin-block-start: min(2.56vw,35px);
  & ul {
    display: grid;
    gap: min(1.46vw,20px);
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (width <= 760px) {
  .etc-necessityItems {
    margin-block-start: 9.33vw;
    & ul {
      gap: 5.33vw 0;
      grid-template-columns: 100%;
    }
  }
}

.etc-necessityItem {
  padding-block: min(2.93vw,40px) min(2.34vw,32px);
  padding-inline: min(3.95vw,54px);
  border-radius: min(0.59vw,8px);
  background-color: #FFF;
}
@media (width <= 760px) {
  .etc-necessityItem {
    padding-block: 10.67vw 8.53vw;
    padding-inline: 1.6vw;
    border-radius: 2.13vw;
  }
}

.etc-necessityItem_ttl {
  font-size: min(1.54vw,21px);
  font-weight: 600;
  letter-spacing: 0.015em;
  text-align: center;
  color: var(--txt-black-color);
}
@media (width <= 760px) {
  .etc-necessityItem_ttl {
    font-size: 5.6vw;
  }
}

.etc-necessityItem_img {
  width: 100%;
  margin-block-start: min(2.34vw,32px);
  margin-inline: auto;
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .etc-necessityItem_img {
    margin-block-start: 8vw;
  }
}

.etc-necessityItem2 {
  display: grid;
  gap: 0 min(3.51vw,48px);
  grid-template-columns: min(34.63vw,473px) min(31.55vw,431px);
  margin-block-start: min(2.56vw,35px);
  padding-block: min(2.93vw,40px) min(3.22vw,44px);
  padding-inline: min(10.47vw,143px);
  border-radius: min(0.59vw,8px);
  background-color: #FFF;
}
@media (width <= 760px) {
  .etc-necessityItem2 {
    gap: 12.53vw 0;
    grid-template-columns: 100%;
    margin-block-start: 9.33vw;
    padding-block: 6.67vw 7.47vw;
    padding-inline: 3.2vw;
    border-radius: 2.13vw;
  }
}

.etc-necessityItem2_dl {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: min(0.73vw,10px) 0;
  & > div {
    display: grid;
    align-items: center;
    gap: 0 min(3.81vw,52px);
    grid-template-columns: min(10.83vw,148px) min(19.84vw,271px);
    padding-block: min(0.81vw,11px);
    padding-inline: min(1.61vw,22px) min(1.32vw,18px);
    background-color: #F8F8F8;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - min(0.44vw,6px)), calc(100% - min(0.44vw,6px)) 100%, 0 100%);
  }
  & dt {
    position: relative;
    font-size: min(1.17vw,16px);
    font-weight: 500;
    letter-spacing: 0.015em;
    color: var(--txt-black-color);
    &::after {
      position: absolute;
      top: 50%;
      right: calc(min(2.34vw,32px) * -1);
      translate: 0 -50%;
      display: block;
      width: min(1.24vw,17px);
      height: auto;
      aspect-ratio: 17/9;
      background: url(../img/page_etc/img_fireinformation_arrow.svg) no-repeat center/contain;
      content: "";
    }
  }
  & dd {
    color: #C30D23;
    font-size: min(1.54vw,21px);
    font-weight: 600;
    letter-spacing: 0.015em;
  }
}
@media (width <= 760px) {
  .etc-necessityItem2_dl {
    gap: 2.13vw 0;
    & > div {
      gap: 0 12.53vw;
      grid-template-columns: 27.2vw 38.93vw;
      padding-block: 2.4vw;
      padding-inline: 4.53vw;
    }
    & dt {
      font-size: 2.93vw;
      &::after {
        right: -8.27vw;
        width: 2.93vw;
      }
    }
    & dd {
      font-size: 3.46vw;
    }
  }
}

.etc-necessityItem2_strong {
  position: relative;
  z-index: 5;
  margin-block-start: min(2.2vw,30px);
  font-size: min(1.54vw,21px);
  font-weight: 600;
  letter-spacing: 0.015em;
  text-align: center;
  color: var(--txt-black-color);
  &::before {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    display: block;
    width: min(13.62vw,186px);
    height: auto;
    aspect-ratio: 1;
    background: url(../img/page_etc/img_fireinformation_jaggy.svg) no-repeat center/contain;
    content: "";
  }
}
@media (width <= 760px) {
  .etc-necessityItem2_strong {
    margin-block-start: 8.8vw;
    font-size: 4vw;
    letter-spacing: 0;
    &::before {
      width: 37.07vw;
    }
  }
}

.etc-guidelineImg {
  margin-block: min(3.66vw,50px);
}
@media (width <= 760px) {
  .etc-guidelineImg {
    margin-block: 13.33vw 10.67vw;
    padding-inline: 7.47vw;
  }
}

.etc-guidelines {
  display: flex;
  flex-direction: column;
  gap: min(0.73vw,10px) 0;
  margin-block-start: min(3.37vw,46px);
}
@media (width <= 760px) {
  .etc-guidelines {
    gap: 2.67vw 0;
    margin-block-start: 16vw;
  }
}

.etc-guideline {
  display: grid;
  grid-template-columns: min(19.76vw,270px) minmax(0,1fr);
  padding-block: min(3.66vw,50px);
  padding-inline: min(6.44vw,88px) min(3.66vw,50px);
  background-color: #F8F7F4;
  & dt {
    align-self: center;
    width: min(9.22vw,126px);
    height: auto;
    aspect-ratio: 126/56;
    & img {
      width: 100%;
      height: 100%;
    }
  }
  & dd {
    display: grid;
    gap: min(2.19vw,30px) min(1.68vw,23px);
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (width <= 760px) {
  .etc-guideline {
    gap: 13.33vw 0;
    grid-template-columns: 100%;
    padding-block: 10.67vw 9.33vw;
    padding-inline: 2.67vw;
    & dt {
      width: 33.6vw;
      margin-inline: auto;
    }
    & dd {
      gap: 9.33vw 0;
      grid-template-columns: 100%;
    }
  }
}

.etc-guidelinePanel_img {
  width: 100%;
  height: auto;
  aspect-ratio: 400/240;
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .etc-guidelinePanel_img {
    width: 100%;
  }
}

.etc-guideline-3grid {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
@media (width <= 760px) {
  .etc-guideline-3grid {
    grid-template-columns: 100%;
    grid-template-rows:unset;
  }
}
.etc-guidelinePanel._wide_3grid {
  grid-area: 1 / 1 / 2 / 3;
  & .etc-guidelinePanel_img {
    width: 100%;
    aspect-ratio: 823 / 240;
  }
}
@media (width <= 760px) {
  .etc-guidelinePanel._wide_3grid {
    grid-area: unset;
    & .etc-guidelinePanel_img {
      width: 100%;
      aspect-ratio: 400 / 240;
      & img {
        object-fit: cover;
      }
    }
  }
}


.etc-guidelinePanel_name {
  margin-block-start: min(1.17vw,16px);
  font-size: min(1.32vw,18px);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--txt-black-color);
}
@media (width <= 760px) {
  .etc-guidelinePanel_name {
    margin-block-start: 4.27vw;
    font-size: 4.8vw;
  }
}

.etc-exchange {
  margin-block-end: min(3.66vw,50px);
  color: #303030;
  & table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  & thead {
    & th {
      padding-block: min(0.66vw,9px);
      border: 1px solid #D0D0D0;
      background-color: #E8E8E8;
      font-size: min(1.32vw,18px);
    }
  }
  & tbody {
    & th {
      padding-block: min(0.51vw,7px);
      border: 1px solid #D0D0D0;
      font-size: min(1.17vw,16px);
      font-weight: 500;
      letter-spacing: 0.015em;
      text-align: center;
    }
    & td {
      padding-block: min(0.51vw,7px);
      border: 1px solid #D0D0D0;
      font-size: min(1.32vw,18px);
      font-weight: 500;
      letter-spacing: 0.015em;
      text-align: center;
    }
  }
}
@media (width <= 760px) {
  .etc-exchange {
    margin-block-end: 10.67vw;
    & thead {
      & th {
        padding-block: 3.2vw;
        font-size: 4.27vw;
        &:nth-child(1) {
          width: 70%;
        }
        &:nth-child(2) {
          width: 30%;
        }
      }
    }
    & tbody {
      & th {
        padding-block: 3.2vw;
        font-size: 3.73vw;
      }
      & td {
        padding-block: 3.2vw;
        font-size: 4.27vw;
      }
    }
  }
}

.etc-exchange_txt {
  margin-block-start: min(0.88vw,12px);
  font-size: min(1.17vw,16px);
  letter-spacing: 0.015em;
  text-align: right;
}
@media (width <= 760px) {
  .etc-exchange_txt {
    margin-block-start: 3.2vw;
    font-size: 4.27vw;
  }
}

.etc-pdfLinkBtnWrap {
  width: min(44.66vw,610px);
  margin-block-start: min(1.1vw,15px);
  &._fireinfopdf {
    width: min(27.6vw,377px);
  }
}
@media (width <= 760px) {
  .etc-pdfLinkBtnWrap {
    width: 100%;
    margin-block-start: 4vw;
    &._fireinfopdf {
      width: 100%;
    }
  }
}



.etc-pdfLinkBtn {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding-block: min(0.88vw,12px);
  padding-inline: min(1.1vw,15px) min(3.66vw,50px);
  border-radius: 4px;
  background-color: #F4F7F8;
  font-size: min(1.17vw,16px);
  font-weight: 500;
  letter-spacing: 0.015em;
  transition: color 0.3s ease-out;
  &::after {
    position: absolute;
    top: 50%;
    right: min(0.73vw,10px);
    translate: 0 -50%;
    display: block;
    width: min(2.2vw,30px);
    height: auto;
    aspect-ratio: 1;
    background: url(../img/common/icn_link_pdf.svg) no-repeat center/cover;
    content: "";
  }
}
@media (width <= 760px) {
  .etc-pdfLinkBtn {
    padding-block: 3.2vw;
    padding-inline: 3.73vw 16vw;
    border-radius: 1.07vw;
    font-size: 4.27vw;
    &::after {
      right: 2.67vw;
      width: 8vw;
    }
  }
}
@media (hover: hover) {
  .etc-pdfLinkBtn:hover {
    color: var(--hover-color);
  }
}

.etc-recommendation {
  margin-block-start: min(3.66vw,50px);
}
@media (width <= 760px) {
  .etc-recommendation {
    margin-block-start: 13.33vw;
    overflow-x: auto;
  }
}

@media (width <= 760px) {
  .etc-recommendation_img {
    width: 330.67vw;
  }
}

.etc-contact_linkBtnWrap {
  width: min(90.78vw,1240px);
  margin-inline: auto;
  padding-block: min(7.32vw,100px);
}
@media (width <= 760px) {
  .etc-contact_linkBtnWrap {
    width: 100%;
    padding-block: 13.33vw;
    padding-inline: 2.67vw;
  }
}

/* .etc-contact_linkBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block: min(0.88vw,12px);
  background-color: #2B4E76;
  color: #FFF;
  font-size: min(1.76vw,24px);
  font-weight: 600;
  & span {
    position: relative;
    padding-inline-end: min(2.2vw,30px);
    &::before, &::after {
      position: absolute;
      top: 50%;
      right: 0;
      translate: 0 -50%;
      width: min(1.56vw,20px);
      height: auto;
      aspect-ratio: 1;
    }
    &::before {
      border-radius: 50%;
      background-color: #FFF;
      transition: background 0.3s ease-out;
      content: "";
    }
    &::after {
      background: #202020;
      mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
      transition: background 0.3s ease-out, mask 0.3s ease-out;
      content: "";
    }
  }
}
@media (width <= 760px) {
  .etc-contact_linkBtn {
    padding-block: 4.53vw;
    padding-inline: 4.53vw;
    font-size: 4.8vw;
    & span {
      padding-inline-end: 8vw;
      &::before, &::after {
        width: 5.33vw;
      }
    }
  }
}
@media (hover:hover) {
  .etc-contact_linkBtn:hover {
    & span {
      &::before {
        background-color: var(--hover-color);
      }
      &::after {
        background-color: #FFF;
        mask-position: 0 0;
      }
    }
  }
} */

.etc-fz16 {
  font-size: min(1.17vw,16px);
}
@media (width <= 760px) {
  .etc-fz16 {
    font-size: 4.27vw;
  }
}

.etc-fz18 {
  font-size: min(1.32vw,18px);
}
@media (width <= 760px) {
  .etc-fz18 {
    font-size: 4.8vw;
  }
}

.etc-fz20 {
  font-size: min(1.46vw,20px);
}
@media (width <= 760px) {
  .etc-fz20 {
    font-size: 4.8vw;
  }
}



/***** アルミ製消火器の特長 *****/
.etc-leadBox {
  text-align: center;
}
@media (width <= 760px) {
  .etc-leadBox {
    padding-inline: 2.67vw;
  }
}

.etc-leadBox_slogan {
  padding-block: min(8.56vw,80px);
  font-size: min(2.56vw,35px);
  font-weight: 500;
  letter-spacing: 0.02em;
}
@media (width <= 760px) {
  .etc-leadBox_slogan {
    padding-block: 13.33vw;
    font-size: 7.47vw;
    line-height: 1.64;
  }
}

.etc-leadBox_txt {
  font-size: min(1.32vw,18px);
  letter-spacing: 0.015em;
  line-height: 1.89;
}
@media (width <= 760px) {
  .etc-leadBox_txt {
    font-size: 4.8vw;
  }
}

.etc-features {
  margin-block-end: min(5.12vw,70px);
  & ul {
    display: grid;
    gap: 0 min(2.56vw,35px);
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}
@media (width <= 760px) {
  .etc-features {
    margin-block-end: 12vw;
    & ul {
      gap: 6.67vw 0;
      grid-template-columns: 100%;
    }
  }
}

.etc-feature {
  padding-block: min(4.83vw,66px) min(3.66vw,50px);
  padding-inline: min(2.93vw,40px);
  border-radius: min(0.44vw,6px);
  background-color: #F4F7F8;
}
@media (width <= 760px) {
  .etc-feature {
    padding-block: 17.33vw 13.33vw;
    padding-inline: 5.87vw;
    border-radius: 1.6vw;
  }
}

.etc-feature_img {
  width: min(7.47vw,102px);
  height: auto;
  aspect-ratio: 102/82;
  margin-inline: auto;
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .etc-feature_img {
    width: 27.2vw;
  }
}

.etc-feature_ttl {
  margin-block-start: min(1.02vw,17px);
  font-size: min(1.76vw,24px);
  font-weight: 500;
  text-align: center;
}
@media (width <= 760px) {
  .etc-feature_ttl {
    margin-block-start: 4.27vw;
    font-size: 6.4vw;
  }
}

.etc-feature_txt {
  margin-block-start: min(1.76vw,24px);
  font-size: min(1.17vw,16px);
  letter-spacing: 0.015em;
}
@media (width <= 760px) {
  .etc-feature_txt {
    margin-block-start: 5.87vw;
    font-size: 4.27vw;
  }
}


/***** ハロン *****/
.etc-introduction2 {
  display: grid;
  gap: 0 min(5.86vw,80px);
  grid-template-columns: min(38.43vw,525px) minmax(0,1fr);
}
@media (width <= 760px) {
  .etc-introduction2 {
    gap: 12vw 0;
    grid-template-columns: 100%;
  }
}

.etc-introduction2_txt {
  font-size: min(1.32vw,18px);
  letter-spacing: 0.025em;
  line-height: 1.83;
}
@media (width <= 760px) {
  .etc-introduction2_txt {
    font-size: 4.8vw;
  }
}

.etc-introduction2_img {
  & img {
    width: 100%;
    height: 100%;
  }
}

.etc-furlongSlogan {
  font-size: min(2.56vw,35px);
  color: var(--txt-black-color);
  font-weight: 500;
  line-height: 1.66;
  text-align: center;
}
@media (width <= 760px) {
  .etc-furlongSlogan {
    font-size: 7.47vw;
  }
}

.etc-furlongFeaturesImg {
  width: min(75.92vw,1037px);
  margin-block-start: min(4.25vw,58px);
  margin-inline: auto;
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .etc-furlongFeaturesImg {
    display: none;
  }
}

.etc-furlongFeatures {
  display: none;
}
@media (width <= 760px) {
  .etc-furlongFeatures {
    display: block;
    margin-block-start: 13.33vw;
  }
}

@media (width <= 760px) {
  .etc-furlongFeature {
    li:not(:first-child) & {
      margin-block-start: 12vw;
    }
  }
}

@media (width <= 760px) {
  .etc-furlongFeature_img {
    height: auto;
    margin-inline: auto;
    li:nth-child(1) & {
      width: 20.53vw;
      aspect-ratio: 77/107;
    }
    li:nth-child(2) & {
      width: 18.4vw;
      aspect-ratio: 69/109;
    }
    li:nth-child(3) & {
      width: 17.33vw;
      aspect-ratio: 65/103;
    }
    li:nth-child(4) & {
      width: 27.73vw;
      aspect-ratio: 1;
    }
    li:nth-child(5) & {
      width: 28.8vw;
      aspect-ratio: 108/147;
    }
    & img {
      width: 100%;
      height: 100%;
    }
  }
}

@media (width <= 760px) {
  .etc-furlongFeature_ttl {
    margin-block-start: 5.33vw;
    color: var(--txt-black-color);
    font-size: 6.4vw;
    font-weight: 600;
    letter-spacing: 0.025em;
    line-height: 1.46;
    text-align: center;
  }
}

@media (width <= 760px) {
  .etc-furlongFeature_txt {
    margin-block-start: 5.33vw;
    font-size: 4.27vw;
    letter-spacing: 0.015em;
  }
}

.prod-section[data-bg="offwhite2"] {
  background-color: #F4F8F6;
}

.etc-furlongConfiguration {
  position: relative;
  width: min(48.31vw,660px);
  margin-inline: auto;
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .etc-furlongConfiguration {
    width: 100%;
  }
}

.etc-furlongExample {
  /* & table {
    table-layout: fixed;
  } */
  & caption {
    margin-block-end: min(2.2vw,30px);
    color: var(--txt-black-color);
    font-size: min(1.76vw,24px);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-align: left;
  }
  & thead {
    & th {
      font-weight: 500;
    }
  }
  & tbody {
    & th {
      font-weight: 400;
      &:nth-child(1) {
        width: 10%;
      }
      &:nth-child(2) {
        width: 17%;
      }
    }
    & td {
      width: 73%;
    }
    & .gray {
      background-color: #E5E5E5;
    }
  }
  & th, & td {
    padding: min(0.73vw,10px);
    border: 1px solid #D0D0D0;
    background-color: #FFF;
    color: #303030;
    font-size: min(1.32vw,18px);
    letter-spacing: 0.015em;
    line-height: 1.33;
  }
}
@media (width <= 760px) {
  .etc-furlongExample {
    overflow-x: auto;
    & table {
      width: 330.67vw;
    }
    & caption {
      margin-block-end: 8.53vw;
      font-size: 4.8vw;
    }
    & th, & td {
      font-size: 4.8vw;
    }
  }
}

.etc-furlongExampleNote {
  margin-block-start: min(1.46vw,20px);
  font-size: min(1.17vw,16px);
  letter-spacing: 0.015em;
  & span {
    color: #C0C0C0;
  }
}
@media (width <= 760px) {
  .etc-furlongExampleNote {
    margin-block-start: 5.33vw;
    font-size: 4.26vw;
  }
}

.etc-collect {
  margin-block-start: min(4.69vw,64px);
}
@media (width <= 760px) {
  .etc-collect {
    margin-block-start: 13.33vw;
  }
}

.etc-collect_img {
  display: grid;
  gap: 0 min(4.39vw,60px);
  grid-template-columns: repeat(2,minmax(0,1fr));
  & img {
    width: 100%;
    height: 100%;
  }
}
@media (width <= 760px) {
  .etc-collect_img {
    gap: 9.33vw 0;
    grid-template-columns: 100%;
  }
}

.etc-collect_txt {
  margin-block-start: min(1.46vw,20px);
  font-size: min(1.17vw,16px);
  letter-spacing: 0.015em;
}
@media (width <= 760px) {
  .etc-collect_txt {
    margin-block-start: 5.33vw;
    font-size: 4.26vw;
  }
}


/***** 注意喚起シール *****/
.prod-pageHeader .etc-pageHeader_hgroup h1 {
  letter-spacing: -0.01em;
}
@media (width <= 760px) {
  .prod-pageHeader .etc-pageHeader_hgroup h1 {
    font-size: 5.8667vw;
  }
}
.etc-pageHeader_label {
  display: inline-block;
  margin-block-end: min(1.25vw,16px);
  padding-block: min(0.47vw,6px);
  padding-inline: min(1.56vw,20px);
  color: #FFF;
  background-color: #2B4E76;
  font-size: min(1.17vw,16px);
  font-weight: 500;
  letter-spacing: 0.018em;
}
@media (width <= 760px) {
  .etc-pageHeader_label {
    margin-block-end: 2.13vw;
    padding-inline: 5.33vw;
    font-size: 4.27vw;
  }
}

.etc-stikerorder_txt {
  font-size: min(1.32vw,18px);
  letter-spacing: 0.02em;
  line-height: 1.89;
}
@media (width <= 760px) {
  .etc-stikerorder_txt {
    font-size: 4.8vw;
  }
}

.etc-discList {
  & ul {
    margin-block-start: min(2.2vw,30px);
  }
  & li {
    color: #202020;
    font-size: min(1.32vw,18px);
    font-weight: 600;
    &::before {
      display: inline-block;
      content: "・";
    }
  }
}
@media (width <= 760px) {
  .etc-discList {
    & ul {
      margin-block-start: 8vw;
    }
    & li {
      font-size: 4.8vw;
    }
  }
}

.etc-pdfLinkBtnList {
  margin-block-start: min(2.2vw,30px);
  & ul {
    display: grid;
    gap: min(1.02vw,14px);
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}
@media (width <= 760px) {
  .etc-pdfLinkBtnList {
    margin-block-start: 8vw;
    & ul {
      gap: 3.73vw;
      grid-template-columns: 100%;
    }
  }
}

.etc-pdfLinkBtn {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding-block: min(0.88vw,12px);
  padding-inline: min(1.1vw,15px) min(3.66vw,50px);
  border-radius: 4px;
  background-color: #F4F7F8;
  font-size: min(1.17vw,16px);
  font-weight: 500;
  letter-spacing: 0.015em;
  transition: color 0.3s ease-out;
  &::after {
    position: absolute;
    top: 50%;
    right: min(0.73vw,10px);
    translate: 0 -50%;
    display: block;
    width: min(2.2vw,30px);
    height: auto;
    aspect-ratio: 1;
    background: url(../img/common/icn_link_pdf.svg) no-repeat center/cover;
    content: "";
  }
}
@media (width <= 760px) {
  .etc-pdfLinkBtn {
    padding-block: 3.2vw;
    padding-inline: 3.73vw 16vw;
    border-radius: 1.07vw;
    font-size: 4.27vw;
    &::after {
      right: 2.67vw;
      width: 8vw;
    }
  }
}
@media (hover: hover) {
  .etc-pdfLinkBtn:hover {
    color: var(--hover-color);
  }
}

.etc-contactBox {
  padding-block: min(7.32vw,100px);
  background-color: #F4F7F8;
  & > div {
    width: min(74.96vw,1024px);
    margin-inline: auto;
  }
}
@media (width <= 760px) {
  .etc-contactBox {
    padding-block: 13.33vw;
    & > div {
      width: 100%;
      padding-inline: 2.67vw;
    }
  }
}

.etc-contactBox_txt {
  letter-spacing: -0.015em;
  text-align: center;
}
@media (width <= 760px) {
  .etc-contactBox_txt {
    text-align: left;
  }
}

.etc-contactBox_btnWrap {
  margin-block-start: min(1.1vw,15px);
}
@media (width <= 760px) {
  .etc-contactBox_btnWrap {
    margin-block-start: 4vw;
  }
}

.etc-contactBox_telBox {
  margin-block-start: min(4.39vw,60px);
  & dl {
    display: flex;
    align-items: center;
    gap: 0 min(2.56vw,35px);
    width: min(47.58vw,650px);
    margin-block-start: min(1.1vw,15px);
    margin-inline: auto;
    padding-block: min(1.46vw,20px);
    padding-inline: min(3.66vw,50px);
    background-color: #FFF;
  }
  & dt {
    font-size: min(1.32vw,18px);
    font-weight: 500;
    letter-spacing: 0.015em;
  }
  & dd {
    font-size: min(1.02vw,14px);
    letter-spacing: 0.015em;
    &:nth-child(2) {
      width: min(13.91vw,190px);
      height: auto;
      aspect-ratio: 190/21;
      line-height: 1;
    }
  }
}
@media (width <= 760px) {
  .etc-contactBox_telBox {
    margin-block-start: 10.67vw;
    & dl {
      flex-direction: column;
      gap: 5.33vw 0;
      justify-content: center;
      width: 100%;
      margin-block-start: 4vw;
      padding-block: 5.33vw;
      padding-inline: 5.33vw;
    }
    & dt {
      font-size: 4.8vw;
    }
    & dd {
      font-size: 3.73vw;
      &:nth-child(2) {
        width: 100%;
        & img {
          width: 100%;
        }
      }
    }
  }
}


/***** 設備一覧 *****/
.etc-equipmentWrap {
  & ul {
    display: grid;
    gap: 0 min(2.93vw,40px);
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  & li {
    padding-block: min(1.32vw,18px);
    border-bottom: 1px solid #E0E0E0;
  }
}
@media (width <= 760px) {
  .etc-equipmentWrap {
    & ul {
      grid-template-columns: 100%;
    }
    & li {
      padding-block: 5.07vw;
    }
  }
}

.etc-equipment {
  position: relative;
  display: block;
  width: 100%;
  padding-inline-end: min(2.34vw,30px);
  font-size: min(1.17vw,16px);
  font-weight: 500;
  line-height: 1.5;
  &::before, &::after {
    position: absolute;
    top: 0.78em;
    right: 0;
    translate: 0 -50%;
    width: min(1.56vw,20px);
    height: auto;
    aspect-ratio: 1;
    content: "";
  }
  &::before {
    border-radius: 50%;
    background-color: #2B4E76;
    transition: border 0.3s, background 0.3s ease-out;
  }
  &::after {
    background-color: #FFF;
    mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
    transition: mask 0.3s ease-out, background 0.3s ease-out;
  }
}
@media (width <= 760px) {
  .etc-equipment {
    padding-inline-end: 9.07vw;
    font-size: 4.27vw;
    &::before, &::after {
      width: 5.33vw;
    }
  }
}
@media (hover: hover) {
  .etc-equipment:hover {
    color: var(--hover-color);
    &::before {
      background-color: var(--hover-color);
    }
    &::after {
      mask-position: 0 0;
    }
  }
}


/***** 設備一覧（第一階層） *****/
[data-bg="white"] {
  background-color: #FFF;
}

.cmn-heading3 {
  margin-block-end: min(1.1vw,15px);
  padding-block-end: 0;
  border-block-end: none;
}

.etc-equipmentImgWrap {
  display: inline-block;
  width: min(57.76vw,789px);
  margin-block-start: min(3.6vw,50px);
}
@media (width <= 760px) {
  .etc-equipmentImgWrap {
    width: 100%;
    margin-block-start: 13.33vw;
  }
}

.etc-equipmentImgWrap2 {
  display: grid;
  gap: min(2.93vw,40px);
  grid-template-columns: repeat(2,minmax(0,1fr));
  margin-block-start: min(3.6vw,50px);
}
@media (width <= 760px) {
  .etc-equipmentImgWrap2 {
    gap: 8vw;
    grid-template-columns: 100%;
    margin-block-start: 13.33vw;
  }
}

.etc-equipmentImg_ttl {
  font-size: min(1.46vw,20px);
  font-weight: 500;
  text-align: center;
}
@media (width <= 760px) {
  .etc-equipmentImg_ttl {
    font-size: 4.8vw;
  }
}

.etc-equipmentImg_img {
  margin-block-start: min(1.02vw,14px);
  background-color: #F4F7F8;
}
@media (width <= 760px) {
  .etc-equipmentImg_img {
    margin-block-start: 3.73vw;
      & img {
        width: 100%;
      }
  }
}

.etc-equipmentTableWrap_note {
  text-align: right;
  & span {
    display: inline-block ;
    width: min(4.03vw,55px);
    height: auto;
    aspect-ratio: 55/27;
  }
}
@media (width <= 760px) {
  .etc-equipmentTableWrap_note {
    text-align: left;
    & span {
      width: 13.33vw;
      & img {
        width: 100%;
      }
    }
  }
}

.etc-equipmentTable {
  & table {
    width: 100%;
    margin-block-start: min(1.1vw,15px);
    table-layout: fixed;
    border-collapse: collapse;
  }
  & th, & td {
    padding-block: min(0.29vw,4px);
    border: 1px solid #D0D0D0;
    background-color: #FFF;
    font-size: min(1.02vw,14px);
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
  }
  & thead {
    & th {
      height: min(4.39vw,60px);
      padding-block: min(0.66vw,9px);
      background-color: #F3F3F3;
    }
  }
  & tbody {
    & td {
      height: min(5.49vw,75px);
    }
    & .gray {
      background-color: #E6E6E6;
    }
  }
}
@media (width <= 760px) {
  .etc-equipmentTable {
    overflow: auto;
    & table {
      width: 330.67vw;
      margin-block-start: 4vw;
    }
    & th, & td {
      padding-block: 1.07vw;
      font-size: 3.73vw;
    }
    & thead {
      & th {
        height: 16vw;
        padding-block: 1.6vw;
        background-color: #F3F3F3;
      }
    }
    & tbody {
      & td {
        height: 19.2vw;
      }
    }
  }
}

.etc-discList2 {
  margin-block-start: min(2.2vw,30px);
  & li {
    position: relative;
    padding-inline-start: 1.5em;
    font-size: min(1.17vw,16px);
    font-weight: 400;
    &::before {
      position: absolute;
      top: 0;
      left: 0.3em;
      content: "・";
    }
  }
}
@media (width <= 760px) {
  .etc-discList2 {
    margin-block-start: 8vw;
    & li {
      font-size: 4.27vw;
    }
  }
}

.etc-equipmentTable2 {
  & table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  & th, & td {
    padding-block: min(0.29vw,4px);
    border: 1px solid #D0D0D0;
    background-color: #FFF;
    font-size: min(1.02vw,14px);
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
  }
  & thead {
    & th {
      height: min(4.39vw,60px);
      padding-block: min(0.66vw,9px);
      background-color: #F3F3F3;
    }
  }
  & tbody {
    & td {
      height: min(3.29vw,45px);
      background-color: #FFF;
    }
    & .gray {
      background-color: #E6E6E6;
    }
  }
}
@media (width <= 760px) {
  .etc-equipmentTable2 {
    overflow: auto;
    & table {
      width: 330.67vw;
    }
    & th, & td {
      padding-block: 1.07vw;
      font-size: 3.73vw;
    }
    & thead {
      & th {
        height: 12vw;
        padding-block: 1.6vw;
        background-color: #F3F3F3;
      }
    }
    & tbody {
      & td {
        height: 10.67vw;
      }
    }
  }
}

.etc-equipmentTable3 {
  & table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  & th, & td {
    border: 1px solid #D0D0D0;
    font-size: min(1.02vw,14px);
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
  }
  & th {
    height: min(3.29vw,45px);
    background-color: #F3F3F3;
  }
  & td {
    height: min(5.12vw,70px);
    background-color: #FFF;
  }
}
@media (width <= 760px) {
  .etc-equipmentTable3 {
    overflow: auto;
    & table {
      width: 330.67vw;
    }
    & th, & td {
      font-size: 3.73vw;
    }
    & th {
      height: 12vw;
    }
    & td {
      height: 13.33vw;
    }
  }
}

.etc-equipmentTable4 {
  & table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  & th, & td {
    border: 1px solid #D0D0D0;
    font-size: min(1.02vw,14px);
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
  }
  & th {
    height: min(3.51vw,48px);
    background-color: #F3F3F3;
  }
  & td {
    height: min(8.05vw,110px);
    background-color: #FFF;
  }
}
@media (width <= 760px) {
  .etc-equipmentTable4 {
    overflow: auto;
    & table {
      width: 330.67vw;
    }
    & th, & td {
      font-size: 3.73vw;
    }
    & th {
      height: 12.8vw
    }
    & td {
      height: 29.33vw;
    }
  }
}

.etc-contactBox2 {
  & > div {
    display: grid;
    gap: 0 min(2.93vw,40px);
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (width <= 760px) {
  .etc-contactBox2 {
    & > div {
      gap: 5.33vw;
      grid-template-columns: 100%;
    }
  }
}