@import url("base.css");
.post {
  text-align: left; }
  .post .inner {
    display: grid;
    grid-template-columns: 1fr 20%;
    grid-gap: 50px;
    justify-items: flex-start;
    align-items: flex-start;
    padding-bottom: 4rem; }
    @media screen and (max-width: 767px) {
      .post .inner {
        grid-template-columns: 1fr; } }
    .post .inner .main {
      width: 100%; }
      .post .inner .main .title_grp {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 30px; }
        .post .inner .main .title_grp .img {
          width: 120px; }
        .post .inner .main .title_grp > .txt {
          width: 100; }
          .post .inner .main .title_grp > .txt .title {
            font-size: 1.6rem;
            line-height: 1; }
            @media screen and (max-width: 767px) {
              .post .inner .main .title_grp > .txt .title {
                font-size: 1.2rem; } }
          .post .inner .main .title_grp > .txt .date {
            margin-top: 1rem; }
            .post .inner .main .title_grp > .txt .date span {
              background-color: var(--main_color_yellow);
              font-size: 0.8rem;
              display: inline-block;
              padding: 3px 10px;
              margin-right: 10px; }
      .post .inner .main > h2 {
        border-bottom: 2px solid #ccc;
        margin: 0 !important;
        margin-bottom: 2rem !important;
        padding-bottom: 2rem;
        padding-top: 0; }
        @media screen and (max-width: 767px) {
          .post .inner .main > h2 {
            max-width: 100% !important; } }
      .post .inner .main .post_col {
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        display: grid;
        grid-template-columns: 100px 1fr;
        grid-gap: 40px;
        justify-items: flex-start;
        align-items: flex-start;
        position: relative;
        border-bottom: 1px solid #ccc; }
        @media screen and (max-width: 767px) {
          .post .inner .main .post_col {
            grid-gap: 5%;
            grid-template-columns: 15% 1fr;
            margin-bottom: 1rem;
            padding-bottom: 1rem; } }
        .post .inner .main .post_col .img {
          width: 100%; }
        .post .inner .main .post_col .txt {
          width: 100%; }
          .post .inner .main .post_col .txt span {
            display: block; }
          .post .inner .main .post_col .txt h3 {
            font-size: 1.4rem;
            font-weight: bold; }
            @media screen and (max-width: 767px) {
              .post .inner .main .post_col .txt h3 {
                font-size: 1.1rem; } }
        .post .inner .main .post_col a {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0; }
      .post .inner .main .pager ul {
        list-style: none;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: flex-start;
        gap: 10px 10px; }
        .post .inner .main .pager ul li span,
        .post .inner .main .pager ul li a {
          display: block;
          padding: 0.5rem 1rem;
          border: 1px solid #ccc;
          text-decoration: none; }
        .post .inner .main .pager ul li span {
          background-color: var(--main_color_yellow); }
      .post .inner .main > .contents {
        margin-top: 3rem; }
        .post .inner .main > .contents > p {
          padding: 1rem 0; }
        .post .inner .main > .contents .wp-block-image img {
          width: 100%;
          height: auto; }
      .post .inner .main .bottom_nav {
        margin-top: 40px;
        padding: 20px 0px;
        border-top: 1px solid #ccc; }
        .post .inner .main .bottom_nav:after {
          content: "";
          display: block;
          clear: both; }
        .post .inner .main .bottom_nav .prev {
          width: 50%;
          float: left;
          text-align: left; }
        .post .inner .main .bottom_nav .next {
          width: 50%;
          float: right;
          text-align: right; }
    .post .inner .side {
      width: 100%; }
      .post .inner .side .box h2 {
        padding: 5px 0;
        margin: 0 !important;
        margin-bottom: 20px !important;
        font-size: 0.8rem !important;
        border-bottom: 1px solid #333; }
      .post .inner .side .box ul {
        list-style: none; }
        .post .inner .side .box ul li {
          padding-bottom: 10px;
          margin-bottom: 10px;
          border-bottom: 1px dotted #ccc; }
          .post .inner .side .box ul li span {
            font-size: 0.8rem;
            padding: 0;
            font-weight: bold;
            display: block; }
          .post .inner .side .box ul li a {
            display: block;
            text-decoration: none; }