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

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

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;}

/* blockquote */
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 {width: 780px; background: #FFFFFF none; }

/* caption above the links */
#caption { padding:5px 19px 0px 19px; }
#caption p{ padding :0.25rem 1rem; line-height:1.25em; font-size:0.75em;}

/* links above the logo , footer */
#links { height: auto; border-bottom-left-radius:10px; border-bottom-right-radius:10px;  border-bottom: solid 1px #666;
box-shadow:rgba(52, 52, 52, 0.3) 0px 1px 4px 2px;
}
#footer { height: auto; border-top: 1px solid #57696F; border-top-left-radius:10px; border-top-right-radius:10px; overflow:hidden;
box-shadow:rgba(52, 52, 52, 0.3) 0px -1px 4px 2px;
}
#links, #footer { background: #243387 none; color: #FFFFFF; width: 100%; 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 .logo {height:64px; width:300px}
#footer dt { padding-bottom:1rem; }
#footer dd { font-size:1rem; text-align:center; padding:0; margin:0;}

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

#logo img { 
filter:drop-shadow(0px 0px 3px gray);
}
#title { }
#title h1, #title h1 a { color:#000; letter-spacing: ; font-size: 125%; padding:0 0 1em 0 ;
}
#header h2 { background: transparent; color: #CCC; }
#header dt ,#header dd { text-align:center; margin: 0.2rem 0;}
#header dt {font-weight:bold; color:red; margin-top:1em;}
#header dd {}

/* contact */
#header .contact p { text-align:center; margin-top:1em; }
#header .contact p.tel, #header .contact p.fax {padding-bottom:0;}

#footer .contact p { text-align:center; margin-top:1em; }
#footer .contact p.tel, #footer .contact p.fax {padding-bottom:0;}

#header .contact .fa-fax, #header .contact .fa-phone {color:#243387;}

/* 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%;} 

.addInfo {margin:10px; }
.addInfo p {margin:0; padding:0; }
.addInfo, .addInfo a:active, .addInfo a:hover, .addInfo a:visited, .addInfo a { font-size: small !important; }
.addInfo.red, .addInfo.red a:active, .addInfo.red a:hover, .addInfo.red a:visited, .addInfo.red a {color:red;}

iframe.calendarView { width: 100%; height:320px;}
.calendarInfo { display:none;}
.calendarWrap h3 { font-size: medium; text-align: left; text-decoration: none; border-bottom: 1px solid lightslategray; border-bottom-right-radius:10px;}
.calendarWrap p { text-align: left; font-size: small;}

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

.sidebaritem { text-align:left; float:none; margin:2em 0; border:none; padding:15px; background: #F9F9F9; border-color: #E1E1E1; border-radius:20px;
box-shadow:rgba(52, 52, 52, 0.3) 1px 1px 4px 0px;
}
.sidebaritem h1 { margin: 0px;  font-weight: normal; padding: 0px 0px 16px 0px; text-transform: uppercase; }
.sidebaritem h2{ }
.sidebaritem h2.title { font-size:200%; color:#243387; 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 { overflow:auto; }

.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: #57696F; 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: #243387; text-decoration:none; } 

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

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

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

#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:#243387; }
#column2 a:hover{ text-decoration:none; }

#column2 p.motto {text-align:center;}

/* Google map */
#map {
   width: 100%;
   height: 400px;
   background-color: grey;
 }
#map img {border-radius:0; border:none;}


/* other tags */

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

blockquote { background: #FFFFFF; color: #57696F; border-color: #243387; }

#menu { background: transparent; color: #57696F; }
#menu li a { background: #76C9F8; color: #57696F; border-color: #109CEF; }
#menu li a:hover, #menu li a.selected { background: #109CEF; color: #FFFFFF; } 
#content, #column2, #column2 a { background: #FFFFFF; color: #444444; border-color: #57696F; }
#column2 a:hover { background: #FFFFFF; color: #243387; border-color: #243387; }

.btn { background-color:#243387; border-color:#243387;}
#header .btn {box-shadow:rgba(52, 52, 52, 0.3) 0px 0px 4px 3px;}
#footer .contact .btn {border-color:white;}

.copyright { margin: 10px; padding:10px; text-align:center;}

#toTop { border-radius: 10px; text-decoration: none; background-color: white; padding: 8px 10px 5px 10px; border: 1px solid #243387; width: fit-content; position: fixed; bottom: 5%; right: 14%; opacity: 0.8;
}
#toTop a {text-decoration:none ;}

@media screen and (max-width:480px){
  /* background , border */
  body { background: #fffnone; }
  #links , #footer { background: #243387 none; }
  #column1 { border-top: dashed 2px #666; }
  .sidebaritem { background:#fff; border:none;}
  /* width */
  #main , #header , #logo , #content , #footer {width:100% ;}
  #links , #column1 , #column2 {width:100% ;}
  #header .logo {width:300px;}
  #footer .logo {width:225px;}
  .sidebaritem , .sidebaritem .text , .sidebaritem .photo {width:100%;}
  /* height */
  #header { height:auto; }
  #logo { height:auto; }
  #header .logo {height:64px;}
  #footer .logo {height:48px}
  #links { height:auto;  overflow:auto;}
  #title { height:auto; }
  #footer {height:auto; overflow:auto;}
  /* margin , padding */
  #links  , #column2 , #caption {padding: 0 5% ;}
  .logo { margin:2em auto 1em 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 1em 0; margin:1em 0;}
  .sidebaritem dl dd ,.sidebaritem dl dt { padding-right:0; }
  .sidebaritem .photo , .sidebaritem .photo img{ margin:auto auto; }
  /* text sizing , align */
  #title h1 { font-size:80%; letter-spacing:normal; margin:0; text-align:center; margin-top:0.5em;}
  #footer dd { font-size:1rem;}
  .copyright {padding-bottom:1rem;}
  /* floating */
  #logo , #column1 , #column2 {float:none;}
  .sidebaritem , .sidebaritem .text , .sidebaritem .photo {float:none;}
  /* calendar action */
  iframe.calendarView { height:400px;}
  .calendarInfo { display:unset;}
  #toTop { right:8%; }
}