.is-pc {
  display: none;
}
@media screen and (min-width: 901px) {
  .is-pc {
    display: block;
  }
}
.is-sp {
  display: block;
}
@media screen and (min-width: 901px) {
  .is-sp {
    display: none;
  }
}
html:root {
  scroll-behavior: unset;
}
body {
  overflow: scroll;
}
head + body {
  width: 100%;
  word-break: unset;
}
.l-recommendItem {
  position: relative;
  padding: 64px 0 0;
  background: #fff;
}
@media screen and (min-width: 901px) {
  .l-recommendItem {
    padding: 80px 0 0;
  }
}
.l-recommendItem img {
  max-width: 100%;
  width: 100%;
  height: auto;
}
.l-recommendItem__professional {
  position: relative;
  padding: 40px 24px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (min-width: 901px) {
  .l-recommendItem__professional {
    padding: 72px 32px;
    max-width: 1136px;
    margin-inline: auto;
  }
}
.l-recommendItem__visual {
  position: relative;
  width: 100%;
  block-size: 50svb;
}
@media screen and (min-width: 901px) {
  .l-recommendItem__visual {
    block-size: 624px;
  }
}
.l-recommendItem__about {
  position: relative;
  padding: 56px 32px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (min-width: 901px) {
  .l-recommendItem__about {
    max-width: calc(912px + 64px);
    margin-inline: auto;
  }
}
.l-recommendItem__about > * + * {
  -webkit-margin-before: 40px;
  margin-block-start: 40px;
}
.l-recommendItem__about > p.is-wide:first-child {
  margin-top: 24px;
}
.l-recommendItem__about p {
  font-size: 16px;
  line-height: 1.75em;
  letter-spacing: 0.01em;
}
@media screen and (min-width: 901px) {
  .l-recommendItem__about p {
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
  }
}
.l-recommendItem__about p.is-wide {
  -webkit-margin-before: 80px;
  margin-block-start: 80px;
}
.l-recommendItem__about p.is-bold {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-weight: bold;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}
@media screen and (min-width: 901px) {
  .l-recommendItem__about p.is-bold {
    font-size: 24px;
  }
}
.l-recommendItem__about .image {
  position: relative;
  display: -ms-grid;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  -ms-grid-columns: auto auto;
  grid-template-columns: auto auto;
}
@media screen and (min-width: 901px) {
  .l-recommendItem__about .image {
    padding: 0 24px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .l-recommendItem__about .image.is-mulit {
    padding: 0;
  }
}
.l-recommendItem__about .image.is-target {
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}
.l-recommendItem__about .image.is-target::before {
  content: '.';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f6f6f6;
  -webkit-transition: 0.6s 0.6s;
  transition: 0.6s 0.6s;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.l-recommendItem__about .image.is-target.is-active {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.l-recommendItem__about .image.is-target.is-active::before {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
.l-recommendItem__items {
  position: relative;
  padding: 56px 64px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (min-width: 901px) {
  .l-recommendItem__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}
.l-recommendItem__items.is-gray {
  background: #f6f6f6;
}
.p-professional {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto auto;
  grid-template-columns: auto auto;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  grid-gap: 24px;
  gap: 24px;
}
@media screen and (min-width: 901px) {
  .p-professional {
    -ms-grid-columns: auto auto auto;
    grid-template-columns: auto auto auto;
    -ms-grid-rows: auto auto auto 1fr;
    grid-template-rows: auto auto auto 1fr;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    grid-gap: 32px 120px;
    gap: 32px 120px;
  }
}
.p-professional__label {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: #399bad;
  font-weight: bold;
}
@media screen and (min-width: 901px) {
  .p-professional__label {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2/3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
  }
}
.p-professional__no {
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  font-weight: bold;
  margin-left: auto;
}
@media screen and (min-width: 901px) {
  .p-professional__no {
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-column: 3/4;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
  }
}
.p-professional__message {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-weight: bold;
}
@media screen and (min-width: 901px) {
  .p-professional__message {
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2/4;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
    font-size: 46px;
    line-height: 1.45;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
  }
}
.p-professional__about {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  font-size: 16px;
  line-height: 2.2;
  letter-spacing: 0.01em;
}
@media screen and (min-width: 901px) {
  .p-professional__about {
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2/4;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3/4;
    font-size: 24px;
    line-height: 1.5;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
  }
}
.p-professional__credit {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media screen and (min-width: 901px) {
  .p-professional__credit {
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2/4;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    grid-row: 4/5;
  }
}
.p-professional__card {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  padding: 0 32px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (min-width: 901px) {
  .p-professional__card {
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 4;
    grid-row: 1/5;
    padding: 0;
  }
}
.c-credit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.c-credit + .c-credit::before {
  content: '/';
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  margin-inline: 0.25em;
}
.c-credit__role {
  color: #ababab;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.02em;
}
.c-credit__name {
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  -webkit-margin-start: 0.25em;
  margin-inline-start: 0.25em;
}
@media screen and (min-width: 901px) {
  .c-professionalCard {
    width: 230px;
  }
}
.c-professionalCard__ph {
  position: relative;
  border: 1.5px solid #1b1b1b;
}
.c-professionalCard__ph img {
  width: 100%;
  height: auto;
}
.c-professionalCard__name {
  border-left: 1.5px solid #1b1b1b;
  border-right: 1.5px solid #1b1b1b;
  border-bottom: 1.5px solid #1b1b1b;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 56px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.c-professionalCard__name p {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-weight: bold;
}
.c-professionalCard__about {
  position: relative;
  -webkit-margin-before: 16px;
  margin-block-start: 16px;
}
.c-professionalCard__about p {
  font-size: 10px;
  line-height: 1.75;
  letter-spacing: 0.015em;
}
.c-professionalCard__about p.is-em {
  font-size: 12px;
  letter-spacing: 0.0125em;
  -webkit-margin-after: 8px;
  margin-block-end: 8px;
}
.p-items__txt {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-weight: bold;
}
@media screen and (min-width: 901px) {
  .p-items__txt {
    text-align: center;
  }
}
.p-items__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  grid-gap: 36px;
  gap: 36px;
  margin-top: 32px;
}
@media screen and (min-width: 901px) {
  .p-items__wrap {
    grid-gap: 16px;
    gap: 16px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}
@media screen and (min-width: 901px) {
  .c-product {
    width: 256px;
  }
}
.c-product .catalog_product {
  width: 100%;
}
@media screen and (min-width: 901px) {
  .c-product .catalog_product_img_wrap {
    -webkit-margin-after: 0;
    margin-block-end: 0;
  }
}
.c-product .catalog_product_img_filter:is(.is-gray *) {
  background-color: rgba(0,0,0,0);
}
.p-visual {
  position: relative;
  height: 100%;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.p-visual__img {
  position: fixed;
  z-index: -1;
  inline-size: 100lvi;
  block-size: 100lvb;
  inset: 0;
  background-size: 375px;
  -webkit-animation: bganime 20s infinite linear;
  animation: bganime 20s infinite linear;
}
@media screen and (min-width: 901px) {
  .p-visual__img {
    background-size: 1440px;
    -webkit-animation: bganime_pc 40s infinite linear;
    animation: bganime_pc 40s infinite linear;
  }
}
@-webkit-keyframes bganime {
  from {
    background-position-x: 0;
    background-position-y: 0;
  }
  to {
    background-position-x: 375px;
    background-position-y: 375px;
  }
}
@keyframes bganime {
  from {
    background-position-x: 0;
    background-position-y: 0;
  }
  to {
    background-position-x: 375px;
    background-position-y: 375px;
  }
}
@-webkit-keyframes bganime_pc {
  from {
    background-position-x: 0;
    background-position-y: 0;
  }
  to {
    background-position-x: 1440px;
    background-position-y: 624px;
  }
}
@keyframes bganime_pc {
  from {
    background-position-x: 0;
    background-position-y: 0;
  }
  to {
    background-position-x: 1440px;
    background-position-y: 624px;
  }
}