/* Scss Document */
/* Scss Document */
.news__title {
  margin: 0;
  padding: 0 0 0 20px;
  font-size: 1.125rem;
  font-weight: 700;
  position: relative; }
  .news__title::before {
    content: '';
    border-top: 11px solid #231815;
    border-right: 7px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 7px solid transparent;
    position: absolute;
    top: 14px;
    left: 0; }
.news__list {
  margin: 0;
  padding: 0;
  list-style: none;
  transition: 0.1s cubic-bezier(0.25, 1, 0.5, 1); }
.news__item {
  margin: 0;
  padding: 0;
  border-bottom: 1px dashed #CCC; }
  .news__item--anchor {
    padding: 30px 50px 30px 0;
    display: block;
    color: #231815 !important;
    position: relative;
    transition: 0.1s cubic-bezier(0.25, 1, 0.5, 1); }
    .news__item--anchor svg {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 50%;
      right: 0;
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      transition: 0.1s cubic-bezier(0.25, 1, 0.5, 1); }
      .news__item--anchor svg .st0 {
        fill: #EEE;
        transition: 0.1s cubic-bezier(0.25, 1, 0.5, 1); }
    .news__item--anchor::before {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #f3f3f3;
      transform: scaleX(0);
      transform-origin: center right;
      transition: transform 0.2s ease;
      z-index: -1; }
    .news__item--anchor:hover {
      padding: 30px 50px 30px 10px;
      text-decoration: none; }
      .news__item--anchor:hover svg {
        right: 10px; }
        .news__item--anchor:hover svg .st0 {
          fill: #CCC; }
      .news__item--anchor:hover::before {
        transform-origin: center left;
        -moz-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1); }
      .news__item--anchor:hover .news__item--cate {
        background-color: #FFF; }
  .news__item--data {
    margin: 0;
    padding: 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center; }
  .news__item--cate {
    margin: 0;
    padding: 3px 10px;
    color: #999;
    font-size: 0.875rem;
    line-height: 1.0;
    background-color: #f3f3f3;
    border: 1px solid #999;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px; }
  .news__item--date {
    margin: 0 0 0 20px;
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    font-family: "Reddit Sans", serif;
    line-height: 1.0; }
  .news__item--title {
    margin: 20px 0 0;
    padding: 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center; }
    .news__item--title img {
      margin: 0 0 0 10px; }

.newsCate {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
  align-content: center; }
  .newsCate__item {
    margin: 5px 0 5px 10px;
    padding: 0; }
    .newsCate__item--anchor {
      padding: 0 20px;
      color: #999 !important;
      font-size: 1.125rem;
      line-height: 1.0;
      background-color: #f3f3f3;
      border: 1px solid #CCC;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
      position: relative;
      transition: 0.1s cubic-bezier(0.25, 1, 0.5, 1); }
      .newsCate__item--anchor:hover {
        color: #FFF !important;
        text-decoration: none;
        background-color: #999;
        border: 1px solid #999;
        top: 1px;
        left: 1px; }

@media (max-width: 1000px) {
  .newsCate {
    margin: 60px 0 0; }
    .newsCate__item {
      margin: 5px 10px 5px 0; }
      .newsCate__item--anchor {
        padding: 5px 10px;
        font-size: 0.875rem;
        display: block; } }
.newsDetail {
  margin: 0;
  padding: 0; }
  .newsDetail__title {
    margin: 0 0 70px;
    padding: 20px 0 40px;
    border-top: 10px solid #EEE;
    border-bottom: 1px solid #EEE; }
    .newsDetail__title--txt {
      font-size: 2.5rem;
      font-weight: 500;
      line-height: 1.5; }
    .newsDetail__title--data {
      margin: 15px 0 0;
      padding: 0;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      align-items: center; }
    .newsDetail__title--cate {
      margin: 0;
      padding: 3px 10px;
      color: #999;
      font-size: 0.875rem;
      line-height: 1.0;
      background-color: #f3f3f3;
      border: 1px solid #999;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px; }
    .newsDetail__title--date {
      margin: 0 0 0 20px;
      padding: 0;
      font-size: 1rem;
      font-weight: 600;
      font-family: "Reddit Sans", serif;
      line-height: 1.0; }
  .newsDetail__btn {
    width: 360px;
    height: 90px;
    margin: 80px auto 0; }
    .newsDetail__btn--anchor {
      width: 100%;
      height: 100%;
      color: #FFF !important;
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.0;
      background-color: #90c31f;
      border: 1px solid #90c31f;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      position: relative;
      transition: 0.1s cubic-bezier(0.25, 1, 0.5, 1); }
      .newsDetail__btn--anchor span {
        padding: 0 0 0 34px;
        background-image: url("../img/common/ico02.svg");
        background-position: left center;
        background-repeat: no-repeat;
        background-size: 24px 18px; }
      .newsDetail__btn--anchor:hover {
        color: #90c31f !important;
        text-decoration: none;
        background-color: #FFF;
        top: 1px;
        left: 1px; }
        .newsDetail__btn--anchor:hover span {
          background-image: url("../img/common/ico02_green.svg"); }

@media (max-width: 1100px) {
  .newsDetail .system-free img {
    width: 100%;
    height: auto; } }
@media (max-width: 1000px) {
  .newsDetail__title--txt {
    font-size: 2rem; } }
@media (max-width: 600px) {
  .newsDetail__title--txt {
    font-size: 1.5rem; } }
@media (max-width: 420px) {
  .newsDetail__btn {
    width: 100%; } }
.docs {
  margin: 70px 0 0;
  padding: 30px 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  border: 10px solid #EEE;
  position: relative; }
  .docs__title {
    width: 240px;
    margin: 0;
    padding: 0;
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
    position: relative; }
  .docs__data {
    width: calc(100% - 240px);
    margin: 0;
    padding: 20px 40px 20px 80px;
    border-left: 1px solid #231815;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .docs__data--list {
      margin: 0;
      padding: 0;
      list-style: none; }
    .docs__data--item {
      margin: 0 0 15px;
      padding: 0;
      position: relative; }
      .docs__data--item:last-child {
        margin: 0; }
      .docs__data--item a {
        color: #231815;
        font-size: 1.125rem;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        align-items: center;
        position: relative;
        transition: 0.1s cubic-bezier(0.25, 1, 0.5, 1); }
        .docs__data--item a:hover {
          text-decoration: none;
          -moz-transform: translateX(10px);
          -webkit-transform: translateX(10px);
          transform: translateX(10px); }
        .docs__data--item a img {
          margin: 0 10px 0 0; }
        .docs__data--item a span {
          width: calc(100% - 24px - 10px); }

@media (max-width: 900px) {
  .docs {
    padding: 30px;
    flex-direction: column; }
    .docs__title {
      width: 100%; }
    .docs__data {
      width: 100%;
      margin: 30px 0 0;
      padding: 30px 0 0;
      border-top: 1px solid #231815;
      border-left: none; } }
@media (max-width: 900px) {
  .docs {
    padding: 20px; }
    .docs__data {
      margin: 20px 0 0;
      padding: 20px 0 0; } }