@charset "uft-8";

body {
    margin: 0;
    padding: 0;
    color: #333;
}
a { color: #2f4f4f; }
a:visited { color: #696969; }
a:hover {
    color: #ff6347;
    font-weight: bold;
    text-decoration: none;
}
h1, h2, h3, h4 { margin-top 0; }
p {
    margin-top: 0;
    line-height: 1.6;
}
img { vertical-align: bottom; }
#main h1 {
    padding: 30px, 30px, 30px, 20px;
    font-size: 26px;
    border-bottom: solid 1px #008000;
}
#main h2 {
    font-size: 22px;
    border: 1px solid #008000;
    padding: 11px 22px;
    border-radius: 5px;
}
#main h3 {
    font-size: 18px;
    border: 1px solid #2e8b57;
    padding: 4px 9px 4px 14px;
}
header {
    width: 980px;
    margin: 0 auto;
}
header h1 {
    text-align: center;
    margin: 5px 0 10px;
    background-color: #c0c0c0;
}
#global_navi {
    width: 980px;
    clear: both;
    overflow: hidden;
    margin: 16px auto;
}
#global_navi ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#global_navi ul li {
    width: 244px;
    float: left;
    margin-right: 1px;
    text-align: center;
}
#global_navi ul li a {
    display: block;
    padding: 16px;
    background-color: #66cdaa;
    color: #ff6347;
    text-decoration: none;
}
#global_navi ul li.current a {
    background-color: #7fffd4;
}
#global_navi ul li a:hover {
    background-color: #f4a460;
}
#main {
    width: 980px;
    margin: 0 auto;
    overflow: hidden;
}
footer {
    background-color: #352b23;
    text-align: center;
}
footer #footer_nav {
    background-color: #efefef;
    padding: 10px 0;
}
footer #footer_nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
footer #footer_nav li {
    display: inline;
    border-left: solid 1px #aaa;
    margin-left: 8px;
    padding-left: 8px;
    font-size: smaller;
}
footer #footer_nav li:last-child {
    border-right: solid 1px #aaa;
    padding: 0 8px;
}
footer small {
    display: block;
    padding: 8px 0;
    color: #fff;
}
#breadcrumb { font-size: smaller; }
#breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
#breadcrumb ol li { display: inline; }
#breadcrumb ol li::after {
    content: ">";
    padding-left: 7px;
}
#breadcrumb ol li:last-child::after { content: none; }
#main_visual img {
    max-width: 100%;
    height: auto;
}
#news {
    width: 980px;
    margin: 0 auto;
}
#news dl { overflow: hidden; }
#news dt {
    width: 8em;
    float: left;
    margin-bottom: 10px;
    clear: both;
}
#news dd {
    margin-left: 8em;
    margin-bottom: 10px;
}
#intro table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}
#intro th,
#intro td {
    border: 1px solid #000000;
    padding: 8px;
}
#intro th {
    background-color: #daa520;
    width: 8em;
}
#java #omikuji {
    display: clear;
    text-align: center;
}
#java #getResult {
    background-color: #b7a077;
    border: 1px solid #b7a077;
    padding: 15px 100px;
    border-radius: 10px;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.5 linear;
}
#java #getResult:hover {
    background-color: #ff0000
}
#java #result {
    text-align: center;
}
#java #bd {
    text-align: center;
}
#java #year {
    width: 5em;
}
#java #month {
    width: 3em;
}
#java #day {
    width: 3em;
}
#java #answer {
    text-align: center;
}
@media screen and (max-width : 767px){
    img {
        max-width: 100%
    }
  header,
  #global_navi,
  #sidebar,
  #wrapper{
        width: 100%;
    }
header h1 {
    font-size: 100%;
    text-align: center;
    width: 100%;
}
#global_navi ul li {
    width: 50%;
    padding: 0.5px;
    margin: 0;
    box-sizing:border-box;
}
global_navi ul li a {
    margin: 0;
}
    #main {
    width: 100%;
    padding: 0.5%;
    box-sizing: border-box;
}
#main figure {
    text-align: center;
}
#main_visual {
    width: 100%;
    height: auto;
}
}