@charset "UTF-8";
/* -------------------------------- */
/* -------- front-page.php -------- */
/* -------------------------------- */
.display__o1696 {
  display: none;
}
.display__u1024 {
  display: none;
}
.display__o768 {
  display: block;
}
.display__o768.section__flex--row {
  display: flex;
}
.display__o768--grid {
  display: grid;
}
.display__u768 {
  display: none;
}
.display__o500 {
  display: block;
}
.display__u500 {
  display: none;
}
/* -------- section 関連 -------- */
section#services,
section#works__abst,
section#contact {
  padding: 80px 0 120px;
}
section#works__abst,
section#services {
  height: fit-content;
}

.section__flex--row {
  display: flex;
}
.section__title--container {
  align-items: center;
  display: flex;
  margin: 40px 0;
}
.section__title::before {
  background-color: var(--base-gray);
  content: "";
  display: inline-block;
  height: 0.75px;
  margin-right: 8px;
  vertical-align: middle;
  width: 96px;
}
.contact__box--title .section__title::before {
  display: none;
}

.before__title {
  content: "";
  width: calc((var(--vw) * 100 - 1600px) / 2);
  margin-right: 16px;
  border-bottom: 1px solid var(--base-gray);
}
h3.section__title {
  margin-right: 40px;
}
.title__accent {
  color: var(--corporate-red);
}

/* ------ hero area ------ */
.hero-area {
  background-image: url(../images/top/cover__img--01.jpg);
  background-position: left bottom;
  background-size: cover;
  height: calc(var(--vh) * 100);
  height: 100vh;
  position: relative;
}
.catchcopy__container {
  align-items: flex-end;
  color: var(--base-white);
  display: flex;
  height: calc(var(--vh) * 100);
  height: 100vh;
}
.hero-area__layer {
  background-color: rgba(17, 17, 17, 0.48);
  height: calc(var(--vh) * 64);
  position: relative;
  width: calc(var(--vw) * 56);
}
.catchcopy__box {
  width: fit-content;
  display: flex;
  position: absolute;
  transform: translateX(-50%);
  left: calc(100% - clamp(2.25rem, 1.931rem + 1.31vw, 3.5rem));
  top: clamp(-3.375rem, -3.298rem + -0.32vw, -3.5rem);
  flex-direction: row;
  align-items: flex-start;
}
.catchcopy__subcontainer {
  display: flex;
  line-height: 1.2;
  /* max 56px min 36px */
  font-size: clamp(2.25rem, 1.931rem + 1.31vw, 3.5rem);
  font-weight: 500;
}
.cc__container--02 {
  width: fit-content;
  padding-top: 12px;
}
.cc__container--02 p {
  display: inline-block;
  white-space: nowrap;
  width: fit-content;
}
.cc__p-and-cell {
  display: flex;
  position: relative;
}
.catchcopy__p--handwriting {
  left: -16px;
  font-family: "ta-kobe", sans-serif;
  position: absolute;
  transform: rotate(357deg);
}
.catchcopy__cell {
  border: 1px solid #fefefe;
  display: inline-block;
  height: 56px;
  width: 220px;
  position: relative;
}
.cc__container--01 .catchcopy__p {
  line-height: 0.5;
}
.catchcopy__p--vertical {
  line-height: 0.7;
  writing-mode: vertical-lr;
}
.cc__container--02 p.catchcopy__p {
  margin-top: var(--px-8);
}
.catchcopy__p span {
  font-size: larger;
  margin-left: -6.4px;
}

/* ------ infobar ------ */
.infobar {
  align-items: center;
  background-color: var(--base-white);
  border: 0.5px solid var(--base-gray);
  bottom: 0;
  display: flex;
  height: 80px;
  position: absolute;
  width: 60%;
}
.infobar__header {
  align-items: center;
  background-color: var(--base-black);
  color: var(--base-white);
  display: flex;
  height: 100%;
  min-width: 160px;
}
.infobar__title {
  padding-right: 32px;
}
.infobar__title::before {
  background-color: var(--corporate-red);
  content: "";
  display: inline-block;
  height: 2px;
  margin-right: 8px;
  vertical-align: middle;
  width: 54px;
}
.infobar__contents {
  align-items: center;
  display: flex;
  padding: 24px;
  overflow: hidden;
  width: calc(100% - 88px);
}
.infobar__contents ul {
  position: relative;
  width: 100%;
}
.infobar__contents div {
  display: inline-block;
  transition: transform 5s linear;
  white-space: nowrap;
  width: auto;
}
.ticker__item {
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
}
.ticker__tag,
.ticker__date,
.ticker__title {
  margin-right: 16px;
}
.fadeInDown {
  opacity: 0;
}
.fadeInDown.run {
  animation: fadeInDown 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.fadeOutDown {
  opacity: 1;
}
.fadeOutDown.run {
  animation: fadeOutDown 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(30px);
  }
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.infobar__more {
  margin: 0 16px 0 24px;
}
.infobar__more--span {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 0;
  top: 50%;
  color: var(--base-gray);
  transition: 0.25s;
}
a:hover .infobar__more--span {
  color: var(--corporate-red);
  left: 24px;
  transition: 0.3s;
}
.infobar .link__circle--height {
  width: inherit;
}
/* ------ COMPANY ------ */
/* vertical slider */
.vertical-slider__container {
  display: grid;
  height: calc(var(--vh) * 100);
  max-height: 100dvh;
  position: relative;
  width: 230px;
  z-index: 2;
}
.vertical-slider__container::before {
  background-color: rgba(255, 255, 255, 0.32);
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 3;
}
.vertical-slider {
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
}
.vertical-slider__list {
  display: flex;
  flex-direction: column-reverse;
  margin: 0;
  padding: 0;
  align-items: center;
  animation: slideShow 60s infinite linear;
  list-style: none;
}
.vertical-slider__item {
  width: 230px;
  height: 290px;
}
.vertical-slider__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vertical-slider:hover .vertical-slider__list {
  animation-play-state: paused;
}
@keyframes slideShow {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
#company {
  background-color: var(--base-white);
}
#company .section__title::before {
  width: 125px;
}
#conpany .section__title--container {
  margin: 0;
  position: absolute;
  z-index: 2;
}
.horizontal-slider {
  overflow-x: hidden;
  position: relative;
  width: 100%;
  padding-top: 80px;
}
.company__box--wrapper {
  background-image: url("../images/top/company__bg--text01.png"), url("../images/top/company__bg--text02.png");
  background-repeat: repeat-x, repeat-x;
  background-size: 80%;
  background-position: left -8% top, left -8% bottom;
  display: flex;
  margin-top: 40px;
  padding: 80px 240px 80px 0;
  position: absolute;
}
.company__box--wrapper .company__box:nth-child(2n) {
  align-self: flex-end;
}
.company__box--wrapper .company__box:last-child {
  align-self: center;
}
.company__box {
  background-color: var(--base-white);
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  height: 320px;
  justify-content: space-between;
  margin-left: 160px;
  padding: 54px 32px;
  width: 430px;
}
.company__box--first {
  padding-left: 104px;
  margin-left: 160px;
}
.company__box--first .flex__row {
  background-color: var(--base-white);
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  height: 320px;
  justify-content: space-between;
  width: 430px;
}
.company__box--first .company__box {
  background-color: unset;
  box-shadow: unset;
  height: auto;
  margin-left: 0;
  padding: 54px 32px;
  width: auto;
}
.message__img {
  background-image: url(../images/top/message__img--a.jpg);
  background-size: cover;
  width: 45%;
}
.company__box .title--jp {
  color: var(--base-gray);
  font-weight: 400;
}
.company__box h4.title--en {
  letter-spacing: 0.025em;
}
.company__box p {
  margin-top: 24px;
  line-height: 1.7;
}
.company__box--inbox {
  margin-bottom: 24px;
}
.company__copy {
  line-height: 1.7;
  margin-top: 48px;
}
.company__copy p:first-child {
  margin-bottom: 20px;
}
.company__box.box--bgimg {
  align-items: flex-end;
  background-image: url(../images/top/kochi-view.jpg);
  background-position-y: center;
  object-fit: cover;
}
.company__box.box--bgimg h5.title--jp {
  color: var(--base-white);
}
.company__box.box--bgimg .link__circle--width {
  border: 0.5px solid var(--base-white);
}
.company__box.box--bgimg .link__circle--width:hover {
  border: 0.5px solid var(--base-white);
  background-color: var(--base-white);
}
.company__box.box--bgimg .link__arrow,
.company__box.box--bgimg .link__arrow:before {
  background-color: var(--base-white);
}
.company__box.box--bgimg:hover .link__arrow,
.company__box.box--bgimg:hover .link__arrow:before {
  background-color: var(--base-black);
}
.company__box.box--img {
  background-image: url(../images/top/company__bld--s.jpg);
}
.company__box--set {
  height: 528px;
  justify-content: space-between;
}
.company__box.set--box {
  height: 220px;
}

/* ------ SERVICES ------ */
#services {
  background-color: var(--base-lgray);
}
.services__bg {
  background-color: rgba(255, 255, 255, 0.72);
  background-blend-mode: lighten;
  background-image: url(../images/top/services__bg.jpg);
  background-position: center;
  background-size: 100%, auto;
  object-fit: cover;
}
.services__wrapper {
  display: flex;
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 56px;
}
.services__copy {
  margin: 56px 133px 56px 110px;
}
.services__container {
  display: flex;
  flex-direction: column;
  width: 50%;
  z-index: 2;
}
.services__container.sv__container--02 {
  flex-direction: row;
  flex-wrap: wrap;
}
.services__boxes--wrap {
  display: flex;
}
.services__box {
  border: solid var(--base-white);
}
a.services__box--alink {
  align-items: flex-end;
  background-color: rgba(155, 145, 145, 0.4);
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.services__box.box--a {
  border-width: 0.5px 0.25px 0.25px 0.5px;
}
.services__box.box--b {
  border-width: 0.5px 0.25px 0.25px 0.25px;
}
.services__box.box--c {
  border-width: 0.25px 0.25px 0.5px 0.5px;
}
.services__box.box--d {
  border-width: 0.25px 0.25px 0.5px 0.25px;
}
.services__box.box--e {
  border-width: 0.5px 0.25px 0.25px 0.25px;
}
.services__box.box--f {
  border-width: 0.5px 0.5px 0.5px 0.25px;
}
.services__box.box--g {
  border-width: 0.25px 0.25px 0.5px 0.25px;
}
.services__box.box--a,
.services__box.box--d {
  width: 47.44%;
}
.services__box.box--b,
.services__box.box--c,
.services__box.box--f {
  width: 52.56%;
}
.services__boxes--wrap.flex__column {
  width: 47.44%;
}
.services__box.box--e,
.services__box.box--g {
  height: 100%;
}
.box__padding--upper {
  padding-top: 72px;
  padding-bottom: 40px;
}
.box__padding--lower {
  padding-top: 40px;
  padding-bottom: 72px;
}
.services__box.box--b a,
.services__box.box--d a,
.services__box.box--f a {
  align-items: flex-start;
}
.services__box.box--f a {
  justify-content: center;
}
.services__box.box--f {
  display: flex;
}
.services__name {
  border-bottom: 0.75px solid var(--base-white);
  display: flex;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 40px;
}
.box--a .services__name,
.box--b .services__name {
  margin-bottom: 0;
}
.box--a .customer__needs,
.box--b .customer__needs {
  margin-bottom: 40px;
}
.box--b .services__name,
.box--c .services__name,
.box--e .services__name,
.box--g .services__name {
  border-bottom: 0.75px solid rgba(41, 36, 36, 0.72);
}
.box--b .services__name::before,
.box--d .services__name::before,
.box--f .services__name::before {
  content: "";
  background-color: rgba(41, 36, 36, 0.72);
  display: block;
  margin-right: 8px;
  width: 16px;
}
.box--a .services__name::after,
.box--c .services__name::after,
.box--e .services__name::after,
.box--g .services__name::after {
  content: "";
  background-color: rgba(41, 36, 36, 0.72);
  display: block;
  margin-left: 8px;
  width: 16px;
}
.box--a .services__name::after,
.box--d .services__name::before,
.box--f .services__name::before {
  background-color: var(--base-white);
}
.box--a .customer__needs,
.box--c .customer__needs,
.box--e .customer__needs,
.box--g .customer__needs {
  transition: all 0.3s;
  padding-right: 16px;
  text-align: end;
}
.box--b .customer__needs,
.box--d .customer__needs,
.box--f .customer__needs {
  transition: all 0.3s;
  padding-left: 16px;
}
.box--a > .services__box--alink:hover,
.box--d > .services__box--alink:hover,
.box--f > .services__box--alink:hover {
  background-color: rgba(217, 0, 0, 0.72);
  color: var(--base-white);
  opacity: 1;
  transition: background 0.3s, color 0.05s, opacity 0.3s;
}
.box--b > .services__box--alink:hover,
.box--g > .services__box--alink:hover {
  background-color: rgba(254, 254, 254, 0.72);
  opacity: 1;
  color: var(--base-black);
  transition: background 0.3s, color 0.05s, opacity 0.3s;
}
.box--c > .services__box--alink:hover,
.box--e > .services__box--alink:hover {
  background-color: rgba(41, 36, 36, 0.64);
  color: var(--base-white);
  opacity: 1;
  transition: background 0.3s, color 0.05s, opacity 0.3s;
}
.box--a > .services__box--alink:hover .customer__needs,
.box--c > .services__box--alink:hover .customer__needs,
.box--e > .services__box--alink:hover .customer__needs,
.box--g > .services__box--alink:hover .customer__needs {
  padding-right: 24px;
  transition-property: padding 0.3s;
}
.box--b > .services__box--alink:hover .customer__needs,
.box--d > .services__box--alink:hover .customer__needs,
.box--f > .services__box--alink:hover .customer__needs {
  padding-left: 24px;
  transition-property: padding 0.3s;
}

/* ------ CASE&STUDY ------ with INFO and TOPICS */
.works__wrapper,
.news__wrapper {
  padding: 0 calc((var(--vw) * 100 - 1600px) / 2 - 16px);
  max-width: 1600px;
  margin: 0 auto;
}
.works__latest--box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.works__latest--box .works__thumbnail--large {
  width: 48%;
}
.works__latest--box .works__thumbnail--large img {
  width: 100%;
  aspect-ratio: 4 / 3;
}
.figcap__inwrap {
  display: flex;
  justify-content: space-between;
}
.works__latest--box .works__thumbnail--large .figcap__inner .archive__item--linkbtn {
  margin-right: 8px;
  height: fit-content;
}
.figcap__inner {
  display: flex;
  flex-direction: row;
}
.figcap__inner.figcap__text {
  padding-right: 8px;
}
.archive__item--title {
  margin-bottom: 16px;
}
.archive__tags--container {
  display: flex;
  flex-wrap: wrap;
}
.archive__tag {
  color: var(--base-gray);
  margin-right: var(--px-4);
}
.archive__item--linkbtn,
.detail__link {
  display: inline-block;
  border: 0.5px solid var(--base-gray);
  text-align: center;
  height: fit-content;
}
.archive__item--linkbtn,
.detail__link {
  margin-bottom: 8px;
}
.detail__link {
  margin-bottom: 0;
}
.detail__link a {
  padding: 8px 40px 8px 24px;
}
.splide__slide.works__thumbnail {
  width: min-content;
}
.splide__slide.works__thumbnail .detail__link {
  margin-bottom: 0;
}
.archive__item--linkbtn .link__arrow,
.detail__link .link__arrow {
  position: absolute;
}
.works__thumbnail--large .archive__item--linkbtn .link__arrow span,
.works__thumbnail--large .archive__item--linkbtn .link__arrow span::before,
.works__thumbnail--large .archive__item--linkbtn .link__arrow span::after,
.works__thumbnail--large .detail__link .link__arrow span::before,
.works__thumbnail--large .detail__link .link__arrow span::after {
  background-color: var(--base-black);
}
.detail__link .link__arrow span {
  transform: none;
  margin-top: -1.6px;
  background-color: transparent;
}
.archive__item--linkbtn.detail__link .link__arrow span {
  transform: rotate(-45deg);
  margin-top: 4.8px;
  background-color: var(--base-gray);
}

.archive__item--linkbtn:hover .link__arrow span {
  margin-left: 8px;
  margin-top: 1.6px;
}
.detail__link:hover .link__arrow span {
  margin-left: 10px;
  margin-top: -1.6px;
}
.works__container .archive__item--linkbtn,
.works__container .detail__link {
  border: 0.5px solid var(--base-gray);
}
.works__container .archive__item--linkbtn a,
.works__container .detail__link a {
  color: var(--base-gray);
}
.works__container .link__arrow span::before,
.link__arrow span::after {
  background-color: var(--base-gray);
}
.splide__wrapper {
  overflow: hidden; /* 親要素でhiddenにする */
}
.splide__track {
  overflow: visible; /* はみ出させるように visible で上書き */
}
.splide__slide figure {
  width: 180px;
  height: 255px;
  position: relative;
}
.splide__slide figure .slide__links--container {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.splide__slide figure .slide__links--container .archive__item--linkbtn {
  margin-bottom: 4px;
}
/* ------ INFO and TOPICS ------ */
#info_topics {
  margin-bottom: 160px;
}

/* pagenation */
.splide-controller {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 32px;
}
.morebtn__container {
  margin-top: 80px;
  min-width: 106px;
  display: flex;
  justify-content: center;
}
.splide__pagination.splide__pagination--custom {
  position: inherit;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 8px;
  margin: 0 auto 0 0;
  text-align: center;
  justify-content: flex-start;
  font-size: 0;
  > li {
    font-size: 0; /* liタグの下にある余白を消すため */
  }
}
.splide__arrows.splide__arrows--custom {
  display: flex;
  gap: 40px;
}
.splide.works__container .splide__pagination__page {
  width: 16px;
  height: 3px;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  vertical-align: top;
  background-color: var(--base-gray);
}
.splide.works__container .splide__pagination__page.is-active {
  width: 32px;
  background-color: var(--corporate-red);
}
.splide__arrow > svg {
  display: none;
}
.splide__arrow--prev.splide__custom--prev,
.splide__arrow--next.splide__custom--next {
  top: inherit;
  transform: inherit;
  display: grid;
  place-content: center;
  width: 64px;
  height: 64px;
  cursor: pointer;
  transition: 0.8s cubic-bezier(0.2, 1, 0.2, 1);
  background-color: var(--base-lgray);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  margin: 0;
}
.splide__arrow--prev::after,
.splide__arrow--next::after {
  width: 12px;
  height: 12px;
  content: "";
  border: solid var(--base-gray);
  border-width: 3px 3px 0 0;
}
.splide__arrow--prev::after {
  margin-left: 0.4rem;
  transform: rotate(-135deg);
}
.splide__arrow--next::after {
  margin-right: 0.4rem;
  transform: rotate(45deg);
}
.splide__arrow:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.splide__slide a {
  display: block;
  max-width: 100%;
  height: 100%;
}
.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------ CONTACT ------ */
section#contact {
  background-color: var(--base-lgray);
  padding-bottom: 0;
}
.contact__wrapper {
  display: flex;
  flex-direction: column;
  padding-left: 10%;
  position: relative;
}
.contact__img {
  background-image: url(../images/top/contact__img.jpg);
  background-position: center;
  background-size: cover;
  left: 0;
  height: 60%;
  position: absolute;
  top: 0;
  width: 88%;
  z-index: 1;
}
.contact__container {
  background-color: var(--base-white);
  height: 540px;
  margin-top: 12.5%;
  padding-right: 5.6%;
}
.contact__box {
  align-items: flex-end;
  display: flex;
  height: 100%;
  padding: 7.2%;
}
.contact__box.box__recruit {
  background-color: rgba(217, 0, 0, 0.8);
  width: 50%;
}
.contact__box.box__tel {
  background-color: var(--base-white);
  width: 50%;
}
.contact__box .flex__row {
  height: 40%;
}
.contact__box--p {
  border-left: 0.5px solid var(--base-white);
  padding: 0 0 40px 32px;
}
.contact__box--p span {
  display: inline-block;
}
.box__tel .contact__box--p {
  border-left: 0.5px solid var(--base-black);
}
.box__tel a:hover {
  opacity: 1;
}
.tel-to {
  margin-top: 24px;
  white-space: nowrap;
}

/* --------------------------------------- */
/* ------------ メディアクエリ ------------ */
/* --------------------------------------- */
/* --------- min --------- */
@media screen and (width > 769px) {
  /* CASE&STUDY */
  .splide__slide figure {
    width: 240px;
    height: 388px;
  }
}
@media screen and (width > 1024px) {
}
@media screen and (width > 1280px) {
  /* FIRST VIEW -hero area */
  .hero-area {
    background-position: left top;
  }
}
@media screen and (width > 1440px) {
  /* FIRST VIEW -hero area */
  .hero-area {
    background-position: left bottom 20%;
  }
  .hero-area__layer {
    height: calc(var(--vh) * 68);
  }
  .hero-area__layer {
    height: clamp(45rem, 33.75rem + 12.5vw, 48.75rem);
  }
}
@media screen and (width > 1696px) {
  #services .section__title::before,
  #works__abst .section__title::before,
  #info_topics .section__title::before {
    display: none;
  }
  .services__copy {
    margin: 56px 0;
    max-width: 1600px;
    padding-left: calc((var(--vw) * 100 - 1600px) / 2 + 16px);
  }
  /* CASE&STUDY */
  .works__wrapper,
  .news__wrapper {
    padding: 0 56px;
  }
  .splide__slide figure {
    width: 280px;
    height: 453px;
  }
}
@media screen and (width > 1920px) {
  /* FIRST VIEW -hero area */
  .hero-area__layer {
    height: clamp(52rem, 25rem + 22.5vw, 61rem);
  }
  .catchcopy__subcontainer {
    /* max 64px min 56px */
    font-size: clamp(2.8125vw, 1.5rem + 1.56vw, 2.5vw);
    line-height: 1.5;
  }
  .catchcopy__p--handwriting {
    left: -22px;
  }
  .catchcopy__cell {
    height: clamp(5rem, 3rem + 1.67vw, 6rem);
    width: clamp(10.9375vw, -2.5rem + 16.67vw, 17.1875vw);
  }
}
@media screen and (width > 1920px) and (height < 1080px) {
  /* 横幅1920pxより大、かつ高さ1080px以下の場合 */
  .hero-area__layer {
    height: clamp(62vh, 1.5648% + 54vh, 54vh);
    height: clamp(calc(var(--vh) * 54), -1.5638% + calc(var(--vh) * 64), calc(var(--vh) * 64));
  }
  .cc__container--02 {
    align-self: flex-end;
  }
  .catchcopy__p--vertical {
    line-height: inherit;
    writing-mode: inherit;
  }
}
/* --------- max --------- */
@media screen and (width <= 1920px) {
  .hero-area__layer {
    height: clamp(41rem, 20rem + 23.33vw, 48rem);
  }
  .catchcopy__cell {
    width: clamp(16.25rem, 15.931rem + 1.31vw, 17.5rem);
    height: clamp(4rem, 2.857rem + 1.79vw, 5rem);
  }
}
@media screen and (width <= 1920px) and (height > 1080px) {
  .hero-area__layer {
    height: clamp(45rem, 40.323rem + 9.73vw, 52rem);
  }
}

@media screen and (width <= 1696px) {
  /* SERVICES */
  .services__wrapper {
    padding: 0;
  }
  /* CASE&STUDY */
  .works__wrapper,
  .news__wrapper {
    padding: 0 112px;
  }
}
@media screen and (width <= 1440px) {
  /* FIRST VIEW -hero area */
  .hero-area__layer {
    height: clamp(34rem, -14rem + 60vw, 40rem);
  }
  .infobar {
    width: 72%;
  }
}
@media screen and (width <= 1440px) and (height > 900px) {
  /* 横幅1440px以下、かつ高さ900px以上の場合 */
  .hero-area__layer {
    height: 45.5rem;
  }
}
@media screen and (width <= 1336px) {
  /* CASE&STUDY */
  .works__latest--box {
    flex-direction: column;
  }
  .works__latest--box .works__thumbnail--large {
    width: 100%;
  }
  .works__thumbnail--large {
    margin-bottom: 40px;
  }
}
@media screen and (width <= 1280px) {
  /* SERVICES */
  .services_bg {
    background-size: auto;
    background-position: top right;
  }
  .services__wrapper {
    flex-direction: column;
  }
  .services__container {
    width: 100%;
  }
  /* CONTACT */
  .contact__box {
    padding: 6.4%;
  }
  .contact__box.box__recruit {
    width: 46%;
  }
}
@media screen and (width <= 1024px) {
  /* FIRST VIEW -hero area */
  .hero-area {
    height: calc(100vh - 80px);
  }
  .infobar {
    width: 100%;
  }
  .catchcopy__subcontainer.cc__container--01 {
    align-items: center;
    top: clamp(-3.375rem, -3.298rem + -0.32vw, -3.5rem);
  }
  .catchcopy__cell {
    width: clamp(12.5rem, 10.69rem + 6.73vw, 15rem);
    height: clamp(3.125rem, 2.763rem + 1.35vw, 3.625rem);
  }
  /* SERVICES */
  .services__copy {
    /* margin: 56px clamp(1.25rem, calc(var(--vw) * 10.8), 6rem); */
    margin: 56px 112px;
  }
  /* CONTACT */
  .contact__wrapper {
    padding-left: 0;
    position: initial;
  }
  .contact__img {
    height: 400px;
    position: initial;
    width: 100%;
  }
  .contact__container {
    flex-direction: column;
    margin-top: 0;
  }
  .contact__box {
    align-items: center;
    padding: 7.2% clamp(1.25rem, -0.909rem + calc(var(--vw) * 10.8), 6rem);
  }
  .contact__box .flex__row {
    height: auto;
  }
  .contact__box.box__recruit {
    width: 80%;
  }
  .contact__box.box__tel {
    width: 100%;
  }
}
@media screen and (width <= 1920px) and (width > 768px) and (height < 900px) {
  /* 高さ900px以下の場合 */
  .cc__container--02 {
    align-items: flex-end;
  }
  .catchcopy__p--vertical {
    line-height: inherit;
    writing-mode: inherit;
  }
  .hero-area__layer {
    width: calc(var(--vw) * 56);
    height: calc(var(--vh) * 64);
  }
}
@media screen and (width <= 1600px) and (width >768px) {
  .figcap__inner.figcap__text {
    padding-right: 32px;
  }
}
@media screen and (width <= 768px) {
  /* FIRST VIEW -hero area */
  .hero-area {
    background-image: url(../images/top/SP__cover__img--01.jpg);
    background-position: left bottom;
  }
  .catchcopy__cell {
    width: 220px;
  }
  /* COMPANY */
  section#company {
    position: relative;
  }
  #company .section__bg {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-image: url(../images/top/company__bgv--text01.png), url(../images/top/company__bgv--text02.png);
    background-repeat: repeat-y, repeat-y;
    background-size: 48%;
    background-position: right top, left bottom;
    opacity: 0.72;
  }
  #company .flex__row,
  #company .flex__column {
    position: relative;
    z-index: 2;
  }
  #company .flex__column {
    margin-top: 24px;
  }
  .section__title::before,
  #company .section__title::before {
    width: clamp(1.25rem, -0.909rem + calc(var(--vw) * 10.8), 6rem);
  }
  .vertical-slider__container {
    width: 160px;
    height: 540px;
  }
  .company__copy {
    align-self: center;
    margin-left: 4%;
  }
  .company__box--wrapper {
    background-image: none;
    flex-direction: column;
    padding: 40px clamp(1.25rem, -0.909rem + calc(var(--vw) * 10.8), 6rem);
    position: initial;
    margin-top: 0;
  }
  .company__box--first {
    width: 430px;
    margin-left: 0;
    padding-left: 0;
    background-color: var(--base-white);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
  .company__box--first .company__box,
  .company__box--first .message__img {
    width: 50%;
  }
  .company__box--first .message__img {
    background-position: top 65% left;
  }
  .company__box--wrapper .company__box:nth-child(2n) {
    align-self: flex-end;
  }
  .company__box--wrapper .company__box:last-child {
    align-self: flex-start;
  }
  .company__box--first,
  .company__box,
  .company__box--set {
    margin-bottom: 56px;
  }
  .company__box,
  .company__box--set {
    margin-left: 0;
    width: 430px;
    height: 320px;
  }
  #company .flex__column .company__box.set--box {
    height: 100%;
    margin-top: 0;
  }
  .company__box--set.flex__column {
    flex-direction: row;
    align-self: flex-end;
  }
  .company__box.set--box.flex__column {
    margin-bottom: 0;
  }

  /* SERVICES */
  .services__bg {
    background-size: auto;
  }
  .services__copy {
    margin: 40px calc(10px + clamp(1.25rem, -0.909rem + calc(var(--vw) * 10.8), 6rem));
  }
  /* CASE&STUDY */
  .works__wrapper,
  .news__wrapper {
    padding: 0 clamp(1.25rem, -0.909rem + calc(var(--vw) * 10.8), 6rem);
  }
  .figcap__inner {
    margin-left: 16px;
  }
}

@media screen and (width <= 768px) and (height < 720px) {
  .hero-area__layer {
    height: clamp(24rem, 4.588rem + calc(var(--vh) * 56.47), 30rem);
  }
}
@media screen and (width <= 768px) and (height < 550px) {
  .cc__container--02 {
    align-items: flex-end;
  }
  .catchcopy__p--vertical {
    line-height: inherit;
    writing-mode: inherit;
  }
  .hero-area__layer {
    width: calc(var(--vw) * 50);
    height: calc(var(--vh) * 50);
  }
}
@media screen and (width <= 601px) {
  /* COMPANY */
  .company__box--wrapper {
    padding: 24px 0;
  }
  .company__box--first,
  .company__box,
  .company__box--set {
    width: 100%;
  }
  .catchcopy__cell {
    width: 200px;
  }
  .ls__less--500 {
    letter-spacing: -0.5em;
  }
}
@media screen and (width <= 601px) and (height < 700px) {
  .hero-area__layer {
    width: calc(var(--vw) * 58);
  }
}

@media screen and (width <= 500px) {
  .font__text--16 {
    font-size: var(--px-14);
  }
  /* FIRST VIEW -hero area */
  .hero-area__layer {
    width: calc(var(--vw) * 60);
    height: calc(var(--vh) * 54);
  }
  .catchcopy__subcontainer {
    line-height: 1.8;
    font-size: 1.75rem;
  }
  .catchcopy__p {
    line-height: 1.6;
  }
  .catchcopy__cell {
    width: 148px;
    height: 48px;
  }
  .cc__container--02 p.catchcopy__p {
    margin-top: 0;
  }
  .infobar {
    flex-direction: column;
    height: fit-content;
  }
  .infobar__header {
    padding: var(--px-16) 0;
    width: calc(var(--vw) * 100);
  }
  .infobar__title::before {
    width: 24px;
  }
  .infobar__contents {
    padding: var(--px-32);
  }
  .figcap__inwrap {
    flex-direction: column;
  }
  .figcap__inner {
    margin-left: 0;
  }
  .figcap__inner.figcap__text {
    margin-bottom: 16px;
  }
}
@media screen and (width <= 500px) and (height <= 824px) {
  .hero-area__layer {
    width: calc(var(--vw) * 58);
  }
  .cc__container--02 p.catchcopy__p {
    margin-top: 0;
  }
}

@media screen and (width <= 430px) {
  .hero-area__layer {
    height: calc(var(--vh) * 72);
    width: calc(var(--vw) * 68);
  }
  .catchcopy__box {
    left: initial;
    transform: initial;
    right: calc(0% - 1.5rem);
    top: -44px;
  }
  .ls__less--500 {
    letter-spacing: -0.25em;
  }
  .cc__container--02 {
    padding-top: 6.4px;
  }
  .cc__container--02 p {
    line-height: 0.7;
    writing-mode: vertical-rl;
  }
  .cc__container--02 p.catchcopy__p {
    line-height: 0.55;
    margin-top: var(--px-8);
  }
  /* CASE&STUDY */
  .splide__arrows.splide__arrows--custom {
    display: none;
  }
  /* CONTACT */
  .contact__box {
    align-items: flex-start;
    margin-top: 24px;
  }
  .contact__box--title {
    margin-bottom: 24px;
  }
  .contact__box .flex__row {
    flex-direction: column;
  }
}
@media screen and (width <= 390px) {
  .catchcopy__box {
    flex-direction: column;
    align-items: flex-end;
  }
  .catchcopy__subcontainer.cc__container--01 {
    margin-left: 1.75rem;
  }
  /* COMPANY */
  .vertical-slider__container {
    width: 140px;
  }
  /* SERVICES */
  .customer__needs {
    font-size: var(--px-14);
  }
  .services__name {
    font-size: var(--px-18);
  }
  /* footer */
  .ft__nav--u1024 .header__hwtext--gogl {
    font-size: var(--px-16);
    bottom: 65%;
    right: 12%;
  }
}

/* -------- display関連 メディアクエリ -------- */
@media screen and (width > 1696px) {
  .display__o1696 {
    display: block;
  }
}
@media screen and (width <= 1024px) {
  .display__u1024 {
    display: block;
  }
}
@media screen and (width <= 768px) {
  .display__o768,
  .display__o768--grid {
    display: none;
  }
  .display__u768 {
    display: block;
  }
}
@media screen and (width <= 500px) {
  .display__o500 {
    display: none;
  }
  .display__u500 {
    display: block;
  }
}
@media screen and (width <= 340px) {
  .services__name {
    font-size: var(--px-16);
  }
}