/*-------------------------------
---Headline
-------------------------------*/

.c-headline-icon {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: max-content;
  grid-row-gap: var(--mas--5);
  margin-bottom: var(--mas--60);
}

.c-headline-icon__body {
  display: block;
  font-size: calc((24 / var(--calc-font-size)) * var(--font-size) * 1px);
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

.c-headline-icon__icon {
  width: auto;
  height: calc((30 / var(--calc-font-size)) * var(--font-size) * 1px);
  margin-left: auto;
  margin-right: auto;
}

.c-headline-icon__icon:empty::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  background-image: url(../../image/common/signpost-logo_icon.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.c-headline-arrow {
  font-size: calc((18 / var(--calc-font-size)) * var(--font-size) * 1px);
  font-weight: 500;
}

.c-headline-arrow::before {
  content: '\f054';
  margin-right: var(--mas--5);
}


/*-------------------------------
---Button
-------------------------------*/

.c-button {
  text-align: center;
}

.c-button a {
  min-width: var(--mas--240);
  line-height: 1;
  padding: var(--mas--20) var(--mas--30);
}

.c-button--arrow a,
.c-button--return a {
  position: relative;
  border: 1px solid var(--black);
}

.c-button--arrow a::after,
.c-button--return a::after {
  content: '';
  position: absolute;
  top: calc(50% - 0.25em);
  display: inline-block;
  width: 1.25em;
  height: 0.25em;
  border-bottom: 1px solid var(--black);
  transition: var(--transition);
}

.c-button--arrow a::after {
  right: var(--mas--30);
  border-right: 1px solid var(--black);
  transform: skew(45deg);
}

.c-button--return a::after {
  left: var(--mas--30);
  border-left: 1px solid var(--black);
  transform: skew(-45deg);
}

@media (hover: hover) and (pointer: fine) {
  .c-button--arrow a::after,
  .c-button--return a::after {
    opacity: 0;
  }

  .c-button--arrow a:hover:after,
  .c-button--return a:hover::after {
    opacity: 1;
  }

  .c-button--arrow a:hover:after {
    right: var(--mas--20);
  }

  .c-button--return a:hover:after {
    left: var(--mas--20);
  }
}





/*-------------------------------
---Message
-------------------------------*/

.c-message {
  font-size: calc((18 / var(--calc-font-size)) * var(--font-size) * 1px);
  padding-top: 2em;
  padding-bottom: 2em;
}