:root {
  --color-main: #000;
  --color-gray: #D9D9D9;
  --color-white: #fff;
  --color-header: #1A1925;
  --color-footer: #E3E2EB;
  --color-current: #0066FF;
  --color-hover: #746DC8;
  --font-base: "Noto Sans JP", sans-serif;
  --font-notosan: "Noto Sans JP", sans-serif;
  --font-lexend: "Lexend", sans-serif;
  --font-lexendgiga: "Lexend Giga", sans-serif;
  --font-caveat: "Caveat", cursive;
  --font-just: "Jost", sans-serif;
  --header-h-pc:100px;
  --header-h-sp:13.0769230769vw;
  --footer-h-pc:780px;
  --footer-h-sp:223.0769230769vw;
  --hero-pt-pc:136px;
  --hero-pt-sp:25.7vw;
  --padding-side-xl-pc:20px;
  --padding-side-pc:0;
  --padding-side-sp:6.4102564103vw;
  --nav-side-width-md: 13px;
  --nav-side-line-color: #D9D9D9;
  --line-height-default: 1.6;
  --container-width: 1220px;
  --container-width-1000px: 1000px;
}

/* ==========================================================================
  animation
========================================================================== */
/* ==========================================================================
   index
========================================================================== */
/* --------------------------------------------------------------------------
  p-product-hero
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
  p-product-
-------------------------------------------------------------------------- */
.p-product img {
  width: 100%;
}
.p-product .u-pad {
  display: block;
}
@media screen and (min-width: 768px) {
  .p-product .u-pad {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .p-product .u-pad {
    display: block;
  }
}
.p-product .p-product__intro {
  width: 100%;
  padding: 0 6.4102564103vw;
}
@media screen and (min-width: 768px) {
  .p-product .p-product__intro {
    max-width: 1260px;
    margin: auto;
    padding: 0px 20px;
  }
}
.p-product .p-product-intro__container {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 10.2564102564vw;
  width: 100%;
  margin-top: 12.8205128205vw;
}
@media screen and (min-width: 768px) {
  .p-product .p-product-intro__container {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    -moz-column-gap: 10px;
         column-gap: 10px;
    margin-top: 50px;
  }
}
@media screen and (min-width: 1024px) {
  .p-product .p-product-intro__container {
    -moz-column-gap: 40px;
         column-gap: 40px;
  }
}
.p-product .p-product-intro-box {
  color: #136A9F;
  width: 76.9230769231vw;
  margin: auto;
}
@media screen and (min-width: 768px) {
  .p-product .p-product-intro-box {
    width: 100%;
    margin: 0;
  }
}
.p-product .p-product-intro-box.p-product-intro-box-2 {
  color: #34704D;
}
.p-product .p-product-intro-box.p-product-intro-box-3 {
  color: #696D0D;
}
.p-product .p-product-intro-box__heading {
  text-align: center;
  font-weight: 700;
  font-size: 9.2307692308vw;
  line-height: 1;
  font-family: var(--font-lexend);
}
@media screen and (min-width: 768px) {
  .p-product .p-product-intro-box__heading {
    font-size: 50px;
  }
}
.p-product .p-product-intro-box__ja {
  display: block;
  font-size: 5.1282051282vw;
  font-weight: 700;
  line-height: 1.6;
  font-family: var(--font-notosan);
}
@media screen and (min-width: 768px) {
  .p-product .p-product-intro-box__ja {
    font-size: 20px;
  }
}
.p-product .p-product-intro-box__img {
  width: 100%;
  margin-top: 3.8461538462vw;
}
@media screen and (min-width: 768px) {
  .p-product .p-product-intro-box__img {
    margin-top: 15px;
  }
}
.p-product .p-product-intro-box__text {
  margin-top: 3.8461538462vw;
  font-size: 3.3333333333vw;
  font-weight: 700;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  .p-product .p-product-intro-box__text {
    margin-top: 15px;
    font-size: 17px;
  }
}
.p-product .p-product-range {
  width: 100%;
  margin: auto;
  margin-top: 23.0769230769vw;
  padding-left: 6.4102564103vw;
}
@media screen and (min-width: 768px) {
  .p-product .p-product-range {
    max-width: 1260px;
    margin-top: 150px;
    padding: 0px 20px;
  }
}
.p-product .p-product-range__img01 {
  margin-top: 2.5641025641vw;
  padding-top: 12.8205128205vw;
  padding-bottom: 5.1282051282vw;
  border-top: 1px solid #D9D9D9;
  overflow-x: scroll;
}
@media screen and (min-width: 768px) {
  .p-product .p-product-range__img01 {
    width: 100%;
    margin-top: 10px;
    padding-top: 50px;
    overflow-x: visible;
  }
}
.p-product .p-product-range__img01 img {
  width: 230.7692307692vw;
}
@media screen and (min-width: 768px) {
  .p-product .p-product-range__img01 img {
    width: 100%;
  }
}
.p-product .p-product-use {
  width: 100%;
  margin-top: 20.5128205128vw;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .p-product .p-product-use {
    max-width: 1260px;
    margin: auto;
    margin-top: 84px;
  }
}
@media screen and (min-width: 1024px) {
  .p-product .p-product-use {
    padding: 0 20px;
  }
}
.p-product .p-product-use__area {
  position: relative;
  width: 100%;
  background-color: rgba(245, 245, 245, 0.8);
}
@media screen and (min-width: 768px) {
  .p-product .p-product-use__area {
    border-radius: 20px;
  }
}
.p-product .p-product-use__heading {
  position: absolute;
  top: -7.6923076923vw;
  right: 0;
  left: 0;
  margin: auto;
  width: -moz-fit-content;
  width: fit-content;
  padding: 3.8461538462vw;
  border-radius: 7.6923076923vw;
  font-size: 3.5897435897vw;
  font-weight: 700;
  background-color: #E5E5E5;
}
@media screen and (min-width: 768px) {
  .p-product .p-product-use__heading {
    top: -35px;
    padding: 20px 30px;
    border-radius: 35px;
    font-size: 20px;
  }
}
.p-product .p-product-use__container {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 10.2564102564vw;
  align-items: center;
  width: 100%;
  padding: 10.2564102564vw 3.8461538462vw 12.8205128205vw 3.8461538462vw;
}
@media screen and (min-width: 768px) {
  .p-product .p-product-use__container {
    grid-template-columns: 1fr 267px;
    -moz-column-gap: 80px;
         column-gap: 80px;
    max-width: 1000px;
    margin: auto;
    padding: 60px 20px;
  }
}
.p-product .p-product-use__list {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 7.6923076923vw;
       column-gap: 7.6923076923vw;
  row-gap: 6.4102564103vw;
}
@media screen and (min-width: 768px) {
  .p-product .p-product-use__list {
    flex-direction: column;
    row-gap: 35px;
  }
}
.p-product .p-product-use__listitem {
  width: calc((100% - 7.6923076923vw) / 2);
  display: flex;
  align-items: center;
  -moz-column-gap: 2.5641025641vw;
       column-gap: 2.5641025641vw;
}
@media screen and (min-width: 768px) {
  .p-product .p-product-use__listitem {
    width: 100%;
    -moz-column-gap: 20px;
         column-gap: 20px;
  }
}
@media screen and (min-width: 768px) {
  .p-product .p-product-use__listicon {
    width: 50px;
  }
}
@media screen and (min-width: 768px) {
  .p-product .p-product-use__listtext {
    font-size: 20px;
    font-weight: 700;
  }
}