@charset "utf-8";

/**
 * ==========================================
 * メディアクエリ（モバイル・タブレット対応）
 * 899px以下の画面幅に適用
 * ==========================================
 */
@media screen and (max-width: 899px) {

    body {
        font-size: 14px;
        overflow-x: hidden;
    }

    /* ------------------------------------------
     * パンくずリスト
     * ------------------------------------------ */
    .breadcrumb {
        padding: 10px 0;
    }

    .breadcrumb__list {
        font-size: 12px;
        gap: 5px;
    }

    .breadcrumb__list li:not(:last-child)::after {
        margin-left: 5px;
        font-size: 14px;
    }

    /* ------------------------------------------
     * 基本レイアウト調整
     * ------------------------------------------ */
    .slide__content {
        display: block;
    }

    /* レスポンシブ表示切替 */
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    /* 見出しサイズ調整 */
    h2 {
        font-size: clamp(20px, 5.5vw, 60px);
    }

    h3.h3-band {
        font-size: clamp(20px, 4vw, 30px);
    }


    h3.h3-diamond {
        width: 150px;
        font-size: clamp(10px, 3vw, 30px);
        margin: auto 5% 10% 5%;
    }

    /* h3-rowのモバイル対応 */
    .h3-row {
        margin: auto;
        gap: 3%;
        max-width: 100%;
    }

    .h3-row>div {
        margin-left: 0;
        flex: 1;
    }

    @media screen and (max-width: 600px) {
        h3.h3-diamond {
            width: 100px;
        }

        /* 小さなスクリーンでのh3-row調整 */
        .h3-row {
            gap: 2%;
        }
    }

    .mb-center {
        text-align: center;
    }

    .slogan__list {
        width: 90%;
        margin-bottom: 50%;
    }

    .green-title {
        font-size: clamp(20px, 6vw, 40px);
        color: #277570;
    }

    .about .bg-section {
        background: #f2f4ef;
    }

    iframe {
        height: 300px;
    }

    /* =====リストスタイル===== */
    /* pc3列 mb2列 */
    ul.grid3__list {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        gap: 1% 2%;
    }

    /* カード型リスト - mb1列 */
    ul.card__list {
        grid-template-columns: repeat(1, 1fr);
        gap: 1%;
        margin-bottom: 30%;
    }

    ul.card__list figure {
        display: flex;
        padding: 2%;
    }


    ul.card__list figure img {
        width: 50%;
        height: auto;
        object-fit: cover;
        flex-shrink: 0;
    }

    ul.card__list figcaption {
        width: 100%;
        align-items: flex-start;
        justify-content: center;
        font-size: clamp(15px, 2.9vw, 20px);
        padding: 2%;
    }

    ul.card__list figcaption h4 {
        font-size: 16px;
    }

    ul.card__list figcaption::after {
        top: 80%;
        right: 0;
    }

    .works ul.card__list {
        margin-bottom: 35%;
    }

    .works ul.card__list figure {
        align-items: center;
    }
    
    ul.card3-2__list {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 200px;
    }

    ul.card3-2__list img {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
    }

    ul.card3-2__list figure {
        flex-direction: column;
        width: 100%;
        height: auto;
        object-fit: cover;
        flex-shrink: 0;
    }

    ul.card3-2__list figcaption {
        font-size: clamp(15px, 1.8vw, 20px);
        position: relative;
        z-index: 2;
    }

    ul.card3-2__list figcaption::after {
        top: 65%;
    }

    /* brown-btn */
    .brown-btn {
        min-height: 45px;
        padding: 1% 6%;
    }

    .f-news .brown-btn {
        display: flex;
        width: 30%;
        margin: 5% auto;
        align-items: center;
        justify-content: center;
        padding: 2% 6%;
    }

    .f-about .brown-btn {
        width: 40%;
        margin-left: auto;
        margin-top: 1%;
    }

    .f-our .brown-btn {
        min-width: 300px;
    }

    .f-our .brown-btn,
    .f-slides .brown-btn {
        margin-top: 10%;
    }

    .exterior .brown-btn {
        width: 95%;
        max-width: 400px;
    }

    /* ヒーローセクション調整 */
    .hero {
        min-height: auto;
        margin-bottom: 0;
        z-index: 1;
    }

    /* ------------------------------------------
     * ヘッダー設定
     * ------------------------------------------ */
    header {
        position: fixed;
        z-index: 1000;
    }

    .header__inner {
        position: relative;
    }

    .header__logo-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 1001;
        width: 100%;
        min-width: 350px;
        padding: 10px 20px;
    }

    .header__logo {
        width: 50%;
    }

    .header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
        z-index: 1000;
        font-size: 18px;
    }

    /* ハンバーガーメニューがアクティブな時 */
    .header__nav.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .header__nav ul {
        margin-top: 10px;
        flex-direction: column;
        text-align: center;
        background-color: #fff;
        padding: 20px;
        border-radius: 12px;
        width: 50%;
        min-width: 250px;
        margin-left: auto;
        margin-right: 5%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        line-height: 5;
    }

    /* ------------------------------------------
     * ハンバーガーメニューボタン
     * ------------------------------------------ */
    .hmb-btn {
        display: block;
        position: relative;
        width: 60px;
        height: 60px;
        background-color: #000;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        z-index: 1001;
        padding: 0;
    }

    .hmb-btn i {
        display: block;
        width: 60%;
        height: 3.5px;
        border-radius: 5px;
        background-color: #fff;
        position: absolute;
        left: 20%;
        transition: all 0.3s ease;
    }

    .hmb-btn i:nth-child(1) {
        top: 30%;
    }

    .hmb-btn i:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
    }

    .hmb-btn i:nth-child(3) {
        bottom: 30%;
    }

    /* ハンバーガーメニューアクティブ時のアニメーション */
    .hmb-btn.active i:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

    .hmb-btn.active i:nth-child(2) {
        opacity: 0;
    }

    .hmb-btn.active i:nth-child(3) {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }

    /* ------------------------------------------
     * フッター調整
     * ------------------------------------------ */
    footer {
        margin-top: 0;
    }

    .footer__inner {
        flex-direction: column-reverse;
        text-align: center;
    }

    .footer__company {
        margin-top: 5%;
        align-items: center;
    }

    .footer__contact {
        text-align: center;
        margin-top: 10%;
    }

    .footer__logo {
        width: 70%;
        margin: auto;
    }

    .tel-mail {
        flex-direction: column;
    }

    .tel a {
        font-size: clamp(14px, 7vw, 30px);
    }

    .tel-mail .brown-btn {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        font-size: 14px;
        padding: 12px 16px;
        min-height: 45px;
    }

    .footer__bottom {
        aspect-ratio: 16/5;
        margin-top: 5%;
    }

    .footer__nav ul {
        flex-direction: column;
        text-align: center;
        line-height: 3;
        margin-bottom: 10%;
        font-size: 16px;
    }

    .footer__nav ul li:before {
        display: none;
    }

    /* ------------------------------------------
     * NEWSセクション（モバイル版）
     * ------------------------------------------ */
    .f-news.sp {
        display: block;
        position: static;
        width: 80%;
        white-space: normal;
        margin: auto;
        padding-bottom: 20px;
    }

    .slide__content {
        width: 110%;
    }

    .subtitle {
        top: 23%;
        left: 25%;
        font-size: clamp(16px, 4vw, 30px);
        letter-spacing: 0.3em;
        color: #fff;
        z-index: 2;
    }

    img.bird {
        top: 70%;
        left: 12%;
    }

    img.hero-deco1 {
        display: none;
    }

    img.hero-deco2 {
        bottom: 0;
        z-index: 2;
    }

    .news__item {
        font-size: clamp(13px, 2.5vw, 18px);
        align-items: center;
        justify-content: center;
    }

    .f-news h2 {
        text-align: left;
        transform: translateX(10%);
    }

    .f-news h2>span {
        margin-left: 4%;
    }

    .f-news__cat {
        width: 80px;
        height: 25px;
        line-height: 25px;
        transform: translateY(-3px);
    }

    .f-about {
        position: relative;
        z-index: 2;
        margin-top: 50px;
    }

    img.f-about-deco {
        width: 90%;
    }

    .f-about__text-box h2 {
        font-size: clamp(20px, 7vw, 50px);
        transform: translate(-30%, -40%);
        white-space: nowrap;
    }

    .f-about__text-box h3 {
        font-size: clamp(12px, 4vw, 24px);
    }

    .f-about__text-box p {
        font-size: clamp(13px, 3.5vw, 18px);
    }

    .f-service h2 {
        font-size: clamp(20px, 10vw, 70px);
        transform: translate(-25%, 50%);
    }

    .f-service-works__box {
        background: url(../img/service-bg_sp.webp) no-repeat center top / contain;
        aspect-ratio: 1/3.5;
        position: relative;
        margin: auto;
    }

    .f-service__lists {
        flex-direction: column;
    }

    .f-service__lists li {
        position: absolute;
        width: 58%;
    }

    .f-service__lists li:first-child {
        right: 3%;
        top: 8%;
    }

    .f-service__lists li:nth-child(2) {
        left: 3%;
        top: 18%;
        z-index: 2;
    }

    .f-service__lists li:nth-child(3) {
        right: 3%;
        top: 29%;
    }

    .f-service__lists li:nth-child(4) {
        left: 3%;
        top: 40%;
        z-index: 2;
    }

    .f-service__lists li:nth-child(5) {
        right: 3%;
        top: 50%;
    }

    .f-works {
        margin-top: 225%;
    }

    .f-works__lists ul {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 5% 2%;
        width: 100%;
        margin: auto;
    }

    .f-works__lists ul li {
        width: 100%;
        font-size: clamp(13px, 2.3vw, 16px);
    }
    @media screen and (max-width: 450px) {
        .f-works__lists ul li {
            font-size: clamp(10px, 2.3vw, 16px);
        }
    }


    .f-works__lists ul li a {
        padding: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .f-works__lists {
        width: 80%;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        margin: auto;
        align-items: flex-start;
        gap: 10px;
        margin-top: 5%;
    }

    .swiper-button-prev {
        left: -9%;
    }

    .swiper-button-next {
        right: -9%;
    }

    /* ------------------------------------------
     * TOPIX/CSRスライダー（モバイルでは無効化）
     * 縦並びの2カラムレイアウトに変更
     * ------------------------------------------ */

    .f-slides,
    .f-our {
        margin-top: 10%;
    }

    .slides .container,
    .f-slides .container,
    .csr .container {
        width: 90%;
    }

    .slides .swiper,
    .f-slides .swiper,
    .csr .swiper {
        overflow: visible;
    }

    .slides .swiper-wrapper,
    .f-slides .swiper-wrapper,
    .csr .swiper-wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;
        transform: none !important;
        transition: none !important;
    }

    .slides .swiper-slide,
    .f-slides .swiper-slide,
    .csr .swiper-slide {
        width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        gap: 12px;
        align-items: flex-start;
    }

    /* ナビゲーションボタンとページネーションを非表示 */
    .slides .swiper-button-prev,
    .slides .swiper-button-next,
    .f-slides .swiper-button-prev,
    .f-slides .swiper-button-next,
    .csr .swiper-button-prev,
    .csr .swiper-button-next,
    .slides .swiper-pagination,
    .f-slides .swiper-pagination,
    .csr .swiper-pagination {
        display: none !important;
    }

    /* 画像のサイズ調整 - 左側に固定幅 */
    .slides .swiper-slide img,
    .f-slides .swiper-slide img,
    .csr .swiper-slide img {
        width: 40%;
        aspect-ratio: 16/9;
        height: auto;
        flex-shrink: 0;
        object-fit: cover;
    }

    /* テキスト部分 - 右側に配置 */
    .slides .swiper-slide a,
    .f-slides .swiper-slide a,
    .csr .swiper-slide a {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        width: 100%;
    }

    /* テキストコンテナ */
    .slides .swiper-slide a>div,
    .f-slides .swiper-slide a>div,
    .csr .swiper-slide a>div {
        flex: 1;
    }

    /* テキストのスタイル調整 */
    .slides h3,
    .f-slides h3,
    .csr h3 {
        font-size: 16px;
        margin-top: 0;
    }

    .slides p,
    .f-slides p,
    .csr p {
        font-size: 14px;
        margin-top: 5px;
    }

    .our__lists,
    .f-our__lists {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .f-our__lists li img {
        height: 150px;
        object-fit: cover;
    }

    .f-news.sp {
        display: block;
        position: static;
        width: 80%;
        white-space: normal;
        margin: auto;
    }

    .f-news__item {
        font-size: clamp(13px, 2.5vw, 18px);
        align-items: center;
        justify-content: center;
    }


    .f-news h2 {
        text-align: left;
        transform: translateX(10%);
    }

    .f-news h2>span {
        margin-left: 4%;
    }

    .f-news__cat {
        width: 80px;
        height: 25px;
        line-height: 25px;
        transform: translateY(-3px);
    }

    .f-about {
        position: relative;
        z-index: 2;
        margin-top: 50px;
    }

    img.f-about-deco {
        width: 50%;
    }

    .f-about__text-box {
        margin-top: -25%;
        margin-right: 1%;
    }

    .f-about__text-box h2 {
        font-size: clamp(20px, 7vw, 50px);
        transform: translate(-30%, -20%);
        white-space: nowrap;
    }

    .f-about__text-box h3 {
        font-size: clamp(13px, 4vw, 24px);
    }

    .f-about__text-box p {
        font-size: clamp(13px, 3.5vw, 18px);
    }

    /* ------------------------------------------
     * 下層ページ対応
     * ------------------------------------------ */
    .page-top {
        aspect-ratio: 16/12;
    }

    .about .page-top,
    .slogan .page-top {
        background: url(../img/about/top-about_sp.webp) no-repeat right center / contain;
    }

    .service .page-top {
        background: url(../img/service/top-service_sp.webp) no-repeat right center / contain;
    }

    .planning .page-top {
        background: url(../img/service/planning/top-planning_sp.webp) no-repeat right center / contain;
    }

    .landscape .page-top {
        background: url(../img/service/landscape/top-landscape_sp.webp) no-repeat right center / contain;
    }

    .teardown .page-top {
        background: url(../img/service/teardown/top-teardown_sp.webp) no-repeat right center / contain;
    }

    .manage .page-top {
        background: url(../img/service/manage/top-manage_sp.webp) no-repeat right center / contain;
    }

    .exterior .page-top {
        background: url(../img/service/exterior/top-exterior_sp.webp) no-repeat right center / contain;
    }

    .works .page-top {
        background: url(../img/works/top-works_sp.webp) no-repeat right center / contain;
    }

    .profile .page-top {
        background: url(../img/profile/top-profile_sp.webp) no-repeat right center / contain;
    }

    .csr .page-top {
        background: url(../img/csr/top-csr_sp.webp) no-repeat right center / contain;
    }

    .town .page-top {
        background: url(../img/town/top-town_sp.webp) no-repeat right center / contain;
    }

    .topix .page-top {
        background: url(../img/topix/top-topix_sp.webp) no-repeat right center / contain;
    }

    .news .page-top {
        background: url(../img/news/top-news_sp.webp) no-repeat right center / contain;
    }

    .policy .page-top {
        background: url(../img/policy/top-policy_sp.webp) no-repeat right center / contain;
    }

    .contact .page-top {
        background: url(../img/contact/top-contact_sp.webp) no-repeat right center / contain;
    }

    .map .page-top {
        background: url(../img/map/top-map_sp.webp) no-repeat right center / contain;
    }

    /* works-各カテゴリ */

    /* works-各カテゴリ */
    .gate .page-top {
        background: url(../img/works/top-gate_sp.webp) no-repeat right center / contain;
    }

    .fence .page-top {
        background: url(../img/works/top-fence_sp.webp) no-repeat right center / contain;
    }

    .garden .page-top {
        background: url(../img/works/top-garden_sp.webp) no-repeat right center / contain;
    }

    .parking .page-top {
        background: url(../img/works/top-parking_sp.webp) no-repeat right center / contain;
    }

    .slope .page-top {
        background: url(../img/works/top-slope_sp.webp) no-repeat right center / contain;
    }

    .terrace .page-top {
        background: url(../img/works/top-terrace_sp.webp) no-repeat right center / contain;
    }

    .total .page-top {
        background: url(../img/works/top-total_sp.webp) no-repeat right center / contain;
    }

    .felling .page-top {
        background: url(../img/works/top-felling_sp.webp) no-repeat right center / contain;
    }

    .facility .page-top {
        background: url(../img/works/top-facility_sp.webp) no-repeat right center / contain;
    }

    .green .page-top {
        background: url(../img/works/top-green_sp.webp) no-repeat right center / contain;
    }

    .other .page-top {
        background: url(../img/works/top-other_sp.webp) no-repeat right center / contain;
    }
    
    .demolition .page-top {
        background: url(../img/works/top-demolition_sp.webp) no-repeat right center / contain;
    }

    .page-title {
        width: 80px;
        height: 80px;
        width: 30%;
        height: 40%;
        aspect-ratio: 1/1;
        right: 65%;
        top: 30%;
    }

    .page-title h2 {
        font-size: clamp(13px, 5vw, 100px);
        line-height: 1;
        transform: rotate(-45deg) !important;
    }

    .page-title h2 span {
        font-size: clamp(8px, 2vw, 20px);
    }

    .map .page-title h2 {
        font-size: clamp(10px, 4.3vw, 80px);
    }

    .town .page-title h2:not(span) {
        font-size: clamp(16px, 4vw, 40px);
    }

    .memo {
        position: relative;
        width: 95%;
        margin: 8% auto;
        flex-direction: column;
        align-items: flex-start;
        padding: 5%;
    }

    .memo>div:first-child {
        width: 50%;
        margin-left: -6%;
        text-align: center;
    }

    .memo>div:first-child p {
        writing-mode: horizontal-tb;
        padding-bottom: 5%;
        position: relative;
        --border-width: 0%;
    }

    .memo>div:first-child p::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: var(--border-width);
        height: 1px;
        background-color: #7C6C5D;
        transition: width 0.8s ease;
    }

    .memo>div:nth-child(2) {
        padding-left: 0;
    }

    .memo>div:nth-child(2)::before {
        display: none;
    }

    .memo>div:nth-child(2) h4 {
        margin: 3% 0;
        font-size: clamp(14px, 5vw, 30px);
    }

    .memo>img {
        position: absolute;
        top: 10px;
        right: 4%;
        width: 25%;
    }

    /* ==========aboutここから========== */


    .about__greeting {
        align-items: center;
        justify-content: center;
        writing-mode: horizontal-tb;
    }

    .about__greeting h3 {
        color: #86cbc5;
        font-size: clamp(12px, 5.5vw, 60px);
        letter-spacing: 0.1em;
    }

    .greeting__comments {
        writing-mode: vertical-lr;
    }

    .bird-about {
        top: 400px;
        right: -100px;
        width: 80px;
    }

    img.advisor {
        width: 30%;
        min-width: 200px;
        margin-top: 5%;
    }

    .one-stop {
        width: 90%;
        padding: 4% 0;
    }

    .plants-soil-blocks {
        flex-direction: column;
        font-size: clamp(12px, 5vw, 30px);
    }

    .plants-soil-blocks p span:first-child {
        font-size: clamp(16px, 8vw, 40px);
    }

    .plants-soil-blocks p span:last-child {
        font-size: clamp(12px, 5vw, 35px);
    }

    .one-stop>p {
        font-size: clamp(12px, 4.5vw, 50px);
    }

    .one-stop__title {
        font-size: clamp(20px, 13vw, 70px);
    }

    ul.flow {
        width: 100%;
        max-width: 500px;
    }

    .attempt {
        background: url(../img/about/attempt_bg_sp.png) no-repeat center top / contain;
        aspect-ratio: 1/2.5;
    }

    .attempt__inner {
        text-align: center;
        flex-direction: column;
    }

    .attempt__inner p {
        font-size: clamp(11px, 3vw, 20px);
    }

    .attempt__inner h3,
    .attempt__inner h4 {
        writing-mode: horizontal-tb;
        font-size: clamp(11px, 6vw, 40px);
        font-weight: 600;
    }

    .attempt__inner h4 {
        margin-top: 5%;
    }

    .attempt__content ul:first-of-type {
        flex-direction: column;
        margin-top: 10%;
    }


    .attempt__content ul:first-of-type li figure {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .attempt__content ul:first-of-type li figure>img {
        width: 50%;
    }

    .attempt__content figcaption {
        padding: 0 4%;
        font-size: clamp(13px, 2vw, 20px);
        text-align: left;
    }

    .attempt__content ul:first-of-type li:nth-child(2) figure {
        flex-direction: row-reverse;
    }

    .attempt__content ul:nth-of-type(2) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 15px;
        width: 95%;
        margin-top: 10%;
        margin-left: auto;
    }

    .attempt__content ul:nth-of-type(2) li:first-child {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .attempt__content ul:nth-of-type(2) li:first-child figure {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }

    .attempt__content ul:nth-of-type(2) li:first-child img {
        width: 48.5%;
        margin-left: 5%;
    }

    /* 2番目のliを下段左に配置 */
    .attempt__content ul:nth-of-type(2) li:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    /* 3番目のliを下段右に配置 */
    .attempt__content ul:nth-of-type(2) li:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    .about__slogan__inner {
        flex-direction: column;
        align-items: center;
    }

    .about__slogan__inner h3 {
        width: 100%;
        writing-mode: horizontal-tb;
        justify-content: center;
        font-size: clamp(16px, 5vw, 30px);
    }


    .slogan-link {
        display: flex;
        width: 90%;
        align-items: center;
        justify-content: center;
    }

    .slogan-link::after {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url('../img/arrow.png') no-repeat center center / contain;
        flex-shrink: 0;
        margin-left: auto;
        margin-right: 4%;
    }


    /* スローガンページ */
    .slogan__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 2%;
    }

    /* ==========serviceここから========== */

    ul.consul__list li {
        min-height: 60px;
    }

    ul.consul__list li h4 {
        width: 40%;
        min-height: 100px;
        font-size: clamp(12px, 3vw, 20px);
        background-color: #92cac0;
    }

    .container {
        width: 90%;
    }

    .service__lead {
        font-size: clamp(12px, 4vw, 20px);
    }

    ul.service__list {
        grid-template-columns: repeat(2, 1fr);
    }

    /* プランニング・アイデアここから */
    .plan {
        flex-direction: column;
    }

    .planning-flow p:nth-child(2) {
        font-size: clamp(16px, 3vw, 24px);
    }

    .plan>img {
        max-width: 100%;
        margin-top: 2%;
    }

    .cost h4 {
        font-size: clamp(14px, 5vw, 40px);
    }

    .cost>div:nth-child(2) {
        flex-direction: column;
    }

    .cost>div:nth-child(2) img {
        max-width: 100%;
        margin: 2% auto 0;
    }

    /* プランニング・アイデアここまで */

    /* 造園ここから */
    /* ul.best8__list {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    ul.reference__links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10% 2%;
    } */

    .landscape__list {
        grid-template-columns: repeat(1, 1fr);
        gap: 0;
        width: 50%;
        min-width: 300px;
        margin: 0 auto 10%;
    }

    .landscape__list li {
        background-color: transparent;
        flex-direction: row;
        aspect-ratio: auto;
        text-align: left;
        justify-content: flex-start;
        padding: 0;
    }

    .landscape__list li h4 {
        font-size: clamp(18px, 2.3vw, 30px);
    }

    .landscape__list li img {
        width: 20%;
    }

    .calendar {
        background-color: transparent;
        padding: 0;
    }

    /* 造園ここまで */

    /* 外構ここから */
    .exterior__lead ul {
        width: 95%;
    }

    .lend-post {
        width: 95%;
        margin: -50px auto 0;
    }

    .lend-post img {
        max-width: 100%;
        margin: 0 auto;
    }

    /* 外構ここまで */
    /* ==========serviceここまで========== */

    /* ==========profileここから========== */
    table.profile__table {
        font-size: clamp(13px, 1.5vw, 16px);
    }

    /* ==========profileここまで========== */

    /* ==========csrここから========== */
    .town ul.card__list,
    .csr ul.card__list {
        margin-bottom: 50px;
    }

    .town ul.card__list figcaption,
    .csr ul.card__list figcaption {
        align-items: flex-start;
    }

    /* ==========csrここまで========== */

    /* ==========newsここから========== */
    ul.news__list li a {
        flex-direction: column;
        gap: 0;
        font-size: 16px;
    }

    /* ==========newsここまで========== */

    /* ==========サイトマップここから========== */
    ul.map__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 5% 2%;
        margin-bottom: 50px;
    }

    /* ==========サイトマップここまで========== */
}

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

    /* tableのモバイル対応 */
    table.regarden__table {
        border-spacing: 0;
        width: 100%;
    }

    table.regarden__table tr {
        display: block;
        margin-bottom: 20px;
        padding: 0;
        height: auto;
    }

    table.regarden__table th {
        display: block;
        float: left;
        width: 20%;
        height: 60px;
        min-width: 150px;
        padding: 12px 16px;
        margin: 0 15px 15px 0;
        font-size: 16px;
        line-height: 2.5;
        background-color: #99a4ab;
        color: #fff;
    }

    table.regarden__table td {
        display: block;
        padding: 0;
        text-align: left;
        line-height: 1.6;
    }

    table.regarden__table tr::after {
        content: "";
        display: table;
        clear: both;
    }

    .example {
        gap: 20px;
        font-size: clamp(16px, 3vw, 16px);
    }

    .example h4 {
        font-size: clamp(14px, 3vw, 16px);
        white-space: nowrap;
    }

    .example h4 span {
        font-size: clamp(10px, 5vw, 30px);
    }

    .example ul {
        grid-template-columns: repeat(3, 1fr);
        gap: 3% 2%;
    }

    .example ul li img {
        width: 100%;
        height: 100%;
    }


    table.fee__table {
        background-color: transparent;
        width: 100%;
        padding: 3% 6%;
        border-spacing: 10px;
        border-top: 1px solid #277570;
        border-bottom: 1px solid #277570;
    }

    .post-type-works .wp-block-image {
        width: calc(50% - 1rem);
        /* 2列 */
        margin: 0.5rem;
        box-sizing: border-box;
    }

    .post-type-works .wp-block-image:nth-of-type(3n) {
        margin-right: 0.5rem;
    }

    .post-type-works .wp-block-image:nth-of-type(2n) {
        margin-right: 0.5rem;
        /* 2列の右端も統一 */
    }
}



@media screen and (max-width: 459px) {
    .mb {
        display: block;
    }

    .not-mb {
        display: none;
    }


    ul.consul__list li {
        flex-direction: column;
    }

    ul.consul__list li h4 {
        min-height: 50px;
        width: 100%;
        font-size: clamp(14px, 3vw, 20px);
    }

    /* 造園ここから */
    ul.best8__list {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    ul.reference__links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10% 2%;
    }

    ul.sakura__list {
        margin-top: -10%;
    }

    /* 造園ここまで */

    /* サイトマップここから */
    ul.map__list {
        grid-template-columns: repeat(1, 1fr);
        gap: 1%;
    }

    ul.map__list li::before {
        width: 6%;
    }

    /* サイトマップここまで */

    .manage .bg-section .container:nth-child(2) .row__list li:last-child figcaption {
        text-align: left;
    }

    /* インポートした施工事例詳細ページのみ画像レイアウト調整 */
    main.gate .post-content.legacy-layout .wp-block-image,
    main.fence .post-content.legacy-layout .wp-block-image,
    main.garden .post-content.legacy-layout .wp-block-image,
    main.parking .post-content.legacy-layout .wp-block-image,
    main.slope .post-content.legacy-layout .wp-block-image,
    main.terrace .post-content.legacy-layout .wp-block-image,
    main.total .post-content.legacy-layout .wp-block-image,
    main.felling .post-content.legacy-layout .wp-block-image,
    main.facility .post-content.legacy-layout .wp-block-image,
    main.green .post-content.legacy-layout .wp-block-image,
    main.other .post-content.legacy-layout .wp-block-image {
        width: 300px;
        margin-right: 0;
    }

    main.gate .post-content.legacy-layout .wp-block-image:not(.image-with-caption .wp-block-image),
    main.fence .post-content.legacy-layout .wp-block-image:not(.image-with-caption .wp-block-image),
    main.garden .post-content.legacy-layout .wp-block-image:not(.image-with-caption .wp-block-image),
    main.parking .post-content.legacy-layout .wp-block-image:not(.image-with-caption .wp-block-image),
    main.slope .post-content.legacy-layout .wp-block-image:not(.image-with-caption .wp-block-image),
    main.terrace .post-content.legacy-layout .wp-block-image:not(.image-with-caption .wp-block-image),
    main.total .post-content.legacy-layout .wp-block-image:not(.image-with-caption .wp-block-image),
    main.felling .post-content.legacy-layout .wp-block-image:not(.image-with-caption .wp-block-image),
    main.facility .post-content.legacy-layout .wp-block-image:not(.image-with-caption .wp-block-image),
    main.green .post-content.legacy-layout .wp-block-image:not(.image-with-caption .wp-block-image),
    main.other .post-content.legacy-layout .wp-block-image:not(.image-with-caption .wp-block-image) {
        width: 94%;
    }

    /* カーソルも通常に戻す */
    .post-content img {
        cursor: default !important;
    }

    /* ------------------------------------------
     * demolitionカテゴリー（2025年11月20日までの投稿）
     * モバイル版は1カラムに戻す
     * ------------------------------------------ */
    
    /* work-before-afterをモバイルで1列に */
    main.demolition .post-content.demolition-old .work-before-after {
        display: block !important;
    }
    
    main.demolition .post-content.demolition-old .work-before-after > p {
        width: 100% !important;
        margin: 1rem 0 !important;
    }
    
    /* 旧スタイルのレスポンシブ */
    main.demolition .post-content.demolition-old figure,
    main.demolition .post-content.demolition-old .wp-block-image {
        display: block;
        width: 95%;
        margin: 1rem auto;
    }
}