/* s-news css */
/*------------------------------------------------------------------------
Basic Layout (PC Layout)
------------------------------------------------------------------------*/
/* !newsInfo
---------------------------------------------------------- */
.newsInfoWrap { margin-bottom: 40px; padding: 10px; background-color: #f4f6f8; }

.newsInfoWrap.clone { display: none; }

.newsInfo { position: relative; }

.newsInfo dl { clear: both; }

.newsInfo dt { position: absolute; top: 0; width: 25%; padding: 3px 0 0; z-index: 2; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #f4f6f8; }

.newsInfo dl.active dt{
  pointer-events: none;
  cursor: default;
}

.newsInfo dd { 
  animation: tabshow 0.5s linear 0s;
 }

 @keyframes tabshow{
  from{
      opacity: 0;
  }
  to{
      opacity: 1;
  }
}

#newsInfoList01 dt { left: 0; }

#newsInfoList02 dt { left: 25%; }

#newsInfoList03 dt { left: 50%; }

#newsInfoList04 dt { left: 75%; }

.newsInfo dt a { display: block; position: relative; padding: 13px 0; border-radius: 5px 5px 0 0; text-align: center; font-weight: bold; color: #005bac; text-decoration: none; cursor: pointer; }

.newsInfo dt a:hover, .newsInfo dt a:focus, .newsInfo dl.active dt a { background-color: #fff; color: #002746; }

.newsInfo dt a:before { display: block; content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin-top: -7px; background-image: url(../images/ico_circle_r02.png); background-repeat: no-repeat; background-position: 0 0; }

#newsInfoList01 dt a:before { margin-left: -41%; }

#newsInfoList02 dt a:before { margin-left: -34%; }

#newsInfoList03 dt a:before { margin-left: -40%; }

#newsInfoList04 dt a:before { margin-left: -28%; }

.newsInfo dt a:hover:before, .newsInfo dt a:focus:before, .newsInfo dl.active dt a:before { background-image: url(../images/ico_circle_d01.png); background-position: 0 -14px; }

.newsInfo dl dd { clear: both; padding-top: 48px; }

.newsInfo.clone { display: none; }

/*---------- newsList ----------*/
.newsInfoWrap .newsList { background-color: #fff; padding: 0 10px; }

.newsList li { border-bottom: 1px solid #cdd7e5; }

.newsList li a { display: table; table-layout: fixed; width: 100%; padding: 14px 0; border-top: 3px solid #fff; border-bottom: 3px solid #fff; }

.newsList li.important a { background-color: #fff7dd; }

.newsList li a:hover, .newsList li a:focus { background-color: #e7eef8; color: #005bac; text-decoration: none; }

.newsList li .date { display: table-cell; width: 130px; }

.newsList.type04 li .date { display: block; width: auto; margin-left: 8px; }

.newsList li .date p { text-align: center; color: #545454; }

.newsList.type04 li .date p { text-align: left; }

.newsList li .icon { display: table-cell; width: 75px; }

.newsList li .icon p { width: 75px; height: 22px; line-height: 22px; border-radius: 3px; text-align: center; font-size: 1.3rem; color: #fff; }

.newsList li .icon.cat01 p { background-color: #e67171; }

.newsList li .icon.cat02 p { background-color: #5ec2d4; }

.newsList li .icon.cat03 p { background-color: #99b83c; }

.newsList li .pdf { display: table-cell; vertical-align: top; width: 45px; text-align: center; }

.newsList li .pdf img { width: 18px; height: auto; margin: 0 auto; }

.newsList li .title { display: table-cell; }

.newsList.type04 li .title { display: block; margin-left: 8px; }

.newsList li .title p { position: relative; padding: 0 10px 0 14px; }

.newsList li .title p:before { background-color: #0059af; }

.newsList li .title p:after { background-color: #fff; margin-left: -2px; }

.newsList li.important .title p:after { background-color: #fff7dd; }

.newsList li a:hover > .title p:after { background-color: #e7eef8; }

.newsList li .title p .size { margin-left: 0.5em; word-break: keep-all; }

/*---------- moreLinks ----------*/
.moreLinks .more02 { text-align: right; }

.moreLinks .more02 a { position: relative; padding-left: 15px; font-size: 1.3rem; }

.moreLinks .more02 a:before, .moreLinks .more02 a:after { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -4px; -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.moreLinks .more02 a:before { background-color: #0059af; }

.moreLinks .more02 a:after { background-color: #fff; margin-left: -2px; }

.moreLinks .more02 a:hover:before { background-color: #76a4cd; }

/*============================= BREAK POINT ===============================
Tablet Layout
=============================== BREAK POINT =============================*/
@media screen and (max-width: 768px) { /* !newsInfo
============================================================ */
  #newsInfoList01 dt { left: 0; width: 28%; }
  #newsInfoList02 dt { left: 28%; width: 23%; }
  #newsInfoList03 dt { left: 51%; width: 28%; }
  #newsInfoList04 dt { left: 79%; width: 21%; }
  .newsInfo dt a { font-size: 1.3rem; }
  #newsInfoList01 dt a:before { margin-left: -45%; }
  #newsInfoList02 dt a:before { margin-left: -45%; }
  #newsInfoList03 dt a:before { margin-left: -45%; }
  #newsInfoList04 dt a:before { margin-left: -45%; }
  .newsInfo dt a:hover:before, .newsInfo dt a:focus:before, .newsInfo dl.active dt a:before { background-position: 0 -14px; }
  .newsInfo.clone { display: none; } }
/*============================= BREAK POINT ===============================
Tablet Layout 2
=============================== BREAK POINT =============================*/
@media screen and (max-width: 568px) { .newsInfo dt a:before { background: none; }
  .newsInfo dt a:hover:before, .newsInfo dt a:focus:before, .newsInfo dl.active dt a:before { background: none; }
  .newsInfoWrap .newsList { padding: 1px 3px 3px 3px; }
  .newsList li a { display: block; padding: .5em 1em; width: auto; }
  .newsList li .date { display: block; padding: 0; width: 100%; text-align: left; }
  .newsList li .date p { text-align: left; }
  .newsList li .title { display: block; width: 100%; }
  .newsList li .title p { padding-right: 0; } }
/****************************** BREAK POINT *******************************
SP Layout
******************************* BREAK POINT ******************************/
@media screen and (max-width: 480px) { /* !newsInfo
************************************************************ */
  .newsInfoWrap { width: 100%; margin-top: 15px; padding: 0; background-color: #fff; }
  .newsInfoWrap { display: none; }
  .newsInfoWrap.clone { display: block; }
  .newsInfo dl { background: none; margin-bottom: 2px; }
  .newsInfo dt { position: relative; width: 100%; padding: 0; }

  .newsInfo dl.active dt{
    pointer-events: auto;
    cursor: auto;
  }

  #newsInfoList01 dt, #newsInfoList02 dt, #newsInfoList03 dt, #newsInfoList04 dt { left: 0; width: auto; }
  .newsInfo dt a { padding: 13px 6%; text-align: left; border-radius: 0; border: 1px solid #f4f6f8; background-color: #f4f6f8; }
  .newsInfo dt a:before { display: block; content: ""; position: absolute; left: 0; top: 50%; width: 11px; height: 11px; margin-top: -6px; background-image: url(../images/ico_circle_d01.png); background-repeat: no-repeat; background-position: 0 0; -o-background-size: 11px auto; -ms-background-size: 11px auto; -moz-background-size: 11px auto; -webkit-background-size: 11px auto; background-size: 11px auto; }
  #newsInfoList01 dt a:before, #newsInfoList02 dt a:before, #newsInfoList03 dt a:before, #newsInfoList04 dt a:before { margin-left: 2%; }
  .newsInfo dl.active dt a { border: 1px solid #cdd7e5; background-color: #fff; }
  .newsInfo dl.active dt a:before { background-image: url(../images/ico_circle_d01.png); background-position: 0 -11px; background-size: 11px auto; }
  .newsInfo dl dd { display: none; padding-top: 0; }
  /*---------- newsList --------------*/
  .newsInfoWrap .newsList { padding: 0; }
  .newsList li a { position: relative; display: block; padding: 10px 0; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
  .newsList li.important a:after { background-color: #fff7dd; }
  .newsList li a:hover:after, .newsList li a:focus:after, .newsList li.important a:hover:after, .newsList li.important a:focus:after { background-color: #e7eef8; }
  .newsList li .date { display: block; width: auto; margin-left: 3%; margin-right: 7px; }
  .newsList li .date p { display: inline; text-align: left; font-size: 1.1rem; }
  .newsList li .icon { display: block; width: auto; margin-bottom: 5px; }
  .newsList li .icon p { display: inline-block; width: 62px; height: 20px; line-height: 20px; border-radius: 2px; font-size: 1.1rem; }
  .newsList li .pdf { display: block; width: 13px; float: left; margin-left: 5%; text-align: left; }
  .newsList li .pdf img { display: block; width: 13px; height: auto; }
  .newsList.type01 li .title { display: block; margin-left: 3%; }
  .newsList.type04 li .title { margin-left: 5%; margin-top: 4px; padding: 0; }
  .newsList li .title p { position: relative; background: none; padding: 0 10% 0 0; }
  .newsList li .title p:before, .newsList li .title p:after { display: none; }
  .newsList li .title p .size { margin-left: 0.3em; word-break: keep-all; }
  .newsList li .title p .icnImportant { display: inline-block; margin-left: 10px; padding: 0 6px; font-size: 1.1rem; }
  /*---------- moreLinks ----------------*/
  .newsInfoWrap .moreLinks { text-align: center; margin: 0 auto; padding: 10px 0 18px; line-height: normal; }
  .moreLinks .rss { float: none; margin-top: 18px; }
  .moreLinks .rss a { padding-left: 17px; font-size: 1.4rem; }
  .moreLinks .rss a:before { -o-background-size: auto 12px; -ms-background-size: auto 12px; -moz-background-size: auto 12px; -webkit-background-size: auto 12px; background-size: auto 12px; }
  .moreLinks .more01 { float: none; margin-top: 18px; margin-left: 0; padding-left: 0; border: none; }
  .moreLinks .more01 a { padding-left: 19px; font-size: 1.4rem; }
  .moreLinks .more01 a:before { -o-background-size: auto 12px; -ms-background-size: auto 12px; -moz-background-size: auto 12px; -webkit-background-size: auto 12px; background-size: auto 12px; }
  .moreLinks .more02 { margin-top: 15px; text-align: center; } }