@charset "UTF-8";
/*hoverImgLink*/
.BGBlack {
  background-color: black; }

.BGWhite {
  background-color: white; }
  
.CenterInlineWrap {
  text-align: center; }
 
img.ResponsiveImg {
  max-width: 100%;
  height: auto; }

.floatClear:after {
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
  content: " "; }

* {
  color: white;
  font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; }

.myouchou, .bigSec span, .mainWndSec > * > *, #CharaList li a, .character h2 {
  font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; }

a {
  color: #04edff;
  text-decoration: none; }

a:link {
  color: #aa0000; }

a:visited {
  color: #aa0000; }

a:hover {
  color: #aa0000; }
  a:hover img {
    opacity: 0.5;
    filter: alpha(opacity=50);
    -ms-filter: alpha(opacity=50);
    -khtml-opacity: 0.5;
    -moz-opacity: 0.5; }

a:active {
  color: #aa0000; }

p {
  margin-top: 0.25em;
  margin-bottom: 0.25em; }

.TopMargin-xxs, .HMargin-xxs {
  margin-top: 4px; }

.TopMargin-xs, .HMargin-xs, #CharaList li:nth-child(n+2) {
  margin-top: 8px; }

.TopMargin-s, .HMargin-s, .system, .system_fullWidth {
  margin-top: 16px; }

.TopMargin-m, .HMargin-m {
  margin-top: 32px; }

.TopMargin-l, .HMargin-l, #InfoWnd {
  margin-top: 32px; }

.TopMargin-xl, .HMargin-xl, .bigSec {
  margin-top: 80px; }

.TopMargin-xxl, .HMargin-xxl {
  margin-top: 50px; }

.BottomMargin-xxs, .HMargin-xxs {
  margin-bottom: 4px; }

.BottomMargin-xs, .HMargin-xs, #CharaList li:nth-child(n+2), #CharaList li:first-child {
  margin-bottom: 8px; }

.BottomMargin-s, .HMargin-s {
  margin-bottom: 16px; }

.BottomMargin-m, .HMargin-m {
  margin-bottom: 32px; }

.BottomMargin-l, .HMargin-l {
  margin-bottom: 32px; }

.BottomMargin-xl, .HMargin-xl {
  margin-bottom: 80px; }

.BottomMargin-xxl, .HMargin-xxl {
  margin-bottom: 50px; }

@media screen and (min-width: 768px) {
  .TopMargin-xxs, .HMargin-xxs {
    margin-top: 4px; }

  .TopMargin-xs, .HMargin-xs, #CharaList li:nth-child(n+2) {
    margin-top: 8px; }

  .TopMargin-s, .HMargin-s, .system, .system_fullWidth {
    margin-top: 16px; }

  .TopMargin-m, .HMargin-m {
    margin-top: 32px; }

  .TopMargin-l, .HMargin-l, #InfoWnd {
    margin-top: 64px; }

  .TopMargin-xl, .HMargin-xl, .bigSec {
    margin-top: 160px; }

  .TopMargin-xxl, .HMargin-xxl {
    margin-top: 100px; }

  .BottomMargin-xxs, .HMargin-xxs {
    margin-bottom: 4px; }

  .BottomMargin-xs, .HMargin-xs, #CharaList li:nth-child(n+2), #CharaList li:first-child {
    margin-bottom: 8px; }

  .BottomMargin-s, .HMargin-s {
    margin-bottom: 16px; }

  .BottomMargin-m, .HMargin-m {
    margin-bottom: 32px; }

  .BottomMargin-l, .HMargin-l {
    margin-bottom: 64px; }

  .BottomMargin-xl, .HMargin-xl {
    margin-bottom: 160px; }

  .BottomMargin-xxl, .HMargin-xxl {
    margin-bottom: 100px; } }
	
.FontSizeOnly-xs, .FontSize-xs, .FontSizeB-xs, #copyright {
  font-size: 10px; }
  @media screen and (min-width: 768px) {
    .FontSizeOnly-xs, .FontSize-xs, .FontSizeB-xs, #copyright {
      font-size: 10px; } }
  @media screen and (min-width: 1024px) {
    .FontSizeOnly-xs, .FontSize-xs, .FontSizeB-xs, #copyright {
      font-size: 10px; } }

.FontSizeOnly-s, .FontSize-s, .FontSizeB-s, #InfoWnd table td, #InfoWnd table tr > td:first-child, #InfoWnd table tr > td:first-child::after, .system p, .system_fullWidth p, .character p, dl.status dt, dl.status dd {
  font-size: 12px; }
  @media screen and (min-width: 768px) {
    .FontSizeOnly-s, .FontSize-s, .FontSizeB-s, #InfoWnd table td, #InfoWnd table tr > td:first-child, #InfoWnd table tr > td:first-child::after, .system p, .system_fullWidth p, .character p, dl.status dt, dl.status dd {
      font-size: 13px; } }
  @media screen and (min-width: 1024px) {
    .FontSizeOnly-s, .FontSize-s, .FontSizeB-s, #InfoWnd table td, #InfoWnd table tr > td:first-child, #InfoWnd table tr > td:first-child::after, .system p, .system_fullWidth p, .character p, dl.status dt, dl.status dd {
      font-size: 14px; } }

.FontSizeOnly-m, .FontSize-m, .FontSizeB-m, .system h3, .system_fullWidth h3, #CharaList li a {
  font-size: 16px; }
  @media screen and (min-width: 768px) {
    .FontSizeOnly-m, .FontSize-m, .FontSizeB-m, .system h3, .system_fullWidth h3, #CharaList li a {
      font-size: 18px; } }
  @media screen and (min-width: 1024px) {
    .FontSizeOnly-m, .FontSize-m, .FontSizeB-m, .system h3, .system_fullWidth h3, #CharaList li a {
      font-size: 20px; } }

.FontSizeOnly-l, .FontSize-l, .FontSizeB-l, .character h2, .mainWndSec > * > * {
  font-size: 24px; }
  @media screen and (min-width: 768px) {
    .FontSizeOnly-l, .FontSize-l, .FontSizeB-l, .character h2, .mainWndSec > * > * {
      font-size: 27px; } }
  @media screen and (min-width: 1024px) {
    .FontSizeOnly-l, .FontSize-l, .FontSizeB-l, .character h2, .mainWndSec > * > * {
      font-size: 30px; } }

.FontSizeOnly-xl, .FontSize-xl, .FontSizeB-xl, .bigSec {
  font-size: 30px; }
  @media screen and (min-width: 768px) {
    .FontSizeOnly-xl, .FontSize-xl, .FontSizeB-xl, .bigSec {
      font-size: 35px; } }
  @media screen and (min-width: 1024px) {
    .FontSizeOnly-xl, .FontSize-xl, .FontSizeB-xl, .bigSec {
      font-size: 40px; } }

.FontSize-xs, .FontSizeB-xs, #copyright {
  line-height: 1.75em; }

.FontSize-s, .FontSizeB-s, #InfoWnd table td, #InfoWnd table tr > td:first-child, #InfoWnd table tr > td:first-child::after, .system p, .system_fullWidth p, .character p, dl.status dt, dl.status dd {
  line-height: 1.75em; }

.FontSize-m, .FontSizeB-m, .system h3, .system_fullWidth h3, #CharaList li a {
  line-height: 1.75em; }

.FontSize-l, .FontSizeB-l, .character h2 {
  line-height: 1.75em; }

.FontSize-xl, .FontSizeB-xl {
  line-height: 1.75em; }

.FontSizeB-xs {
  font-weight: bold; }

.FontSizeB-s {
  font-weight: bold; }

.FontSizeB-m, .system h3, .system_fullWidth h3, #CharaList li a {
  font-weight: bold; }

.FontSizeB-l, .character h2 {
  font-weight: bold; }

.FontSizeB-xl {
  font-weight: bold; }

#wrapper {
  width: 100%;
  margin: 0 auto; }

.contentWidth {
  width: 100%;
  max-width: 1024px;
  position: relative;
  margin: 0 auto; }

#main {
  width: 100%;
  padding-bottom: 32px;
  overflow: hidden;
  background-image: url("../img/BackGround.jpg");
  background-size: contain;
  background-color: black; }

img.badgeImg {
  max-width: 25%;
  max-height: 40px;
  margin-right: 4px;
  margin-left: 4px; }
  
#BadgeWrap {
  text-align: center; }

@media screen and (min-width: 768px) {
  #BadgeWrap .FloatLeft {
    float: left; }
  #BadgeWrap .FloatRight {
    float: right; }
  #BadgeWrap:after {
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    content: " "; } }
img.nonLink {
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: alpha(opacity=50);
  -khtml-opacity: 0.5;
  -moz-opacity: 0.5; }
	

#InfoWnd {
  width: 100%;
  max-width: 500px;
  margin-right: auto;
  margin-left: auto; }
  #InfoWnd .WndEdge {
    position: relative;
    height: 47px;
    margin: 0 53px;
    background-repeat: repeat-x; }
    #InfoWnd .WndEdge::before, #InfoWnd .WndEdge::after {
      content: " ";
      position: absolute;
      top: 0;
      width: 53px;
      height: 47px; }
    #InfoWnd .WndEdge:before {
      left: -53px; }
    #InfoWnd .WndEdge:after {
      right: -53px; }
  #InfoWnd .WndContents {
    display: table;
    position: relative;
    width: 100%; }
    #InfoWnd .WndContents > * {
      display: table-cell; }
      #InfoWnd .WndContents > * > * {
        z-index: 1;
        position: relative; }
    #InfoWnd .WndContents::before, #InfoWnd .WndContents::after {
      content: " ";
      display: table-cell;
      repeat: repeat-y;
      width: 8px; }
  #InfoWnd .WndEdge:first-child {
    background-image: url("../img/InfoWnd_U.png"); }
    #InfoWnd .WndEdge:first-child:before {
      background-image: url("../img/InfoWnd_LU.png"); }
    #InfoWnd .WndEdge:first-child:after {
      background-image: url("../img/InfoWnd_RU.png"); }
  #InfoWnd .WndEdge:last-child {
    background-image: url("../img/InfoWnd_D.png"); }
    #InfoWnd .WndEdge:last-child:before {
      background-image: url("../img/InfoWnd_LD.png"); }
    #InfoWnd .WndEdge:last-child:after {
      background-image: url("../img/InfoWnd_RD.png"); }
  #InfoWnd .WndContents > * {
    background-image: url("../img/InfoWnd_C.png"); }
    #InfoWnd .WndContents > * > * {
      margin-bottom: -24px;
      margin-top: -24px; }
  #InfoWnd .WndContents::before {
    background-image: url("../img/InfoWnd_L.png"); }
  #InfoWnd .WndContents::after {
    background-image: url("../img/InfoWnd_R.png"); }
  #InfoWnd table {
    width: 100%; }
    #InfoWnd table td {
      padding: 0 0.5em; }
    #InfoWnd table tr > td:first-child {
      font-weight: bold;
      text-align: right;
      white-space: nowrap; }
      #InfoWnd table tr > td:first-child::after {
        content: ":";
        font-weight: bold; }

.bigSec {
  display: table;
  text-align: center;
  width: 100%;
  height: 66px;
  background-image: url("../img/SecBack_B.png"); }
  .bigSec::before, .bigSec::after {
    content: "";
    display: table-cell;
    height: 66px;
    background-repeat: repeat-x;
    background-image: url("../img/SecBack_Line.png"); }
  .bigSec span {
    display: table-cell;
    width: 10em;
    letter-spacing: 0.2em;
    background-image: url("../img/SecBack_R.png"), url("../img/SecBack_L.png");
    background-position: right,left;
    background-repeat: no-repeat,no-repeat;
    vertical-align: middle; }

#story {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  padding: 32px 16px;
  max-width: 680px; }
  #story p {
    margin: 0.75em 0; }
  @media screen and (min-width: 768px) {
    #story {
      padding: 32px 64px; } }

#CharaList {
  display: none;
  float: left; }
  #CharaList li {
    display: block;
    width: 226px;
    height: 52px;
    background-image: url("../img/CharacterListButton_free.png");
    text-align: center; }
    #CharaList li a {
      display: block;
      width: 226px;
      height: 52px;
      color: white;
      line-height: 52px; }
  #CharaList li:hover {
    background-image: url("../img/CharacterListButton_hover.png"); }
  #CharaList li.active {
    background-image: url("../img/CharacterListButton_select.png"); }
    #CharaList li.active a {
      color: #464646; }

@media screen and (min-width: 950px) {
  #CharaList {
    display: block; }

  #CharaTab1, #CharaTab2, #CharaTab3, #CharaTab4, #CharaTab5 {
    display: none; }

  #CharaTab0, #CharaTab1, #CharaTab2, #CharaTab3, #CharaTab4, #CharaTab5 {
    margin-left: 258px; } }
.character {
  display: table;
  width: 100%;
  margin-top: -10px;
  margin-bottom: -10px;
  padding: 0 0 0 8px; }
  .character > *:first-child, .character > *:last-child {
    display: table-cell;
    vertical-align: middle; }
  .character > *:last-child {
    text-align: right;
    width: 45%; }
    .character > *:last-child img {
      width: 100%;
      max-width: 337px; }
  .character h2 {
    color: #0f102b;
    width: 100%;
    white-space: nowrap;
    border-bottom: solid 2px #0f102b; }
  .character p {
    color: #0f102b;
    line-height: 2em; }
    @media screen and (min-width: 768px) {
      .character p {
        font-size: 18px; } }

footer {
  text-align: center; }
  footer img {
    max-width: 25%; }

#copyright {
  color: black; }

@media screen and (min-width: 768px) {
  footer {
    text-align: right; } }
#BGchara00, #BGchara01, #BGchara02, #BGchara03 {
  display: none; }

@media screen and (min-width: 768px) {
  #BGchara00, #BGchara01, #BGchara02, #BGchara03 {
    display: block;
    position: absolute;
    width: 55%; }

  #BGchara00 {
    top: -70px;
    left: -48px;
    max-width: 384px; }

  #BGchara01 {
    top: -70px;
    right: -46px;
    max-width: 384px; }

  #BGchara02 {
    top: 32px;
    left: -102px;
    max-width: 375px; }

  #BGchara03 {
    top: 32px;
    right: -102px;
    max-width: 375px; } }
@media screen and (min-width: 1024px) {
  #BGchara00 {
    left: -1%; }

  #BGchara01 {
    right: -1%; } }
dl.status dt, dl.status dd {
  color: #0f102b;
  line-height: 1.2em; }
dl.status dt {
  clear: left;
  float: left;
  width: 4em; }
dl.status dd {
  margin-left: 4em; }




/* 追加分 */

.BGBlue_header {
  background-color: #7d8fc9;
  border-bottom: solid 5px #f9d615;
  min-height:60px;
  padding: 5px 0;}
  @media screen and (min-width: 768px){
	  .BGBlue_header{
		  padding: 20px 0;
		  min-height:40px;} }

.BGBlue_footer {
  background-color: #7d8fc9;
  border-top: solid 5px #f9d615;
  padding: 5px 0 10px; }
  
.RightInlineWrap {
  text-align:center;}
@media screen and (min-width: 768px){
	.RightInlineWrap {
 		 text-align:right; }}

#title {
  position: relative;
  z-index: 1;}
  #title img {
    width: 60%;
	min-width:150px;
    height: auto;
	text-align: left;
	margin:15px 20px 5px; }
	@media screen and (min-width: 768px){
		#title img{	
			width:100%;
			max-width:500px;
			margin:10px 20px;} }

#key_visual {
  width: 100%;
  overflow: hidden;
  background-image: url("../img/key_visual.png");
  background-size: contain;
  background-position:top 30%;
  background-repeat:no-repeat;
  background-color: white; }
  @media screen and (min-width: 768px){
	  #key_visual {
  		 background-position: top;
		 padding-bottom: 32px;} }

/* 最上段ヘッダー部分 */
.white_head{ 
	position:relative;
	wigth:100%;
	height:90px;
	text-align:center; }
.rideonGames{
	display: inline-block;
	margin-top:12px;
	margin-bottom:5px;}
@media screen and (min-width: 768px){
	.white_head{
		height:50px;}
	.rideonGames{
		margin-bottom:0px;}
	.SNSicon{
		position: absolute;
   		display: flex;
    	align-items: center;
    	right: 0;
    	top: 0;
    	bottom: 0; }
	.SNSicon_F{
		float:right;}
	.SNSicon_T{
		float:right;
		margin-right:10px;} }

	
/* outlink用 */
#blue_head{ 
	position:relative;
	width:100%;
	text-align:center;}
.soft_index{
	font-size:12px;}
.GAMEicon{
	position:relative;
	text-align:center;}
.GAMEicon img{
	height:25px;
	width:auto;}
.margin_L{
	margin:5px; }
@media screen and (min-width: 768px){
	#blue_head{
		text-align:inherit;}
	.soft_index{
		display: inline-block;
		font-size:16px;
		margin-left:50px;}
	.GAMEicon{
		position: absolute;
   	 	display: flex;
    	align-items: center;
    	right: 0;
    	top: 0;
    	bottom: 0; }
	.GAMEicon img{
		height:35px;}
	.margin_L{
		margin-left:10px;
		margin-right:0; } }

/* メニュー位置調整用 */
.margin_menu{
	width:60%;
	padding:10px 0 90px 25px;}
.margin_menu img{
	width:100%;}
.movie_zone{
	width:35%;
	margin-top:15px;
	margin-left:4%;}
	@media screen and (min-width: 768px){
		.margin_menu{
			width:50%;
			padding:16px 0 160px 30px;}}
	
/* タブ切り替え */
.tab_wrap{
	}
input[type="radio"]{
	display:none;}
.tab_area{
	font-size:0; margin:0 10px; text-align:center;}
.tab_area label{
	width:25%; margin:0 5px; display:inline-block; padding:12px 0; color:#7D8FC9; background:#CCDCFA; text-align:center; font-size:14px; cursor:pointer; transition:ease 0.2s opacity;
	border-radius: 10px 10px 0 0;}
	@media screen and (min-width: 768px){
		.tab_area label{
			font-size:18px;} }
.tab_area label:hover{
	opacity:0.5;}
.panel_area{
	background:#fff;
	border:5px solid #7D8FC9;
	border-radius: 10px;}
.tab_panel{
	width:100%; padding:1em 3em; display:none; font-size:12px;}
	@media screen and (min-width: 768px){
		.tab_panel{
			font-size:16px;} }
.tab_center{
	margin:0 auto;}
#panel1 table td {
      padding: 0.5em;
	  color:#000000;
	  white-space: nowrap; }
    #panel1 table tr > td:first-child {
      font-weight: bold;
      text-align: right;
      white-space: nowrap; }
#panel2 table td {
      padding: 0.5em;
	  color:#000000;
	  white-space: nowrap; }
    #panel2 table tr > td:first-child {
      font-weight: bold;
      text-align: right;
      white-space: nowrap; }
#panel3 table td {
      padding: 0.5em;
	  color:#000000;
	  white-space: nowrap; }
    #panel3 table tr > td:first-child {
      font-weight: bold;
      text-align: right;
      white-space: nowrap; }
 
#tab1:checked ~ .tab_area .tab1_label{
	background:#7D8FC9; color:#FFFFFF;}
#tab1:checked ~ .panel_area #panel1{
	display:block;}
#tab2:checked ~ .tab_area .tab2_label{
	background:#7D8FC9; color:#FFF;}
#tab2:checked ~ .panel_area #panel2{
	display:block;}
#tab3:checked ~ .tab_area .tab3_label{
	background:#7D8FC9; color:#FFF;}
#tab3:checked ~ .panel_area #panel3{
	display:block;}

/* ゲーム情報とバッジアイコンの高さ合わせ */
.Wrap {
	position:relative;}
.link{
	margin-top:10px;}
@media screen and (min-width: 768px){
	.game {
		display: inline-block;
		margin-left:40px;}
	.link {
		margin-top:0;
		position: absolute;
    	right: 0;
    	bottom: 0;
    	display: inline-block; } }

img.badgeImg_2 {
  	max-height: 30px;
	margin-top:10px; }
	@media screen and (min-width: 768px){
		 img.badgeImg_2 {
			 margin-top:0;
  			 max-height: 40px; } }
img.shadow {
	box-shadow:5px 5px 5px #A3A3A3; }
	



/* システムページ用 */

#BG_map {
	width: 100%;
	overflow: hidden;
	background-image: url("../img/world_map.png");
	background-size: cover;
	background-position:center;
	background-color:#FFFFFF;
	background-repeat:no-repeat;
	background-attachment:fixed;}

/* 各ページへのリンク */
#page_link {
	width:100%;
	height:120px;
	background:linear-gradient(rgba(63,76,125,1.0) 50%,rgba(63,76,125,0.8) 80%,rgba(63,76,125,0.5) 90%,rgba(63,76,125,0) 100%);
	padding:15px 0;
	font-size:14px; }
	#page_link ul{
		position:relative;
		left:5%;
		display: table;
		margin: 0 auto;
		padding: 0;
		width: 90%;
		text-align: center;}
	#page_link ul li{
		float:left;
		width:30%;
		min-width: 80px;}
	#page_link ul li a{
		display: block;
		width: 100%;
		height: 100%;
		padding: 10px 0;
		text-decoration: none;
		color: #FFFFFF;}
	/* 選択中ページの文字色替え */
	#page_link ul li a choice{
		color:#F9D615; }
		
	#page_link ul li a:hover{
		color: #0089BB;}
@media screen and (min-width: 768px){
	#page_link {
		height:80px;
		font-size:16px;}
		#page_link ul{
			position: absolute;
			left:10%;
			width: 80%; }
		#page_link ul li{
			width:16.6%; } }			

#page_title {
	width:100%;
	height:50px;
	position:relative;
	margin:1em auto;
	text-align:center;
	background:linear-gradient(to left,rgba(255,255,255,0),rgba(255,255,255,1) 10%,rgba(255,255,255,1) 90%,rgba(255,255,255,0));}
	#page_title top_border{
		position:absolute;
		top: 0;
    	left: 0;
    	right: 0;
   	 	width: 100%;
    	height: 4px;
    	margin: 0 auto;
    	text-align: center;
		background:linear-gradient(to left,rgba(125,143,201,0) 5%,rgba(125,143,201,1) 20%,rgba(125,143,201,1) 80%,rgba(125,143,201,0) 95%); }
	#page_title bottom_border{
		position:absolute;
		bottom: 0;
    	left: 0;
    	right: 0;
   	 	width: 100%;
    	height: 4px;
    	margin: 0 auto;
    	text-align: center;
		background:linear-gradient(to left,rgba(125,143,201,0) 5%,rgba(125,143,201,1) 20%,rgba(125,143,201,1) 80%,rgba(125,143,201,0) 95%); }
	#page_title p{
		font-size:18px;
		color:#2B5BDB;
		font-weight:900;}
	#page_title p::before, #page_title p::after{
		content:" ";
    	display:inline-block;
    	width:30px;
    	height:50px;
    	vertical-align:middle;}
	  #page_title p::before{
			background:url(../img/mainWnd_SecDecoL.png);
			background-size:contain;
			background-repeat:no-repeat;
			background-position:20%;}
	  #page_title p::after{
			background:url(../img/mainWnd_SecDecoR.png);
			background-size:contain;
			background-repeat:no-repeat;
			background-position:20%;}
	@media screen and (min-width: 768px){
		#page_title {
			height:60px;}
		#page_title p{
			font-size:24px;}
		#page_title p::before, #page_title p::after{
			width:50px;
			height:60px;} }
	
/* メインコンテンツ枠 */
.main_contents {
	position:relative;
	width:100%;}
	
.story_zone{
	width:100%;
	height:auto;
	position:relative;
	margin:10px 0;
	padding:4em 0;
	text-align:center;
	display:inline-block;
	vertical-align:middle;
	}
	.story_zone h2,.story_zone p{
		text-shadow:1px 1px 5px #000000,2px 2px 8px #000000,3px 3px 10px #000000;
		z-index:1;
		line-height:1.5em;}
	.story_zone h2{
		font-size:18px;
		margin:2em 0; }
	.story_zone p{
		font-size:16px;
		margin:2.5em 0; }
	@media screen and (min-width: 768px){
		.story_zone h2{ font-size:24px;} }

.story_BG{ 
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:linear-gradient(rgba(30,41,82,0),rgba(30,41,82,1.00) 5%,rgba(30,41,82,1.00)95%,rgba(30,41,82,0));
	background-size:cover;
	opacity:0.5;
	}

.br-sp { display:block; }
	@media screen and (min-width: 768px){	
  	.br-sp { display:none; }
	}

.chara_aori{
	width:110%;
	position:absolute;
	top:70%;
	right:-4%;}
	.chara_aori img{
		width:100%;
		position:relative; }
	@media screen and (min-width: 768px){	
		.chara_aori{
			width:190%;
			top:70%;
			right:5%;
			margin-bottom:0; } }

.hect_zone{
	width:100%;
	height:auto;
	position:relative;
	margin:10px 0;
	padding:2em 1em;
	text-align:left;
	display:inline-block;
	vertical-align:middle;
	}
	.hect_zone h2,.hect_zone p{
		text-shadow:1px 1px 5px #000000,2px 2px 8px #000000,3px 3px 10px #000000;
		z-index:1;
		line-height:1.5em;}
	.hect_zone h2{
		font-size:18px;
		margin-bottom:1em; }
	.hect_zone p{
		font-size:16px;
		margin:1em; }
	.hect_zone a{
		color:#FFFFFF; }
@media screen and (min-width: 768px){
	.hect_zone{
		margin-top : -70px;} }

.otoiawase_zone{
	width:95%;
	max-width:650px;
	background:#FFFFFF;
	margin:15px auto;
	border:3px solid #7D8FC9;
	padding:10px 25px; }
	.otoiawase_zone h{
		color:#000000;
		font-size:16px;
		font-weight:bold;
		margin:0.5em;
		display:inline-block;}
	.otoiawase_zone ul{
		width:100%;}
	.otoiawase_zone p,.otoiawase_zone li{
		color:#000000;
		line-height:1.3em;}
	.otoiawase_zone p{
		font-size:14px;
		margin:0.5em;
		display:inline-block;
		text-align:left; }
	.otoiawase_zone li{
		font-size:11px;
		margin:0.15em 0.5em;
		padding-left:1em;
		text-indent:-1em;
		display:list-item;
		text-align:left; }
	.otoiawase_zone span{
		color:#000000; }
	.otoiawase_zone img{
		width:100%;
		max-width:290px;}
	@media screen and (min-width: 768px){
		.otoiawase_zone h{
			font-size:18px;
			margin:0.5em;}
		.otoiawase_zone p{
			font-size:16px; }
		.otoiawase_zone li{
			font-size:12px; } }
.dot_zone{
	width:100%;
	margin:5px auto;
	padding:0 5px 10px;
	border:1px dashed #7D8FC9;
	text-align:center;}
.dot_border{
	height:0;
	margin:5px auto;
	border-bottom:1px dotted #7D8FC9;}
.small_zone{
	width:90%;
	margin:0 auto;}
	.small_zone p{
		color:#000000;
		line-height:1.3em;
		font-size:14px;
		margin:0.15em 0.5em;
		display:list-item;
		list-style:none;
		text-align:left;
		padding-left:0.5em;
		text-indent:-0.5em; }
	@media screen and (min-width: 768px){
		.small_zone p{ font-size:16px; } }