H1{    font-size: 160%;    border-bottom: 2px; solid #b33e5c;    border-left: 10px solid #b33e5c;    padding: 7px;  }
  H2{    margin:20px 0 10px 0;    font-size: 135%;    border-bottom: 2px solid #000000;    margin-bottom:5px;    color:#000000;    line-height:170%;    font-weight:bold;  }
  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;
  }

  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;
  }


/* pc */
@media screen and (min-width: 769px) {
  body{
    line-height: 170%;
    font-size: 95%;
    margin:auto 5%;
    overflow-wrap:break-word;
    word-wrap:break-word;

  }
  .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_blue{
    width:800px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    background-color:#d2f4fa;
  }
  .box_white{
    width:800px;
    padding:10px;
    margin:10px;
    color:#000000;
    border:3px solid #000000;
    background-color:#ffffff;
  }
  .box_ff{
    width:800px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    font-size: 100%;
    color:#ffffff;
  }
}

/* iPad */
@media screen and (max-width: 768px) {
  body{
    width:95%;
    line-height: 170%;
    font-size: 95%;
    margin:auto 5%;
    max-width:760px;
    word-break:break-all;
    overflow-wrap:break-word;
    word-wrap:break-word;
  }
  .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_ff{
    width:95%;
    max-width:550px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    font-size: 100%;
    color:#ffffff;
  }
  .box_white{
    width:95%;
    max-width:718px;
    padding:10px;
    margin:10px;
    color:#000000;
    border:3px solid #000000;
    background-color:#ffffff;
  }
}

/* Tablet */
@media screen and (max-width: 640px) {
  body{
    width:95%;
    line-height: 170%;
    font-size: 90%;
    margin:auto 5%;
    max-width:630px;
    word-break:break-all;
    overflow-wrap:break-word;
    word-wrap:break-word;
  }
  .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;
    color:#000000;
    border:3px solid #000000;
    background-color:#ffffff;
  }
  .box_ff{
    width:95%;
    max-width:550px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    font-size: 100%;
    color:#ffffff;
  }

  p{font-size:100%;}
    div.imagebox {
%       border: 1px dashed #0000cc;
       width="20%";
    max-width: 250px;
       float: left;
       margin: 5px;
    }
    p.caption,p.image {
       text-align: center;
       margin: 0px;
    }
    p.caption {
%      font-size: 85%;
%      color: darkblue;
    }
    p.exp { clear: left; }
}

/* iPhone6/7/8 Plus */
@media screen and (max-width: 414px) {
  body{
    width:95%;
    line-height: 170%;
    font-size: 90%;
    margin:auto 5%;
    max-width:405px;
    word-break:break-all;
    overflow-wrap:break-word;
    word-wrap:break-word;
  }
  .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;
    color:#000000;
    border:3px solid #000000;
    background-color:#ffffff;
  }
  .box_ff{
    width:95%;
    max-width:350px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    font-size: 100%;
    color:#ffffff;
  }

}

/* iPhone6/7/8 */
@media screen and (max-width: 375px) {
  body{
    width:95%;
    line-height: 170%;
    font-size: 85%;
    margin:auto 5%;
    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;
    color:#000000;
    border:3px solid #000000;
    background-color:#ffffff;
  }
  .box_ff{
    width:95%;
    max-width:320px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    font-size: 100%;
    color:#ffffff;
  }

}

/* smartPhone */
@media screen and (max-width: 320px) {
  body{
    width:95%;
    line-height: 170%;
    font-size: 85%;
    margin:auto 5%;
    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;
    color:#000000;
    border:3px solid #000000;
    background-color:#ffffff;
  }
  .box_ff{
    width:95%;
    max-width:270px;
    padding:10px;
    margin:10px;
    border:3px solid #000000;
    font-size: 100%;
    color:#ffffff;
  }

}

@charset "UTF-8";
body {
	margin:auto 5%;
	line-height:170%;
	background-color: #fcfcfc;
	overflow-wrap:break-word;
	word-wrap:break-word;
}