/* =============================================
 * Solution Page Specific Styles
 * ============================================= */

/* 1. Hero Background for PC */
.key-visual.page-solution .wrap {
    background-image: url('https://deepeditor.jp/wp-content/uploads/2025/07/background-solution.png');
}

/* 2. Style for new service image section */
.solution-service-image {
    text-align: center;
}

.solution-service-image img {
    max-width: 100%;
    height: auto;
}

.solution-service-image .pc {
    width: 100%;
    max-width: 869px;
    display: block;
    margin: 0 auto;
}

/* 3. Style for new content below h2 */
.solution-sub-text {
    font-size: 24px;
    font-weight: 400; /* regular */
    line-height: 1.6;
    text-align: center;
    margin: 32px 0;
}

.solution-consulting-image {
    text-align: center;
}

.solution-consulting-image .pc {
    width: 811px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}


@media screen and (max-width: 767px) {
    .key-visual.page-solution .wrap {
        background-image: none; /* PC逕ｨ縺ｮ閭梧勹逕ｻ蜒上ｒ繧ｹ繝槭縺ｧ縺ｯ隗｣髯､ */
    }

    .solution-service-image {
        padding: 64px 0 56px;
    }
    .solution-service-image .pc,
    .solution-consulting-image .pc {
        display: none;
    }
    .solution-service-image .sp,
    .solution-consulting-image .sp {
        display: block;
        width: 100%;
        height: auto;
    }

    .solution-sub-text {
        font-size: 16px;
    }
}

/* 4. Style for reason text section */
.solution-reason {
    padding: 80px 0;
}

.reason-text {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
    color: #333;
    font-family: 'Inter', sans-serif;
}

.reason-text .highlight-blue {
    font-size: 44px;
    color: #0F58D5;
    position: relative;
    top: -1px;
}

.reason-text .highlight-box {
    font-size: 44px;
    color: #fff;
    background-color: #0F58D5;
    border-radius: 4px;
    padding: 4px;
    display: inline-block;
    position: relative;
    line-height: 1;
}

@media screen and (max-width: 767px) {
    .solution-reason {
        padding: 48px 0;
    }
    .reason-text {
        font-size: 16px;
        line-height: 1.6;
    }
    .reason-text .highlight-blue {
        font-size: 24px;
    }
    .reason-text .highlight-box {
        font-size: 22px;
        top: -4px;
        margin-top: 8px;
    }
}

/* 5. Style for 3-column features section */
/* --- WordPress auto-p fix --- */
.features-grid > p {
    display: none; /* Hide paragraphs wrapping comments */
}
.feature-header > p {
    display: contents; /* Remove p-tags from layout calculation */
}
/* --- End fix --- */
.solution-casestudy .wrap > p:empty {
    display: none;
}
.synergy-result-wrapper > p:empty {
    display: none;
}

.features-grid {
    display: flex;
    justify-content: center;
    gap: 48px; /* Narrower gap */
    align-items: stretch; /* Make cards equal height */
}

.feature-card {
    background-color: #f6f6f6;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    width: 380px; /* Wider card */
    position: relative;
}

.feature-card::after {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2019L17%2012L10%205%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    right: -40px;
    transform: translateY(-50%);
}
/* 譛€蠕後繧ｫ繝ｼ繝峨遏｢蜊ｰ縺縺代ｒ髱櫁｡ｨ遉ｺ縺ｫ縺吶ｋ */
.feature-card:last-of-type::after {
    display: none;
}

.feature-header {
    background-color: #0F58D5;
    color: #fff;
    border-radius: 16px 16px 0 0;
    position: relative;
    height: 64px;
    /* 笆ｼ笆ｼ笆ｼ flexbox縺ｧ荳ｭ螟ｮ謠∴縺ｫ縺吶ｋ險ｭ螳 笆ｼ笆ｼ笆ｼ */
    display: flex;
    justify-content: center; /* 豌ｴ蟷ｳ荳ｭ螟ｮ */
    align-items: center;     /* 蝙ら峩荳ｭ螟ｮ */
}

.feature-number {
    font-family: 'Inter';
    font-size: 48px;
    font-weight: 400; /* Regular */
    color: #fff;
    letter-spacing: -0.09em;
    opacity: 0.3;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.solution-features .feature-title {
    font-size: 24px;
    font-weight: 700; /* ご要望に合わせて修正 */
    color: inherit;   /* 親要素の色を継承（白になります）*/
    margin-bottom: 0; /* 不要な余白をリセット */
}

.feature-body {
    padding: 24px 32px 32px 32px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Make body fill vertical space */
}

.feature-icon {
    display: block;
    margin: 0 auto 24px auto;
    height: 80px;
    width: auto;
}

.feature-description {
    font-size: 14px; /* Changed */
    line-height: 1.8;
    color: #333;
    margin-bottom: 24px;
    flex-grow: 1; /* Pushes highlights box to the bottom */
}

.feature-highlights {
    background-color: #fff;
    padding: 24px;
    border-radius: 8px;
    min-height: 210px; /* Equalize highlights box height */
}

.highlight-title {
    background-color: #333;
    color: #fff;
    border-radius: 8px;
    padding: 8px 8px;
    font-size: 16px;
    font-weight: 600; /* Semi-bold */
    display: inline-block;
    line-height: 1;
}

.highlight-list {
    margin: 12px 0 0 24px;
    list-style-type: disc;
    padding-left: 0;
}

.highlight-list li {
    font-size: 16px; /* Changed */
    font-weight: 700;
    color: #333;
    line-height: 1.8;
}

.highlight-list li + li {
    margin-top: 8px;
}

@media screen and (max-width: 767px) { /* Adjusted breakpoint */
    .highlight-title {
        font-size: 14px;
    }
    .highlight-list li {
        font-size: 14px;
    }
    .solution-features .feature-title {
        font-size: 20px;
    }
    .features-grid {
        flex-direction: column;
        align-items: center;
        gap: 64px;
    }
    .feature-card {
        width: 100%;
        max-width: 500px;
    }
    .feature-highlights {
        min-height: unset; /* Unset the min-height for mobile */
        padding: 16px;
    }
    .feature-card:not(:last-child)::after {
        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2019L17%2012L10%205%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
        top: auto;
        right: auto;
        bottom: -48px;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }
    .feature-body {
        padding: 24px 24px 32px;
    }
}

/* 6. Style for Steps Image Section */
.solution-steps {
    padding: 96px 0;
}
.steps-image {
    text-align: center;
    margin-top: 40px;
}
.steps-image img {
    max-width: 100%;
    height: auto;
}
.steps-image .sp {
    display: none;
}

/* 7. Style for Achievements Section */
.solution-achievements {
    padding-bottom: 136px;
}

@media screen and (max-width: 767px) {
    .solution-steps {
        padding: 72px 0;
    }
    .steps-image .pc {
        display: none;
    }
    .steps-image .sp {
        display: block;
    }
    .solution-achievements {
        padding-bottom: 72px;
    }
}

/* 8. Style for Achievements Logo Section */
.solution-achievements .brand-list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 24px;
    justify-content: center;
}

.solution-achievements .brand-list li {
    width: 15%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solution-achievements .brand-list img {
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 767px) {
    .solution-achievements .brand-list li {
        padding-top: 0;
        width: 33.3333%;
    }
}

/* 9. Style for Case Study Section */
/* --- WordPress auto-p fix --- */
.casestudy-grid > p,
.casestudy-grid > br,
.card-meta > p:empty {
    display: none;
}
.casestudy-grid > a > p {
    display: contents;
}
/* --- End fix --- */

.solution-casestudy {
    padding-bottom: 96px;
}

.casestudy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 40px;
    margin-top: 40px;
}

.case-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #EEEEEE;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}
.case-card:last-child {
    margin-bottom: 0;
}
.case-card:hover {
    /* No hover effect */
}

.card-image-wrapper {
    width: 100%;
    aspect-ratio: 1.7 / 1; /* Maintain a consistent shape */
    overflow: hidden;
    background-color: #f6f6f6;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, cropping as needed */
}

.card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.card-company-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4; /* Adjust for tighter line spacing */
}

.card-date {
    font-size: 14px;
    color: #888888;
    white-space: nowrap;
    line-height: 1; /* Remove extra vertical spacing */
    padding-top: 1px; /* Add a little space above */
}

.card-title {
    font-size: 16px;
    line-height: 1.7;
    flex-grow: 1;
    margin-bottom: 16px;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-tag {
    background-color: #D8E5FA;
    color: #0F58D5;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}

.card-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #F8F8F8;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%2018L15%2012L9%206%22%20stroke%3D%22%230F58D5%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #EEEEEE;
}

.card-image-wrapper > br,
.card-footer > br,
.card-meta > br {
    display: none;
}

/* layout for casestudy cards footer */
.casestudy-grid .card-footer{
    display:block;
}
.casestudy-grid .card-footer .card-tag{
    display:inline-block;
    margin-bottom:-8px;
}
.casestudy-grid .card-footer .card-arrow{
    display:block;
    margin-left:auto;
}

@media screen and (max-width: 1023px) {
    .casestudy-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .casestudy-grid::-webkit-scrollbar {
      height: 4px;
    }
    .casestudy-grid::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 2px;
    }
    .case-card {
        flex: 0 0 80%;
        scroll-snap-align: start;
    }
    .card-image-wrapper img {
        /* No override needed, PC style is now universal */
    }
    .solution-casestudy {
        padding-bottom: 72px;
    }
}

/* 10. Style for Web Ads Section */

.web-ads-image {
    text-align: center;
    margin-top: 40px;
}

.web-ads-image .pc {
    display: block;
    margin: 0 auto;
    width: 534px;
    max-width: 100%;
}
.web-ads-image .sp {
    display: none;
}

.web-ads-text-block {
    text-align: center;
    margin-top: 56px;
}

.web-ads-text-block .line1 {
    margin-bottom: 24px;
}

.web-ads-text-block .highlight-box {
    background-color: #0F58D5;
    color: #fff;
    font-size: 44px; /* Changed */
    font-weight: 700;
    padding: 12px 8px; /* Changed */
    border-radius: 4px; /* Changed */
    display: inline-block;
}

.web-ads-text-block .line2 {
    color: #0F58D5;
    font-size: 40px; /* Changed */
    font-weight: 700;
    margin-bottom: 24px;
}

.web-ads-text-block .line3 {
    font-size: 24px; /* Changed */
    color: #000;
    line-height: 1.8;
    font-weight: 700;
}

@media screen and (max-width: 767px) {
    .solution-web-ads {
        padding: 0 0;
    }
    .web-ads-image {
        margin-top: 0;
    }
    .web-ads-image .pc {
        display: none;
    }
    .web-ads-image .sp {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        margin-top: 40px;
    }
    .web-ads-text-block {
        margin-top: 40px;
    }
    .web-ads-text-block .highlight-box {
        font-size: 24px; /* Changed */
        padding: 2px 4px; /* Changed */
        font-weight: 500;
    }
    .web-ads-text-block .line1 {
        margin-bottom: 8px;
    }
    .web-ads-text-block .line2 {
        font-size: 24px; /* Changed */
        margin-bottom: 8px;
    }
    .web-ads-text-block .line3 {
        font-size: 16px; /* Changed */
    }
    .web-ads-text-block .line3 br {
        display: block; /* Ensure <br> is not hidden */
    }
    
}

/* 11. Style for Synergy Section */
.synergy-section {
    background-color: #f6f6f6;
    border-radius: 24px;
    padding: 40px;
    margin-top: 60px;
}

.synergy-intro {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.8;
    margin-bottom: 40px;
}

.synergy-cards-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.synergy-cards-container > p {
    display: contents;
}

.synergy-card {
    background-color: #fff;
    border-radius: 8px; /* Changed */
    flex: 1;;
    padding: 24px;
}

.synergy-card-header {
    background-color: #0F58D5;
    color: #fff;
    padding: 4px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    border-radius: 4px; /* Changed */
    margin-bottom: 32px; /* Space between header and body */
}

.synergy-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
}

/* 繧ｫ繝ｼ繝峨繝ぅ蜀遨ｺ縺ｮp繧ｿ繧ｰ繧帝撼陦ｨ遉ｺ縺ｫ縺吶ｋ */
.synergy-card-body p:empty {
    display: none;
}

.icon-text-pair {
    text-align: center;
}

.synergy-icon {
    height: 93px;
    margin-bottom: 32px;
}

.icon-text-pair p {
    font-size: 14px;
    line-height: 1.7;
    font-weight: 500;
}

.synergy-cross {
    width: 32px;
    height: auto;
}

.synergy-arrow {
    display: block;
    width: 56px;
    height: auto;
    margin: 24px auto;
}

.synergy-result-wrapper {
    background-color: #fff;
    border-radius: 8px;
    width: fit-content; /* 蟷ｒ繧ｳ繝ｳ繝Φ繝↓蜷医ｏ縺帙ｋ */
    margin: 0 auto;     /* 荳ｭ螟ｮ謠∴縺ｫ縺吶ｋ */
    padding: 16px 32px; /* 謖ｮ壹padding繧帝←逕ｨ */
}

/* Hide empty p tags generated by WordPress within this section */
.synergy-result-wrapper p:empty {
    display: none;
}

.synergy-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    font-weight: 700;
    color: #333;
}

.synergy-equation {
    display: flex;
    gap: 1em;
    align-items: center;
}

.synergy-equation > br,
.marker-container > br {
    display: none;
}

.result-part {
    text-align: center;
}

.part-1, .part-3 {
    font-size: 18px;
    line-height: 1.4;
}

.part-2, .part-4 {
    color: #000;
    font-size: 20px;
}

.text-blue {
    color: #0F58D5;
}

.marker-container {
    display: inline-flex;
    align-items: baseline;
    line-height: 1; /* This is key for consistent marker */
    background: linear-gradient(to top, #E1FF00 25%, transparent 25%);
    padding: 0 4px 6px; /* Added 6px padding-bottom to lower the marker */
}

.result-text-small,
.result-text-large {
    color: #0F58D5;
    /* background style moved to parent .marker-container */
    padding: 0;
}

.result-text-small {
    font-size: 24px;
}

.result-text-large {
    font-size: 56px;
}

@media screen and (max-width: 1200px) {
    .part-1, .part-3 {
        font-size: 16px;
    }
}

@media screen and (max-width: 1023px) {
    .synergy-intro br {
        display: none;
    }
    .synergy-section {
        padding: 40px;
        margin-top: 40px;
    }
    .synergy-cards-container {
        flex-direction: column;
        gap: 16px;
    }
    .synergy-arrow {
        margin: 16px auto;
    }
    .part-1, .part-3 {
        font-size: 12px;
    }
    .part-2, .part-4 {
        font-size: 14px;
    }
    .result-text-small {
        font-size: 16px;
    }
    .result-text-large {
        font-size: 44px;
    }
    .synergy-equation {
        gap: 4px;
    }
}
@media screen and (max-width: 767px) {
    .synergy-section {
        padding: 32px 24px;
    }
    .synergy-intro {
        font-size: 16px;
        text-align: left;
        margin-bottom: 24px;
    }
    .synergy-card,
    .synergy-result-wrapper {
        width: 100%;
        box-sizing: border-box;
    }
    .synergy-card {
        padding: 24px 24px 0;
    }
    .synergy-card-body {
        grid-template-columns: 1fr;
    }
    .synergy-result-wrapper {
        margin: 0;
        padding: 16px;
    }
    .synergy-result {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, auto);
        gap: 8px;
        align-content: center;
        justify-items: center;
    }
    .synergy-equation {
        display: contents; /* Allow parts to be controlled by parent grid */
    }
    .synergy-card-header {
        margin-bottom: 24px;
        font-size: 16px;
    }

    .synergy-icon {
        margin-bottom: 24px;
        height: 48px;
    }

    .synergy-cross {
        width: 22px;
    }

    .synergy-arrow {
        width: 32px;
    }
    
    .synergy-result-wrapper p:empty {
        display: none;
    }

    .synergy-equation > br,
    .marker-container > br {
        display: none;
    }

    .icon-text-pair:not(:last-child) {
        margin-bottom: 24px;
    }
    .result-part.part-2 { grid-row: 2; }
    .result-part.part-3 { grid-row: 3; }
    .result-part.part-4 { grid-row: 4; transform: rotate(90deg); }
    .result-part.part-5 { grid-row: 5; }

    .part-1, .part-3 { font-size: 14px; }

    .result-part.part-5 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .result-text-small,
    .result-text-large {
        background: linear-gradient(to top, #E1FF00 30%, transparent 30%);
    }

    .result-text-small {
        font-size: 16px;
    }
    .result-text-large {
        font-size: 24px;
    }
}

/* 12. Style for Final Features Section */
.solution-final-features {
    padding: 96px 0;
}
.solution-final-features .h2-underline-dark {
    margin-bottom: 48px;
}
/* --- WordPress auto-p fix --- */
.feature-text-content > p:has(h3.feature-title) {
    display: contents;
}
.feature-block > p:empty {
    display: none;
}
/* --- End fix --- */
.feature-block {
    display: flex; /* Use Flexbox for layout */
    gap: 60px;
    align-items: center;
}
.feature-block.reverse {
    flex-direction: row-reverse; /* Reverse order for the second block on PC */
}
.feature-block:first-of-type {
    margin-bottom: 48px;
}
.feature-text-content {
    flex-basis: 50%; /* Assign equal width */
}
.feature-image-content {
    flex-basis: 50%; /* Assign equal width */
}
.solution-final-features .feature-title {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 24px;
    font-weight: 700;
    color: #000;
    margin-bottom: 16px;
}
.checkmark-icon {
    width: 32px;
    height: 32px;
}
.feature-text-content p {
    font-size: 16px;
    line-height: 1.7;
}
.feature-image-content .pc { display: block; }
.feature-image-content .sp { display: none; }

/* 13. Style for Final Case Study Section */
.solution-casestudy-2 {
    background-color: #f6f6f6;
    padding: 88px 0 0px;
}
.solution-casestudy-2 .h2-underline-dark {
    margin-bottom: 40px;
}
.case-study-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.case-study-card {
    background-color: #fff;
    border-radius: 16px;
    padding: 40px;
    display: grid;
    grid-template-columns: 65fr 35fr;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.case-study-card::before {
    content: attr(data-number);
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', sans-serif;
    font-size: 200px;
    font-weight: 700;
    color: #94B4EB;
    opacity: 0.1;
    letter-spacing: -0.04em;
    z-index: 1;
}
.case-study-card[data-number="01"]::before {
    top: 118px;
}

.case-study-content {
    position: relative;
    /* z-index removed to allow natural stacking */
}
.case-study-graph {
    position: relative;
    z-index: 1; /* Ensure graph is part of the flow but below number */
    text-align: center;
    align-self: end; /* Bottom-align graph image within the grid */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.case-study-graph .pc {
    max-width: 100%;
    display: inline-block;
    vertical-align: bottom; /* 画像を下揃えにする */
}
.case-study-graph .sp { display: none; }

/* Styles for content inside case study cards */
.category-line { display: flex; align-items: center; gap: 2px; font-size: 13px; color: #0F58D5; font-weight: 500; }
.category-icon { width: 16px; }
.case-study-title {
    font-size: 18px;
    font-weight: 700;
    margin-top: 8px;
}
.tags-line {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    position: relative;
    z-index: 2; /* Position tags above the background number */
}
.tags-line .tag {
    background-color: #0F58D5;
    color: #fff;
    border-radius: 100px;
    padding: 0px 16px;
    font-size: 14px;
    font-weight: 500;
}
.strategy-box {
    background-color: #f6f6f6;
    border-radius: 8px;
    padding: 24px;
    margin-top: 24px;
}
.strategy-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 8px;
}
.strategy-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.strategy-list li { display: flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 500; }
.strategy-list img { width: 14px; }




/* --- Mobile Styles --- */
@media screen and (max-width: 767px) {
    /* Final Features on Mobile */
    .solution-final-features { padding: 72px 0 0; }
    .feature-block,
    .feature-block.reverse {
        flex-direction: column-reverse; /* Stack image on top of text for ALL blocks */
        gap: 0px;
    }
    .feature-block + .feature-block {
        margin-top: 60px;
    }
    .feature-image-content .pc {
        display: none;
    }
    .feature-image-content .sp {
        display: block;
        width: 100%;
        height: auto;
    }
    .feature-block:first-of-type .feature-title {
        margin-top: 42px;
    }
    .solution-final-features .feature-title {
        font-size: 20px;
        margin-top: 24px;
    }
    .checkmark-icon {
        width: 24px;
        height: 24px;
    }
    .feature-text-content p {
        font-size: 14px;
    }

    .casestudy-grid {
        display: flex;
        overflow-x: auto;
        gap: 16px;
        padding-bottom: 12.96px;
        margin-top: 40px;
        padding-left: 0;
        padding-right: 5vw;
        scroll-snap-type: x mandatory;
    }
    .casestudy-grid::-webkit-scrollbar {
      height: 4px;
    }
    .casestudy-grid::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 2px;
    }
    .casestudy-grid .case-card {
        flex: 0 0 263px;
        width: 263px;
        scroll-snap-align: start;
    }

    /* Override for the first case study section's scroll behavior */
    .solution-casestudy .wrap {
        padding-right: 0;
    }
    .solution-casestudy .case-study-scroll-outer {
        padding-left: 0; /* avoid double 5vw */
    }
    .solution-casestudy .case-study-scroll-outer::after {
        background: #fff;
        height: 24px; /* slightly taller */
        bottom: -4px; /* move down to fully cover track */
    }
    .solution-casestudy .case-study-scroll-outer::before{
        display:none;
    }


    /* SP Slider for Feature Block */
    .sp-slider-container.sp {
        position: relative;
        /* padding-bottom: 24px; <- Removed to use negative bottom */
    }

    .sp-slider {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* For Firefox */
        gap: 8px; /* Add space between images */
        scroll-behavior: smooth; /* Smooth scrolling for dot clicks */
    }

    .sp-slider::-webkit-scrollbar {
        display: none; /* For Chrome, Safari, and Opera */
    }

    .sp-slider > img {
        width: 100%;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    /* WPが自動挿入する不要なタグをスライダー内で強制的に無効化 */
    .sp-slider-container p,
    .sp-slider-container br {
        display: none !important;
    }

    /* Slider Dots */
    .sp-slider-dots {
        position: absolute;
        bottom: -18px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
    }

    .sp-slider-dots .dot {
        width: 10px;
        height: 10px;
        background-color: #EEEEEE; /* Inactive color */
        border-radius: 50%;
        display: block;
        transition: background-color 0.2s ease;
    }

    .sp-slider-dots .dot.active {
        background-color: #333333; /* Active color */
    }


    /* Final Case Study on Mobile - ADVANCED SCROLLBAR MASKING */
    .solution-casestudy-2 {
        padding: 40px 0 0;
        margin-top: 72px;
    }
    .solution-casestudy-2 .wrap {
        padding-left: 0;
        padding-right: 0;
    }
    
    .solution-casestudy-2 .h2-underline-dark {
        margin-left: 5vw;
        margin-right: 5vw;
    }

    .case-study-scroll-outer {
        position: relative;
        padding-left: calc(42.5vw - 131.5px);
    }

    .case-study-grid {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        scroll-snap-type: x mandatory;
        
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: calc(45vw - 131.5px);
        
        padding-bottom: 8px;

        scroll-padding-left: calc(50vw - 131.5px - 5vw);
        scrollbar-color: #ccc transparent;
    }
    
    .case-study-grid::-webkit-scrollbar { height: 4px; }
    .case-study-grid::-webkit-scrollbar-track { background: transparent; }
    .case-study-grid::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

    /* Masking pseudo-elements for the scrollbar track */
    .case-study-scroll-outer::before,
    .case-study-scroll-outer::after {
        content: '';
        position: absolute;
        bottom: 0;
        z-index: 2;
        height: 10px;
        background: #f6f6f6;
        pointer-events: none;
    }
    .case-study-scroll-outer::before {
        left: 0;
        width: 5vw;
    }
    /* default mask width for scroll sections */
    .case-study-scroll-outer::after {
        right: 0;
        width: calc(45vw - 131.5px);
    }
    /* 导入事例セクションだけ右マスクを5vwに */
    .solution-casestudy .case-study-scroll-outer::after {
        width: 5vw;
    }

    /* smooth transition when left padding toggles */
    .case-study-scroll-outer {
        transition: padding-left 0.3s ease;
    }
    .case-study-scroll-outer::before,
    .case-study-scroll-outer::after {
        transition: width 0.3s ease;
    }

    /* Scroll state modifications */
    .case-study-scroll-outer.scrolled {
        padding-left: 0;
    }
    .case-study-scroll-outer.scrolled::before {
        width: 0;
    }
    .case-study-scroll-outer.scrolled .case-study-grid,
    .case-study-scroll-outer.scrolled .casestudy-grid {
        scroll-padding-left: calc(50vw - 131.5px);
        margin-left: -5vw; /* shift to edge */
    }

    .case-study-card { width: 263px; flex-shrink: 0; scroll-snap-align: start; }
    .case-study-card { grid-template-columns: 1fr; padding: 20px; gap: 0;} /* Changed padding */
    .case-study-card::before { display: none; }
    .case-study-graph .pc { display: none; }
    .case-study-graph .sp { display: block; width: 100%; }
    .category-line { font-size: 12px; }
    .tags-line .tag { font-size: 12px; }
    .case-study-card[data-number="02"] .tags-line,
    .case-study-card[data-number="03"] .tags-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px; /* Add gap for consistent spacing */
        margin-top: 20px;
    }
    .strategy-box{
        padding: 16px; /* PC用の24pxから16pxに変更 */
        margin-top: 20px; /* こちらは変更なし */
    }
    .strategy-title { font-size: 14px; }
    .strategy-list li { 
        font-size: 12px;
        line-height: 1.5; /* Adjust line-height */
        gap: 4px;
    }
    .case-study-content {
        padding-bottom: 0; /* Remove bottom padding */
    }
    .case-study-graph {
        margin-top: 24px; /* Add margin to graph instead */
    }
}

/* =============================================
 * 15. Style for Industry Achievements Block
 * ============================================= */

 .industry-achievements-block {
    background-color: #fff;
    border-radius: 16px;
    padding: 32px;
    margin-top: 32px;
    text-align: left;
}

.industry-title-tag {
    display: inline-block;
    background-color: #333333;
    color: #FFFFFF;
    font-size: 16px;
    padding: 2px 8px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-weight: 700;
}

.industry-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: flex-end; /* 繧ｿ繧ｰ縺ｨetc..繧偵∪縺ｨ繧√※荳区純縺医↓縺吶ｋ */
}

.industry-tag-list li {
    background-color: #F4F4F4;
    font-size: 16px;
    font-weight: 700; /* 繝く繧ｹ繝医ｒ螟ｪ蟄励↓縺吶ｋ */
    padding: 2px 12px; /* 縺疲欠螳壹padding */
    border-radius: 32px;
    color: #333;
}

/* etc.. 蟆ら畑縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.industry-tag-list .etc-item {
    background: none; /* 閭梧勹濶ｲ繧偵↑縺上☆ */
    padding: 0; /* padding繧偵↑縺上☆ */
    font-weight: normal; /* 螟ｪ蟄励↓縺励↑縺 */
    color: #888;
    margin-left: auto; /* 蜿ｳ遶ｯ縺ｫ驟咲ｽｮ縺吶ｋ鬲疲ｳ輔繧ｳ繝ｼ繝 */
    line-height: 1.5; /* 莉悶繧ｿ繧ｰ縺ｨ縺ｮ鬮倥＆繧貞ｾｮ隱ｿ謨ｴ */
}

.case-study-card > p:empty,
.case-study-content > p:empty,
.category-line > br,
.tags-line > br,
.case-study-graph > br {
    display: none;
}

/* --- Mobile Styles --- */
@media screen and (max-width: 767px) {
    .industry-achievements-block {
        margin-top: 40px;
        /* width: auto; を追加して、marginが適用されるようにします */
        width: auto; 
        text-align: center; /* この行を追加してタイトルを中央揃え */
    }
    /* Add side padding to industry achievements */
    .industry-achievements-block{
        margin-left:5vw;
        margin-right:5vw;
    }
    /* 「業界別〜」タイトルのスタイルを調整 */
    .industry-title-tag {
        font-size: 16px;
        font-weight: 700;
    }
    .industry-tag-list {
        gap: 8px 12px;
    }
    .industry-tag-list li,
    .industry-title-tag,
    .industry-tag-list .etc-item {
        font-size: 14px;
    }
    .long-tag br {
        display: block;
    }
    .tags-line .tag {
        padding-top: 4px;
        padding-bottom: 4px;
        line-height: 1.4; /* 改行されるタグの行間を詰める */
    }
}

.long-tag br {
    display: none;
}

/* =============================================
 * 16. Style for New Horizontal Case Study (Revised)
 * ============================================= */
/* --- WordPress auto-p fix for horizontal card --- */
.horizontal-case-card > p:not([class]),
.horizontal-case-card > br,
.card-image-wrapper > br,
.card-content > p:empty,
.card-meta > p:empty,
.card-footer > br {
    display: none;
}

.solution-new-casestudy {
    padding: 80px 0 88px;
    background-color: #f6f6f6;
}

.solution-new-casestudy .h2-underline-dark {
    margin-bottom: 40px;
}

.horizontal-case-card {
    display: flex;
    align-items: center; /* これで左右の要素が垂直方向に中央揃えになります */
    background-color: #fff;
    border: 1px solid #EEEEEE;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.horizontal-case-card .card-image-wrapper {
    flex: 0 0 45%;
    min-width: 0;
}

/* PC表示の画像自体のスタイル */
.horizontal-case-card .card-image-wrapper .pc {
    display: block;
    width: 100%;
    height: auto !important;      /* 競合スタイルを強制的に上書きし、画像の比率を維持します */
    object-fit: unset !important; /* 競合スタイルを強制的に上書きします */
}

.horizontal-case-card .card-image-wrapper .sp {
    display: none;
}

.horizontal-case-card .card-content {
    flex: 1;
    min-width: 0;
    padding: 40px 48px 40px 32px;
    position: relative;
    /* 内部の中央揃え用flex指定をすべて削除 */
}

/* PC Styles for Meta */
.horizontal-case-card .card-meta {
    display: block;
    /* PCでは特別な指定は不要 */
}

.horizontal-case-card .card-date {
    margin-bottom: 8px;
    font-size: 14px;
    color: #888888;
    order: 0; /* PCではorderをリセット */
}

.horizontal-case-card .card-company-name {
    font-weight: 700;
    font-size: 20px;
    order: 0; /* PCではorderをリセット */
}

.horizontal-case-card .card-title {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 16px;
    flex-grow: 0; /* この一行が、レイアウト崩れの根本原因を解消します */
}

/* ---- horizontal case card adjustments ---- */
.horizontal-case-card{
    display:flex;
    align-items:center;
    position:relative; /* allow arrow positioning relative to card border */
}
.horizontal-case-card .card-image-wrapper img{
    width:100%;
    height:auto;
    object-fit:contain;
}
.horizontal-case-card .card-content{
    position:static;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* === Horizontal case card tweaks === */
.horizontal-case-card .card-date{
    font-family:'Inter', sans-serif;
}
/* Adjust company name font */
.horizontal-case-card .card-company-name{
    font-family:'Noto Sans JP', sans-serif !important;
}
/* Ensure footer static */
.horizontal-case-card .card-footer{
    position:static;
}
/* Arrow relative to whole card */
.horizontal-case-card{
    position:relative;
}
.horizontal-case-card .card-arrow{
    position:absolute;
    right:32px;
    bottom:32px;
}
@media (max-width:767px){
    .horizontal-case-card .card-arrow{
        right:16px;
        bottom:16px;
    }
}
/* Adjust horizontal case card image to show full without cropping */
.horizontal-case-card .card-image-wrapper{
    flex:0 0 45%;
    aspect-ratio:auto !important;
    height:auto;
    overflow:visible;
}


@media screen and (max-width: 767px){
    .horizontal-case-card .card-footer .card-tag{
        display:inline-block;
        margin-bottom: -8px;
    }
    .horizontal-case-card .card-footer .card-arrow{
        display: block;
        margin-left: auto;
    }
    .horizontal-case-card .card-arrow{
        position: static;
    }
}

@media screen and (max-width: 1023px) {
    /* Tablet adjustments for horizontal-case-card */
    .horizontal-case-card .card-content{
        padding:20px 48px 20px 32px;
    }
    .horizontal-case-card .card-arrow{
        right:16px;
        bottom:16px;
    }
    .horizontal-case-card .card-meta{
        margin-bottom:8px;
    }
    .horizontal-case-card .card-title{
        font-size:16px;
        margin-bottom:8px;
    }
    .horizontal-case-card .card-image-wrapper{
        aspect-ratio:auto !important;
        height:auto;
    }
    .horizontal-case-card .card-image-wrapper img{
        width:100%;
        height:auto;
        object-fit:contain !important;
    }
}

/* --- Mobile Styles --- */
@media screen and (max-width: 767px) {
    /* 既存のモバイル設定 */
    .solution-new-casestudy {
        padding: 64px 0 0;
    }
    .horizontal-case-card {
        flex-direction: column;
        /* 列レイアウト時に中央寄せされていたため左右に余白が出ていた。 
           stretch に変えて幅いっぱいに広げる */
        align-items: stretch;
    }
    .horizontal-case-card .card-image-wrapper {
        width: 100%;
        aspect-ratio: 1.7 / 1;
    }
    .horizontal-case-card .card-image-wrapper .pc {
        display: none;
    }
    .horizontal-case-card .card-image-wrapper .sp {
        display: block;
    }
    .horizontal-case-card .card-content {
        padding: 16px;
        flex-grow: 1;
    }
    /* Mobile Styles for Meta */
    .horizontal-case-card .card-meta {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;
    }
    .horizontal-case-card .card-date {
        order: 2; /* スマホでは日付を2番目(右)に */
        margin-bottom: 0;
    }
    .horizontal-case-card .card-company-name {
        order: 1; /* スマホでは会社名を1番目(左)に */
        margin-bottom: 0;
        font-size: 16px;
    }
    /* Other mobile styles */
    .horizontal-case-card .card-title {
        font-size: 14px;
        flex-grow: 1;
        margin-bottom: 16px;
    }
    .horizontal-case-card .card-footer {
        display:block;
        position:relative;
        margin-top:auto;
    }
    .horizontal-case-card .card-tag{
        font-size: 12px;
        display:inline-block;
        margin-bottom:8px;
    }
}

/* =============================================
 * 18. Partners Section
 * ============================================= */

/* --- WordPress auto-p fix --- */
.solution-partners .partner-cards-wrapper > p:empty,
.solution-partners .partner-cards-wrapper + p:empty {
    display: none;
}

 .solution-partners {
    padding-bottom: 80px;
    background-color: #f6f6f6; /* 閭梧勹繧偵げ繝ｬ繝ｼ縺ｫ */
}

/* 荳企Κ縺ｮ蛹ｺ蛻ｊ邱 */
.solution-partners .section-divider-top {
    border: none;
    height: 1px;
    background-color: #e0e0e0;
    margin: 0; /* 荳ｭ螟ｮ謠∴ */
}

.partners-intro {
    text-align: center;
    color: #333;
    font-size: 13px;
    margin: 40px 0 20px;
}

.partner-cards-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px; /* 繧ｫ繝ｼ繝蛾俣縺ｮ菴咏區 */
}

.partner-card {
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    width: 280px;  /* 繧ｫ繝ｼ繝峨蟷 */
    height: 180px; /* 繧ｫ繝ｼ繝峨鬮倥＆ */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.partner-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --- Mobile Styles --- */
@media screen and (max-width: 767px) {
    .solution-partners {
        padding-top: 72px;
        padding-bottom: 64px;
    }
    .partner-cards-wrapper {
        flex-direction: row; 
        justify-content: center; /* 中央揃え */
        gap: 16px;
    }
    .partner-card {
        flex: 1;
        max-width: none; /* 既存の max-width をリセット */
        height: auto; /* 高さを自動に */
        aspect-ratio: 280 / 180; /* PC版の比率を維持 */
    }
}

#operating-company {
    padding: 120px 0;
    position: relative; }
  
  #operating-company .slider {
    width: 100%;
    position: absolute;
    top: 140px;
    left: 0;
    pointer-events: none; }
  
  #operating-company h2 {
    font-weight: 700;
    font-size: 38px;
    line-height: 70px;
    letter-spacing: 0.05em; }
  
  #operating-company h2 .h-24 {
    display: block;
    padding-bottom: 10px; }
  
  #operating-company .box {
    background-color: #fff;
    padding: 60px 50px;
    margin-top: 120px; }
  
  #operating-company .box .item + .item {
    margin-top: 50px; }
  
  #operating-company .box .txt {
    padding-top: 20px; }
  
  #operating-company .box .brand-list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 40px;
    justify-content: left;
  }
  
  #operating-company .box .brand-list li {
    width: 16.6666%; }
  
  @media screen and (max-width: 1023px) {
    #operating-company h2 br.pc {
      display: none; } }
  @media screen and (max-width: 767px) {
    #operating-company {
      padding: 50px 0; }
  
    #operating-company .slider figure {
      width: 750px; }
  
    #operating-company h2 {
      font-size: 20px;
      line-height: 32px; }
  
    #operating-company .box {
      margin-top: 50px;
      padding: 30px 20px; }
  
    #operating-company .box .brand-list {
      padding-top: 20px; }
  
    #operating-company .box .brand-list li {
      width: 33.33%; }
}

/* Show full image in casestudy cards */
.casestudy-grid .card-image-wrapper{
    aspect-ratio:auto;
    height:auto;
}
.casestudy-grid .card-image-wrapper img{
    width:100%;
    height:auto;
    object-fit:contain;
}

.case-study-grid.no-snap,
.casestudy-grid.no-snap{
    scroll-snap-type: none !important;
}

/* =============================================
 * Global WordPress auto-insert fixes
 * ============================================= */
.wrap > p:empty,
.wrap > br,
.web-ads-image > br,
.synergy-section > br,
.steps-image > br {
    display: none;
}

.feature-image-content > br,
.feature-image-content > p,
.feature-image-content > p:empty,
.feature-block-grid > p,
.feature-block-grid > br,
.sp-slider > br,
.sp-slider-dots > br,
.sp-slider-container.sp > p {
    display: none !important;
}

/* 空の horizontal-case-card を非表示 */
.horizontal-case-card-wrapper > a.horizontal-case-card:not(:has(.card-content)) {
    display:none !important;
}

/* --- WordPress auto-p fix: horizontal-case-card wrapper --- */
.horizontal-case-card-wrapper > p,
.horizontal-case-card-wrapper > br,
.horizontal-case-card-wrapper > p > a.horizontal-case-card:empty {
    display: none !important;
}

.case-study-graph img {
    display: block; /* Remove inline-block baseline gap */
    line-height: 0; /* Ensure no extra whitespace */
    vertical-align: bottom;
}