@charset "UTF-8";

/* =============================================================================

Layout CSS

・レイアウトコンポネ用クラス「.l-×××」

上記はここに記述する

============================================================================= */

/* Heading
============================================================================= */
.l-section_header-A {
  display:grid;
  overflow:hidden;
  @media (width > 767px) {
    grid-template-columns: 1fr 60.0rem 50%;
    align-items: center;
    margin-bottom:4.8rem;
    padding-bottom:3.2rem;
  }
  @media (width <= 767px) {
    gap:2.0rem;
    margin-bottom:2.4rem;
  }

  .en {
    font-size: 12.0rem;
    line-height: .9;
    letter-spacing: 0;
    color:var(--cc-heading-B);
    @media (width > 767px) {
      grid-row:1/2;
      grid-column:2/-1;
      margin-left:auto;
    }
    @media (width <= 767px) {
      margin-inline:-2.4rem -2.0rem;
      font-size: 8.0rem;
    }
  }
  .ja {
    display:flex;
    align-items: center;
    gap:.2em;
    font-size:3.2rem;
    color:#000;
    &::before {
      flex-shrink: 0;
      content:"";
      display:inline-block;
      width:.8em;
      height:1px;
      background-color:currentColor;
    }
    @media (width > 767px) {
      grid-row:1/2;
      grid-column:2/3;
    }
    @media (width <= 767px) {
      font-size:1.9rem;
    }
    > span {
      transform:scaleY(1.35);
    }
  }

  &.-lowerpage {
    padding-top:9.4rem;

    @media (width <= 767px) {
      padding-top:4.0rem;
    }
  }
}



/* Button
----------------------------------------------------------------------------- */

.l-button-A {
  display:flex;
  justify-content: center;
  align-items: center;
  margin-inline:auto;
  max-width:100%;
  border-radius:1.0rem;
  width:51.0rem;
  height:8.0rem;
  color:#fff;
  background-color:var(--cc-text-A);
  position:relative;
  overflow:hidden;
  font-size:2.0rem;
  font-weight:700;
  -webkit-mask-image:url(/assets/svg/button_a_texture.svg);
  mask-image:url(/assets/svg/button_a_texture.svg);
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:cover;
  mask-size:cover;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;

  @media (width > 767px) {
  }

  @media (width <=767px) {
    width:33.5rem;
    height:6.0rem;
    font-size:1.6rem;
  }

  @media (hover) {
    &:hover {
      .m-abs_bg img {
        filter:brightness(1.2);
      }
    }
  }

  .m-abs_bg img {
    border-radius:1.0rem;
    transition-property: filter;
    transition-duration:var(--duration-hover-A);
  }
}

/* Contents
============================================================================= */

.l-kv {
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  position:relative;
  overflow:hidden;
  z-index: 1;

  @media (width > 767px) {
    min-height:calc(100svh - var(--header-height));
  }
  @media (width <= 767px) {
  }
  &:not(.is-cut1) {
    .kv {
      .kv_i {
        opacity:1;
        &.kv01 {
          transform:translate(-0vw,-100lvh) rotate(-5deg);
        }
        &.kv02 {
          transform:translate(100vw,-100lvh) rotate(4deg);
        }
        &.kv03 {
          transform:translate(100vw,-200lvh) rotate(-10deg);
        }
        &.kv04 {
          transform:translate(100vw,20lvh) rotate(20deg);
        }
        &.kv05 {
          transform:translate(20vw,100lvh) rotate(-10deg);
        }
        &.kv06 {
          transform:translate(50vw,-100lvh) rotate(20deg);
        }
        &.kv07 {
          transform:translate(-50vw,-100lvh) rotate(-40deg);
        }
        &.kv08 {
          transform:translate(-20vw,-100lvh) rotate(20deg);
        }
        &.kv09 {
          transform:translate(100vw,40lvh) rotate(40deg);
        }
        &.kv10 {
          transform:translate(70vw,-200lvh) rotate(-40deg);
        }
        &.kv11 {
          transform:translate(-100vw,80lvh) rotate(20deg);
        }
        &.kv12 {
          transform:translate(70vw,0lvh) rotate(-40deg);
        }
        &.kv13 {
          transform:translate(-20vw,-100lvh) rotate(-20deg);
        }
        &.kv14 {
          transform:translate(100vw,40lvh) rotate(20deg);
        }
        &.kv15 {
          transform:translate(-100vw,10lvh) rotate(40deg);
        }
        &.kv16 {
          transform:translate(-100vw,2lvh) rotate(-40deg);
        }
      }
    }
  }
  &.is-cut1 {
    .kv_i {
      transform:translate(0) rotate(0deg);
      opacity:1;
      &.kv01 {
        transition-duration:1.2s;
      }
      &.kv02 {
        transition-duration:1.4s;
      }
      &.kv03 {
        transition-duration:1.6s;
      }
      &.kv04 {
        transition-duration:1.3s;
      }
      &.kv05 {
        transition-duration:1.6s;
      }
      &.kv06 {
        transition-duration:1.8s;
      }
      &.kv07 {
        transition-duration:1.2s;
      }
      &.kv08 {
        transition-duration:1.4s;
      }
      &.kv09 {
        transition-duration:1.6s;
      }
      &.kv10 {
        transition-duration:1.7s;
      }
      &.kv11 {
        transition-duration:1.9s;
      }
      &.kv12 {
        transition-duration:1.8s;
      }
      &.kv13 {
        transition-duration:1.7s;
      }
      &.kv14 {
        transition-duration:1.5s;
      }
      &.kv15 {
        transition-duration:1.3s;
      }
      &.kv16 {
        transition-duration:1.4s;
      }
    }
  }
  &.is-cut2 {
  }
  &.is-cut3 {
  }
  &.is-cut4 {
  }
  &.is-finalcut {
    .h { opacity:1; }
    .t { opacity:1; }
  }

  .h {
    position:absolute;
    top:10.0rem;
    inset-inline:0;
    transition-property: opacity;
    transition-duration: .5s;
    opacity:0;
    @media (width <= 767px) {
      top:4.0rem;
    }

    .sub {
      margin-bottom:2.8rem;
      font-size:2.4rem;
      @media (width <= 767px) {
        margin-bottom:1.6rem;
        font-size:1.75rem;
      }
    }
    .main {
      font-size:4.8rem;
      @media (width <= 767px) {
        font-size:3.0rem;
      }
    }
  }
  .t {
    font-size:1.6rem;
    line-height:1.5;
    letter-spacing: .05em;
    position:absolute;
    top:calc(100svh - var(--header-height) - 2.0rem);
    right:0;
    transform:translateY(-100%);
    transition-property: opacity;
    transition-duration: .5s;
    opacity:0;
    @media (width > 767px) {
      padding-block:3.2rem;
      padding-inline:4.4rem 2.4rem;
      width:calc(50% - 10.0rem);
    }
    @media (width <= 767px) {
      padding-block:1.6rem;
      padding-inline:2.0rem;
      width:calc(100% - 6.0rem);
    }
  }
  .t_heading {
    margin-bottom:1.6rem;
    font-size:2.0rem;
    letter-spacing: .04em;
    line-height:1.4;
    color:var(--cc-heading-A);
    @media (width <= 767px) {
      margin-bottom:1.2rem;
      font-size:1.8rem;
    }
  }
  .t_l {
    display:grid;
    grid-template-columns: auto 1fr;
    gap:1.0rem;
    @media (width <= 767px) {
      gap:.8rem;
    }
  }
  .t_l_i {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:subgrid;
    align-items: baseline;

    > a {
      grid-column:1 / -1;
      display:grid;
      grid-template-columns:subgrid;
      align-items: baseline;
      @media (hover:hover) {
        &:hover .t_l_i_title {
          text-decoration:none;
        }
      }
      .t_l_i_title {
        text-decoration:underline;
      }
    }
  }
  .t_l_i_date {
    color:var(--cc-heading-A);
    font-size:1.6rem;
    line-height:1;
    position:relative;
    top:.05em;
    @media (width <= 767px) {
      font-size:1.4rem;
    }
  }
  .t_l_i_title {
    line-height:1.4;
    @media (width <= 767px) {
      font-size:1.4rem;
    }
  }

  .kv {
    display:flex;
    justify-content: center;
    margin-top:-1.0rem;
    position:relative;
    z-index: -1;
    pointer-events: none;
    @media (width <= 767px) {
      margin-top:7.0rem;
    }

    > .inner {
      flex-shrink: 0;
      width:min(160.0rem,111%);
      height:auto;
      aspect-ratio: 1600 / 848;
      position:relative;
      @media (width <= 767px) {
        aspect-ratio: 428 / 464;
      }
    }

    .kv_i {
      margin:auto;
      width:fit-content;
      height:fit-content;
      position:absolute;
      will-change:transform,opacity;
      transition-property: transform,opacity;

      > img {
        animation-duration:9.6s;
        animation-iteration-count: infinite;
        animation-timing-function:cubic-bezier(0.45, 0, 0.55, 1);
        will-change:transform;
      }

      &.kv01 {
        inset:0% 9% 11% 0%;
        z-index: 2;
        @media (width <= 767px) {
          inset:0% 31% 12% 0%;
        }
        > img {
          animation-name: kv_anim_A;
          animation-delay:0s;
        }
      }

      &.kv02 {
        inset:32% 0% 0% 14%;
        z-index: 2;
        @media (width <= 767px) {
          inset:32% 0% 0% 32%;
        }
        > img {
          --kv-fade-delay:.06s;
          animation-name: kv_anim_B;
          animation-delay:.08s;
          animation-duration:12.8s;
        }
      }

      &.kv03 {
        inset:21% 0% 0% 44%;
        z-index: 2;
        @media (width <= 767px) {
          inset:15% 0% 0% 65%;
        }
        > img {
          animation-name: kv_anim_C;
          animation-delay:.16s;
          animation-direction: reverse;
          animation-duration:14.4s;
        }
      }

      &.kv04 {
        inset:12% 0% 0% 76%;
        z-index: 3;
        @media (width <= 767px) {
          inset:0% 0% 30% 70%;
        }
        > img {
          animation-name: kv_anim_D;
        }
      }

      &.kv05 {
        inset:21% 26% 0% 0%;
        z-index: 3;
        @media (width <= 767px) {
          inset:7% 21% 0% 0%;
        }
        > img {
          animation-name: kv_anim_A;
          animation-delay:.32s;
          animation-direction: reverse;
          animation-duration:10.4s;
        }
      }

      &.kv06 {
        inset:33% 9% 0% 0%;
        z-index: 3;
        @media (width <= 767px) {
          inset:43% 0% 0% 4%;
        }
        > img {
          animation-name: kv_anim_B;
          animation-delay:.4s;
        }
      }

      &.kv07 {
        inset:64% 37% 0% 0%;
        z-index: 3;
        @media (width <= 767px) {
          inset:35% 34% 0% 0%;
        }
        > img {
          animation-name: kv_anim_C;
          animation-delay:.48s;
          animation-duration:11.2s;
        }
      }

      &.kv08 {
        inset:0% 0% 17% 26%;
        z-index: 1;
        @media (width <= 767px) {
          inset:10% 0% 0% 4%;
        }
        >img {
          animation-name: kv_anim_D;
          animation-delay:.56s;
          animation-direction: reverse;
          animation-duration:8.8s;
        }
      }

      &.kv09 {
        inset:0% 0% 29% 52%;
        z-index: 1;
        @media (width <= 767px) {
          inset:0% 0% 4% 38%;
        }
        > img {
          animation-name: kv_anim_A;
          animation-delay:.64s;
        }
      }

      &.kv10 {
        inset:0% 0% 73% 54%;
        z-index: 1;
        @media (width <= 767px) {
          inset:0% 0% 33% 41%;
          z-index: 4;
        }
        > img {
          animation-name: kv_anim_B;
          animation-delay:.72s;
          animation-direction: reverse;
          animation-duration:12.0s;
        }
      }

      &.kv11 {
        inset:0% 0% 74% 77%;
        z-index: 1;
        @media (width <= 767px) {
          inset:0% 0% 82% 74%;
        }
        > img {
          animation-name: kv_anim_C;
          animation-delay:.8s;
        }
      }

      &.kv12 {
        inset:0% 0% 34% 76%;
        z-index: 4;
        @media (width <= 767px) {
          inset:0% 0% 55% 72%;
        }
        > img {
          animation-name: kv_anim_D;
          animation-delay:.88s;
          animation-duration:8.8s;
        }
      }

      &.kv13 {
        inset:7% 44.5% 0% 0%;
        z-index: 1;
        @media (width <= 767px) {
          inset:60% 52% 0% 0%;
        }
        > img {
          animation-name: kv_anim_A;
          animation-delay:.96s;
          animation-direction: reverse;
          animation-duration:12.8s;
        }
      }

      &.kv14 {
        z-index: 1;
        inset:27% 66% 0% 0%;
        @media (width <= 767px) {
          inset:12% 55% 0% 0%;
        }
        > img {
          animation-name: kv_anim_B;
          animation-delay:1.04s;
        }
      }

      &.kv15 {
        inset:76% 61% 0% 0%;
        z-index: 1;
        @media (width <= 767px) {
          inset:82% 81% 0% 0%;
        }
        > img {
          animation-name: kv_anim_C;
          animation-delay:1.12s;
          animation-direction: reverse;
          animation-duration:14.4s;
        }
      }

      &.kv16 {
        inset:48% 88% 0% 0%;
        z-index: 1;
        @media (width <= 767px) {
          inset:40% 75% 0% 0%;
        }
        > img {
          animation-name: kv_anim_D;
          animation-delay:1.2s;
          animation-duration:11.2s;
        }
      }
    }
  }
}

.l-topics {
  overflow:clip;
  padding-top:6.4rem;

  @media (width <= 767px) {
    /* padding-top:2.0rem; */
  }

  > .inner {
    @media (width > 767px) {
      display:grid;
      brid-template-rows:auto 1fr;
      grid-template-columns:28.4rem 106.8rem;
      grid-template-areas:
        "heading carousel"
        "link carousel"
      ;
      gap:3.2rem 4.8rem;
      margin-left:auto;
      width:calc(50% + 60.0rem);
    }
  }

  .heading {
    display:flex;
    flex-direction: column;
    gap:1.2rem;
    line-height:1;
    @media (width <= 767px) {
      gap:2.0rem;
      margin-bottom:2.4rem;
    }

    > .en {
      font-size:4.8rem;
      letter-spacing: .04em;
      color:var(--cc-heading-B);

      @media (width <= 767px) {
        font-size:8.0rem;
      }
    }
    > .ja {
      display:flex;
      align-items: center;
      gap:.1em;
      font-size:2.4rem;
      @media (width <= 767px) {
        gap:.2em;
        margin-left:2.0rem;
        font-size:1.9rem;
      }
      &::before {
        content:"";
        width:.9em;
        height:1px;
        background-color:currentColor;
        @media (width <= 767px) {
          width:.8em;
        }
      }
    }
  }

  .js-carousel-A {
    grid-area: carousel;
    @media (width > 767px) {
      clip-path:polygon(0 0, 200% 0, 200% 100%, 0 100%);
    }
    @media (width <= 767px) {
      margin-left:2.0rem;
      width:28.0rem;
    }

    &:not(.is-active) {
      @media (width > 767px) {
        .splide__list {
          display:grid;
          grid-template-columns:repeat(3,1fr);
          gap:4.8rem;
        }
      }
    }

    .splide__track {
      overflow:visible;
    }
  }
  .heading {
    grid-area: heading;
  }
  .al {
    grid-area: link;
    @media (width > 767px) {
      margin-top:auto;
      width:18.4rem;
    }
    .l-button-A {
      height:6.0rem;
    }
  }

  .al {
    margin-top:auto;
    @media (width <= 767px) {
      display:flex;
      justify-content: space-between;
      align-items: center;
      margin-top:1.6rem;
    }
  }
  .al_arrow {
    width:11.8rem;
  }
  &:has(.js-carousel-A:not(.is-active)) .al_arrow {
    display:none !important;
  }
  .al > .l-button-A {
    justify-content: space-between;
    padding-inline:1.8rem;
    font-size:1.6rem;

    @media (width > 767px) {
      margin-top:2.8rem;
    }
    @media (width <= 767px) {
      margin-right:0;
      width:15.0rem;
      height:4.8rem;
    }

    &::after {
      content:"";
      width:2.0rem;
      height:2.0rem;
      border-top:1px solid currentColor;
      border-right:1px solid currentColor;
      transform:rotate(45deg);
      @media (width <= 767px) {
        width:1.6rem;
        height:1.6rem;
      }
    }
  }
}

.l-message {
  padding-block:4.8rem 8.4rem;
  position:relative;
  z-index: 1;
  @media (width > 767px) {
  }
  @media (width <= 767px) {
    padding-block:4.0rem 6.0rem;
  }

  .c {
    @media (width > 767px) {
      display:grid;
      grid-template-rows:auto 1fr;
      grid-template-columns:1fr 66.0rem auto;
      grid-template-areas:
        ". text img"
        ". text name"
      ;
      gap:3.2rem 3.6rem;
    }
  }
  .c_img {
    @media (width > 767px) {
      grid-area: img;
    }
    @media (width <= 767px) {
      margin-bottom:2.4rem;
    }
  }
  .c_t {
    @media (width > 767px) {
      grid-area: text;
    }
    @media (width <= 767px) {
      margin-bottom:2.4rem;
    }
  }
  .c_t_heading {
    margin-bottom:3.6rem;
    font-size:3.2rem;
    letter-spacing: -.1em;
    color:#000;
    @media (width <= 767px) {
      margin-bottom:2.8rem;
      font-size:2.4rem;
    }
  }
  :is(.c_t_desc,.c_t_dl) + :is(.c_t_desc,.c_t_dl) {
    margin-top:1lh;
  }
  .c_t_desc {
  }
  .c_t_dl {
    @media (width <= 767px) {
      display:grid;
      grid-template-columns: auto 1fr;
      row-gap: .5em;
    }
    > div {
      @media (width > 767px) {
        display:flex;
      }
      @media (width <= 767px) {
        grid-column:1/-1;
        display:grid;
        grid-template-columns: subgrid;
      }
    }
  }
  .c_n {
    @media (width > 767px) {
      grid-area: name;
    }
    @media (width <= 767px) {
    }
  }
  .c_n_position {
  }
  .c_n_name {
    font-size:2.0rem;
    line-height:1.8;
    letter-spacing: .05em;
  }

  .i {
    display:grid;
    gap:2.0rem;
    padding-block:8.0rem;
    overflow:hidden;
    color:#fff;
    font-size:12.0rem;
    line-height: 1;
    white-space: nowrap;
    @media (width <= 767px) {
      gap:1.2rem;
      padding-block:4.0rem;
      font-size:5.2rem;
    }
  }
  .i_r {
    flex-shrink: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    width:fit-content;
    margin-inline:auto;
    gap:2.0rem;
    @media (width <= 767px) {
      gap:.4rem;
    }

    &.-r1 {
      --move:(-12.0rem * var(--tftl));
      transform:translateX(calc(20% + var(--move)));
      @media (width <= 767px) {
      --move:(4.0rem * var(--tftl));
        transform:translateX(calc(-5% + var(--move)));
      }
    }
    &.-r2 {
      --move:(4.0rem * var(--tftl));
      transform:translateX(calc(5% + var(--move)));
      @media (width <= 767px) {
        --move:(-4.0rem * var(--tftl));
        transform:translateX(calc(-5% + var(--move)));
      }
    }
    &.-r3 {
      --move:(16.0rem * var(--tftl));
      transform:translateX(calc(-25% + var(--move)));
      @media (width <= 767px) {
        --move:(8.0rem * var(--tftl));
        transform:translateX(calc(-25% + var(--move)));
      }
    }
    &.-r4 {
      --move:(-4.0rem * var(--tftl));
      transform:translateX(calc(10% + var(--move)));
      @media (width <= 767px) {
        transform:translateX(calc(-2% + var(--move)));
      }
    }
  }
  .i_r > img {
    flex-shrink: 0;
    pointer-events: none;

    &:nth-of-type(odd) {
      animation:deco_anim_A 1.4s infinite;
    }
    &:nth-of-type(even) {
      animation:deco_anim_A 1.4s reverse infinite;
    }
  }

  .b1 {
    @media (width > 767px) {
      padding:6.4rem;
    }
    @media (width <= 767px) {
      padding-block:3.2rem;
    }
  }
  .b1_h {
    margin-bottom:4.0rem;
    @media (width > 767px) {
      display:grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: auto 1fr;
      grid-template-areas:
        "heading subheading"
        "heading desc"
      ;
      gap:1.6rem 4.8rem;
    }
    @media (width <= 767px) {
      margin-bottom:1lh;
    }
  }
  .b1_h_heading {
    color:var(--cc-heading-A);
    font-size:8.0rem;
    line-height:1;
    letter-spacing: 0;
    @media (width > 767px) {
      grid-area: heading;
      margin-block:auto;
      height:fit-content;
    }
    @media (width <= 767px) {
      margin-bottom:2.8rem;
      font-size:5.6rem;
      text-align: center;
    }
  }
  .b1_h_subheading {
    font-size:2.2rem;
    line-height:1.4;
    letter-spacing: .05em;
    @media (width > 767px) {
      grid-area: subheading;
    }
    @media (width <= 767px) {
      margin-bottom:1.6rem;
      font-size:1.6rem;
    }
  }
  .b1_h_desc {
    @media (width > 767px) {
      grid-area: desc;
    }
  }
  .b1_desc {
    & + .b1_desc {
      margin-top:1lh;
    }
  }

  .b2 {
    display:grid;
    margin-top:8.0rem;
    @media (width > 767px) {
      grid-template-columns: 1fr 1fr;
      gap:2.0rem 6.0rem;
    }
    @media (width <= 767px) {
      gap:2.0rem;
      margin-top:4.0rem;
    }
  }
  .b2_heading {
    color:var(--cc-heading-A);
    font-size:2.2rem;
    letter-spacing: .05em;
    line-height:1.8;
    text-align: center;
    @media (width > 767px) {
      grid-column:1/-1;
    }
    @media (width <= 767px) {
      font-size:2.0rem;
    }
  }
  .b2_b {
    @media (width > 767px) {
      padding:3.2rem 4.0rem;
    }
    @media (width <= 767px) {
      padding-block:3.2rem;
    }
  }
  .b2_b_heading {
    margin-bottom:2.0rem;
    font-size:4.8rem;
    line-height:1;
    letter-spacing: 0;
    color:var(--cc-heading-A);
    @media (width <= 767px) {
      margin-bottom:2.8rem;
      text-align: center;
    }
  }
  .b2_b_list {
    @media (width > 767px) {
      margin-right:-4.0rem;
    }
    > li {
      display:flex;
      &::before {
        flex-shrink: 0;
        content:"・";
      }
      @media (width <= 767px) {
        line-height:1.5;
      }
      & + li {
        @media (width <= 767px) {
          margin-top:.5em;
        }
      }
    }
  }
}


/* Research
============================================================================= */
.l-research {
  padding-block:4.0rem 10.0rem;
  @media (width > 767px) {}

  @media (width <= 767px) {
    padding-block:2.8rem 4.0rem;
  }

  .t {
    @media (width > 767px) {
      padding:3.2rem 4.0rem 4.4rem;
    }
    @media (width <= 767px) {
      padding-block:3.2rem;
    }
  }
  .t_heading {
    margin-bottom:2.0rem;
    font-size:4.8rem;
    line-height:1;
    letter-spacing: 0;
    color:var(--cc-heading-A);
    @media (width <= 767px) {
      margin-bottom:2.8rem;
      text-align: center;
    }
  }
  .t_desc {
    margin-bottom:2.4rem;
    @media (width <= 767px) {
      margin-bottom:1lh;
    }
  }
  .t_list {
    display:grid;
    @media (width > 767px) {
      grid-template-columns: repeat(2,1fr);
      grid-template-rows:repeat(var(--pc-row),auto);
      grid-auto-flow: column;
      gap:1.0rem;
    }
    @media (width <= 767px) {
      font-size:1.3rem;
      gap:.8rem;
    }
    > li {
      display:flex;
      gap:1.0rem;
      @media (width <= 767px) {
        gap:.6rem;
      }
      &::before {
        content:"";
        margin-top:calc(.5lh - .5em - 1px);
        border-radius:50%;
        width:1em;
        height:1em;
        flex-shrink: 0;
        background-color:var(--cc-treat-B);
      }
    }
  }

  .n {
    display:grid;
    margin-top:3.2rem;
    @media (width > 767px) {
      grid-template-columns: 1fr 1fr;
      gap:4.0rem;
    }
    @media (width <= 767px) {
      gap:2.0rem;
    }
  }
  .n_b {
    @media (width > 767px) {
      padding:3.2rem 4.0rem;
    }
    @media (width <= 767px) {
      padding-block:3.2rem;
    }
  }
  .n_b_h {
    display:grid;
    margin-bottom:2.4rem;
    @media (width > 767px) {
      grid-template-columns: auto 1fr auto;
      align-items: center;
    }
    @media (width <= 767px) {
      grid-template-rows:auto auto;
      grid-template-columns: auto 1fr;
      grid-template-areas:
        "number tag"
        "number heading"
      ;
      gap:.2rem 1.2rem;
      margin-bottom:1.6rem;
    }
  }
  .n_b_h_number {
    color:var(--cc-treat-B);
    font-size:4.8rem;
    line-height:1;
    @media (width > 767px) {
      margin-right:2.0rem;
    }
    @media (width <= 767px) {
      grid-area: number;
      font-size:5.6rem;
      line-height:.8;
    }
  }
  .n_b_h_heading {
    font-size:2.2rem;
    line-height:1.4;
    @media (width <= 767px) {
      font-size:2.0rem;
    }
    @media (width <= 767px) {
      grid-area: heading;
      font-size:1.8rem;
    }
  }
  .n_b_h_tag {
    padding:.4rem .8rem;
    border-radius:1.0rem;
    background-color:var(--cc-treat-B);
    color:#fff;
    @media (width <= 767px) {
      grid-area: tag;
      width:fit-content;
      padding:.2rem .8rem .3rem;
      font-size:1.2rem;
    }
  }

  .a {
    margin-top:3.6rem;
    @media (width > 767px) {
      margin-top:7.2rem;
    }
  }
  .a_heading {
    margin-bottom:2.4rem;
    font-size:2.2rem;
    text-align: center;
    color:var(--cc-treat-A);
    @media (width <= 767px) {
      font-size:2.0rem;
      line-height: 1.4;
    }
  }
  .a_d {
    display:grid;
    @media (width > 767px) {
      grid-template-columns: repeat(2,1fr);
      gap:1.6rem 2.0rem;
    }
    @media (width <= 767px) {
      gap:1.6rem;
    }

    > div {
      box-sizing: content-box;
      position:relative;
      @media (width > 767px) {
        padding:2.4rem 2.4rem 3.2rem 16.0rem;
        min-height:12.0rem;
      }
      @media (width <= 767px) {
        padding-block:2.4rem;
        padding-inline:11.2rem 2.4rem;
        min-height:7.2rem;
      }
    }
    dt {
      margin-bottom:.8rem;
      color:var(--cc-heading-A);
      @media (width <= 767px) {
        display:grid;
        line-height:1.375;
      }
      > img {
        display:block;
        width:12.0rem;
        height:auto;
        aspect-ratio: 1/1;
        object-fit: cover;
        position:absolute;
        top:2.4rem;
        left:2.4rem;
        border-radius:50%;
        @media (width <= 767px) {
          width:7.2rem;
        }
      }
      > span {
        font-size:2.0rem;
        @media (width <= 767px) {
          font-size:1.8rem;
        }
      }
      > small {
        font-size:inherit;
        @media (width > 767px) {
          &::before {
            content:"（";
          }
          &::after {
            content:"）";
          }
        }
        @media (width <= 767px) {
          font-size:1.6rem;
          &::before {
            content:"(";
          }
          &::after {
            content:")";
          }
        }
      }
    }
    dd {
      @media (width <= 767px) {
        font-size:1.3rem;
      }
    }
  }
}


/* Project
============================================================================= */

body.is-project-inview .g-header {
  /* transform:translateY(-100%); */
}
.l-project {
  padding-top:10.0rem;
  @media (width > 767px) {}

  @media (width <= 767px) {
    padding-top:2.8rem;
  }

  .i {
    display:grid;
    @media (width > 767px) {
      grid-template-columns:1fr 60.0rem 50%;
      grid-template-areas:". text map";
    }
    @media (width <= 767px) {
    }
  }
  .i_t {
    @media (width > 767px) {
      grid-area: text;
    }
    @media (width <= 767px) {
    }
  }
  .i_t_heading {
    margin-bottom:6.4rem;
    font-size:4.0rem;
    line-height:1;
    letter-spacing: 0;
    @media (width <= 767px) {
      margin-right:-2.0rem;
      margin-bottom:4.0rem;
      font-size:2.6rem;
    }
  }
  .i_t_subheading {
    margin-bottom:2.4rem;
    font-size:2.2rem;
    line-height:1.4;
    @media (width > 767px) {
      grid-area: text;
    }
    @media (width <= 767px) {
      margin-bottom:1.6rem;
      font-size:2.0rem;
    }
  }
  .i_t_desc {
    @media (width > 767px) {
      grid-area: text;
      padding-right:4.0rem;
    }
  }
  .i_map {
    position:relative;
    @media (width > 767px) {
      grid-area: map;
      margin-top:-8.8rem;
    }
    @media (width <= 767px) {
    }
    img {
      pointer-events: none;
    }
    .anchor {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:auto;
      border-radius:50%;
      border:1px solid var(--cc-treat-A);
      aspect-ratio: 1/1;
      width:calc(73.2 / 720 * 100%);
      height:auto;
      font-size:3.2rem;
      line-height: 1;
      color:var(--cc-treat-A);
      background-color:#fff;
      position:absolute;
      transition-property: color,background-color;
      transition-duration: var(--duration-hover-A);
      @media (hover:hover) {
        &:hover {
          color:#fff;
          background-color:var(--cc-treat-A);
        }
      }
      @media (width <= 767px) {
        font-size:2.0rem;
      }

      &[href="#Project_01"] {
        inset:53.6% 58.5% 0% 0%;
      }
      &[href="#Project_02"] {
        inset:9.8% 60.6% 0% 0%;
      }
      &[href="#Project_03"] {
        inset:0% 17% 43.7% 0%;
      }
      &[href="#Project_04"] {
        inset:18.4% 0% 0% 15.4%;
      }
      &[href="#Project_05"] {
        inset:8.2% 0% 0% 60.2%;
      }
      &[href="#Project_06"] {
        inset:0% 0% 25.5% 30.6%;
      }
    }
  }

  .n {
    height:12.0rem;
    position:sticky;
    bottom:env(safe-area-inset-bottom);
    z-index: 1000;
    transition-property:transform;
    transition-duration: var(--duration-hover-A);
    @media (width > 767px) {
      margin-top:-4.8rem;
    }
    @media (width <= 767px) {
      height:9.2rem;
      margin-top:-3.0rem;
    }
  }
  .n_l {
    display:flex;
    height:100%;
    @media (width <= 767px) {
    }
  }
  .n_l_i {
    flex:1;
    height:100%;
    color:var(--cc-treat-A);
    transition-property: color;
    transition-duration: var(--duration-hover-A);
    @media (width > 767px) {
    }
    @media (width <= 767px) {
      flex-shrink: 0;
    }
    > a {
      display:flex;
      justify-content: center;
      align-items: center;
      gap:1.0rem;
      height:100%;
      @media (width <= 767px) {
        flex-direction: column;
        gap:.4rem;
        text-align: center;
      }
    }
    .m-abs_bg {
      img {
      }
    }
    &.is-current {
      pointer-events:none;
      color:#fff;
      .n_l_i_off {
        opacity:0;
      }
      .n_l_i_on {
        opacity:1;
      }
    }
    @media (hover:hover) {
      &:has(> a:hover) {
        color:#fff;
        .n_l_i_on {
          opacity:1;
        }
      }
    }
  }
  .n_l_i_number {
    font-size:6.4rem;
    line-height:1;
    @media (width <= 767px) {
      font-size:4.0rem;
    }
  }
  .n_l_i_name {
    margin-top:.25em;
    font-size:2.0rem;
    letter-spacing: 0;
    @media (width <= 767px) {
      font-size:1.0rem;
      line-height:1.2;
    }
  }
  :is(.n_l_i_off,.n_l_i_on) {
    top:0;
    position:absolute;
    transition-property: opacity;
    transition-duration: var(--duration-hover-A);
  }
  .n_l_i_on {
    opacity:0;
  }

  .c {
    @media (width > 767px) {
      /* margin-top:-3.0rem; */
    }
    @media (width <= 767px) {
    }
  }
  .c_b {
    &:last-of-type {
      margin-bottom:6.0rem;
      @media (width <= 767px) {
        margin-bottom:4.8rem;
      }
    }
    &#Project_01 .c_b_t_d_deco {
      top:5.2rem;
      @media (width > 767px) {
        left:100.0rem;
      }
      @media (width <= 767px) {
        top:-1.6rem;
        right:0;
      }
    }
    &#Project_02 .c_b_t_d_deco {
      top:2.0rem;
      @media (width > 767px) {
        left:96.0rem;
      }
      @media (width <= 767px) {
        top:0;
        right:-.8rem;
      }
    }
    &#Project_03 .c_b_t_d_deco {
      top:5.2rem;
      @media (width > 767px) {
        left:100.0rem;
      }
      @media (width <= 767px) {
        top:1.6rem;
        right:-.8rem;
      }
    }
    &#Project_04 .c_b_t_d_deco {
      top:10.0rem;
      @media (width > 767px) {
        left:112.0rem;
      }
      @media (width <= 767px) {
        top:1.6rem;
        right:-.4rem;
      }
    }
  }
  .c_b_kv {
    @media (width > 767px) {
      height:64.8rem;
    }
    pointer-events: none;
  }
  .c_b_t {
    position:relative;
    padding-bottom:8.0rem;
    position:relative;
    z-index: 1;
    @media (width <= 767px) {
      padding-bottom:4.0rem;
    }
  }
  .c_b_t_n {
    display:flex;
    align-items: baseline;
    gap:3.2rem;
    margin-bottom:5.2rem;
    @media (width <= 767px) {
      gap:1.2rem;
      margin-bottom:2.8rem;
    }
  }
  .c_b_t_n_number {
    margin-top:-.55lh;
    font-size:12.8rem;
    line-height:1;
    color:transparent;
    background-image:linear-gradient(
      to bottom,
      #fff .55lh,
      #ddd .55lh
    );
    -webkit-background-clip: text;
    background-clip: text;
    @media (width <= 767px) {
      font-size:8.0rem;
      margin-top:-.5lh;
      color:transparent;
      background-image:linear-gradient(
        to bottom,
        #fff .5lh,
        #ddd .5lh
      );
    }
  }
  .c_b_t_n_area {
    font-size:2.0rem;
    color:var(--cc-heading-A);
    @media (width <= 767px) {
      font-size:1.6rem;
    }
  }
  .c_b_t_heading {
    margin-bottom:3.2rem;
    font-size:4.4rem;
    @media (width <= 767px) {
      margin-bottom:2.4rem;
      font-size:2.2rem;
    }
  }
  :is(.c_b_t_desc,.c_b_t_ol,.c_b_t_notes) {
    @media (width > 767px) {
      margin-inline:4.0rem 7.0rem;
    }
  }
  .c_b_t_desc {
    & + .c_b_t_desc {
      margin-top:1lh;
    }
  }
  .c_b_t_ol {
    display:grid;
    gap:1.6rem;
    margin-top:5.6rem;
    @media (width <= 767px) {
      gap:1.2rem;
      margin-top:2.8rem;
    }

    > li {
      display:flex;
      align-items: flex-start;
      gap:.8rem;
      > span {
        &:nth-child(1) {
          flex-shrink: 0;
          display:flex;
          justify-content: center;
          align-items: center;
          border-radius:50%;
          width:3.2rem;
          height:3.2rem;
          font-size:2.0rem;
          color:#fff;
          background-color:var(--cc-treat-B);
          @media (width <= 767px) {
            width:2.8rem;
            height:2.8rem;
            font-size:1.6rem;
          }
        }
        &:nth-child(2) {
          margin-top:calc(1.6rem - .5lh - 1px);
          @media (width <= 767px) {
            margin-top:calc(1.4rem - .5lh - 1px);
          }
        }
      }
    }
  }
  .c_b_t_notes {
    margin-top:3.6rem;
    @media (width <= 767px) {
      margin-top:2.4rem;
    }
  }
  .c_b_t_d {
    position:absolute;
    inset:0;
    z-index: -1;
    pointer-events: none;
    overflow:hidden;
  }
  .c_b_t_d_deco {
    margin-inline:auto;
    position:absolute;
    animation:deco_anim_A 1.4s infinite;
    @media (width > 767px) {
      inset-inline:0;
    }
  }
}


.l-regenerative {
  padding-block:17.6rem 9.6rem;
  position:relative;
  @media (width <= 767px) {
    padding-block:9.6rem 7.8rem;
  }

  .l-section_header-A {
    > .en {
      color:#fff;
    }
  }

  > .deco {
    width:100%;
    position:absolute;
    top:6.8rem;
    left:0;
    z-index: -1;
    pointer-events: none;
    @media (width <= 767px) {
      top:4.6rem;
    }
  }

  .heading {
    margin-bottom:9.2rem;
    font-size:4.4rem;
    line-height:1;
    @media (width <= 767px) {
      display:flex;
      flex-direction: column;
      gap:.5em;
      margin-bottom:3.2rem;
      font-size:2.8rem;
    }
  }

  > .m-abs_bg {
    mask-image:linear-gradient(to top, #fff 0%, transparent 100%);
  }

  .a {
    display:grid;
    padding:7.0rem;

    @media (width > 767px) {
      grid-template-columns: 48.0rem 1fr;
      grid-template-areas:
        "img text"
      ;
      gap:5.0rem;

      &.-pc_reverse {
        grid-template-columns: 1fr 49.8rem;
        grid-template-areas:
          "text img"
        ;
      }
    }
    @media (width <= 767px) {
      padding:2.0rem;
    }

    & + .a {
      @media (width > 767px) {
        margin-top:4.0rem;
      }
      @media (width <= 767px) {
        padding-top:2.4rem;
      }
    }
  }
  .a_t {
    @media (width > 767px) {
      grid-area:text;
    }
    @media (width <= 767px) {
    }
  }
  .a_t_place {
    margin-bottom:1.6rem;
    color:var(--cc-heading-A);
    font-size:2.0rem;
    line-height:1.8;
    letter-spacing: .05em;
    @media (width <= 767px) {
      font-size:1.6rem;
      line-height:1.5;
    }
  }
  .a_t_heading {
    margin-bottom:2.4rem;
    display:grid;
    gap:.5em;
    font-size:3.2rem;
    @media (width <= 767px) {
      font-size:2.1rem;
    }
  }
  .a_t_n {
    display:grid;
    grid-template-rows:1fr auto auto 1fr;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "img ."
      "img name"
      "img position"
      "img ."
    ;
    column-gap:1.6rem;
    margin-bottom:2.4rem;
    color:var(--cc-heading-A);
  }
  .a_t_n > img {
    grid-area: img;
    border-radius:50%;
  }
  .a_t_n_name {
    grid-area: name;
    font-size:2.0rem;
    line-height:1.4;
    letter-spacing: .05em;
    @media (width <= 767px) {
      font-size:1.4rem;
    }
  }
  .a_t_n_position {
    grid-area: position;
    font-size:1.6rem;
    line-height:1.4;
    letter-spacing: .05em;
    @media (width <= 767px) {
      font-size:1.2rem;
    }
  }
  .a_t_link {
    margin-top:1.6rem;
    color:var(--cc-heading-A);
    font-size:1.4rem;
    line-height:1.8;
    letter-spacing: 0;

    > a {
      text-decoration:underline;
      word-break:break-all;
      @media (hover:hover) {
        &:hover {
          text-decoration:none;
        }
      }
    }
  }
  .a_img {
    @media (width > 767px) {
      grid-area:img;
    }
    @media (width <= 767px) {
      margin-top:1.6rem;
    }
  }
}


.l-engagement {
  padding-block:8.0rem;
  position:relative;
  z-index: 1;
  @media (width > 767px) {}

  @media (width <= 767px) {
    padding-block:2.8rem 4.0rem;
  }

  .l-section_header-A {
    .en {
      @media (width <= 767px) {
        font-size: 7.7rem;
      }
    }
  }

  .c {
    display:grid;
    @media (width > 767px) {
      grid-template-columns: repeat(3,1fr);
      gap:3.2rem 3.0rem;
    }
    @media (width <= 767px) {
      gap:2.4rem;
      margin-top:3.6rem;
    }
  }
  .c_i {
    display:grid;
    @media (width > 767px) {
      align-content: flex-start;
      /* gap:2.4rem; */
      gap:1.6rem;
    }
    @media (width <= 767px) {
      display:grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: 12.0rem 1fr;
      grid-template-areas:
        "img heading"
        "desc desc"
      ;
      align-items: center;
      gap:1.2rem 1.6rem;
    }
  }
  .c_i_img {
    @media (width <= 767px) {
      grid-area: img;
    }
  }
  .c_i_heading {
    margin-block:calc(.5em - .5lh);
    font-size:1.8rem;
    color:var(--cc-heading-A);
    @media (width > 767px) {
      display:flex;
      align-items: center;
      min-height:2lh;
    }
    @media (width <= 767px) {
      grid-area: heading;
    }
  }
  .c_i_desc {
    @media (width > 767px) {
      font-size:1.5rem;
    }
    @media (width <= 767px) {
      grid-area: desc;
    }
  }
  .c_d {
    position:absolute;
    z-index: -1;
    pointer-events: none;
    inset:0;
  }
  .c_d_deco {
    animation:deco_anim_A 1.4s infinite;
    position:sticky;
    top:calc(100lvh - 57.4rem);
    @media (width > 767px) {
      margin-inline:auto;
      box-sizing: content-box;
      padding-left:90.0rem;
      margin-bottom:11.4rem;
    }
    @media (width <= 767px) {
      margin-inline:auto 1.0rem;
      margin-bottom:2.0rem;
      top:calc(100lvh - 22.0rem);
    }
  }
  .m-abs_bg {
    z-index: -2;
    @media (width > 767px) {
    }
  }
}


.l-organization {
  padding-block:8.0rem 12.0rem;
  @media (width > 767px) {}

  @media (width <= 767px) {
    padding-block:2.8rem 6.0rem;
  }

  .l-section_header-A {
    @media (width <= 767px) {
      margin-bottom:3.6rem;
    }
    .en {
      color:#E2DED8;
      @media (width <= 767px) {
        font-size:7.5rem;
      }
    }
  }

  .c {
    @media (width > 767px) {
      padding:6.4rem 7.0rem 6.8rem;
    }
    @media (width <= 767px) {
      padding-block:3.2rem 4.0rem;
    }
    & + .c {
      margin-top:6.4rem;
      @media (width <= 767px) {
        margin-top:3.2rem;
      }
    }
  }
  .c_heading {
    font-size:2.4rem;
    letter-spacing: .05em;
    color:var(--cc-heading-A);
    text-align: center;
    @media (width <= 767px) {
      font-size:1.8rem;
    }
  }
  .c_hr {
    margin-block:1.2rem 2.4rem;
    height:3px;
  }
  .c1_b {
    display:grid;
    @media (width > 767px) {
      align-items: center;
      grid-template-columns:50.0rem 1fr;
      gap:4.0rem;
      padding-inline:3.0rem;
      width:fit-content;
    }
    @media (width <= 767px) {
    }
  }
  .c1_b_f {
    --w:500;
    --h:316;
    --h_gap:60fr;
    --v_gap:56fr;
    display:grid;
    grid-template-columns:140fr 80fr var(--h_gap) 80fr 140fr;
    grid-template-rows:130fr var(--v_gap) 130fr;
    grid-template-areas:
      "r1 r1 . r2 r2"
      ". . . . ."
      ". r3 r3 r3 ."
    ;
    height:calc(var(--h) * .1rem);
    position:relative;
    z-index: 1;
    @media (width <= 767px) {
      --h:240;
      --h_gap:40fr;
      --v_gap:32fr;
    }
  }
  .c1_b_f_r {
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border:1px solid var(--cc-treat-A);
    position:relative;
    &.-r1 {
      grid-area: r1;
      @media (width > 767px) {
      }
    }
    &.-r2 {
      grid-area: r2;
      @media (width > 767px) {
      }
    }
    &.-r3 {
      grid-area: r3;
      @media (width > 767px) {
      }
    }
  }
  .c1_b_f_r_logo {
  }
  .c1_b_f_line {
    background-color:var(--cc-treat-A);
    &.-l1 {
      grid-row:1/2;
      grid-column:3/4;
      height:1px;
      margin-block:auto;
      position:relative;
      z-index: -1;
    }
    &:is(.-l2,.-l3) {
      grid-row:2/3;
      width:1px;
      transform:rotate(var(--deg)) scaleY(calc(1 / cos(var(--deg))));
    }
    &.-l2 {
      --deg:-45deg;
      margin-left:10%;
      grid-column:2/3;
    }
    &.-l3 {
      --deg:45deg;
      margin-inline:auto 10%;
      grid-column:4/5;
    }
  }
  .c1_b_f_r_name {
    > span {
      @media (width > 767px) {
      }
      @media (width <= 767px) {
        font-size:1.3rem;
      }
    }
  }
  .c1_b_t {
    @media (width > 767px) {
    }
    @media (width <= 767px) {
      margin-top:2.0rem;
    }
  }
  .c1_b_t_desc {
    & + .c1_b_t_desc {
      margin-top:1lh;
    }
  }
  .c2_desc > a {
    text-decoration: underline;
    @media (hover:hover) {
      &:hover {
        text-decoration: none;
      }
    }
  }
  .l-button-A {
    margin-top:4.8rem;
    @media (width <= 767px) {
      margin-top:2.4rem;
    }
  }

}

.l-contact {
  padding-block:8.0rem 8.8rem;
  @media (width > 767px) {}

  @media (width <= 767px) {
    padding-block:2.8rem 6.0rem;
  }

  .l-button-A {
    margin-top:4.0rem;
    @media (width <= 767px) {
      margin-top:2.8rem;
    }
  }

}

.l-privacy {
  padding-bottom:12.0rem;
  @media (width > 767px) {}

  @media (width <= 767px) {
    padding-bottom:8.0rem;
  }

  .inner {
    @media (width > 767px) {
      padding:6.4rem 6.8rem;
    }
    @media (width <= 767px) {
      padding-block:3.2rem;
    }
  }

  .heading {
    margin-bottom:1.6rem;
    font-size:2.2rem;
    font-weight:700;
    line-height:1.4;
    letter-spacing: .05em;
    @media (width <= 767px) {
      font-size:1.8rem;
    }
  }

  .desc {
    margin-bottom:1lh;
  }

  .b {
    padding-left:1em;
    & + .b {
      margin-top:1lh;
    }
  }
  .b_heading {
    position:relative;
    > span {
      position:absolute;
      right:100%;
    }
  }
  .b_list {
    > li {
      display:flex;
      &::before {
        content:"・";
        flex-shrink: 0;
      }
    }
  }

}

/* 404
============================================================================= */
.l-notfound {
  padding-block:8.0rem 12.0rem;
  @media (width <= 767px) {
    padding-block:2.8rem 6.0rem;
  }
  .l-button-A {
    margin-top:4.0rem;
  }
}


/* Sample
============================================================================= */
.l-selectorName {
  @media (width > 767px) {}

  @media (width <= 767px) {}
}



/* KV Animations
============================================================================= */
@keyframes kv_anim_A {
  0%,18% {
    transform:translate(0,0) rotate(0deg);
  }
  30% {
    transform:translate(4px,-2px) rotate(4deg);
  }
  58% {
    transform:translate(-4px,2px) rotate(-3.0deg);
  }
  100% {
    transform:translate(0,0) rotate(0deg);
  }
}
@keyframes kv_anim_B {
  0%,15% {
    transform:translate(0,0) rotate(0deg);
  }
  28% {
    transform:translate(-4px,2px) rotate(-4deg);
  }
  52% {
    transform:translate(6px,-2px) rotate(6deg);
  }
  82% {
    transform:translate(-4px,-8px) rotate(-4deg);
  }
  100% {
    transform:translate(0,0) rotate(0deg);
  }
}
@keyframes kv_anim_C {
  0%,20% {
    transform:translate(0,0) rotate(0deg);
  }
  35% {
    transform:translate(2px,4px) rotate(3deg);
  }
  60% {
    transform:translate(-6px,0) rotate(-5deg);
  }
  88% {
    transform:translate(4px,-4px) rotate(4deg);
  }
  100% {
    transform:translate(0,0) rotate(0deg);
  }
}
@keyframes kv_anim_D {
  0%,22% {
    transform:translate(0,0) rotate(0deg);
  }
  40% {
    transform:translate(-4px,-8px) rotate(-4deg);
  }
  68% {
    transform:translate(4px,6px) rotate(4deg);
  }
  90% {
    transform:translate(-4px,2px) rotate(-4deg);
  }
  100% {
    transform:translate(0,0) rotate(0deg);
  }
}


@keyframes deco_anim_A {
  0% {
    transform:rotate(0deg);
  }
  25% {
    transform:rotate(0deg);
  }
  26% {
    transform:rotate(4deg);
  }
  50% {
    transform:rotate(4deg);
  }
  51% {
    transform:rotate(0deg);
  }
  75% {
    transform:rotate(0);
  }
  76% {
    transform:rotate(4deg);
  }
  100% {
    transform:rotate(4deg);
  }
}


/* カテゴリリスト
============================================================================= */
.l-archive_categories {
  margin-bottom:4.8rem;
  display:grid;
  grid-template-columns: repeat(8,1fr);

  @media (width > 767px) {
    gap:2.4rem;
  }
  @media (width <= 767px) {
    grid-template-columns: repeat(3,1fr);
    gap:1.6rem;
  }
  .item {
    @media (width > 767px) {
    }
    .l-button-A {
      width:100%;
      color: #4F4F4F;
      background-color:#fff;
      border:1px solid #4f4f4f;
      transition-property: color,background-color;
      transition-duration: var(--duration-hover-A);
      font-size:1.2rem;
      height:4.0rem;

      @media (hover:hover) {
        &:hover {
          background-color: #4f4f4f;
          color:#fff;
        }
      }


      &.-current {
        background-color: #4f4f4f;
        color:#fff;
      }
    }
  }
}

.l-lowerpage_container {
  padding-bottom:12.0rem;

  @media (width <= 767px) {
    padding-bottom:7.2rem;
  }
}

/* ニュースリスト
============================================================================= */
.l-topics_list {
  display: grid;

  @media (width > 767px) {
    grid-template-columns: repeat(3,1fr);
    gap:4.0rem;
  }
  @media (width <= 767px) {
    gap:4.0rem;
  }
}


/* ニュースアイテム
============================================================================= */
.l-topics_item {

  > a {
    display:block;
  }
  > a > img {
    object-fit: cover;
    aspect-ratio: 324/178;
  }
  .cd {
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-block:1.6rem;
  }
  .cd_category {
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius:1.0rem;
    font-size:1.2rem;
    text-align: center;
    color:#fff;
    background-color:var(--cc-treat-B);
    min-width:11.8rem;
    height:3.2rem;
  }
  .cd_date {
    font-size:1.4rem;
  }
  .title {
    font-weight:700;
  }
}



/* Archive Pager
============================================================================= */
.l-archive_pager {
	margin-top:8.0rem;
	display:flex;
	justify-content: center;

  @media (width <= 767px) {
    margin-top:4.0rem;
  }

	.wp-pagenavi {
		display:flex;
		justify-content: center;
		align-items: center;
		gap:2.4rem;
		font-size:1.8rem;
		line-height:1;
		letter-spacing: 0;
		position:relative;

    padding-inline:8.4rem;

		@media (width <= 767px) {
			font-size:2.0rem;
			gap:2.2rem;
      padding-inline:7.2rem;
		}
	}

	a,.wp-pagenavi > span {
		display:flex;
		justify-content: center;
		align-items: center;
		text-align:center;
		text-decoration: none;

		&:not(.extend) {
			width:6.0rem;
			height:auto;
			aspect-ratio: 1/1;

			@media (width <= 767px) {
				width:4.8rem;
			}
		}
		&:not(.extend,.previouspostslink,.nextpostslink) {
      background-image:url(/assets/img/common/archive-num-bg.webp);
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
			@media (hover:hover) {
				transition-property: color, background-image;
				transition-duration: var(--duration-hover-A);
        &:hover {
          background-image:url(/assets/img/common/archive-num-bg-hover.webp);
          color:#fff;
        }
			}
		}
		&:is(.pages) {
			display: none;
		}
		&:is(.current) {
      background-image:url(/assets/img/common/archive-num-bg-hover.webp);
      color:#fff;
		}
		&:is(.extend) {
			width:12px;
			background-image:radial-gradient(circle at center, var(--cc-blue-A) 0%, var(--cc-blue-A) 50%, transparent 50%, transparent 100%);
			background-size: 4px 4px;
			background-position: center;
			background-repeat: repeat-x;
      @media (width > 767px) {
        margin-inline:calc(1.5rem - 6px);
      }
		}
		&:is(.previouspostslink,.nextpostslink) {
			display:flex;
			justify-content: center;
			align-items: center;
      background-image:url(/assets/img/common/archive-arrow-bg.webp);
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
      transition-property: opacity;
      transition-duration: var(--duration-hover-A);
      position:absolute;

      @media (hover:hover) {
        &:hover {
          opacity: .7;
        }
      }

			&::after {
				content:"";
				display:block;
        border-top:1px solid #fff;
        border-right:1px solid #fff;
        margin-left:-1.2rem;
				width:2.0rem;
				height:auto;
				aspect-ratio:1/1;
        transform:rotate(45deg);
        @media (width <= 767px) {
          margin-left:-1.2rem;
          width:1.6rem;
        }
			}
		}
		&:is(.previouspostslink) {
      order:-1;
			transform:scaleX(-1);
      left:0;
		}
		&:is(.nextpostslink) {
      right:0;
		}
	}
}


/* 詳細ページ日付・カテゴリ
============================================================================= */
.l-single-date_cat {
  display:flex;
  align-items: center;
  gap:4.0rem;
  color:var(--cc-blue-A);
  line-height:1;
  margin-bottom:2.0rem;
  @media (width <= 767px) {
    flex-wrap:wrap;
    align-items: center;
    margin-bottom:2.0rem;
    row-gap:2.4rem;
  }

  .date {
    flex-shrink: 0;
    font-size:2.0rem;
  }
  .cat_list {
    display:flex;
    flex-wrap:wrap;
    gap:1.0rem;
    @media (width > 767px) {
      font-size:1.4rem;
    }
    @media (width <= 767px) {
    }
  }
  .cat {
    > a {
      display:flex;
      justify-content: center;
      align-items: center;
      border-radius:1.0rem;
      padding-inline:.8rem;
      font-size:1.2rem;
      text-align: center;
      color:#fff;
      background-color:var(--cc-treat-B);
      min-width:11.8rem;
      height:3.2rem;
    }
  }
}


/* 詳細ページ記事タイトル
============================================================================= */
.l-single_title {
  margin-bottom:6.4rem;
  font-weight:700;
  font-size:3.2rem;
  line-height:1.6;
  position:relative;

  @media (width <= 767px) {
    margin-bottom:3.2rem;
    font-size:2.4rem;
  }
}

.l-single_eyecatch {
  margin-bottom:1.6rem;
  @media (width <= 767px) {
    margin-bottom:2.4rem;
  }
  img {
    width:100%;
  }
}

/* Single Pager
============================================================================= */
.l-single_pager {
  display:grid;
  grid-template-columns:repeat(3, 23.4rem);
  grid-template-rows:6.0rem;
  gap:12.0rem;
  justify-content: center;
  margin-top:8.0rem;

	@media (width <= 767px) {
    display:flex;
    flex-direction:column;
    gap:1.6rem;
    width:23.4rem;
    margin-inline:auto;
    margin-top:5.2rem;
	}

  .l-button-A {
    width:100%;
    height:100%;
    font-size:1.6rem;
    @media (width <= 767px) {
      height:4.0rem;
    }
    &::after {
      content:"";
      width:1.8rem;
      height:1.8rem;
      transform:rotate(45deg);
      position:absolute;
      @media (width <= 767px) {
        width:1.6rem;
        height:1.6rem;
      }
    }
    &.-list::after,
    &.-prev::after {
      border-bottom:1px solid currentColor;
      border-left:1px solid currentColor;
      left:2.4rem;
    }
    &.-next::after {
      border-top:1px solid currentColor;
      border-right:1px solid currentColor;
      right:2.4rem;
    }
    &.-prev {
      grid-column:1 / 2;
    }
    &.-list {
      grid-column:2 / 3;
      color:var(--cc-treat-A);
      transition-property: opacity;
      transition-duration: var(--duration-hover-A);
      @media (hover:hover) {
        &:hover {
          filter:unset !important;
          opacity: .7;
          .m-abs_bg {
            img {
              filter:unset;
            }
          }
        }
      }
    }
    &.-next {
      grid-column:3 / 4;
      &::after {
        right:1.6rem;
      }
    }
  }
}


/* Form
============================================================================= */
.l-form_wrap {
  @media (width > 767px) {
    padding:8.0rem;
    border-radius:1.0rem;
  }
  @media (width <= 767px) {
    padding-block:4.0rem;
  }

  > .desc {
    margin-bottom:2.4rem;
  }
}
.l-form-A {
  --fp-pb: calc(2.4rem - .5lh);

  @media (width <=767px) {
  }

  :where(input:is([type="text"],[type="email"],[type="tel"]), select, textarea) {
    display: block;
    border:1px solid #9A9692;
    border-radius: .5rem;
    padding: var(--fp-pb) 1.6rem;
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    background-color: #FAF9F8;
    transition-property: background-color, box-shadow;
    transition-duration: var(--duration-hover-A);

    @media (width <=767px) {
    }

    &:focus {
      box-shadow: inset 0 0 .5rem var(--cc-blue-A);
    }
    &::placeholder {
      color: #939393;
    }
  }

  textarea {
    --row: 4;
    max-width: 100%;
    min-height: calc((var(--row) * 1lh) + (var(--fp-pb) * 2));

    @supports (field-sizing:content) {
      field-sizing: content;
    }

    @supports not (field-sizing:content) {
      resize: vertical;
      border-bottom-right-radius: 0;
    }

    @media (width <=767px) {
      --row: 4;
    }
  }

  .input-select {
    display: block;
    overflow: hidden;
    position: relative;

    &:has(option[value=""]:checked) {
      color: #939393;

      option:not([disabled]) {
        color: var(--cc-text-A);
        background-color: #fff;
      }
    }

    &:after {
      content: "";
      margin-block: auto;
      background-color: var(--cc-treat-A);
      position: absolute;
      inset-block: 0;
      right: 1.6rem;
      pointer-events: none;
    }

    select {
      cursor: pointer;
    }
  }

  .form {
    display: grid;
    grid-template-columns: 1fr 1fr;

    @media (width > 767px) {
      gap: 2.4rem 4.8rem;
    }

    @media (width <=767px) {
      gap: 2.4rem 1.8rem;
    }
  }

  .form_item {
    &.-required {
      .heading {
        &::after {
          content: "*";
          color: red;
        }
      }
    }

    &.-column_reset {
      grid-column:1 / 2;
    }
    &.-full {
      grid-column: 1/-1;
    }

    .heading {
      font-size:1.6rem;
      margin-bottom: .8rem;
      font-weight:700;
    }
  }


  .privacy_link {
    margin-top:-.8rem;
    font-size:1.2rem;

    >a {
      text-decoration: underline;

      @media (hover:hover) {
        &:hover {
          text-decoration: none;
        }
      }
    }
  }

  .privacy_checkboxes {
    display: flex;
    margin-top: 1.2rem;
    font-size: 1.6rem;
    gap: 2.0rem;

    .wpcf7-list-item {
      margin-left: 0 !important;
    }

    label {
      position: relative;
      padding-left: 3.0rem;
      cursor: pointer;


      &:has(input:checked) {
        .wpcf7-list-item-label::after {
          opacity: 1;
        }
      }

      .wpcf7-list-item-label {

        &::before,
        &::after {
          content: "";
          width: 2.0rem;
          height: 2.0rem;
          position: absolute;
          left: 0;
          top: calc(.5lh - 1.0rem - 1px);
        }

        &::before {
          border:1px solid #9A9692;
          background-color: #FAF9F8;
        }

        &::after {
          background-color: var(--cc-text-A);
          clip-path: polygon(1px 60%, 45% 90%, 100% 5%, 45% 60%);
          opacity: 0;
          transition-property: opacity;
          transition-duration: var(--duration-hover-A);
        }
      }
    }
  }

  .l-button-A {
    margin-top: 7.0rem;

    background-image: url('/assets/img/common/submit_button-bg.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    transition-property: background-image;
    transition-duration: var(--duration-hover-A);
    cursor: pointer;

    @media (hover:hover) {
      &:hover {
        background-image: url('/assets/img/common/submit_button-bg-hover.webp');
      }
    }

    @media (width <=767px) {
      margin-top: 2.4rem;
    }

    .wpcf7-spinner {
      margin-inline:0;
      position: absolute !important;
      right: 1.6rem;
    }

    &:has(input[type="submit"]:disabled) {
      opacity:.5;
      pointer-events: none;
    }
  }
}