*  { 
          padding : 0px ; 
          margin : 0px ; 
} 
#background-box{
         width:100%;
         background-image: url('img/bcg_03br.gif');
}
header {background: #000000;
    color: whitesmoke;
    font-size: 13px;
    padding: 15px 10px 0px 20px;
    text-align: center;
}
#site-box {
          max-width : 800px;
          border: 1px solid #00FFFF;
          margin : 5px auto;
background-image: url('img/bcg_03br.gif');
}

#a-box {
          border-bottom: 1px solid #00FFFF;
          background-image: url('img/bcg_03.gif');
          padding: 20px;
      }

#menu-box{
          border-bottom: 1px solid #99CCFF;
          background-color: aliceblue;
          padding: 0px;
          font-size: 14px;
          }
#container{
    display: flex;
}
#side-box{
    width:25%;
    background-color: azure;
    border-bottom: 1px solid #99CCFF;
}
#b-box {       
          width: 75%;
          font-size: 12px;
          background-color: #FFFFFF;
          line-height: 130%;
       }
#b-box p{
     line-height: 150%;
}
#c-box{
    width:25%;
    background-color: azure;
}
#d-box {
          clear: both;
          max-width: 750px;
          font-size: 12px;
          padding: 10px;
          text-align: center;
          background-color: #3399FF;

}

h1 {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    border-bottom: solid 3px #cce4ff;
    position: relative;
line-height: 1.2em;
}

h1:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #5472cd;
    bottom: -3px;
    width: 20%;
}


h2 {
  color: #364e96;/*???*/
  border: solid 3px #364e96;/*??*/
  padding: 0.5em;/*???????*/
  border-radius: 0.5em;/*??*/
}


h3 {
          font-size: 18px;
          color:#FF9900;
          margin: 5px;
    letter-spacing: 1pt;

}
h4�@{
          font-size: 15px;
          margin: 5px;
          padding: 5px;
�@    letter-spacing: 1pt;
�@�@
}
p {
          font-size: 15px;
          margin: 15px;
       letter-spacing: 1pt;
       line-height: 125%;
}

ul { 
          padding : 10px 5px 10px 30px; 
}  

.category {
          font-size: 14px;
          color: #FFFFFF;
          background-color: #3399FF;
          padding: 5px;
          margin: 5px;
}
.menu {  color: #FFFFFF; background-color: #0000FF; padding-top: 2px; padding-bottom: 2px; text-align: center}
#gNavi { margin:0; padding:0 10px; line-height:1.7em; 
         background-color: aqua}  
#gNavi li { display:inline-flex; list-style:none; padding-right:10px; }   
p {          font-size: 14px;
    margin: 7px;
    letter-spacing: 1pt;
    line-height: 140%;}

.menu {  color: #FFFF99; background-color: #0000FF; padding-top: 2px; padding-bottom: 2px; text-align: center}
.menu a:link {  color: #FFFFFF}
.menu a:visited {  color: #FFFFFF}
.menu a:hover {  color: #FFFF00}
.menu a:active {  color: #FFFFFF}

    li
      {
         margin-top: 0.5em;
      }
footer{
    background: #000000;
    color: whitesmoke;
    text-align: center;
}


/*??mwrap?box2?index????*/
.mwrap{
    padding-left: 20px;
    padding-right: 10px;
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
    align-content: space-between;
    background: azure;
    font-size: 14px;
}
.box2 {
    padding: 0.5em 1em;
    margin: 0.3em 0.2em;
    font-weight: bold;
    color:black ;/*???*/
    background:white;
    border: solid 2px #9ba5a0;/*?*/
    border-radius: 10px;/*????*/
}
.box2 p {
    margin: 0; 
    padding: 0;
}
.box2 a{text-decoration: none;
    margin: 0; 
    padding: 0;
    color: dimgray;
    vertical-align: middle;
}
.box2 a:hover{color: #0bd;}
.box2 img{
    vertical-align: middle;
}


@media (max-width: 600px){
    #container{
        flex-direction: column-reverse;
    }
    #side-box,
    #b-box { width: 100%
    }
}
/*?????????????????CSS*/


#page_top{
    width: 90px;
    height: 90px;
    position: fixed;
    right: 0;
    bottom: 0;
    opacity: 0.6;
}
#page_top a{
    position: relative;
    display: block;
    width: 90px;
    height: 90px;
    text-decoration: none;
}
#page_top a::before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f102';
    font-size: 25px;
    color: #3f98ef;
    position: absolute;
    width: 25px;
    height: 25px;
    top: -40px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}
#page_top a::after{
    content: 'PAGE TOP';
    font-size: 13px;
    color: #fff;
    position: absolute;
    top: 45px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
    color: #3f98ef;
}