@import url('reset.min.css');
@import url('base.css');
@import url('header.css');
@import url('footer.css');


/* global */
:where(h1, h2, h3, h4, h5, h6) .subtitle {
  font-family: var(--font-en);
  color: var(--color-subtitle);
}

.strong{
  font-weight: 700;
}

/* フッターCTA */
.section-cta-footer{
  width: 100%;
  padding-inline: 20px;
  padding-block: 64px;
}
.container-cta-footer{
  container: cta-footer / inline-size;
}
.block-cta-footer{
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  background-image: url(/assets/images/cta-footer-sp.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-inline: 20px;
  padding-block: 64px;
  border-radius: 40px;
  aspect-ratio: 335/512;
  height: auto;
}

.block-cta-footer .section__header{
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}
.block-cta__text {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}
.block-cta__button {
  margin-block: auto 0;
}
.block-cta__button a.button{
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: 9999px;
  padding-block: 0.5em;
  padding-inline: 0.5em 1.5em;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: background-color 0.3s ease;
  text-align: center;
  font-size: 16px;
  max-width: 320px;
  margin-inline: auto;
}
.block-cta__button a.button::before{
  content: '';
  width: 40px;
  height: 40px;
  display: inline-block;
  background-image: url('data:image/svg+xml,<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 2.5C15.5 1.675 14.825 1 14 1H2C1.175 1 0.5 1.675 0.5 2.5M15.5 2.5V11.5C15.5 12.325 14.825 13 14 13H2C1.175 13 0.5 12.325 0.5 11.5V2.5M15.5 2.5L8 7.75L0.5 2.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: 24px auto;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  background-color: rgb(255 255 255 / 0.3);
  border-radius: 9999px;
}
@container cta-footer (min-width: 375px){
  .block-cta-footer{
    max-height: 512px;
    background-image: url(/assets/images/cta-footer.webp);
    width: 100%;
  }
}
@container cta-footer (min-width: 850px){
  .block-cta-footer{
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: auto auto;
    background-image: url(/assets/images/cta-footer.webp);
    aspect-ratio: 1200/296;
    height: auto;
    justify-content: space-evenly;
    align-items: center;
  }

  .block-cta-footer .section__header{
    row-gap: 16px;
  }
  .block-cta-footer .section__header h2 {
    font-size: 40px;
    font-weight: 500;
  }
  .block-cta__button {
    margin-block: auto;
  }
  .block-cta__button a.button{
    width: 320px;
  }
}


@media (any-hover: hover) {
  .block-cta__button a.button:hover {
    background-color: var(--color-primary-200);
    color: var(--color-on-primary);
  }
}