body {
    background-color:ivory;
    color:steelblue;
}

div.title {
    display:block;
    width:100%;
}

div.title-upper {
    vertical-align: middle;
    color:black;
    background-color:darkcyan;
    border-color:black;
    border:3px solid black;
    font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    padding:5px;
}

div.commandLine {
    background-color: black;
    color: white;
    border-color: gray;
    border-style: solid;
    border-width: 2px;
    font-family: "MS Gothic","Courier New","Open Sans";
    font-size: small;
    margin: 10px;
    padding: 10px;
}

@media screen and (max-width: 1900px) {
    .title-upper {
        font-size: 40pt;
    }
    .title-manual {
        font-size: 20px;
    }
    .title-down {
        font-size: 26pt;
    }
}

@media screen and (max-width: 450px) {
    .title-upper {
        font-size:16pt;
    }
    .title-manual {
        font-size:12pt;
    }
    .title-down {
        font-size:10pt;
    }
}

div.title-down {
    color:black;
    font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    background-color:lightcyan;
    border:3px solid black;
    height:20pt;
    vertical-align:middle;
    padding:0.3em;
}

.border-sentense,.sentense {
    font-family: "Meiryo","Yu Gothic","Hiragino Kaku Gothic Pro","MS P GOTHIC", sans-serif;
    font-size:11pt;
}

div.border-sentense {
    padding: 10px;
    margin-bottom:10px;
    border:2px solid tomato;
    border-radius:8px;
}

div.sentense {
    padding: 0px 5px 0px 5px;
    margin-bottom:10px;
}

table.sentense {
    border-collapse: collapse;
}

h1 {
    margin: 10px 0px 10px 0px;
    padding: 0.2em;
    background-color:mistyrose;
    color : orangered;
    font-size:14pt;
    font-weight:bold;
    border-top: solid 1px orangered;
    border-left:solid 1px orangered;
    border-right:solid 3px orangered;
    border-bottom:solid 3px orangered;
    position: sticky;
    top: 0;
}

h2 {
    color:orangered;
    border-left:solid 20px orangered;
    padding-left:0.2em;
}

.keyword {
    color:orangered;
}

div.exp_text {
    padding-left:5px;
    padding-right:5px;
}

h1.sticky_heading {
    position: sticky;
    top: 0;
}
table td {
    vertical-align:top;
    padding: 3px;
    width:100%;
}
table td.keyword {
    vertical-align:top;
    width:25%;
}

table th {
    border:solid 1px steelblue;
    background-color:darkblue;
}
table td {
    border:solid 1px steelblue;
}

img.in_text_img {
    vertical-align: middle;
}

img.auto_sizing {
    max-width: 100%;
    height: auto;
}

#page{
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    bottom: 0;
}

#page ul.pageNav01 {
	margin: 0;
	padding: 10px 10px 5px;
	background: #eee;
	text-align: center;
}

#page ul.pageNav01 li {
	display: inline;
	margin: 0 2px;
	padding: 0;
}

#page ul.pageNav01 li span,
#page ul.pageNav01 li a {
	display: inline-block;
	margin-bottom: 5px;
	padding: 1px 8px;
	background: #fff;
	border: 1px solid #aaa;
	text-decoration: none;
	vertical-align: middle;
}

#page ul.pageNav01 li a:hover {
	background: #eeeff7;
	border-color: #00f;
}

/** ページネーションの下に潜らないようにするためのマージンを設定する */
main {
    margin-bottom: calc(60px + env(safe-area-inset-bottom)); /* iOSのセーフエリアに対応 */
}

footer {
	background: #eeeff7;
    position: fixed;
    left: 0;
    padding-bottom: env(safe-area-inset-bottom); /* iOSのセーフエリアに対応 */
    bottom: 0;
    height: 60px;
    width: 100%;
}

ul {
    color: #668ad8; 
    border: double 5px #668ad8;/*二重線 太さ 色*/
    background: #f1f8ff; 
    padding: 0.5em 0.5em 0.5em 2em;
  }
  
 ul li {
    line-height: 1.5;
    padding: 0.5em 0;
  }