@charset "utf-8";

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

top.css

=====================================2021.5.6*/

/*-------------------------------------
 topContainerArea
-------------------------------------*/
#topContainerArea {
  clear: both;
  position: relative;
}
.topContentsArea {
  position: relative;
}
.topContentsArea .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

#topContainerArea:after,
.topContentsArea:after,
.topContentsArea .inner:after {
  clear: both;
  display: block;
  content: "";
}

.topContentsArea .forPC { display: block; }
.topContentsArea .forSP { display: none; }


/*-------------------------------------
 topUrgentArea
-------------------------------------*/
.topUrgent {
  margin: 0 0 60px 0;
  padding: 55px 55px 15px 55px;
  border: 5px solid #2c4198;
}
.topUrgent .section {
  padding-bottom: 40px;
}
.topUrgent h2 {
  margin: 0 0 30px 0;
  padding: 10px 0 0 0;
  font-size: 158%;
  font-weight: bold;
  border-top: 1px solid #d2d2d2;
}
.topUrgent h2 span {
  display: block;
  padding: 0 0 0 14px;
  border-left: 8px solid #2c4198;
}
.topUrgent h3 {
  margin: 0 0 30px 0;
  padding: 0 0 5px 0;
  font-size: 143%;
  font-weight: bold;
  border-bottom: 1px solid #2c4198;
}
.topUrgent h4 {
  margin: 0 0 15px 0;
  color: #2c4198;
  font-size: 129%;
  font-weight: bold;
}
.topUrgent p {
  font-size: 115%;
  line-height: 1.9;
}
.topUrgentBox {
  margin: 0 40px 55px 40px;
  padding: 25px 38px;
  color: #dd0a17;
  border: 3px solid #dd000d;
  background: #fff1f1;
}
.topUrgentBox h2 {
  margin: 0;
  padding: 5px 0 20px 0;
  font-size: 158%;
  text-align: center;
  border-top: none;
}
.topUrgentBox p {
  font-size: 100%;
  line-height: 1.8;
}
.topUrgentList {
  padding: 35px 40px 20px 40px;
  background: #f5f5f5;
}
.topUrgentList ul li {
  position: relative;
  margin: 0 0 15px 0;
  padding: 0 0 0 15px;
  font-size: 115%;
}
.topUrgentList ul li:before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2c4198;
}


/*-------------------------------------
 topNoticeArea
-------------------------------------*/
.topNoticeArea {
  margin: 0 0 60px 0;
  background: #f0f2f8;
}
.topNotice {
  padding: 45px 0;
}
.topNotice h2 {
  margin: 0 0 30px 0;
  padding: 0 0 0 50px;
  color: #2c4198;
  font-size: 172%;
  font-weight: bold;
  background: url(/content/300340273.png) no-repeat 0 0;
}
.topNotice p {
  font-size: 115%;
  line-height: 1.9;
}


/*-------------------------------------
 topVisualArea
-------------------------------------*/
.topVisualArea {
  margin: 0 0 45px 0;
  overflow: hidden;
}
.topVisualArea .inner {
  padding: 0;
}
.topVisualArea .slides ul li {
  position: relative;
  overflow: hidden;
}
.topVisualArea .slides ul {
  overflow: hidden;
}
.topVisualArea .slides ul li {
  display: none;
}
.topVisualArea .slides ul li:first-child {
  display: block;
}
.topVisualArea .slides ul li img {
  max-width: 100%;
}
.topVisualArea .control {
  position: absolute;
  left: 0;
  bottom: 13px;
  z-index: 10;
  width: 100%;
  line-height: 0;
  text-align: center;
}
.topVisualArea .flex-control-nav {
  display: inline-block;
  vertical-align: middle;
}
.topVisualArea .flex-control-nav li {
  display: inline-block;
  vertical-align: middle;
}
.topVisualArea .flex-control-nav li a {
  position: relative;
  display: block;
  width: 6px;
  height: 6px;
  margin: 0 7px;
  outline: 0;
  text-indent: -9999px;
  border-radius: 50%;
  background: #fff;
}
.topVisualArea .flex-control-nav li a.flex-active:before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #fff;
}
.topVisualArea .slidesControl {
  position: relative;
  z-index: 10;
  display: inline-block;
  margin: 0 5px;
  line-height: 0;
  vertical-align: middle;
}
.topVisualArea .slidesControl ul li {
  display: inline-block;
  margin: 0 2px;
  outline: none;
  padding: 3px;
}
.topVisualArea .slidesControl ul li:focus {
  outline: 1px solid #fff;
}
.topVisualArea .slidesControl p {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 10px;
  outline: none;
  cursor: pointer;
  opacity: 0.4;
}
.topVisualArea .slidesControl .slidesPlay p {
  background: url(/content/300340269.png) no-repeat center center;
}
.topVisualArea .slidesControl .slidesStop p {
  background: url(/content/300340267.png) no-repeat center center;
}
.topVisualArea .slidesControl .slidesPlay.active p,
.topVisualArea .slidesControl .slidesStop.active p {
  opacity: 1;
}


/*-------------------------------------
 topNewsArea
-------------------------------------*/
.topNewsTab {
  box-shadow: 0 -7px 0 #f5f5f5 inset;
}
.topNewsTab ul {
  display: table;
  margin: 0 auto;
  text-align: center;
  border-spacing: 6px 0;
}
.topNewsTab ul li {
  display: table-cell;
  width: 220px;
  color: #797979;
  font-size: 143%;
  vertical-align: middle;
  cursor: pointer;
  border-bottom: 7px solid #2c4198;
}
.topNewsTab ul li a {
  display: block;
  padding: 15px 0 8px 0;
  color: #666666;
  text-decoration: none;
}
.topNewsTab ul li.current {
  color: #fff;
  background: #2c4198;
}
.topNewsTab ul li.current a {
  color: #fff;
}

.topNewsList {
  padding: 30px 0 45px 0;
}
.topNewsList ul {
  display: table;
  width: 100%;
}
.topNewsList ul li {
  display: table-row;
}
.topNewsList ul li > div {
  display: table-cell;
  padding: 0 0 20px 0;
  vertical-align: top;
}
.topNewsList ul li .date {
  width: 8em;
  padding: 0 10px 20px 0;
  font-size: 115%;
}
.topNewsList ul li .category {
  width: 9em;
  padding: 3px 15px 20px 0;
  font-size: 93%;
}
.topNewsList ul li .category .cat {
  padding: 3px 0 5px 0;
  color: #fff;
  line-height: 1.1;
  text-align: center;
  background: #424242;
}
.topNewsList ul li .category .cat01 { background: #a700de; }
.topNewsList ul li .category .cat02 { background: #015ccd; }
.topNewsList ul li .category .cat03 { background: #2b7e0a; }
.topNewsList ul li .ttl {
  font-size: 115%;
}
.topNewsList ul li .ttl a {
  color: #232323;
}
.topNewsBtn {
  padding: 30px 0 0 0;
  text-align: center;
}
.topNewsBtn a {
  display: inline-block;
  min-width: 250px;
  padding: 6px 30px;
  color: #232323;
  font-size: 143%;
  text-decoration: none;
  border: 3px solid #2c4198;
  background: url(/content/300340276.png) no-repeat right 14px center;
  box-sizing: border-box;
}

.topRssBtn {
  padding: 15px 0 0px 0;
  text-align: center;
}

.topRssBtn a{
  display: inline-block;
  font-size: 115%;
  padding: 0 13px 0 0;
  background: url(/content/300340319.png) no-repeat right 0.5em
}

/*-------------------------------------
 topProjectArea
-------------------------------------*/
.topProjectArea {
  background: #f5f5f5;
}
.topProject {
  padding: 20px 0 43px 0;
  overflow: hidden;
}
.topProject h2 {
  margin: 0 0 14px 0;
  color: #2c4198;
  font-size: 172%;
  font-weight: bold;
  border-left: 8px solid #2c4198;
}
.topProject h2 em {
  display: block;
  padding: 0 0 0 10px;
}
.topProject ul li {
  position: relative;
  float: left;
  width: 33.333%;
  padding: 0 1px 1px 0;
  box-sizing: border-box;
}
.topProject ul li a {
  display: block;
}
.topProject ul li img {
  max-width: 100%;
}
.topProject ul li .caption {
  position: absolute;
  left: 0;
  right: 1px;
  bottom: 1px;
  padding: 7px;
  color: #fff;
  font-size: 122%;
  text-align: center;
  background: url(/content/300340271.png) no-repeat right 9px center rgba(56,65,75,0.9);
}


/*-------------------------------------
 topLinkArea
-------------------------------------*/
.topLinkArea {
  color: #fff;
  background: #2c4198;
}
.topLinkArea a {
  color: #fff;
}
.topLinkArea h2 {
  margin: 0 0 14px 0;
  color: #fff;
  font-size: 172%;
  font-weight: bold;
  border-left: 8px solid #fff;
}
.topLinkArea h2 em {
  display: block;
  padding: 0 0 0 10px;
}
/* topLink */
.topLink {
  float: left;
  width: 68%;
  padding: 15px 0;
  box-sizing: border-box;
}
.topLink ul {
  overflow: hidden;
}
.topLink ul li {
  float: left;
  width: 25%;
  padding: 0 30px 0 0;
  text-align: center;
  box-sizing: border-box;
}
.topLink ul li a {
  position: relative;
  display: block;
  height: 0;
  padding: 98% 0 0 0;
  text-decoration: none;
  border: 3px solid #fff;
}
.topLink ul li a .icn {
  position: absolute;
  top: 22%;
  left: 0;
  right: 0;
  height: 64px;
  margin: 0;
  background-repeat: no-repeat;
  background-position: center top;
}
.topLink ul li a .ttl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  font-size: 108%;
}
.topLink ul li a .ttl img {
  display: inline-block;
  width: 13px;
  margin: 0 0 0 5px;
  vertical-align: middle;
}

/* topMedia */
.topMedia {
  float: right;
  width: 32%;
  padding: 15px 5px 15px 30px;
  background: #23347a;
  box-sizing: border-box;
}
.topMedia img {
  max-width: 100%;
}
.topMedia .pic {
  float: left;
  width: 113px;
  padding: 0 16px 0 0;
}
.topMedia .pic img {
  border: 1px solid #acb3c3;
  box-sizing: border-box;
}
.topMedia .item {
  overflow: hidden;
}
.topMedia .ttl {
  margin: 0 0 10px 0;
  font-size: 108%;
}
.topMedia .ttl img {
  vertical-align: middle;
}
.topMedia .btn a {
  display: inline-block;
  padding: 3px 25px 3px 5px;
  text-decoration: none;
  border: 1px solid #fff;
  background: url(/content/300340280.png) no-repeat right 9px center;
  box-sizing: border-box;
}
.topMedia .sns {
  clear: both;
  margin: 0 0 0 -20px;
  padding: 20px 0 0 0;
  text-align: center;
}
.topMedia .sns li {
  display: inline-block;
  width: 33px;
  margin: 0 10px;
}


/*-------------------------------------
 topBannerArea
-------------------------------------*/
.topBannerArea {
  background: #f5f5f5;
}
.topBanner {
  padding: 35px 0 5px 0;
  overflow: hidden;
}
.topBanner ul {
  margin: 0 -18px;
  letter-spacing: -0.4em;
  overflow: hidden;
}
.topBanner ul li {
  display: inline-block;
  width: 273px;
  padding: 0 18px 30px 18px;
  letter-spacing: normal;
  text-align: center;
  vertical-align: top;
}
.topBanner ul li img {
  max-width: 100%;
}






































@media screen and (max-width: 768px) {

/*-------------------------------------
 topContainerArea
-------------------------------------*/
.topContentsArea .inner {
  padding: 0;
}

.topContentsArea .forPC { display: none; }
.topContentsArea .forSP { display: block; }


/*-------------------------------------
 topUrgentArea
-------------------------------------*/
.topUrgent {
  margin: 0 0 40px 0;
  padding: 14px 7px 5px 7px;
  border: 3px solid #2c4198;
}
.topUrgent .section {
  padding-bottom: 30px;
}
.topUrgent h2 {
  margin: 0 0 15px 0;
  padding: 9px 0 0 0;
  font-size: 1.53rem;
}
.topUrgent h2 span {
  border-left: 7px solid #2c4198;
}
.topUrgent h3 {
  margin: 0 0 15px 0;
  font-size: 138.46%;
}
.topUrgent h4 {
  font-size: 1.23rem;
}
.topUrgent p {
  font-size: 107.69%;
  line-height: 1.9;
}
.topUrgentBox {
  margin: 0 7px 30px 7px;
  padding: 15px 18px;
  border-width: 2px;
}
.topUrgentBox h2 {
  margin: 0;
  padding: 5px 0 15px 0;
  font-size: 161.53%;
}
.topUrgentList {
  padding: 15px 18px 5px 18px;
}
.topUrgentList ul li {
  padding: 0 0 0 14px;
  font-size: 107.69%;
}


/*-------------------------------------
 topNoticeArea
-------------------------------------*/
.topNoticeArea {
  margin: 0 0 40px 0;
}
.topNotice {
  padding: 25px 10px;
}
.topNotice h2 {
  margin: 0 0 15px 0;
  padding: 0 0 5px 45px;
  font-size: 161.53%;
  background: url(/content/300340272.png) no-repeat 0 0 / 34px 34px;
}
.topNotice p {
  font-size: 107.69%;
}


/*-------------------------------------
 topVisualArea
-------------------------------------*/
.topVisualArea {
  margin: 0 0 10px 0;
}
.topVisualArea .slides ul li p {
  position: relative;
  height: 0;
  padding-top: 46.666%;
}
.topVisualArea .slides ul li img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: inherit;
  max-height: 140%;
}
.topVisualArea .control {
  position: relative;
  left: 0;
  bottom: auto;
  display: block;
  width: auto;
  padding: 10px 45px;
}
.topVisualArea .flex-control-nav li a {
  width: 9px;
  height: 9px;
  margin: 0 9px;
  background: #2c4198;
}
.topVisualArea .flex-control-nav li a.flex-active:before {
  top: -6px;
  left: -6px;
  width: 19px;
  height: 19px;
  border: 1px solid #2c4198;
}

.topVisualArea .slidesControl {
  position: absolute;
  bottom: 7px;
  right: 5px;
  width: 48px;
  height: 14px;
  margin: 0;
}
.topVisualArea .slidesControl ul li {
  margin: 0 0 0 10px;
  padding: 0;
}
.topVisualArea .slidesControl p {
  width: 12px;
  height: 14px;
}
.topVisualArea .slidesControl .slidesPlay p {
  background: url(/content/300340268.png) no-repeat center center / 12px 14px;
}
.topVisualArea .slidesControl .slidesStop p {
  background: url(/content/300340266.png) no-repeat center center / 12px 14px;
}


/*-------------------------------------
 topNewsArea
-------------------------------------*/
.topNewsTab {
  padding: 0 6px;
  box-shadow: 0 -6px 0 #f5f5f5 inset;
}
.topNewsTab ul {
  width: 100%;
  border-spacing: 4px 0;
}
.topNewsTab ul li {
  width: 33.333%;
  font-size: 107.69%;
  line-height: 1.2;
  border-bottom: 6px solid #2c4198;
}
.topNewsTab ul li a {
  padding: 11px 0 7px 0;
}
.topNewsList {
  padding: 30px 10px;
}
.topNewsList ul {
  display: block;
}
.topNewsList ul li {
  display: block;
  padding: 0 0 12px 0;
}
.topNewsList ul li > div {
  display: block;
  padding: 0;
}
.topNewsList ul li .date {
  float: left;
  width: 8em;
  padding: 0 5px 0 0;
  font-size: 107.69%;
}
.topNewsList ul li .category {
  float: left;
  padding: 0;
  font-size: 92.3%;
}
.topNewsList ul li .category .cat {
  padding: 2px 0 4px 0;
}
.topNewsList ul li .ttl {
  clear: both;
  padding: 5px 0 0 0;
  font-size: 107.69%;
}
.topNewsBtn {
  padding: 20px 0 0 0;
}
.topNewsBtn a {
  min-width: 225px;
  padding: 6px 30px;
  font-size: 138.46%;
  border: 3px solid #2c4198;
  background: url(/content/300340274.png) no-repeat right 13px center / 10px 15px;
}
.topRssBtn {
  display: none;
  
}

/*-------------------------------------
 topProjectArea
-------------------------------------*/
.topProject {
  padding: 10px 9px 20px 10px;
}
.topProject h2 {
  margin: 0 0 10px 0;
  font-size: 169.23%;
  border-left: 6px solid #2c4198;
}
.topProject ul li {
  width: 50%;
}
.topProject ul li .caption {
  padding: 4px;
  font-size: 107.69%;
  background: url(/content/300340270.png) no-repeat right 5px center / 8px 12px rgba(56,65,75,0.9);
}


/*-------------------------------------
 topLinkArea
-------------------------------------*/
.topLinkArea h2 {
  margin: 0 0 10px 0;
  font-size: 169.23%;
  border-left: 6px solid #fff;
}
/* topLink */
.topLink {
  float: none;
  width: auto;
  padding: 10px 0 20px 10px;
}
.topLink ul li {
  float: left;
  width: 25%;
  padding: 0 10px 0 0;
  text-align: center;
  box-sizing: border-box;
}
.topLink ul li a {
  height: auto;
  padding: 0;
  border: none;
}
.topLink ul li a .icn {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0;
  padding: 96% 0 0 0;
  border: 2px solid #fff;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 45px 45px;
  box-sizing: border-box;
}
.topLink ul li.link01 a .icn { background-image: url(/content/300340290.png); }
.topLink ul li.link02 a .icn { background-image: url(/content/300340287.png); }
.topLink ul li.link03 a .icn { background-image: url(/content/300340284.png); }
.topLink ul li.link04 a .icn { background-image: url(/content/300340281.png); }

.topLink ul li a .ttl {
  position: relative;
  bottom: auto;
  margin: 5px 0 0 0;
  line-height: 1.3;
}

/* topMedia */
.topMedia {
  float: none;
  width: auto;
  padding: 10px 10px 20px 10px;
}
.topMedia .pic {
  width: 100px;
  padding: 0 15px 0 0;
}
.topMedia .ttl {
  font-size: 107.69%;
}
.topMedia .size {
  margin: 0 0 20px 0;
  font-size: 107.69%;
}

.topMedia .btn a {
  display: block;
  padding: 7px 10px;
  font-size: 138.46%;
  text-align: center;
  border: 2px solid #fff;
  background: url(/content/300340278.png) no-repeat right 10px center /10px 15px;
}
.topMedia .sns {
  margin: 0;
}


/*-------------------------------------
 topBannerArea
-------------------------------------*/
.topBanner {
  padding: 20px 0 10px 0;
}
.topBanner ul {
  margin: 0 5px;
}
.topBanner ul li {
  width: 50%;
  padding: 0 5px 10px 5px;
  box-sizing: border-box;
}






}















@media screen and (min-width: 769px) {

.topNewsTab li,
.topNewsBtn a,
.topProject a,
.topLink ul li a,
.topMedia .btn a,
.topMedia .sns a,
.topBanner ul li a {
  transition: all 0.1s linear;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  backface-visibility: hidden;
}
.topNewsTab li:hover,
.topProject a:hover,
.topMedia .sns a:hover,
.topBanner ul li a:hover {
  opacity: 0.6;
}

.topNewsBtn a:hover {
  color: #fff;
  background: url(/content/300340275.png) no-repeat right 14px center #2c4198;
}

.topLink ul li a:hover {
  color: #2c4198;
  background-color: #fff;
}
.topLink ul li.link01 a:hover .icn img { background-image: url(/content/300340291.png); }
.topLink ul li.link02 a:hover .icn { background-image: url(/content/300340288.png); }
.topLink ul li.link03 a:hover .icn { background-image: url(/content/300340285.png); }
.topLink ul li.link04 a:hover .icn { background-image: url(/content/300340282.png); }

.topMedia .btn a:hover {
  color: #2c4198;
  background: url(/content/300340279.png) no-repeat right 9px center #fff;
}


}
@media screen and (max-width: 768px) {
  .topLink ul li.link01 a .icn img,
  .topLink ul li.link02 a .icn img,
  .topLink ul li.link03 a .icn img,
  .topLink ul li.link04 a .icn img {
    display: none;
  }
}

.topMedia .ttl img.icn {
  width: 13px;
}

.topMedia .pic {
  text-align: center;
}

.topMedia {
  min-height: 257px;
}
@media screen and (max-width: 768px) {
  .topMedia {
    min-height: inherit;
  }
}

.topMedia .pic {
  text-align: center;
  float: none;
  margin: auto;
  padding: 0;
}