/*新着情報*/
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.info {
  margin: 0 ;
  padding: 0 1.5em;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  text-align: left;
  line-height: 1.2em;
  color: #444;
  overflow: auto;
  width: 100%;
  max-height: 7em;}
.info dl {padding: 0.2em 0; margin: 0.5em 0!important;}
.info dt {padding-bottom: 0;width: 10.2em;}
.info dd {margin-left: 0.1em;}
  
@media only screen and (min-width: 601px) {
.info dt {clear: left;float: left;}
}

.info .badge{
  line-height: 1.1rem!important;
  height: 1.1rem!important;
  margin:0!important;
  padding: 0!important;
  min-width: 2.5rem!important;
}

/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */
 header, main, footer {
  padding-left: 250px;
}

@media only screen and (max-width : 992px) {
  header, main, footer {
    padding-left: 0;
  }
}

footer { flex-shrink: 0; }

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin:0;
}

.top-main{
  flex: 1 0 auto;
  min-height: calc(100vh - 400px);/*IE11 img resizing bug*/
}
main {
  flex: 1 0 auto;
  min-height: calc(100vh - 174px);/*IE11 img resizing bug*/
}
/*
main{
  flex: 1 0 auto;
  min-height: calc(100vh - 174px);/*IE11 img resizing bug*/
/*}*/


.flex{
display: flex;
}

.links{
  color :rgba(255, 255, 255,.8);
  padding: 16px 16px 0px 16px!important;
  line-height: 32px!important;
  }

.link{
  color :rgba(255, 255, 255,.9);
  font-size: small;
  text-decoration:none; 
  padding-left: 32px!important;
  line-height: 24px!important;
}

.link:hover{
  color: rgba(104, 210, 223,1);
  top:0!important;
  left:0!important;
  text-shadow: 1px 0 10px rgba(255,255,255,.5);
}

.logo h1{
  color: #fff;
  display: block;
  font-size: 3rem;
  font-weight: bold;
  padding: 0;
  margin-bottom: 0;
  text-align: center;
  -moz-text-shadow:0 0 10px rgba(255, 255, 255, .5),  0 0 15px #00b5e2;
  -webkit-text-shadow:0 0 10px rgba(255, 255, 255, .5),  0 0 15px #00b5e2;
  text-shadow:0 0 10px rgba(255, 255, 255, .5),  0 0 15px #00b5e2;
}

.logo span{
  font-family: "Arial", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Meiryo", sans-serif;
  font-weight: bold;
  color: #fff;
  display: block;
  font-size: 1.2rem;
  line-height: 1.1rem;
  padding-bottom: 20px;
  text-align: center;
  -moz-text-shadow:0 0 10px rgba(255, 255, 255, .5),  0 0 15px #00b5e2;
  -webkit-text-shadow:0 0 10px rgba(255, 255, 255, .5),  0 0 15px #00b5e2;
  text-shadow:0 0 10px rgba(255, 255, 255, .5),  0 0 15px #00b5e2;
}

.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
	font-size: inherit;
}

.white-number{
  vertical-align: middle;
  margin: 10px 0;
}

.white-number span{
  z-index:1;
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  margin-right: 10px;
  text-align: center;
  color:#FFF;
  font-size: x-small;
  font-weight: bold;
  top:-2px;
}

.white-number span:after{
    z-index: -1;
    content:"";
    position: absolute;
    width:2px;
    height:2px;
    display:inline-block;
    border:3px solid transparent;
    box-sizing:border-box;
    border-left-color:#005eb8;
    border-top-color:#005eb8;
    top:0px;
    left:0;
}

.white-number span.okm1:after{
  z-index: -1;
  content:"";
  position: absolute;
  width:2px;
  height:2px;
  display:inline-block;
  border:3px solid transparent;
  box-sizing:border-box;
  border-left-color:#00b5e2;
  border-top-color:#00b5e2;
  top:0px;
  left:0;
}

.cat-name-sub{
  color:#005eb8;
  padding-left: .5em;
  font-size: 1.8rem;
  font-weight: bold;
}
.cat-name{
  float: left;
  padding-right: .5em;
  font-size: 1.8rem;
  font-weight: bold;
}

.OAlink{
  padding-top:25px;
  padding-left:20px;
  display: block;
}

.contents-table{
  border-collapse: collapse;
  table-layout: fixed;
}

.contents-table thead{
  color:#fff;
  background-color:#9e9e9e ;
  line-height: 0rem;
}

.contents-table thead td{
  border:1px  solid #fff;
  text-align: center;
  border-radius: 0;
  padding:12px;
  font-size:0.8rem;
}

.contents-table thead .title{
  line-height: 0.8rem!important;
}

.contents-table thead .kind{
  line-height: auto!important;
  padding:0!important;
}
.contents-table thead .lang{
  line-height: auto!important;
  padding:0!important;
}

.contents-table tbody td{
  border:0px  solid #fff;
  text-align: center;
  margin:0!important;
  padding:0!important;
}

.contents-table .caption{
  background-color: #eeeeee;
  font-size: 0.8rem;
}
.contents-table tbody .title{
  text-align: left;
  padding:10px 6px 0px 10px!important;
}
.contents-table tbody .title p{
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 2.4rem;
  margin:0;
}

.contents-table tbody .title span{
  font-size: 0.8rem;
  line-height: 1.4rem;
  font-weight: normal;
  background-color:#ccc;
  padding: 3px 5px;
  margin-right:5px;
  border-radius: 3px;
}


.contents-table .new{
  width: auto;
display: inline-block;
line-height: 1rem!important;
margin:0px 5px 0px -35px!important;
border-radius: 15px!important;
text-align: center;
color:#fff;
font-size: 0.6rem!important;
background-color:#ffb549!important;
}

.contents-table .btn{
padding:0px 5px!important;
margin:10px 5px;
border-radius: 5px;
font-size: 0.8rem;
line-height: 2rem;
height: 2rem;
}

@media only screen and (min-width: 601px) {
  .contents-table .btn{
    width: 80%;
    height: 2.4rem;
    line-height: 2.4rem;
    padding:0px 10px!important;

    }
}

.contents-table .description td{
  text-align: left;
  background-color: #eeeeee;
  border-bottom:3px solid #FFF ;
  padding-bottom:10px!important;
}

.contents-table .description p{
  background-color: #fff;
  font-size: 0.8rem;
  line-height: 1rem;
  border-radius: 2px;
  margin:0px 15px 5px 15px;
  padding:5px;
}

.table-border{
  border: 1px solid #ccc;
}


.pad-left-40{
  padding-left:40px!important;
}
.pad-top-20{
  padding-top:20px!important;
}
.pad-top-40{
  padding-top:40px!important;
}
.pad-bot-60{
  padding-bottom:60px!important;
}


.mar-20{
  margin:20px 0;
}
.mar-30{
  margin:30px 0;
}
.mar-top-40{
  margin-top:40px!important;
}

.footer-links{
  color: #005eb8;
  text-decoration: underline;
}
.footer-links:active,
.footer-links:hover {
  color: #68d2df;
}

.page-footer h5{
  font-size: 1.4rem;
  line-height: 110%;
  margin: 0.82rem 0 0.656rem 0;
  padding-bottom:5px;
}

/* ポップアップ表示（初回のみ）の設定 */

.overlay{
  display:none;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.6);
  position:fixed;
  z-index:1000;
}

.btn_area{
  width:100%;
  position:absolute;
  background-color:rgba(11, 48, 142,.8) ;
  z-index:2;
  text-align: center;
}

.btn_area2{
  width:80%;
  position: relative;
  padding:20px 0;
  margin-top:10px;
  color:#fff;
  z-index:3;
  text-align: center;
}

.btn_area p{
  font-size: large;
  font-weight: bold;
  line-height: 0;
}
.btn_area span{
  font-size: small;
  margin-bottom: 20px;
  padding-bottom:20px;
}

.btn_area button{
  color:#fff;
  display:inline;
  margin:10px;
  padding:10px; 
  width: 100%;
  border: 1px solid #fff;
  background: transparent;
}

.btn_area button:hover {
  background: rgba(255, 255, 255, .4);
}


@media only screen and (min-width: 601px) {
  .btn_area{
  top:40%;
  margin-top:-75px;
  }
  .btn_area2{
  width:85%;
  }
  .btn_area button{
    width: 15%;
  }
}

@media only screen and (min-width: 600px) and (max-width: 992px) {
  .btn_area button{
    width: 40%;
  }
}

#Caution a{
  font-size: 0.6rem!important;
  line-height: 0.8rem!important;
  padding:8px!important;
  height: 40px!important;
  text-align: left;
}

@media only screen and (max-width: 600px) {
  .contents-table tbody .title span:nth-child(3)::before {
      content: "\A" !important;
      white-space: pre !important;
  }
}