/* スマホ・タブレット共通：並び順を小型→LP→一般に固定し縦積み */
@media (max-width: 768px) {
    .website-types-diagrams-wrapper {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .website-types-diagrams-wrapper > .type-original.small-type-new {
        order: 1;
        width: 100%;
    }

    .website-types-diagrams-wrapper > .type-original.lp-type-new {
        order: 2;
        width: 100%;
    }

    .website-types-diagrams-wrapper > .type-original.general-type-new {
        order: 3;
        width: 100%;
    }
}

/* inline gallery thumb near local CTA (unused) */
.inline-thumb-link, .inline-thumb { display: none; }
/* ========================================
 * ペンタ工房 テーマスタイル（クリーン版）
 * バージョン: 5.0.0
 * ======================================== */



/* ========================================
 * ウェブサイト構造図表（CSS再現）
 * ======================================== */

/* 一般的なホームページ構造図 */
.type-title {
    background: #1e3a8a;
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem auto 3rem auto;  /* 下マージンを3remに増加 */
    max-width: 800px;
    position: relative;
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.3);
    overflow-x: auto;
    padding-bottom: 2.5rem;  /* 下パディングを増加してスクロールバーとの間隔を確保 */
}

.type-title::-webkit-scrollbar {
    height: 16px;  /* 12px → 16px でより太く */
    margin-top: 30px;  /* 20px → 30px でさらに離す */
}

.type-title::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    margin: 0 4px;
}

.type-title::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.type-title::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.7);
}

.type-title-header {
    text-align: center;
    margin-bottom: 2rem;
}

/* LPのヘッダーのマージンを減らす */
.type-title-lp-new .type-title-header {
    margin-bottom: 1rem;
}

.type-title-main {
    color: white;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.type-title-sub {
    color: white;
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    opacity: 0.9;
}

.type-title-top-page {
    background: #e5e7eb;
    color: #374151;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0 auto 2rem auto;
    max-width: 200px;
    border: 2px solid #d1d5db;
}

.type-title-connector {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.type-title-connector-line {
    width: 2px;
    height: 30px;
    background: #9ca3af;
    position: relative;
}

.type-title-connector-line::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: -4px;
    width: 10px;
    height: 10px;
    background: #9ca3af;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.type-title-sections {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
    min-width: 600px;
}

.type-title-section {
    background: white;
    color: #374151;
    padding: 0.8rem 0.5rem;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid #d1d5db;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 製品案内グループ（青系） */
.type-title-section:nth-child(1) {
    background: #dbeafe;
    color: #1e40af;
    border-color: #3b82f6;
}

/* 社員紹介グループ（緑系） */
.type-title-section:nth-child(3) {
    background: #dcfce7;
    color: #166534;
    border-color: #22c55e;
}

/* お客様の声グループ（紫系） */
.type-title-section:nth-child(5) {
    background: #f3e8ff;
    color: #7c3aed;
    border-color: #a855f7;
}

.type-title-subsections {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    min-width: 600px;
}

.type-title-subsection-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.type-title-subsection-connector {
    width: 2px;
    height: 20px;
    background: #9ca3af;
    margin-bottom: 0.5rem;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.type-title-subsection-connector::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 25%;
    width: 8px;
    height: 8px;
    background: #9ca3af;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.type-title-subsection-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
    min-width: 150px;
}

.type-title-subsection-item {
    background: white;
    color: #374151;
    padding: 0.6rem 0.3rem;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
    font-size: 0.8rem;
    border: 1px solid #d1d5db;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 製品案内のサブアイテム（青系） */
.type-title-subsection-group:nth-child(1) .type-title-subsection-item {
    background: #dbeafe;
    color: #1e40af;
    border-color: #3b82f6;
}

/* 社員紹介のサブアイテム（緑系） */
.type-title-subsection-group:nth-child(2) .type-title-subsection-item {
    background: #dcfce7;
    color: #166534;
    border-color: #22c55e;
}

/* お客様の声のサブアイテム（紫系） */
.type-title-subsection-group:nth-child(3) .type-title-subsection-item {
    background: #f3e8ff;
    color: #7c3aed;
    border-color: #a855f7;
}

/* レスポンシブ対応 - レイアウトは維持し、横幅を詰める */
@media (max-width: 768px) {
    .type-title {
        padding: 1rem 0.5rem;
        padding-bottom: 2.5rem;  /* スクロールバー用の下パディングを維持 */
        margin: 0.5rem auto 3rem auto;  /* 下マージンを維持 */
    }
    
    .type-title-main {
        font-size: 1rem;
    }
    
    .type-title-sub {
        font-size: 0.8rem;
    }
    
    .type-title-sections {
        gap: 0.5rem;
        min-width: 480px;
    }
    
    .type-title-section {
        font-size: 0.7rem;
        padding: 0.4rem 0.2rem;
        min-height: 60px;
    }
    
    .type-title-subsections {
        gap: 1rem;
        min-width: 480px;
    }
    
    .type-title-subsection-items {
        gap: 0.3rem;
        min-width: 120px;
    }
    
    .type-title-subsection-item {
        font-size: 0.6rem;
        padding: 0.3rem 0.1rem;
        min-height: 40px;
    }
}

@media (max-width: 480px) {
    .type-title {
        padding: 0.8rem 0.3rem;
        padding-bottom: 2.5rem;  /* スクロールバー用の下パディングを維持 */
        margin: 0.3rem auto 3rem auto;  /* 下マージンを維持 */
    }
    
    .type-title-main {
        font-size: 0.9rem;
    }
    
    .type-title-sub {
        font-size: 0.7rem;
    }
    
    .type-title-sections {
        gap: 0.3rem;
        min-width: 400px;
    }
    
    .type-title-section {
        font-size: 0.6rem;
        padding: 0.3rem 0.1rem;
        min-height: 50px;
    }
    
    .type-title-subsections {
        gap: 0.8rem;
        min-width: 400px;
    }
    
    .type-title-subsection-items {
        gap: 0.2rem;
        min-width: 90px;
    }
    
    .type-title-subsection-item {
        font-size: 0.5rem;
        padding: 0.2rem 0.1rem;
        min-height: 35px;
    }
    
    
}

/* ========================================
 * 一般的なホームページ構造図（新規 - 料金表下用）
 * ======================================== */

/* 一般的なホームページ構造図（新規） */
.type-title-new {
    background: linear-gradient(135deg, #fef3c7, #fef7cd);
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem auto 3rem auto;
    max-width: 800px;
    position: relative;
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.3);
    overflow-x: auto;
    padding-bottom: 2.5rem;
}

.type-title-new::-webkit-scrollbar {
    height: 16px;
    margin-top: 30px;
}

.type-title-new::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    margin: 0 4px;
}

.type-title-new::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.type-title-new::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.7);
}

.type-title-header-new {
    text-align: center;
    margin-bottom: 2rem;
}

.type-title-main-new {
    color: #1e293b;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.type-title-sub-new {
    color: #475569;
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    opacity: 1;
}

.type-title-top-page-new {
    background: #e5e7eb;
    color: #374151;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0 auto 2rem auto;
    max-width: 200px;
    border: 2px solid #d1d5db;
}

.type-title-connector-new {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.type-title-connector-line-new {
    width: 2px;
    height: 30px;
    background: #9ca3af;
    position: relative;
}

.type-title-connector-line-new::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: -4px;
    width: 10px;
    height: 10px;
    background: #9ca3af;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.type-title-sections-new {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
    min-width: 600px;
}

.type-title-section-new {
    background: white;
    color: #374151;
    padding: 0.8rem 0.5rem;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid #d1d5db;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 製品案内グループ（青系） */
.type-title-section-new:nth-child(1) {
    background: #dbeafe;
    color: #1e40af;
    border-color: #3b82f6;
}

/* 会社案内グループ（黄色系） */
.type-title-section-new:nth-child(2) {
    background: #fef3c7;
    color: #92400e;
    border-color: #f59e0b;
}

/* 社員紹介グループ（緑系） */
.type-title-section-new:nth-child(3) {
    background: #dcfce7;
    color: #166534;
    border-color: #22c55e;
}

/* お問い合わせグループ（ピンク系） */
.type-title-section-new:nth-child(4) {
    background: #fce7f3;
    color: #9f1239;
    border-color: #ec4899;
}

/* お客様の声グループ（紫系） */
.type-title-section-new:nth-child(5) {
    background: #f3e8ff;
    color: #7c3aed;
    border-color: #a855f7;
}

/* Q&Aグループ（オレンジ系） */
.type-title-section-new:nth-child(6) {
    background: #fed7aa;
    color: #c2410c;
    border-color: #ea580c;
}

.type-title-subsections-new {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    min-width: 600px;
}

.type-title-subsection-group-new {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.type-title-subsection-connector-new {
    width: 2px;
    height: 20px;
    background: #9ca3af;
    margin-bottom: 0.5rem;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.type-title-subsection-connector-new::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 25%;
    width: 8px;
    height: 8px;
    background: #9ca3af;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.type-title-subsection-items-new {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
    min-width: 150px;
}

.type-title-subsection-item-new {
    background: white;
    color: #374151;
    padding: 0.6rem 0.3rem;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
    font-size: 0.8rem;
    border: 1px solid #d1d5db;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 製品案内のサブアイテム（青系） */
.type-title-subsection-group-new:nth-child(1) .type-title-subsection-item-new {
    background: #dbeafe;
    color: #1e40af;
    border-color: #3b82f6;
}

/* 社員紹介のサブアイテム（緑系） */
.type-title-subsection-group-new:nth-child(2) .type-title-subsection-item-new {
    background: #dcfce7;
    color: #166534;
    border-color: #22c55e;
}

/* お客様の声のサブアイテム（紫系） */
.type-title-subsection-group-new:nth-child(3) .type-title-subsection-item-new {
    background: #f3e8ff;
    color: #7c3aed;
    border-color: #a855f7;
}

/* レスポンシブ対応 - レイアウトは維持し、横幅を詰める */
@media (max-width: 768px) {
    .type-title-new {
        padding: 1rem 0.5rem;
        padding-bottom: 2.5rem;
        margin: 0.5rem auto 3rem auto;
    }
    
    .type-title-work-section-new {
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        max-width: 500px;
    }
    
    .type-title-main-new {
        font-size: 1rem;
    }
    
    .type-title-sub-new {
        font-size: 0.8rem;
    }
    
    .type-title-sections-new {
        gap: 0.5rem;
        min-width: 480px;
    }
    
    .type-title-section-new {
        font-size: 0.7rem;
        padding: 0.4rem 0.2rem;
        min-height: 60px;
    }
    
    .type-title-subsections-new {
        gap: 1rem;
        min-width: 480px;
    }
    
    .type-title-subsection-items-new {
        gap: 0.3rem;
        min-width: 120px;
    }
    
    .type-title-subsection-item-new {
        font-size: 0.6rem;
        padding: 0.3rem 0.1rem;
        min-height: 40px;
    }
}

@media (max-width: 480px) {
    .type-title-new {
        padding: 0.8rem 0.3rem;
        padding-bottom: 2.5rem;
        margin: 0.3rem auto 3rem auto;
    }
    
    .type-title-work-section-new {
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        max-width: 400px;
    }
    
    .type-title-main-new {
        font-size: 0.9rem;
    }
    
    .type-title-sub-new {
        font-size: 0.7rem;
    }
    
    .type-title-sections-new {
        gap: 0.3rem;
        min-width: 400px;
    }
    
    .type-title-section-new {
        font-size: 0.6rem;
        padding: 0.3rem 0.1rem;
        min-height: 50px;
    }
    
    .type-title-subsections-new {
        gap: 0.8rem;
        min-width: 400px;
    }
    
    .type-title-subsection-items-new {
        gap: 0.2rem;
        min-width: 90px;
    }
    
    .type-title-subsection-item-new {
        font-size: 0.5rem;
        padding: 0.2rem 0.1rem;
        min-height: 35px;
    }
}

/* ========================================
 * 小型ホームページ構造図（新規 - 料金表下用）
 * ======================================== */

.type-title-small-new {
    background: linear-gradient(135deg, #ffe5d4, #fff0e6);
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem auto 3rem auto;
    max-width: 600px;
    position: relative;
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.3);
    overflow-x: auto;
    padding-bottom: 2.5rem;
    border: 2px solid #ff6b35;
}

/* .website-types-diagrams-wrapper内の.type-title-small-newはmarginとmax-widthを調整（デフォルトCSSの後に配置） */
.website-types-diagrams-wrapper > .type-original.small-type-new > .type-title-small-new {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
}

.type-title-small-new::-webkit-scrollbar {
    height: 16px;
    margin-top: 30px;
}

.type-title-small-new::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    margin: 0 4px;
}

.type-title-small-new::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.type-title-small-new::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.7);
}

.type-title-sections-small-new {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
    min-width: 500px;
}

.type-title-section-small-new {
    background: white;
    color: #374151;
    padding: 0.8rem 0.5rem;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid #d1d5db;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 小型ホームページのセクションに色を追加 */
.type-title-section-small-new:nth-child(1) {
    background: #dbeafe;
    color: #1e40af;
    border-color: #3b82f6;
}

.type-title-section-small-new:nth-child(2) {
    background: #dcfce7;
    color: #166534;
    border-color: #22c55e;
}

.type-title-section-small-new:nth-child(3) {
    background: #f3e8ff;
    color: #7c3aed;
    border-color: #a855f7;
}

.type-title-section-small-new:nth-child(4) {
    background: #fef3c7;
    color: #92400e;
    border-color: #f59e0b;
}

.type-title-section-small-new:nth-child(5) {
    background: #fce7f3;
    color: #9f1239;
    border-color: #ec4899;
}

/* レスポンシブ対応 - 小型ホームページ（新規） */
@media (max-width: 768px) {
    .type-title-small-new {
        padding: 1rem 0.5rem;
        margin: 0.5rem;
    }
    
    .type-title-sections-small-new {
        gap: 0.5rem;
        min-width: 400px;
    }
    
    .type-title-section-small-new {
        font-size: 0.7rem;
        padding: 0.4rem 0.2rem;
        min-height: 60px;
    }
}

@media (max-width: 480px) {
    .type-title-small-new {
        padding: 0.8rem 0.3rem;
        margin: 0.3rem;
    }
    
    .type-title-sections-small-new {
        gap: 0.3rem;
        min-width: 320px;
    }
    
    .type-title-section-small-new {
        font-size: 0.6rem;
        padding: 0.3rem 0.1rem;
        min-height: 50px;
    }
}

/* ========================================
 * LP構造図（新規 - 料金表下用、小型と同じ構造）
 * ======================================== */

.type-title-lp-new {
    background: linear-gradient(135deg, #f3e8ff, #faf5ff);
    padding: 1rem 1.2rem;
    border-radius: 12px;
    margin: 2rem auto 3rem auto;
    max-width: 600px;
    position: relative;
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.3);
    overflow-x: auto;
    padding-bottom: 1rem;
    border: 2px solid #a855f7;
}

/* .website-types-diagrams-wrapper内の.type-title-lp-newはmarginとmax-widthを調整（デフォルトCSSの後に配置） */
.website-types-diagrams-wrapper > .type-original.lp-type-new > .type-title-lp-new {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
}

/* LPのタイトル文字色を調整（背景が薄い紫なので、濃い色に変更） */
.type-title-lp-new .type-title-main {
    color: #1e293b;
}

.type-title-lp-new .type-title-sub {
    color: #475569;
}

.type-title-lp-new::-webkit-scrollbar {
    height: 16px;
    margin-top: 30px;
}

.type-title-lp-new::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    margin: 0 4px;
}

.type-title-lp-new::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.type-title-lp-new::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.7);
}

.type-title-lp-items-new {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.2rem 0.5rem;
    align-items: center;
    justify-items: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto 0.5rem auto;
}

.type-title-lp-item-new {
    background: white;
    color: #374151;
    padding: 0.4rem 0.6rem;
    border-radius: 20px;
    text-align: center;
    font-weight: 600;
    font-size: 0.8rem;
    border: 1px solid #d1d5db;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

/* LPのアイテムに色を追加 */
.type-title-lp-item-new:nth-child(1) {
    background: #dbeafe;
    color: #1e40af;
    border-color: #3b82f6;
}

.type-title-lp-item-new:nth-child(3) {
    background: #dcfce7;
    color: #166534;
    border-color: #22c55e;
}

.type-title-lp-item-new:nth-child(5) {
    background: #f3e8ff;
    color: #7c3aed;
    border-color: #a855f7;
}

.type-title-lp-item-new:nth-child(7) {
    background: #fef3c7;
    color: #92400e;
    border-color: #f59e0b;
}

.type-title-lp-item-new:nth-child(9) {
    background: #fce7f3;
    color: #9f1239;
    border-color: #ec4899;
}

.type-title-lp-item-new:nth-child(11) {
    background: #fef2f2;
    color: #991b1b;
    border-color: #ef4444;
}

.type-title-lp-connector-new {
    width: 2px;
    height: 8px;
    background: #9ca3af;
    position: relative;
}

.type-title-lp-connector-new::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: -3px;
    width: 8px;
    height: 8px;
    background: #9ca3af;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* PC画面でも2列レイアウト */
.type-title-lp-item-new:nth-child(1) {
    grid-column: 1;
}

.type-title-lp-connector-new:nth-child(2) {
    grid-column: 1;
    width: 2px;
    height: 8px;
    background: #9ca3af;
    margin: 0 auto;
}

.type-title-lp-item-new:nth-child(3) {
    grid-column: 2;
}

.type-title-lp-connector-new:nth-child(4) {
    grid-column: 2;
    width: 2px;
    height: 8px;
    background: #9ca3af;
    margin: 0 auto;
}

.type-title-lp-item-new:nth-child(5) {
    grid-column: 1;
}

.type-title-lp-connector-new:nth-child(6) {
    grid-column: 1;
    width: 2px;
    height: 8px;
    background: #9ca3af;
    margin: 0 auto;
}

.type-title-lp-item-new:nth-child(7) {
    grid-column: 2;
}

.type-title-lp-connector-new:nth-child(8) {
    grid-column: 2;
    width: 2px;
    height: 8px;
    background: #9ca3af;
    margin: 0 auto;
}

.type-title-lp-item-new:nth-child(9) {
    grid-column: 1;
}

.type-title-lp-connector-new:nth-child(10) {
    grid-column: 1;
    width: 2px;
    height: 8px;
    background: #9ca3af;
    margin: 0 auto;
}

.type-title-lp-item-new:nth-child(11) {
    grid-column: 2;
}

.type-title-lp-connector-new:nth-child(12) {
    display: none;
}

/* LPフローチャートの最後に注釈を追加 */
.type-title-lp-note {
    text-align: center;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: #6b7280;
    font-style: italic;
    width: 100%;
    line-height: 1.1;
}

/* LPの「ペンタ工房の作業（一部）」をフローチャートの下に縦に配置（小型と同じ構造） */

/* レスポンシブ対応 - LP（新規、小型と同じ構造） */
@media (max-width: 768px) {
    .type-title-lp-new {
        padding: 1rem 0.5rem;
        margin: 0.5rem;
    }
    
    .type-title-lp-items-new {
        gap: 0.5rem 0.8rem;
        max-width: 400px;
        margin-bottom: 1.5rem;
    }
    
    .type-title-lp-item-new {
        font-size: 0.75rem;
        padding: 0.6rem 0.8rem;
        min-width: auto;
        width: 100%;
    }
    
    .type-title-lp-item-new:nth-child(1) {
        grid-column: 1;
    }
    
    .type-title-lp-connector-new:nth-child(2) {
        grid-column: 1;
        width: 2px;
        height: 8px;
        background: #9ca3af;
        margin: 0 auto;
    }
    
    .type-title-lp-item-new:nth-child(3) {
        grid-column: 2;
    }
    
    .type-title-lp-connector-new:nth-child(4) {
        grid-column: 2;
        width: 2px;
        height: 8px;
        background: #9ca3af;
        margin: 0 auto;
    }
    
    .type-title-lp-item-new:nth-child(5) {
        grid-column: 1;
    }
    
    .type-title-lp-connector-new:nth-child(6) {
        grid-column: 1;
        width: 2px;
        height: 8px;
        background: #9ca3af;
        margin: 0 auto;
    }
    
    .type-title-lp-item-new:nth-child(7) {
        grid-column: 2;
    }
    
    .type-title-lp-connector-new:nth-child(8) {
        grid-column: 2;
        width: 2px;
        height: 8px;
        background: #9ca3af;
        margin: 0 auto;
    }
    
    .type-title-lp-item-new:nth-child(9) {
        grid-column: 1;
    }
    
    .type-title-lp-connector-new:nth-child(10) {
        grid-column: 1;
        width: 2px;
        height: 8px;
        background: #9ca3af;
        margin: 0 auto;
    }
    
    .type-title-lp-item-new:nth-child(11) {
        grid-column: 2;
    }
    
    .type-title-lp-connector-new:nth-child(12) {
        display: none;
    }
    
    .type-title-lp-item-new {
        font-size: 0.75rem;
        padding: 0.6rem 0.8rem;
        min-width: auto;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .type-title-lp-new {
        padding: 0.8rem 0.3rem;
        margin: 0.3rem;
    }
    
    .type-title-lp-items-new {
        gap: 0.4rem 0.6rem;
        max-width: 350px;
        margin-bottom: 1.5rem;
    }
    
    .type-title-lp-item-new {
        font-size: 0.65rem;
        padding: 0.5rem 0.6rem;
        min-width: auto;
        width: 100%;
    }
    
}

/* ========================================
 * ペンタ工房の作業（一部）セクション（新規 - 3つ共通）
 * ======================================== */

.type-title-work-section-new {
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    background: #f8f9fa;
    width: 90%;
    max-width: 600px;
    box-sizing: border-box;
    display: block;
    border: 2px solid #cbd5e1;
}

.type-title-work-heading-new {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #1e293b;
    text-align: center;
}

/* ペンタ工房の作業（一部）内のタグコンテナを横並びレイアウトに */
.type-title-work-section-new > div:not(.type-title-work-heading-new) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

/* ========================================
 * 小型ホームページ構造図
 * ======================================== */

.type-title-small {
    background: #1e3a8a;
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem auto 3rem auto;  /* 下マージンを3remに増加 */
    max-width: 600px;
    position: relative;
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.3);
    overflow-x: auto;
    padding-bottom: 2.5rem;  /* 下パディングを増加してスクロールバーとの間隔を確保 */
}

/* パソコン用モニターでレイアウト調整 */
@media (min-width: 769px) {
    .types-original-flowchart-wrapper {
        display: grid;
        grid-template-rows: auto auto;
        gap: 0.5rem;
    }
    
    .types-original-flowchart {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        align-items: start;
    }
    
    .type-original.general-type {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }
    
    .type-original.general-type .type-title {
        padding: 1.5rem;
    }
    
    .type-original.small-type {
        margin: 0;
        margin-top: 2rem;
    }
    
    .type-original.lp-type {
        margin: 0;
    }
    
    .type-title-small {
        margin: 0;
        max-width: none;
        padding: 1.5rem;
    }
    
    .type-title-lp {
        margin: 0;
        max-width: none;
        padding: 1.5rem;
    }
    
    /* PC画面での新規セクションのレイアウト */
    /* h2とh3は全幅を確保（flexコンテナの影響を受けないように） */
    section.pricing-comparison h2.heading-box,
    section.pricing-comparison > .container h2.heading-box,
    section.pricing-comparison > .container > .h2-group-wrapper h2.heading-box,
    section.pricing-comparison h3,
    section.pricing-comparison > .container h3 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        box-sizing: border-box;
        display: block;
    }
    
    /* h3の改行を有効化 */
    h3[style*="ペンタ工房の料金プラン"],
    h3[style*="text-align: center"][style*="ペンタ工房"] {
        white-space: normal;
        word-break: break-word;
        max-width: 100%;
        width: 100%;
        display: block;
    }
    
    /* 親要素をflexコンテナにする（h2とh3を除く） */
    /* h3の後の要素のみをflexコンテナにする */
    h3[style*="text-align: center"] ~ .type-original.small-type-new,
    h3[style*="text-align: center"] ~ .type-original.lp-type-new,
    h3[style*="text-align: center"] ~ .type-original.general-type-new {
        display: flex;
        flex-direction: column;
    }
    
    /* 親要素をflexコンテナにする（より広い範囲、h2とh3を除く） */
    /* h3「ホームページの種類とペンタ工房の作業」の後の要素を囲む親要素をflexコンテナにする */
    h3[style*="ホームページの種類とペンタ工房の作業"] ~ .type-original.small-type-new,
    h3[style*="ホームページの種類とペンタ工房の作業"] ~ .type-original.lp-type-new,
    h3[style*="ホームページの種類とペンタ工房の作業"] ~ .type-original.general-type-new {
        display: inline-block;
    }
    
    /* h3「ホームページの種類とペンタ工房の作業」の後の3つの図を囲む親要素をflexコンテナにする */
    section.pricing-comparison > .container:has(h3[style*="ホームページの種類とペンタ工房の作業"]) {
        display: flex;
        flex-direction: column;
    }
    
    /* h3「ホームページの種類とペンタ工房の作業」の直後の3つの図を囲む仮想的な親要素を作る */
    h3[style*="ホームページの種類とペンタ工房の作業"] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
    
    /* h3「ホームページの種類とペンタ工房の作業」の後の3つの図を囲む親要素をflexコンテナにする */
    .website-types-diagrams-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        width: 100%;
        gap: 1rem;
    }
    
    /* 小型とLPを横並びにする（h3「ホームページの種類とペンタ工房の作業」の後のみ） */
    .website-types-diagrams-wrapper > .type-original.small-type-new {
        order: 1;
        flex: 0 0 calc((100% - 1rem) / 2);
        width: calc((100% - 1rem) / 2);
        max-width: calc((100% - 1rem) / 2);
        margin: 0;
        display: block;
        box-sizing: border-box;
    }
    
    /* 小型ホームページ内の.type-title-small-newのmarginとmax-widthを調整 */
    .website-types-diagrams-wrapper > .type-original.small-type-new > .type-title-small-new {
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* 小型ホームページ内の.type-title-sections-small-newのmin-widthを調整 */
    .website-types-diagrams-wrapper > .type-original.small-type-new .type-title-sections-small-new {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
    
    .website-types-diagrams-wrapper > .type-original.lp-type-new {
        order: 2;
        flex: 0 0 calc((100% - 1rem) / 2);
        width: calc((100% - 1rem) / 2);
        max-width: calc((100% - 1rem) / 2);
        margin: 0;
        display: block;
        box-sizing: border-box;
    }
    
    /* LP内の.type-title-lp-newのmarginとmax-widthを調整 */
    .website-types-diagrams-wrapper > .type-original.lp-type-new > .type-title-lp-new {
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* LP内の.type-title-lp-items-newのmax-widthとmarginを調整 */
    .website-types-diagrams-wrapper > .type-original.lp-type-new .type-title-lp-items-new {
        max-width: 100%;
        width: 100%;
        margin: 0 auto 0.5rem auto;
        box-sizing: border-box;
    }
    
    /* 一般を最後に配置（h3「ホームページの種類とペンタ工房の作業」の後のみ） */
    .website-types-diagrams-wrapper > .type-original.general-type-new {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        margin: 0;
        clear: both;
    }
    
    /* LPセクションの「ペンタ工房の作業（一部）」内のタグコンテナを調整 */
    .service-item {
        margin-bottom: 0.4rem;
        font-size: 0.95rem;
        color: #f1f5f9;
        padding-left: 0.5rem;
        position: relative;
    }
    
    .service-item::before {
        content: "・";
        position: absolute;
        left: 0;
        color: #f1f5f9;
    }
}

.type-title-small::-webkit-scrollbar {
    height: 16px;  /* 12px → 16px でより太く */
    margin-top: 30px;  /* 20px → 30px でさらに離す */
}

.type-title-small::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    margin: 0 4px;
}

.type-title-small::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.type-title-small::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.7);
}

.type-title-sections-small {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
    min-width: 500px;
}

.type-title-section-small {
    background: white;
    color: #374151;
    padding: 0.8rem 0.5rem;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid #d1d5db;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* レスポンシブ対応 - 小型ホームページ */
@media (max-width: 768px) {
    .type-title-small {
        padding: 1rem 0.5rem;
        margin: 0.5rem;
    }
    
    .type-title-sections-small {
        gap: 0.5rem;
        min-width: 400px;
    }
    
    .type-title-section-small {
        font-size: 0.7rem;
        padding: 0.4rem 0.2rem;
        min-height: 60px;
    }
}

@media (max-width: 480px) {
    .type-title-small {
        padding: 0.8rem 0.3rem;
        margin: 0.3rem;
    }
    
    .type-title-sections-small {
        gap: 0.3rem;
        min-width: 320px;
    }
    
    .type-title-section-small {
        font-size: 0.6rem;
        padding: 0.3rem 0.1rem;
        min-height: 50px;
    }
}

/* ========================================
 * LP構造図
 * ======================================== */

.type-title-lp {
    background: #1e3a8a;
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem auto;
    max-width: 300px;
    position: relative;
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.3);
}

.type-title-lp-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.type-title-lp-item {
    background: white;
    color: #374151;
    padding: 1rem 1.5rem;
    border-radius: 20px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid #d1d5db;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.type-title-lp-connector {
    width: 2px;
    height: 15px;
    background: #9ca3af;
    position: relative;
}

.type-title-lp-connector::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: -3px;
    width: 8px;
    height: 8px;
    background: #9ca3af;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* レスポンシブ対応 - LP */
@media (max-width: 768px) {
    .type-title-lp {
        padding: 1rem 0.5rem;
        margin: 0.5rem auto;
        max-width: 250px;
    }
    
    .type-title-lp-item {
        font-size: 0.8rem;
        padding: 0.8rem 1rem;
        min-width: 100px;
    }
}

@media (max-width: 480px) {
    .type-title-lp {
        padding: 0.8rem 0.3rem;
        margin: 0.3rem auto;
        max-width: 200px;
    }
    
    .type-title-lp-item {
        font-size: 0.7rem;
        padding: 0.6rem 0.8rem;
        min-width: 80px;
    }
}

/* ========================================
 * カラーパレット定義
 * ======================================== */
:root {
    /* メインカラー（信頼感のある深い青） */
    --primary-color: #1e3a8a;
    --primary-light: #3b82f6;
    --primary-dark: #1e40af;
    
    /* セカンダリカラー（温かみのあるオレンジ） */
    --secondary-color: #ea580c;
    --secondary-light: #fb923c;
    --secondary-dark: #c2410c;
    
    /* アクセントカラー（成功・安心の緑） */
    --accent-color: #059669;
    --accent-light: #10b981;
    --accent-dark: #047857;
    
    /* ニュートラルカラー */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-light: #9ca3af;
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --border-color: #e5e7eb;
    --border-light: #f3f4f6;
    
    /* ステータスカラー */
    --success-color: #059669;
    --warning-color: #d97706;
    --error-color: #dc2626;
    --info-color: #0284c7;
    
    /* グラデーション */
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    --gradient-secondary: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
    --gradient-accent: linear-gradient(135deg, var(--accent-color), var(--accent-light));
    
    /* シャドウ */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 基本設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: linear-gradient(135deg, #fefefe 0%, #faf9f7 50%, #f5f3f0 100%);
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}





























/* ========================================
 * ヘッダー・ナビゲーション（新規作成）
 * ======================================== */

/* シンプルヘッダー */
.simple-header {
    background: linear-gradient(135deg, #1e293b, #334155);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

/* ヘッダーを隠す（下スクロール時） */
.simple-header.header-hidden {
    transform: translateY(-100%);
    box-shadow: none;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.simple-header .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.simple-header .logo img {
    height: 24px;
    max-width: 100px;
    width: auto;
    object-fit: contain;
    display: inline-block;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.simple-header .nav-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    max-width: 600px;
}

.simple-header .nav-menu a {
    text-decoration: none;
    color: #e2e8f0;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.3;
}

.simple-header .nav-menu a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

/* ブログドロップダウンメニュー */
.nav-menu-item-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    text-decoration: none;
    color: #e2e8f0;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.3;
    display: block;
}

.nav-dropdown-content {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: linear-gradient(135deg, #1e293b, #334155);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    min-width: 280px;
    max-width: 320px;
    max-height: 500px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    margin-top: 8px;
}

.nav-menu-item-dropdown:hover .nav-dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ドロップダウンリストのスタイル */
.nav-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 15px;
}

.nav-dropdown-list li {
    margin-bottom: 8px;
    padding: 5px 0;
}

.nav-dropdown-list li:last-child {
    margin-bottom: 0;
}

.nav-dropdown-list li a {
    text-decoration: none;
    color: #e2e8f0;
    font-weight: 500;
    font-size: 14px;
    display: block;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.nav-dropdown-list li a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

/* サブメニューのスタイル */
.nav-dropdown-list li.has-submenu > a {
    position: relative;
    padding-right: 30px;
}

.nav-dropdown-list li.has-submenu > a::after {
    content: '▶';
    position: absolute;
    right: 12px;
    font-size: 10px;
    opacity: 0.6;
}

.nav-dropdown-sublist {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0 0 0 20px;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
}

.nav-dropdown-sublist li {
    margin-bottom: 6px;
    padding: 0;
}

.nav-dropdown-sublist li:last-child {
    margin-bottom: 0;
}

.nav-dropdown-sublist li a {
    font-size: 13px;
    color: #cbd5e1;
    padding: 6px 12px;
    position: relative;
}

/* 専門ブログの孫メニューにアイコンを追加（PC画面） */
.nav-dropdown-sublist li a[href*="camera-photography-guide"]::before,
.nav-dropdown-sublist li a[href*="shiga-homepage-seisaku"]::before,
.nav-dropdown-sublist li a[href*="shiga-camera-walk"]::before,
.nav-dropdown-sublist li a[href*="production-behind-scenes"]::before,
.nav-dropdown-sublist li a[href*="marketing-communication"]::before {
    position: absolute;
    left: 12px;
}

.nav-dropdown-sublist li a[href*="camera-photography-guide"]::before {
    content: '📷';
}

.nav-dropdown-sublist li a[href*="shiga-homepage-seisaku"]::before {
    content: '💻';
}

.nav-dropdown-sublist li a[href*="shiga-camera-walk"]::before {
    content: '🚶';
}

.nav-dropdown-sublist li a[href*="production-behind-scenes"]::before {
    content: '📝';
}

.nav-dropdown-sublist li a[href*="marketing-communication"]::before {
    content: '📢';
}

.nav-dropdown-sublist li a[href*="camera-photography-guide"],
.nav-dropdown-sublist li a[href*="shiga-homepage-seisaku"],
.nav-dropdown-sublist li a[href*="shiga-camera-walk"],
.nav-dropdown-sublist li a[href*="production-behind-scenes"],
.nav-dropdown-sublist li a[href*="marketing-communication"] {
    padding-left: 2.5em;
}

.nav-dropdown-sublist li a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

/* レスポンシブ対応：タブレット・スマホ */
@media screen and (max-width: 767px) {
    .nav-menu-item-dropdown:hover .nav-dropdown-content {
        display: none;
    }
}

/* ヘッダー右側コンテナ */
.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ヘッダーCTAボタンコンテナ（2つ並べる用） */
.header-cta-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ヘッダーCTAボタン（デスクトップ用） */
.header-cta-btn {
    display: inline-block;
    background: #ff6900;
    color: white;
    padding: 0.6rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: normal;
    line-height: 1.3;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 105, 0, 0.3);
    text-align: center;
    min-width: 100px;
    border: 2px solid transparent;
}

.header-cta-btn:hover {
    background: #e55a00;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 105, 0, 0.5);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.header-cta-btn:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 3px 10px rgba(255, 105, 0, 0.4);
}

/* プライマリCTAボタン（メインサービス） */
.header-cta-primary {
    background: #ff6900;
}

.header-cta-primary:hover {
    background: #e55a00;
}

/* セカンダリCTAボタン（お試しサービス） */
.header-cta-secondary {
    background: #0693e3;
    box-shadow: 0 2px 8px rgba(6, 147, 227, 0.3);
}

.header-cta-secondary:hover {
    background: #0578c2;
    box-shadow: 0 6px 20px rgba(6, 147, 227, 0.5);
}

/* ハンバーガーボタン */
.hamburger-btn {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 12px;
    border: 2px solid #ffffff;
    background: linear-gradient(135deg, #1a365d, #2d5a87);
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(26, 54, 93, 0.3);
}

.hamburger-btn:hover {
    background: linear-gradient(135deg, #2d5a87, #1a365d);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 54, 93, 0.4);
}

.hamburger-line {
    width: 28px;
    height: 3px;
    background: #ffffff;
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* PC画面ではbody.menu-openのスタイルを無効化 */
@media (min-width: 769px) {
    /* bodyのスタイルを強制的にリセット */
    body.menu-open,
    body {
        overflow: visible;
        position: static;
        width: 100%;
        max-width: 100%;
        top: auto;
        left: auto;
        right: auto;
        margin: 0;
        padding: 0;
    }
    
    /* html要素もリセット */
    html {
        width: 100%;
        max-width: 100%;
        overflow-x: visible;
    }
    
    /* PC画面でcontainer-fluid.contentが正しく表示されるように */
    .container-fluid.content,
    body .container-fluid.content,
    html body .container-fluid.content {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }
    
    /* .contentクラスのmax-width制限を解除（container-fluidと組み合わせた場合） */
    .container-fluid.content,
    body .container-fluid.content {
        max-width: none;
    }
    
    /* .content-Wrapも確認 */
    .content-Wrap {
        width: 100%;
        max-width: 100%;
    }
    
    /* .content .rowが正しく表示されるように */
    .container-fluid.content .row {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }
    
    /* サイドバーが表示されるように */
    .container-fluid.content .col-lg-4,
    body .container-fluid.content .col-lg-4,
    html body .container-fluid.content .col-lg-4 {
        display: block;
        visibility: visible;
        width: 300px;
        min-width: 300px;
        max-width: 300px;
        flex: 0 0 300px;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    /* メインコンテンツカラム */
    .container-fluid.content .col-lg-8 {
        flex: 1;
        min-width: 0;
        display: block;
        visibility: visible;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    /* footerが表示されるように */
    .footer {
        position: relative;
        width: 100%;
        max-width: 100%;
        display: block;
        visibility: visible;
        margin: 4rem 0 0 0;
        padding: 3rem 0 2rem;
        opacity: 1;
    }
    
    /* widget-area（サイドバー内）が表示されるように */
    .widget-area,
    aside.widget-area {
        display: block;
        visibility: visible;
        opacity: 1;
    }
}

/* モバイルメニュー */
.simple-header .mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 999;
    padding: 0;
    overflow-y: visible;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
}

.simple-header .mobile-menu.active {
    display: flex;
}

.mobile-menu-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.4rem 20px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
    position: relative;
}

.mobile-menu-title {
    font-size: 0.55rem;
    font-weight: 600;
    color: #333;
    text-align: center;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #333;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background 0.3s ease;
    position: absolute;
    right: 20px;
}

.close-btn:hover {
    background: #f8f9fa;
}

.mobile-menu-items {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: visible;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu-item {
    display: block;
    padding: 0.4rem 20px;
    color: #333;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    line-height: 1.2;
}

.mobile-menu-item:hover {
    background: #f8f9fa;
    color: #0693e3;
}

/* モバイルメニューのドロップダウン */
.mobile-menu-item-dropdown {
    position: relative;
}

.mobile-dropdown-trigger {
    font-weight: 700;
}

.mobile-dropdown-content {
    max-height: 2000px;
    overflow: visible;
    background: #f8f9fa;
    display: block;
}

.mobile-menu-item-dropdown.active .mobile-dropdown-content {
    max-height: 2000px;
}

.mobile-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-dropdown-list li {
    margin: 0;
    padding: 0;
}

.mobile-dropdown-list li a {
    padding: 0.35rem 20px 0.35rem 40px;
    font-size: 0.9rem;
    line-height: 1.2;
}

.mobile-dropdown-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #e9ecef;
}

.mobile-dropdown-sublist li a {
    padding: 0.3rem 20px 0.3rem 60px;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.2;
}

/* 専門ブログの孫メニューにアイコンを追加 */
.mobile-dropdown-sublist li a[href*="camera-photography-guide"]::before {
    content: '📷';
    margin-right: 8px;
}

.mobile-dropdown-sublist li a[href*="shiga-homepage-seisaku"]::before {
    content: '💻';
    margin-right: 8px;
}

.mobile-dropdown-sublist li a[href*="shiga-camera-walk"]::before {
    content: '🚶';
    margin-right: 8px;
}

.mobile-dropdown-sublist li a[href*="production-behind-scenes"]::before {
    content: '📝';
    margin-right: 8px;
}

.mobile-dropdown-sublist li a[href*="marketing-communication"]::before {
    content: '📢';
    margin-right: 8px;
}

/* 特定の子メニュー項目に「◆」マークを追加 */
.mobile-dropdown-list li a[href*="homepage-production-insider"]::before,
.mobile-dropdown-list li a[href*="pentad-news"]::before,
.mobile-dropdown-list li a[href*="pentakoubou-service"]::before {
    content: '◆';
    margin-right: 8px;
    color: #0693e3;
    font-size: 0.85em;
}

/* モバイルメニューCTAボタン */
.mobile-cta-btn {
    display: block;
    background: #ff6900;
    color: white;
    padding: 0.75rem 20px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 8px;
    margin-top: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(255, 105, 0, 0.3);
    border: 2px solid transparent;
    line-height: 1.4;
}

.mobile-cta-btn:hover {
    background: #e55a00;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 105, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.mobile-cta-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(255, 105, 0, 0.3);
}

/* モバイルメニューセカンダリCTAボタン */
.mobile-cta-btn-secondary {
    display: block;
    background: #0693e3;
    color: white;
    padding: 0.75rem 20px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 8px;
    margin-top: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(6, 147, 227, 0.3);
    border: 2px solid transparent;
    line-height: 1.4;
}

.mobile-cta-btn-secondary:hover {
    background: #0578c2;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(6, 147, 227, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.mobile-cta-btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(6, 147, 227, 0.3);
}

.mobile-menu-contact {
    padding: 0.75rem 20px;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.mobile-phone-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    background: #0693e3;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    line-height: 1.4;
}

.mobile-phone-link:hover {
    background: #005a87;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(6, 147, 227, 0.3);
}

/* メインコンテンツ */
.main-content {
    margin-top: 0;
    padding: 2rem;
}

/* ========================================
 * ページネーション不要テキスト非表示
 * ======================================== */

/* WordPressのページネーション関連の不要なテキストを完全非表示 */
.navigation.pagination h2,
.navigation.pagination .screen-reader-text,
.posts-navigation h2,
.posts-navigation .screen-reader-text,
.page-numbers-text,
.nav-subtitle,
.nav-title {
  display: none;
  visibility: hidden;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* ページネーションを中央寄せ - 使いやすいデザイン */
.navigation.pagination {
  text-align: center;
  margin: 2rem auto;
}

.posts-navigation {
  text-align: center;
  margin: 2rem auto;
}

/* ページネーション番号のスタイル改善 */
.navigation.pagination .page-numbers,
.posts-navigation .page-numbers {
  display: inline-block;
  padding: 8px 12px;
  margin: 0 4px;
  font-size: 16px;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: #ffffff;
  transition: all 0.2s ease;
}

/* ページネーション番号のホバー効果 */
.navigation.pagination .page-numbers:hover,
.posts-navigation .page-numbers:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
  transform: translateY(-1px);
}

/* 現在のページ番号 */
.navigation.pagination .page-numbers.current,
.posts-navigation .page-numbers.current {
  background-color: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
}

/* 前へ・次へボタン */
.navigation.pagination .prev,
.navigation.pagination .next,
.posts-navigation .prev,
.posts-navigation .next {
  font-weight: 600;
  padding: 8px 16px;
}

/* ========================================
 * Core Web Vitals最適化
 * ======================================== */

/* 画像の最適化 */
img {
  max-width: 100%;
  height: auto;
}

/* WebP画像の最適化 */
img[src$=".webp"] {
  object-fit: cover;
  will-change: transform;
}

/* モバイル画像の最適化 */
@media (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* ========================================
 * フッター
 * ======================================== */

.footer {
    background: linear-gradient(135deg, #0f172a, #1e293b, #334155);
    color: white;
    padding: 3rem 0 2rem;
    margin-top: 4rem;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.02), transparent, rgba(255,255,255,0.02));
    pointer-events: none;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-main {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-company-name {
    font-size: 1.4rem;
    font-weight: bold;
    color: white;
    margin-bottom: 0.8rem;
}


/* 工房主からひとこと タイトルリンク - 基本スタイル */
.personal-touch-text h3 a {
    color: #1a365d;
    text-decoration: underline;
    text-decoration-color: #2d5a87;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(26, 54, 93, 0.1);
    font-weight: 600;
    line-height: 1.4;
}

/* 1つ目の「工房主からひとこと」- ピンク系 */
.personal-touch .personal-touch-text h3 a {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.20), rgba(255, 192, 203, 0.15));
    border-color: rgba(255, 182, 193, 0.4);
}

/* 2つ目の「工房主からひとこと」- ブルー系 */
.one-man-operation .personal-touch-text h3 a {
    background: linear-gradient(135deg, rgba(173, 216, 230, 0.20), rgba(176, 224, 230, 0.15));
    border-color: rgba(173, 216, 230, 0.4);
}

/* 3つ目の「工房主からひとこと」- グリーン系 */
.professional-touch .personal-touch-text h3 a {
    background: linear-gradient(135deg, rgba(144, 238, 144, 0.20), rgba(152, 251, 152, 0.15));
    border-color: rgba(144, 238, 144, 0.4);
}

.personal-touch-text h3 a:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #2d5a87, #1a365d);
    border-color: #1a365d;
    text-decoration-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(26, 54, 93, 0.3);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .personal-touch-text h3 a {
        padding: 10px 14px;
    font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .personal-touch-text h3 a {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}

/* 料金表のSEO強化スタイル */
.pricing-subtitle {
    font-size: 1.2rem;
    color: #64748b;
    text-align: center;
    margin: 1rem 0 2rem 0;
    font-weight: 500;
}

.pricing-table-title {
    font-size: 1.5rem;
    color: #1a365d;
    text-align: center;
    margin: 0 0 1.5rem 0;
    font-weight: 600;
    border-bottom: 2px solid #2d5a87;
    padding-bottom: 0.5rem;
}

.price-display {
    font-size: 1.1rem;
    font-weight: bold;
    color: #dc2626;
    display: block;
    margin-top: 0.25rem;
}

/* 料金表のアクセシビリティ向上 */
.pricing-table {
    position: relative;
}

.pricing-table::before {
    content: "ホームページ制作料金プラン詳細比較表";
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* 専門ブログセクション */
.footer-approach-section {
    margin-top: 1.5rem;
}


.footer-approach-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-approach-list li {
    margin-bottom: 0.4rem;
}

.footer-approach-link {
    color: #cbd5e0;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.footer-approach-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.footer-approach-link:hover::before {
    left: 100%;
}

.footer-approach-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

.approach-icon {
    font-size: 1.2rem;
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.footer-specialty-blogs {
    margin-top: 1.5rem;
}

.footer-blogs-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    color: #ffffff;
}

.footer-blogs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-blogs-list li {
    margin-bottom: 0.4rem;
}

.footer-blogs-list a {
    color: #cbd5e0;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-blogs-list a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.footer-company-info {
    flex: 1;
}

.footer-contact-info {
    flex: 1;
}

.footer-service-info {
    flex: 1;
}


.footer-company-description {
    font-size: 1rem;
    line-height: 1.4;
    color: #cbd5e1;
    margin: 0;
    font-weight: 500;
}


.footer-contact-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-phone,
.footer-email,
.footer-address {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-icon {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.phone-link,
.email-link {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.phone-link:hover,
.email-link:hover {
    color: #93c5fd;
    text-decoration: none;
}

.address-text {
    color: #cbd5e1;
    line-height: 1.4;
    font-size: 0.95rem;
}



.footer-cta-section {
    text-align: center;
    margin-bottom: 2rem;
}

.footer-content p {
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 0;
}

/* フッターお問い合わせセクション */
.footer-contact-section {
    margin-bottom: 1.5rem;
    padding: 1.5rem 0;
    background: linear-gradient(135deg, var(--gradient-primary));
    border-radius: 12px;
    text-align: center;
}

.footer-contact-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: white;
    margin: 0 0 1.2rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.3;
}

.footer-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    color: var(--text-primary);
    padding: 0.9rem 1.8rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.footer-contact-btn:hover {
    background: var(--gradient-secondary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.footer-contact-btn .btn-icon {
    font-size: 1.1rem;
}

.footer-copyright {
    padding-top: 0.8rem;
    border-top: 1px solid #e0e0e0;
    text-align: right;
}

/* フッターリンクセクション */
.footer-links-info {
    margin-top: 1.5rem;
}

.footer-links-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #ffffff;
}

.footer-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.footer-links-column h5 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #e2e8f0;
}

.footer-links-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-column li {
    margin-bottom: 0.3rem;
}

.footer-links-column a {
    color: #cbd5e0;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.footer-links-column a:hover {
    color: #ffffff;
    text-decoration: underline;
}


/* レスポンシブ対応 */
@media (max-width: 768px) {
    .footer-links-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
 * ボックスレイアウト基盤
 * ======================================== */

/* 全体的なボックス化 */
.section-box {
    background: white;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    margin: 2rem 0;
    overflow: hidden;
    position: relative;
}

.section-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
}

.section-box-header {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
}

.section-box-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-box-icon {
    font-size: 1.8rem;
    color: var(--primary-color);
}

.section-box-content {
    padding: 2rem;
}

/* コンテンツボックス */
.content-box {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    margin: 1rem 0;
    transition: all 0.3s ease;
}

.content-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.content-box-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-light);
}

.content-box-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.content-box-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-primary);
    margin: 0;
}

.content-box-text {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* カードレイアウト */
.card-grid {
    display: grid;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.card {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.card-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: 1rem 1.5rem;
    font-weight: bold;
    font-size: 1.1rem;
}

.card-body {
    padding: 1.5rem;
}

.card-footer {
    background: var(--bg-secondary);
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* ハイライトボックス */
.highlight-box {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
    color: white;
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    text-align: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.highlight-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(30deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(30deg); }
}

.highlight-box-content {
    position: relative;
    z-index: 2;
}

.highlight-box h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.highlight-box p {
    font-size: 1.1rem;
    opacity: 0.95;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

/* ========================================
 * 見出しボックス化
 * ======================================== */

/* h2見出しボックス（メインセクション用） */
h2.heading-box {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    margin: 2rem 0 0 0;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    position: relative;
    overflow: hidden;
}

h2.heading-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
}

h2.heading-box:hover::before {
    left: 100%;
}

h2.heading-box .heading-icon {
    font-size: 2rem;
    margin-right: 1rem;
    display: inline-block;
}



/* h2ボックス全体のコンテナ */
.content-box-h2 {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin: 2rem 0;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
}

.content-box-h2:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.content-box-h2 h2 {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: 1.5rem 2rem;
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
}

.content-box-h2 .content-text {
    padding: 2rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* h3見出しボックス（サブセクション用） */
h3.heading-box {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin: 0 0 1.5rem 0;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    text-align: center;
    justify-content: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
    background: transparent;
    border-radius: 0;
    border-left: none;
    box-shadow: none;
    position: relative;
    transition: all 0.3s ease;
}

h3.heading-box:hover {
    transform: none;
    box-shadow: none;
    border-left-width: none;
}

h3.heading-box .heading-icon {
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}



/* h3ボックス全体のコンテナ */
.content-box-h3 {
    background: white;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin: 1.5rem 0;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
}

.content-box-h3:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.content-box-h3 h3 {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin: 0 0 1.5rem 0;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    text-align: center;
    justify-content: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
    background: transparent;
    border-radius: 0;
    border-left: none;
}

.content-box-h3 .content-text {
    padding: 1.5rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* h4見出しボックス（詳細項目用） */
h4.heading-box {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 1rem 1.2rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin: 1rem 0 0 0;
    font-size: 1.2rem;
    font-weight: 600;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

h4.heading-box:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

h4.heading-box .heading-icon {
    font-size: 1.2rem;
    margin-right: 0.5rem;
    color: var(--primary-color);
    display: inline-block;
}



/* h4ボックス全体のコンテナ */
.content-box-h4 {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin: 1.5rem 0;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
}

.content-box-h4:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.content-box-h4 h4 {
    background: var(--bg-secondary);
    padding: 1.5rem;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
}

.content-box-h4 .content-text {
    padding: 1.5rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* content-box-h4内の画像スタイル */
.content-box-h4 .content-image {
    margin: 0;
    padding: 0 1.5rem;
}

.content-box-h4 .content-box-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.content-box-h4 .content-box-image:hover {
    transform: scale(1.02);
}

/* content-box-h3内の画像スタイル */
.content-box-h3 .content-image {
    margin: 1rem 0;
    padding: 0 1.5rem;
}

.content-box-h3 .content-box-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.content-box-h3 .content-box-image:hover {
    transform: scale(1.02);
}

/* ========================================
 * 工房主・柳本学について（グリッドレイアウト）
 * ======================================== */

/* ========================================
   セクション統一デザイン（工房主について・一般的な業者との違い）
   ======================================== */

/* セクション全体の統一スタイル */
.about-founder-section,
#semi-order {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
    padding: 80px 0;
    border: 5px solid #0693e3;
    margin: 60px auto;
    max-width: 1200px;
    position: relative;
    box-shadow: 0 0 0 2px rgba(6, 147, 227, 0.1), 0 8px 24px rgba(6, 147, 227, 0.15);
}


/* セクション内コンテナの統一 */
.about-founder-section > .container,
#semi-order .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.about-founder-section .fade-slider-container {
    max-width: none;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    display: block;
}

.about-founder-section .fade-slider-container .fade-slider {
    max-width: 1400px;
    margin: 0 auto;
}

.about-founder-section .fade-slider-nav {
    max-width: none;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    display: flex;
    justify-content: center;
    padding-left: max(calc((100vw - 1400px) / 2), 20px);
    padding-right: max(calc((100vw - 1400px) / 2), 20px);
    box-sizing: border-box;
}

/* h2見出しの統一スタイル */
.about-founder-section .h2-group-wrapper {
    margin-bottom: 50px;
    text-align: center;
}

/* 工房主セクションのh2見出しは既存のheading-boxスタイルを維持しつつ、視認性を向上 */
.about-founder-section h2.heading-box {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin: 0;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: none;
    padding-bottom: 1.5rem;
}

.about-founder-section h2.heading-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
}

.about-founder-section h2.heading-box:hover::before {
    left: 100%;
}

.about-founder-section h2.heading-box .heading-icon {
    font-size: 2rem;
    margin-right: 1rem;
    display: inline-block;
}

#semi-order .section-title {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 50px;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 3px solid #0693e3;
}

/* セクション内コンテンツブロックの統一スタイル */
.about-founder-section .about-founder-regional,
#semi-order .semi-order-intro-box,
#semi-order .case-study-section {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 40px;
}

/* 工房主セクションのグリッドは既存のスタイルを維持しつつ、セクション内の統一感を保つ */
.about-founder-section .about-founder-grid {
    margin-bottom: 40px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* セクション内の各部分を統一するカードスタイル */
.about-founder-section .about-founder-regional,
#semi-order .semi-order-intro-box {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-top: 40px;
    margin-bottom: 0;
}

/* 工房主セクションの地域情報部分 */
.about-founder-section .about-founder-regional {
    border-top: 2px solid #e8e8e8;
    padding-top: 60px;
    margin-top: 60px;
}

.about-founder-section .about-founder-regional h3 {
    color: #0066cc;
    margin-bottom: 30px;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

/* 一般的な業者との違いセクションの導入部分 */
#semi-order .semi-order-intro-box {
    margin-bottom: 50px;
}

#semi-order .semi-order-intro-box h3 {
    color: #ff6900;
    margin-bottom: 25px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}

#semi-order .semi-order-intro-box p {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.8;
    margin-bottom: 20px;
}

#semi-order .semi-order-intro-box p:last-of-type {
    margin-bottom: 0;
}

#semi-order .semi-order-intro-box p.semi-order-text-bold {
    font-weight: bold;
}

/* 定食の例えボックス */
#semi-order .tableware-example-box {
    background: #f8f9fa;
    padding: 35px;
    border-radius: 12px;
    margin-bottom: 30px;
    border-left: 5px solid #0693e3;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#semi-order .tableware-example-box p {
    font-size: 1.25rem;
    color: #333;
    line-height: 2;
    margin-bottom: 12px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.5px;
}

#semi-order .tableware-example-box p:last-child {
    margin-bottom: 0;
}

#semi-order .tableware-example-box strong {
    font-size: 1.35rem;
}

#semi-order .tableware-example-box strong.blue-text {
    color: #0693e3;
}

#semi-order .tableware-example-box strong.orange-text {
    color: #ff6900;
}

/* ケーススタディセクション（実例） */
#semi-order .case-study-section {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-top: 40px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .about-founder-section,
    #semi-order {
        padding: 50px 0;
        margin: 40px auto;
        max-width: 95%;
        border-width: 4px;
    }
    
    .about-founder-section h2.heading-box {
        font-size: 1.5rem;
        padding: 1.2rem 1.5rem;
    }
    
    #semi-order .section-title {
        font-size: 1.5rem;
    }
    
    .about-founder-section .about-founder-regional,
    #semi-order .semi-order-intro-box,
    #semi-order .case-study-section {
        padding: 30px 20px;
    }
    
    .about-founder-section .about-founder-regional h3,
    #semi-order .semi-order-intro-box h3 {
        font-size: 1.3rem;
    }
}

.about-founder-intro {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 20px;
}

.about-founder-intro p {
    margin: 1rem 0;
    line-height: 1.8;
    color: var(--text-primary);
    font-size: 1.05rem;
}

.about-founder-intro p:first-child {
    margin-top: 0;
}

.about-founder-intro p:last-child {
    margin-bottom: 0;
}

.about-founder-intro a {
    color: var(--primary-color);
    text-decoration: underline;
    transition: opacity 0.2s ease;
}

.about-founder-intro a:hover {
    opacity: 0.8;
}

.about-founder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.about-founder-card {
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.about-founder-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* 案3: 視覚的階層型 - 1つ目のカードを強調 */
.about-founder-card-1 {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.30), rgba(255, 192, 203, 0.25));
    border: 3px solid var(--primary-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    position: relative;
}

/* 1つ目のカードのホバー効果を強化 */
.about-founder-card-1:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    border-color: var(--primary-light);
}

.about-founder-card-1::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 16px;
    z-index: -1;
    opacity: 0.1;
}

.about-founder-card-2 {
    background: linear-gradient(135deg, rgba(173, 216, 230, 0.15), rgba(176, 224, 230, 0.10));
    border: 2px solid rgba(0, 0, 0, 0.08);
}

.about-founder-card-3 {
    background: linear-gradient(135deg, rgba(144, 238, 144, 0.15), rgba(152, 251, 152, 0.10));
    border: 2px solid rgba(0, 0, 0, 0.08);
}

.about-founder-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
    font-weight: 500;
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

/* 1つ目のカードのサブタイトルを強調 */
.about-founder-card-1 .about-founder-subtitle {
    color: var(--primary-color);
    font-weight: 600;
    border-bottom: 2px solid var(--primary-color);
    opacity: 0.9;
}

.about-founder-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.about-founder-photo {
    width: 180px;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 15px;
    background: white;
    flex-shrink: 0;
}

.about-founder-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.about-founder-text {
    text-align: center;
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 1.05rem;
}

.about-founder-text h4 {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin: 0 0 1rem 0;
    font-weight: bold;
    line-height: 1.4;
}

.about-founder-text h4 a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.about-founder-text h4 a:hover {
    opacity: 0.8;
}

.about-founder-text p {
    margin: 0;
    text-align: left;
}

/* レスポンシブ対応：タブレット（768px以下） */
@media (max-width: 768px) {
    .about-founder-intro {
        padding: 0 15px;
    }
    
    .about-founder-intro p {
        font-size: 1rem;
    }
    
    .about-founder-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* レスポンシブ対応：スマートフォン（600px以下） */
@media screen and (max-width: 600px) {
    .about-founder-intro {
        padding: 0 15px;
        margin: 1.5rem auto;
    }
    
    .about-founder-intro p {
        font-size: 0.95rem;
        line-height: 1.7;
    }
    
    .about-founder-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .about-founder-card {
        padding: 1.5rem;
    }
    
    .about-founder-photo {
        width: 160px;
        height: 160px;
    }
    
    .about-founder-subtitle {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    .about-founder-text h4 {
        font-size: 1.2rem;
    }
    
    .about-founder-text {
        font-size: 1rem;
    }
}

/* ========================================
 * 工房主からひとこと（特別なカードデザイン）- 旧スタイル（後方互換性のため残す）
 * ======================================== */

/* 工房主からひとことのメインタイトル（SEO対策用） */
.personal-touch-main-title {
    text-align: center;
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin: 2rem 0 1rem 0;
    font-weight: 500;
    opacity: 0.8;
}

.personal-touch-main-title::before {
    content: '💬';
    margin-right: 0.5rem;
    font-size: 1rem;
}

/* h2とそれに続く部分を1つの塊として視覚的にまとめる（工房主からひとこと専用） */
.personal-touch-section-wrapper {
    border: none;
    border-radius: 16px;
    padding: 1rem 1.5rem 0.5rem 1.5rem;
    margin: 1.5rem auto;
    max-width: 800px; /* 横幅を狭める */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    /* 目立たないデザイン */
    opacity: 1;
}

/* 1つ目の「工房主からひとこと」- ピンク系パステル */
.personal-touch .personal-touch-section-wrapper {
    background: linear-gradient(135deg, rgba(255, 182, 193, 0.20), rgba(255, 192, 203, 0.15));
}

/* 2つ目の「工房主からひとこと」- ブルー系パステル */
.one-man-operation .personal-touch-section-wrapper {
    background: linear-gradient(135deg, rgba(173, 216, 230, 0.20), rgba(176, 224, 230, 0.15));
}

/* 3つ目の「工房主からひとこと」- グリーン系パステル */
.professional-touch .personal-touch-section-wrapper {
    background: linear-gradient(135deg, rgba(144, 238, 144, 0.20), rgba(152, 251, 152, 0.15));
}



.personal-touch-section-wrapper::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #adb5bd, #6c757d);
    border-radius: 50%;
    opacity: 0.05;
    z-index: 0;
}

/* h2タイトル（グループのヘッダー） - 目立たないデザイン */
.personal-touch-section-wrapper .personal-touch-main-title {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 1.1rem;
    text-align: right;
    position: relative;
    padding: 0.5rem 0;
    background: transparent;
    border-radius: 12px;
    border: none;
}



/* h2の後のコンテンツ全体（グループのボディ） - 目立たないデザイン */
.personal-touch-section-wrapper .personal-touch-cards {
    margin: 0;
    position: relative;
    z-index: 2;
}

.personal-touch-cards {
    display: flex;
    flex-direction: column;
}

.personal-touch-card {
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: none;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    /* 目立たないデザイン */
    transition: all 0.2s ease;
    opacity: 0.95;
}



.personal-touch-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* h3の装飾を削除（h2と重複しないよう） - 目立たないデザイン */
.personal-touch-card h3 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin: 0 0 1.5rem 0;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    text-align: center;
    justify-content: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
    background: transparent;
    border-radius: 0;
    border-left: none;
    box-shadow: none;
    line-height: 1.4;
}

.personal-touch-content {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    position: relative;
    background: transparent;
}

.personal-touch-photo {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* 五角形写真用の調整 */
    padding: 15px;
    background: white;
    flex-shrink: 0;
    width: 200px;
    height: 200px;
}

.personal-touch-photo a {
    display: block;
    width: 100%;
    height: 100%;
    /* 五角形のクリッピング */
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.personal-touch-photo a:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.personal-touch-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 五角形写真が切れないよう調整 */
    display: block;
    cursor: default;
}

.personal-touch-text {
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 1.05rem;
    flex: 1;
}

.personal-touch-text p {
    margin-bottom: 0.75rem;
    text-align: left;
}

.personal-touch-text p:last-child {
    margin-bottom: 0;
}

/* 3つ目のセクション（professional-touch）の写真を右側に配置 */
.professional-touch .personal-touch-content {
    flex-direction: row-reverse;
}





/* ========================================
 * 階層的なネスト対応
 * ======================================== */

/* h2ボックス内のh3ボックス */
.content-box-h2 .content-box-h3 {
    margin: 1rem 0;
    border-radius: 6px;
}

.content-box-h2 .content-box-h3 h3 {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin: 0 0 1.5rem 0;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    text-align: center;
    justify-content: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
    background: transparent;
    border-radius: 0;
    border-left: none;
}

.content-box-h2 .content-box-h3 .content-text {
    padding: 1.2rem;
}

/* h3ボックス内のh4ボックス */
.content-box-h3 .content-box-h4 {
    margin: 0.75rem 0;
    border-radius: 4px;
}

.content-box-h3 .content-box-h4 h4 {
    background: var(--bg-primary);
    border-left: 2px solid var(--primary-color);
    font-size: 1.1rem;
    padding: 0.8rem 1rem;
}

.content-box-h3 .content-box-h4 .content-text {
    padding: 1rem;
}

/* h2ボックス内のh4ボックス（直接ネスト） */
.content-box-h2 .content-box-h4 {
    margin: 0.75rem 0;
    border-radius: 4px;
}

.content-box-h2 .content-box-h4 h4 {
    background: var(--bg-primary);
    border-left: 2px solid var(--primary-color);
    font-size: 1.1rem;
    padding: 0.8rem 1rem;
}

.content-box-h2 .content-box-h4 .content-text {
    padding: 1rem;
}

/* ネストされたボックスのホバー効果調整 */
.content-box-h2 .content-box-h3:hover,
.content-box-h2 .content-box-h4:hover,
.content-box-h3 .content-box-h4:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* 見出しボックスのバリエーション */
.heading-box.accent {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
    color: white;
}

.heading-box.secondary {
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
    color: white;
}

.heading-box.outline {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.heading-box.outline:hover {
    background: var(--primary-color);
    color: white;
}

/* ========================================
 * 写真タイル化・サイズ調整
 * ======================================== */

/* 写真タイルレイアウト（縦数列・横数列で一気に全部見せる） */
.photo-tile-section {
    margin: 2rem 0;
    overflow: hidden;
    border-radius: 12px;
    background: white;
    box-shadow: var(--shadow-sm);
    padding: 1rem;
}

.photo-tile-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 1rem;
    text-align: center;
}

.photo-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 1rem 0;
    overflow: hidden;
    border-radius: 8px;
}

/* photo-tile-gridのスマホ対応 */
@media (max-width: 768px) {
    .photo-tile-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.3rem;
    }
}

@media (max-width: 480px) {
    .photo-tile-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* 指定された写真セクション専用（縦横比960×640を維持） */
.photo-tile-section .photo-tile-grid .photo-tile-item {
    width: 100%;
    aspect-ratio: 3/2; /* 960×640の比率を維持 */
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    display: block;
    overflow: hidden;
}

.photo-tile-section .photo-tile-grid .photo-tile-item:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
    z-index: 10;
    position: relative;
}

/* より具体的なセレクターで確実に適用 */
section .photo-tile-section .photo-tile-grid img.photo-tile-item {
    width: 100%;
    aspect-ratio: 3/2; /* 960×640の比率を維持 */
    height: auto;
    object-fit: cover;
}

/* その他の写真タイルアイテム（従来の設定を維持） */
.photo-tile-item {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    display: block;
    overflow: hidden;
}

.photo-tile-item:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
    z-index: 10;
    position: relative;
}

.photo-tile {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    background: white;
}

.photo-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.photo-tile img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.photo-tile:hover img {
    transform: scale(1.05);
}

.photo-tile-content {
    padding: 1.5rem;
    background: white;
}

.photo-tile-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.photo-tile-description {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* 特定写真のタイル化 */
.photo-tile.featured {
    grid-column: span 2;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
}

.photo-tile.featured .photo-tile-content {
    background: transparent;
    color: white;
}

.photo-tile.featured .photo-tile-title {
    color: white;
}

.photo-tile.featured .photo-tile-description {
    color: rgba(255, 255, 255, 0.9);
}

/* 夜景写真の特別スタイル */
.photo-tile.nightscape {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: white;
}

.photo-tile.nightscape .photo-tile-content {
    background: transparent;
    color: white;
}

.photo-tile.nightscape .photo-tile-title {
    color: white;
}

.photo-tile.nightscape .photo-tile-description {
    color: rgba(255, 255, 255, 0.9);
}

/* 写真サイズ調整 */
.photo-small {
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    margin: 1rem 0;
    overflow: hidden;
    display: block;
}

.photo-medium {
    max-width: 400px;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    margin: 1.5rem 0;
    overflow: hidden;
    display: block;
}

.photo-large {
    max-width: 600px;
    height: auto;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    margin: 2rem 0;
    overflow: hidden;
    display: block;
}

.photo-hero {
    width: 100%;
    max-width: 800px;
    height: 400px;
    object-fit: cover;
    overflow: hidden;
    display: block;
    border-radius: 20px;
    box-shadow: var(--shadow-xl);
    margin: 2rem auto;
}


/* 写真キャプション */
.photo-caption {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-light);
    margin-top: 0.5rem;
    font-style: italic;
}

/* 画像キャプション（content-box内） */
.image-caption {
    text-align: left;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    font-style: italic;
    line-height: 1.4;
    padding: 0 0.5rem;
}

/* WordPressライトボックス機能を無効化 */
.lightbox-trigger,
.wp-lightbox-container,
[data-wp-init],
[data-wp-on-async--click],
[data-wp-style--right],
[data-wp-style--top] {
    display: none;
    visibility: hidden;
    pointer-events: none;
}

/* ライトボックス関連のボタンを非表示 */
button.lightbox-trigger {
    display: none;
}

/* ===== コメント欄のスタイリング ===== */

/* コメント入力エリア */
.comment-respond {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border: 2px solid #1B365C;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(27, 54, 92, 0.15);
  margin: 2rem 0;
  position: relative;
  overflow: hidden;
}

.comment-respond::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1B365C, #4A90E2, #1B365C);
  background-size: 200% 100%;
  animation: gradient-shift 3s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* コメント見出し */
#respond h3 {
  text-align: center;
  margin: 0 0 1.5rem 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: #1B365C;
  text-decoration: none;
  position: relative;
  padding-bottom: 0.5rem;
}

#respond h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #1B365C, #4A90E2);
  border-radius: 2px;
}

/* コメントフォームのフィールド */
.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #1B365C;
  font-size: 0.95rem;
}

.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.comment-form-comment textarea:focus,
.comment-form-author input:focus,
.comment-form-email input:focus,
.comment-form-url input:focus {
  outline: none;
  border-color: #4A90E2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
  transform: translateY(-1px);
}

.comment-form-comment textarea {
  min-height: 120px;
  resize: vertical;
}

/* 送信ボタン */
#submit {
  background: linear-gradient(135deg, #1B365C, #4A90E2);
  color: white;
  border: none;
  padding: 0.875rem 2rem;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(27, 54, 92, 0.3);
  position: relative;
  overflow: hidden;
}

#submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

#submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(27, 54, 92, 0.4);
}

#submit:hover::before {
  left: 100%;
}

#submit:active {
  transform: translateY(0);
}

/* Cookie保存チェックボックス */
.comment-form-cookies-consent {
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.comment-form-cookies-consent input[type="checkbox"] {
  width: auto;
  margin: 0;
  transform: scale(1.2);
}

.comment-form-cookies-consent label {
  margin: 0;
  font-size: 0.9rem;
  color: #6c757d;
  cursor: pointer;
}

/* コメント一覧 */
.comments-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.comments-list .comment {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 15px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.comments-list .comment:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.comment-author {
  font-weight: 600;
  color: #1B365C;
  margin-bottom: 0.5rem;
}

.comment-meta {
  font-size: 0.85rem;
  color: #6c757d;
  margin-bottom: 1rem;
}

.comment-content {
  line-height: 1.6;
  color: #333;
}

/* コメントページネーション */
.comment-pagenation {
  text-align: center;
  margin: 1rem 0;
  padding: 0.5rem;
  background: #f8f9fa;
  border-radius: 10px;
  color: #1B365C;
  font-weight: 600;
}

/* コメント欄のレスポンシブ対応 */
@media (max-width: 768px) {
  .comment-respond {
    padding: 1.5rem;
    margin: 1rem 0;
    border-radius: 15px;
  }
  
  #respond h3 {
    font-size: 1.3rem;
  }
  
  .comment-form-comment textarea,
  .comment-form-author input,
  .comment-form-email input,
  .comment-form-url input {
    padding: 0.6rem 0.8rem;
    font-size: 0.95rem;
  }
  
  #submit {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    width: 100%;
  }
  
  .comments-list .comment {
    padding: 1rem;
    border-radius: 12px;
  }
}

/* 写真ギャラリー */
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.photo-gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.photo-gallery-item:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
}

.photo-gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    overflow: hidden;
    border-radius: 8px;
}

.photo-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    padding: 1rem;
    font-size: 0.9rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.photo-gallery-item:hover .photo-gallery-caption {
    transform: translateY(0);
}

/* ========================================
 * セクションカード化（工房主からひとこと以外）
 * ======================================== */

/* 一般的なセクションのカード化スタイル */
section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) {
    background: white;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    margin: 1.5rem auto;
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
    text-align: center;
    max-width: 1200px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* セクション内のブロック要素を中央寄せ */
section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) h1,
section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) h2,
section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) h3,
section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) h4,
section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) div {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

/* h2タイトルの下の余白を増やす */
section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) h2 {
    margin-bottom: 2.5rem;
}

/* pとliは左寄せに統一 */
section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) p,
section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) ul,
section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) ol,
section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) li {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

/* 画像とテキストのレイアウトを中央寄せ */
section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 画像とテキストが横並びの場合の中央寄せ */
section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) .case-study-layout,
section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) .personal-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

/* 画像の基本設定 - サイト全体（ヘッダーロゴを除く） */
img:not(.simple-header .logo img):not(.content-EyeCatch img):not(.content-Body img):not(.content-Body figure img):not(.content-Body .wp-block-image img):not(#profile_p img):not(.izakaya-animation-img) {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* コンテナ内の画像の制限（ヘッダーロゴを除く） */
.container img:not(.simple-header .logo img):not(.content-EyeCatch img):not(.content-Body img):not(.content-Body figure img):not(.content-Body .wp-block-image img):not(#profile_p img):not(.izakaya-animation-img),
.content img:not(.simple-header .logo img):not(.content-EyeCatch img):not(.content-Body img):not(.content-Body figure img):not(.content-Body .wp-block-image img):not(#profile_p img):not(.izakaya-animation-img),
.entry-content img:not(.simple-header .logo img):not(.content-EyeCatch img):not(.content-Body img):not(.content-Body figure img):not(.content-Body .wp-block-image img):not(#profile_p img):not(.izakaya-animation-img),
.wp-block-image img:not(.simple-header .logo img):not(.content-EyeCatch img):not(.content-Body img):not(.content-Body figure img):not(.content-Body .wp-block-image img):not(#profile_p img):not(.izakaya-animation-img),
figure img:not(.simple-header .logo img):not(.content-EyeCatch img):not(.content-Body img):not(.content-Body figure img):not(.content-Body .wp-block-image img):not(#profile_p img):not(.izakaya-animation-img) {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* カラム内の画像の制限（ヘッダーロゴを除く） */
.col img:not(.simple-header .logo img):not(.content-EyeCatch img):not(.content-Body img):not(#profile_p img):not(.izakaya-animation-img),
.column img:not(.simple-header .logo img):not(.content-EyeCatch img):not(.content-Body img):not(#profile_p img):not(.izakaya-animation-img),
.grid-item img:not(.simple-header .logo img):not(.content-EyeCatch img):not(.content-Body img):not(#profile_p img):not(.izakaya-animation-img),
.card img:not(.simple-header .logo img):not(.content-EyeCatch img):not(.content-Body img):not(#profile_p img):not(.izakaya-animation-img) {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 画像の中央寄せ（ヘッダーロゴを除く） */
section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) img:not(.simple-header .logo img):not(.content-EyeCatch img):not(.content-Body img):not(.content-Body figure img):not(.content-Body .wp-block-image img):not(#profile_p img):not(.izakaya-animation-img) {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* WordPressのデフォルト画像配置スタイルを尊重するための設定 */
.content-Body figure:not(.wp-block-image) {
    /* デフォルトはmargin: 0のみ、displayはWordPressに任せる */
    margin: 0;
}

/* 写真と写真説明を一つの枠線で囲む（暫定措置） */
.content-Body figure.wp-block-image,
.content-Body .wp-block-image,
.content-Body figure.wp-block-image.size-large,
.content-Body figure.wp-block-image.size-medium,
.content-Body figure.wp-block-image.size-full,
.content-Body figure.wp-block-image.size-thumbnail,
article figure.wp-block-image,
article .wp-block-image,
main figure.wp-block-image,
main .wp-block-image,
figure.wp-block-image,
.wp-block-image {
    margin: 0 0 1.5rem 0;
    box-sizing: border-box;
}

/* 右寄せ・左寄せの場合は上マージンを0に */
.content-Body .wp-block-image.alignleft,
.content-Body .wp-block-image.alignright,
.content-Body figure.wp-block-image.alignleft,
.content-Body figure.wp-block-image.alignright,
article .wp-block-image.alignleft,
article .wp-block-image.alignright,
main .wp-block-image.alignleft,
main .wp-block-image.alignright,
.wp-block-image.alignleft,
.wp-block-image.alignright {
    margin-top: 0;
}

/* .wp-block-image内のfigure.alignleft/alignrightの上マージンも0に */
.content-Body .wp-block-image figure.alignleft,
.content-Body .wp-block-image figure.alignright,
article .wp-block-image figure.alignleft,
article .wp-block-image figure.alignright,
main .wp-block-image figure.alignleft,
main .wp-block-image figure.alignright,
.wp-block-image figure.alignleft,
.wp-block-image figure.alignright {
    margin-top: 0;
}

/* .wp-block-image内にfigure.alignleft/alignrightがある場合、.wp-block-image自体の上マージンも0に（:has()セレクタ使用） */
.content-Body .wp-block-image:has(figure.alignleft),
.content-Body .wp-block-image:has(figure.alignright),
article .wp-block-image:has(figure.alignleft),
article .wp-block-image:has(figure.alignright),
main .wp-block-image:has(figure.alignleft),
main .wp-block-image:has(figure.alignright),
.wp-block-image:has(figure.alignleft),
.wp-block-image:has(figure.alignright) {
    margin-top: 0;
}

/* より確実な方法：.wp-block-image内にfigure.alignleft/alignrightがある場合のフォールバック */
.content-Body .wp-block-image > figure.alignleft,
.content-Body .wp-block-image > figure.alignright,
article .wp-block-image > figure.alignleft,
article .wp-block-image > figure.alignright,
main .wp-block-image > figure.alignleft,
main .wp-block-image > figure.alignright,
.wp-block-image > figure.alignleft,
.wp-block-image > figure.alignright {
    margin-top: 0;
}

.content-Body figure.wp-block-image img,
.content-Body .wp-block-image img,
.content-Body figure.wp-block-image.size-large img,
.content-Body figure.wp-block-image.size-medium img,
.content-Body figure.wp-block-image.size-full img,
.content-Body figure.wp-block-image.size-thumbnail img,
article figure.wp-block-image img,
article .wp-block-image img,
main figure.wp-block-image img,
main .wp-block-image img,
figure.wp-block-image img,
.wp-block-image img {
    margin-bottom: 0;
    display: block;
    width: 100%;
    height: auto;
}

.content-Body .wp-block-image figcaption,
.content-Body .wp-block-image .wp-element-caption,
article .wp-block-image figcaption,
article .wp-block-image .wp-element-caption,
main .wp-block-image figcaption,
main .wp-block-image .wp-element-caption,
.wp-block-image figcaption,
.wp-block-image .wp-element-caption {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e8e8e8;
}

/* WordPressのデフォルト画像配置クラスを尊重 */
.content-Body figure.alignleft {
    display: block;
    float: left;
    margin: 0 1em 0.5em 0;
    clear: none;
    max-width: 50%;
    width: auto;
}

.content-Body .wp-block-image.alignleft {
    display: block;
    float: left;
    margin: 0 1em 0.5em 0;
    clear: none;
    max-width: 50%;
    width: auto;
    box-sizing: border-box;
}

.content-Body figure.alignright {
    display: block;
    float: right;
    margin: 0 0 0.5em 1em;
    clear: none;
    width: 300px;
    max-width: 300px;
    min-width: 300px;
    text-align: center;
}

.content-Body .wp-block-image.alignright {
    display: block;
    float: right;
    margin: 0 0 0.5em 1em;
    clear: none;
    width: 300px;
    max-width: 300px;
    min-width: 300px;
    text-align: center;
    box-sizing: border-box;
}

.content-Body figure.size-medium,
.content-Body .wp-block-image.size-medium {
    width: 300px;
    max-width: 300px;
    min-width: 300px;
    text-align: center;
}

.content-Body figure.alignleft img,
.content-Body .wp-block-image.alignleft img,
.content-Body figure.alignright img,
.content-Body .wp-block-image.alignright img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}


.content-Body figure.aligncenter {
    display: table;
    margin-left: auto;
    margin-right: auto;
    float: none;
    clear: both;
}

.content-Body .wp-block-image.aligncenter {
    display: table;
    margin-left: auto;
    margin-right: auto;
    float: none;
    clear: both;
    box-sizing: border-box;
}

.content-Body figure.alignnone {
    display: block;
    margin: 0;
    float: none;
    clear: both;
}

.content-Body .wp-block-image.alignnone {
    display: block;
    margin: 0 0 1.5rem 0;
    float: none;
    clear: both;
    box-sizing: border-box;
}

/* WordPressのデフォルトスタイル（display: table-caption）を上書き */
.content-Body figure figcaption,
.content-Body .wp-block-image figcaption,
.content-Body figure .wp-element-caption,
.content-Body .wp-block-image .wp-element-caption,
article figure figcaption,
article .wp-block-image figcaption,
article figure .wp-element-caption,
article .wp-block-image .wp-element-caption,
main figure figcaption,
main .wp-block-image figcaption,
main figure .wp-element-caption,
main .wp-block-image .wp-element-caption,
.content-Body figcaption,
article figcaption,
main figcaption,
.wp-block-image figcaption,
figure figcaption,
.content-Body .wp-element-caption,
article .wp-element-caption,
main .wp-element-caption,
figure .wp-element-caption,
.wp-block-image .wp-element-caption {
    display: block;
    caption-side: unset;
    font-size: 0.875em;
    font-style: italic;
    line-height: 1.5;
}

/* キャプションの幅を画像に合わせる、文字を小さく斜体にする（全ての配置に対応） */
.content-Body .wp-block-image .wp-element-caption,
.content-Body .wp-block-image figcaption,
.content-Body figure .wp-element-caption,
.content-Body figure figcaption,
.content-Body .wp-block-image.alignright .wp-element-caption,
.content-Body .wp-block-image.alignright figcaption,
.content-Body figure.alignright .wp-element-caption,
.content-Body figure.alignright figcaption,
.content-Body .wp-block-image.alignleft .wp-element-caption,
.content-Body .wp-block-image.alignleft figcaption,
.content-Body figure.alignleft .wp-element-caption,
.content-Body figure.alignleft figcaption,
.content-Body .wp-block-image.aligncenter .wp-element-caption,
.content-Body .wp-block-image.aligncenter figcaption,
.content-Body figure.aligncenter .wp-element-caption,
.content-Body figure.aligncenter figcaption,
.content-Body .wp-block-image.alignnone .wp-element-caption,
.content-Body .wp-block-image.alignnone figcaption,
.content-Body figure.alignnone .wp-element-caption,
.content-Body figure.alignnone figcaption,
article .wp-block-image .wp-element-caption,
article .wp-block-image figcaption,
article figure .wp-element-caption,
article figure figcaption,
main .wp-block-image .wp-element-caption,
main .wp-block-image figcaption,
main figure .wp-element-caption,
main figure figcaption {
    display: block;
    caption-side: unset;
    font-size: 0.875em;
    font-style: italic;
    line-height: 1.5;
}

section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: 16px 16px 0 0;
}

/* 事例紹介セクション */
.case-study-section {
    background: #f0f8ff;
    padding: 40px 0;
    border: 2px solid #0693e3;
    border-radius: 20px;
    margin: 20px auto;
    max-width: 1200px;
    width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.case-study-intro {
    text-align: center;
    margin: 0 auto 30px auto;
    max-width: 1000px;
    width: 100%;
}

.case-study-intro p {
    font-size: 1.2rem;
    color: #666;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 0.75rem;
}

.case-study-main {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin: 0 auto 30px auto;
    max-width: 1000px;
    text-align: center;
}

.case-study-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 25px;
    align-items: center;
    justify-items: center;
    text-align: center;
}

.case-study-image-container {
    text-align: center;
}

.case-study-placeholder {
    width: 100%;
    max-width: 300px;
    height: 200px;
    background: #ccc;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #666;
}

.case-study-period {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #666;
}

.case-study-title {
    color: #0693e3;
    margin: 0 auto 15px auto;
    font-size: 1.4rem;
    text-align: center;
}

.case-study-description {
    color: #666;
    line-height: 1.6;
    margin: 0 auto 0.75rem auto;
    text-align: left;
}

.case-study-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    justify-items: center;
    text-align: center;
}

.case-study-detail-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    width: 100%;
}

.case-study-detail-title {
    color: #ff6900;
    margin: 0 auto 8px auto;
    font-size: 1rem;
    text-align: center;
}

.case-study-detail-list {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
    padding-left: 15px;
    text-align: left;
}

/* 統合カード化セクション（メリットからお問い合わせまで） - 縦長解消のため間隔を詰める */
.pricing-section,
.process-comparison,
.pricing-comparison,
.website-types-explanation,
.local-seo-section,
.contact-section {
    background: #f0f8ff;
    padding: 40px 0;
    border: 2px solid #0693e3;
    border-radius: 20px;
    margin: 20px auto;
    max-width: 1200px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 統合カード化セクション内のh2を.heading-boxスタイルに統一（工房主のひとことは除外） */
.pricing-section h2,
.process-comparison h2,
.pricing-comparison h2,
.website-types-explanation h2,
.local-seo-section h2,
.contact-section h2 {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: 1.25rem 1.75rem;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    margin: 1.5rem 0 3rem 0;
    font-size: 1.7rem;
    font-weight: bold;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

/* 問い合わせフォームセクションのh2（オレンジ背景） */
.contact-section h2.heading-box.consultation-callout {
    background: #ff6900;
    color: white;
    box-shadow: 0 8px 32px rgba(255, 105, 0, 0.3);
    border: 3px solid #ff6900;
}

.contact-section h2.heading-box.consultation-callout:hover {
    background: #e55a00;
    border-color: #ff6900;
    box-shadow: 0 12px 40px rgba(255, 105, 0, 0.4);
}

.contact-section h2.heading-box.consultation-callout .heading-icon {
    filter: brightness(0) invert(1);
    display: inline-block;
}

.contact-section h2.heading-box.consultation-callout .sparkle-icon {
    background: linear-gradient(135deg, #ff6900, #e55a00);
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 1), 0 0 12px rgba(255, 215, 0, 0.8);
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 2rem;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(255, 105, 0, 0.4);
    z-index: 10;
    animation: gentleBounce 2s ease-in-out infinite;
}

/* ========================================
 * グリッドレイアウトシステム - 新規構築
 * ======================================== */

/* 基本グリッド設定 */
.differences-grid,
.benefits-grid,
.consultation-grid,
.target-grid,
.value-grid,
.method-options {
    display: grid;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto 4rem auto;
    padding: 0 2rem;
}

/* .benefits-gridは3列レイアウト（PCサイズ） */
.benefits-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* PCサイズ（1025px以上）で確実に3列にする */
@media (min-width: 1025px) {
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* .case-study-section内の.benefits-gridも3列にする */
    .case-study-section .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* 4つ目だけの.benefits-gridは1列（または中央に配置） */
    .benefits-grid:has(> div:only-child) {
        grid-template-columns: 1fr;
        max-width: 800px;
    }
}

/* .differences-grid専用の下余白調整 */
.differences-grid {
    margin-bottom: 5rem;
}

/* セクション間の区切り */
section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.personal-touch-content) {
    position: relative;
    margin-bottom: 6rem;
}

section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.personal-touch-content)::after {
    content: '';
    position: absolute;
    bottom: -3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    border-radius: 2px;
    opacity: 0.6;
}

/* カード化デザイン */
.differences-grid > div,
.benefits-grid > div,
.consultation-grid > div,
.target-grid > div,
.value-grid > div,
.method-options > div {
    background: linear-gradient(135deg, #f8fafc, #ffffff);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: auto;
}

/* .differences-grid専用のカード装飾 */
.differences-grid > div:first-child {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    border: 4px solid #991b1b;
    box-shadow: 0 12px 35px rgba(220, 38, 38, 0.4);
    font-size: 1.1rem;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.differences-grid > div:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent, rgba(255,255,255,0.1));
    pointer-events: none;
}

.differences-grid > div:last-child {
    background: linear-gradient(135deg, #059669, #047857);
    color: white;
    border: 4px solid #065f46;
    box-shadow: 0 12px 35px rgba(5, 150, 105, 0.4);
    font-size: 1.1rem;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.differences-grid > div:last-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent, rgba(255,255,255,0.1));
    pointer-events: none;
}


/* ホバー効果 */
.differences-grid > div:hover,
.benefits-grid > div:hover,
.consultation-grid > div:hover,
.target-grid > div:hover,
.value-grid > div:hover,
.method-options > div:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

/* .benefits-grid専用の装飾 */
.benefits-grid > div {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    border: 2px solid #cbd5e1;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.benefits-grid > div::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.benefits-grid > div:hover::before {
    opacity: 1;
    animation: shimmer 1.5s ease-in-out;
}

.benefits-grid > div:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-5px) scale(1.02);
}

/* .benefits-grid内のテキストスタイル */
.benefits-grid .benefit-description {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: #333;
    text-align: left;
}

.benefits-grid .benefit-description:last-of-type {
    margin-bottom: 2rem;
}

.benefits-grid .benefit-detail-box {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.benefits-grid .benefit-detail-title {
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    text-align: center;
}

.benefits-grid .benefit-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.benefits-grid .benefit-detail-list li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.6;
    color: #555;
}

.benefits-grid .benefit-detail-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.2rem;
}

.benefits-grid h3 {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: var(--primary-color);
    text-align: center;
}

/* .consultation-grid専用の装飾 */
.consultation-grid > div {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border: 2px solid #cbd5e1;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.consultation-grid > div::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.consultation-grid > div:hover::before {
    opacity: 1;
    animation: shimmer 1.5s ease-in-out;
}

.consultation-grid > div:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-5px) scale(1.02);
}

/* .target-grid専用の装飾 */
.target-grid > div {
    background: linear-gradient(135deg, #fefce8, #fef3c7);
    border: 2px solid #fde68a;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.target-grid > div::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.target-grid > div:hover::before {
    opacity: 1;
    animation: shimmer 1.5s ease-in-out;
}

.target-grid > div:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-5px) scale(1.02);
}

/* .value-grid専用の装飾 */
.value-grid > div {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 2px solid #a7f3d0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.value-grid > div::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.value-grid > div:hover::before {
    opacity: 1;
    animation: shimmer 1.5s ease-in-out;
}

.value-grid > div:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-5px) scale(1.02);
}

/* .method-options専用の装飾 */
.method-options > div {
    background: linear-gradient(135deg, #fdf2f8, #fce7f3);
    border: 2px solid #f9a8d4;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.method-options > div::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.method-options > div:hover::before {
    opacity: 1;
    animation: shimmer 1.5s ease-in-out;
}

.method-options > div:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-5px) scale(1.02);
}

/* シマーアニメーション */
/* 居酒屋アニメーション用 fadeInUp */


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* 行間調整 */
.section-title {
    margin-bottom: 2.5rem;
    line-height: 1.3;
}

h2.section-title {
    margin-bottom: 3rem;
    line-height: 1.2;
}


h3 {
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

p {
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

/* ========================================
 * デスクトップ用グリッド設定（1025px以上）
 * ======================================== */
@media (min-width: 1025px) {
    /* デスクトップ画面での本文テキストを大きく */
    p, li, div {
        font-size: 1.15rem;
        line-height: 1.7;
    }
    
    /* figcaptionは本文テキストサイズの変更対象外 */
    .content-Body figure figcaption.wp-element-caption,
    .content-Body .wp-block-image figcaption.wp-element-caption,
    .content-Body figure figcaption,
    .content-Body .wp-block-image figcaption,
    .content-Body figure .wp-element-caption,
    .content-Body .wp-block-image .wp-element-caption,
    article figure figcaption.wp-element-caption,
    article .wp-block-image figcaption.wp-element-caption,
    article figure figcaption,
    article .wp-block-image figcaption,
    article figure .wp-element-caption,
    article .wp-block-image .wp-element-caption,
    main figure figcaption.wp-element-caption,
    main .wp-block-image figcaption.wp-element-caption,
    main figure figcaption,
    main .wp-block-image figcaption,
    main figure .wp-element-caption,
    main .wp-block-image .wp-element-caption,
    .content-Body figcaption.wp-element-caption,
    .content-Body figcaption,
    article figcaption.wp-element-caption,
    article figcaption,
    main figcaption.wp-element-caption,
    main figcaption,
    .wp-block-image figcaption.wp-element-caption,
    .wp-block-image figcaption,
    figure figcaption.wp-element-caption,
    figure figcaption,
    .content-Body .wp-element-caption,
    article .wp-element-caption,
    main .wp-element-caption,
    figure .wp-element-caption,
    .wp-block-image .wp-element-caption,
    figcaption.wp-element-caption,
    .wp-element-caption {
        font-size: 0.875em;
        font-style: italic;
        line-height: 1.5;
    }
    
    /* ヒーローセクションのサブタイトルは除外 */
    .hero .subtitle {
        font-size: 1.6rem;
        font-weight: 600;
        margin: 0 auto 1.25rem auto;
        line-height: 1.5;
    }
    
    .hero .subtitle-points {
        font-size: 1.1rem;
        margin: 0 auto;
    }
    
    .hero .subtitle-points li {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
        line-height: 1.6;
    }
    
    /* .differences-grid: 2つ横並び */
    .differences-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* .reasons-section .value-grid: 3つ横並び */
    .reasons-section .value-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* .benefits-grid: 2つ横並び */
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* .pricing-section .value-grid: 3つ横並び */
    .pricing-section .value-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* .consultation-grid: 4つ横並び */
    .consultation-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* .target-grid: 2×2 */
    .target-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* .value-grid: 2×2 */
    .value-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* .method-options: 横3列 */
    .method-options {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
 * 記事本文の見出しデザイン（統一）
 * スコープ: .content-Body 内のみ
 * ======================================== */
.content-Body h2,
.content-Body h3,
.content-Body h4 {
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary, #222);
    margin: 2rem 0 1rem 0;
}

.content-Body h2 {
    font-size: 2.0rem;
    border-left: 6px solid var(--primary-color, #0077b6);
    padding-left: 0.75rem;
}

.content-Body h3 {
    font-size: 1.4rem;
    border-left: 4px solid var(--primary-light, #4cc9f0);
    padding-left: 0.6rem;
}

.content-Body h4 {
    font-size: 1.15rem;
    border-left: 3px solid rgba(0,0,0,0.1);
    padding-left: 0.5rem;
}

/* タブレット調整 */
@media (min-width: 768px) and (max-width: 1024px) {
  .content-Body h2 { font-size: 1.8rem; }
  .content-Body h3 { font-size: 1.3rem; }
  .content-Body h4 { font-size: 1.1rem; }
}

/* スマホ調整 */
@media (max-width: 767.98px) {
  .content-Body h2 { font-size: 1.6rem; }
  .content-Body h3 { font-size: 1.2rem; }
  .content-Body h4 { font-size: 1.05rem; }
  
}


/* ========================================
 * タブレット用グリッド設定（769px-1024px）
 * ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* .differences-grid: 2つ横並び */
    .differences-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* .reasons-section .value-grid: 2+1（上端横並び2つ、下段は1つ中央寄せ） */
    .reasons-section .value-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .reasons-section .value-grid > div:nth-child(3) {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 50%;
    }
    
    /* .benefits-grid: 2つ横並び */
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* .pricing-section .value-grid: 2×3 */
    .pricing-section .value-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* .consultation-grid: 2×2 */
    .consultation-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* .target-grid: 2×2 */
    .target-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* .value-grid: 2×2 */
    .value-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* .method-options: 2+1（上端横並び2つ、下段は1つ中央寄せ） */
    .method-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .method-options > div:nth-child(3) {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 50%;
    }
}

/* ========================================
 * スマートフォン用グリッド設定（768px以下）
 * ======================================== */
@media (max-width: 768px) {
    /* 全てのグリッドを縦1列に */
    .differences-grid,
    .reasons-section .value-grid,
    .benefits-grid,
    .pricing-section .value-grid,
    .consultation-grid,
    .target-grid,
    .value-grid,
    .method-options {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    /* スマホ用の行間調整 */
    .section-title {
        margin-bottom: 2rem;
        line-height: 1.2;
    }
    
    h2.section-title {
        margin-bottom: 2.5rem;
        line-height: 1.1;
    }
    
    h3 {
        margin-bottom: 1.25rem;
        line-height: 1.3;
    }
    
    p {
        margin-bottom: 1rem;
        line-height: 1.5;
    }
    
    /* カードのパディング調整 */
    .differences-grid > div,
    .benefits-grid > div,
    .consultation-grid > div,
    .target-grid > div,
    .value-grid > div,
    .method-options > div {
        padding: 1.5rem;
    }
}

/* カード化スタイル - クリア済み */

/* differences-grid専用の目立つデザイン - クリア済み */

/* differences-grid子要素の設定 - クリア済み */

/* 疑似要素の設定 - クリア済み */

/* differences-grid専用のホバー効果 - クリア済み */

/* differences-gridアクセントライン・ホバー効果 - クリア済み */

/* differences-grid内のテキストスタイル - クリア済み */

/* differences-grid子要素の詳細スタイル - クリア済み */

/* local-seo-section内の横並びレイアウト（パソコンモニター限定） */
@media (min-width: 769px) {
    .local-seo-section .content-box-h2,
    .local-seo-section .content-box-h3 {
        display: inline-block;
        width: 48%;
        vertical-align: top;
        margin-right: 2%;
    }
    
    .local-seo-section .content-box-h3 {
        margin-right: 0;
    }
}

/* local-seo-section内のli要素を左寄せ */
.local-seo-section li {
    text-align: left;
}

/* local-cta内のp要素の左右余白調整 */
.local-cta p {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* 無料相談の内容説明セクション */
.consultation-details-section {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    padding: 3rem 0;
    margin: 2rem auto;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.consultation-details-section .section-title {
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--primary-color);
    font-size: 1.8rem;
    font-weight: bold;
}

/* .consultation-grid - クリア済み */

.consultation-item {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--primary-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.consultation-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.consultation-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.consultation-item h3 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
}

.consultation-item ul {
    list-style: none;
    padding: 0;
}

.consultation-item li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    padding-left: 1.5rem;
}

.consultation-item li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

.consultation-item li:last-child {
    border-bottom: none;
}

.consultation-methods {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.consultation-methods h3 {
    color: var(--primary-color);
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

/* .method-options - クリア済み */

.method-option {
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    transition: border-color 0.3s ease;
}

.method-option:hover {
    border-color: var(--primary-color);
}

.method-option h4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: bold;
}

.method-option p {
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* local-seo-section内のh3タイトルの上の余白調整 */
.local-seo-section h3 {
    margin-top: 2rem;
}

/* value-proof-titleの上の余白調整 */
.value-proof-title {
    margin-top: 2rem;
}

/* case-study-section内のグリッド設定 - クリア済み */

/* 相談呼びかけテキストの明るいデザイン（オレンジ背景） */
.consultation-callout {
    background: #ff6900;
    color: white;
    padding: 2rem 2.5rem;
    border-radius: 20px;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    margin: 2.5rem 0;
    box-shadow: 0 8px 32px rgba(255, 105, 0, 0.3);
    border: 3px solid #ff6900;
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
}

/* 問い合わせフォームセクションのh2（オレンジ背景を優先） */
.contact-section h2.heading-box.consultation-callout {
    background: #ff6900;
    border: 3px solid #ff6900;
    box-shadow: 0 8px 32px rgba(255, 105, 0, 0.3);
}

/* h2要素に適用された場合の調整 */
h2.consultation-callout {
    font-size: 1.6rem;
    line-height: 1.5;
    margin-bottom: 3rem;
}

h2.consultation-callout .heading-icon {
    font-size: 1.8rem;
    margin-right: 1rem;
    filter: brightness(0) invert(1);
    display: inline-block;
}

.consultation-callout::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.8s ease;
}

.consultation-callout:hover::before {
    left: 100%;
}

.consultation-callout:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(255, 105, 0, 0.4);
    border-color: #ff6900;
    background: #e55a00;
}

.consultation-callout .sparkle-icon {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 2rem;
    background: linear-gradient(135deg, #ff6900, #e55a00);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(255, 105, 0, 0.4);
    animation: gentleBounce 2s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 1), 0 0 12px rgba(255, 215, 0, 0.8);
    z-index: 10;
}

@keyframes gentleBounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(5deg);
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .consultation-callout {
        font-size: 1.1rem;
        padding: 1.2rem 1.5rem;
        margin: 1.5rem 0;
    }
    
    .consultation-callout::after {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
        top: -8px;
        right: -8px;
    }
}

/* Contact Form 7のデザイン改善 */
.wpcf7-form {
    background: linear-gradient(135deg, #f8fafc, #ffffff);
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 2px solid #e2e8f0;
    margin: 2rem auto;
    max-width: 800px;
}

.wpcf7-form-control-wrap {
    margin-bottom: 1.5rem;
}

.wpcf7-form-control {
    width: 100%;
    padding: 1rem 1.2rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
    box-sizing: border-box;
}

.wpcf7-form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(6, 147, 227, 0.1);
    transform: translateY(-2px);
}

.wpcf7-form-control.wpcf7-textarea {
    min-height: 120px;
    resize: vertical;
}

.wpcf7-form-control.wpcf7-submit {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    border: none;
    padding: 1.2rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(6, 147, 227, 0.3);
    width: 100%;
    margin-top: 1rem;
}

.wpcf7-form-control.wpcf7-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(6, 147, 227, 0.4);
    background: linear-gradient(135deg, #005a87, var(--primary-color));
}

.wpcf7-form-control.wpcf7-submit:active {
    transform: translateY(-1px);
}

.wpcf7-form-control.wpcf7-submit:disabled {
    background: #94a3b8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.wpcf7-form-control.wpcf7-submit:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* 重複ボタンの非表示 */
.wpcf7-form input[type="submit"][value="Submit"] {
    display: none;
}

.wpcf7-form input[type="submit"][value="送信"] {
    display: block;
}

/* ラベルのスタイル */
.wpcf7-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #374151;
    font-size: 1rem;
}

/* 必須マークのスタイル */
.wpcf7-form .wpcf7-validates-as-required::after {
    content: " *";
    color: #ef4444;
    font-weight: bold;
}

/* エラーメッセージのスタイル */
.wpcf7-not-valid-tip {
    color: #ef4444;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    display: block;
}

.wpcf7-not-valid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* 成功メッセージのスタイル */
.wpcf7-mail-sent-ok {
    background: #d1fae5;
    color: #065f46;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #a7f3d0;
    margin-bottom: 1rem;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .wpcf7-form {
        padding: 1.5rem;
        margin: 1rem;
    }
    
    .wpcf7-form-control {
        padding: 0.9rem 1rem;
        font-size: 0.95rem;
    }
    
    .wpcf7-form-control.wpcf7-submit {
        padding: 1rem 2rem;
        font-size: 1rem;
    }
}

/* 料金比較テーブルのスタイル */
.pricing-table-wrapper {
    background: #f1f5f9;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(71, 85, 105, 0.1);
    border: 1px solid #cbd5e1;
    overflow-x: auto;  /* 横スクロールを強制有効 */
    overflow-y: visible;  /* 縦は表示する */
    margin: 2rem auto 4rem auto;  /* 下マージンを4remに増加 */
    max-width: 1200px;
    -webkit-overflow-scrolling: touch;  /* スムーズスクロール */
    padding-bottom: 30px;  /* スクロールバーとの間隔をさらに確保 */
}

/* 料金比較テーブルの基本スクロールバースタイル */
.pricing-table-wrapper::-webkit-scrollbar {
    height: 20px;  /* 16px → 20px でさらに太く */
    margin-top: 30px;  /* 25px → 30px でより離す */
}

.pricing-table-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);  /* より濃い背景色 */
    border-radius: 10px;
    margin: 0 8px;  /* 左右のマージンを増加 */
    border: 1px solid rgba(0, 0, 0, 0.1);  /* 境界線を追加 */
}

.pricing-table-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #007bff, #0056b3);  /* グラデーション背景 */
    border-radius: 10px;
    border: 2px solid #fff;  /* 白い境界線でコントラスト向上 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);  /* 影を追加 */
}

.pricing-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #0056b3, #004085);  /* ホバー時の濃いグラデーション */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  /* ホバー時の影を強化 */
    transform: scale(1.05);  /* ホバー時に少し拡大 */
    transition: all 0.2s ease;  /* スムーズなアニメーション */
}

/* スクロールバーに矢印アイコンを追加 */
.pricing-table-wrapper::-webkit-scrollbar-button {
    background: #007bff;
    border-radius: 10px;
    width: 20px;
    height: 20px;
}

.pricing-table-wrapper::-webkit-scrollbar-button:hover {
    background: #0056b3;
}

/* スクロール可能であることを示すインジケーター（デフォルトは非表示） */
.pricing-table-wrapper::after {
    content: "";
    display: none;
    text-align: center;
    font-size: 12px;
    color: #666;
    margin-top: 8px;
    font-weight: 500;
}

/* スクロールバーが存在する場合のみ表示 */
.pricing-table-wrapper.has-scrollbar::after {
    content: "← スクロールして詳細を確認 →";
    display: block;
}

/* スマホでのスクロールバー視認性向上 */
@media (max-width: 767px) {
    .pricing-table-wrapper::-webkit-scrollbar {
        height: 24px;  /* スマホではさらに太く */
        margin-top: 35px;
    }
    
    .pricing-table-wrapper::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #ff6b35, #f7931e);  /* オレンジ系でより目立つ */
        border: 3px solid #fff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    }
    
    .pricing-table-wrapper.has-scrollbar::after {
        content: "← 左右にスワイプして詳細を確認 →";
        font-size: 14px;
        color: #ff6b35;
        font-weight: 600;
    }
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    background: #f1f5f9;
    min-width: 800px;  /* 横スクロールが必要になる最小幅 */
}

/* スマホでの強制設定 */
@media (max-width: 768px) {
    .pricing-table {
        min-width: 700px;
        width: auto;
    }
    
    .pricing-table-wrapper {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }
    
    .pricing-item {
        padding: 0.4rem 0.25rem;
        font-size: 0.75rem;
        line-height: 1.2;
    }
    
    .pricing-item.feature {
        padding: 0.4rem 0.25rem;
        font-size: 0.75rem;
        font-weight: 700;
    }
    
    .pricing-item.price-highlight {
        padding: 0.6rem 0.4rem;
        font-size: 0.9rem;
        font-weight: 800;
    }
    
    /* 「合計」行の文字サイズを一回り大きくする（スマホ） */
    .pricing-row:last-child .pricing-item {
        font-size: 1.1rem;
        line-height: 1.1;
        padding: 0.4rem 0.3rem;
    }
    
    .pricing-row:last-child .pricing-item.price-highlight {
        font-size: 1.3rem;
        line-height: 1.1;
        padding: 0.4rem 0.3rem;
    }
    
    /* 5行目（制作費分のメド）の背景色 - スマホ用 */
    .pricing-row:nth-child(6) .pricing-item.price-highlight {
        background: linear-gradient(135deg, #e5e7eb, #d1d5db);
        border-color: #6b7280;
    }
    
    /* 9行目（合計）の背景色 - スマホ用 */
    .pricing-row:last-child .pricing-item.price-highlight {
        background: linear-gradient(135deg, #bfdbfe, #dbeafe);
        border-color: #60a5fa;
    }
    
    /* 「小型（オススメ）」のヘッダー - スマホ用 */
    .pricing-header-cell:nth-child(3) {
        font-size: 1.1rem;
        line-height: 1.1;
        padding: 0.5rem 0.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.pricing-header {
    display: grid;
    grid-template-columns: 0.7fr 1.1fr 1.1fr 1.1fr;
    gap: 0;
    background: linear-gradient(135deg, #64748b, #94a3b8);
    color: white;
    font-weight: 600;
    text-align: center;
}

.pricing-header-cell {
    padding: 1.5rem 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 1.1rem;
    position: relative;
}

.pricing-header-cell:last-child {
    border-right: none;
}

.pricing-row {
    display: grid;
    grid-template-columns: 0.7fr 1.1fr 1.1fr 1.1fr;
    gap: 0;
    border-bottom: 1px solid #cbd5e1;
    transition: background-color 0.3s ease;
    background-color: white;
    align-items: stretch;
}

.pricing-row:nth-child(even) {
    background-color: #f8fafc;
}

.pricing-row:hover {
    background-color: #e2e8f0;
}

.pricing-row:last-child {
    border-bottom: none;
}

/* 「合計」行の文字サイズを一回り大きくする */
.pricing-row:last-child .pricing-item {
    font-size: 1.25rem;
    line-height: 1.1;
    padding: 0.5rem 0.8rem;
}

.pricing-row:last-child .pricing-item.price-highlight {
    font-size: 1.5rem;
    line-height: 1.1;
    padding: 0.5rem 0.8rem;
}

/* 「合計」行のfeatureセル（左端）も大きくする */
.pricing-row:last-child .pricing-item.feature {
    font-size: 1.25rem;
    line-height: 1.1;
    padding: 0.5rem 0.8rem;
}

.pricing-item {
    padding: 1.25rem 1rem;
    border-right: 1px solid #cbd5e1;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #475569;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.pricing-item:last-child {
    border-right: none;
}

.pricing-item.feature {
    background: linear-gradient(135deg, #f8fafc, #ffffff);
    font-weight: bold;
    color: var(--primary-color);
    text-align: center;
    border-right: 2px solid var(--primary-color);
}

/* 「制作費分のメド」と「合計」のfeatureセルを目立たせる（薄緑の背景） */
.pricing-item.feature.pricing-feature-highlight {
    background: linear-gradient(135deg, #dcfce7, #f0fdf4);
    border-right: 2px solid #22c55e;
    line-height: 1.6;
    font-weight: bold;
    font-size: 1.15rem;
}

/* 5行目（制作費分のメド）の1列目 - ネガティブな印象の薄いパステルカラー */
.pricing-row:nth-child(6) .pricing-item.feature.pricing-feature-highlight {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    border-right-color: #6b7280;
}

/* 9行目（合計）の1列目 - ポジティブな印象の青系統の薄いパステルカラー */
.pricing-row:last-child .pricing-item.feature.pricing-feature-highlight {
    background: linear-gradient(135deg, #bfdbfe, #dbeafe);
    border-right-color: #60a5fa;
    font-size: 1.5rem;
    line-height: 1.1;
}

.pricing-item.general:not(.price-highlight) {
    background: linear-gradient(135deg, #fef3c7, #fef7cd);
    color: #92400e;
}

.pricing-item.small:not(.price-highlight) {
    background: linear-gradient(135deg, #ffe5d4, #fff0e6);
    color: #1e40af;
}

.pricing-item.lp:not(.price-highlight) {
    background: linear-gradient(135deg, #f3e8ff, #faf5ff);
    color: #7c3aed;
}

/* 小型列のヘッダーを目立つ色に */
.pricing-header-cell:nth-child(3) {
    background: linear-gradient(135deg, #ff6b35, #ff8c42);
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.1;
    padding: 0.6rem 0.8rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* pricing-noteの幅制限 - pricing-comparisonセクションと同じ幅制限を適用 */
.pricing-note {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* pricing-comparisonセクション内のpricing-noteは親要素の幅に収まる */
section.pricing-comparison .pricing-note,
section.pricing-comparison > .container .pricing-note,
section.pricing-comparison .container .pricing-note,
.pricing-comparison .pricing-note,
.pricing-comparison > .container .pricing-note,
.pricing-comparison .container .pricing-note {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* 左寄せのハイライトボックス */
.pricing-note .pricing-highlight-box-left {
    text-align: left;
}

.pricing-note .pricing-highlight-box-left p {
    text-align: left;
    margin-bottom: 0.75em;
}

/* より具体的なセレクターで上書き */
.pricing-comparison .pricing-note .pricing-highlight-box-left {
    text-align: left;
}

.pricing-comparison .pricing-note .pricing-highlight-box-left p {
    text-align: left;
    margin-bottom: 0.75em;
}

.pricing-item.price-highlight {
    font-size: 1.2rem;
    font-weight: bold;
    background: linear-gradient(135deg, #dcfce7, #f0fdf4);
    border: 2px solid #22c55e;
    box-sizing: border-box;
    color: var(--primary-color);
    display: block;
    text-align: center;
    line-height: 1.5;
}

/* 5行目（制作費分のメド）の背景色 - ネガティブな印象の薄いパステルカラー（グレー系） */
.pricing-row:nth-child(6) .pricing-item.price-highlight {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    border-color: #6b7280;
}

/* 9行目（合計）の背景色 - ポジティブな印象の青系統の薄いパステルカラー */
.pricing-row:last-child .pricing-item.price-highlight {
    background: linear-gradient(135deg, #bfdbfe, #dbeafe);
    border-color: #60a5fa;
}

.pricing-item.price-highlight::before {
    content: '💰';
    margin-right: 0.5rem;
    font-size: 1.1rem;
    display: inline-block;
    vertical-align: middle;
}

/* 料金プラン強調ボックスのスタイル */
.pricing-highlight-box {
    background: linear-gradient(135deg, #fef3c7, #fef7cd);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    text-align: center;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
    position: relative;
    overflow: hidden;
}

.pricing-highlight-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.pricing-highlight-box p {
    margin: 0;
    font-size: 1.1rem;
    color: #92400e;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
}

.pricing-highlight-box strong {
    color: #b45309;
    font-weight: 700;
}

/* 動画セクションのスタイル */
.hero-video-section {
    background: linear-gradient(135deg, #f8fafc, #ffffff);
    padding: 3rem 0;
    margin: 2rem 0;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.hero-video-section h2 {
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 1.5rem auto;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    min-height: 400px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-description {
    text-align: center;
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}

/* details要素を使用したアコーディオンスタイル */
.video-detail-section {
    margin: 25px auto 0 auto;
    max-width: 800px;
}

.video-details {
    border: 2px solid #3b82f6;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.video-summary {
    padding: 15px 20px;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
    color: #1e40af;
    list-style: none;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

.video-summary:hover {
    background: linear-gradient(135deg, #bfdbfe, #dbeafe);
    transform: translateY(-1px);
}

.video-summary::-webkit-details-marker {
    display: none;
}

.video-summary::marker {
    display: none;
}

.summary-icon {
    font-size: 18px;
    margin-right: 10px;
    flex-shrink: 0;
    color: #2563eb;
}

.summary-text {
    flex-grow: 1;
    color: #1e40af;
}

.summary-arrow {
    font-size: 12px;
    color: #3b82f6;
    margin-left: 10px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    font-weight: bold;
}

.video-details[open] .summary-arrow {
    transform: rotate(180deg);
}

.details-content {
    padding: 20px;
    background: #f8fafc;
    border-top: 2px solid #3b82f6;
    text-align: left;
}

.details-content p {
    color: #374151;
    line-height: 1.6;
    margin: 0 0 15px 0;
}

.accordion-toggle {
    width: 100%;
    padding: 15px 20px;
    background: #f8fafc;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 500;
    color: #374151;
    text-align: left;
}

.accordion-toggle:hover {
    background: #f1f5f9;
}

.accordion-toggle:focus {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
}

.accordion-icon {
    font-size: 18px;
    margin-right: 10px;
    flex-shrink: 0;
}

.accordion-text {
    flex-grow: 1;
}

.accordion-arrow {
    transition: transform 0.3s ease;
    color: #6b7280;
    font-size: 12px;
    margin-left: 10px;
    flex-shrink: 0;
}

.accordion-toggle[aria-expanded="true"] .accordion-arrow {
    transform: rotate(180deg);
}

.accordion-content {
    padding: 20px;
    background: white;
    border-top: 1px solid #e2e8f0;
    text-align: left;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    0% {
        transform: translateY(0);
    }
    10% {
        transform: translateY(0);
    }
    90% {
        transform: translateY(-82%);
    }
    100% {
        transform: translateY(-82%);
    }
}

.detail-article-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.detail-article-list li {
    margin: 10px 0;
    padding-left: 25px;
    position: relative;
    line-height: 1.5;
}

.detail-article-list li::before {
    content: "📄";
    position: absolute;
    left: 0;
    top: 0;
}

.detail-article-list a {
    color: #2563eb;
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
}

.detail-article-list a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.all-articles-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 24px;
    background: #3b82f6;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.all-articles-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

/* 記事用のコンパクトアコーディオン */
.article-video-accordion {
    margin: 20px 0;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.accordion-toggle.compact {
    padding: 12px 15px;
    font-size: 14px;
    background: #f8fafc;
}

.accordion-toggle.compact:hover {
    background: #f1f5f9;
}

.accordion-content.compact {
    padding: 15px;
    font-size: 14px;
    line-height: 1.6;
}

/* カテゴリーページ用動画紹介 */
.category-video-intro {
    margin: 25px 0;
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.video-intro-box {
    text-align: center;
}

.video-intro-box h3 {
    margin: 0 0 15px 0;
    color: #374151;
    font-size: 18px;
    font-weight: 600;
}

.video-intro-box p {
    margin: 0 0 20px 0;
    color: #6b7280;
    line-height: 1.6;
}

.video-link-btn, .video-intro-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    background: #3b82f6;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-weight: 600;
    margin: 10px 0;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.video-link-btn:hover, .video-intro-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
    text-decoration: none;
    color: white;
}

.video-link-btn .btn-icon {
    margin-right: 8px;
    font-size: 16px;
}

.video-link-btn .btn-arrow {
    margin-left: 8px;
    font-size: 12px;
}

.video-note {
    font-size: 13px;
    color: #6b7280;
    margin: 10px 0 0 0;
    font-style: italic;
}

/* 動画要約ノート */
.video-summary-note {
    background: linear-gradient(135deg, #fef3c7, #fef7cd);
    border-left: 4px solid #f59e0b;
    padding: 12px 15px;
    margin: 15px 0;
    border-radius: 4px;
    font-size: 15px;
    color: #92400e;
}

/* 記事用動画参照ボックス（視覚的に区別される版） */
.article-video-intro {
    margin: 0 0 30px 0;
}

.video-reference-box {
    background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
    border: 2px solid #0ea5e9;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
    margin: 0 0 25px 0;
}

.video-reference-header {
    background: #0ea5e9;
    color: white;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
}

.video-reference-icon {
    font-size: 20px;
    margin-right: 10px;
}

.video-reference-title {
    font-weight: 700;
}

.video-reference-content {
    padding: 20px;
    color: #0c4a6e;
    line-height: 1.6;
}

.video-reference-content p {
    margin: 0 0 12px 0;
    font-size: 15px;
}

.video-reference-content p:last-child {
    margin-bottom: 0;
}

.video-reference-cta {
    background: rgba(14, 165, 233, 0.1);
    padding: 12px 15px;
    border-radius: 6px;
    border-left: 4px solid #0ea5e9;
    margin-top: 15px;
}

.video-reference-content a {
    color: #0369a1;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.video-reference-content a:hover {
    color: #0284c7;
    border-bottom-color: #0284c7;
}

/* 動画参照ボックスのモバイル対応 */
@media (max-width: 768px) {
    .video-reference-box {
        margin: 0 0 20px 0;
    }
    
    .video-reference-header {
        padding: 10px 15px;
        font-size: 14px;
    }
    
    .video-reference-icon {
        font-size: 18px;
        margin-right: 8px;
    }
    
    .video-reference-content {
        padding: 15px;
    }
    
    .video-reference-content p {
        font-size: 14px;
    }
    
    .video-reference-cta {
        padding: 10px 12px;
        margin-top: 12px;
    }
}

/* details要素のモバイル対応 */
@media (max-width: 768px) {
    .video-detail-section {
        margin: 20px 10px 0 10px;
        max-width: none;
    }
    
    .video-summary {
        padding: 12px 15px;
        font-size: 14px;
    }
    
    .summary-icon {
        font-size: 16px;
        margin-right: 8px;
    }
    
    .details-content {
        padding: 15px;
    }
}

/* 古いアコーディオンのモバイル対応 */
@media (max-width: 768px) {
    .video-detail-accordion {
        margin: 20px 10px 0 10px;
        max-width: none;
    }
    
    .accordion-toggle {
        padding: 12px 15px;
        font-size: 14px;
    }
    
    .accordion-icon {
        font-size: 16px;
        margin-right: 8px;
    }
    
    .accordion-content {
        padding: 15px;
    }
    
    .detail-article-list li {
        padding-left: 20px;
        margin: 8px 0;
    }
    
    .all-articles-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .hero-video-section {
        padding: 2rem 1rem;
        margin: 1rem 0;
    }
    
    .hero-video-section h2 {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .video-container {
        max-width: 100%;
        margin: 0 10px 1rem 10px;
        min-height: 200px;
        aspect-ratio: 16/9;
    }
    
    .video-description {
        font-size: 1rem;
        padding: 0 15px;
    }
}

/* 工程比較図表のスタイル */
.process-flow-comparison {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}

/* パソコン画面での工程比較図表の横並び */
@media (min-width: 1024px) {
    .process-flow-comparison {
        flex-direction: row;
        gap: 2rem;
        align-items: flex-start;
    }
    
    .process-flow {
        flex: 1;
        min-width: 0;
    }
}

.process-flow {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 2px solid #e2e8f0;
    position: relative;
    overflow: hidden;
}

.process-flow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
}

.flow-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    text-align: center;
    margin: 0 0 2rem 0;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc, #ffffff);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.flow-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
}

.flow-step {
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    min-width: 120px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.flow-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.flow-arrow {
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: bold;
    margin: 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 問題のある工程のハイライト */
.flow-step.highlight-problem {
    background: linear-gradient(135deg, #fee2e2, #fef2f2);
    border-color: #f87171;
    color: #dc2626;
    position: relative;
}

.flow-step.highlight-problem::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #f87171, #ef4444);
    border-radius: 14px;
    z-index: -1;
    opacity: 0.1;
}

/* 優位性のある工程のハイライト */
.flow-step.highlight-advantage {
    background: linear-gradient(135deg, #dcfce7, #f0fdf4);
    border-color: #4ade80;
    color: #16a34a;
    position: relative;
}

.flow-step.highlight-advantage::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #4ade80, #22c55e);
    border-radius: 14px;
    z-index: -1;
    opacity: 0.1;
}

.step-note {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    font-style: italic;
    line-height: 1.4;
}

.problem-mark,
.advantage-mark {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.problem-mark {
    background: #ef4444;
}

.advantage-mark {
    background: #22c55e;
}

/* .case-study-section内の統合されたウェブサイト構造比較図表のスタイル */
/*
.case-study-section .integrated-structure-comparison {
    margin: 3rem 0;
    padding: 2rem 0;
}

.case-study-section .integrated-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary-color);
    text-align: center;
    margin: 0 0 2rem 0;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc, #ffffff);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.case-study-section .integrated-diagrams-wrapper {
    display: flex;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc, #ffffff);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
}

/* デスクトップ画面での横スクロール対応 */
@media (min-width: 1025px) {
    .case-study-section .integrated-diagrams-wrapper {
        overflow-x: visible;
        gap: 1.5rem;
        max-width: 1200px;
    }
}

.case-study-section .integrated-diagrams-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light), #10b981);
}
*/



/*
.case-study-section .diagram-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    border: none;
    position: relative;
    overflow: visible;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

/* 一般的なホームページ（製造業） - 最も幅広 */
.case-study-section .manufacturing-structure {
    flex: 0 0 150px;
    background: linear-gradient(135deg, #fef3f2, #fef7f7);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid #fecaca;
}

/* 小型ホームページ - 中程度の幅 */
.case-study-section .homepage-structure {
    flex: 0 0 120px;
    background: linear-gradient(135deg, #f0f9ff, #f8fafc);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid #bae6fd;
}

/* ランディングページ - 最も狭い幅 */
.case-study-section .lp-structure {
    flex: 0 0 100px;
    background: linear-gradient(135deg, #f0fdf4, #f7fee7);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid #bbf7d0;
}

/* スマホ画面での横幅制限 */
@media (max-width: 768px) {
    .case-study-section .manufacturing-structure {
        flex: 0 0 50px;
        padding: 0.2rem;
    }
    
    .case-study-section .homepage-structure {
        flex: 0 0 45px;
        padding: 0.2rem;
    }
    
    .case-study-section .lp-structure {
        flex: 0 0 40px;
        padding: 0.2rem;
    }
}

@media (max-width: 480px) {
    .case-study-section .manufacturing-structure {
        flex: 0 0 40px;
        padding: 0.1rem;
    }
    
    .case-study-section .homepage-structure {
        flex: 0 0 35px;
        padding: 0.1rem;
    }
    
    .case-study-section .lp-structure {
        flex: 0 0 30px;
        padding: 0.1rem;
    }
}

.case-study-section .diagram-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -0.5rem;
    transform: translateY(-50%);
    width: 1px;
    height: 80%;
    background: linear-gradient(to bottom, transparent, #e2e8f0, transparent);
}

.case-study-section .diagram-title {
    font-size: 1rem;
    font-weight: bold;
    color: var(--text-primary);
    text-align: center;
    margin: 0 0 1rem 0;
    padding: 0.5rem 0;
    background: transparent;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid #e2e8f0;
}
*/

/* 統合レイアウト内の小型ホームページ構造 */
/*
.case-study-section .homepage-structure .structure-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.case-study-section .main-page {
    position: relative;
}
*/



/*
.case-study-section .page-box.top-page {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
    font-weight: bold;
    font-size: 0.6rem;
    min-width: auto;
    border: none;
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1.0;
    padding: 0.05rem 0.1rem;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: none;
    transition: none;
    position: relative;
}

.case-study-section .page-box.top-page::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 15px;
    background: #4b5563;
}

.case-study-section .sub-pages {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.3rem;
    position: relative;
    max-width: 100%;
}

.case-study-section .sub-pages::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 15px;
    background: #4b5563;
}

.case-study-section .page-box.sub-page {
    min-width: auto;
    max-width: none;
    font-size: 0.6rem;
    font-weight: bold;
    padding: 0.05rem 0.1rem;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 2px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1.0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: none;
    transition: none;
    position: relative;
}

/* 統合レイアウト内のランディングページ構造 */
.case-study-section .lp-structure .structure-diagram {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
    flex: 1;
}

.case-study-section .lp-section {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 2px;
    padding: 0.05rem 0.1rem;
    font-size: 0.6rem;
    font-weight: bold;
    color: var(--text-primary);
    text-align: center;
    box-shadow: none;
    transition: none;
    position: relative;
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1.0;
}

.case-study-section .lp-section:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}
*/



/* 統合レイアウト内の製造業ホームページ構造図表のスタイル */
/*
.case-study-section .manufacturing-diagram {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    border: none;
    position: relative;
    overflow: visible;
    flex: 1;
}

.case-study-section .top-level {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
}

.case-study-section .top-level::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 15px;
    background: #4b5563;
}

.case-study-section .second-level {
    display: flex;
    flex-direction: row;
    gap: 0.2rem;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.case-study-section .main-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    flex: 1;
    min-width: 0;
}

.case-study-section .main-section::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 15px;
    background: #4b5563;
}

.case-study-section .page-box.main-page {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 2px;
    padding: 0.05rem 0.1rem;
    font-size: 0.6rem;
    font-weight: bold;
    color: var(--text-primary);
    text-align: center;
    box-shadow: none;
    transition: none;
    position: relative;
    min-width: auto;
    max-width: none;
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1.0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.case-study-section .page-box.main-page:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

.case-study-section .page-box.main-page::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 10px;
    background: #4b5563;
}

.case-study-section .sub-level {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
}

.case-study-section .sub-level::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 10px;
    background: #4b5563;
}

.case-study-section .page-box.sub-page {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 2px;
    padding: 0.05rem 0.1rem;
    font-size: 0.6rem;
    font-weight: bold;
    color: var(--text-primary);
    text-align: center;
    box-shadow: none;
    transition: none;
    min-width: auto;
    max-width: none;
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1.0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.case-study-section .page-box.sub-page:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
    background: transparent;
}

/* サブページがないセクションの調整 */
.case-study-section .main-section:has(.sub-level:empty) .page-box.main-page::after {
    display: none;
}

.case-study-section .main-section:not(:has(.sub-level)) .page-box.main-page::after {
    display: none;
}
*/

.pricing-item {
    padding: 0.5rem;
    font-size: 0.9rem;
}

.pricing-item.feature {
    font-weight: bold;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.pricing-section h2::before,
.process-comparison h2::before,
.pricing-comparison h2::before,
.website-types-explanation h2::before,
.local-seo-section h2::before,
.contact-section h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
}

.pricing-section h2:hover::before,
.process-comparison h2:hover::before,
.pricing-comparison h2:hover::before,
.website-types-explanation h2:hover::before,
.local-seo-section h2:hover::before,
.contact-section h2:hover::before {
    left: 100%;
}

.pricing-section h2 .heading-icon,
.process-comparison h2 .heading-icon,
.pricing-comparison h2 .heading-icon,
.website-types-explanation h2 .heading-icon,
.local-seo-section h2 .heading-icon,
.contact-section h2 .heading-icon {
    font-size: 2rem;
    margin-right: 1rem;
    display: inline-block;
}



/* ヒーローセクションは例外 */
section.hero {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 0 0 24px 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    margin: 40px 0 2rem 0;
    padding: 2.5rem 0;
}

section.hero::before {
    display: none;
}


/* クイックナビゲーションセクションは例外 */
section.quick-nav-section {
    background: var(--bg-primary);
    border-radius: 24px;
    box-shadow: none;
    border: none;
    margin: 0.5rem auto;
    padding: 0.75rem 0;
    max-width: 1200px;
    width: 90%;
}

section.quick-nav-section::before {
    display: none;
}

/* ========================================
 * メインコンテンツ（滋賀県中小企業向け最適化）
 * ======================================== */

/* ヒーローセクション */
.hero {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: 2.5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: 0 auto 2rem auto;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.hero .container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* ヒーローセクション：統一感のあるデザイン */
.hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 auto 1.5rem auto;
    line-height: 1.4;
    color: #ffffff;
    text-align: center;
    max-width: 1000px;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}

.hero .subtitle {
    font-size: 1.6rem;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 1.25rem auto;
    line-height: 1.5;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}

.hero .subtitle a {
    color: inherit;
    text-decoration: underline;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.hero .subtitle a:hover,
.hero .subtitle a:focus,
.hero .subtitle a:visited:hover {
    color: #ffd700;
}

.subtitle-icon {
    font-size: 1.1em;
    line-height: 1;
    display: inline-flex;
}

.hero .subtitle-points {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 900px;
    text-align: center;
}

.hero .subtitle-points li {
    font-size: 1.1rem;
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}

.hero .subtitle-points li:last-child {
    margin-bottom: 0;
}

.hero .subtitle-points li .subtitle-highlight {
    font-weight: 700;
}

.hero .subtitle-points li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}

.hero .subtitle-points li a:hover {
    color: #ffd700;
    border-bottom-color: #ffd700;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

/* フェイドイン・フェイドアウトスライダー */
.fade-slider-container {
    position: relative;
    margin: 1.5rem auto;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    aspect-ratio: 16/9;
    min-height: 400px;
    display: block;
}


.fade-slider {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.fade-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 0;
}

.fade-slide.active {
    opacity: 1;
    z-index: 1;
}

.fade-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

.fade-slider-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 1.5rem;
    padding: 1rem 0;
}

.about-founder-section .fade-slider-nav {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.fade-slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(156, 163, 175, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.fade-slider-dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
    border-color: var(--primary-color);
}

.fade-slider-dot:hover {
    background: rgba(30, 58, 138, 0.6);
    transform: scale(1.1);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .fade-slider-container {
        aspect-ratio: 4/3;
    }
    
    .fade-slider-nav {
        gap: 8px;
        padding: 0.75rem 0;
    }
    
    .fade-slider-dot {
        width: 10px;
        height: 10px;
    }
}

/* クイックナビゲーション */
.quick-nav-section {
    padding: 0.75rem 0;
    background: var(--bg-primary);
    margin: 0.5rem auto;
    border-radius: 24px;
    position: relative;
    max-width: 1200px;
    width: 90%;
}

.quick-nav-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.05), rgba(59, 130, 246, 0.05));
    border-radius: 24px;
    pointer-events: none;
}

.quick-nav-section .container {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.quick-nav-section .container::before {
    display: none;
}

/* ========================================
 * クイックナビゲーションボタン群
 * ======================================== */

/* ボタンコンテナ */
.quick-nav-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* タブレットでは2列に */
@media (max-width: 900px) {
    .quick-nav-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* スマホでは即座に1列に */
@media (max-width: 600px) {
    .quick-nav-buttons {
        grid-template-columns: 1fr;
    }
}

/* 基本ボタンスタイル */
.quick-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background: var(--gradient-primary);
    border: none;
    border-radius: 25px;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    font-weight: bold;
    min-height: 50px;
    font-size: 16px;
    text-align: center;
}

.quick-nav-btn::before {
    display: none;
}

.quick-nav-btn:hover {
    background: var(--gradient-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

/* 工房主に相談ボタン（オレンジ色で統一・フローティングボタンと同じ） */
.quick-nav-btn.consultation-btn {
    background: #ff6900;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 20px rgba(255, 105, 0, 0.4);
    font-weight: 900;
    position: relative;
}

.quick-nav-btn.consultation-btn::before {
    display: none;
}

.quick-nav-btn.consultation-btn:hover {
    background: #e55a00;
    border: 2px solid #ffffff;
    box-shadow: 0 8px 30px rgba(255, 105, 0, 0.6);
    transform: translateY(-3px) scale(1.05);
}

/* 自分で更新できる化ボタン（新サービス強調） */
.quick-nav-btn.update-corner-btn {
    background: linear-gradient(135deg, #0693e3 0%, #0575c9 100%);
    border: 2px solid #ffffff;
    box-shadow: 0 4px 20px rgba(6, 147, 227, 0.4);
    font-weight: 700;
    position: relative;
}

.quick-nav-btn.update-corner-btn::before {
    display: none;
}

.quick-nav-btn.update-corner-btn:hover {
    background: linear-gradient(135deg, #0575c9 0%, #0457a1 100%);
    border: 2px solid #ffffff;
    box-shadow: 0 8px 30px rgba(6, 147, 227, 0.6);
    transform: translateY(-3px) scale(1.05);
}

.btn-icon {
    font-size: 1.2rem;
    margin-right: 0.5rem;
    display: inline-block;
}

.btn-text {
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}

.btn-arrow {
    font-size: 14px;
    transition: transform 0.3s ease;
    opacity: 1;
}

.quick-nav-btn:hover .btn-arrow {
    transform: translateX(3px);
    opacity: 1;
}

/* 個人タッチセクション */
.personal-touch {
    padding-top: 1rem;padding-bottom:0.5rem;                                                            
    background: transparent;
    margin: 2rem auto;
    max-width: 840px;
    border-radius: 24px;
    position: relative;
}

.personal-touch .container {
    background: transparent;
    border-radius: 16px;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 2rem;
    color: var(--text-primary);
    font-weight: bold;
    margin: 0;
}

.personal-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
}

.personal-image {
    text-align: center;
}

.personal-image img {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--primary-color);
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
    position: relative;
}

.personal-image img::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--primary-color), var(--primary-light), var(--accent-color));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.personal-image:hover img {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(30, 58, 138, 0.3);
}

.personal-text h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.personal-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}


.section-title {
    text-align: center;
    font-size: 2.2rem;
    color: var(--text-primary);
    margin-bottom: 3rem;
    font-weight: bold;
}


/* 他のセクション内のh3にも同じスタイルを適用 */
section h3 {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin: 0 0 1.5rem 0;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    text-align: center;
    justify-content: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

section h3 .heading-icon {
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ページ全体のpタグの改行を統一 */
p {
    margin-bottom: 0.75rem;
}

p:last-child {
    margin-bottom: 0;
}

/* セクション内のpタグを左寄せに（ただしキャプションは除外） */
section p:not(figcaption p):not(.image-caption) {
    text-align: left;
    margin-bottom: 0.75rem;
}

section p:last-child {
    margin-bottom: 0;
}


/* ========================================
 * フローティングボタン群（スクロール制御版）
 * ======================================== */

/* メインコンテナ */
.floating-quick-nav {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 10px;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  pointer-events: auto;
  width: auto;
  max-width: 200px;
  
  /* スクロール制御のための初期設定 */
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: all 0.3s ease-in-out;
}

/* 基本ボタンスタイル */
.floating-quick-nav .floating-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--gradient-primary);
  color: white;
  text-decoration: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  min-height: 45px;
  min-width: 140px;
  border: 2px solid #ffffff;
  box-shadow: var(--shadow-lg);
  transition: all 0.3s ease;
  text-align: center;
}

/* ボタン内テキストスタイル */
.floating-quick-nav .floating-nav-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  display: block;
  visibility: visible;
  opacity: 1;
  text-shadow: none;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
}

/* ボタン内アイコンスタイル */
.floating-quick-nav .floating-nav-icon {
  color: #ffffff;
  font-size: 16px;
  display: inline-block;
  visibility: visible;
  opacity: 1;
  text-shadow: none;
  line-height: 1.2;
}

/* 基本ホバー効果 */
.floating-quick-nav .floating-nav-btn:hover {
  background: var(--gradient-secondary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

/* TOPボタン（青系で目立たせる） */
.floating-quick-nav .page-top-btn {
  background: var(--gradient-primary);
  font-size: 16px;
  font-weight: 900;
  border: 2px solid #ffffff;
  box-shadow: var(--shadow-xl);
}

.floating-quick-nav .page-top-btn .floating-nav-text {
  color: white;
  font-size: 16px;
  font-weight: 900;
  display: inline;
  visibility: visible;
  opacity: 1;
}

.floating-quick-nav .page-top-btn .floating-nav-icon {
  color: white;
  font-size: 16px;
  display: inline;
  visibility: visible;
  opacity: 1;
}

/* サンプルサイト閲覧請求ボタン（オレンジ色） */
.floating-quick-nav .floating-nav-btn.consultation-floating-btn {
    background: #ff6900;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 20px rgba(255, 105, 0, 0.4);
    font-weight: 900;
    position: relative;
}

.floating-quick-nav .floating-nav-btn.consultation-floating-btn::before {
    display: none;
}

.floating-quick-nav .floating-nav-btn.consultation-floating-btn:hover {
    background: #e55a00;
    border: 2px solid #ffffff;
    box-shadow: 0 8px 30px rgba(255, 105, 0, 0.6);
    transform: translateY(-3px) scale(1.05);
}

/* サービスボタン（オレンジ色 - メニューバーの「業種別サンプルサイト請求」と同じ） */
.floating-quick-nav .floating-nav-btn.service-btn {
    background: #ff6900;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 20px rgba(255, 105, 0, 0.4);
    font-weight: bold;
}

.floating-quick-nav .floating-nav-btn.service-btn:hover {
    background: var(--gradient-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

@keyframes pulse-consultation {
    0% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.02); }
    100% { opacity: 0.7; transform: scale(1); }
}

/* レスポンシブ設定 */
@media (max-width: 768px) {
    .floating-quick-nav {
        bottom: 15px;
        left: 15px;
        right: auto;
        gap: 8px;
        width: auto;
        max-width: 160px;
        background: transparent;
    }
    
    .floating-quick-nav .floating-nav-btn {
        padding: 8px 6px;
        font-size: 13px;
        min-width: 80px;
        min-height: 40px;
        opacity: 0.8;
    }
    
    .floating-quick-nav .floating-nav-text {
        font-size: 13px;
    }
    
    .floating-quick-nav .floating-nav-icon {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .floating-quick-nav {
        bottom: 10px;
        left: 10px;
        right: auto;
        gap: 6px;
        width: auto;
        max-width: 140px;
        background: transparent;
    }
    
    .floating-quick-nav .floating-nav-btn {
        padding: 6px 4px;
        font-size: 12px;
        min-width: 70px;
        min-height: 35px;
        opacity: 0.8;
    }
    
    .floating-quick-nav .floating-nav-text {
        font-size: 12px;
    }
    
    .floating-quick-nav .floating-nav-icon {
        font-size: 15px;
    }
}

/* プログレスバー */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: var(--gradient-primary);
    z-index: 9999;
    transition: width 0.3s ease;
}

/* スライダー - 削除済み（重複定義のため） */


/* テーブル */
.table-container {
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

/* WordPressのデフォルトテーブルスタイルを上書き（横スライダーを削除） */
.wp-block-table,
figure.wp-block-table,
.entry-content .wp-block-table,
article .wp-block-table,
.entry-content figure.wp-block-table,
article figure.wp-block-table {
    overflow-x: visible;
}

/* ec-tableクラスが付いているテーブルを含む親要素のoverflow-xも上書き */
.ec-table-wrapper,
.entry-content .ec-table-wrapper,
article .ec-table-wrapper {
    overflow-x: visible;
}

/* WordPressブロックテーブルのth, tdのwhite-spaceを上書き（has-fixed-layoutクラスが付いている場合も含む） */
.wp-block-table th,
.wp-block-table td,
.wp-block-table table th,
.wp-block-table table td,
.wp-block-table.has-fixed-layout th,
.wp-block-table.has-fixed-layout td,
.wp-block-table.has-fixed-layout table th,
.wp-block-table.has-fixed-layout table td,
.wp-block-table table.has-fixed-layout th,
.wp-block-table table.has-fixed-layout td,
figure.wp-block-table th,
figure.wp-block-table td,
figure.wp-block-table table th,
figure.wp-block-table table td,
figure.wp-block-table.has-fixed-layout th,
figure.wp-block-table.has-fixed-layout td,
figure.wp-block-table.has-fixed-layout table th,
figure.wp-block-table.has-fixed-layout table td,
figure.wp-block-table table.has-fixed-layout th,
figure.wp-block-table table.has-fixed-layout td,
.entry-content .wp-block-table th,
.entry-content .wp-block-table td,
.entry-content .wp-block-table table th,
.entry-content .wp-block-table table td,
.entry-content .wp-block-table.has-fixed-layout th,
.entry-content .wp-block-table.has-fixed-layout td,
.entry-content .wp-block-table.has-fixed-layout table th,
.entry-content .wp-block-table.has-fixed-layout table td,
.entry-content .wp-block-table table.has-fixed-layout th,
.entry-content .wp-block-table table.has-fixed-layout td,
article .wp-block-table th,
article .wp-block-table td,
article .wp-block-table table th,
article .wp-block-table table td,
article .wp-block-table.has-fixed-layout th,
article .wp-block-table.has-fixed-layout td,
article .wp-block-table.has-fixed-layout table th,
article .wp-block-table.has-fixed-layout table td,
article .wp-block-table table.has-fixed-layout th,
article .wp-block-table table.has-fixed-layout td {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

.table-container::-webkit-scrollbar {
    height: 8px;
}

.table-container::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
}

/* ec-tableクラスが付いているテーブルのth, tdを確実に上書き */
.ec-table th,
.ec-table td,
table.ec-table th,
table.ec-table td,
.wp-block-table .ec-table th,
.wp-block-table .ec-table td,
figure.wp-block-table .ec-table th,
figure.wp-block-table .ec-table td,
.entry-content .ec-table th,
.entry-content .ec-table td,
.entry-content table.ec-table th,
.entry-content table.ec-table td,
article .ec-table th,
article .ec-table td,
article table.ec-table th,
article table.ec-table td {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

th {
    background: var(--gradient-primary);
    color: white;
    font-weight: bold;
}

tr:hover {
    background: var(--bg-secondary);
}

/* 目次 */
.table-of-contents {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    position: relative;
}

.toc-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.toc-list {
    list-style: none;
    padding: 0;
    line-height: 0.7;
}

.toc-list li {
    margin-bottom: 8px;
}

.toc-list a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.toc-list a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

.toc-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 14px;
    transition: color 0.3s ease;
}

.toc-toggle:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* 地域コンテンツ */
.local-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
    margin: 40px 0;
}

.local-content-item {
    background: var(--bg-primary);
    padding: 30px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
    border: 1px solid var(--border-light);
}

.local-content-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
}

.local-story h3 {
    color: var(--primary-color);
        margin-bottom: 15px;
        font-size: 1.2rem;
    }
    
.local-story p {
        font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

.local-story p:last-child {
    margin-bottom: 0;
}

.local-content-image {
    margin-top: 20px;
}

.local-content-image a {
    display: inline-block;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.local-content-image a:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.local-small-image {
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    cursor: pointer;
}

/* モバイル対応 */
@media (max-width: 768px) {
    /* フッターレイアウト - 縦3段重ね */
    .footer-main {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .footer-company-info,
    .footer-contact-info,
    .footer-service-info {
        flex: none;
    }
    
    .footer-company-name {
        font-size: 1.3rem;
        margin-bottom: 0.6rem;
    }
    
    .footer-copyright {
        text-align: center;
    }
    
    /* ページ全体の幅制限を解除 */
    body, html {
        width: 100%;
        max-width: none;
        overflow-x: hidden;
    }
    
    .content-Wrap {
        width: 100%;
        max-width: none;
        padding: 0;
        margin: 0;
    }
    
    .container {
        padding: 0 5px;
        width: 100%;
        max-width: none;
        margin: 0;
    }
    
    .main-content {
        margin-top: 50px;
        padding: 0.3rem;
        width: 100%;
        max-width: none;
    }
    
    /* セクションの幅を広く使用 */
    section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section),
    .pricing-section,
    .process-comparison,
    .pricing-comparison,
    .website-types-explanation,
    .local-seo-section,
    .contact-section,
    .quick-nav-section {
        width: 98%;
        max-width: none;
        margin: 0.5rem auto;
        padding: 1rem 0.5rem;
    }
    
    /* スマホ画面での本文テキストのみ10%増 */
    p, li, span, div {
        font-size: 1.1rem;
        line-height: 1.6;
    }
    
    /* ヒーローセクションのサブタイトルは除外 */
    .hero .subtitle {
        font-size: 1.4rem;
        font-weight: 600;
        margin: 0 auto 1rem auto;
        line-height: 1.5;
    }
    
    .hero .subtitle-points {
        font-size: 1rem;
        margin: 0 auto;
    }
    
    .hero .subtitle-points li {
        font-size: 1rem;
        margin-bottom: 0.6rem;
        line-height: 1.6;
    }
    
    /* ヘッダーのモバイル対応 */
    .simple-header .header-content {
        padding: 0.5rem 15px;
        gap: 1rem;
    }
    
    .simple-header .logo img {
        height: 25px;
        max-width: 100px;
        width: auto;
        object-fit: contain;
        display: inline-block;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
    
    .simple-header .nav-menu {
        display: none;
    }
    
    .header-cta-buttons {
        display: none;
    }
    
    .header-content {
        flex-wrap: wrap;
    }
    
    .simple-header .nav-menu {
        order: 3;
        width: 100%;
        max-width: 100%;
        margin-top: 0.5rem;
    }
    
    .header-right {
        margin-left: auto;
    }
    
    .hamburger-btn {
        display: flex;
    }
    
    .simple-header .mobile-menu {
        top: 0;
    }
    

    
    
    .page-top-right {
        bottom: 120px;
        right: 10px;
    }
    
    .page-top-corner {
        bottom: 20px;
        right: 20px;
    }
    
    .page-top-btn {
        padding: 10px 15px;
        font-size: 12px;
        min-width: 70px;
    }
    
    .floating-nav-btn {
        padding: 12px 20px;
        font-size: 14px;
        min-width: auto;
        width: 100%;
        justify-content: center;
    }
    
    .slider-container {
        margin: 0 15px;
        border-radius: 8px;
    }
    
    .slide img {
        border-radius: 8px;
    }
    
    .table-container {
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color) var(--bg-tertiary);
    }
    
    .local-content-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .local-content-item {
        padding: 20px;
    }
    
    .local-story p {
        font-size: 0.9rem;
    }
    
    .local-content-image {
        margin-top: 20px;
    }
    
    .local-small-image {
    border-radius: 8px;
        cursor: pointer;
    }
}

@media (max-width: 480px) {
    /* ページ全体の幅制限を完全解除 */
    body, html {
        width: 100%;
        max-width: none;
        overflow-x: hidden;
    }
    
    .content-Wrap {
        width: 100%;
        max-width: none;
        padding: 0;
        margin: 0;
    }
    
    .container {
        padding: 0 3px;
        width: 100%;
        max-width: none;
        margin: 0;
    }
    
    .main-content {
        padding: 0.2rem;
        width: 100%;
        max-width: none;
    }
    
    /* セクションの幅をさらに広く使用 */
    section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section),
    .pricing-section,
    .process-comparison,
    .pricing-comparison,
    .website-types-explanation,
    .local-seo-section,
    .contact-section {
        width: 99%;
        max-width: none;
        margin: 0.3rem auto;
        padding: 0.8rem 0.3rem;
    }
    
    /* 小さなスマホ画面での本文テキストのみ10%増 */
    p, li, span, div {
        font-size: 1.1rem;
        line-height: 1.6;
    }
    
    /* サンプルメイン画像を小さなスマホで1列に（gapを調整） */
    .sample-main-images {
        grid-template-columns: 1fr;
        gap: 15px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
    }
    
    .sample-main-images > div {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    
    .sample-main-images > div > div {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    .sample-main-images img {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        box-sizing: border-box;
        display: block;
    }
    
    /* ヒーローセクションのサブタイトルは除外 */
    .hero .subtitle {
        font-size: 1.3rem;
        font-weight: 600;
        margin: 0 auto 0.9rem auto;
        line-height: 1.5;
    }
    
    .hero .subtitle-points {
        font-size: 0.95rem;
        margin: 0 auto;
    }
    
    .hero .subtitle-points li {
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
        line-height: 1.6;
    }
    
    /* 5つボタンのスマホ対応 */
    .quick-nav-buttons,
    .quick-nav-section .quick-nav-buttons {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 100%;
        padding: 0 1rem;
    }
    
    .quick-nav-btn {
        width: 100%;
        justify-content: center;
        padding: 9px 17px;
        font-size: 12px;
        min-height: 42px;
        line-height: 1.4;
        gap: 4px;
    }
    
    /* 3段目の「工房主に相談」ボタンをカラムいっぱいに */
    .quick-nav-btn:last-child {
        width: 100%;
        max-width: none;
        grid-column: 1 / -1;
    }
    
    /* 5つボタンのタブレット対応（削除 - 1列を維持） */
    
    .quick-nav-btn {
        padding: 12px 16px;
        font-size: 13px;
        min-height: 50px;
    }
    
    /* 無料相談セクションのスマホ対応 */
    .consultation-details-section {
        padding: 2rem 0;
        margin: 1rem auto;
    }
    
    /* .consultation-grid - クリア済み */
    
    .consultation-item {
        padding: 1.5rem;
    }
    
    /* .method-options - クリア済み */
    
    .method-option {
        padding: 1rem;
    }
    
    .floating-nav-btn {
        padding: 6px 10px;
        font-size: 10px;
        min-width: 70px;
    
    .floating-quick-nav {
        left: 10px;
        right: auto;
        bottom: 10px;
        width: auto;
        max-width: 160px;
    
    .page-top-btn {
        padding: 6px 10px;
        font-size: 10px;
        min-width: 50px;
    }
    
    .slider-container {
        margin: 0 10px;
    }
    
    .local-content-item {
        padding: 15px;
    }
}

/* PC対応 */
@media (min-width: 1024px) {
    .floating-quick-nav {
        flex-direction: column;
        gap: 10px;
        right: 20px;
        bottom: 20px;
    }
    
    .page-top-right {
        bottom: 200px;
        right: 20px;
    }
    
    .page-top-corner {
        bottom: 30px;
        right: 30px;
    }
    
    .page-top-btn {
        min-width: 90px;
        padding: 14px 24px;
        font-size: 15px;
    }
    
    .floating-nav-btn {
        min-width: 140px;
        padding: 14px 24px;
        font-size: 15px;
    }
    
    .slider-container {
        max-width: 1000px;
    }
}

/* 大画面モニター対応 */
@media (min-width: 1200px) {
    .floating-quick-nav {
        right: 30px;
        bottom: 30px;
    }
    
    .page-top-right {
        bottom: 250px;
        right: 30px;
    }
    
    .page-top-corner {
        bottom: 40px;
        right: 40px;
    }
}

/* 超大画面モニター対応 */
@media (min-width: 1400px) {
    .floating-quick-nav {
        right: 40px;
        bottom: 40px;
    }
    
    .page-top-right {
        bottom: 450px;
        right: 40px;
    }
    
    .page-top-corner {
        bottom: 50px;
        right: 50px;
    }
}

/* ========================================
 * 滋賀県中小企業向けレスポンシブ最適化
 * ======================================== */

/* タブレット対応 */
@media (max-width: 1024px) and (min-width: 769px) {
    /* .differences-grid - クリア済み */
    
    /* 工程比較図表のタブレット対応 */
    .process-flow-comparison {
        gap: 2rem;
        padding: 0 1.5rem;
    }
    
    .process-flow {
        padding: 1.5rem;
    }
    
    .flow-title {
        font-size: 1.4rem;
        padding: 0.75rem;
        margin: 0 0 1.5rem 0;
    }
    
    .flow-steps {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .flow-step {
        min-width: 140px;
        padding: 0.9rem 1.2rem;
        font-size: 0.85rem;
    }
    
    .flow-arrow {
        font-size: 1.3rem;
        margin: 0 0.3rem;
    }
    
    /* 料金比較テーブルのタブレット対応 */
    .pricing-table-wrapper {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.2);
        margin-bottom: 3.5rem;  /* スクロールバーとの間隔をより確保 */
        padding-bottom: 25px;  /* スクロールバーとの間隔をより確保 */
    }
    
    .pricing-table-wrapper::-webkit-scrollbar {
        height: 14px;  /* 10px → 14px でより太く */
        margin-top: 22px;  /* 10px → 22px でより離す */
    }
    
    .pricing-table-wrapper::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.2);  /* .type-titleと同じ透明度 */
        border-radius: 5px;
        margin: 0 4px;  /* 左右にマージン */
    }
    
    .pricing-table-wrapper::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.5);  /* .type-titleと同じ透明度 */
        border-radius: 5px;
        border: 1px solid rgba(255, 255, 255, 0.3);  /* .type-titleと同じボーダー */
    }
    
    .pricing-table-wrapper::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.7);  /* .type-titleと同じホバー効果 */
    }
    
    .pricing-table {
        min-width: 700px;
    }
    
    .pricing-header {
        grid-template-columns: 140px 180px 180px 180px;
    }
    
    .pricing-row {
        grid-template-columns: 140px 180px 180px 180px;
    }
    
    .pricing-item {
        padding: 1.1rem 0.8rem;
        font-size: 0.9rem;
    }
    
    .pricing-item.feature {
        min-width: 180px;
    }
    .hero h1 {
        font-size: 2.2rem;
    }
    
    .quick-nav-buttons {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    
    .personal-content {
        grid-template-columns: 250px 1fr;
        gap: 2.5rem;
    }
    
    .personal-image img {
        width: 220px;
        height: 220px;
    }
    
    
    /* 他のセクション内のh3のレスポンシブ対応 */
    section h3 {
        font-size: 1.25rem;
        margin-bottom: 1.25rem;
        padding-bottom: 0.75rem;
    }
    
    section h3 .heading-icon {
        font-size: 1.4rem;
    }
}

/* スマートフォン対応（追加最適化） */
@media (max-width: 768px) {
    /* ヒーローセクション */
    .hero {
        padding: 2rem 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .hero h1 {
        font-size: 1.5rem;
        line-height: 1.3;
        margin: 0 auto 1.25rem auto;
        text-align: center;
        padding: 0 1rem;
    }
    
    .hero .subtitle {
        font-size: 1.4rem;
        font-weight: 600;
        margin: 0 auto 1rem auto;
        padding: 0 1rem;
        text-align: center;
    }
    
    .hero .subtitle-points {
        padding: 0 1rem;
        margin: 0 auto;
    }
    
    .hero .subtitle-points li {
        font-size: 1rem;
        margin-bottom: 0.6rem;
    }
    
    .slide img {
        height: 250px;
    }
    
    /* クイックナビゲーション */
    .quick-nav-section {
        padding: 0.5rem 0;
        margin: 0.5rem auto;
        width: 95%;
    }
    
    .quick-nav-buttons,
    .quick-nav-section .quick-nav-buttons {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .quick-nav-btn {
        padding: 10px 15px;
        flex-direction: column;
        text-align: center;
        gap: 0.3rem;
        min-height: 45px;
        font-size: 12px;
    }
    
    .btn-text {
        font-size: 11px;
    }
    
    .btn-arrow {
        font-size: 11px;
    }
    
    /* 個人タッチセクション */
    .personal-touch {
        padding: 3rem 0;
        margin: 2rem auto;
        max-width: 100%;
    }
    
    .personal-touch-card h3 {
        font-size: 1.2rem;
    }
    
    .personal-touch-text {
        font-size: 0.9rem;
    }
    
    .personal-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        padding: 0 1rem;
    }
    
    .personal-image img {
        width: 180px;
        height: 180px;
    }
    
    .personal-text h3 {
        font-size: 1.3rem;
    }
    
    .personal-text p {
        font-size: 1rem;
    }
    
    /* ターゲットセクション - カード化スタイル適用済み */
    
    .section-title {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }
    
    
    /* 他のセクション内のh3のレスポンシブ対応 */
    section h3 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }
    
    section h3 .heading-icon {
        font-size: 1.4rem;
    }
    
    
    
    .footer-contact-details {
        align-items: center;
    }
    
    .footer-phone,
    .footer-email,
    .footer-address {
        justify-content: center;
    }
    
    .address-text {
        font-size: 0.9rem;
        text-align: center;
    }
    
    .footer-company-description {
        font-size: 0.95rem;
        line-height: 1.3;
    }
    
    .company-logo {
        justify-content: center;
    }
    
    .footer-logo {
        height: 40px;
    }
    
    .company-logo h3 {
        font-size: 1.3rem;
    }
    
    .company-description {
        font-size: 0.95rem;
    }
    
    .service-list {
        text-align: left;
        max-width: 200px;
        margin: 0 auto;
    }
    
    .contact-info {
        margin-bottom: 1.5rem;
    }
    
    .contact-btn {
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
    }
    
    .footer-bottom {
        padding: 1.5rem 0;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .footer-links {
        justify-content: center;
        gap: 1.5rem;
    }
    
    .footer-link {
        font-size: 0.85rem;
    }
    
    /* フッターお問い合わせセクション - モバイル対応 */
    .footer-contact-section {
        margin: 0 1rem 1.5rem 1rem;
        padding: 1.2rem 1rem;
    }
    
    .footer-contact-title {
        font-size: 1.1rem;
        margin: 0 0 1rem 0;
    }
    
    .footer-contact-btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.95rem;
    }
}

/* 小さいスマートフォン対応 */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.3rem;
        line-height: 1.3;
        margin: 0 auto 1.25rem auto;
        text-align: center;
        padding: 0 0.75rem;
    }
    
    .hero .subtitle {
        font-size: 1.3rem;
        font-weight: 600;
        margin: 0 auto 0.9rem auto;
        padding: 0 0.75rem;
        text-align: center;
    }
    
    .hero .subtitle-points {
        padding: 0 0.75rem;
        margin: 0 auto;
    }
    
    .hero .subtitle-points li {
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }
    
    .slide img {
        height: 200px;
    }
    
    .quick-nav-btn {
        padding: 8px 12px;
        min-height: 40px;
        font-size: 11px;
    }
    
    .btn-text {
        font-size: 11px;
    }
    
    .btn-arrow {
        font-size: 11px;
    }
    
    /* .value-grid - クリア済み */
    
    .personal-touch-card h3 {
        font-size: 1.1rem;
    }
    
    .personal-touch-text {
        font-size: 0.85rem;
    }
    
    .personal-image img {
        width: 150px;
        height: 150px;
    }
    
    .section-title {
        font-size: 1.6rem;
    }
    
    section h3 {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }
    
    section h3 .heading-icon {
        font-size: 1.3rem;
    }
    
    
    .footer-service-title {
        font-size: 1.1rem;
    }
    
    
    .footer-company-description {
        font-size: 0.9rem;
        line-height: 1.3;
    }
    
    .contact-btn {
        padding: 0.7rem 1rem;
        font-size: 0.85rem;
    }
    
    /* フッターお問い合わせセクション - 小さいスマートフォン対応 */
    .footer-contact-section {
        margin: 0 0.5rem 1.2rem 0.5rem;
        padding: 1rem 0.5rem;
    }
    
    .footer-contact-title {
        font-size: 1rem;
        margin: 0 0 0.8rem 0;
    }
    
    .footer-contact-btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
    }
}

/* ========================================
 * 中小企業経営者向け心理訴求要素
 * ======================================== */

/* 信頼感を演出する要素 */
.trust-indicators {
    background: var(--bg-secondary);
    padding: 2rem 0;
    border-top: 3px solid var(--accent-color);
    border-bottom: 3px solid var(--accent-color);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* スマホ専用personal-touchレイアウト - JavaScriptで制御 */
@media screen and (max-width: 480px) {
    /* JavaScriptで操作される要素のベーススタイル */
    section.personal-touch .personal-touch-section-wrapper,
    section.one-man-operation .personal-touch-section-wrapper,
    section.professional-touch .personal-touch-section-wrapper {
        text-align: center;
    }
}

/* ========================================
 * サンプルメイン画像
 * ======================================== */
.sample-main-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 50px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* PC画面で確実に横並びにする */
@media (min-width: 769px) {
    section#semi-order .sample-main-images,
    #semi-order .sample-main-images,
    section[id="semi-order"] .sample-main-images,
    .sample-main-images {
        grid-template-columns: 1fr 1fr;
        display: grid;
    }
}

.sample-main-images > div {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.sample-main-images > div > div {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.sample-main-images img {
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    display: block;
}

/* ========================================
 * 緊急用グリッドオーバーライド（最優先）
 * ======================================== */
@media (max-width: 768px) {
    /* 全てのグリッドを強制的に1列に */
    .quick-nav-buttons,
    .quick-nav-section .quick-nav-buttons,
    section .quick-nav-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* サンプルメイン画像をスマホで1列に */
    .sample-main-images {
        grid-template-columns: 1fr;
        gap: 20px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
    }
    
    .sample-main-images > div {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    
    .sample-main-images > div > div {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    .sample-main-images img {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
        box-sizing: border-box;
        display: block;
    }
}

/* レスポンシブ対応 - グリッド設定クリア済み */

@media (max-width: 600px) {
    /* スマホで全グリッドを1列に - グリッド設定クリア済み */
    }
    
    /* case-study-mainのスマホ対応 */
    .case-study-main {
        padding: 15px;
        margin: 0 auto 20px auto;
        max-width: 95%;
        border-radius: 12px;
    }
    
    /* case-study-mainの子要素を縦並びに */
    .case-study-main .case-study-layout {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }
    
    .case-study-main .case-study-image-container {
        order: 1;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .case-study-main .case-study-content {
        order: 2;
        width: 100%;
        text-align: center;
    }
    
    /* 指定セクションのグリッドを強制的に1列に - クリア済み */
    
    /* flexboxの場合 */
    .personal-touch-content {
        display: flex;
        flex-direction: column;
    }
    
    /* professional-touchの特別対応 */
    .professional-touch .personal-touch-content,
    section.professional-touch .personal-touch-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}

.trust-item {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease;
}

.trust-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.trust-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.trust-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.trust-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* 地域密着感を演出 */
.local-connection {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: 3rem 0;
    position: relative;
    overflow: hidden;
}

.local-connection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="80" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="1" fill="rgba(255,255,255,0.05)"/></svg>');
    opacity: 0.3;
}

.local-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}

.local-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.local-description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.local-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.local-feature {
    background: rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.local-feature h4 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--accent-light);
}

.local-feature p {
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.9;
    margin-bottom: 0.75rem;
}

/* コスト意識に訴求 */
.cost-benefit {
    background: var(--bg-primary);
    padding: 3rem 0;
    border-top: 1px solid var(--border-color);
}

.cost-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}

.cost-title {
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-weight: bold;
}

.cost-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.cost-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.cost-item {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.cost-item.featured {
    border-color: var(--primary-color);
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

.cost-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.cost-item.featured:hover {
    transform: scale(1.02) translateY(-4px);
}

.cost-item h4 {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-weight: bold;
}

.cost-item .price {
    font-size: 2rem;
    font-weight: bold;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.cost-item .price-note {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.cost-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cost-item li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light);
    position: relative;
    padding-left: 1.5rem;
}

.cost-item li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
}

.cost-item li:last-child {
    border-bottom: none;
}

/* 緊急感・限定感を演出 */
.urgency-section {
    background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
    color: white;
    padding: 2rem 0;
    text-align: center;
}

.urgency-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
}

.urgency-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.urgency-description {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    opacity: 0.95;
}

.urgency-cta {
    display: inline-block;
    background: white;
    color: var(--secondary-color);
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.urgency-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: var(--secondary-dark);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .trust-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .local-title {
        font-size: 1.6rem;
    }
    
    .local-features {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .cost-title {
        font-size: 1.6rem;
    }
    
    .cost-comparison {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .cost-item.featured {
        transform: none;
    }
    
    .cost-item.featured:hover {
        transform: translateY(-4px);
    }
    
    .urgency-title {
        font-size: 1.3rem;
    }
    
    .urgency-cta {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
    
    /* ボックスレイアウトのレスポンシブ対応 */
    .section-box {
        margin: 1rem 0;
        border-radius: 12px;
    }
    
    .section-box-header {
        padding: 1rem 1.5rem;
    }
    
    .section-box-content {
        padding: 1.5rem;
    }
    
    .content-box {
        padding: 1rem;
        margin: 0.5rem 0;
    }
    
    .card-grid {
        gap: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .highlight-box {
        padding: 1.5rem;
        margin: 1rem 0;
    }
    
    .quick-nav-section .container {
        padding: 0;
        margin: 0;
        border-radius: 0;
    }
    
    /* カード化されたセクションのレスポンシブ対応 */
    section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) {
        padding: 1.25rem;
        margin: 0.75rem auto;
        border-radius: 12px;
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    /* 事例紹介セクションのレスポンシブ対応 */
    .case-study-section {
        padding: 25px 0;
        margin: 15px auto;
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .case-study-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        text-align: center;
        grid-template-columns: 1fr;
    }
    
    .case-study-title {
        order: 1; /* 1番目に表示 */
        margin-bottom: 10px;
    }
    
    .case-study-image-container {
        order: 2; /* 2番目に表示（タイトルのすぐ下） */
        width: 100%;
    }
    
    .case-study-content {
        order: 3; /* 3番目に表示 */
    }
    
    .case-study-description {
        order: 4; /* 4番目に表示 */
    }
    
    .case-study-details {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        justify-items: center;
        text-align: center;
    }
    
    /* 統合カード化セクションのレスポンシブ対応 - 縦長解消のため間隔を詰める */
    .pricing-section,
    .process-comparison,
    .pricing-comparison,
    .website-types-explanation,
    .local-seo-section,
    .contact-section {
        padding: 25px 0;
        margin: 15px auto;
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    /* 統合カード化セクション内のh2のレスポンシブ対応 */
    .pricing-section h2,
    .process-comparison h2,
    .pricing-comparison h2,
    .website-types-explanation h2,
    .local-seo-section h2,
    .contact-section h2 {
        font-size: 1.5rem;
        padding: 1rem 1.3rem;
        margin: 1rem 0 2.5rem 0;
    }
    
    /* 見出しボックスのレスポンシブ対応 */
    h2.heading-box {
        font-size: 1.5rem;
        padding: 1.2rem 1.5rem;
    }
    
    h3.heading-box {
        font-size: 1.2rem;
        padding: 1rem 1.2rem;
    }
    
    h4.heading-box {
        font-size: 1.1rem;
        padding: 0.8rem 1rem;
    }
    
    /* 写真タイルのレスポンシブ対応 */
    .photo-tile-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .photo-tile.featured {
        grid-column: span 1;
    }
    
    .photo-tile img {
        height: 200px;
    }
    
    .photo-small {
        max-width: 150px;
    }
    
    .photo-medium {
        max-width: 300px;
    }
    
    .photo-large {
        max-width: 100%;
    }
    
    .photo-hero {
        height: 250px;
        border-radius: 12px;
    }
    
    .photo-gallery {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 0.75rem;
    }
    
    .photo-gallery-item img {
        height: 150px;
    }
    
    /* 写真タイルのレスポンシブ対応（修正版） */
    .photo-tile-section {
        padding: 0.8rem;
        margin: 1rem 0;
    }
    
    .photo-tile-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.3rem;
        overflow: hidden;
    }
    
    /* 指定された写真セクション専用のレスポンシブ対応 */
    .photo-tile-section .photo-tile-grid .photo-tile-item {
        aspect-ratio: 3/2; /* 960×640の比率を維持 */
        height: auto;
        overflow: hidden;
    }
    
    /* より具体的なセレクターで確実に適用（レスポンシブ） */
    section .photo-tile-section .photo-tile-grid img.photo-tile-item {
        aspect-ratio: 3/2; /* 960×640の比率を維持 */
        height: auto;
        object-fit: cover;
    }
    
    /* その他の写真タイルアイテムのレスポンシブ対応 */
    .photo-tile-item {
        height: 120px;
        overflow: hidden;
    }
    
    /* h4ボックスのレスポンシブ対応 */
    .content-box-h4 {
        margin: 1rem 0;
    }
    
    .content-box-h4 h4 {
        padding: 1rem;
        font-size: 1.1rem;
    }
    
    .content-box-h4 .content-text {
        padding: 1rem;
    }
    
    .content-box-h4 .content-image {
        padding: 0 1rem;
    }
    
    .content-box-h3 .content-image {
        margin: 0.75rem 0;
        padding: 0 1rem;
    }
    
    .image-caption {
        font-size: 0.8rem;
        padding: 0 0.25rem;
    }
    
    /* h2、h3ボックスのレスポンシブ対応 */
    .content-box-h2 {
        margin: 1rem 0;
    }
    
    .content-box-h2 h2 {
        font-size: 1.5rem;
        padding: 1.2rem 1.5rem;
    }
    
    .content-box-h2 .content-text {
        padding: 1.5rem;
    }
    
    .content-box-h3 {
        margin: 1rem 0;
    }
    
    .content-box-h3 h3 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }
    
    .content-box-h3 .content-text {
        padding: 1.2rem;
    }
    
    /* ネストされたボックスのレスポンシブ対応 */
    .content-box-h2 .content-box-h3,
    .content-box-h2 .content-box-h4,
    .content-box-h3 .content-box-h4 {
        margin: 0.5rem 0;
    }
    
    .content-box-h2 .content-box-h3 h3,
    .content-box-h2 .content-box-h4 h4,
    .content-box-h3 .content-box-h4 h4 {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }
    
    .content-box-h2 .content-box-h3 .content-text,
    .content-box-h2 .content-box-h4 .content-text,
    .content-box-h3 .content-box-h4 .content-text {
        padding: 0.8rem;
    }
    
    /* 工房主からひとことのレスポンシブ対応 */
    
    /* 工房主からひとことのレスポンシブ対応 */
    .personal-touch-section-wrapper {
        padding: 2rem;
        margin: 2rem 0;
        border-radius: 20px;
    }
    
    /* レスポンシブ対応 - 各セクションの背景色 */
    .personal-touch .personal-touch-section-wrapper {
        background: linear-gradient(135deg, rgba(255, 182, 193, 0.20), rgba(255, 192, 203, 0.15));
    }
    
    .one-man-operation .personal-touch-section-wrapper {
        background: linear-gradient(135deg, rgba(173, 216, 230, 0.20), rgba(176, 224, 230, 0.15));
    }
    
    .professional-touch .personal-touch-section-wrapper {
        background: linear-gradient(135deg, rgba(144, 238, 144, 0.20), rgba(152, 251, 152, 0.15));
    }
    
    .personal-touch-section-wrapper .personal-touch-main-title {
        font-size: 1.5rem;
        padding: 1rem 0;
        margin-bottom: 2rem;
    }
    
    
    
    .personal-touch-content {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }
    
    .personal-touch-photo {
        width: 160px;
        height: 160px;
        padding: 10px;
        flex-shrink: 0;
    }
    
    .personal-touch-photo a {
        display: block;
        width: 100%;
        height: 100%;
        clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
        transition: transform 0.3s ease, opacity 0.3s ease;
        cursor: pointer;
        pointer-events: auto;
        position: relative;
        z-index: 1;
    }
    
    .personal-touch-photo a:hover {
        transform: scale(1.05);
        opacity: 0.9;
    }
    
    .personal-touch-photo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        cursor: default;
    }
    
    .personal-touch-text {
        text-align: center;
        flex: none;
    }
    
    .personal-touch-text h3 {
        color: var(--primary-color);
        font-size: 1.3rem;
        margin: 0 0 1rem 0;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-shrink: 0;
        text-align: center;
        justify-content: center;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #e2e8f0;
        background: transparent;
        border-radius: 0;
        border-left: none;
        box-shadow: none;
    }
    
    /* スマホでは3つ目のセクションも通常の縦並び */
    .professional-touch .personal-touch-content {
        flex-direction: column;
    }
    

    
    /* 工房主からひとことのレスポンシブ対応 - 目立たないデザイン */
    .personal-touch-section-wrapper {
        padding: 1.5rem;
        margin: 1.5rem auto;
        max-width: 90%;
    }
    
    
    /* グリッドレイアウトのレスポンシブ対応 - クリア済み */
    
    /* .differences-grid子要素 - クリア済み */
    
    /* 料金比較テーブルのスマホ対応 - 横スライダー */
    .pricing-table-wrapper {
        overflow-x: auto;  /* 横スクロールを強制 */
        overflow-y: visible;  /* 縦は表示 */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.2);
        margin: 0.5rem auto 3rem auto;  /* 上マージンを0.5remに削減、下は3remに調整 */
        border-radius: 8px;  /* 12px → 8px でよりコンパクト */
        padding-bottom: 25px;  /* 30px → 25px で少し削減 */
        max-width: 100%;  /* 親要素の幅を超えないように */
    }
    
    .pricing-table-wrapper::-webkit-scrollbar {
        height: 16px;  /* 12px → 16px でより太く */
        margin-top: 25px;  /* 12px → 25px でより離す */
    }
    
    .pricing-table-wrapper::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.2);  /* .type-titleと同じ透明度 */
        border-radius: 6px;  /* .type-titleと同じ角丸 */
        margin: 0 4px;  /* .type-titleと同じマージン */
    }
    
    .pricing-table-wrapper::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.5);  /* .type-titleと同じ透明度 */
        border-radius: 6px;  /* .type-titleと同じ角丸 */
        border: 1px solid rgba(255, 255, 255, 0.3);  /* .type-titleと同じボーダー */
    }
    
    .pricing-table-wrapper::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.7);  /* .type-titleと同じホバー効果 */
    }
    
    .pricing-table {
        min-width: 700px;  /* 600px → 700px で確実に横スクロール */
        width: auto;  /* width: 100%を上書き */
    }
    
    .pricing-header {
        grid-template-columns: 160px 170px 170px 170px;
        gap: 0;
    }
    
    .pricing-header-cell {
        padding: 0.5rem 0.3rem;  /* 0.75rem 0.5rem → 0.5rem 0.3rem でさらにコンパクト */
        font-size: 0.8rem;  /* 0.9rem → 0.8rem でさらに小さく */
        white-space: nowrap;
        line-height: 1.1;  /* 1.2 → 1.1 で行間をさらに詰める */
        font-weight: 600;  /* 小さくなった分、太字で視認性確保 */
    }
    
    .pricing-item {
        padding: 0.4rem 0.25rem;  /* 1.25rem 1rem → 0.4rem 0.25rem でコンパクト */
        font-size: 0.75rem;  /* 0.95rem → 0.75rem で小さく */
        line-height: 1.2;  /* 1.5 → 1.2 で行間を詰める */
    }
    
    
    .pricing-item.price-highlight {
        padding: 0.6rem 0.4rem;  /* 価格は重要なので少し大きめに */
        font-size: 0.9rem;  /* 価格は重要なので少し大きめに */
        font-weight: 800;  /* 価格は最も太字で */
    }
    
    .pricing-row {
        grid-template-columns: 160px 170px 170px 170px;
        gap: 0;
    }
    
    .pricing-item {
        padding: 0.75rem 0.5rem;  /* 1rem 0.75rem → 0.75rem 0.5rem で高さ削減 */
        font-size: 0.8rem;  /* 0.85rem → 0.8rem で高さ削減 */
        line-height: 1.3;  /* 1.4 → 1.3 で行間を詰める */
        min-width: 150px;
    }
    
    .pricing-item.price-highlight {
        font-size: 1rem;  /* 1.1rem → 1rem で高さ削減 */
        padding: 0.6rem 0.5rem;  /* パディングをさらに削減 */
    }
    
    /* ウェブサイト構造比較図表のレスポンシブ対応 */
    /*
    .structure-comparison-wrapper {
        flex-direction: column;
        gap: 2rem;
        padding: 0 1rem;
    }
    
    .structure-type {
        padding: 1.5rem;
    }
    
    .structure-title {
        font-size: 1.3rem;
        padding: 0.75rem;
        margin: 0 0 1.5rem 0;
    }
    
    .sub-pages {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .page-box {
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
    }
    

    
    .page-box.sub-page {
        min-width: 100px;
        font-size: 0.8rem;
        padding: 0.75rem 1rem;
    }
    
    .lp-section {
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .lp-section:first-child,
    .lp-section:last-child {
        font-size: 1rem;
    }
    
    /* 製造業ホームページ構造図表のレスポンシブ対応 */
    .manufacturing-structure-wrapper {
        padding: 0 1rem;
    }
    
    .manufacturing-diagram {
        padding: 2rem 1rem;
    }
    
    .second-level {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
    
    .page-box.main-page {
        padding: 1rem 0.75rem;
        font-size: 0.9rem;
        min-width: 100px;
    }
    
    .page-box.sub-page {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        min-width: 80px;
    }
    
    .sub-level {
        gap: 0.5rem;
    }
    
    /* .case-study-section内の図表のレスポンシブ対応 */
    .case-study-section .structure-comparison-wrapper {
        flex-direction: column;
        gap: 1.5rem;
        padding: 0 0.5rem;
    }
    
    .case-study-section .structure-type {
        padding: 1rem;
    }
    
    .case-study-section .structure-title {
        font-size: 1.1rem;
        padding: 0.5rem;
        margin: 0 0 1rem 0;
    }
    */
    
    /*
    .case-study-section .sub-pages {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .case-study-section .page-box {
        padding: 0.75rem 1rem;
        font-size: 0.8rem;
    }
    
    .case-study-section .page-box.top-page {
        min-width: 120px;
        font-size: 0.9rem;
    }
    
    .case-study-section .page-box.sub-page {
        min-width: 80px;
        font-size: 0.7rem;
        padding: 0.5rem 0.75rem;
    }
    
    .case-study-section .lp-section {
        padding: 0.75rem 1rem;
        font-size: 0.8rem;
    }
    
    .case-study-section .lp-section:first-child,
    .case-study-section .lp-section:last-child {
        font-size: 0.9rem;
    }
    
    .case-study-section .manufacturing-structure-wrapper {
        padding: 0 0.5rem;
    }
    
    .case-study-section .manufacturing-diagram {
        padding: 1.5rem 1rem;
    }
    
    .case-study-section .second-level {
        display: flex;
        flex-direction: row;
        gap: 0.1rem;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    
    .case-study-section .page-box.main-page {
        padding: 0.75rem 0.5rem;
        font-size: 0.8rem;
        min-width: 80px;
    }
    
    .case-study-section .page-box.sub-page {
        padding: 0.4rem 0.5rem;
        font-size: 0.7rem;
        min-width: 60px;
    }
    
    .case-study-section .top-level {
        margin-bottom: 1.5rem;
    }
    
    .case-study-section .main-section {
        gap: 0.75rem;
    }
    
    /* 統合レイアウトのレスポンシブ対応 */
    .case-study-section .integrated-diagrams-wrapper {
        flex-direction: row;
        gap: 1rem;
        padding: 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color) #f1f5f9;
    }
    
    .case-study-section .integrated-diagrams-wrapper::-webkit-scrollbar {
        height: 8px;
    }
    
    .case-study-section .integrated-diagrams-wrapper::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }
    
    .case-study-section .integrated-diagrams-wrapper::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 4px;
    }
    
    .case-study-section .integrated-diagrams-wrapper::-webkit-scrollbar-thumb:hover {
        background: var(--primary-dark);
    }
    
    .case-study-section .manufacturing-structure {
        flex: 0 0 120px;
    }
    
    .case-study-section .homepage-structure {
        flex: 0 0 100px;
    }
    
    .case-study-section .lp-structure {
        flex: 0 0 80px;
    }
    
    .case-study-section .diagram-title {
        font-size: 1rem;
        padding: 0.5rem;
        margin: 0 0 1rem 0;
    }
    
    .case-study-section .sub-pages {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
    
    .case-study-section .page-box {
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
    }
    
    .case-study-section .page-box.top-page {
        min-width: 100px;
        font-size: 0.85rem;
    }
    
    .case-study-section .page-box.sub-page {
        min-width: 70px;
        font-size: 0.7rem;
        padding: 0.5rem 0.6rem;
    }
    
    .case-study-section .lp-section {
        padding: 0.6rem 1rem;
        font-size: 0.75rem;
    }
    
    .case-study-section .lp-section:first-child,
    .case-study-section .lp-section:last-child {
        font-size: 0.8rem;
    }
    
    .case-study-section .second-level {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }
    
    .case-study-section .page-box.main-page {
        padding: 0.6rem 0.5rem;
        font-size: 0.75rem;
        min-width: 70px;
    }
    
    .case-study-section .page-box.sub-page {
        padding: 0.3rem 0.5rem;
        font-size: 0.65rem;
        min-width: 50px;
    }
    
    .case-study-section .top-level {
        margin-bottom: 1rem;
    }
    
    .case-study-section .main-section {
        gap: 0.6rem;
    }
    */

/* タブレット画面（769px - 1024px）での統合レイアウト対応 */
/*
@media (max-width: 1024px) and (min-width: 769px) {
    .case-study-section .integrated-diagrams-wrapper {
        flex-direction: row;
        gap: 1.2rem;
        padding: 1.2rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color) #f1f5f9;
    }
    
    .case-study-section .integrated-diagrams-wrapper::-webkit-scrollbar {
        height: 8px;
    }
    
    .case-study-section .integrated-diagrams-wrapper::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 4px;
    }
    
    .case-study-section .integrated-diagrams-wrapper::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 4px;
    }
    
    .case-study-section .integrated-diagrams-wrapper::-webkit-scrollbar-thumb:hover {
        background: var(--primary-dark);
    }
    
    .case-study-section .manufacturing-structure {
        flex: 0 0 140px;
    }
    
    .case-study-section .homepage-structure {
        flex: 0 0 110px;
    }
    
    .case-study-section .lp-structure {
        flex: 0 0 90px;
    }
    
    .case-study-section .diagram-title {
        font-size: 1rem;
        padding: 0.6rem;
        margin: 0 0 1.2rem 0;
    }
    
    .case-study-section .sub-pages {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
    
    .case-study-section .page-box {
        padding: 0.8rem 1.2rem;
        font-size: 0.85rem;
    }
    
    .case-study-section .page-box.top-page {
        min-width: 120px;
        font-size: 0.9rem;
    }
    
    .case-study-section .page-box.sub-page {
        min-width: 80px;
        font-size: 0.75rem;
        padding: 0.6rem 0.8rem;
    }
    
    .case-study-section .lp-section {
        padding: 0.8rem 1.2rem;
        font-size: 0.85rem;
    }
    
    .case-study-section .lp-section:first-child,
    .case-study-section .lp-section:last-child {
        font-size: 0.9rem;
    }
    
    .case-study-section .second-level {
        display: flex;
        flex-direction: row;
        gap: 0.15rem;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    
    .case-study-section .page-box.main-page {
        padding: 0.8rem 0.6rem;
        font-size: 0.8rem;
        min-width: 80px;
    }
    
    .case-study-section .page-box.sub-page {
        padding: 0.5rem 0.6rem;
        font-size: 0.7rem;
        min-width: 60px;
    }
    
    .case-study-section .top-level {
        margin-bottom: 1.5rem;
    }
    
    .case-study-section .main-section {
        gap: 0.8rem;
    }
}
*/

/* スマホ画面（480px以下）での製造業構造図表 */
/*
@media (max-width: 480px) {
    .manufacturing-diagram {
        padding: 1.5rem 0.5rem;
    }
    
    .second-level {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .page-box.main-page {
        padding: 0.75rem 0.5rem;
        font-size: 0.8rem;
        min-width: 80px;
    }
    
    .page-box.sub-page {
        padding: 0.4rem 0.5rem;
        font-size: 0.7rem;
        min-width: 60px;
    }
    
    .top-level {
        margin-bottom: 2rem;
    }
    
    .main-section {
        gap: 1rem;
    }
    
    /* 統合レイアウトのスマホ対応 */
    .case-study-section .integrated-diagrams-wrapper {
        gap: 0.8rem;
        padding: 0 0.25rem;
    }
    
    .case-study-section .diagram-card {
        flex: 0 0 300px;
        padding: 0.8rem;
        min-height: 400px;
    }
    
    .case-study-section .diagram-title {
        font-size: 0.9rem;
        padding: 0.4rem;
        margin: 0 0 0.8rem 0;
    }
    
    .case-study-section .sub-pages {
        gap: 0.3rem;
    }
    
    .case-study-section .page-box {
        padding: 0.5rem 0.8rem;
        font-size: 0.75rem;
    }
    
    .case-study-section .page-box.top-page {
        min-width: 80px;
        font-size: 0.8rem;
    }
    
    .case-study-section .page-box.sub-page {
        min-width: 60px;
        font-size: 0.65rem;
        padding: 0.4rem 0.5rem;
    }
    
    .case-study-section .lp-section {
        padding: 0.5rem 0.8rem;
        font-size: 0.7rem;
    }
    
    .case-study-section .lp-section:first-child,
    .case-study-section .lp-section:last-child {
        font-size: 0.75rem;
    }
    
    .case-study-section .second-level {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    
    .case-study-section .page-box.main-page {
        padding: 0.5rem 0.4rem;
        font-size: 0.7rem;
        min-width: 60px;
    }
    
    .case-study-section .page-box.sub-page {
        padding: 0.25rem 0.4rem;
        font-size: 0.6rem;
        min-width: 40px;
    }
    
    .case-study-section .top-level {
        margin-bottom: 0.8rem;
    }
    
    .case-study-section .main-section {
        gap: 0.5rem;
    }
*/
    
    /* 工程比較図表のレスポンシブ対応 */
    .process-flow-comparison {
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    .process-flow {
        padding: 1rem;
    }
    
    .flow-title {
        font-size: 1.2rem;
        padding: 0.5rem;
        margin: 0 0 1rem 0;
    }
    
    .flow-steps {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .flow-step {
        min-width: auto;
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 0.8rem;
        line-height: 1.3;
    }
    
    .flow-arrow {
        display: none;
    }
    
    .step-note {
        font-size: 0.7rem;
        margin-top: 0.25rem;
    }
    
    .problem-mark,
    .advantage-mark {
        width: 20px;
        height: 20px;
        font-size: 0.8rem;
        top: -6px;
        right: -6px;
    }
    
    /* 通常のfeatureセル（5行目と9行目以外） */
    
    /* セクション内のブロック要素のレスポンシブ対応 */
    section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) .case-study-layout,
    section:not(.personal-touch):not(.one-man-operation):not(.professional-touch):not(.hero):not(.slider-section):not(.quick-nav-section):not(.pricing-section):not(.process-comparison):not(.pricing-comparison):not(.website-types-explanation):not(.local-seo-section):not(.contact-section) .personal-content {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    
    /* スマートフォン対応 - 各セクションの背景色 */
    .personal-touch .personal-touch-section-wrapper {
        background: linear-gradient(135deg, rgba(255, 182, 193, 0.20), rgba(255, 192, 203, 0.15));
    }
    
    .one-man-operation .personal-touch-section-wrapper {
        background: linear-gradient(135deg, rgba(173, 216, 230, 0.20), rgba(176, 224, 230, 0.15));
    }
    
    .professional-touch .personal-touch-section-wrapper {
        background: linear-gradient(135deg, rgba(144, 238, 144, 0.20), rgba(152, 251, 152, 0.15));
    }
    
    .personal-touch-section-wrapper .personal-touch-main-title {
        font-size: 1.2rem;
        padding: 0.8rem 0;
        margin-bottom: 1.2rem;
    }
}

/* ========================================
 * 古いフローティングボタン関連は削除済み
 * ======================================== */



/* ========================================
 * 最終的なスマホ対応（最優先）
 * ======================================== */
@media screen and (max-width: 600px) {
    /* 全グリッドを強制的に1列に - クリア済み */
    
    /* case-study-mainのスマホ対応 */
    .case-study-main {
        padding: 15px;
        margin: 0 auto 20px auto;
        max-width: 95%;
        border-radius: 12px;
    }
    
    /* case-study-mainの子要素を縦並びに */
    .case-study-main .case-study-layout {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }
    
    .case-study-main .case-study-image-container {
        order: 1;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .case-study-main .case-study-content {
        order: 2;
        width: 100%;
        text-align: center;
    }
}

/* 工房主の日常セクション - 他の写真と区別するスタイル */
.personal-touch-section {
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    background: linear-gradient(135deg, #f8fafc, #ffffff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 2rem 0;
    padding: 1.5rem;
}

.personal-touch-section h4 {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin: 0 0 1.5rem 0;
    font-weight: bold;
    text-align: center;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.75rem;
}

.personal-touch-section h4 a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.personal-touch-section h4 a:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

.personal-touch-section .local-content-image {
    text-align: center;
    margin: 1rem 0;
}

.personal-touch-section .local-content-image a {
    display: inline-block;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.personal-touch-section .local-content-image a:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.personal-touch-section .local-small-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 3px solid var(--primary-color);
    cursor: pointer;
}

.personal-touch-section .image-caption {
    font-style: italic;
    color: var(--text-secondary);
    margin-top: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .personal-touch-section {
        margin: 1.5rem 0;
        padding: 1rem;
    }
    
    .personal-touch-section h4 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    
    .personal-touch-section .local-small-image {
        border-width: 2px;
    }
    }
}

/* ========================================
 * 特別割引ボックス
 * ======================================== */

.special-discount-box {
    background: #f8f9fa;
    padding: 20px;
    border-left: 4px solid #007bff;
    margin: 20px 0;
    border-radius: 5px;
    text-align: left;
}

.special-discount-box h3 {
    color: #007bff;
    margin: 0 0 15px 0;
    font-size: 18px;
}

.special-discount-box p {
    margin: 10px 0;
    color: #333;
}

.special-discount-box p:last-child {
    margin: 15px 0 0 0;
}

.special-discount-box a {
    color: #007bff;
    text-decoration: underline;
    font-weight: bold;
}

.special-discount-box .discount-title {
    font-size: 16px;
    font-weight: bold;
}

.special-discount-box .discount-price {
    font-size: 18px;
    font-weight: bold;
    color: #dc3545;
}

/* タブレット画面での本文テキストを大きく */
@media (min-width: 768px) and (max-width: 1024px) {
    p, li, div {
        font-size: 1.1rem;
        line-height: 1.65;
    }
    
    /* ヒーローセクションのサブタイトルは除外 */
    .hero .subtitle {
        font-size: 1.4rem;
        font-weight: 600;
        margin: 0 auto 1rem auto;
        line-height: 1.5;
    }
    
    .hero .subtitle-points {
        font-size: 1rem;
        margin: 0 auto;
    }
    
    .hero .subtitle-points li {
        font-size: 1rem;
        margin-bottom: 0.6rem;
        line-height: 1.6;
    }
}

/* パソコン・タブレット画面では中央寄せ */
@media (min-width: 768px) {
    .special-discount-box {
        text-align: center;
    }
    .special-discount-box h3,
    .special-discount-box p,
    .special-discount-box a,
    .special-discount-box .discount-title,
    .special-discount-box .discount-price {
        text-align: center;
    }
}

/* スマホ画面では左寄せ（デフォルト） */
@media (max-width: 767px) {
    .special-discount-box {
        text-align: left;
    }
    .special-discount-box h3,
    .special-discount-box p,
    .special-discount-box a,
    .special-discount-box .discount-title,
    .special-discount-box .discount-price {
        text-align: left;
    }
}

/* ========================================
 * パートナー募集セクション
 * ======================================== */
.partner-inquiry-box {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 15px;
    margin: 30px 0;
    border-left: 5px solid #0693e3;
}

.partner-inquiry-box h3 {
    color: #0693e3;
    margin-bottom: 20px;
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
}

.partner-inquiry-box p {
    margin-bottom: 15px;
    line-height: 1.8;
    text-align: left;
}

.partner-inquiry-box p:last-child {
    margin-top: 20px;
}

.partner-inquiry-box ul {
    margin-left: 20px;
    line-height: 1.8;
    text-align: left;
}

.partner-inquiry-box li {
    margin-bottom: 10px;
    text-align: left;
}

.partner-inquiry-box p strong {
    font-weight: bold;
}

/* ========================================
 * お知らせページ バナー風アイキャッチ
 * ======================================== */
/* 投稿ページ用 */
.module-Article_Item_Img {
    position: relative;
    margin-bottom: 1rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.module-Article_Item_Img img {
    width: 100%;
    height: auto;
    display: block;
}

/* バナー風のオーバーレイ */
.module-Article_Item_Img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg, 
        rgba(0,0,0,0.6) 0%, 
        rgba(0,0,0,0.3) 50%, 
        rgba(0,0,0,0.7) 100%
    );
    z-index: 1;
}

/* バナー風の文字オーバーレイ */
.module-Article_Item_Img::after {
    content: '自分で更新できる化サービス（お試し価格）\A SNS感覚で投稿するだけ\A トップページに自動反映';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    z-index: 2;
    white-space: pre-line;
    max-width: 90%;
}

/* ページ用（念のため） */
.content-EyeCatch {
    position: relative;
    margin-bottom: 2rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.content-EyeCatch img {
    width: 100%;
    height: auto;
    display: block;
}



/* スマホ対応 */
@media (max-width: 767px) {
    .module-Article_Item_Img::after {
        font-size: 1.4rem;
        line-height: 1.3;
    }
}

/* タブレット対応 */
@media (min-width: 768px) and (max-width: 1023px) {
    .module-Article_Item_Img::after {
        font-size: 1.6rem;
    }
}

/* 料金比較の注意事項 */
.pricing-comparison-note {
    background: #f8f9fa;
    padding: 40px 0;
    margin: 40px 0;
}

.comparison-note-box {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #007bff;
}

.comparison-note-box h3 {
    color: #333;
    font-size: 24px;
    margin-bottom: 25px;
    text-align: center;
    font-weight: bold;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 25px;
}

.comparison-item {
    padding: 20px;
    border-radius: 6px;
    border: 2px solid #e9ecef;
}

.comparison-item.other-companies {
    background: #fff5f5;
    border-color: #ff6b6b;
}

.comparison-item.pentad-kobo {
    background: #f0f8ff;
    border-color: #007bff;
}

.comparison-item h4 {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: bold;
}

.comparison-item.other-companies h4 {
    color: #d63031;
}

.comparison-item.pentad-kobo h4 {
    color: #007bff;
}

.comparison-item ul {
    margin: 0;
    padding-left: 20px;
}

.comparison-item li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.comparison-note-text {
    text-align: right;
    font-size: 16px;
    color: #666;
    font-weight: 500;
    margin: 0;
}

/* より具体的なセレクタで右寄せを確実に適用 */
.pricing-highlight-box .comparison-note-text {
    text-align: right;
}

.pricing-comparison .pricing-highlight-box .comparison-note-text {
    text-align: right;
}

/* 最も具体的なセレクタで右寄せを強制適用 */
.pricing-comparison .pricing-note .pricing-highlight-box .comparison-note-text {
    text-align: right;
}

.pricing-comparison .pricing-note .pricing-highlight-box-left .comparison-note-text {
    text-align: right;
}

/* 料金表拡張説明 */
.pricing-expansion-note {
    margin-top: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-left: 4px solid #28a745;
    border-radius: 4px;
}

.pricing-expansion-note p {
    margin: 0;
    color: #333;
    line-height: 1.6;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .comparison-note-box {
        padding: 20px;
    }
    
    .comparison-note-box h3 {
        font-size: 20px;
    }
}

/* ========================================
 * クラウドソーシング図解（記事共通スタイル）
 * ======================================== */
.crowdsourcing-diagram {
    --cd-gap: 14px;
    --cd-radius: 10px;
    --cd-shadow: 0 6px 18px rgba(0,0,0,.08);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cd-gap);
    margin: 2rem 0;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--cd-shadow);
}

.cd-row {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    align-items: stretch;
    gap: var(--cd-gap);
}

/* 3ノード（クライアント→プラットフォーム→ワーカー）用 */
.cd-row-3 {
    display: grid;
    grid-template-columns: 1fr 56px 1fr 56px 1fr;
    align-items: stretch;
    gap: var(--cd-gap);
}

.cd-col {
    background: #fff;
    border: 2px solid var(--primary-color);
    border-radius: var(--cd-radius);
    box-shadow: var(--cd-shadow);
    padding: 16px;
}

.cd-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--primary-color);
    margin: 0 0 8px 0;
}

.cd-list {
    margin: 0;
    padding-left: 1.2em;
}
.cd-list li { line-height: 1.6; margin: 4px 0; }

.cd-arrow {
    display: grid;
    place-items: center;
}
.cd-arrow .arrow {
    width: 32px;
    height: 32px;
    border-right: 6px solid var(--primary-color);
    border-top: 6px solid var(--primary-color);
    transform: rotate(45deg);
}

.cd-arrow.left .arrow { transform: rotate(-135deg); }

/* ラベル帯（任意） */
.cd-badge {
    display: inline-block;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: var(--primary-color);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}

/* スマホ縦では縦積み */
@media (max-width: 767px) {
    .cd-row, .cd-row-3 { grid-template-columns: 1fr; }
    .cd-arrow { height: 20px; }
    .cd-arrow .arrow {
        transform: rotate(135deg);
        border-width: 5px;
        width: 24px; height: 24px;
    }
    .cd-arrow.left .arrow { transform: rotate(135deg); }
}

/* ========================================
 * ホームページ制作の裏側カテゴリー専用スタイル
 * ======================================== */

/* ホームページ制作の裏側カテゴリー専用動画案内セクション */
body.category-homepage-production-insider .article-video-intro .video-reference-box,
body.single-post .article-video-intro .video-reference-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-radius: 12px;
    padding: 25px;
    margin: 30px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}

body.category-homepage-production-insider .article-video-intro .video-reference-box::before,
body.single-post .article-video-intro .video-reference-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff6b35, #f7931e, #ffd23f);
}

body.category-homepage-production-insider .article-video-intro .video-reference-header,
body.single-post .article-video-intro .video-reference-header {
    background: transparent;
    color: #2c3e50;
    font-size: 1.3em;
    font-weight: bold;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
}

body.category-homepage-production-insider .article-video-intro .video-reference-header .video-reference-icon,
body.single-post .article-video-intro .video-reference-header .video-reference-icon {
    display: none;
}

body.category-homepage-production-insider .article-video-intro .video-reference-header::before,
body.single-post .article-video-intro .video-reference-header::before {
    content: '🎥';
    font-size: 1.2em;
}

body.category-homepage-production-insider .article-video-intro .video-reference-content p,
body.single-post .article-video-intro .video-reference-content p {
    color: #495057;
    line-height: 1.7;
    margin: 0 0 12px 0;
    font-size: 1.05em;
}

body.category-homepage-production-insider .article-video-intro .video-reference-content p:last-child,
body.single-post .article-video-intro .video-reference-content p:last-child {
    margin-bottom: 0;
    font-weight: 500;
    color: #2c3e50;
}

body.category-homepage-production-insider .article-video-intro strong,
body.single-post .article-video-intro strong {
    color: #e74c3c;
    font-weight: bold;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
    body.category-homepage-production-insider .article-video-intro .video-reference-box,
    body.single-post .article-video-intro .video-reference-box {
        padding: 20px;
        margin: 20px 0;
    }
    
    body.category-homepage-production-insider .article-video-intro .video-reference-header,
    body.single-post .article-video-intro .video-reference-header {
        font-size: 1.2em;
    }
    
    body.category-homepage-production-insider .article-video-intro .video-reference-content p,
    body.single-post .article-video-intro .video-reference-content p {
        font-size: 1em;
    }
}

/* スライダータイトル専用スタイル（最高優先度・中央寄せ・やや目立つ） */

/* ========================================
 * SNSシェアボタン
 * ======================================== */

/* 新しいSNSシェアボタン */
.sns-share-buttons {
    margin: 3rem 0;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    text-align: center;
}

.sns-share-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
    margin: 0 0 1rem 0;
    text-align: center;
}

.sns-share-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.sns-share-item {
    margin: 0;
    padding: 0;
}

.sns-share-item a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sns-share-item a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.sns-share-item svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* X (Twitter) */
.sns-twitter a {
    background: #000;
}

.sns-twitter a:hover {
    background: #333;
}

/* Facebook */
.sns-facebook a {
    background: #1877f2;
}

.sns-facebook a:hover {
    background: #0c63d4;
}

/* はてなブックマーク */
.sns-hatena a {
    background: #00a4de;
}

.sns-hatena a:hover {
    background: #008bbf;
}

/* LINE */
.sns-line a {
    background: #06c755;
}

.sns-line a:hover {
    background: #05b34b;
}

/* 上部に配置する場合 */
.sns-share-top {
    margin-top: 2rem;
    margin-bottom: 3rem;
}

/* 下部に配置する場合 */
.sns-share-bottom {
    margin-top: 3rem;
    margin-bottom: 2rem;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .sns-share-buttons {
        padding: 1.2rem;
        margin: 2rem 0;
    }
    
    .sns-share-list {
        gap: 0.8rem;
    }
    
    .sns-share-item a {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
    
    .sns-share-item svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .sns-share-buttons {
        padding: 1rem;
    }
    
    .sns-share-list {
        gap: 0.6rem;
    }
    
    .sns-share-item a {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }
    
    .sns-share-item a span {
        display: none;
    }
    
    .sns-share-item svg {
        width: 24px;
        height: 24px;
        margin: 0;
    }
}

/* 著作権表示の統一フォーマット */
.copyright-notice {
    font-size: 0.85rem;
    color: #666;
    text-align: center;
    margin: 1rem 0;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    border-left: 3px solid var(--primary-color);
}

.image-credit {
    font-size: 0.8rem;
    color: #888;
    font-style: italic;
    margin-top: 0.5rem;
}

.image-license-link {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.8rem;
}

.image-license-link:hover {
    text-decoration: underline;
}

/* ライセンスページの警告ボックス */
.warning-box {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
}

.warning-box h3 {
    color: #856404;
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.warning-box p {
    color: #856404;
    margin-bottom: 0.8rem;
    line-height: 1.6;
}

.warning-box p:last-child {
    margin-bottom: 0;
}

.warning-box strong {
    color: #721c24;
    font-weight: 700;
}

/* Contact Form 7 - ご連絡の目的ラジオボタンの横並びレイアウト */
.wpcf7-form-control.wpcf7-radio {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.wpcf7-form-control.wpcf7-radio .wpcf7-list-item {
    flex: 1;
    min-width: 200px;
    margin-bottom: 0.5rem;
}

.wpcf7-form-control.wpcf7-radio label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    margin-bottom: 0;
}

.wpcf7-form-control.wpcf7-radio label:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

.wpcf7-form-control.wpcf7-radio input[type="radio"] {
    margin-right: 0.8rem;
    transform: scale(1.2);
}

.wpcf7-form-control.wpcf7-radio .wpcf7-list-item-label {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.4;
}

/* Contact Form 7 - レスポンシブ対応 */
@media (max-width: 768px) {
    .wpcf7-form-control.wpcf7-radio {
        flex-direction: column;
        gap: 0.6rem;
    }
    
    .wpcf7-form-control.wpcf7-radio .wpcf7-list-item {
        flex: none;
        min-width: auto;
    }
    
    .wpcf7-form-control.wpcf7-radio label {
        padding: 0.4rem;
    }
    
    .wpcf7-form-control.wpcf7-radio .wpcf7-list-item-label {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .wpcf7-form-control.wpcf7-radio {
        gap: 0.4rem;
    }
    
    .wpcf7-form-control.wpcf7-radio .wpcf7-list-item-label {
        font-size: 0.85rem;
    }
}

/* ========================================
 * 滋賀県の四季シリーズ - 回遊性強化スタイル
 * ======================================== */

/* スライダーサブタイトル（トップページ用） */
.slider-subtitle {
    text-align: center;
    font-size: 0.9rem;
    margin: 0.5rem 0 1.5rem 0;
    color: #666;
    line-height: 1.6;
}

.slider-section p.slider-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.slider-section .slider-subtitle a {
    text-align: center;
    display: inline;
}

.slider-subtitle a {
    color: #0066cc;
    text-decoration: none;
    padding: 0 0.5rem;
    transition: color 0.2s ease;
}

.slider-subtitle a:hover {
    color: #004499;
    text-decoration: underline;
}

/* シリーズナビゲーション（記事冒頭用） */
.series-navigation {
    background: #f8f9fa;
    border-left: 4px solid #0066cc;
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 4px;
}

.series-navigation p strong {
    font-size: 1.1rem;
    color: #333;
    display: block;
    margin-bottom: 0.8rem;
}

.series-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.series-navigation li {
    margin: 0.5rem 0;
    padding-left: 0;
    line-height: 1.6;
}

.series-navigation a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.2s ease;
}

.series-navigation a:hover {
    color: #004499;
    text-decoration: underline;
}

/* 次の記事ボックス（記事末尾用） */
.next-article {
    background: #e8f4f8;
    border: 2px solid #0066cc;
    padding: 1.5rem;
    margin: 3rem 0;
    text-align: center;
    border-radius: 8px;
}

.next-article p {
    margin: 0.5rem 0;
    line-height: 1.6;
}

.next-article p strong {
    font-size: 1.1rem;
    color: #333;
}

.next-article a {
    color: #0066cc;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease;
}

.next-article a:hover {
    color: #004499;
    text-decoration: underline;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .slider-subtitle {
        font-size: 0.85rem;
        line-height: 1.8;
    }
    
    .series-navigation {
        padding: 1.2rem;
        margin: 1.5rem 0;
    }
    
    .series-navigation p strong {
        font-size: 1rem;
    }
    
    .next-article {
        padding: 1.2rem;
        margin: 2rem 0;
    }
}

@media (max-width: 480px) {
    .slider-subtitle {
        font-size: 0.8rem;
    }
    
    .slider-subtitle a {
        display: block;
        padding: 0.3rem 0;
    }
    
    .series-navigation {
        padding: 1rem;
    }
    
    .series-navigation p strong {
        font-size: 0.95rem;
    }
    
    .series-navigation li {
        font-size: 0.9rem;
    }
    
    .next-article {
        padding: 1rem;
    }
    
    .next-article p strong {
        font-size: 1rem;
    }
}

/* 記事タグ表示の改善 */
.content-Tags {
    margin: 30px 0;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 2px solid #3b82f6;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.content-Tags h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e40af;
    display: flex;
    align-items: center;
}

.content-Tags h4::before {
    content: "🏷️";
    margin-right: 8px;
    font-size: 18px;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.tag-link {
    display: inline-block;
    padding: 8px 16px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    border: 2px solid transparent;
}

.tag-link:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    color: white;
    text-decoration: none;
}

.tag-link:focus {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .content-Tags {
        margin: 20px 0;
        padding: 15px;
    }
    
    .content-Tags h4 {
        font-size: 14px;
        margin-bottom: 12px;
    }
    
    .tag-link {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .tag-list {
        gap: 6px;
    }
}

/* ========== Heading Hierarchy Structure ========== */
/* OK用 - 薄い青系統 */
.heading-structure {
    margin: 2rem 0;
    padding: 1.5rem;
    background-color: #e3f2fd;
    border-left: 4px solid #0066cc;
    border-radius: 4px;
    font-family: 'Courier New', 'Osaka-mono', 'Monaco', monospace;
    font-size: 1.8rem;
    line-height: 1.8;
    overflow-x: auto;
}

/* NG用 - うっすらとした赤系統 */
.heading-structure-ng {
    margin: 2rem 0;
    padding: 1.5rem;
    background-color: #ffebee;
    border-left: 4px solid #e91e63;
    border-radius: 4px;
    font-family: 'Courier New', 'Osaka-mono', 'Monaco', monospace;
    font-size: 1.8rem;
    line-height: 1.8;
    overflow-x: auto;
}

.heading-structure code,
.heading-structure-ng code {
    background: transparent;
    padding: 0;
    font-size: inherit;
}

/* スマホ画面での文字サイズ調整 */
@media (max-width: 768px) {
    .heading-structure,
    .heading-structure-ng {
        font-size: 1.2rem;
        padding: 1rem;
        margin: 1.5rem 0;
    }
}

@media (max-width: 480px) {
    .heading-structure,
    .heading-structure-ng {
        font-size: 1.0rem;
        padding: 0.8rem;
        margin: 1rem 0;
    }
}

/* ========================================
 * 業種別サンプルサイトグリッドレイアウト（完全新規作成）
 * ======================================== */

/* コンテナ：グリッドレイアウトを適用 */
#sample-sites .sample-sites-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto 50px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 見出し（h3#sample-sites-heading）は全列にまたがる */
#sample-sites > div > h3#sample-sites-heading {
    grid-column: 1 / -1;
    margin: 0 0 30px 0;
}

/* 説明文（p）は全列にまたがる */
#sample-sites > div > p {
    grid-column: 1 / -1;
    margin: 0 0 25px 0;
}

/* 最初のアイテム（開始タグがない場合）：h3とdivを同じグリッド列に配置 */
#sample-sites > div > h3:not(#sample-sites-heading) {
    grid-column: span 1;
    grid-row: auto;
    background: white;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    margin: 0;
    padding: 15px 15px 10px;
    border-bottom: 2px solid #f0f0f0;
}

#sample-sites > div > h3:not(#sample-sites-heading) + div {
    grid-column: span 1;
    grid-row: auto;
    background: white;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    margin: -2px 0 25px 0;
    padding: 15px;
}

/* 最初のアイテム全体のホバー効果 */
#sample-sites > div > h3:not(#sample-sites-heading):hover,
#sample-sites > div > h3:not(#sample-sites-heading):hover + div {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* サンプルサイトアイテム（2つ目以降） */
.sample-site-item {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.sample-site-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* デスクトップ（1200px以上）：4列 */
@media (min-width: 1200px) {
    #sample-sites .sample-sites-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }
}

/* タブレット（768px-1199px）：3列 */
@media (min-width: 768px) and (max-width: 1199px) {
    #sample-sites .sample-sites-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* スマホ（767px以下）：2列 */
@media (max-width: 767px) {
    #sample-sites .sample-sites-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0 10px;
    }
    
    #sample-sites > div > h3:not(#sample-sites-heading) {
        font-size: 1rem;
        padding: 12px 12px 8px;
    }
    
    #sample-sites > div > h3:not(#sample-sites-heading) + div {
        padding: 12px;
    }
    
    .sample-site-item h3 {
        font-size: 1rem;
        padding: 12px 12px 8px;
    }
    
    .sample-site-item > div {
        padding: 12px;
    }
}



/* 最終調整：ヒーローh1のスマホサイズ */
@media (max-width: 768px) {
    body.home .hero h1 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
}

@media (max-width: 480px) {
    body.home .hero h1 {
        font-size: 1.3rem;
        line-height: 1.3;
    }
}

/* ========================================
 * ブログなどの写真説明（figcaption）を「ひとサイズ下げる」「斜体」に統一（強制適用）
 * ======================================== */
/* .wp-element-captionクラスを持つ要素に対して確実にスタイルを適用 */
figcaption.wp-element-caption,
.wp-element-caption,
.content-Body .wp-element-caption,
.content-Body figure .wp-element-caption,
.content-Body .wp-block-image .wp-element-caption,
.content-Body figcaption.wp-element-caption,
article .wp-element-caption,
article figure .wp-element-caption,
article .wp-block-image .wp-element-caption,
article figcaption.wp-element-caption,
main .wp-element-caption,
main figure .wp-element-caption,
main .wp-block-image .wp-element-caption,
main figcaption.wp-element-caption,
figure .wp-element-caption,
.wp-block-image .wp-element-caption,
.wp-block-image figcaption,
figure figcaption {
    font-size: 0.875em;
    font-style: italic;
    line-height: 1.5;
}

/* ========================================
 * figcaptionのスタイルを適用（WordPressデフォルトスタイルを上書き）
 * ======================================== */
.wp-block-image figcaption.wp-element-caption,
figure figcaption.wp-element-caption,
.wp-element-caption,
.content-Body .wp-block-image figcaption.wp-element-caption,
.content-Body figure figcaption.wp-element-caption,
.content-Body .wp-element-caption,
article .wp-block-image figcaption.wp-element-caption,
article figure figcaption.wp-element-caption,
article .wp-element-caption,
main .wp-block-image figcaption.wp-element-caption,
main figure figcaption.wp-element-caption,
main .wp-element-caption {
    font-size: 0.875em;
    font-style: italic;
    line-height: 1.5;
}

/* ========================================
 * ECサイト記事用の表スタイル
 * ======================================== */
.ec-table-wrapper {
    margin: 1.5em 0;
    overflow-x: visible;
}

/* 記事コンテンツ内の表に適用 */
.entry-content .ec-table-wrapper,
.entry-content .wp-block-table,
article .ec-table-wrapper,
article .wp-block-table {
    margin: 1.5em 0;
    overflow-x: visible;
}

.ec-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.ec-table-wide {
    min-width: 600px;
}

.ec-table thead tr {
    background-color: #0066cc;
    color: #ffffff;
}

.ec-table th {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
    font-weight: bold;
    height: auto;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    vertical-align: top;
}

.ec-table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
    height: auto;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    vertical-align: top;
}

.ec-table tbody tr {
    background-color: #ffffff;
    height: auto;
}

.ec-table tbody tr.ec-table-row-alt {
    background-color: #f9f9f9;
}

.ec-table tbody tr:hover {
    background-color: #f0f0f0;
}

/* WordPressブロックエディタの表にも対応 */
.wp-block-table .ec-table,
figure.wp-block-table .ec-table,
.ec-table-wrapper .ec-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.wp-block-table .ec-table th,
figure.wp-block-table .ec-table th,
.wp-block-table .ec-table td,
figure.wp-block-table .ec-table td,
.ec-table-wrapper .ec-table th,
.ec-table-wrapper .ec-table td {
    height: auto;
    min-height: auto;
    max-height: none;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* WordPressのデフォルトスタイルを上書き */
.wp-block-table.has-fixed-layout .ec-table,
figure.wp-block-table.has-fixed-layout .ec-table {
    table-layout: auto;
}

.wp-block-table.has-fixed-layout .ec-table th,
figure.wp-block-table.has-fixed-layout .ec-table th,
.wp-block-table.has-fixed-layout .ec-table td,
figure.wp-block-table.has-fixed-layout .ec-table td {
    height: auto;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
}

/* WordPressブロックエディタが自動変換した表にも対応 */
.ec-table-wrapper table,
.ec-table-wrapper .wp-block-table table,
.ec-table-wrapper figure.wp-block-table table,
.wp-block-table table,
figure.wp-block-table table,
.entry-content .wp-block-table table,
article .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.ec-table-wrapper table th,
.ec-table-wrapper table td,
.ec-table-wrapper .wp-block-table table th,
.ec-table-wrapper .wp-block-table table td,
.ec-table-wrapper figure.wp-block-table table th,
.ec-table-wrapper figure.wp-block-table table td,
.wp-block-table table th,
.wp-block-table table td,
figure.wp-block-table table th,
figure.wp-block-table table td,
.entry-content .wp-block-table table th,
.entry-content .wp-block-table table td,
article .wp-block-table table th,
article .wp-block-table table td {
    height: auto;
    min-height: auto;
    max-height: none;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    vertical-align: top;
    display: table-cell;
}

/* WordPressのhas-fixed-layoutクラスを上書き */
.ec-table-wrapper table.has-fixed-layout,
.ec-table-wrapper .wp-block-table table.has-fixed-layout,
.wp-block-table table.has-fixed-layout,
figure.wp-block-table table.has-fixed-layout {
    table-layout: auto;
}

.ec-table-wrapper table.has-fixed-layout th,
.ec-table-wrapper table.has-fixed-layout td,
.ec-table-wrapper .wp-block-table table.has-fixed-layout th,
.ec-table-wrapper .wp-block-table table.has-fixed-layout td,
.wp-block-table table.has-fixed-layout th,
.wp-block-table table.has-fixed-layout td,
figure.wp-block-table table.has-fixed-layout th,
figure.wp-block-table table.has-fixed-layout td {
    height: auto;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
}

@media (max-width: 768px) {
    
    .ec-table-wide {
        min-width: 700px;
    }
    
    .ec-table th,
    .ec-table td {
        padding: 8px;
        font-size: 0.9em;
    }
    
    .ec-table-wrapper table th,
    .ec-table-wrapper table td,
    .wp-block-table table th,
    .wp-block-table table td {
        padding: 8px;
        font-size: 0.9em;
    }
}

/* ========================================
 * ECサイト記事用の表スタイル
 * ======================================== */
.ec-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}

.ec-table th {
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #0066cc;
    color: #ffffff;
    text-align: left;
    font-weight: bold;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
}

.ec-table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
}

.ec-table tbody tr {
    background-color: #ffffff;
}

.ec-table tbody tr.ec-table-row-alt {
    background-color: #f9f9f9;
}

.ec-table tbody tr:hover {
    background-color: #f0f0f0;
}

.ec-table-wide {
    min-width: 600px;
}

@media (max-width: 768px) {
    
    .ec-table-wide {
        min-width: 700px;
    }
    
    .ec-table th,
    .ec-table td {
        padding: 8px;
        font-size: 0.9em;
    }
}

/* ペンタ工房の作業と依頼主の作業の色分け */
.work-pentad {
    background-color: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
}

.work-client {
    background-color: #fff3e0;
    border-left: 4px solid #ff9800;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
}

/* ECサイトデモ用ショートコードのスタイル（横4列縦1行） */
.ec-demo-section {
    border: 2px solid #0066cc;
    border-radius: 8px;
    padding: 30px;
    margin: 2em 0;
    background-color: #f9f9f9;
}

.ec-demo-section h2,
.ec-demo-section h3 {
    margin-top: 0;
    color: #0066cc;
    font-size: 1.5em;
    border-bottom: 1px solid #0066cc;
    padding-bottom: 10px;
}

.ec-demo-products-wrapper {
    margin: 20px 0 0 0;
    padding: 20px 0;
}

.ec-demo-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.ec-demo-product-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ec-demo-product-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-color: #0066cc;
}

.ec-demo-product-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.ec-demo-product-image-wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
}

.ec-demo-product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ec-demo-product-item:hover .ec-demo-product-image {
    transform: scale(1.05);
}

.ec-demo-product-info {
    padding: 15px;
    text-align: center;
}

.ec-demo-product-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin: 0 0 10px 0;
    line-height: 1.4;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ec-demo-product-price {
    font-size: 16px;
    font-weight: bold;
    color: #0066cc;
    margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
    .ec-demo-products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .ec-demo-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .ec-demo-products-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* ========================================
 * 商品1つだけを表示するスタイル（ネットショップセクション用）
 * ======================================== */
.service-gif .ec-demo-product-single {
    width: 100%;
    height: 100%;
    background: #fff;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
}

.service-gif .ec-demo-product-single-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.service-gif .ec-demo-product-single-image-wrapper {
    flex: 1;
    min-height: 0;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.service-gif .ec-demo-product-single-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-gif .ec-demo-product-single-info {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 15px;
    z-index: 2;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 60px;
}

.service-gif .ec-demo-product-single-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin: 0 0 5px 0;
    line-height: 1.4;
}

.service-gif .ec-demo-product-single-price {
    font-size: 16px;
    font-weight: bold;
    color: #0066cc;
    margin: 0;
}

.ec-demo-product-single {
    width: 100%;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ec-demo-product-single:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-color: #0066cc;
}

.ec-demo-product-single-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.ec-demo-product-single-image-wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
}

.ec-demo-product-single-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ec-demo-product-single:hover .ec-demo-product-single-image {
    transform: scale(1.05);
}

.ec-demo-product-single-info {
    padding: 15px;
    text-align: center;
}

.ec-demo-product-single-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin: 0 0 10px 0;
    line-height: 1.4;
    min-height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ec-demo-product-single-price {
    font-size: 16px;
    font-weight: bold;
    color: #0066cc;
    margin: 0;
}

.ec-demo-product-single-placeholder {
    text-align: center;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 8px;
    color: #666;
}

/* サイドバーの画像が確実に表示されるように（WooCommerce商品ページでも） */
.sidebar .popular-post-thumbnail img,
.sidebar .recent-post-thumbnail img,
.widget-area .popular-post-thumbnail img,
.widget-area .recent-post-thumbnail img,
aside.sidebar .popular-post-thumbnail img,
aside.sidebar .recent-post-thumbnail img {
    display: block;
    visibility: visible;
    opacity: 1;
    width: 70px;
    height: 70px;
    object-fit: cover;
}

.sidebar .popular-post-thumbnail,
.sidebar .recent-post-thumbnail,
.widget-area .popular-post-thumbnail,
.widget-area .recent-post-thumbnail,
aside.sidebar .popular-post-thumbnail,
aside.sidebar .recent-post-thumbnail {
    display: block;
    visibility: visible;
    opacity: 1;
}