@charset "utf-8";

body { font-family: sans-serif; background: #FAFAFA; color: #333; margin: 0; padding: 0; }
a { text-decoration: none; }
#container { width: 100%; max-width: 1320px;  margin: auto; padding: 20px; background: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
@media (min-width: 576px) {
  .container { width: 540px; }
}
@media (min-width: 768px) {
  .container { width: 720px; }
}
@media (min-width: 992px) {
  .container { width: 900px; }
}
@media (min-width: 1200px) {
  .container { width: 1080px; }
}
.nav { padding: 10px; }
.nav a { color: white; text-decoration: none; padding: 5px 10px; }
.breadcrumb { background: #F5F5F5; color: #333; list-style: none; padding: 10px 20px; border-radius: 10px; margin-bottom: 20px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); }
.breadcrumb li { display: inline; }
.breadcrumb a { color: #0077CC; text-decoration: none; }
.breadcrumb_list:not(:last-of-type)::after { content: ">"; margin: 0 .6em; color: #777; }
.internal { background: #F5F5F5; color: #333; list-style: none; padding: 10px 20px; border-radius: 10px; margin-bottom: 20px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); }
.internal li { display: inline; }
.internal a { color: #0077CC; text-decoration: none; }
.various { background: #F5F5F5; color: #333; list-style: none; text-align: right; padding: 10px 20px; border-radius: 10px; margin-bottom: 20px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); }
.various li { display: inline; }
.various a { color: #0077CC; text-decoration: none; }
h1, h2, h3 { color: #00274D; }
.card-title { font-weight: bold; color: #00274D; }
.important { color: black; text-decoration: solid underline #333 2px; }
.pad { padding: 0px 0px 10px 20px; }

.bigcard_s,
.bigcard_w,
.bigcard_e { background: #F0F0F0; padding: 20px; border-radius: 10px; margin-bottom: 20px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); }

.smallcard_s1,.smallcard_s2,.smallcard_s3,.smallcard_s4,.smallcard_s5,.smallcard_s6,
.smallcard_w1,.smallcard_w2,.smallcard_w3,.smallcard_w4,.smallcard_w5,.smallcard_w6,
.smallcard_e1,.smallcard_e2,.smallcard_e3,.smallcard_e4,.smallcard_e5,.smallcard_e6
{ display: block; padding: 10px; border-radius: 8px; margin-bottom: 10px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); }

footer { text-align: right; }