@charset "UTF-8";
/* ==========================================================
 * ブランドサイト共通 ヘッダー（.tf-header）／フッター（.tf-footer）
 * 各ブランドページの既存CSSの影響を受けないよう、この2ブロック内で初期化する
 * ========================================================== */
.tf-header,
.tf-footer {
  position: relative;
  float: none;
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.6;
  letter-spacing: normal;
  text-align: left;
}
:is(.tf-header, .tf-footer) *,
:is(.tf-header, .tf-footer) *::before,
:is(.tf-header, .tf-footer) *::after { box-sizing: border-box; }
:is(.tf-header, .tf-footer) :is(ul, li, p) { margin: 0; padding: 0; list-style: none; }
:is(.tf-header, .tf-footer) img { max-width: none; }

/* ---------- ヘッダー ---------- */
.tf-header { z-index: 10; background: #fff; }
.tf-header__inner { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; height: 64px; padding: 0 40px; }
.tf-header__logo { display: block; width: 187px; height: 45px; }
.tf-header__logo--tafrontier { display: none; width: 127px; height: 44px; }
/* 樹脂・化学品のページ(TAフロンティア製品)はTAフロンティアロゴに切り替え */
.tf-header--tafrontier .tf-header__teijin { display: none; }
.tf-header--tafrontier .tf-header__logo--tafrontier { display: block; }
.tf-header__nav { display: grid; grid-auto-flow: column; align-items: center; gap: 32px; }
.tf-header__link { display: inline-grid; grid-auto-flow: column; align-items: center; gap: 8px; color: #333; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.tf-header__link:is(:link, :visited, :hover, :focus, :active) { color: #333; }
.tf-header__link svg { display: block; width: 34px; height: 22px; }
.tf-header__link:hover { text-decoration: underline; }
.tf-header__link:focus-visible { outline: 2px solid #005bac; outline-offset: 3px; }

/* ---------- フッター ---------- */
.tf-footer { background: #000; color: #fff; }
.tf-footer__inner { padding: 38px 40px 40px; }
.tf-footer__logo { display: block; width: 217px; height: auto; }
.tf-footer__bottom { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-top: 26px; }
.tf-footer__links { display: flex; flex-wrap: wrap; align-items: center; font-size: 12px; line-height: 1.6; }
.tf-footer__links li { position: relative; }
.tf-footer__links li + li { margin-left: 24px; padding-left: 25px; }
.tf-footer__links li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 11px; background: #fff; translate: 0 -50%; }
.tf-footer__links a { color: #fff; text-decoration: none; }
.tf-footer__links a:is(:link, :visited, :hover, :focus, :active) { color: #fff; }
.tf-footer__links a:hover { text-decoration: underline; }
.tf-footer__links a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tf-footer__links a.is-external::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M2.5 2.5V.5h7v7h-2'/%3E%3Crect x='.5' y='2.5' width='7' height='7'/%3E%3C/svg%3E") center / contain no-repeat; }
.tf-footer__copy { color: #fff; font-size: 11px; letter-spacing: .05em; white-space: nowrap; }

/* ページ専用のハンバーガーメニュー(右上固定・48px)があるページ用 */
@media (max-width: 768px) {
  .tf-header--has-menu .tf-header__inner { padding-right: 68px; }
}
@media (max-width: 599px) {
  .tf-header__inner { height: 56px; padding: 0 20px; }
  .tf-header__logo { width: 126px; height: 30px; }
  .tf-header__logo--tafrontier { width: 98px; height: 34px; }
  .tf-header__nav { gap: 20px; }
  .tf-header__link span { display: none; }
  .tf-footer__inner { padding: 32px 20px 28px; }
  .tf-footer__logo { width: 190px; }
  .tf-footer__bottom { flex-direction: column; align-items: flex-start; margin-top: 22px; }
  .tf-footer__links { gap: 8px 22px; }
  .tf-footer__links li + li { margin-left: 0; padding-left: 0; }
  .tf-footer__links li + li::before { display: none; }
  .tf-footer__copy { white-space: normal; font-size: 10px; }
}