/*
Theme Name: ShibaLIFE
Theme URI: https://shibalife.com
Author: ShibaLIFE
Description: Custom theme for ShibaLIFE artificial turf and garden services.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: shibalife
*/

/* Reset & Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif; line-height: 1.6; color: #333; }
html, body { overflow-x: hidden; }
img { width: 100%; height: auto; max-width: none; display: block; }
a { text-decoration: none; color: inherit; }

/* Section common */
.section { width: 100%; overflow: hidden; }
.section-inner { margin: 0 auto; }

/* Header - scales with screen */
.site-header { background: #fff; position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid #e0e0e0; width: 100%; height: auto; overflow: hidden; }
/* Header spacing: logo→area 150px, then ~30px between items, 30px padding from edges */
.header-inner { display: flex; align-items: center; justify-content: flex-start; height: auto; padding: 13px max(18px, calc(min(90px, 16vw) + 20px)) 12px 18px; width: 100%; }
.header-desktop { display: flex; align-items: center; justify-content: flex-start; flex: 1; width: 100%; min-width: 0; }
.header-mobile { display: none; }
.header-item { display: flex; align-items: center; flex-shrink: 1; min-width: 0; }
.header-item img { width: 100%; height: auto; max-width: 100%; max-height: 95px; object-fit: contain; display: block; }
.header-area { margin-left: 150px; }
.header-promo { margin-left: 60px; }
.header-credit { margin-left: 85px; }
.header-tel { position: relative; margin-left: 60px; display: block; }
.header-tel .header-tel-number {
    position: absolute;
    top: 32%;
    left: 56%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: 40px;
    font-weight: 900;
    color: #333;
    -webkit-text-stroke: 4px #fff;
    paint-order: stroke fill;
    pointer-events: none;
}
.header-tel .header-tel-text {
    position: absolute;
    top: 65%;
    left: 56%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: clamp(9px, 1.15vw, 14px);
    font-weight: 900;
    color: #333;
    -webkit-text-stroke: 4px #fff;
    paint-order: stroke fill;
    pointer-events: none;
}
/* Header: every 40px subtract 10px from margins, centered content */
@media (min-width: 1840px) and (max-width: 1880px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 140px; }
    .header-promo { margin-left: 50px; }
    .header-credit { margin-left: 75px; }
    .header-tel { margin-left: 50px; }
}
@media (min-width: 1800px) and (max-width: 1840px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 130px; }
    .header-promo { margin-left: 40px; }
    .header-credit { margin-left: 65px; }
    .header-tel { margin-left: 40px; }
}
@media (min-width: 1760px) and (max-width: 1800px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 120px; }
    .header-promo { margin-left: 30px; }
    .header-credit { margin-left: 55px; }
    .header-tel { margin-left: 30px; }
}
@media (min-width: 1720px) and (max-width: 1760px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 110px; }
    .header-promo { margin-left: 20px; }
    .header-credit { margin-left: 45px; }
    .header-tel { margin-left: 20px; }
}
@media (min-width: 1680px) and (max-width: 1720px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 100px; }
    .header-promo { margin-left: 10px; }
    .header-credit { margin-left: 35px; }
    .header-tel { margin-left: 10px; }
}
@media (min-width: 1640px) and (max-width: 1680px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 90px; }
    .header-promo { margin-left: 0; }
    .header-credit { margin-left: 25px; }
    .header-tel { margin-left: 0; }
}
@media (min-width: 1600px) and (max-width: 1640px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 80px; }
    .header-promo { margin-left: 0; }
    .header-credit { margin-left: 15px; }
    .header-tel { margin-left: 0; }
}
@media (min-width: 1560px) and (max-width: 1600px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 70px; }
    .header-promo { margin-left: 0; }
    .header-credit { margin-left: 5px; }
    .header-tel { margin-left: 0; }
}
@media (min-width: 1415px) and (max-width: 1560px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 100px; }
    .header-promo { margin-left: 100px; }
    .header-credit { margin-left: 100px; }
    .header-tel { display: none; }
}
@media (min-width: 1380px) and (max-width: 1415px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 90px; }
    .header-promo { margin-left: 90px; }
    .header-credit { margin-left: 90px; }
    .header-tel { display: none; }
}
@media (min-width: 1352px) and (max-width: 1380px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 80px; }
    .header-promo { margin-left: 80px; }
    .header-credit { margin-left: 80px; }
    .header-tel { display: none; }
}
@media (min-width: 1320px) and (max-width: 1352px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 70px; }
    .header-promo { margin-left: 70px; }
    .header-credit { margin-left: 70px; }
    .header-tel { display: none; }
}
@media (min-width: 1288px) and (max-width: 1320px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 60px; }
    .header-promo { margin-left: 60px; }
    .header-credit { margin-left: 60px; }
    .header-tel { display: none; }
}
@media (min-width: 1256px) and (max-width: 1288px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 50px; }
    .header-promo { margin-left: 50px; }
    .header-credit { margin-left: 50px; }
    .header-tel { display: none; }
}
@media (min-width: 1224px) and (max-width: 1256px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 40px; }
    .header-promo { margin-left: 40px; }
    .header-credit { margin-left: 40px; }
    .header-tel { display: none; }
}
@media (min-width: 1192px) and (max-width: 1224px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 30px; }
    .header-promo { margin-left: 30px; }
    .header-credit { margin-left: 30px; }
    .header-tel { display: none; }
}
@media (min-width: 1160px) and (max-width: 1192px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 20px; }
    .header-promo { margin-left: 20px; }
    .header-credit { margin-left: 20px; }
    .header-tel { display: none; }
}
@media (min-width: 1128px) and (max-width: 1160px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 10px; }
    .header-promo { margin-left: 10px; }
    .header-credit { margin-left: 10px; }
    .header-tel { display: none; }
}
@media (min-width: 1096px) and (max-width: 1128px) {
    .header-inner { justify-content: center; }
    .header-area { margin-left: 0; }
    .header-promo { margin-left: 0; }
    .header-credit { margin-left: 0; }
    .header-tel { display: none; }
}
@media (min-width: 1030px) and (max-width: 1096px) {
    .header-inner { justify-content: center; }
    .header-area { display: none; }
    .header-promo { margin-left: 70px; }
    .header-credit { margin-left: 70px; }
    .header-tel { display: none; }
}
@media (min-width: 970px) and (max-width: 1030px) {
    .header-inner { justify-content: center; }
    .header-area { display: none; }
    .header-promo { margin-left: 40px; }
    .header-credit { margin-left: 40px; }
    .header-tel { display: none; }
}
@media (min-width: 910px) and (max-width: 970px) {
    .header-inner { justify-content: center; }
    .header-area { display: none; }
    .header-promo { margin-left: 10px; }
    .header-credit { margin-left: 10px; }
    .header-tel { display: none; }
}
@media (min-width: 761px) and (max-width: 910px) {
    .header-inner { justify-content: center; }
    .header-area { display: none; }
    .header-promo { margin-left: 0; }
    .header-credit { margin-left: 0; }
    .header-tel { display: none; }
}

/* Mobile header (max-width 760px): 3 equal columns (logo | promo | credit), images scale with viewport */
@media (max-width: 760px) {
    .header-inner { padding: 19px 10px; }
    .header-desktop { display: none !important; }
    .header-mobile {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: clamp(4px, 2vw, 14px);
        align-items: center;
        width: 100%;
        min-width: 0;
    }
    .header-mobile-logo {
        grid-column: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
    }
    .header-mobile-promo {
        grid-column: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
    }
    .header-mobile-credit {
        grid-column: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
    }
    .header-mobile-logo-img,
    .header-mobile-promo img,
    .header-mobile-credit img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: clamp(28px, 22vw, 77px);
        object-fit: contain;
        display: block;
    }
}
/* Fixed menu button: above page & header, below offcanvas when open (z-index) */
.site-menu-fixed {
    position: fixed;
    top: clamp(8px, 2vw, 16px);
    right: clamp(8px, 2vw, 16px);
    z-index: 1025;
    pointer-events: none;
}
.site-menu-fixed-toggler {
    pointer-events: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
    transition: transform 0.2s ease-out;
}
.site-menu-fixed-toggler:hover,
.site-menu-fixed-toggler:focus-visible {
    transform: scale(1.05);
}
.site-menu-fixed .header-nav-toggler-img {
    width: auto;
    max-width: min(95px, 18vw);
    max-height: clamp(40px, 11vw, 72px);
    height: auto;
    object-fit: contain;
    display: block;
}
.header-nav-toggler { display: flex; align-items: center; flex-shrink: 0; min-width: 0; margin-left: 10px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.header-nav-toggler-img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 95px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease-out;
}

.header-nav-toggler:hover .header-nav-toggler-img {
    transform: scale(1.05);
}
#offcanvasDarkNavbar { z-index: 1050; }
#offcanvasDarkNavbar .offcanvas-body { display: flex; flex-direction: column; }
.offcanvas-hotline { flex-shrink: 0; }

/* Banner - overlaps MV section by 20px, uses background + sticker */
.banner-section { position: relative; margin-top: -55px; z-index: 1; overflow: visible; }
.banner-wrapper { position: relative; width: 100%; display: block; }
.banner-bg { width: 100%; display: block; }
.banner-sticker { position: absolute; top: 53%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; display: block; }

/* Banner desktop/mobile switching */
.banner-bg-mobile,
.banner-sticker-mobile {
    display: none !important;
}

@media (max-width: 760px) {
    .banner-section {
        margin-top: -68px;
    }
    .banner-bg-desktop,
    .banner-sticker-desktop {
        display: none !important;
    }
    .banner-bg-mobile,
    .banner-sticker-mobile {
        display: block !important;
        margin-top: -50px;
    }
}

/* MV Section - uses background + sticker */
.mv-section { position: relative; }
.mv-wrapper { position: relative; width: 100%; }
.mv-bg { width: 100%; display: block; }
.mv-sticker { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; }
.mv-bg-mobile,
.mv-sticker-mobile { display: none !important; }
@media (max-width: 760px) {
    .mv-bg-desktop,
    .mv-sticker-desktop { display: none !important; }
    .mv-bg-mobile,
    .mv-sticker-mobile { display: block !important; }

    /* Crop MV width on mobile: scale wider than viewport and center it.
       (The parent `.section` already has `overflow: hidden`.) */
    .mv-bg {
        width: 100%;
        max-width: none;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Make sticker match MV scale on mobile (so it "fits" the cropped MV) */
    .mv-sticker {
        width: 100%;
        max-width: none;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Lawn mowing page MV */
.lawn-mowing-mv-section {
    background-image: url('assets/lawn-mowing-page/mv/mv-background.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    padding: 0;
    min-height: clamp(220px, 55vw, 520px);
    overflow: hidden;
}
.lawn-mowing-mv-wrapper {
    width: 100%;
    min-height: inherit;
}
.lawn-mowing-mv-sticker {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 760px) {
    .lawn-mowing-mv-section {
        background-image: url('assets/lawn-mowing-page/mv/mv-mobile-background.jpg');
        min-height: 0;
        /* Keep the full image visible (no crop) by matching the source aspect ratio */
        aspect-ratio: 760 / 3337;
        background-size: 100% 100%;
    }
    .lawn-mowing-mv-sticker {
        display: none !important;
    }
}

/* Lawn mowing page – living section (desktop/mobile swap) */
.lawn-mowing-living-section {
    padding: 0;
}
.lawn-mowing-living-wrapper {
    width: 100%;
}
.lawn-mowing-living-bg {
    width: 100%;
    height: auto;
    display: block;
}
.lawn-mowing-living-bg-mobile {
    display: none !important;
}
@media (max-width: 760px) {
    .lawn-mowing-living-bg-desktop {
        display: none !important;
    }
    .lawn-mowing-living-bg-mobile {
        display: block !important;
    }
}


/* Lawn mowing page – chosen section */
.lawn-mowing-chosen-section {
    padding: 0;
    overflow: hidden; /* enables mobile crop */
}
.lawn-mowing-chosen-wrapper {
    width: 100%;
}
.lawn-mowing-chosen-bg {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 760px) {
    .lawn-mowing-chosen-bg {
        width: 130%;
        max-width: none;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Lawn mowing page – service section */
.lawn-mowing-service-section {
    padding: 0;
    overflow: hidden; /* enables mobile crop */
}
.lawn-mowing-service-wrapper {
    width: 100%;
}
.lawn-mowing-service-bg {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 760px) {
    .lawn-mowing-service-bg {
        width: 130%;
        max-width: none;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Lawn mowing page – large scale section */
.lawn-mowing-large-scale-section {
    padding: 0;
    overflow: hidden; /* enables mobile crop */
}
.lawn-mowing-large-scale-wrapper {
    width: 100%;
}
.lawn-mowing-large-scale-bg {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 760px) {
    .lawn-mowing-large-scale-bg {
        width: 140%;
        max-width: none;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Lawn mowing page – sulotion section */
.lawn-mowing-sulotion-section {
    padding: 0;
    overflow: hidden; /* enables mobile crop */
}
.lawn-mowing-sulotion-wrapper {
    width: 100%;
}
.lawn-mowing-sulotion-bg {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 760px) {
    .lawn-mowing-sulotion-bg {
        width: 140%;
        max-width: none;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Lawn mowing page – grass section */
.lawn-mowing-grass-section {
    padding: 0;
    overflow: hidden; /* enables mobile crop */
}
.lawn-mowing-grass-wrapper {
    width: 100%;
}
.lawn-mowing-grass-sticker {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 760px) {
    .lawn-mowing-grass-sticker {
        width: 105%;
        max-width: none;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Lawn mowing page – feel good section */
.lawn-mowing-feel-good-section {
    padding: 0;
    overflow: hidden; /* enables mobile crop */
}
.lawn-mowing-feel-good-wrapper {
    width: 100%;
}
.lawn-mowing-feel-good-sticker {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 760px) {
    .lawn-mowing-feel-good-sticker {
        width: 170%;
        max-width: none;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Lawn mowing page – grass type section */
.lawn-mowing-grass-type-section {
    padding: 0;
    overflow: hidden; /* enables mobile crop */
}
.lawn-mowing-grass-type-wrapper {
    width: 100%;
}
.lawn-mowing-grass-type-bg {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 760px) {
    .lawn-mowing-grass-type-bg {
        width: 160%;
        max-width: none;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Group621 Section (blog-detail: header/breadcrumb/phone area) */
.group621-section { position: relative; }
.group621-wrapper { position: relative; width: 100%; }
.group621-img { width: 100%; display: block; }

/* Living Section - uses background image + sticker, no background color */
.living-section { padding: 0; position: relative; z-index: 0; }
.living-wrapper { position: relative; width: 100%; }
.living-bg { width: 100%; display: block; }
.living-sticker { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; display: block; }
.living-sticker-mobile { display: none !important; }

@media (max-width: 760px) {
    .living-section { overflow: visible; }
    .living-bg-desktop,
    .living-sticker-desktop { display: none !important; }
    .living-sticker-mobile {
        display: block !important;
        position: static;
        width: 100%;
        height: auto;
        transform: none;
        vertical-align: top;
    }
}

/* Corporation Section */
.corporation-section {
  position: relative;
  height: 750px;
  padding-top: 80px;
}

.corporation-wrapper {
  position: relative;
  margin: 0 auto;
}

.corporation-title {
  font-size: clamp(0px, 4vw, 40px);
  line-height: 1.5;
  text-align: center;
  position: absolute;
  top: 0;
  font-weight: 700;
  width: 100%;
}

.corporation-services-row1 {
  position: absolute;
  top: 137px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
}

.corporation-services-row2 {
  position: absolute;
  top: 227px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
}

.corporation-service-box {
    background-color: rgb(54, 144, 0);
    color: rgb(255, 228, 0);
    font-size: clamp(0px, 4.6vw, 48px);
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.corporation-box-small {
  width: clamp(0px, 20.6vw, 199px);
}

.corporation-box-medium {
  width: clamp(0px, 23.6vw, 251px);
}

.corporation-box-large {
  width: clamp(0px, 34.6vw, 340px);
}

.corporation-highlight-text {
    font-size: clamp(0px, 4.6vw, 48px);
    text-align: center;
    position: absolute;
    top: 370px;
    width: 100%;
    font-weight: 600;
}

.corporation-description-text {
  font-size: clamp(0px, 2.9vw, 30px);
  text-align: center;
  position: absolute;
  top: 465px;
  width: 100%;
  font-weight: 600;
}

.corporation-mobile-break {
    display: none;
}

.corporation-logos-wrapper {
    position: absolute;
    top: 545px;
    display: flex;
    gap: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.corporation-logo-item {
    width: clamp(0px, 13vw, 154px);
    height: clamp(0px, 8vw, 84px);
    border: 1px solid rgb(180, 180, 180);
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.corporation-logo-item img {
  max-width: 100%;
  max-height: 100%;
}
@media (max-width: 760px) {

    .corporation-mobile-break {
        display: inline;
    }

    .corporation-section {
        padding: 40px 15px;
        height: auto; /* ❗ remove fixed height */
    }

    .corporation-wrapper {
        position: relative;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .corporation-title {
        position: static;
        font-size: clamp(0px, 5.3vw, 42px);
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .corporation-services-row1,
    .corporation-services-row2 {
        position: static;          
        transform: none;           
        left: auto;                
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 12px;
    }

    .corporation-service-box {
        font-size: clamp(0px, 4vw, 52px);
        height: clamp(0px, 8vw, 45px);
        padding: 0 10px;
        width: auto; 
    }


    .corporation-highlight-text {
        position: static;
        font-size: clamp(0px, 6.9vw, 53px);
        margin-top: 20px;
        line-height: 1.5;
    }

    .corporation-description-text {
        position: static;
        font-size: clamp(0px, 4.32vw, 34px);
        margin-top: 10px;
        line-height: 1.6;
    }

    .corporation-logos-wrapper {
        position: static;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
        
        left: 50%;
        transform: none
    }

    .corporation-logo-item {
        width: clamp(0px, 28vw, 176px);
        height: clamp(0px, 15vw, 85px)
    }
    .corporation-services-row1,.corporation-services-row2{
        gap: 2px;
    }
  
    .corporation-box-small {
    width: clamp(0px, 18.6vw, 116px);
    }

    .corporation-box-medium {
    width: clamp(0px, 26.6vw, 251px);
    }

    .corporation-box-large {
    width: clamp(0px, 30.3vw, 210px);
    }
    
}




/* Chosen Section — grid stack so bg + sticker both define height (absolute sticker was shorter than
   sticker art, so bottom was clipped by .section { overflow: hidden } and covered by service-section) */
.chosen-section { position: relative; min-height: 0; padding: 0; overflow: visible; }
.chosen-section img { width: 100%; height: auto; display: block; }
.chosen-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
}
.chosen-wrapper > img {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    align-self: start;
    justify-self: stretch;
}
.chosen-bg { position: relative; z-index: 0; }
.chosen-sticker { position: relative; z-index: 1; }
.chosen-bg-mobile,
.chosen-sticker-mobile { display: none !important; }
@media (max-width: 760px) {
    .chosen-bg-desktop,
    .chosen-sticker-desktop { display: none !important; }
    .chosen-bg-mobile,
    .chosen-sticker-mobile { display: block !important; }
}

/* Worries Section */
.worries-section { background: none; padding: 0; position: relative; }
.worries-section img { width: 100%; }
.worries-wrapper { position: relative; width: 100%; }
.worries-bg { display: block; }
.worries-sticker { position: absolute; top: 0; left: 0; display: block; }

/* Worries desktop/mobile image switching (max-width: 760px) */
.worries-bg-mobile,
.worries-sticker-mobile { display: none !important; }
@media (max-width: 760px) {
    .worries-bg-desktop,
    .worries-sticker-desktop { display: none !important; }
    .worries-bg-mobile,
    .worries-sticker-mobile { display: block !important; }
}


/* Service Section */
.service-section { padding: 2rem 1rem; background-color: #feffe9; }
.service-wrapper { max-width: 1257px; margin: 0 auto; }

.service-content-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: flex-start;
}

.service-left-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.service-right-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-main-img-container {
    position: relative;
    width: 100%;
}

.service-main-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.service-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: clamp(24px, 5vw, 48px);
    font-weight: 800;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 5;
}

.service-pricing-container {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    background: #f5f5f5;
    padding: 2rem;
    border-radius: 8px;
}

.service-pricing-left {
    flex-shrink: 0;
}

.service-special-label {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f19149;
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    padding: 1.5rem 1rem;
    border-radius: 8px;
    min-width: 100px;
    min-height: 100px;
    text-align: center;
    line-height: 1.2;
}

.service-pricing-right {
    flex-grow: 1;
}

.service-competitor-price {
    margin: 0 0 0.5rem;
    font-size: 18px;
    color: #666;
    font-weight: 500;
    background-color: #fefad8;
    border-radius: 4px;
    display: inline-block;
}

.service-our-price {
    margin: 0 0 0.5rem;
    font-size: 48px;
    color: #369000;
    font-weight: 900;
    line-height: 1.2;
}

.service-tax-included {
    margin: 0;
    font-size: 30px;
    color: #292929;
    font-weight: 500;
}

.service-text-content {
    margin-bottom: 2rem;
}

.service-subtitle {
    margin: 0 0 0.5rem;
    font-size: 100px;
    color: #369000;
    text-align: center;
    font-weight: 900;
}

.service-lead {
    margin: 0 0 1rem;
    font-size: 36px;
    font-weight: 700;
    color: #369000;
    text-align: center;
}

.service-description {
    margin: 0;
    font-size: 30px;
    color: #369000;
    line-height: 1.8;
    font-weight: 700;
}

.service-sticker-container {
    width: 100%;
    max-width: 300px;
    margin-left: auto;
}

.service-sticker {
    width: 100%;
    height: auto;
    display: block;
}

/* Service Cards Grid */
.service-cards-grid {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 60px;
}

.service-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.service-card-image-container {
    width: 100%;
    overflow: hidden;
}

.service-card-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.service-card-pricing {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.5rem;
    flex-grow: 1;
}

.service-card-pricing-left {
    flex-shrink: 0;
}

.service-card-badge {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f19149;
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    padding: 1rem 0.75rem;
    border-radius: 6px;
    min-width: 70px;
    min-height: 70px;
    text-align: center;
    line-height: 1.2;
}

.service-card-pricing-right {
    flex-grow: 1;
}

.service-card-competitor {
    margin: 0 0 0.25rem;
    font-size: 18px;
    color: #999;
    font-weight: 500;
    background-color: #fefad8;
    border-radius: 4px;
    display: inline-block;
}

.service-card-price {
    margin: 0 0 0.25rem;
    font-size: 48px;
    color: #369000;
    font-weight: 900;
    line-height: 1.2;
}

.service-card-tax {
    margin: 0;
    font-size: 29px;
    color: #292929;
    font-weight: 400;
}

.service-card-price-unit {
    font-size: 30px;
    display: inline;
}

@media (max-width: 760px) {
    .service-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 2rem;
    }
    
    .service-card-image {
        height: auto;
    }
    
    .service-card-pricing {
        padding: 1rem;
    }
    
    .service-card-price {
        font-size: clamp(0px, 5.2vw, 40px);
    }
}

@media (max-width: 480px) {
    .service-cards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .service-section { padding: 1.5rem 1rem; }
    
    .service-content-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .service-left-column {
        gap: 1.5rem;
    }
    
    .service-pricing-container {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }
    
    .service-pricing-left {
        align-self: flex-start;
    }
    
    .service-special-label {
        min-width: 80px;
        min-height: 80px;
        font-size: clamp(0px, 5.2vw, 16px);
        padding: 1rem 0.75rem;
    }
    
    .service-sticker-container {
        max-width: 250px;
    }
    .service-card-tax {
        font-size: clamp(0px, 5.2vw, 27px);
    }
}


/* Other Services Section */
.other-services-wrapper {
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

.other-services-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10rem 2rem;
    min-height: 547px;
}

.other-services-box {
    width: 100%;
    max-width: 600px;
    border-radius: 8px;
    overflow: hidden;
    background-color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: -220px;
}

.other-services-header {
    background-color: #369000;
    padding: 0.5rem 1rem;
    text-align: center;
}

.other-services-title {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1px;
}

.other-services-content {
    background-color: white;
    text-align: center;
}

.other-services-items {
    margin: 0.75rem 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    line-height: 1.6;
}

@media (max-width: 760px) {
    .other-services-box {
        max-width: 100%;
    }
    
    .other-services-title {
        font-size: clamp(0px, 4.2vw, 40px);
    }
    
    .other-services-items {
        font-size: clamp(0px, 3.8vw, 30px);
    }
    .service-card-badge {
        font-size: clamp(0px, 5vw, 40px);
    }
    .service-card-price-unit {
        font-size: clamp(0px, 4.2vw, 30px);
    }
    .service-card-competitor {
        font-size: clamp(0px, 3.8vw, 20px);
    }
    .service-card-tax {
        font-size: clamp(0px, 3.8vw, 27px);
    }
    .service-our-price {
        font-size: clamp(0px, 5.2vw, 40px);
    }
    .service-tax-included {
        font-size: clamp(0px, 4.2vw, 30px);
    }
    .service-subtitle {
        font-size: clamp(0px, 5.2vw, 52px);
    }
    .service-lead {
        font-size: clamp(0px, 4.8vw, 36px);
    }
    .service-description {
        font-size: clamp(0px, 4.2vw, 30px);
    }
}

@media (max-width: 480px) {
    .other-services-container {
        padding: 1.5rem 1rem;
    }
    
    .other-services-content {
        padding: 1.5rem 1rem;
    }
    
}


/* Amazing Section */
.amazing-section img { width: 100%; }
.amazing-sticker-mobile { display: none !important; }
@media (max-width: 760px) {
    .amazing-sticker-desktop { display: none !important; }
    .amazing-sticker-mobile { display: block !important; }
}

/* Merchandise Section — bg + sticker (desktop/mobile swap at 760px) */
.merchandise-section { padding: 0; overflow: visible; position: relative; }
.merchandise-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    position: relative;
    background-image: url('assets/merchandise/merchandise-background.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}
.merchandise-wrapper > * {
    grid-area: 1 / 1;
}
.merchandise-wrapper > img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
    opacity: 1;
    z-index: 0;
}
.merchandise-wrapper > :not(img) {
    position: relative;
    z-index: 1;
}
.merchandise-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}
.merchandise-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

.merchandise-item > .cta-headline-line2 {
    font-size: 40px;
}
.merchandise-cards {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
}
.merchandise-card {
    display: flex;
    flex-direction: column;
    width: 180px;
    background: #fefad8;
}
.merchandise-card img {
    width: 100%;
    height: auto;
    display: block;
}
.merchandise-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 6px 8px;
    text-align: left;
    background: #fefad8;
    color: #000;
    font-weight: 700;
    word-break: break-word;
}

.merchandise-card-body > span {
    display: inline-block;
    margin-top: auto;
    color: #008d00;
    font-size: 25px;
}
.merchandise-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.merchandise-sticker { position: relative; z-index: 1; }

.merchandise-bg-mobile,
.merchandise-sticker-mobile { display: none !important; }
@media (max-width: 760px) {
    .merchandise-bg-desktop,
    .merchandise-sticker-desktop { display: none !important; }
    .merchandise-bg-mobile,
    .merchandise-sticker-mobile { display: block !important; }
    .merchandise-wrapper {
        background-image: none;
    }
    .merchandise-content {
        padding: 12px;
    }
    .merchandise-item {
        margin-top: 16px;
    }
    .merchandise-item > .cta-headline-line2 {
        font-size: clamp(18px, 5.2vw, 24px);
        line-height: 1.2;
    }
    .merchandise-cards {
        flex-direction: column;
        align-items: stretch;
    }
    .merchandise-card {
        width: 100%;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }
    .merchandise-card-body {
        font-size: 13px;
        line-height: 1.35;
    }
}

/* CTA Section — lime polka banner, yellow disc, stroked headline (no images) */
.cta-section {
    position: relative;
    z-index: 1;
    overflow: visible;
}
.cta-inner {
    width: 100%;
}
.cta-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: clamp(280px, 48vw, 400px);
    padding: clamp(1.75rem, 5vw, 2.75rem) 1.25rem clamp(3rem, 2.5vw, 3.5rem);
    box-sizing: border-box;
    background-color: #51d600;
    background-image: radial-gradient(rgb(255 255 255 / 30%) 22%, transparent 24%);
    background-size: 14px 14px;
    background-position: 0 0;
    overflow: hidden;
}
.cta-hero {
    position: relative;
    z-index: 1;
    width: min(1200px, 96vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.65rem, 2vw, 1.2rem);
    flex: 1;
}
.cta-headline-wrap {
    position: relative;
    flex: 0 1 auto;
    width: max-content;
    max-width: 100%;
    min-height: clamp(200px, 32vw, 300px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.65rem, 2vw, 1.2rem);
    margin: 0 auto;
    padding: 0 0.5rem;
    box-sizing: border-box;
}
.cta-yellow-disc {
    position: absolute;
    left: 15%;
    top: 44%;
    transform: translate(-50%, -50%);
    width: min(300px, max(150px, 128%));
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ffe135;
    z-index: 0;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.04);
    pointer-events: none;
}
.cta-headline {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 100%;
}
.cta-headline-line1,
.cta-headline-line2 {
    margin: 0;
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1.2;
    -webkit-text-stroke: clamp(5px, 1.1vw, 11px) #008d00;
    paint-order: stroke fill;
    text-shadow:
        2px 3px 0 rgba(0, 141, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06);
}
.cta-headline-line1 {
    font-size: clamp(1.6rem, 4.9vw, 2.45rem);
    margin-bottom: 0.15em;
}
.cta-headline-line2 {
    font-size: clamp(2.15rem, 6.8vw, 3.8rem);
}
.cta-labels {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    margin-top: clamp(0.6rem, 1.6vw, 1.25rem);
    gap: clamp(0.6rem, 1.5vw, 1rem);
    flex-wrap: wrap;
    justify-content: center;
}
.cta-label-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(8.5rem, 15vw, 12rem);
    padding: 4px 14px 4px 14px;
    border-radius: 9999px;
    background: #ea6d3f;
    color: #fff;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif;
    font-size: clamp(2.2rem, 5.2vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}
.cta-service-card {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    max-width: min(1182px, 96vw);
    margin-top: clamp(0.8rem, 2.2vw, 1.4rem);
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}
.cta-service-card-tab {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 auto -53px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    display: block;
}
.cta-service-card-tab-img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}
.cta-service-card-tab-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35em;
    color: #000;
    font-weight: 900;
    padding-top: clamp(4px, 1.2vw, 10px);
    -webkit-text-stroke: 8px #fff;
    paint-order: stroke fill;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    font-size: clamp(26px, 3.8vw, 38px);
    pointer-events: none;
}
.cta-service-card-tab-text i {
    font-size: clamp(22px, 4.2vw, 44px);
    line-height: 1;
}
.cta-service-card-body {
    background: #fff;
    border: 5px solid #000;
    padding-top: 4rem;
    padding-right: clamp(1.1rem, 2.5vw, 1.8rem);
    padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
    padding-left: clamp(1.1rem, 2.5vw, 1.8rem);
    text-align: center;
}
.cta-service-card-title {
    margin: 0;
    font-size: clamp(1.4rem, 3.2vw, 2.1rem);
    font-weight: 900;
    color: #000;
    line-height: 1.25;
}
.cta-service-card-main {
    margin: 0.2em 0 0;
    font-size: clamp(1.2rem, 2.6vw, 1.7rem);
    font-weight: 800;
    color: #000;
}
.cta-service-card-divider {
    width: min(674px, 86%);
    height: 1px;
    background: #aeb5b8;
    margin: 0.95rem auto 0.75rem;
}
.cta-service-card-list {
    margin: 0;
    font-size: clamp(14px, 2.2vw, 20px);
    font-weight: 700;
    line-height: 1.85;
    color: #000;
    text-align: left;
}

/* CTA bottom strip (お問い合わせはこちらから) — text only */
.cta-bottom-strip {
    width: 100%;
    margin: 0;
    background: #0b4b00;
    height: clamp(120px, 8vw, 173px);
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: clamp(6px, 1.4vw, 16px);
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.cta-bottom-line {
    width: clamp(320px, 92vw, 862px);
    height: 2px;
    background: #f2d000;
    margin: 0;
    z-index: 0;
}
.cta-bottom-strip-text {
    font-family: "Noto Sans JP";
    position: relative;
    z-index: 1;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #f2d000;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1;
    -webkit-text-stroke: 2px #0b4b00;
    paint-order: stroke fill;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    margin: 0;
}

/* CTA follow block — full-width photo background */
.cta-follow-wrap {
    width: 100%;
    box-sizing: border-box;
    background-color: #2a2419;
    background-image: url('assets/cta/cta-follow-background.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* CTA follow-up text (three-color typography) */
.cta-follow-text {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: clamp(58px, 7vw, 92px) clamp(16px, 3vw, 28px) clamp(22px, 3.5vw, 40px);
    box-sizing: border-box;
    background-image: url('assets/cta/sticker-left.png'), url('assets/cta/sticker-right.png');
    background-repeat: no-repeat, no-repeat;
    background-position:
        18% -2px,
        100% -12px;
    background-size:
        clamp(120px, 18vw, 220px) auto,
        clamp(240px, 38vw, 520px) auto;
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
}
.cta-follow-line1 {
    margin: 0;
    font-weight: 900;
    font-size: clamp(20px, 3.8vw, 48px);
    color: #ffea00;
    -webkit-text-stroke: clamp(6px, 1.5vw, 12px) #0b4b00;
    filter:
        drop-shadow(-1px 0 #ffffff)
        drop-shadow(1px 0 #ffffff)
        drop-shadow(0 0px #ffffff)
        drop-shadow(0 1px #ffffff)
        drop-shadow(0.7px -0.7px #ffffff)
        drop-shadow(-0.7px 0.7px #ffffff)
        drop-shadow(0.7px -0.7px #ffffff)
        drop-shadow(0.7px 0.7px #ffffff);
    paint-order: stroke fill;
    line-height: 1.25;
}
.cta-follow-line2 {
    margin: 0;
    margin-top: clamp(8px, 1.8vw, 12px);
    font-weight: 900;
    font-size: clamp(24px, 4.2vw, 48px);
    color: #ffea00;
    -webkit-text-stroke: clamp(6px, 1.5vw, 12px) #0b4b00;
    filter:
        drop-shadow(-1px 0 #ffffff)
        drop-shadow(1px 0 #ffffff)
        drop-shadow(0 0px #ffffff)
        drop-shadow(0 1px #ffffff)
        drop-shadow(0.7px -0.7px #ffffff)
        drop-shadow(-0.7px 0.7px #ffffff)
        drop-shadow(0.7px -0.7px #ffffff)
        drop-shadow(0.7px 0.7px #ffffff);
    paint-order: stroke fill;
    line-height: 1.1;
}
.cta-follow-line3 {
    margin: 0;
    margin-top: clamp(12px, 2.2vw, 18px);
    font-weight: 900;
    font-size: clamp(30px, 6vw, 72px);
    color: #ffea00;
    -webkit-text-stroke: clamp(6px, 1.5vw, 12px) #0b4b00;
    filter:
        drop-shadow(-1px 0 #ffffff)
        drop-shadow(1px 0 #ffffff)
        drop-shadow(0 0px #ffffff)
        drop-shadow(0 1px #ffffff)
        drop-shadow(0.7px -0.7px #ffffff)
        drop-shadow(-0.7px 0.7px #ffffff)
        drop-shadow(0.7px -0.7px #ffffff)
        drop-shadow(0.7px 0.7px #ffffff);
    paint-order: stroke fill;
    line-height: 1;
}
.cta-follow-mobile-text {
    display: none;
}
@media (max-width: 760px) {
    .cta-follow-desktop-text {
        display: none;
    }
    .cta-follow-mobile-text {
        display: inline;
    }
    .cta-follow-text {
        padding: clamp(50px, 9vw, 78px) 0 clamp(18px, 5vw, 34px);
        background-size:
            clamp(110px, 28vw, 170px) auto,
            clamp(210px, 52vw, 420px) auto;
    }
    .cta-follow-line1 { font-size: clamp(16px, 5.2vw, 40px); }
    .cta-follow-line2 { font-size: clamp(16px, 5.6vw, 40px); }
    .cta-follow-line3 { font-size: clamp(22px, 7.4vw, 56px); }
}

/* CTA contact panel — marketer sticker overlaps card (pseudo below label/buttons) */
.cta-contact-card-wrap {
    position: relative;
    width: 100%;
    max-width: min(1400px, 100%);
    margin: 80px auto 0;
    padding: clamp(16px, 3vw, 36px) clamp(10px, 2vw, 20px);
    box-sizing: border-box;
    overflow: visible;
}

.cta-contact-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: min(1066px, 92vw);
    margin: 0 auto;
    background: #ffffff;
    border: 8px solid #ffea00;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: clamp(14px, 2.5vw, 22px);
    padding-right: clamp(14px, 2.5vw, 22px);
    box-sizing: border-box;
    overflow: visible;
    isolation: isolate;
}

/* Sticker sits above the white fill, under interactive content; extends past edges to overlap border */
.cta-contact-card::after {
    content: '';
    position: absolute;
    z-index: 0;
    /* 50px offset down from card top; clamp keeps sides fluid without clipping on narrow screens */
    top: calc(50px + clamp(-28px, -2.8vw, -10%));
    right: clamp(-10px, -6.5vw, -22%);
    bottom: clamp(-28px, -2.8vw, -10%);
    left: clamp(-10px, -6.5vw, -22%);
    background: transparent url('assets/cta/marketer-contact-sticker.png') no-repeat center center;
    background-size: contain;
    pointer-events: none;
}

/* Desktop: wider horizontal frame so the marketer art scales to full width */
@media (min-width: 761px) {
    .cta-contact-card::after {
        left: clamp(-160px, -11vw, -42%);
        right: clamp(-160px, -11vw, -42%);
        margin-top: 23px;
    }
}

@media (max-width: 760px) {
    .cta-contact-card::after {
        margin-top: -303px;
    }
}

.cta-contact-card .cta-contact-btn {
    position: relative;
    z-index: 1;
}

.cta-contact-card-label {
    position: absolute;
    top: -28px;
    left: 0;
    right: 0;
    transform: none;
    z-index: 2;
    border: none;
    padding: 0 22px;
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
    font-weight: 900;
    font-size: clamp(18px, 2.8vw, 34px);
    color: #ec6941;
    -webkit-text-stroke: clamp(6px, 1.5vw, 12px) #ffffff;
    filter:
        drop-shadow(-1px 0 #ffea00)
        drop-shadow(1px 0 #ffea00)
        drop-shadow(0 0px #ffea00)
        drop-shadow(0 1px #ffea00)
        drop-shadow(0.7px -0.7px #ffea00)
        drop-shadow(-0.7px 0.7px #ffea00)
        drop-shadow(0.7px -0.7px #ffea00)
        drop-shadow(0.7px 0.7px #ffea00);
    paint-order: stroke fill;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
}
.cta-contact-card-label-mobile {
    display: none;
}
.cta-contact-card-label-mobile-line {
    display: inline;
}
.cta-contact-btn {
    width: 706px;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: clamp(10px, 2vw, 16px);
    border: 8px solid #000000;
    border-radius: 12px;
    padding: clamp(10px, 2.1vw, 16px) clamp(14px, 2.5vw, 20px);
    box-sizing: border-box;
    margin: 0 auto;
    text-decoration: none;
    color: inherit;
    /* Outside drop shadow (bottom-left + bottom-right). */
    box-shadow: -2px 2px 0px rgb(0 0 0), 0px 7px 0px rgb(0 0 0);
}
a.cta-contact-btn:link,
a.cta-contact-btn:visited,
a.cta-contact-btn:hover,
a.cta-contact-btn:active,
a.cta-contact-btn:focus {
    text-decoration: none;
    color: inherit;
}
.cta-contact-card .cta-contact-btn + .cta-contact-btn {
    margin-top: 28px;
}
.cta-contact-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(34px, 4vw, 48px);
    height: clamp(34px, 4vw, 48px);
    flex-shrink: 0;
}
.cta-contact-btn-icon i {
    font-size: 50px;
    color: #000000;
    -webkit-text-stroke: 8px #ffffff;
    paint-order: stroke fill;
}
.cta-contact-btn-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0; /* allow flexbox to shrink without forcing wrap */
}
.cta-contact-btn-title {
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
    font-weight: 900;
    font-size: 48px;
    color: #000000;
    -webkit-text-stroke: 8px #ffffff;
    paint-order: stroke fill;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1;
}
.cta-contact-btn-sub {
    margin-top: 0.2em;
    font-weight: 800;
    font-size: clamp(10px, 1.45vw, 14px);
    color: #000000;
    -webkit-text-stroke: clamp(2px, 0.55vw, 5px) #ffffff;
    paint-order: stroke fill;
    text-shadow: none;
    white-space: nowrap;
}
.cta-contact-btn-phone {
    background: linear-gradient(180deg, #ff9a14 0%, #f47c00 100%);
    justify-content: center;
}
.cta-contact-btn-phone .cta-contact-btn-text {
    align-items: center;
    text-align: center;
}
.cta-contact-btn-mail {
    background: linear-gradient(180deg, #ffe100 0%, #ffd100 100%);
    justify-content: center;
}
.cta-contact-btn-mail .cta-contact-btn-text {
    align-items: center;
    text-align: center;
}

@media (max-width: 760px) {
    .cta-contact-card-wrap {
        margin-top: clamp(40px, 12vw, 80px);
        padding: clamp(10px, 4vw, 20px) 6px;
    }
    .cta-contact-card {
        padding-top: 50px;
        padding-bottom: 50px;
        padding-left: clamp(12px, 2.8vw, 18px);
        padding-right: clamp(12px, 2.8vw, 18px);
    }
    .cta-contact-card-label {
        top: -20px;
        font-size: clamp(22px, 7.4vw, 56px);
        line-height: 1.1;
        white-space: normal;
    }
    .cta-contact-card-label-desktop {
        display: none;
    }
    .cta-contact-card-label-mobile {
        display: inline;
        font-size: clamp(16px, 5.2vw, 26px);
    }
    .cta-contact-card-label-mobile-line {
        display: block;
    }
    .cta-contact-btn {
        border-width: 2px;
        border-radius: 10px;
        width: 100%;
    }
    .cta-contact-btn-icon {
        width: clamp(24px, 7.5vw, 40px);
        height: clamp(24px, 7.5vw, 40px);
    }
    .cta-contact-btn-icon i {
        font-size: clamp(24px, 7.5vw, 40px);
        -webkit-text-stroke: clamp(3px, 1.2vw, 8px) #ffffff;
        paint-order: stroke fill;
    }
    .cta-contact-btn-title {
        font-size: clamp(18px, 6.5vw, 40px);
        -webkit-text-stroke: clamp(4px, 1.45vw, 8px) #ffffff;
        paint-order: stroke fill;
    }
    .cta-contact-btn-sub {
        font-size: clamp(7px, 2.75vw, 14px);
        -webkit-text-stroke: clamp(1px, 0.55vw, 3px) #ffffff;
        paint-order: stroke fill;
    }
}
@media (max-width: 760px) {
    .cta-hero {
        width: 100%;
        flex-direction: column;
        gap: 0.8rem;
    }
    .cta-yellow-disc {
        left: 8%;
        width: min(240px, max(130px, 125%));
    }
    .cta-labels { justify-content: center; width: 100%; gap: 0.55rem; }
    .cta-label-pill {
        min-width: 0;
        font-size: clamp(1.2rem, 5.4vw, 1.75rem);
    }
    .cta-headline-line1 {
        font-size: clamp(1.35rem, 5.3vw, 1.95rem);
    }
    .cta-headline-line2 {
        font-size: clamp(1.75rem, 7.1vw, 2.65rem);
    }
    .cta-service-card-tab {
        padding: 0;
        border: none;
    }
    .cta-service-card-tab-text {
        font-size: clamp(14px, 5vw, 20px);
        -webkit-text-stroke: clamp(2px, 0.9vw, 5px) #fff;
        paint-order: stroke fill;
    }
    .cta-service-card-title {
        font-size: clamp(1.05rem, 4.2vw, 1.45rem);
        line-height: 1.2;
    }
    .cta-service-card-main {
        font-size: clamp(0.92rem, 3.5vw, 1.22rem);
    }
    .cta-bottom-strip-text {
        font-size: clamp(28px, 8vw, 72px);
    }
    .cta-service-card-body {
        padding-top: 3rem;
        border-width: 4px;
    }
    .cta-service-card-tab {
        margin-bottom: -32px;
    }
    .cta-service-card-list {
        font-size: clamp(0.76rem, 2.95vw, 0.95rem);
        line-height: 1.7;
    }
}

@media (max-width: 760px) {
    .cta-bottom-strip-text { font-size: clamp(28px, 8vw, 72px); -webkit-text-stroke: 2px #0b4b00; }
}

/* Feels Good Section */
.feels-good-section img { width: 100%; }
.feels-good-sticker-mobile { display: none !important; }
@media (max-width: 760px) {
    .feels-good-sticker-desktop { display: none !important; }
    .feels-good-sticker-mobile { display: block !important; }
}

/* Highest Quality Section - uses background + sticker */
.highest-quality-wrapper {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
}
.highest-quality-wrapper > img {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    align-self: start;
    justify-self: stretch;
}
.highest-quality-bg { display: block; position: relative; z-index: 0; }
.highest-quality-sticker { display: block; position: relative; z-index: 1; }

/* Highest Quality desktop/mobile switching (max-width: 760px) */
.highest-quality-bg-mobile,
.highest-quality-sticker-mobile { display: none !important; }
@media (max-width: 760px) {
    .highest-quality-bg-desktop,
    .highest-quality-sticker-desktop { display: none !important; }
    .highest-quality-bg-mobile,
    .highest-quality-sticker-mobile { display: block !important; }
}

/* Difference Section */
.difference-section {
    background-color: #f0f4f0;
    background-image: url( 'assets/difference/difference-background-sticker.png' );
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    padding: 60px 0;
}
.difference-header-title {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto 1.5rem;
}
.difference-section-subtitle {
    margin: 0 0 1.25rem;
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.35;
    color: #000;
    text-align: center;
}
@media (min-width: 1024px) {
    .difference-section-subtitle {
        font-size: 3.25rem;
    }
    .difference-section-lead {
        font-size: 24px;
        font-weight: 900;
    }
}
@media (min-width: 1440px) {
    .difference-section-subtitle {
        font-size: 3.5rem;
    }
}
/* Shared column: image + lead — same width, centered; text left inside */
.difference-body {
    width: 100%;
    max-width: min(1200px, 88%);
    margin-left: auto;
    margin-right: auto;
}
.difference-intro-wrap {
    margin: 0 0 2.25rem;
}
.difference-intro-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
.difference-section-lead {
    margin: 0;
    max-width: none;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.75;
    color: #024800;
    text-align: left;
}

.difference-compare-footer {
    margin-top: 60px;
    text-align: center;
    font-weight: 900;
    font-size: clamp(1.35rem, 4vw, 2.15rem);
    line-height: 1.35;
    color: #369000;
}

/* Difference: wide single-row merits/demerits */
.difference-wide-row {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    align-items: start;
}
.difference-wide-image-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: 4px;
}
.difference-wide-image {
    width: 100%;
    height: auto;
    display: block;
}
.difference-wide-badge {
    position: absolute;
    z-index: 1;
    background: rgba(30, 89, 20, 0.8);
    color: #fff;
    font-weight: 800;
    padding: 0.6rem 2.85rem;
    font-size: clamp(1.05rem, 2.9vw, 1.45rem);
    line-height: 1.2;
}
.difference-wide-text-grid {
    background: #fff;
    border-radius: 4px;
    padding: 1rem 1.1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    color: #000;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.65;
}
.difference-wide-col {
    min-width: 0;
}
.difference-wide-heading {
    font-weight: 900;
    color: #ff8a00;
    margin-bottom: 0.6rem;
    font-size: 1.15rem;
    line-height: 1.2;
}

.difference-wide-heading--merit {
    color: #ff8a00;
}

.difference-wide-heading--demerit {
    color: #6a6a6a;
}
.difference-wide-list {
    margin: 0;
    padding: 0 0 0 1.2rem;
    list-style: none;
}
.difference-wide-list li {
    margin: 0;
    color: inherit;
    font-size: clamp(0.92rem, 2.3vw, 1.1rem);
    line-height: 1.65;
}
.difference-wide-list li::before {
    content: '・';
    margin-right: 0.5rem;
    color: #000;
}

@media (max-width: 760px) {
    .difference-wide-row {
        grid-template-columns: 1fr;
    }
    .difference-wide-text-grid {
        grid-template-columns: 1fr;
    }
}

/* Difference: worker staff message row */
.difference-staff-row {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    align-items: stretch;
}
.difference-staff-image-wrap {
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
}
.difference-staff-image {
    width: 100%;
    height: auto;
    display: block;
}
.difference-staff-text {
    border-radius: 0;
    padding: 1rem 1.1rem 1.1rem;
    text-align: left;
    font-size: clamp(1.05rem, 2.2vw, 1.2rem);
    font-weight: 700;
    line-height: 1.65;
    color: #000;
}
.difference-staff-heading {
    margin: 0 0 0.75rem 0;
    font-size: 1.4rem;
    font-weight: 900;
    color: #369000;
}
.difference-staff-text p {
    margin: 0;
}
@media (max-width: 760px) {
    .difference-staff-row {
        grid-template-columns: 1fr;
    }
    .difference-staff-text {
        padding: 0;
        font-size: clamp(0.92rem, 2.3vw, 1.1rem);
    }
}

@media (min-width: 1024px) {
    .difference-compare-footer {
        font-size: clamp(1.35rem, 4vw, 2.15rem);
        font-weight: 900;
        line-height: 1.35;
        color: #369000;
        text-align: center;
    }
}

@media (min-width: 1440px) {
    .difference-compare-footer {
        font-size: clamp(1.35rem, 4vw, 2.15rem);
        font-weight: 900;
        line-height: 1.35;
        color: #369000;
        text-align: center;
    }
}
@media (max-width: 760px) {
    .difference-section .section-inner {
        overflow: hidden;
    }
    .difference-header-title {
        width: 160%;
        max-width: none;
        margin: 0 0 1.5rem 50%;
        transform: translateX(-50%);
    }
    .difference-section-lead {
        font-size: 14px;
    }
}

/* Difference: natural vs artificial two-column compare */
.difference-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 2.25rem;
}

.difference-compare-kicker {
    margin-top: 3.25rem;
    font-size: clamp(1.35rem, 4vw, 2.15rem);
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
    color: #369000;
}
.difference-compare-col {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 8px;
    min-width: 0;
}
.difference-compare-heading {
    background: #51d600;
    color: #fff;
    font-weight: 800;
    text-align: center;
    padding: 0.7rem 0.75rem;
    font-size: clamp(1.15rem, 3.6vw, 1.9rem);
    line-height: 1.3;
}
.difference-compare-visual {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    line-height: 0;
    background: #1a1a1a;
}
.difference-compare-badge {
    position: absolute;
    z-index: 1;
    background: rgba(30, 89, 20, 0.8);
    color: #fff;
    font-weight: 800;
    padding: 0.6rem 2.85rem;
    font-size: clamp(1.05rem, 2.9vw, 1.45rem);
    line-height: 1.2;
}
.difference-compare-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.difference-compare-copy {
    flex: 1 1 auto;
    background: #fff;
    color: #000;
    padding: 1rem 1.1rem 1.1rem;
    text-align: left;
    font-size: clamp(0.95rem, 2.3vw, 1.25rem);
    font-weight: 700;
    line-height: 1.65;
    border: 1px solid #afafaf;
}
.difference-compare-copy p {
    margin: 0;
}

.difference-compare-copy ul {
    margin: 0;
    padding: 0 0 0 1.2rem;
    list-style: none;
}
.difference-compare-copy ul,
.difference-compare-copy li {
    font-size: inherit;
}
.difference-compare-copy li {
    margin: 0;
}
.difference-compare-copy li::before {
    content: '・';
    margin-right: 0.5rem;
}
@media (max-width: 760px) {
    .difference-compare-grid {
        grid-template-columns: 1fr;
    }
}

/* Large Scale Section */
.large-scale-section { position: relative; background-size: cover; overflow: visible; }
.large-scale-section img { width: 100%; object-fit: cover; }

.large-scale-wrapper {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
}
.large-scale-wrapper > img {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    align-self: start;
    justify-self: stretch;
}
.large-scale-bg { z-index: 0; }
.large-scale-box {
    border-radius: clamp(16px, 3vw, 40px);
    background-color: rgba(254, 255, 233, 0.8);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(860px, calc(100% - 24px));
    max-height: calc(100% - 24px);
    z-index: 1;
    box-sizing: border-box;
    overflow: auto;
    padding: clamp(14px, 3vw, 44px) clamp(14px, 4vw, 56px);
}
.large-scale-box-title {
    margin: 0;
    text-align: center;
    font-weight: bold;
    line-height: 1.35;
}
.large-scale-box-text {
    margin: clamp(10px, 2vw, 22px) 0 0;
    font-size: clamp(14px, calc(11px + 0.9vw), 23.2px);
    font-weight: 600;
    line-height: 1.7;
}

/* Large Scale desktop/mobile switching (max-width: 760px) */
.large-scale-bg-mobile,
.large-scale-sticker-mobile { display: none !important; }
@media (max-width: 760px) {
    .large-scale-bg-desktop,
    .large-scale-sticker-desktop { display: none !important; }
    .large-scale-bg-mobile,
    .large-scale-sticker-mobile { display: block !important; }
    .large-scale-box {
        width: calc(100% - 24px);
        max-height: calc(100% - 16px);
        border-radius: clamp(14px, 3.5vw, 20px);
        padding: clamp(12px, 3.5vw, 20px) clamp(12px, 3vw, 16px);
    }
}

/* Flow Section */
.flow-section img { width: 100%; }
.flow-sticker-mobile { display: none !important; }
@media (max-width: 760px) {
    .flow-sticker-desktop { display: none !important; }
    .flow-sticker-mobile { display: block !important; }
}

/* FAQ Section — cream backdrop, Q/A cards (replaces background + sticker images) */
.faq-section {
    margin-top: -20px;
    z-index: 1;
    overflow: visible;
    background: #fff8e6;
    padding: clamp(2.25rem, 5.5vw, 4rem) clamp(1.25rem, 4vw, 2.75rem) clamp(2.75rem, 6.5vw, 4.5rem);
}
.faq-inner {
    width: 100%;
    max-width: min(1120px, 96vw);
    margin: 0 auto;
}
.faq-heading-wrap {
    position: relative;
    /* Wider than .faq-inner so the title banner can use full art width (1359px asset), centered */
    left: 50%;
    width: min(1359px, 96vw);
    max-width: none;
    transform: translateX(-50%);
    margin-bottom: clamp(1.75rem, 4.5vw, 2.75rem);
    line-height: 0;
}
.faq-heading-bg {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}
.faq-heading {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 22em;
    margin: 0;
    text-align: center;
    font-size: clamp(2rem, 5.5vw, 3.25rem);
    font-weight: 900;
    color: #008d00;
    letter-spacing: 0.02em;
    line-height: 1.3;
}
@media (max-width: 760px) {
    .faq-heading {
        top: 40%;
        font-size: clamp(1.85rem, 6.2vw, 2.65rem);
    }
}
.faq-list {
    /* Less overlap on narrow viewports; up to -72px on large screens */
    margin-top: clamp(-72px, -5.5vw, -14px);
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3.5vw, 2.25rem);
}
.faq-card {
    background: #fff;
    border-radius: 22px;
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.35rem, 4vw, 2.5rem);
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.07);
    border: 2px solid rgba(0, 141, 0, 0.12);
}
.faq-card-row {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.7rem, 1.9vw, 1rem);
}
.faq-badge {
    flex-shrink: 0;
    width: clamp(48px, 6vw, 60px);
    height: clamp(48px, 6vw, 60px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.2rem, 2.8vw, 1.45rem);
    font-weight: 900;
    line-height: 1;
}
.faq-badge-q {
    background: #fdfbe6;
    color: #008d00;
}
.faq-badge-a {
    background: #008d00;
    color: #fff;
}
.faq-q-text {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding-top: 0.45rem;
    font-size: clamp(1.3rem, 3.6vw, 1.85rem);
    font-weight: 700;
    color: #008d00;
    line-height: 1.6;
}
.faq-card-divider {
    height: 0;
    border: none;
    border-top: 3px solid #008d00;
    margin: clamp(1rem, 2.5vw, 1.35rem) 0 clamp(1rem, 2.5vw, 1.35rem);
    opacity: 0.95;
}
.faq-a-text {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding-top: 0.45rem;
    font-size: clamp(1.15rem, 3vw, 1.45rem);
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.85;
}
@media (max-width: 760px) {
    .faq-badge {
        width: clamp(34px, 7.5vw, 40px);
        height: clamp(34px, 7.5vw, 40px);
        font-size: clamp(0.75rem, 2vw, 0.9rem);
    }
    .faq-q-text {
        padding-top: 0.25rem;
        font-size: clamp(1.05rem, 3.6vw, 1.35rem);
    }
    .faq-a-text {
        padding-top: 0.25rem;
        font-size: clamp(0.95rem, 3vw, 1.1rem);
        line-height: 1.55;
    }
    .faq-card {
        padding: clamp(1.35rem, 4.5vw, 1.85rem) clamp(1.1rem, 3.5vw, 1.5rem);
    }
}

/* Vice Section */
.vice-section { position: relative; min-height: 0; padding: 0; background: none; overflow: visible; }
.vice-section img { width: 100%; display: block; height: auto; }
.vice-wrapper {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
}
.vice-wrapper > img {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    align-self: start;
    justify-self: stretch;
}
.vice-bg { z-index: 0; }
.vice-sticker { z-index: 1; position: relative; }

/* Vice desktop/mobile switching (max-width: 760px) */
.vice-bg-mobile,
.vice-sticker-mobile { display: none !important; }
@media (max-width: 760px) {
    .vice-bg-desktop,
    .vice-sticker-desktop { display: none !important; }
    .vice-bg-mobile,
    .vice-sticker-mobile { display: block !important; }
}

/* Blog Section */
.blog-sticker {
    width: auto;
    margin: 0 auto;
}
.blog-breadcrumb {
    width: 90%;
    max-width: 1420px;
    margin: 0 auto;
    padding-left: 0;
    padding-top: 15px;
    font-size: 17px;
    font-weight: 800;
}
.blog-detail-breadcrumb {
    width: 90%;
    max-width: 1030px;
    margin: 0 auto;
    padding-left: 0;
    padding-top: 15px;
    font-size: 17px;
    font-weight: 800;
}

.blog-detail-content {
    width: 90%;
    max-width: 1030px;
    margin: 55px auto 0;
}

.blog-detail-title {
    margin: 36px 0;
    font-size: clamp(24px, 3.6vw, 30px);
    font-weight: 900;
}

.blog-detail-category-wrapper {
    margin: 0;
}

.blog-detail-divider {
    margin-top: 20px;
    border-bottom: 2px solid #008d00;
}

.blog-detail-toc {
    margin-top: 40px;
}

.blog-detail-toc-inner {
    border: 1px solid #008d00;
    border-top-width: 15px;
    background-color: #f0ffe5;
    padding: 24px 28px 28px;
}

.blog-detail-toc-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 16px 0 20px;
}

.blog-detail-toc-icon {
    width: 57px;
    height: 57px;
    border-radius: 50%;
    background-color: #008d00;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-detail-toc-icon .fa-solid {
    color: #ffffff;
    font-size: 33px;
}

.blog-detail-toc-title {
    font-size: 33px;
    font-weight: 700;
}

.blog-detail-toc-list {
    list-style: none;
    margin: 20px 45px 45px;
    padding: 0 0 0 1.4em;
}

.blog-detail-toc-list li {
    position: relative;
    margin-bottom: 10px;
    font-size: 33px;
    font-weight: 600;
}
.blog-detail-toc-link {
    color: inherit;
    text-decoration: none;
}
.blog-detail-toc-link:hover {
    text-decoration: underline;
}

.blog-detail-toc-list li::before {
    content: '';
    position: absolute;
    left: -1.4em;
    top: 0.55em;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #008d00;
}

.works-detail-toc {
    margin-top: 52px;
}
.works-detail-toc-inner {
    border-top: 8px solid #008d00;
    background-color: #f0ffe5;
    padding: 24px 32px 32px;
}
.works-detail-toc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}
.works-detail-toc-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #008d00;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}
.works-detail-toc-icon .fa-solid {
    font-size: 33px;
}
.works-detail-toc-title {
    font-size: 33px;
    font-weight: 700;
}
.works-detail-toc-list {
    list-style: none;
    margin: 20px 45px 45px;
    padding: 0 0 0 1.4em;
}
.works-detail-toc-list li {
    position: relative;
    margin-bottom: 10px;
    font-size: 33px;
    font-weight: 600;
}
.works-detail-toc-list li::before {
    content: '';
    position: absolute;
    left: -1.4em;
    top: 0.55em;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #008d00;
}
.works-detail-toc-link {
    color: inherit;
    text-decoration: none;
}
.works-detail-toc-link:hover {
    text-decoration: underline;
}

.blog-detail-heading {
    margin-top: 60px;
}

.blog-detail-heading-inner {
    background-color: #f0ffe5;
    border-left: 15px solid #008d00;
    padding: 14px 28px 16px;
}

.blog-detail-heading-title {
    margin: 0;
    font-size: clamp(24px, 3.2vw, 30px);
    font-weight: 700;
    line-height: 1.25;
}

@media (max-width: 760px) {
    /* Blog detail TOC (single.php) */
    .blog-detail-toc-icon {
        width: clamp(42px, 12vw, 52px);
        height: clamp(42px, 12vw, 52px);
    }

    .blog-detail-toc-icon .fa-solid {
        font-size: clamp(22px, 5.8vw, 28px);
    }

    .blog-detail-toc-title {
        font-size: clamp(22px, 6.2vw, 28px);
        line-height: 1.2;
    }

    .blog-detail-toc-list {
        margin: 16px 18px 26px;
        padding: 0 0 0 1.2em;
    }

    .blog-detail-toc-list li {
        margin-bottom: 8px;
        font-size: clamp(18px, 5.2vw, 26px);
        line-height: 1.2;
    }

    .blog-detail-toc-list li::before {
        left: -1.2em;
        top: 0.55em;
        width: 11px;
        height: 11px;
    }

}

@media (max-width: 760px) {
    /* Works detail TOC + hero/section titles (single-works.php) */
    .works-detail-hero-title {
        font-size: clamp(22px, 7vw, 30px);
        line-height: 1.2;
        padding: 6px 10px;
        margin: 0 0 10px;
    }

    .works-detail-toc-icon {
        width: clamp(42px, 12vw, 52px);
        height: clamp(42px, 12vw, 52px);
    }

    .works-detail-toc-icon .fa-solid {
        font-size: clamp(22px, 5.8vw, 28px);
    }

    .works-detail-toc-title {
        font-size: clamp(22px, 6.2vw, 28px);
        line-height: 1.2;
    }

    .works-detail-toc-list {
        margin: 16px 18px 26px;
        padding: 0 0 0 1.2em;
    }

    .works-detail-toc-list li {
        margin-bottom: 8px;
        font-size: clamp(18px, 5.2vw, 26px);
        line-height: 1.2;
    }

    .works-detail-toc-list li::before {
        left: -1.2em;
        top: 0.55em;
        width: 11px;
        height: 11px;
    }

    .works-detail-heading-title {
        line-height: 1.25;
    }
}

.blog-detail-heading-image {
    margin-top: 35px;
}

.blog-detail-heading-img {
    width: 100%;
    height: auto;
    display: block;
}

.blog-detail-body {
    font-size: clamp(16px, 2.2vw, 20px);
    font-weight: 500;
    line-height: 33px;
    margin-top: 40px;
}

.blog-detail-post-nav {
    margin: 163px 0 163px;
}

.blog-detail-post-nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 18px;
    font-weight: 600;
}

.blog-detail-post-nav-item {
    flex: 1;
}

.blog-detail-post-nav-prev {
    text-align: left;
}

.blog-detail-post-nav-list {
    text-align: center;
}

.blog-detail-post-nav-next {
    text-align: right;
}

.blog-detail-post-nav-link {
    color: #333333;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.blog-detail-post-nav-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.15s ease-out;
}

.blog-detail-post-nav-text {
    text-decoration: none;
}

.blog-detail-post-nav-icon-link i.fa-chevron-left,
.blog-detail-post-nav-icon-link i.fa-chevron-right {
    color: #008d00;
    font-size: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #008d00;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.blog-detail-post-nav-icon-link i.fa-table-cells-large {
    color: #008d00;
    font-size: 28px;
}

.blog-detail-post-nav-icon-link:hover i.fa-chevron-left,
.blog-detail-post-nav-icon-link:hover i.fa-chevron-right,
.blog-detail-post-nav-icon-link:hover i.fa-table-cells-large {
    transform: scale(1.05);
}

.blog-detail-post-nav-link.is-disabled {
    opacity: 0.4;
    cursor: default;
}

.blog-detail-category-list {
    width: 100%;
    margin: 24px 0 32px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
}

.blog-detail-category-chip {
    min-width: 90px;
    padding: 8px 18px;
    border-radius: 6px;
    border: 2px solid #008d00;
    background-color: #ffffff;
    color: #000000;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    display: inline-block;
}

.blog-detail-category-chip.is-active {
    background-color: #008d00;
    color: #ffffff;
}

/* Works detail page (single-works.php) */
@media (max-width: 760px) {
    .blog-detail-category-chip,
    .works-detail-category-chip {
        font-size: clamp(12px, 3.5vw, 16px);
        padding: 6px 12px;
        line-height: 1.2;
    }
}

.works-detail-breadcrumb {
    width: 90%;
    max-width: 1030px;
    margin: 0 auto;
    padding-left: 0;
    padding-top: 15px;
    font-size: 17px;
    font-weight: 800;
}

.works-detail-content {
    width: 90%;
    max-width: 1030px;
    margin: 55px auto 0;
}

.works-detail-title {
    margin: 36px 0;
    font-size: clamp(24px, 3.6vw, 30px);
    font-weight: 900;
}

@media (max-width: 760px) {
    .blog-detail-title,
    .works-detail-title {
        /* Auto-reduce on mobile so titles don't overflow/cut */
        line-height: 1.25;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        margin: 26px 0;
    }
}

.works-detail-category-wrapper {
    margin: 0;
}

.works-detail-divider {
    margin-top: 20px;
    border-bottom: 2px solid #008d00;
}

.works-detail-heading {
    margin-top: 60px;
}

.works-detail-heading-inner {
    background-color: #f0ffe5;
    border-left: 15px solid #008d00;
    padding: 14px 28px 16px;
}

.works-detail-heading-title {
    margin: 0;
    font-size: clamp(24px, 3.6vw, 30px);
    font-weight: 700;
    line-height: 1.25;
}

.works-detail-heading-image {
    margin-top: 35px;
}

.works-detail-heading-img {
    width: 100%;
    height: auto;
    display: block;
}

.works-detail-main-img-wrap {
    position: relative;
    display: block;
}

.works-detail-main-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.works-detail-main-terms {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 40px;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    background: #51d600;
    display: block;
}

.works-detail-body {
    font-size: clamp(13px, 2.2vw, 20px);
    font-weight: 500;
    line-height: 33px;
    margin-top: 40px;
}

.works-detail-hero {
    margin-top: 40px;
}

.works-detail-hero-inner {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

.works-detail-hero-image {
    position: relative;
    flex: 0 0 55%;
}

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

.works-detail-hero-label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 40px;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    background: #51d600;
    display: inline-block;
}

.works-detail-hero-text {
    background-color: transparent;
    border: 2px solid #008d00;
    width: 100%;
}

.works-detail-hero-title {
    margin: 0 0 12px;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    background-color: #008d00;
    color: #ffffff;
    padding: 8px 12px;
}

.works-detail-hero-description {
    margin: 18px;
    font-size: 18.3px;
    font-weight: 500;
    line-height: 1.8;
}

@media (max-width: 760px) {
    /* Stack hero to 1 column on mobile (image on top, text below) */
    .works-detail-hero-inner {
        flex-direction: column;
        gap: 16px;
    }

    .works-detail-hero-image {
        flex: 0 0 auto;
        width: 100%;
    }

    .works-detail-hero-text {
        width: 100%;
    }
}

.works-detail-category-list {
    width: 100%;
    margin: 24px 0 32px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
}

.works-detail-category-chip {
    min-width: 90px;
    padding: 8px 18px;
    border-radius: 6px;
    border: 2px solid #008d00;
    background-color: #ffffff;
    color: #000000;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    display: inline-block;
}

@media (max-width: 760px) {
    .works-detail-category-chip {
        font-size: clamp(12px, 3.5vw, 16px);
        padding: 6px 12px;
        min-width: 72px;
        line-height: 1.2;
    }
}

.works-detail-post-nav {
    margin: 163px 0 163px;
}

.works-detail-post-nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 18px;
    font-weight: 600;
}

.works-detail-post-nav-item {
    flex: 1;
}

.works-detail-post-nav-prev {
    text-align: left;
}

.works-detail-post-nav-list {
    text-align: center;
}

.works-detail-post-nav-next {
    text-align: right;
}

.works-detail-post-nav-link {
    color: #333333;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.works-detail-post-nav-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.15s ease-out;
}

.works-detail-post-nav-text {
    text-decoration: none;
}

.works-detail-post-nav-icon-link i.fa-chevron-left,
.works-detail-post-nav-icon-link i.fa-chevron-right {
    color: #008d00;
    font-size: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #008d00;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.works-detail-post-nav-icon-link i.fa-table-cells-large {
    color: #008d00;
    font-size: 28px;
}

.works-detail-post-nav-icon-link:hover i.fa-chevron-left,
.works-detail-post-nav-icon-link:hover i.fa-chevron-right,
.works-detail-post-nav-icon-link:hover i.fa-table-cells-large {
    transform: scale(1.05);
}

.works-detail-post-nav-link.is-disabled {
    opacity: 0.4;
    cursor: default;
}
.blog-section-inner {
    width: 100%;
}
.blog-content {
    padding-top: 37px;
}
.blog-section-title-wrap {
    text-align: center;
    margin-bottom: 2rem;
    margin-top: 3rem;
    width: 90%;
    max-width: 1420px;
    margin-left: auto;
    margin-right: auto;
}
.blog-section-title-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.blog-section-title,
.blog-section-title-description {
    text-align: center;
}

.blog-section-title-description {
    width: 90%;
    max-width: 1420px;
    margin-left: auto;
    margin-right: auto;
}

.blog-section-title {
    width: 90%;
    max-width: 1420px;
    margin-left: auto;
    margin-right: auto;
}
.blog-section-subtitle {
    font-size: 52px;
    font-weight: 700;
    color: #008d00;
}
.blog-section-search-box {
    width: 90%;
    max-width: 1420px;
    margin: 2.9rem auto 2rem;
    padding: 1rem 1.5rem;
    border: 1px solid #ddd;
    border-radius: 20px;
    background-color: #008d00;
    text-align: center;
    color: #ffffff;
}
.blog-section-search-description {
    font-size: 38px;
    font-weight: 900;
}
.blog-section-search-icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
    width: auto;
    height: auto;
    object-fit: contain;
}
.blog-section-search-tags {
    font-size: 30px;
    text-align: left;
    padding: 0;
    line-height: 53px;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1em;
    align-items: center;
}
.blog-section-tag-link {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease-out;
}
.blog-section-tag-link:hover,
.blog-section-tag-link:focus {
    transform: scale(1.05);
}
.blog-section-tag-link.is-active {
    font-weight: 800;
    text-decoration: underline;
}
.blog-section-reset-search-button {
    font-size: 38px;
    padding-top: 14px;
    font-weight: 800;
    text-decoration: underline;
}
.blog-section-reset-link {
    color: inherit;
    text-decoration: underline;
    transition: transform 0.2s ease-out;
    display: inline-block;
}
.blog-section-reset-link:hover,
.blog-section-reset-link:focus {
    transform: scale(1.05);
}
.blog-section-top-three {
    width: 90%;
    max-width: 1420px;
    margin: 0 auto 2rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    justify-content: center;
}
@media (max-width: 1024px) {
    .blog-section-top-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .blog-section-top-three {
        grid-template-columns: 1fr;
    }
}
.blog-section-view-list-wrap {
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-align: center;
}
.blog-section-view-list-link {
    display: inline-block;
}
.blog-section-view-list-btn {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
    transition: transform 0.2s ease-out;
}
@media (max-width: 640px) {
    .blog-section-view-list-btn {
        width: 80%;
        max-width: 250px;
        margin: 0 auto; 
    }
}

.blog-section-top-three-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.blog-section-top-three-link {
    display: flex;
    transition: transform 0.2s ease-out;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}
.blog-section-top-three-img {
    width: 100%;
    height: auto;
    aspect-ratio: 453 / 370;
    display: block;
    object-fit: cover;
    border-radius: 20px;
}
.blog-section-top-three-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 453 / 370;
    background: #e8e8e8;
    border-radius: 8px;
}
.blog-section-top-three-content {
    margin-top: 18px;
    min-height: 180px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.blog-section-top-three-content-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.blog-section-top-three-date {
    display: block;
    font-size: 23px;
    font-weight: 700;
    color: #008d00;
}
.blog-section-top-three-title {
    display: block;
    font-size: 30px;
    font-weight: 600;
    line-height: 54px;
    color: #008d00;
}
.blog-section-top-three-tags {
    display: block;
    font-size: 24px;
    font-weight: bold;
    padding-top: 14px;
    color: #767676;
}
.blog-section-top-three-btn {
    display: block;
    margin-top: auto;
    margin-left: auto;
    margin-right: 25px;
    width: auto;
    height: auto;
    vertical-align: middle;
    padding-top: 10px;
    transition: transform 0.2s ease-out;
}
.blog-section-top-three-btn:hover,
.blog-section-view-list-btn:hover {
    transform: scale(1.05);
}

/* Blog list page: 9-post grid (home.php only – do not affect front-page top-three) */
.blog-list-grid {
    width: 90%;
    max-width: 1420px;
    margin: 83px auto 2rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 15px;
    row-gap: 75px;
    justify-content: center;
}
@media (max-width: 1024px) {
    .blog-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .blog-list-grid {
        grid-template-columns: 1fr;
    }
}
.blog-list-grid-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.blog-list-grid-link {
    display: flex;
    transition: transform 0.2s ease-out;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.blog-section-top-three-link:hover,
.blog-list-grid-link:hover,
.work-list-grid-link:hover {
    transform: scale(1.05);
}
.blog-list-grid-img {
    width: 100%;
    height: auto;
    aspect-ratio: 453 / 370;
    display: block;
    object-fit: cover;
    border-radius: 20px;
}
.blog-list-grid-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 453 / 370;
    background: #e8e8e8;
    border-radius: 8px;
}
.blog-list-grid-content {
    margin-top: 18px;
    min-height: 180px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.blog-list-grid-content-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.blog-list-grid-date {
    display: block;
    font-size: 23px;
    font-weight: 700;
    color: #008d00;
}
.blog-list-grid-title {
    display: block;
    font-size: 30px;
    font-weight: 600;
    line-height: 54px;
    color: #008d00;
}
.blog-list-grid-tags {
    display: block;
    font-size: 24px;
    font-weight: bold;
    padding-top: 14px;
    color: #767676;
}
.blog-list-grid-btn {
    display: block;
    margin-top: auto;
    margin-left: auto;
    margin-right: 25px;
    width: auto;
    height: auto;
    vertical-align: middle;
    padding-top: 10px;
    transition: transform 0.2s ease-out;
}

/* Blog list pagination (Items X to Y / Total Z, page numbers, Newest/Oldest) */
.blog-list-pagination {
    margin-top: 148px;
    margin-bottom: 245px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 1420px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
}
.blog-list-pagination-info {
    font-size: 18px;
    margin: 0;
    display: flex;
    align-items: center;
    font-weight: 600;
}
.blog-list-pagination-nav {
    margin: 0;
    display: flex;
    align-items: center;
}
.blog-list-pagination-nav .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}
.blog-list-pagination-order {
    margin: 0;
    display: flex;
    align-items: center;
}
.blog-list-pagination-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-left: auto;
    font-size: 18px;
    font-weight: 600;
}
.blog-list-order-link.is-active {
    font-weight: 700;
}

/* Work list page (archive-works): same layout as blog list, unique classes */
.work-list-sticker {
    width: auto;
    margin: 0 auto;
}
.work-list-breadcrumb {
    width: 90%;
    max-width: 1420px;
    margin: 0 auto;
    padding-left: 0;
    padding-top: 15px;
    font-size: 17px;
    font-weight: 800;
}
.work-list-content {
    padding-top: 37px;
}
.work-list-section-title,
.work-list-title-description {
    text-align: center;
}

.work-list-title-description {
    width: 90%;
    max-width: 1420px;
    margin-left: auto;
    margin-right: auto;
}

.work-list-section-title {
    width: 90%;
    max-width: 1420px;
    margin-left: auto;
    margin-right: auto;
    font-size: 60px;
    font-weight: 900;
    color: #008d00;
}
.work-list-title-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.work-list-subtitle {
    font-size: 52px;
    font-weight: 700;
    color: #008d00;
}

@media (max-width: 760px) {
    .blog-section-subtitle,
    .work-list-subtitle {
        /* Prevent overflow/cut by scaling down on small screens */
        font-size: clamp(22px, 6vw, 40px);
        line-height: 1.25;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}
.work-list-search-box {
    width: 90%;
    max-width: 1420px;
    margin: 2.9rem auto 2rem;
    padding: 1rem 1.5rem;
    border: 1px solid #ddd;
    border-radius: 20px;
    background-color: #008d00;
    text-align: center;
    color: #ffffff;
}
.work-list-search-description {
    font-size: 38px;
    font-weight: 900;
}
.work-list-search-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.35em;
    line-height: 0;
    width: auto;
    height: auto;
    object-fit: contain;
}
.work-list-search-tags {
    font-size: 30px;
    text-align: left;
    padding: 0;
    line-height: 53px;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1em;
    align-items: center;
}
.work-list-tag-link {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease-out;
}
.work-list-tag-link:hover,
.work-list-tag-link:focus {
    transform: scale(1.05);
}
.work-list-tag-link.is-active {
    font-weight: 800;
    text-decoration: underline;
}
.work-list-reset-search-button {
    font-size: 38px;
    padding-top: 14px;
    font-weight: 800;
    text-decoration: underline;
}

@media (max-width: 760px) {
    /* Blog search (home.php) */
    .blog-section-search-description {
        font-size: clamp(18px, 4.6vw, 28px);
        line-height: 1.25;
        max-width: 100%;
    }

    .blog-section-search-tags {
        font-size: clamp(14px, 3.8vw, 22px);
        line-height: 1.35;
        gap: 0.35em 0.7em;
        align-items: flex-start;
    }

    .blog-section-reset-search-button {
        font-size: clamp(18px, 4.6vw, 28px);
        line-height: 1.2;
        padding-top: 10px;
        max-width: 100%;
    }

    .blog-section-search-icon {
        /* Keep icon visually aligned with description text size */
        width: auto;
        height: 1em;
    }

    /* Work search (archive-works.php) */
    .work-list-search-description {
        font-size: clamp(18px, 4.6vw, 28px);
        line-height: 1.25;
        max-width: 100%;
    }

    .work-list-search-tags {
        font-size: clamp(14px, 3.8vw, 22px);
        line-height: 1.35;
        gap: 0.35em 0.7em;
        align-items: flex-start;
    }

    .work-list-reset-search-button {
        font-size: clamp(18px, 4.6vw, 28px);
        line-height: 1.2;
        padding-top: 10px;
        max-width: 100%;
    }

    .work-list-search-icon {
        /* Keep icon visually aligned with description text size */
        width: auto;
        height: 1em;
    }
}
.work-list-reset-link {
    color: inherit;
    text-decoration: underline;
    transition: transform 0.2s ease-out;
    display: inline-block;
}
.work-list-reset-link:hover,
.work-list-reset-link:focus {
    transform: scale(1.05);
}
.work-list-grid {
    width: 90%;
    max-width: 1420px;
    margin: 83px auto 2rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 15px;
    row-gap: 30px;
    justify-content: center;
}
@media (max-width: 1024px) {
    .work-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .work-list-grid {
        grid-template-columns: 1fr;
    }
}

/* Collapse to single column on small mobile (<=760px) */
@media (max-width: 760px) {
    .blog-section-top-three,
    .blog-list-grid,
    .work-list-grid {
        grid-template-columns: 1fr;
    }
    .blog-section-top-three-date,
    .blog-section-top-three-title,
    .blog-section-top-three-tags {
        font-size: clamp(0.95rem, 3vw, 1.1rem);
    }
    .blog-section-top-three-title {
        line-height: 1.55;
    }
}
.work-list-grid-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.work-list-grid-link {
    display: flex;
    transition: transform 0.2s ease-out;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}
.work-list-grid-img-wrap {
    position: relative;
    display: block;
}
.work-list-grid-img {
    width: 100%;
    height: auto;
    aspect-ratio: 453 / 500;
    display: block;
    object-fit: cover;
}
.work-list-grid-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 453 / 370;
    background: #e8e8e8;
    border-radius: 8px;
}
.work-list-grid-terms {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 23px;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    background: #51d600;
    display: block;
}
.work-list-grid-content {
    border: 2px solid #008d00;
    min-height: 180px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.work-list-grid-content-inner {
    margin: 10px 20px 30px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.work-list-grid-date {
    display: block;
    font-size: 23px;
    font-weight: 700;
    color: #008d00;
}
.work-list-grid-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 30px;
    font-weight: 600;
    line-height: 54px;
    color: #008d00;
}
.work-list-grid-btn {
    display: block;
    margin-top: auto;
    margin-left: auto;
    width: auto;
    height: auto;
    vertical-align: middle;
    padding-top: 10px;
    transition: transform 0.2s ease-out;
}
.blog-list-grid-btn:hover,
.work-list-grid-btn:hover {
    transform: scale(1.05);
}
.work-list-pagination {
    margin-top: 148px;
    margin-bottom: 245px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 1420px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
}
.work-list-pagination-info {
    font-size: 18px;
    margin: 0;
    display: flex;
    align-items: center;
    font-weight: 600;
}
.work-list-pagination-nav {
    margin: 0;
    display: flex;
    align-items: center;
}
.work-list-pagination-nav .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}
.work-list-pagination-order {
    margin: 0;
    display: flex;
    align-items: center;
}
.work-list-pagination-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-left: auto;
    font-size: 18px;
    font-weight: 600;
}
.work-list-order-sep {
    margin: 0 0.35em;
}
.work-list-order-link.is-active {
    font-weight: 700;
}

/* Grass Cutting Link Section */
.grass-cutting-section { position: relative; background-size: cover; }
.grass-cutting-section img { width: 100%; object-fit: cover; }

/* Case Study Section — overflow visible so absolutely positioned title is not clipped */
.case-study-section {
    padding: 60px 0 40px;
    overflow: visible;
}
.case-study-section-inner {
    width: 100%;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
}
.case-study-header-wrap {
    position: relative;
    padding: clamp(72px, 15vw, 200px) clamp(12px, 2.5vw, 28px);
    box-sizing: border-box;
    width: 100%;
    overflow: visible;
}
.case-study-header-title {
    position: absolute;
    top: clamp(-56px, -2vw, 0px);
    left: 0;
    right: 0;
    z-index: 2;
    margin: 0;
    padding: 0 clamp(8px, 2vw, 20px);
    text-align: center;
    font-weight: 800;
    color: #369000;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15em;
    pointer-events: none;
}
.case-study-header-title-image {
    position: absolute;
    top: clamp(-12px, 0vw, 0px);
    left: 0;
    right: 0;
    transform: none;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}
.lawn-mowing-case-study-header-title-image {
    position: absolute;
    top: clamp(-56px, -1vw, 0px);
    left: 0;
    right: 0;
    transform: none;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}
.case-study-header-title-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.case-study-header-title-img-desktop {
    display: block;
}
.case-study-header-title-img-mobile {
    display: none;
}
@media (max-width: 760px) {
    .case-study-header-title-img-desktop {
        display: none;
    }
    .case-study-header-title-img-mobile {
        display: block;
    }
}
@media (max-width: 760px) {
    .case-study-header-title-image {
        width: 100%;
        left: 0;
        transform: none;
        padding: 0 8px;
    }
}
.case-study-header-title-line {
    display: block;
    font-size: clamp(0px, 3.6vw, 72px);
    letter-spacing: 0.04em;
    -webkit-text-stroke: 7px #ffe400;
    paint-order: stroke fill;
}
.case-study-header-title-mobile {
    display: none;
}
/* Yellow oblong — solid at top, fades to transparent toward the bottom */
.case-study-header-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        #ffe400 0%,
        #ffe400 28%,
        rgba(255, 228, 0, 0.65) 58%,
        rgba(255, 228, 0, 0.15) 85%,
        transparent 100%
    );
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}
.case-study-header-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}
.case-study-header-cell {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    min-height: 0;
}
.case-study-header-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
@media (max-width: 760px) {
    /* Scales from 54px at 760px viewport down toward 0 on very narrow screens */
    .case-study-header-title-line {
        font-size: clamp(0px, calc(84vw * 54 / 760), 54px);
    }
    .case-study-header-title-desktop {
        display: none;
    }
    .case-study-header-title-mobile {
        display: block;
    }
    /* Crop wide oblong to viewport width without overflow:hidden on wrap (which clipped the title) */
    .case-study-header-wrap::before {
        inset: unset;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 200%;
        transform: translateX(-50%);
        clip-path: inset(0 25% 0 25%);
    }
    .case-study-header-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: clamp(0px, 18vw, 160px);
    }
}

/* Worklist (case study — before/after grid) */
.worklist {
    width: 100%;
    box-sizing: border-box;
}
.worklist-inner {
    margin: 0 auto;
    width: 100%;
    padding: 0 clamp(12px, 4vw, 32px);
    box-sizing: border-box;
}
.worklist-heading {
    margin: 0 0 clamp(24px, 4vw, 40px);
    text-align: center;
    font-weight: 800;
    color: #ff8600;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2em;
}
.worklist-heading-line {
    display: block;
    letter-spacing: 0.03em;
}
.worklist-heading-line-a {
    font-size: clamp(0px, 2.7vw, 48px);
}
.worklist-heading-line-b {
    font-size: clamp(0px, 3.3vw, 60px);
}
.worklist-heading-mobile {
    display: none;
}
.worklist-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1.5vw, 16px);
    width: 100%;
}
.worklist-grid-cell {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    min-height: 0;
    border-radius: 4px;
}
.worklist-grid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Parking row: 3-column grid — main spans 2 cols, aside 1 col (2:1) */
.worklist-parking-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1.5vw, 16px);
    width: 100%;
    margin-top: clamp(16px, 3vw, 32px);
    align-items: center;
}
.worklist-parking-col--main {
    grid-column: span 2;
    min-width: 0;
}
.worklist-parking-main-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 4px;
}
.worklist-parking-col--aside {
    grid-column: span 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 24px);
}
.worklist-parking-sticker-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: 0;
    margin-top: clamp(-42px, -3vw, -14px);
}
.worklist-parking-more {
    display: inline-flex;
    align-items: center;
    gap: clamp(0px, 4vw, 100px);
    width: auto;
    max-width: 100%;
    padding: clamp(0px, 1vw, 14px) clamp(0px, 1.5vw, 23px) clamp(0px, 1vw, 14px) clamp(0px, 5vw, 130px);
    font-size: clamp(0px, 2vw, 30px);
    font-weight: 700;
    color: #ffffff;
    background-color: #f8b551;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.worklist-parking-more::after {
    content: '\f04b';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: clamp(0px, 0.8vw, 14px);
    display: inline-block;
    border: 6px solid #ffffff;
    border-radius: 50%;
    padding: 4px;
}
.worklist-parking-more:hover {
    background-color: #f5a430;
    transform: scale(1.05);
}
.worklist-parking-more-img {
    display: none;
}
.worklist-parking-more-text {
    margin-top: 20px;
    font-size: clamp(0px, 2vw, 30px);
    font-weight: 900;
    color: #024800;
    text-align: center;
}
@media (max-width: 760px) {
    .worklist-heading-desktop {
        display: none;
    }
    .worklist-heading-mobile {
        display: block;
    }
    .worklist-heading-line-a {
        font-size: clamp(0px, 6.4vw, 48px);
    }
    .worklist-heading-line-b {
        font-size: clamp(0px, 8vw, 60px);
    }
    .worklist-grid {
        grid-template-columns: 1fr;
    }
    .worklist-parking-row {
        grid-template-columns: 1fr;
    }
    .worklist-parking-col--main,
    .worklist-parking-col--aside {
        grid-column: span 1;
    }
    .worklist-parking-sticker-img {
        width: 100%;
        max-width:100%;
        height: auto;
        display: block;
        margin-top: clamp(-28px, -8vw, -10px);
        margin-left: 0;
    }
    .worklist-parking-more-text {
        font-size: clamp(0px, 5vw, 30px);
    }
    .worklist-parking-more { 
        gap: clamp(0px, 9vw, 100px);
        padding: clamp(0px, 1vw, 14px) clamp(0px, 1.5vw, 23px) clamp(0px, 1vw, 14px) clamp(0px, 15vw, 130px);
        font-size: clamp(0px, 5vw, 30px);
    }
    .worklist-parking-more::after {
        font-size: clamp(0px, 1.5vw, 14px);
        border: clamp(0px, 1vw, 6px) solid #ffffff;
    }
}

/* Form Section */
.form-section {
    position: relative;
    padding: 3rem 1rem 4rem;
    background: url('assets/form/form-background.jpg') repeat;
}
.form-section-inner {
    max-width: 1105px;
    margin: 0 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.form-section-title {
    text-align: center;
    font-size: clamp(20px, 4.8vw, 48px);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 1.5rem;
    line-height: 1.2;
    max-width: 100%;
    box-sizing: border-box;
}
.form-panel {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 2rem 2.5rem;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}
.inquiry-form {
    max-width: 100%;
    min-width: 0;
}
.inquiry-form-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border: 1px solid #ccc;
}
.inquiry-form-table th,
.inquiry-form-table td {
    border: 1px solid #ccc;
    padding: 0.75rem 1rem;
    text-align: left;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
}
.inquiry-form-table .form-row-address th {
    padding-top: 10px;
}
.inquiry-form-table .form-row-address th,
.inquiry-form-table .form-row-address td,
.inquiry-form-table .form-row-checkboxes th,
.inquiry-form-table .form-row-checkboxes td,
.inquiry-form-table .form-row-message th,
.inquiry-form-table .form-row-message td {
    vertical-align: top;
}
.inquiry-form-table th {
    font-weight: 700;
    color: #333;
    width: 22%;
    border-right: none;
}
.inquiry-form-table td {
    background: #fff;
    border-left: none;
}
.inquiry-form-table .form-required-cell {
    width: 3.25rem;
    white-space: nowrap;
    border-left: none;
    border-right: none; 
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

.inquiry-form-table tr > td:last-child {
    width: auto;
}
.form-row-address > td:last-child {
    padding-top: 0;
    padding-bottom: 0;
}
.inquiry-form-subtable {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border: none;
}
.inquiry-form-subtable th,
.inquiry-form-subtable td {
    border: none;
    padding: 0.5rem 0;
    background: transparent;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
}
.inquiry-form-subtable tr:last-child th,
.inquiry-form-subtable tr:last-child td {
    border-bottom: none;
}
.inquiry-form-subtable th {
    font-size: 0.85rem;
    font-weight: 700;
    padding-right: 1rem;
    width: 30%;
}
.form-row-privacy {
    margin: 1rem 0 0.5rem;
    text-align: center;
}
.form-row-submit {
    margin: 0 0 0;
    padding: 1rem;
    text-align: center;
}
.form-required {
    display: inline-block;
    background: #ff0000;
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
}
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    background-color: #f6f6f6;
    box-sizing: border-box;
}
.form-input-postcode { max-width: 140px; }
.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
    max-width: 140px;
}
.form-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    max-width: 100%;
    min-width: 0;
}
.form-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #333;
    cursor: pointer;
    margin: 0;
    font-weight: 700;
}
.form-checkbox { width: auto; margin: 0; }
.form-file-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}
.form-file {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    max-width: 100%;
    min-width: 0;
}
.form-file-text {
    font-size: 0.85rem;
    color: #666;
}
.form-textarea {
    min-height: 288px;
    resize: vertical;
}
.form-privacy-link {
    font-size: 0.85rem;
    color: #666;
    text-decoration: underline;
}
.form-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.75rem 2rem;
    background: #ef002d;
    color: #fff;
    border: none;
    border-radius: 18px;
    font-size: 1rem;
    cursor: pointer;
}
.form-submit-arrow { font-weight: bold; }

@media (max-width: 1024px) {
    .form-panel {
        padding: 1.5rem clamp(0.75rem, 3vw, 1.5rem);
    }
}

/* Form responsive layout (max-width 760px):
   Convert table rows into a single vertical layout:
   label (th) -> required badge (td.form-required-cell) -> field (td). */
@media (max-width: 760px) {
    .form-panel {
        padding: 1.25rem 1rem;
    }

    .inquiry-form-table {
        border: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .inquiry-form-table tr {
        display: flex;
        flex-direction: column;
        border: 0;
        border-radius: 8px;
        margin: 10px 0;
        overflow: hidden;
    }

    .inquiry-form-table th,
    .inquiry-form-table td {
        display: block;
        width: 100%;
        border: 0;
        background: transparent;
        padding: 0;
    }

    .inquiry-form-table th {
        padding: 12px 0px 0;
        font-size: 0.95rem;
        width: auto;
    }

    .inquiry-form-table .form-required-cell {
        width: auto;
        white-space: normal;
        text-align: left;
        padding: 6px 0px 0;
    }

    .inquiry-form-table td {
        padding: 6px 0px 12px;
    }

    /* Address subtable: stack each label/field vertically */
    .inquiry-form-subtable tr {
        display: flex;
        flex-direction: column;
        padding: 0;
    }
    .inquiry-form-subtable th,
    .inquiry-form-subtable td {
        width: 100%;
        display: block;
        padding: 6px 0;
    }
    .inquiry-form-subtable th {
        width: auto;
        padding: 8px 0 2px;
        font-size: 0.85rem;
    }

    /* Checkbox groups take full width naturally on mobile */
    .form-checkbox-group {
        gap: 10px 14px;
    }
}

/* Footer */
.site-footer {
    width: 100%;
}
.site-footer-brand {
    background-color: #3a9106;
    width: 100%;
}
.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
}
.site-footer-name-img {
    width: auto;
    max-width: min(90vw, 420px);
    height: auto;
    display: block;
    object-fit: contain;
}
/* 事業者情報 (operator info from Site Information) */
.site-footer-operator {
    background-color: #313131;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.96);
    width: 100%;
}
.site-footer-operator-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(1.25rem, 4vw, 2rem) clamp(1rem, 4vw, 1.5rem) clamp(1.75rem, 5vw, 2.5rem);
}
.site-footer-operator-title {
    margin: 0 0 0;
    font-size: clamp(1rem, 3.2vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    color: #fff;
    padding-bottom: 1.75rem;
    border-bottom: 2px solid #b5b5b5;
}
.site-footer-operator-list {
    margin-bottom: 46px;
    padding: 0;
}
.site-footer-operator-row {
    display: grid;
    grid-template-columns: minmax(7.5em, 9.5em) 1fr;
    gap: 0.5rem 1.25rem;
    padding: 0.65rem 0;
    border-bottom: 2px solid #b5b5b5;
    align-items: start;
    padding-left: 32px;
}
.site-footer-operator-row:last-child {
    border-bottom: 2px solid #b5b5b5;
}
.site-footer-operator-dt {
    margin: 0;
    font-size: clamp(0.8125rem, 2.4vw, 0.9375rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
}
.site-footer-operator-dd {
    margin: 0;
    font-size: clamp(0.8125rem, 2.4vw, 0.9375rem);
    font-weight: 500;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.98);
    word-break: break-word;
}
.site-footer-operator-dd.is-empty .site-footer-operator-placeholder {
    opacity: 0.55;
    font-style: normal;
}
@media (max-width: 480px) {
    .site-footer-operator-row {
        grid-template-columns: 1fr;
        gap: 0.2rem 0;
        padding: 0.85rem 0;
    }
    .site-footer-operator-dt {
        margin-bottom: 0.15rem;
    }
}

/* Fixed bottom bar (copyright + follow), mirrors persistent header behavior at viewport bottom */
.site-footer-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 990;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0;
    background-color: #176247;
    transform: translateZ(0);
    will-change: transform;
}
.site-footer-fixed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: env(safe-area-inset-bottom, 0px);
    background-color: #176247;
    pointer-events: none;
    z-index: 0;
}
.site-footer-fixed > * {
    position: relative;
    z-index: 1;
}

/* Copyright */
.site-footer-copyright {
    background-color: #176247;
    color: #ffffff;
    width: 100%;
    padding-bottom: clamp(75px, 10vw, 190px);
}
.site-footer-copyright-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Grass Link Section */
.lawn-mowing-grass-link-img-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lawn-mowing-grass-link-bg {
    width: 100%;
    height: auto;
    display: block;
}

.lawn-mowing-grass-link-button {
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: clamp(0px, 4vw, 100px);
    width: auto;
    max-width: 100%;
    padding: clamp(0px, 1vw, 14px) clamp(0px, 1.5vw, 23px) clamp(0px, 1vw, 14px) clamp(0px, 5vw, 130px);
    font-size: clamp(0px, 2vw, 30px);
    font-weight: 700;
    color: #ffffff;
    background-color: #f8b551;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.lawn-mowing-grass-link-button::after {
    content: '\f04b';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: clamp(0px, 0.8vw, 14px);
    display: inline-block;
    border: 6px solid #ffffff;
    border-radius: 50%;
    padding: 4px;
}

.lawn-mowing-grass-link-button:hover {
    background-color: #f5a430;
    transform: translate(-50%, -50%) scale(1.05);
}

@media (max-width: 760px) {
    .lawn-mowing-grass-link-section {
        display: none;
    }
    
    .lawn-mowing-grass-link-bg {
        width: 160%;
        height: auto;
        object-fit: cover;
        object-position: center;
    }
    
    .lawn-mowing-grass-link-button {
        top: 85%;
        padding: clamp(0px, 1vw, 12px) clamp(0px, 2vw, 20px) clamp(0px, 1vw, 12px) clamp(0px, 7vw, 100px);
        font-size: clamp(0px, 3vw, 20px);
        gap: clamp(0px, 3vw, 60px);
    }
    
    .lawn-mowing-grass-link-button::after {
        font-size: clamp(0px, 1vw, 12px);
        border: 2px solid #ffffff;
        padding: 3px;
    }
}

.site-footer-copyright-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px clamp(1rem, 4vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.site-footer-copyright-text {
    margin: 0;
    font-size: clamp(0.8125rem, 2.8vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.02em;
}
@media (max-width: 760px) {
    .site-footer-copyright {
        padding-bottom: clamp(75px, 24vw, 180px);
    }
}

/* Footer follow (fixed) — image-based composition */
.site-footer-follow {
    width: 100%;
    padding: 0;
    background: transparent;
}
.site-footer-follow-inner {
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}
.site-footer-follow-bg {
    width: 100%;
    height: auto;
    display: block;
}
.site-footer-follow-bg-mobile {
    display: none;
}

.site-footer-follow-handle,
.site-footer-follow-observe {
    position: absolute;
    display: block;
    height: auto;
    z-index: 2;
    pointer-events: none;
}
.site-footer-follow-handle-desktop {
    /* Based on desktop source: 1920x200, handle: 565x33 */
    width: 29.43%;
    left: 38.58%;
    top: 9%;
}
.site-footer-follow-observe-desktop {
    /* Based on desktop source: observe 355x131 */
    width: 18.49%;
    right: 63.2%;
    top: 12%;
}
.site-footer-follow-handle-mobile,
.site-footer-follow-observe-mobile {
    display: none;
}

.site-footer-follow-contact {
    position: absolute;
    z-index: 2;
    right: 34.8%;
    top: 52%;
    transform: translateY(-50%);
    text-align: center;
    white-space: nowrap;
}
.site-footer-follow-contact-mobile {
    display: none;
}
.site-footer-follow-white-tel {
    margin: 0;
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
    font-weight: 900;
    font-size: clamp(22px, 3vw, 56px);
    line-height: 1;
    letter-spacing: 0.01em;
    background: linear-gradient(0deg, #e31b00 0%, #fe702b 60%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: clamp(0.5px, 0.16vw, 2px) #ffffff;
    paint-order: stroke fill;
    filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 45%));
}
.site-footer-follow-white-tel a {
    color: inherit;
    text-decoration: none;
}
.site-footer-follow-white-hours {
    margin: clamp(2px, 0.35vw, 6px) 0 0;
    font-size: clamp(8px, 0.75vw, 14px);
    font-weight: 700;
    line-height: 1.25;
    color: #111;
}
.site-footer-follow-white-hours-holiday {
    margin-left: 0.5em;
}

.site-footer-follow-mail-link {
    position: absolute;
    z-index: 3;
    display: block;
    text-decoration: none;
}
.site-footer-follow-mail-link img {
    width: 100%;
    height: auto;
    display: block;
}
.site-footer-follow-mail-link-desktop {
    width: 13.23%;
    right: 21%;
    top: 54%;
    transform: translateY(-50%);
}
.site-footer-follow-mail-link-mobile {
    display: none;
}

@media (max-width: 760px) {
    .site-footer-follow-bg-desktop,
    .site-footer-follow-handle-desktop,
    .site-footer-follow-observe-desktop,
    .site-footer-follow-mail-link-desktop,
    .site-footer-follow-contact {
        display: none;
    }

    .site-footer-follow-bg-mobile,
    .site-footer-follow-handle-mobile,
    .site-footer-follow-observe-mobile,
    .site-footer-follow-mail-link-mobile {
        display: block;
    }

    .site-footer-follow-handle-mobile {
        /* Based on mobile source: 760x186, handle: 471x28 */
        width: 61.97%;
        left: 34%;
        top: 7%;
    }
    .site-footer-follow-observe-mobile {
        width: 36.18%;
        right: 63%;
        top: 21%;
    }
    .site-footer-follow-mail-link-mobile {
        inset: 0;
    }
    .site-footer-follow-mail-link-mobile img {
        width: 100%;
    }

    .site-footer-follow-contact-mobile {
        position: absolute;
        z-index: 3;
        right: 26%;
        top: 51%;
        transform: translateY(-50%);
        text-align: center;
        white-space: nowrap;
        display: block;
    }
    .mobile-site-footer-follow-white-tel {
        margin: 0;
        font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
        font-weight: 900;
        font-size: clamp(0px, 4vw, 32px);
        line-height: clamp(1, 1.05, 1.15);
        letter-spacing: clamp(0.005em, 0.08vw, 0.02em);
        background: linear-gradient(0deg, #e31b00 0%, #fe702b 60%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: clamp(0.05px, 0.25vw, 0.3px) #ffffff;
        paint-order: stroke fill;
        filter: drop-shadow(0 clamp(1px, 0.35vw, 2px) clamp(0.5px, 0.25vw, 1px) rgba(0, 0, 0, 45%));
    }
    .mobile-site-footer-follow-white-tel a {
        color: inherit;
        text-decoration: none;
    }
    .mobile-site-footer-follow-white-hours {
        margin: 2px 0 0;
        font-size: clamp(6px, 1.8vw, 10px);
        font-weight: 700;
        line-height: 1.2;
        color: #111;
    }
}

/* To-top button (fixed bottom-right; above fixed footer bar) */
.to-top {
    position: fixed;
    bottom: clamp(72px, 18vw, 140px);
    right: clamp(12px, 4vw, 24px);
    z-index: 1001;
    display: block;
    width: clamp(44px, 12vw, 110px);
    max-width: min(110px, 28vw);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    line-height: 0;
}
.to-top.to-top-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.to-top img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
    transition: transform 0.2s ease-out;
}

.to-top:hover img {
    transform: scale(1.05);
}

@media (max-width: 760px) {
    .to-top {
        bottom: clamp(95px, 30vw, 225px);
    }
}