@charset "UTF-8";
/**
 * ホバー時のスタイルを簡潔に書けるmixin
 * 
 * @usage
 * @include hover {
 *   color: #f39200;
 *   transform: translateY(2px);
 * }
 * 
 * @note
 * &:hover を毎回書かなくていいのでコードがすっきりする。
 * インタラクションやアニメーションの管理にも便利。
 */
.c-gap--05 {
  padding-right: 0.05em;
}

.c-gap--06 {
  padding-right: 0.06em;
}

.c-gap--07 {
  padding-right: 0.07em;
}

.c-gap--08 {
  padding-right: 0.08em;
}

.c-gap--09 {
  padding-right: 0.09em;
}

.c-gap--10 {
  padding-right: 0.1em;
}

.c-gap--11 {
  padding-right: 0.11em;
}

.c-gap--12 {
  padding-right: 0.12em;
}

.c-gap--13 {
  padding-right: 0.13em;
}

.c-gap--14 {
  padding-right: 0.14em;
}

.c-gap--15 {
  padding-right: 0.15em;
}

.c-gap--16 {
  padding-right: 0.16em;
}

.c-gap--17 {
  padding-right: 0.17em;
}

.c-gap--18 {
  padding-right: 0.18em;
}

.c-gap--19 {
  padding-right: 0.19em;
}

.c-gap--20 {
  padding-right: 0.2em;
}

.c-gap--21 {
  padding-right: 0.21em;
}

.c-gap--22 {
  padding-right: 0.22em;
}

.c-gap--23 {
  padding-right: 0.23em;
}

.c-gap--24 {
  padding-right: 0.24em;
}

.c-gap--25 {
  padding-right: 0.25em;
}

.c-gap--26 {
  padding-right: 0.26em;
}

.c-gap--27 {
  padding-right: 0.27em;
}

.c-gap--28 {
  padding-right: 0.28em;
}

.c-gap--29 {
  padding-right: 0.29em;
}

.c-gap--30 {
  padding-right: 0.3em;
}

.c-gap--31 {
  padding-right: 0.31em;
}

.c-gap--32 {
  padding-right: 0.32em;
}

.c-gap--33 {
  padding-right: 0.33em;
}

.c-gap--34 {
  padding-right: 0.34em;
}

.c-gap--35 {
  padding-right: 0.35em;
}

.c-gap--36 {
  padding-right: 0.36em;
}

.c-gap--37 {
  padding-right: 0.37em;
}

.c-gap--38 {
  padding-right: 0.38em;
}

.c-gap--39 {
  padding-right: 0.39em;
}

.c-gap--40 {
  padding-right: 0.4em;
}

.c-gap--41 {
  padding-right: 0.41em;
}

.c-gap--42 {
  padding-right: 0.42em;
}

.c-gap--43 {
  padding-right: 0.43em;
}

.c-gap--44 {
  padding-right: 0.44em;
}

.c-gap--45 {
  padding-right: 0.45em;
}

.c-gap--46 {
  padding-right: 0.46em;
}

.c-gap--47 {
  padding-right: 0.47em;
}

.c-gap--48 {
  padding-right: 0.48em;
}

.c-gap--49 {
  padding-right: 0.49em;
}

.c-gap--50 {
  padding-right: 0.5em;
}

.c-gap--51 {
  padding-right: 0.51em;
}

.c-gap--52 {
  padding-right: 0.52em;
}

.c-gap--53 {
  padding-right: 0.53em;
}

.c-gap--54 {
  padding-right: 0.54em;
}

.c-gap--55 {
  padding-right: 0.55em;
}

.c-gap--56 {
  padding-right: 0.56em;
}

.c-gap--57 {
  padding-right: 0.57em;
}

.c-gap--58 {
  padding-right: 0.58em;
}

.c-gap--59 {
  padding-right: 0.59em;
}

.c-gap--60 {
  padding-right: 0.6em;
}

.c-gap--61 {
  padding-right: 0.61em;
}

.c-gap--62 {
  padding-right: 0.62em;
}

.c-gap--63 {
  padding-right: 0.63em;
}

.c-gap--64 {
  padding-right: 0.64em;
}

.c-gap--65 {
  padding-right: 0.65em;
}

.c-gap--66 {
  padding-right: 0.66em;
}

.c-gap--67 {
  padding-right: 0.67em;
}

.c-gap--68 {
  padding-right: 0.68em;
}

.c-gap--69 {
  padding-right: 0.69em;
}

.c-gap--70 {
  padding-right: 0.7em;
}

.c-gap--71 {
  padding-right: 0.71em;
}

.c-gap--72 {
  padding-right: 0.72em;
}

.c-gap--73 {
  padding-right: 0.73em;
}

.c-gap--74 {
  padding-right: 0.74em;
}

.c-gap--75 {
  padding-right: 0.75em;
}

.c-gap--76 {
  padding-right: 0.76em;
}

.c-gap--77 {
  padding-right: 0.77em;
}

.c-gap--78 {
  padding-right: 0.78em;
}

.c-gap--79 {
  padding-right: 0.79em;
}

.c-gap--80 {
  padding-right: 0.8em;
}

.c-gap--81 {
  padding-right: 0.81em;
}

.c-gap--82 {
  padding-right: 0.82em;
}

.c-gap--83 {
  padding-right: 0.83em;
}

.c-gap--84 {
  padding-right: 0.84em;
}

.c-gap--85 {
  padding-right: 0.85em;
}

.c-gap--86 {
  padding-right: 0.86em;
}

.c-gap--87 {
  padding-right: 0.87em;
}

.c-gap--88 {
  padding-right: 0.88em;
}

.c-gap--89 {
  padding-right: 0.89em;
}

.c-gap--90 {
  padding-right: 0.9em;
}

.c-gap--91 {
  padding-right: 0.91em;
}

.c-gap--92 {
  padding-right: 0.92em;
}

.c-gap--93 {
  padding-right: 0.93em;
}

.c-gap--94 {
  padding-right: 0.94em;
}

.c-gap--95 {
  padding-right: 0.95em;
}

.c-gap--96 {
  padding-right: 0.96em;
}

.c-gap--97 {
  padding-right: 0.97em;
}

.c-gap--98 {
  padding-right: 0.98em;
}

.c-gap--99 {
  padding-right: 0.99em;
}

.c-gap--100 {
  padding-right: 1em;
}

.c-gap--100 {
  padding-right: 1.01em;
}

.grecaptcha-badge {
  visibility: hidden;
}

.c-gnav.a {
  font-family: "Helvetica Neue", arial, sans-serif;
}

.c-gnav > .menu-item > a .ttl {
  font-weight: 500;
  font-size: 1rem !important;
}

.c-cta {
  display: inline-flex;
  align-items: center;
  color: #2e2d2d;
  text-decoration: none;
}
.c-cta__text {
  display: inline-block;
  color: inherit;
  transition: color 0.6s ease, transform 0.3s ease;
}
.c-cta__text:hover {
  transform: translateX(1.5px);
  color: #bf0101;
}
.c-cta__icon {
  margin-left: 8px;
  vertical-align: middle;
}
.c-cta--light {
  color: #2e2d2d;
}
.c-cta--dark {
  color: #2e2d2d;
}
.contact .c-cta {
  color: #fff;
}
.contact .c-cta__text {
  color: #fff;
}

.common-footer {
  background: #232323;
  color: #f2f1ef;
}
.common-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 126px;
  width: min(100%, 1300px);
  margin: 0 auto;
  max-width: calc(var(--container_size, 0px) + var(--swl-pad_container, 0px) * 2);
  padding-right: var(--swl-pad_container, 0);
  padding-left: var(--swl-pad_container, 0);
}
@media (max-width: 480px) {
  .common-footer__inner {
    align-items: center;
    height: auto;
    padding: 32px;
  }
}
.common-footer__nav {
  display: flex;
  align-items: center;
  gap: 23px;
}
@media (max-width: 768px) {
  .common-footer__nav {
    gap: 14px;
  }
}
@media (max-width: 480px) {
  .common-footer__nav {
    padding-top: 0;
  }
}
.common-footer__nav a {
  color: #f2f1ef;
  font-weight: 400;
  font-size: 1rem;
  font-family: "Helvetica Neue", arial, sans-serif;
  text-decoration: none;
}
@media (max-width: 480px) {
  .common-footer__nav a {
    font-size: 14px;
  }
}
.common-footer__sns-copyright {
  display: flex;
  align-items: center;
  gap: 24px;
}
@media (max-width: 480px) {
  .common-footer__sns-copyright {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding-top: 0;
  }
}
.common-footer__sns {
  display: flex;
  align-items: center;
  gap: 8px;
}
.common-footer__sns-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  transition: opacity 0.3s ease;
}
.common-footer__sns-link:hover {
  opacity: 0.7;
}
.common-footer__sns-icon {
  display: block;
  width: 20px;
  height: 20px;
}
.common-footer__copyright {
  font-weight: 400;
  font-size: 0.8rem;
  font-family: "Helvetica Neue", arial, sans-serif;
}
@media (max-width: 480px) {
  .common-footer__copyright {
    font-size: 10px;
  }
}

@media (max-width: 1024px) {
  .c-gnav {
    display: none !important;
  }
}
.keyvisual {
  position: relative;
  width: 100%;
  max-width: calc(var(--container_size, 0px) + var(--swl-pad_container, 0px) * 2);
  margin: 0 auto;
  margin-bottom: calc(clamp(0.5rem, 0.8450704225vw + 5.8309859155px, 1rem) * 7);
  padding-right: var(--swl-pad_container, 0);
  padding-left: var(--swl-pad_container, 0);
  overflow: hidden;
  background: #fff;
}
@media (max-width: 480px) {
  .keyvisual {
    height: 76vh;
    margin-bottom: 0;
  }
}
.keyvisual__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 0.338028169vw + 16.7323943662px, 1.2rem);
  height: 100%;
  padding: clamp(12rem, 13.5211267606vw + 165.2957746479px, 20rem) 0 0;
}
@media (max-width: 480px) {
  .keyvisual__container {
    justify-content: flex-end;
    gap: 20px;
    padding: 60px 0 40px;
  }
}
.keyvisual__title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  width: 100%;
}
@media (max-width: 480px) {
  .keyvisual__title-wrap {
    flex-direction: row;
    gap: 20px;
    text-align: center;
  }
}
.keyvisual__title {
  flex-shrink: 0;
}
.keyvisual__site-title {
  margin: 0;
  color: #424242;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.0563380282vw + 24.3887323944px, 4.6rem);
  line-height: 1.193;
  font-family: "Helvetica Neue", arial, sans-serif;
  letter-spacing: 0.02em;
}
.keyvisual__tagline {
  margin-right: 0.25rem;
  margin-bottom: -0.25rem;
}
@media (max-width: 480px) {
  .keyvisual__tagline {
    position: relative;
    width: 140px;
    height: 40px;
    margin-right: 0;
    margin-bottom: 0;
  }
}
.keyvisual__tagline-text {
  margin: 0;
  color: #2f2c2a;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.439;
  font-family: "Helvetica Neue", arial, sans-serif;
  letter-spacing: 0.01em;
}
@media (max-width: 480px) {
  .keyvisual__tagline-text {
    position: absolute;
    right: 0;
    bottom: -10px;
    transform: translate(0%, 100%) rotate(90deg);
    width: 140px;
    font-size: 12px;
    text-align: left;
    transform-origin: right top;
  }
}
.keyvisual__img {
  clip-path: inset(50% 0 50% 0);
  width: 100%;
  max-width: 1440px;
  height: auto;
}
@media (max-width: 480px) {
  .keyvisual__img {
    max-width: 400px;
  }
}
.keyvisual__macbook {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.keyvisual__graphic {
  flex-shrink: 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}
@media (max-width: 480px) {
  .keyvisual__graphic {
    width: 100vw;
    height: 80vh;
  }
}
.keyvisual__graphic--fixed {
  position: fixed;
  bottom: 0;
}
.keyvisual__record {
  position: absolute;
  top: 35%;
  right: -25%;
  transform: translateY(-50%);
  width: min(834px, 60vw);
  height: min(834px, 60vw);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
@media (max-width: 480px) {
  .keyvisual__record {
    top: 40%;
    right: -40%;
    width: min(500px, 90vw);
    height: min(500px, 90vw);
  }
}
.keyvisual__record--scrolled {
  opacity: 0.3;
  top: auto;
  bottom: -15%;
  transform: scale(0.66) translateY(0%);
}
.keyvisual__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(46, 45, 45, 0.6);
  border-radius: 50%;
  will-change: transform;
}
.keyvisual__circle--center {
  width: min(260px, 31.2%);
  height: min(260px, 31.2%);
  border-width: 1px;
  border-color: rgba(46, 45, 45, 0.6);
}
.keyvisual__circle--second {
  width: min(380px, 45.6%);
  height: min(380px, 45.6%);
  border-width: 1.5px;
  border-color: rgba(46, 45, 45, 0.6);
}
.keyvisual__circle--ring {
  border-width: 1px;
  border-color: rgba(46, 45, 45, 0.2);
}
.keyvisual__circle--ring[data-ring="1"] {
  width: min(401px, 48.12%);
  height: min(401px, 48.12%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="2"] {
  width: min(422px, 50.64%);
  height: min(422px, 50.64%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="3"] {
  width: min(443px, 53.16%);
  height: min(443px, 53.16%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="4"] {
  width: min(464px, 55.68%);
  height: min(464px, 55.68%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="5"] {
  width: min(485px, 58.2%);
  height: min(485px, 58.2%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="6"] {
  width: min(506px, 60.72%);
  height: min(506px, 60.72%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="7"] {
  width: min(527px, 63.24%);
  height: min(527px, 63.24%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="8"] {
  width: min(548px, 65.76%);
  height: min(548px, 65.76%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="9"] {
  width: min(569px, 68.28%);
  height: min(569px, 68.28%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="10"] {
  width: min(590px, 70.8%);
  height: min(590px, 70.8%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="11"] {
  width: min(611px, 73.32%);
  height: min(611px, 73.32%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="12"] {
  width: min(632px, 75.84%);
  height: min(632px, 75.84%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="13"] {
  width: min(653px, 78.36%);
  height: min(653px, 78.36%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="14"] {
  width: min(674px, 80.88%);
  height: min(674px, 80.88%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="15"] {
  width: min(695px, 83.4%);
  height: min(695px, 83.4%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="16"] {
  width: min(716px, 85.92%);
  height: min(716px, 85.92%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="17"] {
  width: min(737px, 88.44%);
  height: min(737px, 88.44%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="18"] {
  width: min(758px, 90.96%);
  height: min(758px, 90.96%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="19"] {
  width: min(779px, 93.48%);
  height: min(779px, 93.48%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="20"] {
  width: min(800px, 96%);
  height: min(800px, 96%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="21"] {
  width: min(821px, 98.52%);
  height: min(821px, 98.52%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="22"] {
  width: min(842px, 101.04%);
  height: min(842px, 101.04%);
  border-color: #2e2d2d;
}
.keyvisual__circle--ring[data-ring="23"] {
  width: min(863px, 103.56%);
  height: min(863px, 103.56%);
  border-color: #2e2d2d;
}
.keyvisual__circle--mask {
  z-index: 2;
  transform: translate(-50%, -50%) !important;
  width: 901px !important;
  height: 901px !important;
  border: none;
  background-color: #fff;
  will-change: auto;
}
@media (max-width: 480px) {
  .keyvisual__circle--mask {
    z-index: 2;
    width: 525px !important;
    height: 525px !important;
  }
}
.keyvisual__rotating-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  transform: translate(-50%, -50%);
  width: min(600px, 100%);
  height: min(600px, 100%);
}
.keyvisual__rotating-dot--first {
  animation: rotate-record 12s linear infinite;
}
.keyvisual__rotating-dot--second {
  animation: rotate-record 12s linear infinite;
}
.keyvisual__dot {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(29px, 3.5%);
  height: min(29px, 3.5%);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(191, 1, 1, 0.6), 0 0 30px rgba(191, 1, 1, 0.3);
  background: #bf0101;
}
@media (max-width: 480px) {
  .keyvisual__dot {
    width: min(20px, 4%);
    height: min(20px, 4%);
    box-shadow: 0 0 10px rgba(191, 1, 1, 0.6);
  }
}

@keyframes rotate-record {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate-record-reverse {
  0% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-180deg);
  }
}
.work {
  margin-bottom: calc(clamp(0.5rem, 0.8450704225vw + 5.8309859155px, 1rem) * 7 * 1.5);
}
@media (max-width: 480px) {
  .work {
    margin-bottom: calc(clamp(0.5rem, 0.8450704225vw + 5.8309859155px, 1rem) * 7 * 1.2);
  }
}
.work__container {
  width: min(100%, 1300px);
  margin: 0 auto;
}
@media (max-width: 480px) {
  .work__container {
    padding: 0;
  }
}
.work__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 55px;
}
@media (max-width: 480px) {
  .work__header {
    margin-bottom: 25px;
  }
}
.work__title {
  margin: 0;
  color: #2e2d2d;
  font-weight: 400;
  font-size: clamp(2rem, 3.3802816901vw + 23.323943662px, 4rem);
  line-height: 1.193;
  font-family: "Helvetica Neue", arial, sans-serif;
  letter-spacing: 0.02em;
}
.work__grid {
  display: grid;
  gap: 50px 40px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
  .work__grid {
    gap: 40px 30px;
  }
}
@media (max-width: 480px) {
  .work__grid {
    gap: 40px;
    grid-template-columns: 1fr;
  }
}
.work__item {
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 0.4225352113vw + 11.0154929577px, 0.95rem);
}
.work__item-image {
  position: relative;
  width: 100%;
  aspect-ratio: 624/390;
  overflow: hidden;
}
.work__item-image img {
  transition: transform 0.45s ease;
}
.work__item-image img:hover {
  transform: scale(1.04);
  transition: transform 0.55s ease;
}
.work__item-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #222 0%, #565656 100%);
}
.work__item-content {
  display: flex;
  flex-direction: column;
  gap: clamp(0.3rem, 0.1690140845vw + 4.7661971831px, 0.4rem);
}
.work__item-title {
  margin: 0;
  color: #2e2d2d;
  font-weight: 400;
  font-size: clamp(0.95rem, 0.0845070423vw + 16.7830985915px, 1rem);
  line-height: 1.8;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.02em;
}
.work__item-categories {
  display: flex;
  align-items: center;
  gap: 8px;
}
.work__item-category {
  color: #555;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.8;
  font-family: "Helvetica Neue", arial, sans-serif;
  letter-spacing: 0.02em;
}
.work__item-divider {
  width: 1px;
  height: 10px;
  background: #777;
}

.work__title,
.work__view-all,
.work__item {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

.no-js .work__title,
.no-js .work__view-all,
.no-js .work__item {
  opacity: 1;
  clip-path: none;
}

.about {
  margin-bottom: calc(clamp(0.5rem, 0.8450704225vw + 5.8309859155px, 1rem) * 7 * 2.2);
}
.about__container {
  --about-right-width: 600px;
  --about-left-min: 50px;
  display: grid;
  position: relative;
  height: 100%;
  grid-template-columns: minmax(var(--about-left-min), 1fr) var(--about-right-width);
  width: min(100%, 1300px);
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .about__container {
    --about-right-width: 500px;
  }
}
@media (max-width: 768px) {
  .about__container {
    --about-right-width: 480px;
  }
}
@media (max-width: 480px) {
  .about__container {
    gap: clamp(1rem, 1.6901408451vw + 11.661971831px, 2rem);
    height: auto;
    padding: 0;
    padding-top: 90px;
    grid-template-columns: 1fr;
  }
}
.about__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  grid-column: 1/2;
}
@media (max-width: 480px) {
  .about__title {
    display: flex;
    justify-content: center;
    align-items: end;
    grid-column: auto;
  }
}
.about__title-frame {
  position: relative;
}
.about__title-wrap {
  position: absolute;
  top: 0;
  left: clamp(1.4rem, 1.014084507vw + 21.3971830986px, 2rem);
  transform: translate(0, 0) rotate(90deg);
  transform-origin: left top;
}
@media (max-width: 480px) {
  .about__title-wrap {
    transform: translate(2vw, 100%) rotate(90deg);
    inset: auto 0 0 auto;
    transform-origin: right top;
  }
}
.about__title-text {
  margin: 0;
  color: #424242;
  font-weight: 400;
  font-size: clamp(1.4rem, 1.014084507vw + 21.3971830986px, 2rem);
  line-height: 1.193;
  font-family: "Helvetica Neue", arial, sans-serif;
  letter-spacing: 0.02em;
}
.about__layout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2.6rem, 1.5211267606vw + 41.0957746479px, 3.5rem);
  padding: 0 20px 0 0;
  grid-column: 2/3;
}
@media (max-width: 480px) {
  .about__layout {
    padding: 0;
    grid-column: auto;
  }
}
.about__main-title {
  margin: 0;
  color: #2e2d2d;
  font-weight: 500;
  font-size: clamp(1.625rem, 1.6901408451vw + 22.911971831px, 2.625rem);
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.02em;
}
@media (max-width: 480px) {
  .about__main-title {
    font-size: 26px;
    line-height: 1.5;
  }
}
.about__description {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.8450704225vw + 14.8309859155px, 1.5rem);
}
.about__desc-text {
  margin: 0;
  color: #2e2d2d;
  font-weight: 400;
  font-size: 1rem !important;
  line-height: 2;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.02em;
}
@media (max-width: 480px) {
  .about__desc-text {
    font-size: 13px;
    line-height: 2;
  }
}

.skills {
  margin-bottom: calc(clamp(0.5rem, 0.8450704225vw + 5.8309859155px, 1rem) * 7 * 0.4);
}
.skills__container {
  --skills-column-ratio: clamp(1.34, 1.34 + (100vw - 768px) / 1000, 2.5);
  display: grid;
  position: relative;
  padding-left: 20px;
  grid-template-columns: minmax(300px, var(--skills-column-ratio) fr) 1fr;
  width: min(100%, 1300px);
  margin: 0 auto;
}
@media (max-width: 480px) {
  .skills__container {
    gap: clamp(1rem, 1.6901408451vw + 11.661971831px, 2rem);
    padding: 0;
    grid-template-columns: 1fr;
  }
}
.skills__title {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  grid-column: 2/3;
}
@media (max-width: 480px) {
  .skills__title {
    align-items: flex-end;
    grid-column: auto;
  }
}
.skills__title-frame {
  position: relative;
}
.skills__title-wrap {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 0) rotate(90deg);
  transform-origin: left top;
}
@media (max-width: 480px) {
  .skills__title-wrap {
    transform: translate(2vw, 100%) rotate(90deg);
    inset: auto 0 0 auto;
    transform-origin: right top;
  }
}
.skills__title-text {
  margin: 0;
  color: #2e2d2d;
  font-weight: 400;
  font-size: clamp(1.4rem, 1.014084507vw + 21.3971830986px, 2rem);
  line-height: 1.193;
  font-family: "Helvetica Neue", arial, sans-serif;
  letter-spacing: 0.02em;
}
.skills__layout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px 0 0;
  grid-column: 1/2;
}
@media (max-width: 480px) {
  .skills__layout {
    padding: 0;
    grid-column: auto;
  }
}
.skills__block {
  margin-bottom: clamp(4rem, 5.0704225352vw + 52.985915493px, 7rem);
}
@media (max-width: 480px) {
  .skills__block {
    gap: 45px;
    padding-left: 0;
    grid-template-columns: 1fr;
  }
}
.skills__block--design {
  margin-bottom: clamp(4rem, 5.0704225352vw + 52.985915493px, 7rem);
}
@media (max-width: 480px) {
  .skills__block--design {
    margin-bottom: calc(clamp(4rem, 5.0704225352vw + 52.985915493px, 7rem) * 1.2);
  }
}
.skills__block--frontend {
  margin-bottom: calc(clamp(4rem, 5.0704225352vw + 52.985915493px, 7rem));
}
.skills__block-head {
  display: flex;
  align-items: center;
  margin-bottom: clamp(2.6rem, 1.5211267606vw + 41.0957746479px, 3.5rem);
}
@media (max-width: 768px) {
  .skills__block-head {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.2rem, 1.014084507vw + -0.2028169014px, 0.8rem);
  }
}
.skills__block-index {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding-top: 0.28em;
  padding-right: clamp(0.725rem, 2.323943662vw + 4.3352112676px, 2.1rem);
}
@media (max-width: 480px) {
  .skills__block-index {
    gap: 0;
    padding-top: 0;
  }
}
.skills__block-num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2e2d2d;
  font-weight: 500;
  font-size: 17.5px;
  font-family: "Helvetica Neue", arial, sans-serif;
}
@media (max-width: 480px) {
  .skills__block-num {
    scale: 0.7;
  }
}
.skills__block-num--01 {
  padding-top: 0.04em;
  padding-left: 0.04em;
}
@media (max-width: 480px) {
  .skills__block-num--01 {
    padding: 0;
  }
}
.skills__block-num--02 {
  padding-top: 0.01em;
  padding-right: 0.03em;
  padding-left: 0.02em;
  font-size: 17.3px;
}
@media (max-width: 480px) {
  .skills__block-num--02 {
    padding: 0;
  }
}
.skills__block-num-icon {
  display: inline-block;
  width: 7px;
  height: 15px;
}
@media (max-width: 480px) {
  .skills__block-num-icon {
    scale: 0.7;
  }
}
.skills__block-num-icon--left {
  padding-right: 0.02em;
}
@media (max-width: 480px) {
  .skills__block-num-icon--left {
    padding: 0;
  }
}
.skills__block-num-icon--right {
  padding-left: 0.02em;
}
@media (max-width: 480px) {
  .skills__block-num-icon--right {
    padding: 0;
  }
}
.skills__block-title {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.3125rem, 0.5281690141vw + 3.6443661972px, 0.625rem);
  margin: 0;
  color: #2e2d2d;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.6901408451vw + 25.161971831px, 2.75rem);
  line-height: 1.193;
  font-family: "Helvetica Neue", arial, sans-serif;
  letter-spacing: 0.02em;
}
.skills__block-title-text {
  display: inline-block;
}
.skills__block-title-cross-img {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
}
.skills__block-body {
  display: flex;
  flex-direction: column;
  gap: calc(clamp(2.6rem, 1.5211267606vw + 41.0957746479px, 3.5rem) * 0.85);
  padding-left: calc(35.3px + clamp(0.725rem, 2.323943662vw + 4.3352112676px, 2.1rem));
}
@media (max-width: 768px) {
  .skills__block-body {
    padding-left: 0;
  }
}
.skills__block-texts {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 0.676056338vw + 11.8647887324px, 1.2rem);
}
.skills__block-text {
  margin: 0;
  color: #2e2d2d;
  font-weight: 400;
  font-size: clamp(0.8rem, 0.338028169vw + 13.1323943662px, 1rem);
  line-height: 2;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.02em;
}
@media (max-width: 480px) {
  .skills__block-text {
    font-size: clamp(0.975rem, 0.0422535211vw + 17.3915492958px, 1rem);
  }
}
.skills__stacks {
  display: flex;
  flex-direction: column;
  gap: clamp(0.2rem, 0.1690140845vw + 2.9661971831px, 0.3rem);
}
@media (max-width: 480px) {
  .skills__stacks {
    gap: 10px;
  }
}
.skills__stack {
  margin: 0;
  color: #555;
  font-weight: 400;
  font-size: calc(clamp(0.975rem, 0.0422535211vw + 17.3915492958px, 1rem) * 0.78);
  font-family: "Helvetica Neue", arial, sans-serif;
  letter-spacing: 0.02em;
}
@media (max-width: 480px) {
  .skills__stack {
    line-height: 1.6;
  }
}
.skills__btn {
  padding-left: calc(32.3px + clamp(0.725rem, 2.323943662vw + 4.3352112676px, 2.1rem));
}
@media (max-width: 480px) {
  .skills__btn {
    padding-left: 0;
  }
}

.contact {
  opacity: 0;
  clip-path: inset(50% 0 50% 0);
  position: relative;
  margin-bottom: calc(clamp(0.5rem, 0.8450704225vw + 5.8309859155px, 1rem) * 7 * 1);
  padding: 94px 0;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(170deg, #312D2D -10%, #111010 52%);
}
@media (max-width: 480px) {
  .contact {
    padding: 60px 0;
    border-radius: 4px;
  }
}
.contact::before {
  opacity: 0.1;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  transform: translate(-50%, -50%) rotate(15deg);
  width: min(1200px, 90vw);
  aspect-ratio: 3520/2912;
  background-image: url("../img/front/contact-bg.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
  transition: transform 0.6s ease, opacity 0.6s ease;
  pointer-events: none;
}
@media (max-width: 480px) {
  .contact::before {
    width: auto;
    height: min(1000px, 150vw);
  }
}
.contact__container {
  position: relative;
  width: min(100%, 1300px);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 2.5352112676vw + 17.4929577465px, 3rem);
}
.contact__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.contact__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
}
@media (max-width: 480px) {
  .contact__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 19px;
  }
}
.contact__title-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(0.3rem, 0.338028169vw + 4.1323943662px, 0.5rem);
  margin-top: clamp(0.3rem, 0.338028169vw + 4.1323943662px, 0.5rem);
}
.contact__title {
  margin: 0;
  color: #f2f1ef;
  font-weight: 200;
  font-size: clamp(2.625rem, 3.2704225352vw + 34.985915493px, 4.56rem);
  line-height: 1.193;
  font-family: "Helvetica Neue", arial, sans-serif;
  letter-spacing: 0.04em;
  text-shadow: 2px 2px 4px rgba(152, 151, 151, 0.1);
}
.contact__lead {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-left: 0.35em;
  color: #f2f1ef;
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 2;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.03em;
}
@media (max-width: 480px) {
  .contact__lead {
    font-size: 0.75rem;
  }
}
.contact.contact--bg-zoom::before {
  transform: translate(-50%, -50%) rotate(15deg) scale(1.05);
}

.coming-soon {
  margin-top: 4rem;
  padding-bottom: 10rem;
}
.coming-soon__container {
  width: min(100%, 1300px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  max-width: 490px;
}
.coming-soon__title {
  font-weight: 400;
  font-size: clamp(2.2rem, 4.0563380282vw + 24.3887323944px, 4.6rem);
  line-height: 1.193;
  font-family: "Helvetica Neue", arial, sans-serif;
  letter-spacing: 0.02em;
  text-align: center;
}
.coming-soon__button {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}

.sp-only {
  display: none;
}
@media (max-width: 480px) {
  .sp-only {
    display: inline;
  }
}

.pc-only {
  display: inline;
}
@media (max-width: 480px) {
  .pc-only {
    display: none !important;
  }
}

/*# sourceMappingURL=main.css.map */