@charset "UTF-8";

/* =============================================================
   Design tokens
   ============================================================= */
:root {
  /* color */
  --color-blue01: #25278a;
  --color-blue02: #0b58e5;
  --color-red01: #fb0311;
  --color-text01: #1a1a1a;
  --color-text02: #6b6b6b;
  --color-white: #fff;
  --color-bg-gray: #fafafa;
  --color-border01: #e3e3e3;
  --color-pattern-blue: #dbe7ff;
  --color-pattern-gray: #efeeee;
  --color-deco-blue: #eff4ff;
  --color-blue04: #e6eeff;
  --color-blue06: #0044ff;
  --color-grey03: #e8e8e8;
  --color-grey04: #c4c4c4;
  --color-grey05: #bfc9dc;
  --gradient-footer: linear-gradient(169.77deg, #25278a 0%, #067cd0 100%);
  --gradient-strength: linear-gradient(to bottom right, #25278a 0%, #067cd0 100%);
  --gradient-watermark: linear-gradient(180deg, #d9f8ff 0%, #bfd3ff 100%);
  --shadow-card: 0 4px 20px rgb(0 0 0 / 0.12);
  /* radius */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  /* font family */
  --font-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Bricolage Grotesque", "Noto Sans JP", sans-serif;
  /* font size (数字は px 相当) */
  --fs-10: 0.625rem;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-25: 1.5625rem;
  --fs-26: 1.625rem;
  --fs-28: 1.75rem;
  --fs-30: 1.875rem;
  --fs-32: 2rem;
  --fs-36: 2.25rem;
  --fs-38: 2.375rem;
  --fs-40: 2.5rem;
  --fs-42: 2.625rem;
  --fs-46: 2.875rem;
  --fs-48: 3rem;
  --fs-52: 3.25rem;
  --fs-54: 3.375rem;
  --fs-64: 4rem;
  --fs-80: 5rem;
  --fs-128: 8rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;
  --fs-120: 7.5rem;
  --fs-196: 12.25rem;
  --outer-cap: max(0px, (100% - 1920px) / 2);
  /* content width */
  --inner: clamp(920px, 83.33vw, 1200px);
  --inner-wide: clamp(936px, 84.44vw, 1216px);
  --inner-large: clamp(985px, 93.13vw, 1341px);
  /* section spacing */
  --space-section-sm: 48px;
  --space-section-md: 80px;
  --space-section-lg: 112px;
  /* header */
  --header-height: 122px;
}

@media (max-width: 1024px) {
  :root {
    --inner: clamp(704px, 91.4vw, 936px);
    --inner-wide: clamp(720px, 95.7vw, 980px);
    --inner-large: clamp(720px, 95.7vw, 980px);
    --space-section-sm: 40px;
    --space-section-md: 64px;
    --space-section-lg: 88px;
    --header-height: 88px;
  }
}

@media (max-width: 767px) {
  :root {
    --inner: calc(100% - 48px);
    --inner-wide: calc(100% - 48px);
    --inner-large: calc(100% - 48px);
    --space-section-sm: 32px;
    --space-section-md: 48px;
    --space-section-lg: 64px;
    --header-height: 60px;
  }
}

/* =============================================================
   Base
   ============================================================= */
html {
  scroll-padding-top: var(--header-height);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  background-color: var(--color-white);
  font-variation-settings: "opsz" 14, "wdth" 100;
  color: var(--color-text01);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.8;
}

@media (max-width: 767px) {
  body {
    font-size: var(--fs-14);
  }
}

* {
  --trim: calc((0.7 - var(--lh, 0.7)) * 0.5em);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: wrap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  word-break: keep-all;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

ul,
ol {
  list-style: none;
  padding-left: 0;
}

button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--color-blue02);
  outline-offset: 2px;
}

.u-visuallyHidden {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* =============================================================
   Layout / l-inner
   ============================================================= */
.l-inner {
  margin-inline: auto;
  width: var(--inner);
}

.l-inner--wide {
  width: var(--inner-wide);
}

.l-inner--large {
  width: var(--inner-large);
}

/* =============================================================
   Utility
   ============================================================= */
.u-red {
  color: var(--color-red01);
}

.u-blue {
  color: var(--color-blue02);
}

.u-center {
  text-align: center;
}

.u-brSp {
  display: none;
}

@media (max-width: 767px) {
  .u-brSp {
    display: inline;
  }

  .u-brPc {
    display: none;
  }
}

.u-br600 {
  display: none;
}

@media (max-width: 600px) {
  .u-br600 {
    display: inline;
  }
}

/* =============================================================
   Pattern（背景のドット地）
   ============================================================= */

.u-patternBlue,
.u-patternGray {
  background-size: 4px 4px;
}

.u-patternBlue {
  background-color: var(--color-white);
  background-image: conic-gradient(var(--color-pattern-blue) 0deg 90deg, transparent 90deg 360deg);
}

.u-patternGray {
  background-color: var(--color-bg-gray);
  background-image: conic-gradient(var(--color-pattern-gray) 0deg 90deg, transparent 90deg 360deg);
}

/* =============================================================
   Layout / l-main
   ============================================================= */
.l-main {
  overflow-x: clip;
}

:where(.l-main section) {
  padding-block: var(--space-section-lg);
}

.l-main figure {
  background-color: var(--color-grey03);
  border-radius: var(--radius-8);
}

.l-main figure img {
  border-radius: inherit;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.deco::before {
  background-color: var(--color-deco-blue);
  content: "";
  display: block;
  mask-composite: intersect;
  mask-image:
    repeating-linear-gradient(90deg, #000 0 13px, transparent 13px 32px),
    repeating-linear-gradient(180deg, #000 0 13px, transparent 13px 32px);
  pointer-events: none;
  position: absolute;
  z-index: -1;
  -webkit-mask-composite: source-in;
  -webkit-mask-image:
    repeating-linear-gradient(90deg, #000 0 13px, transparent 13px 32px),
    repeating-linear-gradient(180deg, #000 0 13px, transparent 13px 32px);
}

/* =============================================================
   c-button（お問い合わせボタン）
   ============================================================= */
.c-button {
  align-items: center;
  background-color: var(--color-blue01);
  border-radius: var(--radius-4);
  color: var(--color-white);
  display: inline-flex;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 500;
  gap: 10px;
  justify-content: center;
  letter-spacing: 0.05em;
  line-height: 10px;
  padding: 28px 32px;
}

.c-button::before,
.c-button::after {
  content: "";
  flex: none;
  height: 10px;
  width: 10px;
}

.c-button::after {
  background-clip: content-box;
  background-color: var(--color-red01);
  padding: 2.5px;
}

.c-button:hover {
  background-color: var(--color-blue02);
}

.c-button--white {
  background-color: var(--color-white);
  border: 1.5px solid var(--color-blue01);
  color: var(--color-blue01);
  padding: 26.5px 30.5px;
}

.c-button--white:hover {
  background-color: var(--color-blue04);
}

.c-button--outline {
  background-color: transparent;
  border: 1.5px solid var(--color-white);
  padding: 26.5px 30.5px;
}

.c-button--outline:hover {
  background-color: rgb(255 255 255 / 0.15);
}

@media (max-width: 1024px) {
  .c-button {
    padding: 20px 24px;
  }
}

/* =============================================================
   c-tag（対応内容タグ）
   ============================================================= */
.c-tag {
  border: 1px solid var(--color-blue02);
  border-radius: var(--radius-4);
  color: var(--color-blue02);
  display: inline-block;
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 10px;
  padding: 11px 9px;
}

@media (max-width: 767px) {
  .c-tag {
    font-size: var(--fs-12);
    padding: 8px 7px;
  }
}

/* =============================================================
   c-rank（若手 / 中堅などのラベル）
   ============================================================= */
.c-rank {
  background-color: var(--color-blue04);
  color: var(--color-blue02);
  display: inline-block;
  flex: none;
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 10px;
  padding: 8px;
}

/* =============================================================
   c-photoDuo（大小 2 枚を重ねる写真組み）
   ============================================================= */
.c-photoDuo {
  aspect-ratio: 600 / 490;
  position: relative;
}

.c-photoDuo__main {
  aspect-ratio: 4 / 3;
  width: 93.33%;
}

.c-photoDuo__sub {
  aspect-ratio: 13 / 9;
  left: 56.67%;
  position: absolute;
  top: 63.27%;
  width: 43.33%;
}

/* =============================================================
   Header
   ============================================================= */
.l-header {
  background-color: var(--color-white);
  left: 0;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
}

.header {
  align-items: center;
  display: flex;
  height: var(--header-height);
  justify-content: space-between;
  width: max(var(--inner-large), 100% - 99px);
}

.header__logo {
  flex: none;
  width: 209px;
}

.header__logo img {
  height: auto;
  width: 100%;
}

.header__logo a:hover {
  opacity: 0.7;
}

.header__nav {
  align-items: center;
  display: flex;
  gap: 40px;
}

.header__navList {
  align-items: center;
  display: flex;
  gap: 40px;
}

.header__navItem--top {
  display: none;
}

.header__navLink {
  display: block;
  font-family: var(--font-ja);
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  padding-block: 8px;
}

.header__navLink:hover,
.header__navLink.is-current {
  color: var(--color-blue02);
}

.header__toggle {
  display: none;
}

.js-header.is-switching .header__nav,
.js-header.is-switching .header__toggle,
.js-header.is-switching .header__toggle::before,
.js-header.is-switching .header__toggle::after {
  transition: none;
}

@media (max-width: 1024px) {
  .header__logo {
    width: 160px;
  }

  .header__nav {
    background-color: var(--color-white);
    flex-direction: column;
    gap: 40px;
    height: calc(100dvh - var(--header-height));
    justify-content: flex-start;
    opacity: 0;
    overflow-y: auto;
    padding: 48px 24px 64px;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: var(--header-height);
    transition: opacity 0.3s ease, visibility 0.3s ease;
    visibility: hidden;
    width: min(360px, 100%);
  }

  .js-header.is-open .header__nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
  }

  .header__navList {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .header__navItem {
    border-bottom: 1px solid var(--color-border01);
  }

  .header__navItem--top {
    display: block;
  }

  .header__navLink {
    font-size: var(--fs-16);
    padding-block: 20px;
  }

  .header__toggle {
    background-image: linear-gradient(var(--color-blue01), var(--color-blue01));
    background-position: center;
    background-repeat: no-repeat;
    background-size: 26px 2px;
    display: block;
    flex: none;
    height: 40px;
    position: relative;
    transition: background-size 0.3s ease;
    width: 40px;
    z-index: 1;
  }

  .header__toggle::before,
  .header__toggle::after {
    background-color: var(--color-blue01);
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    top: 50%;
    transition: transform 0.3s ease;
    width: 26px;
  }

  .header__toggle::before {
    transform: translate(-50%, calc(-50% - 8px));
  }

  .header__toggle::after {
    transform: translate(-50%, calc(-50% + 8px));
  }

  .js-header.is-open .header__toggle {
    background-size: 0 2px;
  }

  .js-header.is-open .header__toggle::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .js-header.is-open .header__toggle::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .header__button {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .header__logo {
    width: 132px;
  }

  .header__nav {
    width: 100%;
  }

  .header__button {
    align-self: center;
    width: auto;
  }
}

/* =============================================================
   下層ページ共通：ページヘッダー
   ============================================================= */
.l-pageHead {
  min-height: 434px;
  overflow: hidden;
  padding-top: 48px;
  position: relative;
}

.pageHead {
  padding-bottom: 95px;
  position: relative;
  z-index: 1;
}

.pageHead__title {
  align-items: center;
  display: flex;
  gap: 48px;
  margin-top: 136px;
}

.pageHead__title::before {
  background-image: linear-gradient(
    to bottom,
    var(--color-red01) 0 8px,
    var(--color-blue01) 8px 100%
  );
  content: "";
  flex: none;
  height: 46px;
  width: 8px;
}

.pageHead__ja {
  --lh: 1.5;
  font-family: var(--font-ja);
  font-size: clamp(var(--fs-28), 3.75vw, var(--fs-54));
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
  margin-bottom: var(--trim);
  margin-top: var(--trim);
}

.pageHead__lead {
  --lh: 1.8;
  font-size: var(--fs-18);
  line-height: 1.8;
  margin-bottom: var(--trim);
  margin-top: calc(40px + var(--trim));
}

.pageHead__watermark {
  background-clip: text;
  -webkit-background-clip: text;
  background-image: var(--gradient-watermark);
  bottom: -34px;
  color: transparent;
  font-family: var(--font-en);
  font-size: clamp(var(--fs-72), 13.61vw, var(--fs-196));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.05em;
  opacity: 0.5;
  position: absolute;
  right: calc(var(--outer-cap) + 17px);
  user-select: none;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .l-pageHead {
    min-height: 0;
    padding-top: 32px;
  }

  .pageHead {
    padding-bottom: 56px;
  }

  .pageHead__title {
    gap: 32px;
    margin-top: 96px;
  }

  .pageHead__title::before {
    height: 38px;
  }

  .pageHead__lead {
    font-size: var(--fs-16);
    margin-top: calc(32px + var(--trim));
}

  .pageHead__watermark {
    bottom: -20px;
  }
}

@media (max-width: 767px) {
  .l-pageHead {
    padding-top: 24px;
  }

  .pageHead {
    padding-bottom: 48px;
  }

  .pageHead__title {
    gap: 20px;
    margin-top: 40px;
  }

  .pageHead__title::before {
    height: 32px;
    width: 6px;
  }

  .pageHead__lead {
    font-size: var(--fs-14);
    margin-top: calc(24px + var(--trim));
}

  .pageHead__watermark {
    bottom: -12px;
    right: 5px;
  }
}

/* =============================================================
   下層ページ共通：パンくず
   ============================================================= */
.l-breadcrumb {
  position: relative;
  z-index: 1;
}

.breadcrumb {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.breadcrumb__item {
  align-items: center;
  color: var(--color-text01);
  display: flex;
  font-size: var(--fs-13);
  gap: 12px;
  line-height: 1;
}

.breadcrumb__item:not(:first-child)::before {
  background-color: var(--color-blue01);
  content: "";
  flex: none;
  height: 24px;
  mask: url("../img/common/icon_arrow.svg") no-repeat center / contain;
  -webkit-mask: url("../img/common/icon_arrow.svg") no-repeat center / contain;
  width: 24px;
}

.breadcrumb__link {
  align-items: center;
  color: var(--color-text02);
  display: flex;
  gap: 12px;
}

.breadcrumb__link:hover {
  color: var(--color-blue02);
}

.breadcrumb__link--home::before {
  background-color: var(--color-blue01);
  content: "";
  flex: none;
  height: 24px;
  mask: url("../img/common/icon_home.svg") no-repeat center / contain;
  -webkit-mask: url("../img/common/icon_home.svg") no-repeat center / contain;
  width: 24px;
}

@media (max-width: 767px) {
  .breadcrumb {
    gap: 6px;
  }

  .breadcrumb__item {
    font-size: var(--fs-12);
    gap: 6px;
  }

  .breadcrumb__item:not(:first-child)::before {
    height: 18px;
    width: 18px;
  }

  .breadcrumb__link {
    gap: 6px;
  }

  .breadcrumb__link--home::before {
    height: 18px;
    width: 18px;
  }
}

/* =============================================================
   セクション共通見出し
   ============================================================= */
.sectionHead__en {
  color: var(--color-blue02);
  font-family: var(--font-en);
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 15px;
  margin-bottom: -5px;
  padding-bottom: 5px;
}

.sectionHead__ja {
  --lh: 1.4;
  font-family: var(--font-ja);
  font-size: clamp(var(--fs-28), 3.61vw, var(--fs-52));
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: var(--trim);
  margin-top: calc(40px + var(--trim));
}

.sectionHead__rule {
  background-color: var(--color-blue02);
  display: block;
  height: 2px;
  margin-top: 40px;
  width: 60px;
}

.sectionHead--lead .sectionHead__ja {
  --lh: 1.6;
  font-size: clamp(var(--fs-26), 3.19vw, var(--fs-46));
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .sectionHead__ja {
    margin-top: calc(28px + var(--trim));
}

  .sectionHead__rule {
    margin-top: 28px;
  }
}

@media (max-width: 767px) {
  .sectionHead__en {
    font-size: var(--fs-13);
  }

  .sectionHead__ja {
    margin-top: calc(20px + var(--trim));
}

  .sectionHead__rule {
    margin-top: 20px;
  }
}

/* =============================================================
   c-interviewCard（社員インタビューのカード）
   ============================================================= */
.interviewCards {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 72px;
}

.interviewCard {
  position: relative;
}

.interviewCard__title a::after {
  content: "";
  inset: 0;
  position: absolute;
}

.interviewCard__title a:hover {
  color: var(--color-blue02);
}

.interviewCard__photo {
  aspect-ratio: 32 / 25;
  display: block;
}

.interviewCard__label {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.interviewCard__no {
  color: var(--color-blue01);
  font-family: var(--font-en);
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 15px;
}

.interviewCard__dept {
  color: var(--color-text02);
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1.8;
}

.interviewCard__title {
  --lh: 1.4;
  font-family: var(--font-ja);
  font-size: clamp(var(--fs-18), 1.53vw, var(--fs-22));
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: var(--trim);
  margin-top: calc(24px + var(--trim));
  text-wrap: balance;
}

.interviewCard__name {
  --lh: 1.8;
  color: var(--color-text02);
  font-size: var(--fs-14);
  line-height: 1.8;
  margin-bottom: var(--trim);
  margin-top: calc(32px + var(--trim));
}

@media (max-width: 1024px) {
  .interviewCards {
    gap: 16px;
    margin-top: 48px;
  }

  .interviewCard__label {
    margin-top: 20px;
  }

  .interviewCard__title {
    margin-top: calc(16px + var(--trim));
}

  .interviewCard__name {
    margin-top: calc(20px + var(--trim));
}
}

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

/* =============================================================
   Contact（全ページ共通）
   ============================================================= */
.contact {
  isolation: isolate;
  overflow: hidden;
  padding-block: 130px 48px;
  position: relative;
}

.contact::before {
  background-color: transparent;
  background-image: conic-gradient(var(--color-pattern-blue) 0deg 90deg, transparent 90deg 360deg);
  background-size: 4px 4px;
  bottom: 0;
  content: "";
  left: max(17.71%, (100% - 1170px) / 2 + 120px);
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 76px;
  z-index: -1;
}

.contact__inner {
  margin-inline: auto;
  width: clamp(920px, 81.25vw, 1170px);
}

.contact--spaced {
  margin-top: 152px;
}

.contact__photo {
  border-radius: var(--radius-8);
  display: block;
  overflow: hidden;
  position: absolute;
  right: calc(var(--outer-cap) + min(1.11%, 21.3px));
  top: 0;
  width: min(56.6%, 815px);
}

.contact__photo img {
  border-radius: inherit;
  height: auto;
  width: 100%;
}

.contact__body {
  position: relative;
  width: min(568px, 100%);
  z-index: 1;
}

.contact__text {
  --lh: 1.8;
  font-size: var(--fs-16);
  line-height: 1.8;
  margin-bottom: var(--trim);
  margin-top: calc(48px + var(--trim));
  max-width: 384px;
}

.contact__cards {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 58px;
}

.contact__watermark {
  background-clip: text;
  -webkit-background-clip: text;
  background-image: var(--gradient-watermark);
  bottom: 0;
  color: transparent;
  font-family: var(--font-en);
  font-size: clamp(var(--fs-72), 13.61vw, var(--fs-196));
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
  opacity: 0.75;
  position: absolute;
  right: calc(var(--outer-cap) + min(1.5%, 28.8px));
  user-select: none;
  white-space: nowrap;
  z-index: -1;
}

.pageHead__watermark .reveal-char,
.contact__watermark .reveal-char,
.about__watermark .reveal-char,
.service__watermark .reveal-char,
.recruit__watermark .reveal-char {
  background-clip: text;
  -webkit-background-clip: text;
  background-image: var(--gradient-watermark);
  color: transparent;
}

.pageHead__watermark.is-chars-ready,
.contact__watermark.is-chars-ready,
.about__watermark.is-chars-ready,
.service__watermark.is-chars-ready,
.recruit__watermark.is-chars-ready,
.strength__watermark.is-chars-ready {
  background-image: none;
}

.telCard {
  align-items: center;
  background-color: var(--color-white);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 35px;
}

.telCard__row {
  align-items: center;
  display: flex;
  gap: 20px;
}

.telCard__label {
  border-block: 1px solid var(--color-blue02);
  color: var(--color-blue02);
  flex: none;
  font-family: var(--font-ja);
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 10px;
  padding: 15px 8px;
}

.telCard__number {
  align-items: baseline;
  display: flex;
  font-family: var(--font-en);
  font-weight: 700;
  gap: 3px;
  line-height: normal;
}

.telCard__number small {
  font-size: clamp(var(--fs-20), 2.08vw, var(--fs-30));
  font-weight: 700;
}

.telCard__number span {
  font-size: clamp(var(--fs-26), 2.92vw, var(--fs-42));
}

a.telCard__number:hover {
  color: var(--color-blue02);
}

.telCard__note {
  font-family: var(--font-en);
  font-size: var(--fs-16);
  line-height: normal;
}

@media (max-width: 1024px) {
  .contact {
    padding-block: 88px 120px;
  }

  .contact--spaced {
    margin-top: 96px;
  }

  .contact__inner {
    width: clamp(704px, 91.4vw, 936px);
  }

  .contact::before {
    left: 0;
    top: 88px;
  }

  .contact__photo {
    position: relative;
    width: 100%;
    right: 0;
  }

  .contact__body {
    margin-top: 48px;
    width: 100%;
  }

  .contact__text {
    margin-top: calc(32px + var(--trim));
    max-width: none;
}

  .contact__cards {
    margin-top: 32px;
  }

  .telCard {
    padding: 32px 24px;
  }

  .telCard__note {
    font-size: var(--fs-14);
  }
}

@media (max-width: 767px) {
  .contact {
    padding-block: 64px 84px;
  }

  .contact--spaced {
    margin-top: 64px;
  }

  .contact__inner {
    width: calc(100% - 48px);
  }

  .contact__photo {
    border-radius: 0;
  }

  .contact::before {
    left: 0;
    top: 64px;
  }

  .contact__text {
    font-size: var(--fs-14);
  }

  .contact__watermark {
    bottom: 0;
  }

  .telCard {
    gap: 14px;
    padding: 24px 20px;
    text-align: center;
  }

  .telCard__row {
    flex-direction: column;
    gap: 12px;
  }

  .telCard__label {
    padding: 10px 8px;
  }

  .telCard__note {
    font-size: var(--fs-13);
  }
}

/* =============================================================
   Footer
   ============================================================= */
.l-footer {
  margin-top: 152px;
}

.footer__head {
  align-items: flex-end;
  display: flex;
  gap: 40px;
  justify-content: space-between;
  padding-bottom: 32px;
}

.footer__logo {
  flex: none;
  width: 397px;
}

.footer__logo img {
  height: auto;
  width: 100%;
}

.footer__logo a:hover {
  opacity: 0.7;
}

.footer__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__address {
  font-size: var(--fs-14);
  line-height: 1.8;
}

.footer__hours {
  font-size: var(--fs-13);
  line-height: 1.8;
}

.footer__body {
  background-image: var(--gradient-footer);
  color: var(--color-white);
  padding-block: 48px;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.footer__navGroup {
  width: 168px;
}

.footer__navTitle {
  --lh: 2.3;
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 2.3;
  margin-bottom: var(--trim);
  margin-top: var(--trim);
}

.footer__navList {
  --lh: 2.3;
  font-size: var(--fs-14);
  list-style: disc;
  margin-bottom: var(--trim);
  margin-top: calc(36px + var(--trim));
  opacity: 0.7;
}

.footer__navItem,
.footer__navList .footer__navLink {
}

.footer__navItem {
  margin-left: 21px;
}

.footer__navLink {
  display: block;
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 2.3;
}

.footer__navLink:hover {
  opacity: 0.7;
}

.footer__copyright {
  display: block;
  font-size: var(--fs-11);
  font-weight: 500;
  line-height: 1.8;
  margin-top: 24px;
  text-align: right;
}

@media (max-width: 1024px) {
  .l-footer {
    margin-top: 96px;
  }

  .footer__logo {
    width: 280px;
  }

  .footer__navGroup {
    width: calc((100% - 24px) / 2);
  }
}

@media (max-width: 767px) {
  .l-footer {
    margin-top: 40px;
  }

  .footer__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 40px;
  }

  .footer__logo {
    width: 220px;
  }

  .footer__address {
    font-size: var(--fs-13);
  }

  .footer__hours {
    font-size: var(--fs-12);
  }

  .footer__body {
    padding-block: 40px;
  }

  .footer__body .l-inner--wide {
    width: calc(100% - 32px);
  }

  .footer__nav {
    gap: 32px 16px;
  }

  .footer__navItem {
    margin-left: 16px;
  }

  .footer__navList {
    margin-top: 12px;
  }
}