@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Lusitana:wght@400;700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif+JP:wght@200..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&family=Yuji+Syuku&family=Zen+Old+Mincho&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Lusitana:wght@400;700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif+JP:wght@200..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Shippori+Mincho&family=Work+Sans:ital,wght@0,100..900;1,100..900&family=Yuji+Syuku&family=Zen+Old+Mincho&display=swap");
/* ====== Base ====== */
.pc {
  display: block;
}
.sp {
  display: none;
}
.hk-header {
  width: 100%;
  background: #fff;
}
.hk-header__inner {
  max-width: 80rem; /* 1280px 相当 */
  margin: 0 auto;
  padding: 1.25rem 1.5rem; /* 20px 24px */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.5rem;
}
/* ====== Logo ====== */
.hk-logo {
  display: inline-flex;
  align-items: center;
}
.hk-logo img {
  width: 12rem; /* 140px */
  height: auto;
  display: block;
}
/* ====== Navigation Grid（並び固定：上3 / 中2 / 下2） ====== */
.hk-nav__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: auto auto auto; /* 3列ベース */
  grid-template-areas:
    "home company equipment"
    ".    quality certs"
    ".    careers contact";
  justify-content: end; /* 右寄せ */
  align-items: center;
  row-gap: 1.25rem; /* 行間 */
  column-gap: 2.5rem; /* 列間 */
}
/* グリッド配置（エリア名と対応） */
.hk-nav__home {
  grid-area: home;
}
.hk-nav__company {
  grid-area: company;
}
.hk-nav__equipment {
  grid-area: equipment;
}
.hk-nav__quality {
  grid-area: quality;
}
.hk-nav__certs {
  grid-area: certs;
}
.hk-nav__careers {
  grid-area: careers;
}
.hk-nav__contact {
  grid-area: contact;
}
/* ====== Links（英語 + 日本語 2段） ====== */
.hk-nav__link {
  position: relative;
  display: inline-flex;
  flex-direction: column; /* ← 英語の下に日本語を配置 */
  align-items: flex-start;
  text-decoration: none;
  font-family: "Dela Gothic One", sans-serif; /* ← 英語 */
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #7fa3a3;
  font-size: 1.1rem; /* 英語のサイズ */
  line-height: 1.1;
  padding-bottom: 0.35rem;
  transition: transform 0.22s ease, letter-spacing 0.22s ease, color 0.22s ease;
}
/* ====== 日本語ラベル ====== */
.hk-nav__jp {
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif; /* ← 日本語専用フォント */
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  margin-top: 0.2rem;
  color: #6b8f8f;
  opacity: 0.9;
}
/* 下線アニメーションは英語側だけに適用 */
.hk-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15rem;
  width: 100%;
  height: 0.1875rem;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.26s ease;
  opacity: 0.9;
}
/* Hover / Focus */
.hk-nav__link:hover, .hk-nav__link:focus-visible {
  color: #6b8f8f;
  transform: translateY(-0.1rem);
  letter-spacing: 0.11em;
}
.hk-nav__link:hover::after, .hk-nav__link:focus-visible::after {
  transform: scaleX(1);
}
/* ===== 右端固定ボタン（3つ縦並び） ===== */
.hk-mv__fixedbtn {
  position: fixed;
  right: -2rem; /* 画面右から少しはみ出す演出。必要なら 0〜-1rem などに調整 */
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column; /* 縦並び */
  gap: 0.75rem; /* ボタン同士の間隔 */
  align-items: flex-end; /* 右揃えで揃える */
}
/* 各ボタンリンク */
.hk-mv__fixedbtn-item {
  display: inline-block;
  width: 12rem; /* ベース幅（画像は中で70%に） */
  height: auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* 少し大きく & 色を濃く見せる */
.hk-mv__fixedbtn-item img {
  width: 70%;
  height: auto;
  display: block;
}
/* ホバー時：ちょい拡大＆さらに濃く */
.hk-mv__fixedbtn-item:hover {
  transform: scale(1.05);
}
.hk-mv__fixedbtn-item:hover img {
  filter: contrast(1.15) brightness(0.85);
}
.fade-in {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}
.fade-in.active {
  opacity: 1;
  transform: translateY(0);
}
/* ===== Footer ===== */
.hk-footer {
  background: #fff;
  color: #7fa3a3;
  padding: 3rem 1.5rem;
  border-top: 0.0625rem solid rgba(0, 0, 0, 0.06);
}
.hk-footer__inner {
  max-width: 80rem; /* 1280px相当 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto 1fr; /* 左:ロゴ / 中:CTA / 右:本文 */
  gap: 2.5rem 3rem;
  align-items: start;
}
/* ロゴ */
.hk-footer__logo img {
  width: 17rem; /* rem表記 */
  height: auto;
  display: block;
}
/* 資料請求ボタン（画像のみ） */
.hk-footer__cta-btn {
  position: relative;
  display: inline-block;
  line-height: 0;
  overflow: hidden;
}
.hk-footer__cta-btn img {
  display: block;
  width: 12rem;
  height: auto;
  transition: transform 0.25s ease, filter 0.25s ease;
}
/* 既存の“view-more”と同系の軽い演出 */
.hk-footer__cta-btn:hover img, .hk-footer__cta-btn:focus-visible img {
  transform: translateX(0.125rem) scale(1.03);
  filter: drop-shadow(0 0.25rem 0.75rem rgba(0, 0, 0, 0.12));
}
/* 住所 */
.hk-footer__addr {
  margin: 0 0 1.75rem;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: #7fa3a3;
}
/* ===== Footer Nav：上3 / 中3 / 下2（左寄せ固定） ===== */
.hk-footer__nav {
  display: grid;
  grid-template-columns: auto auto auto; /* 3列固定 */
  grid-template-areas:
    "home     company  business" /* 上：3つ */
    "equipment quality  certs" /* 中：3つ */
    "careers  contact  ."; /* 下：2つ（左寄せ） */
  column-gap: 2.5rem;
  row-gap: 1.25rem;
  justify-content: start; /* 全体を左寄せ */
  justify-items: start; /* 各セルも左寄せ */
  align-items: center;
  margin-bottom: 1.75rem;
}
/* 各リンクの配置 */
.hk-footer__home {
  grid-area: home;
}
.hk-footer__company {
  grid-area: company;
}
.hk-footer__business {
  grid-area: business;
}
.hk-footer__equipment {
  grid-area: equipment;
}
.hk-footer__quality {
  grid-area: quality;
}
.hk-footer__certs {
  grid-area: certs;
}
.hk-footer__careers {
  grid-area: careers;
}
.hk-footer__contact {
  grid-area: contact;
}
/* ===== Footer Links：英語 + 日本語の2段表示 ===== */
.hk-footer__link {
  position: relative;
  display: inline-flex;
  flex-direction: column; /* ← 英語の下に日本語 */
  align-items: flex-start;
  text-decoration: none;
  /* 英語フォント */
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #7fa3a3;
  font-size: 1.1rem;
  line-height: 1.1;
  padding-bottom: 0.35rem;
  transition: transform .22s ease, letter-spacing .22s ease, color .22s ease;
}
/* ===== 日本語ラベル ===== */
.hk-footer__jp {
  margin-top: .2rem;
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif; /* ← 日本語用フォント */
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: #6b8f8f;
  opacity: 0.9;
}
/* ===== 下線アニメーション（英語側だけに適用） ===== */
.hk-footer__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15rem;
  width: 100%;
  height: 0.1875rem;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.26s ease;
  opacity: 0.9;
}
/* Hover / Focus */
.hk-footer__link:hover, .hk-footer__link:focus-visible {
  color: #6b8f8f;
  transform: translateY(-0.1rem);
  letter-spacing: 0.11em;
}
.hk-footer__link:hover::after, .hk-footer__link:focus-visible::after {
  transform: scaleX(1);
}
/* コピーライト */
.hk-footer__copy {
  display: block;
  font-family: "Dela Gothic One", sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  opacity: 0.8;
}
/* ベース色はフッターと同じティール。必要なら親で color を変更 */
.hk-cta-pill {
  --stroke: currentColor;
  display: inline-grid;
  grid-template-rows: auto auto auto;
  gap: 0.75rem;
  align-items: center;
  justify-items: center;
  color: #7fa3a3; /* ボタン全体の色 */
  text-decoration: none;
  line-height: 1;
  position: relative;
}
/* 上の「資料請求」 */
.hk-cta-pill__label {
  font-family: "Shippori Mincho", serif;
  font-size: 2rem; /* rem表記 */
  letter-spacing: 0.03em;
  margin: 0;
}
/* 丸角カプセル＋矢印（CSSのみで描画） */
.hk-cta-pill__shape {
  width: 12rem; /* 画像版に近い比率 */
  height: 6rem;
  border: 0.5rem solid var(--stroke);
  border-radius: 6rem;
  position: relative;
  transition: transform 0.25s ease, filter 0.25s ease;
}
/* 矢印の棒 */
.hk-cta-pill__shape::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 34%; /* 棒の長さ */
  top: 50%;
  height: 0.5rem;
  background: var(--stroke);
  border-radius: 1rem;
  transform: translateY(-50%);
  transition: right 0.25s ease;
}
/* 矢印の矢羽（＞の右半分） */
.hk-cta-pill__shape::after {
  content: "";
  position: absolute;
  right: 18%;
  top: 50%;
  width: 2rem;
  height: 2rem;
  border-top: 0.5rem solid var(--stroke);
  border-right: 0.5rem solid var(--stroke);
  transform: translateY(-50%) rotate(45deg);
  transition: right 0.25s ease;
}
/* 下のアンダーライン */
.hk-cta-pill__underline {
  width: 12rem;
  height: 0.25rem;
  background: var(--stroke);
  opacity: 0.8;
}
/* ホバー：少しだけ拡大＆矢印を右へ */
.hk-cta-pill:hover .hk-cta-pill__shape, .hk-cta-pill:focus-visible .hk-cta-pill__shape {
  transform: translateX(0.125rem) scale(1.03);
  filter: drop-shadow(0 0.25rem 0.75rem rgba(0, 0, 0, 0.12));
}
.hk-cta-pill:hover .hk-cta-pill__shape::before, .hk-cta-pill:focus-visible .hk-cta-pill__shape::before {
  right: 30%;
}
.hk-cta-pill:hover .hk-cta-pill__shape::after, .hk-cta-pill:focus-visible .hk-cta-pill__shape::after {
  right: 16%;
}
/* お好みでサイズ調整（共通で12rem/6remを変更） */
/* 例：小さめ
.hk-cta-pill__shape{ width: 10rem; height: 5rem; border-width: .45rem; }
.hk-cta-pill__shape::before{ height: .45rem; }
.hk-cta-pill__shape::after{ width: 1.8rem; height: 1.8rem; border-width: .45rem; }
.hk-cta-pill__underline{ width: 10rem; height: .22rem; }
*/
/* small サイズ */
.hk-cta-pill--sm {
  gap: 0.5rem;
}
.hk-cta-pill--sm .hk-cta-pill__label {
  font-size: 1.6rem;
  font-weight: bolder;
}
.hk-cta-pill--sm .hk-cta-pill__shape {
  width: 10rem; /* 旧 12rem */
  height: 5rem; /* 旧 6rem  */
  border-width: 0.45rem; /* 旧 .5rem */
}
.hk-cta-pill--sm .hk-cta-pill__shape::before {
  height: 0.45rem; /* 棒の太さを合わせる */
}
.hk-cta-pill--sm .hk-cta-pill__shape::after {
  width: 1.8rem;
  height: 1.8rem;
  border-width: 0.45rem; /* 矢羽の太さ */
}
.hk-cta-pill--sm .hk-cta-pill__underline {
  width: 10rem;
  height: 0.2rem;
}
.hk-footer__cta {
  margin: 7rem 0 0 0;
}
/* レスポンシブ */
@media (max-width: 480px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .hk-logo img {
    width: 5rem;
    height: auto;
    display: block;
  }
  .hk-footer__logo img {
    width: 7rem;
    height: auto;
    display: block;
  }
  .hk-footer__inner {
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    grid-template-columns: auto auto 1fr;
    gap: 2.5rem 3rem;
    align-items: start;
  }
  .hk-footer__cta {
    margin: 0 0 0 0;
  }
  .hk-footer__addr {
    margin: 3rem 0 1.75rem;
    font-style: normal;
    font-size: 1.2rem;
    line-height: 1.7;
    letter-spacing: 0.03em;
    color: #7fa3a3;
    text-align: center;
  }
  .hk-footer__copy {
    display: block;
    font-family: "Dela Gothic One", sans-serif;
    font-size: 0.43rem;
    letter-spacing: 0.08em;
    opacity: 0.8;
    text-align: center;
  }
  .hk-mv__fixedbtn {
    position: fixed;
    right: -5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: inline-block;
    width: 12rem;
    height: auto;
    transition: transform 0.2s ease, opacity 0.2s ease;
      display: none;
  }
  .hk-mv__fixedbtn img {
    width: 56%;
    height: auto;
    display: block;
  }
}