@charset "UFT-8";

:root {
  /* 色管理用の変数 */
  --white-color: #fff;
  --black-color: #456;
  --gray-color: #eee;
  --gray-color02: #ccc;
  --gray-color03: #999;
  --bg-color: #ecf0f3;
  --bg-color02: #e1e6ef;
  --main-color: #84a2d4;
  --shadow-color: #b0bdd4;
  --shadow-color02: #566f99;

  --top-gradation: linear-gradient(
    90deg,
    var(--white-color),
    var(--gray-color02)
  );
  --side-gradation: linear-gradient(
    90deg,
    var(--gray-color02),
    var(--white-color) 30%,
    var(--gray-color02)
  );

  --base-shadow: 0 4px 6px var(--gray-color03);
  --main-shadow: 4px 4px 12px var(--shadow-color),
    -4px -4px 12px var(--white-color);
  --main-shadow_hover: 1px 1px 2px var(--shadow-color),
    -1px -1px 2px var(--white-color);
  --main-shadow_click: inset 1px 1px 2px var(--shadow-color),
    inset -1px -1px 2px var(--white-color);

  --btn-shadow: 4px 4px 12px var(--shadow-color02),
    -4px -4px 12px var(--white-color);
  --btn-shadow_hover: 1px 1px 2px var(--shadow-color02),
    -1px -1px 2px var(--white-color);
  --btn-shadow_click: inset 2px 2px 4px var(--shadow-color02);

  --main-pukuri: inset 6px 6px 12px var(--white-color),
    inset -6px -6px 12px var(--shadow-color02);

  /* コンテンツ幅管理用の変数 */
  --content-width-sm: 880px;
  --content-width: 1080px;
  --content-width-lg: 1200px;

  /* z-index管理用の変数 */
  --z-index-back: -1;
  --z-index-default: 1;
  --z-index-header: 100;
  --z-index-cover: 200;
  --z-index-menu: 300;
  --z-index-modal: 400;
}

/* ---------- base ---------- */
html {
  scroll-behavior: smooth;
}

body {
  color: var(--black-color);
  background: var(--bg-color);
  font: normal 14px / 1.75 "Open Sans", "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 1024px) {
  body {
    font: normal 16px / 1.75 "Open Sans", "Zen Kaku Gothic New", sans-serif;
  }
}

img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

/* ---------- layout ---------- */
.l_container-sm,
.l_container,
.l_container-lg {
  width: 100%;
  padding: 0 5%;
  margin: 0 auto;
}

.l_container-sm {
  max-width: calc(var(--content-width-sm) + 10%);
}

.l_container {
  max-width: calc(var(--content-width) + 10%);
}

.l_container-lg {
  max-width: calc(var(--content-width-lg) + 10%);
}

.l_contents {
  padding: clamp(80px, 120/ 1080 * 100vw, 120px) 0;
}

.l_body {
  margin-top: clamp(40px, 60 / 1080 * 100vw, 60px);
}

.l_header {
  padding: 0 clamp(16px, 40 / 1080 * 100vw, 40px);
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-index-header);
}

.l_header-inner {
  display: contents;
}

.l_header-logo {
  width: 160px;
}

.l_header-nav {
  width: 100%;
  height: 100vh;
  background: var(--bg-color);
  display: grid;
  place-items: center;
  align-content: center;
  grid-gap: 40px 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: var(--z-index-menu);
}
@media screen and (min-width: 768px) {
  .l_header-nav {
    max-width: 400px;
  }
}

.l_header-nav_list {
  width: 100%;
}

.l_header-nav_item {
  width: 100%;
  border-top: 1px solid var(--gray-color02);
}

.l_header-nav_item:last-child {
  border-bottom: 1px solid var(--gray-color02);
}

.l_header-nav_link {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  transition: all 0.2s;
  background: var(--bg-color);
}

.l_header-nav_link:hover {
  background: var(--bg-color02);
  letter-spacing: 0.2em;
}

.l_header-nav_link-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.l_header-nav_img-wrap {
  width: 48px;
  height: 48px;
  padding: 12px;
  background: var(--white-color);
  border-radius: 100vh;
  flex-shrink: 0;
}

.l_header-nav_img {
  scale: 1.1;
  -webkit-filter: invert(30%) sepia(5%) saturate(2572%) hue-rotate(169deg)
    brightness(94%) contrast(83%);
  filter: invert(30%) sepia(5%) saturate(2572%) hue-rotate(169deg)
    brightness(94%) contrast(83%);
}

.l_header-nav_text {
  white-space: nowrap;
  display: inline-block;
  font-weight: bold;
  line-height: 1.2;
}

.l_header-nav_text-main {
  line-height: 1.8;
  font-size: clamp(16px, 20 / 1080 * 100vw, 20px);
}

.l_header-nav_text-sub {
  text-transform: uppercase;
}

.l_header-nav_arrow {
  margin-top: 8px;
  width: 28px;
  rotate: 45deg;
  vertical-align: middle;
  position: relative;
}

.l_header-nav_arrow::before,
.l_header-nav_arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.l_header-nav_arrow::before {
  width: 10px;
  height: 6px;
  background: var(--black-color);
}

.l_header-nav_arrow::after {
  width: 24px;
  border: 12px solid;
  border-color: transparent transparent transparent var(--black-color);
  left: 8px;
}

.l_footer {
  padding: 40px;
  background: var(--black-color);
}

.l_footer-copyright {
  font: size 14px;
  text-align: center;
  color: var(--white-color);
}

/* ---------- module ---------- */
.m_header-cover {
  z-index: var(--z-index-cover);
}
.m_contents-cover {
  z-index: var(--z-index-default);
}

.m_hamburger {
  font-weight: bold;
  width: 96px;
  height: 40px;
  border-radius: 2vh;
  background: var(--bg-color);
  box-shadow: var(--main-shadow);
  z-index: var(--z-index-menu);
  transition: all 0.24s;
}

.m_hamburger:hover {
  box-shadow: var(--main-shadow_hover);
}

.m_hamburger:active {
  box-shadow: var(--main-shadow_click);
}

.m_hamburger-icon {
  margin: auto;
  display: inline-block;
  width: 16px;
  height: 12px;
  position: relative;
}

.m_hamburger-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 100vh;
  position: absolute;
  background: var(--black-color);
  left: 50%;
  transition: all 0.6s;
}

.m_hamburger-bar:nth-child(1) {
  top: 0;
  transform: translate(-50%, 0);
  -webkit-animation: bar01 0.6s forwards;
  animation: bar01 0.6s forwards;
}
@-webkit-keyframes bar01 {
  0% {
    transform: translate(-50%, 6px) rotate(45deg);
  }
  50% {
    transform: translate(-50%, 6px) rotate(0);
  }
  100% {
    transform: translate(-50%, 0) rotate(0);
  }
}
@keyframes bar01 {
  0% {
    transform: translate(-50%, 6px) rotate(45deg);
  }
  50% {
    transform: translate(-50%, 6px) rotate(0);
  }
  100% {
    transform: translate(-50%, 0) rotate(0);
  }
}

.m_hamburger-bar:nth-child(2) {
  top: 50%;
  transform: translate(-50%, -50%);
}

.m_hamburger-bar:nth-child(3) {
  top: 100%;
  transform: translate(-50%, -100%);
  -webkit-animation: bar03 0.6s forwards;
  animation: bar03 0.6s forwards;
}
@-webkit-keyframes bar03 {
  0% {
    transform: translate(-50%, -6px) rotate(-45deg);
  }
  50% {
    transform: translate(-50%, -6px) rotate(0);
  }
  100% {
    transform: translate(-50%, -100%) rotate(0);
  }
}
@keyframes bar03 {
  0% {
    transform: translate(-50%, -6px) rotate(-45deg);
  }
  50% {
    transform: translate(-50%, -6px) rotate(0);
  }
  100% {
    transform: translate(-50%, -100%) rotate(0);
  }
}

.is-open .m_hamburger-bar:nth-child(1) {
  -webkit-animation: barActive01 0.6s forwards;
  animation: barActive01 0.6s forwards;
}
@-webkit-keyframes barActive01 {
  0% {
    transform: translate(-50%, 0) rotate(0);
  }
  50% {
    transform: translate(-50%, 6px) rotate(0);
  }
  100% {
    transform: translate(-50%, 6px) rotate(45deg);
  }
}
@keyframes barActive01 {
  0% {
    transform: translate(-50%, 0) rotate(0);
  }
  50% {
    transform: translate(-50%, 6px) rotate(0);
  }
  100% {
    transform: translate(-50%, 6px) rotate(45deg);
  }
}

.is-open .m_hamburger-bar:nth-child(2) {
  opacity: 0;
}

.is-open .m_hamburger-bar:nth-child(3) {
  -webkit-animation: barActive03 0.6s forwards;
  animation: barActive03 0.6s forwards;
}
@-webkit-keyframes barActive03 {
  0% {
    transform: translate(-50%, 0) rotate(0);
  }
  50% {
    transform: translate(-50%, -6px) rotate(0);
  }
  100% {
    transform: translate(-50%, -6px) rotate(-45deg);
  }
}
@keyframes barActive03 {
  0% {
    transform: translate(-50%, 0) rotate(0);
  }
  50% {
    transform: translate(-50%, -6px) rotate(0);
  }
  100% {
    transform: translate(-50%, -6px) rotate(-45deg);
  }
}

.m_hamburger_text {
  margin-left: 6px;
  text-transform: uppercase;
}

/* ---------- m_fix-btn ---------- */
.m_fix-cta-btn {
  padding: 10px;
  width: clamp(64px, 72 / 1080 * 100vw, 72px);
  aspect-ratio: 1 / 1;
  border-radius: 100vh;
  background: var(--main-color);
  box-shadow: var(--btn-shadow);
  position: fixed;
  bottom: clamp(16px, 40 / 1080 * 100vw, 40px);
  right: clamp(16px, 40 / 1080 * 100vw, 40px);
  z-index: var(--z-index-header);
}

.m_fix-cta-btn.is-show {
  opacity: 1;
  visibility: visible;
}

.m_fix-cta-btn:hover {
  scale: 1.05;
}

.m_fix-cta-btn_icon-wrap {
  margin: 0 auto;
  display: block;
  width: 28px;
  aspect-ratio: 1 / 1;
  perspective: 28px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .m_fix-cta-btn_icon-wrap {
    margin-top: 8%;
  }
}

.m_fix-cta-btn_icon {
  display: block;
  width: 100%;
  -webkit-filter: invert(99%) sepia(1%) saturate(1884%) hue-rotate(223deg)
    brightness(122%) contrast(100%);
  filter: invert(99%) sepia(1%) saturate(1884%) hue-rotate(223deg)
    brightness(122%) contrast(100%);
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-origin: center center -14px;
  transition: all 0.24s;
}

.m_fix-cta-btn_icon__default {
  transform: rotateY(0);
}

.m_fix-cta-btn_icon__hover {
  transform: rotateY(-90deg);
  scale: 1.1;
}

.m_fix-cta-btn:hover .m_fix-cta-btn_icon__default {
  transform: rotateY(90deg);
}

.m_fix-cta-btn:hover .m_fix-cta-btn_icon__hover {
  transform: rotateY(0);
}

.m_fix-cta-btn_text {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: var(--white-color);
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translate(-50%, 0);
  transition: all 0.24s;
}

.m_fix-cta-btn_text::first-letter {
  text-transform: uppercase;
}

.m_fix-cta-btn:hover .m_fix-cta-btn_text {
  letter-spacing: 0.15em;
}

/* ---------- m_btn ---------- */
.m_btn {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: clamp(268px, 308 / 1080 * 100vw, 308px);
  height: clamp(48px, 56 / 1080 * 100vw, 56px);
  border-radius: 100vh;
  font-weight: bold;
  font-size: clamp(16px, 18 / 1080 * 100vw, 18px);
  line-height: clamp(48px, 56 / 1080 * 100vw, 56px);
  letter-spacing: 0.1em;
  position: relative;
  transition: all 0.2s;
}

.m_btn__main {
  text-shadow: 0 2px 4px var(--shadow-color02);
  box-shadow: var(--btn-shadow);
  color: var(--white-color);
  background: var(--main-color);
}

.m_btn__main:hover {
  box-shadow: var(--btn-shadow_hover);
  letter-spacing: 0.2em;
}

.m_btn__main:active {
  box-shadow: var(--btn-shadow_click);
  letter-spacing: 0.2em;
}

.m_btn__detail {
  background: var(--bg-color);
  color: var(--black-color);
  box-shadow: var(--main-shadow);
}

.m_btn__detail:hover {
  box-shadow: var(--main-shadow_hover);
  letter-spacing: 0.2em;
}

.m_btn__detail:active {
  box-shadow: var(--main-shadow_click);
  letter-spacing: 0.2em;
}

.m_btn_img-wrap {
  display: inline-block;
  -webkit-filter: invert(99%) sepia(1%) saturate(1884%) hue-rotate(223deg)
    brightness(122%) contrast(100%);
  filter: invert(99%) sepia(1%) saturate(1884%) hue-rotate(223deg)
    brightness(122%) contrast(100%);
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translate(0, -50%);
}

.m_btn_arrow {
  width: 10px;
  height: 10px;
  display: inline-block;
  position: relative;
}

.m_btn_arrow::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  border: 2px solid;
  border-color: var(--black-color) var(--black-color) transparent transparent;
  transform: rotate(45deg);
  position: absolute;
  left: 20px;
}

/* ---------- utility ---------- */
@media screen and (min-width: 768px) {
  .u_br-sm {
    display: none;
  }
}

/* ---------- top_kv ---------- */
.top_kv {
  width: 100%;
  height: 100vh;
  background: var(--bg-color);
}

.top_kv_box {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.top_kv-copy {
  text-align: center;
}

.top_kv-copy_main {
  margin-top: 16px;
  white-space: nowrap;
  font-feature-settings: "palt" 1;
  line-height: 1.2;
  font-weight: bold;
  font-size: clamp(18px, 40 / 1080 * 100vw, 40px);
}

.js_text-bg {
  display: block;
  width: 100%;
  height: clamp(72px, 144 / 1080 * 100vw, 144px);
  background: var(--white-color);
  box-shadow: 0 0 0 100vmax var(--white-color);
  -webkit-clip-path: inset(0 -100vmax);
  clip-path: inset(0 -100vmax);
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: var(--z-index-back);
}

.top_kv-copy_accent-lg {
  font-size: clamp(32px, 72 / 1080 * 100vw, 72px);
}
.top_kv-copy_accent-md {
  font-size: clamp(24px, 56 / 1080 * 100vw, 56px);
}

.top_kv-copy_sub {
  margin-top: 8px;
  white-space: nowrap;
  font-size: clamp(14px, 24 / 1080 * 100vw, 24px);
  letter-spacing: 0.05em;
}

.top_kv_img-wrap {
  width: 100%;
}

.top_kv-message {
  width: clamp(96px, 120 / 1080 * 100vw, 120px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  position: absolute;
  bottom: 5%;
  right: 8%;
}

.top_kv-message::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100vh;
  border: 2px dotted var(--black-color);
  position: absolute;
  -webkit-animation: rotation 8s linear infinite;
  animation: rotation 8s linear infinite;
}
@-webkit-keyframes rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.top_kv-message_text {
  text-align: center;
  font-size: clamp(12px, 16 / 1080 * 100vw, 16px);
  line-height: 1.4;
}

/* ---------- top_section ---------- */
.top_section:nth-of-type(2n-1) {
  background: var(--bg-color02);
}

.top_sticky-heading {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.top_heading-lv02_main {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: clamp(20px, 28 / 1080 * 100vw, 28px);
  font-weight: bold;
  line-height: 1.2;
  background: linear-gradient(transparent 70%, var(--white-color) 0%);
}

.top_heading-lv02_sub {
  margin-top: 8px;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: bold;
  font-size: clamp(14px, 20 / 1080 * 100vw, 20px);
}

.top_heading-lv02_sub::first-letter {
  text-transform: uppercase;
}

/* ---------- top_promise ---------- */
.top_promise_head {
  font-weight: bold;
  font-size: clamp(16px, 18 / 1080 * 100vw, 18px);
  /* word-break: keep-all; */
}

.top_promise_head::first-letter {
  font-size: 20px;
  color: var(--white-color);
  background: var(--black-color);
}

.top_promise_message {
  font-weight: bold;
  margin-top: 24px;
}

/* ---------- top_about ---------- */
.top_about_box {
  width: 100%;
  padding: 32px 24px;
  background: var(--white-color);
  box-shadow: var(--base-shadow);
  border-radius: 10px;
  display: grid;
  justify-content: center;
  position: relative;
}
@media screen and (min-width: 768px) {
  .top_about_box {
    padding: 64px 80px;
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 8%;
  }
}

.top_about_box::before {
  background-image: -webkit-gradient(
    radial,
    30% 30%,
    0,
    30% 30%,
    10,
    from(var(--shadow-color)),
    to(var(--main-color))
  );
  border-radius: 50%;
  box-shadow: 1px 1px 3px 1px var(--gray-color03);
  content: "";
  display: block;
  position: absolute;
  top: 2%;
  left: 50%;
  width: 15px;
  height: 15px;
  z-index: 0;
}

.top_about_img-wrap {
  width: 70%;
  max-width: 200px;
  position: relative;
}

.top_about_img {
  border-radius: 67% 64% 40% 82% / 70% 64% 53% 71%;
  box-shadow: -8px 8px 0 var(--main-color);
}

.top_about_img-wrap::before {
  content: "↓";
  font-size: 20px;
  display: block;
  text-align: center;
  color: var(--main-color);
  border: 2px solid var(--main-color);
  background: var(--white-color);
  width: 40px;
  height: 40px;
  border-radius: 100vh;
  position: absolute;
  bottom: 0;
  right: 0;
}
@media screen and (min-width: 768px) {
  .top_about_img-wrap::before {
    content: "→";
  }
}

.top_about_text-group {
  margin-top: 24px;
  max-width: 400px;
}
@media screen and (min-width: 768px) {
  .top_about_text-group {
    margin-top: 0;
  }
}

.top_about-name {
  font-weight: bold;
  font-size: 18px;
  border-bottom: 3px solid var(--main-color);
}

.top_about-name_en {
  margin-left: 16px;
  font-size: 16px;
}

.top_about-profile {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
}

.top_about-profile_title {
  width: 20%;
  margin-right: 8px;
  -moz-text-align-last: justify;
  text-align-last: justify;
}
@media screen and (min-width: 768px) {
  .top_about-profile_title {
    width: 18%;
  }
}

.top_about-profile_desc {
  width: calc(100% - (20% + 8px));
}

.top_about-history {
  margin-top: 16px;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
}

.top_about-history_year {
  width: 25%;
}

.top_about-history_detail {
  width: 75%;
}

/* ---------- top_works ---------- */
.top_works_link {
  position: relative;
  display: block;
}

.top_works_img-wrap {
  display: block;
  aspect-ratio: 1.618 / 1;
  border: 8px solid;
  -o-border-image: linear-gradient(
      to right bottom,
      var(--bg-color),
      var(--bg-color02)
    )
    1 / 20px;
  border-image: linear-gradient(
      to right bottom,
      var(--bg-color),
      var(--bg-color02)
    )
    1 / 20px;
  outline: 2px outset var(--white-color);
  box-shadow: var(--base-shadow);
  transition: all 0.2s;
}

.top_works_img {
  -o-object-fit: cover;
  object-fit: cover;
  outline: 2px inset var(--white-color);
  width: 100%;
  height: 100%;
}

.top_works_link:hover .top_works_img-wrap,
.top_works_link:hover .top_works_tag {
  translate: 0 -10px;
}

.top_works_content-card {
  margin: 32px auto 0;
  aspect-ratio: 3 / 1.414;
  width: 90%;
  display: block;
  padding: 16px;
  background: var(--white-color);
  box-shadow: var(--base-shadow);
  text-align: center;
  display: grid;
  justify-items: center;
  align-items: start;
  grid-gap: 8px 0;
}

.top_works_title {
  width: 90%;
  white-space: nowrap;
  font-weight: bold;
  border-bottom: 2px solid var(--shadow-color);
}

.top_works_detail {
  font-size: 14px;
}

.top_works_tag {
  padding: 4px;
  display: block;
  width: 64px;
  height: 48px;
  background: var(--main-color);
  box-shadow: var(--base-shadow);
  font-size: 12px;
  color: var(--white-color);
  line-height: 100%;
  text-align: center;
  position: absolute;
  bottom: 16px;
  right: -8px;
  transition: all 0.2s;
}

.top_works_tag::before {
  content: "";
  display: block;
  width: 32px;
  height: 5px;
  border: 1px var(--white-color);
  border-style: none solid solid none;
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: skew(45deg) translate(-50%, 0);
}

.top_works_tag::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-width: 4px;
  border-style: solid;
  border-color: transparent transparent var(--gray-color03) var(--gray-color03);
  position: absolute;
  top: 0;
  right: 0;
  translate: 0 -100%;
}

/* ---------- top_service ---------- */

.top_service_item {
  max-width: 380px;
  padding: 0 clamp(24px, 40 / 1080 * 100vw, 40px);
  aspect-ratio: 1 / 1.2;
  border-radius: 100vh 100vh 0 0;
  background: var(--white-color);
  box-shadow: inset var(--base-shadow);
  display: grid;
  align-content: start;
  align-items: start;
  position: relative;
}

.top_service_thumbnail {
  margin: 32px auto 16px;
  width: 60%;
  aspect-ratio: 1 / 1;
}

.top_service_thumbnail-img {
  width: 100%;
  height: 100%;
}

.top_service-content {
  padding-bottom: 16px;
}

.top_service-content_title {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}

.top_service-content_desc {
  margin: auto;
  margin-top: 8px;
  font-size: 14px;
}

/* ---------- top_skill ---------- */

.top_skill-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px 4%;
  -webkit-animation: infiniteSlide 10s infinite linear 1s both;
  animation: infiniteSlide 10s infinite linear 1s both;
}
@media screen and (min-width: 768px) {
  .top_skill-list {
    gap: 56px 4%;
  }
}

.top_skill-list_item {
  width: calc((100% - 12%) / 3);
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .top_skill-list_item {
    width: calc((100% - 20%) / 5);
  }
}

.top_skill_hover-area {
  margin: 0 auto;
}

.top_skill_card {
  margin: auto;
  padding: 16px;
  width: clamp(92px, 120 / 1080 * 100vw, 120px);
  height: clamp(92px, 120 / 1080 * 100vw, 120px);
  border-radius: 100vh;
  background: var(--black-color);
  box-shadow: var(--main-pukuri);
  display: grid;
  place-items: center;
  position: relative;
  z-index: var(--z-index-default);
}

.top_skill_hover-area:hover .top_skill_card {
  transition: 0.4s;
  rotate: y 360deg;
}

.top_skill_img-wrap {
  margin: 0 auto;
  width: 55%;
  -webkit-filter: invert(99%) sepia(1%) saturate(1884%) hue-rotate(223deg)
    brightness(122%) contrast(100%) drop-shadow(0 0 2px var(--white-color));
  filter: invert(99%) sepia(1%) saturate(1884%) hue-rotate(223deg)
    brightness(122%) contrast(100%) drop-shadow(0 0 2px var(--white-color));
  align-self: center;
}

.top_skill_img-wrap img {
  aspect-ratio: 1 / 1;
}

.top_skill_text {
  text-align: center;
  white-space: nowrap;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  color: var(--white-color);
  text-shadow: 0 4px 4px var(--white-color03);
}

.top_skill_cylinder {
  max-width: 140px;
  margin: 40px auto 0;
  width: 100%;
  aspect-ratio: 8 / 1;
  background: var(--side-gradation);
  border-radius: 50%;
  position: relative;
}

.top_skill_cylinder::before,
.top_skill_cylinder::after {
  content: "";
  display: block;
  position: absolute;
}

.top_skill_cylinder::before {
  width: 100%;
  aspect-ratio: 4.6 / 1;
  background: var(--side-gradation);
  bottom: 50%;
}

.top_skill_cylinder::after {
  width: 100%;
  aspect-ratio: 8 / 1;
  border-radius: 50%;
  background: var(--gray-color);
  bottom: calc((8 * 100%) / 4.6);
}

.top_skill_shadow {
  display: inline-block;
  width: 50%;
  aspect-ratio: 20 / 1;
  border-radius: 50%;
  background: var(--gray-color03);
  -webkit-filter: blur(3px);
  filter: blur(3px);
  position: absolute;
  left: 50%;
  bottom: calc(50% + (8 * 100%) / 4.6);
  translate: -50% 50%;
  z-index: var(--z-index-default);
  transition: 0.4s;
}

.top_skill_hover-area:hover + .top_skill_cylinder .top_skill_shadow {
  -webkit-animation: shadowAnime 0.3s ease forwards;
  animation: shadowAnime 0.3s ease forwards;
}

@-webkit-keyframes shadowAnime {
  0% {
    transform: scaleX(1);
  }
  25% {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  75% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes shadowAnime {
  0% {
    transform: scaleX(1);
  }
  25% {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  75% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

/* ---------- top_contact ---------- */
.contact_form {
  margin: 24px auto 0;
  max-width: 800px;
}

.contact_form-unit {
  padding: 24px 0;
  border-bottom: 1px solid var(--gray-color02);
}

.contact_form-unit_head {
  font-weight: bold;
}

.contact_form-unit_required {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 100vh;
  padding: 2px 8px;
  background: var(--main-color);
  color: var(--white-color);
}

.contact_form-unit_contents {
  margin-top: 8px;
}

.contact_form-input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--gray-color03);
  border-radius: 8px;
  background: var(--white-color);
  padding: 0 8px;
}

.contact_form-input:hover,
.contact_form-textarea:hover {
  outline: 1px solid var(--main-color);
}

.contact_form-input:focus,
.contact_form-textarea:focus {
  border: 1px solid transparent;
  outline: 2px solid var(--main-color);
}

.contact_form-unit_example {
  margin-top: 4px;
  font-size: 14px;
}

.contact_form-unit_guide-text {
  font-size: 14px;
}

.contact_form-checkbox_list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
}
@media screen and (min-width: 768px) {
  .contact_form-checkbox_list {
    gap: 8%;
  }
}

.contact_form-checkbox_item {
  width: 50%;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .contact_form-checkbox_item {
    width: auto;
  }
}

.contact_form-label {
  cursor: pointer;
  position: relative;
}

.contact_form-label:hover {
  background: linear-gradient(transparent 70%, var(--white-color) 0%);
}

.contact_form-checkbox + .contact_form-label_text::before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: var(--white-color);
  border: 1px solid var(--black-color);
  left: 0;
  border-radius: 4px;
}

.contact_form-checkbox:checked + .contact_form-label_text::before {
  content: "";
  background: var(--main-color);
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}

.contact_form-checkbox:checked + .contact_form-label_text::after {
  content: "";
  display: block;
  border-right: 2px solid var(--white-color);
  border-bottom: 2px solid var(--white-color);
  height: 7px;
  width: 5px;
  position: absolute;
  top: 25%;
  left: 8px;
  translate: -50% 0;
  transform: rotate(45deg);
}

.contact_form-label_text {
  box-sizing: border-box;
  padding-left: 22px;
  font-size: 14px;
  position: relative;
}

.contact_form-textarea {
  width: 100%;
  border: 1px solid var(--gray-color03);
  border-radius: 8px;
  background: var(--white-color);
  padding: 8px 16px;
  resize: none;
}

.top_contact_btn-wrap {
  margin-top: 48px;
}

/* ---------- page ---------- */
.page_heading-lv02_main {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: clamp(20px, 28 / 1080 * 100vw, 28px);
  font-weight: bold;
}

.page_heading-lv02_main::first-letter {
  color: var(--white-color);
  background: var(--black-color);
}

.page_heading-lv02_sub {
  margin-top: 1em;
  font-weight: bold;
}

/* ---------- detail ---------- */
.detail_swiper-container {
  padding-bottom: 40px;
  overflow: hidden;
  position: relative;
}

.detail_swiper {
  border: 4px double var(--white-color);
  aspect-ratio: 1.6 / 1;
}

.detail_swiper img {
  object-fit: cover;
  object-position: bottom;
}

.swiper-pagination {
  position: static;
}

.swiper-pagination-bullet-active {
  background: var(--main-color);
}

.detail_swiper-button {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 4%;
}

.swiper-button-prev,
.swiper-button-next {
  width: clamp(40px, 64 / 1080 * 100vw, 64px);
  height: clamp(40px, 64 / 1080 * 100vw, 64px);
  background: var(--bg-color);
  border-radius: 100vh;
  box-shadow: var(--main-shadow);
  position: static;
  transition: all 0.1s;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  box-shadow: var(--main-shadow_hover);
}

.swiper-button-prev:active,
.swiper-button-next:active {
  box-shadow: var(--main-shadow_click);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
  display: block;
  width: 25%;
  height: 25%;
  border: 2px solid;
  transform: rotate(45deg);
}

.swiper-button-prev::after {
  border-color: transparent transparent var(--black-color) var(--black-color);
}

.swiper-button-next::after {
  border-color: var(--black-color) var(--black-color) transparent transparent;
}

.detail_site-name {
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 16px;
  border-bottom: 2px dashed var(--black-color);
}

.detail_site-list {
  margin-top: clamp(16px, 32 / 1080 * 100vw, 32px);
}

.detail_site-item:not(:first-child) {
  margin-top: 16px;
}
@media screen and (min-width: 768px) {
  .detail_site-item {
    display: flex;
    flex-wrap: wrap;
  }
}

.detail_site-item_title {
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .detail_site-item_title {
    width: 20%;
  }
}

@media screen and (min-width: 768px) {
  .detail_site-item_desc {
    width: 80%;
  }
}

.detail_site-desc {
  margin-top: 24px;
  line-height: 2;
}

.detail_site-item_link {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}

.detail_site-item_link:hover {
  color: var(--main-color);
}

.detail_btn-wrap {
  margin-top: 60px;
}

/* ---------- js ---------- */
.js_body.is-active {
  overflow: hidden;
}

.js_body.is-fix {
  overflow: hidden;
}

.js_fix-btn {
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s;
}

.js_cover {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  width: 100%;
  height: 100%;
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s;
}
.js_cover.is-active {
  opacity: 1;
  visibility: visible;
}

.js_header {
  transition: 0.8s;
  opacity: 0;
  visibility: hidden;
}
.js_header.is-change {
  background: var(--bg-color);
}

.js_nav {
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s;
}

.js_nav.is-active {
  opacity: 1;
  visibility: visible;
}
@media screen and (min-width: 768px) {
  .js_nav.is-active {
    opacity: 1;
    visibility: visible;
  }
}

.js_message {
  display: none;
}

.js_message.is-show {
  display: block;
  -webkit-animation: showAnime 0.4s;
  animation: showAnime 0.4s;
}

@-webkit-keyframes showAnime {
  0% {
    opacity: 0;
    translate: 0 20px;
  }
  100% {
    opacity: 1;
  }
}

@keyframes showAnime {
  0% {
    opacity: 0;
    translate: 0 20px;
  }
  100% {
    opacity: 1;
  }
}

.js_kv-message {
  opacity: 0;
  visibility: hidden;
}

.js_text-mask {
  position: relative;
  opacity: 0;
  overflow: hidden;
  --translate: 0 0;
  translate: 0 50px;
}
.js_text-mask::before {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--white-color);
  position: absolute;
  top: 0;
  left: 0;
  translate: var(--translate);
}

.js_works-area,
.js_service-area {
  overflow: hidden;
  height: auto;
}

.js_works-list,
.js_service-list {
  display: flex;
  gap: 4%;
}
@media screen and (min-width: 600px) {
  .js_works-list {
    gap: 64px 3%;
    flex-wrap: wrap;
    justify-content: start;
  }
  .js_service-list {
    gap: 48px 3%;
    justify-content: center;
    flex-wrap: wrap-reverse;
  }
}
@media screen and (min-width: 1080px) {
  .js_works-list,
  .js_service-list {
    flex-wrap: nowrap;
  }
}

.js_works-item,
.js_service-item {
  width: 100%;
}
@media screen and (min-width: 600px) {
  .js_works-item {
    width: calc((100% - 3%) / 2);
  }
  .js_service-item {
    width: calc((100% - 3%) / 2);
  }
  .js_service-item:nth-child(1) {
    order: 1;
  }
}
@media screen and (min-width: 768px) {
  .js_service-item {
    width: calc((100% - 3% * 2) / 3);
  }
  .js_service-item:nth-child(1) {
    order: 0;
  }
}
@media screen and (min-width: 1024px) {
  .js_works-item {
    width: calc((100% - 3% * 2) / 3);
  }
}

/* ---------- opening ---------- */
.opening-container {
  overflow: hidden;
}

.opening {
  width: 100%;
  height: 100vh;
  position: relative;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-index-modal);
}

.opening_mask-upper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(var(--black-color) 50%, transparent 0%);
}

.opening_mask-under {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(transparent 50%, var(--black-color) 0%);
}

.opening_line {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(
    transparent 49.8%,
    var(--white-color) 50%,
    transparent 50.2%
  );
  z-index: var(--z-index-modal);
  transform: scale(0); /*初期状態*/
}

/* cf7 style */
.wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
}
@media screen and (min-width: 768px) {
  .wpcf7-checkbox {
    gap: 8%;
  }
}

.wpcf7-list-item {
  width: 50%;

  margin: 0;
}
@media screen and (min-width: 768px) {
  .wpcf7-list-item {
    width: auto;
  }
}

.wpcf7-list-item-label {
  padding-left: 24px;
  cursor: pointer;
  position: relative;
}

.wpcf7-list-item-label:hover {
  background: linear-gradient(transparent 70%, var(--white-color) 0%);
}

input[type="checkbox"] {
  opacity: 0;
}

.wpcf7-list-item-label::before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--white-color);
  border: 1px solid var(--black-color);
  left: 0;
  top: 50%;
  translate: 0 -50%;
}

input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
  background: var(--main-color);
}

input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
  content: "";
  display: block;
  border-right: 2px solid var(--white-color);
  border-bottom: 2px solid var(--white-color);
  height: 7px;
  width: 5px;
  position: absolute;
  top: 25%;
  left: 8px;
  translate: -50% 0;
  transform: rotate(45deg);
}

.wpcf7 p {
  margin-block-start: 0;
  margin-block-end: 0;
}