@charset "UTF-8";

/* ==========================================================================
   トップページ専用スタイル
   ========================================================================== */

/* --------------------------------------------------------------------------
   ファーストビュー
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(680px, 100svh);
  padding: calc(var(--header-height) + 24px) 0 96px;
  overflow: hidden;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  width: 100%;
  max-width: calc(var(--content-width) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__visual {
  position: relative;
}

.hero__visual--primary {
  grid-column: 1 / 6;
  grid-row: 1 / 3;
  align-self: start;
}

.hero__visual--secondary {
  grid-column: 8 / 12;
  grid-row: 2;
}

.hero__photo {
  position: relative;
  z-index: 1;
}

.hero__photo--primary {
  width: min(100%, 420px);
}

.hero__photo--secondary {
  width: min(100%, 320px);
  margin-left: auto;
}

.hero__blob--primary {
  top: -14%;
  left: 14%;
  width: 112%;
  aspect-ratio: 1.15;
}

.hero__blob--dot {
  bottom: 2%;
  left: -6%;
  width: 13%;
  aspect-ratio: 1;
}

/* 写真の背後からのぞく細いリング */
.hero__visual--primary::before,
.hero__visual--secondary::before {
  content: "";
  position: absolute;
  top: 0;
  z-index: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.hero__visual--primary::before {
  left: 0;
  width: min(100%, 420px);
  border: 1.5px solid var(--color-ring-blue);
  transform: translate(7%, 5%);
}

.hero__visual--secondary::before {
  right: 0;
  width: min(100%, 320px);
  border: 1.5px dashed var(--color-ring-pink);
  transform: translate(-8%, -7%);
}

/* ドット模様のアクセント */
.hero__visual--secondary::after {
  content: "";
  position: absolute;
  bottom: -6%;
  left: 2%;
  z-index: 0;
  width: 132px;
  aspect-ratio: 1;
  background-image: radial-gradient(var(--color-dot) 1.6px, transparent 1.8px);
  background-size: 14px 14px;
  pointer-events: none;
}

.hero__blob--secondary {
  top: 24%;
  left: -34%;
  width: 128%;
  aspect-ratio: 1.25;
}

.hero__copy {
  position: relative;
  z-index: 2;
  grid-column: 6 / 13;
  grid-row: 1;
  align-self: end;
  padding: 48px 0 40px clamp(0px, 3vw, 48px);
}

.hero__eyebrow {
  margin-bottom: 12px;
  font-family: var(--font-en);
  font-size: var(--fs-md);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-blue-deep);
}

.hero__title {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.1em;
}

.hero__subtitle {
  margin-top: 16px;
  font-family: var(--font-en);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.hero__scroll {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
  transform: translateX(-50%);
}

.hero__scroll::after {
  content: "";
  width: 1px;
  height: 56px;
  background: linear-gradient(var(--color-blue), var(--color-pink));
  transform-origin: top;
  animation: scroll-line 2.2s var(--ease-out) infinite;
}

@keyframes scroll-line {
  0% {
    transform: scaleY(0);
  }

  60% {
    transform: scaleY(1);
    opacity: 1;
  }

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

@media (max-width: 767px) {
  .hero {
    padding-bottom: 104px;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .hero__visual--primary {
    grid-column: 1;
    grid-row: 1;
    width: 70%;
  }

  .hero__copy {
    grid-column: 1;
    grid-row: 2;
    padding: 32px 0 8px;
  }

  .hero__visual--secondary {
    grid-column: 1;
    grid-row: 3;
    justify-self: end;
    width: 54%;
    margin-top: 8px;
  }
}

/* --------------------------------------------------------------------------
   私たちの想い
   -------------------------------------------------------------------------- */

.mission {
  overflow: hidden;
}

.mission__blob {
  top: 8%;
  left: -140px;
  width: 340px;
  aspect-ratio: 1;
}

.mission__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
}

.mission__photo {
  aspect-ratio: 16 / 11;
}

.mission__lead {
  margin-bottom: 28px;
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.mission__text {
  color: var(--color-text-muted);
}

.mission__text + .mission__text {
  margin-top: 1.2em;
}

@media (max-width: 767px) {
  .mission__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .mission__body {
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   事業内容
   -------------------------------------------------------------------------- */

.business {
  overflow: hidden;
}

.business__blob {
  top: 4%;
  right: -120px;
  width: 360px;
  aspect-ratio: 1.1;
}

.business .container {
  position: relative;
  z-index: 1;
}

.business-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}

.business-item + .business-item {
  margin-top: clamp(72px, 8vw, 120px);
}

.business-item--reverse .business-item__body {
  order: 2;
}

.business-item__number {
  font-family: var(--font-en);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1;
  background: linear-gradient(90deg, var(--color-blue), var(--color-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.business-item__title {
  margin-top: 12px;
  font-family: var(--font-en);
  font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);
  font-weight: 500;
  line-height: 1.1;
}

.business-item__category {
  margin: 4px 0 24px;
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

.business-item__text {
  color: var(--color-text-muted);
}

.business-item__text + .business-item__text {
  margin-top: 1.2em;
}

.business-item__photo {
  aspect-ratio: 4 / 3;
}

/* 青系と交互にしてリズムを付ける */
.business-item--reverse .business-item__photo {
  background: var(--gradient-photo-placeholder-alt-pink);
}

@media (max-width: 767px) {
  .business-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .business-item__photo,
  .business-item--reverse .business-item__photo {
    order: -1;
  }

  .business-item--reverse .business-item__body {
    order: 0;
  }
}

/* --------------------------------------------------------------------------
   対応ジャンル（事業内容と同じ背景色で続ける）
   -------------------------------------------------------------------------- */

.genre {
  padding-top: 0;
}

.genre-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
}

.genre-list__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 36px 16px 28px;
  text-align: center;
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-base) var(--ease-out);
}

.genre-list__item:hover {
  transform: translateY(-4px);
}

.genre-list__icon {
  width: 56px;
  height: 56px;
  padding: 12px;
  border-radius: 50%;
  color: var(--color-blue-deep);
  background-color: var(--color-blue-soft);
}

.genre-list__item:nth-child(even) .genre-list__icon {
  color: var(--color-pink-deep);
  background-color: var(--color-pink-soft);
}

.genre-list__label {
  font-weight: 500;
}

@media (max-width: 767px) {
  .genre-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .genre-list__item {
    padding: 24px 12px 20px;
  }

  .genre-list__item:last-child {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   制作の流れ
   -------------------------------------------------------------------------- */

.flow-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  counter-reset: flow;
}

.flow-list__item {
  position: relative;
  padding: 32px 24px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
}

/* ステップ間をつなぐ矢印 */
.flow-list__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -17px;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--color-pink);
  border-right: 2px solid var(--color-pink);
  transform: translateY(-50%) rotate(45deg);
}

.flow-list__step {
  font-family: var(--font-en);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.flow-list__step span {
  margin-left: 4px;
  font-size: var(--fs-xl);
  color: var(--color-blue-deep);
}

.flow-list__title {
  margin: 12px 0 12px;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.5;
}

.flow-list__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

@media (max-width: 959px) {
  .flow-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow-list__item:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 559px) {
  .flow-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .flow-list__item:not(:last-child)::after {
    display: block;
    top: auto;
    right: auto;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
}

/* --------------------------------------------------------------------------
   としすみの強み
   -------------------------------------------------------------------------- */

.strength {
  overflow: hidden;
  padding-top: 0;
}

.strength__blob {
  bottom: 6%;
  left: -100px;
  width: 300px;
  aspect-ratio: 0.9;
}

.strength .container {
  position: relative;
  z-index: 1;
}

.strength-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}

.strength-card {
  padding: 40px clamp(24px, 2.4vw, 36px);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-card);
}

.strength-card__image {
  width: 72%;
  aspect-ratio: 1;
  margin: 0 auto 24px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--gradient-photo-placeholder);
}

.strength-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.strength-card__image.is-missing img {
  visibility: hidden;
}

.strength-card__number {
  font-family: var(--font-en);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1;
  color: var(--color-pink-deep);
}

.strength-card__title {
  margin: 8px 0 16px;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.5;
}

.strength-card__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

@media (max-width: 959px) {
  .strength-list {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
    margin-inline: auto;
  }

  .strength-card__image {
    width: 56%;
  }
}

/* --------------------------------------------------------------------------
   代表メッセージ
   -------------------------------------------------------------------------- */

.message {
  overflow: hidden;
}

.message__blob {
  top: 10%;
  right: -80px;
  width: 260px;
  aspect-ratio: 1;
}

.message .container {
  position: relative;
  z-index: 1;
}

.message-card {
  position: relative;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 6vw, 72px);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-card);
  line-height: 2.1;
}

/* 引用符の装飾 */
.message-card::before {
  content: "\201C";
  position: absolute;
  top: -0.32em;
  left: 0.2em;
  font-family: var(--font-en);
  font-size: clamp(6rem, 4rem + 6vw, 9rem);
  line-height: 1;
  color: var(--color-pink);
}

.message-card p + p {
  margin-top: 1.8em;
}

.message-card__signature {
  font-weight: 500;
  text-align: right;
}

@media (max-width: 767px) {
  .message-card {
    font-size: var(--fs-sm);
  }
}

/* --------------------------------------------------------------------------
   会社概要
   -------------------------------------------------------------------------- */

.company__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(40px, 5vw, 72px);
}

.company-table__row {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr);
  gap: 16px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--color-line);
}

.company-table__row:first-child {
  border-top: 1px solid var(--color-line);
}

.company-table dt {
  font-weight: 700;
}

.company-table dd {
  color: var(--color-text-muted);
}

.company__map iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-alt);
}

.company__map .text-link {
  margin-top: 16px;
}

@media (max-width: 767px) {
  .company__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-table__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}