/* style.css
 * **************************************************
 * ヘッダー
 * 共通要素
 * リアルタイム満空情報
 * 各駐車場詳細
 * お問い合わせ先
 * 減免方法のご案内
 * **************************************************
 */

/* ヘッダー
------------------------------------------------------------------ */

#subPage #header {
    background-color: #187fc3;
    margin: 0 calc(50% - 50vw);
    padding: 10px 0 0;
    text-align: center;
    width: 100vw;
}

#subPage #header h1 {
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 0.02em;
}

/* 共通要素
------------------------------------------------------------------ */

#subPage #content .inner {
    margin: 0 0 40px;
    padding: 0;
    width: 1000px;
}

#subPage #content article {
    font-size: 15px;
    padding: 100px 0;
}

#subPage #content article + article {
    border-top: 1px solid #333333;
}

/* paragraph */
#subPage #content p.important {
    color: #dc0000;
    font-size: 20px;
    text-align: center;
}

#subPage #content p.company {
    margin: 40px 0 0 0;
    text-align: right;
}

/* link */
#subPage #content a {
    text-decoration: none;
}

/* headline */
#subPage #content h2 {
    color: #187fc3;
    font-size: 30px;
    letter-spacing: 0.05em;
    margin: 0 0 65px;
    text-align: center;
}

#subPage #content h3 {
    font-size: 20px;
    letter-spacing: 0.05em;
}

/* flex */
#subPage #content .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* リアルタイム満空情報
------------------------------------------------------------------ */

/* availability */
#subPage #content .availability::after {
    content: "";
    display: block;
    width: 300px;
}

#subPage #content .availability dl {
    border-top: 1px solid #00bbff;
    border-bottom: 1px solid #00bbff;
    display: table;
    width: 300px;
}

#subPage #content .availability dl:nth-child(n + 4) {
    margin-top: 20px;
}

#subPage #content .availability dl dt,
#subPage #content .availability dl dd {
    display: table-cell;
    line-height: 1;
    padding: 8px 0;
    text-align: center;
    vertical-align: middle;
}

#subPage #content .availability dl dt {
    background-color: #dcecf6;
    border-right: 1px solid #00bbff;
    font-weight: bold;
    width: 190px;
}

#subPage #content .availability dl dt span {
    background-color: #187fc3;
    color: #ffffff;
    display: inline-block;
    font-size: 1.6em;
    margin: 0 12px 0 0;
    padding: 2px 0;
    text-align: center;
    vertical-align: middle;
    width: 28px;
}

#subPage #content .availability dl dd img {
    width: 42px;
}

/* parkingMap */
#subPage #content .parkingMap {
    margin: 65px auto 0;
    width: 800px;
}

#subPage #content .parkingMap img {
    border: 1px solid #000000;
    width: 100%;
}

#subPage #content .parkingMap p.attention {
    color: #dc0000;
    font-weight: 700;
}

/* parkingNews */
#subPage #content .parkingNews {
    margin: 65px 0 0 0;
}

#subPage #content .parkingNews h3 {
    font-size: 18px;
    margin: 0 0 10px;
}

#subPage #content .parkingNews .whatsNew {
    border: 8px solid #b3b3b3;
    height: 150px;
    overflow: auto;
    padding: 8px 40px;
}

#subPage #content .parkingNews .whatsNew dl {
    border-bottom: 1px dashed #b3b3b3;
    display: table;
    font-size: 18px;
    width: 100%;
}

#subPage #content .parkingNews .whatsNew dl dt,
#subPage #content .parkingNews .whatsNew dl dd {
    display: table-cell;
    line-height: 1.4;
    padding: 12px 0;
    text-align: left;
    vertical-align: top;
}

#subPage #content .parkingNews .whatsNew dl dt {
    width: 190px;
}

#subPage #content .parkingNews .whatsNew ul {
    list-style: none;
}

#subPage #content .parkingNews .whatsNew ul li {
    border-bottom: 1px dashed #b3b3b3;
    font-size: 18px;
    line-height: 1.4;
    padding: 12px 0;
    text-align: left;
}

#subPage #content .parkingNews .whatsNew a {
    color: #187fc3;
    text-decoration: underline;
}

/* 各駐車場詳細
------------------------------------------------------------------ */

/* map */
#subPage #content .map {
    width: 430px;
}

#subPage #content .mapWrap {
    padding-top: 111%;
    position: relative;
}

#subPage #content .mapWrap iframe {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* basicInfo */
#subPage #content .basicInfo {
    width: 500px;
}

#subPage #content .basicInfo h3 {
    margin-bottom: 14px;
}

#subPage #content .basicInfo dl {
    border-top: 2px solid #000000;
    display: table;
    width: 100%;
}

#subPage #content .basicInfo dl:last-child {
    border-bottom: 2px solid #000000;
}

#subPage #content .basicInfo dl dt,
#subPage #content .basicInfo dl dd {
    display: table-cell;
    line-height: 1.5;
    padding: 16px 12px;
    text-align: left;
    vertical-align: top;
}

#subPage #content .basicInfo dl dt {
    background-color: #dcecf6;
    width: 140px;
}

#subPage #content .basicInfo dl dd {
    border-left: 1px solid #000000;
    width: calc(100% - 140px);
}

#subPage #content .basicInfo dl dd a {
    display: block;
    margin: 10px 0 0 0;
    text-decoration: underline;
}

#subPage #content .basicInfo dl dd .notes {
    display: block;
    font-size: 0.86em;
    letter-spacing: 0.05em;
    margin: 5px 0 0 0;
}

#subPage #content .basicInfo dl dd .notes a {
    display: inline-block;
    margin: 0;
}

#subPage #content .basicInfo .icon-pdf {
    margin: 0 1px;
    padding: 0;
    vertical-align: middle;
    width: 12px;
}

/* fee */
#subPage #content .fee {
    margin: 74px 0 0 0;
}

#subPage #content .fee h3 span {
    border: 1px solid #dc0000;
    color: #dc0000;
    display: inline-block;
    font-size: 0.75em;
    letter-spacing: 0;
    padding: 3px 8px;
    vertical-align: 0.2em;
}

#subPage #content .fee p.attention {
    color: #dc0000;
    font-size: 20px;
    margin: 6px 0 0 0;
}

#subPage #content .fee table {
    margin: 14px 0 0 0;
    width: 100%;
}

#subPage #content .fee table tr {
    border-top: 1px solid;
}

#subPage #content .fee table tr:last-child {
    border-bottom: 2px solid;
}

#subPage #content .fee table tr th {
    background-color: #dcecf6;
    font-weight: 400;
}

#subPage #content .fee table tr th:first-child {
    border-right: 2px solid;
}

#subPage #content .fee table tr th,
#subPage #content .fee table tr td {
    line-height: 2;
    text-align: center;
    vertical-align: middle;
}

#subPage #content .fee table tr th + th,
#subPage #content .fee table tr td + td {
    border-left: 2px solid;
}

#subPage #content .fee table thead tr th {
    border-top: 2px solid;
    padding: 15px 0;
}

#subPage #content .fee table tbody tr th {
    width: 120px;
}

#subPage #content .fee table tbody tr td {
    padding: 24px 0;
}

#subPage #content .fee table tbody tr td span {
    display: block;
    font-size: 0.8em;
}

#subPage #content .fee p.notes {
    margin: 22px 0 0 0;
}

#subPage #content .fee p.link {
    margin: 12px 0 0 0;
}

#subPage #content .fee p.link a {
    font-weight: 700;
    text-decoration: underline;
}

/* お問い合わせ先
------------------------------------------------------------------ */

#subPage #content dl.inquiry {
    border: 6px solid #187fc3;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}

#subPage #content dl.inquiry dt {
    background-color: #187fc3;
    color: #ffffff;
    padding: 2px 0 8px;
}

#subPage #content dl.inquiry dd {
    color: #187fc3;
    padding: 17px 0;
}

#subPage #content dl.inquiry dd span:not(.notes) {
    font-size: 0.83em;
}

#subPage #content dl.inquiry dd span.notes {
    display: inline-block;
    font-size: 0.5em;
}

#subPage #content dl.inquiry dd a {
    color: #187fc3;
}

/* 減免方法のご案内
------------------------------------------------------------------ */

.desabledExemption #content p.attention {
    font-size: 2rem;
    font-weight: bold;
    margin-top: -50px;
    text-align: center;
}

.desabledExemption #content .flex {
    row-gap: 75px;
}

.desabledExemption #content .guide {
    width: 475px;
}

.desabledExemption #content .guide h3 {
    border-bottom: 1px solid #333333;
    margin-bottom: 16px;
    padding-bottom: 14px;
}

.desabledExemption #content .guide p,
.desabledExemption #content .guide ol {
    font-size: 1.5rem;
    line-height: 1.5;
}

.desabledExemption #content .guide p:not(:last-child),
.desabledExemption #content .guide ol:not(:last-child) {
    margin-bottom: 21px;
}

.desabledExemption #content .guide b {
    color: #dc0000;
}

.desabledExemption #content .guide p.faxNumber {
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
    margin-top: -11px;
    padding: 11px 0;
}

.desabledExemption #content .guide ol {
    counter-reset: item;
    list-style: none;
}

.desabledExemption #content .guide ol li {
    padding: 0 0 0 22px;
    position: relative;
}

.desabledExemption #content .guide ol li::before {
    counter-increment: item;
    position: absolute;
    top: 0;
    left: 0;
}

.desabledExemption #content .guide ol li:first-child::before {
    content: "\02460";
}

.desabledExemption #content .guide ol li:nth-child(2)::before {
    content: "\02461";
}

.desabledExemption #content .guide ol li:nth-child(3)::before {
    content: "\02462";
}

.desabledExemption #content .guide ol li:nth-child(4)::before {
    content: "\02463";
}

.desabledExemption #content .guide dl.mirairoidHowto {
    width: 300px;
}

.desabledExemption #content .guide dl.mirairoidHowto dt {
    background-color: #187fc3;
    color: #ffffff;
    font-size: 2.4rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    padding: 8px 0;
    text-align: center;
}

.desabledExemption #content .guide dl.mirairoidHowto dd img {
    width: 100%;
}

#subPage.desabledExemption #content .guide p a {
    text-decoration: underline;
}

.desabledExemption #content .guide .icon-pdf {
    margin: 0 1px;
    padding: 0;
    vertical-align: middle;
    width: 12px;
}

/* PageTop
------------------------------------------------------------------ */

#pageTop {
    clear: both;
    margin: 0 auto;
    position: relative;
    max-width: 1200px;
}

#pageTop a {
    background: RGBa(62, 58, 57, 0.8);
    display: block;
    margin-left: 1160px;
    height: 40px;
    outline: none;
    overflow: hidden;
    position: fixed;
    bottom: 160px;
    left: auto;
    width: 40px;
    z-index: 9999;
}

#pageTop a:hover {
    background: #3e3a39;
}

#pageTop img {
    height: 40px;
    width: 40px;
}

/* Media Queries
-------------------------------------------------- */

@media only screen and (max-width: 640px) {
    /* ヘッダー
------------------------------------------------------------------ */

    #subPage #header {
        padding-top: 10px;
        position: static;
    }

    #subPage #header h1 {
        font-size: 24px;
    }

    /* 共通要素
------------------------------------------------------------------ */

    #subPage #content .inner {
        padding: 0 5% 10%;
        width: auto;
    }

    #subPage #content article {
        font-size: 13px;
        padding: 50px 0;
    }

    /* paragraph */
    #subPage #content p.important {
        font-size: 15px;
    }

    /* headline */
    #subPage #content h2 {
        font-size: 21px;
        margin-bottom: 32px;
    }

    #subPage #content h3 {
        font-size: 15px;
    }

    /* リアルタイム満空情報
------------------------------------------------------------------ */

    /* availability */
    #subPage #content .availability::after {
        content: none;
    }

    #subPage #content .availability dl {
        width: 100%;
    }

    #subPage #content .availability dl:not(:first-child) {
        border-top: none;
    }

    #subPage #content .availability dl:nth-child(n + 4) {
        margin-top: 0;
    }

    /* parkingMap */
    #subPage #content .parkingMap {
        margin-top: 30px;
        width: 100%;
    }

    /* parkingNews */
    #subPage #content .parkingNews {
        margin-top: 30px;
    }

    #subPage #content .parkingNews h3 {
        font-size: 15px;
    }

    #subPage #content .parkingNews .whatsNew {
        border-width: 4px;
        padding-left: 20px;
        padding-right: 20px;
    }

    #subPage #content .parkingNews .whatsNew dl {
        display: block;
        font-size: 13px;
    }

    #subPage #content .parkingNews .whatsNew dl dt,
    #subPage #content .parkingNews .whatsNew dl dd {
        display: block;
    }

    #subPage #content .parkingNews .whatsNew dl dt {
        width: auto;
    }

    #subPage #content .parkingNews .whatsNew dl dd {
        padding-top: 0;
    }

    #subPage #content .parkingNews .whatsNew ul li {
        font-size: 13px;
    }

    /* 各駐車場詳細
------------------------------------------------------------------ */

    /* map */
    #subPage #content .map {
        width: 100%;
    }

    #subPage #content .mapWrap {
        padding-top: 80%;
    }

    /* basicInfo */
    #subPage #content .basicInfo {
        margin-top: 20px;
        width: 100%;
    }

    #subPage #content .basicInfo h3 {
        margin-bottom: 6px;
    }

    #subPage #content .basicInfo dl dt,
    #subPage #content .basicInfo dl dd {
        padding: 10px 12px;
    }

    #subPage #content .basicInfo dl dt {
        width: 110px;
    }

    #subPage #content .basicInfo dl dd {
        width: calc(100% - 110px);
    }

    /* fee */
    #subPage #content .fee {
        margin-top: 30px;
    }

    #subPage #content .fee p.attention {
        font-size: 15px;
    }

    #subPage #content .fee table {
        margin-top: 7px;
    }

    #subPage #content .fee table tr th:first-child {
        border-right: none;
    }

    #subPage #content .fee table tr th,
    #subPage #content .fee table tr td {
        display: block;
        width: 100%;
    }

    #subPage #content .fee table tr th + th,
    #subPage #content .fee table tr td + td {
        border-left: none;
    }

    #subPage #content .fee table tr th {
        border-top: 1px solid;
    }

    #subPage #content .fee table tr td[data-title]::before {
        content: attr(data-title);
        display: block;
        font-weight: 700;
    }

    #subPage #content .fee table thead {
        display: none;
    }

    #subPage #content .fee table tbody tr th {
        padding: 6px 0;
        width: 100%;
    }

    #subPage #content .fee table tbody tr td {
        border-top: 1px solid;
        padding: 15px 0 18px;
    }

    /* お問い合わせ先
------------------------------------------------------------------ */

    #subPage #content dl.inquiry {
        border-width: 3px;
        font-size: 16px;
    }

    #subPage #content dl.inquiry dt {
        padding-bottom: 4px;
    }

    /* 減免方法のご案内
------------------------------------------------------------------ */

    .desabledExemption #content h2,
    .desabledExemption #content h3 {
        word-break: keep-all;
    }

    .desabledExemption #content p.attention {
        font-size: 1.6rem;
        line-height: 1.4;
        margin-top: -25px;
        word-break: keep-all;
    }

    .desabledExemption #content .flex {
        row-gap: 35px;
    }

    .desabledExemption #content .guide h3 {
        padding-bottom: 10px;
    }

    .desabledExemption #content .guide p,
    .desabledExemption #content .guide ol {
        font-size: 1.4rem;
        text-align: justify;
    }

    .desabledExemption #content .guide p:not(:last-child),
    .desabledExemption #content .guide ol:not(:last-child) {
        margin-bottom: 16px;
    }

    .desabledExemption #content .guide ol li {
        padding-left: 20px;
    }

    .desabledExemption #content .guide dl.mirairoidHowto {
        width: 100%;
    }

    .desabledExemption #content .guide dl.mirairoidHowto dt {
        font-size: 1.7rem;
    }

    .desabledExemption #content .guide dl.mirairoidHowto dd {
        background-color: #dddddb;
        padding: 0 10%;
    }

    .desabledExemption #content .guide p.faxNumber {
        margin-top: -6px;
    }

    /* PageTop
------------------------------------------------------------------ */

    #pageTop {
        position: relative;
        width: auto;
    }

    #pageTop a {
        background: RGBa(62, 58, 57, 0.8);
        display: block;
        height: 40px;
        outline: none;
        overflow: hidden;
        position: fixed;
        bottom: 0;
        right: 5%;
        width: 40px;
        z-index: 9999;
    }

    #pageTop img {
        height: 40px;
        width: 40px;
    }
}