@charset "UTF-8";
/* ========================================
  @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px), print {
  #blog .system-pic {
    margin-bottom: 10px;
  }

  #blog .system-pic img {
    height: 230px;
    width: 100%;
  }

  #blog .system-date {
    color: #040404;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.5714285714;
    margin-bottom: 0;
  }

  #blog .system-ttl {
    color: #040404;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.7333333333;
  }

  /* =================================================
  詳細ページ (is-single) 
================================================= */
  #blog main.is-single {
  }

  #blog main.is-single .system-date {
    text-align: center;
  }

  #blog main.is-single .blog-profile {
    margin-block: 64px;
    padding-block: 20px 26px;
    padding-inline: 32px;
    border: 1px solid #ccc;
    margin-inline: auto;
    width: min(95%, 1000px);
    display: grid;
    grid-template-columns: 16% minmax(0, 1fr);
    gap: 0 4%;
    align-items: center;
  }

  #blog main.is-single .blog-profile .img {
  }

  #blog main.is-single .blog-profile .img img {
  }

  #blog main.is-single .blog-profile .img .blog-profile-img {
    aspect-ratio: 1/1;
  }

  #blog main.is-single .blog-profile .img .blog-profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  #blog main.is-single .blog-profile .con {
  }

  #blog main.is-single .blog-profile .con p {
    font-size: 14px;
    line-height: 1.6;
    color: #323232;
    margin-bottom: 8px;
  }

  #blog main.is-single .blog-profile .con .blog-profile-name {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 8px;
  }

  #blog main.is-single .blog-profile .con .txt {
  }

  #blog main.is-single .blog-profile .con .txt .wysiwyg  {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 0;
  }
}

/* ========================================
  @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
  #blog .system-pic {
    margin-bottom: 2.415vw;
  }

  #blog .system-pic img {
    height: 31.401vw;
    width: 100%;
  }

  #blog .system-date {
    color: #040404;
    font-size: 3.382vw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 2.1428571429;
    margin-bottom: 0;
  }

  #blog .system-ttl {
    color: #040404;
    font-size: 3.623vw;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.8;
  }

  /* =================================================
  詳細ページ (is-single) 
================================================= */
  #blog main.is-single {
  }

  #blog main.is-single .system-contents {
    display: grid;
  }

  #blog main.is-single .system-date {
    text-align: center;
    order: 1;
  }

  #blog main.is-single .system-ttl02 {
    order: 2;
  }

  #blog main.is-single .system-i-pic {
    order: 3;
  }

  #blog main.is-single .wysiwyg {
    order: 5;
  }

  #blog main.is-single .pagen {
    order: 6;
  }

  #blog main.is-single .blog-profile {
    margin-block: 0 9.662vw;
    padding-block: 3.865vw 4.831vw;
    padding-inline: 5.797vw;
    border: 1px solid #ccc;
    margin-inline: auto;
    width: min(95%,82.1vw);
    display: grid;
    grid-template-columns: repeat(1,minmax(0, 1fr));
    gap: 5.797vw 0;    
    order: 4;
  }

  #blog main.is-single .blog-profile .img {
    width: 28.986vw;
    height: 28.986vw;
    margin-inline: auto;
  }

  #blog main.is-single .blog-profile .img img {
  }

  #blog main.is-single .blog-profile .img .blog-profile-img {
    aspect-ratio: 1/1;
  }

  #blog main.is-single .blog-profile .img .blog-profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  #blog main.is-single .blog-profile .con {
  }

  #blog main.is-single .blog-profile .con p {
    font-size: 3.382vw;
    line-height: 1.6;
    color: #323232;
    margin-bottom: 1.932vw;
  }

  #blog main.is-single .blog-profile .con .blog-profile-name {
    font-size: 4.348vw;
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 1.932vw;
  }

  #blog main.is-single .blog-profile .con .txt {
  }

  #blog main.is-single .blog-profile .con .txt .wysiwyg  {
    font-size: 3.14vw;
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 0;
  }
}