@charset "UTF-8";
.footer__inner{
  position: relative;
  z-index: 1;
  display:grid; 
  gap: var(--ft-gap);
  grid-template-columns: 1.4fr 1.1fr;
  padding-top: clamp(16px, 3vw, 36px);
  padding-bottom: clamp(8px, 2vw, 24px);
}
@media (max-width: 1024px){
  .footer__inner{ grid-template-columns: 1fr; }
}

.site-footer{
  background:#F62837; color:#fff;
  --ft-gap: clamp(16px, 2vw, 24px);
  --ft-pad: clamp(18px, 3vw, 28px);
}
.site-footer{
  position: relative;  
  overflow: hidden;   
  background:#F62837; 
  color:#fff;

  --ft-gap: clamp(16px, 2vw, 24px);
  --ft-pad: clamp(18px, 3vw, 28px);
}

/* 上段：2カラム（左=会社情報、右=リンク群） */
.footer__inner{
  display:grid; gap: var(--ft-gap);
grid-template-columns: 1.4fr 1.1fr;
padding-top: clamp(16px, 3vw, 36px);
padding-bottom: clamp(8px, 2vw, 24px);
}
@media (max-width: 1024px){
  .footer__inner{ grid-template-columns: 1fr; }
}
.footer__inner {
  padding-left: 0;
  padding-right: 0;
}

.footer__logo{
  width: 270px; height:auto; display:block; margin-bottom: 12px;
  filter: brightness(0) invert(1);
}
.footer__company h4{
  font-size: 16px; margin: 0 0 6px; font-weight:700;
}

.footer__company p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;  
  max-width: 420px;
  padding-inline: 4px;    
}
.footer__offices{ display:grid; gap: 10px 24px; grid-template-columns: 1fr 1fr; }
@media (max-width:768px){ .footer__offices{ grid-template-columns: 1fr; } }

.footer__brands{ display:flex; gap:14px; margin:14px 0 8px; flex-wrap:wrap; }
.footer__brands a{ color:#fff; font-weight:700; font-size:14px; opacity:.9; }
.footer__brands a:hover{ opacity:1; text-decoration:underline; }

.footer__sns{ display:flex; gap:12px; align-items:center; }
.footer__sns img{ width:22px; height:22px; display:block; filter: brightness(0) invert(1); opacity:.9; }
.footer__sns img:hover{ opacity:1; }

/*ISO認証*/
.footer__cert {
  margin-top: 20px;
  text-align: left;
  color: #fff;   /* フッター背景が黒系なら白文字 */
  font-size: 13px;
  line-height: 1.6;
}

.footer__cert-top {
  margin-bottom: 6px;
  font-weight: 600;
}

.footer__cert img {
  max-width: 80px; /* 画像サイズ調整 */
  height: auto;
  display: block;
  margin: 0;
}

.footer__cert-bottom {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.9;
}

/* 右：リンク列 */
.footer__nav {
  display: grid;
  gap: 8px 20px;
  grid-template-columns: repeat(4, auto); 
  justify-content: start;                
  padding-inline: 0;                      
}
.footer__nav {
  justify-self: start;
  padding: 0; 
margin-left: -60px;
}
.footer__nav a {
  margin: 0;
}

@media (max-width: 1024px){
  .footer__nav{ grid-template-columns: repeat(2, 1fr); } /* タブレット */
}
@media (max-width: 768px){
  .footer__nav{ 
	  grid-template-columns: 1fr;
    margin-left: 0;
    width: 100%; 
	}
}
.footer__col {
  margin: 0;
  padding: 0 10px;
}
.footer__col h5{
  margin: 0 0 10px; font-size:16px; font-weight:700;
}
.footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.footer__col a{
  color:#fff; font-size:14px; text-decoration:none; opacity:.9;
  transition: opacity .2s ease, text-decoration-color .2s ease;
}
.footer__col a:hover{ opacity:1; text-decoration: underline; text-underline-offset: 3px; }

.footer__inner {
  grid-template-columns: auto 1fr;
  gap: 0;
}
.footer__nav {
  justify-self: start;
}

@media (max-width: 768px){
  .footer__layout,
  .footer,
  .footer-inner{
    display: block !important; 
  }
  .footer__company{
    order: 1 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    float: none !important;
  }

  .footer__nav{
    order: 2 !important;              
    grid-column: 1 / -1 !important; 
    width: 100% !important;
    margin-left: 0 !important;      
    justify-self: stretch !important;
    float: none !important;           
    display: grid !important;       
    grid-template-columns: 1fr !important;
  }
}
/* SPのみアコーディオン化 */
@media (max-width: 768px){
  .footer__nav .footer__col h5{
    position: relative;
    padding-right: 28px;     /* 右アイコン分の余白 */
    cursor: pointer;
  }
  .footer__nav .footer__col h5::after{
    content: "+";
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    font-weight: 900;
    font-size: 18px;
    color: #F62837;          /* ご指定の赤に */
  }
  .footer__nav .footer__col h5[aria-expanded="true"]::after{
    content: "−";
  }

  /* SPでは初期状態で閉じる */
  .footer__nav .footer__col ul{
    display: none;
    margin: 0 0 8px 0;
    padding-left: 0;
    list-style: none;
  }
}

/* PCは常時展開（既存の見た目のまま） */
@media (min-width: 769px){
  .footer__nav .footer__col ul{ display: block; }
}

/* 変数：必要ならあとで上書き可 */
:root{
  --footer-acc-icon-color: #fff; /* SPの＋/−の色（赤背景でも見える白） */
}

@media (max-width: 768px){
  .footer__nav .footer__col h5{
    position: relative;
    padding-right: 28px;      /* 右アイコンぶんの余白 */
    cursor: pointer;
    color: inherit;           /* 既存の色を維持（黒固定しない） */
    user-select: none;
  }
  /* 右側の＋/−（SPのみ表示） */
  .footer__nav .footer__col h5::after{
    content: "+";
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    font-weight: 900;
    font-size: 18px;
    color: var(--footer-acc-icon-color);
  }
  .footer__nav .footer__col h5[aria-expanded="true"]::after{
    content: "−";
  }
  .footer__nav .footer__col ul{
    display: none;
    margin: 0 0 8px 0;
    padding-left: 0;
    list-style: none;
  }
  .footer__nav .footer__col ul.is-open{
    display: block;
  }
}

/* ===== PCは常時展開・見た目そのまま ===== */
@media (min-width: 769px){
  .footer__nav .footer__col h5{ cursor: default; }
  .footer__nav .footer__col h5::after{ content: ""; } /* アイコン非表示 */
  .footer__nav .footer__col ul{ display: block; }      /* 常時展開 */
}


/* 下段ボトム */
.footer__bottom{
  position: relative;
  background: rgba(0,0,0,.04);
}
.footer__bottom__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px; padding: var(--ft-pad) 0;
}
@media (max-width: 768px){
  .footer__bottom__inner{ flex-direction: column; align-items:flex-start; gap:10px; }
}
.footer__legal{ display:flex; flex-wrap:wrap; gap: 14px 18px; margin:0; padding:0; list-style:none; }
.footer__legal a{ color:#fff; font-size:13px; opacity:.9; text-decoration:none; }
.footer__legal a:hover{ opacity:1; text-decoration:underline; }
.footer__copy{ opacity:.9; }

/* ページトップボタン（右下固定） */
.pagetop {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #fff;
  border: 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .2s ease;
}

/* ホバー効果 */
.pagetop:hover {
  background: #fce9ea;
  transform: translateY(-2px);
}

.pagetop__icon {
  width: 20px;
  height: 20px;
  fill: #F62837; /* 矢印の色 */
  display: block;
}

@media (max-width: 768px){
  .pagetop {
    width: 44px;
    height: 44px;
    right: 14px;
    bottom: 14px;
  }
  .pagetop__icon {
    width: 18px;
    height: 18px;
  }
}