@charset "UTF-8";

@font-face {
  font-family:"Noto Sans JP Footer";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../font/noto-sans-jp-footer.ttf') format('truetype');
}

/* 参考サイトのフッターに準拠。
   本文のルート文字サイズは変更せず、参考サイトのremをこの範囲で換算する。 */
.reference-footer {
  --footer-rem:10px;
  background:#d7dfdf;
  color:#252723;
  font-family:"Noto Sans JP",sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1.3;
}

.reference-footer a {
  color:#252723;
  text-decoration:none;
  transition:opacity .3s;
}

.reference-footer a:hover {
  opacity:.8;
}

.reference-footer img {
  display:inline;
  max-width:100%;
  height:auto;
  vertical-align:bottom;
}

.footer-inner {
  max-width:clamp(100px,69.4vw,1000px);
  margin:0 auto;
  display:flex;
  flex-direction:row-reverse;
  justify-content:space-between;
  align-items:center;
  position:relative;
}

.footer-share {
  display:flex;
  align-items:center;
  gap:clamp(2px,1vw,15px);
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  list-style:none;
  margin:0;
  padding:0;
}

.footer-share>li {
  width:clamp(6px,3.9vw,56px);
}

.footer-akahata {
  display:flex;
  align-items:center;
  gap:clamp(3px,2.1vw,30px);
  padding:clamp(1px,1vw,14px) 0 clamp(1px,.6vw,8px);
}

.footer-logo {
  text-align:center;
}

.footer-logo img {
  width:clamp(15px,10.3vw,148px);
}

.footer-logo p {
  font-family:"Noto Sans JP Footer","Noto Sans JP",sans-serif;
  font-size:clamp(0px,.9vw,13px);
  font-weight:300;
  margin-top:clamp(1px,.3vw,5px);
}

@media (max-width:767px) {
  .reference-footer {
    --footer-rem:2.6666666667vw;
    font-size:calc(var(--footer-rem) * 1.6);
  }

  .footer-inner {
    max-width:none;
    display:block;
    padding:calc(var(--footer-rem) * 1.5) calc(var(--footer-rem) * 2) calc(var(--footer-rem) * 10);
  }

  .footer-share {
    position:static;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:calc(var(--footer-rem) * 1.2) calc(var(--footer-rem) * 2);
    width:fit-content;
    margin:0 auto;
    transform:none;
  }

  .footer-share>li {
    width:calc(var(--footer-rem) * 5.6);
  }

  .footer-akahata {
    display:block;
    padding:0;
    margin-bottom:calc(var(--footer-rem) * 3.5);
  }

  .footer-logo {
    margin-bottom:var(--footer-rem);
  }

  .footer-logo img {
    width:calc(var(--footer-rem) * 14.5);
  }

  .footer-logo p {
    font-size:calc(var(--footer-rem) * 1.3);
    margin-top:calc(var(--footer-rem) * .5);
  }
}

@media (prefers-reduced-motion:reduce) {
  .reference-footer a {
    transition:none;
  }
}