/*パソコン版と判断した横幅の場合のデザイン*/
@media screen and (min-width: 901px){ 
  html{
    /*remで指定するフォントサイズの基準となる文字サイズ*/
    font-size:10px;
  }
  body{
    padding:0px;
    margin-top:0px;
  }
  .contents{
    width:750px;
    padding:0px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
    line-height:1.8em;
    min-height:100%;
  }

  /*divでテキスト類を囲む。PC画面で少し横に余白をとる部分。幅100%にしたい画像はこのdivから出す*/
  .main_texts{
    padding:15px;
  }
  
  /*タイトルロゴ*/
  .img_logo{
    width:70%;
  }
  
  .menu_buttons table{
    width:750px;
    margin-left:auto;
    margin-right:auto;
  }
  
  #story{
    line-height:2.0em;
    text-align:center;
    font-size:2.5rem;
  }
  
.manual_menu
{
  position:fixed;
  top:0;
  width:750px;
}

}

/*タブレットやスマホ版と判断した横幅の場合のデザイン*/
@media screen and (max-width: 900px){ 
  html{
    /*remで指定するフォントサイズの基準となる文字サイズ*/
    font-size:10px;
  }
  body{
    padding:0px;
    margin-top:0px;
  }

  .contents{
    width:750px;
    padding:0px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
    line-height:1.8em;
    min-height:100%;
  }
  /*divでテキスト類を囲む。PC画面で少し横に余白をとる部分。幅100%にしたい画像はこのdivから出す*/
  .main_texts{
    padding:15px;
  }
  
  /*タイトルロゴ*/
  .img_logo{
    width:80%;
  }
  
  .menu_buttons table{
    width:750px;
    margin-left:auto;
    margin-right:auto;
  }
  
  #story{
    line-height:2.0em;
    text-align:center;
    font-size:2.0rem;
  }
  
.manual_menu
{
  position:fixed;
  top:0;
  width:750px;
}

}


/*幅750px以下*/
@media screen and (max-width: 750px){ 
  html{
    /*remで指定するフォントサイズの基準となる文字サイズ*/
    font-size:8px;
  }
  body{
    padding:0px;
    margin-top:0px;
  }
  .contents{
    width:100%;
    padding:0px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
    line-height:1.8em;
    min-height:100%;
  }
  /*divでテキスト類を囲む。PC画面で少し横に余白をとる部分。幅100%にしたい画像はこのdivから出す*/
  .main_texts{
    padding:0px;
  }
  
  /*タイトルロゴ*/
  .img_logo{
    width:80%;
  }

  .menu_buttons table{
    width:100%;
  }
  
  #story{
    line-height:2.0em;
    text-align:center;
    font-size:2.0rem;
  }

.manual_menu
{
  position:fixed;
  top:0;
  width:100%;
}

}



html{
  height:100%;
}
body{
  font: normal 14px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin:0px;
  padding:0px;
  height:100%;
  
  background-color:black;
  
  background-image: url('/img/back_web_3.png?ver=1.001');
  background-repeat:repeat-x;
  background-position:bottom;
  background-attachment: fixed;
    
  font-size: 1.6rem;

  
  color:#ccc;
}
header{
  margin-top:0px;
  margin-bottom:0px;
  padding:5px;
}
h1{
  margin:0px;
  font-size: 2.4rem;
}
h2{
  margin-top:15px;
  margin-bottom:10px;
  font-size: 2.1rem;
}

footer{
  margin-top:0px;
  margin-bottom:0px;
  padding:5px;
}


/*メニューボタン*/
.menu_buttons{
  border-top:0.5rem solid #C00;
  background-color:#00000099;
  color:#CCC;
  position:fixed;
  bottom:0;
  margin:0px;
  padding:5px;
  width:100%;
  height:11rem;
  z-index:10;
}

.menu_buttons table tr td{
  width:33.333%;
  vertical-align:center;
  text-align:center;
  height:5rem;
  padding:0px;
}
.menu_buttons table tr td a
{
  color:#CCC;
  text-decoration: none;
  font-size:2.1rem;
  font-weight:bold;
}
.menu_buttons table tr td a:hover
{
  color:#E00;
  font-size:2.25rem;
}



/*特定商取引ページのdlなど*/
.common_dl dd{
  margin-bottom:10px;
}

.top_circle_name
{
  font-size:1.4rem;
  font-weight:bold;
  text-align:right;
  margin-top:0.5rem;
  margin-bottom:0.5rem;
  padding-top:0px;
  padding-bottom:0px;
  padding-right:1rem;
}

.top_title
{
  font-size:1.8rem;
  font-weight:bold;
  text-align:center;
  margin-top:0.5rem;
  margin-bottom:0.5rem;
  padding-top:0px;
  padding-bottom:0px;
}


/*フッター関係*/
footer{
  font-weight:bold;
  padding-bottom:13rem;
}
footer a:link{
  color:#CCC;
}
footer a:visited{
  color:#CCC;
}
footer a:hover{
  color:#FFF;
}
footer a:active{
  color:#FF0;
}
footer table{
 width:100%;
}
footer .footer_left{
  width:50%;
}
footer .footer_right{
  text-align:right;
  width:50%;
  vertical-align:bottom;
}


.small{
  font-size:1.4rem;
}


.a_white{
color:#ccc;
}
.a_white:visited{
color:#ccc;
}
.a_white:hover{
color:#ffa;
}



.manual_menu .manual_right
{
    z-index:10;
  text-align:right;
}
.manual_menu .manual_menu_img_a
{
  text-decoration:none;
}
.manual_menu .manual_menu_img_a img
{
  width:10rem;
}
.manual_menu .manual_table
{
  position:absolute;
  width:30rem;
  right:0;
  background-color:#000000AA;
  border:0.5rem #a00 solid;
  border-spacing:0;
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
}
.manual_menu .manual_table tr td
{
  text-align:center;
  padding:1rem;
  font-size:2rem;
  border-bottom:0.2rem #a00 solid;
}
.manual_menu .manual_table tr td
{
  text-align:center;
  padding:1rem;
  font-size:2rem;
  border-bottom:0.2rem #a00 solid;
}
.manual_menu .manual_table tr:last-child td
{
  border-bottom:0px;
}
.manual_menu .manual_table tr td a
{
  text-decoration:none;
  color:#CCC;
  font-size:1.6rem;
  font-weight:bold;
}
.manual_menu .manual_table tr td a:visited
{
  text-decoration:none;
  color:#CCC;
}
.manual_menu .manual_table tr td a:hover
{
  color:#F00;
  font-size:1.8rem;
}

.banner_a{
  color:#CCC;
  font-weight:bold;
}
.banner_a:hover{
  color:#FFA;
  font-weight:bold;
}
.banner_a:visited{
  color:#CCC;
  font-weight:bold;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom: 2rem;
    z-index:1;
}
.video-wrapper .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:1;
}



dl.guide {
  margin: 1em 0;
  padding: 1em;
  background: #111;
  border-radius: 8px;
  border: 1px solid #333;
  color: #eee;
  font-family: 'Segoe UI', 'Meiryo', sans-serif;
}

dl.guide dt {
  font-weight: bold;
  color: #00ffff;
  margin-top: 0.8em;
  margin-bottom: 0.2em;
}

dl.guide dd {
  margin: 0 0 0.5em 1em;
  line-height: 1.5;
}


/* 全体のテキストエリア */
.characters {
  font-family: 'Yu Gothic UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

/* 名前部分 */
.characters .name {
  font-weight: bold;
  font-size: 1.25em;
  color: #CCC;
  margin-bottom: 0.5em;
}

/* テーブルスタイル調整 */
.characters table {
  border-collapse: collapse;
  width: 100%;
}

/* 各行の余白調整 */
.characters tr {
  border-bottom: 1px solid #ddd;
  padding: 1em 0;
}

/* 画像セル */
.characters td:first-child {
  padding: 10px;
  vertical-align: top;
}

/* テキストセル */
.characters td:last-child {
  padding: 10px;
  vertical-align: top;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .characters table, .characters tr, .characters td {
    display: block;
    width: 100%;
  }
  .characters td:first-child {
    text-align: center;
  }
  .characters img {
    max-width: 80%;
    height: auto;
  }
}