@charset "utf-8";


body {
  &.single {
    #firstContent {
      .wrap{
        .contents {
          .contents_inner {
            .data {
              margin-bottom: 0.5em;
            }
          }
        }
      }
    }
    #news {
      .wrap {
        .contents {
          /* max-width: 500px; */
        }
      }
    }
  }


  #news {
    .wrap {
      padding: 50px 0;

      .contents {
        max-width: 1000px;

        h2 {
          font-size: 1.8rem;
          font-weight: 500;
          line-height: 1;
          height: 2.6em;
          padding: 0 1.5em;
          display: grid;
          align-items: center;
          grid-template-columns: auto 1fr;
          grid-gap: 1em;
          letter-spacing: .05em;
          color: var(--color_base2);
          margin-bottom: .5em;

          &::before {
            color: var(--color_base2);
            font-size: 1.5em;
          }
        }
        .btnBox {
					a {
						display: grid;
            max-width: 200px;
            margin: 30px auto;
						grid-template-columns: repeat(2,auto);
						grid-gap:.5em;
						align-items:center;
						justify-content:center;
						background-color: #d5e8f8;
						color:#003d96;
						font-size: 1.4rem;
						padding:0 1em;
						height:3em;
						font-weight: 600;
						border-radius:.5em;
            transition: all .5s;
						&::after {
							color:#003d96;
							font-size:1.4em;
						}
          }
        }

        .news {
          grid-area: 1/1/3/2;

          h2 {
            background-color: #ececee;
          }

          .newslist_wrap {

            .newslist {
              padding: 20px;
              display: grid;
              grid-gap: 25px;

              .item {
                display: grid;
                grid-template-columns: 15% 1fr;
                grid-gap: 1.5em;

                .detail {
                  display: grid;
                  grid-template-columns: 1fr;
                  grid-template-rows: repeat(2,auto) 1fr;
                  grid-gap: .5em;
                  align-items: start;

                  .date {
                    font-size: 1.4rem;
                  }

                  h3 {
                    color: var(--color_base);
                    font-size: 1.5rem;
                    line-height: 1.2;
                    text-decoration: underline;
                  }

                  .text {
                    font-size: 1.4rem;
                    line-height: 1.4;
                  }
                }
              }

              .wp-pagenavi {
                text-align:center;
                a, span {
                    /* border-color:#999999; */
                    border: 1px solid #999;
                    display:inline-block;
                    aspect-ratio:1;
                    padding: 0;
                    width:1.5em;
                    text-align:center;
                    line-height:1.5;
                    margin: 2px;
                    transition: all .5s;
                    &.next,&.prev {
                        border:none;
                        width:1em;
                    }
                    &.current {
                        background-color:#05618d;
                        color:#FFFFFF;
                        border:none;
                    }
                }
              }

            }
          }
        }
      }
    }
  }
  
}


@media (hover: hover) {



  #news {
    .wrap {
      .contents {


        .btnBox {
					a {
            &:hover{
              opacity: .75;
            }
          }
        }

        .news {
          .newslist_wrap {
            .newslist {
              .item {
                transition: .3s;

                &:hover {
                  opacity: .75;
                }
              }

              .wp-pagenavi {
                a {
                  &:hover {
                    opacity: .66;
                  }
                }
              }


            }
          }
        }

      }
    }
  }



}

@media screen and (max-width:1360px) {}

@media screen and (max-width:1024px) {}

@media screen and (max-width:768px) {

body {
    #news {
    .wrap {
      padding: 30px 0;

      .contents {

        h2 {
          font-size: 1.6rem;
          padding: 0 1em;
        }

        .news {
          grid-area: 1/1/3/2;

          .newslist_wrap {


            .newslist {
              padding: 10px;
              grid-gap: 15px;

              .item {
                grid-template-columns: 35% 1fr;
                grid-gap: .75em;

                .img {
                  img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                  }
                }

                .detail {
                  grid-template-columns: 1fr;

                  .date {
                    font-size: 1.2rem;
                  }

                  h3 {
                    font-size: 1.4rem;
                  }

                  .text {
                    grid-area: unset;
                    font-size: 1.3rem;
                  }
                }
              }
            }
          }
        }

      }
    }
  }
}

}