News（お知らせ）

<h2 class="e-heading e-headingdesign">
    <span class="e-headingdesign_headingSub">News</span>
    <span class="e-headingdesign_headingMain">お知らせ</span>
</h2>
<div class="m-newslist">
    <ul class="m-newslist_items">
        <li class="m-newslist_item">
            <span class="m-newslist_date">2023年6月1日</span>
            <a href="#"><span class="m-newslist_category e-label e-labeldesign03">カテゴリ名</span></a>
            <span class="m-newslist_text"><a href="#" class="m-newslist_link">長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。</a></span>
        </li>
        <li class="m-newslist_item">
            <span class="m-newslist_date">2023年6月1日</span>
            <a href="#"><span class="m-newslist_category e-label e-labeldesign03">カテゴリ名</span></a>
            <span class="m-newslist_text"><a href="#" class="m-newslist_link">長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。</a></span>
        </li>
        <li class="m-newslist_item">
            <span class="m-newslist_date">2023年6月1日</span>
            <a href="#"><span class="m-newslist_category e-label e-labeldesign03">カテゴリ名</span></a>
            <span class="m-newslist_text"><a href="#" class="m-newslist_link">長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。</a></span>
        </li>
        <li class="m-newslist_item">
            <span class="m-newslist_date">2023年6月1日</span>
            <a href="#"><span class="m-newslist_category e-label e-labeldesign03">カテゴリ名</span></a>
            <span class="m-newslist_text"><a href="#" class="m-newslist_link">長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。</a></span>
        </li>
    </ul>
</div>
<div class="e-center-button">
    <a href="#" class="e-button e-buttondesign03 e-arrow-outline-right">一覧を見る</a>
</div>

<h2 class="e-heading e-headingdesign">
 <span class="e-headingdesign_headingSub">News</span>
 <span class="e-headingdesign_headingMain">お知らせ</span>
</h2>

<div class="m-news_wrap">
 <dl class="m-news_dl">
  <dt class="m-news_date">2023年6月1日</dt>
  <dd class="m-news_text"><a href="" class="m-news_link">長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。</a></dd>
  <dt class="m-news_date">2023年6月1日</dt>
  <dd class="m-news_text"><a href="" class="m-news_link">長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。</a></dd>
  <dt class="m-news_date">2023年6月1日</dt>
  <dd class="m-news_text"><a href="" class="m-news_link">長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。</a></dd>
  <dt class="m-news_date">2023年6月1日</dt>
  <dd class="m-news_text"><a href="" class="m-news_link">長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。</a></dd>
  <dt class="m-news_date">2023年6月1日</dt>
  <dd class="m-news_text"><a href="" class="m-news_link">長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。長いテキストが入ります。</a></dd>
 </dl>
</div>

.m-news_dl {
  padding: 1.5rem 0;
  border-bottom: 0.1rem solid #ccc;
}
.m-news_date {
  padding-bottom: 5px;
}
@media screen and (min-width: 768px) {
  .m-news_date {
    clear: left;
    float: left;
    width: 15%;
  }
}
.m-news_text {
  word-wrap: break-word;
}
@media screen and (min-width: 768px) {
  .m-news_text {
    margin-left: 15%;
  }
}
@media screen and (max-width: 767px) {
  .m-news_text {
    margin-left: 0;
  }
}

.m-newslist {
  border-top: 0.1rem dashed #ccc;
}
.m-newslist_item {
  padding: 1.5rem 0.5rem;
  border-bottom: 0.1rem dashed #ccc;
}
@media screen and (min-width: 768px) {
  .m-newslist_item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
}
@media screen and (max-width: 767px) {
  .m-newslist_item {
    display: block;
  }
}
.m-newslist_date {
  font-size: 1.6rem;
  margin-right: 1rem;
}
@media screen and (min-width: 768px) {
  .m-newslist_date {
    flex: 1;
  }
}
@media screen and (min-width: 768px) {
  .m-newslist_category {
    flex: 1;
  }
}
@media screen and (min-width: 768px) {
  .m-newslist_text {
    flex: 7;
    padding: 0 2rem;
  }
}
.m-newslist_link {
  word-wrap: break-word;
}
@media screen and (max-width: 767px) {
  .m-newslist_link {
    display: block;
    margin-top: 1rem;
  }
}

.m-news {
    &_dl {
        padding: 1.5rem 0;
        border-bottom: 0.1rem solid #ccc;
    }
    &_date {
        padding-bottom: 5px;
        @include mq(pc) {
            clear: left;
            float: left;
            width: 15%;
        }
    }
    &_text {
        word-wrap: break-word;
        @include mq(pc) {
            margin-left: 15%;
        }
        @include mq(sp) {
            margin-left: 0;
        }    
    }
}

//日付とカテゴリとタイトルを横並びにしたお知らせ
.m-newslist {
    border-top: 0.1rem dashed #ccc;
    &_items {

    }
    &_item {
        padding: 1.5rem 0.5rem;
        border-bottom: 0.1rem dashed #ccc;
        @include mq(pc) {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
        }
        @include mq(sp) {
            display: block;
        }
    }
    &_date {
        font-size: 1.6rem;
        margin-right: 1rem;
        @include mq(pc) {
            flex: 1;
        }
    }
    &_category {
        @include mq(pc) {
            flex: 1;
        }
    }
    &_text {
        @include mq(pc) {
            flex: 7;
            padding: 0 2rem;
        }
    }
    &_link {
        word-wrap: break-word;
        @include mq(sp) {
            display: block;
            margin-top: 1rem;
        }
    }
}