@charset "UTF-8";
@font-face {
  font-family: "genjyuu";
  src: url("../fonts/GenJyuuGothic-Regular.woff") format("woff"), url("../fonts/GenJyuuGothic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "genjyuu";
  src: url("../fonts/GenJyuuGothic-Medium.woff") format("woff"), url("../fonts/GenJyuuGothic-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "genjyuu";
  src: url("../fonts/GenJyuuGothic-Bold.woff") format("woff"), url("../fonts/GenJyuuGothic-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* @font-faceのfont-familyでつけた名前を指定 */
body {
  font-family: "genjyuu", sans-serif;
  line-height: 1.6;
  color: #333333;
  font-family: "genjyuu", sans-serif;
}
body.is-fixed {
  overflow: hidden;
}

.c-section-header__en {
  font-family: "Beau Rivage";
}

.c-section-header__ja {
  font-family: "genjyuu";
}

.l-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: #fff;
  width: 100%;
}

.p-header {
  padding: 10px 30px 10px 24px;
  background-color: #f5f5f5;
  -webkit-box-shadow: 0 4px 4px 0 rgba(51, 51, 51, 0.1);
          box-shadow: 0 4px 4px 0 rgba(51, 51, 51, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 1200px) {
  .p-header {
    padding: 10px 80px;
    height: 80px;
  }
}

.p-header__logo a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.p-header__logo a img {
  width: 40px;
}
@media screen and (min-width: 1200px) {
  .p-header__logo a {
    gap: 8px;
  }
  .p-header__logo a img {
    width: 56px;
  }
}

.p-header__text {
  font-family: Roboto;
  font-size: 24px;
}
@media screen and (min-width: 1200px) {
  .p-header__text {
    font-size: 36px;
  }
}

.p-header__nav-wrapper {
  display: none;
}
@media screen and (min-width: 1200px) {
  .p-header__nav-wrapper {
    display: inline-block;
  }
}

.c-navigation {
  display: none;
}
@media screen and (min-width: 1200px) {
  .c-navigation {
    margin-left: auto;
    margin-right: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 40px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .c-navigation li {
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
  }
  .c-navigation li:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }
}

.c-navigation__item {
  font-family: Roboto;
  font-size: 16px;
}

.c-drawer-icon {
  display: block;
  position: relative;
  gap: 7px;
  width: 30px;
  height: 30px;
  z-index: 51;
}
@media screen and (min-width: 1200px) {
  .c-drawer-icon {
    display: none;
  }
}
.c-drawer-icon.is-open .c-drawer-icon__bar:nth-of-type(1) {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.c-drawer-icon.is-open .c-drawer-icon__bar:nth-of-type(2) {
  display: none;
}
.c-drawer-icon.is-open .c-drawer-icon__bar:nth-of-type(3) {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.c-drawer-icon__bar {
  position: absolute;
  top: 3px;
  left: 0;
  width: 30px;
  height: 3px;
  border-radius: 6px;
  background: #333333;
  -webkit-transition: top 0.3s linear, -webkit-transform 0.3s linear;
  transition: top 0.3s linear, -webkit-transform 0.3s linear;
  transition: transform 0.3s linear, top 0.3s linear;
  transition: transform 0.3s linear, top 0.3s linear, -webkit-transform 0.3s linear;
}
.c-drawer-icon__bar:nth-of-type(2) {
  top: 14px;
}
.c-drawer-icon__bar:nth-of-type(3) {
  top: 25px;
}

.c-drawer-menu {
  background: #fff1d9;
  padding-top: 148px;
  padding-bottom: 80px;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.c-drawer-menu.js-open {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.c-drawer-bg {
  display: none;
}
.c-drawer-bg.js-open {
  display: block;
  background: rgba(108, 108, 108, 0.7);
  z-index: 90;
  width: 100%;
  height: 1000vh;
  position: fixed;
  top: 0;
  left: 0;
}

.c-drawer-menu__list {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 14px;
}

.c-drawer-menu__item {
  color: #333;
  font-family: Roboto;
  font-size: 20px;
  letter-spacing: 0.8px;
}

.p-drawer-menu__links {
  margin-top: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 28px;
}

.p-drawer-menu__sns {
  width: 32px;
}
.p-drawer-menu__sns:nth-of-type(3) {
  width: 42px;
}

body.no-scroll {
  overflow: hidden;
}

.l-fv {
  margin-top: 60px;
}
@media screen and (min-width: 1200px) {
  .l-fv {
    margin-top: 80px;
  }
}

.p-fv {
  height: 424px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 193, 7, 0.6)), color-stop(50%, rgba(255, 170, 0, 0.8)), to(#fa0));
  background: linear-gradient(0deg, rgba(255, 193, 7, 0.6) 0%, rgba(255, 170, 0, 0.8) 50%, #fa0 100%);
  position: relative;
}
@media screen and (min-width: 900px) {
  .p-fv {
    height: 644px;
  }
}
@media screen and (min-width: 1200px) {
  .p-fv {
    height: 90vh;
  }
}

.p-fv__pictures {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.p-fv__picture-up-left,
.p-fv__picture-down-right {
  position: absolute;
}

.p-fv__picture-up-left {
  top: 0;
  left: 0;
  width: 48.5333333333%;
  max-width: 270px;
}
@media screen and (min-width: 900px) {
  .p-fv__picture-up-left {
    width: 33.3333333333%;
    max-width: 480px;
  }
}

.p-fv__picture-down-right {
  bottom: 0;
  right: 0;
  width: 48.5333333333%;
  max-width: 270px;
}
@media screen and (min-width: 900px) {
  .p-fv__picture-down-right {
    width: 33.3333333333%;
    max-width: 480px;
  }
}

.p-fv__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.p-fv__content {
  position: relative;
  width: 296.075px;
  height: 172.517px;
}
@media screen and (min-width: 900px) {
  .p-fv__content {
    width: 489.969px;
    height: 295.148px;
  }
}

.p-fv__title {
  padding-left: 51px;
  color: #fff;
  font-family: "Roboto", cursive;
  font-size: 48px;
  line-height: 1.2; /* 57.6px */
  letter-spacing: 1.44px;
}
@media screen and (min-width: 900px) {
  .p-fv__title {
    padding-left: 81px;
    font-size: 80px;
    letter-spacing: 2.4px;
  }
}

.p-fv__sub-title {
  position: absolute;
  bottom: -2px;
  left: 5px;
  color: #c43000;
  font-family: "Beau Rivage", sans-serif;
  font-size: 72px;
  line-height: 1.2; /* 86.4px */
  letter-spacing: 2.16px;
  -webkit-transform: rotate(-6.835deg);
          transform: rotate(-6.835deg);
}
@media screen and (min-width: 900px) {
  .p-fv__sub-title {
    bottom: 6px;
    left: 7px;
    font-size: 120px;
    letter-spacing: 3.6px;
  }
}

.p-works {
  background: #f5f5f5;
  position: relative;
  overflow: hidden;
}

.p-works-bg-top-left,
.p-works-bg-top-right-small,
.p-works-bg-top-right-middle,
.p-works-bg-top-right-large,
.p-works-bg-bottom {
  position: absolute;
}

.p-works-bg-top-left {
  -webkit-transform: scale(-1, 1) rotate(-36deg);
          transform: scale(-1, 1) rotate(-36deg);
  width: 23.4666666667%;
  max-width: 100px;
  top: 3px;
  left: 12px;
}
@media screen and (min-width: 600px) {
  .p-works-bg-top-left {
    max-width: 120px;
  }
}
@media screen and (min-width: 900px) {
  .p-works-bg-top-left {
    top: 14px;
    left: 41px;
  }
}
@media screen and (min-width: 1200px) {
  .p-works-bg-top-left {
    max-width: 245px;
  }
}

.p-works-bg-top-right-small {
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
  width: 8.5333333333%;
  max-width: 35px;
  top: 127px;
  right: 67px;
}
@media screen and (min-width: 1200px) {
  .p-works-bg-top-right-small {
    max-width: 39px;
    top: 265px;
    right: 296px;
  }
}

.p-works-bg-top-right-middle {
  -webkit-transform: scale(-1, 1) rotate(203deg);
          transform: scale(-1, 1) rotate(203deg);
  width: 11.7333333333%;
  max-width: 44px;
  top: 35px;
  right: 75px;
}
@media screen and (min-width: 1200px) {
  .p-works-bg-top-right-middle {
    -webkit-transform: scale(-1, 1) rotate(201deg);
            transform: scale(-1, 1) rotate(201deg);
    max-width: 60px;
    top: 94px;
    right: 324px;
  }
}

.p-works-bg-top-right-large {
  -webkit-transform: scale(-1, 1) rotate(301deg);
          transform: scale(-1, 1) rotate(301deg);
  width: 14.9333333333%;
  max-width: 60px;
  top: 75px;
  right: 4px;
}
@media screen and (min-width: 1200px) {
  .p-works-bg-top-right-large {
    max-width: 100px;
    top: 186px;
    right: 54px;
  }
}

.p-works-bg-bottom {
  -webkit-transform: scale(-1, 1) rotate(-7deg);
          transform: scale(-1, 1) rotate(-7deg);
  width: 13.8666666667%;
  max-width: 60px;
  bottom: 20px;
  left: 85%;
}
@media screen and (min-width: 1200px) {
  .p-works-bg-bottom {
    -webkit-transform: scale(-1, 1) rotate(-10deg);
            transform: scale(-1, 1) rotate(-10deg);
    max-width: 152px;
    bottom: 64px;
    left: 294px;
  }
}

.u-space-section {
  padding-top: 64px;
  padding-bottom: 64px;
}
@media screen and (min-width: 1200px) {
  .u-space-section {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

.l-inner {
  padding-left: 16px;
  padding-right: 16px;
}
@media screen and (min-width: 1200px) {
  .l-inner {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}

.p-works__content {
  position: relative;
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
}

.c-section-header {
  margin-bottom: 52px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  gap: 12px;
}
@media screen and (min-width: 1200px) {
  .c-section-header {
    margin-bottom: 80px;
    gap: 16px;
  }
}

.c-section-header__en {
  font-family: "Roboto", cursive;
  font-size: 32px;
  letter-spacing: 0.96px;
  line-height: 1;
}
@media screen and (min-width: 1200px) {
  .c-section-header__en {
    font-size: 48px;
    letter-spacing: 1.44px;
  }
}

.c-section-header__ja {
  color: #ff6200;
  font-family: "genjyuu", sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.9px;
  line-height: 1;
}
@media screen and (min-width: 1200px) {
  .c-section-header__ja {
    font-size: 20px;
    letter-spacing: 1.6px;
  }
}

.l-works__button {
  margin-top: -13px;
  padding-left: 10px;
}

.p-works__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 1200px) {
  .p-works__button {
    margin-top: -20px;
    padding-left: 0;
  }
}

.c-button {
  display: inline-block;
  width: 279px;
  padding: 14px 21px 14px 53px;
  vertical-align: middle;
  border-radius: 30px;
  background: #ff6200;
  border: 3px solid #ff6200;
  color: #fff;
  font-family: "genjyuu", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 100%; /* 18px */
  letter-spacing: 0.54px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  position: relative;
}
.c-button::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 21px;
  width: 14px;
  height: 6px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: url(../img/button-arrow.png) no-repeat center/contain;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
@media screen and (min-width: 1200px) {
  .c-button:hover {
    background: #fff;
    color: #ff6200;
  }
  .c-button:hover::after {
    right: 18px;
    background: url(../img/button-arrow-hover.png) no-repeat center/contain;
  }
}

.swiper-container {
  position: relative;
}

.p-works__slider {
  margin-bottom: 72px;
}
@media screen and (min-width: 1200px) {
  .p-works__slider {
    margin-bottom: 128px;
  }
}

.swiper {
  width: calc(100% + 48px);
  margin-left: -24px;
  margin-right: -24px;
}
@media screen and (min-width: 1200px) {
  .swiper {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* 前へ次への矢印カスタマイズ */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(8%);
          transform: translateY(8%);
  height: 28px;
  width: 28px;
}
@media screen and (min-width: 600px) {
  .swiper-button-prev,
  .swiper-button-next {
    height: 38px;
    width: 38px;
  }
}
@media screen and (min-width: 900px) {
  .swiper-button-prev,
  .swiper-button-next {
    width: 48px;
    height: 48px;
  }
}

.swiper-button-prev {
  left: 1%;
}
@media screen and (min-width: 600px) {
  .swiper-button-prev {
    left: 10%;
  }
}
@media screen and (min-width: 900px) {
  .swiper-button-prev {
    left: 12%;
  }
}
@media screen and (min-width: 1200px) {
  .swiper-button-prev {
    left: 25.5%;
  }
}

.swiper-button-next {
  right: 1%;
}
@media screen and (min-width: 600px) {
  .swiper-button-next {
    right: 10%;
  }
}
@media screen and (min-width: 900px) {
  .swiper-button-next {
    right: 12%;
  }
}
@media screen and (min-width: 1200px) {
  .swiper-button-next {
    right: 25.5%;
  }
}

/* 前へ次への矢印カスタマイズ */
.swiper-button-prev:after,
.swiper-button-next:after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 28px;
  margin: auto;
  width: 28px;
}
@media screen and (min-width: 600px) {
  .swiper-button-prev:after,
  .swiper-button-next:after {
    height: 38px;
    width: 38px;
  }
}
@media screen and (min-width: 900px) {
  .swiper-button-prev:after,
  .swiper-button-next:after {
    width: 48px;
    height: 48px;
  }
}

/* 前への矢印カスタマイズ */
.swiper-button-prev:after {
  background-image: url("../img/swiper-arrow-left.png");
}

/* 次への矢印カスタマイズ */
.swiper-button-next:after {
  background-image: url("../img/swiper-arrow-right.png");
}

/* 画像サイズ調整 */
.swiper-slide {
  height: auto;
  width: 100%;
}
@media screen and (min-width: 1200px) {
  .swiper-slide {
    -webkit-transform: translateZ(0) translate3d(0, 0, 0) scale(0.66) !important;
            transform: translateZ(0) translate3d(0, 0, 0) scale(0.66) !important; /* translateZを残したままscale */
  }
}

@media screen and (min-width: 1200px) {
  .swiper-slide-active {
    -webkit-transform: translateZ(0) translate3d(0, 0, 0) scale(1) !important;
            transform: translateZ(0) translate3d(0, 0, 0) scale(1) !important; /* 中央の画像だけ大きく */
  }
}

/* 画像サイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
}

/* ページネーションの余白 */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 6px 8px;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: -34px;
}

/* ページネーションのサイズと色 */
.swiper-pagination-bullet {
  background: #ccc; /* 非アクティブ時の色 */
  opacity: 1; /* Swiperのデフォルトだと0.2になるので上書き */
  height: 8px;
  width: 8px;
}
@media screen and (min-width: 1200px) {
  .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
  }
}

/* アクティブなドット */
.swiper-pagination-bullet-active {
  background: #555; /* アクティブ時の色 */
}

.p-service {
  background: #fff1d9;
  position: relative;
  overflow: hidden;
}

.p-service-bg-top,
.p-service-bg-left,
.p-service-bg-bottom-left,
.p-service-bg-bottom-right {
  position: absolute;
}

.p-service-bg-top {
  -webkit-transform: scale(-1, 1) rotate(-13deg);
          transform: scale(-1, 1) rotate(-13deg);
  width: 23.4666666667%;
  max-width: 100px;
  top: 74px;
  left: 11px;
}
@media screen and (min-width: 1200px) {
  .p-service-bg-top {
    -webkit-transform: scale(-1, 1) rotate(10deg);
            transform: scale(-1, 1) rotate(10deg);
    max-width: 173px;
    top: 101px;
    right: 54px;
    left: auto;
  }
}

.p-service-bg-left {
  display: none;
}
@media screen and (min-width: 1200px) {
  .p-service-bg-left {
    display: block;
    -webkit-transform: rotate(351deg);
            transform: rotate(351deg);
    width: 126px;
    top: 664px;
    left: 12px;
  }
}

.p-service-bg-bottom-left {
  -webkit-transform: scale(-1, 1) rotate(12deg);
          transform: scale(-1, 1) rotate(12deg);
  width: 17.0666666667%;
  max-width: 64px;
  bottom: 31px;
  right: 3px;
}
@media screen and (min-width: 1200px) {
  .p-service-bg-bottom-left {
    max-width: 120px;
    bottom: 81px;
    right: 12px;
  }
}

.p-service-bg-bottom-right {
  -webkit-transform: scale(-1, 1) rotate(-12deg);
          transform: scale(-1, 1) rotate(-12deg);
  width: 12.8%;
  max-width: 48px;
  bottom: 10px;
  right: 56px;
}
@media screen and (min-width: 1200px) {
  .p-service-bg-bottom-right {
    max-width: 72px;
    bottom: 44px;
    right: 103px;
  }
}

.p-service__content {
  width: 100%;
}
@media screen and (min-width: 600px) {
  .p-service__content {
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
  }
}
@media screen and (min-width: 900px) {
  .p-service__content {
    max-width: 928px;
  }
}

.p-service__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}

.p-service-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
}
@media screen and (min-width: 900px) {
  .p-service-item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    gap: 32px;
  }
}

@media screen and (min-width: 900px) {
  .p-service-item--reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 32px;
  }
}

.p-service-item__img {
  width: 100%;
}
@media screen and (min-width: 900px) {
  .p-service-item__img {
    width: 41.4117647059%;
  }
}
.p-service-item__textbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
@media screen and (min-width: 900px) {
  .p-service-item__textbox {
    gap: 24px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 64.7058823529%;
  }
}

.p-service-item__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  color: #333;
  font-weight: 500;
  line-height: 1; /* 32px */
}

.p-service-item__title-number {
  font-family: "Roboto", cursive;
  font-size: 32px;
  letter-spacing: 2.56px;
}
@media screen and (min-width: 900px) {
  .p-service-item__title-number {
    font-size: 36px;
    letter-spacing: 2.88px;
  }
}

.p-service-item__title-name {
  font-family: "genjyuu", sans-serif;
  font-size: 20px;
  letter-spacing: 0.6px;
}
@media screen and (min-width: 900px) {
  .p-service-item__title-name {
    font-size: 24px;
    letter-spacing: 0.72px;
  }
}

.p-service-item__text {
  color: #333;
  font-size: 15px;
  line-height: 180%; /* 27px */
  letter-spacing: 1.2px;
}
@media screen and (min-width: 900px) {
  .p-service-item__text {
    font-size: 16px;
    letter-spacing: 1.28px;
  }
}

.p-skills {
  background: #f5f5f5;
  position: relative;
  overflow: hidden;
}

.p-skills-bg-top,
.p-skills-bg-left-left,
.p-skills-bg-left-right,
.p-skills-bg-bottom {
  position: absolute;
}

.p-skills-bg-top {
  -webkit-transform: rotate(-58deg);
          transform: rotate(-58deg);
  width: 18.6666666667%;
  max-width: 80px;
  top: 35px;
  left: 31px;
}
@media screen and (min-width: 1200px) {
  .p-skills-bg-top {
    -webkit-transform: scale(-1, 1) rotate(130deg);
            transform: scale(-1, 1) rotate(130deg);
    max-width: 151px;
    top: 45px;
    right: 69%;
    left: auto;
  }
}

.p-skills-bg-left-left {
  display: none;
}
@media screen and (min-width: 1200px) {
  .p-skills-bg-left-left {
    display: block;
    -webkit-transform: scale(-1, 1) rotate(190deg);
            transform: scale(-1, 1) rotate(190deg);
    width: 98px;
    top: 668px;
    left: 53px;
  }
}

.p-skills-bg-left-right {
  display: none;
}
@media screen and (min-width: 1200px) {
  .p-skills-bg-left-right {
    display: block;
    -webkit-transform: scale(-1, 1) rotate(216deg);
            transform: scale(-1, 1) rotate(216deg);
    width: 61px;
    top: 782px;
    left: 181px;
  }
}

.p-skills-bg-bottom {
  -webkit-transform: rotate(226deg);
          transform: rotate(226deg);
  width: 88px;
  bottom: 4px;
  right: 11px;
}
@media screen and (min-width: 1200px) {
  .p-skills-bg-bottom {
    display: block;
    -webkit-transform: scale(-1, 1) rotate(135deg);
            transform: scale(-1, 1) rotate(135deg);
    width: 248px;
    bottom: 54px;
    right: 30px;
  }
}

.p-skills__content {
  max-width: 343px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 600px) {
  .p-skills__content {
    max-width: 1120px;
  }
}

.p-skills__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 16px;
}
@media screen and (min-width: 600px) {
  .p-skills__items {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media screen and (min-width: 900px) {
  .p-skills__items {
    gap: 32px;
  }
}

.p-skills-item {
  width: 343px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 20px 16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  border-radius: 4px;
  background: #fff;
}
@media screen and (min-width: 600px) {
  .p-skills-item {
    padding: 32px 24px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 38px;
    width: 352px;
  }
}

.p-skills-item__img {
  width: 100%;
  max-width: 75px;
}
@media screen and (min-width: 600px) {
  .p-skills-item__img {
    max-width: 96px;
    margin-left: auto;
    margin-right: auto;
  }
}

.p-skills-item__title {
  color: #ff6200;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6; /* 32px */
}
@media screen and (min-width: 600px) {
  .p-skills-item__title {
    text-align: center;
  }
}

.p-skills-item__text {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6; /* 24px */
  letter-spacing: 0.45px;
}
@media screen and (min-width: 900px) {
  .p-skills-item__text {
    margin-top: 8px;
    font-size: 16px;
    letter-spacing: 0.48px;
  }
}

.p-about {
  background: #fff1d9;
  padding-top: 52px;
  padding-bottom: 52px;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 900px) {
  .p-about {
    padding-top: 104px;
    padding-bottom: 104px;
  }
}

.p-about__picture {
  position: absolute;
  top: -78px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  overflow: hidden;
  z-index: 0;
  width: 723.75px;
}
@media screen and (min-width: 900px) {
  .p-about__picture {
    top: 43px;
    left: -76px;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    width: 100%;
  }
}
@media screen and (min-width: 1200px) {
  .p-about__picture {
    top: 15px;
    left: calc(50% - 758px);
    width: 1100px;
  }
}

.p-about__inner {
  position: relative;
  z-index: 10;
}
@media screen and (min-width: 900px) {
  .p-about__inner {
    padding-left: 30px;
  }
}

.p-about__header {
  margin-bottom: 44px;
}
@media screen and (min-width: 900px) {
  .p-about__header {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 56px;
    text-align: start;
    max-width: 923px;
  }
}
@media screen and (min-width: 1200px) {
  .p-about__header {
    max-width: 1134px;
  }
  .p-about__header .c-section-header__ja {
    padding-left: 24px;
  }
}

.p-about__content {
  margin-left: auto;
  margin-right: auto;
  width: 343px;
}
@media screen and (min-width: 600px) {
  .p-about__content {
    width: 400px;
  }
}
@media screen and (min-width: 900px) {
  .p-about__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    gap: 56px;
    width: 100%;
    max-width: 923px;
  }
}
@media screen and (min-width: 1200px) {
  .p-about__content {
    max-width: 1134px;
  }
}

.p-about__content-image {
  width: 40.2332361516%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 600px) {
  .p-about__content-image {
    width: 60%;
  }
}
@media screen and (min-width: 900px) {
  .p-about__content-image {
    width: 30.1587301587%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.p-about__content-items {
  margin-top: 40px;
}
.p-about__content-items .p-about__content-item:not(:first-child) {
  margin-top: 46px;
}
@media screen and (min-width: 900px) {
  .p-about__content-items {
    margin-top: 0;
    width: 100%;
    max-width: 736px;
  }
}

.p-about__content-body-title {
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}
@media screen and (min-width: 900px) {
  .p-about__content-body-title {
    font-size: 24px;
    margin-bottom: 20px;
  }
}

.p-about__content-body-text-wrap .p-about__content-body-text:not(:first-child) {
  margin-top: 20px;
}
@media screen and (min-width: 900px) {
  .p-about__content-body-text-wrap .p-about__content-body-text:not(:first-child) {
    margin-top: 16px;
  }
}

.p-about__content-body-text {
  font-size: 15px;
  line-height: 1.6; /* 24px */
  letter-spacing: 0.75px;
}
@media screen and (min-width: 900px) {
  .p-about__content-body-text {
    font-size: 16px;
    letter-spacing: 0.48px;
  }
}

.p-about__content-body-lists {
  padding-left: 16px;
}
@media screen and (min-width: 900px) {
  .p-about__content-body-lists {
    margin-top: 30px;
  }
}
.p-about__content-body-lists .p-about__content-body-list:not(:first-child) {
  margin-top: 23px;
}
@media screen and (min-width: 900px) {
  .p-about__content-body-lists .p-about__content-body-list:not(:first-child) {
    margin-top: 16px;
  }
}

.p-about__content-body-list {
  position: relative;
  line-height: 1.5;
}
.p-about__content-body-list::before {
  position: absolute;
  top: 8px;
  left: -16px;
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff6200;
}
@media screen and (min-width: 1200px) {
  .p-about__content-body-list {
    line-height: 0.9;
  }
  .p-about__content-body-list::before {
    position: absolute;
    top: 3px;
  }
}

.p-contact {
  background: url(../img/contact-bg.png) no-repeat center/cover;
  padding-top: 57px;
  padding-bottom: 52px;
  overflow: hidden;
}
@media screen and (min-width: 900px) {
  .p-contact {
    background: url(../img/contact-bg-pc.png) no-repeat center/cover;
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.p-contact__header {
  margin-bottom: 40px;
}
@media screen and (min-width: 900px) {
  .p-contact__header {
    margin-bottom: 60px;
  }
}

.p-contact__content-text {
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.48px;
}
@media screen and (min-width: 900px) {
  .p-contact__content-text {
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.48px;
  }
}

.hidden-pc {
  display: block;
}
@media screen and (min-width: 900px) {
  .hidden-pc {
    display: none;
  }
}

.hidden-pc-inline {
  display: inline-block;
}
@media screen and (min-width: 1200px) {
  .hidden-pc-inline {
    display: none;
  }
}

.p-contact__links {
  margin-top: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 28px;
}
@media screen and (min-width: 900px) {
  .p-contact__links {
    margin-top: 40px;
    gap: 39px;
  }
}

.p-contact__sns:nth-of-type(1) {
  width: 32px;
}
.p-contact__sns:nth-of-type(2) {
  width: 32px;
}
.p-contact__sns:nth-of-type(3) {
  width: 42px;
}
@media screen and (min-width: 900px) {
  .p-contact__sns:nth-of-type(1) {
    width: 52px;
  }
  .p-contact__sns:nth-of-type(2) {
    width: 51px;
  }
  .p-contact__sns:nth-of-type(3) {
    width: 59px;
  }
}

.p-footer__pagetop {
  padding-top: 22px;
  padding-bottom: 22px;
}
@media screen and (min-width: 900px) {
  .p-footer__pagetop {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.p-pagetop {
  display: none;
}
@media screen and (min-width: 900px) {
  .p-pagetop {
    z-index: 100;
    display: block;
    text-align: center;
    width: min(25%, 78px);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s, visibility 0.3s;
    transition: opacity 0.3s, visibility 0.3s;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 4.7222222222%;
    max-width: 68px;
  }
  .p-pagetop.is-show {
    opacity: 1;
    visibility: visible;
  }
}

.p-footer__bottom {
  padding-top: 13px;
  padding-bottom: 13px;
  background: #ffa000;
}
@media screen and (min-width: 900px) {
  .p-footer__bottom {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

.p-footer__bottom-inner {
  text-align: center;
}

.p-footer__copy-right {
  color: #fff;
  font-family: "Roboto", cursive;
  font-size: 12px;
  line-height: 1;
}

.p-works-page {
  background: #f5f5f5;
  margin-top: 64px;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 1200px) {
  .p-works-page {
    margin-top: 80px;
  }
}

.c-breadcrumb {
  position: absolute;
  top: 0px;
  left: 16px;
}
@media screen and (min-width: 1200px) {
  .c-breadcrumb {
    top: 13px;
    left: 160px;
  }
}

.p-works-page-bg-top,
.p-works-page-bg-bottom-left,
.p-works-page-bg-bottom-right {
  position: absolute;
}

.p-works-page-bg-top {
  -webkit-transform: rotate(38deg);
          transform: rotate(38deg);
  width: 21.3333333333%;
  max-width: 80px;
  top: -2px;
  right: 6px;
}
@media screen and (min-width: 1200px) {
  .p-works-page-bg-top {
    -webkit-transform: rotate(36deg);
            transform: rotate(36deg);
    max-width: 210px;
    top: 13px;
    right: -8px;
  }
}

.p-works-page-bg-bottom-left {
  -webkit-transform: rotate(-78deg);
          transform: rotate(-78deg);
  width: 56px;
  bottom: 2px;
  left: 3px;
}
@media screen and (min-width: 1350px) {
  .p-works-page-bg-bottom-left {
    display: block;
    width: 6.9444444444%;
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
    max-width: 100px;
    bottom: 65px;
    left: 0px;
    right: auto;
  }
}

.p-works-page-bg-bottom-right {
  display: none;
}
@media screen and (min-width: 1350px) {
  .p-works-page-bg-bottom-right {
    display: block;
    width: 4.4444444444%;
    -webkit-transform: rotate(37deg);
            transform: rotate(37deg);
    max-width: 64px;
    bottom: 21px;
    left: 78px;
  }
}

.p-works-page__inner {
  position: relative;
  z-index: 1;
}

.p-works-page__content {
  margin-left: auto;
  margin-right: auto;
  max-width: 1120px;
}

.c-tabbed-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  overflow: hidden;
}
@media screen and (min-width: 1200px) {
  .c-tabbed-content {
    margin-left: auto;
    margin-right: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 768px;
  }
}
@media screen and (min-width: 1150px) {
  .c-tabbed-content {
    max-width: 100%;
  }
}

.c-tabs {
  margin: 0 3px 0 0;
  padding: 0;
  line-height: normal;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
@media screen and (min-width: 1200px) {
  .c-tabs {
    margin: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 12px;
  }
}

.c-tab-link {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.56px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 11px 7px 11px 8px;
  background: #fff;
  cursor: pointer;
  border-radius: 0 12px 12px 0;
  border-top: 1px solid #ffc107;
  border-right: 1px solid #ffc107;
  border-bottom: 1px solid #ffc107;
}
.c-tab-link.current {
  background: #ffc107;
}
@media screen and (min-width: 1200px) {
  .c-tab-link {
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
    text-orientation: horizontal-tb;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 2.16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 13px 28px 13px 28px;
    margin-bottom: 0;
    border-radius: 16px 16px 0 0;
    border-top: 3px solid #ffc107;
    border-right: 3px solid #ffc107;
    border-left: 3px solid #ffc107;
  }
}

.p-margin-left2 {
  margin-left: 2px;
}

.c-tabs-wrapper {
  width: calc(100% - 28px);
  max-width: 379px;
}
@media screen and (min-width: 1200px) {
  .c-tabs-wrapper {
    width: 100%;
    max-width: 100%;
  }
}

.c-tab-content {
  display: none;
  background: #ffc107;
}
.c-tab-content.current {
  padding: 32px 16px 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (min-width: 1200px) {
  .c-tab-content.current {
    padding: 48px;
  }
}
@media screen and (min-width: 1150px) {
  .c-tab-content.current {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
  }
}
.c-tab-content *:first-child {
  margin-top: 0;
}
@media screen and (min-width: 900px) {
  .c-tab-content {
    min-height: 0;
  }
}

.c-tab-cont {
  display: none;
}
.c-tab-cont.current {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 1200px) {
  .c-tab-cont.current {
    padding: 48px;
  }
}

@media screen and (min-width: 900px) {
  .sp-only {
    display: none;
  }
}
.c-works-list-card__img img {
  width: 100%;
  border-radius: 8px 8px 0 0;
}
@media screen and (min-width: 1200px) {
  .c-works-list-card__img img {
    border-radius: 12px 12px 0 0;
  }
}

.c-works-list-card__body {
  padding: 16px 16px;
  background: #fff;
  border-radius: 0 0 8px 8px;
}
@media screen and (min-width: 1200px) {
  .c-works-list-card__body {
    padding: 16px 19px;
    border-radius: 0 0 12px 12px;
  }
}

.c-works-list-card__body-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
@media screen and (min-width: 1200px) {
  .c-works-list-card__body-tabs {
    gap: 12px;
  }
}

.c-works-list-card__body-tab {
  padding: 4px 8px;
  color: #ff6200;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.36px;
  border-radius: 4px;
  border: 1px solid #ff6200;
}
@media screen and (min-width: 1200px) {
  .c-works-list-card__body-tab {
    font-size: 14px;
    letter-spacing: 0.42px;
  }
}

.c-works-list-card__body-title {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.54px;
}
@media screen and (min-width: 1200px) {
  .c-works-list-card__body-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.6px;
  }
}

.c-works-list-card__body-text {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.6px;
}
@media screen and (min-width: 1200px) {
  .c-works-list-card__body-text {
    margin-top: 5px;
    font-size: 16px;
    letter-spacing: 0.48px;
  }
}

.p-works-page-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 343px;
  height: 562px;
  max-height: calc(100% - 20px);
  padding: 48px 12px 48px 16px;
  border-radius: 16px;
  border: none;
  z-index: 110;
  overflow: hidden;
}
@media screen and (min-width: 900px) {
  .p-works-page-modal {
    padding: 64px 53px 64px 56px;
    width: 85.5555555556%;
    max-width: 1232px;
    height: 696px;
    border-radius: 40px;
  }
}

.p-modal-bg {
  display: none;
  position: fixed;
  z-index: 109;
  background: rgba(106, 106, 106, 0.7);
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
@media screen and (min-width: 900px) {
  .p-modal-bg {
    background: rgba(108, 108, 108, 0.7);
  }
}

.p-works-page-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
}
@media screen and (min-width: 900px) {
  .p-works-page-modal__close {
    top: 36px;
    right: 36px;
  }
}

.p-works-page-modal__close-button {
  width: 32px;
  height: 32px;
  -webkit-box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.08);
          box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 9px;
  font-size: 14px;
  font-weight: 700;
  position: relative;
}
.p-works-page-modal__close-button::before, .p-works-page-modal__close-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px; /* 棒の幅（太さ） */
  height: 14px; /* 棒の高さ */
  background: #333; /* バツ印の色 */
}
.p-works-page-modal__close-button::before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.p-works-page-modal__close-button::after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}
@media screen and (min-width: 900px) {
  .p-works-page-modal__close-button {
    width: 48px;
    height: 48px;
    padding: 15px;
  }
  .p-works-page-modal__close-button::before, .p-works-page-modal__close-button::after {
    height: 18px; /* 棒の高さ */
  }
}

.p-works-page-modal__head {
  overflow: hidden;
}

.p-works-page-modal__head-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
@media screen and (min-width: 900px) {
  .p-works-page-modal__head-tabs {
    gap: 12px;
  }
}

.p-works-page-modal__head-tab {
  padding: 4px 8px;
  color: #ff6200;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 1.44px;
  border-radius: 4px;
  border: 1px solid #ff6200;
}
@media screen and (min-width: 900px) {
  .p-works-page-modal__head-tab {
    font-size: 14px;
    letter-spacing: 2.24px;
  }
}

.p-works-page-modal__head-title {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.72px;
}
@media screen and (min-width: 900px) {
  .p-works-page-modal__head-title {
    font-size: 32px;
    letter-spacing: 0.96px;
  }
}

.p-works-page-modal__body {
  margin-top: 20px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-right: 10px;
  overflow-y: auto; /* スクロール可能に */
  max-height: calc(100% - 86px);
}
@media screen and (min-width: 900px) {
  .p-works-page-modal__body {
    margin-top: 40px;
    max-height: calc(100% - 133px);
    padding-right: 87px;
  }
}

.p-works-page-modal__title {
  font-size: 16px;
  font-weight: 700;
}
@media screen and (min-width: 900px) {
  .p-works-page-modal__title {
    font-size: 20px;
  }
}

.p-works-page-modal__text {
  margin-top: 12px;
  font-size: 12px;
}
@media screen and (min-width: 900px) {
  .p-works-page-modal__text {
    font-size: 14px;
  }
}
@media screen and (min-width: 1200px) {
  .p-works-page-modal__text {
    font-size: 14px;
  }
}

.p-grid-container {
  display: grid;
  gap: 28px;
}
@media screen and (min-width: 900px) {
  .p-grid-container {
    gap: 40px;
  }
}

/* SPレイアウト（デフォルト） */
.p-grid-container {
  grid-template-areas: "a" "d" "b" "c";
}
@media screen and (min-width: 900px) {
  .p-grid-container {
    grid-template-rows: 299px 299px 400px;
    grid-template-areas: "d a" "d b" "d c";
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}
@media screen and (min-width: 1200px) {
  .p-grid-container {
    grid-template-columns: 1fr 440px;
    grid-template-rows: 299px 299px 400px;
    grid-template-areas: "d a" "d b" "d c";
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}

.p-item img {
  border-radius: 16px;
}
@media screen and (min-width: 1200px) {
  .p-item img {
    border-radius: 24px;
  }
}

.p-item-a {
  grid-area: a;
}

.p-item-b {
  grid-area: b;
}

.p-item-c {
  grid-area: c;
}

.p-item-d {
  grid-area: d;
  text-align: left;
}

/* スクロールバーの見た目（任意） */
.p-works-page-modal__body::-webkit-scrollbar {
  width: 8px;
}
@media screen and (min-width: 900px) {
  .p-works-page-modal__body::-webkit-scrollbar {
    width: 12px;
  }
}

.p-works-page-modal__body::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.p-works-page-modal__body-content-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 48px;
}
@media screen and (min-width: 900px) {
  .p-works-page-modal__body-content-wrap {
    gap: 60px;
  }
}

.p-works-page-modal__body-heading {
  padding-left: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.54px;
  background: transparent; /*背景透明に*/
  border-left: solid 3px #ff6200; /*左線*/
}
@media screen and (min-width: 900px) {
  .p-works-page-modal__body-heading {
    padding-left: 12px;
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: 0.6px;
  }
}

.p-works-page-modal__body-boxes {
  margin-top: 28px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
@media screen and (min-width: 900px) {
  .p-works-page-modal__body-boxes {
    margin-top: 32px;
  }
}

.p-works-page-modal__body-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
}

.p-works-page-modal__body-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.6px;
}
@media screen and (min-width: 900px) {
  .p-works-page-modal__body-title {
    font-size: 16px;
    letter-spacing: 0.48px;
  }
}

.p-works-page-modal__body-text {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.45px;
}
@media screen and (min-width: 900px) {
  .p-works-page-modal__body-text {
    font-size: 16px;
    letter-spacing: 0.48px;
  }
}

.p-works-page-modal__body-url {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
}

.p-works-page-modal__body-url-text {
  color: #06c;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.45px;
}
@media screen and (min-width: 900px) {
  .p-works-page-modal__body-url-text {
    font-size: 16px;
    letter-spacing: 0.48px;
  }
}

.p-works-page-modal__body-link-img {
  width: 18px;
}

.p-works-page-modal__body-list {
  position: relative;
  padding-left: 12px;
}
.p-works-page-modal__body-list::before {
  content: "";
  position: absolute;
  background: #ff6200;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 50%;
  left: 0px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.p-error404 {
  margin-top: 60px;
  padding-top: 64px;
  padding-bottom: 64px;
  background: #fff1d9;
  position: relative;
}
@media screen and (min-width: 900px) {
  .p-error404 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media screen and (min-width: 1200px) {
  .p-error404 {
    margin-top: 80px;
  }
}

.c-bg {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
@media screen and (min-width: 900px) {
  .c-bg {
    max-width: 1408px;
  }
}

.c-bg__inner {
  position: relative;
  height: 100%;
}
@media screen and (min-width: 1200px) {
  .c-bg__inner {
    overflow: hidden;
  }
}

.p-error404-bg-top {
  position: absolute;
  width: 32%;
  top: 0;
  right: 4px;
}
@media screen and (min-width: 1200px) {
  .p-error404-bg-top {
    width: 30.46875%;
    max-width: 429px;
    top: -2px;
    right: 1px;
  }
}

.p-error404-bg-bottom {
  position: absolute;
  bottom: -2px;
  left: 4px;
  width: 17.0666666667%;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
@media screen and (min-width: 900px) {
  .p-error404-bg-bottom {
    width: 23.3333333333%;
  }
}
@media screen and (min-width: 1200px) {
  .p-error404-bg-bottom {
    width: 24.9305555556%;
    max-width: 359px;
    bottom: -3px;
    left: 0px;
  }
}

.p-error404__inner {
  padding-left: 16px;
  padding-right: 16px;
}

.p-error404__content {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 343px;
}
@media screen and (min-width: 900px) {
  .p-error404__content {
    max-width: 660px;
  }
}

.p-error404__heading {
  font-family: "Roboto", cursive;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  line-height: 1;
  font-weight: 400;
}

.p-error404__heading-large {
  font-size: 40px;
}
@media screen and (min-width: 900px) {
  .p-error404__heading-large {
    font-size: 64px;
  }
}

.p-error404__heading-small {
  font-size: 32px;
}
@media screen and (min-width: 900px) {
  .p-error404__heading-small {
    font-size: 40px;
  }
}

.p-error404__body {
  margin-top: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 25px;
}
@media screen and (min-width: 900px) {
  .p-error404__body {
    margin-top: 63px;
    gap: 32px;
  }
}

.p-error404__body-title {
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  line-height: 1; /* 22px */
}
@media screen and (min-width: 900px) {
  .p-error404__body-title {
    font-size: 24px;
    line-height: 1.6; /* 38.4px */
    letter-spacing: 0.72px;
  }
}

.p-error404__body-text {
  font-size: 16px;
  line-height: 1.8;
}
@media screen and (min-width: 900px) {
  .p-error404__body-text {
    font-size: 20px;
    letter-spacing: 0.6px;
  }
}

.p-error404__button {
  text-align: center;
}

.l-error404__button {
  margin-top: 40px;
}
@media screen and (min-width: 900px) {
  .l-error404__button {
    margin-top: 56px;
  }
}

.c-button-error404 {
  display: inline-block;
  width: 280px;
  padding: 16px 92px 16px 132px;
  vertical-align: middle;
  border-radius: 30px;
  background: #ff6200;
  color: #fff;
  font-family: "genjyuu", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.54px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  position: relative;
}
.c-button-error404::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 92px;
  width: 20px;
  height: 20px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: url(../img/home-icon.png) no-repeat center/contain;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
@media screen and (min-width: 1200px) {
  .c-button-error404:hover {
    background: rgba(255, 98, 0, 0.7);
  }
}

.p-page_list li,
.p-page_list-lp li,
.p-page_list-web li,
.p-page_list-fictitious li {
  display: none;
}

.p-page_list li.on,
.p-page_list-lp li.on,
.p-page_list-web li.on,
.p-page_list-fictitious li.on {
  display: block;
  width: 100%;
  max-width: 320px;
}

.c-pagination .number > a.active,
.c-pagination-lp .number > a.active,
.c-pagination-web .number > a.active,
.c-pagination-fictitious .number > a.active {
  background-color: #6a6a6a;
  color: #fff;
}

/* ココから先は見た目のスタイルなのであまり重要ではありません。
　　自由にデザインなど変更して貰えればと思います。 */
.p-page_list,
.p-page_list-lp,
.p-page_list-web,
.p-page_list-fictitious {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.p-page_list li:not(:nth-of-type(3n + 1)),
.p-page_list-lp li:not(:nth-of-type(3n + 1)),
.p-page_list-web li:not(:nth-of-type(3n + 1)),
.p-page_list-fictitious li:not(:nth-of-type(3n + 1)) {
  margin-top: 24px;
}
@media screen and (min-width: 1200px) {
  .p-page_list li:not(:nth-of-type(3n + 1)),
  .p-page_list-lp li:not(:nth-of-type(3n + 1)),
  .p-page_list-web li:not(:nth-of-type(3n + 1)),
  .p-page_list-fictitious li:not(:nth-of-type(3n + 1)) {
    margin-top: 0;
  }
}
@media screen and (min-width: 1200px) {
  .p-page_list,
  .p-page_list-lp,
  .p-page_list-web,
  .p-page_list-fictitious {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 32px;
    -ms-flex-item-align: stretch;
        align-self: stretch;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
  }
}

.c-pagination,
.c-pagination-lp,
.c-pagination-web,
.c-pagination-fictitious {
  background-color: #f5f5f5;
  padding-top: 40px;
  padding-right: 10px;
  margin-top: 32px;
  margin-left: -18px;
  margin-right: -18px;
  font-family: Roboto;
  font-size: 18px;
  line-height: 1.5; /* 27px */
  letter-spacing: 0.54px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 5px;
}
@media screen and (min-width: 1200px) {
  .c-pagination,
  .c-pagination-lp,
  .c-pagination-web,
  .c-pagination-fictitious {
    display: none;
  }
}

.c-pagination .number,
.c-pagination-lp .number,
.c-pagination-web .number,
.c-pagination-fictitious .number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 24px;
}

.c-pagination a,
.c-pagination-lp a,
.c-pagination-web a,
.c-pagination-fictitious a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: #ffffff;
  border: solid 1px #6a6a6a;
  border-radius: 50%;
  padding: 10px 0;
}

.u-smooth {
  clip-path: inset(0 100% 0 0);
  display: inline-block;
  -webkit-transition: 1.8s cubic-bezier(0.37, 0, 0.63, 1);
  transition: 1.8s cubic-bezier(0.37, 0, 0.63, 1);
  -webkit-transition-property: clip-path;
  transition-property: clip-path;
}

.u-smooth.is-animated {
  clip-path: inset(0);
}

.u-fade-in-up {
  opacity: 0;
  -webkit-transform: translateY(48px);
          transform: translateY(48px);
  -webkit-transition: opacity 2s, -webkit-transform 1s;
  transition: opacity 2s, -webkit-transform 1s;
  transition: opacity 2s, transform 1s;
  transition: opacity 2s, transform 1s, -webkit-transform 1s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.u-fade-in-up.is-in-view {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.u-pop-up {
  opacity: 0;
  -webkit-transform: translateY(48px);
          transform: translateY(48px);
  scale: 0.8;
  -webkit-transition: opacity 1s, scale 1s, -webkit-transform 1s;
  transition: opacity 1s, scale 1s, -webkit-transform 1s;
  transition: opacity 1s, transform 1s, scale 1s;
  transition: opacity 1s, transform 1s, scale 1s, -webkit-transform 1s;
}
.u-pop-up.is-in-view {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  scale: 1;
}

.u-fade-in {
  opacity: 0;
  -webkit-transition: opacity 1.5s;
  transition: opacity 1.5s;
}
.u-fade-in.is-in-view {
  opacity: 1;
}