@charset "UTF-8";
@import url("base.css");

/* ----- TOP ----- */

.site-title {
    margin: 57px auto 25px auto;
    width: 545px;
    border: none !important;
    padding: 0 !important;
    background: none !important;
}

.site-title img {
    vertical-align: top;
}

.top #data {
    font-size: 200%;
    font-weight: bold;
    color: #175D9F;
    text-align: center;
}

#news {
    border-top: 1px solid #CAC9CF;
    border-bottom: 1px solid #CAC9CF;
    padding: 5px 0;
    margin: 0 0 25px 0;
    font-weight: bold;
}

#news h2 {
    color: #175D9F;
    text-align: center;
}

h2.confusion {
    color: #fff;
    padding: 10px;
    text-align: center;
    margin: 1px 0 0 0;
    width: 715px;
    box-sizing: border-box;
    display:flex;
    justify-content: space-between;
    
    -webkit-background-size: 5px 5px;
    -moz-background-size: 5px 5px;
    background-size: 5px 5px;
    background-color: #175D9F;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,
    color-stop(.25, #006EA5), color-stop(.25, transparent),
    color-stop(.5, transparent), color-stop(.5, #006EA5),
    color-stop(.75, #006EA5), color-stop(.75, transparent),
    to(transparent));
    background-image: -webkit-linear-gradient(-45deg, #006EA5 25%, transparent 25%,
    transparent 50%, #006EA5 50%, #006EA5 75%,
    transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, #006EA5 25%, transparent 25%,
    transparent 50%, #006EA5 50%, #006EA5 75%,
    transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, #006EA5 25%, transparent 25%,
    transparent 50%, #006EA5 50%, #006EA5 75%,
    transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, #006EA5 25%, transparent 25%,
    transparent 50%, #006EA5 50%, #006EA5 75%,
    transparent 75%, transparent);
    background-image: linear-gradient(-45deg, #006EA5 25%, transparent 25%,
    transparent 50%, #006EA5 50%, #006EA5 75%,
    transparent 75%, transparent);
}

h2.confusion img {
    margin: 0 0 0 10px;
}

.reload-note {
    margin: 20px 0 10px 0;
    text-align: center;
    color: #e60013;
}

.top section {
    overflow: hidden;
}

.top #contentsbody section h1 {
    width: 201px;
    display: inline;
    margin: 0 5px 0 0;
    float: left;
    padding: 0;
}

.waiting {
    width: 110px;
    position: relative;
    text-align: center;
    margin: 5px 0 0;
}

.waiting h3 {
    color: #fff;
    display: block;
    font-size: 70%;
    padding: 2px;
}

.waiting span {
    font-size: 250%;
}

.waiting .unit {
    position: absolute;
    bottom: 5px;
    right: 5px;
    display: block;
}

.top section p.caution {
    padding: 10px 20px;
    font-size: 130%;
    clear: both;
    margin: 0;
}

section p.caution span {
    color: #fff;
    padding: 0 5px;
    display: inline-block;
    margin: 2px 0;
}

.footer-link {
    margin-top: 20px;
}

.footer-link h1 {
    width: 100%;
    margin: 0 0 10px 0;
    font-size: 100%;
    padding: 20px 0;
    background: #F0F0F0;
    text-align: center;
}

.footer-link ul {
    display: table;
    table-layout: fixed;
    width: 100%;
    min-height: 90px;
}

.footer-link li {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
    padding: 0 10px;
}

.footer-link a {
    width: 100%;
    display: block;
    text-align: center;
}

.footer-link img {
    max-width: 100%;
    vertical-align: middle;
}

.top .link {
    background: #F7F7F7;
}

.top .link img {
    width: 100%;
}

.link li {
    display: table;
}

.link li a {
    width: 100%;
    height: 50px;
    display: table-cell;
    vertical-align: middle;
}

/* ----- このサイトについて ----- */

.about h1, .calender h1 {
    border-left: 15px solid #BEDD99;
    background-color: #EBF4E3;
    padding: 5px 0 5px 10px;
    font-weight: bold;
}

.about footer {
    text-align: center;
}

.about footer h1 {
    background-color: #1D2089;
    border: none;
    color: #fff;
    font-size: 110%;
}

.about footer h2 {
    font-size: 140%;
}

/* ----- 混雑予想カレンダー ----- */

.calender h2 {
    width: 697px;
    margin: 10px auto 50px;
}

.calender .calenderbox {
    overflow: hidden;
    width: 650px;
    margin: 0 auto 30px;
}

.calender div.anticipation {
    width: 305px;
    float: left;
    margin: 60px 10px 0;
    display: inline;
}

.calender table {
    width: 305px;
    border-spacing: 1px;
    border: 1px solid #000;
    background-color: #000;
    border-collapse: separate;
    font-size: 110%;
}

.calender td {
    padding: 10px;
    background-color: #fff;
    border: none;
    line-height: 1.5;
    text-align: center;
}

.calender th {
    padding: 10px;
    background: #fff;
    border-bottom: 1px doubled #000;
}

.calender td.yellow {
    background-color: #F4F29D;
}

.calender td.red {
    background-color: #EE96C0;
}

.calender td.green {
    background-color: #C8DE95;
}

.calender .slash {
    background: url(../../pic/calender-slash-bg.gif) center center no-repeat #fff;
}

.calender .sat {
    background: url(../../pic/calender-sat-bg.gif) right top no-repeat #fff;
    text-align: left;
    padding-left: 2px;
}

.calender h2 {
    text-align: center;
    font-size: 120%;
    margin: 0 0 10px;
}

/* ----- 2017.1.18変更 ----- */

.top dl {
    display: table;
    margin-bottom: 10px;
    width: 100%;
}

.top dt {
    width: 250px;
    margin: 0 10px 0 0;
    padding: 0;
    display: table;
    float: left;
    vertical-align: middle;

    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;

    color: #FFF;
    background: #c8c8cb;

    box-shadow: 0px 3px 5px 0px #a6a6a6;
    -moz-box-shadow: 0px 3px 5px 0px #a6a6a6;
    -webkit-box-shadow: 0px 3px 5px 0px #a6a6a6;

    height: 65px;
    text-align: center;
    text-shadow: 1px 1px 1px #000000;
}
.top dt.full {
    width: 100%;
}

.top dt span {
    display: table-cell;
    vertical-align: middle;
    line-height: 1.2;
}

.top dd {
    height: 65px;
    margin: 0;
    padding: 0;
    float: left;
    border: 1px solid #c8c8cb;
    box-sizing: border-box;
    width: 90px;

    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    overflow: hidden;
}

.top dd h3 {
    color: #FFF;
    font-size: 70%;
    padding: 2px;
    margin: 0;
    background: #c8c8cb;
    font-weight: bold;
}

.top dd span {
    font-size: 135%;
    line-height: 1.4;
}

.top dd .unit {
    position: absolute;
    bottom: 0px;
    right: 2px;
}

.detail {
    background: rgba(200, 200, 203, 0.11);
    padding: 10px;
    /*min-height: 175px;*/
}

.service-group-title {
    float: left;
    clear: both;
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
    padding: 5px 0;
    letter-spacing: .1em;
    color: #FFF;
    width: 715px;
    margin: 10px 0 1px 0;
    -webkit-background-size: 5px 5px;
    -moz-background-size: 5px 5px;
    background-size: 5px 5px;
    background-color: #175D9F;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #006EA5), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, #006EA5), color-stop(.75, #006EA5), color-stop(.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(
            -45deg
            , #006EA5 25%, transparent 25%, transparent 50%, #006EA5 50%, #006EA5 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, #006EA5 25%, transparent 25%, transparent 50%, #006EA5 50%, #006EA5 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, #006EA5 25%, transparent 25%, transparent 50%, #006EA5 50%, #006EA5 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, #006EA5 25%, transparent 25%, transparent 50%, #006EA5 50%, #006EA5 75%, transparent 75%, transparent);
    background-image: linear-gradient(
            -45deg
            , #006EA5 25%, transparent 25%, transparent 50%, #006EA5 50%, #006EA5 75%, transparent 75%, transparent);
}

/* Top サービス一覧のレイアウト */

.service-area {
    width: 730px;
}

section.service {
    margin: 10px 15px 0 0;
    float: left;
    width: 350px;
    font-size: 1.2em;
}

/*  */

.service p {
    font-size: 0.8em;
}

.service .note {
    font-size: 0.7em;
}

.service em {
    border: none;
    font-weight: bold;
    font-size: 130%;
    margin: 0 5px 0 0;
}

.service-separation-line {
    margin: 15px 0 5px 0;
    float: left;
    width: 715px;
    border: none;
    border-top: 1px solid #CAC9CF;
}
/* お呼出メール */

#mail {
    margin-bottom: 40px;
}

#mail h3 {
    padding: 10px;
    margin: 0 0 5px 0;
    text-align: center;
    color: #FFF;
    font-size: 200%;
}

#mail p {
    margin-bottom: 20px;
}

.bg {
    padding: 0 5px;
}

.bg-lightgreen {
    background: rgba(33, 157, 107, 0.10);
}

/* 閉庁時 */
.bg-lightnavy {
    background: rgba(33, 49, 144, 0.10);
}

.closed-area {
    margin-top: 5px;
    margin-bottom: 30px;
    padding: 30px;
}

/* カラー */
.service.purple dt,
.service.purple h3,
.bg-purple {
    color: #FFF;
    background: #9a0079;
}

.service.purple dd {
    border-color: #9a0079;
}

.service.purple .detail {
    background: rgba(154, 0, 121, 0.11);
}

.service.light-purple dt,
.service.light-purple h3,
.bg-light-purple {
    color: #FFF;
    background: #d794be;
}

.service.light-purple dd {
    border-color: #d794be;
}

.service.light-purple .detail {
    background: rgba(215, 148, 190, 0.11);
}

.service.red dt,
.service.red h3,
.bg-red {
    color: #FFF;
    background: #e60013;
}

.service.red dd {
    border-color: #e60013;
}

.service.red .detail {
    background: rgba(230, 0, 19, 0.11);
}

.text-red {
    color: #e60013;
}

.service.light-blue dt,
.service.light-blue h3,
.bg-light-blue {
    color: #FFF;
    background: #66ccff;
}

.service.light-blue dd {
    border-color: #66ccff;
}

.service.light-blue .detail {
    background: rgba(102, 204, 255, 0.11);
}

.service.pink dt,
.service.pink h3,
.bg-pink {
    color: #FFF;
    background: #ff99a0;
}

.service.pink dd {
    border-color: #ff99a0;
}

.service.pink .detail {
    background: rgba(255, 153, 160, 0.11);
}

.service.yellow dt,
.service.yellow h3,
.bg-yellow {
    color: #444;
    background: #f3ed3d;
}
.service.yellow dt {
    text-shadow: 1px 1px 1px #fff;
}

.service.yellow dd {
    border-color: #f3ed3d;
}

.service.yellow .detail {
    background: rgba(243, 237, 61, 0.11);
}

.service.orange dt,
.service.orange h3,
.bg-orange {
    color: #FFF;
    background: #ff9900;
}

.service.orange dd {
    border-color: #ff9900;
}

.service.orange .detail {
    background: rgba(255, 153, 0, 0.11);
}

.service.green dt,
.service.green h3,
.bg-green {
    color: #FFF;
    background: #35a16b;
}

.service.green dd {
    border-color: #35a16b;
}

.service.green .detail {
    background: rgba(53, 161, 107, 0.11);
}

.service.light-green dt,
.service.light-green h3,
.bg-light-green {
    color: #FFF;
    background: #AED739;
}

.service.light-green dd {
    border-color: #AED739;
}

.service.light-green .detail {
    background: rgba(174,215,57,0.1);
}

.service.pastel-green dt,
.service.pastel-green h3,
.bg-pastel-green {
    color: #fff;
    background: #82E5B0;
}

.service.pastel-green dd {
    border-color: #82E5B0;
}

.service.pastel-green .detail {
    background: rgba(130,229,176,0.1);
}

.service.brown dt,
.service.brown h3,
.bg-brown {
    color: #FFF;
    background: #696F3F;
}

.service.browndd {
    border-color: #696F3F;
}

.service.brown .detail {
    background: rgba(105,111,63,0.1);
}

.service.gray dt,
.service.gray h3,
.bg-gray{
    color: #FFF;
    background: #737373;
}

.service.gray dd {
    border-color: #737373;
}

.service.gray .detail {
    background: rgba(115,115,115,0.11);
}

.service.navy dt,
.service.navy h3,
.bg-navy {
    color: #FFF;
    background: #1d208b;
}

.service.navy dd {
    border-color: #1d208b;
}

.service.navy .detail {
    background: rgba(29, 32, 139, 0.1);
}

.service.blue dt,
.service.blue h3,
.bg-blue {
    color: #FFF;
    background: #3380c8;
}

.service.blue dd {
    border-color: #3380c8;
}

.service.blue .detail {
    background: rgba(51, 128, 200, 0.11);
}

.service.white dt,
.bg-white {
    color: #444;
    background: #FFF;
}

.service.white h3 {
    color: #444;
    background: #FFF;
    border-bottom: 1px solid #444;
}

.service.white dd {
    border-color: #444;
}

.service.white .detail {
    background: #FAFAFA;
}

.header-link {
    margin-bottom: 35px;
}

.header-note {
    padding: 20px 70px;
    margin-bottom: 20px;
    background: #F0F0F0;
    font-size: 90%;
}
.header-note em {
    font-weight: bold;
}

.vertical-link {
    width: 100%;
}

.header-link li,
.vertical-link li {
    list-style: none;
    text-align: center;
    margin-bottom: 10px;
}

.vertical-link li:last-child {
    margin: 0;
}

.horizonal-link {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto 40px auto;
}

.horizonal-link li {
    display: inline;
}

.btn-link li {
    display: inline-block;
    padding: 0;
    margin: 5px;
}

.btn-link li a {
    display: block;
    text-decoration: none;
    color: #FFF;
    background: #175D9F;
    padding: 10px;
    border-radius: 3px;
    width: 220px;
}

.btn-link li a:hover {
    opacity: 0.8;
}

.box-sm.dt {
    font-size: 0.9em;
}

.box-xs.dt {
    font-size: 0.7em;
}

.mail-form {
    width: 715px;
    box-sizing: border-box;
    text-align: center;
    margin-top: 10px;
}

.mail-form h3 {
    background: #24913D;
    padding: 10px;
    text-align: center;
    color: #FFF;
    font-size: 200%;
    margin: 0;
}

.mail-form-caution {
    color: #e60013;
    text-align: left;
}

.mail-service-list {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    list-style: none;
    border: 1px dashed #24913D;
    padding: 5px;
}

.mail-service-list li {
    box-sizing: border-box;
    font-size: .8em;
    width: 25%;
    padding: 5px 10px;
}

.mail-form-wrapper {
    background: rgba(53, 161, 107, 0.11);
    padding: 10px;
}

#accessibility-header {
    width: 100%;
    position: relative;
}
#accessibility-header-inner {
    position: absolute;
    top: -246px;
    width: 100%;
}

#accessibility-footer-inner {
    display: flex;
    justify-content: center;
    border-top: 1px solid #F0F0F0;
    padding-top: 30px;
    margin-top: 30px;
}

#cse-search-box {
    float: left;
    height: 32px;
    box-sizing: border-box;
}

#cse-search-box input[type="text"] {
    /* reset */
    padding: 0;
    border: none;
    border-radius: 0;
    outline: none;
    background: none;
    /* style */
    border: 1px solid #CAC9CF;
    padding: 5px 10px;
    box-sizing: border-box;
    line-height: 1;
    height: 100%;
    vertical-align: top;
    width: 250px;
    background-position: left 10px top 7px !important;
    font-size: .9em;
}

#cse-search-box input[type="submit"] {
    /* reset */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    /* style */
    border: 1px solid #444;
    color: #444;
    padding: 5px 10px;
    box-sizing: border-box;
    line-height: 1;
    height: 100%;
    vertical-align: top;
    border-radius: 3px;
}

#fontsize {
    float: right;
}

.square_btn {
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    color: #444;
    border: solid 2px #444;
    border-radius: 3px;
    transition: .2s;
    cursor: pointer;
    line-height: 1;
}

.square_btn:hover {
    background: #444;
    color: white;
}

/* 汎用クラス */
.text-left {
    text-align: left;
}