@charset "UTF-8";
@media (min-width: 960px) {
  main {
    padding-right: calc(8px * 5); } }

article,
.sidebar {
  background-color: #fff; }

@media (min-width: 768px) {
  article {
    padding: calc(8px * 2) 0; } }
@media (max-width: 767px) {
  article {
    padding: calc(8px * 2); } }

aside {
  padding: calc(8px * 2); }

.article-body section {
  padding: 0 1em; }
  .article-body section:not(:last-of-type) {
    padding-bottom: calc(8px * 10); }
  .article-body section > picture {
    margin-bottom: 1em; }
.article-body h2 {
  width: 100%;
  padding: calc(8px * 2);
  background-color: #030755;
  border-radius: var(--size0);
  color: #fff;
  font-size: calc(8px * 3.75);
  line-height: 1; }
  @media (min-width: 768px) {
    .article-body h2 {
      margin-left: 0 !important;
      margin-bottom: calc(8px * 6); } }
  @media (max-width: 767px) {
    .article-body h2 {
      margin: calc(8px * 3) auto calc(8px * 6) !important; } }
  .article-body h2 span {
    font-size: calc(8px * 3); }
  .article-body h2 + img {
    margin-bottom: calc(8px * 4); }
@media (max-width: 767px) {
  .article-body .pcFloat-r {
    display: flex;
    flex-wrap: wrap; }
    .article-body .pcFloat-r > * {
      width: 100%; }
    .article-body .pcFloat-r picture {
      order: 2; }
    .article-body .pcFloat-r .text {
      order: 1; } }
@media (min-width: 768px) {
  .article-body .pcFloat-r picture {
    float: right;
    width: 250px;
    margin-left: 8px;
    margin-bottom: 8px; }
  .article-body .pcFloat-r::after {
    display: block;
    content: "";
    clear: both; } }
.article-body .pcFloat-r img {
  width: 100%; }
.article-body dl {
  margin: calc(8px * 6) 0; }
  .article-body dl picture {
    text-align: center;
    margin-top: 8px; }
    .article-body dl picture img {
      height: 12em;
      object-fit: cover; }
.article-body dt {
  padding-bottom: 8px;
  margin-bottom: calc(8px * 2);
  border-bottom: 2px solid #ff8415;
  color: #030755;
  font-size: calc(8px * 3);
  font-weight: bold; }
.article-body dd {
  margin-bottom: calc(8px * 6); }

main ul {
  margin-bottom: calc(8px * 4); }
  main ul.number {
    counter-reset: number 0; }
    main ul.number li {
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: calc(8px * 2);
      padding-left: 2.5em; }
      main ul.number li::before {
        position: absolute;
        left: 0;
        top: 0;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 2em;
        height: 2em;
        background-color: #030755;
        border-radius: 50%;
        color: #fff !important;
        line-height: 1;
        content: "" counter(number) !important;
        counter-increment: number 1; }
      main ul.number li p {
        width: calc(100% - $size5); }

/*この記事を書いた人*/
@media (min-width: 600px) {
  .author-card__btn {
    margin-top: 0; } }