/* September 2026 renewal. Loaded after the existing compiled styles. */

@media (min-width: 897px) {
    .sp-only { display: none !important; }
}
@media (max-width: 896px) {
    .pc-only { display: none !important; }
}

body #wrapper #content #sliderWrap #mainVisual {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #e9f7f5;
}
#mainVideo { display: block; width: 100%; height: 100%; object-fit: contain; }
#mobileSlider { display: none; }
#visualToggle {
    position: absolute; right: 20px; bottom: 18px; z-index: 2;
    padding: 8px 18px; border: 1px solid #fff; border-radius: 2px;
    background: rgba(0,0,0,.6); color: #fff; font: inherit; cursor: pointer;
}
#visualToggle:focus-visible { outline: 3px solid #1aa58f; outline-offset: 3px; }
body #wrapper #content #sliderWrap #news {
    position: absolute; left: 0; bottom: 0; min-height: 65px;
    background-color: rgba(32,167,146,.7);
}

@media (min-width: 897px) {
    body #wrapper #content #sliderWrap #news {
        background-color: rgba(32,167,146,.85);
    }
    body #wrapper #content #sliderWrap #catch {
        text-shadow: 0 2px 6px rgba(0,0,0,.45);
    }
}
@media (max-width: 896px) {
    body #wrapper #content #sliderWrap #catch {
        top: 8%;
    }
    body #wrapper #content #service #serviceWrap {
        margin-top: 40px;
    }
    body #wrapper #content #service #serviceWrap .flex#logistics .logisticsInner {
        padding-top: 30px;
    }
}

body #wrapper #content .serviceLead { margin-top: 45px; line-height: 2; }
body #wrapper #content .serviceLead p + p, body #wrapper #content .note p + p { margin-top: 1em; }
body #wrapper #content #serviceWrap .serviceTextInner p + p { margin-top: 1em; }
body #wrapper #content #service .serviceImg .photoLink,
body #wrapper #content #recycle > .inner > .photoLink { display: block; }
body #wrapper #content #service .serviceImg .photoLink figure,
body #wrapper #content #recycle > .inner > .photoLink figure { overflow: hidden; }
body #wrapper #content #service .serviceImg .photoLink img,
body #wrapper #content #recycle > .inner > .photoLink img {
    display: block;
    transition: transform .35s ease;
}
body #wrapper #content #service .serviceImg .photoLink:hover img,
body #wrapper #content #service .serviceImg .photoLink:focus-visible img,
body #wrapper #content #recycle > .inner > .photoLink:hover img,
body #wrapper #content #recycle > .inner > .photoLink:focus-visible img { transform: scale(1.04); }
body #wrapper #content .photoLink:focus-visible { outline: 3px solid #1aa58f; outline-offset: 4px; }
body #wrapper #content #recycle .inner #collection { display: none; }
body #wrapper #content #service #serviceWrap .homeLogistics .serviceText .serviceTextInner .logisticsHeading {
    font-family: inherit; font-size: 20px; font-weight: bold; letter-spacing: .05em; line-height: 1.5;
}
body #wrapper #content .logisticsPhoto { margin-top: 30px; }
body #wrapper #content .logisticsPhoto img { display: block; width: 100%; height: auto; }
body #wrapper #content > #company #greeting .flex .left { width: 100%; margin-top: 0; }
body #wrapper #content #recycle #danger #dangerList { align-items: flex-start; row-gap: 24px; }
body #wrapper #content #recycle #danger #dangerList li:nth-child(2n) { margin-top: 0; }
body #wrapper #content #recycle #danger #dangerList figure img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
body #wrapper #content #initiatives #community .flex { gap: 4%; }
body #wrapper #content #initiatives #community .flex > div { width: 48%; }
body #wrapper #content #initiatives #community .flex img { display: block; width: 100%; height: auto; }
body #wrapper #content #initiatives #service #serviceWrap .healthRow .serviceText { width: 100%; }
body #wrapper #content #initiatives #service #serviceWrap .healthRow .serviceTextInner { width: calc(100% - 70px); }
body #wrapper #content #recruitPage #heroHeader { margin-bottom: 0; }
body #wrapper #content #recruitPage #description { padding: 90px 8% 80px; }
body #wrapper #content #recruitPage #description > .ttl01 { margin-bottom: 65px; }
body #wrapper #content #recruitPage .recruitFeatures {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
    margin-bottom: 65px;
}
body #wrapper #content #recruitPage .recruitFeatures li {
    padding: 10px 12px; border-radius: 40px; background: #20a58f; color: #fff;
    text-align: center; font-size: 20px; font-weight: bold; line-height: 1.5;
}
body #wrapper #content #recruitPage .recruitGroup + .recruitGroup { margin-top: 65px; }
body #wrapper #content #recruitPage .recruitGroup .ttl02 { margin-bottom: 25px; }
body #wrapper #content #recruitPage .table01 { width: calc(100% + 20px); margin-left: -10px; table-layout: fixed; }
body #wrapper #content #recruitPage .table01 th { width: 22%; }
body #wrapper #content #recruitPage .table01 td { width: 78%; overflow-wrap: anywhere; }
body #wrapper #content #recruitPage #heroHeaderHdsp .ttl01 { font-weight: bold; }

#visualToggle {
    display: none;
}

.list1_in_ecology-safety {
    padding-left: 1.3em;
}
.list1_in_ecology-safety li {
    list-style: disc;
    padding: 2px 0 !important;
}

@media (min-width: 1001px) and (max-width: 1400px) {
    #wrapper #gNavi > ul > li { margin-left: 20px; }
}

@media (min-width: 897px) {
    body #wrapper #content #sliderWrap #mainVisual { width: calc(100% - 70px); }
    body #wrapper #content #sliderWrap #mainVisual #scroll { right: -45px; }
    body #wrapper #content #service #serviceWrap > .flex .serviceText { width: 38%; }
    body #wrapper #content #service #serviceWrap > .flex .serviceText .serviceTextInner { width: calc(100% - 60px); }
    body #wrapper #content #service #serviceWrap > .flex .serviceImg { width: 57%; align-self: flex-start; }
    body #wrapper #content #recycle .inner #collection ul { display: grid; grid-template-columns: 80px; gap: 6px; }
    body #wrapper #content #recycle .inner #collection ul li { align-self: start; }
    /* body #wrapper #content #recycle .inner #collection { width: 310px; } */
    /* body #wrapper #content .ttl01 {
        margin-bottom: 157px;
    } */
    body #wrapper #content #recycle .inner > .ttl01 { margin-bottom: 60px; }
    body #wrapper #content #recycle .inner #collection ul li:nth-child(n+2) { margin-top: 0; }
}
@media (max-width: 896px) {
    body #wrapper #content #sliderWrap #mainVisual { aspect-ratio: 1; }
    #mainVideo { display: none; }
    #mobileSlider { display: block; position: relative; width: 100%; height: 100%; }
    #mobileSlider figure { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
    #mobileSlider figure.is-active { opacity: 1; }
    #mobileSlider img { display: block; width: 100%; height: 100%; object-fit: contain; }
    #visualToggle { right: 12px; bottom: 12px; padding: 6px 12px; font-size: 12px; }
    body #wrapper #content #sliderWrap #news { min-height: 55px; }
    body #wrapper #content .serviceLead { margin-top: 25px; }
    body #wrapper #content #recycle .inner #collection ul { flex-wrap: wrap; gap: 5px; margin-top: 10px; }
    body #wrapper #content #recycle .inner #collection ul li { width: calc((100% - 20px) / 5); margin: 0; }
    body #wrapper #content #initiatives #community .flex { display: block; }
    body #wrapper #content #initiatives #community .flex > div { width: 100%; }
    body #wrapper #content #initiatives #service #serviceWrap .healthRow .serviceTextInner { width: 100%; }
    body #wrapper #content #recruitPage #description { padding: 45px 15px 30px; }
    body #wrapper #content #recruitPage #description > .ttl01 { font-size: clamp(32px, 9vw, 60px); letter-spacing: .14em; margin-bottom: 35px; }
    body #wrapper #content #recruitPage .recruitFeatures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 40px; }
    body #wrapper #content #recruitPage .recruitFeatures li { font-size: 13px; padding: 9px 5px; }
    body #wrapper #content #recruitPage .recruitGroup + .recruitGroup { margin-top: 40px; }
    body #wrapper #content #recruitPage .table01 { width: 100%; margin-left: 0; border-spacing: 0 10px; }
    body #wrapper #content #recruitPage .table01 th { text-align: left; padding: 15px 18px 0; }
    body #wrapper #content #recruitPage .table01 td { padding: 10px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    #mobileSlider figure { transition: none; }
    body #wrapper #content #service .serviceImg .photoLink img,
    body #wrapper #content #recycle > .inner > .photoLink img { transition: none; }
    body #wrapper #content #service .serviceImg .photoLink:hover img,
    body #wrapper #content #service .serviceImg .photoLink:focus-visible img,
    body #wrapper #content #recycle > .inner > .photoLink:hover img,
    body #wrapper #content #recycle > .inner > .photoLink:focus-visible img { transform: none; }
}