@charset "utf-8";
/* CSS Document */

/*-------------------------
ヘッダー
-------------------------*/
#TopHeader {
  background: url("../images/TopHeader_bgimg.jpg")  top center;
  background-size: cover;
  overflow: hidden;
}
#TopHeader > div{
  position: relative;
  overflow: hidden;
}
#TopHeader > div img,
#TopHeader .catch img{
  width: 100%;
}
#TopHeader .block{
  padding: 0;
}
#TopHeader .summary{
}
#TopHeader h1{
  max-width: 460px;
  width: 46.93%;
  padding: 20px 30px;
  background: #fff;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
#TopHeader .detail{
  position: absolute;
  top: 74px;
  right: 0;
  max-width: 482px;
  width: 49.18%;
}
#TopHeader .link_li{
  position: absolute;
  top: 209px;
  left: 18.67%;
  max-width: 328px;
  width: 33.46%;
}
#TopHeader .contact{
  position: absolute;
  top: 20px;
  right: 0;
}
#TopHeader .contact a{
  display: block;
  padding: 9px 22px;
  background: #0072ff;
  color: #fff;
  line-height: 34px;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.1em;
  transition:.5s;
}
#TopHeader .contact a:hover {
  opacity: 0.8;
  transition:.5s;
}
#TopHeader .entry{
  max-width: 860px;
  margin: 0 auto 15px;
  padding-top: 305px;
}
#TopHeader .entry ul{
  font-size: 0;
  overflow: hidden;
  text-align: center;
}
#TopHeader .entry li{
  display: inline-block;
  max-width: 410px;
  width: 47.67%;
  box-sizing: border-box;
}
#TopHeader .entry li:first-child{
  margin-right: 4.65%;
}
#TopHeader .catch{
  margin-top: 15px;
  padding: 20px;
  background-color: rgba(0,104,183,0.6);
  text-align: center;
}
#TopHeader .catch p{
  max-width: 475px;
  margin: 0 auto;
}
#TopHeader .catch p img{
  vertical-align: baseline;
}
#TopHeader a img {
  transition: 0.5s;
}
#TopHeader a img:hover {
  opacity: 0.8;
}

@media screen and (max-width: 860px){
  #TopHeader .link_li{
    top: 43.9%;
  }
}

@media screen and (max-width: 768px){
  #TopHeader{
    height: auto;
    background: url("../images/Header_bgimg_smt.jpg") center;
    background-size: cover;
  }
  #TopHeader h1{
    position: static;
    width: 56%;
    padding: 15px 30px;
    box-sizing: border-box;
  }
  #TopHeader .detail{
    position: static;
    width: 84%;
    margin: 15px auto 0;
  }
  #TopHeader .link_li{
    top: 45px;
    right: 4%;
    left: unset;
    width: 43.2%;
  }
  #TopHeader .contact{
    top: 10px;
    right: 4%;
    width: 34.66%;
  }
  #TopHeader .contact a{
    padding: 8px 10px;
    font-size: 12px;
  }
  #TopHeader .entry{
    padding-top: 16px;
  }
  #TopHeader .entry li{
    float: none;
    width: 82.93%;
    margin: 0 auto;
  }
  #TopHeader .entry li:first-child{
    margin: 0 auto 18px;
  }
  #TopHeader .catch{
    padding: 10px 0;
    height: auto;
  }
  #TopHeader .catch p{
    width: 63.06%;
  }
}

/*-------------------------
カルーセル
-------------------------*/
.carousel{
  padding: 10px 20px;
  background-color: rgba(0,104,183,0.6);
  text-align: center;
  overflow: hidden;
}
#carouselList{
  max-width: 964px;
  margin: 0 auto;
}
#carouselList .item{
}
#carouselList .item a{
  display: block;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  font-feature-settings: "palt";
}


@media screen and (max-width: 768px){
	.carousel{
	  padding: 10px;
	}
  #carouselList .item a{
    font-size: 18px;
  }
}

/*-------------------------
本文
-------------------------*/
main {
}

/*-------------------------
Report
-------------------------*/
#Report{
  padding: 60px 0;
}
#Report .block{
  width: auto;
  max-width: 948px;
  overflow: hidden;
}
#Report h3{
  margin-bottom: .5em;
  color: #0068b7;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.5;
}
.Report-title{
  margin-bottom: 20px;
  padding: 0;
  background: none;
  font-size: 36px;
  font-weight: bold;
  line-height: 1.23;
  text-align: center;
}
.Report-text{
  margin-bottom: 30px;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}
.table-scroll{
  overflow: auto;
  white-space: nowrap;
}
.table-closure{
  width: 100%;
  word-wrap: break-word;
}
.table-closure th,
.table-closure td{
  padding: 10px 20px;
  text-align: center;
  border: 1px solid #333;
}
.table-closure th{
  color: #fff;
  background: #666;
}
.table-closure td{
  font-size: 20px;
}
.table-closure-row-latest td{
  font-weight: bold;
}

/*-------------------------
Pickup + レクタングル広告 + Facebook
-------------------------*/
#PickupAd{
  padding: 60px 0;
  background-color: #fffcf0;
}
#PickupAd .block{
  width: auto;
  max-width: 948px;
  overflow: hidden;
}
.pickup-block{
  float: left;
  width: 65.4%;
}
.pickup-block h2{
  margin-bottom: 30px;
  padding: 0 0 20px;
  background: none;
  border-bottom: 2px solid #0068b7;
  font-size: 30px;
  text-align: left;
}
.pickupList{
  display: flex;
  flex-wrap: wrap;
  margin-right: -20px;
}
.pickupList li{
  flex: 0 0 50%;
  max-width: 50%;
  margin-bottom: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
.pickupList li a{
  display: block;
  height: 100%;
  padding: 20px;
  color: #333;
  background-color: #fff;
  border: solid 1px #0068b7;
  box-sizing: border-box;
  transition: border-color .2s;
}
.pickupList li a:hover{
  border: solid 1px #fff;
  transition: border-color .2s;
}
.pickupList-header{
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  font-size: 14px;
}
.pickupList-header-number{
  margin-right: 10px;
  padding: 2px 15px;
  background-color: #333;
  color: #fff;
}
.pickupList-header-category{
  color: #0068b7;
}
.pickupList-title{
  font-size: 16px;
}
.greeting-block{
  float: left;
  width: 65.4%;
}
.greeting-block h2{
  margin-bottom: 50px;
  padding: 0;
  background: transparent;
  color: #0068b7;
  font-size: 16px;
  line-height: 1.7;
  font-weight: bold;
  text-align: left;
}
.greeting-block h2 span{
  display: block;
  margin-bottom: 25px;
  font-size: 36px;
  line-height: 1.23;
}
.greeting-block p{
  margin-bottom: 1.8em;
  font-size: 16px;
  line-height: 1.75;
}
.greeting-block p:last-child{
  margin-bottom: 0;
}
.ad-block{
  float: right;
  width: 31.6%;
}
.js-Ad li{
  margin-bottom: 20px;
}
.js-Ad li img{
  width: 100%;
  transition: 0.2s;
}
.bnr-block{
  max-width: 300px;
  margin: 0 auto 20px;
}
.bnr-block img{
  width: 100%;
  transition: 0.2s;
}
.bnr-block a img:hover,
.js-Ad li a img:hover{
  opacity: 0.8;
  transition: 0.2s;
}
#Facebook h3{
  background-color: #0068b7;
  color: #fff;
  font-size: 28px;
  font-weight: normal;
  text-align: center;
}
@media all and (-ms-high-contrast: none) {
  #Facebook h3 {
    line-height: 1;
    padding: 13px 0 3px;
  }
}
#Facebook iframe {
  display: block;
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 768px){
  .pickup-block{
    float: none;
    width: 100%;
    margin: 0 auto 30px;
    box-sizing: border-box;
  }
  .greeting-block{
    float: none;
    width: 100%;
    margin: 0 auto 30px;
    box-sizing: border-box;
  }
  .ad-block{
    float: none;
    width: 100%;
    max-width: 500px;
    margin: 0 auto 20px;
  }
  .js-Ad{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    margin-right: -12px;
  }
  .js-Ad li{
    flex: 0 0 50%;
    max-width: calc(50% - 12px);
    margin: 0 12px 20px 0;
  }
  .fb-container{
    width: 100%;
  }
}

@media screen and (max-width: 480px){
  .pickupList{
    display: block;
  }
  .pickupList li{
    width: 100%;
    max-width: none;
  }
  .js-Ad{
    display: block;
    margin-right: 0;
  }
  .js-Ad li{
    max-width: 300px;
    margin: 0 auto 20px;
  }
}

/*-------------------------
Topics
-------------------------*/
#Topics{
  padding-bottom: 125px;
}
#Topics > h2{
  margin-bottom: 64px;
}
#Topics .block{
  max-width: 948px;
}
.TopicsList{
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  margin-right: -24px;
}
.TopicsList li{
  flex: 0 0 33.33333%;
  max-width: calc(33.33333% - 24px);
  margin: 0 24px 24px 0;
  background-color: #fcfcfc;
  border-bottom: solid 2px #e0e0e0;
  border-left: solid 1px #f5f5f5;
  border-right: solid 1px #f5f5f5;
  box-sizing: border-box;
}
.TopicsList li a{
  display: block;
  height: 100%;
  color: #333;
  transition:.5s;
}
.TopicsList li a:hover{
  opacity: 0.5;
  transition:.5s;
}
.TopicsImage{
  border: solid 1px #ebebeb;
}
.TopicsImage img{
  width: 100%;
}
.TopicsTextbox{
  padding: 15px 20px;
}
.TopicsTextbox .date{
  margin-bottom: 5px;
  color: #666;
  font-size: 14px;
}
.TopicsTextbox h3{
  margin-bottom: 10px;
  color: #0068b7;
  font-size: 16px;
}
.TopicsTextbox h3{
  text-decoration: underline;
} 
.TopicsTextbox .text{
  font-size: 16px;
}

@media screen and (max-width: 768px){
  #Topics{
    padding-bottom: 70px;
  }
  #Topics .block{
    padding: 0;
  }
  .TopicsList{
    margin-right: -12px;
    padding: 0 8.5%;
  }
  .TopicsList li{
    flex: 0 0 50%;
    max-width: calc(50% - 12px);
    margin: 0 12px 12px 0;
  }
  .TopicsTextbox h3{
    margin-bottom: 20px;
  }
}

/*-------------------------
SPONSORS
-------------------------*/
.sponsors {
  margin-bottom: 150px;
}
.sponsors h3 {
  margin-top: 100px;
  font-size: 38px;
  font-weight: bold;
  text-align: center;
}
.sponsors h3.platinum{
  color: #3189cc;
}
.sponsors h3.gold{
  color: #ccbf31;
}
.sponsors h3.silver{
  color: #808080;
}
.sponsors ul{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}
.sponsors ul li {
  margin: 0 20px;
  text-align: center;
}
.sponsors ul li img{
  width: 100%;
}
.sponsors ul a img:hover{
  opacity: 0.8;
}

@media screen and (max-width: 768px){
  .sponsors .block{
    box-sizing: border-box;
  }
  .sponsors h3 {
    margin-top: 75px;
    font-size: 24px;
  }
  .sponsors ul{
    display: block;
    padding: 0 6%;
  }
  .sponsors ul + ul{
    margin-top: 0;
  }
  .sponsors ul li{
    margin: 40px 0;
  }
  .sponsors ul li img{
    width: 100%;
    max-width: 370px;
  }
}