/* ======================================================================
   Seitaro Arai — Unified Stylesheet
   Path: /in/css/footer.css
   Purpose: Sidebar (lightweight vertical nav) / Footer / Contact band / Page top
   Notes:
   - Breakpoints are consolidated at the bottom (1200 / 920 / 768).
   - Shorthandは使わず、ロングハンドで記述。
   ====================================================================== */


/* ======================================================================
   01) SIDE MENU — 軽量縦ナビ（profile.html準拠）
   - JS が .is-active を付与（スクロール連動）
   - ホバーは静かめ（色・影の最小限表現）
   ====================================================================== */

.sidebar {
  background-color: #f8f7f3;
  background-image: none;
  background-repeat: no-repeat;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto;

  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.sidemenu {
  /* Pill tokens for local styling */
  --sm-pill-bg: #f4f7ff;
  --sm-pill-border: rgba(13, 71, 161, 0.18);
  --sm-pill-text: #0b1020;
  --sm-pill-text-active: var(--blue);
  --sm-pill-bg-active: #eef4ff;
  --sm-shadow: 0 1px 0 rgba(15, 26, 43, 0.04) inset;
  --sm-focus: var(--blue-2);

  /* Box model */
  margin-top: 40px;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;

  padding-top: 15px;
  padding-right: 10px;
  padding-bottom: 25px;
  padding-left: 100px;

  overflow-x: hidden;
  overflow-y: hidden;
}

/* サイドメニュー内のグループ（ボタン群） */
.sidemenu__group {
  display: flex;
  flex-wrap: wrap;

  row-gap: 10px;
  column-gap: 12px;

  list-style-type: none;

  margin-top: 6px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;

  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* “タイトル”行：グループのラベル */
.sidemenu__title {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 6px;
  margin-left: 0;
}

.sidemenu__title a {
  font-weight: 900;
  color: var(--sm-pill-text-active);

  text-decoration-line: none;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: auto;

  padding-top: 4px;
  padding-right: 2px;
  padding-bottom: 4px;
  padding-left: 2px;
}

/* ピル型リンク（横並びボタン） */
.sidemenu__item a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  column-gap: 8px;
  row-gap: 0;

  padding-top: 10px;
  padding-right: 14px;
  padding-bottom: 10px;
  padding-left: 14px;

  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
  border-bottom-left-radius: 999px;

  background-color: var(--sm-pill-bg);
  background-image: none;
  color: var(--sm-pill-text);

  text-decoration-line: none;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: auto;

  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;

  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;

  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;

  border-top-color: var(--sm-pill-border);
  border-right-color: var(--sm-pill-border);
  border-bottom-color: var(--sm-pill-border);
  border-left-color: var(--sm-pill-border);

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 6px 16px rgba(13, 71, 161, 0.06);

  transition-property: background-color, transform, box-shadow, border-color, color;
  transition-duration: 0.18s;
  transition-timing-function: ease;
  transition-delay: 0s;

  will-change: transform;
  white-space: nowrap;
}

/* PC環境でのホバー演出（軽めの浮き上がり） */
@media (hover: hover) {
  .sidemenu__item a:hover {
    background-color: #eaf2ff;
    background-image: none;

    border-top-color: rgba(13, 71, 161, 0.28);
    border-right-color: rgba(13, 71, 161, 0.28);
    border-bottom-color: rgba(13, 71, 161, 0.28);
    border-left-color: rgba(13, 71, 161, 0.28);

    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
    transform: translateY(-1px);
    color: var(--sm-pill-text-active);
  }
}

/* 現在セクション（スクロール連動ハイライト） */
.sidemenu__item a[aria-current="section"],
.sidemenu__item a.is-active {
  background-color: var(--sm-pill-bg-active);
  background-image: none;
  color: var(--sm-pill-text-active);

  border-top-color: rgba(13, 71, 161, 0.32);
  border-right-color: rgba(13, 71, 161, 0.32);
  border-bottom-color: rgba(13, 71, 161, 0.32);
  border-left-color: rgba(13, 71, 161, 0.32);

  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
}

/* 現在ページ（トップのラベルに下線） */
.sidemenu__title a[aria-current="page"] {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: 0.2em;
}

/* キーボードフォーカスの可視化（アクセシビリティ） */
.sidemenu a:focus-visible {
  outline-width: 3px;
  outline-style: solid;
  outline-color: var(--sm-focus);
  outline-offset: 2px;
}

/* 低モーション設定の利用者向け：アニメーションを抑制 */
@media (prefers-reduced-motion: reduce) {
  .sidemenu__item a {
    transition-property: none !important;
    transition-duration: 0s !important;
    transform: none !important;
  }
}


/* ======================================================================
   02) FOOTER — フッター全体／ナビ／認証ロゴ
   ====================================================================== */

/* 認証ロゴ／バッジ群 */
.footer-cert {
  list-style-type: none;

  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;

  margin-top: 24px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  flex-wrap: wrap;

  column-gap: 40px;
  row-gap: 0;
}

.footer-cert img {
  max-height: 80px;
  width: auto;
  height: auto;

  object-fit: contain;

  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.footer-cert img:hover {
  transform: scale(1.05);
}


/* ======================================================================
   03) CONTACT BAND — サイト下部の問い合わせ帯
   ====================================================================== */

.contact-band {
  background-color: #000000;
  background-image: none;
  background-repeat: no-repeat;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto;

  color: #ffffff;

  padding-top: 48px;
  padding-right: 0;
  padding-bottom: 40px;
  padding-left: 0;
}

/* 見出しとメールボタンを横並びにするヘッダー部 */
.contact-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  column-gap: 16px;
  row-gap: 16px;
  flex-wrap: wrap;
}

/* タイトル横のサブコピー塊 */
.contact-head-left {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;

  column-gap: 16px;
  row-gap: 0;
}

/* 「まずはご相談ください」などのメインタイトル */
.contact-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1;

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  color: #ffffff;
}

/* タイトル横のサブタイトル */
.contact-sub {
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 800;
  line-height: 1.3;

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  opacity: 0.9;
}

/* 説明文（リード） */
.contact-lead {
  color: #d9d9d9;

  margin-top: 14px;
  margin-right: 0;
  margin-bottom: 24px;
  margin-left: 0;

  max-width: 800px;
}

/* CTA メールリンク（pill ボタン） */
.contact-mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  column-gap: 10px;
  row-gap: 0;

  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-left: 30px;

  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
  border-bottom-left-radius: 999px;

  background-color: var(--blue);
  background-image: none;
  color: #ffffff;

  font-weight: 800;
  line-height: 1;

  text-decoration-line: none;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: auto;

  white-space: nowrap;

  transition-property: background-color, transform;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.contact-mail:hover {
  transform: translateY(-1px);
}

/* 会社名＋住所のブロック */
.contact-company {
  display: grid;
  align-items: baseline;
  justify-items: start;

  row-gap: 8px;
  column-gap: 0;

  margin-top: 16px;
  margin-right: 0;
  margin-bottom: 10px;
  margin-left: 0;
}

.contact-logo {
  font-weight: 900;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  letter-spacing: 0.02em;

  white-space: nowrap;
}

.contact-addr {
  color: #d0d0d0;
  line-height: 1.7;
}

.contact-addr .corp {
  font-size: 0.85em;
  font-weight: 700;
}

/* プライバシーポリシー等のサブリンク群 */
.contact-links {
  list-style-type: none;

  margin-top: 20px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;

  display: flex;
  flex-wrap: wrap;

  row-gap: 10px;
  column-gap: 22px;

  color: #bbbbbb;
}

.contact-links a {
  color: #bbbbbb;

  text-decoration-line: none;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
}

.contact-links a:hover {
  color: var(--blue-2);
}


/* ======================================================================
   04) PAGE TOP — ページトップへ戻るボタン
   ====================================================================== */

.pagetop {
  position: fixed;
  top: auto;
  right: 36px;
  bottom: 100px;
  left: auto;

  z-index: 80;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  column-gap: 0;
  row-gap: 10px;

  color: #e6e6e6;

  text-decoration-line: none;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: auto;

  opacity: 0;
  pointer-events: none;

  transition-property: opacity;
  transition-duration: 0.25s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

/* PageTop の縦ライン部分 */
.pagetop .line {
  display: block;
  width: 2px;
  height: 50px;

  background-color: #e6e6e6;
  background-image: none;
  opacity: 0.8;
}

/* PageTop の「PAGE TOP」ラベル（縦書き） */
.pagetop .label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);

  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

/* JSで .show が付いたときのみ表示 */
.pagetop.show {
  opacity: 1;
  pointer-events: auto;
}

/* ホバー時の色変更 */
.pagetop:hover .line {
  background-color: var(--blue-2);
  background-image: none;
}

.pagetop:hover {
  color: var(--blue-2);
}


/* ======================================================================
   05) MEDIA QUERIES (Breakpoints consolidated bottom)
   - BP統一：1200 / 920 / 768
   - min-width ブレークポイントは使用しない方針
   ====================================================================== */

/* ----------------------------------------------------------------------
   < 1200px（必要に応じて PC 幅からの縮小調整を記述）
   ---------------------------------------------------------------------- */
@media (max-width: 1200px) {
  /* 現状、このブレークポイントでの特別な調整はなし */
}

/* ----------------------------------------------------------------------
   < 920px（タブレット幅：フッター1カラム化、サイドメニュー圧縮）
   ---------------------------------------------------------------------- */
@media (max-width: 920px) {
  /* サイドメニュー：左右の余白を圧縮し、オーバーフローを解除 */
  .sidemenu {
    padding-top: 10px;
    padding-right: 8px;
    padding-bottom: 10px;
    padding-left: 8px;

    overflow-x: visible;
    overflow-y: visible;

    -webkit-overflow-scrolling: touch;
  }

  /* SP/タブレット幅：2つ目のグループは“きつすぎない”詰め配置に */
  .sidemenu__group:nth-of-type(2) {
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 10px;

    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;

    overflow-x: visible;
    overflow-y: visible;
  }
}

/* ----------------------------------------------------------------------
   < 768px（スマホ幅：認証ロゴ縮小、PageTop位置調整、リンク間隔をモバイル向けに）
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* 認証ロゴを少し小さく */
  .footer-cert img {
    max-height: 44px;
    width: auto;
    height: auto;
  }

  /* PageTop の位置を少し内側へ */
  .pagetop {
    right: 24px;
    bottom: 110px;
  }

  /* サブリンクの間隔をモバイル向けに少し広めに保つ */
  .contact-links {
    row-gap: 10px;
    column-gap: 22px;
  }
}