/* ================================================= *
 *        	maintenance
 * ================================================= */

#inspection {
    /* 375pxで14px、768pxで16pxになる計算式 */
    --fluid-font-size: calc(14px + (16 - 14) * ((100vw - 375px) / (768 - 375)));
}

/* 768px以上はフォントサイズを固定 */
@media (min-width: 768px) {
    #inspection {
        --fluid-font-size: 16px;
    }
}

/* 375px以下はフォントサイズを固定 */
@media (max-width: 375px) {
    #inspection {
        --fluid-font-size: 14px;
    }
}

#inspection h1 {
    border-bottom: 45px solid #06ad70;
}

#inspection ul.ttl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#inspection ul.ttl li {
    background-color: rgba(6, 173, 112, 0.4);
}

#inspection ul.ttl li.on,
#inspection ul.ttl li:hover {
    background-color: #06ad70;
}

#inspection ul.ttl li:first-of-type {
    margin-right: 10px;
}

#inspection ul.ttl li:nth-of-type(2) {
    margin-right: 10px;
    margin-left: 10px;
}

#inspection ul.ttl li:last-of-type {
    margin-left: 10px;
}

#inspection .menu_content {
    padding: 40px 15px 0px;
}

#inspection img {
    vertical-align: bottom;
}

#inspection img.main {
    margin: 5px;
}

#inspection #mainte .main_text {
    padding: 20px 0;
}

#inspection #mainte .mainte__title {
    font-size: 3rem;
    font-weight: bold;
    margin: 10px auto;
}

#inspection #mainte ul.list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: space-around;
    -ms-flex-pack: space-around;
    justify-content: space-around;
    max-width: 750px;
    margin: 20px auto;
}

#inspection #mainte ul.list li {
    width: 48%;
    padding: 1%;
}

#inspection #mainte ul.list li img {
    width: 100%;
}

@media only screen and (max-width: 480px) {
    #inspection #mainte ul.list li {
        width: 45%;
    }
}

#inspection #oil_mainte {
    max-width: 710px;
    margin: 0 auto;
}

#inspection #oil_mainte .mainte__title {
    font-size: 3rem;
    font-weight: bold;
    margin: 10px auto;
}

#inspection #oil_mainte p.ttl {
    font-size: calc(var(--fluid-font-size) * 0.75);
    font-weight: bold;
    text-align: left;
}

#inspection #oil_mainte p.caution {
    color: #E50012;
    font-size: calc(var(--fluid-font-size) * 0.875);
    text-align: right;
}

#inspection #oil_mainte ul {
    margin-top: 20px;
    font-size: calc(var(--fluid-font-size) * 0.8125);
    text-align: left;
}

/* テーブル全体のスタイル */
#inspection #oil_mainte .price-table {
    width: 100%;
    border-collapse: collapse;
    /* セルの境界線を一本にする */
    text-align: center;
    border: 1px solid #ddd;
    /* テーブルの外枠 */
}

/* 見出しセル（th）とデータセル（td）共通のスタイル */
#inspection #oil_mainte .price-table th,
#inspection #oil_mainte .price-table td {
    border: 1px solid #ddd;
    /* セルの境界線 */
    padding: 12px;
    line-height: 14px;
}

#inspection #oil_mainte .price-table th span {
    font-size: 60%;
}

/* 見出し行（thead）のスタイル */
#inspection #oil_mainte .price-table thead {
    background-color: #1a9a70;
    /* ヘッダーの背景色 */
    color: white;
    /* ヘッダーの文字色 */
}

/* データセル（td）のスタイル */
#inspection #oil_mainte .price-table td {
    font-size: 1.2em;
    font-weight: bold;
    color: #c00;
    /* 価格の文字色 */
}


#inspection #inspection_price {
    max-width: 710px;
    margin: 0 auto;
}

#inspection #inspection_price .mainte__title {
    font-size: 3rem;
    font-weight: bold;
    margin: 10px auto;
}

#inspection #inspection_price p.ttl {
    font-size: calc(var(--fluid-font-size) * 0.75);
    font-weight: bold;
    text-align: left;
}

/* 定期点検料金テーブルのスタイル */
#inspection #inspection_price .inspection-price-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
}

#inspection #inspection_price .inspection-price-table thead {
    background-color: #1a9a70;
    color: white;
}

#inspection #inspection_price .inspection-price-table tbody {
    font-weight: bold;
}

#inspection #inspection_price .inspection-price-table th,
#inspection #inspection_price .inspection-price-table td {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: left;    
}

#inspection #inspection_price .inspection-price-table tbody td:first-child {
    background: #f6f6f6;
}

#inspection #inspection_price .inspection-price-table tbody td.bg_green {
    background: #a2d4b9;
}

#inspection #inspection_price .inspection-price-table tbody td:last-child {
    text-align: center;
    font-size: 1.2em;
    color: #c00;
}

/* rowspanで縦に結合されたセルの垂直位置を中央に調整 */
#inspection #inspection_price .inspection-price-table td[rowspan] {
    vertical-align: middle;
}

@media only screen and (max-width: 768px) {
    #inspection #oil_mainte .price-table th {
        font-size: 1.4rem;
    }

    #inspection #oil_mainte .price-table td {
        font-size: 1.6rem;
    }
}

@media only screen and (max-width: 768px) {
    #inspection h1 {
        border-bottom: 20px solid #06ad70;
    }
}

.disnon {
    display: none;
}

#slidershow {
    display: none;
}