@charset "utf-8";
/* CSS Document */
/******************************************************************************
 Default CSS Reset
******************************************************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,figure{
 margin:0;
 padding:0;
}
table{
 border-collapse:collapse;
 table-layout:fixed;
}
fieldset,img{
 border:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
 font-style:normal;
 font-weight:normal;
}
ol,ul{
 list-style:none;
}
caption{
 text-align:left;
}
h1,h2,h3,h4,h5,h6{
 font-size:100%;
 font-weight:normal;
}
img {
 vertical-align: bottom;
 /* chormeで画像のぼやけ回避 */
 -webkit-backface-visibility: hidden; 
}
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
}
input[type="submit"]:-webkit-search-decoration,
input[type="button"]:-webkit-search-decoration {
  display: none;
}
input[type="submit"]:focus,
input[type="button"]:focus {
  outline-offset: -2px;
}
/******************************************************************************
 General Setting
******************************************************************************/
body {
 margin:0;
 padding:0;
 font-family: 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 color: #FFF;
 word-wrap : break-word;
 -webkit-font-smoothing: antialiased;
 position: relative;
 background: #000000;
 line-height: 1.3;
}
a {
 color: #FFF;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 text-decoration: none;
 outline:none;
}
a:focus, *:focus { outline:none; }
/*** align ***/
.ar { text-align:right;}
.al { text-align:left;}
.ac { text-align:center;}
/*** clearfix ***/
.cf:after{
 content: "."; 
 display: block; 
 height: 0; 
 font-size:0; 
 clear: both; 
 visibility:hidden;
}

/*** font ***/
.jp {
 font-family: 'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", sans-serif;
 font-weight: 400;
}
.en{
 font-family: 'Play', sans-serif;
 line-height:1.5em;
 font-weight:bold;
}
.robot{
 font-family: 'Roboto', sans-serif;
}
.robocon{
 font-family: 'Roboto Condensed', sans-serif;
}
.kan {
 font-family: 'DF-KanTeiRyu-W9', sans-serif;
}

/*** text color ***/
.red { color:#C00; font-weight:bold;}
.blue { color: #55aada;}
.metaric {
color: #FFF;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5f6f6+0,8a8b8e+25,dddfe3+62,dddfe3+77,a5a5a5+97 */
background: -webkit-linear-gradient(left, #f5f6f6 0%,#8a8b8e 25%,#dddfe3 62%,#dddfe3 77%,#a5a5a5 97%); /* Chrome10-25,Safari5.1-6 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#a5a5a5',GradientType=1 ); /* IE6-9 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@media screen and (min-width: 768px) {
a:hover .metaric {
 background: none;
 color: #55aada;
 -webkit-background-clip:none;
 -webkit-text-fill-color:rgba(85,170,220,1);
}
}
.sky {
color: #50a8d9;  
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,50a8d9+100 */
background: -webkit-linear-gradient(top, #ffffff 0%,#50a8d9 100%); /* Chrome10-25,Safari5.1-6 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#50a8d9',GradientType=0 ); /* IE6-9 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.nolink{
	pointer-events:none;
}
/********************************************************************************************************
 PC
********************************************************************************************************/
@media screen and (min-width: 768px) {
.pc_none { display: none !important;}
.sp_none { display: block;}

a:hover {
 color: #92acad;
 -webkit-transition:.3s ease-in-out;
 transition:.3s ease-in-out;
}
a:hover img {
 opacity: 0.8;
 filter: alpha(opacity=80);
/* -webkit-transition: 0.3s ease-in-out;
 transition: 0.3s ease-in-out;*/
}

.border a{
 display: block;
 position: relative;
 height: 100%;
}
.border a p{
 display: block;
 width: 100%;
 height:76px;
}
.border a:after,
.border a:before,
.border a p:after,
.border a p:before{
 position:absolute;
 z-index:3;
 content:"";
 -webkit-transition:.3s ease-in-out;
 transition:.3s ease-in-out;
}
.border a:before {
 border-top: 2px solid #92acad;
 width: 0%;
 height: 100%;
 top: 0;
 right: 0;
}
.border a:after {
 border-bottom: 2px solid #92acad;
 width: 0%;
 height: 100%;
 bottom: 0;
 left: 0;
}
.border p:before {
 border-left: 2px solid #1ec5cc;
 height:0%;
 top:2px;
 left: 0;
}
.border p:after {
 border-right: 2px solid #1ec5cc;
 height:0%;
 bottom:2px;
 right: 0;
}
.border a:hover:before,
.border a:hover:after{
 width: 100%;
 visibility: visible;
}
.border a:hover p:before,
.border a:hover p:after {
 height: 100%;
 visibility: visible;
}

.linkBtn a{
 display: block;
 width: 100%;
 box-sizing: border-box;
 border: 2px solid #92acad;
 text-align: center;
 font-size: 1.2rem;
 font-weight: 900;
 position: relative;
 padding: 10px 0;
}
.linkBtn a span{
 font-size: 0.7rem;
}
.linkBtn a p{
 width: 100%;
 height: 56px;
 text-align: center;
}
.linkBtn a p span {
 position: absolute;
 text-align: center;
 top:50%;
 left: 50%;
 transform: translate(-50%,-50%);
} 

#pagenation {}
#pagenation ol{
 width: 100%;
 margin: 0 auto;
 text-align: center;
}
#pagenation ol li {
 width: 40px;
 display: inline-block;
 vertical-align: middle;
 border: 1px solid #1ec5cc;
 }
 #pagenation ol li+li{
  margin-left:10px;
 }
#pagenation ol li a{
 display: block;
 font-size: 142.857%;
 font-family: 'Roboto', sans-serif;
 font-weight: 500;
 text-align: center;
 line-height: 40px;
}
#pagenation ol li.prev a{
 height: 40px;
 background: url(../images/common/prev.png) no-repeat center center;}
#pagenation ol li.next a{
 height: 40px;
 background: url(../images/common/next.png) no-repeat center center;}
#pagenation ol li.current a,
#pagenation ol li a:hover {background-color: #1ec5cc; color: #000;} 
 
 
 
}
/********************************************************************************************************
 SP
********************************************************************************************************/
@media screen and (max-width: 767px) {
.pc_none { display: block;}
.sp_none { display: none !important;}
.linkBtn {
 overflow: hidden;
     margin: 5px;
}
.linkBtn a{
    display: block;
    color: #FFF;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 20px;
    width: 100%;
    box-sizing: border-box;
    border: 3px solid #92acad;
    position: relative;
    padding: 20px;
}
.linkBtn a p{
 width: 100%;
 height: 40px;
 text-align: center;
}
.linkBtn a p span {
 width: 100%;
 position: absolute;
 text-align: center;
 top:50%;
 left: 50%;
 transform: translate(-50%,-50%);
} 

#pagenation {}
#pagenation ol{
 width: 94%;
 margin: 0 3%;
 text-align: center;
}
#pagenation ol li {
 width: 25px;
 display: inline-block;
 vertical-align: middle;
 border: 1px solid #1ec5cc;
 margin-bottom: 10px;
 }
 #pagenation ol li+li{
  margin-left:5px;
 }
#pagenation ol li a{
 display: block;
 font-size: 100%;
 font-family: 'Roboto', sans-serif;
 font-weight: 500;
 text-align: center;
 line-height: 25px;
}
#pagenation ol li.prev a{
 height: 25px;
 background: url(../images/common/prev.png) no-repeat center center;}
#pagenation ol li.next a{
 height: 25px;
 background: url(../images/common/next.png) no-repeat center center;}
#pagenation ol li.current a,
#pagenation ol li a:hover {background-color: #1ec5cc; color: #000;} 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
}

/* flexbox ****************************************************/
.flexwrap{
 display: -webkit-flex;
 display: flex;
 
 flex-wrap:wrap;
 -webkit-flex-wrap:wrap;
 
 justify-content:space-between;
 -webkit-box-pack:justify;
 -webkit-justify-content:space-between;

 align-items:center; 
 -webkit-box-align:center;
 -webkit-align-items:center;
}
.flexnowrap{
 display: flex;
 display: -webkit-flex;
 
 flex-wrap:nowrap;
  -webkit-flex-wrap:nowrap;
  
 justify-content:space-between;
  -webkit-box-pack:justify;
  -webkit-justify-content:space-between;
  
 align-items:center;
  -webkit-box-align:center;
  -webkit-align-items:center; 
}

.js-center {
 justify-content: center;
 -webkit-box-pack:center;
 -webkit-justify-content:center;
}
.js-start {
 justify-content: flex-start;
 -webkit-box-pack:start;
 -webkit-justify-content:flex-start;
}
.al-stretch {
 align-items:stretch;
 -webkit-box-align:stretch;
 -webkit-align-items:stretch;
}
.al-start {
 align-items:flex-start;
 -webkit-box-align:flex-start;
 -webkit-align-items:flex-start;
}
.flex-reverse{
 flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse; 
  -webkit-box-direction:reverse;
}
.flex-column {
 flex-direction: column;
  -webkit-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}


/******************************************************************************
 keyframes
******************************************************************************/
/* animation ****************************************************/
/*.mvMove{
 -webkit-transition: 0.4s ease-out;
 transition: 0.4s ease-out;
 opacity: 0;
}
.scrMove,
.fvMove{
 -webkit-transition: 0.4s ease-out;
 transition: 0.4s ease-out;
 opacity: 0;
}

.mvMove.on,
.scrMove.on,
.fvMove.on{
 opacity:1;
 display:block;
 -webkit-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:0.4s;
 animation-duration:0.4s;
 visibility: visible !important;
}

*/
/*レイアウト用*/

.rem10{
  font-size: 1rem;
}

.rem15{
  font-size: 1.5rem;
}

.rem17{
  font-size: 1.7rem;
}

.mgn10{
      margin: 10px;
}