/*========================================
　骨組み

深い青 0f3856
========================================*/


header{
 width: 100%;
 margin-top: 10px;
 background: #fff url("../images/parts/bg_menu.jpg") center bottom repeat-x;
}

h1{}

p.headerMemo{
 padding: 10px 0;
 font-size: 1.6rem;
 text-align: center;
}


footer#footer{
 padding-top: 20px;
 color: #fff;
 background: #81919D;
}

.p_padding{
 padding: 10px 0 5px 0;
}

#rights{
 margin-top: 10px;
 padding: 5px 0;
 background: #0F3856;
}

span.ftInfo{
 margin: 5px auto;
 padding: 5px 10px;
 background: #0F3856;
 border-radius: 5px;

}

footer ol{
 width: 750px;
 margin: 10px auto 20px auto;
 text-align: left;
}

footer li{
/* color: #fffa6b; */
 padding: 5px 0 5px 10px;
 font-weight: bold;
}

footer a{}
footer a:link   {color: #80ff42;}
footer a:visited{color: #80ff42;}
footer a:hover  {color: #f24380;}


/*------------------------------ 漫画版お知らせ */
.bnrManga{
 padding: 10px 0 70px 0;
 text-align: center;
}

.bnrManga a{transition: 0.3s linear;}
.bnrManga a:hover{opacity: 0.7;}


/*------------------------------ メニュー */
nav{
 height: 85px;
}

nav ul{
 display: table; margin: 0 auto;
 border-collapse: separate; 
 border-spacing: 10px 0;
}

nav li{
 display: table-cell;
 width: 285px;
 height: 85px;
 margin: 0 4px;
}

nav li a{display: block; height: 100%;}



nav li a:hover{
 animation-name: gmenu_hover;
 animation-duration: 1.5s;
 animation-fill-mode: forwards; 
}

/*------------------------------ フッター */
footer{
 width: 100%;
 font-size: 1.8rem;
 text-align: center;
}

/*------------------------------ 見方 */
aside{
 width: 1150px;
 min-height: 300px;
 margin: 15px auto 40px auto;
 padding: 75px 0 0 200px;
 font-size: 1.7rem;
 background: url("../images/parts/bg_mikata01.png") left center no-repeat;
}

aside p{
 padding: 0 0 8px 0;
}

/*------------------------------ PANxDA Vision */
#panxdaVision{
 position: relative;
 width: 100%;
 height: 560px;
}

#panxdaVision_mask{
 position: absolute; bottom: 0; z-index: 1000;
}

#panxdaVision_mask img{
 display: block;
 width: 100%;
}


.bg-slider{
 height: 100%;
 background-position: center center;
 background-size: cover;
/*
 display: flex; 
 align-items: center;
 justify-content: center;
*/
}



/*------------------------------ トップへ関係 */
#toTOP{
 animation-name: totop_ani;
 animation-duration: 5s;
 animation-timing-function: linear;
 animation-iteration-count: infinite;

 position: fixed; right: 50px; bottom: 15%; z-index: 2000;
 width: 60px;
 height: 60px;
 padding: 8px;
 color: #fff;
 font-size: 2.5rem;
 text-align: center;
 background: #0f3856;
 border-radius: 50%;
}


#toTOP a{
 display: block;
 text-decoration: none;
}

#toTOP a:link{color: #fff;}
#toTOP a:visited{color: #fff;}
#toTOP a:hover{color: #fff;}

@keyframes totop_ani{
   0%{
		transform: rotateY(0deg);
     }

 100%{
		transform: rotateY(360deg);
     }

}


/*------------------------------ セクション */
.mainSection{
 margin-bottom: 70px;
}

.mainSection > h2{
 margin-bottom: 8px;
 border-bottom: 3px #0f3856 solid;
}


/*------------------------------ セクション内リンク */
.listAnchor ul{
 margin: 0 auto 30px auto;
 text-align: right;
}

.listAnchor li{
 display: inline-block;
 width: 214px;
 margin-left: 15px;
/* padding: 5px; */
 color: #fff;
 font-size: 1.6rem;
 text-align: center;
 background: #0f3856;
 border:  1px #0f3856 solid;
 border-radius: 5px;
}

.gaibulink01{
 background: url("../images/parts/bg_gaibulink01.png") right top no-repeat;
}

.listAnchor li a{
 display: block;
 width: 100%;
 height: 100%;
 padding: 5px;
 text-decoration: none;
}

.listAnchor li a:hover{
 animation-name: listAnc_hover;
 animation-duration: 2s;
 animation-fill-mode: forwards;
}

.listAnchor li a:link{
 color: #fff;
}
.listAnchor li a:visited{color: #fff;}

/*========================================
　hover時等のアニメーション
========================================*/
@keyframes gmenu_hover{
   0%{
		opacity: 1;
		background: url("../images/parts/bg_gmenu_hover.png") bottom center;
     }

  20%{
		opacity: 0;
		background: url("../images/parts/bg_gmenu_hover.png") bottom center;
     }
  40%{
		opacity: 0.6;
		background: url("../images/parts/bg_gmenu_hover.png") bottom center;
     }
  60%{
		opacity: 0;
		background: url("../images/parts/bg_gmenu_hover.png") bottom center;
     }
  80%{
		opacity: 0.9;
		background: url("../images/parts/bg_gmenu_hover.png") bottom center;
     }

 100%{
		opacity: 1;
		background: url("../images/parts/bg_gmenu_hover.png") bottom center;
     }
}


@keyframes listAnc_hover{
   0%{
		color: #0f3856;
     }


 100%{
		color: #0f3856;
		background: #fff;
		border-radius: 5px;
     }
}


/*========================================
　ストーリーセクション
========================================*/
#summary{
 font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
}

/*------------------------- イントロダクション */
.summaryLv1{
 margin-bottom: 30px;
 text-align: center;
}
.summaryLv1 h3{
 margin-bottom: 30px;
 font-size: 2.4rem;
}

.summaryLv1 p{
 font-size: 2.0rem;
}


/*------------------------- 各国サイドあらすじ */
.summaryLv2{
 margin-top: 55px;
}
.summaryLv2 h4{
 margin: 20px 0;
 color: #0f3856;
 font-size: 2.4rem;
 border-bottom: 1px #0f3856 dotted;
}

.summaryLv2 p{
 padding-bottom: 15px;
 font-size: 2.0rem;
}

.summaryLv2 dl{
}
.summaryLv2 dt{
 padding-top: 25px;
 font-size: 2.2rem;
}
.summaryLv2 dd{
 color: #777;
 font-size: 1.7rem;
}

#narejiStory{
 margin: 20px 0;
}

#narejiStory p{
 padding: 10px 0;
 color: #777;
 font-size: 1.8rem;
}


/*========================================
　さんどぼっくす
========================================*/
#secSandbox p{
 padding: 30px 0 10px 0;
 font-size: 1.8rem;
 text-align: center;
}

/*------------------------------ さんどぼっくすへのリンク */
#toSandbox{
 margin: 30px 0 80px 0;
 text-align: center;
}

#toSandbox a{
 display: inline-block;
 width: 450px;
 padding: 10px 35px;
 color: #fff;
 font-size: 1.8rem;
 text-align: center;
 background: #0f3856 url("../images/parts/bg_gaibulink01.png") 99% 6% no-repeat;
 border: 1px #0f3856 solid;
 border-radius: 5px;
 text-decoration: none;
}


#toSandbox a:hover{
 animation-name: listAnc_hover;
 animation-duration: 2s;
 animation-fill-mode: forwards; 
}


/*========================================
　キャラクター
========================================*/
#secChara{
 padding-top: 50px;
}


#charaViewWrap{
  position: relative; /* キャラリスト・charaView配置用 */
  height: 670px;
  margin: 0 auto;
  padding: 20px;
  color: #fff;
  background: #000;
  border: 1px #999 solid;

  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
}
@media screen and (max-width: 1000px){
  #charaViewWrap{
    width: 100%;
  }
}
#charaList{
  position: absolute; right: 20px; top: 30px;
  padding: 10px;
  width: 240px;
  font-size: 1.7rem;
}
#charaList li{padding: 5px 0; list-style: none;}
#charaList li:hover{cursor: pointer;}

.charaView{ /* 各キャラ共通テンプレートclass */
  position: absolute; left: 20px; top: 30px; z-index: 2000;
  display: none;
  width: 880px;
  height: 560px;
  min-height: 600px;
  padding: 10px 20px;
  background: url("../images/chara/pan_bg01.png") left top repeat;
  border: 1px #233437 solid;
}
@media screen and (max-width: 1000px){
  #charaViewWrap{
    width: 100%;
  }
  .charaView{
    width: calc(100% - 300px);
  }
}
#charactor1{
  display: block;
}


.viewAnimation{
  display: none;
  animation-name: view_charactor;
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
}
@keyframes view_charactor{
   0%{
      opacity: 0;
      transform: rotateY(70deg) scale(0.9);
   }
 100%{
      opacity: 1;
      transform: rotateY(0deg) scale(1.0);
     }
}


/*------------------------------
キャラクター情報表示部分・詳細
------------------------------*/

.charaView h3{
 position: relative;
 margin-bottom: 5px;
 padding-bottom: 5px;
 font-size: 2.4rem;
 text-align: left;
 border-bottom: 1px #ccc solid;
}
p.job{
 margin-bottom: 15px;
 font-size: 1.6rem;
 font-style: italic;
}

p.word{
 padding-bottom: 10px;
 font-size: 2.0rem;
 font-style: italic;
}
p.comment{
 width: 100%;
 margin: 85px 0 0 0;
 padding: 5px;
 color: #eee;
 font-size: 1.5rem;
 background: url(pan_img/pan_bg02.png) right center no-repeat;
 border-top: 1px #999 solid;
 border-bottom: 1px #999 solid;
}

.charaImg{
 position: absolute; top: 50px; left: 535px; z-index: 1000;
}

@media screen and (max-width: 1000px){
  .charaImg{
   width: 120px; opacity: 0.5;
   position: absolute; top: 220px; left: calc(70%); z-index: 1000;
  }
  .riikaImg{opacity: 0;}
}

.charaMemo{
 margin-top: 15px;
 font-size: 1.5rem;
}

/*---------------
　a要素系
---------------*/

.charaMemo a:link{color: #fff;}
.charaMemo a:visited{color: #fff;}
.charaMemo a:hover{color: limegreen;}




/*------------------------------ ノヴァリオンについて */
.nova{  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;}

.nova h4{
 margin: 20px 0;
 color: #0f3856;
 font-size: 2.4rem;
 border-bottom: 1px #0f3856 dotted;
}

.nova p{
 padding-bottom: 15px;
 font-size: 2.0rem;
}

.nova dl{
}
.nova dt{
 padding-top: 25px;
 font-size: 2.2rem;
}
.nova dd{
 color: #777;
 font-size: 1.7rem;
}

.nova figure{margin-top: 15px; color: #0f3856;}




/*========================================
　作者について
========================================*/
.myprof{  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;}

.myprof h3{
 margin: 50px 0 30px 0;
 padding: 3px 3px 3px 3px;
 color: #fff;
 font-size: 2.4rem;
 text-align: center;
 background: #0f3856;
 border-radius: 5px;
}

.myprof h4{
 margin: 20px 0 20px 0;
 color: #0f3856;
 font-size: 2.0rem;
 border-bottom: 1px #0f3856 dotted;
}


.myprof p{
 padding-bottom: 15px;
 color: #777;
 font-size: 1.8rem;
}

.myprof dl{
 margin-bottom: 30px;
}
.myprof dt{
 font-size: 1.8rem;
}
.myprof dd{
 color: #777;
 font-size: 1.6rem;
}

.myprof ul{
 margin-bottom: 15px;
}

.myprof li{
 margin-left: 15px;
 padding: 5px 0 5px 10px;
 font-size: 1.6rem;
}