body {
  background: #ffffff;
}

#news-index-container {
  max-width: 120rem;
  margin: 0 auto;
  margin-top: 5rem;
  padding: 3rem;
  font-size: 1.6rem;
  color: var(--theme-text-dark-color);
  #news-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--theme-color);
    .breadcrumbs {
      display: flex;
      margin-bottom: 3rem;
      color: var(--theme-hiding-color);
      li {
        &:not(:first-child) {
          &:before {
            content: '>';
            margin: 0 .5rem;
          }   
        }   
        a { 
          text-decoration: underline;
        }   
      }   
    }
    h1 {
      font-size: 5rem;
    }
  } 
  ul {
    padding: 2rem 1rem;
    border-radius: 0 0 2rem 2rem;
    background-color: #ffffff;
    margin-bottom: 5rem;
    li {
      border-bottom: 1px solid var(--theme-border-color);
      a { 
        display: flex;
        padding: 1rem;
        font-size: 1.6rem;
        line-height: 2.4rem;
        color: var(--theme-text-dark-color);
        &:before {
          content: ''; 
          margin-right: 1.5rem;
          display: block;
          width: 6.5rem;
        }   
        .news {
          &.published {
            width: calc(20% - 8rem);
          }   
          &.title {
            width: 80%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
          }   
        }   
      }   
      &:first-child {
        a { 
          &:before {
            content: 'NEW';
            font-size: 1.4rem;
            padding: .1rem;
            background-color: var(--theme-accent-color);
            text-align: center;
            border-radius: .5rem;
            color: var(--theme-text-force-color);
          }   
        }   
      }   
    }   
  }
  .back-top {
    color: var(--theme-hiding-color);
    &:before {
      content: '<<';
      margin-right: 1rem;
    }
  }
}

#news-container {
  max-width: 120rem;
  margin: 0 auto;
  margin-top: 5rem;
  padding: 3rem;
  font-size: 1.6rem;
  color: var(--theme-text-dark-color);
  #news-header {
    margin-bottom: 5rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--theme-color);
    .breadcrumbs {
      display: flex;
      margin-bottom: 1rem;
      color: var(--theme-hiding-color);
      li {
        &:not(:first-child) {
          &:before {
            content: '>';
	    margin: 0 .5rem;
	  }
	}
	a {
          text-decoration: underline;
	}
      }
    }
    #news-thumbnail {
      margin-bottom: 3rem;
      height: 50rem;
      img {
	width: 100%;
	height: 100%;
        display: block;
        object-fit: cover;
      }
    }
    .news-published {
      display: block;
      margin-bottom: 1rem;
    }
    #news-title {
      font-size: 3rem;
      font-weight: bolder;
    }
  }
  #news-content {
    .news-heading {
      font-size: 4rem;
      border-left: 1rem solid var(--theme-color);
      padding-left: 1rem;
      margin-bottom: 1rem;
      display: block;
    }
    #main-content {
      margin-bottom: 5rem;
      min-height: 20rem;
      line-height: 2.4rem;
    }
    #gallery-wrap {
      max-width: 60rem;
      margin-bottom: 5rem;
      #gallery {
        padding-top: calc(68.5% + 2rem);
        position: relative;
        #gallery-inner {
          height: 100%;
	  width: 100%;
	  position: absolute;
	  top: 0;
          .swiper {
            width: 100%;
            height: 100%;
            .swiper-slide {
	      text-align: center;
	      font-size: 1.8rem;
	      background: var(--theme-base-color);;
	      display: flex;
              align-items: center;
	      justify-content: center;
	      background-size: cover;
	      background-position: center;
	      img {
                display: block;
	        width: 100%;
	        height: 100%;
	        object-fit: contain;
	      }
            }
            &.mySwiper {
              height: 20%;
	      box-sizing: border-box;
	      padding: 1rem 0;
	      .swiper-slide {
                width: 25%;
	        height: 100%;
	        opacity: 0.4;
	        &.swiper-slide-thumb-active {
                  opacity: .8;
	        }
	      }
            }
            &.mySwiper2 {
              height: 80%;
	      width: 100%;
	      --swiper-navigation-color: var(--theme-text-force-color);
	      --swiper-pagination-color: var(--theme-text-force-color);
            }
          }
        }
      }
    }
  }
  .back-top {
    color: var(--theme-hiding-color);
    &:before {
      content: '<<';
      margin-right: 1rem;
    }
  }
}

@media screen and (max-width: 640px) {
  #news-index-container {
    padding: 1rem;
    .news-list {
      li {
        a {
	  padding: 0.5rem;
          flex-direction: column;
	  &:before {
            margin-bottom: 1rem;
	  }
	  .news {
	    &.published,
	    &.title {
              width: 100%;
	      white-space: unset;
	    }
	  }
	}
      }
    }
  }
  #news-container {
    padding: 1rem;
    #news-header {
      #news-thumbnail {
        height: 25rem;
      }
      #news-title {
        font-size: 2.4rem;
	line-height: 3rem;
      }
      .breadcrumbs {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }
    }
  }
}