/*
 * SITE DESK 共通シェル
 * ヘッダー（浮いたバー）・グローバルナビ・モバイルメニュー・フッター・CTA ボタン。
 * 前提: tokens.css / base.css を読み込むこと。クラスは sd- 接頭辞。
 * ブレークポイント: 1024px でナビ切替（768px では 5 リンク + CTA が収まらないため）。
 *
 * ヘッダーは sticky で、直後の内容に重なる（margin-bottom を負にしている）。
 * そのため #main は既定でヘッダーの高さぶん上に余白を持つ。全幅のヒーローを
 * ヘッダーの裏まで敷くページは <main class="sd-main--flush"> にして、
 * ヒーロー側で同じ高さを確保する。
 */

:root {
  --header-h: 4.75rem; /* 76px: バー 52px + 上下 12px */
}

/* ---- スキップリンク ---- */
.sd-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--color-brand-navy);
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-md) 0;
}

.sd-skip:focus {
  left: 0;
}

#main {
  padding-top: var(--header-h);
}

#main.sd-main--flush {
  padding-top: 0;
}

#main.sd-page {
  padding-top: calc(var(--header-h) + var(--space-16));
}

/* ---- ページ本文コンテナ（下層ページの共通の枠） ---- */
.sd-page {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-16) var(--gutter) var(--space-24);
}

/* ---- CTA ボタン（主要・副・テキスト） ---- */
.sd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  letter-spacing: var(--tracking-normal);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.sd-btn:active {
  transform: translateY(1px);
}

/* 矢印アイコン（右向き）。hover で少し進む */
.sd-btn__arrow {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-out);
}

.sd-btn:hover .sd-btn__arrow {
  transform: translateX(3px);
}

.sd-btn--primary {
  background: var(--color-brand-green-dark);
  color: var(--color-text-inverse);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.18) inset, 0 6px 16px -6px rgb(8 122 56 / 0.55);
}

.sd-btn--primary:hover {
  background: var(--color-brand-green-deeper);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.18) inset, 0 10px 22px -8px rgb(8 122 56 / 0.6);
}

.sd-btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.sd-btn--secondary:hover {
  border-color: var(--color-text);
  background: var(--color-surface);
}

/* 濃紺の帯の上で使う白抜きボタン */
.sd-btn--inverse {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: rgb(255 255 255 / 0.4);
}

.sd-btn--inverse:hover {
  border-color: var(--color-text-inverse);
  background: rgb(255 255 255 / 0.06);
}

.sd-btn--lg {
  min-height: 3.5rem;
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

.sd-btn--text {
  min-height: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--color-brand-green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sd-btn--text:hover {
  color: var(--color-brand-navy);
}

/* ---- ヘッダー（上端から浮いたバー） ---- */
.sd-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--header-h);
  margin-bottom: calc(var(--header-h) * -1);
  padding: var(--space-3) var(--gutter) 0;
  pointer-events: none; /* バーの外側はクリックを下へ通す */
}

.sd-header__inner {
  pointer-events: auto;
  max-width: var(--container-max);
  height: 3.25rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-2) 0 var(--space-5);
  background: rgb(255 255 255 / 0.82);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border: 1px solid rgb(15 43 51 / 0.08);
  border-radius: var(--radius-full);
  box-shadow: 0 1px 2px rgb(15 43 51 / 0.04);
  transition: box-shadow var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out);
}

.sd-header.is-scrolled .sd-header__inner {
  background: rgb(255 255 255 / 0.92);
  box-shadow: var(--shadow-md);
}

.sd-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-text);
  text-decoration: none;
}

.sd-brand img {
  width: auto;
  height: 2.5rem; /* SVG の上下に余白があるため、マークは約 24px で見える */
}

.sd-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}

.sd-nav__link {
  position: relative;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.sd-nav__link:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}

.sd-nav__link[aria-current="page"] {
  color: var(--color-brand-green-dark);
  font-weight: var(--weight-bold);
}

.sd-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: var(--radius-full);
  background: var(--color-brand-green);
}

/* 3サービス: EN名 + 一行説明（説明は広い画面のみ） */
.sd-nav__link--service {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding-inline: 0.375rem;
  text-align: left;
}

.sd-nav__title {
  font-size: var(--text-sm);
  line-height: 1.2;
}

.sd-nav__sub {
  font-size: 0.625rem;
  font-weight: var(--weight-regular);
  line-height: 1.3;
  color: var(--color-text-muted);
  white-space: nowrap;
}

@media (max-width: 1279.98px) {
  .sd-nav__sub {
    display: none;
  }
}

.sd-header__cta {
  min-height: 2.5rem;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-5);
  white-space: nowrap;
  box-shadow: none;
}

.sd-header__cta:hover {
  box-shadow: none;
}

/* ---- モバイルメニューボタン（1024px 未満のみ） ---- */
.sd-menu-btn {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  background: var(--color-brand-navy);
  border: 0;
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-inverse);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.sd-menu-btn__icon,
.sd-menu-btn__icon::before,
.sd-menu-btn__icon::after {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  transition: transform var(--duration-normal) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.sd-menu-btn__icon {
  position: relative;
}

.sd-menu-btn__icon::before,
.sd-menu-btn__icon::after {
  position: absolute;
  left: 0;
}

.sd-menu-btn__icon::before { transform: translateY(-5px); }
.sd-menu-btn__icon::after { transform: translateY(5px); }

.sd-menu-btn[aria-expanded="true"] .sd-menu-btn__icon { background: transparent; }
.sd-menu-btn[aria-expanded="true"] .sd-menu-btn__icon::before { transform: rotate(45deg); }
.sd-menu-btn[aria-expanded="true"] .sd-menu-btn__icon::after { transform: rotate(-45deg); }

/* ---- モバイルメニュー（全高のパネル） ---- */
.sd-menu {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgb(255 255 255 / 0.94);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  padding: var(--space-6) var(--gutter) var(--space-12);
  overflow-y: auto;
}

.sd-menu__nav {
  display: flex;
  flex-direction: column;
  max-width: 32rem;
  margin-inline: auto;
}

.sd-menu__close {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-6) auto;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.sd-menu__close:hover {
  border-color: var(--color-text);
}

.sd-menu__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}

.sd-menu__link:hover,
.sd-menu__link[aria-current="page"] {
  color: var(--color-brand-green-dark);
}

.sd-menu__title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: normal;
}

.sd-menu__sub {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

.sd-menu__cta {
  margin-top: var(--space-6);
}

/* 開いたときにリンクが順に下から現れる（60ms 刻み、合計 400ms まで） */
.sd-menu:not([hidden]) .sd-menu__nav > * {
  animation: sd-menu-in 500ms var(--ease-out) both;
}

.sd-menu:not([hidden]) .sd-menu__nav > :nth-child(2) { animation-delay: 60ms; }
.sd-menu:not([hidden]) .sd-menu__nav > :nth-child(3) { animation-delay: 120ms; }
.sd-menu:not([hidden]) .sd-menu__nav > :nth-child(4) { animation-delay: 180ms; }
.sd-menu:not([hidden]) .sd-menu__nav > :nth-child(5) { animation-delay: 240ms; }
.sd-menu:not([hidden]) .sd-menu__nav > :nth-child(n+6) { animation-delay: 300ms; }

@keyframes sd-menu-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* メニュー表示中は背面をスクロールさせない */
body.sd-menu-open {
  overflow: hidden;
}

/* ---- ナビ切替: 1024px 未満はメニューボタン、CTA はパネルへ ---- */
@media (max-width: 1023.98px) {
  .sd-nav,
  .sd-header__cta {
    display: none;
  }

  .sd-menu-btn {
    display: inline-flex;
  }

  .sd-header__inner {
    padding: 0 var(--space-2) 0 var(--space-4);
  }
}

@media (max-width: 767.98px) {
  :root {
    --header-h: 4.25rem;
  }

  .sd-header {
    padding-top: var(--space-2);
  }

  .sd-brand img {
    height: 2.25rem;
  }
}

/* ---- やわらかいヘッダー（body.sd-friendly: やさしいサイト診断・SITE ALERT） ----
 * マスコットの顔を添え、枠と現在地を淡緑で丸く見せる。他のページは従来どおり。 */
.sd-brand__mascot,
.sd-brand__name {
  display: none;
}

.sd-friendly .sd-brand {
  gap: var(--space-2);
}

.sd-friendly .sd-brand .sd-brand__mascot {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  padding: 2px;
  object-fit: cover;
  object-position: center 70%;
  background: var(--color-brand-green-light);
  border: 2px solid var(--color-brand-green-line);
  border-radius: var(--radius-full);
  transform-origin: 50% 90%;
}

/* SITE DESK のロゴの代わりに、サービス名を文字で出す */
.sd-friendly .sd-brand .sd-brand__logo {
  display: none;
}

.sd-friendly .sd-brand__name {
  display: block;
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  white-space: nowrap;
}

.sd-friendly .sd-brand:hover .sd-brand__mascot {
  animation: sd-mascot-wiggle 0.6s var(--ease-out);
}

@keyframes sd-mascot-wiggle {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-10deg); }
  60% { transform: rotate(6deg); }
}

.sd-friendly .sd-header__inner {
  background: rgb(255 255 255 / 0.9);
  border: 2px solid var(--color-brand-green-line);
  box-shadow: 0 4px 16px rgb(6 199 85 / 0.08);
}

.sd-friendly .sd-header.is-scrolled .sd-header__inner {
  background: rgb(255 255 255 / 0.95);
  box-shadow: 0 8px 24px rgb(6 199 85 / 0.14);
}

.sd-friendly .sd-nav__link:hover {
  background: var(--color-brand-green-light);
}

.sd-friendly .sd-nav__link[aria-current="page"] {
  background: var(--color-brand-green-light);
  box-shadow: inset 0 0 0 1px var(--color-brand-green-line);
}

.sd-friendly .sd-nav__link[aria-current="page"]::after {
  content: none;
}

.sd-friendly .sd-menu-btn {
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--color-brand-green-dark);
}

.sd-friendly .sd-header__cta {
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.sd-friendly .sd-header__cta:hover {
  transform: translateY(-2px);
}

@media (max-width: 767.98px) {
  .sd-friendly .sd-brand .sd-brand__mascot {
    width: 2.25rem;
    height: 2.25rem;
  }

  .sd-friendly .sd-brand__name {
    font-size: var(--text-base);
  }

  .sd-friendly .sd-header__inner {
    gap: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-friendly .sd-brand:hover .sd-brand__mascot {
    animation: none;
  }

  .sd-friendly .sd-header__cta:hover {
    transform: none;
  }
}

/* ---- フッター ---- */
.sd-footer {
  background: var(--color-brand-navy);
  color: var(--color-text-inverse);
}

.sd-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-12);
  padding: var(--space-20) var(--gutter) var(--space-16);
}

.sd-footer__logo {
  display: inline-block;
}

.sd-footer__logo img {
  height: 3rem;
  width: auto;
  margin-block: -0.5rem;
}

.sd-footer__tagline {
  margin-top: var(--space-5);
  max-width: 24rem;
  font-size: var(--text-sm);
  color: var(--color-text-inverse-muted);
}

.sd-footer__co {
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-text-inverse-muted);
}

.sd-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sd-footer__heading {
  margin-bottom: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  color: var(--color-text-inverse-muted);
}

.sd-footer__col a {
  width: fit-content;
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  text-decoration: none;
}

.sd-footer__col a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sd-footer__col a:focus-visible,
.sd-footer__logo:focus-visible {
  outline-color: var(--color-brand-green);
}

.sd-footer__bottom {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding: var(--space-6) var(--gutter) var(--space-8);
  font-size: var(--text-xs);
  color: var(--color-text-inverse-muted);
}

@media (max-width: 767.98px) {
  .sd-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10) var(--space-6);
    padding: var(--space-16) var(--gutter) var(--space-12);
  }

  .sd-footer__brand {
    grid-column: 1 / -1;
  }
}