/* =====================================================
3S GROUP OFFICIAL SITE - style.css
最終更新：2026-02

※対象：共通 + index / products / company / privacy

=====================================================

01. Base / Layout 
02. Header / Navigation
03. hero (index.html用)
04. Products (index.html用)
05. Services (index.html用)
06. News / Pickup  (index.html用)
07. Footer / SNS (共通)
08. Animation / Scroll Effects  (index.html用)
09. company.html 用
10. products.html 用
11. services.html 用
12. privacy.html 用

===================================================== */

/* =====================================================
01. Base / Layout
===================================================== */

/* ベース：全ページ共通の初期設定 */
:root {
    --brand: #0a4d79;
    /* メイン（青） */
    --brand-700: #083b5d;
    --accent: #1fa97a;
    /* 差し色（緑） */
    --accent-700: #177f5c;
    --ink: #0e1a20;
    /* 文字色 */
    --muted: #6b7a82;
    /* 補助文字 */
    --bg: #f4f7f8;
    /* 下地 */
    --surface: #ffffff;
    /* カード */
    --border: #e4ecef;
    /* 枠線 */
    --radius: 16px;
    /* 角丸 */
    --shadow: 0 10px 28px rgba(10, 27, 30, .08);
    --container: 1180px;
    /* 最大幅 */
    --news-h: 360px;
}

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


html,
body {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI",
        "Yu Gothic", Meiryo, sans-serif;
    color: var(--ink);
    background: #fff;
    overflow-x: clip;
}

html.no-scroll {
    overflow: hidden;
    height: 100%;
}

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

a {
    color: var(--ink);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

li {
    list-style: none;
}

.container {
    width: min(100%, var(--container));
    margin-inline: auto;
    padding-inline: 20px;
}

.hd-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 20px;
}

/* =====index.html News / PickUp の見出し下線 ===== */
.section .hd-row h2 {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.section .hd-row h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 100%;
    height: 3px;
    background-color: var(--accent);
    border-radius: 2px;
}

h2 {
    font-size: clamp(1.25rem, 1.05rem + 1.5vw, 1.8rem);
    margin: 0;
}

.sub {
    color: var(--muted);
    font-weight: 500;
    letter-spacing: .04em;
}

.btn {
    display: inline-block;
    padding: .75rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    box-shadow: var(--shadow);
    font-weight: 600;
}

.btn.ghost {
    background: transparent;
    color: var(--accent);
}

/* =====================================================
02. Header / Navigation
===================================================== */
/* ====== Header / Global Nav ====== */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--border);
}

header .container.nav {
    width: min(100%, 1320px);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: clamp(78px, 9vw, 106px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 18px;
    flex: 0 0 auto;
    min-width: 260px;
}

.brand img {
    width: auto;
    height: clamp(64px, 7.6vw, 84px);
    display: block;

    flex: 0 0 auto;
}

.brand .title {
    font-weight: 800;
    letter-spacing: .02em;
}

.links {
    display: flex;
    align-items: center;
    gap: 14px;
}

.links a {
    color: var(--ink);
    padding: 6px 8px;
    border-radius: 10px;
    white-space: nowrap;
    line-height: 1;
}

.links a:hover {
    background: #f4f7f8;
}

.links a,
.links .nav-link--services {
    color: var(--ink);
    padding: 6px 8px;
    border-radius: 10px;
    white-space: nowrap;
    line-height: 1;
    font-weight: 500;
}

.links a:hover,
.links .nav-link--services:hover {
    background: #f4f7f8;
}

.nav-link--services {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
}


.cta-inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-item--services {
    position: relative;
}

/* サービスのボタン */
.nav-link--services {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-caret {
    font-size: 0.7em;
}

/* サブメニュー（初期は非表示） */
.nav-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 0.5rem 0;
    display: none;
    z-index: 50;
}

.nav-submenu a {
    display: block;
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

/* PCだけ下線を使う */
.links a.is-active {
    color: var(--accent-700);
    font-weight: 700;
    position: relative;
}

/* 下線（PCのみ） */
.links a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background: var(--accent-700);
    border-radius: 999px;
    pointer-events: none;
}

/* ★スマホでは下線をオフ */
@media (max-width: 1180px) {
    .links a.is-active::after {
        display: none;
    }
}

.drawer a.is-active {
    color: var(--accent-700);
    font-weight: 700;
}

@media (max-width: 768px) {
    .nav {
        min-height: 76px;
    }

    .brand img {
        height: 56px;
    }

    header .container {
        padding-inline: 16px;
    }
}

@media (min-width: 769px) {
    .nav-item--services:hover .nav-submenu {
        display: block;
    }
}

/* Hamburger */
.hamburger {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.hamburger span {
    position: relative;
    width: 22px;
    height: 2px;
    background: var(--ink);
    display: block;
}

.hamburger span::before,
.hamburger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: var(--ink);
    transition: transform .24s ease, top .24s ease;
}

.hamburger span::before {
    top: -6px;
}

.hamburger span::after {
    top: 6px;
}

.hamburger.is-open span {
    background: transparent;
}

.hamburger.is-open span::before {
    top: 0;
    transform: rotate(45deg);
}

.hamburger.is-open span::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Drawer 本体 */
.drawer {
    position: fixed;
    top: 66px;
    right: 0;
    width: 88%;
    max-width: 360px;
    height: calc(100dvh - 66px);
    background: #d9efe2;
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow);
    transform: translate3d(100%, 0, 0);
    transition: transform .28s ease;
    display: flex;
    flex-direction: column;
    padding: 16px;
    will-change: transform;
    overflow-y: auto;
}

.drawer.open {
    transform: translate3d(0, 0, 0);
}

.drawer a {
    padding: 14px 12px;
    border-radius: 12px;
}

.drawer a,
.drawer-label {
    color: #0B2E13;
    font-weight: 550;
}

.drawer a:hover {
    background: #f4f7f8;
}

/* navメニュー　スマホナビ：サービス */
.drawer-label {
    display: block;
    margin-top: 0.75rem;
    padding: 0.4rem 12px;
    font-weight: 600;
    font-size: 0.95rem;
}

.drawer-sub {
    padding-left: 1.5rem;
    font-size: 0.9rem;
}

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .24);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}

.overlay.show {
    opacity: 1;
    pointer-events: auto;
}

/* ===== レスポンシブ切り替え ===== */

/* 1181px以上 → PCナビ */
@media (min-width: 1181px) {
    .links {
        display: flex;
    }

    #hamburger,
    #drawer,
    #overlay {
        display: none !important;
    }
}

/* 1180px以下 → ハンバーガー */
@media (max-width: 1180px) {
    .links {
        display: none !important;
    }

    #hamburger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    #drawer {
        flex-direction: column;
        gap: 1rem;
    }
}

/* =====================================================
03. hero index.html用
===================================================== */
/* ====== Hero (Wide Slider) ====== */
.hero {
    margin-top: 0;
    padding: 0;
    background: transparent;
}

#home {
    scroll-margin-top: 100px;
}

.wideslider {
    position: relative;
    width: 100%;
    padding-inline: clamp(12px, 7vw, 148px);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: transparent;
}

.ws-viewport {
    position: relative;
    width: 100%;
}

.ws-track {
    display: flex;
    transition: transform .6s ease;
    will-change: transform;
}

.ws-slide {
    min-width: 100%;
    position: relative;
}

.ws-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0));
}

.ws-slide::before,
.ws-slide::after {
    pointer-events: none;
}

.ws-slide img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 680px) {
    .wideslider {
        padding-inline: clamp(8px, 4vw, 16px);
    }

}

.ws-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    gap: 8px;
    justify-content: center;
}

.ws-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff66;
    border: 1px solid #fff;
}

.ws-dot.active {
    background: #fff;
}

.ws-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: rgba(0, 0, 0, .25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ws-arrow:hover {
    background: rgba(0, 0, 0, .35);
}

.ws-arrow.prev {
    left: 12px;
}

.ws-arrow.next {
    right: 12px;
}


/* =====================================================
04. Products (index.html)
===================================================== */
/* ====== Products　取扱商品 ====== */
.products {
    background: #fff;
}

/* ---------- タイトル帯（ヒーロー） ---------- */
.title-hero {
    position: relative;
    width: 100%;
    height: clamp(180px, 40vw, 420px);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background-size: cover;
    background-position: var(--bgx, 40%) var(--bgy, 32%);
    margin-bottom: 3%;
}

/* 見出しテキスト */
.title-hero__text {
    position: absolute;
    left: var(--tx, 73%);
    top: var(--ty, 50%);
    transform: translate(-50%, -50%);
    margin: 0;

    font-weight: 800;
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
    line-height: 1.2;
    color: #0B2E13;
    text-shadow: none;
    text-align: right;

    white-space: nowrap;
    letter-spacing: .04em;
    max-width: none;
    z-index: 1;
}

/* 見出しの下線 */
.title-hero__text::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    width: 100%;
    height: 3px;
    background-color: var(--accent);
    border-radius: 2px;
}

@media (max-width: 560px) {
    .title-hero__text {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
        top: 55%;
        white-space: normal;
        text-align: center;
    }
}

/* ---------- 見出し行（「取扱商品」など） ---------- */
.products .hd-row {
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

/* ---------- 商品カードグリッド ---------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 420px) {
    .products .product-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 420px;
        margin-inline: auto;
    }

    .p-card {
        max-width: 360px;
        margin-inline: auto;
        padding: 16px 14px;
    }

    .p-card img {
        max-height: 200px;
        width: auto;
        margin: 0 auto 12px;
        object-fit: contain;
    }
}

/* ---------- 商品カード本体 ---------- */
.p-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: center;
}

.p-card img {
    display: block;
    margin: 0 auto;
}

.p-card .body {
    padding: 14px;
}

.p-card h3 {
    font-size: .95rem;
    margin: .5rem 0 .25rem;
    font-weight: 700;
}

.p-card p {
    font-size: .85rem;
    color: var(--muted);
    margin: 0 0 .75rem;
    line-height: 1.6;
}

.p-card .btn {
    display: block;
    width: 80%;
    padding: .55rem .85rem;
    font-size: .85rem;
    margin: 12px auto 0;
    text-align: center;
}


/* =====================================================
05. Services (index.html)
===================================================== */
/* ====== Services ====== */
.services {
    background: #e9f5ee;
}

/* カードグリッド */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

@media (max-width: 960px) {
    .svc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .svc-grid {
        grid-template-columns: 1fr;
        max-width: 640px;
        margin-inline: auto;
        gap: 18px;
    }
}

/* カード本体 */
.svc-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.svc-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

@media (max-width: 640px) {
    .svc-card img {
        max-height: 260px;
        object-fit: cover;
    }
}

.svc-card .body {
    padding: 16px;
}

.svc-card h3 {
    margin: .25rem 0 .5rem;
    font-size: 1.05rem;
}

.svc-card p {
    color: var(--muted);
    margin: 0 0 .75rem;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .svc-card {
        text-align: center;
    }

    .svc-card p {
        text-align: center;
    }

    .svc-card .btn {
        display: inline-block;
        margin-top: 8px;
    }
}

/* =====================================================
06. News / Pickup  (index.html) 
===================================================== */
/* ====== News ====== */
.news-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 28px;
}

.news-grid figure img {
    display: block;
    width: 100%;
    height: var(--news-h);
    object-fit: cover;
    border-radius: var(--radius);
}

.news-list {
    border-top: 2px solid var(--accent);
    height: var(--news-h);
    overflow-y: auto;
    padding-right: 8px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) #f1f5f7;
}

/* スクロールバー */
.news-list::-webkit-scrollbar {
    width: 10px;
}

.news-list::-webkit-scrollbar-track {
    background: #f1f5f7;
    border-radius: 8px;
}

.news-list::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 8px;
    border: 2px solid #f1f5f7;
}

.news-item {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.news-item time {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.news-item a {
    color: var(--ink);
}


/* ====== Pick Up ====== */
.pickup {
    background: #e9f5ee;
}

.pickup-card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    padding: 20px;
}

.pickup-card>img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: var(--radius);
}

/* タイトル・本文（カード内） */
.pickup-card h3 {
    margin: 0 0 22px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
    color: #0b2e13;
}

.pickup-card p {
    font-size: 1rem;
    line-height: 2;
    color: var(--ink);
    margin: 0 0 22px;
}

/* Pick Up 部分で使う小さめアイコン */
.sns-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 6px;
}


/* クリエイターInstagramのリンク */
.creator-instagram {
    margin-bottom: 30px;
}

.creator-instagram a {
    display: inline-flex;
    align-items: center;
    color: var(--ink);
    font-size: 14px;
    text-decoration: none;
}

.creator-instagram a:hover {
    text-decoration: underline;
}


/* ---------- レスポンシブ ---------- */

@media (max-width: 960px) {
    .pickup-card {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 2.5fr);
        gap: 16px;
    }
}

@media (max-width: 640px) {

    .pickup-card {
        grid-template-columns: 1fr;
        padding: 16px;
        text-align: center;
    }

    .pickup-card>img {
        max-height: 260px;
        object-fit: cover;
    }

    .pickup-card h3 {
        font-size: 1.1rem;
        margin-bottom: 16px;
    }

    .pickup-card p {
        font-size: 0.95rem;
        margin-bottom: 16px;
    }

    .creator-instagram {
        text-align: center;
    }

    .pickup-card .btn {
        display: inline-block;
        margin-inline: auto;
    }
}


@media (min-width: 768px) {
    .pickup-card {
        padding-bottom: 12px;
    }

    .pickup-card .btn {
        margin-bottom: 0;
    }
}

/* ====== New Magical 特集 ====== */
.pickup-feature {
    background: #e9f5ee;
}

.section.pickup-feature {
    padding-top: 0px;
    padding-bottom: 60px;
}

.pickup-feature--split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 24px;
    align-items: center;

    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
}

.pickup-feature__media {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(180deg, #0b2e13 0%, #071c0c 100%);
}

.pickup-feature__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .12);
    pointer-events: none;
}

.pickup-feature__img {
    width: 100%;
    height: 100%;
    display: block;
    max-width: none;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}


/* テキスト */
.pickup-feature__body h3 {
    margin: 0 0 24px;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.4;
    color: #0b2e13;
}

.pickup-feature__lead {
    margin: 0 0 20px;
    line-height: 1.9;
}

.pickup-feature__btn {
    width: fit-content;
    max-width: 100%;
    margin-top: 28px;
}

/* ====== ふわっと表示（Scroll-in Reveal 共通） ====== */
.pickup-card,
.pickup-feature--split {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
}

.pickup-card.reveal-in,
.pickup-feature--split.reveal-in {
    opacity: 1;
    transform: translateY(0);
}


@media (max-width: 768px) {
    .pickup-feature--split {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 18px;
    }

    .pickup-feature__img {
        max-width: 320px;
    }

    .pickup-feature__btn {
        margin-inline: auto;
    }
}


/* =====================================================
07. Footer / SNS  (共通) 
===================================================== */
/* ====== SNS / Footer ====== */
.sns_text {
    text-align: center;
    margin-bottom: 3%;
}

.sns {
    display: flex;
    justify-content: center;
    gap: 28px
}

.sns a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow)
}

footer {
    background: #0c3a22;
    color: #e1efe7;
    padding: 16px 0;
    text-align: center;
    font-size: .85rem
}

footer a {
    color: #fff;
    text-decoration: underline;
}

footer a:hover {
    opacity: .85;
}

footer .is-active {
    color: #9dff9d;
    font-weight: 700;
}

/* ====== Responsive ====== */
@media (max-width: 1080px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media (max-width: 860px) {
    .hero-wrap {
        grid-template-columns: 1fr
    }

    .news-grid {
        grid-template-columns: 1fr
    }

    .svc-grid {
        grid-template-columns: 1fr 1fr
    }

    .product-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .pickup-card {
        grid-template-columns: 1fr
    }

    .links {
        display: none
    }

    .hamburger {
        display: flex
    }
}

@media (max-width: 560px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .svc-grid {
        grid-template-columns: 1fr
    }
}

/* =====================================================
08. Animation / Scroll Effects  (index.html)
===================================================== */

/* ==== Scroll-in Animations ==== */
.title-hero,
.p-card,
.svc-card,
.pickup-card {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}

.title-hero.reveal-in,
.p-card.reveal-in,
.svc-card.reveal-in,
.pickup-card.reveal-in {
    opacity: 1;
    transform: translateY(0);
}

.p-card:nth-child(odd),
.svc-card:nth-child(odd) {
    transition-delay: .06s;
}

.p-card:nth-child(3n),
.svc-card:nth-child(3n) {
    transition-delay: .12s;
}

/* =========================================================
09-01. company.html  COMPANY PAGE — TOKENS（色・余白・角丸・列幅・文字）
========================================================= */
.page-company {
    --card-bg: #fff;
    --card-border: var(--border);
    --card-shadow: var(--shadow);
    --card-radius: 12px;

    /* ラベル列（th・下段見出し共通） */
    --label-w: 10em;
    --label-fs: .96rem;
    --label-fw: 700;
    --label-color: #0B2E13;
    --label-bg: #E6F4EA;

    /* 余白・行間 */
    --cell-py: 1em;
    --cell-px: 1.2em;
    --line-h: 1.8;
    --sec-gap: clamp(18px, 3vw, 28px);
}



/* =========================================================
09-02. company.html HERO（companyだけに効く）
========================================================= */
.page-company .hero-sub {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: clamp(360px, 70vh, 760px);
    padding: clamp(28px, 6vw, 64px) 0;

    background-image: url("../img/company_mv.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 57%;

    color: #fff;
    text-align: center;
}

.page-company .hero-sub::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .18);
}

.page-company .page-title {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #fff;
    font-weight: 800;
    font-size: clamp(28px, 3.6vw, 40px);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.page-company .page-title .sub {
    display: block;
    margin-top: .3em;
    letter-spacing: .08em;
    color: #f0f0f0;
    font-size: .8em;
}

@media (max-width:768px) {
    .page-company .hero-sub {
        min-height: clamp(150px, 38vh, 520px);
        background-position: 50% 55%;
    }
}

@media (max-width:420px) {
    .page-company .hero-sub {
        background-position: 52% 55%;
    }
}

/* =========================================================
09-03. company.html リードブロック
========================================================= */
.container.slim {
    padding: 2rem;
    border-radius: var(--radius, 12px);
}

.page-company .lead-catch {
    position: relative;
    margin: clamp(12px, 2vw, 20px) 0 .8em;
    text-align: center;
    color: #0B2E13;
    font-weight: 800;
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 2.35;
}

.page-company .lead-catch {
    word-break: keep-all;
    overflow-wrap: normal;
}

.page-company .lead-catch::after {
    content: "";
    display: block;
    width: min(720px, 90%);
    height: 4px;
    margin: .4em auto 0;
    background: var(--accent);
    border-radius: 2px;
}

.page-company .lead-txt {
    text-align: center;
    line-height: 1.9;
    color: #0B2E13;
    font-size: clamp(1.04rem, 1rem + 0.4vw, 1.1rem);
}

/* 見出し（会社情報 など） */
.page-company .section-hd {
    margin: 0 0 .6em;
    padding-left: 10px;
    border-left: 4px solid var(--accent);
    font-weight: 800;
    color: #0B2E13;
}

@media (max-width:420px) {
    .page-company .lead-catch {
        font-size: 23px;
        line-height: 1.8;
    }
}

/* =========================================================
09-04. company.html  上段レイアウト（会社情報：表＋外観写真）
========================================================= */
.page-company .company-info {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: start;
    gap: var(--sec-gap);
}

@media (max-width:740px) {
    .page-company .company-info {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
09-05. company.html  会社情報テーブル（PC=横並び / SP=カード風縦並び）
========================================================= */
.page-company .company-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    padding: 0;
}

.page-company .company-card .table.info {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    line-height: var(--line-h);
    font-size: 1rem;
}

.page-company .company-card .table.info th,
.page-company .company-card .table.info td {
    border: 1px solid var(--card-border);
    padding: 10px 12px;
    text-align: left;
    font-size: 1rem;
}

.page-company .company-card .table.info th {
    width: var(--label-w);
    background: var(--label-bg);
    font-size: var(--label-fs);
    font-weight: var(--label-fw);
    color: var(--label-color);
    text-align: center;
    white-space: nowrap;
}

.page-company .company-card .table.info td {
    overflow-wrap: break-word;
    word-break: normal;
    line-break: strict;
    text-indent: .2em;
}

.page-company .company-card .table.info tr>*:first-child {
    border-left: 1px solid var(--card-border);
}

/* --- SP：カード風に縦並び --- */
@media (max-width:600px) {

    .page-company .company-card .table.info,
    .page-company .company-card .table.info tbody,
    .page-company .company-card .table.info tr,
    .page-company .company-card .table.info th,
    .page-company .company-card .table.info td {
        display: block;
        width: 100%;
    }

    .page-company .company-card .table.info tr {
        border: none;
        border-top: 1px solid var(--card-border);
        margin: 0;
        padding: 8px 0;
    }

    .page-company .company-card .table.info th {
        background: #f9fafb;
        border-bottom: none;
        text-align: left;
        padding: 8px 12px 4px;
        white-space: normal;
    }

    .page-company .company-card .table.info td {
        padding: 4px 12px 12px;
    }

    .page-company .company-card .table.info th,
    .page-company .company-card .table.info td {
        border: none;
    }
}

/* =========================================================
09-06. company.html    代表者（PC=2カラム / 狭幅で詰める / 超狭幅は縦）
========================================================= */
.page-company .rep-list {
    display: grid;
    grid-template-columns: minmax(9.5em, var(--label-w)) 1fr;
    column-gap: 1.2em;
    row-gap: .35em;
    align-items: center;
    margin: 0;
}

.page-company .rep-list dt,
.page-company .rep-list dd {
    font-size: 1rem;
    font-weight: 400;
}

.page-company .rep-list dt {
    margin: 0;
    font-weight: 700;
    white-space: nowrap;
}

.page-company .rep-list dd {
    margin: 0;
    white-space: nowrap;
}

.page-company .jp-name {
    white-space: nowrap;
    display: inline-block;
}

.page-company .name-sep {
    display: inline-block;
    width: .4em;
}

@media (max-width:560px) {
    .page-company .rep-list {
        grid-template-columns: max-content 1fr;
        column-gap: .6em;
        row-gap: .28em;
    }

    .page-company .name-sep {
        width: .32em;
    }
}

@media (max-width:360px) {
    .page-company .rep-list {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .page-company .rep-list dd {
        white-space: normal;
    }
}

/* =========================================================
09-07. company.html    外観写真（カード）
========================================================= */
.page-company .photo {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    margin: 0;
    padding: 0;
}


.page-company .photo img {
    width: 100%;
    height: min(350px, 62vh);
    object-fit: cover;
    object-position: center 30%;
    display: block;
}


/* =========================================================
09-08. company.html  下段：事業内容〜主要取引先（2カラム“行カード”）
========================================================= */
.page-company .stack {
    gap: var(--sec-gap);
}

.page-company .stack .card {
    display: grid;
    grid-template-columns: var(--label-w) 1fr;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    border-radius: 0;
}

.page-company .stack .card .hd {
    grid-column: 1;
    margin: 0;
    padding: var(--cell-py) 1.0em;
    background: var(--label-bg);
    border-right: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--label-fs);
    font-weight: var(--label-fw);
    color: var(--label-color);
}

.page-company .stack .card> :not(.hd) {
    grid-column: 2;
    margin: 0;
    padding: var(--cell-py) var(--cell-px);
    line-height: var(--line-h);
}

.page-company .stack .card ul {
    list-style: disc;
    padding-left: 1.2em;
    margin: .2em 0 0;
}

.page-company .stack .card li {
    margin: .15em 0;
}

.page-company .stack .card a {
    text-decoration: underline;
}

@media (max-width:640px) {
    .page-company .stack .card {
        grid-template-columns: 1fr;
    }

    .page-company .stack .card .hd {
        border-right: none;
        border-bottom: 1px solid var(--card-border);
        justify-content: flex-start;
        text-align: left;
    }

    .page-company .stack .card> :not(.hd) {
        grid-column: 1;
    }
}

.page-company .stack .card:first-child {
    border-top-left-radius: var(--card-radius);
    border-top-right-radius: var(--card-radius);
}

.page-company .stack .card:last-child {
    border-bottom-left-radius: var(--card-radius);
    border-bottom-right-radius: var(--card-radius);
}

.page-company .stack .card .hd {
    border-radius: 0;
}

.page-company .stack .card:first-child .hd {
    border-top-left-radius: var(--card-radius);
}

.page-company .stack .card:last-child .hd {
    border-bottom-left-radius: var(--card-radius);
}

@media (max-width:640px) {
    .page-company .stack .card:first-child .hd {
        border-top-left-radius: var(--card-radius);
        border-top-right-radius: var(--card-radius);
    }

    .page-company .stack .card:last-child .hd {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

/* =========================================================
09-09. company.html   アクセス（住所＋地図）— Company 共通トーンに準拠
========================================================= */

.access .grid-2 {
    background-color: #f9f9f9;
    padding: 2rem;
    border-radius: var(--radius, 12px);
    gap: 2rem;
}

.page-company .access .grid-2 {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: start;
    gap: var(--sec-gap);
}

@media (max-width:740px) {
    .page-company .access .grid-2 {
        grid-template-columns: 1fr;
    }
}

.page-company .access address {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    padding: 0;
    font-style: normal;
    line-height: var(--line-h);
}

.page-company .access address p {
    margin: 0 0 .6em;
    color: #0B2E13;
    font-weight: 800;
    font-size: clamp(1.06rem, 1rem + 0.45vw, 1.22rem);
    letter-spacing: .02em;
}

.page-company .access .map {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    padding: 0;
}

.page-company .access .map iframe {
    width: 100%;
    height: min(60vh, 420px);
    border: 0;
    display: block;
}






/* =====================================================================
10-01. products.html  Products: Hero（背景直指定＋右テキスト／PC-SP共通）
===================================================================== */
.hero-products--bg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: clamp(300px, 56vh, 640px);
    padding: clamp(20px, 6vw, 64px) 0;
    background-image: url("../img/products_title.jpg");
    background-position: center 28%;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.hero-products--bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
}

.hero-products__inner {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: clamp(20px, 6vw, 64px);
}

.hero-products__text {
    text-align: right;
    max-width: 520px;
    margin-right: clamp(24px, 7vw, 160px);
}

@media (max-width: 980px) {
    .hero-products__text {
        text-align: left;
        margin-inline: clamp(12px, 4vw, 24px);
        max-width: min(92%, 520px);
    }
}

.hero-products__heading {
    display: inline-block;
    text-align: left;
}

.hero-products__title {
    display: inline-block;
    position: relative;
    margin: 0;
    font-weight: 800;
    letter-spacing: .02em;
    color: #0B2E13;
    font-size: clamp(22px, 2.8vw, 36px);
}

.hero-products__title::after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    margin-top: .35em;
    background: var(--accent);
    border-radius: 4px;
}

.hero-products__sub {
    margin: .5rem 0 0;
    letter-spacing: .18em;
    font-size: clamp(11px, 1.2vw, 14px);
    color: var(--muted);
}

@media (max-width: 768px) {
    .hero-products--bg {
        min-height: clamp(180px, 44vh, 420px);
        background-position: center 22%;
    }
}


/* =========================================
10-02. products.html 商品詳細（SP→PC） クリーン版（整理済み）
   ========================================= */

/* --- セクション枠 & コンテナ --- */
.product-section {
    scroll-margin-top: clamp(80px, 9.5vw, 108px);
    padding: clamp(28px, 4vw, 48px) 0;
    border-top: 1px solid var(--border, #e5e7eb);
}

.product-section .product-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 clamp(12px, 4vw, 28px);
}

.product-section .product-inner {
    display: grid;
    row-gap: clamp(14px, 3vw, 24px);
    align-items: start;
}

/* --- タイトル（大見出し） --- */
.product-section .p-title {
    line-height: 1.35;
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 800;
    color: var(--ink, #0b2e13);
    margin: 0;
    border-left: 6px solid var(--accent, #5cb118);
    padding-left: 14px;
}

.product-section .p-title span {
    font-size: .9em;
    font-weight: 700;
}

/* --- 中見出し（特徴・仕様）を統一 --- */
.product-section .p-features h3,
.product-section .p-spec>h3 {
    margin: 14px 0 8px;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
    color: var(--ink, #0b2e13);
    position: relative;
}

.product-section .p-features h3::after,
.product-section .p-spec>h3::after {
    content: "";
    display: block;
    width: 120px;
    height: 3px;
    background: var(--accent, #5cb118);
    margin-top: 6px;
    border-radius: 999px;
}

/* --- 「特徴」テキスト（リード＆箇条書き） --- */
.product-section .p-features>p {
    margin: 0 0 10px;
}

.product-section .p-features>p:first-of-type {
    font-size: clamp(18px, 1.6vw, 20px);
    font-weight: 600;
    letter-spacing: .01em;
}

.product-section .p-features ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    row-gap: .35em;
}

.product-section .p-features li {
    position: relative;
    padding-left: 1.3em;
    font-size: clamp(15px, 1.6vw, 18px);
    font-weight: 600;
}

.product-section .p-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: .55em;
    height: .55em;
    border-radius: 50%;
    background: var(--accent, #5cb118);
    box-shadow: 0 0 0 3px rgba(92, 177, 24, .15);
}

/* --- 画像（共通） --- */
.product-section .p-main,
.product-section .p-subimages figure {
    margin: 0;
}

.product-section .p-main img,
.product-section .p-subimages img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
    background: #fff;
}

/* --- 仕様テーブル --- */
.product-section table.spec {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.product-section .spec th,
.product-section .spec td {
    padding: 12px 14px;
    vertical-align: top;
    line-height: 1.8;
    border-top: 1px solid var(--border, #e5e7eb);
}

.product-section .spec tr:first-child th,
.product-section .spec tr:first-child td {
    border-top: none;
}

.product-section .spec th {
    width: clamp(90px, 22%, 160px);
    background: #f6faf7;
    color: var(--ink, #0b2e13);
    font-weight: 700;
}

/* --- CTAボタン（商品セクション内） --- */
.product-section .p-cta .btn {
    display: inline-block;
    width: 100%;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    text-align: center;
    background: var(--accent, #5cb118);
    color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
    transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}

.product-section .p-cta .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
}

/* --- 商品内ナビ（中央寄せ＆折り返し） --- */
.pd {
    padding: clamp(14px, 2.5vw, 36px) 0;
}

.pd .cta {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 12px;
    text-align: center;
}

/* ラベル（使うときだけ） */
.pd .cta-label {
    font-weight: 700;
    color: var(--ink, #0b2e13);
    margin-right: .25em;
}

/* ナビ内ボタン（ghost） */
.pd .cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 999px;
    line-height: 1.2;
}

.pd .cta .btn.ghost {
    background: #fff;
    border: 1px solid var(--accent, #5cb118);
    color: var(--accent, #5cb118);
    box-shadow: none;
}

.pd .cta .btn.ghost:hover {
    background: rgba(92, 177, 24, .08);
}

/* --- SPのサブ画像：横2枚 --- */
.product-section .p-subimages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 2.8vw, 16px);
}

/* --- SP表示調整（< 980px） --- */
@media (max-width: 979.98px) {
    .product-section .p-subimages--pc {
        display: none;
    }

    /* PC用2枚は非表示 */
    .product-section .p-main {
        max-width: clamp(220px, 72vw, 380px);
        margin-left: auto;
        margin-right: auto;
    }
}

/* =========================================
10-03. products.html    PC（>=980px）
   ========================================= */
@media (min-width: 980px) {

    /* 2カラム（左やや細／右可変）＋行の詰め */
    .product-section .product-inner {
        grid-template-columns: clamp(240px, 30vw, 320px) 1fr;
        column-gap: clamp(20px, 3vw, 40px);
        row-gap: 6px;
        grid-auto-rows: min-content;
        align-items: start;
    }

    /* 右カラム：順序固定で余白の暴れ防止 */
    .product-section .p-title {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 4px;
    }

    .product-section .p-features {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
    }

    .product-section .p-spec {
        grid-column: 2;
        grid-row: 3;
        margin-bottom: 4px;
    }

    .product-section .p-cta {
        grid-column: 2;
        grid-row: 4;
        margin-top: 0;
    }

    /* 左カラム：縦3分割（正方形カード） */
    .product-section .p-visuals {
        grid-column: 1;
        grid-row: 1 / 5;
        align-self: start;
        display: grid;
        grid-template-rows: repeat(3, auto);
        gap: clamp(10px, 1.2vw, 16px);
    }

    .product-section .p-visuals .p-main,
    .product-section .p-visuals .p-subimages figure {
        aspect-ratio: 1 / 1;
    }

    .product-section .p-visuals img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .product-section .p-visuals .p-subimages {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: clamp(10px, 1.2vw, 16px);
        height: auto;
    }

    .product-section .p-subimages--sp {
        display: none;
    }

    /* SP用はPCで非表示 */
    .product-section .spec th {
        width: clamp(120px, 26%, 220px);
    }
}


/* =============================
11-01. services.html   Services（全体）追加スタイル
============================= */

.page-services .hero-sub,
.page-b2c .hero-sub,
.page-b2b .hero-sub {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(280px, 48vh, 520px);
    padding: clamp(24px, 6vw, 64px) 0;
    color: #fff;
    background: var(--ink) center/cover no-repeat;
}

.page-services .hero-sub::after,
.page-b2c .hero-sub::after,
.page-b2b .hero-sub::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .38));
}

.page-services .hero-sub>*,
.page-b2c .hero-sub>*,
.page-b2b .hero-sub>* {
    position: relative;
    z-index: 1;
}


.service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 3.5vw, 28px);
}

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


.card-service {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius, 16px);
    box-shadow: var(--shadow, 0 10px 30px rgba(0, 0, 0, .06));
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
}

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

.card-service figure {
    margin: 0;
    height: 100%;
}

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

.card-service__body {
    padding: clamp(16px, 2.8vw, 24px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.card-service h3 {
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.35;
    color: var(--ink);
    margin: 0;
}

.card-service ul {
    margin: 6px 0 0;
    padding-left: 1.1em;
}

.card-service li {
    list-style: disc;
    margin: .2em 0;
}

.card-service .cta-row {
    margin-top: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}


/* 汎用セクション */
.section {
    padding: clamp(28px, 5vw, 64px) 0;
    border-top: 1px solid var(--border, #e5e7eb);
}

.hd-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(16px, 2.5vw, 20px);
}

.hd-row h2 {
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.25;
    margin: 0;
    color: var(--ink);
}

.hd-row .sub {
    font-size: .9em;
    color: #64748b;
    letter-spacing: .08em;
}


/* Before / After（B2B detail） */
.ba-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 2vw, 16px);
}

@media (max-width: 980px) {
    .ba-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .ba-grid {
        grid-template-columns: 1fr;
    }
}

.ba-card {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.ba-card figure {
    margin: 0;
    position: relative;
}

.ba-card img {
    width: 100%;
    height: clamp(180px, 28vw, 260px);
    object-fit: cover;
    display: block;
}

.ba-card .tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: .82rem;
    padding: .2em .5em;
    border-radius: 6px;
}

.ba-card .cap {
    padding: 10px 12px;
    font-size: .94rem;
    color: #334155;
}


/* タイムライン風 STEP（B2C detail）*/
.steps {
    display: grid;
    gap: 14px;
    counter-reset: st;
}

.step {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: start;
}

.step::before {
    counter-increment: st;
    content: counter(st);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--accent, #1fa97a);
    color: #fff;
    font-weight: 700;
}

.step h4 {
    margin: .1em 0 0;
    font-size: 1.05rem;
}

.step p {
    margin: .2em 0 0;
    color: #475569;
}


.table th {
    background: #f8fafc;
    color: #0f172a;
    white-space: nowrap;
    width: 28%;
}





/* =====================================================================
11-02. services.html  services: Hero（背景直指定＋右テキスト／PC-SP共通）
※ carpet_service.htmlとservice.html Heroは同じ。
（※将来 services.css へ分離予定）
===================================================================== */
.hero-services--bg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: clamp(300px, 56vh, 640px);
    padding: clamp(20px, 6vw, 64px) 0;

    /* 背景（PC） */
    background-image: url("../img/services_title.jpg");
    background-size: cover;
    background-position: center 38%;
    background-repeat: no-repeat;
    overflow: hidden;

}

.hero-services--bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
}

/* テキスト側（既存クラスを継続利用） */
.hero-services__inner {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: clamp(20px, 6vw, 64px);
}

.hero-services__text {
    text-align: right;
    max-width: 520px;
    margin-right: clamp(24px, 7vw, 160px);
}

@media (max-width: 980px) {
    .hero-services__text {
        text-align: left;
        margin-inline: clamp(12px, 4vw, 24px);
        max-width: min(92%, 520px);
    }
}

.hero-services__heading {
    display: inline-block;
    text-align: left;
}

.hero-services__title {
    display: inline-block;
    position: relative;
    margin: 0;
    font-weight: 800;
    letter-spacing: .02em;
    color: #0B2E13;
    font-size: clamp(22px, 2.8vw, 36px);
}

.hero-services__title::after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    margin-top: .35em;
    background: var(--accent);
    border-radius: 4px;
}

.hero-services__sub {
    margin: .5rem 0 0;
    letter-spacing: .18em;
    font-size: clamp(11px, 1.2vw, 14px);
    color: var(--muted);
}

@media (max-width: 768px) {
    .hero-services--bg {
        min-height: clamp(180px, 44vh, 420px);
        background-position: center 22%;
    }
}



/* 8. 商品バナーグリッド ---------------------------------- */

.bnr-section {
    padding: 40px 0 48px;
    margin-top: 40px;
    background: #f7faf8;
}

.bnr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}

.bnr-item {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}

.bnr-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* ホバー時（PC）の軽い浮き上がり */
@media (hover: hover) {
    .bnr-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
    }
}

/* SP：1列表示にして見やすく */
@media (max-width: 768px) {
    .bnr-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bnr-section {
        padding: 32px 0 40px;
        margin-top: 32px;
    }
}

.bnr-head {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 18px;
    font-weight: 700;
    color: #0a5b1e;
}


/* =============================
12. privacy.html  プライバシーポリシー専用レイアウト
============================= */
/* お問い合わせページと合わせる */
.page-privacy .section {
    padding: clamp(28px, 5vw, 64px) 0;
}

.page-privacy {
    background: #f6faf7;
    padding: 0;
}

.privacy-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
    text-align: center;
}

.privacy-title {
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 0%;
    text-align: center;
}

.privacy-title::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 170px;
    height: 4px;
    background: var(--accent-700);
    border-radius: 999px;
}

/* 白いカード */
.privacy-card {
    background: #fff;
    padding: clamp(24px, 4vw, 40px);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    text-align: left;
    margin-top: 32px;
}