/* features-mod-16.css — ベースライン(自動読込・module-base.css前提)。編集せず上書きで調整。 */
@charset "UTF-8";

.mod_16_section .mod_16_wrap .col {
  position: relative;
  padding: 1em;
  overflow: hidden;
  transition: 0.5s;
}
.mod_16_section .mod_16_wrap .col:hover {
  transition: 0.5s;
}
.mod_16_section .mod_16_wrap .mod_16_txt .mod_16_title {
  margin-bottom: 0;
  margin-top: 0.5em;
}
.mod_16_section .mod_16_wrap .mod_16_txt a:not(.button) {
  text-decoration: none;
}
.mod_16_section .mod_16_wrap .mod_16_txt a:not(.button):after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.mod_16_section.typeA .mod_16_wrap .col {
  background: var(--color-bg);
}
.mod_16_section.typeA .mod_16_wrap .col:hover {
  background: var(--color-bg);
  color: inherit;
}
.mod_16_section.typeB .mod_16_wrap .col {
  background: var(--color-bg);
}
.mod_16_section.typeB .mod_16_wrap .col:before, .mod_16_section.typeB .mod_16_wrap .col:after {
  transition: 0.1s;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--color-primary); color: var(--color-on-primary); }
.mod_16_section.typeB .mod_16_wrap .col:before {
  z-index: 2;
}
.mod_16_section.typeB .mod_16_wrap .col:after {
  opacity: 0;
  right: 100%;
  left: -100%;
  z-index: 3;
  background: var(--color-primary-dark); color: var(--color-on-primary); }
.mod_16_section.typeB .mod_16_wrap .col:hover:before, .mod_16_section.typeB .mod_16_wrap .col:hover:after {
  transition: 0.5s;
}
.mod_16_section.typeB .mod_16_wrap .col:hover:after {
  opacity: 1;
  right: 0;
  left: 0;
}
.mod_16_section.typeB .mod_16_wrap .col:hover a.button {
  background: var(--color-primary-dark);
  color: var(--color-on-primary);
  border-color: var(--color-primary-dark);
}
.mod_16_section.typeC .mod_16_wrap .col {
  background: var(--color-primary); color: var(--color-on-primary); }
.mod_16_section.typeC .mod_16_wrap .col h2, .mod_16_section.typeC .mod_16_wrap .col h3, .mod_16_section.typeC .mod_16_wrap .col p, .mod_16_section.typeC .mod_16_wrap .col a:not(.button) {
  color: var(--color-on-primary);
}
.mod_16_section.typeC .mod_16_wrap .col a.button {
  background: var(--color-on-primary);
  color: var(--color-heading-ink);
  border-color: var(--color-on-primary);
}
.mod_16_section.typeC .mod_16_wrap .col:hover {
  background: var(--color-primary-dark);
  color: var(--color-on-primary);
}
.mod_16_section.typeC .mod_16_wrap .col:hover h2, .mod_16_section.typeC .mod_16_wrap .col:hover h3, .mod_16_section.typeC .mod_16_wrap .col:hover p, .mod_16_section.typeC .mod_16_wrap .col:hover a:not(.button) {
  color: var(--color-on-primary);
}
.mod_16_section.typeC .mod_16_wrap .col:hover a.button {
  background: var(--color-on-primary);
  color: var(--color-primary-dark);
  border-color: var(--color-on-primary);
}

/* SM-FIX-20260819 */
/* 2026-08-19: 黒地に黒文字。ブランド色の面に置くボタンが
   background: var(--color-on-primary)（＝面の上の【文字色】トークンを背景に使う誤用）
   ＋ color: var(--color-heading-ink)（未定義＝無効で継承）で、typeC と typeA:hover の
   ボタンが完全に読めなくなっていた。面の反転は地色トークンで行う。 */
.mod_16_section.typeA .mod_16_wrap .col:hover a.button,
.mod_16_section.typeC .mod_16_wrap .col a.button,
.mod_16_section.typeC .mod_16_wrap .col:hover a.button{
  background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg);
}