/* =========================================
   FOOTER
========================================= */

.p-footer{
  background:#000;
  color:#fff;
}


/* =========================================
   CATCH COPY
========================================= */

.p-footer__catch{
  background:#f2f2f2;
  text-align:center;

  /* 薄い帯 */
  padding-block:clamp(0.5rem,1vw,0.8rem);
}

.p-footer__catch-text{
  font-family:var(--m-font-serif);
  font-weight:var(--m-fw-regular);

  /* base.cssの黒 */
  color:var(--color-black);

  font-size:clamp(1.2rem,1.8vw,1.5rem);
  letter-spacing:0.18em;

  margin:0;
}


/* =========================================
   MAIN
========================================= */

.p-footer__main{
  padding-block:clamp(4rem,7vw,6rem);
}


/* grid */

.p-footer__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(2rem,4vw,4rem);
}


/* =========================================
   COLUMN
========================================= */

.p-footer__title{
  font-size:0.95rem;
  margin-bottom:1rem;
  font-weight:var(--m-fw-semibold);
}


/* list */

.p-footer__list{
  list-style:none;
  padding:0;
  margin:0;
}

.p-footer__list li{
  margin-bottom:0.6rem;
}


/* link */

.p-footer__list a{
  color:#fff;
  text-decoration:none;
  font-size:0.9rem;

  opacity:0.9;
  transition:opacity .2s ease;
}

.p-footer__list a:hover{
  opacity:0.6;
}


/* =========================================
   BOTTOM BORDER
========================================= */

.p-footer__bottom{
  border-top:2px solid #333;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width:767px){

  .p-footer__grid{
    grid-template-columns:repeat(2,1fr);
    gap:2rem;
  }

}