@charset "UTF-8";
@import url(/css/root.css);
/* ----------------------------------------------
　PC設定
------------------------------------------------*/
@media all and (min-width: 769px) {
  /* 一覧ページ */
  #container #contents .news_area {
    margin-bottom: var(--s16_32);
  }
  #container #contents .pagenation_f {
    margin-bottom: var(--s24_42);
  }
  #container #contents dl.news_area {
    margin-bottom: var(--s16_24);
  }
  #container #contents dl.news_area a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-gap: 0.5rem 1rem;
    padding: var(--s8_16) var(--s16_32);
    border-bottom: #ccc 1px dotted;
    transition: background-color .5s;
  }
  #container #contents dl.news_area a:hover {
    background-color: #F3F3F3;
  }
  #container #contents dl.news_area a dt {
    font-size: var(--s14_16);
    font-weight: normal;
    width: 7rem;
  }
  #container #contents dl.news_area a dd {
    font-size: var(--s14_16);
    grid-gap: 0.5rem;
    display: flex;
    align-items: flex-start;
    width: var(100% - 8rem);
  }
  #container #contents dl.news_area a dd .new {
    font-size: 14px;
    color: #fff;
    background-color: #cc050f;
    padding: 0.2em 0.5em;
    line-height: 1;
  }
  #container #contents dl.news_area a dd .txt {
    text-decoration: underline;
  }

  /* 詳細ページ */
  #container #contents .news_detail {
    margin-top: var(--s32_80);
    margin-bottom: var(--s32_80);
  }
  #container #contents .news_detail .title_area {
    margin-bottom: var(--s16_32);
  }
  #container #contents .news_detail .title_area .day {
    font-size: var(--s14_16);
    color: #ccc;
  }
  #container #contents .news_detail .title_area h1 {
    font-size: var(--s18_20);
    color: var(--sub_col02);
    font-weight: bold;
    padding: .5rem var(--s16_24);
    border-left: var(--sub_col02) 5px solid ;
    border-bottom: var(--sub_col02) 2px solid ;
    background-color: var(--sub_col01);
  }
  #container #contents .news_detail .main_image {
    margin: 0 auto var(--s16_32);
    max-width: 1000px;
    aspect-ratio: 3/2;
  }
  #container #contents .news_detail .main_image img {
    object-fit: contain;
    height: 100%;
  }
  #container #contents .news_detail .text_area {
    margin-bottom: var(--s16_32);
  }
  #container #contents .news_detail .text_area .tit {
    font-size: var(--s16_20);
    color: var(--sub_col02);
    padding: .25rem var(--s8_16);
    border-bottom: var(--sub_col02) 2px solid ;
    margin-bottom: var(--s16_32);
  }
  #container #contents .news_detail .text_area p {
    font-size: var(--s14_16);
  }
  #container #contents .news_detail .button {
    margin: 0 auto;
  }

}
/* ----------------------------------------------
　PAD以下設定
------------------------------------------------*/
@media all and (max-width: 768px) {
  /* 一覧ページ */
  #container #contents .news_area {
    margin-bottom: var(--s16_32);
  }
  #container #contents .pagenation_f {
    margin-bottom: var(--s24_42);
  }
  #container #contents dl.news_area {
    margin-bottom: var(--s16_24);
  }
  #container #contents dl.news_area a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-gap: 0.5rem 1rem;
    padding: var(--s8_16) var(--s16_32);
    border-bottom: #ccc 1px dotted;
    transition: background-color .5s;
  }
  #container #contents dl.news_area a:hover {
    background-color: #F3F3F3;
  }
  #container #contents dl.news_area a dt {
    font-size: var(--s14_16);
    font-weight: normal;
    width: 100%;
  }
  #container #contents dl.news_area a dd {
    font-size: var(--s14_16);
    grid-gap: 0.5rem;
    display: flex;
    align-items: flex-start;
    width: 100%;
  }
  #container #contents dl.news_area a dd .new {
    font-size: 14px;
    color: #fff;
    background-color: #cc050f;
    padding: 0.2em 0.5em;
    line-height: 1;
  }
  #container #contents dl.news_area a dd .txt {
    text-decoration: underline;
  }

  /* 詳細ページ */
  #container #contents .news_detail {
    margin-top: var(--s32_80);
    margin-bottom: var(--s32_80);
  }
  #container #contents .news_detail .title_area {
    margin-bottom: var(--s16_32);
  }
  #container #contents .news_detail .title_area .day {
    font-size: var(--s14_16);
    color: #ccc;
  }
  #container #contents .news_detail .title_area h1 {
    font-size: var(--s18_20);
    color: var(--sub_col02);
    font-weight: bold;
    padding: .5rem var(--s16_24);
    border-left: var(--sub_col02) 5px solid ;
    border-bottom: var(--sub_col02) 2px solid ;
    background-color: var(--sub_col01);
  }
  #container #contents .news_detail .main_image {
    margin: 0 auto var(--s16_32);
    max-width: 1000px;
    aspect-ratio: 3/2;
  }
  #container #contents .news_detail .main_image img {
    object-fit: contain;
    height: 100%;
  }
  #container #contents .news_detail .text_area {
    margin-bottom: var(--s16_32);
  }
  #container #contents .news_detail .text_area .tit {
    font-size: var(--s16_20);
    color: var(--sub_col02);
    padding: .25rem var(--s8_16);
    border-bottom: var(--sub_col02) 2px solid ;
    margin-bottom: var(--s16_32);
  }
  #container #contents .news_detail .text_area p {
    font-size: var(--s14_16);
  }
  #container #contents .news_detail .button {
    margin: 0 auto;
  }
}
/* ----------------------------------------------
　SP調整
------------------------------------------------*/
@media all and (max-width: 520px) {

}