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

/* ------------------------------
　　エントリー
------------------------------ */

/*
　ヘッダー
------------------------------ */
.entry-header {
  margin: 0 0 2rem;
}

.entry-header-info {
  margin: 0 0 0.25rem;
  color: global.$color-gray80;
  font-size: map.get(global.$font-scales, body-m);
}

.entry-header-time + .entry-header-category {
  &::before {
    display: inline-block;
    width: 1px;
    height: 1em;
    margin: 0 1em 0 0.5em;
    background: currentcolor;
    content: "";
  }
}

.entry-header-category {
  margin-right: 1rem;

  &:link,
  &:visited,
  &:active,
  &:focus {
    color: global.$color-gray80;
    text-decoration: none;
  }

  &:hover {
    text-decoration: underline;
  }
}

.entry-header-title {
  position: relative;
  margin: 0 0 1.5rem;
  padding: 0 0 1rem;
  font-size: map.get(global.$font-scales, heading-ss);
  border-bottom: global.$border-width-lg solid global.$color-gray30;

  &::before {
    position: absolute;
    bottom: -(global.$border-width-lg);
    width: 3.5rem;
    height: global.$border-width-lg;
    background: global.$color-primary;
    content: "";
  }
}

.entry-header-info {
  margin-bottom: 0.5rem;
}

.entry-header-title-link {
  color: currentcolor;
  text-decoration: none;

  &:hover {
    opacity: 0.7;
  }
}

@media screen and (min-width: acms.$breakpoint-md-min) {
  .entry-header {
    margin: 0 0 3rem;
  }

  .entry-header-info {
    margin-bottom: 1rem;
    font-size: map.get(global.$font-scales, body-m);
  }

  .entry-header-title {
    margin: 0 0 1.5rem;
    padding: 0 0 1.5rem;
    font-size: map.get(global.$font-scales, heading-m);

    &::before {
      bottom: -(global.$border-width-lg);
      width: 6.5rem;
    }
  }
}

/*
　エントリーのコンテンツ
------------------------------ */
.#{acms.$entry-class}-grid {
  margin: 0 calc(global.$unit-gutter-var / -2);
}

/* インライン要素 */
.#{acms.$entry-class} {
  .entry-text-unit {
    .text-point {
      display: block;
      color: global.$color-text-point;
      font-size: 80%;
    }

    em {
      @include global.entry-em(global.$color-text);
    }

    strong {
      @include global.entry-strong(global.$color-highlight-light);
    }

    a {
      @include global.entry-link(global.$color-link, global.$border-link);
    }
  }

  @each $unit in acms.$unit-type {
    /* 配置のスタイル */
    @each $align-name in acms.$align {
      .column-#{$unit}-#{$align-name} + .entry-text-unit {
        @if $align-name == left {
          overflow: hidden;
        }

        @if $align-name == right {
          overflow: hidden;
        }
      }
    }
  }

  code {
    margin: 0 0.25rem;
    padding: 0.25rem;
    color: global.$color-primary;
    background: global.$color-white;
    border: global.$border-width-sm solid currentcolor;
    border-radius: global.$border-radius-sm;
  }
}

/* 見出し
----------------------------- */
.#{acms.$entry-class} .entry-text-unit {
  h2 {
    margin: 0 calc(global.$unit-gutter-var / 2) global.$entry-el-margin-sm;
    font-size: map.get(global.$font-scales, heading-s);
    line-height: global.$line-height-sm;

    &.heading-line {
      padding-bottom: global.$entry-el-padding-xs;
      border-bottom: global.$border-width-md solid global.$color-gray100;
    }

    &.heading-primary {
      position: relative;
      margin-bottom: calc(global.$entry-el-margin-xs + 0.25rem + global.$entry-el-margin-sm);

      &::before {
        position: absolute;
        bottom: -1.25rem;
        left: 0;
        display: block;
        width: 4rem;
        height: global.$border-width-lg;
        background: global.$color-primary;
        content: "";
      }
    }

    .text-point {
      display: block;
      color: global.$color-primary;
    }
  }

  @media screen and (min-width: acms.$breakpoint-md-min) {
    h2 {
      margin-bottom: global.$entry-el-margin-sm;
      font-size: map.get(global.$font-scales, heading-m);

      &.heading-line {
        padding-bottom: 1rem;
      }

      &.heading-primary {
        margin-bottom: calc(global.$entry-el-margin-md + 0.25rem + global.$entry-el-margin-sm);

        &::before {
          bottom: -1.5rem;
        }
      }
    }
  }

  h3 {
    margin: 0 calc(global.$unit-gutter-var / 2) global.$entry-el-margin-sm;
    font-size: map.get(global.$font-scales, heading-ss);
    line-height: global.$line-height-sm;

    &.heading-line {
      padding-bottom: global.$entry-el-padding-xs;
      border-bottom: global.$border-width-md solid global.$color-gray100;
    }

    .text-point {
      display: block;
      color: global.$color-primary;
    }
  }

  @media screen and (min-width: acms.$breakpoint-md-min) {
    h3 {
      margin-bottom: global.$entry-el-margin-sm;
      font-size: map.get(global.$font-scales, heading-s);

      .text-point {
        margin: 0 0 global.$entry-el-margin-xxs 0;
      }
    }
  }

  h4 {
    margin: 0 calc(global.$unit-gutter-var / 2) global.$entry-el-margin-sm;
    font-size: map.get(global.$font-scales, body-m);
    line-height: global.$line-height-sm;

    &.heading-line {
      padding-bottom: 1rem;
      border-bottom: global.$border-width-md solid global.$color-gray100;
    }

    .text-point {
      display: block;
      color: global.$color-primary;
    }
  }

  @media screen and (min-width: acms.$breakpoint-md-min) {
    h4 {
      margin-bottom: global.$entry-el-margin-sm;
      font-size: map.get(global.$font-scales, heading-ss);
    }
  }
}

/* 本文
----------------------------- */
.#{acms.$entry-class} {
  p {
    margin: 0 calc(global.$unit-gutter-var / 2) global.$entry-el-margin-md;
    line-height: global.$line-height-lg;

    &.text-info {
      color: global.$color-text-side;
      font-size: map.get(global.$font-scales, body-s);
    }

    &.text-danger {
      color: global.$color-error;
      font-size: map.get(global.$font-scales, body-s);
    }
  }

  .is-p + .is-p .text-info,
  .is-p + .is-p .text-danger,
  .is-table + .is-p .text-info,
  .is-table + .is-p .text-danger,
  [class*="column-table-"] + .is-p .text-info,
  [class*="column-table-"] + .is-p .text-danger {
    margin-top: -1rem;
  }

  @media screen and (min-width: acms.$breakpoint-md-min) {
    p {
      margin: 0 calc(global.$unit-gutter-var / 2) global.$entry-el-margin-md;
    }
  }
}

/* リード文 */
.#{acms.$entry-class} {
  p {
    &.text-lead-primary {
      color: global.$color-primary;
      font-weight: bold;
      font-size: map.get(global.$font-scales, heading-s);
      line-height: global.$line-height-base;

      .text-point {
        color: global.$color-text-side;
        font-size: map.get(global.$font-scales, body-m);
      }
    }

    &.text-lead-info {
      margin: 0 calc(global.$unit-gutter-var / 2) global.$entry-el-margin-md;
      color: global.$color-text-side;
      font-weight: bold;
      font-size: map.get(global.$font-scales, heading-s);
      line-height: global.$line-height-base;

      &.is-margin-small {
        margin: 0 calc(global.$unit-gutter-var / 2) global.$entry-el-margin-xxs;
      }
    }

    @media screen and (min-width: acms.$breakpoint-md-min) {
      &.text-lead-primary {
        margin: 0 calc(var(--gutter) / 2) 3rem;
        font-size: map.get(global.$font-scales, heading-l);

        .text-point {
          font-size: map.get(global.$font-scales, heading-m);
        }
      }

      &.text-lead-info {
        margin: 0 calc(var(--gutter) / 2) 3rem;
        font-size: map.get(global.$font-scales, heading-m);

        &.is-margin-small {
          margin: 0 calc(global.$unit-gutter-var / 2) global.$entry-el-margin-xxs;
        }
      }
    }
  }
}

/* ボタン */
.#{acms.$entry-class} {
  p {
    &.text-btn a {
      display: inline-block;
      padding: global.$btn-padding-y global.$btn-padding-x;
      color: global.$color-text-inverse;
      font-weight: bold;
      font-size: map.get(global.$font-scales, body-m);
      text-align: center;
      text-decoration: none;
      background: global.$color-primary;
      border-bottom: 0;
      border-radius: global.$border-radius-md;
      transition: background-color 0.2s;

      &:hover,
      &:visited,
      &:active,
      &:focus {
        color: global.$color-text-inverse;
        opacity: 1;
      }

      &:hover {
        background: global.$color-primary-hover;
      }
    }
  }
}

/* リスト */
.#{acms.$entry-class} .entry-text-unit {
  ul {
    margin: 0 calc(global.$unit-gutter-var / 2) global.$entry-el-margin-md calc(global.$unit-gutter-var / 2);
    padding: 0 0 0 global.$entry-el-padding-md;

    li {
      position: relative;
      clear: both;
      margin: 0 0 0.5rem;
      line-height: global.$line-height-lg;
      list-style: none;

      &::before {
        position: absolute;
        top: 0.5rem;
        left: -1.5rem;
        width: 0.5rem;
        height: 0.5rem;
        background: global.$color-secondary;
        border-radius: 50%;
        content: "";
      }
    }
  }
}

/* 番号付きリスト */
.#{acms.$entry-class} .entry-text-unit:not(.is-pre) {
  ol {
    margin: 0 calc(global.$unit-gutter-var / 2) global.$entry-el-margin-md calc(global.$unit-gutter-var / 2);
    padding: 0 0 0 global.$entry-el-padding-md;
    counter-reset: order-list;

    li {
      position: relative;
      clear: both;
      margin: 0 0 0.5rem;
      line-height: global.$line-height-lg;
      list-style: none;

      &::before {
        position: absolute;
        top: 2px;
        left: -2rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 1.5rem;
        height: 1.5rem;
        margin: 0 1rem 0 0;
        color: global.$color-white;
        font-size: map.get(global.$font-scales, body-s);
        background: global.$color-secondary;
        border-radius: 50%;
        counter-increment: order-list;
        content: counter(order-list);
      }
    }
  }
}

/* 記述リスト */
.#{acms.$entry-class} .entry-text-unit {
  dl {
    margin: 0 calc(global.$unit-gutter-var / 2) global.$entry-el-margin-md;

    dt {
      margin: 0 0 0.5rem;
      font-weight: bold;
      font-size: map.get(global.$font-scales, body-m);
      line-height: global.$line-height-sm;
    }

    dd {
      margin: 0 0 1rem;
      font-size: map.get(global.$font-scales, body-m);
      line-height: global.$line-height-lg;
    }

    &.box-bordered {
      border: global.$border-width-sm solid global.$color-gray40;

      dt {
        padding: global.$entry-el-padding-sm global.$entry-el-padding-sm 0 global.$entry-el-padding-sm;
        border-top: global.$border-width-sm solid global.$color-gray40;

        &:first-child {
          border: 0;
        }
      }

      dd {
        margin: 0;
        padding: 0 global.$entry-el-padding-sm global.$entry-el-padding-sm global.$entry-el-padding-sm;
      }
    }
  }

  @media screen and (min-width: acms.$breakpoint-md-min) {
    dl {
      dt {
        margin: 0 0 0.5rem;
      }

      &.box-bordered {
        dt {
          padding: global.$entry-el-padding-md global.$entry-el-padding-md 0 global.$entry-el-padding-md;
        }

        dd {
          padding: 0 global.$entry-el-padding-md global.$entry-el-padding-md global.$entry-el-padding-md;
        }
      }
    }
  }
}

/* テーブル */
.#{acms.$entry-class} .entry-text-unit,
.#{acms.$entry-class} [class^='column-table'] {
  table {
    width: 100%;
    margin: 0 0 global.$entry-el-margin-md 0;
    border-bottom: global.$border-width-sm solid global.$color-gray30;
    border-collapse: collapse;

    th,
    td {
      padding: global.$entry-el-padding-xs;
      font-size: map.get(global.$font-scales, body-m);
      line-height: global.$line-height-base;
    }

    th {
      text-align: left;
      vertical-align: top;
      background: global.$color-gray10;
    }

    tr {
      border-top: global.$border-width-sm solid global.$color-gray30;
    }
  }

  @media screen and (min-width: acms.$breakpoint-md-min) {
    table {
      th,
      td {
        padding: global.$entry-el-padding-sm;
        font-size: map.get(global.$font-scales, body-m);
      }
    }
  }
}

.#{acms.$entry-class} [class^='column-table'] {
  table {
    margin: 0;
  }
}

[class^="column-table"] .entry-container {
  clear: both;
  margin-bottom: global.$entry-el-margin-md;
  overflow-x: auto;
}

/*
　引用
------------------------------ */
.#{acms.$entry-class} .entry-text-unit {
  blockquote {
    margin: 0 0 global.$entry-el-margin-md 0;
    padding: global.$entry-el-padding-sm;
    font-size: map.get(global.$font-scales, body-m);
    line-height: global.$line-height-lg;
    border: global.$border-width-md solid global.$color-gray40;

    cite {
      color: global.$color-text-side;
      font-size: map.get(global.$font-scales, body-s);
      font-style: normal;

      &::before {
        content: "\2014\00A0";
      }
    }
  }

  @media screen and (min-width: acms.$breakpoint-md-min) {
    blockquote {
      margin: 0 0 global.$entry-el-margin-lg 0;
      padding: global.$entry-el-padding-md;
    }
  }
}

/*
　ユニットグループ
------------------------------ */
.#{acms.$entry-class} {
  /* 全てのユニットグループ */
  [class*="ug-"] {
    overflow: hidden;
  }

  .ug-bg-gray {
    background: global.$color-gray20;
  }

  .ug-bg-primary {
    background: global.$color-primary-bg;
  }

  .ug-bg-gray,
  .ug-bg-primary {
    margin: 0 0 global.$entry-el-margin-md 0;
    padding: global.$entry-el-padding-md calc(global.$entry-el-padding-md - (global.$unit-gutter-var / 2));
    border-right: calc(global.$unit-gutter-var / 2) solid global.$color-white;
    border-left: calc(global.$unit-gutter-var / 2) solid global.$color-white;

    & > *:not(.entry-reset):last-child > * {
      margin-bottom: 0;
    }
  }

  .ug-cover {
    margin: global.$entry-el-margin-md calc(50% - 50vw);
    padding: global.$entry-el-padding-md calc(50vw - 50% + (global.$unit-gutter-var / 2));
    border: 0;
  }

  .ug-text-center {
    text-align: center;
  }

  .ug-border {
    position: relative;
    margin: 0 0 global.$entry-el-margin-md 0;
    padding: global.$entry-el-padding-md calc(global.$entry-el-padding-md - (global.$unit-gutter-var / 2));
    border-right: calc(global.$unit-gutter-var / 2) solid global.$color-white;
    border-left: calc(global.$unit-gutter-var / 2) solid global.$color-white;

    &::before {
      position: absolute;
      inset: 0;
      z-index: -1;
      border: global.$border-width-sm solid global.$color-gray40;
      content: "";
    }

    & > *:not(.entry-reset):last-child > * {
      margin-bottom: 0;
    }
  }

  .ug-center {
    float: none;
    margin-right: auto;
    margin-left: auto;
  }

  @media screen and (min-width: acms.$breakpoint-md-min) {
    .ug-bg-gray,
    .ug-bg-primary,
    .ug-border {
      margin: 0 0 global.$entry-el-margin-lg 0;
      padding: global.$entry-el-padding-md calc(global.$entry-el-padding-md - (global.$unit-gutter-var / 2));

      & > *:not(.entry-reset):last-child > * {
        margin-bottom: 0;
      }
    }

    .ug-cover {
      margin: global.$entry-el-margin-lg calc(50% - 50vw);
      padding: 3rem calc(50vw - 50% + (global.$unit-gutter-var / 2));
    }
  }
}

/*
　画像・メディア・画像URLの共通設定
------------------------------ */
[class*="column-image"],
[class*="column-media"],
[class*="column-eximage"] {
  .caption {
    color: global.$color-text-side;
    font-size: map.get(global.$font-scales, body-s);
  }
}

/*
　ファイルユニット・メディア（ファイル）の設定
------------------------------ */
[class*="column-file-"],
.media-file {
  display: inline-block;

  a,
  a[href*="media-download"] {
    display: inline-flex;
    align-items: center;
    padding: 1rem;
    color: global.$color-text;
    text-decoration: none;
    border: global.$border-width-sm solid global.$color-gray40;
    border-radius: global.$border-radius-md;
    transition: background-color 0.2s;

    &:hover {
      text-decoration: none;
      background: global.$color-gray20;
    }
  }

  .caption {
    margin: 0;
    color: global.$color-text;
    font-size: map.get(global.$font-scales, body-m);
  }

  .columnIcon {
    width: 1.75rem;
    height: auto;
    margin: 0 1rem 0 0;
  }
}

/* 引用ユニットの設定 */
[class*="column-quote-"] {
  .quote {
    padding: 0;
    border: 0;
  }

  .quote-link {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: global.$color-text;
    text-decoration: none;
    border: global.$border-width-sm solid global.$color-gray40;
    border-radius: global.$border-radius-lg;

    &:hover {
      background: global.$color-gray20;
    }
  }

  .quote-info {
    padding: 1rem;
  }

  .quote-title {
    margin: 0 0 0.5rem;
    font-weight: bold;
    font-size: map.get(global.$font-scales, body-m);
    line-height: global.$line-height-sm;
  }

  .quote-site-name {
    margin: 0;
    color: global.$color-text-side;
    font-size: map.get(global.$font-scales, body-m);
  }

  .quote-description {
    display: none;
    margin: 0 0 0.5rem;
    font-size: map.get(global.$font-scales, body-s);
  }

  @media screen and (min-width: acms.$breakpoint-md-min) {
    .quote-link {
      flex-direction: row;
    }

    .quote-img-wrap {
      flex: 1 0 auto;
      box-sizing: border-box;
      width: math.div(100%, 3);
      padding: 2rem 1rem 2rem 2rem;
    }

    .quote-img {
      width: 100%;
    }

    .quote-info {
      box-sizing: border-box;
      width: math.div(2, 3);
      padding: 2rem 2rem 2rem 1rem;
    }

    .quote-title {
      margin: 0 0 1.5rem;
      font-weight: bold;
      font-size: map.get(global.$font-scales, heading-ss);
    }

    .quote-description {
      display: block;
    }
  }
}

/*
　カード
------------------------------ */
.#{acms.$entry-class} {
  .card-item,
  .card-bordered-item {
    padding: 0 calc(global.$unit-gutter-var / 2);
  }
}

/*
　罫線ユニット
------------------------------ */
.unit-separator {
  margin: 0 calc(global.$unit-gutter-var / 2) global.$entry-el-margin-md;
  border: 0;
  border-top: global.$border-width-sm solid global.$color-gray40;
}

/*
　目次ユニット
------------------------------ */
.#{acms.$entry-class} {
  .entry-outline {
    margin: 0 calc(global.$unit-gutter-var / 2) global.$entry-el-margin-lg;
    padding: 1rem;
    border: global.$border-width-lg solid global.$color-gray30;
  }

  .entry-outline-title {
    margin: 0 0 1rem;
    padding: 0 0 0.5rem;
    font-weight: bold;
    font-size: map.get(global.$font-scales, body-m);
    border-bottom: 2px solid global.$color-gray30;
  }

  .entry-outline-list-wrap {
    .outline-list {
      margin: 0;
      padding: 0 0 0 1.5rem;
      counter-reset: a;

      &.level-1 {
        padding: 0;
      }
    }

    .outline-item {
      list-style: none;
    }

    .outline-item::marker {
      content: none;
    }

    .outline-item a {
      display: block;
      margin: 0 0 1rem 0.25rem;
      color: global.$color-text;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }

      &::before {
        display: inline-block;
        padding-right: 0.5rem;
        color: global.$color-gray90;
        font-weight: 700;
        white-space: nowrap;
        content: counters(a, "-") ". ";
        counter-increment: a;
      }
    }
  }
}

@media screen and (min-width: acms.$breakpoint-md-min) {
  .#{acms.$entry-class} {
    .entry-outline {
      padding: 2rem;
    }

    .entry-outline-title {
      margin: 0 0 1.5rem;
      padding: 0 0 1rem;
      font-size: map.get(global.$font-scales, heading-ss);
    }
  }
}

/*
　料金テーブル
------------------------------ */
.#{acms.$entry-class} {
  .pricing-group {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    margin: 1.5rem 0;
    padding: 0 (global.$unit-gutter-var / 2);
  }

  .pricing-item {
    position: relative;
    display: flex;
    flex: 0 1 14rem;
    margin: 0 0 global.$entry-el-margin-md 0;
    list-style: none;

    &.is-reccomend {
      .pricing-inner {
        margin-top: -1rem;
        margin-bottom: -1rem;
        padding-top: 2.5rem;
        padding-bottom: 2rem;
        border: global.$border-width-sm solid global.$color-primary;
      }
    }
  }

  .pricing-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    padding: 2rem 1rem 1.5rem;
    background: #fff;
    box-shadow: global.$elevation02;
    transition: transform 0.25s ease;
  }

  .pricing-header {
    position: relative;
    margin: 0 0 1rem;
    padding: 0 0 1rem;
    text-align: center;
    border-bottom: global.$border-width-sm solid global.$color-gray30;
  }

  .pricing-label-wrap {
    position: absolute;
    top: -4rem;
    right: 0;
    left: 0;
  }

  .pricing-label {
    display: inline-block;
    margin: 0;
    padding: 0.25rem 2rem;
    color: global.$color-text-inverse;
    font-weight: bold;
    font-size: map.get(global.$font-scales, heading-ss);
    line-height: global.$line-height-sm;
    background: global.$color-primary;
    border-radius: global.$border-radius-round;
    box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
  }

  .pricing-title {
    margin: 0 0 0.25rem;
    color: global.$color-primary;
    font-size: map.get(global.$font-scales, heading-ss);
  }

  .pricing-desc {
    margin: 0;
    color: global.$color-text-side;
    font-size: map.get(global.$font-scales, body-s);
    line-height: global.$line-height-base;
  }

  .pricing-price {
    margin: 0 0 0.5rem;
    font-size: map.get(global.$font-scales, heading-m);
    line-height: global.$line-height-ss;
    text-align: center;
  }

  .pricing-unit {
    font-size: map.get(global.$font-scales, body-m);
  }

  .pricing-check-group {
    margin: 0 0 1rem;
    padding: 0;
    font-size: map.get(global.$font-scales, body-s);
    list-style: none;

    li {
      margin: 0 0 0.25rem;

      &::before {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        margin: 0 0.5rem 0 0;
        vertical-align: middle;
        background: url(#{global.$root-theme-img}icon-check.svg);
        background-size: contain;
        content: "";
      }
    }
  }

  .pricing-button {
    display: block;
    margin: 0 0 1rem;
  }

  .pricing-text-info {
    margin: 0;
    text-align: center;
  }
}

@media screen and (min-width: acms.$breakpoint-md-min) {
  .#{acms.$entry-class} {
    .pricing-group {
      flex-flow: row wrap;
      gap: 1rem;
      margin: 4rem 0;
    }

    .pricing-item {
      box-sizing: border-box;
      margin: 0 0 global.$entry-el-margin-md 0;

      &:hover .pricing-inner {
        box-shadow: global.$elevation10;
        transform: translateY(-0.5rem);
      }
    }

    .pricing-title {
      font-size: map.get(global.$font-scales, heading-ss);
    }
  }
}

/*
　ユニット
------------------------------ */

/* 各ユニットのマージンの調整 */
@each $unit in acms.$unit-type {
  [class*='column-#{$unit}'] {
    @if $unit == "module" {
      margin-bottom: calc(acms.$unit-margin-bottom / 2);
    } @else {
      margin-bottom: acms.$unit-margin-bottom;
    }
  }
}

@media screen and (min-width: acms.$breakpoint-md-min) {
  @each $unit in acms.$unit-type {
    [class*='column-#{$unit}'] {
      @if $unit == "module" {
        margin-bottom: acms.$unit-margin-bottom;
      } @else {
        margin-bottom: global.$unit-margin-md;
      }
    }
  }
}

[class*="column-media-"],
[class*="column-image-"],
[class*="column-eximage-"] {
  a {
    transition: opacity 0.2s;

    &:hover {
      opacity: 0.7;
    }
  }
}

.unit-gallery {
  margin-bottom: global.$unit-gutter-var;
}

/*
　SNSシェアボタン
------------------------------ */
.sns-share-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 calc(global.$col-gutter / -2) 2.5rem calc(global.$col-gutter / -2);
  padding: 1.5rem;
  text-align: center;
  background: global.$color-gray10;
}

.sns-share-title {
  margin: 0 0 0.5rem;
  font-size: map.get(global.$font-scales, body-m);
}

.share-list {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;

  &.is-align-right {
    justify-content: flex-end;
  }
}

.share-item {
  margin: 0 0.5rem;

  a {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 3rem;
    height: auto;
    padding: 0.5rem;
    transition: transform 0.2s ease;

    &:hover {
      transform: scale(0.8);
    }
  }

  .share-list.is-sm & {
    margin: 0 0.5rem;
  }

  .share-list.is-sm & a {
    width: auto;
  }
}

@media screen and (min-width: acms.$breakpoint-md-min) {
  .sns-share-wrapper {
    flex-direction: row;
    align-items: center;
    margin: 0 0 3rem;
    padding: 3rem 1.5rem;
    border-radius: global.$border-radius-xl;
  }

  .sns-share-title {
    margin: 0 2.5rem 0 0;
    font-size: map.get(global.$font-scales, heading-ss);
  }

  .share-item {
    a {
      width: 3rem;
    }

    .share-list.is-sm & a {
      width: auto;
    }
  }
}

/*
　プロフィール
------------------------------ */
.profile-heading {
  margin-top: 2rem;
}

@media screen and (min-width: acms.$breakpoint-md-min) {
  .profile-heading {
    margin-top: 2.5rem;
  }
}
