@charset "utf-8";

/* -----------------------------------------------------------------
 base
----------------------------------------------------------------- */
:where(.use_component >*:first-child) {
  margin-top: 0 !important;
}
:where(.use_component *) {
  line-height: 1.8;
}
.use_component a {
  background-image: linear-gradient(90deg, var(--color_txt_base), var(--color_txt_base));
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 100% 2px;
  text-decoration: none;
}
.use_component strong,
.use_component b {
  font-size: 102%;
}
.use_component p {
  margin-top: .7rem;
  margin-bottom: .7rem;
}
.use_component figure  {
  display: table;
  margin: auto;
}
.use_component figcaption {
  caption-side: bottom;
  display: table-caption;
  line-height: 1.5;
  font-weight: 700;
}
.use_component figcaption.center {
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .use_component a ,
  .use_component a img{
    transition: 0.3s ease-in-out;
  }
  /*----- :hover -----*/
  .use_component a:hover {
    background-size: 0 2px;
    color: var(--color_txt_hover);
  }
  .use_component a:hover img {
    opacity: .8;
  }
}

/* -----------------------------------------------------------------
 見出し
----------------------------------------------------------------- */
.use_component h1,
.use_component h2,
.use_component h3,
.use_component h4,
.use_component h5,
.use_component h6 {
  margin-bottom: .3em;
  letter-spacing: 0.008em;
  line-height: 1.6;
  font-weight: 900;
}
@media screen and (max-width: 767px) {
  .use_component h1,
  .use_component h2,
  .use_component h3,
  .use_component h4,
  .use_component h5,
  .use_component h6 {
    margin-top: max(1em, 1.8rem);
  }
  .use_component h1 {
    font-size: 1.5rem;
  }
  .use_component h2 {
    font-size: 1.3rem;
  }
  .use_component h3 {
    font-size: 1.2rem;
  }
  .use_component h4 {
    font-size: 1.15rem;
  }
  .use_component h5 {
    font-size: 1.1rem;
  }
  .use_component h6 {
    font-size: 1.05rem;
  }

}
@media print, screen and (min-width: 768px) {
  .use_component h1,
  .use_component h2,
  .use_component h3,
  .use_component h4,
  .use_component h5,
  .use_component h6 {
    margin-top: max(1.5em, 1.8rem);
  }
  .use_component h1 {
    font-size: 1.5rem;
  }
  .use_component h2 {
    font-size: 1.3rem;
  }
  .use_component h3 {
    font-size: 1.2rem;
  }
  .use_component h4 {
    font-size: 1.15rem;
  }
  .use_component h5 {
    font-size: 1.1rem;
  }
  .use_component h6 {
    font-size: 1.05rem;
  }
}
/* -----------------------------------------------------------------
 リスト
----------------------------------------------------------------- */
.use_component ul {
  margin-left: 1.5em;
  list-style: initial;
}
.use_component ol {
  margin-left: 1.5em;
  list-style: decimal;
}