:root {
  --fz-3: 0.625rem;
  --fz-2: 0.75rem;
  --fz-1: 0.875rem;
  --fz0: clamp(1rem, 1rem + 0vw, 1rem);
  --fz1: clamp(1.125rem, 1.0708rem + 0.2312vw, 1.25rem);
  --fz2: clamp(1.2656rem, 1.1369rem + 0.5491vw, 1.5625rem);
  --fz3: clamp(1.4238rem, 1.1944rem + 0.979vw, 1.9531rem);
  --fz4: clamp(1.6018rem, 1.2378rem + 1.553vw, 2.4414rem);
  --fz5: clamp(1.802rem, 1.2602rem + 2.3116vw, 3.0518rem);
  --fz6: clamp(2.0273rem, 1.2524rem + 3.3062vw, 3.8147rem);
  --fz7: clamp(2.2807rem, 1.2022rem + 4.6015vw, 4.7684rem);
  --fz8: clamp(2.5658rem, 1.0941rem + 6.2792vw, 5.9605rem);
}

@media screen and (max-width: 767px) {
  :root {
    --header-h: 60px ;
  }
}
@media screen and (min-width: 768px) {
  :root {
    --header-h: 80px ;
  }
}
@media screen and (min-width: 992px) {
  :root {
    --header-h: 100px ;
  }
}
/* =========================================================
 header
========================================================= */
.site-header {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  padding-right: 0;
}
@media screen and (max-width: 1199px) {
  .site-header {
    gap: 1px;
  }
}
@media screen and (min-width: 1200px) {
  .site-header {
    gap: 30px;
  }
}

.header-branding {
  margin-right: auto;
}

@media screen and (max-width: 413px) {
  .header-branding__logo img {
    height: 20px;
  }
}

.site-menu-btns {
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
}

.site-menu-btns__item {
  height: auto;
  aspect-ratio: 1/1;
}

.site-menu-btns__item i {
  line-height: 1;
}

@media screen and (max-width: 575px) {
  .site-menu-btns__item span {
    font-size: var(--fz-3);
  }
}

.l-header-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  gap: 1px;
}
.l-header-action li {
  height: 100%;
  aspect-ratio: 1/1;
}
.l-header-action a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  aspect-ratio: 1/1;
  background: #ad0306;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .l-header-action a {
    gap: 2px;
  }
}
@media screen and (min-width: 768px) {
  .l-header-action a {
    gap: 5px;
  }
}
@media screen and (max-width: 767px) {
  .l-header-action i {
    font-size: 24px;
  }
}
@media screen and (min-width: 768px) {
  .l-header-action i {
    font-size: 30px;
  }
}
.l-header-action span {
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .l-header-action span {
    font-size: var(--fz-3);
  }
}
@media screen and (min-width: 768px) {
  .l-header-action span {
    font-size: var(--fz-2);
  }
}

/* =========================================================
 site
========================================================= */
@media screen and (min-width: 1200px) {
  .site-btn-action {
    display: none;
  }
}

/* =========================================================
 index
========================================================= */
.top-flow__list {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

@media screen and (min-width: 992px) {
  .top-flow__item {
    width: 20%;
  }
}

.top-flow__ttl {
  line-height: 1.3;
}

/* =========================================================
 flow
========================================================= */
.flow-list__img-fmt {
  width: 100px;
}