/* メインのサービスコンテンツ - カテゴリグループ用に調整 */
.single-content .wrap {
    padding-top: 6em;
}

.content {
    display: block;
    margin-bottom: 2em;
    padding: 0 1em;
}

section {
    padding-top: 0;
    /* margin-top: -4em; */
}

/* 直接の.boxスタイル（カテゴリグループがない場合のフォールバック） */
.service .content > .box {
    width: 26%;
    /* Material-like elevation 2 */
    box-shadow:
        0px 2px 1px -1px rgba(0,0,0,0.2),
        0px 1px 1px 0px rgba(0,0,0,0.14),
        0px 1px 3px 0px rgba(0,0,0,0.12);
    padding: 2em;
    display: inline-block;
    vertical-align: top;
    margin-right: 0.5em;
    margin-bottom: 2em;
    text-align: center;
    border: 1px solid #e4e3e3;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}

.service .content .box h3 {
    text-align: justify;
    font-size: 24px;
    font-weight: 500;
    align-items: center;
    display: flex;
    gap: 0.5em;
    margin-top: 0;
}

.service .content .box h3 span {
    font-size: 60px;
    font-family: "Poppins", sans-serif;
    color: #08B15B;
}

.service .btn {
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.3em;
    padding-left: 0.8em;
    padding-top: 0.5em;
    position: relative;
    color: #E31A1C;
    z-index: 1;
    margin: 0;
    margin-right: 2em;
    float: right;
    font-family: "Poppins", sans-serif;
}

/*シングルページ*/
section.single {
    padding: 0;
}

section.single h2 {
    text-align: justify;
    font-size: 32px;
    font-weight: bold;
    align-items: center;
    display: inline-flex;
    gap: 0.5em;
}

section.single h2 span {
    font-size: 60px;
    font-family: "Poppins", sans-serif;
    color: #08B15B;
}

section.single .deta {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 1em;
}

section.single .deta span {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    background: #08B15B;
    color: #fff;
    padding: 0.3em 1.5em;
}

section.single .deta span a {
    color: #fff;
}

section.single .deta .tag_list {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

section.single .deta .tag_list a {
    font-size: 12px;
    color: #555555;
    padding: 0.2em 1em;
    border: 1px solid #c1c1c1;
    border-left: 4px solid #E4C016;
    text-align: center;
    display: inline-block;
}

section.single .content .txt {
    padding: 0 1em;
    width: 100%;
    max-width: 75%;
}

section.single .content {
    display: flex;
    gap: 3em;
    justify-content: space-around;

}

section.single .content.single {
    flex-direction: row-reverse;
}

section.single .content .txt .txt-content {
    padding-bottom: 2em;
    margin-bottom: 4em;
    border-bottom: 1px solid #C1C1C1;
}

section.single .content .txt .back {
    text-align: right;
}

section.single .content .txt .back a {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: 20px;
}

section.single .content .txt .back .sankaku {
    width: 0;
    height: 0;
    border-right: 10px solid #07b15c;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-top: 0.1em;
}

section.single .content .category-list-content {
    width: 200px;
}

section.single .content .category h3 {
    color: #08B15B;
    font-size: 18px;
    border-bottom: 1px solid #C1C1C1;
}

section.single .content .category h3 span {
    color: #08B15B;
    font-size: 24px;
}

section.single .content .category ul {
    padding: 0;
}

section.single .content .category ul li {
    list-style: none;
    padding: 0.5em 0;
}

section.single .content .category ul li a {
    display: flex;
    gap: 1em;
}

section.single .category ul li a.is-active {
    font-weight: bold;
}

section.single .category ul li .sankaku {
    width: 0;
    height: 0;
    border-left: 7px solid #222;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-top: 0.5em;
}

section.single .category ul li .is-active .sankaku {
    width: 0;
    height: 0;
    border-left: 7px solid #E31A1C;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-top: 0.5em;
}

.footer-singles .top-footer {
    display: none;
}

.single-bottom {
    text-align: center;
    margin-top: 6em;
    margin-bottom: -6.3em;
}

.single-bottom img {
    width: 194px;

}

section.bottom-tag {
    margin-top: -8.5em;
}

section.bottom-tag h3 {
    color: #08B15B;
    font-size: 18px;
    border-bottom: 1px solid #C1C1C1;
    margin-top: 0;
}

section.bottom-tag h3 span {
    color: #08B15B;
    font-size: 24px;
}

section.bottom-tag .content {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
}

section.bottom-tag .tag_list {
    font-size: 12px;
    color: #555555;
    padding: 0.2em 1em;
    border: 1px solid #c1c1c1;
    border-left: 4px solid #E4C016;
    text-align: center;
    display: inline-block;
}


/* add202505 */
.single-bottom img {
    width: 100px;
}

/* カテゴリグループのスタイル */
.service .content .category-group {
    margin-bottom: 40px;
}

.service .content .category-group:last-child {
    margin-bottom: 0;
}

/* カテゴリタイトルのスタイル */
.service .category-title {
    text-align: left;
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    margin-top: 2em;
    display: block;
}

.service .category-title span {
    font-size: inherit;
    color: inherit;
    font-family: inherit;
}

/* カテゴリ内の記事コンテナ - デスクトップ版（3列レイアウト） */
@media screen and (min-width: 1001px) {
    .category-posts {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2em 1.5em !important;
        text-align: center !important;
        margin-bottom: 2em !important;
    }

    .category-posts::after {
        display: none !important;
    }

    .category-posts .box {
        width: 100% !important;
        box-shadow: 0px 0px 10px #00000010 !important;
        padding: 2em !important;
        box-sizing: border-box !important;
    }

/* Hover elevation: match Works hover behavior on pointer devices */
/* NOTE: placed at top-level (not nested) later in file to avoid invalid nested @media */
}

/*============================
mobile style
============================*/

@media screen and (max-width: 1000px) and (min-width: 769px) {
    section.single .content {
        display: block;
    }

    section.single .content .txt {
        padding: 0;
        width: auto;
        max-width: 100%;
    }

    /* サービスページのメインコンテンツを通常のフローに戻す */
    section.service .content {
        display: block;
    }

    /* 2列レイアウト（769px-1000px） */
    .category-posts {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5em !important;
    }

    /* 2列表示時に左右のマージンを確保して、2列目が左端にくっつかないようにする */
    .category-posts {
        padding-left: 1rem; /* 必要に応じて調整 */
        padding-right: 1rem;
        box-sizing: border-box;
    }

    .category-posts .box {
    width: 100% !important;
    /* reduce bottom padding for 2-column layout */
    padding: 2em 2em 2em 2em !important;
        margin-bottom: 0 !important;
        box-shadow: 0px 0px 10px #00000010 !important;
        box-sizing: border-box !important;
    }

    .category-posts::after {
        display: none !important;
    }

    section.service .content .box {
        width: auto;
        /* ensure service boxes use same visual style as home/works */
        box-shadow:
            0px 2px 1px -1px rgba(0,0,0,0.2),
            0px 1px 1px 0px rgba(0,0,0,0.14),
            0px 1px 3px 0px rgba(0,0,0,0.12);
        border: 1px solid #e4e3e3;
        border-radius: 8px;
        overflow: hidden;
        transition: box-shadow .18s ease, transform .18s ease;
    }

    .service .content .box h3 {
        font-size: 20px;
        font-weight: 500;
        display: flex;
    }

    .service .content .box h3 span {
        font-size: 50px;
    }

    .main-services .service .content .box {
        width: auto;
        padding: 0 2em;
    /* reduced bottom padding to keep 2-col spacing tighter */
    padding-bottom: 2em;
    }

    .main-services .service .content .box:last-child {
        padding-bottom: 0;
    }

    /* Pagination spacing for 2-column layout: center and increase gap */
    .pagination-wrap {
        margin-top: 1.2em; /* add breathing room above pagination */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .pagination-wrap ul {
        gap: 0.9em; /* a bit more space between page items */
    }
    .pagination-wrap ul li a,
    .pagination-wrap ul li span {
        padding: .45em 1em; /* slightly larger clickable area */
        border-radius: 6px;
    }

    section.single .content .category h3 {
        font-size: 14px;
    }

    section.single .content .category-list-content {
        width: auto;
        margin-top: 5em;
    }

    section.single .content .txt .back a {
        font-size: 18px;
    }

    section.single .content .category h3 span {
        font-size: 18px;
    }

    section.single h2 {
        font-size: 24px;
    }

    section.single h2 span {
        font-size: 50px;
    }

    .single-bottom img {
        width: 136px;
        margin-bottom: 2em;
    }

    section.single .content .txt .txt-content {
        margin-bottom: 3em;
    }

    section.single .deta {
        display: block;
        margin-bottom: 1.5em;
    }

    section.single .deta span {
        margin-left: 1em;
    }

    section.single .deta .tag_list a {
        margin-top: 1em;
    }

    .service .btn {
        margin-right: 1em;
        margin-top: .5em;
    }
    
    .service .category-title {
        font-size: 24px;
        margin-top: 1.5em;
    }

    .single-bottom img {
        width: 80px;
    }

    section.service .content .box {
        padding: 2em 2em 4em 2em;
    }
}

@media screen and (max-width: 768px) {
    /* 1列レイアウト（768px以下） */
    .category-posts {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5em !important;
    }

    .category-posts .box {
        width: 100% !important;
        margin-bottom: 0 !important;
        padding: 2em !important;
        box-shadow: 0px 0px 10px #00000010 !important;
        box-sizing: border-box !important;
    }
    
    .service .category-title {
        font-size: 20px;
    }
}

/* ========== Service Single Sidebar (Subcategory Headings) ========== */
section.single .content .category ul li.subcat-heading {
    list-style: none;
    margin-top: 1.2em;
    padding: .45em .75em .4em .75em;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    color: #08B15B;
    background: linear-gradient(90deg,#E9FBF3 0%, #ffffff 80%);
    border-left: 4px solid #08B15B;
    border-radius: 2px;
}
section.single .content .category ul li.subcat-heading + li.subcat-heading { /* 連続した場合の余白調整 */
    margin-top: .8em;
}
section.single .content .category ul li.subcat-post {
    padding: .35em 0 .35em .4em;
    border-left: 1px solid #e2e2e2;
}
section.single .content .category ul li.subcat-post a span {
    min-width: 3.2em;
    display: inline-block;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    color: #08B15B;
}
section.single .content .category ul li.subcat-post.current a {
    font-weight: 600;
    color: #08B15B;
    position: relative;
}
section.single .content .category ul li.subcat-post.current a:before {
    /* ドット表示を無効化 */
    content: none !important;
}

/* === Adjust numbering size & spacing in service single sidebar === */
/* リセット: 以前のバッジ風スタイルを解除し元のシンプル表示に戻す */
section.single .content .category ul li.subcat-post a {
    gap: .45em; /* 余白を小さく */
    align-items: center;
    font-size: 13px; /* 記事名の文字サイズを小さく */
    line-height: 1.4;
}
section.single .content .category ul li.subcat-post a span {
    min-width: 2.2em; /* 余白縮小用に幅を短縮 */
    /* 他スタイルはそのまま */
}
@media (max-width:1000px){
  section.single .content .category ul li.subcat-post a { gap:.4em; }
  section.single .content .category ul li.subcat-post a span { min-width:2em; }
}

/* モバイルでさらに控えめに */
@media (max-width: 768px){
    section.single .content .category ul li.subcat-post a { font-size: 12px; }
}

/* ===== Service category filter & layout (added 20250810) ===== */
/* 
以下の定義は dynamic-search.css の .dynamic-search-layout に移行済み
.service-layout { display:flex; gap:3em; }
.service-filter { width:240px; flex:0 0 240px; }
@supports (position:sticky){
  .service-filter { position:sticky; top:calc(var(--fix-header-h, 80px) + 15px); align-self:flex-start; }
}
*/
/* Grid override for service filtered listing */
.category-posts.search-results { display:grid; grid-template-columns:repeat(3,1fr); gap:2em 1.5em; }
.category-posts.search-results .box {
    /* Material-like elevation 2 */
    box-shadow:
        0px 2px 1px -1px rgba(0,0,0,0.2),
        0px 1px 1px 0px rgba(0,0,0,0.14),
        0px 1px 3px 0px rgba(0,0,0,0.12);
    padding:2em;
    box-sizing:border-box;
    position:relative;
    background:#fff;
    border: 1px solid #e4e3e3;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}
.category-posts.search-results .box h3 { text-align:justify; font-size:20px; font-weight:500; display:flex; gap:.5em; margin:0 0 1em; align-items:center; }
.category-posts.search-results .box h3 span { font-size:48px; font-family:"Poppins", sans-serif; color:#08B15B; }
.category-posts.search-results .box .meta-bottom { margin-top:.8em; display:flex; flex-wrap:wrap; gap:.5em 1em; }
.category-posts.search-results .box .meta-bottom .cats, .category-posts.search-results .box .meta-bottom .tags { display:flex; flex-wrap:wrap; gap:.5em; }
.category-posts.search-results .box .meta-bottom .tag_list { font-size:11px; color:#555; padding:.2em .8em; border:1px solid #c1c1c1; border-left:4px solid #E4C016; text-align:center; display:inline-block; background:#fff; line-height:1.4; }
.category-posts.search-results .box .meta-bottom .tag_list.cat-item { border-left-color:#08B15B; background:#08B15B; color:#fff; border-color:#08B15B; }
/* Pagination reuse */
.pagination-wrap ul { list-style:none; display:flex; flex-wrap:wrap; gap:.5em; margin:0; padding:0; }
.pagination-wrap ul li a, .pagination-wrap ul li span { display:inline-block; padding:.5em .9em; font-size:14px; border:1px solid #ddd; border-radius:3px; line-height:1; background:#fff; }
.pagination-wrap ul li span.current { background:#08B15B; color:#fff; border-color:#08B15B; }
/* Responsive adjustments */
@media (max-width:1000px){
    /* 
    以下の定義は dynamic-search.css の .dynamic-search-layout に移行済み
    .service-layout { display:block; }
    .service-filter { width:auto; margin-bottom:2em; position:static; }
    */
    .search-filter-form ul.filter-list { max-height:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5em 1em; }
    .search-filter-form ul.filter-list li { margin:0; }
    /* 2列 / 1列表示時は個別ボックスをブロック化し、画像は左に160pxでfloatしてテキストを回り込ませる */
    /* .category-posts.search-results { display: block; } - dynamic-search.css に移行済み */
    .category-posts.search-results .box { display:block; overflow:hidden; margin-bottom:1.2em; }
    /* Keep material shadow, border and rounded corners on tablet */
    .category-posts.search-results .box {
            box-shadow:
                0px 2px 1px -1px rgba(0,0,0,0.2),
                0px 1px 1px 0px rgba(0,0,0,0.14),
                0px 1px 3px 0px rgba(0,0,0,0.12);
            border: 1px solid #e4e3e3;
            border-radius: 8px;
            overflow: hidden;
            transition: box-shadow .18s ease, transform .18s ease;
    }
    .category-posts.search-results .box h3 span { font-size:40px; }
}
@media (max-width:768px){
    /* .category-posts.search-results { display:block; } - dynamic-search.css に移行済み */
    .category-posts.search-results .box { padding:1.5em; display:block; overflow:hidden; }
    /* Mobile: ensure consistent visual style */
    .category-posts.search-results .box {
            box-shadow:
                0px 2px 1px -1px rgba(0,0,0,0.2),
                0px 1px 1px 0px rgba(0,0,0,0.14),
                0px 1px 3px 0px rgba(0,0,0,0.12);
            border: 1px solid #e4e3e3;
            border-radius: 8px;
            overflow: hidden;
            transition: box-shadow .18s ease, transform .18s ease;
    }
    .category-posts.search-results .box h3 { font-size:18px; }
    .category-posts.search-results .box h3 span { font-size:36px; }
    .search-filter-form ul.filter-list { grid-template-columns:repeat(2,minmax(0,1fr)); }

    /* Pagination: mobile (1-column) adjustments to center and space items nicely */
    .pagination-wrap {
        display: flex;
        justify-content: center; /* center on narrow screens */
        align-items: center;
        margin-top: 0.8em;
        margin-bottom: 1em;
        padding-left: 0; /* ensure no extra left offset */
    }
    .pagination-wrap ul {
        gap: 0.6em; /* slightly larger gap than default */
    }
    .pagination-wrap ul li a,
    .pagination-wrap ul li span {
        padding: .4em .9em; /* compact but tappable */
        border-radius: 6px;
        display: inline-block;
    }
}
@media (max-width:420px){
    .category-posts.search-results .box h3 span { font-size:32px; }
    .search-filter-form ul.filter-list { grid-template-columns:repeat(1,minmax(0,1fr)); }
}

/* === Service posts: 子カテゴリバッジ左上配置 (20250810 rev2) === */
/* バッジは .box を基準に絶対配置 */
.category-posts.search-results .box {
    position:relative;
    padding-top:3.4em;
    border: 1px solid #e4e3e3;
    border-radius: 8px;
    overflow: hidden;
    box-shadow:
        0px 2px 1px -1px rgba(0,0,0,0.2),
        0px 1px 1px 0px rgba(0,0,0,0.14),
        0px 1px 3px 0px rgba(0,0,0,0.12);
}
/* Strong hover override: ensure service boxes float the same as Works on pointer devices.
   Uses !important to override any earlier !important base rules. Placed at EOF to maximize cascade priority. */
@media (hover: hover) and (pointer: fine) {
    .category-posts.search-results .box:hover,
    .category-posts .box:hover,
    .service .content .box:hover,
    .service .content > .box:hover {
        /* Match Works hover: layered shadow + lift */
        box-shadow: 0px 8px 10px -5px rgba(0,0,0,0.2),
                0px 16px 24px 2px rgba(0,0,0,0.14),
                0px 6px 30px 5px rgba(0,0,0,0.12) !important;
        transform: translateY(-6px) !important;
        z-index: 3 !important; /* ensure shadow isn't clipped by siblings */
        will-change: transform, box-shadow;
    }
}
/* .meta-bottom は通常フロー。cats を .box 基準にするため relative 指定を除外 */
.category-posts.search-results .box .meta-bottom { position:static; }
.category-posts.search-results .box .meta-bottom .cats {
    position:absolute;
    top:.55em;
    left:.65em;
    display:flex;
    gap:.4em;
    z-index:3;
}
.category-posts.search-results .box .meta-bottom .cats .tag_list.cat-item { 
    font-size:11px; 
    line-height:1.2; 
    padding:.25em .6em; 
    border-radius:2px; 
    box-shadow:0 1px 2px rgba(0,0,0,.12); 
}
/* タグ一覧は従来の位置を維持 */
.category-posts.search-results .box .meta-bottom .tags { margin-top:.6em; }
/* h3 上余白微調整 (上部バッジと干渉防止) */
.category-posts.search-results .box h3 { margin-top:.2em; }
@media (max-width:1000px){
    .category-posts.search-results .box { padding-top:3.2em; }
}
@media (max-width:768px){
    .category-posts.search-results .box { padding-top:3em; }
    .category-posts.search-results .box .meta-bottom .cats .tag_list.cat-item { font-size:10px; }
}