@charset "UTF-8";

.news {
   background-color: #e5e4e2;
   position: relative;
}

.news .wrap {
   z-index: 1;
}

@media only screen and (max-width: 767px) {
   .news {
      padding: 15vw 0;
   }

   .news .sidebar {
      padding-bottom: 8vw;
   }

   .news .sidebar h3 {
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
      font-weight: 700;
      font-size: 5vw;
      letter-spacing: 0.1em;
      line-height: 2;
      padding: 2vw 4vw;
      position: relative;
   }

   .news .sidebar h3:after {
      content: "";
      margin: auto;
      width: 0;
      height: 0;
      border: 8px solid transparent;
      border-top-color: #253641;
      border-bottom-width: 0;
      position: absolute;
      top: 0;
      right: 4vw;
      bottom: 0;
      transition: all .3s ease;
      -moz-transition: all .3s ease;
      -webkit-transition: all .3s ease;
   }

   .news .sidebar ul {
      background-color: #fff;
      margin-top: 2vw;
      padding: 4vw 4vw;
      letter-spacing: 0.1em;
   }

   .news .sidebar ul li a {
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      overflow: hidden;
      position: relative;
      padding-left: 15px;
   }

   .news .sidebar ul li a:before {
      content: '・';
      position: absolute;
      top: 0;
      left: 0;
   }

   .news .sidebar.active h3:after {
      transform: rotate(-180deg);
   }

   .news-list .col:not(:last-child) {
      margin-bottom: 8vw;
   }

   .news-list a {
      display: block;
   }

   .news-list figure {
      width: 100%;
      padding-top: 69.5%;
      overflow: hidden;
      position: relative;
   }

   .news-list figure img {
      position: absolute;
      top: 0;
      left: 0;
   }

   .news-list .text {
      background-color: #fff;
      letter-spacing: 0.1em;
      padding: 4vw;
   }

   .news-list time {
      display: block;
      color: #b8bdc0;
   }

   .news-list .ttl span {
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      overflow: hidden;
   }

   .news .pagination {
      padding-top: 8vw;
   }

   .news .next_prev_post {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      padding-top: 12vw;
   }

   .news .next_prev_post .item {
      border: 1px solid;
   }

   .news .next_prev_post .item+.item {
      border-left: 0;
   }

   .news .next_prev_post a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2vw;
      padding: 4vw;
      position: relative;
   }

   .news .next_prev_post a:after {
      content: '';
      width: 6vw;
      height: 6vw;
      display: block;
   }

   .news .next_prev_post .title_area {
      width: calc(100% - 8vw);
   }

   .news .next_prev_post .title {
      line-height: 24px;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      overflow: hidden;
   }

   .news .next_prev_post .prev_post a {
      flex-direction: row-reverse;
   }

   .news .next_prev_post .prev_post a:after {
      background: url("../img/shared/slider-prev.png") no-repeat center top/cover;
   }

   .news .next_prev_post .next_post a:after {
      background: url("../img/shared/slider-next.png") no-repeat center top/cover;
   }

   .news .related_post {
      padding-top: 12vw;
   }

   .news .related_post h3 {
      font-weight: 700;
      font-size: 5vw;
      letter-spacing: 0.06em;
      line-height: 1.5;
   }

   .news .related_post .news-list {
      padding-top: 4vw;
   }

   .news.details .post_content h2 {
      font-size: 6vw;
      line-height: 1.5;
      margin: 8vw 0 3vw;
      border-bottom: 1px solid;
      padding-bottom: 10px;
   }

   .news.details .post_content h3 {
      font-size: 5vw;
      line-height: 1.5;
      margin: 8vw 0 3vw;
   }

   .news.details .post_content h4 {
      font-size: 4vw;
      line-height: 1.5;
      margin: 8vw 0 3vw;
   }

   .news.details .post_content h2+*,
   .news.details .post_content h3+*,
   .news.details .post_content h4+* {
      margin-top: 0;
   }

   .news.details .post_content p:not(:last-child) {
      padding-bottom: 4vw;
   }
}

@media only screen and (min-width: 768px) {
   .news {
      padding: 128px 0 134px;
   }

   .news .wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 28px;
   }

   .news .sidebar {
      width: 217px;
   }

   .news .sidebar h3 {
      background: url("../img/shared/bg-pattern-02.jpg") repeat center top;
      font-weight: 700;
      font-size: 19px;
      letter-spacing: 0.1em;
      padding: 10px 20px;
      pointer-events: none;
   }

   .news .sidebar ul {
      display: block;
      background-color: #fff;
      margin-top: 10px;
      padding: 11px 22px 41px;
      font-size: 17px;
      letter-spacing: 0.1em;
   }

   .news .sidebar ul li:not(:last-child) {
      padding-bottom: 7px;
   }

   .news .sidebar ul li a {
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      overflow: hidden;
      position: relative;
      padding-left: 18px;
   }

   .news .sidebar ul li a:before {
      content: '・';
      position: absolute;
      top: 0;
      left: 0;
   }

   .news .block {
      width: calc(100% - 245px);
   }

   .news-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      line-height: 31px;
   }

   .news-list a {
      display: block;
   }

   .news-list figure {
      width: 100%;
      height: 256px;
      overflow: hidden;
      position: relative;
   }

   .news-list figure img {
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.3s;
   }

   .news-list .text {
      background-color: #fff;
      letter-spacing: 0.1em;
      padding: 25px 28px 30px;
   }

   .news-list time {
      display: block;
      color: #b8bdc0;
   }

   .news-list .ttl span {
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      overflow: hidden;
   }

   .news-list a:hover figure img {
      transform: scale(1.05);
   }

   .news .pagination {
      padding-top: 42px;
   }

   .news .next_prev_post {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      padding-top: 50px;
   }

   .news .next_prev_post .item {
      border: 1px solid;
   }

   .news .next_prev_post .item+.item {
      border-left: 0;
   }

   .news .next_prev_post a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 20px;
      position: relative;
   }

   .news .next_prev_post a:after {
      content: '';
      width: 30px;
      height: 30px;
      display: block;
   }

   .news .next_prev_post .title_area {
      width: calc(100% - 50px);
   }

   .news .next_prev_post .title {
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      overflow: hidden;
   }

   .news .next_prev_post .prev_post a {
      flex-direction: row-reverse;
   }

   .news .next_prev_post .prev_post a:after {
      background: url("../img/shared/slider-prev.png") no-repeat center top/cover;
   }

   .news .next_prev_post .next_post a:after {
      background: url("../img/shared/slider-next.png") no-repeat center top/cover;
   }

   .news .related_post {
      padding-top: 50px;
   }

   .news .related_post h3 {
      font-weight: 700;
      font-size: 24px;
      letter-spacing: 0.06em;
   }

   .news .related_post .news-list {
      padding-top: 20px;
   }

   .news.details .post_content h2 {
      font-size: 28px;
      margin: 50px 0 15px;
      border-bottom: 1px solid;
      padding-bottom: 10px;
   }

   .news.details .post_content h3 {
      font-size: 24px;
      margin: 50px 0 15px;
   }

   .news.details .post_content h4 {
      font-size: 20px;
      margin: 50px 0 15px;
   }

   .news.details .post_content h2+*,
   .news.details .post_content h3+*,
   .news.details .post_content h4+* {
      margin-top: 0;
   }

   .news.details .post_content p:not(:last-child) {
      padding-bottom: 20px;
   }
}