body { margin:0; padding:0; background:#eee url("img/wall01.jpg") no-repeat fixed 0% 0%;
 text-align: center; font-family: "メイリオ",Meiryo;}
#flexbox{ display: flex; display: -webkit-flex; }

a:link { color:#00567a; }
a:visited { color:#00567a; }
a:hover { color:#00c7f6;}
a:active { color:#00c7f6; }

#footer { background: rgba(250,250,250,0.5); font-size: 8.5pt;
position: fixed; bottom: 0%; z-index: 1; color: #333333;
 margin: 0px; padding:8px 0px; line-height: 1.7em;
 text-align: center; width: 100%; }

#site_title { position:fixed; top:20px; left:0; z-index: 3; }

.ribon{ display: inline-block; position:relative; height:70px; width:317px;
margin:0; font-size: 14.5pt; font-weight:bold;
padding-top:0; padding-bottom:0; padding-right:10px; padding-left:50px;
align-content: center; box-sizing: border-box; 
background:linear-gradient(to bottom, #00caf8 0%, #0096db 100%); }

.ribon::after{
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-left: solid 10px rgb(0, 75, 139);
}


a:link.top_title { color:#fff; text-decoration:none; }
a:visited.top_title { color:#fff; text-decoration:none; }
a:hover.top_title { color:#fff; text-decoration:underline; }
a:active.top_title { color:#fff; text-decoration:none; }


nav{ position:fixed; width:307px; height: 100vh; margin:0; padding:0; flex:1;
background: rgba(0,0,0,0.8); text-align: right; line-height:0;
 -webkit-backdrop-filter: blur(5px);  backdrop-filter: blur(5px); box-sizing: border-box; 
box-shadow: 15px 15px 70px rgba(84,112,255,0.2); }


div.p_menu { margin: 170px 20px 0px 0px; }

div.ptitle { font-size: 11.5pt; margin:0px; padding: 12px 0px 0px 0px; color:#888; }

div.ptext { text-align: right; margin:10px 0px 20px 0px; padding: 0; font-size: 11.5pt;
 line-height: 2em; color:#000066; }

a.p { display: block; width: 307px; margin:0; padding: 10px 20px 10px 0px; box-sizing: border-box; }
a.q { display: block; width: 307px; margin:0; padding: 10px 20px 10px 0px; box-sizing: border-box; }

a:link.p { color:#ffffff; text-decoration:none; font-weight: bold;
	background-color:rgba(0,0,0,0.6); }
a:visited.p { color:#ffffff; text-decoratinone; font-weight: bold;
	background-color:rgba(0,0,0,0.6);}
a:hover.p { color:#ffffff; text-decoration:none; font-weight: bold;
	background-color: rgba(0,188,168,0.85); }
a:active.p { color:#ffffff; text-decoration:none; font-weight: bold;
	background-color: rgba(0,88,56,0.6); }

a:link.q { color:#ffffff; text-decoration:none;
	background-color:rgba(0,0,0,0.6); }
a:visited.q { color:#ffffff; text-decoration:none;
	background-color:rgba(0,0,0,0.6);}
a:hover.q { color:#ffffff; text-decoration:none;
	background-color: rgba(0,153,204,0.85); }
a:active.q { color:#ffffff; text-decoration:none;
	background-color: rgba(0,67,136,0.6); }


main { text-align:left; margin:0px 0px 0px 307px; padding:30px 0px 80px 80px; width:100%; }

.title { background: #0079cd; margin: 0px 0px 10px 0px;  padding: 7px 10px 5px 20px;
 text-align: left; font-size:1.7em; color:#fff; width:90%; box-sizing: border-box;
box-shadow: 0px 0px 3px rgba(0,0,0,0.30);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.30);
    -webkit-box-shadow:  0px 0px 3px rgba(0,0,0,0.30);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px; }

.text { background: #f5f5f5;color: #223;
 margin: 0; padding: 2% 3% 3% 8%; width:90%; box-sizing: border-box;
ext-align: left; line-height: 2em; letter-spacing: 1px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.30);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.30);
    -webkit-box-shadow:  0px 0px 3px rgba(0,0,0,0.30); }


p { padding:0; margin: 0em 0em 2em 0em; line-height: 2em; }
ul{ margin:0;padding:0; }

.b { font-weight:bold; }
.c{ color: #999; }
.p{  margin-bottom: 2em; }
.red { color: #f00; }
.blue { color: #00f; }
.bgr { background: #fcc; padding: 2px; }
.u { text-decoration: underline; }
.mt{ margin-top:2em; }
.mb{ margin-bottom:2em; }

h2{ color:#708090; }

h3{margin:0;margin-left:-1em; padding:0;}
h3:before{content:"・";}

h4{ margin-top:50px;margin-bottom:0; margin-left:-1em; padding:0;
 font-weight:normal; text-decoration: underline; }
h4:before{ content:"●";}

.down { text-indent: -1.5em; padding-left: 1.5em; }