H1{
    font-size: 160%;
    border-bottom: 2px; solid #b33e5c;
    border-left: 10px solid #b33e5c;
    padding: 7px;
  }
  H2{
    font-size: 135%;
    border-bottom: 2px solid #000000;
    margin-bottom:5px;
    color:#000000;
  }
  h2_trailer {
    margin:10px 0 10px 0;
    padding:2px 8px;
    border-width:0 0 5px 0 ;
    border-color:#029EBC;
    border-style:solid;
    background:#fff;
    color:#017589;
    line-height:140%;
    font-weight:bold;
    font-style:italic;
  }
  H3{
    font-size: 100%;
    border-bottom: 3px double #000000;
    margin-bottom:5px;
    color:#0099ff;
  }
  H3.enemy{
    font-size: 100%;
    border-bottom: 3px double #000000;
    margin-bottom:5px;
    color:#cc0000;
  }
  hr{
  border:none;
  border-top:dashed 1px #000000;
  margin-top:15px;
  margin-bottom:15px;
  height:1px;
  color:#FFFFFF;
  }
  div.tdftdiv{
    padding:3px;
    line-height:16px;
  }
  ul.tdftad{
    margin:0;
    padding:0;
  }
  ul.tdftad li{
    display:inline;
    background-image:url("al.gif");
    background-position:left center;
    background-repeat:no-repeat;
    padding:0 4px 0 8px;
    font-size:13px;
  }
  ul.tdftad li.tdftpr{
    background-image:url("pr.gif");
    padding-left:20px;
  }
  ul.tdftad li.tdftlink{
    background-image:url("link.gif");
    padding-left:25px;
  }
  ul.tdftad li a:hover{
    text-decoration:none;
  }
  table.index{
    font-size: 90%;
    border-collapse: collapse;
    border-spacing: 0;
    border:1px solid #000000;
  }
  table.index th {
    text-align:left;
    padding:5px;
    margin:5px;
    border:1px solid #000000;
    background-color:#f5f5f5;
  }
  table.index td {
    padding:5px;
    margin:5px;
    border:1px solid #000000;
    background-color:#ffffff;
  }
  .box_name{
    width:320px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#d3d3d3;
  }
  #p1{
    font-style:normal;
    font-family:Times New Roman,"メイリオ";
  }
  #p2{
    font-style:italic;
    font-family:Times New Roman,"メイリオ";
  }
  #p3{
    font-style:italic;
    font-family:Times New Roman,"ＭＳ Ｐゴシック";
  }
  #p4{
    font-style:oblique;
    font-family:Times New Roman,"メイリオ";
  }
  #p5{
    font-style:oblique;
    font-family:Times New Roman,"ＭＳ Ｐゴシック";
  }
  p{font-size:100%;}


/* pc */
@media screen and (min-width: 769px) {
  body{
    line-height: 160%;
    font-size: 95%;
    word-break:break-all;
  }
  .image{
   width:769px;
   margin:10px;
  }
  .box_text{
    width:800px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#ffccff;
  }
  .box_engage{
    width:95%;
    max-width:550px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#FFFF99;
    white-space: pre-nowrap;
    overflow:auto;
  }
  .box_map{
    text-align:center;
    max-width:550px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#e9f1f1;
    white-space: pre-nowrap;
    
  }

/*
  .box_map{
    float:left;
    max-width:800px;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:20px;
    padding-right:20px;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:20px;
    margin-right:20px;
    border:3px solid #000000;
    background-color:#99ffff;
    white-space: pre-nowrap;
  }
*/

  .box_blue{
    width:800px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#d2f4fa;
  }
  .box_white{
    width:800px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#ffffff;
  }
}

/* iPad */
@media screen and (max-width: 768px) {
  body{
    width:95%;
    line-height: 160%;
    font-size: 95%;
    max-width:760px;
    word-break:break-all;
  }
  .box_text{
    width:90%;
    max-width:718px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#ffccff;
  }
  .box_engage{
    width:95%;
    max-width:718px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#FFFF99;
    white-space: pre-nowrap;
    overflow:auto;
  }
  .box_map{
    text-align:center;
    max-width:718px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#e9f1f1;
    white-space: pre-nowrap;
    
  }
  .box_blue{
    width:95%;
    max-width:718px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#d2f4fa;
  }
  .box_white{
    width:95%;
    max-width:718px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#ffffff;
  }
}

/* Tablet */
@media screen and (max-width: 640px) {
  body{
    width:95%;
    line-height: 160%;
    font-size: 80%;
    max-width:630px;
    word-break:break-all;
  }
  .box_text{
    width:90%;
    max-width:590px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#ffccff;
  }
  .box_engage{
    width:95%;
    max-width:590px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#FFFF99;
    white-space: pre-nowrap;
    overflow:auto;
  }
  .box_map{
    text-align:center;
    max-width:590px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#e9f1f1;
    white-space: pre-nowrap;
    
  }
  .box_blue{
    width:95%;
    max-width:590px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#d2f4fa;
  }
  .box_white{
    width:95%;
    max-width:590px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#ffffff;
  }
}

/* iPhone6/7/8 Plus */
@media screen and (max-width: 414px) {
  body{
    width:95%;
    line-height: 160%;
    font-size: 80%;
    max-width:405px;
    word-break:break-all;
  }
  .box_text{
    width:90%;
    max-width:350px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#ffccff;
  }
  .box_engage{
    width:95%;
    max-width:350px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#FFFF99;
    white-space: pre-nowrap;
    overflow:auto;
  }
  .box_map{
    text-align:center;
    max-width:350px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#e9f1f1;
    white-space: pre-nowrap;
  }
  .box_blue{
    width:95%;
    max-width:350px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#d2f4fa;
  }
  .box_white{
    width:95%;
    max-width:350px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#ffffff;
  }
}

/* iPhone6/7/8 */
@media screen and (max-width: 375px) {
  body{
    width:95%;
    line-height: 160%;
    font-size: 80%;
    max-width:370px;
    word-break:break-all;
  }
  .box_text{
    width:95%;
    max-width:320px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#ffccff;
  }
  .box_engage{
    width:95%;
    max-width:320px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#FFFF99;
    white-space: pre-nowrap;
    overflow:auto;
  }
  .box_map{
    text-align:center;
    max-width:320px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#e9f1f1;
    white-space: pre-nowrap;
    
  }
  .box_blue{
    width:95%;
    max-width:320px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#d2f4fa;
  }
  .box_white{
    width:95%;
    max-width:320px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#ffffff;
  }
}

/* smartPhone */
@media screen and (max-width: 320px) {
/*ここにスマホ用スタイルを記述*/
  body{
    width:95%;
    line-height: 160%;
    font-size: 80%;
    max-width:320px;
    word-break:break-all;
  }
  .box_text{
    width:95%;
    max-width:270px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#ffccff;
  }
  .box_engage{
    width:95%;
    max-width:270px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#FFFF99;
    white-space: pre-nowrap;
    overflow:auto;
  }
  .box_map{
    text-align:center;
    max-width:270px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#e9f1f1;
    white-space: pre-nowrap;
    
  }
  .box_blue{
    width:95%;
    max-width:270px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#d2f4fa;
  }
  .box_white{
    width:95%;
    max-width:270px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#ffffff;
  }
}