/* HV Fitzgerald */
@font-face {
  font-family: "HV Fitzgerald";
  src: url("fonts/HV Fitzgerald Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Delight */
@font-face {
  font-family: "Delight";
  src: url("fonts/delight-thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Delight";
  src: url("fonts/delight-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Delight";
  src: url("fonts/delight-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Delight";
  src: url("fonts/delight-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Delight";
  src: url("fonts/delight-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Druk Text Wide */
@font-face {
  font-family: "Druk Text Wide";
  src: url("fonts/DrukTextWide-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Druk Text Wide";
  src: url("fonts/DrukTextWide-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Global
========================= */
html,
body,
.container-fluid {
  overflow-x: hidden;
  font-family: "Delight", "Apple SD Gothic Neo", Arial, sans-serif !important;
  font-weight: 400;
}

/* =========================
   Hero (left)
========================= */
.hero-left {
  background: url("images/hero.webp") center/cover no-repeat;
  min-height: 100vh;
  position: relative;
}

.about-page .hero-left {
  background-image: url("images/about-hero.webp");
  /* あるいは丸ごと
  background: url("images/about-hero-left.jpg") center/cover no-repeat;
  */
}
.hero-overlay {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  padding: 1.5rem 1.75rem;
  z-index: 2;
}

/* =========================
   Brand (logo + text)
========================= */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: #fff;
  transition: color 0.3s;
  line-height: 1 !important;
}
.brand-logo-wrapper {
  position: relative;
  display: inline-block;
  height: 1.2em;
  line-height: 1;
  margin-right: 0.5rem;
}
.brand-logo {
  position: absolute;
  inset: 0;
  height: 100%;
  width: auto;
  transition: opacity 0.3s;
}
.brand-logo.default {
  position: relative;
  display: block;
}
.brand-text {
  font-family: "Druk Text Wide", sans-serif;
  font-size: 19px;
  letter-spacing: -0.03em;
  color: #fff;
  transition: color 0.3s;
  transform: translateY(5px);
}

.navbar-nav .nav-link {
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  transition: color 0.25s;
}
.navbar-nav .nav-link:hover {
  color: #e4e2dd;
}

.no-hero .navbar {
  background-color: #000;
}
.no-hero .navbar .nav-link,
.no-hero .navbar .brand-text {
  color: #fff;
}

/* contact ページの本文文字色は黒 */
.no-hero,
.no-hero .contact-wrap,
.no-hero .contact-wrap .form-label,
.no-hero .contact-wrap .form-input,
.no-hero .contact-info {
  color: #000;
}

/* ドロワーは共通のまま */

/* =========================
   Desktop dropdown (fade+slide)
========================= */
.dropdown-menu.dropdown-fade {
  display: block;
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s 0.22s;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  min-width: 10rem;
}
.dropdown.show > .dropdown-menu.dropdown-fade,
.dropdown:hover > .dropdown-menu.dropdown-fade {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
@media (max-width: 991.98px) {
  .dropdown:hover > .dropdown-menu.dropdown-fade {
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
  }
  .dropdown.show > .dropdown-menu.dropdown-fade {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

/* =========================
   Mobile drawer (hamburger)
========================= */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 0.5rem;
  margin-left: 0.5rem;
}
@media (max-width: 1199.98px) {
  .mobile-menu-toggle {
    display: inline-block;
  }
}
.mobile-burger,
.mobile-burger::before,
.mobile-burger::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  position: relative;
}
.mobile-burger::before {
  position: absolute;
  top: -6px;
  left: 0;
}
.mobile-burger::after {
  position: absolute;
  top: 6px;
  left: 0;
}

/* Drawer theme vars */
:root {
  --drawer-bg: #fff;
  --drawer-text: #111;
  --drawer-arrow: #111;
  --drawer-backdrop: rgba(0, 0, 0, 0.25);
  --drawer-font-size: 20px;
  --drawer-letter: 0.06em;
  --drawer-gap: 22px;
  --drawer-pad-x: 20px;
  --drawer-pad-y: 12px;
}

/* Drawer container */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1050;
  pointer-events: none;
}
.mobile-menu.open {
  pointer-events: auto;
}
.mobile-backdrop {
  position: absolute;
  inset: 0;
  background: var(--drawer-backdrop);
  opacity: 0;
  transition: opacity 0.25s;
  z-index: 1;
}
.mobile-menu.open .mobile-backdrop {
  opacity: 1;
}
.mobile-menu-inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: min(86vw, 420px);
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.12);
  z-index: 2;
}
.mobile-menu.open .mobile-menu-inner {
  transform: translateX(0);
}

/* Panels */
.mobile-panel {
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.28s, opacity 0.28s, visibility 0s 0.28s;
}
.mobile-panel.active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}
.mobile-panel.leaving {
  transform: translateX(-20%);
  opacity: 0;
}

.mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--drawer-pad-x);
}
.mobile-close,
.mobile-back {
  background: none;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--drawer-text);
}
.mobile-title {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--drawer-text);
}

.mobile-list {
  display: flex;
  flex-direction: column;
  padding: var(--drawer-pad-y) var(--drawer-pad-x);
  gap: var(--drawer-gap);
}
.mobile-link {
  font-size: var(--drawer-font-size);
  letter-spacing: var(--drawer-letter);
  color: var(--drawer-text);
  text-decoration: none;
}
.mobile-link.has-child {
  position: relative;
  padding-right: 28px;
}
.mobile-link .arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--drawer-font-size);
  color: var(--drawer-arrow);
}

/* hover arrow shift (drawer) */
.mobile-menu .mobile-link.has-child .arrow {
  --shift: 0px;
  transform: translate(var(--shift), -50%);
  transition: transform 0.22s ease;
}
.mobile-menu .mobile-link.has-child:hover .arrow,
.mobile-menu .mobile-link.has-child:focus .arrow,
.mobile-menu .mobile-link.has-child:active .arrow {
  --shift: 8px;
}
.mobile-menu .mobile-link:focus {
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu .mobile-link.has-child .arrow {
    transition: none;
  }
}

.mobile-footer {
  position: absolute;
  left: var(--drawer-pad-x);
  right: var(--drawer-pad-x);
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #444;
}
.mobile-lang,
.mobile-sns {
  color: #444;
  text-decoration: none;
}

/* =========================
   Right Column Text
========================= */
.heading-font {
  font-family: "HV Fitzgerald", serif;
  font-weight: 400;
  margin-top: 20px;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.description-text {
  font-size: 14px;
  max-width: 400px;
  letter-spacing: 0.03em;
}
.vertical-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px;
}

/* =========================
   Image block (main + badge)
========================= */
.right-col {
  position: relative;
}
.main-image-wrapper {
  position: relative;
  width: 280px;
  height: 360px;
  margin: 0 auto;
}
.main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.corner-badge {
  position: absolute;
  right: -100px;
  bottom: -100px;
  width: 210px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
  animation: spin 24s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================
   Services Accordion
========================= */
:root {
  --svc-border: #202020;
  --svc-fg: #101010;
  --svc-muted: #6b6b6b;
}

/* 外枠：上下だけ（左右は入れない→列の縦線で見せる） */
.services-accordion {
  border-top: 1px solid var(--svc-border);
  border-bottom: 1px solid var(--svc-border);
}

/* モバイル：1列・各行は下線 */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
}
.service {
  border-bottom: 1px solid var(--svc-border);
}
.service:last-child {
  border-bottom: none;
}

/* デスクトップ：3列＋縦線（最後の列は消す） */
@media (min-width: 992px) {
  .services-accordion {
    border-left: 1px solid var(--svc-border);
    border-right: 1px solid var(--svc-border);
  }

  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .service {
    border-bottom: none;
    border-right: 1px solid var(--svc-border);
  }
  .service:last-child {
    border-right: none;
  }
}

.service-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fff;
  border: 0;
  padding: 22px 20px;
  cursor: pointer;
}
@media (min-width: 992px) {
  .service-head {
    padding: 28px 28px;
  }
}

.service-title {
  margin: 0;
  font-family: "Delight", sans-serif;
  font-weight: 100;
  color: var(--svc-fg);
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: 0.02em;
  line-height: 1.15;
  white-space: nowrap;
}

/* + icon → × */
.service-toggle {
  width: 28px;
  height: 28px;
  position: relative;
  flex: 0 0 28px;
}
.service-toggle::before,
.service-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2px;
  background: var(--svc-fg);
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.service-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.service-head[aria-expanded="true"] .service-toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* 本文アニメ */
.service-body {
  padding: 0 20px 18px 20px;
  color: var(--svc-fg);
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease, padding 0.3s ease;
}
.service-body > * {
  min-height: 0;
}
.service-body.show {
  grid-template-rows: 1fr;
  padding: 0 20px 22px 20px;
}
@media (min-width: 992px) {
  .service-body {
    padding: 0 28px 20px 28px;
  }
  .service-body.show {
    padding: 0 28px 24px 28px;
  }
}

/* 本文体裁 */
.service-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Delight", sans-serif;
  font-weight: 100;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--svc-fg);
}
.service-list li + li {
  margin-top: 0.4rem;
}

/* hover hint */
.service-head:hover .service-title {
  color: #000;
}

/* ===== Contact Section ===== */

.contact-title {
  font-family: "Delight";
  font-weight: 600;
  padding: 30px 0px 0;
  text-align: left;
  font-size: 60px;
  color: #000;
  white-space: nowrap;
}

.contact-wrap {
  padding: 60px 0;
  background-color: #fff;
  color: #000;
}

.contact-info .label {
  font-weight: 600;
  font-size: 16px;
  color: #000;
}

.contact-info .year,
.contact-info .hours .contact-info .hours a {
  text-decoration: none;
  font-size: 14px;
  color: #000;
}

.hours a {
  color: inherit; /* 親要素の色を継承（黒） */
  text-decoration: none; /* 下線なし */
  font-size: 14px;
}

.hours a:hover {
  text-decoration: underline; /* ホバー時だけ下線（好みで） */
}

.contact-info .divider {
  height: 1px;
  background: #ccc;
  margin: 20px 0;
}

.contact-form .form-label {
  font-size: 14px;
  margin-bottom: 6px;
  color: #000;
}

.contact-form .form-input,
.contact-form .textarea,
.contact-form .select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #000;
}

.contact-form .textarea {
  resize: vertical;
}

.btn-submit {
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-submit:hover {
  background-color: #333;
}

/* =========================
   Footer
========================= */
.site-footer {
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  position: relative;
  z-index: 1;
}
.footer-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-icons a {
  --size: 36px;
  width: var(--size);
  height: var(--size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  transition: background 0.2s, color 0.2s, transform 0.2s, border-color 0.2s;
}
.footer-icons a:hover {
  opacity: 0.8;
}
.footer-contact-link {
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
  font-size: 14px;
}
.footer-contact-link:hover {
  opacity: 0.8;
}
.site-footer .footer-right p {
  margin: 0;
  color: #fff;
  letter-spacing: 0.02em;
  font-size: 14px;
}

@media (max-width: 575.98px) {
  .site-footer {
    flex-direction: column;
    gap: 14px;
    text-align: center;
    padding: 20px 16px;
  }
}

/* =========================
   Back-to-top
========================= */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  color: #111;
  border: 0;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s, visibility 0s 0.25s;
  z-index: 20;
}
.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s, transform 0.25s, visibility 0s;
}
.to-top:hover {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* =========================
   Responsive tweaks
========================= */
@media (max-width: 767.98px) {
  .hero-left {
    min-height: 60vh;
  }
  .hero-overlay {
    padding: 1rem 1.25rem;
  }
  .right-col {
    overflow: hidden;
  }

  .heading-font {
    margin-top: 10px;
  }
  .corner-badge {
    right: -80px;
    bottom: -80px;
    width: 200px;
    animation: spin 30s linear infinite;
  }
}

/* 1) 黒帯は全幅にする（no-hero ページ） */
.no-hero .header-wrap {
  background: #000;
  width: 100%; /* ← 全幅 */
}

/* 2) 中身は index と同じ左 50vw 幅に収める */
.no-hero .header-wrap .nav-inner {
  display: flex;
  align-items: center;
  padding: 24px 28px; /* index と同値 */
  width: 50vw; /* ← 中身だけ 50vw に */
  margin: 0; /* 左寄せ */
  gap: 24px;
}

/* SP は全幅に展開 */
@media (max-width: 767.98px) {
  .no-hero .header-wrap .nav-inner {
    width: 100vw;
    padding: 16px 20px;
  }
}

/* 3) 横一列＆右寄せを強制 */
.no-hero .header-wrap .navbar-brand {
  flex: 0 0 auto;
  white-space: nowrap;
}
.no-hero .header-wrap .navbar-collapse {
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end; /* ← 右寄せ */
}
.no-hero .header-wrap .navbar-nav {
  flex-wrap: nowrap;
  margin-left: auto; /* 念押しで右側へ */
}
.no-hero .header-wrap .nav-link {
  white-space: nowrap;
}

/* navbar 自体は透明＆paddingゼロ（黒は外側の header-wrap が持つ） */
nav.navbar {
  background: transparent !important;
  padding: 0 !important;
}

/* タイポ＆ロゴ（必要なら） */
:root {
  --nav-logo-h: 28px;
  --nav-font-size: 14px;
  --nav-letter: 0.08em;
}
.brand-logo {
  height: var(--nav-logo-h);
  width: auto;
}
.navbar .nav-link {
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter);
  color: #fff;
}
.brand-text {
  color: #fff;
}

/* Contactページなど no-hero のときナビを右寄せ */
.no-hero .navbar-collapse {
  display: flex !important;
  justify-content: flex-end; /* メニューを右端に寄せる */
}

.no-hero .navbar-nav {
  margin-left: auto; /* 念のための右寄せ補強 */
  gap: 24px; /* メニュー間のスペース調整 */
}

.no-hero .navbar .nav-link {
  text-align: right; /* テキストも右寄せ */
}

/* 黒帯全幅にする */
.no-hero .header-wrap {
  background: #000;
  width: 100%; /* ← 全幅 */
}

/* 中身を全幅に展開して左右分割 */
.no-hero .header-wrap .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左ロゴ / 右メニュー */
  padding: 24px 28px;
  width: 100%; /* ← 50vw をやめて全幅に */
  margin: 0;
  gap: 24px;
}

/* ナビ部分を右端に押し出す */
.no-hero .header-wrap .navbar-collapse {
  display: flex !important;
  justify-content: flex-end; /* ← 右寄せ */
  flex: 1 1 auto;
}

.no-hero .header-wrap .navbar-nav {
  margin-left: auto; /* 念のため補強 */
  gap: 24px;
}

/* no-hero の黒帯は全幅＆左右分割（デスクトップ） */
.no-hero .header-wrap {
  background: #000;
  width: 100%;
}
.no-hero .header-wrap .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左ロゴ / 右メニュー or ハンバーガー */
  padding: 24px 28px;
  width: 100%;
  gap: 24px;
}

/* モバイルではデスクトップ用メニューを隠してハンバーガーだけ表示 */
@media (max-width: 991.98px) {
  .no-hero .header-wrap .nav-inner {
    padding: 16px 20px;
  }
  .no-hero .header-wrap .navbar-nav {
    display: none !important; /* ← これで “ABOUT/WORKS/CONTACT” を隠す */
  }
  .mobile-menu-toggle {
    display: inline-flex; /* 既存の display: inline-block を補強 */
    margin-left: auto; /* 右端へ */
    align-items: center;
    justify-content: center;
  }
}

/* ===== Header Light (no-heroの黒帯を打ち消して文字を黒に) ===== */
.header-light .header-wrap {
  background: transparent; /* 黒帯ナシ */
}

/* navbar自体も透明のまま */
.header-light nav.navbar {
  background: transparent !important;
}

/* 文字色：黒 */
.header-light .navbar .nav-link,
.header-light .brand-text {
  color: #000;
}

/* ハンバーガーの線も黒に */
.header-light .mobile-burger,
.header-light .mobile-burger::before,
.header-light .mobile-burger::after {
  background: #000;
}

/* ドロップダウン：通常の白地でOK。項目の文字色を黒に統一（念のため） */
.header-light .dropdown-menu .dropdown-item {
  color: #000;
}

/* header-light のときはブランド文字を黒に */
.header-light.no-hero .navbar .brand-text {
  color: #000 !important;
}

/* Contact form core */
.contact-form .form-label {
  font-size: 14px;
  color: #111;
  margin-bottom: 6px;
}

/* inputs / selects / textarea */
.contact-form .form-input {
  width: 100%;
  border: 1.5px solid #e5e5e5;
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: #111;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.contact-form .form-input:focus {
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* select を同トーンに */
.contact-form .select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #111 50%),
    linear-gradient(135deg, #111 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px),
    calc(100% - 12px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* textarea */
.contact-form .textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-form .btn-submit:hover {
  background: #2f2f2f;
}
.contact-form .btn-submit:active {
  transform: translateY(1px);
}
.contact-form .btn-submit:disabled {
  background: #aaa;
  cursor: not-allowed;
}

/* 1) ヘッダーの行を“左右に分割”し、全幅で並べる */
.header-wrap .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* 2) モバイル：デスクトップメニューは隠す／トグルを右端へ */
@media (max-width: 991.98px) {
  .header-wrap .navbar-collapse,
  .header-wrap .navbar-nav {
    display: none !important;
  }

  /* ← ここがあなたのコード。加えてサイズ/順序を強める */
  .header-wrap .mobile-menu-toggle {
    display: inline-flex;
    margin-left: auto; /* 右端へ */
    order: 2; /* ロゴより右側 */
    width: 44px;
    height: 32px; /* タップしやすい領域 */
    padding: 0;
    border: 0;
    background: transparent;
    align-items: center;
    justify-content: center;
  }
  .header-wrap .mobile-menu-toggle.btn {
    padding: 0;
  } /* .btnの余白を打消し */
  .header-wrap .navbar-brand {
    order: 1;
    flex: 0 0 auto;
  }
}

.mobile-burger::before,
.mobile-burger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
}
.mobile-burger::before {
  top: -6px;
}
.mobile-burger::after {
  top: 6px;
}

/* ライトヘッダー時は黒に（必要なら） */
.header-light .mobile-menu-toggle {
  color: #000;
}

/* ===== Contact: line-only form theme ===== */
.contact-form .form-input,
.contact-form .select,
.contact-form .textarea {
  width: 100%;
  border: 0;
  border-bottom: 2px solid #e5e5e5;
  border-radius: 0;
  background: transparent;
  padding: 12px 0; /* 左右は0でスッキリ */
  font-size: 18px;
  line-height: 1.4;
  color: #111;
  outline: none;
  box-shadow: none;
  transition: border-color 0.18s ease;
}

.contact-form .form-input::placeholder,
.contact-form .textarea::placeholder {
  color: #9a9a9a;
}

.contact-form .form-input:focus,
.contact-form .select:focus,
.contact-form .textarea:focus {
  border-bottom-color: #111; /* フォーカスで黒ライン */
  box-shadow: none;
}

/* select をライン型＆最小矢印で */
.contact-form .select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #111 50%),
    linear-gradient(135deg, #111 50%, transparent 50%);
  background-position: calc(100% - 16px) 58%, calc(100% - 10px) 58%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px; /* 矢印分の余白 */
}

.contact-form .textarea {
  min-height: 180px;
  resize: vertical;
}

/* ラベルは落ち着いたグレーで */
.contact-form .form-label {
  font-size: 14px;
  color: #6b6b6b;
  margin-bottom: 10px;
}

.contact-wrap {
  padding-bottom: 80px;
}

@media (max-width: 991.98px) {
  .contact-form .btn-submit {
    width: auto;
  } /* 100%にしたいならここを 100% に */
}

/* —— Contact: ラベルは太字にしない／落ち着いたグレー —— */

/* 右カラム（フォーム）のラベル */
.contact-page .contact-form .form-label {
  font-weight: 400 !important; /* ← 太字を解除 */
  font-size: 14px;
  color: #6f6f6f;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}

/* 左カラムの「Location / Contact」も太字にしない */
.contact-page .contact-info .label {
  font-weight: 400 !important; /* ← 太字を解除 */
  color: #6f6f6f;
}

/* 入力/セレクト本文のウェイトは軽く（任意） */
.contact-page .contact-form .form-input,
.contact-page .contact-form .select,
.contact-page .contact-form .textarea {
  font-weight: 400;
}

/* ===== Contact：ヘアライン下線（超細） ===== */
:root {
  --u-base: 0.7px; /* 通常の太さ（≈ヘアライン） */
  --u-hover: 0.9px; /* ホバー時 ほんの少しだけ太く */
  --u-focus: 1.3px; /* フォーカス時の強調 */
  --u-color: #e3e3e3; /* 通常ライン色 */
  --u-focus-color: #111; /* フォーカス時のライン色 */
}

/* 入力・セレクト・テキストエリア共通 */
.contact-page .contact-form .form-input,
.contact-page .contact-form .select,
.contact-page .contact-form .textarea {
  border: 0 !important; /* 既存の2pxを無効化 */
  padding: 12px 0;
  background: linear-gradient(var(--u-color), var(--u-color)) left bottom/100%
    var(--u-base) no-repeat; /* ← 下線を背景で描画 */
}

/* hover：ほぼ変わらないけど“気づく”程度に */
.contact-page .contact-form .form-input:hover,
.contact-page .contact-form .select:hover,
.contact-page .contact-form .textarea:hover {
  background-size: 100% var(--u-hover);
}

/* focus：色＆太さだけ少し強め（高さは変わらない） */
.contact-page .contact-form .form-input:focus,
.contact-page .contact-form .select:focus,
.contact-page .contact-form .textarea:focus {
  background: linear-gradient(var(--u-focus-color), var(--u-focus-color)) left
    bottom/100% var(--u-focus) no-repeat;
  outline: none;
}

/* 変数（すでにあれば流用） */
:root {
  --u-base: 0.7px; /* 通常の下線太さ（超細） */
  --u-hover: 0.9px; /* ホバー時 */
  --u-focus: 1.3px; /* フォーカス時 */
  --u-color: #e3e3e3; /* 通常ライン色 */
  --u-focus-color: #111; /* フォーカスライン色 */
}

/* ▼ Select：下線(1レイヤー)＋矢印(2レイヤー)を合成して定義 */
.contact-page .contact-form .select {
  border: 0 !important;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 400;
  color: #6f6f6f;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background:
    /* 1) 下線 */ linear-gradient(var(--u-color), var(--u-color))
      left bottom / 100% var(--u-base) no-repeat,
    /* 2) 矢印(左上り) */
      linear-gradient(45deg, transparent 50%, currentColor 50%)
      calc(100% - 16px) 58% / 6px 6px no-repeat,
    /* 3) 矢印(右上り) */
      linear-gradient(135deg, currentColor 50%, transparent 50%)
      calc(100% - 10px) 58% / 6px 6px no-repeat;
  background-color: transparent;
}

/* 未選択プレースホルダーはラベル色で（矢印も連動） */
.contact-page .contact-form .select:required:invalid {
  color: #6f6f6f;
}

/* ▼ Hover：下線レイヤーだけ太さを変更（矢印はそのまま） */
.contact-page .contact-form .select:hover {
  background: linear-gradient(#cfcfcf, #cfcfcf) left bottom / 100%
      var(--u-hover) no-repeat,
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 16px)
      58% / 6px 6px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 10px)
      58% / 6px 6px no-repeat;
}

/* ▼ Focus：色＆太さだけ強調 */
.contact-page .contact-form .select:focus {
  outline: none;
  background: linear-gradient(var(--u-focus-color), var(--u-focus-color)) left
      bottom / 100% var(--u-focus) no-repeat,
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 16px)
      58% / 6px 6px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 10px)
      58% / 6px 6px no-repeat;
}

:root {
  --u-base: 0.7px; /* 通常（超細） */
  --u-hover: 0.9px; /* Hover */
  --u-focus: 1.3px; /* Focus */
  --u-color: #e3e3e3; /* 通常ライン色 */
  --u-focus-color: #111; /* Focusライン色 */
}

/* 既存の枠線を無効化して、背景グラデで“下線だけ”描画 */
.contact-page .contact-form .form-input,
.contact-page .contact-form .textarea {
  border: 0 !important; /* ← 途中の 2px を打ち消し */
  background: linear-gradient(var(--u-color), var(--u-color)) left bottom/100%
    var(--u-base) no-repeat;
  background-color: transparent;
  padding: 12px 0 !important;
  font-size: 14px;
  font-weight: 400;
  color: #111;
  outline: none;
}

/* Hover：ほんの少しだけ強める */
.contact-page .contact-form .form-input:hover,
.contact-page .contact-form .textarea:hover {
  background-size: 100% var(--u-hover);
}

/* Focus：色と太さを強調（高さは変わらない） */
.contact-page .contact-form .form-input:focus,
.contact-page .contact-form .textarea:focus {
  background: linear-gradient(var(--u-focus-color), var(--u-focus-color)) left
    bottom/100% var(--u-focus) no-repeat;
}

/* 未選択用のプレースホルダーを使うなら、HTML側で <option value="" disabled selected hidden> がおすすめ */
.contact-page .contact-form .select {
  border: 0 !important;
  padding: 12px 0 !important;
  font-size: 14px;
  font-weight: 400;
  color: #111;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background:
    /* 1) 下線 */ linear-gradient(var(--u-color), var(--u-color))
      left bottom/100% var(--u-base) no-repeat,
    /* 2) 矢印(左上り) */
      linear-gradient(45deg, transparent 50%, currentColor 50%)
      calc(100% - 16px) 58%/6px 6px no-repeat,
    /* 3) 矢印(右上り) */
      linear-gradient(135deg, currentColor 50%, transparent 50%)
      calc(100% - 10px) 58%/6px 6px no-repeat;
  background-color: transparent;
}

/* Hover：下線だけ更新（矢印はそのまま） */
.contact-page .contact-form .select:hover {
  background: linear-gradient(#cfcfcf, #cfcfcf) left bottom/100% var(--u-hover)
      no-repeat,
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 16px)
      58%/6px 6px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 10px)
      58%/6px 6px no-repeat;
}

/* Focus：色＆太さ */
.contact-page .contact-form .select:focus {
  outline: none;
  background: linear-gradient(var(--u-focus-color), var(--u-focus-color)) left
      bottom/100% var(--u-focus) no-repeat,
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 16px)
      58%/6px 6px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 10px)
      58%/6px 6px no-repeat;
}

/* 未選択時（プレースホルダー表示中）はラベル色で */
.contact-page .contact-form .select:required:invalid {
  color: #6f6f6f;
}
.contact-page .contact-form .select option {
  color: #111;
}
.contact-page .contact-form .select option[disabled] {
  color: #6f6f6f;
}

/* ===== Contact (mobile) – header + title + gutters ===== */

/* 1) ヘッダー：ロゴは左／ハンバーガーは右端。幅は100%（50vwを無効化） */
@media (max-width: 991.98px) {
  body.header-light.no-hero #site-header .nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important; /* ← 50vw を打消し */
    margin: 0 !important;
    padding: 16px calc(20px + env(safe-area-inset-left)) 16px
      calc(20px + env(safe-area-inset-right)) !important; /* indexと同じ左右20px */
  }
  body.header-light.no-hero #site-header .navbar-brand {
    order: 1 !important;
    margin-left: 0 !important;
    margin-right: auto !important; /* ← 左寄せ固定 */
    flex: 0 0 auto !important;
  }
  body.header-light.no-hero #site-header .mobile-menu-toggle {
    order: 2 !important;
    margin-left: auto !important; /* ← 右端へ */
    display: inline-flex !important;
  }
  /* デスクトップ用メニューはモバイルで隠す */
  body.header-light.no-hero #site-header .navbar-collapse,
  body.header-light.no-hero #site-header .navbar-nav {
    display: none !important;
  }
}

/* 2) 見出し：サイズを小さく、上と左右に余白。indexと同じガター幅に */
@media (max-width: 991.98px) {
  body.contact-page section.contact-title {
    padding: 28px 0 0 !important; /* 上に余白を追加 */
  }
  body.contact-page section.contact-title .contact-title {
    margin: 0 !important;
    padding: 0 20px !important; /* ← 左右20px（indexと同じ） */
    text-align: left !important;
    font-size: clamp(28px, 9vw, 40px) !important; /* でか過ぎ防止 */
    line-height: 1.05 !important;
  }
  body.contact-page .contact-wrap .container {
    padding-left: 20px !important; /* 本文側も左右20pxに */
    padding-right: 20px !important;
  }
}

/* タイトルセクションの上余白（お好みで調整） */
section.contact-title {
  padding: 28px 0 0;
}

/* 余白調整（必要に応じて） */
section.contact-title {
  padding: 28px 0 0;
}

/* タイトルの中央寄せを必ず無効化（親に .text-center が残っていても勝つ） */
.contact-title,
.contact-title * {
  text-align: left !important;
}

/* タイトルセクションの上余白 */
section.contact-title {
  padding: 28px 0 0;
}

/* ==== Contact title: 左寄せを強制し、フォーム列に合わせる ==== */

/* どこかに text-center が残っていても必ず左寄せにする */
.contact-page section.contact-title,
.contact-page section.contact-title * {
  text-align: left !important;
}

/* モバイルの左右ガターを index と同じ 20px に */
@media (max-width: 991.98px) {
  section.contact-title .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .contact-wrap .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  section.contact-title {
    padding-top: 28px;
  } /* タイトル上の余白を確保 */
}

/* タイトルは常に左寄せ */
.contact-page section.contact-title,
.contact-page section.contact-title * {
  text-align: left !important;
}

/* 見出しのサイズ/余白（モバイルは小さめ） */
.contact-page .contact-heading {
  margin: 0 0 20px;
  line-height: 1.05;
  font-weight: 700;
  font-size: clamp(40px, 14vw, 48px);
}

/* タイトルセクションの上余白 */
.contact-page section.contact-title {
  padding-top: 28px;
}

/* もし以前「画面全幅」にしていた場合を打ち消す */
.contact-page section.contact-title .container {
  padding-right: 20px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1320px; /* Bootstrapのxxl相当。必要なら1140pxに */
}

/* styles.css の一番最後に */
@media (min-width: 992px) {
  .contact-title .col-lg-4 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ===== Contact heading（見出し）を大きく＆下マージンを詰める ===== */
.contact-page .contact-heading {
  font-size: clamp(36px, 8.2vw, 60px); /* 以前より一回り大きく */
  line-height: 1.03; /* 文字下の空きも詰める */
  margin: 0 0 10px; /* ← 下マージンを 10px に減らす */
  margin-top: 30px;
}

/* 必要ならモバイルだけさらに詰める */
@media (max-width: 575.98px) {
  .contact-page .contact-heading {
    font-size: 38px;
    margin-bottom: 8px;
  }
}

/* ===== Hamburger color fix ===== */

/* ヒーロー上（index など header-light じゃないページ）：3本すべて白に強制 */
body:not(.header-light) .mobile-burger,
body:not(.header-light) .mobile-burger::before,
body:not(.header-light) .mobile-burger::after {
  background: #fff !important;
}

/* ライトヘッダー（contact 等）：3本すべて黒に統一 */
.header-light .mobile-burger,
.header-light .mobile-burger::before,
.header-light .mobile-burger::after {
  background: #000 !important;
}

/* 念のため、ボタン色が currentColor を伝搬しても影響しないように */
.mobile-menu-toggle {
  color: inherit;
}

/* ==== Graphic Design page essentials === */

.page-title {
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: flex-end;
}

.graphic-title {
  font-family: "Delight";
  font-weight: 600;
  font-size: clamp(36px, 8.2vw, 60px);
  color: #000;
  text-align: left;
  line-height: 1.03;
  margin: 0 0 10px;
  margin-top: 30px; /* 同じ余白感にしたい場合 */
}

/* Graphic Design ページ専用：左揃えにする */
.container {
  margin-left: 0 !important; /* 左の余白をなくす */
  margin-right: auto !important; /* 右側だけ余白を残す */
  max-width: 100%; /* 必要なら全幅に広げる */
  padding-left: 0; /* 左の padding も消す */
}

/* グリッド */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1300px;
  margin: 0 auto 30px;
  padding: 20px;
}
@media (max-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* 各アイテム（正方形サムネ） */
.portfolio-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
}
.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}
.portfolio-item:hover img {
  transform: scale(1.05);
}

/* ホバーのオーバーレイ */
.portfolio-item .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.portfolio-item:hover .overlay {
  opacity: 1;
}

/* ライトボックス（簡易） */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.lightbox .lightbox-content {
  max-width: 92vw;
  max-height: 78vh;
  object-fit: contain;
}
.lightbox .close,
.lightbox .prev,
.lightbox .next {
  position: absolute;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}
.lightbox .close {
  top: 16px;
  right: 16px;
  font-size: 36px;
}
.lightbox .prev {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  font-size: 30px;
}
.lightbox .next {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 30px;
}

.lightbox-caption {
  color: #fff;
  font-size: 16px;
  padding: 12px 16px;
  text-align: center;
  margin-top: 12px;
}

/* Lightbox の閉じるボタン */
.lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 28px; /* 少し小さめ */
  font-weight: 300; /* 細いウェイト */
  color: #fff;
  cursor: pointer;
  z-index: 1001;
  transition: color 0.2s;
}

.lightbox .close:hover {
  color: #ccc; /* hover時に少しグレーに */
}

/* ---- lightbox ナビ矢印（細く・繊細・×と同じホバー） ---- */
.lightbox .prev,
.lightbox .next {
  position: absolute;
  top: 50%;
  width: 28px; /* 大きさは好みで */
  height: 28px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1001;
  /* 文字（< >）は見せない */
  color: transparent;
  font-size: 0;
  line-height: 0;
}

/* 位置 */
.lightbox .prev {
  left: 20px;
}
.lightbox .next {
  right: 20px;
}

/* 1本の疑似要素＋枠線で“山型”を描く（クロスしない） */
.lightbox .prev::before,
.lightbox .next::before {
  content: "";
  position: absolute;
  inset: 0; /* 親いっぱいの枠 */
  margin: auto;
  width: 16px; /* 矢印の幅 */
  height: 16px; /* 矢印の高さ */
  border: 0; /* まず全部0 */
  transition: border-color 0.2s ease;
}

/* 左矢印（＜）→ 左線＋下線 で山型を作る */
.lightbox .prev::before {
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

/* 右矢印（＞）→ 右線＋下線 で山型を作る */
.lightbox .next::before {
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* hover：×と同じ薄グレー */
.lightbox .prev:hover::before,
.lightbox .next:hover::before {
  border-color: #ccc;
}

/* ====== グリッドのホバーキャプション ====== */
.portfolio-item .overlay p {
  font-size: 14px;
  letter-spacing: 0.5px;
  transition: all 0.3s ease; /* hover時スムーズ */
}

/* hover時だけ太字＋少し大きく */
.portfolio-item:hover .overlay p {
  font-size: 15px;
}

/* ====== ライトボックスのキャプション ====== */
.lightbox-caption {
  font-size: 15px;
  letter-spacing: 0.3px;
  color: #ddd;
  margin-top: 10px;
  text-align: center;
}

/* ドロップダウンのクリック(=active)とフォーカス時の青背景を無効化 */
.dropdown-menu {
  /* Bootstrap 5 は CSS変数で色を持っているので上書き */
  --bs-dropdown-link-active-bg: transparent;
  --bs-dropdown-link-active-color: inherit;
  --bs-dropdown-link-hover-bg: transparent; /* hover時の薄色も無しにしたい場合 */
}

/* 念のための直接指定（優先度を上げて確実に消す） */
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:focus {
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
}

/* hover時に少しだけトーン変えたいならここで指定（任意） */
.dropdown-menu .dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.04); /* 薄いグレーにする例 */
  color: inherit;
}

/* モバイルのタップ時ハイライト（iOS等）のにじみを消す */
.dropdown-menu .dropdown-item {
  -webkit-tap-highlight-color: transparent;
}

/* ===== Contact Page カラム幅調整 ===== */
.contact-page .contact-title .container,
.contact-page .contact-wrap .container {
  max-width: 1140px; /* Bootstrapの標準幅に合わせる */
  padding-left: 15px;
  padding-right: 15px;
}

.contact-page .contact-title .row,
.contact-page .contact-wrap .row {
  margin-left: -15px;
  margin-right: -15px;
}

.contact-page .contact-title .col-lg-4,
.contact-page .contact-wrap .col-lg-8 {
  padding-left: 15px;
  padding-right: 15px;
}

@media (max-width: 991.98px) {
  .contact-page .contact-info,
  .contact-page .contact-form {
    margin-bottom: 30px;
  }
}

/* フォーム入力を常に幅100%にする */
.contact-form .form-input,
.contact-form .form-input.select,
.contact-form .form-input.textarea {
  width: 100%;
  max-width: 100%; /* はみ出し防止 */
  box-sizing: border-box;
}

.contact-info {
  width: 100%;
}

.contact-form .col-md-6 {
  flex: 0 0 auto;
}

/* Contact では container を中央寄せ・通常幅に戻す */
.contact-page .container {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1320px; /* 必要なら 1140px に */
  padding-left: 20px; /* ガター */
  padding-right: 20px;
}

.contact-form .form-input,
.contact-form .select,
.contact-form .textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Contact ページ：タイトルと本文の幅を揃える */
.contact-page .contact-title .container,
.contact-page .contact-wrap .container {
  max-width: 1300px; /* Contact Me と同じ幅に合わせる */
  margin-left: auto;
  margin-right: auto;
}

/* ===== モバイルメニュー用フォント調整 ===== */

/* メインのリンク（ABOUT / WORKS / CONTACT など） */
.mobile-link {
  font-size: 1rem; /* 文字サイズ */
  line-height: 1.6; /* 行間で読みやすく */
}

/* サブメニュー（WORKS の中身） */
.mobile-panel[data-panel="works"] .mobile-link {
  font-size: 1rem; /* 少し小さめ */
}

/* WORKS のタイトル */
.mobile-title {
  font-size: 1rem;
  letter-spacing: 0.08em; /* 見出しは広めに */
  font-weight: 600;
}

/* フッターの言語切替やSNSアイコン */
.mobile-footer {
  font-size: 0.8rem;
}

/* ==== Contact: モバイルの左右パディングを広く（さらに大きめ） ==== */
@media (max-width: 991.98px) {
  body.contact-page section.contact-title > .container {
    padding-left: clamp(28px, 8vw, 48px) !important;
    margin-left: 0;
  }
  body.contact-page .contact-wrap > .container {
    padding-left: clamp(28px, 8vw, 48px) !important;
    padding-right: clamp(28px, 8vw, 48px) !important;
  }
  body.contact-page .contact-title .col-lg-4 {
    padding-left: 5px !important;
  }

  body.contact-page .contact-wrap .row {
    --bs-gutter-x: 0; /* Bootstrap の左右ガターを無効化 */
  }

  body.contact-page .contact-wrap .col-lg-4,
  body.contact-page .contact-wrap .col-lg-8 {
    padding-left: clamp(28px, 8vw, 48px) !important;
    padding-right: clamp(28px, 8vw, 48px) !important;
  }
}

/* ==== Contact: モバイルの左右ガターを統一 ==== */
@media (max-width: 991.98px) {
  /* 行のガターをなくす（Bootstrap の左右半ガターを打消し） */
  body.contact-page .contact-wrap .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
  }

  /* 各カラムは余白ゼロ（← これでズレ防止） */
  body.contact-page .contact-wrap .col-lg-4,
  body.contact-page .contact-wrap .col-lg-8 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 代わりに外側の container に均等なパディングを付与 */
  body.contact-page .contact-wrap > .container {
    padding-left: clamp(28px, 7.5vw, 48px) !important;
    padding-right: clamp(28px, 7.5vw, 48px) !important;
  }
}

/* ===== Lightbox arrows (mobile) — 華奢な黒矢印 ===== */
@media (max-width: 767.98px) {
  #lightbox .prev,
  #lightbox .next {
    all: unset;
    position: absolute;
    z-index: 9999;
    top: 50%;
    transform: translateY(-50%);
    width: 28px; /* 少し小さめに */
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
  }
  #lightbox .prev {
    left: 12px;
  }
  #lightbox .next {
    right: 12px;
  }

  /* 黒で細い矢印 */
  #lightbox .prev::before,
  #lightbox .next::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border: solid #000; /* 黒 */
    border-width: 0 2px 2px 0; /* ← 線を細く */
  }
  #lightbox .prev::before {
    transform: rotate(135deg);
  }
  #lightbox .next::before {
    transform: rotate(-45deg);
  }

  #lightbox .prev::after,
  #lightbox .next::after {
    content: none !important;
  }
}

/* Lightbox: 細い × を疑似要素だけで表示（テキスト×は消す） */
#lightbox .close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px; /* クリック領域はしっかり */
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10000;

  /* ここでテキストの × を消す（重なり防止） */
  font-size: 0;
  line-height: 0;
  color: #fff; /* currentColor を白に（背景が暗いので） */
}

/* 細い×（2 本線） */
#lightbox .close::before,
#lightbox .close::after {
  content: "";
  position: absolute;
  width: 18px; /* 長さは好みで調整：14–20px */
  height: 1px; /* 華奢にするなら 1–1.25px */
  background: currentColor; /* 白 */
  top: 50%;
  left: 50%;
  transform-origin: center;
  will-change: transform;
}

#lightbox .close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
#lightbox .close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 触れた時だけ少し強調 */
#lightbox .close:hover::before,
#lightbox .close:hover::after {
  opacity: 0.85;
  height: 1.25px;
}

/* モバイルはさらに軽く */
@media (max-width: 767.98px) {
  #lightbox .close {
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
  }
  #lightbox .close::before,
  #lightbox .close::after {
    width: 16px;
    height: 1px;
  }
}

/* ====== Video page: portfolio (横長動画) ====== */
.video-page .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 1300px;
  margin: 0 auto 30px;
  padding: 20px;
}
@media (max-width: 1024px) {
  .video-page .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
@media (max-width: 768px) {
  .video-page .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

.video-page .portfolio-item {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* 横長サムネ */
  overflow: hidden;
  cursor: pointer;
}
.video-page .portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}
.video-page .portfolio-item:hover img {
  transform: scale(1.04);
}

/* ホバーのキャプション */
.video-page .portfolio-item .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  padding: 14px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.video-page .portfolio-item:hover .overlay {
  opacity: 1;
}

/* ====== Video page: reels (縦動画) ====== */
.video-page .reels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PCでは4列（縦動画が細めに並ぶ） */
  gap: 24px;
  max-width: 1300px;
  margin: 10px auto 60px;
  padding: 0 20px;
}
@media (max-width: 1200px) {
  .video-page .reels-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 992px) {
  .video-page .reels-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .video-page .reels-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.video-page .reel-item {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16; /* 縦長サムネ */
  overflow: hidden;
  cursor: pointer;
  background: #f4f4f4;
}
.video-page .reel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}
.video-page .reel-item:hover img {
  transform: scale(1.04);
}

/* 縦動画のホバーキャプション（横長と共通見た目） */
.video-page .reel-item .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  padding: 12px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.video-page .reel-item:hover .overlay {
  opacity: 1;
}

/* ------ 追加で軽く整える（任意） ------ */
.video-page .page-title {
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px;
}
.video-page .graphic-title {
  font-family: "Delight", sans-serif;
  font-weight: 600;
  font-size: clamp(36px, 8.2vw, 60px);
  line-height: 1.05;
  margin: 30px 0 10px;
  color: #000;
  text-align: left;
}

.page-title {
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: flex-start; /* ← 左揃え */
}

.graphic-title {
  font-family: "Delight";
  font-weight: 600;
  font-size: clamp(36px, 8.2vw, 60px);
  color: #000;
  text-align: left;
  line-height: 1.03;
  margin: 30px 0 10px; /* 上に余白をまとめる */
}

/* ===== Lightbox: make YouTube/MP4 full 16:9 ===== */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* 枠そのものを最大化（16:9を維持） */
.lightbox-content-wrapper {
  position: relative;
  width: min(96vw, 1280px) !important;
  max-height: 92vh !important;
  aspect-ratio: 16/9 !important;
  display: block;
}

/* 中身は枠にピッタリ重ねる */
.lightbox-content-wrapper > #lightbox-img,
.lightbox-content-wrapper > #lightbox-video,
.lightbox-content-wrapper > #lightbox-mp4 {
  margin-top: 20px;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: none; /* JSで切替 */
  border: 0;
  object-fit: contain;
}

/* 画像は余白付きでフィット、動画は中身一杯 */
#lightbox-mp4 {
  object-fit: contain !important;
}
#lightbox-video {
  object-fit: fill !important;
} /* iframeはサイズだけ効く */

/* ===== Lightbox Responsive Adjustments ===== */
@media (max-width: 768px) {
  .lightbox-content-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 16px; /* 左右に余白をつける */
    aspect-ratio: 16/9;
  }
}

/* ===== Lightbox Video / Iframe size調整 ===== */
.lightbox-content-wrapper iframe,
.lightbox-content-wrapper video {
  width: 100%;
  max-width: 80%; /* PCでは2回り小さく */
  max-height: 90vh; /* 高さも画面の7割まで */
  margin: 0 auto;
  display: block;
}
/* モバイル用：さらに小さめにして左右余白を確保 */
@media (max-width: 768px) {
  .lightbox-content-wrapper iframe,
  .lightbox-content-wrapper video {
    max-width: 90%;
    max-height: 60vh;
    margin: 0 auto;
  }
}

/* ================================
   Lightbox: 画面いっぱいに見せる調整
   ================================ */

/* 共通：ライトボックスの枠を画面にフィットさせる */
.lightbox .lightbox-content-wrapper {
  width: min(1100px, 92vw);
  max-height: 86vh;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 中身をリキッドに */
.lightbox img,
.lightbox iframe,
.lightbox video {
  width: 100%;
  height: auto;
  display: block;
  max-height: 86vh; /* コントロールがはみ出ないように */
  border: none;
}

/* 16:9（通常横動画/YouTube）のデフォルト */
.lightbox iframe,
.lightbox video {
  aspect-ratio: 16 / 9;
}

/* 縦リールを開いたとき（JSで .is-reel を付けている） */
.lightbox.is-reel .lightbox-content-wrapper {
  width: min(520px, 92vw); /* 縦動画は少し細めに */
  max-height: 86vh;
}
.lightbox.is-reel video,
.lightbox.is-reel iframe,
.lightbox.is-reel img {
  aspect-ratio: 9 / 16;
  max-height: 86vh;
}

/* モバイルでの余白最適化 */
@media (max-width: 600px) {
  .lightbox .lightbox-content-wrapper {
    width: 94vw;
    max-height: 84vh;
  }
  .lightbox.is-reel .lightbox-content-wrapper {
    width: 92vw; /* モバイルはさらに広く */
  }
}

/* キャプションが被らないように少し余白を確保 */
.lightbox-caption {
  margin-top: 10px;
  text-align: center;
  line-height: 1.4;
}

/* ================================
   Lightbox: 画面いっぱいに見せる調整
   ================================ */

/* 共通：ライトボックスの枠を画面にフィットさせる */
.lightbox .lightbox-content-wrapper {
  width: min(1100px, 92vw);
  max-height: 86vh;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 中身をリキッドに */
.lightbox img,
.lightbox iframe,
.lightbox video {
  width: 100%;
  height: auto;
  display: block;
  max-height: 86vh; /* コントロールがはみ出ないように */
  border: none;
}

/* 16:9（通常横動画/YouTube）のデフォルト */
.lightbox iframe,
.lightbox video {
  aspect-ratio: 16 / 9;
}

/* 縦リールを開いたとき（JSで .is-reel を付けている） */
.lightbox.is-reel .lightbox-content-wrapper {
  width: min(520px, 92vw); /* 縦動画は少し細めに */
  max-height: 86vh;
}
.lightbox.is-reel video,
.lightbox.is-reel iframe,
.lightbox.is-reel img {
  aspect-ratio: 9 / 16;
  max-height: 86vh;
}

/* モバイルでの余白最適化 */
@media (max-width: 600px) {
  .lightbox .lightbox-content-wrapper {
    width: 94vw;
    max-height: 84vh;
  }
  .lightbox.is-reel .lightbox-content-wrapper {
    width: 92vw; /* モバイルはさらに広く */
  }

  .lightbox-caption {
    margin-top: 30px;
  }

  /* キャプションが被らないように少し余白を確保 */
  .lightbox-caption {
    margin-top: 30px;
  }
}

/* ================================
   Reels: モバイルを2列グリッドに
   ================================ */

.reels-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr); /* タブレット～PCの初期値はお好みで */
}

/* サムネは縦長比率でトリミング */
.reels-grid .reel-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}

/* モバイルで2列 */
@media (max-width: 600px) {
  .reels-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* ===== 強制オーバーライド：Reels をモバイル2列 ===== */
body.video-page .reels-grid {
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: repeat(4, 1fr) !important;
}
body.video-page .reels-grid .reel-item img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 9 / 16 !important;
  object-fit: cover !important;
}
@media (max-width: 600px) {
  body.video-page .reels-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

/* ==== FINAL OVERRIDE: Mobile reels fullscreen-ish ==== */
@media (max-width: 768px) {
  /* ライトボックスがリールのときの枠を広げる */
  #lightbox.is-reel .lightbox-content-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 92vh !important; /* ほぼ全画面 */
    max-height: 92vh !important;
    aspect-ratio: auto !important; /* 16:9 固定を打ち消す */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* MP4 本体をフルに */
  #lightbox.is-reel #lightbox-mp4 {
    position: relative !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 80vh !important;
    max-width: 100vw !important;
    max-height: 92vh !important;
    object-fit: contain !important; /* 両端余白を保って最大化 */
    display: block !important;
    margin: 0 !important; /* 既存の margin-top:20px を打消し */
  }

  /* iOS 等で iframe/共通指定が勝つのを防ぐ */
  #lightbox.is-reel .lightbox-content-wrapper video,
  #lightbox.is-reel .lightbox-content-wrapper iframe {
    max-width: 100vw !important; /* 80%/90% 指定を打消し */
    max-height: 92vh !important; /* 60vh 指定を打消し */
    aspect-ratio: auto !important; /* 16:9 強制を打消し */
  }

  /* キャプションは少しだけ下に */
  #lightbox.is-reel .lightbox-caption {
    margin-top: 8px !important;
  }
}

/* 矢印ボタン（枠や背景なし） */
.lightbox .prev,
.lightbox .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  cursor: pointer;
  z-index: 10;
  user-select: none;
  color: transparent; /* 中身の文字は非表示 */
  font-size: 0;
  line-height: 0;
}

/* 左右位置（内側に寄せる） */
.lightbox .prev {
  left: 10px;
}
.lightbox .next {
  right: 10px;
}

/* 矢印の見た目：線だけ白 */
.lightbox .prev::after,
.lightbox .next::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
}

/* 向き調整 */
.lightbox .prev::after {
  transform: rotate(135deg);
} /* ◀ */
.lightbox .next::after {
  transform: rotate(-45deg);
} /* ▶ */

/* ホバー時：少し太く or 透過を下げるなど調整可能 */
.lightbox .prev:hover::after,
.lightbox .next:hover::after {
  border-color: #fff;
  opacity: 0.8;
}

/* ==== Lightbox 矢印を常に白に統一 ==== */
#lightbox .prev::before,
#lightbox .next::before {
  border-color: #fff !important; /* 白に強制 */
}

/* モバイルでも白 */
@media (max-width: 767.98px) {
  #lightbox .prev::before,
  #lightbox .next::before {
    border-color: #fff !important;
  }
}

#lightbox .prev::after,
#lightbox .next::after {
  /* 強めの影: 黒、不透明度高め、ぼかし広め */
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
}

#lightbox .prev::after {
  transform: rotate(135deg);
} /* ◀ */
#lightbox .next::after {
  transform: rotate(-45deg);
} /* ▶ */

/* --- Desktop: 画像を縦中央、キャプションは下段 --- */
@media (min-width: 992px) {
  #lightbox {
    position: fixed; /* 既存と同じ想定 */
    inset: 0;
    display: grid;
    grid-template-rows: 1fr auto; /* 上=画像, 下=キャプション */
    place-items: center; /* 横中央 & 縦中央 */
    row-gap: 20px; /* 画像とキャプションの間隔 */
    padding: 32px 24px; /* 画面端の余白 */
  }

  /* 画像ラッパー：画面高からキャプション分を差し引いた上限 */
  #lightbox .lightbox-content-wrapper {
    max-width: min(92vw, 1200px);
    max-height: 70vh; /* 必要なら 80–82vh に調整可 */
  }

  /* 画像そのものの上限（ラッパーにフィット） */
  #lightbox .lightbox-content {
    max-width: 80vw;
    max-height: 80vh;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* もう少し“下げたい”場合は微調整（好みで） */
  #lightbox .lightbox-content-wrapper {
    transform: translateY(5vh); /* 0〜3vh くらいで好みに調整 */
  }
}

/* Reels Grid 共通 */
.reels-grid {
  display: grid !important;
  gap: 1.5rem;
}

/* Desktop: アクティブ */
.navbar .navbar-nav .nav-link.is-active,
.dropdown-menu .dropdown-item.is-active {
  text-decoration: underline !important;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* Mobile drawer: アクティブ */
.mobile-menu .mobile-link.is-active,
.mobile-menu .mobile-link[aria-current="page"] {
  text-decoration: underline !important;
  text-underline-offset: 6px;
  text-decoration-thickness: 0.01em;
}

/* Active 下線の太さを統一（デスクトップ） */
.navbar-nav .nav-link.is-active,
.navbar-nav .nav-link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 1px; /* ←ここで固定 */
}

/* ドロップダウン内も同じ太さに固定（少しだけオフセット浅めに） */
.dropdown-menu .dropdown-item.is-active,
.dropdown-menu .dropdown-item[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px; /* ←ここで固定 */
}

/* 念のため、下線を border で付けている可能性を消す */
.navbar-nav .nav-link,
.dropdown-menu .dropdown-item {
  border-bottom: none !important;
}

/* ドロップダウンの文字サイズをナビと合わせる（任意） */
.dropdown-menu .dropdown-item {
  font-size: 14px;
  letter-spacing: var(--nav-letter, 0.08em);
}

/* ================================
   Apparel 専用：横長カードの2列グリッド
   ================================ */
.apparel-page .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* デスクトップ 2列 */
  gap: 24px;
  max-width: 1300px; /* 必要なら既存の幅に合わせて調整 */
  margin: 0 auto 30px;
  padding: 20px;
}

/* モバイルは1列 */
@media (max-width: 768px) {
  .apparel-page .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* 横長アスペクト固定（16:9） */
.apparel-page .portfolio-item {
  position: relative;
  aspect-ratio: 16 / 9; /* ここで“横長”にする */
  overflow: hidden;
}

/* 画像・動画ともにフィットさせる */
.apparel-page .portfolio-item img,
.apparel-page .portfolio-item video.thumb {
  width: 100%;
  height: 100%;
  object-fit: cover; /* はみ出しはトリミング */
  display: block;
}

/* もし既存の .portfolio-grid の列指定が強く上書きしてくる場合に備えて */
.apparel-page .portfolio-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 768px) {
  .apparel-page .portfolio-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 100vhずれ防止（iPad Safari） */
:root {
  --vh-safe: 100svh;
}
.min-vh-100 {
  min-height: var(--vh-safe) !important;
}

/* 重なり順：ナビを前面にしてタップを確実に取る */
.hero-overlay {
  position: relative;
  z-index: 1;
}
.navbar {
  position: relative;
  z-index: 2;
}
.dropdown-menu {
  z-index: 1050;
}

/* PC(≥1200px)のみホバーでドロップダウン */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
  }
  .navbar .dropdown-toggle.show ~ .dropdown-menu {
    display: block;
  }
}

/* iPad帯の見やすさ微調整（任意） */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .navbar-brand {
    margin-right: 0.5rem;
  }
  .heading-font {
    font-size: clamp(2rem, 2.2vw + 1rem, 2.75rem);
  }
}

.mobile-menu-toggle {
  position: relative;
  z-index: 1100;
}

/* iPad Safariの100vhズレ対策 */
:root {
  --vh-safe: 100svh;
}
.min-vh-100 {
  min-height: var(--vh-safe) !important;
}

/* 重なり順（ハンバーガーやドロップダウンのタップ抜け防止） */
.hero-overlay {
  position: relative;
  z-index: 1;
}
.navbar {
  position: relative;
  z-index: 2;
}
.dropdown-menu {
  z-index: 1050;
}

/* モバイルメニュー（open時だけ操作可） */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* PC(≥1200px)のみホバーでドロップダウン */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
  }
  .navbar .dropdown-toggle.show ~ .dropdown-menu {
    display: block;
  }
}

/* =========================
   Responsive tweaks
========================= */
@media (max-width: 767.98px) {
  .corner-badge {
    right: -50px;
    bottom: -60px;
    width: 150px;
    animation: spin 30s linear infinite;
  }
}

/* 2160x900 固定比率 (2.4:1) の枠を作る */
.ratio-box {
  position: relative;
  width: 100%;
  aspect-ratio: 2160 / 900; /* ブラウザ対応良好ならこれが一番シンプル */
  overflow: hidden;
}

/* 画像は枠内で縮小して全体を表示 */
.ratio-box .main-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 縮小して全体を見せる */
  display: block;
}

/* About ページだけの画像ルール切替 */
.about-page .main-image-wrapper {
  position: relative;
  width: 100%;
}

/* iPad・モバイルは index と同じ設定に戻す */
@media (max-width: 1199.98px) {
  .about-page .main-image-wrapper {
    width: 280px;
    height: 360px;
    margin: 0 auto;
  }
  .about-page .main-image-wrapper .main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* セクション全体：最大幅1300pxで中央寄せ */
.about-info {
  margin: 0 auto;
}

/* 左の丸ドット */
.dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #447b15; /* 緑 */
  display: inline-block;
}

/* セクション見出し */
.section-heading {
  font-family: "Delight", sans-serif;
  font-weight: 600;
  font-size: 25px;
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: uppercase;
}

/* 小さいテキスト */
.text-small {
  font-size: 16px;
  line-height: 1.6;
}

/* バッジ（outlined） */
.badge-outline {
  display: inline-block;
  border: 1px solid #000;
  border-radius: 30px;
  padding: 4px 12px;
  font-size: 16px;
  margin: 3px;
  background: #fff;
}

/* バッジ（solid） */
.badge-solid {
  display: inline-block;
  border-radius: 30px;
  padding: 5px 14px;
  font-size: 16px;
  margin: 3px;
  background: #000;
  color: #fff;
}

/* 黒帯 */
.marquee-bar {
  width: 100%;
  background: white;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  padding: 10px 0;
  position: relative;
}

/* 流れるテキスト全体 */
.marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 70s linear infinite;
}

/* 流れるテキスト要素 */
.marquee-track span {
  font-family: "Druk Text Wide", serif;
  letter-spacing: -0.02em;
  font-size: 20px;
  font-weight: 400;
  padding-right: 50px; /* テキスト間の余白 */
}

/* アニメーション */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ===== Grid Mesh overlay (graph paper style) ===== */
.grid-mesh {
  position: relative;
  isolation: isolate; /* 擬似要素のブレンドをこの中だけに閉じ込める */
}

/* コンテンツは上に */
.grid-mesh > * {
  position: relative;
  z-index: 1;
}

/* グリッド設定（変数でサイズ調整） */
.grid-mesh {
  --cell: 140px; /* 細かいマスの一辺 */
  --major: calc(var(--cell) * 4); /* 太線の間隔（4マスごと） */
  --line: rgba(0, 0, 0, 0.1); /* 細線の色（薄めの黒） */
  --bold: rgba(0, 0, 0, 0.18); /* 太線の色 */
}

/* 擬似要素で上から被せる */
.grid-mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* 細線（縦横） */
  background-image: repeating-linear-gradient(
      to right,
      var(--line) 0 1px,
      transparent 1px var(--cell)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--line) 0 1px,
      transparent 1px var(--cell)
    ),
    /* 太線（縦横：4マスごと） */
      repeating-linear-gradient(
        to right,
        var(--bold) 0 1px,
        transparent 1px var(--major)
      ),
    repeating-linear-gradient(
      to bottom,
      var(--bold) 0 1px,
      transparent 1px var(--major)
    );
  opacity: 0.35; /* 全体の薄さ。強めにしたい時は .45 など */
  mix-blend-mode: multiply; /* 背景と馴染ませる（白地ならそのままでもOK） */
  /* 参考：白地に乗せるだけなら mix-blend-mode は省略可 */
}

/* 画面サイズでマスの大きさを調整（任意） */
@media (max-width: 1199.98px) {
  /* iPadなど */
  .grid-mesh {
    --cell: 96px;
    --major: calc(var(--cell) * 4);
  }
}
@media (max-width: 767.98px) {
  /* モバイル */
  .grid-mesh {
    --cell: 64px;
    --major: calc(var(--cell) * 4);
  }
}

/* ===== 2×2 画像タイル with 白文字オーバーレイ ===== */
.about-cards .tile {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3; /* スクショっぽい比率。正方形にしたければ 1 / 1 */
  background: #eee;
}

.about-cards .tile-img {
  width: 90%;
  height: 90%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.6s ease;
}

.about-cards .tile:hover .tile-img {
  transform: scale(1.06); /* うっすらズーム */
}

.about-cards .tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 22px;
  color: #fff;
  /* 下を濃くするグラデで可読性UP */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0.05) 100%
  );
}

.about-cards .tile-title {
  font-weight: 800;
  font-size: 24px; /* 見出し */
  letter-spacing: 0.02em;
  margin: 0 0 6px 0;
  text-transform: uppercase;
}

.about-cards .tile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px; /* 本文 */
  line-height: 1.55;
}

.about-cards .tile-list li + li {
  margin-top: 2px;
}

/* 角丸を強めにしたい場合： */
/* .about-cards .tile { border-radius: 24px; } */

/* レスポンシブ微調整 */
@media (max-width: 991.98px) {
  /* iPad縦〜タブレット */
  .about-cards .tile-title {
    font-size: 22px;
  }
  .about-cards .tile-list {
    font-size: 13px;
  }
}
@media (max-width: 575.98px) {
  /* スマホ */
  .about-cards .tile {
    aspect-ratio: 16 / 12;
  }
  .about-cards .tile-title {
    font-size: 20px;
  }
}

/* ====== 共通タイル ====== */
.about-cards .tile {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #eee;
}

.about-cards .tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1); /* ← デフォルト1.0、数値を下げると引きになる */
  transform-origin: center center; /* 中央基準 */
}

.about-cards .tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 22px;
  color: #fff;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0.05) 100%
  );
}

.about-cards .tile-title {
  font-family: "Druk Text Wide", sans-serif;
  font-weight: 500;
  letter-spacing: -0.05em;
  font-size: 24px;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}

.about-cards .tile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.55;
}

.about-cards .tile-list li + li {
  margin-top: 4px;
}

/* ====== Tools 専用: バッジスタイル ====== */
.tile-list.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tile-list.badges li {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  backdrop-filter: blur(4px);
  transition: background 0.3s, transform 0.3s;
}

.tile-list.badges li:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.tile-list.badges li {
  width: 140px; /* 全部同じ幅 */
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.tile-list.badges li {
  width: 140px; /* ★ 全部同じ幅に固定 */
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 999px;
}

/* 通常のバッジ */
.tile-list.badges li {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* 開発系（黒ベース、半透明） */
.tile-list.badges li.dev-skill {
  background: rgba(0, 0, 0, 0.5); /* ★ 半透明の黒（0.5で50%透過） */
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}

.tile-list.badges li:first-child {
  position: relative;
  top: 4px; /* 必要なら 1px〜2px 下げる */
}
/* ホバー時：ちょっと明るく */
.tile-list.badges li.dev-skill:hover {
  background: rgba(0, 0, 0, 0.35); /* 黒が薄くなり、背景がより透ける */
  transform: translateY(-2px);
}

/* =========================
   ABOUT section responsive
   （既存のPCスタイルはそのまま）
========================= */

/* ── Tablet (～991.98px：iPad含む) ───────────────── */
@media (max-width: 991.98px) {
  /* 画像：少し縦を出す */
  .about-cards .tile {
    aspect-ratio: 16 / 12; /* PCより少し縦長 */
    border-radius: 14px;
  }

  /* オーバーレイ＆文字サイズ */
  .about-cards .tile-overlay {
    padding: 16px 18px;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.3) 45%,
      rgba(0, 0, 0, 0.06) 100%
    );
  }
  .about-cards .tile-title {
    font-size: 20px;
  }
  .about-cards .tile-overlay p,
  .about-cards .tile-overlay ul {
    font-size: 13px;
    line-height: 1.6;
  }

  /* バッジ：高さ/幅を少し抑える */
  .tile-list.badges {
    gap: 8px;
  }
  .tile-list.badges li {
    height: 34px; /* 高さ統一 */
    min-width: 100px; /* 幅の下限（可変幅は維持） */
    padding: 0 12px;
    font-size: 12.5px;
    line-height: 1; /* ベースラインのブレ防止 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── Mobile (～575.98px) ───────────────────────── */
@media (max-width: 575.98px) {
  /* 画像：さらに縦を出す */
  .about-cards .tile {
    aspect-ratio: 16 / 14; /* もっと縦長にして情報を収める */
    border-radius: 12px;
  }

  .about-cards .tile-overlay {
    padding: 14px;
  }
  .about-cards .tile-title {
    font-size: 18px;
    letter-spacing: 0.01em;
  }
  .about-cards .tile-overlay p,
  .about-cards .tile-overlay ul {
    font-size: 12px;
    line-height: 1.55;
  }

  /* バッジ：さらにコンパクトに */
  .tile-list.badges {
    gap: 6px;
  }
  .tile-list.badges li {
    height: 32px;
    min-width: 92px; /* 文字が短いラベルの見た目を確保 */
    padding: 0 10px;
    font-size: 12px;
  }
}

/* =========================
   Responsive 調整
========================= */
@media (max-width: 991.98px) {
  .tile-list.badges li {
    min-width: 78px; /* タブレットではさらにコンパクト */
    height: 30px;
    font-size: 11.5px;
  }
}

@media (max-width: 575.98px) {
  .tile-list.badges li {
    min-width: 72px; /* モバイルではもっと小さく */
    height: 28px;
    font-size: 11px;
    padding: 0 8px;
  }
}

/* 通常：グリッドで2〜3列対応 */
.tile-list.badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* バッジ共通 */
.tile-list.badges li {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* 通常はカラム幅いっぱい */
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  backdrop-filter: blur(3px);
  transition: background 0.3s, transform 0.3s;
  white-space: nowrap; /* 改行せずテキスト幅に */
}

/* 開発系（黒ベース、半透明） */
.tile-list.badges li.dev-skill {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.tile-list.badges li.dev-skill:hover {
  background: rgba(0, 0, 0, 0.35);
}
.tile-list.badges li:hover {
  transform: translateY(-2px);
}

/* ===== モバイル用（幅576px以下） ===== */
@media (max-width: 575.98px) {
  .tile-list.badges {
    display: flex; /* グリッドじゃなくflexに切り替え */
    flex-wrap: wrap; /* 折り返し有効 */
    gap: 8px;
  }
  .tile-list.badges li {
    width: auto; /* テキスト幅に合わせる */
    min-width: unset; /* min幅解除 */
    font-size: 12.5px;
    padding: 0 10px;
    height: 32px;
  }
}

/* 共通：グリッドで自動調整 */
.tile-list.badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 最小120px */
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* バッジ共通 */
.tile-list.badges li {
  height: 34px; /* 少し小さめ */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  backdrop-filter: blur(3px);
  transition: background 0.3s, transform 0.3s;
  white-space: nowrap;
  padding: 0 10px;
}

/* 開発系（黒ベース、半透明） */
.tile-list.badges li.dev-skill {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.tile-list.badges li.dev-skill:hover {
  background: rgba(0, 0, 0, 0.35);
}
.tile-list.badges li:hover {
  transform: translateY(-2px);
}

/* ===== タブレット ===== */
@media (max-width: 991.98px) {
  .tile-list.badges {
    grid-template-columns: repeat(
      auto-fit,
      minmax(110px, 1fr)
    ); /* 少し縮める */
    gap: 8px;
  }
  .tile-list.badges li {
    font-size: 12.5px;
    height: 32px;
  }
}

/* ===== モバイル ===== */
@media (max-width: 575.98px) {
  .tile-list.badges {
    grid-template-columns: repeat(
      auto-fit,
      minmax(100px, 1fr)
    ); /* 最小幅もっと小さく */
    gap: 6px;
  }
  .tile-list.badges li {
    font-size: 12px;
    height: 30px;
    padding: 0 8px;
  }
}

/* 国旗アイコン */
.flag-icon {
  width: 48px; /* ← 大きめに */
  height: 32px; /* 比率4:3で自然に拡大 */
  object-fit: cover;
  border-radius: 4px; /* 少し丸み */
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); /* 立体感UP */
}

/* リスト項目 */
.tile-list.languages li {
  display: flex;
  align-items: center;
  gap: 10px; /* 国旗と文字の余白も広めに */
  font-size: 1.1rem; /* テキストも少し大きく */
}

@media (max-width: 575.98px) {
  .flag-icon {
    width: 36px;
    height: 24px;
  }
  .tile-list.languages li {
    font-size: 1rem;
    gap: 8px;
  }
}

/* 必須アスタリスク */
.req {
  color: #999;
  font-weight: 400;
}

/* エラー表示 */
.has-error .form-input {
  border-color: #e74c3c !important;
}

.error-msg {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 6px;
  display: block;
}

/* 送信ボタン 無効時 */
.btn-submit[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

#formMessage {
  margin-top: 1rem; /* ← 上にスペースを確保 */
  font-size: 0.95rem;
  line-height: 1.4;
}

/* 言語ボタンをNAVと高さ揃え */
.btn-lang {
  font-size: 14px;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* hover時も黒ベース維持 */
.btn-lang:hover {
  color: #666666;
  box-shadow: none;
}

/* ドロップダウンメニュー */
.dropdown-menu .dropdown-item {
  font-size: 14px;
}
.dropdown-menu .dropdown-item:hover {
  background-color: #f5f5f5;
}

/* バッジを画面幅に応じて可変させる（全端末に効く） */
.corner-badge {
  /* 最小140px、理想18vw、最大210px の可変幅 */
  width: clamp(140px, 18vw, 210px);
  /* 位置も幅比率に合わせて少し内側へ（調整目安） */
  right: calc(-1 * (clamp(140px, 18vw, 210px) / 3));
  bottom: calc(-1 * (clamp(140px, 18vw, 210px) / 2.5));
}

/* モバイルメニュー用の言語ドロップダウン */
.mobile-footer .btn-lang {
  color: black;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.95rem;
  border: none !important;
}

/* ホバー時 */
.mobile-footer .btn-lang:hover {
  background-color: transparent !important; /* 背景は変えない */
  color: #666666 !important;
}

/* ホバー・フォーカス・クリック時 */
.mobile-footer .btn-lang:hover,
.mobile-footer .btn-lang:active,
.mobile-footer .btn-lang:focus-visible {
  background: transparent !important;
  color: #666666 !important;
  border: none !important; /* 枠が出ないように */
  box-shadow: none !important; /* Bootstrap の影も消す */
}

/* data-font-scope が付いているブロックだけ言語別フォントにする */
[data-font-scope="1"]:lang(ja),
[data-font-scope="1"] [lang="ja"] {
  font-family: "Noto Sans JP", "Delight", system-ui, -apple-system, "Segoe UI",
    Arial, sans-serif !important;
}

[data-font-scope="1"]:lang(ko),
[data-font-scope="1"] [lang="ko"] {
  font-family: "Noto Sans KR", "Delight", system-ui, -apple-system, "Segoe UI",
    Arial, sans-serif !important;
}

/* まだなければ追加 */
.error-msg {
  display: none;
  font-size: 0.85rem;
  color: #d33;
}
.error-msg.show {
  display: block;
}

#formMessage {
  margin-top: 1rem; /* ← 上にスペースを確保 */
  font-size: 0.95rem;
  line-height: 1.4;
}

/* 言語メニューはホバーで開かない */
.navbar .dropdown.lang-nav:hover > .dropdown-menu {
  display: none !important;
}

/* クリックで .show が付いた時だけ表示 */
.navbar .dropdown.lang-nav .dropdown-menu.show {
  display: block !important;
}

.contact-form #formMessage.status-ok {
  color: #447b15 !important;
}
.contact-form #formMessage.status-ng {
  color: #b3261e !important;
}

:root {
  --req-label: "Required";
} /* 初期値（JSで上書き） */

.form-label.required::after {
  content: "(" var(--req-label) ")";
  margin-left: 0.5rem;
  font-size: 0.85em;
  color: #6f6f6f; /* お好みの色 */
}

/* ===== ABOUT: 2×2 画像タイル（見出し以外は統一フォント） ===== */
.about-cards {
  /* 見出し以外の本文サイズをここで一元管理（PCで14px・小画面でやや縮む） */
  --about-text: clamp(13px, 1.1vw, 15px);
  --about-badge: clamp(12.5px, 1vw, 14px);
}

/* タイル共通 */
.about-cards .tile {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #eee;
}
.about-cards .tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.6s ease;
}
.about-cards .tile:hover .tile-img {
  transform: scale(1.06); /* うっすらズーム */
}

/* オーバーレイ */
.about-cards .tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 22px;
  color: #fff;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0.05) 100%
  );
}

/* 見出し（除外対象） */
.about-cards .tile-title {
  font-family: "Druk Text Wide", sans-serif;
  font-weight: 500;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  font-size: clamp(20px, 2.1vw, 24px);
  margin: 0 0 8px 0;
}

/* —— 見出し以外の本文を統一 —— */
.about-cards .tile-overlay p,
.about-cards .tile-overlay ul,
.about-cards .tile-overlay li,
.about-cards .tile-overlay span,
.about-cards .tile-overlay strong {
  font-size: var(--about-text);
  line-height: 1.6;
}
.about-cards .tile-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.about-cards .tile-list li + li {
  margin-top: 4px;
}

/* ===== Tools: バッジ ===== */
/* デフォは自動段組み（可変） */
.tile-list.badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tile-list.badges li {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 10px;
  font-size: var(--about-badge);
  font-weight: 500;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  backdrop-filter: blur(3px);
  transition: background 0.3s, transform 0.3s;
  white-space: nowrap;
}
.tile-list.badges li:hover {
  transform: translateY(-2px);
}
.tile-list.badges li.dev-skill {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.tile-list.badges li.dev-skill:hover {
  background: rgba(0, 0, 0, 0.35);
}

/* ===== Languages: 国旗とテキスト ===== */
.flag-icon {
  width: clamp(18px, 3.2vw, 22px);
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.tile-list.languages li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: inherit; /* ← 見出し以外の統一サイズを継承 */
}

/* ── Tablet (～991.98px) ───────────────── */
@media (max-width: 991.98px) {
  .about-cards .tile {
    aspect-ratio: 16 / 12;
    border-radius: 14px;
  }
  .about-cards .tile-overlay {
    padding: 16px 18px;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.3) 45%,
      rgba(0, 0, 0, 0.06) 100%
    );
  }
}

/* ── Mobile (～575.98px) ───────────────── */
@media (max-width: 575.98px) {
  .about-cards .tile {
    aspect-ratio: 16 / 14;
    border-radius: 12px;
  }
  .about-cards .tile-overlay {
    padding: 14px;
  }
  .about-cards .tile-title {
    letter-spacing: 0.01em;
  }
  /* バッジは列を少し詰める */
  .tile-list.badges {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 6px;
  }
  .tile-list.badges li {
    height: 30px;
    padding: 0 8px;
  }
}

/* サムネ動画はクリックを拾わず親 .portfolio-item にイベントを通す */
.portfolio-item .thumb {
  pointer-events: none;
}

/* iPadサイズ（～991px）はほんのり縦長に */
@media (max-width: 991.98px) {
  .about-cards .tile {
    aspect-ratio: 5 / 6; /* ≒0.83 ほどよい縦長 */
  }
}

/* iPhone SEなど超小画面（～400px）は少し余裕 */
@media (max-width: 400px) {
  .about-cards .tile {
    aspect-ratio: 6 / 7; /* ≒0.86 コンパクト＆自然 */
  }
}

.tile-list.badges li {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* モバイル時（～575.98px）のフォントサイズ調整 */
@media (max-width: 575.98px) {
  .about-cards {
    --about-text: 0.9rem; /* 本文を ≒16px にアップ */
    --about-badge: 0.95rem; /* バッジも少しだけ大きく */
  }
  .about-cards .tile-title {
    font-size: clamp(18px, 5vw, 22px); /* 見出しもほんのり大きく */
  }
}

/* モバイル（～575.98px）でバッジ全体を大きく */
@media (max-width: 575.98px) {
  .tile-list.badges li {
    font-size: 1rem; /* フォントサイズUP（既存var上書きより確実） */
    height: 38px; /* 高さUP（デフォ34px） */
    padding: 0 14px; /* 左右パディングUP */
    border-radius: 999px; /* ピル形状維持 */
  }
  .tile-list.badges {
    gap: 10px; /* バッジ間の余白も少し広めに */
  }
}

/* iPhone SEなど極小画面（～400px）はやや控えめ */
@media (max-width: 400px) {
  .tile-list.badges li {
    font-size: 0.95rem; /* 少し小さめにして収まりやすく */
    height: 36px;
    padding: 0 12px;
  }
  .tile-list.badges {
    gap: 8px;
  }
}