@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ========================================
   notepcdtm.com
   TOP PAGE UI
======================================== */

/* Color System */
.home {
    --dtm-navy: #082b50;
    --dtm-blue: #087bea;
    --dtm-cyan: #16c8dc;
    --dtm-text: #0d2d50;
    --dtm-bg: #f5f9fd;
    --dtm-white: #ffffff;
    --dtm-purple: #8257ed;
    --dtm-green: #08a66c;
}

/* Header */
.home .c-infoBar,
.home .l-header__bar {
    min-height: 30px;
    background: var(--dtm-navy);
    color: var(--dtm-white);
}

.home .l-header__barInner {
    min-height: 30px;
}

.home .l-header {
    background: var(--dtm-white);
    color: var(--dtm-navy);
    border-bottom: 1px solid rgba(8, 43, 80, .08);
    box-shadow: none;
}

.home .l-header__inner {
    min-height: 78px;
}

.home .l-header__logo {
    flex: 0 1 280px;
    max-width: 280px;
}

.home .l-header__logo img {
    width: auto;
    max-width: 100%;
    max-height: 68px;
    object-fit: contain;
}

.home .c-gnav > li > a,
.home .c-gnav .c-gnav__sBtn {
    color: var(--dtm-navy);
    font-weight: 700;
    transition: color .2s ease;
}

.home .c-gnav > li > a::after {
    right: 8px;
    bottom: 0;
    left: 8px;
    width: auto;
    height: 2px;
    background: var(--dtm-blue);
    opacity: 0;
    transform: scaleX(.55);
    transform-origin: center;
    transition: opacity .2s ease, transform .2s ease;
}

.home .c-gnav > li:hover > a,
.home .c-gnav > .current-menu-item > a,
.home .c-gnav > .current_page_item > a,
.home .c-gnav > .current-menu-ancestor > a {
    color: var(--dtm-blue);
}

.home .c-gnav > li:hover > a::after,
.home .c-gnav > li > a:focus-visible::after,
.home .c-gnav > .current-menu-item > a::after,
.home .c-gnav > .current_page_item > a::after,
.home .c-gnav > .current-menu-ancestor > a::after {
    opacity: 1;
    transform: scaleX(1);
}

@media (min-width: 960px) {
    .home .l-header__inner {
        height: 78px;
        align-items: center;
    }

    .home .l-header__logo,
    .home .l-header__gnav,
    .home .c-gnav,
    .home .c-gnav > li,
    .home .c-gnav > li > a {
        height: 100%;
    }

    .home .l-header__logo {
        align-items: center;
    }

    .home .c-gnav > li > a {
        padding-right: 12px;
        padding-left: 12px;
        font-size: 14px;
    }
}

/* Hero */
.home .p-mainVisual {
    position: relative;
    margin-bottom: 150px;
    overflow: visible;
    background: var(--dtm-navy);
}

.home .p-mainVisual__inner {
    min-height: clamp(400px, 31vw, 480px);
    overflow: hidden;
}

.home .p-mainVisual__slide,
.home .p-mainVisual__imgLayer,
.home .p-mainVisual__imgLayer img {
    min-height: inherit;
}

.home .p-mainVisual__imgLayer img {
    width: 100%;
    object-fit: cover;
    object-position: center center;
}

.home .p-mainVisual__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(5, 32, 68, .82) 0%, rgba(4, 48, 96, .5) 42%, rgba(4, 38, 78, .06) 72%);
}

.home .p-mainVisual__textLayer {
    display: none;
}

.home .dtm-hero {
    position: absolute;
    inset: 0 0 auto;
    z-index: 4;
    height: clamp(400px, 31vw, 480px);
    pointer-events: none;
}

.home .dtm-hero__content {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12px;
    padding-bottom: 62px;
    color: var(--dtm-white);
}

.home .dtm-hero__label {
    margin: 0 0 14px;
    padding: 6px 16px;
    border-radius: 9999px;
    background: var(--dtm-blue);
    font-size: clamp(13px, 1.2vw, 17px);
    font-weight: 700;
}

.home .dtm-hero__title {
    max-width: 650px;
    margin: 0;
    color: var(--dtm-white);
    font-size: clamp(36px, 3vw, 44px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.015em;
    text-shadow: 0 2px 16px rgba(0, 25, 60, .3);
}

.home .dtm-hero__title span {
    color: #28e4f3;
}

.home .dtm-hero__description {
    max-width: 620px;
    margin: 15px 0 18px;
    font-size: clamp(15px, 1.28vw, 19px);
    font-weight: 600;
    line-height: 1.65;
    text-shadow: 0 1px 8px rgba(0, 25, 60, .5);
}

/* Quick Navigation */
.home .dtm-hero__quick-nav {
    display: flex;
    max-width: 620px;
    flex-wrap: wrap;
    gap: 10px;
    pointer-events: auto;
}

@media (min-width: 960px) {
    .home .dtm-hero__content {
        padding-left: 24px;
    }
}

.home .dtm-hero__quick-nav a {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    gap: 8px;
    padding: 9px 17px;
    border-radius: 9999px;
    background: var(--dtm-white);
    box-shadow: 0 5px 16px rgba(0, 28, 70, .12);
    color: var(--dtm-navy);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.home .dtm-hero__quick-nav a span {
    color: var(--dtm-blue);
    font-size: 19px;
    line-height: 1;
}

.home .dtm-hero__quick-nav a:hover,
.home .dtm-hero__quick-nav a:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 28, 70, .2);
}

/* Feature Cards */
.home .dtm-feature-nav {
    position: absolute;
    right: 0;
    bottom: -128px;
    left: 0;
    z-index: 10;
}

.home .dtm-feature-nav__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    background: var(--dtm-white);
    box-shadow: 0 13px 36px rgba(8, 43, 80, .14);
}

.home .dtm-feature-card {
    display: flex;
    min-width: 0;
    min-height: 142px;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    overflow: hidden;
    border-radius: 16px;
    color: var(--dtm-white);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.home .dtm-feature-card.is-blue { --card-accent: #087bea; background: linear-gradient(135deg, #149cf5, #0870eb); }
.home .dtm-feature-card.is-cyan { --card-accent: #079eaf; background: linear-gradient(135deg, #19ceda, #08aabc); }
.home .dtm-feature-card.is-purple { --card-accent: #7445ec; background: linear-gradient(135deg, #a36bf5, #7445ec); }
.home .dtm-feature-card.is-green { --card-accent: #07965f; background: linear-gradient(135deg, #13c982, #07965f); }

.home .dtm-feature-card:hover,
.home .dtm-feature-card:focus-within {
    color: var(--dtm-white);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(8, 43, 80, .2);
}

.home .dtm-feature-card__media {
    display: grid;
    width: 40%;
    min-width: 0;
    align-self: stretch;
    place-items: center;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.home .dtm-feature-card__image-link {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

.home .dtm-feature-card__image-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .95);
    outline-offset: -2px;
}

.home .dtm-feature-card__image {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 132px;
    padding: 0;
    object-fit: contain;
    transform: scale(1.16);
    transform-origin: center;
    transition: transform .2s ease;
}

.home .dtm-feature-card__image-link:hover .dtm-feature-card__image,
.home .dtm-feature-card__image-link:focus-visible .dtm-feature-card__image {
    transform: scale(1.20);
}

.home .dtm-feature-card__icon {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    font-size: 42px;
    font-weight: 300;
    line-height: 1;
}

.home .dtm-feature-card__body {
    display: flex;
    min-width: 0;
    flex: 1;
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
}

.home .dtm-feature-card__heading {
    display: block;
    position: relative;
    min-width: 0;
}

.home .dtm-feature-card__title-icon {
    position: absolute;
    top: -4px;
    left: 0;
    width: 29px;
    min-width: 29px;
    height: 29px;
    margin-top: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--dtm-white);
}

.home .dtm-feature-card.is-blue .dtm-feature-card__title-icon {
    width: 30px;
    min-width: 30px;
    height: 30px;
}

.home .dtm-feature-card__title-link {
    display: block;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.home .dtm-feature-card__title-link:hover,
.home .dtm-feature-card__title-link:focus-visible {
    color: inherit;
    text-decoration: none;
}

.home .dtm-feature-card__title-link:focus-visible {
    border-radius: 3px;
    outline: 2px solid rgba(255, 255, 255, .95);
    outline-offset: 2px;
}

.home .dtm-feature-card__title {
    display: block;
    color: inherit;
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.28;
    text-indent: 39px;
}

.home .dtm-feature-card.is-green .dtm-feature-card__title {
    font-size: clamp(14px, 1.04vw, 16px);
    letter-spacing: -.035em;
}

.home .dtm-feature-card__description {
    margin: 4px 0 8px;
    font-size: 12px;
    line-height: 1.45;
    opacity: .9;
}

.home .dtm-feature-card__cta {
    display: inline-flex;
    width: fit-content;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: auto;
    padding: 6px 12px;
    align-self: flex-end;
    border-radius: 9999px;
    background: var(--dtm-white);
    color: var(--card-accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
}

.home .dtm-feature-card__cta-icon {
    width: 15px;
    min-width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home .dtm-feature-card__cta:hover,
.home .dtm-feature-card__cta:focus-visible {
    background: #f8fafc;
    color: var(--card-accent);
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 1200px) {
    .home .l-header__logo {
        flex-basis: 230px;
        max-width: 230px;
    }

    .home .c-gnav > li > a {
        padding-right: 8px;
        padding-left: 8px;
        font-size: 13px;
    }

    .home .p-mainVisual {
        margin-bottom: 270px;
    }

    .home .dtm-feature-nav {
        bottom: -248px;
    }

    .home .dtm-feature-nav__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home .dtm-feature-card {
        min-height: 126px;
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .home .dtm-feature-card__media {
        width: 40%;
    }
}

@media (max-width: 959px) {
    .home .l-header__inner {
        min-height: 60px;
    }

    .home .l-header__logo {
        max-width: min(230px, calc(100% - 110px));
    }

    .home .l-header__logo img {
        max-height: 50px;
    }
}

@media (max-width: 767px) {
    .home .p-mainVisual {
        margin-bottom: 548px;
    }

    .home .p-mainVisual__inner,
    .home .dtm-hero {
        height: 440px;
        min-height: 440px;
    }

    .home .p-mainVisual__imgLayer img {
        object-position: 68% center;
    }

    .home .p-mainVisual__slide::after {
        background: linear-gradient(90deg, rgba(5, 32, 68, .88) 0%, rgba(4, 48, 96, .65) 58%, rgba(4, 38, 78, .2) 100%);
    }

    .home .dtm-hero__content {
        justify-content: flex-end;
        padding-bottom: 38px;
    }

    .home .dtm-hero__label {
        margin-bottom: 10px;
        padding: 5px 12px;
    }

    .home .dtm-hero__title {
        max-width: 610px;
        font-size: clamp(28px, 7.5vw, 34px);
    }

    .home .dtm-hero__description {
        margin: 10px 0 13px;
        font-size: 14px;
    }

    .home .dtm-hero__description br {
        display: none;
    }

    .home .dtm-hero__quick-nav {
        gap: 7px;
    }

    .home .dtm-hero__quick-nav a {
        min-height: 38px;
        padding: 6px 11px;
        font-size: 12px;
    }

    .home .dtm-hero__quick-nav a span {
        font-size: 15px;
    }

    .home .dtm-feature-nav {
        bottom: -526px;
    }

    .home .dtm-feature-nav__inner {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
        border-radius: 16px;
    }

    .home .dtm-feature-card {
        min-height: 118px;
        padding: 14px 16px;
    }

    .home .dtm-feature-card__media {
        width: 38%;
        max-width: 150px;
    }

    .home .dtm-feature-card__image {
        max-height: 104px;
        padding: 0;
    }

    .home .dtm-feature-card__icon {
        font-size: 34px;
    }

    .home .dtm-feature-card__title {
        font-size: 17px;
    }

    .home .dtm-feature-card__description {
        margin: 2px 0 8px;
    }

    .home .dtm-feature-card__cta {
        width: fit-content;
        min-height: 34px;
    }
}

@media (max-width: 420px) {
    .home .p-mainVisual__inner,
    .home .dtm-hero {
        height: 460px;
        min-height: 460px;
    }

    .home .dtm-hero__quick-nav a {
        width: calc(50% - 4px);
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home .dtm-hero__quick-nav a,
    .home .dtm-feature-card {
        transition: none;
    }
}

/* =========================================================
 * Single article design pilot: post ID 47 / dtm-daw-pc-howto
 * ======================================================= */
.dtm-pilot-article {
    --dtm-article-navy: #0b2f63;
    --dtm-article-blue: #087bea;
    --dtm-article-cyan: #12c6db;
    --dtm-article-line: #d9e9f8;
    --dtm-article-pale: #f2faff;
}

.dtm-pilot-article .dtm-article-hero {
    display: grid;
    grid-template-columns: minmax(0, 63%) minmax(0, 37%);
    min-height: 360px;
    margin: 0 0 16px;
    overflow: hidden;
    background: linear-gradient(120deg, #fff 0%, #f7fcff 58%, #eaf9ff 100%);
    border: 1px solid var(--dtm-article-line);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(14, 70, 124, .07);
}

.dtm-pilot-article .dtm-article-hero__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 42px 16px 42px 44px;
}

.dtm-pilot-article .dtm-article-hero__labels {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 15px;
}

.dtm-pilot-article .dtm-article-hero__label {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    border-radius: 999px;
}

.dtm-pilot-article .dtm-article-hero__label.is-tone-1 { background: var(--dtm-article-blue); }
.dtm-pilot-article .dtm-article-hero__label.is-tone-2 { background: var(--dtm-article-cyan); }
.dtm-pilot-article .dtm-article-hero__label.is-tone-3 { background: #7959e8; }

.dtm-pilot-article .dtm-article-hero__title {
    margin: 0;
    color: var(--dtm-article-navy);
    font-size: clamp(30px, 2.45vw, 35px);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.025em;
}

.dtm-pilot-article .dtm-article-hero__lead {
    max-width: 590px;
    margin: 18px 0 0;
    color: #48617c;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.85;
}

.dtm-pilot-article .dtm-article-hero__visual {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.dtm-pilot-article .dtm-article-hero__halo {
    position: absolute;
    inset: 34px 18px 28px 4px;
    background: radial-gradient(circle, rgba(42, 216, 232, .36) 0%, rgba(95, 188, 255, .13) 52%, transparent 72%);
    border-radius: 50%;
}

.dtm-pilot-article .dtm-article-hero__visual img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 53% center;
}

.dtm-pilot-article .dtm-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 22px;
    margin: 0 0 30px;
    padding: 2px 8px;
    color: #6a7e94;
    font-size: 12px;
    font-weight: 600;
}

.dtm-pilot-article .dtm-article-meta span,
.dtm-pilot-article .dtm-article-meta a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}

.dtm-pilot-article .dtm-article-meta svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dtm-pilot-article .dtm-article-guide {
    margin: 0 0 32px;
    padding: 23px 25px;
    background: #fff;
    border: 1px solid #9ed3ff;
    border-left: 4px solid var(--dtm-article-blue);
    border-radius: 16px;
    box-shadow: 0 7px 20px rgba(17, 91, 158, .06);
}

.dtm-pilot-article .dtm-article-guide__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 15px;
    color: var(--dtm-article-navy);
    font-size: 18px;
    font-weight: 800;
}

.dtm-pilot-article .dtm-article-guide__title svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--dtm-article-blue);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dtm-pilot-article .dtm-article-guide__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dtm-pilot-article .dtm-article-guide__list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: #334f6e;
    font-size: 14px;
    font-weight: 600;
}

.dtm-pilot-article .dtm-article-guide__list svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: .15em;
    fill: none;
    stroke: var(--dtm-article-blue);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dtm-pilot-article .post_content .p-toc,
.dtm-pilot-article .post_content .swell-toc,
.dtm-pilot-article .post_content #toc_container {
    margin: 30px 0;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid #b9dcf7;
    border-radius: 16px;
    box-shadow: 0 7px 22px rgba(20, 79, 137, .06);
}

.dtm-pilot-article .post_content .p-toc__ttl,
.dtm-pilot-article .post_content .swell-toc__title,
.dtm-pilot-article .post_content .toc_title {
    color: var(--dtm-article-navy);
    font-weight: 800;
}

.dtm-pilot-article .post_content .p-toc__list li::before,
.dtm-pilot-article .post_content .swell-toc li::marker,
.dtm-pilot-article .post_content #toc_container li::marker {
    color: var(--dtm-article-blue);
    font-weight: 800;
}

.dtm-pilot-article .post_content h2 {
    margin-top: 2.8em;
    padding: .72em .9em .72em 1.05em;
    color: var(--dtm-article-navy);
    font-weight: 800;
    line-height: 1.5;
    background: #eef8ff;
    border: 0;
    border-left: 5px solid var(--dtm-article-blue);
    border-radius: 0 12px 12px 0;
}

.dtm-pilot-article .post_content h3 {
    margin-top: 2.2em;
    padding: 0 0 .45em .8em;
    color: var(--dtm-article-navy);
    font-weight: 750;
    border: 0;
    border-left: 3px solid var(--dtm-article-cyan);
    border-bottom: 1px solid #dceaf5;
}

.dtm-pilot-article .post_content .is-style-big_icon_point,
.dtm-pilot-article .post_content .is-style-big_icon_check,
.dtm-pilot-article .post_content .is-style-big_icon_good,
.dtm-pilot-article .post_content .is-style-big_icon_caution {
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(12, 61, 110, .05);
}

.dtm-pilot-article .l-sidebar .c-widget,
.dtm-pilot-article .l-sidebar .widget {
    overflow: hidden;
    padding: 18px;
    background: #fff;
    border: 1px solid #dfebf5;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(16, 65, 111, .06);
}

.dtm-pilot-article .l-sidebar .c-widget__title,
.dtm-pilot-article .l-sidebar .widgettitle {
    margin: -18px -18px 16px;
    padding: 12px 17px;
    color: var(--dtm-article-navy);
    font-weight: 800;
    background: #eef8ff;
    border-left: 4px solid var(--dtm-article-blue);
}

@media (max-width: 959px) {
    .dtm-pilot-article .dtm-article-hero {
        grid-template-columns: minmax(0, 61%) minmax(0, 39%);
        min-height: 330px;
    }

    .dtm-pilot-article .dtm-article-hero__copy {
        padding: 34px 12px 34px 30px;
    }

    .dtm-pilot-article .dtm-article-hero__title {
        font-size: clamp(27px, 3.2vw, 32px);
    }
}

@media (max-width: 599px) {
    .dtm-pilot-article .dtm-article-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        border-radius: 18px;
    }

    .dtm-pilot-article .dtm-article-hero__copy {
        padding: 27px 22px 22px;
    }

    .dtm-pilot-article .dtm-article-hero__title {
        font-size: clamp(24px, 7.2vw, 29px);
        line-height: 1.45;
    }

    .dtm-pilot-article .dtm-article-hero__lead {
        margin-top: 13px;
        font-size: 14px;
        line-height: 1.75;
    }

    .dtm-pilot-article .dtm-article-hero__visual {
        height: 180px;
    }

    .dtm-pilot-article .dtm-article-hero__visual img {
        object-position: 50% 37%;
    }

    .dtm-pilot-article .dtm-article-meta {
        gap: 8px 14px;
        margin-bottom: 24px;
    }

    .dtm-pilot-article .dtm-article-guide {
        padding: 20px 18px;
    }

    .dtm-pilot-article .dtm-article-guide__list {
        grid-template-columns: 1fr;
    }

    .dtm-pilot-article .post_content h2 {
        padding: .65em .75em .65em .85em;
        font-size: 1.3em;
    }
}
/* =========================================================
   記事ヒーロー 最終調整
   ID47 / dtm-daw-pc-howto
   ========================================================= */

.dtm-pilot-article .dtm-article-hero {
    display: grid;
    grid-template-columns: minmax(0, 62%) minmax(0, 38%);
    min-height: 320px;
    overflow: hidden;
    border: 1px solid rgba(20, 113, 220, 0.16);
    border-radius: 22px;
    background:
        linear-gradient(
            115deg,
            #ffffff 0%,
            #f8fcff 56%,
            #e9f8ff 100%
        );
    box-shadow: 0 10px 30px rgba(16, 78, 139, 0.07);
}


/* 左側 */
.dtm-pilot-article .dtm-article-hero__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 22px 34px 34px;
}


/* タイトル */
.dtm-pilot-article .dtm-article-hero__title {
    max-width: 620px;
    margin: 15px 0 14px;
    color: #062f63;
    font-size: clamp(27px, 2.15vw, 34px);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -0.02em;
}


/* リード */
.dtm-pilot-article .dtm-article-hero__lead {
    max-width: 600px;
    margin: 0;
    color: #36546f;
    font-size: 14px;
    line-height: 1.85;
}


/* 右側 */
.dtm-pilot-article .dtm-article-hero__visual {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
    overflow: hidden;

    /* 現在見えている縦線を消す */
    border: 0 !important;

    background:
        radial-gradient(
            circle at 52% 48%,
            rgba(65, 210, 255, 0.32) 0%,
            rgba(78, 191, 255, 0.14) 38%,
            rgba(255, 255, 255, 0) 72%
        );
}


/* 装飾 */
.dtm-pilot-article .dtm-article-hero__halo {
    position: absolute;
    width: 270px;
    height: 270px;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -48%);
    background: rgba(76, 207, 255, 0.13);
}


/* Dr.DTM画像 */
.dtm-pilot-article .dtm-article-hero__visual img {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;
    max-width: 330px;
    max-height: 310px;

    object-fit: contain;
    object-position: center bottom;

    margin: auto auto 0;

    display: block;
}


/* 記事情報 */
.dtm-pilot-article .dtm-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin: 12px 4px 26px;
    color: #55708a;
    font-size: 12px;
}


/* スマホ */
@media (max-width: 599px) {

    .dtm-pilot-article .dtm-article-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .dtm-pilot-article .dtm-article-hero__copy {
        padding: 24px 20px 10px;
    }

    .dtm-pilot-article .dtm-article-hero__title {
        font-size: 25px;
    }

    .dtm-pilot-article .dtm-article-hero__visual {
        min-height: 220px;
    }

    .dtm-pilot-article .dtm-article-hero__visual img {
        max-height: 220px;
        max-width: 260px;
    }

}
/* ID47：SWELL標準の固定ページタイトルを完全に非表示 */
.dtm-pilot-article #main_content .l-mainContent__inner > .c-pageTitle {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.dtm-pilot-article .dtm-article-hero {
    grid-template-columns: minmax(0, 64%) minmax(0, 36%);
}

.dtm-pilot-article .dtm-article-hero__copy {
    padding: 32px 24px 32px 34px;
}

.dtm-pilot-article .dtm-article-hero__title {
    max-width: 100%;
    font-size: clamp(27px, 2vw, 33px);
    line-height: 1.42;
}
/* =========================================================
   DTMパソコン診断 LABO
   記事本文デザイン 最終調整
   対象：ID47 / dtm-daw-pc-howto のみ
   ========================================================= */


/* ---------------------------------------------------------
   本文全体
--------------------------------------------------------- */

.dtm-pilot-article .post_content {
    color: #24384d;
    font-size: 15px;
    line-height: 1.95;
}

.dtm-pilot-article .post_content > p {
    margin-top: 1.45em;
    margin-bottom: 1.45em;
}

.dtm-pilot-article .post_content strong {
    color: #123f70;
    font-weight: 700;
}


/* ---------------------------------------------------------
   H2
   大きな「章」の開始を分かりやすくする
--------------------------------------------------------- */

.dtm-pilot-article .post_content h2 {
    position: relative;

    margin:
        3.2em
        0
        1.45em !important;

    padding:
        0.9em
        1em
        0.9em
        1.2em !important;

    color: #07366f !important;

    background:
        linear-gradient(
            110deg,
            #edf8ff 0%,
            #f7fcff 68%,
            #ffffff 100%
        ) !important;

    border: 1px solid #c9e7fb !important;
    border-left: 5px solid #138df2 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #c9e7fb !important;

    border-radius: 12px !important;

    box-shadow:
        0 6px 18px
        rgba(28, 100, 160, 0.06);

    font-size:
        clamp(
            21px,
            2vw,
            26px
        ) !important;

    font-weight: 800 !important;

    line-height: 1.45 !important;

    letter-spacing: 0.01em;
}


/* H2左側の小アクセント */

.dtm-pilot-article .post_content h2::before {
    content: "";

    position: absolute;

    left: -5px;
    top: 18%;

    width: 5px;
    height: 64%;

    border-radius: 5px;

    background:
        linear-gradient(
            180deg,
            #168cff 0%,
            #20c9e8 100%
        );
}


/* ---------------------------------------------------------
   H3
--------------------------------------------------------- */

.dtm-pilot-article .post_content h3 {
    position: relative;

    margin:
        2.5em
        0
        1.05em !important;

    padding:
        0.35em
        0
        0.45em
        1.15em !important;

    color: #093b73 !important;

    background: transparent !important;

    border: 0 !important;
    border-bottom:
        2px solid
        #dceefb !important;

    font-size:
        clamp(
            18px,
            1.6vw,
            21px
        ) !important;

    font-weight: 800 !important;

    line-height: 1.55 !important;
}


/* H3の丸マーク */

.dtm-pilot-article .post_content h3::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0.8em;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #168cff;

    box-shadow:
        0 0 0 4px
        rgba(22, 140, 255, 0.12);
}


/* ---------------------------------------------------------
   H4
--------------------------------------------------------- */

.dtm-pilot-article .post_content h4 {
    margin:
        2em
        0
        0.9em;

    padding-left: 0.85em;

    color: #17496e;

    border-left:
        3px solid
        #26bdd5;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.6;
}


/* ---------------------------------------------------------
   本文画像
--------------------------------------------------------- */

.dtm-pilot-article .post_content figure.wp-block-image {
    margin-top: 1.7em;
    margin-bottom: 2.2em;
}

.dtm-pilot-article .post_content figure.wp-block-image img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 16px;

    box-shadow:
        0 9px 28px
        rgba(15, 67, 111, 0.10);
}


/* キャプション */

.dtm-pilot-article .post_content figcaption {
    margin-top: 10px;

    color: #71859a;

    font-size: 12px;
    line-height: 1.65;

    text-align: center;
}


/* ---------------------------------------------------------
   チェックリスト
--------------------------------------------------------- */

.dtm-pilot-article .post_content ul.is-style-check_list {
    margin:
        1.4em
        0
        1.7em;

    padding:
        18px
        22px
        18px
        44px;

    background: #f8fcff;

    border:
        1px solid
        #d9ebf8;

    border-radius: 12px;
}

.dtm-pilot-article .post_content ul.is-style-check_list li {
    margin: 0.45em 0;

    line-height: 1.7;
}


/* ---------------------------------------------------------
   SWELL アイコンボックス
   例：現在のオレンジ色「DTMは最初から〜」
--------------------------------------------------------- */

.dtm-pilot-article .post_content .is-style-icon_announce,
.dtm-pilot-article .post_content .is-style-icon_point,
.dtm-pilot-article .post_content .is-style-icon_info,
.dtm-pilot-article .post_content .is-style-icon_good {
    margin:
        1.8em
        0;

    padding:
        17px
        20px
        17px
        54px !important;

    border-radius: 12px;

    line-height: 1.8;

    box-shadow:
        0 5px 18px
        rgba(28, 83, 123, 0.05);
}


/* 現在の注意・ポイント系 */

.dtm-pilot-article .post_content .is-style-icon_announce {
    background: #fff8f2 !important;

    border:
        1px solid
        #ffe0bd !important;
}


/* ---------------------------------------------------------
   通常の引用
--------------------------------------------------------- */

.dtm-pilot-article .post_content blockquote {
    margin:
        2em
        0;

    padding:
        20px
        24px
        20px
        28px;

    color: #36536c;

    background: #f6fbff;

    border-left:
        4px solid
        #27a1ec;

    border-radius: 10px;
}


/* ---------------------------------------------------------
   表
--------------------------------------------------------- */

.dtm-pilot-article .post_content table {
    overflow: hidden;

    width: 100%;

    margin:
        1.8em
        0
        2.2em;

    border-radius: 12px;

    border-collapse: separate;
    border-spacing: 0;

    box-shadow:
        0 5px 18px
        rgba(15, 66, 110, 0.06);
}

.dtm-pilot-article .post_content table th {
    color: #073a73;

    background: #eaf7ff;

    font-weight: 700;
}

.dtm-pilot-article .post_content table th,
.dtm-pilot-article .post_content table td {
    padding:
        12px
        14px;

    border-color: #dcebf5;
}


/* ---------------------------------------------------------
   リンク
--------------------------------------------------------- */

.dtm-pilot-article .post_content a {
    color: #087be8;

    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition: color 0.2s ease;
}

.dtm-pilot-article .post_content a:hover {
    color: #02a7c8;
}


/* =========================================================
   サイドバー
========================================================= */


/* 各ウィジェット */

.dtm-pilot-article .l-sidebar .c-widget {
    overflow: hidden;

    margin-bottom: 24px;

    background: #ffffff;

    border:
        1px solid
        #d6e7f3;

    border-radius: 14px;

    box-shadow:
        0 6px 20px
        rgba(19, 74, 115, 0.05);
}


/* ウィジェット見出し */

.dtm-pilot-article .l-sidebar .c-widget__title.-side {
    position: relative;

    margin: 0;

    padding:
        13px
        16px
        13px
        19px;

    color: #083c72;

    background:
        linear-gradient(
            90deg,
            #eef9ff 0%,
            #e7f6ff 100%
        );

    border: 0;

    font-size: 15px;

    font-weight: 800;
}


/* 見出し左の青ライン */

.dtm-pilot-article .l-sidebar .c-widget__title.-side::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 4px;

    background:
        linear-gradient(
            180deg,
            #168cff,
            #19c0e1
        );
}


/* SWELL標準の下線を弱める */

.dtm-pilot-article .l-sidebar .c-widget__title.-side::after {
    background: #dcebf4;
}


/* サイドバー画像 */

.dtm-pilot-article .l-sidebar img {
    border-radius: 8px;
}


/* 人気記事 */

.dtm-pilot-article .l-sidebar .p-postList__item {
    margin-bottom: 12px;
}


/* 人気記事タイトル */

.dtm-pilot-article .l-sidebar .p-postList__title {
    color: #173c5f;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.55;
}


/* ---------------------------------------------------------
   サイドバーリンク
--------------------------------------------------------- */

.dtm-pilot-article .l-sidebar a {
    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

.dtm-pilot-article .l-sidebar a:hover {
    color: #168cff;
}


/* =========================================================
   本文とサイドバーの間隔
========================================================= */

@media (min-width: 960px) {

    .dtm-pilot-article .l-content {
        column-gap: 38px;
    }

}


/* =========================================================
   タブレット・スマートフォン
========================================================= */

@media (max-width: 767px) {

    .dtm-pilot-article .post_content {
        font-size: 14.5px;
        line-height: 1.9;
    }


    .dtm-pilot-article .post_content h2 {
        margin-top: 2.6em !important;

        padding:
            0.8em
            0.85em
            0.8em
            1em !important;

        border-radius: 10px !important;

        font-size: 21px !important;
    }


    .dtm-pilot-article .post_content h3 {
        font-size: 18px !important;
    }


    .dtm-pilot-article .post_content figure.wp-block-image img {
        border-radius: 12px;
    }


    .dtm-pilot-article .post_content ul.is-style-check_list {
        padding:
            15px
            14px
            15px
            38px;
    }

}
/* =========================================================
   Dr.DTM サイドバープロフィール
   ========================================================= */

.dtm-profile-card {
    overflow: hidden;
    padding: 18px;
    background: #fff;
    border: 1px solid #d4e7f5;
    border-radius: 16px;
    box-shadow: 0 7px 22px rgba(19, 75, 118, .06);
    text-align: center;
}

.dtm-profile-card__head {
    margin: -18px -18px 16px;
    padding: 13px 14px;
    background: linear-gradient(
        90deg,
        #edf9ff 0%,
        #e8f7ff 100%
    );
    text-align: left;
}

.dtm-profile-card__badge {
    display: inline-block;
    margin-right: 5px;
    padding: 3px 8px;
    color: #fff;
    background: #168cff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.dtm-profile-card__title {
    color: #073b73;
    font-size: 13px;
    font-weight: 800;
}

.dtm-profile-card__image {
    display: block;
    width: 160px !important;
    height: 160px !important;
    margin: 0 auto 12px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 5px 16px rgba(12, 62, 103, .10);
}

.dtm-profile-card__name {
    margin: 0 0 7px !important;
    color: #06396f;
    font-size: 18px;
    font-weight: 800;
}

.dtm-profile-card__text {
    margin: 0 !important;
    color: #405a71;
    font-size: 12px;
    line-height: 1.8;
    text-align: left;
}

.dtm-profile-card__topics {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}

.dtm-profile-card__topics span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 5px 9px;
    color: #0875d1;
    background: #edf8ff;
    border: 1px solid #cbe9fb;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
/* =========================================================
   サイドバー：人気記事・新着記事 最終調整
   対象：記事試作ページのみ
   ========================================================= */

/* ウィジェット全体 */
.dtm-pilot-article .l-sidebar .c-widget {
    overflow: hidden;
    background: #fff;
    border: 1px solid #d5e7f4;
    border-radius: 16px;
    box-shadow: 0 7px 22px rgba(19, 75, 118, .055);
}


/* 人気記事・新着記事のタイトル */
.dtm-pilot-article .l-sidebar .c-widget__title.-side {
    position: relative;
    margin: 0;
    padding: 13px 16px 13px 18px;

    color: #073b73;
    background: linear-gradient(
        90deg,
        #edf9ff 0%,
        #e7f6ff 100%
    );

    border: 0;

    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
}


/* 左のアクセントライン */
.dtm-pilot-article .l-sidebar .c-widget__title.-side::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 4px;

    background: linear-gradient(
        180deg,
        #168cff 0%,
        #20c2df 100%
    );
}


/* SWELL標準の下線を弱める */
.dtm-pilot-article .l-sidebar .c-widget__title.-side::after {
    height: 1px;
    background: #dcebf5;
}


/* ---------------------------------------------------------
   記事一覧
--------------------------------------------------------- */

.dtm-pilot-article .l-sidebar .p-postList {
    padding: 10px 12px 12px;
}


/* 1記事 */
.dtm-pilot-article .l-sidebar .p-postList__item {
    margin: 0 !important;
    padding: 10px 0;

    border-bottom: 1px solid #edf2f6;
}

.dtm-pilot-article .l-sidebar .p-postList__item:last-child {
    border-bottom: 0;
}


/* 記事リンク */
.dtm-pilot-article .l-sidebar .p-postList__link {
    gap: 10px;
    transition:
        transform .18s ease,
        opacity .18s ease;
}

.dtm-pilot-article .l-sidebar .p-postList__link:hover {
    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   サムネイル
--------------------------------------------------------- */

.dtm-pilot-article .l-sidebar .p-postList__thumb {
    overflow: hidden;

    border-radius: 9px;

    box-shadow:
        0 3px 10px
        rgba(15, 66, 106, .08);
}


.dtm-pilot-article .l-sidebar .p-postList__thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 9px;

    transition:
        transform .22s ease;
}


.dtm-pilot-article .l-sidebar .p-postList__link:hover img {
    transform: scale(1.025);
}


/* ---------------------------------------------------------
   記事タイトル
--------------------------------------------------------- */

.dtm-pilot-article .l-sidebar .p-postList__title {
    color: #173e64;

    font-size: 12.5px;
    font-weight: 700;

    line-height: 1.55;

    transition: color .18s ease;
}


.dtm-pilot-article .l-sidebar .p-postList__link:hover .p-postList__title {
    color: #087fe8;
}


/* ---------------------------------------------------------
   ランキング番号
--------------------------------------------------------- */

/* 1位 */
.dtm-pilot-article .l-sidebar .-w-ranking .p-postList__item:nth-child(1)
.c-postThumb__cat {
    background: #ffbf19;
}

/* 2位 */
.dtm-pilot-article .l-sidebar .-w-ranking .p-postList__item:nth-child(2)
.c-postThumb__cat {
    background: #8da2b5;
}

/* 3位 */
.dtm-pilot-article .l-sidebar .-w-ranking .p-postList__item:nth-child(3)
.c-postThumb__cat {
    background: #c98248;
}


/* ---------------------------------------------------------
   記事メタ
--------------------------------------------------------- */

.dtm-pilot-article .l-sidebar .p-postList__meta {
    margin-top: 4px;

    color: #8193a3;

    font-size: 10px;
}


/* ---------------------------------------------------------
   プロフィールとの間隔
--------------------------------------------------------- */

.dtm-pilot-article .dtm-profile-card {
    margin-bottom: 26px;
}


/* ---------------------------------------------------------
   PC表示でサイドバー幅を自然に
--------------------------------------------------------- */

@media (min-width: 960px) {

    .dtm-pilot-article .l-sidebar {
        font-size: 14px;
    }

}


/* ---------------------------------------------------------
   スマホ
--------------------------------------------------------- */

@media (max-width: 767px) {

    .dtm-pilot-article .l-sidebar .c-widget {
        border-radius: 13px;
    }

    .dtm-pilot-article .l-sidebar .p-postList {
        padding:
            8px
            11px
            11px;
    }

}
/* Dr.DTMプロフィール：見出し調整 */
.dtm-profile-card__head {
    text-align: center;
}

.dtm-profile-card__title {
    display: block;
    color: #073b73;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .01em;
}
/* =========================================================
   Dr.DTMプロフィール：外側ウィジェットの二重カードを解除
   ========================================================= */

.dtm-pilot-article .l-sidebar .c-widget:has(.dtm-profile-card) {
    overflow: visible;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.dtm-pilot-article .l-sidebar .c-widget:has(.dtm-profile-card) .dtm-profile-card {
    margin: 0;
    width: 100%;
}
/* =========================================================
   DTMパソコン診断LABO
   記事ヒーロー 最終仕上げ
   対象：試作記事のみ
   ========================================================= */


/* ヒーロー本体 */
.dtm-pilot-article .dtm-article-hero {
    position: relative;
    display: grid;

    grid-template-columns:
        minmax(0, 62%)
        minmax(0, 38%);

    min-height: 330px;

    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            #ffffff 0%,
            #f7fcff 56%,
            #e9f8ff 100%
        );

    border: 1px solid #cde7f7;
    border-radius: 22px;

    box-shadow:
        0 10px 30px
        rgba(16, 77, 128, .07);
}


/* ---------------------------------------------------------
   左：文章
--------------------------------------------------------- */

.dtm-pilot-article .dtm-article-hero__copy {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        32px
        18px
        32px
        34px;
}


/* 3つのラベル */
.dtm-pilot-article .dtm-article-hero__labels {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 16px;
}


.dtm-pilot-article .dtm-article-hero__label {
    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding:
        4px
        11px;

    color: #fff;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;

    line-height: 1;
}


.dtm-pilot-article .dtm-article-hero__label.is-tone-1 {
    background: #1489ef;
}


.dtm-pilot-article .dtm-article-hero__label.is-tone-2 {
    background: #16bfd1;
}


.dtm-pilot-article .dtm-article-hero__label.is-tone-3 {
    background: #8154e9;
}


/* タイトル */
.dtm-pilot-article .dtm-article-hero__title {
    position: relative;

    max-width: 610px;

    margin:
        0
        0
        15px;

    padding-left: 18px;

    color: #062f63;

    font-size:
        clamp(
            27px,
            2.15vw,
            34px
        );

    font-weight: 800;

    line-height: 1.43;

    letter-spacing: -.018em;
}


/* タイトル左のブルーライン */
.dtm-pilot-article .dtm-article-hero__title::before {
    content: "";

    position: absolute;

    left: 0;
    top: .15em;
    bottom: .15em;

    width: 5px;

    border-radius: 6px;

    background:
        linear-gradient(
            180deg,
            #168cff 0%,
            #20c7df 100%
        );
}


/* 説明 */
.dtm-pilot-article .dtm-article-hero__lead {
    max-width: 570px;

    margin: 0;

    color: #48647b;

    font-size: 13.5px;

    line-height: 1.85;
}


/* ---------------------------------------------------------
   右：Dr.DTM
--------------------------------------------------------- */

.dtm-pilot-article .dtm-article-hero__visual {
    position: relative;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    min-width: 0;

    overflow: hidden;

    border: 0 !important;

    background: transparent;
}


/* 大きな水色円 */
.dtm-pilot-article .dtm-article-hero__halo {
    position: absolute;

    z-index: 1;

    width: 310px;
    height: 310px;

    left: 50%;
    top: 51%;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(69, 204, 251, .30) 0%,
            rgba(87, 202, 246, .17) 48%,
            rgba(255, 255, 255, 0) 72%
        );
}


/* Dr.DTM本体 */
.dtm-pilot-article .dtm-article-hero__visual img {
    position: relative;

    z-index: 2;

    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 340px !important;
    max-height: 325px !important;

    margin:
        auto
        auto
        0;

    object-fit: contain !important;
    object-position: center bottom !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    filter:
        drop-shadow(
            0 9px 8px
            rgba(27, 70, 103, .10)
        );
}


/* ---------------------------------------------------------
   記事情報
--------------------------------------------------------- */

.dtm-pilot-article .dtm-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap:
        7px
        18px;

    margin:
        12px
        4px
        27px;

    color: #55728b;

    font-size: 11.5px;

    line-height: 1.4;
}


.dtm-pilot-article .dtm-article-meta span {
    display: inline-flex;
    align-items: center;

    gap: 5px;
}


.dtm-pilot-article .dtm-article-meta svg {
    width: 14px;
    height: 14px;

    fill: none;

    stroke: #4d7999;
    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   「この記事で分かること」とヒーローの距離
   ========================================================= */

.dtm-pilot-article .dtm-article-guide {
    margin-top: 0;
}


/* =========================================================
   タブレット
   ========================================================= */

@media (max-width: 959px) {

    .dtm-pilot-article .dtm-article-hero {
        grid-template-columns:
            minmax(0, 58%)
            minmax(0, 42%);
    }


    .dtm-pilot-article .dtm-article-hero__copy {
        padding:
            28px
            15px
            28px
            25px;
    }


    .dtm-pilot-article .dtm-article-hero__title {
        font-size: 27px;
    }


    .dtm-pilot-article .dtm-article-hero__visual img {
        max-width: 285px !important;
        max-height: 300px !important;
    }

}


/* =========================================================
   スマートフォン
   ========================================================= */

@media (max-width: 599px) {

    .dtm-pilot-article .dtm-article-hero {
        grid-template-columns: 1fr;

        min-height: 0;

        border-radius: 16px;
    }


    .dtm-pilot-article .dtm-article-hero__copy {
        padding:
            23px
            19px
            8px;
    }


    .dtm-pilot-article .dtm-article-hero__labels {
        margin-bottom: 13px;
    }


    .dtm-pilot-article .dtm-article-hero__title {
        margin-bottom: 12px;

        padding-left: 14px;

        font-size: 24px;

        line-height: 1.45;
    }


    .dtm-pilot-article .dtm-article-hero__lead {
        font-size: 13px;
    }


    .dtm-pilot-article .dtm-article-hero__visual {
        min-height: 230px;
    }


    .dtm-pilot-article .dtm-article-hero__halo {
        width: 245px;
        height: 245px;
    }


    .dtm-pilot-article .dtm-article-hero__visual img {
        max-width: 245px !important;
        max-height: 225px !important;
    }


    .dtm-pilot-article .dtm-article-meta {
        gap:
            6px
            12px;

        margin-bottom: 22px;

        font-size: 10.5px;
    }

}
/* =========================================================
   ID47 完成版 最終オーバーライド
   DTMパソコン診断LABO
   ========================================================= */


/* =========================
   HERO
========================= */

.dtm-pilot-article .dtm-article-hero {
    grid-template-columns: minmax(0, 64%) minmax(0, 36%);
    min-height: 315px;

    background:
        radial-gradient(circle at 82% 42%,
            rgba(80, 202, 255, .18) 0,
            rgba(80, 202, 255, .08) 30%,
            transparent 55%),
        linear-gradient(120deg,
            #ffffff 0%,
            #f8fcff 58%,
            #eef9ff 100%);

    border: 1px solid #c9e6f8;
    border-radius: 20px;

    box-shadow:
        0 10px 28px rgba(20, 76, 120, .06);
}


.dtm-pilot-article .dtm-article-hero__copy {
    padding: 30px 20px 30px 32px;
}


/* タイトル */

.dtm-pilot-article .dtm-article-hero__title {
    max-width: 100%;

    margin-bottom: 15px;

    padding-left: 18px;

    color: #052f62;

    font-size: clamp(27px, 2.05vw, 33px);
    font-weight: 800;

    line-height: 1.42;
    letter-spacing: -.018em;
}


/* タイトル左ライン */

.dtm-pilot-article .dtm-article-hero__title::before {
    width: 5px;

    background:
        linear-gradient(
            180deg,
            #168cff,
            #17c4de
        );
}


/* 説明文 */

.dtm-pilot-article .dtm-article-hero__lead {
    max-width: 560px;

    color: #49657d;

    font-size: 13px;
    line-height: 1.85;
}


/* Dr.DTM */

.dtm-pilot-article .dtm-article-hero__visual {
    overflow: hidden;
}


.dtm-pilot-article .dtm-article-hero__visual img {
    max-width: 305px !important;
    max-height: 300px !important;

    object-fit: contain !important;
    object-position: center bottom !important;

    margin-bottom: 0;

    filter:
        drop-shadow(
            0 8px 8px
            rgba(22, 65, 100, .08)
        );
}


/* =========================
   この記事で分かること
========================= */

.dtm-pilot-article .dtm-article-guide {
    margin-bottom: 20px;

    padding: 20px 24px;

    background: #fff;

    border: 1px solid #bcdfff;
    border-left: 4px solid #168cff;

    border-radius: 14px;

    box-shadow:
        0 6px 18px rgba(15, 77, 128, .04);
}


.dtm-pilot-article .dtm-article-guide__title {
    margin-bottom: 14px;

    color: #073b72;

    font-size: 16px;
    font-weight: 800;
}


/* =========================
   疑問ボックス
========================= */

.dtm-pilot-article .dtm-question-box {
    margin: 24px 0 34px;

    padding: 20px 24px 18px;

    background:
        linear-gradient(
            115deg,
            #ffffff 0%,
            #f8fcff 100%
        );

    border: 1px solid #d8e9f5;
    border-radius: 14px;

    box-shadow:
        0 6px 18px rgba(15, 72, 110, .04);
}


.dtm-pilot-article .dtm-question-box__heading {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: #073c73;

    font-size: 16px;
    line-height: 1.5;
}


.dtm-pilot-article .dtm-question-box__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #188cff,
            #23bddc
        );

    border-radius: 50%;

    font-size: 21px;
    font-weight: 800;
}


.dtm-pilot-article .dtm-question-box__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 3px 28px;
}


.dtm-pilot-article .dtm-question-box__grid ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.dtm-pilot-article .dtm-question-box__grid li {
    position: relative;

    margin: 9px 0;

    padding-left: 25px;

    color: #294a67;

    font-size: 14px;
    line-height: 1.65;
}


.dtm-pilot-article .dtm-question-box__grid li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 0;

    color: #168cff;

    font-size: 16px;
    font-weight: 800;
}


.dtm-pilot-article .dtm-question-box__note {
    margin: 14px 0 0 !important;

    padding-top: 13px;

    color: #33566e;

    border-top: 1px solid #e2edf5;

    font-size: 13px;
    font-weight: 600;

    line-height: 1.7;
}


/* =========================
   H2
   01などの番号は付けない
========================= */

.dtm-pilot-article .post_content h2 {
    margin: 3em 0 1.35em !important;

    padding:
        .85em
        1.1em !important;

    color: #06376d !important;

    background:
        linear-gradient(
            100deg,
            #edf8ff,
            #f7fcff
        ) !important;

    border: 0 !important;
    border-left: 5px solid #168cff !important;

    border-radius: 11px !important;

    box-shadow:
        0 5px 16px rgba(20, 80, 125, .04);

    font-size: 24px !important;
    font-weight: 800 !important;

    line-height: 1.45 !important;
}


/* 疑似要素に数字を出さない */

.dtm-pilot-article .post_content h2::before {
    content: none !important;
}


/* =========================
   H3
========================= */

.dtm-pilot-article .post_content h3 {
    padding-left: 18px !important;

    color: #073b72 !important;

    border-bottom: 1px solid #dcecf6 !important;

    font-weight: 800 !important;
}


/* =========================
   本文画像
========================= */

.dtm-pilot-article .post_content figure.wp-block-image img {
    border-radius: 14px;

    box-shadow:
        0 7px 20px rgba(15, 59, 92, .07);
}


/* =========================
   サイドバー
========================= */

.dtm-pilot-article .l-sidebar .c-widget {
    border-radius: 14px;

    box-shadow:
        0 5px 18px rgba(18, 71, 108, .045);
}


/* 人気記事・新着記事 */

.dtm-pilot-article .l-sidebar .c-widget__title.-side {
    padding: 12px 15px 12px 17px;

    color: #073c73;

    background:
        linear-gradient(
            90deg,
            #edf9ff,
            #e8f7ff
        );

    font-size: 15px;
    font-weight: 800;
}


/* 記事を横型コンパクト表示 */

.dtm-pilot-article .l-sidebar .p-postList__link {
    display: grid;

    grid-template-columns:
        100px
        minmax(0, 1fr);

    align-items: center;

    gap: 10px;
}


.dtm-pilot-article .l-sidebar .p-postList__thumb {
    width: 100px;
}


.dtm-pilot-article .l-sidebar .p-postList__title {
    font-size: 11.5px;
    line-height: 1.55;
}


/* =========================
   スマホ
========================= */

@media (max-width: 599px) {

    .dtm-pilot-article .dtm-article-hero {
        grid-template-columns: 1fr;
    }


    .dtm-pilot-article .dtm-article-hero__copy {
        padding:
            22px
            18px
            8px;
    }


    .dtm-pilot-article .dtm-article-hero__title {
        font-size: 24px;
    }


    .dtm-pilot-article .dtm-article-hero__visual {
        min-height: 230px;
    }


    .dtm-pilot-article .dtm-article-hero__visual img {
        max-width: 245px !important;
        max-height: 225px !important;
    }


    .dtm-pilot-article .dtm-question-box {
        padding:
            18px
            17px;
    }


    .dtm-pilot-article .dtm-question-box__grid {
        grid-template-columns: 1fr;
    }


    .dtm-pilot-article .post_content h2 {
        font-size: 21px !important;
    }

}
/* =========================================================
   サイドバー見出しアイコン
   人気記事 / 新着記事
   ========================================================= */


/* ---------------------------------------------------------
   人気記事
   SWELL人気記事には .-w-ranking が付くので自動判定
--------------------------------------------------------- */

.dtm-pilot-article
.l-sidebar
.c-widget:has(.p-postList.-w-ranking)
.c-widget__title.-side {

    padding-left: 43px;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23168cff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10'/%3E%3Cpath d='M9 20V4'/%3E%3Cpath d='M14 20v-7'/%3E%3Cpath d='M19 20V7'/%3E%3Cpath d='M2 20h20'/%3E%3C/svg%3E"),
        linear-gradient(
            90deg,
            #edf9ff 0%,
            #e7f6ff 100%
        );

    background-repeat:
        no-repeat,
        no-repeat;

    background-position:
        17px center,
        0 0;

    background-size:
        18px 18px,
        100% 100%;
}


/* ---------------------------------------------------------
   新着記事
   記事リストあり・ランキングなしのSWELL新着記事を自動判定
--------------------------------------------------------- */

.dtm-pilot-article
.l-sidebar
.c-widget:has(.p-postList):not(:has(.p-postList.-w-ranking))
.c-widget__title.-side {

    padding-left: 43px;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23168cff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 8h6'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M9 16h4'/%3E%3C/svg%3E"),
        linear-gradient(
            90deg,
            #edf9ff 0%,
            #e7f6ff 100%
        );

    background-repeat:
        no-repeat,
        no-repeat;

    background-position:
        17px center,
        0 0;

    background-size:
        18px 18px,
        100% 100%;
}
/* 全記事ヒーロー：PC表示のタイトル領域を少し拡張 */
@media (min-width: 960px) {

    .dtm-pilot-article .dtm-article-hero {
        grid-template-columns: minmax(0, 67%) minmax(0, 33%);
    }

    .dtm-pilot-article .dtm-article-hero__visual img {
        max-width: 285px !important;
    }

}
/* =========================================================
   全記事ヒーロー：PC表示の最終幅調整
   ========================================================= */

@media (min-width: 960px) {

    .dtm-pilot-article .dtm-article-hero {
        grid-template-columns:
            minmax(0, 67%)
            minmax(0, 33%);
    }

    .dtm-pilot-article .dtm-article-hero__visual img {
        max-width: 285px !important;
        max-height: 295px !important;
    }

}
/* =========================================================
   全記事ヒーロー：PC表示の横幅微調整
   ========================================================= */

@media (min-width: 960px) {

    .dtm-pilot-article .dtm-article-hero {
        grid-template-columns:
            minmax(0, 67%)
            minmax(0, 33%);
    }

    .dtm-pilot-article .dtm-article-hero__visual img {
        max-width: 285px !important;
        max-height: 295px !important;
    }

}
/* =========================================================
   TOP：編集部のおすすめ
   ========================================================= */


/* ---------------------------------------------------------
   外側
--------------------------------------------------------- */

.home .dtm-top-recommend {
    position: relative;

    width: 100%;

    margin:
        24px
        auto
        0;

    padding:
        0
        20px;

    box-sizing: border-box;
}


.home .dtm-top-recommend__inner {
    width: min(
        1180px,
        100%
    );

    margin:
        0
        auto;
}


/* ---------------------------------------------------------
   見出し
--------------------------------------------------------- */

.home .dtm-top-recommend__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 14px;
}


.home .dtm-top-recommend__heading-copy {
    min-width: 0;
}


.home .dtm-top-recommend__title {
    display: flex;
    align-items: center;

    gap: 9px;

    margin: 0;

    color: #073b72;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.4;
}


.home .dtm-top-recommend__title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    color: #168cff;

    border:
        2px solid
        #168cff;

    border-radius: 5px;

    font-size: 15px;
    font-weight: 800;

    line-height: 1;
}


.home .dtm-top-recommend__subtitle {
    margin:
        3px
        0
        0
        34px;

    color: #768a9d;

    font-size: 11px;

    line-height: 1.5;
}


.home .dtm-top-recommend__more {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding-bottom: 3px;

    color: #168cff;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.home .dtm-top-recommend__more:hover {
    opacity: .72;

    transform:
        translateX(
            2px
        );
}


/* ---------------------------------------------------------
   3カード
--------------------------------------------------------- */

.home .dtm-top-recommend__grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap: 16px;
}


.home .dtm-top-recommend-card {
    min-width: 0;

    margin: 0;

    overflow: hidden;

    background: #fff;

    border-radius: 13px;

    box-shadow:
        0 7px 22px
        rgba(
            14,
            57,
            91,
            .10
        );
}


.home .dtm-top-recommend-card__link {
    display: block;

    color: inherit;

    text-decoration: none;
}


/* ---------------------------------------------------------
   アイキャッチ
--------------------------------------------------------- */

.home .dtm-top-recommend-card__image {
    position: relative;

    min-height: 235px;

    overflow: hidden;

    background-color: #173c5b;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    transition:
        transform .25s ease;
}


.home
.dtm-top-recommend-card__image.is-no-image {
    background:
        linear-gradient(
            135deg,
            #184e77,
            #071f34
        );
}


.home
.dtm-top-recommend-card__link:hover
.dtm-top-recommend-card__image {
    transform:
        translateY(
            -2px
        );
}


/* 黒グラデーション */

.home .dtm-top-recommend-card__image::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(
                2,
                17,
                31,
                .02
            )
            10%,

            rgba(
                2,
                17,
                31,
                .22
            )
            46%,

            rgba(
                2,
                17,
                31,
                .93
            )
            100%
        );
}


/* ---------------------------------------------------------
   カテゴリーピル
--------------------------------------------------------- */

.home .dtm-top-recommend-card__category {
    position: absolute;

    z-index: 3;

    top: 13px;
    left: 13px;

    max-width:
        calc(
            100% - 26px
        );

    padding:
        5px
        11px;

    overflow: hidden;

    color: #fff;

    background:
        #168cff;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/* ---------------------------------------------------------
   下側テキスト
--------------------------------------------------------- */

.home .dtm-top-recommend-card__shade {
    position: absolute;

    z-index: 3;

    right: 0;
    bottom: 0;
    left: 0;

    padding:
        52px
        18px
        17px;
}


.home .dtm-top-recommend-card__title {
    margin:
        0
        0
        7px;

    padding:
        0
        34px
        0
        0;

    color: #fff !important;

    background: none !important;

    border: 0 !important;

    box-shadow: none !important;

    font-size: 18px !important;
    font-weight: 800 !important;

    line-height: 1.42 !important;

    letter-spacing:
        -.01em;
}


.home .dtm-top-recommend-card__excerpt {
    margin: 0;

    padding-right: 34px;

    color:
        rgba(
            255,
            255,
            255,
            .88
        );

    font-size:
        11px;

    line-height:
        1.55;
}


/* 矢印 */

.home .dtm-top-recommend-card__arrow {
    position: absolute;

    right: 15px;
    bottom: 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    color: #168cff;

    background: #fff;

    border-radius: 50%;

    font-size: 17px;
    font-weight: 700;

    box-shadow:
        0 2px 7px
        rgba(
            0,
            0,
            0,
            .12
        );
}


/* =========================================================
   タブレット
========================================================= */

@media (max-width: 959px) {

    .home .dtm-top-recommend {
        padding:
            0
            16px;
    }


    .home .dtm-top-recommend__grid {
        gap: 12px;
    }


    .home .dtm-top-recommend-card__image {
        min-height:
            210px;
    }


    .home .dtm-top-recommend-card__title {
        font-size:
            15px !important;
    }

}


/* =========================================================
   スマートフォン
========================================================= */

@media (max-width: 599px) {

    .home .dtm-top-recommend {
        margin-top:
            22px;

        padding:
            0
            12px;
    }


    .home .dtm-top-recommend__heading {
        align-items:
            flex-start;
    }


    .home .dtm-top-recommend__title {
        font-size:
            19px;
    }


    .home .dtm-top-recommend__subtitle {
        display:
            none;
    }


    .home .dtm-top-recommend__grid {
        grid-template-columns:
            1fr;

        gap:
            13px;
    }


    .home .dtm-top-recommend-card__image {
        min-height:
            245px;
    }


    .home .dtm-top-recommend-card__title {
        font-size:
            18px !important;
    }

}
/* =========================================================
   TOPページ サイドバー見出し統一
   人気記事 / 新着記事
   ========================================================= */


/* ---------------------------------------------------------
   サイドバーウィジェットの見出し共通
--------------------------------------------------------- */

.home .l-sidebar .c-widget__title.-side {
    position: relative;

    margin-bottom: 14px;

    padding:
        13px
        15px
        13px
        43px;

    color: #073b72;

    background:
        linear-gradient(
            90deg,
            #eef9ff 0%,
            #e5f5ff 100%
        );

    border: 0;
    border-left: 3px solid #168cff;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.4;
}


/* SWELL標準の下線などを抑える */
.home .l-sidebar .c-widget__title.-side::after {
    display: none;
}


/* =========================================================
   人気記事
   ========================================================= */

.home
.l-sidebar
.c-widget:has(.p-postList.-w-ranking)
.c-widget__title.-side::before {

    content: "";

    position: absolute;

    left: 16px;
    top: 50%;

    width: 18px;
    height: 18px;

    transform: translateY(-50%);

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23168cff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10'/%3E%3Cpath d='M9 20V5'/%3E%3Cpath d='M14 20v-8'/%3E%3Cpath d='M19 20V8'/%3E%3Cpath d='M2 20h20'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* =========================================================
   新着記事
   ========================================================= */

.home
.l-sidebar
.c-widget:has(.p-postList):not(:has(.p-postList.-w-ranking))
.c-widget__title.-side::before {

    content: "";

    position: absolute;

    left: 16px;
    top: 50%;

    width: 18px;
    height: 18px;

    transform: translateY(-50%);

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23168cff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 8h6'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M9 16h4'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* =========================================================
   人気記事ランキング本体も少し整える
   ========================================================= */

.home
.l-sidebar
.c-widget:has(.p-postList.-w-ranking) {

    padding: 14px;

    background: #fff;

    border: 1px solid #d7e9f6;
    border-radius: 14px;

    box-shadow:
        0 6px 20px
        rgba(15, 66, 103, .045);
}


/* =========================================================
   新着記事本体
   ========================================================= */

.home
.l-sidebar
.c-widget:has(.p-postList):not(:has(.p-postList.-w-ranking)) {

    padding: 14px;

    background: #fff;

    border: 1px solid #d7e9f6;
    border-radius: 14px;

    box-shadow:
        0 6px 20px
        rgba(15, 66, 103, .045);
}
/* =========================================================
   TOP：旧記事スライダーを非表示
   ========================================================= */

.home .p-postSlider,
.home .p-postSlider__inner,
.home .c-postThumb-slider {
    display: none !important;
}
/* =========================================================
   TOP：おすすめセクション余白調整
   ========================================================= */

.home .dtm-top-recommend {
    margin-top: 32px !important;
    margin-bottom: 34px !important;
}

.home .dtm-top-recommend__heading {
    margin-bottom: 16px;
}
/* =========================================================
   TOP：編集部おすすめカード 微調整
   ========================================================= */

.home .dtm-top-recommend-card__image {
    min-height: 250px;
}

.home .dtm-top-recommend-card__image::after {
    background:
        linear-gradient(
            180deg,
            rgba(3, 20, 34, .00) 18%,
            rgba(3, 20, 34, .18) 44%,
            rgba(3, 20, 34, .88) 100%
        );
}

.home .dtm-top-recommend-card__shade {
    padding: 70px 18px 18px;
}

.home .dtm-top-recommend-card__title {
    font-size: 17px !important;
    line-height: 1.45 !important;
}

.home .dtm-top-recommend-card__excerpt {
    font-size: 10.5px;
    line-height: 1.6;
}
/* =========================================================
   TOP：通常記事一覧の文字量をコンパクトに
   サイドバーは対象外
   ========================================================= */

/* タイトル：最大2行 */
.home .l-mainContent .p-postList__title {
    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    line-clamp: 2;

    font-size: 14px;
    line-height: 1.5;
}


/* 抜粋・説明文：最大2行 */
.home .l-mainContent .p-postList__excerpt {
    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    line-clamp: 2;

    margin-top: 6px;

    font-size: 11.5px;
    line-height: 1.6;
}


/* 記事カード同士の縦方向も少しコンパクトに */
.home .l-mainContent .p-postList__item {
    margin-bottom: 24px;
}
/* =========================================================
   DTMパソコン診断LABO
   スマートフォン最適化 2026-08
   PC表示には影響させない
   ========================================================= */

@media (max-width: 599px) {


    /* =====================================================
       1. HERO
       ===================================================== */

    .home .dtm-hero {
        min-height: 0 !important;

        background-position:
            64% center !important;
    }


    .home .dtm-hero__content {
        padding:
            42px
            22px
            72px !important;
    }


    /* 上の青ラベル */

    .home .dtm-hero__label {
        margin-bottom: 17px;

        font-size: 14px;
    }


    /* メインタイトル */

    .home .dtm-hero__title {
        max-width: 100% !important;

        margin-bottom: 18px !important;

        font-size:
            clamp(
                28px,
                8.2vw,
                34px
            ) !important;

        line-height: 1.28 !important;

        letter-spacing:
            -.025em !important;
    }


    /* 説明 */

    .home .dtm-hero__description {
        max-width: 100% !important;

        margin-bottom: 22px !important;

        font-size: 14px !important;

        line-height: 1.7 !important;
    }


    /* ヒーロー内4ボタン */

    .home .dtm-hero__quick-nav {
        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 9px !important;

        width: 100% !important;
        max-width: 100% !important;
    }


    .home .dtm-hero__quick-nav a {
        min-width: 0 !important;

        padding:
            12px
            7px !important;

        font-size: 13px !important;
    }



    /* =====================================================
       2. 4カード
       1列4枚 → 2列2段
       ===================================================== */

    .home .dtm-feature-nav {
        width:
            calc(
                100% - 24px
            ) !important;

        margin:
            -52px
            auto
            0 !important;

        padding:
            10px !important;

        border-radius:
            18px !important;
    }


    .home .dtm-feature-nav__inner {
        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 8px !important;
    }


    /* 各カード */

    .home .dtm-feature-nav__inner > * {
        min-width: 0 !important;
        min-height: 142px !important;

        margin: 0 !important;

        padding:
            9px
            7px !important;

        border-radius:
            13px !important;

        overflow: hidden;
    }


    /* カード内の文字を少し小型化 */

    .home .dtm-feature-nav__inner strong {
        font-size:
            14px !important;

        line-height:
            1.25 !important;
    }


    .home .dtm-feature-nav__inner small {
        font-size:
            9px !important;

        line-height:
            1.35 !important;
    }


    /* CTAボタン */

    .home .dtm-feature-nav__inner a {
        font-size:
            10px;
    }



    /* =====================================================
       3. 編集部のおすすめ
       ===================================================== */

    .home .dtm-top-recommend {
        margin-top:
            30px !important;

        margin-bottom:
            30px !important;

        padding:
            0
            16px !important;
    }


    .home .dtm-top-recommend__heading {
        align-items:
            center !important;

        margin-bottom:
            13px !important;
    }


    .home .dtm-top-recommend__title {
        gap: 7px !important;

        font-size:
            20px !important;
    }


    .home .dtm-top-recommend__title-icon {
        width: 24px !important;
        height: 24px !important;

        flex-basis:
            24px !important;

        font-size:
            14px !important;
    }


    /* スマホでは補足説明は不要 */

    .home .dtm-top-recommend__subtitle {
        display: none !important;
    }


    .home .dtm-top-recommend__more {
        font-size:
            11px !important;
    }



    /* =====================================================
       おすすめ3記事
       ===================================================== */

    .home .dtm-top-recommend__grid {
        grid-template-columns:
            1fr !important;

        gap:
            10px !important;
    }


    /*
     * 今は大型カードですが、
     * スマホでは高さを大幅に縮めます。
     */

    .home .dtm-top-recommend-card__image {
        min-height:
            158px !important;

        border-radius:
            12px !important;
    }


    /* オーバーレイを少し軽く */

    .home .dtm-top-recommend-card__image::after {
        background:
            linear-gradient(
                180deg,
                rgba(
                    3,
                    20,
                    34,
                    .02
                )
                12%,

                rgba(
                    3,
                    20,
                    34,
                    .20
                )
                46%,

                rgba(
                    3,
                    20,
                    34,
                    .88
                )
                100%
            ) !important;
    }


    /* カテゴリー */

    .home .dtm-top-recommend-card__category {
        top: 9px !important;
        left: 10px !important;

        padding:
            4px
            9px !important;

        font-size:
            9px !important;
    }


    /* 下部テキスト */

    .home .dtm-top-recommend-card__shade {
        padding:
            38px
            14px
            12px !important;
    }


    /* タイトル：最大2行 */

    .home .dtm-top-recommend-card__title {
        display:
            -webkit-box;

        overflow:
            hidden;

        -webkit-box-orient:
            vertical;

        -webkit-line-clamp:
            2;

        line-clamp:
            2;

        margin-bottom:
            0 !important;

        padding-right:
            32px !important;

        font-size:
            15px !important;

        line-height:
            1.4 !important;
    }


    /*
     * スマホでは説明文を消す。
     * タイトルと画像だけで十分です。
     */

    .home .dtm-top-recommend-card__excerpt {
        display:
            none !important;
    }


    /* 矢印 */

    .home .dtm-top-recommend-card__arrow {
        right:
            11px !important;

        bottom:
            11px !important;

        width:
            27px !important;

        height:
            27px !important;

        font-size:
            14px !important;
    }



    /* =====================================================
       4. トップページ本文の通常記事一覧
       ===================================================== */

    .home .l-mainContent .p-postList__title,
    .home #main_content .p-postList__title {
        display:
            -webkit-box;

        overflow:
            hidden;

        -webkit-box-orient:
            vertical;

        -webkit-line-clamp:
            2;

        line-clamp:
            2;

        font-size:
            13px !important;

        line-height:
            1.45 !important;
    }


    /* 説明文はスマホでは最大2行 */

    .home .l-mainContent .p-postList__excerpt,
    .home #main_content .p-postList__excerpt {
        display:
            -webkit-box;

        overflow:
            hidden;

        -webkit-box-orient:
            vertical;

        -webkit-line-clamp:
            2;

        line-clamp:
            2;

        font-size:
            10.5px !important;

        line-height:
            1.55 !important;
    }



    /* =====================================================
       5. セクション全体の余白
       ===================================================== */

    .home .dtm-top-recommend + * {
        margin-top:
            24px !important;
    }

}
/* =========================================================
   TOP スマホ版：不要な大空白を解消
   ========================================================= */

@media (max-width: 599px) {

    /* -----------------------------------------
       1. ヒーロー → 4カード
       ----------------------------------------- */

    .home .dtm-feature-nav {
        position: relative !important;

        margin:
            -34px
            auto
            0 !important;

        transform: none !important;
        top: auto !important;
        bottom: auto !important;
    }


    /*
     * ヒーロー下に余分な余白が残る場合に圧縮
     */
    .home .dtm-hero {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }


    .home .dtm-hero + .dtm-feature-nav {
        margin-top: -34px !important;
    }


    /* -----------------------------------------
       2. 4カード下の余白
       ----------------------------------------- */

    .home .dtm-feature-nav {
        margin-bottom: 24px !important;
    }


    /* -----------------------------------------
       3. 旧スライダーを包む領域ごと消す
       ----------------------------------------- */

    .home .p-postSlider,
    .home .p-postSlider__inner,
    .home .p-postSlider__wrap,
    .home .p-postSlider__container,
    .home .c-postThumb-slider,
    .home .c-postSlider {
        display: none !important;

        height: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }


    /*
     * SWELL側のラッパーにスライダーが入っている場合、
     * ラッパー自体も高さを残さない
     */
    .home *:has(> .p-postSlider),
    .home *:has(> .c-postThumb-slider) {
        min-height: 0 !important;
        height: auto !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


    /* -----------------------------------------
       4. 編集部おすすめを4カードへ近づける
       ----------------------------------------- */

    .home .dtm-top-recommend {
        clear: both;

        margin:
            26px
            auto
            30px !important;

        padding-top: 0 !important;
    }


    /* ウィジェット側の余白対策 */
    .home .widget_dtm_top_editor_recommend,
    .home .widget_text:has(.dtm-top-recommend),
    .home .widget_block:has(.dtm-top-recommend) {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

}
/* =========================================================
   TOP スマホ版：ヒーロー下の大空白 最終補正
   ========================================================= */

@media (max-width: 599px) {

    /*
     * 端末幅に応じて約240〜290px上へ移動
     */
    .home {
        --dtm-mobile-feature-lift:
            clamp(
                240px,
                66vw,
                290px
            );
    }


    /* =========================================
       4カードを空白部分へ引き上げる
       ========================================= */

    .home .dtm-feature-nav {
        position: relative !important;
        z-index: 10 !important;

        top: auto !important;
        bottom: auto !important;

        margin:
            0
            auto !important;

        transform:
            translateY(
                calc(
                    -1 *
                    var(--dtm-mobile-feature-lift)
                )
            ) !important;

        /*
         * 見た目だけ上げると下に空白が残るため、
         * 同じ量をレイアウト上から差し引く
         */
        margin-bottom:
            calc(
                -1 *
                var(--dtm-mobile-feature-lift)
            ) !important;
    }


    /* =========================================
       4カードを包む親側の余白も抑える
       ========================================= */

    .home *:has(> .dtm-feature-nav) {
        padding-top: 0 !important;
        padding-bottom: 0 !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        min-height: 0 !important;
    }


    /* =========================================
       4カード → 編集部おすすめ
       ========================================= */

    .home .dtm-top-recommend {
        margin-top: 26px !important;
        padding-top: 0 !important;
    }

}
/* =========================================================
   TOP スマホ版：4カード位置の再調整
   前回の引き上げ過多を修正
   ========================================================= */

@media (max-width: 599px) {

    /* 前回設定した大幅引き上げを無効化 */
    .home {
        --dtm-mobile-feature-lift: 0px !important;
    }


    /* =====================================================
       4カード
       transformではなくnegative marginで自然に重ねる
       ===================================================== */

    .home .dtm-feature-nav {
        position: relative !important;
        z-index: 10 !important;

        top: auto !important;
        bottom: auto !important;

        transform: none !important;

        width: calc(100% - 24px) !important;

        /*
         * ヒーローへ少しだけ重ねる
         */
        margin:
            -26px
            auto
            28px !important;

        padding: 10px !important;

        background: #fff !important;

        border-radius: 18px !important;

        box-shadow:
            0 12px 30px
            rgba(12, 55, 90, .10) !important;
    }


    /* 親要素へ入れた前回の強制補正も解除 */
    .home *:has(> .dtm-feature-nav) {
        height: auto !important;
        min-height: initial !important;

        margin-top: initial !important;
        margin-bottom: initial !important;

        padding-top: initial !important;
        padding-bottom: initial !important;
    }


    /* =====================================================
       編集部のおすすめ
       必ず4カードの後から通常配置
       ===================================================== */

    .home .dtm-top-recommend {
        position: relative !important;
        z-index: 1 !important;

        clear: both !important;

        transform: none !important;

        margin:
            28px
            auto
            32px !important;

        padding:
            0
            16px !important;

        background: #fff !important;
    }


    /*
     * 編集部おすすめを入れているウィジェットにも
     * negative marginを残さない
     */
    .home .widget_text:has(.dtm-top-recommend),
    .home .widget_block:has(.dtm-top-recommend),
    .home *:has(> .dtm-top-recommend) {
        transform: none !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding-top: 0 !important;

        background: #fff !important;
    }

}
/* =========================================================
   TOP スマホ：4カード → 編集部おすすめ の空白を縮小
   ========================================================= */

@media (max-width: 599px) {

    /*
     * 4カード自体の現在位置は維持。
     */
    .home .dtm-feature-nav {
        transform: none !important;
    }


    /*
     * 編集部おすすめだけ上へ。
     * negative marginなので、空白そのものも回収します。
     */
    .home .dtm-top-recommend {
        transform: none !important;

        margin-top: -60px !important;
        margin-bottom: 30px !important;
    }


    /*
     * トップページ上部ウィジェット側に
     * 余計な上paddingがある場合も除去。
     */
    .home .widget_text:has(.dtm-top-recommend),
    .home .widget_block:has(.dtm-top-recommend) {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

}
/* =========================================================
   TOP：目的から探す ＋ 新着記事
   ========================================================= */

.home .dtm-top-modern-sections {
    margin-top: 34px;
}


/* =========================================================
   共通見出し
   ========================================================= */

.home .dtm-top-section-head {
    display: flex;
    align-items: baseline;
    gap: 15px;

    margin-bottom: 17px;
}

.home .dtm-top-section-head h2 {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0;

    color: #073b72;

    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;
}

.home .dtm-top-section-head p {
    margin: 0;

    color: #74889a;

    font-size: 11px;
}

.home .dtm-top-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    color: #168cff;

    font-size: 22px;
    font-weight: 700;
}


/* =========================================================
   目的から探す
   ========================================================= */

.home .dtm-top-purpose {
    margin-bottom: 38px;
}

.home .dtm-top-purpose__grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 12px;
}


.home .dtm-top-purpose-card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    min-height: 165px;

    padding:
        17px
        12px
        15px;

    color: #123d64;

    background: #fff;

    border: 1px solid #cfe3f3;
    border-radius: 12px;

    text-align: center;
    text-decoration: none;

    box-shadow:
        0 5px 15px
        rgba(15, 59, 92, .045);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.home .dtm-top-purpose-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 9px 22px
        rgba(15, 59, 92, .09);
}


.home .dtm-top-purpose-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    margin-bottom: 7px;

    color: #168cff;

    background: #edf8ff;

    border-radius: 50%;

    font-size: 29px;
    font-weight: 800;
}


.home .dtm-top-purpose-card strong {
    display: block;

    margin-bottom: 5px;

    font-size: 14px;
    font-weight: 800;
}


.home .dtm-top-purpose-card small {
    display: block;

    color: #536d81;

    font-size: 10px;
    line-height: 1.55;
}


.home .dtm-top-purpose-card__arrow {
    margin-top: auto;

    color: #168cff;

    font-size: 18px;
    font-weight: 800;
}


/* 色分け */

.home .dtm-top-purpose-card.is-cyan {
    border-color: #afe6eb;
}

.home .dtm-top-purpose-card.is-cyan
.dtm-top-purpose-card__icon {
    color: #08b5c4;
    background: #eafcfd;
}


.home .dtm-top-purpose-card.is-purple {
    border-color: #dac9fb;
}

.home .dtm-top-purpose-card.is-purple
.dtm-top-purpose-card__icon {
    color: #8757ed;
    background: #f5f0ff;
}


.home .dtm-top-purpose-card.is-green {
    border-color: #b9e8d1;
}

.home .dtm-top-purpose-card.is-green
.dtm-top-purpose-card__icon {
    color: #0caf72;
    background: #edfff6;
}


.home .dtm-top-purpose-card.is-orange {
    border-color: #f7d99e;
}

.home .dtm-top-purpose-card.is-orange
.dtm-top-purpose-card__icon {
    color: #f2a20a;
    background: #fff9e8;
}


/* =========================================================
   新着記事
   ========================================================= */

.home .dtm-top-latest {
    margin-bottom: 35px;
}


.home .dtm-top-latest__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}


.home .dtm-top-latest-card {
    overflow: hidden;

    background: #fff;

    border: 1px solid #e2e9ef;
    border-radius: 10px;

    box-shadow:
        0 5px 16px
        rgba(15, 57, 90, .05);
}


.home .dtm-top-latest-card a {
    display: block;

    color: inherit;
    text-decoration: none;
}


.home .dtm-top-latest-card__image {
    position: relative;

    height: 145px;

    overflow: hidden;

    background: #edf3f7;
}


.home .dtm-top-latest-card__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .25s ease;
}


.home .dtm-top-latest-card:hover
.dtm-top-latest-card__image img {
    transform: scale(1.025);
}


.home .dtm-top-latest-card__category {
    position: absolute;

    top: 8px;
    left: 8px;

    padding:
        4px
        9px;

    color: #fff;

    background: #168cff;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;
}


.home .dtm-top-latest-card__body {
    padding:
        11px
        12px
        12px;
}


.home .dtm-top-latest-card__body h3 {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    line-clamp: 2;

    min-height: 3em;

    margin:
        0
        0
        8px;

    color: #123d64;

    font-size: 13px;
    font-weight: 800;

    line-height: 1.5;
}


.home .dtm-top-latest-card__body time {
    color: #91a0ad;

    font-size: 9.5px;
}


.home .dtm-top-latest__more {
    margin-top: 18px;

    text-align: center;
}


.home .dtm-top-latest__more a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-width: 260px;

    padding:
        9px
        25px;

    color: #168cff;

    background: #fff;

    border: 1px solid #bddfff;
    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
}


/* =========================================================
   スマホ
   ========================================================= */

@media (max-width: 599px) {

    .home .dtm-top-modern-sections {
        margin-top: 28px;
    }


    .home .dtm-top-section-head {
        display: block;

        margin-bottom: 14px;
    }


    .home .dtm-top-section-head h2 {
        font-size: 20px;
    }


    .home .dtm-top-section-head p {
        display: none;
    }


    /* 目的から探す */

    .home .dtm-top-purpose {
        padding:
            0
            16px;

        margin-bottom: 30px;
    }


    .home .dtm-top-purpose__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 9px;
    }


    .home .dtm-top-purpose-card {
        min-height: 128px;

        padding:
            12px
            8px;
    }


    .home .dtm-top-purpose-card__icon {
        width: 39px;
        height: 39px;

        margin-bottom: 5px;

        font-size: 22px;
    }


    .home .dtm-top-purpose-card strong {
        font-size: 13px;
    }


    .home .dtm-top-purpose-card small {
        display: none;
    }


    /* 最後の初心者ガイドだけ横幅いっぱい */

    .home .dtm-top-purpose-card:last-child {
        grid-column: 1 / -1;

        min-height: 90px;
    }


    /* 新着 */

    .home .dtm-top-latest {
        padding:
            0
            16px;

        margin-bottom: 32px;
    }


    .home .dtm-top-latest__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .home .dtm-top-latest-card__image {
        height: 105px;
    }


    .home .dtm-top-latest-card__body {
        padding:
            9px
            9px
            10px;
    }


    .home .dtm-top-latest-card__body h3 {
        font-size: 11.5px;
    }


    .home .dtm-top-latest__more a {
        width: 100%;
        min-width: 0;
    }

}
/* =========================================================
   TOP PC版：4カード → 編集部のおすすめ の余白調整
   ========================================================= */

@media (min-width: 960px) {

    /* 編集部おすすめ本体 */
    .home .dtm-top-recommend {
        margin-top: 14px !important;
        margin-bottom: 34px !important;
        padding-top: 0 !important;
    }


    /*
     * 「トップページ上部」ウィジェット側に
     * SWELL標準の余白が入っている場合に除去
     */
    .home .widget_text:has(.dtm-top-recommend),
    .home .widget_block:has(.dtm-top-recommend),
    .home *:has(> .dtm-top-recommend) {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }


    /*
     * 4カード直後の余白も少し抑える
     */
    .home .dtm-feature-nav {
        margin-bottom: 18px !important;
    }

}
/* =========================================================
   TOP PC版：4カード下～本文エリアの余白を最終調整
   ========================================================= */

@media (min-width: 960px) {

    /* SWELLの本文＋サイドバー全体を上へ詰める */
    .home #content,
    .home .l-content {
        padding-top: 28px !important;
        margin-top: 0 !important;
    }

    /* 編集部おすすめ側に追加した余白もリセット */
    .home .dtm-top-recommend {
        margin-top: 0 !important;
    }

}
/* =========================================================
   PC追従ヘッダー
   通常時と同じ「白メニュー」デザインへ統一
   ========================================================= */

@media (min-width: 960px) {

    /* 追従ヘッダー全体 */
    #fix_header.l-fixHeader {
        background: #ffffff !important;

        border-bottom: 1px solid #e7edf3 !important;

        box-shadow:
            0 4px 14px
            rgba(8, 40, 70, 0.06) !important;
    }


    /* 追従ヘッダー内部 */
    #fix_header .l-fixHeader__inner {
        background: #ffffff !important;
    }


    /* メニュー文字 */
    #fix_header .c-gnav > li > a {
        color: #092f55 !important;

        font-weight: 700 !important;

        transition:
            color .2s ease,
            background-color .2s ease;
    }


    /* ホバー */
    #fix_header .c-gnav > li > a:hover {
        color: #168cff !important;
        background: transparent !important;
    }


    /* 現在のページ */
    #fix_header .c-gnav > li.current-menu-item > a,
    #fix_header .c-gnav > li.current-menu-ancestor > a {
        color: #168cff !important;
    }


    /* ドロップダウン等の矢印も文字色に合わせる */
    #fix_header .c-gnav > li > a::after {
        border-color: #092f55 !important;
    }

}
/* =========================================================
   PCヘッダー最終版
   通常時・スクロール時とも白で統一
   ========================================================= */

@media (min-width: 960px) {

    /* =====================================================
       通常時のグローバルメニュー
       ===================================================== */

    .l-header__gnav,
    .l-header__gnav .c-gnav,
    #gnav {
        background: #ffffff !important;
    }

    .l-header__gnav {
        border-bottom: 1px solid #e7edf3 !important;

        box-shadow:
            0 3px 10px
            rgba(12, 50, 80, 0.04) !important;
    }


    /* メニュー文字 */
    .l-header__gnav .c-gnav > li > a,
    #gnav .c-gnav > li > a {
        color: #082f55 !important;

        background: transparent !important;

        font-weight: 700 !important;
    }


    /* ホバー */
    .l-header__gnav .c-gnav > li > a:hover,
    #gnav .c-gnav > li > a:hover {
        color: #168cff !important;

        background: transparent !important;
    }


    /* =====================================================
       スクロール後の追従ヘッダー
       ===================================================== */

    #fix_header,
    #fix_header.l-fixHeader {
        width: 100% !important;

        background: #ffffff !important;

        border-bottom: 1px solid #e7edf3 !important;

        box-shadow:
            0 4px 14px
            rgba(8, 40, 70, 0.07) !important;
    }


    #fix_header .l-fixHeader__inner,
    #fix_header .c-gnav,
    #fix_header .l-header__gnav {
        background: #ffffff !important;
    }


    /* 左右に水色が残るのを防止 */
    #fix_header::before,
    #fix_header::after,
    #fix_header .l-fixHeader__inner::before,
    #fix_header .l-fixHeader__inner::after {
        background: #ffffff !important;
    }


    /* 追従メニュー文字 */
    #fix_header .c-gnav > li > a {
        color: #082f55 !important;

        background: transparent !important;

        font-weight: 700 !important;
    }


    #fix_header .c-gnav > li > a:hover {
        color: #168cff !important;

        background: transparent !important;
    }


    /* =====================================================
       現在ページ
       ===================================================== */

    .l-header__gnav .current-menu-item > a,
    .l-header__gnav .current-menu-ancestor > a,
    #fix_header .current-menu-item > a,
    #fix_header .current-menu-ancestor > a {
        color: #168cff !important;
    }


    /* SWELLの選択中ラインは青 */
    .l-header__gnav .c-gnav > li > a::after,
    #fix_header .c-gnav > li > a::after {
        background-color: #168cff !important;
    }

}
/* =========================================================
   記事本文 H2
   商品名見出し：枠付き・番号なし
   例）Lenovo !ThinkCentre M75t Tower Gen 5
   ========================================================= */

.single-post .post_content h2 {
    position: relative;

    margin:
        58px
        0
        34px;

    padding:
        22px
        28px
        22px
        38px;

    color: #073b72 !important;

    background:
        linear-gradient(
            90deg,
            #f5fbff 0%,
            #eef8ff 100%
        ) !important;

    /* 外枠 */
    border:
        1.5px solid
        #168cff !important;

    border-radius:
        10px !important;

    /* SWELL標準装飾をリセット */
    border-left:
        1.5px solid
        #168cff !important;

    box-shadow:
        0 6px 18px
        rgba(
            13,
            80,
            130,
            .07
        ) !important;

    font-size:
        25px !important;

    font-weight:
        800 !important;

    line-height:
        1.45 !important;

    letter-spacing:
        .01em;
}


/* =========================================================
   左側の太い青アクセント
   ========================================================= */

.single-post .post_content h2::before {
    content: "";

    position: absolute;

    top: 18px;
    bottom: 18px;
    left: 16px;

    width: 6px;

    background:
        linear-gradient(
            180deg,
            #168cff,
            #126ee8
        );

    border-radius:
        999px;
}


/* =========================================================
   SWELL等で付いている不要なH2装飾を消す
   ========================================================= */

.single-post .post_content h2::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   スマホ
   ========================================================= */

@media (max-width: 599px) {

    .single-post .post_content h2 {

        margin:
            42px
            0
            24px;

        padding:
            17px
            16px
            17px
            29px;

        border-radius:
            8px !important;

        font-size:
            19px !important;

        line-height:
            1.45 !important;

        box-shadow:
            0 4px 12px
            rgba(
                13,
                80,
                130,
                .06
            ) !important;
    }


    .single-post .post_content h2::before {

        top: 14px;
        bottom: 14px;
        left: 11px;

        width: 5px;
    }

}