/* =========================================================
  Footer
========================================================= */

/* フッター本体 */
footer {
  width: 100%;
  background: var(--color-lightblue);
}

/* ヘッダーバー（共通） */
footer ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

/* 共通リストアイテム */
footer ul li {
  display: flex;
  align-items: center;
  min-height: 22px;
  flex: 0 1 auto;
}

/* ロゴ（モバイル：小さめ） */
footer ul li.footerLogo {
  flex: 1 1 auto;         /* a のサイズに合わせる */
  min-width: auto;        /* ここは固定しない */
  background: none;       /* 背景は a に移動 */
  /* クリック範囲をロゴの箱に限定したいので relative 不要 */
}

/* a をロゴ画像の箱にする（高さだけ指定・幅は比率で自動） */
footer ul li.footerLogo a {
  --logo-h: 22px;                 /* ロゴ高さだけ指定 */
  display: block;                 /* a をブロックにしてサイズ指定可に */
  height: var(--logo-h);          /* 高さを変数で制御 */
  aspect-ratio: 171 / 52;         /* ロゴの比率を維持しつつ幅が決まる */
  background: url(/assets/images/common/co_logo_ap.png) no-repeat left center / contain;
  text-indent: -9999px;           /* テキストは非表示に */
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

footer ul li.footerLogo span {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

footer ul li.footerCopy{
	text-align:right;
}
footer ul li.footerCopy small{
	/*color:var(--color-gray);*/
	font-size:12px;
}

/* =========================================================
  ブレークポイント
========================================================= */

/* 360px未満でさらに詰める（超狭幅保険） */
@media (max-width: 359.98px) {
	footer ul li.footerLogo a {
		--logo-h: 20px;
	}
}

/* 640px〜：DL/お問い合わせを表示 */
@media (min-width: 640px) {
  footer ul {
    padding-block: 16px;
	}
	footer ul li.footerLogo a {
		--logo-h: 30px;
	}
}

/* 768px〜：DL/中間サイズ */
@media (min-width: 768px) {
  footer ul {
    padding-block: 18px;
	}
	footer ul li.footerLogo a {
		--logo-h: 40px;
	}
}

/* 960px〜：従来のサイズ感 */
@media (min-width: 960px) {
  footer ul {
    padding-block: 20px;
	}
	footer ul li.footerLogo a {
		--logo-h: 52px;
	}
}