/* =========================================================
   前田環境クリーン レスポンシブ対応
   PC版の既存デザインを維持し、800px以下のみ最適化
   ========================================================= */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 0 !important;
}

body {
    overflow-x: hidden;
}

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

/* 新スライドショー：PC/スマホ共通 */
.hero-slider {
    position: relative;
    display: block;
    width: 680px;
    max-width: 100%;
    margin: 0 0 10px;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
}

.hero-slides {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #fff;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .65s ease;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
}

.hero-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero-thumbnails {
    position: absolute;
    z-index: 5;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 5px;
    padding: 5px;
    background: rgba(0, 0, 0, .82);
    box-sizing: border-box;
}

.hero-thumbnail {
    display: block;
    width: 50px;
    height: 38px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    background: #111;
    opacity: .62;
    cursor: pointer;
    box-sizing: border-box;
}

.hero-thumbnail:hover,
.hero-thumbnail:focus,
.hero-thumbnail.active {
    opacity: 1;
    border-color: #fff;
    outline: none;
}

.hero-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#Wrapper,
#MainPanel,
#CenterArea,
#HeaderArea,
#MainArea,
#DownArea,
#FooterArea {
    box-sizing: border-box;
}

@media screen and (max-width: 800px) {

    #Wrapper,
    #MainPanel,
    #CenterArea,
    #HeaderArea,
    #MainArea,
    #DownArea,
    #FooterArea {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        box-sizing: border-box;
    }

    #CenterArea {
        padding: 0 8px;
    }

    /* ヘッダー */
    #Header {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 76px;
        box-sizing: border-box;
    }

    .HeaderLogo {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 14px 8px 12px !important;
        text-align: center;
    }

    .HeaderLogo img {
        width: 246px !important;
        max-width: 82% !important;
        height: auto !important;
    }

    #HeaderTop,
    .HeaderTopBlock {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden;
    }

    #HeaderTop h1,
    #HeaderTop .Text {
        font-size: 9px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis;
        padding: 2px 4px !important;
        box-sizing: border-box;
    }

    /* 上部メインメニュー：スマホでは縦一列 */
    .HeaderMenuBlock {
        display: block !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 0 10px !important;
        z-index: auto !important;
        box-sizing: border-box;
    }

    .HeaderMenuBlock ul.Menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }

    .HeaderMenuBlock .menu_box {
        float: none !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .HeaderMenuBlock .menu_box a,
    .HeaderMenuBlock .menu_box a:hover,
    .HeaderMenuBlock .menu_box a:link,
    .HeaderMenuBlock .menu_box a:visited,
    .HeaderMenuBlock .menu_box a:active {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        height: 44px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 12px !important;
        background-image: none !important;
        background: linear-gradient(to bottom, #f8fff1 0%, #dff4b5 100%) !important;
        border: 1px solid #7fab3c !important;
        border-radius: 3px;
        color: #245c18 !important;
        font-size: 14px !important;
        font-weight: bold !important;
        text-align: center !important;
        text-decoration: none !important;
        box-sizing: border-box;
    }

    .HeaderMenuBlock .menu_box a::after {
        content: attr(data-label);
    }

    .HeaderMenuBlock .menu_box a span {
        display: none !important;
    }

    /* メイン：コンテンツ→サイドメニューの順 */
    #MainArea {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        float: none !important;
        clear: both !important;
        position: relative !important;
        box-sizing: border-box;
    }

    #ContentsArea {
        order: 1;
        float: none !important;
        clear: both !important;
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    #LeftArea,
    .SideArea {
        order: 2;
        float: none !important;
        clear: both !important;
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 24px 0 8px !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    /* QR・会社情報はスマホでは省略 */
    .QrCodeBlock,
    .FreeBlock {
        display: none !important;
    }

    /* 下部の補助メニューは横並びを維持 */
    .SideMenuBlock {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 8px 0 !important;
        border-top: 1px solid #c7d9a4;
        border-bottom: 1px solid #c7d9a4;
    }

    .SideMenuBlock .menu_box_head,
    .SideMenuBlock .menu_box_foot {
        display: none !important;
    }

    .SideMenuBlock ul.Menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }

    .SideMenuBlock ul.Menu li.menu_box {
        float: none !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .SideMenuBlock .menu_box_text {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        min-height: 46px !important;
        padding: 3px 2px !important;
        box-sizing: border-box;
        background-image: none !important;
        background: linear-gradient(to bottom, #f8fff1 0%, #dff4b5 100%) !important;
        border: 1px solid #7fab3c !important;
        border-radius: 3px;
        color: #245c18 !important;
        text-decoration: none !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    }

    .SideMenuBlock .menu_box_text span,
    .SideMenuBlock .menu_box_text ins.marquee {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #245c18 !important;
        text-decoration: none !important;
        font-size: 10px !important;
        font-weight: bold;
        line-height: 1.25 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* コンテンツの固定幅解除 */
    #ContentsArea > *,
    #ContentsArea .Block,
    #ContentsArea .type001,
    #ContentsArea .type001Record,
    #ContentsArea .type004,
    #ContentsArea .type004Record,
    #ContentsArea .type014,
    #ContentsArea .type017,
    #ContentsArea .type017Record,
    #ContentsArea .type018,
    #ContentsArea .type018Record,
    #ContentsArea .type020,
    #ContentsArea .type020Record,
    #ContentsArea .type023,
    #ContentsArea .type023Record,
    #ContentsArea .Text,
    #ContentsArea .Image,
    #ContentsArea .type001_text,
    #ContentsArea .type004_text,
    #ContentsArea .type017_image,
    #ContentsArea .type023text,
    #ContentsArea .type023sitemap {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    #ContentsArea img,
    #ContentsArea .Image img,
    #ContentsArea .type017_image img {
        max-width: 100% !important;
        height: auto !important;
    }

    #ContentsArea [style*="width:680px"],
    #ContentsArea [style*="width: 680px"],
    #ContentsArea [style*="width:700px"],
    #ContentsArea [style*="width: 700px"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* スライドショーは親要素の高さを必ず確保する */
    .hero-slider {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 14px !important;
        position: relative !important;
    }

    .hero-slides {
        width: 100% !important;
        aspect-ratio: 4 / 3;
    }

    .hero-thumbnails {
        top: 7px;
        left: 7px;
        gap: 4px;
        padding: 4px;
    }

    .hero-thumbnail {
        width: 45px;
        height: 34px;
    }

    .menu_title,
    .contents_title,
    .record_title {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .menu_title,
    .contents_title {
        height: auto !important;
        min-height: 0 !important;
        padding: 8px 10px !important;
        font-size: 17px !important;
        line-height: 1.4 !important;
    }

    .record_title {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    #PankuzuList,
    #PankuzuList ul {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    #PankuzuList {
        font-size: 11px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    #ContentsArea table {
        max-width: 100% !important;
    }

    #ContentsArea table:not(.form_tbl) {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    /* フォーム */
    .mailform-wrap,
    .mailform-wrap .form_tbl {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .mailform-wrap .form_tbl,
    .mailform-wrap .form_tbl tbody,
    .mailform-wrap .form_tbl tr,
    .mailform-wrap .form_tbl th,
    .mailform-wrap .form_tbl td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .mailform-wrap .form_tbl tr {
        margin-bottom: 12px;
        border-bottom: 1px solid #ddd;
    }

    .mailform-wrap .form_tbl .th1,
    .mailform-wrap .form_tbl .th2 {
        display: inline-block !important;
        width: auto !important;
        border: 0 !important;
    }

    .mailform-wrap .form_tbl .td3 {
        clear: both;
        border: 0 !important;
    }

    .mailform-wrap input[type="text"],
    .mailform-wrap input[type="email"],
    .mailform-wrap input[type="tel"],
    .mailform-wrap textarea,
    .mailform-wrap select {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        box-sizing: border-box;
    }

    iframe {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* フッター：MainAreaの後に通常フローで配置 */
    #DownArea,
    #FooterArea,
    .FooterMenuBlock,
    .FooterAddBlock,
    #Footer {
        position: static !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
    }

    #DownArea {
        margin-top: 6px !important;
    }

    .footerMenuDiv {
        display: block;
        text-align: center;
        font-size: 11px;
        line-height: 1.9;
    }

    .footerMenuDiv span {
        display: none;
    }

    .footerMenuDiv a {
        display: inline-block;
        margin: 2px 4px;
    }

    .FooterAddBlock .text,
    .Copyright {
        white-space: normal !important;
        font-size: 10px !important;
        line-height: 1.5 !important;
    }
}

@media screen and (max-width: 360px) {
    .SideMenuBlock .menu_box_text ins.marquee {
        font-size: 9px !important;
    }

    .hero-thumbnail {
        width: 40px;
        height: 30px;
    }
}