.document-reader{font-family:"Noto Sans JP Test";}

/*見出し等*/
h4.style4a{margin:1em 0 0.5em 0!important; font-size:110%;  
border-left:5px solid tan;
padding: 0.8em 0.5em 0.5em 0.5em;/*文字周りの余白*/
line-height: 1;/*行高*/
background: floralwhite;/*背景色*/
vertical-align: middle;
border-radius: 0px 5px 5px 0;/*右側の角を丸く*/}
h5.style5a{margin:1em 0 0 0!important; font-size:105%;}
h5.style5a:before{content: '◆';color:tan;margin-right:5px;}
h6.style6a{margin:1em 0 0 0!important; font-size:90%;}
h6.style6a:before{content: '●';color:tan;margin-right:5px;}
small{display:inline-block; font-size:75%;}


/*リスト*/
ol.styleol{
counter-reset: item;
list-style-type: none;
margin-left: ;
}

ol.styleol li{
text-indent: -1.5em;
text-align:justify;
margin-top:10px;
font-weight:700;
}
ol.styleol li:before {
  counter-increment: item;
  content: counter(item)'.';
  padding-right: .5em;
  font-weight: bold;
  color: tan;
}

ul.styleul{
counter-reset: item;
list-style-type: none;
margin-left: 0px!important;
}

ul.styleul li{
text-indent: 0em;
padding-left:0em;
text-align:justify;
margin-top:10px;
font-weight:700;
}
ul.styleul li:before {
  counter-increment: item;
  content: '●';
  padding-right: .3em;
  font-weight: bold;
  color: tan;
font-size:80%;
}


/*テーブル*/
table.button_guide{border:2px solid lightgray; margin:10px 20px 10px 0px;}
.button_guide th{width:100px!important; vertical-align: middle; border-right:1px solid lightgray; padding:15px;}
.button_guide td{vertical-align: middle;}
.button_guide th img{margin:5px;}
.button_guide td img{margin:10px;}


.respon1 {border:2px solid lightgray!important; border-collapse: collapse; width: 100%; max-width: 1200px; margin:10px 20px 10px 0px;}
.respon1 th, .respon1 td {padding: 1em;}
.respon1 th {border-right:1px solid lightgray; color: #555;font-weight: bold;text-align: center;width: 30%;min-width: 4em;position: relative;vertical-align:middle; background-color:whitesmoke!important;}

@media screen and (max-width: 787px) {
  .respon1, 
  .respon1 tbody, 
  .respon1 tr, 
  .respon1 th, 
  .respon1 td {
    display: block !important;
    width: 100% !important; 
    box-sizing: border-box; /* 枠線を含めたサイズ計算にする */
  }
  .respon1 {border: none !important;}
  .respon1 tr {border: 2px solid lightgray; margin-bottom: 10px; }
  .respon1 tr:nth-of-type(n+2) {margin-top: 10px !important; }
  .respon1 th {border-bottom: 1px solid lightgray; padding-top: 1em;width: 100%;}
  .respon1 td {border: none; padding-bottom: 20px;}
}


/*ボックス（div）*/
.alert_box{background-color:#FFF0F5; border:red 1px solid; padding:15px; margin:5px auto;}

.flex-box{
display           : -webkit-box;
display           : -ms-flexbox;
display           : flex;
-webkit-box-pack  : justify;
-ms-flex-pack     : justify;
justify-content   : space-between;
align-items       : flex-start;
-webkit-flex-wrap : wrap; /* Safari */
flex-wrap         : wrap;
}

.flex-box img{
max-width: 100%;
min-height: 0;
padding: 5px;
}

.flex_l p {word-break: break-all;}
.flex_r_00 p,
.flex_r_01 p,
.flex_r_015 p,
.flex_r_02 p,
.flex_r_03 p,
.flex_r_04 p,
.flex_r_05 p,
.flex_r_new p{word-break: break-all;}

.flex_l{flex:1; padding-right:30px;}

.flex_r_00{flex:0.1!important;}

.flex_r_01{flex:0.2;}
.flex_r_015{flex:0.3;}
.flex_r_02{flex:0.4;}
.flex_r_03{flex:0.5;}
.flex_r_04{flex:0.7;}
.flex_r_05{flex:1;}

@media screen and (max-width: 1024px) {
.flex-box{display : block!important; }
.flex_l{padding-right:0px;padding-right:0px!important; margin-bootm:30px;}
.flex_r_01 img{max-width:120px!important;}
}


/*ボタン*/
a {color:steelblue;}

/*▼ページ内リンクボタン*/
.flex-btn{
margin:50px auto 0!important;
display           : -webkit-box;
display           : -ms-flexbox;
display           : flex;
align-content: space-around;  /*均等に間隔をあける・両端にも間隔をあける*/
flex-flow: row wrap;         /*折り返し有り・複数行*/
}

/*▼小さめのボタン*/
a.s_btn {
display: block;
text-align: center;
text-decoration: none!important;
background:#555;
border:1px solid lightgray;
color: wheat;
width: 100%;
max-width:300px;
height: 40px;
line-height: 40px;
border-radius: 3px;
vertical-align: middle;
overflow: hidden;
font-size:80%;
font-weight:600;    
margin:10px auto!important;
text-aline:center!important;
}
a.s_btn:hover{background:steelblue; color: #fff; font-weight:bold;}
a.s_btn:hover:before{color: #fff;}


/*▼普通のボタン*/
a.normal_btn {
display: block;
text-align: center;
text-decoration: none!important;
background:#555;
border:1px solid lightgray;
color: wheat;
max-width: 100%;
height: 45px;
line-height: 45px;
border-radius: 3px;
vertical-align: middle;
overflow: hidden;
font-weight:600;    
margin:10px auto;
}
a.normal_btn:hover{background:steelblue;color: #fff;font-weight:bold;}
a.normal_btn:hover:before{ color: #fff;}

/*▼ダウンロードボタン*/
a.dl_btn {display: block;
text-align: center;
text-decoration: none!important;
background:dodgerblue;
border:1px solid dodgerblue;
color: #fff;
max-width: 100%;
height: 45px;
line-height: 45px;
border-radius: 3px;
vertical-align: middle;
overflow: hidden;
font-weight:600;    
margin:10px auto;
}
a.dl_btn:hover{background:steelblue; color: #fff; font-weight:bold;}

/*max指定*/
.max100{
max-width:100%!important;
  height: auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
.max90{
max-width:90%!important;
  height: auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
.max80{
max-width:80%!important;
  height: auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
.max70{
max-width:70%!important;
  height: auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
.max60{
max-width:60%!important;
  height: auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
.max50{
max-width:50%!important;
  height: auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

@media screen and (max-width: 768px){/*画面の横幅が768px以下*/
.max50,.max60,.max70,.max80,.max90,.max100{
max-width:100%!important;
  height: auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
}