@charset "utf-8";

header#hdfix{position:fixed;}

.th-1em { width: 1em;} 
.th-015em { width: 1.5em;} 
.th-2em { width: 2em;} 
.th-025em { width: 2.5em;} 
.th-3em { width: 3em;} 
.th-4em { width: 4em;} 
.th-5em { width: 5em;} 
.th-6em { width: 6em;} 
.th-7em { width: 7em;} 
.th-8em { width: 8em;} 
.th-9em { width: 9em;} 
.th-10em { width: 10em;} 
.f12Table {
    table-layout: fixed;
    font-size:12px;
}

a {
    color: blue;
}
a:link, a:visited, a:hover, a:active {
    color: blue;
}
a:hover {
    color: red;
}

.a_button,
a.a_button {
    color: #fff;
    background-color: #eb6100;
}
.a_button:hover,
a.a_button:hover {
    color: #fff;
    background: #f56500;
    background: #eb6100;
}

a.btn--radius {
    border-radius: 100vh;
}
body {
    margin: 0;
    padding: 0;
    color: #333;
};

.b_button {
    display: inline-block;
    border-style: solid;
    background-color: lightgray;
    border-width:1px;
    border-color: darkgray;
    color: black;
    text-decoration: none;
};
/*
a {color: #b7a077;}
a:visited { color: #a8a8a8; }
a:hover {
    color: #988564;
    / * font-weight: bold; * // * 削除 * /
    text-decoration: none;
}
a:hover img { opacity: 0.7; }
*/


h1, h2, h3, h4, h5, h6 { margin-top: 0; }
p {
    margin-top: 0;
    line-height: 1.6;
}
#clipboardkaiseki{color: #fd7e00;font-weight: bold;}
#codearea10 {color: #ff0000;}
img { vertical-align: bottom; }
#tohaba {font-family: "Courier";font-weight: bold;font-size: 12px;font-family:monospace, serif;}
#main h1{
    background-image: url(../images/header bg.jpg);
    padding: 30px 30px 30px 20px;
    font-size: 26px;
    border-bottom: solid lpx #8b7348;
}
main h2 {
    font-size: 22px;
    border: lpx solid #b8a077;
    padding: 11px 22px;
    border-radius: 5px;
}
#main h3 {
    font-size: 18px;
    /* border-left: solid 3px #b7a077; */
    border-left: solid 3px #0054ac;/* 変更 */
    padding: 4px 9px 4px 14px;
}
header {
    /* width: 1100px; */
    width: 100%;/* 変更 */
    /* margin: 0 auto; *//* 削除 */
    position: fixed;/* 追加 */
    top:0;/* 追加 */
    z-index:10;/* 追加 */
    background: #ffffff;/* 追加 */
}
header h1 {
    float: left;
    /* margin: 5px 0 10px; */
    margin: 5px 0 0;/* 変更 */
    font-size:18px;/* 追加 */
}
header h1 a {/* 追加 */
    text-decoration: none;
    font-size:10px;
    margin-right:4px;
}
header h1 a img {/* 追加 */
    vertical-align: baseline;
}
header h1 a img.logo {/* 追加 */
    vertical-align: top;
}
header #header_contact {
    float: right;
    margin: 35px 0 0;
}
header #header_selection {
    float: right;
    margin: 35px 0 0;
}
#open_gn_bar {/* 追加 */
    height:30px;
    width:1100px;
    overflow: hidden;
    position: relative;
    margin: 0 auto 10px;
}
#open_gn_bar #open_gn {/* 追加 */
    width: 66px;
    height: 30px;
    background-color: #0054ac;
}
#open_gn_bar #open_gn:before {/* 追加 */
    content:"";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: -6px 22px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg) translateY(-8px);
}
#global_navi {
    /* width: 1100x; */
    width: 1100px;/* 修正 */
    clear: both;
    overflow: hidden;
    /* margin: 16px auto; */
    margin: 0 auto 16px;/* 変更 */
    opacity: 0;/* 追加 */
    position: absolute;/* 追加 */
    top: 0;/* 追加 */
}
#global_navi ul {
    list-style: none;
    margin: 0;
    /* padding: 0; */
    padding: 30px 11px;/* 変更 */
    background-color: #74C2E1;/* 追加 */
    display: none;/* 追加 */
    flex-wrap: wrap;/* 追加 */
    border:2px solid #0191C8;/* 追加 */
    position: fixed;/* 追加 */
    width: 1100px;/* 追加 */
    box-sizing: border-box;/* 追加 */
}
#open_gn:hover #global_navi {/* 追加 */
    opacity: 1;
    transition: .2s ease-out;
    overflow: visible;
    top:30px;
}
#open_gn:hover #global_navi ul {/* 追加 */
    display: flex;
}
#global_navi ul li {
    /* width: 100px; */
    width: 114px;/* 変更 */
    /* float: left; */ /* 削除 */
    /* margin-right: lpx; */
    margin-right: 6px;/* 変更 */
    text-align: center;
    margin-top: 6px;/* 追加 */
}

#global_navi ul li:nth-child(9n) {/* 追加 */
    margin-right: 0;
}
#global_navi ul li:nth-child(-n+9) {/* 追加 */
    margin-top: 0;
}

#global_navi ul li a {
    display: block;
    padding: 2px;
    /* background-color: #352b23; */
    background-color: #fff;/* 変更 */
    /* color: #fff; */
    color: #333;/* 変更 */
    /* test-decoration: none; */
    text-decoration: none;/* 修正 */
    /* transition: background-color 0.2s linear; *//* 削除 */
    border:1px solid #0191C8;/* 追加 */
}
#global_navi ul li.current a {
    /* background-color: #b7a077; */
    background-color: #0191C8;/* 変更 */
    color:#fff;/* 追加 */
    font-weight: bold;/* 追加 */
}
#global_navi ul li a:hover {
    /* background-color: #8c7a5b; */
    background-color: #0191C8;/* 変更 */
    color:#fff;/* 追加 */
}
#hp_global_navi {
    width: 1200x;
    clear: both;
    overflow: hidden;
    margin: 16px auto;
}
#hp_global_navi ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#hp_global_navi ul li {
    width: 140px;
    float: left;
    margin-right: lpx;
    text-align: center;
}
#hp_global_navi ul li a {
    display: block;
    padding: 2px;
    background-color: #352b23;
    color: #fff;
    test-decoration: none;
    transition: background-color 0.2s linear;
}
#hp_global_navi ul li.current a {
    background-color: #b7a077;
}
#hp_global_navi ul li a:hover {
    background-color: #8c7a5b;
}


#global_navi_tl {
    width: 1100x;
    clear: both;
    overflow: hidden;
    margin: 16px auto;
}
#global_navi_tl ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#global_navi_tl ul li {
    width: 220px;
    float: left;
    margin-right: lpx;
    text-align: center;
}
#global_navi_tl ul li a {
    display: block;
    padding: 2px;
    background-color: #352b23;
    color: #fff;
    test-decoration: none;
    transition: background-color 0.2s linear;
}
#global_navi_tl ul li.current a {
    background-color: #b7a077;
}
#global_navi_tl ul li a:hover {
    background-color: #8c7a5b;
}



/* #wrapper { */
.wrapper {/* classに変更 */
    width: 1100px;
    margin: 0 auto;
    overflow: hidden;
}
#main {
    width: 860px;
    float: left;
}
#sidebar {
    width: 220px;
    float: right;

}
#sidebar .codearea {/* 追加 */
    background-color: #fff;
}
#sidebar .codearea a {/* 追加 */
    text-decoration: none;
    color:#333;
    font-weight:bold;
}
#sidebar .codearea a:hover {/* 追加 */
    color:#0054ac;
}
#sidebar .sideareaview:first-child {/* 追加 */
    margin-bottom: 10px;
}
#sidebar .sideareaview:not(:first-child) {/* 追加 */
    background: url(images/ic_arrow.png) 0 4px no-repeat;
    background-size: 14px 14px;
}
#sidebar .sideareaview a {/* 追加 */
    padding-left: 20px;
}#side_banner {
    margin-bottom: 30px;
    /*margin-topをjsにて指定 */
}
#side_banner h2 {
    /* background-color: #716961; */
    background: url("images/bg_menu.png");/* 変更 */
    color: #fff;
    padding: 7px;
    font-size: 14px;
    text-align: center;
}
#side_banner ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#side_banner ul li { margin-bottom: 10px; }
#side_banner ul li a {/* 追加 */
    text-decoration: none;
    color:#333;
}
#side_banner ul li a:after {/* 追加 */
    content: "";
    background: url(images/ic_link.png) 4px 0px no-repeat;
    background-size: 14px 14px;
    width: 20px;
    height: 14px;
    display: inline-block;
}
#side_banner ul li a:hover {/* 追加 */
    text-decoration: underline;
}
#side_contact { margin-bottom: 30px; }
#side_contact {
    /* border: lpx solid #b7a077; *//* 削除 */
    /* color: #7f7259; *//* 削除 */
    text-align: center;
}
#side_contact h2 {
    /* background-color: #b7a077; */
    background: url("images/bg_menu.png");/* 変更 */
    color: #fff;
    padding: 7px;
    font-size: 14px;
}
#side_contact address {
    font-weight: bold;
    font-size: 20px;
    font-style: normal;
}
#side_contact address img {
    vertical-align: middle;
    margin-right: 5px;
}
#side_contact .contact_button {
    display: inline-block;
    /* bckground: #f1ede4; */
    /* background: -webkit-gradient(liner, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#fede4));
    /* background: -webkit-linear-gradient(top,  #ffffff 0%, #flede4 100%); */
    /* background: linear-gradient(to bottom, #ffffff 0%,#flede4 100%); */
    /* background: linear-gradient(to bottom, #ffffff 0%,#flede4 100%); */
    background: #b7a077;/* 変更 */
    /* color: #b7a077; */
    color: #fff;/* 変更 */
    /* padding: 10px; */
    padding: 10px 20px;/* 変更 */
    /* border: lpx solid #b7a077; *//* 削除 */
    /* border-radius: 5px; */
    border-radius: 8px;/* 変更 */
    text-decoration: none;
}
#side_contact .contact_button:hover{
    /* background: #b7a077; *//* 削除 */
    /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7a077), color-stop(100%,#e2cda7));/* 削除 */
    /* background: -webkit-linear-gradient(top, #b7a077 0%,#e2cda7 100%); *//* 削除 */
    color: #fff;
    opacity:0.8;/* 追加 */
}
footer {
    background-color: #35sb23;
    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 lpx #aaa;
    margin-left: 8px;
    padding-left: 8px;
    font-size: smaller;
}
footer #footer_nav li:las-child {
    border-right: solid lpx #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; }
#header_selection {
    clear: both;
    overflow: hidden;
    margin: 16px auto;
}
#header_navi {
    /* width: 1100x; */
    width: 100%;/* 変更 */
    clear: both;
    /* overflow: hidden; *//* 削除 */
    /* margin: 16px auto; *//* 削除 */
    border-top: 1px solid #888;/* 追加 */
    border-bottom: 4px solid #0054ac;/* 追加 */
    height:50px;/* 追加 */
    margin-bottom:10px;/* 追加 */
}
#header_navi ul {
    list-style: none;
    /* margin: 0; */
    margin:0 auto;/* 変更 */
    padding: 0;
    width:1100px;/* 追加 */
}
#header_navi ul li {
    width: 220px;
    float: left;
    /* margin-right: lpx; *//* 削除 */
    text-align: center;
}
#header_navi ul li a {
    display: block;
    padding: 0px;/* 元は2pxだったのだが、請求書のタブでずれて表示してしまうので、仕方なく0pxにする。*/
    /* background-color: #352b23; *//* 削除 */
    /* color: #fff; */
    color: #0054ac;/* 変更 */
    /* test-decoration: none; */
    text-decoration: none;/* 修正 */
    /* transition: background-color 0.4s linear; *//* 削除 */
    height: 50px;/* 追加 */
    line-height: 50px;/* 追加 */
    border-right:1px solid #888;/* 追加 */
    border-left:1px solid #888;/* 追加 */
    font-weight: bold;/* 追加 */
}
#header_navi ul li a {/* 追加 */
    margin-right:-1px;
}
#header_navi ul li.current a {
    /* background-color:#b7a077; */
    background-color:#0054ac;/* 変更 */
    color: #fff;/* 追加 */
}
#header_navi ul li a:hover {
    /* background-color:#b7a077; */
    background-color:#0054ac;/* 変更 */
    color: #fff;/* 追加 */
}
/* .twolines_naviは1つめのタブが2段になった時のスタイルです
#header_naviのheightの2倍の値にしてください */
#header_navi.twolines_navi{/* 追加 */
    height:100px;
}
#header_navi.twolines_navi ul li:nth-child(-n+5) a{/* 追加 */
    border-bottom:1px solid #888;
}
#hp_header_navi {
    width: 1200x;
    clear: both;
    overflow: hidden;
    margin: 16px auto;
}
#hp_header_navi ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#hp_header_navi ul li {
    width: 140px;
    float: left;
    margin-right: lpx;
    text-align: center;
}
#hp_header_navi ul li a {
    display: block;
    padding: 2px;/* 元は2pxだったのだが、請求書のタブでずれて表示してしまうので、仕方なく0pxにする。*/
    background-color: #352b23;
    color: #fff;
    test-decoration: none;
    transition: background-color 0.4s linear;
}
#hp_header_navi ul li.current a {
    background-color: #b7a077;
}
#hp_header_navi ul li a:hover {
    background-color: #8c7a5b;
}

input[type=button] {/* 追加 */
    padding: 2px 6px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #EFEFEF;
    cursor: pointer;
    border:1px solid #666;
    border-radius: 2px;
}
input[type=button]:hover {/* 追加 */
    background-color: #ddd;
}
input[type=submit],input[type=button].logout-btn {/* 追加 */
    /* padding: 4px 12px; */
    padding: 4px 12px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #0054ac;
    cursor: pointer;
    border:1px solid #0054ac;
    border-radius: 2px;
    color:#fff;
    /*    width:66px;*/
    height:30px;
}
input[type=submit]:hover, input[type=button].logout-btn:hover {/* 追加 */
    opacity:0.8;
}
input[type=button].logout-btn {/* 追加 */
    float:right;
    margin-top:20px;
}
input[type=text],textarea {/* 追加 */
    border: 1px solid #999;
    border-radius: 4px;
    outline: none;
}
.form-fixed {/* 追加 */
    position: fixed;
    /* topをjsにて指定 */
    width: 860px;
    background: #fff;
}
.form-notfixed {/* 追加 */
    padding-top:0px;
}