/* ==========================================
   EASTERN SEIKO RESPONSIVE CSS
   PCデザイン維持・スマートフォン対応
========================================== */

/* 共通 */
@media screen and (max-width: 768px) {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    body {
        text-align: left;
        font-size: 14px;
        line-height: 1.8;
        background-size: auto 1px;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* メインコンテナ */
    #container {
        width: 100% !important;
        max-width: 100%;
        padding: 0 15px;
        margin: 0 auto;
    }

    /* ヘッダー */
    #container #header {
        width: 100%;
        padding-top: 15px;
        margin-bottom: 15px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 10px;
    }

    #header h1 {
        width: 100%;
        text-align: center;
    }

    #header h1 img {
        width: auto;
        max-width: 100%;
        height: auto;
    }

    .header-inquiry {
        float: none;
        width: 100%;
        text-align: center;
    }

    /* ナビゲーション */
    #container #global-navi {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px;
        margin-bottom: 15px;
        background: #fff;
    }

    #global-navi li {
        float: none !important;
        width: auto !important;
        height: auto;
        min-width: 0;
        background: #24558a !important;
    }

    #global-navi li:first-child {
        grid-column: 1 / -1;
    }

    #global-navi li a {
        width: 100%;
        height: auto;
        min-height: 46px;
        padding: 10px 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: none !important;
        background-color: #24558a !important;
        color: #fff;
        font-size: 13px;
        line-height: 1.5;
        text-align: center;
    }

    #global-navi li span {
        display: inline-block;
        font-size: 13px !important;
        line-height: 1.5 !important;
        text-indent: 0 !important;
        color: #fff;
    }

    /* パンくず */
    #container .pankuzu {
        font-size: 11px;
        margin-bottom: 12px;
    }

    /* 見出し */
    #container h2 {
        font-size: 19px;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    /* トップ紹介文 */
    #container .top-text {
        width: 100%;
        font-size: 14px;
        line-height: 1.9;
        overflow: hidden;
    }

    #container .top-text img {
        float: none !important;
        display: block;
        width: 100%;
        max-width: 350px;
        height: auto;
        margin: 0 auto 15px;
    }

    /* スライダー */
    #container #home-img-area,
    #container #home-body #main #home-img-area {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-bottom: 15px;
    }

    #slider {
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
    }

    #slider img {
        width: 100%;
        height: auto;
    }

    /* 製品一覧 */
    #products-index {
        width: 100%;
        padding: 20px 15px;
    }

    #products-index #products-con-area {
        width: 100% !important;
        max-width: 100%;
    }

    #products-index #products-con-area .products-title {
        width: 100%;
        margin-bottom: 15px;
    }

    #products-navi {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0;
        padding: 0;
    }

    #products-index #products-con-area #products-navi li {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 110px;
        margin: 0 !important;
        padding: 8px 5px;
        line-height: 1.5;
        text-align: center;
        background: #5d90e4 !important;
        border-radius: 4px;
    }

    #products-index #products-con-area #products-navi li a {
        display: flex;
        height: 100%;
        min-height: 94px;
        padding: 0 !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 12px;
        line-height: 1.5;
        text-align: center;
    }

    #products-index #products-con-area #products-navi li a img {
        float: none !important;
        display: block;
        width: 84px;
        height: 47px;
        max-width: 100%;
        object-fit: contain;
        margin: 0 auto 5px !important;
    }

    #products-index #products-con-area #products-navi li a:hover {
        background-image: none !important;
        color: #ff0;
    }

    /* フッター */
    #footer-area {
        clear: both;
        float: none !important;
        width: 100% !important;
        max-width: 100%;
        padding: 15px;
        margin: 20px auto 0;
    }

    /* 会社情報 */
    #footer-area #comp-info {
        float: none !important;
        width: 100% !important;
        margin: 20px 0;
        padding-top: 37px;
        background-position: center top;
    }

    #footer-area #comp-info .navi-11 {
        width: 100%;
    }

    /* トピックス */
    #footer-area #topics {
        float: none !important;
        width: 100% !important;
        height: auto;
        margin: 20px 0;
    }

    #footer-area #topics #topics-con {
        width: 100%;
        height: auto !important;
        min-height: 0;
        padding: 15px 0;
    }

    #footer-area #topics #topics-con dl {
        width: 100%;
        margin: 0;
    }

    #footer-area #topics #topics-con dl dt {
        display: none;
    }

    #footer-area #topics #topics-con dl dd {
        margin: 0 0 15px;
        font-size: 13px;
        line-height: 1.8;
        overflow-wrap: anywhere;
    }

    /* フッター右側 */
    #footer-area #footer-right {
        float: none !important;
        width: 100% !important;
    }

    #footer-area #footer-right .get-reader {
        width: 100%;
        overflow: hidden;
    }

    #footer-area #footer-right .get-reader dt {
        float: none;
        margin-bottom: 10px;
    }

    #footer-area #footer-right .get-reader dd {
        margin-left: 0 !important;
    }

    #footer-area .end-link {
        line-height: 2;
        overflow-wrap: anywhere;
    }

    /* 会社案内 */
    #container #left-area {
        float: none !important;
        width: 100% !important;
        margin: 0 0 25px;
    }

    #container #main-con {
        display: block;
        float: none !important;
        width: 100% !important;
        max-width: 100%;
        margin: 0 !important;
    }

    #container #main-con h3 {
        font-size: 19px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    #container #main-con h4 {
        font-size: 19px;
        line-height: 1.6;
    }

    /* 会社概要 */
    #container #main-con #outline dt,
    #container #main-con #access dt,
    #container #main-con #access-chiba dt {
        float: none;
        display: block;
        font-weight: bold;
        margin-bottom: 5px;
    }

    #container #main-con #outline dd,
    #container #main-con #access dd,
    #container #main-con #access-chiba dd {
        margin-left: 0 !important;
        margin-bottom: 15px;
    }

    /* 表 */
    #container #main-con .sinple-table {
        width: 100% !important;
        max-width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    #container #main-con .sinple-table td,
    #container #main-con .sinple-table th {
        padding: 6px;
        overflow-wrap: anywhere;
    }

    /* その他の画像・表 */
    #container table,
    #container iframe {
        max-width: 100%;
    }

    /* コピーライト */
    #footer-end {
        width: 100%;
        padding: 15px 10px;
        text-align: center;
        font-size: 11px;
        line-height: 1.6;
    }
}

/* 小型スマートフォン */
@media screen and (max-width: 380px) {

    #container {
        padding-left: 10px;
        padding-right: 10px;
    }

    #container h2 {
        font-size: 17px;
    }

    #products-index {
        padding: 15px 10px;
    }

    #products-navi {
        gap: 6px;
    }

    #products-index #products-con-area #products-navi li a {
        font-size: 11px;
    }

    #global-navi li a {
        font-size: 12px;
    }
}

/* PC表示では既存デザインを維持 */
@media screen and (min-width: 769px) {
    img {
        max-width: none;
    }
}