@import url("./rss.css");

/* global */
html{height: 100%;}

body {
  font-family:  "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","meiryo","MS UI Gothic","Font Awesome 5 Free","Font Awesome 5 Brands";
  padding: 0px;
  margin: 0px;
  background: #FFFFFF none ;
  font-size: 16px;
  color: black;
}

p { margin: 0px; padding: 0px 0px 16px 0px; line-height:1.4em; }
h1 { font-size: 120%; letter-spacing: .1em; }
h2 { margin: 0px; padding: 0px 0px 4px 0px; font-size: 100%; }
img { border: none; }
a { outline: none; }

/* image positioning - left, right and center */
.left { float: left;  padding: 0px 8px 0px 0px; }
.right { float: right;  padding: 0px 0px 0px 8px; }
.center { display: block; text-align: center; margin: auto auto;}

/* block quote */
blockquote { margin: 20px 0px 20px 0px;  padding: 10px 20px 0px 20px; border-left: 8px solid; }

/* unordered list */
ul { margin: 8px 0px 0px 16px; padding: 0px; }
ul li { list-style-type: square; margin: 0px 0px 6px 0px;  padding: 0px; line-height:1.3em; }

/* ordered list */
ol { margin: 8px 0px 0px 24px; padding: 0px; }
ol li { margin: 0px 0px 11px 0px;  padding: 0px; line-height:1.3em; }

/* margin lefts / margin rights - to centre content */
#main, #links, #footer, #header, #menu, #content { margin-left: auto;  margin-right: auto; }

/* main container */
#main {max-width: 780px; background: #FFFFFF none; color: #333333; }

/* caption above the links */
#caption { padding:5px 19px 0px 19px; }
#caption p{ padding :0.25em 0 0.35em 0; line-height:1.25em; }

/* links above the logo , footer */
#links { height: auto; border-bottom-left-radius:10px; border-bottom-right-radius:10px;  border-bottom: solid 1px #666;}
#footer { height: 100px; text-align: right; font-weight:bold; border-top: 1px solid #57696F; border-top-left-radius:10px; border-top-right-radius:10px; overflow:hidden; padding-bottom:20px;}
#links, #footer { background: maroon none; color: #FFFFFF; width: 100%; font-size: 88%; text-transform: uppercase; padding: 0; }

#links a, #footer a { text-decoration: none; }
#links a:hover, #footer a:hover { text-decoration: underline; }
#links a, #footer a, #links a:hover, #footer a:hover { background: transparent; color: #FFFFFF; }

#footer .copyright{ font-size:300%; padding:20px 0;}

/* header */
#header { 
  background: #FFFFFF url() no-repeat;
  color: #57696F;
  border-bottom: dashed 2px #666;
  width: 100%;
  height: 132px;
  padding:18px 0;
}

#logo { float:left; height:132px; width:320px; }
#title { height:132px; display:block;}
#title h1, #title h1 a {
  color:#000;
  letter-spacing: 0.25rem;
  font-size: 125%;
  margin:38px 0; /* for vertical centering */
  padding:0;
  line-height:105%;
}
#header h2 { background: transparent; color: #CCC; }

/* navigation menu */
#menu {
  height: 30px; width: 766px; margin-top: -30px; position: relative;
}
#menu ul{margin: 0px auto;} 
#menu li { float: left;  margin: 0px 5px 0px 0px;  padding: 0px; list-style: none; } 
#menu li a { display: block;  float: left;  height: 22px; text-decoration: none;  padding: 6px 19px 2px 12px; } 

/* main content */
#content { width: 90%; } 

#column1 { width: 100%; margin: 22px 0px 0px 0px; float: none; padding: 0; }

.sidebaritem { width:100%; text-align:left; float:none; margin:2em 0; border:none; padding:1px 0 0 0; background: #f6f6f6 none; color: #333333; border-color: #E1E1E1; border-radius:20px; box-shadow:3px 3px 5px 4px rgba(52,52,52,0.3); }
.sidebaritem h1 { margin: 0px;  font-weight: normal; padding: 0px 0px 16px 0px; text-transform: uppercase; }
.sidebaritem h2{ }
.sidebaritem h2.title { font-size:200%; color:maroon; text-align:center; margin:2rem 0;}
.sidebaritem p { line-height: 16px; padding: 0px 0px 8px 0px; }

.sidebaritem dt{ font-weight:bold; margin-top:1em;}
.sidebaritem dd{ margin-inline-start:.5rem; margin-top:0.5em;}

.sidebaritem .text { width:33%; float:left;}
.sidebaritem .photo { width:66%; float:right;}
.sidebaritem img {border-radius:160px; border:1px solid #ccc;}
.sidebaritem .content { padding: 0 15px 30px 30px}

.sbilinks{padding: 0px}
.sbilinks ul{margin: 0px auto;} 
.sbilinks li  { margin: 0px;  float: left; list-style: none; } 

.sbilinks li a, .sidebaritem a { background: transparent none no-repeat left center; color: #333333; padding: 0px 0px 2px 9px; } 
.sbilinks li a , .sbilinks li a:hover { float: left;  height: 16px; text-decoration: none;  padding: 5px 0px 4px 19px; width: 149px; } 
.sbilinks li a:hover, .sidebaritem a:hover, .sidebaritem a.selected { background: transparent none no-repeat left center; color: maroon; text-decoration:none; } 

#column2 { text-align: justify; width: 100%; float: none; padding: 0; }
#column2 h1 {
  padding: 5px 5px 5px 5px;
  margin:3rem 0 .5rem 0; 
  text-align:center;
  border: 1px solid maroon;
  border-radius:10px;
  font-size: 150%;
  text-transform: uppercase;
  font-weight: bold;
}

#column2 h2 {
  padding: 0.3em 0.2em ; 
  margin: 1.25rem 0px 0px 10px; 
  text-align:center;
  border-bottom: 1px dotted;
  font-size: 125%;
  text-transform: uppercase;
  font-weight: normal;
  color: maroon;
}

#column2 h3 {
  padding: 0px 0px 0px 0px; 
  margin: 5px 0px 0px 15px; 
  font-size: 110%;
  text-transform: uppercase;
  font-weight: bold;
  color: maroon;
}

#column2 p { padding: 0px 0px 0px 0px;  margin: 8px 0px 8px 15px; }
#column2 ul { padding: 0px 0px 0px 0px;  margin: 5px 0px 5px 60px; }
#column2 blockquote { padding: 7px 12px 7px 12px;  margin: 5px 0px 5px 30px;  border: 1px #333 dashed; }

#column2 a{ text-decoration: underline; color:maroon; }
#column2 a:hover{ text-decoration:none; }

/* other tags */

h1, h1 a
{ background: transparent;
  color: maroon;
  border-color: #E1E1E1;
  text-decoration: none;
}

blockquote { background: #FFFFFF; color: #000000; border-color: maroon; }

#menu { background: transparent; color: #333333; }

#menu li a { background: #76C9F8; color: #333333; border-color: #109CEF; }
#menu li a:hover, #menu li a.selected { background: #109CEF; color: #FFFFFF; } 

#content, #column2, #column2 a { background: #FFFFFF; color: #333333; border-color: #57696F; }
#column2 a:hover { background: #FFFFFF; color: #1798E9; border-color: #1798E9; }


@media screen and (max-width:600px){
  /* floating */
 .sidebaritem .text , .sidebaritem .photo {float:none;}
 .sidebaritem .text , .sidebaritem .photo {width:100%;}
}

@media screen and (max-width:480px){
  /* background , border */
  body { background: #fff none; }
  #links , #footer { background: maroon none;}
  #column1 { border-top: dashed 2px #666; }
  .sidebaritem { background:#fff; border:none;}
  /* width */
  #main , #header , #logo , #content , #footer , #column1 .content,{width:100% ;}
  #links , #column1 , #column2 {width:90% ;}
  .sidebaritem{width:90%;}
  .sidebaritem .photo img {width:100%;}
  /* height */
  #header { height:192px; }
  #logo { height:auto; }
  #links { height:auto;  overflow:auto;}
  #title { height:auto; }
  #footer {height:auto; overflow:auto;}
  .sidebaritem .photo img {height:100%;}
  /* margin , padding */
  #links  , #column2 , #caption {padding: 0 5% ;}
  #logo { margin:15px auto; }
  #column1 { margin:2em auto 1em auto; padding:2em 5% 0 5%; }
  #main , #header ,#content , #caption {padding: 0;}
  #column2 h2 , #column2 h3 , #column2 p { pagging-left:0; margin-left:0; }
  .sidebaritem { padding:1em 10px 0 10px; margin:1em 0;}
  .sidebaritem .content { margin:0; padding-left:5px; padding-right:5px; }
  .sidebaritem dl dd ,.sidebaritem dl dt { padding-right:1em; }
  .sidebaritem .photo , .sidebaritem .photo img{ margin:auto auto; }
  #footer { margin:0 ; padding:0; }
  #footer .copyright { margin: auto 0; font-size:150%;}
  /* text sizing , align */
  #title h1 { font-size:80%; letter-spacing:normal; margin:0; text-align:center; margin-top:0.5em;}
  #footer .center{ font-size:200%; text-align:center;}
  /* floating */
  #logo , #column1 , #column2 {float:none;}
  .sidebaritem  {float:none;}
}