@charset "utf-8";
/*** The new CSS reset - version 1.11.3 (last updated 25.8.2024) ***/
/* reset  ---------------------------------------------------------------------*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
a,
button {
  cursor: revert;
}
ol,
ul,
menu,
summary {
  list-style: none;
}
ol {
  counter-reset: revert;
}
img {
  max-width: 100%;
  width: 100%;
  height: auto;
}
table {
  border-collapse: collapse;
}
input,
textarea {
  -webkit-user-select: auto;
}
textarea {
  white-space: revert;
}
meter {
  -webkit-appearance: revert;
  appearance: revert;
}
:where(pre) {
  all: revert;
  box-sizing: border-box;
}
::placeholder {
  color: unset;
}
:where([hidden]) {
  display: none;
}
:where([contenteditable]:not([contenteditable="false"])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}
:where([draggable="true"]) {
  -webkit-user-drag: element;
}
:where(dialog:modal) {
  all: revert;
  box-sizing: border-box;
}
::-webkit-details-marker {
  display: none;
}
/* common ---------------------------------------------------------------------*/

html {
  font-size: 10px;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: calc(10 / 1440 * 100vw);
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: calc(10 / 375 * 100vw);
  }
}

body {
  
  position: relative;
  z-index: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: #000;
  background: #efefef;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Footer Section ----------------------------------------------*/
.l-header {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100vw;
  padding: 3.2rem 0 0;

  .header_inner {
    margin: 0 auto;
    width: 120rem;

    .haeder_logo {
      display: block;
      width: 28.8rem;
    }
  }
  @media screen and (max-width: 768px) {
    padding: 2rem 0 0;

    .header_inner {
      width: 33.5rem;
      .haeder_logo {
        display: block;
        width: 10.7rem;
      }
    }
  }
}
/* Footer Section ----------------------------------------------*/
.l-footer {
  padding: 2.1rem 0;
  background: #e5190e;
  color: #fff;
  font-size: 1.4rem;
  text-align: center;
  @media screen and (max-width: 768px) {
    padding: 1rem 0;
    font-size: 1.13rem;
  }
}

/* その他共通  ------------------------------*/
.sp_on {
  display: none;
}
.sp_on02 {
  display: contents;
}
@media screen and (max-width: 768px) {
  .sp_on {
    display: inline;
  }
  .sp_on02 {
    display: block;
  }
  .sp_off {
    display: none;
  }
}

.en {
  font-family: "Lato", sans-serif;
}
.jp {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
}

/* to_topボタン  ------------------------------*/
/* flag_onが付与された要素を通過した際にボタンが出てくる仕様です。 */
/* .l-float {
  overflow: hidden;
  position: fixed;
  z-index: 99;
  bottom: 30px;
  left: 0;
  width: 100%;
  pointer-events: none;
  .l-float__inner {
    margin: 0 auto;
    width: 86.14%;
  }
  .to_top {
    margin-left: auto;
    width: 52px;
    aspect-ratio: 52 /35;
    display: block;
    cursor: pointer;
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
  }
  &.on {
    .to_top {
      opacity: 1;
      pointer-events: auto;
    }
  }
} */

/* アコーディオン  ------------------------------*/
/* .c-accordion {
  &.open .c-accordion__cont {
    grid-template-rows: 1fr;
  }
  .c-accordion__ttl {
    display: block;
    cursor: pointer;
    &::-webkit-details-marker {
      display: none;
    }
  }
  .c-accordion__cont {
    display: grid;
    transition:
      padding 0.3s,
      grid-template-rows 0.3s;
    grid-template-rows: 0fr;
  }

  .c-accordion__inner {
    overflow: hidden;
  }
} */

/* アニメーション*/
.fadein {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.38, 0.96, 0.65, 0.99);

  &.is-go {
    opacity: 1;
  }
}
.fadein02 {
  opacity: 0;
  transform: translateY(3rem);
  transition:
    transform 0.5s ease-out,
    opacity 0.5s ease-out;

  &.is-go {
    opacity: 1;
    transform: translateY(0);
  }
}

.font_ani {
  .ani_wrapper {
    overflow: hidden;
    display: block;
    span {
      display: inline-block;
      transform: translateY(100%);
      transition: transform 1s cubic-bezier(0.93, 0, 0.61, 0.99);
    }
    &:nth-of-type(2) {
      span {
        transition-delay: 0.2s;
      }
    }
    &:nth-of-type(3) {
      span {
        transition-delay: 0.4s;
      }
    }
    &:nth-of-type(4) {
      span {
        transition-delay: 0.6s;
      }
    }
  }

  &.is-go {
    span {
      transform: translateY(0);
    }
  }
}

.l-block00 {
  margin: 0 auto;
 max-width: 144rem;
  .inner {
    margin: 0 auto;
    width: 96rem;
    display: flex;
    justify-content: flex-end;
    > .box_text {
      width: 48rem;
      background: #efefef;
    }
  }
  @media screen and (max-width: 768px) {
    width: 100%;
    .inner {
      width: 34.5rem;
      padding: 0 2rem;
      > .box_text {
        width: 100%;
      }
    }
  }
}

.ttl02 {
  margin-bottom: 3.6rem;
  font-size: 4.4rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  display: flex;
  align-items: baseline;

  .en {
    font-size: 2.2rem;
    letter-spacing: 0;
    color: #e3190d;
    margin-left: 1rem;
    transform: translateY(-8px);
  }
  @media screen and (max-width: 768px) {
    margin-bottom: 2.7rem;
    font-size: 3rem;
    letter-spacing: 0.06em;

    .en {
      font-size: 1.4rem;
      margin-left: 1rem;
      transform: translateY(-8px);
    }
  }
}
.text00 {
  font-size: 1.8rem;
  line-height: calc(40 / 18);
  letter-spacing: -0.048em;
  + .text00 {
    margin-top: 2rem;
  }
  @media screen and (max-width: 768px) {
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: -0.048em;
    + .text00 {
      margin-top: 2rem;
    }
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* TOPページ----------------------------------------------/
/* Main Visual */
.l-mv {
  margin: 0 auto;
  padding: 16rem 0 0;
  max-width: 144rem;
  .mv_inner {
    position: relative;
    z-index: 0;
    margin: 0 auto;
    width: 73.4rem;
    background-image: url("../img/bc_mv.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    aspect-ratio: 1464/1254;
    display: flex;
    justify-content: center;
    align-items: center;
    &::after {
      content: "";
      display: block;
      position: absolute;
      z-index: 1;
      background: #efefef;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      transition: opacity 2s;
    }
    h1 {
      width: 36.3rem;
      transform: translateY(-1rem);
      svg {
        .cls-1 {
          fill: #231815;
        }
        .cls-2 {
          transition: fill 0.7s;
          transition-delay: 3.5s;
          fill: #231815;
        }
        .font00 {
          transition: 2s;
          opacity: 0;
        }

        #img {
          transition: 1s;
          opacity: 0;
        }
      }
    }
  }

  &.is_load {
    .mv_inner {
      &::after {
        opacity: 0;
      }

      h1 {
        svg {
          .cls-2 {
            fill: #e72410;
          }
          .font00 {
            opacity: 1;
            &#font01 {
              transition-delay: 1s;
            }
            &#font02 {
              transition-delay: 1.1s;
            }
            &#font03 {
              transition-delay: 1.2s;
            }
            &#font04 {
              transition-delay: 1.3s;
            }
            &#font05 {
              transition-delay: 1.4s;
            }
            &#font06 {
              transition-delay: 1.5s;
            }
            &#font07 {
              transition-delay: 1.6s;
            }
          }
          #img {
            transition-delay: 2.5s;
            opacity: 1;
          }
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    padding: 10.3rem 0 6rem;
    width: 100%;

    .mv_inner {
      width: 28rem;
      h1 {
        width: 14.5rem;
        transform: translateY(-0.5rem);
      }
    }
  }
}

/* About Section */
.l-about {
  position: relative;
  z-index: 0;
  padding: 26rem 0 5rem;

  .inner {
    .ttl02.jp {
      font-size: 4.4rem;
      margin-bottom: 1.5rem;

      .en {
        font-size: 2.2rem;
      }
    }
    justify-content: flex-start;
    .text00 {
    }
    .box_img {
      position: absolute;
      top: -6.98rem;
      right: 18.85rem;
      width: 49.9rem;
      aspect-ratio: 499 / 577;
      svg {
        fill: none;
        stroke: #000;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2px;

        stroke-dasharray: 1300;
        stroke-dashoffset: 1300;
      }
      &.is-go {
        svg {
          animation: draw 1s linear forwards;
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    padding: 16.4rem 0 2.4rem;

    .inner {
      .ttl02.jp {
        font-size: 3rem;
        .en {
          font-size: 1.4rem;
        }
      }
      justify-content: flex-start;
      .text00 {
      }
      .box_img {
        position: absolute;
        top: 0;
        right: 3.6rem;
        width: 14.6rem;
        svg {
          stroke-dashoffset: -1300;
        }
        &.is-go {
          svg {
            animation: draw 0.8s linear forwards;
          }
        }
      }
    }
  }
}

/* Works Section */
.l-works {
  position: relative;
  z-index: 0;
  padding: 24.6rem 0 0;

  .inner {
    position: relative;
    z-index: 0;
    .box_text {
      margin: 0 3.6rem;
    }
  }
  .box_img {
    position: absolute;
    z-index: -1;
    top: -0.4rem;
    right: 15.6rem;
    width: 79.8rem;
    aspect-ratio: 790 / 391;

    svg {
      fill: none;
      stroke: #000;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2px;

      stroke-dasharray: 1300;
      stroke-dashoffset: 1300;
    }
    &.is-go {
      svg {
        animation: draw 1s linear forwards;
      }
    }
  }
  .btn_works {
    display: block;
    position: absolute;
    z-index: 1;
    top: -12.7rem;
    right: -8.4rem;
    background: url("../img/bc_btn.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    /* background: #000; */
    width: 22.6rem;
    aspect-ratio: 452/388;
    color: #fff;
    font-size: 2.4rem;
    letter-spacing: 0.05em;
    line-height: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transform-origin: center bottom;
    transition: transform 0.25s ease;

    .dec02 {
      margin-top: -0.9rem;
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      &::after {
        content: "";
        display: block;
        border: solid #fff;
        border-width: 0 0.2rem 0.2rem 0;
        transform: rotate(-45deg);
        width: 1rem;
        aspect-ratio: 1;
        align-self: center;
      }
    }
    &:hover {
      animation: bounceLoop 1s cubic-bezier(0.25, 1.7, 0.5, 1) infinite;
    }
  }
  @media screen and (max-width: 768px) {
    padding: 20.7rem 0 0;

    .inner {
      position: static;
      .box_text {
        margin: 0;
      }
    }
    .box_img {
      z-index: 0;
      top: 0rem;
      right: 3.7rem;
      width: 29.3rem;
      aspect-ratio: 293 / 226;
      &.is-go {
        svg {
          animation: draw 0.8s linear forwards;
        }
      }
    }
    .btn_works {
      top: 10.6rem;
      right: 2.5rem;
      width: 12rem;
      font-size: 1.4rem;
      letter-spacing: 0.05em;
      line-height: 2;

      .dec02 {
        margin-top: -0.9rem;
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        &::after {
          content: "";
          display: block;
          border: solid #fff;
          border-width: 0 0.2rem 0.2rem 0;
          transform: rotate(-45deg);
          width: 1rem;
          aspect-ratio: 1;
          align-self: center;
        }
      }
      &:hover {
        animation: bounceLoop 1s cubic-bezier(0.25, 1.7, 0.5, 1) infinite;
      }
    }
  }
}
@keyframes bounceLoop {
  0% {
    transform: scale(1, 1);
  } /* 通常 */
  25% {
    transform: scale(1.05, 0.75);
  } /* 下につぶれる（着地） */
  55% {
    transform: scale(0.95, 1.12);
  } /* 反動で飛び上がる */
  80% {
    transform: scale(1.02, 0.85);
  } /* 小さく着地 */
  100% {
    transform: scale(1, 1);
  } /* 元に戻る */
}

/* Company Section */
.l-company {
  position: relative;
  z-index: 0;
  padding: 13.6rem 0 2.7rem;

  .inner {
    justify-content: flex-start;
    .box_text {
      width: 54rem;
    }
    .wrapper_data {
      text-indent: -1em;
      padding-left: 1em;
    }
  }
  .box_img01 {
    position: absolute;
    z-index: -1;
    top: -23rem;
    left: 12.8rem;
    width: 44.5rem;
    aspect-ratio: 445 / 467;

    svg {
      fill: none;
      stroke: #000;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2px;

      stroke-dasharray: 1300;
      stroke-dashoffset: 1300;
    }
    &.is-go {
      svg {
        animation: draw 2s linear forwards;
      }
      .icon_bard {
        opacity: 1;
      }
    }
    .icon_bard {
      position: absolute;
      top: 4.9rem;
      left: 11.3rem;
      width: 11.5rem;
    }
  }
  .box_img02 {
    position: absolute;
    z-index: 0;
    bottom: 1.8rem;
    right: 17.4rem;
    width: 56.8rem;
    aspect-ratio: 550 / 216;

    svg {
      fill: none;
      stroke: #000;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2px;

      stroke-dasharray: 1300;
      stroke-dashoffset: 1300;
    }
    &.is-go {
      svg {
        animation: draw 1s linear forwards;
      }
    }
  }
  @media screen and (max-width: 768px) {
    padding: 29rem 0 12.3rem;

    .inner {
      justify-content: flex-start;
      .box_text {
        width: 100%;
      }
      .wrapper_data {
        text-indent: -0.3em;
        padding-left: 0em;
      }
    }
    .box_img01 {
      position: absolute;
      z-index: -1;
      top: 2.8rem;
      left: 2.3rem;
      width: 30.4rem;
      aspect-ratio: 445 / 467;

      &.is-go {
        svg {
          animation: draw 0.8s linear forwards;
        }
      }
      .icon_bard {
        top: 2.5rem;
        left: 8.3rem;
        width: 5.2rem;
      }
    }
    .box_img02 {
      position: absolute;
      z-index: 0;
      bottom: -1.8rem;
      right: 3.1rem;
      width: 24.5rem;
      aspect-ratio: 550 / 216;

      svg {
        fill: none;
        stroke: #000;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2px;

        stroke-dasharray: 1300;
        stroke-dashoffset: 1300;
      }
      &.is-go {
        svg {
          animation: draw 0.8s linear forwards;
        }
      }
    }
  }
}

/* Contact Section */
.l-contact {
  padding: 0 0 14rem;

  .inner {
    .box_text {
      margin-right: -10rem;

      .text00 {
        + .text00 {
          margin-top: 0;
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    padding: 0 0 8.5rem;

    .inner {
      .box_text {
        margin-right: 0;
      }
    }
  }
}

/* ログインページ----------------------------------------------*/
.l-login {
  height: calc(100svh - 5.6rem);
  padding: 16rem 0;
  .login_inner {
    margin: 0 auto;
    padding-top: 19.5rem;
    width: 73.4rem;
    background-image: url("../img/bc_login.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    aspect-ratio: 1464/1254;
    display: flex;
    flex-flow: column;
    align-items: center;

    h1 {
      font-size: 4rem;
      letter-spacing: 0.1rem;
    }
    .login_text {
      margin: 3.2rem 0 4.8rem;
      font-size: 1.8rem;
      letter-spacing: 0.08rem;
    }
    .wrapper_login {
      margin-bottom: 11rem;
      /* height: 4.2rem; */
      display: flex;
      justify-content: center;
      flex-flow: wrap;
      font-size: 16px;

      input {
        width: 31rem;
        border: 1px solid #000;
        border-radius: 0.5rem 0 0 0.5rem;
        padding: 0 0.3em;
        height: 4.2rem;
		  font-size:16px;
      }
      button {
        width: 9.2rem;
        background: #000;
        color: #fff;
        border-radius: 0 0.5rem 0.5rem 0;
        text-align: center;
        letter-spacing: 0.02rem;
        cursor: pointer;
        height: 4.2rem;
		  font-size: 1.8rem;
      }
      #pass_error {
        margin-top: 1rem;
        width: 100%;
        color: #e5190e;
        text-align: center;
        &:empty {
          margin-top: 0;
        }
      }
    }
    .back {
      margin: 0 auto;
      width: fit-content;
      display: flex;
      justify-content: center;
      gap: 1.6rem;
      font-size: 2rem;
      letter-spacing: 0.3rem;

      &::before {
        content: "";
        border: solid #000;
        border-width: 0 0 1px 1px;
        transform: translateY(0.2rem) rotate(45deg);
        width: 1rem;
        aspect-ratio: 1;
        align-self: center;
      }
    }
  }
  @media screen and (max-width: 768px) {
    height: calc(100svh - 3.13rem);
    padding: 9.8rem 0;
    .login_inner {
      padding-top: 6.4rem;
      width: 32.1rem;
      background-image: url("../img/bc_login.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      aspect-ratio: 1464/1254;
      display: flex;
      flex-flow: column;
      align-items: center;

      h1 {
        font-size: 2.6rem;
        letter-spacing: 0.1rem;
      }
      .login_text {
        margin: 2.2rem 0 2.1rem;
        font-size: 1rem;
        line-height: 1.6;
        letter-spacing: 0.08rem;
        text-align: center;
      }
      .wrapper_login {
        margin-bottom: 2.911rem;
        height: 2.5rem;
        font-size: 1rem;
		height: 4.2rem;
        input {
          width: 15.6rem;
          border: 1px solid #000;
          border-radius: 0.5rem 0 0 0.5rem;
          padding: 0 0.3em;
			font-size:16px;
        }
        button {
          width: 5.6rem;
          background: #000;
          color: #fff;
          border-radius: 0 0.5rem 0.5rem 0;
          text-align: center;
          letter-spacing: 0.02rem;
			font-size: 1rem;
        }
      }
      .back {
        gap: 1.6rem;
        font-size: 1.2rem;
        letter-spacing: 0.3rem;

        &::before {
          width: 0.8rem;
        }
      }
    }
  }
}

/* 実績ページ----------------------------------------------*/
/* 一覧ページ-------------/
/* Work List Section */

.l-submv {
  position: relative;
  z-index: 0;
  .mv_inner {
    padding-top: 25.4rem;
    width: 144rem;
  }
  .submv_ttl {
    margin: 0 auto;

    text-align: center;

    font-size: 5rem;
    letter-spacing: 0.07em;
  }
  .submv_img {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: 52.8rem;
    aspect-ratio: 528 / 361;
    svg {
      fill: none;
      stroke: #000;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2px;
      stroke-dasharray: 1300;
      stroke-dashoffset: 1300;
    }
    .icon_bard {
      position: absolute;
      z-index: 1;
      width: 13.1rem;
      bottom: 1rem;
      right: 11.8rem;
    }
  }
  &.is_load {
    .submv_img {
      svg {
        animation: draw 1.5s linear forwards;
      }
    }
  }
  @media screen and (max-width: 768px) {
    .mv_inner {
      padding-top: 15rem;
      width: 100%;
    }
    .submv_ttl {
      margin: 0 auto;
      text-align: center;

      font-size: 2.6rem;
      letter-spacing: 0.07em;
    }
    .submv_img {
      width: 17.2rem;
      aspect-ratio: 172/118;

      .icon_bard {
        background: #efefef;
        padding: 0.5rem;
        width: 6.8rem;
        bottom: -0.7rem;
        right: 2.8rem;
      }
    }
    &.is_load {
      .submv_img {
        svg {
          animation: draw 1s linear forwards;
        }
      }
    }
  }
}

.l-work_list {
  padding: 11.5rem 0 14rem;

  .inner {
    display: block;
    margin: 0 auto;
    width: 116rem;
    /* List Area */
    .list_work {
      display: flex;
      flex-flow: wrap;
      /* justify-content: center; */
      gap: 4.4rem 7rem;
      .card_work {
        width: 34rem;
        .box_img {
          position: relative;
          z-index: 1;
          background: #fff;
          padding: 3rem 4.5rem;
          aspect-ratio: 334 / 287;
          background-position: center center;
          mask-image: url("../img/works/mask_img.svg");
          -webkit-mask-image: url("../img/works/mask_img.svg");
          mask-size: 100% 100%;
          -webkit-mask-size: 100% 100%;
          mask-position: 100% 0;
          -webkit-mask-position: 100% 0;
          display: flex;
          justify-content: center;
          align-items: center;
          &::after {
            content: "";
            display: block;
            position: absolute;
            z-index: 1;
            background-image: url("../img/works/bc_img.svg");
            background-repeat: no-repeat;
            background-size: cover;
            width: 99.7%;
            aspect-ratio: 334 / 287;
            	top: 50%;
	left:50%;
	transform: translate(-50%,-50%);
          }
          img {
            transition: 0.3s ease-out;
          }
        }
        .box_text {
          margin-top: 2rem;
          .work_ttl {
            font-size: 1.8rem;
            font-weight: 600;
            line-height: calc(26 / 18);
            letter-spacing: 0.05em;
            padding: 0 5rem;
            margin-bottom: 1rem;
          }
          .work_text01 {
            font-size: 1.4rem;
            line-height: calc(18 / 14);
            letter-spacing: 0.02em;
            padding: 0 4rem;
          }

          .keyword {
            font-size: 1.4rem;
            line-height: 1;
            letter-spacing: 0.02em;
            padding: 0 4rem;
            display: flex;
            flex-flow: wrap;
            gap: 0.5em;

            li {
              display: flex;
              gap: 0.1em;
              &::before {
                content: "#";
              }
            }
          }
        }

        &:hover {
          .box_img {
            img {
              transform: scale(0.9);
            }
          }
        }
      }
    }

    /* Pager / Pagination */
    .pager {
      margin: 0 auto;
      width: fit-content;
      margin-top: 11rem;
      a,
      span {
        display: inline-block;
        font-size: 2.4rem;
        padding: 0.3rem 0.8rem;
        margin: 0 0.2rem;
        &.current {
          border-bottom: 2px solid #000;
        }
        &.arrow_l {
          opacity: 1;
          &::after {
            content: "";
            display: block;

            border: solid #000;
            border-width: 0 0 2px 2px;
            transform: translateY(0.2rem) rotate(45deg);
            width: 1.5rem;
            aspect-ratio: 1;
            align-self: center;
          }
        }
        &.page00 {
        }
        &.arrow_r {
          &::after {
            content: "";
            display: block;

            border: solid #000;
            border-width: 2px 2px 0 0;
            transform: translateY(0.2rem) rotate(45deg);
            width: 1.5rem;
            aspect-ratio: 1;
            align-self: center;
          }
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    padding: 5.6rem 0 6rem;
    .inner {
      display: block;
      margin: 0 auto;
      width: 36rem;
      padding: 0;
      /* List Area */
      .list_work {
        gap: 1.7rem 0;
        .card_work {
          justify-content: center;
          width: 18rem;
          .box_img {
            margin: 0 auto;
            width: 15.4rem;
            padding: 1.5rem 2.5rem;
          }
          .box_text {
            margin-top: 0.8rem;

            .work_ttl {
              font-size: 1.2rem;
              line-height: calc(16 / 12);
              padding: 0 0 0 1.4rem;
              margin-bottom: 0.8rem;
            }
            .keyword {
              font-size: 1rem;
              line-height: 1.2;
              padding: 0 0 0 1.4rem;
            }
          }

          &:hover {
            .box_img {
              img {
                transform: scale(0.9);
              }
            }
          }
        }
      }

      /* Pager / Pagination */
      .pager {
        margin-top: 5.4rem;
        a {
          font-size: 1.6rem;
          &.arrow_l {
            opacity: 1;
            &::after {
              width: 1rem;
            }
          }
          &.page00 {
          }
          &.arrow_r {
            &::after {
              width: 1rem;
            }
          }
        }
      }
    }
  }
}
/* 詳細ぺージ-------------/
/* Work Card Detail Section */
.l-work_card {
  overflow: hidden;
  position: relative;
  z-index: 0;
  padding: 25.7rem 0 12rem;
  .inner {
    display: block;
    width: 100rem;

    .box_img00 {
      background: #fff;
      padding: 2rem;
    }

    .box_img01 {
      margin-bottom: 4.2rem;
      padding: 2rem;
      background: #fff;
    }
    .box_img02 {
      margin-bottom: 3rem;
      padding: 2rem;
      background: #fff;
    }
    .box_img03 {
      margin-bottom: 4.5rem;
      display: flex;
      justify-content: space-between;

      figure {
        width: 48.6rem;
        background: #fff;
        padding: 2rem;
      }
    }

    .ttl02 {
      margin-bottom: 2.3rem;
      font-size: 2.4rem;
      font-weight: 600;
      line-height: calc(40 / 24);
      letter-spacing: 0.01em;
    }
    .work_text02,
    .keyword,
    .work_data {
      font-size: 1.8rem;
      line-height: calc(30 / 18);
      letter-spacing: 0.05em;
    }
    .work_text02 {
      margin-bottom: 1rem;
      letter-spacing: 0.028em;
    }

    .keyword {
      margin-bottom: 5rem;
      display: flex;
      flex-flow: wrap;
      gap: 0.5em;

      li {
        display: flex;
        gap: 0.1em;
        &::before {
          content: "#";
        }
      }
    }

    .work_data {
      margin-bottom: 11rem;
      .data_card {
        display: flex;
        gap: 0.3em;
        &.direcion {
          margin-top: 3rem;
        }
        dt {
          display: flex;
          gap: 0.3em;
          &::after {
            content: ":";
          }
        }
      }
      table {
        tr {
          display: flex;
          gap: 0.3em;
          &:last-of-type {
            margin-top: 3rem;
          }
          td {
            border: 0;
            width: fit-content !important;
            display: flex !important;
            gap: 0.3em !important;
            padding: 0 !important;
            &:first-of-type::after {
              content: ":";
            }
          }
        }
      }
    }
    /* Navigation Area */
    .pager02 {
      letter-spacing: 0.05em;

      .wrapper_arrow {
        margin-bottom: 7rem;
        font-size: 2.5rem;

        display: flex;
        flex-flow: wrap;
        justify-content: space-between;
      }
      .btn_arrow {
        position: relative;
        z-index: 0;
        display: flex;
        align-items: center;
        gap: 0.5em;

        &.btn_back {
          margin-right: auto;
          &::before {
            content: "";
            border: solid #000;
            border-width: 0 0 2px 2px;
            transform: translateY(0.2rem) rotate(45deg);
            width: 1.5rem;
            aspect-ratio: 1;
            align-self: center;
          }
        }
        &.btn_next {
          margin-left: auto;

          &::after {
            content: "";
            border: solid #000;
            border-width: 2px 2px 0 0;
            transform: translateY(0.2rem) rotate(45deg);

            width: 1.5rem;
            aspect-ratio: 1;
            align-self: center;
          }
        }
      }
      .btn_list {
        position: relative;
        z-index: 0;
        margin: 0 auto;
        background: #fff;
        width: 41.6rem;
        height: 5rem;
        border-radius: 2.5rem;
        border: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;

        &::after {
          content: "";
          display: block;
          position: absolute;
          z-index: 0;
          border: 1px solid #000;
          border-width: 0 0 1px 1px;
          top: 50%;
          left: 2rem;
          transform: translate(0, -50%) rotate(45deg);
          width: 0.8rem;
          aspect-ratio: 1;
        }
      }
    }
  }
  .img_works {
    position: absolute;
    z-index: -1;
    bottom: -0.8rem;
    right: 0;
    width: 49.8rem;
    aspect-ratio: 498/562;
    svg {
      fill: none;
      stroke: #000;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2px;
      stroke-dasharray: 1300;
      stroke-dashoffset: 1300;
    }
    .icon_bard {
      position: absolute;
      z-index: 1;
      width: 13.9rem;
      bottom: 38.5rem;
      right: 27.6rem;
    }
    &.is-go {
      & svg {
        animation: draw 1.3s linear forwards;
      }
    }
  }
  @media screen and (max-width: 768px) {
    padding: 10.3rem 0 7.6rem;
    .inner {
      width: 34rem;
      padding: 0;
      .box_img00 {
        background: #fff;
        padding: 1rem;
      }

      .box_img01 {
        margin-bottom: 2rem;
        background: #fff;
        padding: 1rem;
      }
      .box_img02 {
        margin-bottom: 0.9rem;
        padding: 1rem;
        background: #fff;
      }
      .box_img03 {
        margin-bottom: 2rem;
        display: flex;
        justify-content: space-between;

        figure {
          width: 16.4rem;
          background: #fff;
          padding: 1rem;
        }
      }

      .ttl02 {
        margin-bottom: 1.2rem;
        font-size: 1.4rem;
        line-height: calc(20 / 14);
        letter-spacing: 0.02em;
      }
      .work_text02,
      .keyword,
      .work_data {
        font-size: 1rem;
        line-height: calc(14 / 10);
        letter-spacing: 0.05em;
      }
      .work_text02 {
        margin-bottom: 0.7rem;
        letter-spacing: 0.028em;
      }

      .keyword {
        margin-bottom: 2.2rem;
        gap: 0em 0.2em;
        letter-spacing: -0.07em;

        li {
          display: flex;
          gap: 0.1em;
          &::before {
            content: "#";
          }
        }
      }

      .work_data {
        margin-bottom: 6rem;

        .data_card {
          display: flex;
          gap: 0.3em;
          &.direcion {
            margin-top: 1.4rem;
          }
          dt {
            display: flex;
            gap: 0.3em;
            &::after {
              content: ":";
            }
          }
          dd {
          }
        }
      }
      /* Navigation Area */
      .pager02 {
        letter-spacing: 0.05em;
        padding: 2.8rem;

        .wrapper_arrow {
          margin-bottom: 5.6rem;
          font-size: 1.4rem;
        }
        .btn_arrow {
          gap: 0.5em;
          &.btn_back {
            &::before {
              width: 1rem;
            }
          }
          &.btn_next {
            &::after {
              width: 1rem;
            }
          }
        }
        .btn_list {
          width: 23rem;
          height: 3.5rem;
          border-radius: 17.5rem;
          font-size: 1.2rem;
          &::after {
            left: 1.1rem;
            width: 0.8rem;
            aspect-ratio: 1;
          }
        }
      }
    }
    .img_works {
      position: absolute;
      z-index: -1;
      bottom: 0;
      right: 0;
      width: 20.45rem;
      aspect-ratio: 409/636;
      svg {
        fill: none;
        stroke: #000;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2px;
        stroke-dasharray: 1300;
        stroke-dashoffset: 1300;
      }
      .icon_bard {
        background: #efefef;
        width: 7.9rem;
        bottom: 22.8rem;
        right: 8rem;
        padding: 1rem;
      }
      &.is-go {
        & svg {
          animation: draw 0.8s linear forwards;
        }
      }
    }
  }
}