@charset "UTF-8";
/* Base
------------------------------- */
:root {
  --hf-white-01: #fff;
  --hf-black-01: #000;
  --hf-blue-01: #00489b;
  --hf-blue-02: #d3edf9;
  --hf-blue-03: #eff8ff;
  --hf-blue-04: #f4fbff;
  --hf-green-01: #2e8d24;
  --hf-green-02: #f5fff4;
  --hf-pink-01: #e75297;
  --hf-pink-02: #fff4f4;
  --hf-purple-01: #f7f2ff;
  --root-text-color: var(--hf-black-01);
  --root-font-size: 10;
  --font-family-noto-sans-jp: "Noto Sans JP";
  --font-family-rounded: "M PLUS Rounded 1c";
  --root-font-family: var(--font-family-noto-sans-jp), sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --breakpoints-pc: 768px;
  --scrollbar: 0;
  --rem: 1rem / var(--root-font-size);
  --vw-lg-1600: (100vw / 1600);
  --vw-small: (100vw / 375);
  --duration: 0.3s;
}

:focus:not(:focus-visible) {
  outline: none;
}

body {
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 768px) {
  body {
    overflow-x: clip;
  }
}

section[class*=p-]:where(.hf_project *) {
  font-family: var(--root-font-family);
  font-weight: var(--font-weight-regular);
  font-feature-settings: normal;
  line-height: 1.6;
  color: var(--root-text-color);
  letter-spacing: normal;
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    background-attachment: initial !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
    animation-duration: 1ms !important;
    animation-delay: -1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
/* layout
------------------------------- */
:where(.l-header) .l-header__nav__menus {
  letter-spacing: normal;
}

:where(.p-rel--cat--article) .slick-arrow {
  z-index: auto;
  inline-size: auto;
  block-size: auto;
  overflow: visible;
  translate: 0, 0;
}

@media (min-width: 769px), print {
  :where(#lineup) .c-heading img {
    inline-size: 124px;
  }
}
@media (max-width: 768px) {
  :where(#lineup) .c-heading img {
    inline-size: 87px;
  }
}
:where(#lineup) .c-heading--h3b {
  font-weight: var(--font-weight-medium);
}

:where(#lineup) .c-btn--shop:hover {
  color: #eb6da5;
}

@media (min-width: 769px), print {
  [class*=__inner]:not(:where(#lineup *)) {
    max-inline-size: 1150px;
    padding-inline: 75px;
    margin-inline: auto;
  }
}
@media (max-width: 768px) {
  [class*=__inner]:not(:where(#lineup *)) {
    padding-inline: calc(17.5 * var(--vw-small));
  }
}
/* button
------------------------------- */
.c-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  margin-inline: auto;
  line-height: 1;
  text-align: center;
}
@media (min-width: 769px), print {
  .c-button[class*="--size-02"] {
    max-inline-size: 520px;
  }
}

@media (min-width: 769px), print {
  .c-button[class*="--size-01"] {
    max-inline-size: 525px;
  }
}
@media (max-width: 768px) {
  .c-button[class*="--size-01"] {
    max-inline-size: calc(375 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .c-button[class*="--size-01"] > .c-button__link {
    min-block-size: 68px;
  }
}
@media (max-width: 768px) {
  .c-button[class*="--size-01"] > .c-button__link {
    min-block-size: calc(47.5 * var(--vw-small));
  }
}
.c-button__link {
  display: grid;
  place-content: center;
  inline-size: 100%;
}
@media (min-width: 769px), print {
  [class*="--size-02"] .c-button__link {
    block-size: 89px;
    border-radius: 45px;
  }
}
@media (max-width: 768px) {
  [class*="--size-02"] .c-button__link {
    block-size: calc(69.5 * var(--vw-small));
    border-radius: calc(35 * var(--vw-small));
  }
}
.c-button__link[class*="--icon-logo-01"]::before {
  background-image: url("/shared/image/hfproject/shared/lg_hf_ava_l-jg.png");
}
@media (min-width: 769px), print {
  .c-button__link[class*="--icon-logo-01"]::before {
    inset-inline-start: 27px;
    inline-size: 103px;
    block-size: 57px;
  }
}
@media (max-width: 768px) {
  .c-button__link[class*="--icon-logo-01"]::before {
    inset-inline-start: calc(25 * var(--vw-small));
    inline-size: calc(63 * var(--vw-small));
    block-size: calc(34.5 * var(--vw-small));
  }
}
.c-button__link[class*="--icon-arrow-02"]::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2089471%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2227%22%20height%3D%2227%22%3E%3Crect%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%208320%22%20width%3D%2227%22%20height%3D%2227%22%20rx%3D%2213.5%22%20fill%3D%22%2300489b%22%2F%3E%3Cpath%20data-name%3D%22%E3%83%91%E3%82%B9%2074973%22%20d%3D%22M11.5%2018.325l4.825-4.826L11.5%208.674%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
}
@media (min-width: 769px), print {
  .c-button__link[class*="--icon-arrow-02"]::after {
    inset-inline-end: 34px;
    inline-size: 27px;
    block-size: 27px;
  }
}
@media (max-width: 768px) {
  .c-button__link[class*="--icon-arrow-02"]::after {
    inset-inline-end: calc(25 * var(--vw-small));
    inline-size: calc(23 * var(--vw-small));
    block-size: calc(23 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .c-button__link {
    border-radius: 18px;
  }
}
@media (max-width: 768px) {
  .c-button__link {
    border-radius: calc(9 * var(--vw-small));
  }
}
.c-button__link[class*="--style-01"] {
  background-color: var(--hf-pink-01);
}

.c-button__link[class*="--style-02"] {
  background-color: var(--hf-white-01);
  border: solid var(--hf-blue-01);
}
@media (min-width: 769px), print {
  .c-button__link[class*="--style-02"] {
    border-width: 2px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 768px) {
  .c-button__link[class*="--style-02"] {
    border-width: calc(1 * var(--vw-small));
    box-shadow: 0 calc(1.5 * var(--vw-small)) calc(3 * var(--vw-small)) rgba(0, 0, 0, 0.1);
  }
}

.c-button__link[class*="--icon-"]::before,
.c-button__link[class*="--icon-"]::after {
  position: absolute;
  inset-block-start: 50%;
  content: "";
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  translate: 0 -50%;
}

.c-button__link[class*="--icon-arrow-01"]::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226.243%22%20height%3D%2228%22%20viewBox%3D%220%200%2026.243%2028%22%3E%3Cg%20transform%3D%22translate(1606.357%20-629)%20rotate(90)%22%3E%20%3Cpath%20d%3D%22M7.616%2C0h25%22%20transform%3D%22translate(622.884%201593.235)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%223%22%2F%3E%20%3Cpath%20d%3D%22M32.315%2C1l11%2C11-11%2C11%22%20transform%3D%22translate(612.185%201581.235)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

@media (min-width: 769px), print {
  .c-button__link[class*="--icon-arrow-01"]::after {
    inset-inline-end: 30px;
    inline-size: 18px;
    block-size: 15px;
  }
}
@media (max-width: 768px) {
  .c-button__link[class*="--icon-arrow-01"]::after {
    inset-inline-end: calc(18.5 * var(--vw-small));
    inline-size: calc(12.5 * var(--vw-small));
    block-size: calc(12.5 * var(--vw-small));
  }
}
.c-button__link[class*="--icon-blank-01"]::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229.58%22%20height%3D%2228%22%3E%3Cg%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2089232%22%20fill%3D%22%23fff%22%3E%3Cpath%20data-name%3D%22%E3%83%91%E3%82%B9%2073912%22%20d%3D%22M10.011%202.29H27.29v15.609H10.011zm-2.29%2017.9H29.58V-.001H7.721z%22%2F%3E%3Cpath%20data-name%3D%22%E3%83%91%E3%82%B9%2073913%22%20d%3D%22M0%207.712V28h21.773v-5.782h-2.29v3.492H2.29V10.002H5.6v-2.29z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

@media (min-width: 769px), print {
  .c-button__link[class*="--icon-blank-01"]::after {
    inset-inline-end: 30px;
    inline-size: 21px;
    block-size: 20px;
  }
}
@media (max-width: 768px) {
  .c-button__link[class*="--icon-blank-01"]::after {
    inset-inline-end: calc(18 * var(--vw-small));
    inline-size: calc(15 * var(--vw-small));
    block-size: calc(14 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .c-button__img-01[class][class] {
    margin-inline-start: 24px;
  }
}
@media (max-width: 768px) {
  .c-button__img-01[class][class] {
    max-inline-size: calc(130 * var(--vw-small));
    margin-inline-start: calc(25.5 * var(--vw-small));
  }
}

/* accordion
------------------------------- */
.c-accordion {
  --accordion-button-bg-color: var(--hf-blue-03);
  --accordion-inner-bg-color: var(--hf-blue-03);
  --accordion-button-icon-line-color: var(--hf-blue-01);
}

.c-accordion__title {
  display: flex;
  align-items: center;
}

.c-accordion__button {
  position: relative;
  display: flex;
  justify-content: space-between;
  inline-size: 100%;
  margin-inline: auto;
  color: var(--hf-black-01);
  text-align: start;
  cursor: default;
  background-color: var(--accordion-button-bg-color);
}
@media (min-width: 769px), print {
  .c-accordion__button {
    column-gap: 25px;
    align-items: center;
    padding-block: 23px;
    padding-inline: 26px 70px;
    border-radius: 20px;
  }
}
@media (max-width: 768px) {
  .c-accordion__button {
    column-gap: calc(10.5 * var(--vw-small));
    justify-content: flex-start;
    padding-block: calc(14 * var(--vw-small));
    padding-inline: calc(11.5 * var(--vw-small)) calc(36 * var(--vw-small));
    border-radius: calc(10 * var(--vw-small));
  }
}
.c-accordion__button[aria-expanded] {
  cursor: pointer;
}

@media (min-width: 769px), print {
  :is(.c-accordion__button__icon-q, .c-accordion__button__icon-a) {
    inline-size: 24px;
  }
}
@media (max-width: 768px) {
  :is(.c-accordion__button__icon-q, .c-accordion__button__icon-a) {
    inline-size: calc(20 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .c-accordion__button__icon-q {
    margin-block-start: -8px;
  }
}
@media (max-width: 768px) {
  .c-accordion__button__icon-q {
    margin-block-start: calc(4 * var(--vw-small));
  }
}
@media (max-width: 768px) {
  .c-accordion__button__icon-a {
    margin-block-start: calc(6 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .c-accordion__button__text {
    flex-basis: calc(100% - 50px);
    font-size: calc(16 * var(--rem));
    line-height: 1.875;
  }
}
@media (max-width: 768px) {
  .c-accordion__button__text {
    flex-basis: calc(100% - 32 * var(--vw-small));
    font-size: calc(13 * var(--vw-small));
    line-height: 1.7692307692;
  }
}
.c-accordion__button[aria-expanded] .c-accordion__button__icon-line {
  position: absolute;
  inset-block-start: 50%;
  margin-inline-start: auto;
}

@media (min-width: 769px), print {
  .c-accordion__button[aria-expanded] .c-accordion__button__icon-line {
    inset-inline-end: 27px;
    inline-size: 18px;
    block-size: 18px;
  }
}
@media (max-width: 768px) {
  .c-accordion__button[aria-expanded] .c-accordion__button__icon-line {
    inset-inline-end: calc(11 * var(--vw-small));
    inline-size: calc(12.5 * var(--vw-small));
    block-size: calc(12.5 * var(--vw-small));
  }
}
.c-accordion__button[aria-expanded] .c-accordion__button__icon-line::before,
.c-accordion__button[aria-expanded] .c-accordion__button__icon-line::after {
  position: absolute;
  display: block;
  content: "";
  background-color: var(--accordion-button-icon-line-color);
  transition: rotate var(--duration);
  translate: 0;
}

@media (min-width: 769px), print {
  .c-accordion__button[aria-expanded] .c-accordion__button__icon-line::before,
  .c-accordion__button[aria-expanded] .c-accordion__button__icon-line::after {
    inline-size: 18px;
    block-size: 2px;
  }
}
@media (max-width: 768px) {
  .c-accordion__button[aria-expanded] .c-accordion__button__icon-line::before,
  .c-accordion__button[aria-expanded] .c-accordion__button__icon-line::after {
    inline-size: calc(12.5 * var(--vw-small));
    block-size: calc(2 * var(--vw-small));
  }
}
.c-accordion__button[aria-expanded=false] .c-accordion__button__icon-line::before {
  rotate: -90deg;
}

.c-accordion__button[aria-expanded=true] .c-accordion__button__icon-line::before {
  rotate: 0deg;
}

.c-accordion__detail[aria-hidden=true] {
  display: none;
}

.c-accordion__detail[aria-hidden=false] {
  display: block;
}

.c-accordion__detail__inner {
  position: relative;
  display: flex;
  margin-inline: auto;
  background-color: var(--accordion-inner-bg-color);
}

@media (min-width: 769px), print {
  .c-accordion__detail__inner {
    column-gap: 25px;
    align-items: center;
    padding-block: 23px;
    padding-inline: 29px 87px;
    border-radius: 20px;
  }
}
@media (max-width: 768px) {
  .c-accordion__detail__inner {
    column-gap: calc(10.5 * var(--vw-small));
    align-items: flex-start;
    padding-block: calc(14.5 * var(--vw-small)) calc(17 * var(--vw-small));
    padding-inline: calc(14 * var(--vw-small)) calc(17.5 * var(--vw-small));
    border-radius: calc(10 * var(--vw-small));
  }
}
.c-accordion__detail__inner::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  content: "";
  background-repeat: repeat-x;
  background-size: contain;
  translate: -50%;
}

@media (min-width: 769px), print {
  .c-accordion__detail__inner::before {
    inline-size: 100%;
    max-inline-size: 817px;
    block-size: 2px;
    background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22819%22%20height%3D%222%22%20viewBox%3D%220%200%20819%202%22%3E%3Cline%20x2%3D%22817%22%20transform%3D%22translate(1%201)%22%20fill%3D%22none%22%20stroke%3D%22%2300489b%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%220%206%22%2F%3E%3C%2Fsvg%3E");
  }
}
@media (max-width: 768px) {
  .c-accordion__detail__inner::before {
    inline-size: calc(100% - 12 * var(--vw-small));
    block-size: calc(1 * var(--vw-small));
    background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22653%22%20height%3D%223%22%20viewBox%3D%220%200%20653%203%22%3E%3Cline%20x2%3D%22650%22%20transform%3D%22translate(1.5%201.5)%22%20fill%3D%22none%22%20stroke%3D%22%2300489b%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%223%22%20stroke-dasharray%3D%220%209%22%2F%3E%3C%2Fsvg%3E");
  }
}
.c-accordion__detail__text-wrap {
  flex-basis: 100%;
}

.c-accordion__detail__text-wrap > * + * {
  margin-block-start: 1em;
}

.c-accordion__detail__text {
  font-weight: inherit;
}

@media (min-width: 769px), print {
  .c-accordion__detail__text {
    font-size: calc(16 * var(--rem));
    line-height: 1.875;
  }
}
@media (max-width: 768px) {
  .c-accordion__detail__text {
    font-size: calc(13 * var(--vw-small));
    line-height: 1.7692307692;
  }
}
/* list
------------------------------- */
.c-list.c-list--note > li::before {
  display: inline-block;
  content: "※";
}
.c-list.c-list--note-num {
  counter-reset: my-counter;
}
.c-list.c-list--note-num > li {
  counter-increment: calc-ex9;
}
.c-list.c-list--note-num > li::before {
  display: inline-block;
  content: "※" counter(calc-ex9);
}
.c-list.c-list--desc > li::before {
  display: inline-block;
  content: "・";
}
.c-list.c-list--circle-01 > li::before {
  display: inline-block;
  content: "●";
}

/* label
------------------------------- */
.c-label {
  position: relative;
  display: grid;
  place-content: center;
  inline-size: fit-content;
  background-color: var(--label-color);
}
@media (min-width: 769px), print {
  .c-label {
    min-block-size: 25px;
    padding-inline: 9px;
    font-size: calc(14 * var(--rem));
    border-radius: 0 4px 4px 0;
  }
}
@media (max-width: 768px) {
  .c-label {
    min-block-size: calc(20 * var(--vw-small));
    padding-inline: calc(4.5 * var(--vw-small));
    font-size: calc(12 * var(--vw-small));
    border-radius: 0 calc(2 * var(--vw-small)) calc(2 * var(--vw-small)) 0;
  }
}
.c-label::before {
  position: absolute;
  inset-block-start: 0;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  content: "";
  background-color: var(--label-color);
}
@media (min-width: 769px), print {
  .c-label::before {
    inset-inline-start: -11.5px;
    inline-size: 12px;
    block-size: 25px;
  }
}
@media (max-width: 768px) {
  .c-label::before {
    inset-inline-start: calc(-9 * var(--vw-small));
    inline-size: calc(9.5 * var(--vw-small));
    block-size: calc(20 * var(--vw-small));
  }
}

.c-label--01 {
  --label-color: var(--hf-blue-01);
  color: var(--hf-white-01);
}

.c-label--02 {
  --label-color: var(--hf-green-01);
  color: var(--hf-white-01);
}

.c-label--03 {
  --label-color: var(--hf-pink-01);
  color: var(--hf-white-01);
}

/* more-accordion
------------------------------- */
.c-more-accordion {
  --accordion-text-default-color: var(--hf-white-01);
  --accordion-line-width: 0;
  --accordion-line-color: var(--hf-white-01);
  --accordion-border-radius: 18px;
  --accordion-inner-bg-color: rgb(255 255 255 / 0);
  --accordion-icon-width: 20px;
  --accordion-icon-bg-color: rgb(255 255 255 / 0);
  --accordion-icon-line-color: var(--hf-white-01);
  --accordion-icon-line-width: 2px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 769px), print {
  .c-more-accordion {
    --accordion-peek-height: 400px;
  }
}
@media (max-width: 768px) {
  .c-more-accordion {
    --accordion-peek-height: calc(490 * var(--vw-small));
    --accordion-border-radius: calc(9 * var(--vw-small));
    --accordion-icon-width: calc(12.5 * var(--vw-small));
  }
}
.c-more-accordion.c-more-accordion-01 {
  --accordion-bg-color: var(--hf-blue-01);
}
.c-more-accordion.c-more-accordion-02 {
  --accordion-bg-color: var(--hf-green-01);
}
.c-more-accordion[data-position=top] {
  flex-direction: column-reverse;
}
.c-more-accordion.is-opened {
  block-size: 100%;
}
.c-more-accordion > .c-more-accordion__summary {
  order: 0;
}
.c-more-accordion > .c-more-accordion__content {
  order: 1;
}
@media (max-width: 768px) {
  .p-project-01 .c-more-accordion {
    --accordion-peek-height: calc(500 * var(--vw-small));
  }
}
@media (max-width: 768px) {
  .p-project__block-02-01 .c-more-accordion {
    --accordion-peek-height: calc(470 * var(--vw-small));
  }
}
@media (max-width: 768px) {
  .p-project__block-02-02 .c-more-accordion {
    --accordion-peek-height: calc(550 * var(--vw-small));
  }
}

.c-more-accordion__summary {
  position: relative;
  display: block grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  inline-size: 100%;
  margin-inline: auto;
  text-align: start;
  cursor: pointer;
  background-color: var(--accordion-bg-color);
  border: var(--accordion-line-width) solid var(--accordion-line-color);
  border-radius: var(--accordion-border-radius);
  transition: opacity var(--duration) ease;
}
@media (min-width: 769px), print {
  .c-more-accordion__summary {
    inline-size: fit-content;
    min-inline-size: 300px;
    max-inline-size: 600px;
    padding: 18px 10px;
    margin-block-start: 30px;
  }
}
@media (max-width: 768px) {
  .c-more-accordion__summary {
    max-inline-size: calc(190 * var(--vw-small));
    padding: calc(7.5 * var(--vw-small));
  }
}
.c-more-accordion__summary::before {
  content: "";
}
.c-more-accordion__summary::-webkit-details-marker {
  display: none;
}
.c-more-accordion__summary:focus-visible {
  opacity: 0.7;
}
@media (hover: hover) {
  .c-more-accordion__summary:where(:any-link, :enabled, summary):hover {
    opacity: 0.7;
  }
}
@media (min-width: 769px), print {
  .c-more-accordion.is-opened .c-more-accordion__summary {
    margin-block-start: 40px;
  }
}
@media (max-width: 768px) {
  .c-more-accordion.is-opened .c-more-accordion__summary {
    margin-block-start: calc(10 * var(--vw-small));
  }
}

.c-more-accordion__txt {
  position: relative;
  inset-block-start: -2px;
  font-size: 0;
  background-image: url("/shared/image/hfproject/shared/txt_more_01_ava_tc.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: background-image var(--duration) ease;
}
@media (min-width: 769px), print {
  .c-more-accordion__txt {
    inline-size: 142px;
    block-size: 32px;
  }
}
@media (max-width: 768px) {
  .c-more-accordion__txt {
    inline-size: calc(109 * var(--vw-small));
    block-size: calc(28.5 * var(--vw-small));
  }
}
.c-more-accordion.is-opened .c-more-accordion__txt {
  background-image: url("/shared/image/hfproject/shared/txt_close_01_ava_tc.png");
}
@media (max-width: 768px) {
  .c-more-accordion.is-opened .c-more-accordion__txt {
    inline-size: calc(130 * var(--vw-small));
    block-size: calc(32.5 * var(--vw-small));
  }
}

.c-more-accordion__icon-line {
  position: relative;
  display: block grid;
  place-items: center;
  justify-self: flex-end;
  inline-size: var(--accordion-icon-width);
  block-size: var(--accordion-icon-width);
  background-color: var(--accordion-icon-bg-color);
}
@media (min-width: 769px), print {
  .c-more-accordion__icon-line {
    inset-inline-end: 20px;
  }
}
@media (max-width: 768px) {
  .c-more-accordion__icon-line {
    inset-inline-end: calc(8 * var(--vw-small));
  }
}
.c-more-accordion__icon-line::before, .c-more-accordion__icon-line::after {
  position: absolute;
  inline-size: var(--accordion-icon-width);
  block-size: var(--accordion-icon-line-width);
  content: "";
  background-color: var(--accordion-icon-line-color);
}
.c-more-accordion__icon-line::before {
  transition: rotate var(--duration);
  rotate: -90deg;
  translate: 0 -50%;
}
@media (min-width: 769px), print {
  .c-more-accordion__icon-line::before {
    margin-block-start: 1px;
  }
}
@media (max-width: 768px) {
  .c-more-accordion__icon-line::before {
    margin-block-start: 2px;
  }
}
.c-more-accordion.is-opened .c-more-accordion__icon-line::before {
  rotate: 0deg;
  translate: 0 0;
}

.c-more-accordion__content {
  display: block;
}
.c-more-accordion--overflow .c-more-accordion__content {
  position: relative;
  max-block-size: var(--accordion-peek-height, 3em);
  overflow: hidden;
  transition: max-block-size var(--duration) ease;
}
.c-more-accordion--overflow .c-more-accordion__content::before {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  z-index: 1;
  visibility: visible;
  content: "";
  opacity: 1;
  transition: visibility var(--duration), opacity var(--duration);
  translate: -50%;
}
@media (min-width: 769px), print {
  .c-more-accordion--overflow .c-more-accordion__content::before {
    inline-size: 940px;
    block-size: 101px;
    background: linear-gradient(to top, var(--hf-white-01) 0%, rgba(255, 255, 255, 0) 100%);
  }
}
@media (max-width: 768px) {
  .c-more-accordion--overflow .c-more-accordion__content::before {
    inline-size: calc(300 * var(--vw-small));
    block-size: calc(50.5 * var(--vw-small));
    background: linear-gradient(to top, var(--hf-white-01) 30%, rgba(255, 255, 255, 0) 100%);
  }
}
@media (min-width: 769px), print {
  .p-project__block-02-01 .c-more-accordion--overflow .c-more-accordion__content::before {
    background: linear-gradient(to top, var(--hf-white-01) 30%, rgba(255, 255, 255, 0) 100%);
  }
}
.c-more-accordion--overflow.is-opened .c-more-accordion__content {
  max-block-size: var(--full-height);
}
@media (min-width: 769px), print {
  .c-more-accordion--overflow.is-opened .c-more-accordion__content {
    padding-block-end: 20px;
  }
}
@media (max-width: 768px) {
  .c-more-accordion--overflow.is-opened .c-more-accordion__content {
    padding-block-end: calc(20 * var(--vw-small));
  }
}
.c-more-accordion--overflow.is-opened .c-more-accordion__content::before {
  visibility: hidden;
  opacity: 0;
}

.c-more-accordion__content__inner {
  inline-size: inherit;
  block-size: 100%;
  padding: 0;
  background-color: var(--accordion-inner-bg-color);
}

/* card
------------------------------- */
.c-card {
  position: relative;
}
@media (min-width: 769px), print {
  .c-card {
    min-block-size: 397px;
    padding: 20px 20px 52px;
    border-radius: 15px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 768px) {
  .c-card {
    min-block-size: calc(320 * var(--vw-small));
    padding: calc(17.5 * var(--vw-small)) calc(17.5 * var(--vw-small)) calc(34.5 * var(--vw-small));
    border-radius: calc(7.5 * var(--vw-small));
    box-shadow: 0 calc(1.5 * var(--vw-small)) calc(3 * var(--vw-small)) rgba(0, 0, 0, 0.1);
  }
}

.c-card--01 {
  background-color: var(--hf-blue-04);
}

.c-card--02 {
  background-color: var(--hf-green-02);
}

.c-card--03 {
  background-color: var(--hf-pink-02);
}

.c-card__figure img[class] {
  object-fit: cover;
}
@media (min-width: 769px), print {
  .c-card__figure img[class] {
    inline-size: 369px;
    block-size: 220px;
    border-radius: 8px;
  }
}
@media (max-width: 768px) {
  .c-card__figure img[class] {
    inline-size: calc(305 * var(--vw-small));
    block-size: calc(153 * var(--vw-small));
    border-radius: calc(4 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .c-card__figure + .c-card__column {
    margin-block-start: 12px;
  }
}
@media (max-width: 768px) {
  .c-card__figure + .c-card__column {
    margin-block-start: calc(10 * var(--vw-small));
  }
}

.c-card__column {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
@media (min-width: 769px), print {
  .c-card__column + .c-card__heading-sub {
    margin-block-start: 10px;
  }
}
@media (max-width: 768px) {
  .c-card__column + .c-card__heading-sub {
    margin-block-start: calc(10 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .c-card__label {
    inset-inline-start: 12px;
  }
}
@media (max-width: 768px) {
  .c-card__label {
    inset-inline-start: calc(9 * var(--vw-small));
  }
}

.c-card__datetime {
  display: grid;
  place-content: center;
  font-weight: var(--font-weight-medium);
  border: 1px solid currentcolor;
}
@media (min-width: 769px), print {
  .c-card__datetime {
    inline-size: 90px;
    min-block-size: 25px;
    font-size: calc(12 * var(--rem));
    line-height: 1.3333333333;
    border-radius: 12.5px;
  }
}
@media (max-width: 768px) {
  .c-card__datetime {
    inline-size: calc(79 * var(--vw-small));
    min-block-size: calc(20 * var(--vw-small));
    font-size: calc(12 * var(--vw-small));
    line-height: 1.3333333333;
    border-radius: calc(11 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .c-card__heading-sub {
    font-size: calc(16 * var(--rem));
    line-height: 1.5;
  }
}
@media (max-width: 768px) {
  .c-card__heading-sub {
    font-size: calc(14 * var(--vw-small));
    line-height: 1.7857142857;
  }
}
@media (min-width: 769px), print {
  .c-card__heading-sub + .c-card__detail {
    margin-block-start: 10px;
  }
}
@media (max-width: 768px) {
  .c-card__heading-sub + .c-card__detail {
    margin-block-start: calc(10 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .c-card__detail {
    font-size: calc(14 * var(--rem));
    line-height: 1.5;
  }
}
@media (max-width: 768px) {
  .c-card__detail {
    font-size: calc(14 * var(--vw-small));
    line-height: 1.7857142857;
  }
}

.c-card__link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  transition: background-color var(--duration) ease, opacity var(--duration) ease;
  will-change: opacity;
}
@media (min-width: 769px), print {
  .c-card__link {
    border-radius: 15px;
  }
}
@media (max-width: 768px) {
  .c-card__link {
    border-radius: calc(7.5 * var(--vw-small));
  }
}
.c-card__link::before, .c-card__link::after {
  position: absolute;
  content: "";
}
.c-card__link::before {
  inset-block-end: 0;
  inset-inline-end: 0;
}
@media (min-width: 769px), print {
  .c-card__link::before {
    inline-size: 47px;
    block-size: 47px;
    border-radius: 50px 0 0;
  }
}
@media (max-width: 768px) {
  .c-card__link::before {
    inline-size: calc(34.5 * var(--vw-small));
    block-size: calc(34.5 * var(--vw-small));
    border-radius: calc(25 * var(--vw-small)) 0 0;
  }
}
.c-card--01 .c-card__link::before {
  background-color: var(--hf-blue-01);
}
.c-card--02 .c-card__link::before {
  background-color: var(--hf-green-01);
}
.c-card--03 .c-card__link::before {
  background-color: var(--hf-pink-01);
}
.c-card__link::after {
  content: "";
  background-image: url("/shared/image/tmpl/icn_btn_arw_r.svg");
  background-repeat: no-repeat;
  background-size: contain;
}
@media (min-width: 769px), print {
  .c-card__link::after {
    inset-block-end: 14px;
    inset-inline-end: 14px;
    inline-size: 7px;
    block-size: 12px;
  }
}
@media (max-width: 768px) {
  .c-card__link::after {
    inset-block-end: calc(10 * var(--vw-small));
    inset-inline-end: calc(10 * var(--vw-small));
    inline-size: calc(7 * var(--vw-small));
    block-size: calc(12 * var(--vw-small));
  }
}
@media (hover: hover) {
  .c-card__link:where(:any-link, :enabled, summary):hover {
    background-color: var(--hf-white-01);
    opacity: 0.6;
  }
}
.c-card__link:focus-visible {
  background-color: var(--hf-white-01);
  outline: 2px solid var(--root-text-color);
  outline-offset: 1px;
  opacity: 0.6;
}

/* hero
------------------------------- */
.p-hero {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
@media (min-width: 769px), print {
  .p-hero {
    background-image: url("/shared/image/hfproject/hero/bg_01_pc_ava_tc.jpg");
  }
}
@media (max-width: 768px) {
  .p-hero {
    background-image: url("/shared/image/hfproject/hero/bg_01_sp_ava_tc.jpg");
  }
}

@media (min-width: 769px), print {
  .p-hero__inner {
    max-inline-size: 100%;
    padding-block-end: 97px;
    padding-inline: 0;
  }
}
@media (max-width: 768px) {
  .p-hero__inner {
    padding-block-end: calc(83 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-hero__heading {
    max-inline-size: fit-content;
    padding-block-start: 24px;
    margin-inline: auto;
  }
}
@media (max-width: 768px) {
  .p-hero__heading {
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}

@media (min-width: 769px), print {
  .p-hero__detail-area {
    max-inline-size: 1080px;
    padding-inline: 20px;
    margin-block-start: 42px;
    margin-inline: auto;
  }
}
@media (max-width: 768px) {
  .p-hero__detail-area {
    margin-block-start: calc(-38 * var(--vw-small));
  }
}

.p-hero__detail-box {
  background-color: rgba(255, 255, 255, 0.6);
}
@media (min-width: 769px), print {
  .p-hero__detail-box {
    padding-block: 38px;
    padding-inline: 20px;
    border-radius: 30px;
  }
}
@media (max-width: 768px) {
  .p-hero__detail-box {
    padding-block: calc(29 * var(--vw-small));
    padding-inline: calc(6.5 * var(--vw-small));
    border-radius: calc(20 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-hero__heading-sub {
    max-inline-size: fit-content;
    margin-inline: auto;
  }
}

@media (min-width: 769px), print {
  .p-hero__detail {
    margin-block-start: 16px;
    font-size: calc(16 * var(--rem));
    line-height: 2;
    text-align: center;
  }
}
@media (max-width: 768px) {
  .p-hero__detail {
    padding-inline: calc(11 * var(--vw-small));
    margin-block-start: calc(14 * var(--vw-small));
    font-size: calc(13 * var(--vw-small));
    line-height: 2.1538461538;
  }
}

/* feature
------------------------------- */
.p-feature {
  background-color: var(--hf-white-01);
}
@media (min-width: 769px), print {
  .p-feature {
    margin-block-start: -40px;
    border-radius: 40px 40px 0 0;
    box-shadow: 0 3px 6px -10px rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 768px) {
  .p-feature {
    margin-block-start: calc(-25 * var(--vw-small));
    border-radius: calc(20 * var(--vw-small)) calc(20 * var(--vw-small)) 0 0;
    box-shadow: 0 calc(1.5 * var(--vw-small)) calc(3 * var(--vw-small)) calc(-5 * var(--vw-small)) rgba(0, 0, 0, 0.1);
  }
}

.p-feature__inner {
  position: relative;
}
@media (min-width: 769px), print {
  .p-feature__inner {
    inline-size: calc(100% - 20px);
    padding-block: 56px 159px;
  }
}
@media (max-width: 768px) {
  .p-feature__inner {
    padding-block-end: calc(80 * var(--vw-small));
  }
}

.p-feature__circle-icon > * {
  position: absolute;
}
@media (max-width: 768px) {
  .p-feature__circle-icon > * {
    z-index: 1;
  }
}
.p-feature__circle-icon > *:nth-child(1)[src] {
  opacity: 0.2;
}
@media (min-width: 769px), print {
  .p-feature__circle-icon > *:nth-child(1)[src] {
    inset-block-start: 144px;
    inset-inline-start: -40px;
    inline-size: 93px;
    block-size: 86px;
  }
}
@media (max-width: 768px) {
  .p-feature__circle-icon > *:nth-child(1)[src] {
    inset-block-start: calc(114 * var(--vw-small));
    inset-inline-start: calc(-16 * var(--vw-small));
    inline-size: calc(61.5 * var(--vw-small));
    block-size: calc(57 * var(--vw-small));
  }
}
.p-feature__circle-icon > *:nth-child(2)[src] {
  opacity: 0.2;
}
@media (min-width: 769px), print {
  .p-feature__circle-icon > *:nth-child(2)[src] {
    inset-block-start: 434px;
    inset-inline-end: -62px;
    inline-size: 102px;
    block-size: 93px;
  }
}
@media (max-width: 768px) {
  .p-feature__circle-icon > *:nth-child(2)[src] {
    inset-block-start: calc(174 * var(--vw-small));
    inset-inline-end: calc(-24 * var(--vw-small));
    inline-size: calc(51 * var(--vw-small));
    block-size: calc(46.5 * var(--vw-small));
  }
}
.p-feature__circle-icon > *:nth-child(3)[src] {
  opacity: 0.2;
}
@media (min-width: 769px), print {
  .p-feature__circle-icon > *:nth-child(3)[src] {
    inset-block-start: 804px;
    inset-inline-start: -62px;
    inline-size: 43px;
    block-size: 40px;
  }
}
@media (max-width: 768px) {
  .p-feature__circle-icon > *:nth-child(3)[src] {
    inset-block-start: calc(742 * var(--vw-small));
    inset-inline-start: calc(-15 * var(--vw-small));
    inline-size: calc(40 * var(--vw-small));
    block-size: calc(36.5 * var(--vw-small));
  }
}
.p-feature__circle-icon > *:nth-child(4)[src] {
  opacity: 0.2;
}
@media (min-width: 769px), print {
  .p-feature__circle-icon > *:nth-child(4)[src] {
    inset-block-start: 864px;
    inset-inline-start: -132px;
    inline-size: 83px;
    block-size: 75px;
  }
}
@media (max-width: 768px) {
  .p-feature__circle-icon > *:nth-child(4)[src] {
    inset-block-start: calc(1312 * var(--vw-small));
    inset-inline-end: calc(-26 * var(--vw-small));
    inline-size: calc(61.5 * var(--vw-small));
    block-size: calc(57 * var(--vw-small));
  }
}
.p-feature__circle-icon > *:nth-child(5)[src] {
  opacity: 0.2;
}
@media (min-width: 769px), print {
  .p-feature__circle-icon > *:nth-child(5)[src] {
    inset-block-start: 1124px;
    inset-inline-end: -102px;
    inline-size: 43px;
    block-size: 40px;
  }
}

@media (min-width: 769px), print {
  .p-feature__heading {
    max-inline-size: fit-content;
    margin-inline: auto;
  }
}
@media (max-width: 768px) {
  .p-feature__heading img {
    margin-block-start: calc(-12 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-feature__heading + .p-feature__sub {
    margin-block-start: 24px;
  }
}
@media (max-width: 768px) {
  .p-feature__heading + .p-feature__sub {
    margin-block-start: calc(26 * var(--vw-small));
    text-align: center;
  }
}

.p-feature__sub {
  max-inline-size: fit-content;
  margin-inline: auto;
}
@media (min-width: 769px), print {
  .p-feature__sub {
    font-size: calc(16 * var(--rem));
    line-height: 1.875;
  }
}
@media (max-width: 768px) {
  .p-feature__sub {
    font-size: calc(14 * var(--vw-small));
    line-height: 1.7857142857;
  }
}

.p-feature__block {
  margin-inline: auto;
}
@media (min-width: 769px), print {
  .p-feature__block {
    inline-size: calc(100% - 20px);
    max-inline-size: 848px;
    margin-block-start: 37px;
  }
}
@media (max-width: 768px) {
  .p-feature__block {
    margin-block-start: calc(30 * var(--vw-small));
  }
}

.p-feature__list {
  display: grid;
}
@media (min-width: 769px), print {
  .p-feature__list {
    grid-template-columns: auto auto;
    gap: 40px 30px;
  }
}
@media (max-width: 768px) {
  .p-feature__list {
    row-gap: calc(30 * var(--vw-small));
  }
}

/* project
------------------------------- */
.p-project {
  position: relative;
  margin-inline: auto;
}
@media (min-width: 769px), print {
  .p-project {
    inline-size: calc(100% - 20px);
    max-inline-size: 1355px;
    padding-block: 60px;
    border-radius: 20px;
  }
}
@media (max-width: 768px) {
  .p-project {
    inline-size: calc(100% - 35 * var(--vw-small));
    padding-block: calc(30 * var(--vw-small));
    border-radius: calc(20 * var(--vw-small));
  }
}
.p-project.p-project-01 {
  background-color: var(--hf-blue-04);
}
.p-project.p-project-02 {
  background-color: var(--hf-green-02);
}
.p-project.p-project-03 {
  background-color: var(--hf-pink-02);
}
@media (min-width: 769px), print {
  .p-project + .p-project {
    margin-block-start: 120px;
  }
}
@media (max-width: 768px) {
  .p-project + .p-project {
    margin-block-start: calc(40 * var(--vw-small));
  }
}

.p-project__inner {
  position: relative;
}
@media (min-width: 769px), print {
  .p-project__inner {
    max-inline-size: 100%;
    padding-inline: 0;
  }
}

.p-project__circle-icon > * {
  position: absolute;
}

.p-project__circle-icon-01 > * {
  z-index: 1;
}
@media (min-width: 769px), print {
  .p-project__circle-icon-01 > *:nth-child(1)[src] {
    inset-block-start: 1664px;
    inset-inline-start: 16px;
    inline-size: 92px;
    block-size: 85px;
  }
}
@media (min-width: 769px), print {
  .p-project__circle-icon-01 > *:nth-child(2)[src] {
    inset-block-start: 2014px;
    inset-inline-start: -36px;
    inline-size: 78px;
    block-size: 72px;
  }
}
@media (min-width: 769px), print {
  .p-project__circle-icon-01 > *:nth-child(3)[src] {
    inset-block-start: 1274px;
    inset-inline-end: -46px;
    inline-size: 85px;
    block-size: 79px;
  }
}
@media (min-width: 769px), print {
  .p-project__circle-icon-01 > *:nth-child(4)[src] {
    inset-block-start: 3694px;
    inset-inline-start: -34px;
    inline-size: 92px;
    block-size: 85px;
  }
}
@media (min-width: 769px), print {
  .p-project__circle-icon-01 > *:nth-child(5)[src] {
    inset-block-start: 2864px;
    inset-inline-end: -24px;
    inline-size: 74px;
    block-size: 67px;
  }
}
@media (min-width: 769px), print {
  .p-project__circle-icon-01 > *:nth-child(6)[src] {
    inset-block-start: 4424px;
    inset-inline-end: -46px;
    inline-size: 95px;
    block-size: 88px;
  }
}
@media (min-width: 769px), print {
  .p-project__circle-icon-01 > *:nth-child(7)[src] {
    inset-block-start: 4544px;
    inset-inline-end: 24px;
    inline-size: 74px;
    block-size: 67px;
  }
}
@media (min-width: 769px), print {
  .p-project__circle-icon-01 > *:nth-child(8)[src] {
    inset-block-start: 5144px;
    inset-inline-start: -44px;
    inline-size: 89px;
    block-size: 82px;
  }
}

@media (min-width: 769px), print {
  .p-project__circle-icon-02 > *:nth-child(1)[src] {
    inset-block-start: 134px;
    inset-inline-end: 296px;
    inline-size: 43px;
    block-size: 40px;
  }
}
@media (min-width: 769px), print {
  .p-project__circle-icon-02 > *:nth-child(2)[src] {
    inset-block-start: 160px;
    inset-inline-end: 220px;
    inline-size: 56px;
    block-size: 52px;
  }
}

@media (min-width: 769px), print {
  .p-project__circle-icon-03 > *:nth-child(1)[src] {
    inset-block-start: 524px;
    inset-inline-start: 156px;
    inline-size: 43px;
    block-size: 40px;
    opacity: 0.2;
  }
}
@media (min-width: 769px), print {
  .p-project__circle-icon-03 > *:nth-child(2)[src] {
    inset-block-start: 550px;
    inset-inline-start: 40px;
    inline-size: 98px;
    block-size: 90px;
    opacity: 0.2;
  }
}
@media (min-width: 769px), print {
  .p-project__circle-icon-03 > *:nth-child(3)[src] {
    inset-block-start: 460px;
    inset-inline-end: 180px;
    inline-size: 65px;
    block-size: 60px;
    opacity: 0.2;
  }
}
@media (min-width: 769px), print {
  .p-project__circle-icon-03 > *:nth-child(4)[src] {
    inset-block-start: 590px;
    inset-inline-end: 40px;
    inline-size: 117px;
    block-size: 108px;
    opacity: 0.2;
  }
}

@media (min-width: 769px), print {
  .p-project__circle-icon-04 > *:nth-child(1)[src] {
    inset-block-start: 0;
    inset-inline-end: 76px;
    inline-size: 43px;
    block-size: 40px;
  }
}
@media (min-width: 769px), print {
  .p-project__circle-icon-04 > *:nth-child(2)[src] {
    inset-block-start: 18px;
    inset-inline-end: 0;
    inline-size: 56px;
    block-size: 52px;
  }
}

@media (min-width: 769px), print {
  .p-project__circle-icon-05 > *:nth-child(1)[src] {
    inset-block-start: 0;
    inset-inline-start: 660px;
    inline-size: 56px;
    block-size: 52px;
    opacity: 0.2;
  }
}
@media (max-width: 768px) {
  .p-project__circle-icon-05 > *:nth-child(1)[src] {
    inset-block-start: calc(408 * var(--vw-small));
    inset-inline-start: calc(62 * var(--vw-small));
    inline-size: calc(27.5 * var(--vw-small));
    block-size: calc(25.5 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-project__circle-icon-05 > *:nth-child(2)[src] {
    inset-block-start: 30px;
    inset-inline-start: 580px;
    inline-size: 43px;
    block-size: 40px;
  }
}
@media (max-width: 768px) {
  .p-project__circle-icon-05 > *:nth-child(2)[src] {
    inset-block-start: calc(384 * var(--vw-small));
    inset-inline-start: calc(104 * var(--vw-small));
    inline-size: calc(35.5 * var(--vw-small));
    block-size: calc(33 * var(--vw-small));
    opacity: 0.2;
  }
}
@media (min-width: 769px), print {
  .p-project__circle-icon-05 > *:nth-child(3)[src] {
    inset-block-start: 580px;
    inset-inline-start: 30px;
    inline-size: 59px;
    block-size: 55px;
    opacity: 0.2;
  }
}
@media (min-width: 769px), print {
  .p-project__circle-icon-05 > *:nth-child(4)[src] {
    inset-block-start: 730px;
    inset-inline-end: 10px;
    inline-size: 58px;
    block-size: 54px;
    opacity: 0.2;
  }
}

@media (min-width: 769px), print {
  .p-project__circle-icon-06 > *:nth-child(1)[src] {
    inset-block-start: 144px;
    inset-inline-end: 302px;
    inline-size: 53px;
    block-size: 53px;
  }
}
@media (min-width: 769px), print {
  .p-project__circle-icon-06 > *:nth-child(2)[src] {
    inset-block-start: 180px;
    inset-inline-end: 208px;
    inline-size: 43px;
    block-size: 40px;
  }
}

.p-project__heading {
  margin-inline: auto;
}
@media (min-width: 769px), print {
  .p-project__heading {
    max-inline-size: fit-content;
  }
}
@media (max-width: 768px) {
  .p-project-01 .p-project__heading {
    max-inline-size: calc(223 * var(--vw-small));
  }
}
@media (max-width: 768px) {
  .p-project-02 .p-project__heading {
    max-inline-size: calc(245.5 * var(--vw-small));
  }
}
@media (max-width: 768px) {
  .p-project-03 .p-project__heading {
    max-inline-size: calc(228 * var(--vw-small));
  }
}

.p-project__block {
  margin-inline: auto;
  background-color: var(--hf-white-01);
}
@media (min-width: 769px), print {
  .p-project__block {
    inline-size: calc(100% - 20px);
    max-inline-size: 1001px;
    margin-block-start: 60px;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 768px) {
  .p-project__block {
    margin-block-start: calc(30 * var(--vw-small));
    border-radius: calc(10 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-project__block__inner {
    max-inline-size: 100%;
    padding: 50px 35px;
  }
}
@media (max-width: 768px) {
  .p-project__block__inner {
    padding-block: calc(30 * var(--vw-small));
    padding-inline: calc(15 * var(--vw-small));
  }
}

.p-project__column {
  position: relative;
  display: flex;
}
@media (min-width: 769px), print {
  .p-project__column {
    column-gap: 30px;
  }
}
@media (max-width: 768px) {
  .p-project__column {
    flex-direction: column-reverse;
    row-gap: calc(25 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-project__column > * {
    flex-basis: 50%;
  }
}
@media (max-width: 768px) {
  .p-project__block-02-02 .p-project__column {
    row-gap: calc(52.5 * var(--vw-small));
  }
}
@media (max-width: 768px) {
  .p-project-03 .p-project__column {
    row-gap: calc(20 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-project__column-reverse-pc {
    flex-direction: row-reverse;
  }
}

@media (min-width: 769px), print {
  .p-project__column-align-center-pc {
    align-items: center;
  }
}

@media (min-width: 769px), print {
  .p-project__label {
    margin-inline-start: 12px;
  }
}
@media (max-width: 768px) {
  .p-project__label {
    margin-inline-start: calc(9 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-project__label::before {
    inset-inline-start: -11px;
  }
}
@media (min-width: 769px), print {
  .p-project__label + .p-project__heading-sub {
    margin-block-start: 12px;
  }
}
@media (max-width: 768px) {
  .p-project__label + .p-project__heading-sub {
    margin-block-start: calc(15 * var(--vw-small));
  }
}

.p-project__heading-sub {
  border-block-end-style: solid;
}
@media (min-width: 769px), print {
  .p-project__heading-sub {
    padding-block-end: 12px;
    margin-block-end: 16px;
    border-block-end-width: 2px;
  }
}
@media (max-width: 768px) {
  .p-project__heading-sub {
    padding-block-end: calc(15 * var(--vw-small));
    margin-block-end: calc(15 * var(--vw-small));
    border-block-end-width: calc(1.5 * var(--vw-small));
  }
}
.p-project-01 .p-project__heading-sub {
  border-block-end-color: var(--hf-blue-01);
}
.p-project-02 .p-project__heading-sub {
  border-block-end-color: var(--hf-green-01);
}
.p-project-03 .p-project__heading-sub {
  border-block-end-color: var(--hf-pink-01);
}

@media (min-width: 769px), print {
  .p-project__detail + .p-project__summary {
    margin-block-start: 24px;
  }
}
@media (max-width: 768px) {
  .p-project__detail + .p-project__summary {
    margin-block-start: calc(13.5 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-project__summary {
    font-size: calc(16 * var(--rem));
    line-height: 1.875;
  }
}
@media (max-width: 768px) {
  .p-project__summary {
    font-size: calc(14 * var(--vw-small));
    line-height: 1.7857142857;
  }
}
@media (min-width: 769px), print {
  .p-project__summary + .p-project__list {
    margin-block-start: 26px;
  }
}
@media (max-width: 768px) {
  .p-project__summary + .p-project__list {
    margin-block-start: calc(15 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-project__summary + .p-project__summary-link__wrap {
    margin-block-start: 30px;
  }
}
@media (max-width: 768px) {
  .p-project__summary + .p-project__summary-link__wrap {
    margin-block-start: calc(12.5 * var(--vw-small));
  }
}

.p-project__summary-link__wrap {
  max-inline-size: max-content;
}
@media (min-width: 769px), print {
  .p-project__summary-link__wrap + .m-list {
    margin-block-start: 30px;
  }
}
@media (max-width: 768px) {
  .p-project__summary-link__wrap + .m-list {
    margin-block-start: calc(15 * var(--vw-small));
  }
}

.p-project__summary-link {
  display: block grid;
  grid-template-columns: repeat(3, auto);
  column-gap: 0.25em;
  align-items: center;
}
@media (min-width: 769px), print {
  .p-project__summary-link .u-icon-blank-01 {
    margin-block-start: 3px;
  }
}
@media (max-width: 768px) {
  .p-project__summary-link .u-icon-blank-01 {
    margin-block-start: calc(6 * var(--vw-small));
  }
}
@media (max-width: 768px) {
  .p-project__summary-link .u-icon-arrow-01 {
    margin-block-start: calc(3 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-project__summary-link__img {
    inline-size: 245px;
  }
}
@media (max-width: 768px) {
  .p-project__summary-link__img {
    inline-size: calc(199.5 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-project__list-01 {
    font-size: calc(14 * var(--rem));
    line-height: 1.8571428571;
  }
}
@media (max-width: 768px) {
  .p-project__list-01 {
    font-size: calc(12 * var(--vw-small));
    line-height: 1.5;
  }
}
@media (max-width: 768px) {
  .p-project__list-01 > li {
    margin-block-start: calc(6 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-project__list-02 {
    font-size: calc(14 * var(--rem));
    line-height: 1.8571428571;
  }
}
@media (max-width: 768px) {
  .p-project__list-02 {
    font-size: calc(12 * var(--vw-small));
    line-height: 1.5;
  }
}

.p-project__arrow {
  inline-size: fit-content;
  margin-inline: auto;
}
@media (min-width: 769px), print {
  .p-project__arrow {
    max-inline-size: 225px;
    margin-block-start: 23px;
  }
}
@media (max-width: 768px) {
  .p-project__arrow {
    max-inline-size: calc(184.5 * var(--vw-small));
  }
}

.p-project__heading-sub-secondary {
  inline-size: fit-content;
  margin-inline: auto;
}
@media (min-width: 769px), print {
  .p-project__heading-sub-secondary {
    margin-block-start: 60px;
  }
}
@media (max-width: 768px) {
  .p-project__heading-sub-secondary {
    margin-block-start: calc(30 * var(--vw-small));
  }
}

.p-project__figure {
  position: relative;
  inline-size: fit-content;
  margin-inline: auto;
}
@media (max-width: 768px) {
  .p-project__figure {
    margin-block-start: calc(10 * var(--vw-small));
  }
}

.p-project__figure__summary {
  position: absolute;
  z-index: 0;
  text-align: center;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  rotate: -10deg;
}
@media (min-width: 769px), print {
  .p-project__figure__summary {
    inset-block-start: 50px;
    inset-inline-start: 40px;
    inline-size: 266px;
    block-size: 157px;
    font-size: calc(23 * var(--rem));
    line-height: 1.3913043478;
  }
}
@media (max-width: 768px) {
  .p-project__figure__summary {
    inset-block-start: calc(24 * var(--vw-small));
    inset-inline-start: calc(4 * var(--vw-small));
    inline-size: calc(174 * var(--vw-small));
    block-size: calc(116 * var(--vw-small));
    font-size: calc(14.5 * var(--vw-small));
    line-height: 1.4444444444;
  }
}
.p-project__figure__summary::before {
  position: absolute;
  inset-inline-start: 50%;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  content: "";
  background-image: url("/shared/image/hfproject/article/tearai/ic_01_ava_tc.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  rotate: 5deg;
  translate: -50%;
}
@media (min-width: 769px), print {
  .p-project__figure__summary::before {
    inset-block-start: -14px;
  }
}
@media (max-width: 768px) {
  .p-project__figure__summary::before {
    inset-block-start: calc(-18 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-project__figure__summary .p-md-01 {
    font-size: calc(23 * var(--rem));
  }
}
@media (max-width: 768px) {
  .p-project__figure__summary .p-md-01 {
    font-size: calc(14 * var(--vw-small));
    font-weight: var(--font-weight-medium);
  }
}
.p-project__figure__summary .p-max-01 {
  position: relative;
  line-height: 1;
}
@media (min-width: 769px), print {
  .p-project__figure__summary .p-max-01 {
    inset-block-start: 2px;
    font-size: calc(42 * var(--rem));
  }
}
@media (max-width: 768px) {
  .p-project__figure__summary .p-max-01 {
    inset-block-start: calc(2 * var(--vw-small));
    font-size: calc(26.5 * var(--vw-small));
  }
}
.p-project__figure__summary .p-max-02 {
  line-height: 1;
}
@media (min-width: 769px), print {
  .p-project__figure__summary .p-max-02 {
    font-size: calc(30 * var(--rem));
  }
}
@media (max-width: 768px) {
  .p-project__figure__summary .p-max-02 {
    font-size: calc(18 * var(--vw-small));
  }
}
.p-project__figure__summary .p-ls-01 {
  letter-spacing: -0.02em;
}
.p-project__figure__summary .p-ls-02 {
  letter-spacing: 0.05em;
}
@media (min-width: 769px), print {
  .p-project__figure__summary .p-sm-01 {
    font-size: calc(20 * var(--rem));
  }
}
@media (max-width: 768px) {
  .p-project__figure__summary .p-sm-01 {
    font-size: calc(12 * var(--vw-small));
  }
}
.p-project__figure__summary .p-border-position {
  border-block-end: solid currentcolor;
}
@media (min-width: 769px), print {
  .p-project__figure__summary .p-border-position {
    border-block-end-width: 2px;
  }
}
@media (max-width: 768px) {
  .p-project__figure__summary .p-border-position {
    border-block-end-width: calc(1 * var(--vw-small));
  }
}
.p-project__figure__summary .p-position-01 {
  position: relative;
}
@media (min-width: 769px), print {
  .p-project__figure__summary .p-position-01 {
    inset-block-start: 8px;
  }
}
@media (max-width: 768px) {
  .p-project__figure__summary .p-position-01 {
    inset-block-start: calc(6 * var(--vw-small));
  }
}

.p-project__hr {
  background-image: url("/shared/image/hfproject/shared/ic_line_01_ava_tc.svg");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: contain;
  border: none;
}
@media (min-width: 769px), print {
  .p-project__hr {
    inline-size: 900px;
    block-size: 2px;
    margin-block: 59px 60px;
  }
}
@media (max-width: 768px) {
  .p-project__hr {
    display: none;
  }
}

.p-project__movie-detail {
  inline-size: fit-content;
  margin-inline: auto;
}
@media (max-width: 768px) {
  .p-project__movie-detail {
    margin-block-start: calc(30 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-project__movie-wrap {
    margin-block-start: 8px;
  }
}
@media (max-width: 768px) {
  .p-project__movie-wrap {
    margin-block-start: calc(20 * var(--vw-small));
  }
}

.p-project__movie {
  position: relative;
  margin-inline: auto;
}
@media (min-width: 769px), print {
  .p-project__movie {
    inline-size: 514px;
  }
}
@media (max-width: 768px) {
  .p-project__movie {
    inline-size: 100%;
    block-size: calc(151 * var(--vw-small));
  }
}

.p-project__movie-caption {
  inline-size: fit-content;
  margin-inline: auto;
}
@media (min-width: 769px), print {
  .p-project__movie-caption {
    margin-block-start: 13px;
    font-size: calc(16 * var(--rem));
  }
}
@media (max-width: 768px) {
  .p-project__movie-caption {
    margin-block-start: calc(15 * var(--vw-small));
    font-size: calc(13 * var(--vw-small));
    line-height: 1.5;
    text-align: center;
  }
}

.p-project__movie-caption-text + * {
  margin-inline-start: 0.25em;
}

.p-project__copy {
  inline-size: fit-content;
  margin-inline: auto;
}
@media (min-width: 769px), print {
  .p-project__copy {
    margin-block-start: 60px;
  }
}
@media (max-width: 768px) {
  .p-project__copy {
    margin-block-start: calc(40 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-project__button-wrap {
    margin-block-start: 21px;
  }
}
@media (max-width: 768px) {
  .p-project__button-wrap {
    margin-block-start: calc(15 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-project__button-img[class][src] {
    inline-size: 250px;
    block-size: 32px;
    object-fit: cover;
  }
}
@media (max-width: 768px) {
  .p-project__button-img[class][src] {
    inline-size: calc(212 * var(--vw-small));
  }
}

.p-project__desc {
  inline-size: fit-content;
  margin-inline: auto;
}
@media (min-width: 769px), print {
  .p-project__desc {
    margin-block-start: 37px;
  }
}
@media (max-width: 768px) {
  .p-project__desc {
    margin-block-start: calc(25 * var(--vw-small));
  }
}

.p-project__desc__column {
  display: flex;
}
@media (min-width: 769px), print {
  .p-project__desc__column {
    column-gap: 77px;
    justify-content: center;
    margin-block-start: 16px;
  }
}
@media (max-width: 768px) {
  .p-project__desc__column {
    column-gap: calc(22.5 * var(--vw-small));
    margin-block-start: calc(10 * var(--vw-small));
  }
}
@media (max-width: 768px) {
  .p-project__desc__column > * {
    flex-basis: 50%;
  }
}

.p-project__desc__column__unit {
  display: flex;
  block-size: 100%;
}
@media (min-width: 769px), print {
  .p-project__desc__column__unit {
    flex-direction: column;
    align-items: center;
  }
}
@media (max-width: 768px) {
  .p-project__desc__column__unit {
    flex-direction: column-reverse;
  }
}

.p-project__desc-title {
  inline-size: fit-content;
  margin-inline: auto;
}
@media (max-width: 768px) {
  .p-project__desc-title {
    position: relative;
    inset-inline-end: 2px;
    margin-block-start: -6px;
  }
}
@media (min-width: 769px), print {
  .p-project__desc-title + .p-project__desc__figure {
    margin-block-start: 20px;
  }
}

@media (max-width: 768px) {
  .p-project__desc-title-02 {
    inset-inline-end: 8px;
    max-inline-size: calc(84 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-project__desc__figure {
    max-inline-size: 330px;
  }
}
@media (max-width: 768px) {
  .p-project__desc__figure {
    max-inline-size: calc(116 * var(--vw-small));
  }
}

.p-project__desc__figure-icon[class][src] {
  position: relative;
  display: flex;
  margin-inline-start: auto;
}
@media (min-width: 769px), print {
  .p-project__desc__figure-icon[class][src] {
    inset-inline-start: 74px;
    max-inline-size: 133px;
    margin-block-start: -94px;
  }
}
@media (max-width: 768px) {
  .p-project__desc__figure-icon[class][src] {
    inset-inline-start: calc(18 * var(--vw-small));
    max-inline-size: calc(60 * var(--vw-small));
    margin-block-start: calc(-40 * var(--vw-small));
  }
}

.p-project__catch {
  inline-size: fit-content;
  margin-inline: auto;
}
@media (min-width: 769px), print {
  .p-project__catch {
    margin-block-start: 37px;
  }
}
@media (max-width: 768px) {
  .p-project__catch {
    margin-block-start: calc(25 * var(--vw-small));
  }
}

.p-project__catch-column {
  display: flex;
}
@media (min-width: 769px), print {
  .p-project__catch-column {
    column-gap: 90px;
    justify-content: center;
    margin-block-start: 60px;
  }
}
@media (max-width: 768px) {
  .p-project__catch-column {
    flex-direction: column;
    row-gap: calc(20 * var(--vw-small));
    margin-block-start: calc(18 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-project__catch-column > * {
    flex-basis: 50%;
    max-inline-size: 263px;
  }
}

.p-project__catch-column__unit {
  position: relative;
}

.p-project__catch__figure {
  margin-inline: auto;
}
@media (min-width: 769px), print {
  .p-project__catch__figure {
    max-inline-size: 263px;
  }
}
@media (max-width: 768px) {
  .p-project__catch__figure {
    max-inline-size: calc(197 * var(--vw-small));
  }
}
@media (max-width: 768px) {
  .p-project__catch-column__unit:first-child .p-project__catch__figure {
    margin-inline-start: 0;
  }
}
@media (max-width: 768px) {
  .p-project__catch-column__unit:last-child .p-project__catch__figure {
    margin-inline-end: 0;
  }
}

@media (min-width: 769px), print {
  .p-project__catch__caption {
    margin-block-start: 23px;
  }
}
@media (max-width: 768px) {
  .p-project__catch__caption {
    position: absolute;
    inset-block-start: 50%;
    z-index: 1;
    max-inline-size: calc(124 * var(--vw-small));
    translate: 0 -50%;
  }
}
@media (max-width: 768px) {
  .p-project__catch-column__unit:first-child .p-project__catch__caption {
    inset-inline-end: calc(-14 * var(--vw-small));
    margin-block-start: calc(-4 * var(--vw-small));
  }
}
@media (max-width: 768px) {
  .p-project__catch-column__unit:last-child .p-project__catch__caption {
    inset-inline-start: calc(-15 * var(--vw-small));
    margin-block-start: calc(-2 * var(--vw-small));
  }
}

/* contents
------------------------------- */
.p-contents {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

@media (min-width: 769px), print {
  .p-contents {
    padding-block: 25px 76px;
    margin-block-start: -40px;
    background-image: url("/shared/image/hfproject/contents/bg_01_pc_ava_tc.png");
    border-radius: 40px;
  }
}
@media (max-width: 768px) {
  .p-contents {
    padding-block: calc(27.5 * var(--vw-small)) calc(30 * var(--vw-small));
    margin-block-start: calc(-25 * var(--vw-small));
    background-image: url("/shared/image/hfproject/contents/bg_01_sp_ava_tc.png");
    border-radius: calc(20 * var(--vw-small));
  }
}
@media (max-width: 768px) {
  .p-contents__inner {
    margin-block-start: calc(-38 * var(--vw-small));
  }
}
.p-contents__heading {
  position: relative;
}

@media (min-width: 769px), print {
  .p-contents__heading {
    max-inline-size: fit-content;
    margin-inline: auto;
  }
}
@media (min-width: 769px), print {
  .p-contents__heading::before {
    position: absolute;
    inset-block-start: -72px;
    inset-inline-end: -60px;
    inline-size: 92px;
    block-size: 85px;
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_03_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
.p-contents__detail {
  text-align: center;
}

@media (min-width: 769px), print {
  .p-contents__detail {
    margin-block-start: 23px;
    font-size: calc(16 * var(--rem));
    line-height: 1.875;
  }
}
@media (max-width: 768px) {
  .p-contents__detail {
    margin-block-start: calc(11 * var(--vw-small));
    font-size: calc(15 * var(--vw-small));
    line-height: 1.6666666667;
  }
}
@media (min-width: 769px), print {
  .p-contents__box-wrap {
    max-inline-size: 850px;
    margin-block-start: 37px;
    margin-inline: auto;
  }
}
@media (max-width: 768px) {
  .p-contents__box-wrap {
    margin-block-start: calc(40.5 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-contents__box-wrap + .p-contents__box-wrap {
    margin-block-start: 40px;
  }
}
@media (max-width: 768px) {
  .p-contents__box-wrap + .p-contents__box-wrap {
    margin-block-start: calc(45 * var(--vw-small));
  }
}
.p-contents__box {
  background-color: var(--hf-white-01);
}

@media (min-width: 769px), print {
  .p-contents__box {
    padding-inline: 38px;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 768px) {
  .p-contents__box {
    padding-block: calc(24 * var(--vw-small)) 0;
    padding-inline: calc(17.5 * var(--vw-small));
    border-radius: calc(10 * var(--vw-small));
    box-shadow: 0 calc(1.5 * var(--vw-small)) calc(3 * var(--vw-small)) rgba(0, 0, 0, 0.1);
  }
}
.p-contents__box-wrap-01 .p-contents__box {
  position: relative;
}

@media (min-width: 769px), print {
  .p-contents__box-wrap-01 .p-contents__box {
    padding-block: 36px 33px;
  }
}
@media (max-width: 768px) {
  .p-contents__box-wrap-01 .p-contents__box {
    padding-block-end: calc(28 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-contents__box-wrap-01 .p-contents__box::before {
    position: absolute;
    inset-block-start: -32px;
    inset-inline-start: -56px;
    inline-size: 112px;
    block-size: 104px;
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_04_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media (max-width: 768px) {
  .p-contents__box-wrap-01 .p-contents__box::before {
    position: absolute;
    inset-block-start: calc(-26 * var(--vw-small));
    inset-inline-start: calc(-42 * var(--vw-small));
    inline-size: calc(72.5 * var(--vw-small));
    block-size: calc(68 * var(--vw-small));
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_01_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media (min-width: 769px), print {
  .p-contents__box-wrap-01 .p-contents__box::after {
    position: absolute;
    inset-block-end: -57px;
    inset-inline-end: 30px;
    z-index: 1;
    inline-size: 92px;
    block-size: 85px;
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_03_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media (max-width: 768px) {
  .p-contents__box-wrap-01 .p-contents__box::after {
    position: absolute;
    inset-block-end: calc(-36 * var(--vw-small));
    inset-inline-end: calc(-10 * var(--vw-small));
    inline-size: calc(62.5 * var(--vw-small));
    block-size: calc(58 * var(--vw-small));
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_03_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
.p-contents__box-wrap-02 .p-contents__box {
  position: relative;
}

@media (min-width: 769px), print {
  .p-contents__box-wrap-02 .p-contents__box {
    padding-block: 39px 35px;
  }
}
@media (max-width: 768px) {
  .p-contents__box-wrap-02 .p-contents__box {
    padding-block-end: calc(21.5 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-contents__box-wrap-02 .p-contents__box::before {
    position: absolute;
    inset-block-start: 124px;
    inset-inline-start: -126px;
    inline-size: 89px;
    block-size: 82px;
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_04_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media (max-width: 768px) {
  .p-contents__box-wrap-02 .p-contents__box::before {
    position: absolute;
    inset-block-start: calc(-18 * var(--vw-small));
    inset-inline-start: calc(-54 * var(--vw-small));
    inline-size: calc(88.5 * var(--vw-small));
    block-size: calc(83 * var(--vw-small));
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_04_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media (min-width: 769px), print {
  .p-contents__box-wrap-02 .p-contents__box::after {
    position: absolute;
    inset-block-start: 310px;
    inset-inline-end: -136px;
    inline-size: 89px;
    block-size: 84px;
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_02_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media (min-width: 769px), print {
  .p-contents__heading-sub {
    max-inline-size: 680px;
    margin-inline: auto;
  }
}
@media (min-width: 769px), print {
  .p-contents__heading-sub + .p-contents__detail {
    margin-block-start: 21px;
  }
}
@media (max-width: 768px) {
  .p-contents__heading-sub + .p-contents__detail {
    margin-block-start: calc(11 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-contents__movie-wrap {
    margin-block-start: 26px;
  }
}
@media (max-width: 768px) {
  .p-contents__movie-wrap {
    margin-block-start: calc(22.5 * var(--vw-small));
  }
}
.p-contents__movie {
  margin-inline: auto;
}

@media (min-width: 769px), print {
  .p-contents__movie {
    inline-size: 514px;
  }
}
@media (max-width: 768px) {
  .p-contents__movie {
    inline-size: calc(305 * var(--vw-small));
    block-size: calc(185.5 * var(--vw-small));
  }
}
.p-contents__movie-caption {
  inline-size: fit-content;
  margin-inline: auto;
}

@media (min-width: 769px), print {
  .p-contents__movie-caption {
    margin-block-start: 13px;
    font-size: calc(16 * var(--rem));
  }
}
@media (max-width: 768px) {
  .p-contents__movie-caption {
    margin-block-start: calc(11 * var(--vw-small));
    font-size: calc(13 * var(--vw-small));
  }
}
.p-contents__movie-caption-text + * {
  margin-inline-start: 0.25em;
}

@media (min-width: 769px), print {
  .p-contents__area-column {
    display: flex;
    column-gap: 14px;
    margin-block-start: 46px;
  }
}
@media (min-width: 769px), print {
  .p-contents__area-column > * {
    flex-basis: 50%;
  }
}
.p-contents__area-wrap {
  position: relative;
}

@media (max-width: 768px) {
  .p-contents__area-wrap {
    margin-block-start: calc(36.5 * var(--vw-small));
  }
}
@media (max-width: 768px) {
  .p-contents__area-wrap::after {
    position: absolute;
    inset-block-end: calc(-106 * var(--vw-small));
    inset-inline-start: calc(-60 * var(--vw-small));
    inline-size: calc(52.5 * var(--vw-small));
    block-size: calc(49.5 * var(--vw-small));
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_02_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
.p-contents__area {
  background-color: var(--hf-blue-02);
}

@media (min-width: 769px), print {
  .p-contents__area {
    max-block-size: 520px;
    padding-block: 2px 17px;
    border-radius: 15px 15px 0 0;
  }
}
@media (max-width: 768px) {
  .p-contents__area {
    padding-block-end: calc(14 * var(--vw-small));
    border-radius: calc(10 * var(--vw-small)) calc(10 * var(--vw-small)) 0 0;
  }
}
.p-contents__area-title {
  position: relative;
  margin-inline: auto;
}

@media (min-width: 769px), print {
  .p-contents__area-title {
    inset-block-start: -20px;
    max-inline-size: 320px;
  }
}
@media (max-width: 768px) {
  .p-contents__area-title {
    inset-block-start: calc(-10 * var(--vw-small));
    inline-size: calc(220 * var(--vw-small));
  }
}
.p-contents__area-title + .p-contents__detail {
  margin-block-start: 0;
}

@media (min-width: 769px), print {
  .p-contents__area-title + .p-contents__detail {
    margin-block-start: -10px;
    font-size: calc(12 * var(--rem));
    line-height: 1.8571428571;
  }
}
@media (max-width: 768px) {
  .p-contents__area-title + .p-contents__detail {
    font-size: calc(11 * var(--vw-small));
  }
}
.p-contents__copy {
  margin-inline: auto;
}

@media (min-width: 769px), print {
  .p-contents__copy {
    max-inline-size: 160px;
    margin-block-start: 20px;
  }
}
@media (max-width: 768px) {
  .p-contents__copy {
    inline-size: calc(130 * var(--vw-small));
    margin-block-start: calc(15.5 * var(--vw-small));
  }
}
.p-contents__figure {
  margin-inline: auto;
}

@media (min-width: 769px), print {
  .p-contents__figure {
    max-inline-size: 265px;
    margin-block-start: 5px;
  }
}
@media (max-width: 768px) {
  .p-contents__figure {
    inline-size: calc(272.5 * var(--vw-small));
    margin-block-start: calc(6 * var(--vw-small));
  }
}
.p-contents__figure-caption {
  text-align: center;
}

@media (min-width: 769px), print {
  .p-contents__figure-caption {
    position: relative;
    inset-inline-start: 50%;
    inline-size: 335px;
    margin-block-start: 10px;
    font-size: calc(12 * var(--rem));
    line-height: 1.6666666667;
    translate: -50%;
  }
}
@media (min-width: 769px) and (max-width: 1200px) {
  .p-contents__figure-caption {
    line-height: 1.3;
    letter-spacing: -0.1em;
  }
}
@media (max-width: 768px) {
  .p-contents__figure-caption {
    margin-block-start: calc(7.5 * var(--vw-small));
    font-size: calc(9 * var(--vw-small));
    line-height: 1.5555555556;
  }
}
.p-contents__accordion {
  --accordion-button-bg-color: var(--hf-pink-01);
  --accordion-button-icon-line-color: var(--hf-white-01);
}

@media (min-width: 769px), print {
  .p-contents__accordion {
    margin-block-start: -20px;
  }
}
@media (max-width: 768px) {
  .p-contents__accordion {
    margin-block-start: calc(23 * var(--vw-small));
  }
}
.p-accordion__button {
  justify-content: center;
}

@media (min-width: 769px), print {
  .p-accordion__button {
    position: relative;
    inset-block-start: 1px;
    z-index: 1;
    column-gap: 0;
    max-inline-size: 320px;
    padding-block: 3px 5px;
    padding-inline: 0;
    border-radius: 28px;
  }
}
@media (max-width: 768px) {
  .p-accordion__button {
    min-block-size: calc(47.5 * var(--vw-small));
    padding: 0;
  }
}
.p-accordion__button-text {
  margin: auto;
}

@media (min-width: 769px), print {
  .p-accordion__button-text {
    max-inline-size: 240px;
  }
}
@media (max-width: 768px) {
  .p-accordion__button-text {
    inline-size: calc(237.5 * var(--vw-small));
  }
}
.p-accordion__detail {
  background-color: var(--hf-blue-03);
}

@media (min-width: 769px), print {
  .p-accordion__detail {
    max-block-size: 520px;
    padding-block: 22px 2px;
    margin-block-start: -20px;
    border-radius: 15px 15px 0 0;
  }
}
@media (max-width: 768px) {
  .p-accordion__detail {
    padding-block-start: calc(47.5 * var(--vw-small));
    margin-block-start: calc(-47.5 * var(--vw-small));
  }
}
.p-accordion__detail__inner {
  border-radius: 0;
}

@media (min-width: 769px), print {
  .p-accordion__detail__inner {
    display: block;
    padding-block: 17px 11px;
    padding-inline: 10px;
  }
}
.p-accordion__detail__inner::before {
  display: none;
}

.p-contents__list-unit {
  position: relative;
  display: flex;
}

.p-contents__list-unit.p-contents__list-unit-02 {
  position: relative;
  flex-direction: row-reverse;
}

@media (min-width: 769px), print {
  .p-contents__list-unit.p-contents__list-unit-02 {
    margin-block-start: -36px;
  }
}
@media (max-width: 768px) {
  .p-contents__list-unit.p-contents__list-unit-02 {
    margin-block-start: calc(10 * var(--vw-small));
  }
}
.p-contents__list-unit.p-contents__list-unit-02::after {
  position: absolute;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
}

@media (min-width: 769px), print {
  .p-contents__list-unit.p-contents__list-unit-02::after {
    inset-block-start: 20px;
    inset-inline-start: 148px;
    inline-size: 42px;
    block-size: 36px;
    background-image: url("/shared/image/hfproject/contents/ic_arrow_01_pc_ava_tc.png");
  }
}
@media (max-width: 768px) {
  .p-contents__list-unit.p-contents__list-unit-02::after {
    inset-block-start: calc(-10 * var(--vw-small));
    inset-inline-start: calc(90 * var(--vw-small));
    inline-size: calc(44.5 * var(--vw-small));
    block-size: calc(38 * var(--vw-small));
    background-image: url("/shared/image/hfproject/contents/ic_arrow_01_sp_ava_tc.png");
  }
}
@media (min-width: 769px), print {
  .p-contents__list-unit.p-contents__list-unit-03 {
    margin-block-start: -34px;
  }
}
@media (max-width: 768px) {
  .p-contents__list-unit.p-contents__list-unit-03 {
    margin-block-start: calc(10 * var(--vw-small));
  }
}
.p-contents__list-unit.p-contents__list-unit-03::after {
  position: absolute;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
}

@media (min-width: 769px), print {
  .p-contents__list-unit.p-contents__list-unit-03::after {
    inset-block-start: -4px;
    inset-inline-end: 142px;
    inline-size: 42px;
    block-size: 36px;
    background-image: url("/shared/image/hfproject/contents/ic_arrow_02_pc_ava_tc.png");
  }
}
@media (max-width: 768px) {
  .p-contents__list-unit.p-contents__list-unit-03::after {
    inset-block-start: calc(-28 * var(--vw-small));
    inset-inline-end: calc(128 * var(--vw-small));
    inline-size: calc(44.5 * var(--vw-small));
    block-size: calc(38.5 * var(--vw-small));
    background-image: url("/shared/image/hfproject/contents/ic_arrow_02_sp_ava_tc.png");
  }
}
@media (max-width: 768px) {
  [class*=__list-unit] .p-contents__block.p-contents__figure {
    margin: 0;
  }
}
@media (min-width: 769px), print {
  .p-contents__list-unit-01 .p-contents__block.p-contents__figure {
    position: relative;
    inset-inline-start: 2px;
    inline-size: 168px;
    max-inline-size: 100%;
    margin-block-start: -8px;
    margin-inline-start: 0;
  }
}
@media (max-width: 768px) {
  .p-contents__list-unit-01 .p-contents__block.p-contents__figure {
    inline-size: calc(148.5 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-contents__list-unit-02 .p-contents__block.p-contents__figure {
    position: relative;
    inset-inline-end: -4px;
    inline-size: 161px;
    max-inline-size: 100%;
    margin-inline-end: 0;
  }
}
@media (max-width: 768px) {
  .p-contents__list-unit-02 .p-contents__block.p-contents__figure {
    inline-size: calc(152 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-contents__list-unit-03 .p-contents__block.p-contents__figure {
    position: relative;
    inset-inline-start: -14px;
    inline-size: 320px;
    max-inline-size: 100%;
    margin-block-start: -24px;
  }
}
@media (max-width: 768px) {
  .p-contents__list-unit-03 .p-contents__block.p-contents__figure {
    inline-size: calc(276.5 * var(--vw-small));
  }
}
.p-contents__block.p-contents__figure + .p-contents__block {
  position: absolute;
}

@media (min-width: 769px), print {
  .p-contents__block.p-contents__figure + .p-contents__block {
    display: flex;
    column-gap: 7px;
    align-items: center;
    justify-content: center;
  }
}
@media (min-width: 769px), print {
  .p-contents__list-unit-01 .p-contents__block.p-contents__figure + .p-contents__block {
    inset-block-start: 36px;
    inset-inline-end: 20px;
  }
}
@media (max-width: 768px) {
  .p-contents__list-unit-01 .p-contents__block.p-contents__figure + .p-contents__block {
    inset-block-start: calc(26 * var(--vw-small));
    inset-inline-end: calc(10 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-contents__list-unit-02 .p-contents__block.p-contents__figure + .p-contents__block {
    inset-block-start: 46px;
    inset-inline-start: 10px;
  }
}
@media (max-width: 768px) {
  .p-contents__list-unit-02 .p-contents__block.p-contents__figure + .p-contents__block {
    inset-block-start: calc(20 * var(--vw-small));
    inset-inline-start: calc(20 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-contents__list-unit-03 .p-contents__block.p-contents__figure + .p-contents__block {
    inset-block-end: 20px;
    inset-inline-end: 24px;
  }
}
@media (max-width: 768px) {
  .p-contents__list-unit-03 .p-contents__block.p-contents__figure + .p-contents__block {
    inset-block-end: calc(14 * var(--vw-small));
    inset-inline-end: calc(10 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-contents__block-num {
    inline-size: 34px;
  }
}
@media (max-width: 768px) {
  .p-contents__block-num {
    inline-size: calc(32 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-contents__block-detail {
    font-size: calc(14 * var(--rem));
    line-height: 1.8571428571;
  }
}
@media (max-width: 768px) {
  .p-contents__block-detail {
    margin-block-start: calc(5 * var(--vw-small));
    font-size: calc(13 * var(--vw-small));
    line-height: 1.7692307692;
  }
}
/* qa
------------------------------- */
@media (min-width: 769px), print {
  .p-qa {
    margin-block-start: 76px;
  }
}
@media (max-width: 768px) {
  .p-qa {
    margin-block-start: calc(35.5 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-qa__heading {
    max-inline-size: fit-content;
    margin-inline: auto;
  }
}
@media (min-width: 769px), print {
  .p-qa__heading-sub {
    max-inline-size: 680px;
    margin-block-start: 22px;
    margin-inline: auto;
  }
}
@media (max-width: 768px) {
  .p-qa__heading-sub {
    margin-block-start: calc(18.5 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-qa__heading-sub .p-qa__heading-sub__img[src] {
    inline-size: 680px;
    block-size: 36px;
    object-fit: contain;
  }
}
@media (min-width: 769px), print {
  .p-qa__accordion-list {
    max-inline-size: 890px;
    padding-inline: 20px;
    margin-block-start: 27px;
    margin-inline: auto;
  }
}
@media (max-width: 768px) {
  .p-qa__accordion-list {
    margin-block-start: calc(9 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-qa__accordion-list > * + * {
    margin-block-start: 20px;
  }
}
@media (max-width: 768px) {
  .p-qa__accordion-list > * + * {
    margin-block-start: calc(17.5 * var(--vw-small));
  }
}
.p-qa__content-wrap {
  position: relative;
  z-index: 0;
  margin-inline: auto;
}

@media (min-width: 769px), print {
  .p-qa__content-wrap {
    max-inline-size: 774px;
    margin-block-start: 56px;
  }
}
@media (max-width: 768px) {
  .p-qa__content-wrap {
    inline-size: calc(325 * var(--vw-small));
    margin-block-start: calc(47.5 * var(--vw-small));
  }
}
.p-qa__content-wrap::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  content: "";
  background-color: var(--hf-purple-01);
  border: solid var(--hf-blue-01);
}

@media (min-width: 769px), print {
  .p-qa__content-wrap::before {
    border-width: 1.5px;
    rotate: 3deg;
  }
}
@media (max-width: 768px) {
  .p-qa__content-wrap::before {
    border-width: calc(1 * var(--vw-small));
    rotate: 5deg;
  }
}
.p-qa__content {
  position: relative;
  background-color: var(--hf-white-01);
  border: solid var(--hf-blue-01);
}

@media (min-width: 769px), print {
  .p-qa__content {
    display: flex;
    flex-wrap: wrap;
    padding-block: 35px 15px;
    padding-inline: 32px 18px;
    border-width: 1.5px;
  }
}
@media (max-width: 768px) {
  .p-qa__content {
    padding-block: calc(13.5 * var(--vw-small)) calc(22.5 * var(--vw-small));
    padding-inline: calc(17.5 * var(--vw-small));
    border-width: calc(1 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-qa__content::before {
    position: absolute;
    inset-block-start: -58px;
    inset-inline-start: -186px;
    inline-size: 89px;
    block-size: 84px;
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_02_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media (min-width: 769px), print {
  .p-qa__content::after {
    position: absolute;
    inset-block-end: 34px;
    inset-inline-end: -210px;
    inline-size: 111px;
    block-size: 103px;
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_03_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media (min-width: 769px), print {
  .p-qa__content__logo {
    max-inline-size: 160px;
  }
}
@media (max-width: 768px) {
  .p-qa__content__logo {
    inline-size: calc(133 * var(--vw-small));
    margin-inline: auto;
  }
}
@media (min-width: 769px), print {
  .p-qa__content__heading {
    max-inline-size: 319px;
    margin-inline-start: 31px;
  }
}
@media (max-width: 768px) {
  .p-qa__content__heading {
    inline-size: 100%;
    margin-block-start: calc(10 * var(--vw-small));
    margin-inline: auto;
  }
}
.p-qa__content__person {
  position: relative;
  display: flex;
  justify-content: center;
}

@media (min-width: 769px), print {
  .p-qa__content__person {
    column-gap: 37px;
    max-inline-size: 339px;
    margin-block-start: -46px;
    margin-inline-start: auto;
  }
}
@media (max-width: 768px) {
  .p-qa__content__person {
    column-gap: calc(35.5 * var(--vw-small));
    align-items: flex-end;
    margin-block-start: calc(-47 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-qa__name {
    inline-size: 132px;
    block-size: 50px;
  }
}
@media (max-width: 768px) {
  .p-qa__name {
    inline-size: calc(119 * var(--vw-small));
    margin-block-end: calc(5 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-qa__person {
    position: relative;
    inset-block-start: -55px;
    inline-size: 170px;
  }
}
@media (max-width: 768px) {
  .p-qa__person {
    inline-size: calc(102 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-qa__content__detail {
    max-inline-size: 100%;
    margin-block-start: -90px;
    font-size: calc(14 * var(--rem));
    letter-spacing: -0.05em;
  }
}
@media (max-width: 768px) {
  .p-qa__content__detail {
    margin-block-start: calc(8.5 * var(--vw-small));
    font-size: calc(12 * var(--vw-small));
    line-height: 1.8333333333;
  }
}
/* recommend
------------------------------- */
@media (min-width: 769px), print {
  #recommend-sec {
    scroll-margin-block-start: -100px;
  }
}
@media (max-width: 768px) {
  #recommend-sec {
    scroll-margin-block-start: calc(-40 * var(--vw-small));
  }
}
.p-recommend {
  position: relative;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
}

@media (min-width: 769px), print {
  .p-recommend {
    margin-block-start: 175px;
    background-image: url("/shared/image/hfproject/recommend/bg_01_pc_ava_tc.png");
    border-radius: 40px 40px 0 0;
  }
}
@media (max-width: 768px) {
  .p-recommend {
    margin-block-start: calc(179 * var(--vw-small));
    background-image: url("/shared/image/hfproject/recommend/bg_01_sp_ava_tc.png");
    border-radius: calc(20 * var(--vw-small)) calc(20 * var(--vw-small)) 0 0;
  }
}
@media (max-width: 768px) {
  .p-recommend::before {
    position: absolute;
    inset-block-end: calc(64 * var(--vw-small));
    inset-inline-start: calc(-36 * var(--vw-small));
    z-index: 1;
    inline-size: calc(72.5 * var(--vw-small));
    block-size: calc(68 * var(--vw-small));
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_01_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
.p-recommend__inner {
  position: relative;
}

@media (min-width: 769px), print {
  .p-recommend__inner {
    inset-block-start: -84px;
    max-inline-size: 1230px;
    margin-block-end: -40px;
  }
}
@media (max-width: 768px) {
  .p-recommend__inner {
    inset-block-start: calc(-94 * var(--vw-small));
    margin-block-end: calc(-21 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-recommend__inner::before {
    position: absolute;
    inset-block-start: -2px;
    inset-inline-start: 90px;
    inline-size: 135px;
    block-size: 126px;
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_01_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media (max-width: 768px) {
  .p-recommend__inner::before {
    position: absolute;
    inset-block-start: calc(64 * var(--vw-small));
    inset-inline-start: calc(-36 * var(--vw-small));
    inline-size: calc(62.5 * var(--vw-small));
    block-size: calc(58 * var(--vw-small));
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_03_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media (min-width: 769px), print {
  .p-recommend__inner::after {
    position: absolute;
    inset-block-start: 60px;
    inset-inline-end: 90px;
    inline-size: 105px;
    block-size: 99px;
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_02_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media (max-width: 768px) {
  .p-recommend__inner::after {
    position: absolute;
    inset-block-start: calc(-20 * var(--vw-small));
    inset-inline-end: calc(11 * var(--vw-small));
    inline-size: calc(49.5 * var(--vw-small));
    block-size: calc(46 * var(--vw-small));
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_04_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
.p-recommend__heading-sub {
  position: relative;
  margin-inline: auto;
}

@media (min-width: 769px), print {
  .p-recommend__heading-sub {
    max-inline-size: 329px;
    margin-inline: auto;
  }
}
@media (max-width: 768px) {
  .p-recommend__heading-sub {
    inline-size: calc(253.5 * var(--vw-small));
  }
}
@media (max-width: 768px) {
  .p-recommend__heading-sub::after {
    position: absolute;
    inset-block-end: calc(-116 * var(--vw-small));
    inset-inline-end: calc(-86 * var(--vw-small));
    inline-size: calc(52.5 * var(--vw-small));
    block-size: calc(49.5 * var(--vw-small));
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_02_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media (min-width: 769px), print {
  .p-recommend__heading {
    max-inline-size: 701px;
    margin-block-start: 28px;
    margin-inline: auto;
  }
}
@media (max-width: 768px) {
  .p-recommend__heading {
    margin-block-start: calc(14.5 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-recommend__heading-img[class][src] {
    inline-size: 701px;
    block-size: 40px;
    object-fit: contain;
  }
}
.p-recommend__detail {
  text-align: center;
}

@media (min-width: 769px), print {
  .p-recommend__detail:has(+ .p-recommend__list) {
    margin-block-start: 16px;
  }
}
@media (max-width: 768px) {
  .p-recommend__detail:has(+ .p-recommend__list) {
    margin-block-start: calc(3 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-recommend__detail {
    font-size: calc(16 * var(--rem));
    line-height: 1.875;
  }
}
@media (max-width: 768px) {
  .p-recommend__detail {
    font-size: calc(14 * var(--vw-small));
    line-height: 1.7857142857;
  }
}
@media (max-width: 768px) {
  .p-recommend__list-unit-03 .p-recommend__detail {
    letter-spacing: -0.07em;
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-detail-area .p-recommend__detail {
    font-size: calc(14 * var(--rem));
    line-height: 1.8571428571;
    text-align: start;
  }
}
@media (max-width: 768px) {
  .p-recommend__list-detail-area .p-recommend__detail {
    font-size: calc(12 * var(--vw-small));
    line-height: 1.8333333333;
  }
}
.p-recommend__list {
  position: relative;
}

@media (min-width: 769px), print {
  .p-recommend__list {
    display: grid;
    grid-template-columns: 48.612% 49.075%;
    gap: 25px;
    margin-block-start: 28px;
  }
}
@media (max-width: 768px) {
  .p-recommend__list {
    display: flex;
    flex-direction: column;
    row-gap: calc(17.5 * var(--vw-small));
    margin-block-start: calc(25 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-recommend__list::before {
    position: absolute;
    inset-block-start: -54px;
    inset-inline-start: -46px;
    inline-size: 93px;
    block-size: 86px;
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_04_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
@media (min-width: 769px), print {
  .p-recommend__list::after {
    position: absolute;
    inset-block-end: 50px;
    inset-inline-end: -100px;
    inline-size: 114px;
    block-size: 106px;
    content: "";
    background-image: url("/shared/image/hfproject/shared/ic_01_ava_l-jg.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}
.p-recommend__list-unit {
  background-color: var(--hf-white-01);
}

@media (min-width: 769px), print {
  .p-recommend__list-unit {
    padding-block-end: 20px;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 768px) {
  .p-recommend__list-unit {
    padding-block-end: calc(14.5 * var(--vw-small));
    padding-inline: calc(17.5 * var(--vw-small));
    border-radius: calc(10 * var(--vw-small));
    box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.1);
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-unit-01 {
    display: flex;
    grid-row: 1/2;
    grid-column: 1/2;
    column-gap: 22px;
    align-items: center;
    justify-content: center;
    padding-block-start: 29px;
    padding-inline: 34px 27px;
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-unit-02 {
    display: flex;
    grid-row: 2/3;
    grid-column: 1/2;
    column-gap: 10px;
    align-items: center;
    justify-content: center;
    padding-block-start: 29px;
    padding-inline: 15px 29px;
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-unit-03 {
    grid-row: 1/3;
    grid-column: 2/3;
    padding-block-start: 65px;
    padding-inline: 15px;
  }
}
.p-recommend__logo {
  margin-inline: auto;
}

@media (min-width: 769px), print {
  .p-recommend__list-unit-01 .p-recommend__logo {
    max-inline-size: 199px;
  }
}
@media (max-width: 768px) {
  .p-recommend__list-unit-01 .p-recommend__logo {
    inline-size: calc(183 * var(--vw-small));
    margin-block: calc(22 * var(--vw-small)) calc(16.5 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-unit-02 .p-recommend__figure {
    max-inline-size: 230px;
  }
}
@media (max-width: 768px) {
  .p-recommend__list-unit-02 .p-recommend__logo {
    inline-size: calc(230 * var(--vw-small));
    margin-block: calc(12 * var(--vw-small)) calc(9.5 * var(--vw-small));
  }
  .p-recommend__list-unit-02 .p-recommend__list-detail-area {
    margin-block-start: calc(8 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-unit-03 .p-recommend__list-block-01 {
    display: flex;
    column-gap: 52px;
    align-items: center;
    justify-content: center;
    padding-inline: 36px 12px;
  }
  .p-recommend__list-unit-03 .p-recommend__list-block-01 .p-recommend__logo {
    max-inline-size: 152px;
  }
}
@media (max-width: 768px) {
  .p-recommend__list-unit-03 .p-recommend__list-block-01 .p-recommend__logo {
    inline-size: calc(98 * var(--vw-small));
    margin-block: calc(17.5 * var(--vw-small)) calc(13 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-unit-03 .p-recommend__list-block-02 {
    display: flex;
    column-gap: 9px;
    align-items: center;
    justify-content: center;
    margin-block-start: 70px;
  }
  .p-recommend__list-unit-03 .p-recommend__list-block-02 .p-recommend__logo {
    max-inline-size: 230px;
  }
}
@media (max-width: 768px) {
  .p-recommend__list-unit-03 .p-recommend__list-block-02 {
    margin-block-start: calc(28.5 * var(--vw-small));
  }
  .p-recommend__list-unit-02 .p-recommend__list-block-02 .p-recommend__list-detail-area {
    margin-block-start: calc(8 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-unit-03 .p-recommend__logo-img {
    inline-size: 278px;
    block-size: 32px;
    object-fit: contain;
  }
}
@media (min-width: 769px), print {
  .p-recommend__figure + .p-recommend__detail {
    margin-block-start: 16px;
    font-size: calc(14 * var(--rem));
    line-height: 1.8571428571;
  }
}
@media (max-width: 768px) {
  .p-recommend__figure + .p-recommend__detail {
    margin-block-start: calc(8 * var(--vw-small));
    font-size: calc(12 * var(--vw-small));
    line-height: 1.8333333333;
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-unit-03 .p-recommend__figure-img {
    max-inline-size: 471px;
    block-size: 161px;
    object-fit: contain;
  }
}
@media (min-width: 769px), print {
  .p-recommend__link-wrap {
    margin-inline-end: auto;
  }
}
@media (max-width: 768px) {
  .p-recommend__link-wrap {
    margin-inline: auto;
  }
}
.p-recommend__link {
  display: block grid;
  grid-template-columns: repeat(3, auto);
  column-gap: 0.25em;
  align-items: center;
}
@media (min-width: 769px), print {
  .p-recommend__link .u-icon-blank-01 {
    margin-block-start: 3px;
  }
}
@media (max-width: 768px) {
  .p-recommend__link .u-icon-blank-01 {
    margin-block-start: calc(6 * var(--vw-small));
  }
}
@media (max-width: 768px) {
  .p-recommend__link .u-icon-arrow-01 {
    margin-block-start: calc(3 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-recommend__list-unit-01 .p-recommend__link__img {
    inline-size: 125px;
  }
}
@media (max-width: 768px) {
  .p-recommend__list-unit-01 .p-recommend__link__img {
    inline-size: calc(101.5 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-unit-02 .p-recommend__link__img {
    inline-size: 96px;
  }
}
@media (max-width: 768px) {
  .p-recommend__list-unit-02 .p-recommend__link__img {
    inline-size: calc(71.5 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-block-01 .p-recommend__link__img {
    inline-size: 221px;
  }
}
@media (max-width: 768px) {
  .p-recommend__list-block-01 .p-recommend__link__img {
    inline-size: calc(163 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-block-02 .p-recommend__link__img {
    inline-size: 237px;
  }
}
@media (max-width: 768px) {
  .p-recommend__list-block-02 .p-recommend__link__img {
    inline-size: calc(174.5 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-recommend__list-unit-01 .p-recommend__link-wrap {
    inline-size: max-content;
    margin-block-start: 14px;
  }
}
@media (max-width: 768px) {
  .p-recommend__list-unit-01 .p-recommend__link-wrap {
    inline-size: max-content;
    margin-block-start: calc(10 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-unit-02 .p-recommend__link-wrap {
    inline-size: max-content;
    margin-block-start: 14px;
  }
}
@media (max-width: 768px) {
  .p-recommend__list-unit-02 .p-recommend__link-wrap {
    inline-size: max-content;
    margin-block-start: calc(10 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-unit-03 .p-recommend__list-block-01 .p-recommend__link-wrap {
    inline-size: max-content;
    margin-block-start: 14px;
  }
}
@media (max-width: 768px) {
  .p-recommend__list-unit-03 .p-recommend__list-block-01 .p-recommend__link-wrap {
    inline-size: max-content;
    margin-block-start: calc(10 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-unit-03 .p-recommend__list-block-02 .p-recommend__link-wrap {
    inline-size: max-content;
    margin-block-start: 14px;
  }
}
@media (max-width: 768px) {
  .p-recommend__list-unit-03 .p-recommend__list-block-02 .p-recommend__link-wrap {
    inline-size: max-content;
    margin-block-start: calc(10 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-unit-01 .p-recommend__list-detail-area {
    flex-basis: calc(100% - 199px);
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-unit-02 .p-recommend__list-detail-area {
    flex-basis: calc(100% - 199px);
  }
}
@media (min-width: 769px), print {
  .p-recommend__list-unit-03 .p-recommend__list-block-02 .p-recommend__list-detail-area {
    flex-basis: calc(100% - 199px);
  }
}
/* common-article
------------------------------- */
/* article
------------------------------- */
.hf_project--01 .p-hf-article {
  background-color: var(--hf-blue-04);
}
.hf_project--02 .p-hf-article {
  background-color: var(--hf-green-02);
}
.hf_project--03 .p-hf-article {
  background-color: var(--hf-pink-02);
}

.p-hf-article__inner {
  position: relative;
}
@media (min-width: 769px), print {
  .p-hf-article__inner {
    padding-block: 60px 100px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__inner {
    padding-block: calc(25 * var(--vw-small)) calc(60 * var(--vw-small));
  }
}

.p-hf-article__circle-icon > * {
  position: absolute;
}
@media (max-width: 768px) {
  .p-hf-article__circle-icon > * {
    z-index: 1;
  }
}
@media (max-width: 768px) {
  .p-hf-article__circle-icon.p-hf-article__circle-icon-02 > *:nth-child(4)[src] {
    inset-block-start: calc(1276 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .hf_project--amusement .p-hf-article__circle-icon.p-hf-article__circle-icon-02 > *:nth-child(4)[src] {
    inset-block-start: 879px;
  }
}
@media (min-width: 769px), print {
  .p-hf-article__circle-icon.p-hf-article__circle-icon-02 > *:nth-child(7)[src] {
    inset-block-start: 1496px;
  }
}
@media (min-width: 769px), print {
  .p-hf-article__circle-icon.p-hf-article__circle-icon-03 > *:nth-child(4)[src] {
    inset-block-start: 902px;
  }
}
@media (min-width: 769px), print {
  .p-hf-article__circle-icon.p-hf-article__circle-icon-03 > *:nth-child(5)[src] {
    inset-block-start: 1032px;
  }
}
@media (min-width: 769px), print {
  .p-hf-article__circle-icon.p-hf-article__circle-icon-03 > *:nth-child(6)[src] {
    inset-block-start: 1090px;
  }
}
@media (min-width: 769px), print {
  .p-hf-article__circle-icon.p-hf-article__circle-icon-03 > *:nth-child(7)[src] {
    inset-block-start: 1706px;
  }
}
.p-hf-article__circle-icon > *:nth-child(1)[src] {
  opacity: 0.2;
}
@media (min-width: 769px), print {
  .p-hf-article__circle-icon > *:nth-child(1)[src] {
    inset-block-start: 97px;
    inset-inline-start: -2px;
    inline-size: 93px;
    block-size: 86px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__circle-icon > *:nth-child(1)[src] {
    inset-block-start: calc(73 * var(--vw-small));
    inset-inline-start: calc(-18 * var(--vw-small));
    inline-size: calc(49 * var(--vw-small));
    block-size: calc(46.5 * var(--vw-small));
  }
}
.p-hf-article__circle-icon > *:nth-child(2)[src] {
  opacity: 0.2;
}
@media (min-width: 769px), print {
  .p-hf-article__circle-icon > *:nth-child(2)[src] {
    inset-block-start: 193px;
    inset-inline-start: 90px;
    inline-size: 50px;
    block-size: 47px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__circle-icon > *:nth-child(2)[src] {
    inset-block-start: calc(246 * var(--vw-small));
    inset-inline-end: calc(-30 * var(--vw-small));
    inline-size: calc(59.5 * var(--vw-small));
    block-size: calc(55 * var(--vw-small));
  }
}
.p-hf-article__circle-icon > *:nth-child(3)[src] {
  opacity: 0.2;
}
@media (min-width: 769px), print {
  .p-hf-article__circle-icon > *:nth-child(3)[src] {
    inset-block-start: 483px;
    inset-inline-end: -20px;
    inline-size: 102px;
    block-size: 93px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__circle-icon > *:nth-child(3)[src] {
    inset-block-start: calc(784 * var(--vw-small));
    inset-inline-start: calc(-20 * var(--vw-small));
    inline-size: calc(69 * var(--vw-small));
    block-size: calc(64.5 * var(--vw-small));
  }
}
.p-hf-article__circle-icon > *:nth-child(4)[src] {
  opacity: 0.2;
}
@media (min-width: 769px), print {
  .p-hf-article__circle-icon > *:nth-child(4)[src] {
    inset-block-start: 962px;
    inset-inline-start: 24px;
    inline-size: 50px;
    block-size: 46px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__circle-icon > *:nth-child(4)[src] {
    inset-block-start: calc(1290 * var(--vw-small));
    inset-inline-end: calc(-24 * var(--vw-small));
    inline-size: calc(47 * var(--vw-small));
    block-size: calc(43.5 * var(--vw-small));
  }
}
.p-hf-article__circle-icon > *:nth-child(5)[src] {
  opacity: 0.2;
}
@media (min-width: 769px), print {
  .p-hf-article__circle-icon > *:nth-child(5)[src] {
    inset-block-start: 1150px;
    inset-inline-end: 60px;
    inline-size: 50px;
    block-size: 47px;
  }
}
.p-hf-article__circle-icon > *:nth-child(6)[src] {
  opacity: 0.2;
}
@media (min-width: 769px), print {
  .p-hf-article__circle-icon > *:nth-child(6)[src] {
    inset-block-start: 1198px;
    inset-inline-end: -32px;
    inline-size: 102px;
    block-size: 93px;
  }
}
.p-hf-article__circle-icon > *:nth-child(7)[src] {
  opacity: 0.2;
}
@media (min-width: 769px), print {
  .p-hf-article__circle-icon > *:nth-child(7)[src] {
    inset-block-start: 1750px;
    inset-inline-start: -6px;
    inline-size: 102px;
    block-size: 93px;
  }
}
.p-hf-article__circle-icon > *:nth-child(8)[src] {
  opacity: 0.2;
}
@media (min-width: 769px), print {
  .p-hf-article__circle-icon > *:nth-child(8)[src] {
    inset-block-start: 2224px;
    inset-inline-end: -44px;
    inline-size: 73px;
    block-size: 68px;
  }
}
.p-hf-article__circle-icon > *:nth-child(9)[src] {
  opacity: 0.2;
}
@media (min-width: 769px), print {
  .p-hf-article__circle-icon > *:nth-child(9)[src] {
    inset-block-start: 2652px;
    inset-inline-start: -162px;
    inline-size: 60px;
    block-size: 56px;
  }
}
.p-hf-article__circle-icon > *:nth-child(10)[src] {
  opacity: 0.2;
}
@media (min-width: 769px), print {
  .p-hf-article__circle-icon > *:nth-child(10)[src] {
    inset-block-start: 2710px;
    inset-inline-start: -116px;
    inline-size: 88px;
    block-size: 83px;
  }
}

.p-hf-article__block {
  margin-inline: auto;
  background-color: var(--hf-white-01);
}
@media (min-width: 769px), print {
  .p-hf-article__block {
    inline-size: calc(100% - 20px);
    max-inline-size: 800px;
    padding: 30px 70px 60px;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 768px) {
  .p-hf-article__block {
    padding: calc(17.5 * var(--vw-small));
    border-radius: calc(10 * var(--vw-small));
  }
}

.p-hf-article__column-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
@media (min-width: 769px), print {
  .p-hf-article__column-top + .p-hf-article__heading {
    margin-block-start: 16px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__column-top + .p-hf-article__heading {
    margin-block-start: calc(20 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-hf-article__logo {
    max-inline-size: 130px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__logo {
    max-inline-size: calc(91 * var(--vw-small));
  }
}

.p-hf-article__category {
  display: grid;
}
@media (min-width: 769px), print {
  .p-hf-article__category {
    row-gap: 16px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__category {
    row-gap: calc(10 * var(--vw-small));
  }
}

.p-hf-article__label {
  justify-self: flex-end;
}
@media (min-width: 769px), print {
  .p-hf-article__label {
    font-size: calc(14 * var(--rem));
  }
}
@media (max-width: 768px) {
  .p-hf-article__label {
    font-size: calc(12 * var(--vw-small));
  }
}

.p-hf-article__datetime {
  display: grid;
  place-content: center;
  justify-self: flex-end;
  font-weight: var(--font-weight-medium);
  border: 1px solid currentcolor;
}
@media (min-width: 769px), print {
  .p-hf-article__datetime {
    inline-size: 105px;
    min-block-size: 25px;
    font-size: calc(14 * var(--rem));
    line-height: 1.1428571429;
    border-radius: 13px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__datetime {
    inline-size: calc(90.5 * var(--vw-small));
    min-block-size: calc(20 * var(--vw-small));
    font-size: calc(12 * var(--vw-small));
    line-height: 1.3333333333;
    border-radius: calc(11 * var(--vw-small));
  }
}

.p-hf-article__heading {
  border-block-start-style: solid;
  border-block-end-style: solid;
}
@media (min-width: 769px), print {
  .p-hf-article__heading {
    padding-block: 30px;
    border-block-start-width: 2px;
    border-block-end-width: 2px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__heading {
    padding-block: calc(20 * var(--vw-small));
    border-block-start-width: calc(2 * var(--vw-small));
    border-block-end-width: calc(2 * var(--vw-small));
  }
}
.hf_project--01 .p-hf-article__heading {
  border-block-start-color: var(--hf-blue-01);
  border-block-end-color: var(--hf-blue-01);
}
.hf_project--02 .p-hf-article__heading {
  border-block-start-color: var(--hf-green-01);
  border-block-end-color: var(--hf-green-01);
}
.hf_project--03 .p-hf-article__heading {
  border-block-start-color: var(--hf-pink-01);
  border-block-end-color: var(--hf-pink-01);
}
@media (min-width: 769px), print {
  .p-hf-article__heading + .p-hf-article__share {
    margin-block-start: 20px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__heading + .p-hf-article__share {
    margin-block-start: calc(15 * var(--vw-small));
  }
}

.p-hf-article__share {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: flex-end;
}
@media (min-width: 769px), print {
  .p-hf-article__share {
    column-gap: 15px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__share {
    column-gap: calc(14.5 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-hf-article__share + .p-hf-article__figure {
    margin-block-start: 20px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__share + .p-hf-article__figure {
    margin-block-start: calc(15 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-hf-article__share__copy {
    font-size: calc(14 * var(--rem));
    line-height: 1.1428571429;
  }
}
@media (max-width: 768px) {
  .p-hf-article__share__copy {
    font-size: calc(14 * var(--vw-small));
    line-height: 1.7857142857;
  }
}

.p-hf-article__share__list {
  display: grid;
  grid-template-columns: auto auto auto;
}
@media (min-width: 769px), print {
  .p-hf-article__share__list {
    column-gap: 15px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__share__list {
    column-gap: calc(14.5 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-hf-article__share__list > li {
    max-inline-size: 29px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__share__list > li {
    max-inline-size: calc(29 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-hf-article__figure + .p-hf-article__contents {
    margin-block-start: 30px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__figure + .p-hf-article__contents {
    margin-block-start: calc(20 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-hf-article__contents__heading + .p-hf-article__contents__detail {
    margin-block-start: 30px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__contents__heading + .p-hf-article__contents__detail {
    margin-block-start: calc(20 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-hf-article__contents__heading + .p-hf-article__contents__column {
    margin-block-start: 30px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__contents__heading + .p-hf-article__contents__column {
    margin-block-start: calc(20 * var(--vw-small));
  }
}

.p-hf-article__contents__column {
  display: grid;
}
@media (min-width: 769px), print {
  .p-hf-article__contents__column {
    grid-template-columns: repeat(auto-fit, minmax(315px, 1fr));
    column-gap: 30px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__contents__column {
    grid-template-rows: auto;
    row-gap: calc(20 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-hf-article__contents__detail {
    font-size: calc(16 * var(--rem));
    line-height: 1.75;
  }
}
@media (max-width: 768px) {
  .p-hf-article__contents__detail {
    font-size: calc(14 * var(--vw-small));
    line-height: 1.7857142857;
  }
}
@media (min-width: 769px), print {
  .p-hf-article__contents__detail + .p-hf-article__contents__list {
    margin-block-start: 30px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__contents__detail + .p-hf-article__contents__list {
    margin-block-start: calc(22.5 * var(--vw-small));
  }
}
@media (min-width: 769px), print {
  .p-hf-article__contents__detail + .p-hf-article__contents__summary {
    margin-block-start: 30px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__contents__detail + .p-hf-article__contents__summary {
    margin-block-start: calc(15 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-hf-article__contents__list {
    font-size: calc(14 * var(--rem));
    line-height: 1.8571428571;
  }
}
@media (max-width: 768px) {
  .p-hf-article__contents__list {
    font-size: calc(12 * var(--vw-small));
    line-height: 1.5;
  }
}

@media (min-width: 769px), print {
  .p-hf-article__contents__summary + .p-hf-article__contents__list {
    margin-block-start: 30px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__contents__summary + .p-hf-article__contents__list {
    margin-block-start: calc(20 * var(--vw-small));
  }
}

/* project
------------------------------- */
.p-hf-article__contents__project.p-project {
  inline-size: 100%;
  padding-block: 0;
  margin-block-end: 0;
  border-radius: 0;
}

@media (min-width: 769px), print {
  .p-hf-article__contents__project .p-project__arrow {
    margin-block-start: 30px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__contents__project .p-project__arrow {
    margin-block-start: calc(22.5 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-hf-article__contents__project .p-project__heading-sub-secondary {
    margin-block-start: 60px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__contents__project .p-project__heading-sub-secondary {
    margin-block-start: calc(30 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-hf-article__contents__project .p-project__hr {
    inline-size: 100%;
    margin-block-start: 60px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__contents__project .p-project__hr {
    display: block;
    block-size: calc(2 * var(--vw-small));
    margin-block: calc(30 * var(--vw-small));
    background-image: url("/shared/image/hfproject/shared/ic_line_02_ava_tc.svg");
    background-size: cover;
  }
}

@media (min-width: 769px), print {
  .p-hf-article__contents__project .p-project__desc {
    margin-block-start: 60px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__contents__project .p-project__desc {
    max-inline-size: calc(275 * var(--vw-small));
    margin-block-start: calc(25 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-hf-article__contents__project .p-project__desc__column {
    column-gap: 63px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__contents__project .p-project__desc__column {
    column-gap: 0;
  }
}

.p-hf-article__contents__project .p-project__desc__figure {
  margin-inline: auto;
}
@media (min-width: 769px), print {
  .p-hf-article__contents__project .p-project__desc__figure {
    max-inline-size: 273px;
  }
}

.p-project__desc__figure-link {
  display: block;
}

@media (min-width: 769px), print {
  .p-hf-article__contents__project .p-project__desc__figure-icon[class][src] {
    inset-inline-start: 52px;
    max-inline-size: 103px;
    margin-block-start: -74px;
  }
}

@media (max-width: 768px) {
  .p-project__desc-title-01 {
    max-inline-size: calc(117 * var(--vw-small));
  }
}

@media (max-width: 768px) {
  .p-project__desc-title-02 {
    inset-inline-end: auto;
  }
}

@media (min-width: 769px), print {
  .p-hf-article__contents__project .p-project__catch {
    margin-block-start: 30px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__contents__project .p-project__catch {
    max-inline-size: calc(275 * var(--vw-small));
  }
}

@media (max-width: 768px) {
  .p-hf-article__contents__project .p-project__catch-column__unit:first-child .p-project__catch__figure {
    margin-inline-start: 15px;
  }
}
@media (max-width: 768px) {
  .p-hf-article__contents__project .p-project__catch-column__unit:last-child .p-project__catch__figure {
    margin-inline-end: 15px;
  }
}

@media (max-width: 768px) {
  .p-hf-article__contents__project .p-project__catch-column__unit:first-child .p-project__catch__caption {
    inset-inline-end: calc(-2 * var(--vw-small));
  }
}
@media (max-width: 768px) {
  .p-hf-article__contents__project .p-project__catch-column__unit:last-child .p-project__catch__caption {
    inset-inline-start: calc(-2 * var(--vw-small));
  }
}

/* other
------------------------------- */
.p-hf-other {
  background-color: var(--hf-white-01);
}
@media (min-width: 769px), print {
  .p-hf-other {
    padding-block: 60px;
    margin-block-start: -40px;
    border-radius: 40px 40px 0 0;
  }
}
@media (max-width: 768px) {
  .p-hf-other {
    padding-block: calc(40 * var(--vw-small));
    margin-block-start: calc(-20 * var(--vw-small));
    border-radius: calc(20 * var(--vw-small)) calc(20 * var(--vw-small)) 0 0;
  }
}

@media (min-width: 769px), print {
  .p-hf-other__inner {
    max-inline-size: 1230px;
  }
}

.p-hf-other__heading {
  inline-size: fit-content;
  margin-inline: auto;
}

@media (min-width: 769px), print {
  .p-hf-other_block {
    margin-block-start: 16px;
  }
}
@media (max-width: 768px) {
  .p-hf-other_block {
    margin-block-start: calc(20.5 * var(--vw-small));
  }
}

.p-hf-other__list {
  display: grid;
}
@media (min-width: 769px), print {
  .p-hf-other__list {
    grid-template-columns: auto auto auto;
    gap: 24px;
  }
}
@media (max-width: 768px) {
  .p-hf-other__list {
    row-gap: calc(30 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-hf-other__button-wrap {
    margin-block-start: 40px;
  }
}
@media (max-width: 768px) {
  .p-hf-other__button-wrap {
    margin-block-start: calc(30 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-hf-card__figure img[class] {
    inline-size: 304px;
    block-size: 200px;
  }
}
@media (max-width: 768px) {
  .p-hf-card__figure img[class] {
    inline-size: calc(305 * var(--vw-small));
    block-size: calc(153 * var(--vw-small));
    border-radius: calc(4 * var(--vw-small));
  }
}

@media (min-width: 769px), print {
  .p-hf-card__figure-02 {
    background-color: var(--hf-blue-02);
    border-radius: 8px;
  }
}
@media (min-width: 769px), print {
  .p-hf-card__figure-02 img[class] {
    object-fit: contain;
  }
}

/* utility
------------------------------- */
/* color */
.u-color-01 {
  color: var(--hf-pink-01);
}

.u-color-02 {
  color: var(--hf-blue-01);
}

.u-color-03 {
  color: var(--hf-green-01);
}

/* display */
@media (min-width: 769px), print {
  .u-forSp {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .u-forPc {
    display: none !important;
  }
}

.u-block {
  display: block;
}

.u-iblock {
  display: inline-block;
}

/* img  */
.u-liquid[class] {
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
}

.u-liquid--max[class] {
  inline-size: 100%;
}

/* text */
.u-text-uppercase {
  text-transform: uppercase;
}

.u-font-feature-palt {
  font-feature-settings: "palt";
}

.u-fwr {
  font-weight: var(--font-weight-regular);
}

.u-fwm {
  font-weight: var(--font-weight-medium);
}

.u-fwsemib {
  font-weight: var(--font-weight-semi-bold);
}

.u-fwb {
  font-weight: var(--font-weight-bold);
}

.u-font-noto-sans-jp {
  font-family: var(--font-family-noto-sans-jp), sans-serif;
}

.u-font-Rounded-medium {
  font-family: var(--font-family-rounded), sans-serif;
}

.u-text-note-icon::before {
  display: inline-block;
  content: "※";
}

.u-text-indent-01 {
  padding-inline-start: 1em;
  text-indent: -0.525em;
}

/* text-align */
.u-text-align-c {
  text-align: center;
}

.u-text-align-r {
  text-align: end;
}

.u-text-align-l {
  text-align: start;
}

@media (min-width: 769px), print {
  .u-text-align-c--pc {
    text-align: center;
  }
  .u--text-align-r--pc {
    text-align: end;
  }
  .u-text-align-l--pc {
    text-align: start;
  }
}
/* link  */
.u-opacity {
  transition: opacity var(--duration) ease;
  will-change: opacity;
}
@media (hover: hover) {
  .u-opacity:where(:any-link, :enabled, summary):hover {
    text-decoration: none;
    opacity: 0.6;
  }
}
.u-opacity:focus-visible {
  text-decoration: none;
  outline: 2px solid var(--root-text-color);
  outline-offset: 1px;
  opacity: 0.6;
}

.u-text-link {
  text-decoration: underline;
}
@media (hover: hover) {
  .u-text-link:where(:any-link, :enabled, summary):hover {
    text-decoration: none;
  }
}

.u-text-underline {
  text-decoration: underline;
}

/* sup */
.u-text-sup {
  inset-block-start: -3px;
  display: inline-block;
  font-size: 0.4em;
  vertical-align: super;
}

.u-text-sub {
  inset-block-end: 0;
  display: inline-block;
  font-size: 0.75em;
  vertical-align: sub;
}

.u-vertical-align-top {
  vertical-align: top;
}

.u-vertical-align-middle {
  vertical-align: middle;
}

.u-vertical-align-bottom {
  vertical-align: bottom;
}

/* movie */
.u-movie-container {
  position: relative;
  aspect-ratio: 16/9;
  padding-block-start: 0;
}
.u-movie-container iframe {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
  border: none;
}

/* other */
.u-visuallyHidden {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.u-icon-blank-01 {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}
@media (min-width: 769px), print {
  .u-icon-blank-01 > img[src] {
    inline-size: 15px;
    block-size: 11px;
  }
}
@media (max-width: 768px) {
  .u-icon-blank-01 > img[src] {
    inline-size: calc(12 * var(--vw-small));
    block-size: calc(9.5 * var(--vw-small));
  }
}

.u-icon-arrow-01 {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}
@media (min-width: 769px), print {
  .u-icon-arrow-01 > img[src] {
    inline-size: 18px;
    block-size: 18px;
  }
}
@media (max-width: 768px) {
  .u-icon-arrow-01 > img[src] {
    inline-size: calc(15 * var(--vw-small));
    block-size: calc(15 * var(--vw-small));
  }
}

/*# sourceMappingURL=style.css.map */