@use "sass:map";
@use "global/acms-common" as acms;
@use "global/common" as global;

/* ------------------------------
　　セクション
------------------------------ */
.section-pt {
  padding-top: var(--section-space-y);
}

.section-pb {
  padding-bottom: var(--section-space-y);
}

.section-mb {
  margin-bottom: var(--section-space-y);
}

.section-bg-color {
  background-color: var(--color-gray10);
}

/* 水平方向の見出し */
.section-horizontal-header {
  margin: 0 0 1.5rem;
  word-break: break-all;
}

.section-horizontal-header-inner {
  position: relative;
}

.section-horizontal-heading {
  margin: 0;
  font-size: map.get(global.$font-scales, heading-l);
  line-height: var(--line-height-xs);
  color: var(--color-text);
}

.section-horizontal-heading-side {
  margin: 0;
  font-size: map.get(global.$font-scales, body-s);
  font-weight: bold;
  line-height: var(--line-height-base);
  color: var(--color-text-2nd);

  .js .js-animation & {
    opacity: 0;
    will-change: transform, opacity;
  }

  .js .js-animation.is-show & {
    animation: fade-in 0.2s 0.5s 1 both;
  }
}

.section-horizontal-lead {
  margin: 0 0 1em;
  font-size: map.get(global.$font-scales, heading-s);
  font-weight: bold;
  line-height: var(--line-height-md);
  color: var(--color-text-2nd);
}

.section-horizontal-text {
  p {
    font-size: map.get(global.$font-scales, body-m);
    color: var(--color-text-2nd);
  }

  a {
    text-decoration: none;
    border-bottom: var(--border-width-sm) dotted currentcolor;

    &,
    &:link,
    &:visited {
      color: inherit;
    }

    @media (hover: hover) {
      &:any-link:hover {
        border-bottom-color: transparent;
      }
    }
  }
}

.section-horizontal-footer {
  margin: 2.5rem 0 0;
}

@include acms.media-breakpoint-up(lg) {
  .section-horizontal {
    display: flex;
    gap: 3.5rem;
  }

  .section-horizontal-header {
    width: 30%;
    min-width: 240px;
    word-break: break-all;
  }

  .section-horizontal-header-inner {
    padding: 0 1.25rem 1.5rem 0;
  }

  .section-horizontal-heading {
    font-size: map.get(global.$font-scales, heading-2xl);
    line-height: var(--line-height-2xs);
  }

  .section-horizontal-lead {
    font-size: map.get(global.$font-scales, heading-m);
    line-height: var(--line-height-sm);
  }

  .section-horizontal-text p {
    font-size: map.get(global.$font-scales, body-m);
  }

  .section-horizontal-main {
    width: 70%;
  }

  .section-horizontal-footer {
    margin: 5rem 0 0;
  }
}

/* 垂直方向の見出し */
.section-vertical-header {
  position: relative;
  margin: 0 0 4rem;
  text-align: center;
  word-break: break-all;

  &::after {
    position: absolute;
    right: 0;
    bottom: -2rem;
    left: 0;
    width: 1px;
    height: 1.5rem;
    margin: 0 auto;
    content: "";
    background: var(--color-gray30);
  }

  .js .js-animation & {
    &::after {
      transform: scaleY(0);
      transform-origin: top;
      transition: 0.2s ease-out 0.5s;
      will-change: transform, opacity;
    }
  }

  .js .js-animation.is-show & {
    &::after {
      transform: scaleY(1);
    }
  }
}

.section-vertical-heading {
  margin: 0;
  font-size: map.get(global.$font-scales, heading-l);
  line-height: var(--line-height-xs);
  color: var(--color-text);
}

.section-vertical-text {
  margin: 0;
  font-size: map.get(global.$font-scales, body-s);
  font-weight: bold;
  line-height: var(--line-height-base);
  color: var(--color-text-2nd);

  .js-animation & {
    opacity: 0;
    will-change: transform, opacity;
  }

  .js-animation.is-show & {
    animation: fade-in 0.2s 0.5s 1 both;
  }
}

@include acms.media-breakpoint-up(lg) {
  .section-vertical-header {
    margin: 0 0 4.5rem;

    &::after {
      bottom: -2.5rem;
      height: 1.5rem;
    }
  }

  .section-vertical-heading {
    font-size: map.get(global.$font-scales, heading-2xl);
    line-height: var(--line-height-2xs);
  }
}

/* 視覚的なセパレーター */
.section-separator {
  width: calc(100% - calc(env(safe-area-inset-right) + var(--container-space-x)) * 2);
  max-width: calc(var(--container) - var(--gutter-md) * 3);
  margin: 0 auto;
  border: 0;
  border-top: var(--border-width-sm) solid var(--color-gray30);
}

/* 一覧下のコンテンツ */
.section-panel {
  margin-block-start: 3rem;

  @include acms.media-breakpoint-up(md) {
    margin-block-start: 4rem;
  }
}
