/*====================

====================*/
/*===== PC =====*/
@media screen and (min-width: 768px) {
  .nnmoa-filter + .nnmoa-sec[style*="display: none;"] + .nnmoa-sec {
    padding-top: 60px;
  }

  .nnmoa-news > .nnmoa-sec:has(+ .nnmoa-sec[style*="display: none;"]) {
    padding-bottom: 100px;
  }

  .nnmoa-news__title {
    color: #333;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 60px */
    letter-spacing: 3.2px;
    width: 100%;
  }

  .nnmoa-news__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .nnmoa-news__item {
    width: 100%;
    display: flex;
    padding-bottom: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px solid #BABABA;
  }

  .nnmoa-news__date {
    color: #333;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 180%; /* 28.8px */
    letter-spacing: 1.28px;
  }

  .nnmoa-news__categories {
    display: none !important;
  }

  .nnmoa-news__content {
    width: 100%;
  }

  a.nnmoa-news__link {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    width: 100%;
  }

  a.nnmoa-news__link::after {
    content: "";
    width: 12px;
    height: 12px;
    background-image: url(/common/img/icon_arrow_accent_blue.svg);
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
  }

  a.nnmoa-news__link:hover {
    text-decoration: underline;
  }

  .nnmoa-news__link-text {
    color: #333;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 180%; /* 28.8px */
    letter-spacing: 1.28px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nnmoa-filter {
    max-width: 1000px;
    width: 100%;
    display: flex;
    padding: 60px 0 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .nnmoa-filter__title {
    max-width: 335px;
    width: 100%;
    color: #333;
    text-align: left;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 27px */
  }

  .nnmoa-filter__dropdown {
    max-width: 335px;
    width: 100%;
    border: 1px solid #BABABA;
    background-color: #FFF;
    position: relative;
  }

  /* 選択ボタン */
  .nnmoa-filter__button {
    width: 100%;
    background: #fff;
    text-align: left;
    cursor: pointer;
    position: relative;
    border: none;
    padding: 10px 19px;
    color: #333;
    text-align: center;
    font-family: 'I-OTF-UD明朝Pro R';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 180%; /* 28.8px */
    letter-spacing: 1.28px;
    z-index: 2;
  }

  .nnmoa-filter__button::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg); /* 初期状態は下向きにするなら180度回転 */
    width: 12px;
    height: 12px;
    background-color: #333;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M12 11L6 1L0 11L12 11Z" fill="black"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M12 11L6 1L0 11L12 11Z" fill="black"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: transform 0.3s; /* 回転アニメーション用 */
  }

  /* プルダウンが開いている時（ボタンに .is-active が付いた時）は上を向かせる */
  .nnmoa-filter__button.is-active::after {
    transform: translateY(-50%) rotate(0deg);
  }

  .nnmoa-filter__button.is-default {
    text-align: left;
  }

  .nnmoa-filter__button.is-default #selected-label {
    opacity: 0.4;
    text-align: left;
  }

  /* 展開されるリスト */
  .nnmoa-filter__list {
    display: none; /* 通常は隠しておく */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border-top: none;
    background-color: #F5F5F5;
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.25);
  }

  .nnmoa-filter__list.is-open {
    display: block;
  }

  /* 各選択肢 */
  .nnmoa-filter__item {
    padding: 10px;
    cursor: pointer;
    transition: background 0.3s;
    color: #333;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 180%; /* 28.8px */
    letter-spacing: 1.28px;
    border-bottom: 1px solid #D8D8D8;
  }

  .nnmoa-filter__item:first-child {
    border-top: 1px solid #BABABA;
  }

  .nnmoa-filter__item:last-child {
    border-bottom: none;
  }

  .nnmoa-filter__item.is-active,
  .nnmoa-filter__item:hover {
    background-color: #D8D8D8;
  }
}
/*===== SP =====*/
@media screen and (max-width: 767px) {
  .nnmoa-filter + .nnmoa-sec[style*="display: none;"] + .nnmoa-sec {
    padding-top: 16vw;
  }

  .nnmoa-news > .nnmoa-sec:has(+ .nnmoa-sec[style*="display: none;"]) {
    padding-bottom: 26.667vw;
  }

  .nnmoa-news__title {
    color: #333;
    font-size: 10.667vw;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 16vw */
    letter-spacing: 0.853vw;
    width: 100%;
  }

  .nnmoa-news__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5.333vw;
  }

  .nnmoa-news__item {
    width: 100%;
    display: flex;
    padding-bottom: 5.333vw;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.667vw;
    border-bottom: 0.267vw solid #BABABA;
  }

  .nnmoa-news__date {
    color: #333;
    font-size: 4.267vw;
    font-style: normal;
    font-weight: 500;
    line-height: 180%; /* 7.68vw */
    letter-spacing: 0.341vw;
  }

  .nnmoa-news__categories {
    display: none !important;
  }
  
  .nnmoa-news__content {
    width: 100%;
  }

  a.nnmoa-news__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.667vw;
    align-self: stretch;
    width: 100%;
  }

  a.nnmoa-news__link::after {
    content: "";
    display: inline-block;
    width: 3.2vw;
    height: 3.2vw;
    background-image: url(/common/img/icon_arrow_accent_blue.svg);
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
  }

  a.nnmoa-news__link:hover {
    text-decoration: underline;
  }

  .nnmoa-news__link-text {
    color: #333;
    font-size: 4.267vw;
    font-style: normal;
    font-weight: 500;
    line-height: 180%; /* 7.68vw */
    letter-spacing: 0.341vw;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow: hidden;
  }

  .nnmoa-filter {
    width: 100%;
    display: flex;
    padding: 16vw 5.333vw 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.667vw;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .nnmoa-filter__title {
    max-width: 89.333vw;
    width: 100%;
    color: #333;
    text-align: left;
    font-size: 4.267vw;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 7.2vw */
  }

  .nnmoa-filter__dropdown {
    width: 100%;
    border: 0.267vw solid #BABABA;
    background-color: #FFF;
    position: relative;
  }

  /* 選択ボタン */
  .nnmoa-filter__button {
    width: 100%;
    background: #fff;
    text-align: left;
    cursor: pointer;
    position: relative;
    border: none;
    padding: 2.667vw 5.067vw;
    color: #333;
    text-align: center;
    font-family: 'I-OTF-UD明朝Pro R';
    font-size: 3.733vw;
    font-style: normal;
    font-weight: 500;
    line-height: 180%; /* 7.68vw */
    letter-spacing: 0.341vw;
    z-index: 2;
  }

  .nnmoa-filter__button::after {
    content: "";
    position: absolute;
    right: 4vw;
    top: 50%;
    transform: translateY(-50%) rotate(180deg); /* 初期状態は下向きにするなら180度回転 */
    width: 3.2vw;
    height: 3.2vw;
    background-color: #333;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M12 11L6 1L0 11L12 11Z" fill="black"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M12 11L6 1L0 11L12 11Z" fill="black"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: transform 0.3s; /* 回転アニメーション用 */
  }

  /* プルダウンが開いている時（ボタンに .is-active が付いた時）は上を向かせる */
  .nnmoa-filter__button.is-active::after {
    transform: translateY(-50%) rotate(0deg);
  }

  .nnmoa-filter__button.is-default {
    text-align: left;
  }

  .nnmoa-filter__button.is-default #selected-label {
    opacity: 0.4;
    text-align: left;
  }

  /* 展開されるリスト */
  .nnmoa-filter__list {
    display: none; /* 通常は隠しておく */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border-top: none;
    background-color: #F5F5F5;
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 1.067vw 6.4vw 0 rgba(0, 0, 0, 0.25);
  }

  .nnmoa-filter__list.is-open {
    display: block;
  }

  /* 各選択肢 */
  .nnmoa-filter__item {
    padding: 2.667vw;
    cursor: pointer;
    transition: background 0.3s;
    color: #333;
    text-align: center;
    font-size: 3.733vw;
    font-style: normal;
    font-weight: 500;
    line-height: 180%; /* 7.68vw */
    letter-spacing: 0.341vw;
    border-bottom: 0.267vw solid #D8D8D8;
  }

  .nnmoa-filter__item:first-child {
    border-top: 0.267vw solid #BABABA;
  }

  .nnmoa-filter__item:last-child {
    border-bottom: none;
  }

  .nnmoa-filter__item.is-active,
  .nnmoa-filter__item:hover {
    background-color: #D8D8D8;
  }
}