:root {
  --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-inout: cubic-bezier(.72, 0, .28, 1);
  --hover-gradient-ink: linear-gradient(135deg, #050505 0%, #151515 52%, #303030 100%);
  --hover-shadow-button: 8px 8px 0 #b9b9b9, 14px 14px 28px rgba(5, 5, 5, .16), 0 0 0 1px #050505 inset;
  --hover-shadow-button-invert: 8px 8px 0 #b9b9b9, 14px 14px 28px rgba(5, 5, 5, .16), 0 0 0 1px rgba(255, 255, 255, .82) inset;
  --hover-shadow-card: 10px 10px 0 #b8b8b8, 18px 18px 38px rgba(5, 5, 5, .15), 0 0 0 1px #050505 inset;
}

.simple-home-page {
  background: #fff !important;
}

.simple-home-page::before,
.simple-home-page::after,
.simple-hero::before,
.simple-hero::after {
  content: none !important;
  display: none !important;
}

.simple-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff;
}

.simple-hero__inner {
  position: relative;
  z-index: 1;
}

.simple-hero h1 {
  position: relative;
  isolation: isolate;
  color: #050505;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Inter", "Noto Sans JP", sans-serif;
  font-weight: 760;
  font-variation-settings: "wght" 760;
  letter-spacing: 0;
  text-shadow: none;
  transform-origin: 50% 58%;
}

.contact-page .hero h1 {
  font-size: clamp(2.65rem, 8.5vw, 6.8rem);
  line-height: .98;
  overflow-wrap: normal;
  word-break: normal;
}

.contact-page .hero h1 span {
  white-space: nowrap;
}

.simple-hero h1::before,
.simple-hero h1::after {
  content: "t-i.to";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.simple-hero h1::before {
  color: transparent;
  -webkit-text-stroke: clamp(1px, .1vw, 2px) #050505;
  clip-path: inset(0 0 51% 0);
  opacity: .24;
  transform: translate3d(-.018em, -.012em, 0) scaleX(1.004);
}

.simple-hero h1::after {
  color: #050505;
  clip-path: inset(52% 0 0 0);
  opacity: .12;
  transform: translate3d(.018em, .014em, 0) scaleX(.996);
}

.icon-button,
.button-link,
.icon-tile,
.link-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 100%;
  transform: translate3d(0, 0, 0);
  transition:
    transform .46s var(--motion-ease-out),
    background-size .52s var(--motion-ease-out) .04s,
    background-color .46s var(--motion-ease-out),
    border-color .46s var(--motion-ease-out),
    box-shadow .46s var(--motion-ease-out),
    color .34s ease .08s;
  will-change: transform, background-size;
}

.icon-button,
.button-link--secondary,
.icon-tile,
.link-card {
  background-image: var(--hover-gradient-ink);
}

.button-link:not(.button-link--secondary) {
  background-image: var(--hover-gradient-ink);
}

.icon-button > svg,
.button-link > svg,
.icon-tile .activity-tile__top > svg:last-child,
.link-card__icon,
.link-card__arrow {
  position: relative;
  z-index: 1;
  transition:
    transform .5s var(--motion-ease-out) .06s,
    border-color .46s var(--motion-ease-out),
    background-color .46s var(--motion-ease-out),
    color .34s ease .08s;
}

.activity-tile__top,
.activity-tile__body,
.link-card__body,
.link-card__label,
.link-card__display {
  position: relative;
  z-index: 1;
}

.contact-form__field input,
.contact-form__field textarea {
  transition:
    transform .24s var(--motion-ease-out),
    background-color .24s var(--motion-ease-out),
    border-color .24s var(--motion-ease-out),
    box-shadow .24s var(--motion-ease-out),
    color .24s var(--motion-ease-out);
}

.icon-button:hover,
.icon-button:focus-visible,
.button-link--secondary:hover,
.button-link--secondary:focus-visible {
  background-color: #fff;
  background-image: var(--hover-gradient-ink);
  background-size: 100% 100%;
  border-color: #050505;
  color: #fff;
  transform: translate3d(-2px, -3px, 0);
  box-shadow: var(--hover-shadow-button);
  outline: none;
}

.button-link:not(.button-link--secondary):hover,
.button-link:not(.button-link--secondary):focus-visible {
  background-color: #050505;
  background-image: var(--hover-gradient-ink);
  background-size: 100% 100%;
  border-color: #050505;
  color: #fff;
  transform: translate3d(-2px, -3px, 0);
  box-shadow: var(--hover-shadow-button-invert);
  outline: none;
}

.icon-tile:hover,
.icon-tile:focus-visible,
.link-card:hover,
.link-card:focus-visible {
  background-color: #fff;
  background-image: var(--hover-gradient-ink);
  background-size: 100% 100%;
  border-color: #050505;
  color: #fff;
  transform: translate3d(-3px, -4px, 0);
  box-shadow: var(--hover-shadow-card);
}

.icon-button:hover > svg,
.icon-button:focus-visible > svg,
.button-link:hover > svg,
.button-link:focus-visible > svg,
.icon-tile:hover .activity-tile__top > svg:last-child,
.icon-tile:focus-visible .activity-tile__top > svg:last-child,
.link-card:hover .link-card__arrow,
.link-card:focus-visible .link-card__arrow {
  transform: translate3d(3px, -3px, 0);
}

.link-card:hover .link-card__label,
.link-card:focus-visible .link-card__label,
.link-card:hover .link-card__display,
.link-card:focus-visible .link-card__display,
.link-card:hover .link-card__arrow,
.link-card:focus-visible .link-card__arrow {
  color: #fff;
}

.link-card:hover .link-card__icon,
.link-card:focus-visible .link-card__icon {
  border-color: #fff;
  background-color: #050505;
  transform: scale(.92);
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  border-color: #050505;
  outline: none;
  box-shadow: 2px 2px 0 #050505;
}

@media (prefers-reduced-motion: no-preference) {
  .simple-hero__inner {
    animation: tito-type-enter .72s var(--motion-ease-out) both;
  }

  .simple-hero h1 {
    animation: tito-type-core 13s var(--motion-ease-inout) infinite;
    will-change: transform, font-variation-settings, font-weight;
  }

  .simple-hero h1::before {
    animation: tito-type-outline 13s var(--motion-ease-inout) infinite;
    will-change: transform, opacity, clip-path;
  }

  .simple-hero h1::after {
    animation: tito-type-register 13s var(--motion-ease-inout) infinite;
    will-change: transform, opacity, clip-path;
  }

  .hero-action-dock {
    animation: tito-type-enter .72s var(--motion-ease-out) .08s both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .simple-hero__inner,
  .simple-hero h1,
  .simple-hero h1::before,
  .simple-hero h1::after,
  .hero-action-dock {
    animation: none;
  }

  .simple-hero h1::before,
  .simple-hero h1::after {
    opacity: 0;
  }

  .icon-button,
  .button-link,
  .icon-tile,
  .link-card,
  .contact-form__field input,
  .contact-form__field textarea {
    transition: none;
  }
}

@keyframes tito-type-core {
  0%,
  100% {
    font-weight: 760;
    font-variation-settings: "wght" 760;
    transform: translate3d(0, 0, 0) scaleX(1) scaleY(1);
  }

  30% {
    font-weight: 620;
    font-variation-settings: "wght" 620;
    transform: translate3d(-.18vw, 0, 0) scaleX(1.018) scaleY(.992);
  }

  62% {
    font-weight: 860;
    font-variation-settings: "wght" 860;
    transform: translate3d(.16vw, 0, 0) scaleX(.988) scaleY(1.006);
  }
}

@keyframes tito-type-outline {
  0%,
  100% {
    clip-path: inset(0 0 51% 0);
    opacity: .2;
    transform: translate3d(-.018em, -.012em, 0) scaleX(1.004);
  }

  42% {
    clip-path: inset(8% 0 58% 0);
    opacity: .36;
    transform: translate3d(.016em, -.006em, 0) scaleX(.994);
  }

  72% {
    clip-path: inset(0 0 46% 0);
    opacity: .28;
    transform: translate3d(-.008em, -.018em, 0) scaleX(1.01);
  }
}

@keyframes tito-type-register {
  0%,
  100% {
    clip-path: inset(52% 0 0 0);
    opacity: .1;
    transform: translate3d(.018em, .014em, 0) scaleX(.996);
  }

  38% {
    clip-path: inset(45% 0 12% 0);
    opacity: .18;
    transform: translate3d(-.014em, .016em, 0) scaleX(1.006);
  }

  78% {
    clip-path: inset(57% 0 0 0);
    opacity: .14;
    transform: translate3d(.008em, .006em, 0) scaleX(.99);
  }
}

@keyframes tito-type-enter {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(.996);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 活動カード: PC幅は6件を3列×2段で揃え、中間幅は2列にして窮屈さを解消する */
@media (min-width: 901px) {
  .icon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .icon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* トップのプロフィール文: 日本語長文向けに文字サイズ・行間・行長を調整する */
.mini-profile {
  padding: 22px 0;
  font-size: .84rem;
}

.mini-profile p {
  max-width: 640px;
  line-height: 1.9;
}