@charset "utf-8";

/* -------------------------- Font --------------------------

font-family: "fot-tsukuardgothic-std", sans-serif;
font-weight: 400, 700;

font-family: "work-sans", sans-serif;
font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900;

font-family: "fot-matisse-pron", sans-serif;
font-weight: 500;

*/

/* -------------------------------- root -------------------------------- */

:root {
  /* Colors */
  --color-black: #333333;
  --color-green: #00A273;
  --color-white: #FFFFFF;
  --color-bg-base: #E9E9DF;
  --color-bg-hint: #F2F7F4;
  --color-dot-inactive: #CECECE;
  --color-overlay: rgba(51, 51, 51, 0.6);

  /* Font families */
  --ff-gothic: "fot-tsukuardgothic-std", sans-serif;
  --ff-gothic-work: "fot-tsukuardgothic-std", "work-sans", sans-serif;
  --ff-work: "work-sans", sans-serif;
  --ff-work-gothic: "work-sans", "fot-tsukuardgothic-std", sans-serif;
  --ff-matisse: "fot-matisse-pron", sans-serif;

  /* Border radius */
  --radius-circle: 50%;
  --radius-pill: 100vh;


  /* gutter */
  --gutter: 20px;
  --gutter-without-px: 20;

  /* width */
  --desktop-width: 95%;
  --desktop-max-width: calc(1024px + var(--gutter) * 2);
  @media (min-width: 1024px) {
    --desktop-width: calc((1024 + var(--gutter-without-px) * 2) / 1280 * 100%);
  }
}

/* -------------------------- Overwrite -------------------------- */

#main {
  /* Restore vendor default (common.css) */
  padding: 0 !important;
}

/* -------------------------- Common -------------------------- */

.fujipet_wrap {
  font-family: var(--ff-gothic-work);
  line-height: 1;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
  background-color: var(--color-bg-base);
  overflow: hidden;

  & img {
    vertical-align: middle;
  }

  & .sp_block {
    display: block;

    @media (min-width: 769px) {
      display: none;
    }
  }

  & .pc_block {
    display: none;

    @media (min-width: 769px) {
      display: block;
    }
  }
}

/* -------------------------- Container -------------------------- */

.fp-container {
  margin-inline: auto;
  padding-inline: var(--gutter);
  @media (min-width: 769px) {
    width: var(--desktop-width);
    max-width: var(--desktop-max-width);
  }

  &:has(.fujipet_idea_service),
  &:has(.fujipet_service_table_pair) {
    @media (min-width: 769px) {
      --desktop-max-width: calc(1360px + var(--gutter) * 2);
    }
  }
}

/* -------------------------- Fade in, Zoom out image -------------------------- */

.fujipet_fade_image {
  overflow: hidden;

  & > * {
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 1s, transform 2s;
  }

  &.active > * {
    opacity: 1;
    transform: scale(1);
  }
}

/* -------------------------- FV -------------------------- */

.fujipet_fv {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  height: 582px;
  padding: 114px 25px 0 0;
  overflow: hidden;
  margin: 0;

  @media (min-width: 769px) {
    justify-content: center;
    align-items: center;
    height: 520px;
    padding: 0;
    margin: 0 0 8px;
  }

  @media (min-width: 1280px) {
    height: 600px;
  }
}

.fujipet_fv_images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fujipet_fv_image_item {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1s linear, transform 5s linear;

  &.active {
    opacity: 1;
    transform: scale(1);
  }

  & > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.fujipet_fv_text {
  display: flex;
  flex-flow: column nowrap;

  @media (min-width: 769px) {
    display: block;
  }
}

.fujipet_fv_title {
  position: relative;
  z-index: 2;
  color: var(--color-white);
  order: 2;
  margin: 7px 0 0;
  opacity: 0;
  transition: opacity 1s;

  @media (min-width: 769px) {
    order: unset;
    margin: 0 0 15px;
  }
}

.fujipet_fv_title_pic {
  display: block;
  width: 196px;
  margin-left: auto;

  & > img {
    display: block;
    width: 100%;
  }

  @media (min-width: 769px) {
    width: 320px;
    margin-left: 0;
  }
}

.fujipet_fv_desc {
  position: relative;
  z-index: 2;
  font-family: var(--ff-gothic-work);
  font-weight: 400;
  order: 1;
  font-size: 14.2px;
  line-height: 28px;
  text-align: right;
  color: var(--color-white);
  opacity: 0;
  transition: opacity 1s;

  @media (min-width: 769px) {
    order: unset;
    font-size: 15px;
    line-height: 23px;
    text-align: center;
  }
}

/* -------------------------- Footprint -------------------------- */

.fujipet_footprint {
  position: absolute;
  z-index: 10;
  width: 33px;
  height: auto;
  opacity: 0;
  display: none;
  /*transition:opacity 1s;*/

  &.active {
    opacity: 1;
  }

  &.inactive {
    opacity: 0 !important;
  }

  @media (min-width: 769px) {
    display: block;
  }
}

@media (min-width: 769px) {
  .fp1 {
    top: 211px;
    left: 65.07%;
  }

  .fp2 {
    top: 600px;
    left: 42.73%;
  }

  .fp3 {
    top: 1371px;
    left: 57.34%;
  }

  .fp4 {
    top: -47px;
    left: 600px;
  }

  .fp5 {
    top: 460px;
    left: 140px;
  }

  .fp6 {
    right: 325px;
    top: 360px;
  }

  .fp7 {
    top: 65px;
    right: 295px;
  }

  .fp8 {
    top: -170px;
    left: 400px;
  }

  .fp9 {
    left: 540px;
    bottom: -70px;
  }

  .fp10 {
    bottom: -60px;
    left: 310px;
  }

  .fp11 {
    top: 130px;
    left: 335px;
  }

  .fp12 {
    top: -42px;
    left: 600px;
  }

  .fp13 {
    bottom: -330px;
    left: 229px;
  }

  .fp14 {
    top: -80px;
    right: 220px;
  }

  .fp15 {
    top: 310px;
    left: 400px;
  }

  .fp16 {
    top: 855px;
    left: 300px;
  }

  .fp17 {
    bottom: 630px;
    right: 200px;
  }

  .fp18 {
    top: -25px;
    right: 148px;
  }

  .fp19 {
    top: 520px;
    left: 420px;
  }

  .fp20 {
    bottom: -85px;
    left: 123px;
  }
}

.fujipet_fp_sp {
  position: absolute;
  z-index: 10;
  display: block;
  width: 33px;
  height: auto;
  opacity: 0;
  /*transition:opacity 1s;*/

  &.active {
    opacity: 1;
  }

  &.inactive {
    opacity: 0 !important;
  }

  @media (min-width: 769px) {
    display: none;
  }
}

.fs6 {
  top: 179px;
  right: 14.73%;
}

.fs7 {
  top: 458px;
  left: 13.74%;
}

.fs8 {
  top: -194px;
  right: 24.53%;
}

.fs9 {
  top: -10px;
  left: 11.2%;
}

.fs10 {
  display: none;
  top: 190px;
  right: 19.73%;
}

.fs11 {
  bottom: -77px;
  right: 25.2%;
}

.fs12 {
  top: -87px;
  right: 37.6%;
}

.fs13 {
  top: 93px;
  right: 18.8%;
}

.fs14 {
  top: -70px;
  left: 33.73%;
}

.fs15 {
  bottom: -17px;
  left: 9.73%;
}

.fs16 {
  top: -160px;
  right: 18%;
}

.fs17 {
  top: -15px;
  left: 16.93%;
}

.fs18 {
  top: 426px;
  left: 45.06%;
}

.fs19 {
  display: none;
  bottom: -56px;
  right: 21.33%;
}

.fs20 {
  top: -65px;
  left: 21.46%;
}

.fs21 {
  top: 430px;
  right: 26.4%;
}

.fs22 {
  top: 474px;
  right: 30.8%;
}

.fs23 {
  top: 1000px;
  left: 12.4%;
}

.fs24 {
  top: 986px;
  right: 3.2%;
}

.fs25 {
  top: -52px;
  right: 15.33%;
}

.fs26 {
  top: 1443px;
  left: 21.46%;
}

.fs27 {
  display: none;
  bottom: 190px;
  left: 13.6%;
}

.fs28 {
  top: -13px;
  right: 28.8%;
}

.fs29 {
  top: 268px;
  right: 20.66%;
}

.fs30 {
  top: 581px;
  left: -6px;
}

.fs31 {
  top: 781px;
  left: 29.06%;
}

.fs32 {
  top: 885px;
  right: 18.13%;
}

.fs33 {
  bottom: 31px;
  left: 23.86%;
}

/* -------------------------- Idea index -------------------------- */

.fujipet_idea_index {
  position: relative;
  display: block;
  max-width: none;
  padding: 0 17px 0 19px;
  margin: 38px auto 90px;

  @media (min-width: 769px) {
    display: flex;
    justify-content: space-between;
    max-width: 880px;
    padding: 0 var(--gutter);
    margin: 142px auto 132px;
  }
}

.fujipet_idea_index_left {
  width: auto;
  margin: 0;

  @media (min-width: 769px) {
    width: calc(330 / 880 * 100%);
    margin: 0;
  }
}

.fujipet_idea_index_title {
  display: block;
  width: auto;
  margin: 0 auto 32px;

  & > img {
    display: block;
    width: 100%;
  }

  @media (min-width: 769px) {
    width: auto;
    margin: 0 0 25px;
  }
}

.fujipet_idea_index_desc {
  width: auto;
  margin: 0 0 85px;
  @media (min-width: 769px) {
    margin: 0;
  }

  p {
    font-family: var(--ff-gothic);
    font-weight: 700;
    font-size: 16px;
    line-height: 2;
    text-align: justify;
    color: var(--color-green);
    margin: 1.5em 0;
  }
}

.fujipet_idea_index_right {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  width: auto;

  @media (min-width: 769px) {
    width: calc(470 / 880 * 100%);
    justify-content: center;
  }
}

.fujipet_idea_index_list {
  display: flex;
  flex-flow: column nowrap;
  order: 3;
  gap: 57px 0;
  margin: 0;

  & > li {
    display: block;
  }

  & > li > a {
    display: flex;
    align-items: flex-end;
    border-bottom: 1px dashed var(--color-black);
    text-decoration: none;
    padding: 0 0 13px;
  }

  & > li > a > span {
    width: 75px;
  }

  & > li > a > span > img {
    width: auto;
    height: 28px;
  }

  & > li > a > p {
    font-family: var(--ff-gothic);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    color: var(--color-black);
  }

  @media (min-width: 769px) {
    order: unset;
    gap: 75px 0;
    margin: 0 0 15px;

    & > li > a > span {
      width: 69px;
    }

    & > li > a > p {
      font-size: 21px;
      line-height: 26px;
    }
  }
}

/* -------------------------- Idea 01 head -------------------------- */

.fujipet_head_with_slider {
  position: relative;
  display: block;
  margin: 190px 0 80px;

  @media (min-width: 769px) {
    position: static;
    display: flex;
    margin: 80px 0 88px;
  }
}

.fujipet_head_with_slider_left {
  position: relative;
  width: auto;

  @media (min-width: 769px) {
    width: 62.5vw;
  }
}

/* ==========================================================================
   Idea 01 スライダー — Slick (SP) + 自作setInterval (PC) 版
   Swiper 版に戻す場合は以下のコミットの CSS を復元:
     git show fd60b12:src/css/vendor/pet-202604.css  （Swiper 版 CSS の元）
     git show HEAD~1:src/css/vendor/pet-202604.css   （本コミット直前の Swiper 版 CSS）
   およびこのブロックをコメントアウト or 削除すること。
   ========================================================================== */

.fujipet_head_with_slider_slide_wrap {
  display: block;
  width: auto;
  overflow: auto;

  @media (min-width: 769px) {
    display: flex;
    justify-content: flex-end;
    width: 62.5vw;
    overflow: hidden;
  }
}

.fujipet_head_with_slider_slide_sp {
  display: block;
  max-width: 213px;

  & .slick-dots {
    display: flex;
    justify-content: flex-end;
    gap: 0 23px;
    margin: 20px 20px 0 0;
  }

  & .slick-dots > li > button {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-circle);
    background-color: var(--color-dot-inactive);
    font-size: 0;
  }

  & .slick-dots > li.slick-active > button {
    background-color: var(--color-green);
  }

  @media (min-width: 769px) {
    display: none;
  }
}

.fujipet_head_with_slider_slide {
  position: relative;
  display: none !important;

  @media (min-width: 769px) {
    display: flex !important;
    justify-content: flex-end;
    gap: 0 10px;
    width: 1370px;
    overflow: hidden;
  }
}

.fujipet_head_with_slider_slide_item {
  position: relative;
  flex: 0 0 335px;
  height: 503px;
  transition: transform 1.5s;

  & > picture {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s;
  }

  & > picture:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color-overlay);
    transition: opacity 1s;
  }

  &.active > picture:after {
    opacity: 0;
  }

  & img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.fujipet_head_with_slider_slide.active .fujipet_head_with_slider_slide_item:nth-child(8) > picture {
  transition: opacity 1s 0.2s;
  opacity: 1;
}

.fujipet_head_with_slider_slide.active .fujipet_head_with_slider_slide_item:nth-child(7) > picture {
  transition: opacity 1s 0.4s;
  opacity: 1;
}

.fujipet_head_with_slider_slide.active .fujipet_head_with_slider_slide_item:nth-child(6) > picture {
  transition: opacity 1s 0.6s;
  opacity: 1;
}

.fujipet_head_with_slider_slide.active .fujipet_head_with_slider_slide_item:nth-child(5) > picture {
  transition: opacity 1s 0.8s;
  opacity: 1;
}

.fujipet_head_with_slider_slide.active .fujipet_head_with_slider_slide_item:nth-child(4) > picture,
.fujipet_head_with_slider_slide.active .fujipet_head_with_slider_slide_item:nth-child(3) > picture,
.fujipet_head_with_slider_slide.active .fujipet_head_with_slider_slide_item:nth-child(2) > picture,
.fujipet_head_with_slider_slide.active .fujipet_head_with_slider_slide_item:nth-child(1) > picture {
  transition: opacity 1s 1s;
  opacity: 1;
}

.fujipet_head_with_slider_slide_dots {
  display: none !important;

  @media (min-width: 769px) {
    display: flex !important;
    justify-content: flex-end;
    gap: 0 23px;
    margin: 15px 0 0;
  }

  & > a {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-circle);
    background-color: var(--color-dot-inactive);
  }

  & > a.active {
    background-color: var(--color-green);
  }
}

.fujipet_head_with_slider_right {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  pointer-events: none;
  z-index: 1;

  @media (min-width: 769px) {
    position: static;
    width: 37.5vw;
    height: auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    gap: 48px 0;
    padding: 0 0 0 94px;
    pointer-events: auto;
  }
}

.fujipet_head_with_slider_title {
  position: absolute;
  top: -75px;
  right: 36px;
  display: block;
  width: 194px;

  & > img {
    width: 100%;
  }

  @media (min-width: 769px) {
    position: static;
    width: 211px;
  }
}

.fujipet_head_with_slider_desc {
  font-family: var(--ff-gothic);
  font-weight: 700;
  position: absolute;
  bottom: 50px;
  left: calc(232 / 375 * 100%);
  font-size: 14px;
  line-height: 35px;
  color: var(--color-black);

  @media (min-width: 769px) {
    position: static;
    font-size: 16px;
  }
}

/* -------------------------- Idea service (common) -------------------------- */

.fujipet_idea_service {
  position: relative;
  max-width: none;
  padding: 0;
  margin: 65px auto;

  @media (min-width: 769px) {
    margin: 80px auto;
  }
}

.fujipet_idea_service_title {
  display: flex;
  justify-content: center;
  margin: 0 0 28px;

  & > span {
    font-family: var(--ff-gothic);
    font-weight: 700;
    font-size: 22px;
    color: var(--color-white);
    background-color: var(--color-green);
    padding: 2px;
  }

  @media (min-width: 769px) {
    margin: 0 0 56px;

    & > span {
      font-size: 20px;
    }
  }
}

/* Service heading (reusable sub-heading) */
.fujipet_service_heading--mobile {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 auto 28px;
  max-width: 310px;

  @media (min-width: 769px) {
    display: none;
  }
}

.fujipet_service_heading--desktop {
  display: none;

  @media (min-width: 769px) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-green);
    margin: 0 0 21px;
  }
}

.fujipet_service_heading--mobile .fujipet_service_heading_category {
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-green);
}

.fujipet_service_heading--mobile .fujipet_service_heading_title {
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: calc(24 / 375 * 100vw);
  color: var(--color-white);
  background-color: var(--color-green);
  padding: 2px 0;
  display: inline-block;
  align-self: flex-start;
  white-space: nowrap;
  @media (min-width: 420px) {
    font-size: 24px;
  }
}

.fujipet_service_heading--desktop .fujipet_service_heading_title,
.fujipet_service_heading--desktop .fujipet_service_heading_category {
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: clamp(
    18px,
    calc(18 / 1280 * 100vw),
    24px
  );
  color: var(--color-white);
  padding: 4px 8px;
  /*@media (min-width: 1280px) {*/
  /*  font-size: calc(18 / 1280 * 100vw);*/
  /*}*/
  /*@media (min-width: 1360px) {*/
  /*  font-size: 24px;*/
  /*}*/
}

.fujipet_service_heading--desktop .fujipet_service_heading_category {
  text-align: right;
}

.fujipet_idea_service_list {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  gap: 70px 0;
  width: 100vw;
  position: relative;
  left: calc(var(--gutter) * -1);

  & > li {
    width: auto;
  }

  @media (min-width: 769px) {
    width: auto;
    position: static;
    left: auto;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: 0;

    & > li {
      width: 31.05%;
      display: flex;
      flex-direction: column;
    }
  }
}

.fujipet_idea_service_item_image {
  display: block;
  width: 100%;
  border-top: 3px solid var(--color-green);
  margin: 0 0 15px;
}

.fujipet_idea_service_item_slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 318 / 254;
  object-fit: cover;
}

.fujipet_idea_service_item_slide {
  & .slick-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 0 4px;
    width: 100%;

    @media (min-width: 769px) {
      bottom: 18px;
    }
  }

  & .slick-dots > li > button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-size: 0;
  }

  & .slick-dots > li > button:before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-radius: var(--radius-circle);
    background-color: var(--color-dot-inactive);
    font-size: 0;
  }

  & .slick-dots > li.slick-active > button:before {
    background-color: var(--color-green);
  }

  & .slick-arrow {
    position: absolute;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    font-size: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;

    @media (min-width: 769px) {
      width: 18px;
      height: 18px;
    }
  }

  & .slick-prev {
    left: 10px;
  }

  & .slick-next {
    right: 10px;
  }
}

.fujipet_idea_service_item_title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 20px;
  margin: 0 0 10px;

  & > span {
    font-family: var(--ff-work-gothic);
    font-weight: 600;
    font-size: 22px;
    line-height: 26px;
    color: var(--color-green);
  }

  & > small {
    font-family: var(--ff-work-gothic);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-green);
  }

  @media (min-width: 769px) {
    padding: 0;

    & > span {
      font-size: 18px;
      line-height: 21px;
    }

    & > small {
      font-size: 12px;
      line-height: 16px;
    }
  }
}

.fujipet_idea_service_item_desc {
  font-family: var(--ff-gothic);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-black);
  padding: 0 20px;
  margin: 0 0 20px;

  @media (min-width: 769px) {
    margin: 0 0 40px;
    padding: 0;
    font-size: 16px;
  }
}

.fujipet_idea_service_item_bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0 20px;
  margin: 0 0 20px;

  @media (min-width: 769px) {
    padding: 0;
    margin: auto 0 8px;
  }
}

.fujipet_idea_service_item_price {
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-black);

  @media (min-width: 769px) {
    font-size: 15px;
  }
}

.fujipet_idea_service_item_delivery {
  font-family: var(--ff-gothic);
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
  color: var(--color-black);
  @media (min-width: 769px) {
    font-size: 12px;
  }
}

.fujipet_idea_service_item_more {
  border-top: 1px dashed var(--color-green);
  padding: 15px 0 0;
  margin: 0 20px;

  @media (min-width: 769px) {
    padding: 13px 0 0;
    margin: 0;
  }
}

.fujipet_idea_service_item_more_a {
  display: inline-block;
  font-family: var(--ff-work);
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  text-decoration: none;
  color: var(--color-green);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 13px auto;
  background-color: transparent;
  padding-right: 25px;

  @media (min-width: 769px) {
    font-size: 15px;
    line-height: 17.6px;
  }
}

/* Service card action buttons */
.fujipet_idea_service_item_buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px dashed var(--color-green);
  padding: 15px 0 0;
  margin: 0 var(--gutter);

  @media (min-width: 769px) {
    margin: 0;
    padding: 20px 0 0;
  }
}

.fujipet_idea_service_item_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 54px;
  border-radius: 40px;
  font-family: var(--ff-gothic);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.7px;
  text-decoration: none;
  white-space: nowrap;
}

.fujipet_idea_service_item_btn--detail {
  background: var(--color-white);
  border: 2px solid var(--color-green);
  color: var(--color-green);
}

.fujipet_idea_service_item_btn--create {
  background: var(--color-green);
  color: var(--color-white);
}

/* -------------------------- Idea 02 head -------------------------- */

.fujipet_idea_02_head {
  position: relative;
  max-width: 926px;
  aspect-ratio: 1/0.6105;
  margin: 200px auto 80px;
  display: none !important;

  & > * {
    position: absolute;
  }

  @media (min-width: 769px) {
    display: block !important;
  }
}

.fujipet_idea_02_head_sp {
  position: relative;
  display: block;
  padding: 0 10px;
  margin: 90px 0 80px;

  @media (min-width: 769px) {
    display: none;
  }
}

.fujipet_idea_02_head_image_01,
.fujipet_idea_02_head_image_02,
.fujipet_idea_02_head_image_03,
.fujipet_idea_02_head_image_05,
.fujipet_idea_02_head_image_07,
.fujipet_idea_02_head_image_08,
.fujipet_idea_02_head_image_09,
.fujipet_idea_02_head_image_11,
.fujipet_idea_02_head_image_12,
.fujipet_idea_02_head_image_13,
.fujipet_idea_02_head_image_15 {
  width: 8.63%;
  aspect-ratio: 1/1.8036;
  object-fit: cover;
}

.fujipet_idea_02_head_image_06 {
  width: 27.50%;
  aspect-ratio: 1/0.5624;
  object-fit: cover;
}

.fujipet_idea_02_head_image_10 {
  width: 27.8%;
  aspect-ratio: 1/0.5555;
  object-fit: cover;
}

.fujipet_idea_02_head_image_14 {
  width: 27.98%;
  aspect-ratio: 1/0.557;
  object-fit: cover;
}

.fujipet_idea_02_head_image_01,
.fujipet_idea_02_head_image_02,
.fujipet_idea_02_head_image_03 {
  top: 0;
}

.fujipet_idea_02_head_image_05,
.fujipet_idea_02_head_image_06,
.fujipet_idea_02_head_image_07,
.fujipet_idea_02_head_image_08,
.fujipet_idea_02_head_image_09 {
  top: 27.5%;
}

.fujipet_idea_02_head_image_10,
.fujipet_idea_02_head_image_11,
.fujipet_idea_02_head_image_12,
.fujipet_idea_02_head_image_13,
.fujipet_idea_02_head_image_14,
.fujipet_idea_02_head_image_15 {
  top: 54.90%;
}

.fujipet_idea_02_head_image_16,
.fujipet_idea_02_head_desc {
  top: 82.2%;
}

.fujipet_idea_02_head_image_01,
.fujipet_idea_02_head_image_12 {
  left: 43.3%;
}

.fujipet_idea_02_head_image_02,
.fujipet_idea_02_head_image_13,
.fujipet_idea_02_head_desc {
  left: 52.91%;
}

.fujipet_idea_02_head_image_03,
.fujipet_idea_02_head_image_07,
.fujipet_idea_02_head_image_14 {
  left: 62.41%;
}

.fujipet_idea_02_head_image_04 {
  top: 27.5%;
  left: 1.8%;
  width: 21.51%;
}

.fujipet_idea_02_head_image_05 {
  left: 24.40%;
}

.fujipet_idea_02_head_image_06,
.fujipet_idea_02_head_image_11,
.fujipet_idea_02_head_image_16 {
  left: 34.01%;
}

.fujipet_idea_02_head_image_08 {
  left: 72.24%;
}

.fujipet_idea_02_head_image_09 {
  left: 81.85%;
}

.fujipet_idea_02_head_image_10 {
  left: 5.18%;
}

.fujipet_idea_02_head_image_15 {
  left: 91.46%;
}

.fujipet_idea_02_head_image_16 {
  top: 82.2%;
  width: 17.92%;
  aspect-ratio: 1/0.5624;
  object-fit: cover;
}

.fujipet_idea_02_head_image_01,
.fujipet_idea_02_head_image_02,
.fujipet_idea_02_head_image_03,
.fujipet_idea_02_head_image_05,
.fujipet_idea_02_head_image_06,
.fujipet_idea_02_head_image_07,
.fujipet_idea_02_head_image_08,
.fujipet_idea_02_head_image_09,
.fujipet_idea_02_head_image_10,
.fujipet_idea_02_head_image_11,
.fujipet_idea_02_head_image_12,
.fujipet_idea_02_head_image_13,
.fujipet_idea_02_head_image_14,
.fujipet_idea_02_head_image_15,
.fujipet_idea_02_head_image_16 {
  opacity: 0;
  transition: opacity 1s;
}

.fujipet_idea_02_head.active .fujipet_idea_02_head_image_01,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_02,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_03,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_05,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_06,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_07,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_08,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_09,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_10,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_11,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_12,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_13,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_14,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_15,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_16 {
  opacity: 1;
}

.fujipet_idea_02_head.active .fujipet_idea_02_head_image_2,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_8,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_11 {
  transition: opacity 1s 0.0s;
}

.fujipet_idea_02_head.active .fujipet_idea_02_head_image_14 {
  transition: opacity 1s 0.2s;
}

.fujipet_idea_02_head.active .fujipet_idea_02_head_image_01,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_12 {
  transition: opacity 1s 0.4s;
}

.fujipet_idea_02_head.active .fujipet_idea_02_head_image_06,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_15 {
  transition: opacity 1s 0.6s;
}

.fujipet_idea_02_head.active .fujipet_idea_02_head_image_03,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_07,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_16 {
  transition: opacity 1s 0.8s;
}

.fujipet_idea_02_head.active .fujipet_idea_02_head_image_09,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_10 {
  transition: opacity 1s 1.0s;
}

.fujipet_idea_02_head.active .fujipet_idea_02_head_image_05,
.fujipet_idea_02_head.active .fujipet_idea_02_head_image_13 {
  transition: opacity 1s 1.2s;
}

.fujipet_idea_02_head_desc {
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: 16px;
  line-height: 35px;
  color: var(--color-black);
  margin-top: -6px;
}

.fujipet_idea_02_head_sp_title {
  width: 201px;
  margin: 0 0 10px;
}

.fujipet_idea_02_head_sp_images {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 10px 0;

  & img {
    width: 100%;
  }
}

.fujipet_idea_02_head_sp_image_01,
.fujipet_idea_02_head_sp_image_02,
.fujipet_idea_02_head_sp_image_03,
.fujipet_idea_02_head_sp_image_04,
.fujipet_idea_02_head_sp_image_05 {
  opacity: 0;
}

.fujipet_idea_02_head_sp_image_01 {
  width: 100%;
  transition: opacity 1s 0.2s;
}

.fujipet_idea_02_head_sp_image_02 {
  width: 48.73%;
  transition: opacity 1s 0.8s;
}

.fujipet_idea_02_head_sp_image_03 {
  width: 48.73%;
  transition: opacity 1s 0.4s;
}

.fujipet_idea_02_head_sp_image_04 {
  width: 29.57%;
  transition: opacity 1s 0.4s;
}

.fujipet_idea_02_head_sp_image_05 {
  width: 29.57%;
  transition: opacity 1s 0.6s;
}

.fujipet_idea_02_head_sp_images.active .fujipet_idea_02_head_sp_image_01,
.fujipet_idea_02_head_sp_images.active .fujipet_idea_02_head_sp_image_02,
.fujipet_idea_02_head_sp_images.active .fujipet_idea_02_head_sp_image_03,
.fujipet_idea_02_head_sp_images.active .fujipet_idea_02_head_sp_image_04,
.fujipet_idea_02_head_sp_images.active .fujipet_idea_02_head_sp_image_05 {
  opacity: 1;
}

.fujipet_idea_02_head_sp_desc {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36.5%;

  & > p {
    font-family: var(--ff-gothic);
    font-weight: 700;
    font-size: 14px;
    line-height: 35px;
  }
}

/* -------------------------- Idea 03 head -------------------------- */

.fujipet_section_01_grid {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 0;
  max-width: none;
  padding: 0;
  margin: 46px auto 65px;

  @media (min-width: 769px) {
    align-items: stretch;
    gap: 13px 0;
    margin: 10px auto 80px;
  }
}

.fujipet_section_01_grid_title {
  order: 2;
  position: static;
  z-index: 5;
  width: 48.45%;

  & > img {
    display: block;
    width: 100%;
  }

  @media (min-width: 769px) {
    order: unset;
    position: absolute;
    top: 31%;
    left: 14.5%;
    width: 20.31%;
  }
}

.fujipet_section_01_grid_image,
.fujipet_section_01_grid_blank,
.fujipet_section_01_grid_desc {
  width: 49%;
  height: auto;

  @media (min-width: 769px) {
    width: 24.1%;
    height: auto;
  }
}

.fujipet_section_01_grid_blank,
.fujipet_section_01_grid_image.image5 {
  display: none !important;

  @media (min-width: 769px) {
    display: block !important;
  }
}

.fujipet_section_01_grid_image {
  opacity: 0;
  transition: opacity 1s;
}

.fujipet_section_01_grid_image.image1 {
  order: 1;

  @media (min-width: 769px) {
    order: 3;
  }
}

.fujipet_section_01_grid_image.image2 {
  order: 3;

  @media (min-width: 769px) {
    order: 4;
  }
}

.fujipet_section_01_grid_image.image3 {
  order: 4;

  @media (min-width: 769px) {
    order: 7;
  }
}

.fujipet_section_01_grid_image.image4 {
  order: 6;

  @media (min-width: 769px) {
    order: 5;
  }
}

.fujipet_section_01_grid_image.image5 {

  @media (min-width: 769px) {
    order: 6;
  }
}

.fujipet_section_01_grid.active .fujipet_section_01_grid_image {
  opacity: 1;
}

.fujipet_section_01_grid.active .fujipet_section_01_grid_image.image1 {
  transition: opacity 1s 0.2s;
}

.fujipet_section_01_grid.active .fujipet_section_01_grid_image.image4 {
  transition: opacity 1s 0.4s;
}

.fujipet_section_01_grid.active .fujipet_section_01_grid_image.image2 {
  transition: opacity 1s 0.6s;
}

.fujipet_section_01_grid.active .fujipet_section_01_grid_image.image3 {
  transition: opacity 1s 0.8s;
}

/* PC-specific animation timing overrides */
@media (min-width: 769px) {
  .fujipet_section_01_grid.active .fujipet_section_01_grid_image.image3 {
    transition: opacity 1s 0.2s;
  }

  .fujipet_section_01_grid.active .fujipet_section_01_grid_image.image1,
  .fujipet_section_01_grid.active .fujipet_section_01_grid_image.image5 {
    transition: opacity 1s 0.4s;
  }

  .fujipet_section_01_grid.active .fujipet_section_01_grid_image.image4 {
    transition: opacity 1s 0.6s;
  }

  .fujipet_section_01_grid.active .fujipet_section_01_grid_image.image2 {
    transition: opacity 1s 0.8s;
  }
}

.fujipet_section_01_grid_desc {
  display: flex;
  justify-content: center;
  align-items: center;
  order: 5;
  padding-left: 8px;

  @media (min-width: 769px) {
    order: 8;
    align-self: auto;
    padding-left: 5px;
  }

  & > p {
    font-family: var(--ff-gothic);
    font-weight: 700;
    font-size: calc(12 / 375 * 100vw);
    line-height: 2.5;
    color: var(--color-black);
    @media (min-width: 769px) {
      font-size: 14px;
      text-align: center;
    }
  }
}

/* -------------------------- Service comparison table -------------------------- */

.fujipet_service_table--mobile {
  padding: 0;
  margin-top: 80px;
  @media (min-width: 769px) {
    margin-top: 100px;
  }

  @media (min-width: 1003px) {
    display: none;
  }
}

.fujipet_service_table--desktop {
  display: none;
  margin-top: 100px;

  @media (min-width: 1003px) {
    display: block;
  }
}

.fujipet_service_table_heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.fujipet_service_table_title {
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: 25px;
  color: var(--color-green);
  line-height: 1;
  margin: 0;

  @media (min-width: 769px) {
    text-align: center;
  }
}

.fujipet_service_table_arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  @media (min-width: 769px) {
    display: none;
  }

  & svg {
    display: block;
  }
}

.fujipet_service_table_scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 10px;
}

.fujipet_service_table_pair {
  display: flex;
  gap: 22px;
  margin-top: 20px;
}

.fujipet_service_table_col {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--color-green);
  background-color: var(--color-green);

  & .fujipet_service_table_grid {
    width: 100%;
    min-width: 0;
    border: none;
  }
}

.fujipet_service_table_grid {
  min-width: 501px;
  width: 100%;

  @media (min-width: 769px) {
    width: var(--desktop-width);
    margin: 0 auto;
  }

  border-collapse: collapse;
  border: 1.5px solid var(--color-green);
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: 14px;
  line-height: 23px;
  color: var(--color-black);

  & thead tr {
    background-color: var(--color-green);
  }

  & td {
    font-weight: bold;
    @media (min-width: 769px) {
      height: 55px;
    }
  }

  & tr.empty {
    background: #F6F6F6;
  }

  & th {
    color: var(--color-white);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: 18px 10px;
    text-align: center;
    white-space: nowrap;
    border-left: 1px solid rgba(255, 255, 255, 0.3);

    &:first-child {
      border-left: none;
      width: 126px;

      @media (min-width: 769px) {
        width: 25%;
      }
    }
  }

  & tbody tr {
    background-color: var(--color-white);
    border-top: 1px solid color-mix(in srgb, var(--color-green) 35%, transparent);
  }

  & tbody tr:first-child {
    border-top: none;
  }

  & td {
    padding: 14px 10px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    border-left: 1px solid color-mix(in srgb, var(--color-green) 35%, transparent);
    @media (min-width: 769px) {
      padding: 7px;
    }

    &:first-child {
      border-left: none;
    }
  }
}

.fujipet_service_table_name {
  color: var(--color-green);
  text-align: center;
  white-space: normal;
  line-height: 20px;
}

/* -------------------------- See all service -------------------------- */

.fujipet_see_all_service {
  padding: 40px 0;

  @media (min-width: 769px) {
    padding: 61px 0 120px;
  }
}

.fujipet_see_all_service_a {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-green);
  border-radius: var(--radius-pill);
  width: 335px;
  height: 70px;
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--color-white);
  margin: 0 auto;

  @media (min-width: 769px) {
    height: 75px;
    font-weight: 600;
    font-size: 18px;
  }
}

/* -------------------------- Hint -------------------------- */

.fujipet_hint {
  position: relative;
  background-color: var(--color-bg-hint);
  padding: 0;

  @media (min-width: 769px) {
    margin: 94px 0 0;
  }
}

.fujipet_hint_list {
  position: relative;
  max-width: none;
  margin: 0 auto 100px;

  @media (min-width: 769px) {
    width: var(--desktop-width);
    max-width: var(--desktop-max-width);
    margin: 0 auto 120px;
    padding: 0 20px;
  }
}

.fujipet_hint_slider {
  margin-top: 20px;
  @media (min-width: 769px) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 38px;
  }

  & .slick-track {
    display: flex;
  }

  & .slick-slide {
    height: auto;
    margin: 0 10px;

    & > div {
      height: 100%;
    }
  }

  & .slick-list {
    margin: 0 -10px;
  }

  & .slick-dots {
    display: flex;
    justify-content: center;
    gap: 0 4px;
    margin-top: 20px;
  }

  & .slick-dots > li > button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-size: 0;
  }

  & .slick-dots > li > button:before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-radius: var(--radius-circle);
    background-color: var(--color-dot-inactive);
    font-size: 0;
  }

  & .slick-dots > li.slick-active > button:before {
    background-color: var(--color-green);
  }
}

.fujipet_hint_item {
  display: block;
  height: 100%;
  border: 1px solid var(--color-green);
  background-color: var(--color-white);
  margin: 0 20px;
  padding: 30px 20px;
  max-width: calc(100% - 40px);

  @media (min-width: 769px) {
    display: flex;
    flex-flow: column nowrap;
    justify-content: start;
    /*height: 320px;*/
    max-width: 100%;
    margin: 0;
    @media (min-width: 1024px) {
      /*height: 270px;*/
    }
  }
}

.fujipet_hint_item_title {
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: 17px;
  line-height: 25.5px;
  text-align: left;
  color: var(--color-green);
  margin: 0 0 20px;

  @media (min-width: 769px) {
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
  }
}

.fujipet_hint_item_desc {
  font-family: var(--ff-gothic);
  font-weight: 400;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: -0.03em;
  text-align: justify;
  color: var(--color-black);

  @media (min-width: 769px) {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0;
    text-align: left;
  }
}

.fujipet_hint_item_image_01,
.fujipet_hint_item_image_02,
.fujipet_hint_item_image_03,
.fujipet_hint_item_image_04 {
  display: block;
  max-width: 90%;
}

.fujipet_hint_item_image_01 {
  width: 100%;
  margin: 25px auto 0;

  @media (min-width: 769px) {
    margin: 26px auto 0;
  }
}

.fujipet_hint_item_image_02 {
  display: block;
  padding: 0 31%;
  width: 100%;
  margin: 25px auto 0;

  @media (min-width: 769px) {
    margin: 23px auto 0;
  }
}

.fujipet_hint_item_image_03 {
  display: block;
  padding: 0 31%;
  width: 100%;
  margin: 25px auto 0;

  @media (min-width: 769px) {
    margin: 16px auto 0;
  }
}

.fujipet_hint_item_image_04 {
  width: 246px;
  margin: 25px auto 40px;

  @media (min-width: 769px) {
    margin: 35px auto 0;
  }
}

/* -------------------------- Report -------------------------- */

.fujipet_report_slider {
  margin-block: 20px 0;
  padding-inline: var(--gutter);

  @media (min-width: 769px) {
    width: calc(var(--desktop-width) - var(--gutter) * 2);
    max-width: calc(var(--desktop-max-width) - 40px);
    margin-block: 40px;
    margin-inline: auto;
    padding-inline: 0;
  }
}

.fujipet_report_swiper {
  overflow: hidden;
}

.fujipet_report_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fujipet_report_swiper .swiper-slide {
  width: auto;
  height: auto;
}

.fujipet_report_card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 220px;
  text-decoration: none;
  color: inherit;

  @media (min-width: 769px) {
    width: 280px;
  }
}

.fujipet_report_controls {
  margin-block-start: 24px;

  @media (min-width: 769px) {
    margin-block-start: 48px;
  }
}

/* ---- Slider controls (scrollbar + arrows) — shared component ---- */

.fujipet_slider_controls {
  display: flex;
  gap: 18px;
  align-items: center;

  @media (min-width: 769px) {
    gap: 46px;
  }
}

.fujipet_slider_controls__progress {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
}

.fujipet_slider_controls__arrows {
  position: relative;
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  align-items: center;
  align-self: flex-end;
  padding-block-end: 2px;
  @media (min-width: 769px) {
    gap: 12px;
  }
}

.fujipet_slider_controls__colon {
  display: block;
  width: 2px;
  height: 8px;
}

/* Scrollbar track */
.fujipet_slider_controls .swiper-scrollbar {
  position: relative;
  inset: auto;
  width: 100%;
  height: 2px;
  background-color: transparent;
}

.fujipet_slider_controls .swiper-scrollbar::after {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  z-index: 0;
  width: 100%;
  height: 1px;
  content: "";
  background-color: #d6d6d6;
}

/* Scrollbar drag handle */
.fujipet_slider_controls .swiper-scrollbar-drag {
  z-index: 1;
  background-color: #333;
  border-radius: 0;
}

/* Navigation buttons */
.fujipet_slider_controls .swiper-button-prev,
.fujipet_slider_controls .swiper-button-next {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 200ms ease-out;
}

.fujipet_slider_controls .swiper-button-prev::after,
.fujipet_slider_controls .swiper-button-next::after {
  display: none;
}

.fujipet_slider_controls .swiper-button-prev {
  transform: rotate(180deg);
}

/* Arrow icon */
.fujipet_slider_controls__arrow-icon {
  display: block;
  width: 28px;
  height: 29px;

  @media (min-width: 769px) {
    width: 27px;
    height: 27px;
  }
}

.fujipet_slider_controls__arrow-icon--disabled {
  display: none;
}

/* Disabled state */
.fujipet_slider_controls .swiper-button-prev.swiper-button-disabled,
.fujipet_slider_controls .swiper-button-next.swiper-button-disabled {
  cursor: default;
  opacity: 1;
  transition: none;
}

.fujipet_slider_controls .swiper-button-disabled .fujipet_slider_controls__arrow-icon {
  opacity: 0.6;

  @media (min-width: 769px) {
    display: none;
  }
}

.fujipet_slider_controls .swiper-button-disabled .fujipet_slider_controls__arrow-icon--disabled {
  display: none;

  @media (min-width: 769px) {
    display: block;
    width: 27px;
    height: 27px;
  }
}

/* Hover (PC only) */
@media (min-width: 769px) {
  .fujipet_slider_controls .swiper-button-prev:hover,
  .fujipet_slider_controls .swiper-button-next:hover {
    opacity: 0.8;
  }
}

.fujipet_report_card_image {
  overflow: hidden;
  border-radius: 0;

  & img {
    aspect-ratio: 220 / 293;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.fujipet_report_card_text {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-black);
  text-align: justify;
  overflow: hidden;
  display: -webkit-box;
}

.fujipet_visumo_wrap {
  position: relative;
  margin-top: 65px;
  @media (min-width: 769px) {
    margin-top: 0;
  }
}

.fujipet_visumo_title {
  color: var(--color-green);
  text-align: center;
  font-family: var(--ff-gothic);
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 15px 0;
  @media (min-width: 769px) {
    margin: 0;
  }
}

.fujipet_visumo_head {
  @media (min-width: 769px) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 20px;
  }
}

.fujipet_visumo_head_subtitle {
  display: none;
  align-items: baseline;
  @media (min-width: 769px) {
    display: inline-flex;
  }

  & > p:first-child {
    color: var(--color-green);
    text-align: center;
    font-family: var(--ff-gothic);
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.9;
  }

  & > p:last-child {
    color: var(--color-green);
    text-align: center;
    font-family: var(--ff-gothic);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7; /* 171.429% */
  }

}

.fujipet_visumo_foot_desc {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 14.5px 0;
  margin: 30px 0 0;

  & > p:first-child {
    color: var(--color-green);
    text-align: center;
    font-family: var(--ff-gothic);
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.9;
  }

  & > p:last-child {
    color: var(--color-green);
    text-align: center;
    font-family: var(--ff-gothic);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7; /* 171.429% */
  }

  @media (min-width: 769px) {
    gap: 12.5px 0;
    margin: 66px 0 0;

    & > p:first-child {
      font-size: 22px;
    }

    & > p:last-child {
      font-size: 14px;
    }
  }
}

/* visumo overwrite */
.ecbn-selection-widget {
  margin: 0 auto;
}

.ecbn-selection-wrapper {
  & .c-home-instagram__buttons {
    display: flex;
    justify-content: end;
    margin: 0 0 8px;
  }

  & .ecbn-selection-title {
    margin: 0 0 35px;
    display: none;
  }

  & .ecbn-selection-title img {
    display: none;
  }

  & .ecbn-selection-title > span {
    font-family: var(--ff-gothic);
    font-weight: 700;
    font-size: 31px;
    line-height: 55px;
    color: var(--color-green);
  }

  & .ecbn-selection-description {
    display: none;
  }

  & .ecbn-selection-footer2 {
    display: none !important;
  }
}

.ecbn-selection-item .ecbn-selection-detail--user {
  padding: 5px 0 0;
}

.vsm-slider .ecbn-selection-widget-new div.ecbn-selection-to-nextpage {
  display: none;
}

.fujipet_visumo_wrap .vsm-slider .ecbn-selection-item .ecbn-selection-user {
  font-size: 12px;
  padding: 2px 6px 3px 24px;

  @media (min-width: 769px) {
    font-size: unset;
    padding: 0 0 2px 2rem;
  }
}

/* -------------------------- Guide -------------------------- */

.fujipet_guide {
  position: relative;
  padding: 60px 0 90px;

  @media (min-width: 769px) {
    padding: 120px 0 200px;
    --desktop-max-width: calc(880px + var(--gutter) * 2);
  }
}

.fujipet_guide_in {
  position: relative;
  max-width: none;
  padding: 0;
  margin: 0;

  @media (min-width: 769px) {
    width: var(--desktop-width);
    max-width: var(--desktop-max-width);
    margin-inline: auto;
    padding-inline: 20px;
  }
}

.fujipet_guide_title {
  display: block;
  max-width: 1108px;
  padding: 0 40px;
  margin: 0 0 41px;

  @media (min-width: 769px) {
    display: grid;
    place-items: center;
    margin: 0 0 82px;
  }
}

.fujipet_guide_step_title {
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  text-align: center;
  color: var(--color-black);
  display: none;

  @media (min-width: 769px) {
    display: block;
    margin: 0 0 49px;
  }
}

.fujipet_guide_step_pic {
  display: block;
  max-width: none;
  margin: 0 auto 80px;

  & > img {
    display: block;
    width: 100%;
  }

  @media (min-width: 769px) {
    max-width: 880px;
    margin: 0 auto 141px;
  }
}

.fujipet_guide_faq {
  max-width: 100%;
  padding: 0 20px;
  margin: 0;

  @media (min-width: 769px) {
    padding: 0;
    margin: 0 auto;
  }
}

.fujipet_guide_faq_title {
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: 19px;
  line-height: 28px;
  color: var(--color-green);
  background-repeat: no-repeat;
  background-position: left 4px center;
  background-size: 23px auto;
  background-color: transparent;
  padding-left: 37px;
  margin: 0 0 14px;

  @media (min-width: 769px) {
    background-position: left 10px center;
    padding-left: 43px;
  }
}

.fujipet_guide_faq_list {
  border-top: 1px dotted var(--color-black);
}

.fujipet_guide_faq_item {
  border-bottom: 1px dotted var(--color-black);
}

.fujipet_guide_faq_item_in {
  display: block;
  background-repeat: no-repeat;
  background-position: right 6px top 21px;
  background-size: 14px auto;
  background-color: transparent;
  cursor: pointer;
  padding: 16px 0 17px;

  &.active {
    background-position: right 6px top 26px;
  }

  @media (min-width: 769px) {
    display: flex;
    background-position: right 20px top 21px;
    padding: 16px 80px 17px 10px;

    &.active {
      background-position: right 20px top 26px;
    }
  }
}

.fujipet_guide_faq_item_title {
  width: auto;
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: 15px;
  line-height: 23px;
  color: var(--color-green);
  padding-right: 0;

  @media (min-width: 769px) {
    width: 300px;
    font-size: 16px;
    padding-right: 10px;
  }
}

.fujipet_guide_faq_item_desc,
.fujipet_guide_faq_item_desc > a {
  flex: 1;
  font-family: var(--ff-gothic);
  font-weight: 600;
  font-size: 12px;
  line-height: 2;
  color: var(--color-black);

  @media (min-width: 769px) {
    font-weight: 700;
    font-size: 13px;
    line-height: 23px;
  }
}

.fujipet_guide_faq_item_desc {
  display: none;
  padding: 17px 0 10px;

  @media (min-width: 769px) {
    padding: 0;
  }

  a {
    color: var(--color-green);
    text-decoration: underline;
  }
}

/* -------------------------- Happy -------------------------- */

.fujipet_happy {
  background-color: var(--color-white);
  padding: 100px 0;

  @media (min-width: 769px) {
    padding: 150px 0 151px;
  }
}

.fujipet_happy_in {
  display: block;
  max-width: none;
  margin: 0 auto 80px;

  @media (min-width: 769px) {
    display: flex;
    justify-content: space-between;
    max-width: 766px;
    margin: 0 auto 151px;
  }
}

.fujipet_happy_left {
  display: block;
  width: auto;
  margin: 0 0 100px;

  @media (min-width: 769px) {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-end;
    width: 344px;
    margin: 0;
  }
}

.fujipet_happy_title {
  display: block;
  width: 250px;
  margin: 0 auto;

  & > img {
    width: 100%;
  }

  @media (min-width: 769px) {
    width: auto;
    margin: 0;
  }
}

.fujipet_happy_to_special {
  display: none;

  @media (min-width: 769px) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 66px;
    background-color: var(--color-green);
    border-radius: var(--radius-pill);
    font-family: var(--ff-gothic);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.05em;
    text-decoration: none;
    color: var(--color-white);
  }
}

.fujipet_happy_right {
  width: auto;
  padding: 0 20px;

  @media (min-width: 769px) {
    width: 322px;
    padding: 0;
  }
}

.fujipet_happy_sub_title {
  width: 255px;
  margin: 0 0 50px;

  & > img {
    width: 100%;
  }

  @media (min-width: 769px) {
    width: 280px;
    margin: 59px 0 60px;
  }
}

.fujipet_happy_desc {
  font-family: var(--ff-matisse);
  font-weight: 500;
  font-size: 14px;
  line-height: 36px;
}

.fujipet_happy_to_special_sp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 335px;
  height: 78px;
  background-color: var(--color-green);
  border-radius: var(--radius-pill);
  font-family: var(--ff-gothic);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.15em;
  text-decoration: none;
  color: var(--color-white);
  margin: 60px auto 0;

  @media (min-width: 769px) {
    display: none;
  }
}

.fujipet_happy_logo {
  text-align: center;

  & > img {
    width: 110px;
  }
}

/* -------------------------- Feature -------------------------- */

.fujipet_feature {
  padding: 80px 0 100px;

  @media (min-width: 769px) {
    padding: 160px 0 200px;
  }
}

.fujipet_feature_title {
  font-family: var(--ff-gothic);
  font-weight: 700;
  font-size: 28px;
  line-height: 55px;
  text-align: center;
  color: var(--color-green);
  margin: 0 0 40px;

  @media (min-width: 769px) {
    font-size: 31px;
    margin: 0 0 60px;
  }
}

.fujipet_feature_list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 40px 0;
  max-width: none;
  padding: 0 20px;
  margin: 0;

  @media (min-width: 769px) {
    gap: 66px 0;
    max-width: 1040px;
    padding: 0 40px;
    margin: 0 auto;
  }
}

.fujipet_feature_list_item {
  width: 48.35%;
  border-top: 2px solid var(--color-green);

  @media (min-width: 769px) {
    width: 31.25%;
  }
}

.fujipet_feature_list_a {
  display: block;
  text-decoration: none;

  & > img {
    display: block;
    width: 100%;
    margin: 0 0 10px;
  }
}

.fujipet_feature_list_text {
  display: flex;
  gap: 0 10px;

  & > p {
    font-weight: 600;
    font-size: 16px;
    line-height: 18.77px;
    color: var(--color-green);
  }

  & > p > span {
    font-weight: 600;
    font-size: 15px;
    line-height: 17.6px;
    color: var(--color-green);
    display: none;
  }

  & > img {
    width: 13px;
    height: auto;
    margin-top: 2px;
  }

  @media (min-width: 769px) {
    & > p {
      font-size: 15px;
      line-height: 17.6px;
    }

    & > p > span {
      display: inline;
    }
  }
}

.fujipet_section_02 {
  background: var(--color-bg-hint);
  padding: 120px 0 136px;
  position: relative;

  h2 img {
    width: 100%;
  }
}

/* Section 02 subheading (green bar + subtitle) */
.fujipet_s02_subheading {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 700;
  @media (min-width: 769px) {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 10px;
    background: var(--color-green);
  }
}

.fujipet_s02_subheading_title {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  font-family: var(--ff-gothic);
  font-size: 23px;
  line-height: 1.5;
  color: var(--color-white);
  padding: 0 16px;
  background: var(--color-green);
  text-align: center;

  @media (min-width: 769px) {
    width: auto;
    font-size: 31px;
    padding: 0;
    text-align: left;

  }
}

.fujipet_s02_subheading_subtitle {
  font-family: var(--ff-gothic);
  font-size: 15px;
  color: var(--color-green);
  margin-top: 8px;
  text-align: center;

  @media (min-width: 769px) {
    font-size: 18px;
    margin-top: 0;
    text-align: left;
    color: var(--color-white);
  }
}

/* -------------------------- 02: Ranking -------------------------- */
.fujipet_ranking {
  margin: 80px 0 70px;
  position: relative;
  @media (min-width: 769px) {
    margin: 70px 0 80px;
  }
}

.fujipet_ranking_contents {
  @media (min-width: 769px) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    margin-left: 79px;
  }
}

.fujipet_ranking_heading {
  .pc_block {
    p {
      color: var(--color-green);
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      margin-top: 8px;
    }
  }

}

.fujipet_ranking_list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 20px 0;
  @media (min-width: 769px) {
    flex: 1;
    margin: 0;
  }
}

/* --- Ranking Item --- */
.fp-ranking-item__header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 10px 12px 0;
  border-bottom: 1px dashed var(--color-green);
  text-decoration: none;
}

.fp-ranking-item__medal {
  position: relative;
  flex-shrink: 0;
  width: 31px;
  height: 39px;

  & img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.fp-ranking-item__name {
  flex: 1;
  font-family: var(--ff-gothic);
  font-size: 22px;
  font-weight: 700;
  line-height: normal;
  color: var(--color-green);
  white-space: nowrap;
}

.fp-ranking-item__reviews {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;

  @media (min-width: 769px) {
    flex-direction: row;
    gap: 20px;
  }
}

.fp-ranking-item__review {
  display: grid;
  place-items: center;
  background: var(--color-white);
  border: 1.5px solid var(--color-green);
  border-radius: 0;
  padding: 14px 20px;

  & p {
    font-family: var(--ff-gothic);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    color: var(--color-black);
    text-align: justify;
  }

  @media (min-width: 769px) {
    flex: 1;
    min-height: 70px;
  }
}