/* assets/css/footer.css
   Mobile-first footer styles
   - Add after variables.css, base.css, layout.css
*/

/* Footer color variables (override in variables.css if必要) */
:root{
  --footer-bg: #0b0b0b;
  --footer-ink: #ffffff;
  --footer-muted: #cfcfcf;
  --footer-accent: #e6f0ff;
  --footer-icon-size: 40px;
  --footer-icon-touch: 48px; /* タップ領域 */
  --footer-gap: 16px;
}

/* Base footer */
.site-footer{
  background: var(--footer-bg);
  color: var(--footer-ink);
  font-size: 14px;
  line-height: 1.6;
  position: relative; /* 親コンテナを基準にする */
  padding: 28px 0 56px; /* 下部にコピーライト分の余白を確保（必要に応じて調整） */
}

/* Inner container follows existing .site-footer__inner sizing */
.site-footer__inner{
  display:flex;
  flex-direction:column;
  gap: var(--footer-gap);
  align-items:flex-start;
  width:90%;
  margin:0 auto;
  padding:0 16px;
}

/* Left column: nav + company info */
.site-footer__left{
  width:100%;
}

/* Footer navigation */
.site-footer__nav-list {
  display: flex;
  flex-direction: column;      /* 縦並び */
  gap: 10px;                    /* リンク間の間隔 */
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 0;
}

.site-footer__nav-list a {
  font-size: 1.05rem;
  word-break: keep-all;
  display: block;
  width: 100%;
  border-radius: 6px;
  color: var(--footer-ink);
  background: transparent;
  font-weight: 500;
}

.site-footer__nav-list a:focus,
.site-footer__nav-list a:hover{
  color:var(--footer-accent);
  text-decoration:underline;
}

/* Subnav (privacy / sitemap) */
.site-footer__subnav{
  display:flex;
  gap:12px;
  margin:8px 0 0px;
  flex-wrap:wrap;
}
.site-footer__subnav a{
  color:var(--footer-muted);
  font-size:0.9rem;
}

/* Company name and address */
.site-footer__logo{
  font-weight:700;
  font-size:1rem;
  margin:16px 0 16px;
  color:var(--footer-ink);
}
.site-footer__address{
  font-style:normal;
  color:var(--footer-muted);
  font-size:0.92rem;
  margin:0;
  line-height: 1;
}
.site-footer__postal,
.site-footer__addr-line{display:block}

/* Contact row: TEL / FAX on same line on mobile (wrap if needed) */
.site-footer__contact-row{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:8px;
}
.site-footer__tel a,
.site-footer__tel,
.site-footer__fax{
  color:var(--footer-ink);
  font-weight:500;
  font-size:0.95rem;
}

/* Right column: SNS icons */
.site-footer__right{
  width:100%;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin-top:8px;
}
.site-footer__sns{
  display:flex;
  gap:12px;
  align-items:center;
}

/* Icon link common */
.site-footer__sns-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--footer-icon-touch);
  height:var(--footer-icon-touch);
  border-radius:8px;
  background:transparent;
  color:var(--footer-ink);
  text-decoration:none;
  transition:background .12s, transform .08s;
  -webkit-tap-highlight-color: transparent;
}

/* SVG icons sizing */
.site-footer__sns-link svg{
  width:var(--footer-icon-size);
  height:var(--footer-icon-size);
  display:block;
  fill:var(--footer-ink);
}

/* LINE thumbnail */
.site-footer__line-thumb{
  width:var(--footer-icon-size);
  height:var(--footer-icon-size);
  object-fit:cover;
  border-radius:0px;
  display:block;
}

/* Hover / focus states for icons */
.site-footer__sns-link:hover,
.site-footer__sns-link:focus{
  background:rgba(255,255,255,0.04);
  transform:translateY(-2px);
  outline: none;
}
.site-footer__sns-link:focus{
  box-shadow:0 0 0 3px rgba(0,119,204,0.18);
  border-radius:8px;
}

/* Ensure large tap target even if icon image smaller */
.site-footer__sns-link > img,
.site-footer__sns-link > svg{
  pointer-events:none;
}

/* Bottom copyright area fixed to viewport bottom and centered */
.site-footer__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(11,11,11,0) 0%, rgba(11,11,11,0.04) 40%, rgba(11,11,11,0.08) 100%);
  z-index: 10;
}

/* Copyright text */
.site-footer__copy{
  color:var(--footer-muted);
  font-size:0.9rem;
  margin:0;
  text-align:center;
}

/* Accessibility: ensure footer links are reachable and visible on focus */
.site-footer a:focus{
  outline-offset:3px;
}

/* 画像の基本スタイル */
.site-footer__putiwars a {
  display: inline-block;
  width: 100%;
  max-width: 200px; /* デスクトップでの最大幅（調整可） */
}

.site-footer__putiwars img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 右カラムを縦積みにして、SNSは横並び、プロモは下段に配置 */
.site-footer__right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
  align-items: flex-start; /* ← 左揃えにする重要ポイント */
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* SNSアイコンは横並びのまま */
.site-footer__sns {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
}

/* プロモ画像は下段で幅を制御 */
.site-footer__putiwars {
  width: 100%;
  display: flex;
  justify-content: flex-start; /* モバイルは中央寄せ */
  margin-top: 0;
}




/* Desktop / larger screens: two-column layout */
@media (min-width: 950px){
  .site-footer__inner{
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    gap:32px;
  }
  .site-footer__left{
    width:65%;
  }
  .site-footer__right{
    width:30%;
    justify-content:flex-end;
    align-items:flex-start;
    margin-top:0;
  }
  .site-footer__nav-list {
    flex-direction: row;
    gap: 18px;
    align-items: center;
  }
  .site-footer__nav-list a {
    padding: 6px 0px;
    width: auto;
    background: transparent;
    border-top: none;
    box-shadow: none;
  }

  .site-footer__subnav{margin-top:6px}
  .site-footer__contact-row{justify-content:flex-start}
  .site-footer__logo{font-size:1.1rem}

  .site-footer__promo {
    justify-content: flex-end;
  }

}

/* Larger desktop tweaks */
@media (min-width: 1024px){
  .site-footer{padding:40px 0 84px}
  .site-footer__inner{gap:40px}
  .site-footer__left{width:60%}
  .site-footer__right{width:35%}
  :root{--footer-icon-size:44px;--footer-icon-touch:56px}
}

/* Edge cases: ensure fixed copyright doesn't overlap important content
   If page has a bottom sticky element, add body padding-bottom equal to .site-footer__bottom height */
html body{
  padding-bottom:80px; /* adjust if you change .site-footer__bottom padding */
}