@charset "UTF-8";

/*Recet
---------------------------*/
html,body,h1,h2,h3,p,ul,li,dl,dt,dd{
margin: 0;
padding: 0;
font-family:"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
line-height: 1.0;
outline: none;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
outline: none;
}
img{
border: none;
vertical-align: bottom;
max-width: 100%;
height: auto;
}

/*container
--------------------------*/
body{
position: relative;
}

.container{
max-width: 1280px;
margin: 0 auto;
}

p{
line-height: 1.5;
}

/*header
---------------------------*/
header{
text-align: center;
/*background: linear-gradient(to top,#212131,#11111c);*/
/*background-color: #11111c;*/
color: #eee;
padding: 75px 0 40px;
background: linear-gradient(180deg, #004476 0%, #001442 50%, #000421 100%);
animation: huerotator 60s infinite alternate;
position: relative;
}
.header-back{
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
width: 100%;
height: 274px;
background: #111;
background: linear-gradient(180deg, #000421 0%, #001442 50%, #004476 100%);
animation: huerotator2 40s infinite alternate;
}
@keyframes huerotator {
  0%{
    filter: hue-rotate(0deg);
  }
  50%{
    filter: hue-rotate(360deg);
  }
  100%{
    filter: hue-rotate(0deg);
  }
}/*end*/
@keyframes huerotator2 {
  0%{
    opacity: 1.0;
    filter: hue-rotate(0deg);
  }
  50%{
    filter: hue-rotate(360deg);
  }
  100%{
    opacity: 0.4;
    filter: hue-rotate(0deg);
  }
}/*end*/

.croom{
background-color: linear-gradient(to top,#163922,#11111c);
}
header h1{
font-family: 'oswald';
font-weight: 400;
font-size: 40px;
margin-bottom: 16px;
}
header .name{
font-size: 15px;
display: block;
}
header p{
font-size: 16px;
line-height: 1.3;
letter-spacing: 1px;
color: #999;
margin-bottom: 40px
}
header .name{
font-size: 14px;
margin-top: 1px
}

/*nav====================================
=========================================*/
/*PC nav======================*/
.pcnav{
display: block;
}
.pcnav ul{
width: 60%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.pcnav li{
width: inline-block;
}
.pcnav a{
display: block;
/*line-height: 24px;*/
color: #bbb;
font-family: 'Oswald';
font-weight: 300;
font-size: 14px;
letter-spacing: 0.5px;
text-align: center;
}
.pcnav a:hover{
color: #ddd;
/*border-bottom: 1px solid;*/
}
.pcnav .current{
color: #eee;
/*border-bottom: 1px solid;*/
}
.pcnav .line{
display: block;
background: #fff;
height: 2px;
width: 0;
margin-top: 8px;
}
.pcnav .current .line{
width: 100%;
}

/*menu btn===============================*/
.btn{
display: none;
width: 50px;
height: 50px;
background-color: #666;
  
position: fixed;
top: 0;
right: 16px;
cursor: pointer;
z-index: 5;
}

.btn-s{
display: none;
width: 50px;
height: 50px;
background-color: #444;
transform: skewX(10deg);
position: fixed;
top: 0;
right: 21px;
z-index: 1;
}

.btn span,.btn span::before, .btn span::after{
display: block;
width: 32px;
height: 3px;
background-color: #fff;
border-radius: 6px;

margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
transition: 0.4s;
}
.btn span::before, .btn span::after{
content: "";
display: block;
}
.btn span::before{
top: -22px;
}
.btn span::after{
bottom: -22px;
}
.btn.open span{
background-color: transparent;
width: 38px;
}
.btn.open span::before{
/*transform:GPUを使ってスムーズに動く*/
transform: rotateZ(-315deg);
top: 0;
width: 38px;
}
.btn.open span::after{
transform: rotateZ(315deg);
bottom: 0;
width: 38px;
}

/*SP nav===================*/
.spnav{
/*display: none;*/
position: fixed;
width: 50%;
top: 0;
margin-left: 100%;
padding-top: 50px;
background-color: rgba(10, 10, 10, 0.95);
transition: 1s;
}
.spnav.open{
display: block;
margin-left: 50%;
}
.spnav a{
display: block;
line-height: calc( (100vh - 50px) / 4 );
color: #ccc;
font-family: 'Oswald';
font-weight: 400;
font-size: 18px;
letter-spacing: 0.5px;
text-align: center;
/*background-color: rgba(10, 10, 10, 0.9);*/
transition: 1s;
}
.spnav a:hover{
background-color: rgba(0, 0, 0, 0.8);
color: #00f3ff;
text-shadow: 0 0 15px #00f3ff;
}
.spnav .current{
/*background-color: rgba(80, 0, 0, 0.85);*/
background-color: rgba(0, 0, 0, 0.8);
color: #00f3ff;
text-shadow: 0 0 15px #00f3ff;
}

/*main
---------------------------*/
main{
background: url(../img/dot15.png);
background-color: #d7d7d7;
padding: 60px 20px 20px;
animation: move 24s linear infinite;
}
@keyframes move{
  0% { background-position: 0 0; }
  100% { background-position: -360px 360px; }
}
/*main title*/
.wrap-h2{
display: flex;
align-items: flex-end;
border-bottom: 1px dotted #242732;
margin-bottom: 40px;
color: #333;
}
.wrap-h2 h2{
display:block;
font-size: 20px;
padding-bottom: 10px;
margin-right: 20px;
}
.wrap-h2 p{
font-size: 14px;
padding-bottom: 10px;
}


/*link
---------------------------*/
.data-link{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.data-link>li{
width: 24%;
margin-bottom:33px;
}
.data-link a{
display: block;
background: #fff;
border-radius: 3px;
border: 1px solid #ccc;
}

/*アニメーション用*/
.animate{
  opacity: 0;
  transform:translateY(50px);
  transition: all 2s;
}

/*link-image
---------------------------*/
.data-link .thumbnail{
height: 200px;
/*background: #999;*/
border-radius: 3px 3px 0 0;
position: relative;
overflow: hidden;
}
.data-link img{
width: 100%;
height: 200px;
object-fit: cover;
object-position: 50% 0;
border-radius: 3px 3px 0 0;
border-bottom: 1px solid #eee;
}

/*マスク部分================================*/
.data-link .thumbnail .mask{
position: absolute;
left: 0;
bottom: -100%;
width: 100%;
box-sizing: border-box;

opacity: 0;
/*transform: translateY(100%);*/
transition: all 1.0s ease 0s;
}

.data-link .thumbnail .mask>li{
padding: 5px 8px;
background: rgba(0, 0, 40, 0.8);
color: #fff;
font-size: 11px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.data-link .thumbnail .mask>li:first-child{
border-top: none;
}

.data-link .thumbnail:hover .mask{
opacity: 1;
bottom: 0;
/*transform: translateY(0);*/
}

.data-link .thumbnail:hover{
opacity: 0.7;
transition: all 0.8s ease 0s;
}

/*プログラムページ用===========================*/
div.mask{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 40, 0.8);
color: #fff;
font-size: 14px;
text-align: center;
box-sizing: border-box;
line-height: 1.5;
padding-top: 40px;
}
.programme .line2{
padding-top: 62px;
}
.programme .line3{
padding-top: 54px;
}

/*矢印=========================*/
.mask .arrow{
display: block;
width: 150px;
margin: 36px auto 0;
position: relative;
}
.mask .arrowhead{
display: block;
width: 150px;
height: 1px;
background-color: #fff;
margin: auto;
background-color: transparent;
}
.mask .arrowhead::before,.mask .arrowhead::after{
display: block;
content:'';
width: 14px;
height: 1px;
background-color: #fff;
transition: 0.5s 1.5s;
right: 50%;
}
.mask .arrowhead::before{
position: absolute;
top:-4px;
transform: rotateZ(36deg);
}
.mask .arrowhead::after{
position: absolute;
top:4px;
transform: rotateZ(-36deg);
}
.arrowbody{
display: block;
width: 150px;
height: 1px;
background-color: #fff;
margin: 20px auto;
transform: scaleX(0);
transition: 0.5s 1.5s;
}

.data-link .thumbnail:hover .arrowhead::before,
.data-link .thumbnail:hover .arrowhead::after{
right: -3px;
}
.data-link .thumbnail:hover .arrowbody{
transform: scaleX(1);
}

/*link-text
---------------------------*/
.data-link p{
padding: 10px 15px 9px;
line-height: 1.4;
font-size: 13px;
color: #444;
border-top:1px solid #ddd;
}
.data-link .date{
font-family: 'Oswald';
font-weight: 400;
font-size: 12px;
letter-spacing: 1px;
color: #7a7d89;
margin-bottom: 3px;
display: block;
}

.data-link .last-list{
display: block;
}


/*トップへボタン
==================================*/
.flt_btn{
position: fixed;
bottom: 10px;
right: 10px;
display: none;
transform: scale(0,1) rotateZ(270deg);
transition: 0.3s ease-in;
}
.open{
transform: scale(1,1) rotateZ(0);
}
.flt_btn i{
width: 50px;
line-height: 50px;
background: rgba(180, 0, 0, 0.85);
color: #fff;
border-radius: 50%;
text-align: center;
font-size: 22px;
cursor: pointer;
transition: 0.5s;

}
.flt_btn i:hover{
background: rgba(140, 0, 0, 0.85);
}


/*footer
==================================*/
footer{
background: #11111c;
padding: 20px 0;
color: #aaa;
text-align: center;
font-size: 12px;
}



/*バナーページ=============================
=========================================*/
.bn-contents{
max-width: 980px;
}
.bn-link{
padding: 0 10px;
margin: 0 auto;
}
.banner{
width: 300px;
height: auto;
}

.bn-link li{
margin: 0 10px 10px ;
text-align: center;
}
.bn-link img{
height: auto;
outline:none;
transition: 0.8s ease;
}
.bn-link li:hover img{
opacity: 0.8;
}
.bn-link p{
display: inline-block;
color: #333;
padding: 12px 10px 1px;
font-size: 14px;
margin-bottom: 10px;
}
.bn-link p::before,.bn-link p::after{
color: #333;
padding: 12px 8px 1px;
font-size: 15px;
opacity: 0;
transition: 0.8s;
}
.bn-link p::before{
content: "【";
}
.bn-link p::after{
content: "】";
}
.bn-link li:hover p::before,.bn-link li:hover p::after{
opacity: 1;
}
.bn-link p>span{
font-family: 'Oswald';
font-weight: 400;
font-size: 14px;
}


/*プログラムページ==========================
=========================================*/
.programme li{
position: relative;
}
.ribbon{
  display: inline-block;
  position: absolute;
  top: 8px;
  left: -8px;
  width: 80px;
  height: 36px;/*高さ*/
  line-height: 36px;/*高さ*/
  text-align: center;
  font-size: 16px;
  background: #7478ae;
  color: #FFF;
  font-family: "Oswald";
  font-weight: 500;
  box-sizing: border-box;
  z-index: 10;
}
.ribbon:after,.ribbon:before {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;

}
.ribbon:before {
  bottom: -8px;
  left: 0px;
  border-width: 0 8px 8px 0px;
  border-color: transparent #373952 transparent transparent ;
  border-style: solid;
  z-index: 1;
}
.ribbon:after {
  top: 0;
  right: -10px;
  border-width: 18px 10px 18px 0px;
  border-color: #7478ae transparent #7478ae transparent ;
  border-style: solid;
  z-index: 5;
}
.ribbon.ribbon-jq{
background: #0865a7;
}
.ribbon.ribbon-jq:before{
  border-color: transparent #023152 transparent transparent ;
}
.ribbon.ribbon-jq:after{
  border-color: #0865a7 transparent #0865a7 transparent ;
}
.ribbon.ribbon-js{
background: #ceb32f;
}
.ribbon.ribbon-js:before{
  border-color: transparent #7b6a1a transparent transparent ;
}
.ribbon.ribbon-js:after{
  border-color: #ceb32f transparent #ceb32f transparent ;
}

/*ワードプレスページ========================
=========================================*/
.wp-wrap{
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.wp-wrap2{
flex-flow: row-reverse;
}
.wp-contents h3{
font-family: "Oswald";
font-weight: 500;
font-size: 22px;
margin-bottom: 30px;
color: #242732;
position: relative;
margin-left: 32px;
}
.wp-contents h3 span{
font-weight: bold;
}
.wp-contents h3::before{
content: "";
display: block;
width: 28px;
height: 2px;
background-color: #777;
position: absolute;
top:50%;
left: -32px;
}
.wp-contents h3:last-of-type{
margin-top: 50px;
}

.wp_moc{
display:block;
margin: 0 50px 0 0;
width: 500px;
transition: 1s;
}
.wp_moc:hover{
opacity: 0.8;
}
.wp-wrap2 .wp_moc{
margin: 0 0 0 50px;
}

.wp-inner{
max-width: 280px
}
.wp-inner dt{
color: #4e5f7e;
display: block;
font-family: "Oswald";
font-size: 17px;
margin: 0 0 2px 0;
line-height: 1.4;

}
.wp-inner dt i{
font-size: 18px;
margin-right: 3px;
}
.wp-inner dd{
color: #333;
font-size: 14px;
margin: 0 0 20px 0;
text-align: justify;
line-height: 1.4;
}


/*media queries===================================
==================================================
==================================================*/
@media screen and (max-width:960px){
.data-link>li{
width: 32%;
}

.data-link .last-list{
display: none;
}

}/*960 end*/


@media screen and (max-width:767px){
.data-link>li{
width: 48.5%;
}
.data-link .last-list{
display: none;
}
.header-back{
height: 250px;
}
.pcnav{
display: none;
}
.btn{
display: block;
}
.btn-s{
display: block;
}

.wp_moc,.wp-wrap2 .wp_moc{
margin: 0 auto 30px;
}
.wp-wrap{
display: block;
margin-bottom: 10px;
}
.wp-inner{
max-width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.wp-inner dt{
width: 10%;
margin: 0 0 2px 0;
}
.wp-inner dt i{
font-size: 18px;
margin-right: 3px;
}
.wp-inner dd{
width: 90%;
margin: 4px 0 20px 0;
}
}/*767 end*/

/*max-width600px=======================================*/
@media screen and (max-width:600px){
.data-link>li{
max-width: 400px;
width: 100%;
margin: 0 auto;
margin-bottom:24px;
}

header{
padding: 40px 0 30px;
}
header p{
margin-bottom: 15px
}
.header-back{
height: 180px;
}

.pcnav ul{
width: 240px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}

main{
padding: 30px 20px 10px;
}
.wrap-h2{
display: block;
border-bottom: none;
margin-bottom: 15px;
color: #242732;
}
.wrap-h2 h2{
margin-right: 0;
text-align: center;
}
.wrap-h2 p{
text-align: center;
font-size: 14px;
}

.data-link .last-list{
display: none;
}

/*ワードプレスページ*/
.wp-inner{
max-width: 100%;
display: block;
justify-content: space-between;
flex-wrap: no-wrap;
}
.wp-inner dt{
width: 100%;
}
.wp-inner dd{
width: 100%;
}
}/*600 end*/