/* ==============================================
   Common (共通箇所)
============================================== */
/* ----------------------------------------------
   Common
---------------------------------------------- */
:root {
    --color-primary: #0f374b;
    --color-grad-1: #194682;
    --color-grad-2: #146482;
    --color-grad-3: #0e7d82;
    --color-text-gray: #8b919a;
    --color-background: #f8f8f8;
    --color-bg-secondary: #f0f1f2;
    --color-white: #ffffff;
    --color-border: #dee1e6;
    --color-border-white: rgba(255, 255, 255, 0.2);

    /* Gradients */
    --grad-primary: linear-gradient(
        135deg,
        var(--color-grad-1),
        var(--color-grad-2),
        var(--color-grad-3)
    );

    /* Typography */
    --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    --font-en-primary: "optima-lt-pro", sans-serif;
    --font-en-secondary: "Inter", sans-serif;
    --fs-body: 1.6rem;
    --lh-default: 1.8;
    --lh-ttl-default: 1.45;
    --ls-heading-en: -0.03em;

    /* Layout */
    --section-margin: 15rem;
    --section-padding: 0 3vw;
    --section-bg-padding: 15rem 0;
    --container-width: 1920px;

    /* Border, Shadow, etc. */
    --border-default: 1px solid var(--color-border);
    --border-white: 1px solid var(--color-border-white);
    --border-radius-default: 5px;

    /* Animation & Transition */
    --transition-default: all 0.3s ease;
}

@media screen and (max-width: 768px) {
    :root {
        --fs-body: 1.5rem;
        --section-padding: 0 3.2vw;
        --section-margin: 8rem;
        --section-bg-padding: 8rem 0;
    }
}

html {
    /* スマホ時の基準（1rem = 10px相当） */
    font-size: 62.5%;
    overflow-x: hidden;
    height: -webkit-fill-available;

    /* PC・タブレット時の可変設定 */
    @media screen and (min-width: 768px) {
        /* 最小: 8px相当
           推奨: 1440pxのデザイン幅に基づいた計算値
           最大: 10px相当 (1440px以上の画面で固定)
        */
        font-size: clamp(8px, calc(1000vw / 1440), 10px);
    }

    &.lock {
        overflow: hidden;
    }
}

body {
    font-family: var(--font-ja);
    font-size: var(--fs-body);
    font-weight: 400;
    font-feature-settings: "palt";
    line-height: var(--lh-default);
    color: var(--color-primary);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0;
}

h1,
h2,
h3,
h4,
h5 {
    line-height: 1.2;
    margin: 0;
    font-weight: 500;
}

p {
    letter-spacing: 0.03em;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-default);
}

img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

ul {
    list-style: none;
}

address {
    font-style: normal;
}

/* layout */
.container {
    width: 100%;
    padding: var(--section-padding);
}

.container__inner {
    max-width: var(--container-width);
    margin: 0 auto;
}

.section-bg {
    padding: var(--section-bg-padding);
}

@media screen and (max-width: 768px) {
    .br-sp {
        display: none;
    }
}

/* button */
.c-btn a {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 1.8rem 2.2rem;
    border-radius: var(--border-radius-default);
    position: relative;
    transition: var(--transition-default);
    gap: 1.6rem;
}

.c-btn__ja {
    font-family: var(--font-ja);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5;
}

.c-btn__en {
    font-family: var(--font-en-secondary);
    font-size: 1.1rem;
    line-height: 1.8;
    text-transform: uppercase;
}

.c-btn__label {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}

@media screen and (max-width: 768px) {
    .c-btn a {
        padding: 1.6rem 1.8rem;
        width: fit-content;
    }

    .c-btn__en {
        font-size: 1rem;
    }
}

/* Color Variations */
/* 通常カラー */
.c-btn--primary a {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(15, 55, 75, 0.1);
    color: var(--color-primary);
}

@media (hover: hover) {
    .c-btn--primary a:hover {
        background-color: var(--color-primary);
        color: var(--color-white);
    }
}

/* グラデーション */
.c-btn--gradation a {
    color: var(--color-white);
    position: relative;
    z-index: 1;
}

.c-btn--gradation a::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(
        135deg,
        var(--color-grad-1),
        var(--color-grad-2),
        var(--color-grad-3)
    );
    border-radius: var(--border-radius-default);
    border: transparent;
    transition: var(--transition-default);
}

.c-btn--gradation a::after {
    content: "";
    position: absolute;
    z-index: -2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--color-primary);
    border-radius: var(--border-radius-default);
    border: 1px solid rgba(15, 55, 75, 0.1);
    transition: var(--transition-default);
}
@media (hover: hover) {
    .c-btn--gradation a:hover::before {
        opacity: 0;
    }
}

/* アウトライン */
.c-btn--outline a {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

@media (hover: hover) {
    .c-btn--outline a:hover {
        background-color: var(--color-white);
        color: var(--color-primary);
    }
}

/* ホワイト */
.c-btn--w a {
    background-color: var(--color-white);
    border: 1px solid var(--color-white);
    color: var(--color-primary);
}

@media (hover: hover) {
    .c-btn--w a:hover {
        background-color: var(--color-primary);
        color: var(--color-white);
    }
}

/* 矢印斜め */
.c-btn.c-btn--external .icon-arrow {
    transform: rotate(-45deg);
}

/* option */
/* Sサイズ */
.c-btn--s {
    padding: 1rem 2.5rem;
}

/* heading */
.ttl-ja {
    font-family: var(--font-ja);
    font-weight: 500;
    line-height: var(--lh-ttl-default);
}

.ttl-en {
    font-family: var(--font-en-primary);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: var(--ls-heading-en);
    text-transform: uppercase;
}

.primary-heading {
    display: flex;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: var(--border-default);
}

.primary-heading__ttl {
    font-size: 4.2rem;
}

.primary-heading__subttl {
    font-size: 1.3rem;
    color: var(--color-text-gray);
    letter-spacing: 0;
}

@media screen and (max-width: 768px) {
    .primary-heading {
        flex-direction: column;
        gap: 0.4rem;
    }

    .primary-heading__ttl {
        font-size: 4rem;
    }

    .primary-heading__subttl {
        font-size: 1.1rem;
    }
}

/* link icon */
.link-icon {
    color: var(--color-white);
    height: 2rem;
    width: 3rem;
    display: flex;
}

.link-icon-bg {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    width: 100%;
    height: 100%;
}

.link-icon-bg::before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--grad-primary);
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
    transition: var(--transition-default);
    z-index: 3;
}

.link-icon-bg .icon-arrow {
    z-index: 10;
    width: 1rem;
}

.link-icon-bg::after {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.link-icon-bg span {
    position: relative;
    z-index: 5;
    font-size: 1.6rem;
    transition: var(--transition-default);
}

@media (hover: hover) {
    .link-icon__area:hover .link-icon-bg::before {
        opacity: 0;
    }
}

/* ホワイト */
.link-icon--white .link-icon-bg::before {
    background: rgba(255, 255, 255, 0.06);
}

.link-icon--white .link-icon-bg::after {
    display: none;
}

@media (hover: hover) {
    .link-icon__area:hover .link-icon--white .link-icon-bg::before {
        background: var(--color-white);
        opacity: 1;
    }

    .link-icon__area:hover .link-icon--white .link-icon-bg svg {
        color: var(--color-primary);
    }
}

/* overlay */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    pointer-events: none;
}

body.is-mega-menu-open::after {
    opacity: 1;
    visibility: visible;
}

/* Animation */
/* IMG fadeIn */
.js-fade-parent {
    perspective: 1200px;
    overflow: hidden;
}

.js-fade-up {
    opacity: 0;
    will-change: transform, clip-path, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    transition: none !important;
}

/* TEXT fadeIn */
.js-text-fade-up {
    display: block;
    perspective: 1000px;
}

/* COUNT UP */
.top-date__stats-number {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------
   loading
---------------------------------------------- */
#loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #194682, #146482, #0e7d82);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
#loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ld-logo {
    width: 14rem;
}

.ld-bar-wrap {
    width: 6rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}
.ld-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--color-white);
    animation: ldBarFill 1.8s 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#loading-screen .ld-logo {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(4px);
    animation: logoReveal 1.1s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#loading-screen .ld-bar-wrap {
    opacity: 0;
    animation: barAppear 0.4s 0.9s ease forwards;
}

@keyframes logoReveal {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0px);
    }
}

@keyframes barAppear {
    to {
        opacity: 1;
    }
}

@keyframes ldIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes ldFade {
    to {
        opacity: 1;
    }
}
@keyframes ldBarFill {
    0% {
        width: 0%;
    }
    60% {
        width: 72%;
    }
    100% {
        width: 100%;
    }
}

/* ----------------------------------------------
   Header
---------------------------------------------- */
.header {
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
    height: 10rem;
    padding: 0 3rem;
    max-width: 100%;
}

.header-logo__svg {
    width: 16rem;
    color: var(--color-primary);
    display: block;
    transition: var(--transition-default);
}

.header.is-menu-open .header-logo__svg,
.header.w-header .header-logo__svg {
    color: var(--color-white);
    --color-grad-1: var(--color-white);
    --color-grad-3: var(--color-white);
}

/* Desktop Navigation */
.header-nav-area {
    display: flex;
    gap: 3rem;
    align-items: center;
}

.header-nav__list {
    display: flex;
    gap: 2.4rem;
    font-size: 1.4rem;
    font-weight: 500;
}

.header-nav__item {
    display: flex;
    align-items: center;
}

.header-nav__item > button {
    display: flex;
    align-items: center;
    color: var(--color-primary);
    gap: 0;
    transition: var(--transition-default);
}

.hd-nav-arrow-svg {
    width: 2rem;
    height: 2rem;
    display: block;
    margin-left: 0.2rem;
}

.header-nav__item > a {
    padding: 1rem 0;
    transition: var(--transition-default);
}

.header-nav__item > a:hover {
    opacity: 0.7;
}

/* Desktop Buttons */
.header-btn__list {
    display: flex;
    gap: 1rem;
}

.hd-btn a {
    gap: 0.6rem;
    padding: 1rem 1.4rem;
}

.hd-btn .c-btn__ja {
    font-size: 1.4rem;
}

/* Button Variants */
.c-btn.header-document-btn a {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    transition: color 0.3s ease, background-color 0.3s ease,
        border-color 0.3s ease;
}

.c-btn.header-document-btn a:hover {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--color-white);
}

.c-btn.header-contact-btn a {
    position: relative;
    background: transparent;
    color: var(--color-white);
    border: 1px solid transparent;
    transition: color 0.3s ease, background-color 0.3s ease,
        border-color 0.3s ease;
    z-index: 1;
}

.c-btn.header-contact-btn a:before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: calc(100% + 2px);
    top: -1px;
    left: 0;
    transition: 0.3s;
    opacity: 1;
    background: linear-gradient(
        135deg,
        var(--color-grad-1),
        var(--color-grad-2),
        var(--color-grad-3)
    );
    border-radius: var(--border-radius-default);
    border: 1px solid transparent;
}

.c-btn.header-contact-btn a:after {
    content: "";
    position: absolute;
    z-index: -2;
    width: 100%;
    height: calc(100% + 2px);
    top: -1px;
    left: 0;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-default);
}

.c-btn.header-contact-btn a:hover:before {
    opacity: 0;
}

/* Mega Menu (Desktop) */
.header-nav__item.js-megaMenu {
    position: relative;
}

.p-megaMenu__open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    cursor: pointer;
    padding: 1rem 0;
}

.p-megaMenu__navigation {
    position: absolute;
    top: 6rem;
    left: 50%;
    z-index: 100;
    width: max-content;
    padding: 2rem;
    background-color: var(--color-white);
    border-radius: var(--border-radius-default);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    visibility: hidden;
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.5s ease;
    -webkit-clip-path: inset(0 -50vw 100%);
    clip-path: inset(0 -50vw 100%);
}

/* Mega Menu Links */
.hd-subttl-link,
.hd-submenu-link,
.hd-service-contents-link {
    display: flex;
    align-items: center;
    width: 30rem;
    justify-content: space-between;
    padding: 1.4rem 0;
    border-radius: 3px;
    background: transparent;
}

.hd-subttl-link:hover,
.hd-submenu-link:hover,
.hd-service-contents-link:hover {
    background: var(--color-bg-secondary);
    padding: 1.4rem 1.4rem;
}

.hd-subttl-link__label,
.hd-submenu-link__label {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.hd-subttl-link__label span,
.hd-submenu-link__label span {
    display: block;
}

.hd-subttl-link__en {
    font-size: 2.4rem;
}
.hd-subttl-link__jp,
.hd-submenu-link__jp,
.hd-service-cat__ttljp {
    font-size: 1.1rem;
    text-align: left;
    color: var(--color-text-gray);
}
.hd-submenu-link__en {
    font-size: 1.8rem;
}

.hd-submenu__list {
    border-top: var(--border-default);
    margin-top: 0.8rem;
    padding-top: 0.8rem;
}

.hd-submenu-link__label.hd-submenu-link__label--ja {
    font-size: 1.4rem;
    max-width: 86%;
}

/* Full Width Mega Menu */
.header-nav__item.js-megaMenu.is-full-width {
    position: static;
}

.header-nav__item.js-megaMenu.is-full-width .p-megaMenu__navigation {
    left: 3rem;
    right: 0;
    top: 10rem;
    width: calc(100vw - 6rem);
    max-width: none;
    transform: translateY(-10px);
    margin-left: calc(50% - 50vw);
}

.p-megaMenu__navigation.service-megaMenu__navigation {
    padding: 4rem;
}

/* Interaction States */
.js-megaMenu.is-open .p-megaMenu__navigation,
.p-megaMenu.is-open .p-megaMenu__navigation,
.header-nav__item.js-megaMenu.is-full-width.is-open .p-megaMenu__navigation {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    -webkit-clip-path: inset(0 -50vw);
    clip-path: inset(0 -50vw);
}

.header-nav__item.js-megaMenu.is-full-width.is-open .p-megaMenu__navigation {
    transform: translateY(0);
}

.js-megaMenu.is-open .p-megaMenu__navigation {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    -webkit-clip-path: inset(0 -50vw);
    clip-path: inset(0 -50vw);
}

@media (hover: hover) {
    .p-navigation-global__list-item a:hover {
        text-decoration: underline;
    }
}

/* Service Categories Inside Mega Menu */
.hd-service-cat {
    margin-top: 2.4rem;
    padding-top: 3rem;
    border-top: var(--border-default);
}
.hd-service-cat__heading {
    display: flex;
    flex-direction: column;
}
.hd-service-cat__ttlen {
    font-size: 2rem;
}
.hd-service-cat__list {
    display: grid;
    gap: 4rem;
    grid-template-columns: 2fr 1fr 1fr;
}

.hd-service-contents {
    margin-top: 2.4rem;
}
.hd-service-contents__list {
    display: flex;
    flex-direction: column;
}
.hd-service-contents__list.hd-service-contents__list--col {
    flex-direction: row;
    gap: 1rem;
}
.hd-service-contents__item {
    border-radius: 3px;
    background-color: transparent;
    transition: 0.4s ease;
}
.hd-service-contents__list--col .hd-service-contents__item {
    padding: 1rem;
}
.hd-service-contents__item img {
    border-radius: 3px;
    transition: 0.4s;
}
.hd-service-contents__heading {
    margin-top: 1.6rem;
}
.hd-service-contents__ttl {
    font-size: 1.4rem;
}
.hd-service-contents__desc {
    font-size: 1.1rem;
    color: var(--color-text-gray);
    line-height: 1.5;
    margin-top: 0.5rem;
}
.hd-service-contents__item:hover {
    background-color: var(--color-bg-secondary);
}
.hd-service-contents-link.hd-service-contents-link--wide {
    width: 100%;
}

/* Mobile Navigation */
@media screen and (max-width: 1023px) {
    .header-nav-area {
        display: none;
    }

    .header__inner {
        height: 70px;
        padding: 0 16px;
        gap: 3%;
        position: static !important; /* 構造上の親の重なり順を無効化し、子を浮かせる */
    }

    .header-logo__svg {
        width: 110px;
    }

    /* Logo & Hamburger Z-index Control */
    .header-logo {
        position: relative;
        z-index: 1001 !important; /* 背景(999)より確実に高く */
    }

    .header-spnav {
        position: static !important; /* 親の制限を解除 */
    }

    /* Menu Background (Overlay) */
    .header-spnav__nav-area {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        height: 100vh;
        width: 100%;
        visibility: hidden;
        opacity: 0;
        transform: scale(1.08);
        background: var(
            --gradation,
            linear-gradient(113deg, #194682 0%, #146482 50%, #0e7d82 100%)
        );
        backdrop-filter: blur(15px);
        transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
            transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s;
        padding-top: 80px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .header-spnav__nav-area.-active {
        visibility: visible;
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }

    /* Hamburger Button */
    .spnav-hamburger {
        display: block;
        height: 46px;
        width: 46px;
        margin-left: auto;
        position: relative;
        z-index: 1002;
        border: var(--border-default);
        background-color: transparent;
        cursor: pointer;
        border-radius: 50%;
        transition: border-color 0.3s ease;
    }

    .spnav-hamburger__line {
        display: block;
        height: 1px;
        position: absolute;
        top: 21.5px;
        left: 50%;
        transform: translateX(-50%);
        width: 16px;
        background-color: var(--color-primary);
        transition: background-color 0.3s ease, transform 0.4s;
    }

    .spnav-hamburger__line:before,
    .spnav-hamburger__line:after {
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        width: 100%;
        background-color: var(--color-primary);
        transition: background-color 0.3s ease, top 0.4s, transform 0.4s;
    }

    .header.is-menu-open .spnav-hamburger__line:before,
    .header.is-menu-open .spnav-hamburger__line:after {
        background-color: var(--color-white);
    }

    .spnav-hamburger__line:before {
        top: -6px;
    }
    .spnav-hamburger__line:after {
        top: 6px;
    }

    /* Hamburger Active State */
    .spnav-hamburger.-active .spnav-hamburger__line {
        background-color: transparent;
    }
    .spnav-hamburger.-active .spnav-hamburger__line::before {
        top: 0;
        transform: rotate(45deg);
    }
    .spnav-hamburger.-active .spnav-hamburger__line::after {
        top: 0;
        transform: rotate(-45deg);
    }

    .spnav-hamburger__text {
        position: absolute;
        bottom: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    /* SP Menu Body & Accordion */
    .spnav-body {
        padding: 20px 25px 40px;
    }
    .spnav-body__list > li {
        padding: 16px 0;
        border-bottom: var(--border-white);
    }
    .spnav-body__list > li:first-child {
        border-top: var(--border-white);
    }

    .spnav-body__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--color-white);
        font-weight: 500;
        transition: color 0.4s;
        font-size: 15px;
        text-decoration: none;
    }

    .spnav-body__link--external .icon-arrow {
        transform: rotate(-45deg);
    }

    .spnav-body__link.-accordion {
        position: relative;
        background: none;
        border: none;
        width: 100%;
        padding: 0;
        cursor: pointer;
    }

    .spnav-body__link.-accordion::before,
    .spnav-body__link.-accordion::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        background-color: var(--color-white);
        transition: transform 0.4s;
    }

    .spnav-body__link.-accordion::before {
        height: 1px;
        width: 12px;
        right: 0;
        transform: translateY(-50%);
    }
    .spnav-body__link.-accordion::after {
        height: 12px;
        width: 1px;
        right: 5.5px;
        transform: translateY(-50%);
    }
    .spnav-body__link.-active::after {
        transform: translateY(-50%) rotate(-90deg);
    }

    .spnav-accordion {
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: 0.4s;
        font-weight: 500;
    }

    .spnav-accordion.-active {
        max-height: 2000px;
        padding: 10px 0 20px;
        visibility: visible;
    }
    .spnav-accordion__item {
        margin-top: 12px;
        font-size: 14px;
    }
    .spnav-accordion__link {
        color: var(--color-white);
        text-decoration: none;
    }
    .spnav-accordion__category {
        font-size: 13px;
        margin-top: 16px;
        color: rgba(255, 255, 255, 0.6);
    }

    .spnav-btn__list {
        display: flex;
        gap: 10px;
        justify-content: space-between;
    }

    .spnav-btn__item {
        width: calc((100% - 10px) / 2);
    }

    .spnav-btn__link {
        display: block;
        text-align: center;
        border: 1px solid var(--color-white);
        line-height: 46px;
        border-radius: 5px;
    }

    .spnav-btn__item:first-child .spnav-btn__link {
        background-color: var(--color-white);
        color: var(--color-primary);
    }

    .spnav-btn__link {
        color: var(--color-white);
    }

    .spnav-body__list {
        margin-top: 30px;
    }

    .spnav-body__sublist {
        margin-top: 20px;
    }

    .spnav-body__subitem {
        margin-top: 8px;
    }

    .spnav-body__subitem a {
        color: #e0e0e0;
        font-size: 14px;
    }

    /* SP Top Utility Buttons */
    .header-spnav-area {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
    .header-spbtn__list {
        display: flex;
    }
    .header-spbtn__item:first-child {
        padding-right: 12px;
        border-right: 1px solid var(--color-border);
        transition: border-color 0.3s ease;
    }
    .header-spbtn__item:last-child {
        padding-left: 12px;
    }
    .header-spbtn__link {
        font-size: 12px;
        line-height: 1.8;
        font-weight: 500;
        transition: color 0.3s ease;
    }

    /* Item Fade Animation */
    .header-spnav__nav-area.-active .spnav-body__list > li,
    .header-spnav__nav-area.-active .spnav-btn__list > li {
        animation: spnav-fade-up 0.5s ease forwards;
    }
}

/* Utility & Animation */
@media screen and (min-width: 1024px) {
    .header-spnav-area {
        display: none;
    }
}

@keyframes spnav-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* white-header */
.header.w-header .header-nav__item > button,
.header.w-header .header-nav__item > a {
    color: var(--color-white);
}

.header.w-header .c-btn.header-contact-btn a {
    color: var(--color-primary);
    border: 1px solid var(--color-white);
    background-color: var(--color-white);
}

.header.w-header .c-btn.header-contact-btn a:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.header.w-header .c-btn.header-contact-btn a:before,
.header.w-header .c-btn.header-contact-btn a:after {
    display: none;
}

.header.w-header .c-btn.header-document-btn a {
    background-color: rgba(255, 255, 255, 0.2);
    border: var(--border-white);
    color: var(--color-white);
}

.header.w-header .c-btn.header-document-btn a:hover {
    background-color: var(--color-white);
    border: 1px solid var(--color-white);
    color: var(--color-primary);
}

.header.w-header .spnav-hamburger {
    border: var(--border-white);
}

.header.w-header .header-spbtn__item:first-child {
    border-right: var(--border-white);
}

@media screen and (max-width: 1023px) {
    .header.w-header .spnav-hamburger__line {
        background-color: var(--color-white);
    }

    .header.w-header .spnav-hamburger__line:before,
    .header.w-header .spnav-hamburger__line:after {
        background-color: var(--color-white);
    }

    .header.w-header .header-spbtn__link {
        color: var(--color-white);
    }

    .header.w-header .spnav-hamburger.-active .spnav-hamburger__line {
        background-color: transparent;
    }
}

/* ----------------------------------------------
   Footer
---------------------------------------------- */
.footer {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.footer__inner {
    padding: 10rem 3vw;
    max-width: calc(var(--container-width) + 6vw);
}

.footer {
    margin-top: var(--section-margin);
}

@media screen and (max-width: 768px) {
    .footer__inner {
        padding: 6rem 3.2vw;
    }
}

/* footer-cta */

.footer-cta__inner {
    display: flex;
    gap: 2rem;
}

.footer-cta__box {
    flex: 1;
    background-color: #0d3041;
    border-radius: var(--border-radius-default);
    padding: 5rem;
}

.footer-cta__ttl {
    font-size: 4.2rem;
}

.footer-cta__subttl {
    margin-top: 1rem;
    font-size: 1.3rem;
}

.footer-cta__contents {
    margin-top: 4.8rem;
}

.footer-cta__copy {
    font-size: 2.2rem;
}

.footer-cta__desc {
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--color-text-gray);
    margin-top: 1.8rem;
}

.footer-cta__btn {
    margin-top: 4.4rem;
}

.footer-cta-btn .c-btn__ja {
    font-size: 1.8rem;
}

.footer-cta__btn .c-btn a {
    max-width: 27rem;
}

@media screen and (max-width: 768px) {
    .footer-cta__inner {
        flex-direction: column;
        gap: 1.6rem;
    }

    .footer-cta__box {
        padding: 4rem 3rem 4.5rem 3rem;
    }

    .footer-cta__ttl {
        font-size: 3.8rem;
    }

    .footer-cta__subttl {
        margin-top: 0.5rem;
    }

    .footer-cta__contents {
        margin-top: 3rem;
    }

    .footer-cta__copy {
        font-size: 2rem;
    }

    .footer-cta__desc {
        font-size: 1.3rem;
    }

    .c-btn.footer-cta-btn a {
        width: 100%;
        max-width: 100%;
    }

    .footer-cta__btn {
        margin-top: 3rem;
    }
}

/* footer-main */
.footer-main {
    display: flex;
    flex-direction: row;
    gap: 12rem;
    margin-top: 10rem;
}

.footer-contents {
    flex-basis: 32rem;
}

.footer-nav {
    flex: 1;
}

.footer-logo {
    width: 20rem;
}

.footer-desc {
    font-size: 1.2rem;
    line-height: 1.5;
    margin-top: 3.6rem;
    color: var(--color-text-gray);
}

.footer-sns {
    margin-top: 4rem;
}

.footer-sns__list {
    display: flex;
    gap: 0.5rem;
}

.footer-sns__item img {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    transition: var(--transition-default);
}

.footer-sns__item img:hover {
    filter: brightness(0.8);
}

.footer-btn {
    margin-top: 4rem;
}

.ft-btn:last-child {
    margin-top: 0.8rem;
}

@media screen and (max-width: 768px) {
    .c-btn.ft-btn a {
        width: 100%;
    }
}

/* footer-nav */

/* footer-nav-pc */
.ft-nav {
    display: flex;
    flex-wrap: wrap;
    font-family: var(--font-ja);
    line-height: 1.5rem;
    gap: 1.6rem;
}

.ft-nav__item {
    width: calc((100% - 4.8rem) / 4);
}

.ft-nav__ttl > a {
    color: var(--color-white);
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.5;
}

.ft-nav__ttl--external a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ft-nav__ttl--external .icon-arrow {
    font-size: 1.2rem;
    transform: rotate(-45deg);
}

.ft-nav-sub {
    margin-top: 1.4rem;
}

.ft-nav-sub a {
    color: var(--color-text-gray);
    font-size: 1.3rem;
    font-weight: 400;
}

.ft-nav-subitem {
    margin-top: 0.8rem;
}

.ft-nav__serviceitem {
    margin-top: 1.4rem;
}

.ft-nav__serviceitem > span {
    font-size: 1.3rem;
}

.ft-nav__serviceitem .ft-nav-sub {
    margin-top: 0rem;
}

.ft-nav--second {
    margin-top: 2rem;
}

.ft-nav--second .ft-nav__item {
    margin-top: 2rem;
}

@media screen and (max-width: 768px) {
    .footer-main {
        flex-direction: column-reverse;
        gap: 6rem;
        margin-top: 5rem;
    }

    .ft-nav {
        gap: 3.6rem 1.6rem;
    }

    .ft-nav__item {
        width: calc((100% - 4.8rem) / 2);
    }

    .ft-nav--second .ft-nav__item {
        margin-top: 0;
    }

    .ft-nav--second {
        margin-top: 3.6rem;
    }

    .footer-desc {
        margin-top: 3rem;
    }

    .footer-sns {
        margin-top: 3rem;
    }

    .footer-logo {
        width: 18rem;
    }
}

/* footer-nav-sp */
.sp-nav__item {
    border-bottom: 1px solid var(--color-border-white);
}

.sp-nav__button,
.sp-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 2rem 0;
    color: inherit;
    font-size: 1.5rem;
    font-weight: 500;
    cursor: pointer;
}

.sp-nav__icon {
    display: block;
    position: relative;
    width: 1.6rem;
    height: 1.6rem;
}

.sp-nav__link--external .icon-arrow {
    transform: rotate(-45deg);
}

.sp-nav__icon::before,
.sp-nav__icon::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.1rem;
    height: 1px;
    background-color: var(--color-white);
    transform: translateY(-50%);
}

.sp-nav__icon::after {
    transform: translateY(-50%) rotate(90deg);
    transition: transform 400ms;
}

/* 開閉アニメーション */
.sp-nav__item.is-open .sp-nav__icon::after {
    transform: translateY(-50%) rotate(0deg);
}

.sp-nav__body {
    display: none;
    overflow: hidden;
}

.sp-nav__inner {
    padding: 0 0 3rem 0;
}

.sp-nav__group {
    margin-top: 2.4rem;
}

.sp-nav__group:first-child {
    margin-top: 0;
}

.sp-nav__group-title {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-white);
    margin-bottom: 1rem;
}

.sp-nav__sub-item a {
    display: block;
    color: var(--color-text-gray);
    font-size: 1.5rem;
    line-height: 1.5;
    margin-top: 1rem;
    font-weight: 500;
}

.sp-nav__sub-item:first-child a {
    margin-top: 0;
}

.sp-nav__item:first-child {
    border-top: 1px solid var(--color-border-white);
}

@media screen and (min-width: 480px) {
    .footer-spnav {
        display: none;
    }
}

@media screen and (max-width: 479px) {
    .footer-nav {
        display: none;
    }
}

/* footer-base */
.footer-base {
    border-top: var(--border-white);
    margin-top: 10rem;
    padding-top: 6rem;
}

.footer-base__list {
    display: flex;
    gap: 4rem;
}

.footer-base__item {
    width: calc(100% / 3);
}

.ft-base-ttl {
    font-size: 1.6rem;
    font-weight: 500;
}

.ft-base-date {
    color: var(--color-text-gray);
    font-size: 1.3rem;
    line-height: 1.3;
    margin-top: 1.4rem;
}

.ft-base-date a {
    color: var(--color-text-gray);
}

.ft-base-map {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-en-secondary);
    margin-top: 1.2rem;
}

.m-icon {
    width: 1.1rem;
}

.ft-base-map span {
    text-decoration: underline;
}

.ft-base-tel {
    margin-top: 1.2rem;
}

@media screen and (max-width: 768px) {
    .footer-base {
        margin-top: 5rem;
        padding-top: 4rem;
    }

    .footer-base__list {
        gap: 3rem;
        flex-direction: column;
    }

    .footer-base__item {
        width: 100%;
    }
    .ft-base-ttl {
        font-size: 1.5rem;
    }

    .ft-base-date {
        margin-top: 1.2rem;
    }
}

/* copyright */
.copyright__inner {
    background-color: var(--color-bg-secondary);
    padding: 3rem 3vw;
    display: flex;
    justify-content: space-between;
}

.footer-policy {
    display: flex;
    gap: 3rem;
}

.footer-policy a {
    font-size: 1.2rem;
    color: var(--color-text-gray);
}

.ft-copyright {
    font-family: var(--font-en-secondary);
    font-size: 1.2rem;
    color: var(--color-text-gray);
}

@media screen and (max-width: 768px) {
    .copyright__inner {
        padding: 2.8rem 3vw;
        flex-direction: column;
        gap: 1.6rem;
    }

    .footer-policy {
        flex-direction: column;
        gap: 0;
    }

    .footer-policy a {
        font-size: 1.1rem;
    }

    .footer-policy__item {
        line-height: 1.5;
    }

    .ft-copyright {
        text-align: center;
    }
}

/* body内に .c-related-pages が存在する場合、footerのmargin-topを0にする */
body:has(.c-related-pages) .footer {
    margin-top: 0;
}

/* ==============================================
   Components (コンポーネント)
============================================== */
/* ==============================================
   Component: Category Navigation (汎用カテゴリー)
============================================== */

.c-category__list {
    display: flex;
    gap: 0.6rem;
}

.c-category__item {
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 500;
    padding: 0.6rem 1rem;
    transition: var(--transition-default);
    white-space: nowrap;
    line-height: var(--lh-ttl-default);
    border-radius: 3px;
    border: 1px solid transparent;
}

.c-category__item a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.c-category__item.is-active {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.c-category__item:hover {
    border: 1px solid var(--color-border);
}

.c-category__item:hover.is-active {
    border-color: var(--color-primary);
}

@media screen and (max-width: 768px) {
    .c-category {
        position: relative;
    }

    .c-category__list {
        position: relative;
        margin-left: calc(var(--section-padding) * -1);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: 4rem;
    }

    .c-category::before {
        pointer-events: none;
        content: "";
        width: 4rem;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background: linear-gradient(
            -90deg,
            rgb(248, 248, 248) 30%,
            rgba(248, 248, 248, 0) 100%
        );
        z-index: 3;
    }

    .c-category__list::-webkit-scrollbar {
        display: none;
    }

    .c-category__item {
        font-size: 1.1rem;
        padding: 0.4rem 0.6rem;
    }
}
/* ----------------------------------------------
   Works List
---------------------------------------------- */
.c-works-list {
    margin-top: 6rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
    row-gap: 6rem;
}

.c-works-card__img {
    overflow: hidden;
    border-radius: var(--border-radius-default);
}

.c-works-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

.c-works-card__img img {
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    will-change: transform;
}

.c-works-card__img {
    overflow: hidden;
    border-radius: var(--border-radius-default);
}

@media (hover: hover) {
    .c-works-card__link:hover .c-works-card__img img {
        transform: scale(1.03);
    }
}

.c-works-card__body {
    margin-top: 2.4rem;
}

.c-works-card__client {
    font-size: 1.2rem;
}

.c-works-card__title {
    margin-top: 0.8rem;
    font-size: 1.8rem;
    line-height: var(--lh-ttl-default);
}

.c-works-card__tag-wrap {
    margin-top: 2rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.c-works-card__tag {
    display: inline-block;
    font-size: 1.2rem;
    padding: 0.4rem 0.8rem;
    border-radius: 0.3rem;
    border: var(--border-default);
    line-height: 1.4;
}

/* --- レスポンシブ (1023px以下) --- */
@media screen and (max-width: 1023px) {
    .c-works-list {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 5rem;
    }
}

/* --- レスポンシブ (768px以下) --- */
@media screen and (max-width: 768px) {
    .c-works-list {
        margin-top: 3rem;
        row-gap: 3.6rem;
        column-gap: 1rem;
    }

    .c-works-card__body {
        margin-top: 2rem;
    }

    .c-works-card__client {
        font-size: 1rem;
    }

    .c-works-card__title {
        margin-top: 0.5rem;
        font-size: 1.3rem;
    }

    .c-works-card__tag-wrap {
        margin-top: 1.2rem;
    }

    .c-works-card__tag {
        font-size: 1rem;
        padding: 0.4rem 0.8rem;
    }
}

/* ----------------------------------------------
   Works List 2 Column
---------------------------------------------- */
.c-works-list--col2 {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 0;
    row-gap: 5rem;
}

.service-works__btn {
    margin-top: 6rem;
    display: flex;
    justify-content: flex-start;
}

.service-works__btn .c-btn__link {
    max-width: 40rem;
}

@media screen and (max-width: 768px) {
    .c-works-list--col2 {
        row-gap: 4rem;
    }

    .service-works__btn {
        margin-top: 4rem;
    }
}

/* ----------------------------------------------
   2 Column Layout
---------------------------------------------- */
/* Sidebar */

.layout-sidebar {
    margin-top: var(--section-margin);
}

.layout-sidebar__inner {
    display: flex;
    align-items: flex-start;
    gap: 8rem;
}

.layout-sidebar__nav-area {
    width: 26rem;
    flex-shrink: 0;
    position: sticky;
    top: 14rem;
}

.layout-sidebar__main {
    flex: 1;
    min-width: 0;
    max-width: 120rem;
    margin: 0 auto;
    width: 100%;
}

@media screen and (max-width: 1023px) {
    .layout-sidebar__inner {
        gap: 4rem;
    }

    .layout-sidebar__nav-area {
        width: 22rem;
    }
}

@media screen and (max-width: 768px) {
    .layout-sidebar {
        margin-top: 5rem;
    }

    .layout-sidebar__inner {
        flex-direction: column;
        gap: 5rem;
    }

    .layout-sidebar__nav-area {
        width: 100%;
        position: static;
    }
}

/* Sidebar Nav */

.c-sidebar-nav {
    background-color: var(--color-bg-secondary);
    border-radius: var(--border-radius-default);
    padding: 2.4rem;
}

.c-sidebar-nav__item + .c-sidebar-nav__item {
    margin-top: 1rem;
}

.c-sidebar-nav__link {
    display: block;
    font-size: 1.4rem;
    color: var(--color-text-gray);
    line-height: 1.4;
    transition: var(--transition-default);
}

@media (hover: hover) {
    .c-sidebar-nav__link:hover {
        color: var(--color-primary);
        font-weight: 500;
    }
}

.c-sidebar-nav__link.is-active {
    color: var(--color-primary);
    font-weight: 500;
}

@media screen and (max-width: 768px) {
    .c-sidebar-nav {
        padding: 3rem 2.4rem;
    }

    .c-sidebar-nav__link {
        color: var(--color-primary);
        font-weight: 500;
    }
}

/* Page Intro */

.c-page-intro__title {
    font-size: 2.8rem;
    line-height: var(--lh-ttl-default);
}

.c-page-intro__text {
    margin-top: 3rem;
}

.c-page-intro__text p + p {
    margin-top: 1.5em;
}

.c-page-intro__img {
    border-radius: var(--border-radius-default);
    overflow: hidden;
    margin-top: 5rem;
}

@media screen and (max-width: 768px) {
    .c-page-intro__title {
        font-size: 2.4rem;
    }

    .c-page-intro__text {
        margin-top: 2.4rem;
    }

    .c-page-intro__img {
        margin-top: 4rem;
    }
}

.layout-sidebar__contents {
    margin-top: 5rem;
}

/* Page Section */

.c-page-section {
    scroll-margin-top: 14rem;
}

.c-page-section--line {
    border-top: var(--border-default);
    padding-top: 8rem;
    margin-top: 8rem;
}

@media screen and (max-width: 768px) {
    .c-page-section--line {
        padding-top: 5rem;
        margin-top: 5rem;
    }
}

/* ==============================================
Component: Page Hero (汎用ヒーローセクション)
============================================== */
.c-page-hero {
    padding-top: 15rem;
}

.c-page-hero__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 6rem;
}

.c-page-hero__inner:has(.c-page-hero__figure) {
    align-items: center;
}

.c-page-hero__inner--bordered {
    padding-bottom: 8rem;
    border-bottom: var(--border-default);
}

/* --- 左側・テキストエリア --- */
.c-page-hero__body {
    flex: 1;
}

.c-page-hero__content {
    flex: 0.8;
}

/* 1. 標準タイトル（例：オリジナルCMSサイト制作） */
.c-page-hero__title-area {
    margin-top: 7rem;
}
.c-page-hero__label {
    display: block;
    font-size: 1.5rem;
    font-family: var(--font-en-secondary);
    color: var(--color-text-gray);
    text-transform: uppercase;
}
.c-page-hero__ttl {
    font-size: 4.2rem;
    line-height: var(--lh-ttl-default);
    margin-top: 5rem;
    font-weight: 500;
    color: var(--color-primary);
}

/* 2. 大きな英語メインのタイトル（例：Guide / はじめての方へ） */
.c-page-hero__ttl-group {
    margin-top: 8rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}
.c-page-hero__ttl-en {
    font-family: var(--font-en-primary);
    font-size: 7rem;
    line-height: 1;
    font-weight: 400;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: var(--ls-heading-en);
}
.c-page-hero__ttl-ja {
    font-size: 1.3rem;
    color: var(--color-text-gray);
}

.c-page-hero__text {
    margin-top: 2.4rem;
    font-size: 1.3rem;
    line-height: var(--lh-default);
}

/* --- ボタンエリア --- */
.c-page-hero__btns {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    width: 32rem;
    flex-shrink: 0;
}

/* ★横並びボタン（パターンB）用の拡張クラス */
.c-page-hero__btns--row {
    flex-direction: row;
    width: 100%;
    margin-top: 7rem;
}
.c-page-hero__btns--row .c-btn {
    flex: 1;
    max-width: 28rem;
}

/* --- 画像エリア --- */
/* 1. パターンB用のコンテナ内画像 */
.c-page-hero__figure {
    flex: 0.6;
    max-width: 50rem;
    border-radius: var(--border-radius-default);
    overflow: hidden;
}

.c-page-hero__figure img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 2. パターンC用のフルワイド画像（拡張クラス） */
.c-page-hero__figure--full {
    flex: none;
    max-width: none;
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    margin-top: 10rem;
    border-radius: 0;
}
.c-page-hero__figure--full img {
    height: 70vh;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .c-page-hero__inner {
        flex-direction: column;
        align-items: stretch !important;
        gap: 5rem;
    }
    .c-page-hero__figure {
        max-width: 100%;
        width: 100%;
    }

    .c-page-hero__figure--full {
        max-width: none;
        width: 100vw;
    }

    .c-page-hero__btns {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .c-page-hero {
        padding-top: 8rem;
    }

    .c-page-hero__inner--bordered {
        padding-bottom: 6rem;
    }
    .c-page-hero__title-area {
        margin-top: 4rem;
    }
    .c-page-hero__ttl-group {
        margin-top: 4rem;
    }
    .c-page-hero__ttl {
        font-size: 2.4rem;
        margin-top: 3.2rem;
    }
    .c-page-hero__ttl-en {
        font-size: 4.6rem;
    }
    .c-page-hero__ttl-ja {
        font-size: 1rem;
    }
    .c-page-hero__text {
        margin-top: 2rem;
        font-size: 1.3rem;
    }

    .c-page-hero__figure--full {
        margin-top: 5rem;
    }
    .c-page-hero__figure--full img {
        height: 50vh;
    }

    .c-page-hero__label {
        font-size: 1.3rem;
    }
}

/* ==============================================
   Component: News Block (お知らせ 2カラムレイアウト)
============================================== */
.c-news-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6rem;
    margin-top: 8rem;
}

.c-news-block__aside {
    flex: 1;
}

.c-news-block__main {
    flex: 3;
}

@media screen and (max-width: 768px) {
    .c-news-block {
        flex-direction: column;
        gap: 3rem;
        margin-top: 4rem;
    }
    .c-news-block__aside,
    .c-news-block__main {
        flex: none;
        width: 100%;
    }
}

/* ==============================================
   Component: News Category (お知らせ カテゴリー)
============================================== */
.c-news-category {
    list-style: none;
}

.c-news-category__item {
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: var(--transition-default);
    line-height: 1.4;
}

.c-news-category__item::before {
    content: "";
    width: 4px;
    height: 4px;
    background-color: var(--color-text-gray);
    border-radius: 50%;
    margin-right: 1rem;
    opacity: 0;
    transition: var(--transition-default);
}

.c-news-category__item + .c-news-category__item {
    margin-top: 1rem;
}

.c-news-category__item.is-active,
.c-news-category__item:hover {
    color: var(--color-text-gray);
}

.c-news-category__item:hover::before,
.c-news-category__item.is-active::before {
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .c-news-category {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 1.6rem;
        align-items: baseline;
    }
    .c-news-category__item + .c-news-category__item {
        margin-top: 0;
    }
    .c-news-category__item {
        font-size: 1.2rem;
    }
    .c-news-category__item::before {
        opacity: 1;
        background-color: var(--color-primary);
    }
    .c-news-category__item.is-active::before {
        background-color: var(--color-text-gray);
    }
}

/* ==============================================
   Component: News List (お知らせ リスト本体)
============================================== */
.c-news-list__item {
    border-top: var(--border-default);
}

.c-news-list__item:last-child {
    border-bottom: var(--border-default);
}

.c-news-list__link {
    padding: 3.2rem 0;
    display: block;
    text-decoration: none;
    color: inherit;
}

.c-news-list__inner {
    display: flex;
    align-items: center;
    gap: 4rem;
    transition: var(--transition-default);
}

@media (hover: hover) {
    .c-news-list__link:hover .c-news-list__inner {
        opacity: 0.8;
        transform: translateX(1rem);
    }
}

.c-news-list__date {
    font-family: var(--font-en-secondary);
    font-size: 1.6rem;
    color: var(--color-text-gray);
    letter-spacing: -0.06em;
}

.c-news-list__label {
    font-size: 1.2rem;
    padding: 0.4rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1.4;
    font-weight: 500;
}

.c-news-list__title {
    font-size: 1.6rem;
    flex: 1;
    line-height: 1.6;
}

@media screen and (max-width: 768px) {
    .c-news-list__inner {
        flex-wrap: wrap;
        gap: 1.6rem 2rem;
    }
    .c-news-list__link {
        padding: 2rem 0;
    }
    .c-news-list__date {
        font-size: 1.2rem;
    }
    .c-news-list__label {
        font-size: 1.1rem;
        padding: 0.3rem 0.8rem;
    }
    .c-news-list__title {
        width: 100%;
        flex: none;
        font-size: 1.5rem;
    }
}

/* ==============================================
   Component: Blog Card & List (ブログ記事一覧)
============================================== */
/* --- 3カラム一覧レイアウト用（TOP以外で使用） --- */
.c-blog-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6rem 2rem;
}

/* --- カード本体の装飾 --- */
.c-blog-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.c-blog-card__img {
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius-default);
    overflow: hidden;
    transform: translateZ(0);
}

.c-blog-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    will-change: transform;
}

@media (hover: hover) {
    .c-blog-card__link:hover .c-blog-card__img img {
        transform: scale(1.04);
    }
}

.c-blog-card__body {
    margin-top: 2.4rem;
}

.c-blog-card__title {
    font-size: 1.8rem;
    line-height: var(--lh-ttl-default);
    font-weight: 500;
}

.c-blog-card__meta {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 1.2rem;
    color: var(--color-text-gray);
    line-height: 1;
}

.c-blog-card__date {
    font-family: var(--font-en-secondary);
    letter-spacing: -0.06em;
    padding-right: 1rem;
    margin-right: 1rem;
    border-right: var(--border-default);
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .c-blog-list {
        grid-template-columns: repeat(2, 1fr); /* タブレットは2カラム */
        gap: 5rem 3rem;
    }
}

@media screen and (max-width: 768px) {
    .c-blog-list {
        grid-template-columns: 1fr; /* スマホは1カラム */
        gap: 4rem;
    }

    .c-blog-card__body {
        margin-top: 1.8rem;
    }

    .c-blog-card__title {
        font-size: 1.6rem;
    }
}

/* ----------------------------------------------
   Service Components
---------------------------------------------- */
/* Component: Box (汎用枠付きボックス) */

.c-box {
    border: var(--border-default);
    border-radius: var(--border-radius-default);
    padding: 4rem;
}

.c-box__title {
    font-size: 2.8rem;
    line-height: 1.4;
}

@media screen and (max-width: 768px) {
    .c-box {
        padding: 3.6rem 2.6rem;
    }

    .c-box__title {
        font-size: 2.4rem;
    }
}

/* Component: Check List (汎用チェックリスト) */

.c-check-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 2rem;
}

.c-check-list__item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
}

.c-check-list__icon {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    margin-top: 0.6rem;
}

.c-check-list__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.c-check-list__text {
    font-size: 1.6rem;
    line-height: 1.6;
    font-weight: 500;
}

/* Component: Section Title (汎用セクションタイトル) */
.c-section-title {
    font-size: 3.6rem;
    line-height: var(--lh-ttl-default);
    margin-bottom: 6rem;
}

@media screen and (max-width: 768px) {
    .c-section-title {
        font-size: 2.4rem;
        margin-bottom: 4rem;
    }
}

.c-page-section + .c-page-section {
    border-top: var(--border-default);
    padding-top: 8rem;
    margin-top: 8rem;
}

/* Component: Feature List (画像＋テキストの汎用リスト) */

.c-feature-list {
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

.c-feature-list__item {
    display: flex;
    align-items: flex-start;
    gap: 7rem;
}

.c-feature-list__figure {
    flex: 0 0 45%;
}

.c-feature-list__img {
    border-radius: var(--border-radius-default);
}

.c-feature-list__body {
    flex: 1;
}

.c-feature-list__number {
    display: block;
    font-family: var(--font-en-secondary);
    font-size: 1.4rem;
    color: var(--color-text-gray);
}

.c-feature-list__title {
    font-size: 2.4rem;
    line-height: 1.5;
    margin-top: 4rem;
}

.c-feature-list__text {
    font-size: 1.5rem;
    line-height: var(--lh-default);
    margin-top: 2.4rem;
}

@media screen and (max-width: 1023px) {
    .c-feature-list {
        gap: 5rem;
    }

    .c-feature-list__item {
        gap: 4rem;
    }

    .c-feature-list__figure {
        flex: 0 0 50%;
    }
}

@media screen and (max-width: 768px) {
    .c-page-section + .c-page-section {
        padding-top: 5rem;
        margin-top: 5rem;
    }

    .c-feature-list {
        gap: 5rem;
    }

    .c-feature-list__item {
        flex-direction: column;
        gap: 1.2rem;
    }

    .c-feature-list__figure {
        flex: none;
        width: 100%;
    }

    .c-feature-list__body {
        padding-top: 0;
    }

    .c-feature-list__title {
        font-size: 2rem;
        margin-top: 3rem;
    }

    .c-feature-list__text {
        margin-top: 2rem;
    }
}

/* ==============================================
   Component: Point Grid (特徴・ポイントの汎用グリッドカード)
============================================== */
.c-point-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.c-point-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius-default);
    padding: 4rem;
    display: flex;
    flex-direction: column;
}

.c-point-card__num {
    font-family: var(--font-en-secondary);
    font-size: 1.4rem;
    color: var(--color-text-gray);
    display: block;
    line-height: 1;
}

.c-point-card__title {
    font-size: 2.4rem;
    line-height: var(--lh-ttl-default);
    margin-top: 2.4rem;
}

.c-point-card__text {
    margin-top: 2.4rem;
    font-size: 1.5rem;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .c-point-grid {
        gap: 2.4rem;
    }

    .c-point-card {
        padding: 4rem 3rem;
    }
}

@media screen and (max-width: 768px) {
    .c-point-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .c-point-card {
        padding: 3.6rem 2.4rem;
    }

    .c-point-card__num {
        font-size: 1.3rem;
    }

    .c-point-card__title {
        font-size: 2rem;
        margin-top: 2rem;
    }

    .c-point-card__text {
        margin-top: 2rem;
    }
}

/* ==============================================
   Component: Price List (汎用料金リスト)
============================================== */
.c-price-list {
    margin-top: 6rem;
    border-bottom: 1px dotted var(--color-border);
}

.c-price-list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.8rem 0;
    border-top: 1px dotted var(--color-border);
    gap: 2rem;
}

.c-price-list__title {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: var(--lh-ttl-default);
}

.c-price-list__price {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .c-price-list {
        margin-top: 4rem;
    }

    .c-price-list__item {
        padding: 2.4rem 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .c-price-list__title {
        font-size: 1.6rem;
    }

    .c-price-list__price {
        align-self: flex-end;
    }
}

/* ==============================================
   Component: Note List (汎用注釈リスト / 米印ぶら下がり)
============================================== */
.c-note-list {
    margin-top: 2.4rem;
    list-style: none;
}

.c-note-list li {
    font-size: 1.3rem;
    color: var(--color-primary);
    padding-left: 1.2em;
    text-indent: -1.2em;
}

.c-note-list li:last-child {
    margin-bottom: 0;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .c-note-list {
        margin-top: 2rem;
    }

    .c-note-list li {
        font-size: 1.2rem;
    }
}

/* Component: Service Grid (サービス一覧グリッド) */
.c-service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.c-service-grid__item {
    border: var(--border-default);
    border-radius: var(--border-radius-default);
    height: 15rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: var(--transition-default);
}

.c-service-grid__title {
    font-size: 1.8rem;
    line-height: var(--lh-ttl-default);
}

.c-service-grid__en {
    display: block;
    margin-top: 1.2rem;
    font-family: var(--font-en-secondary);
    font-size: 1.2rem;
    color: var(--color-text-gray);
    line-height: 1;
}

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

@media screen and (max-width: 768px) {
    .c-service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }

    .c-service-grid__item {
        height: 10rem;
    }

    .c-service-grid__title {
        font-size: 1.5rem;
    }

    .c-service-grid__en {
        margin-top: 0.8rem;
        font-size: 1rem;
    }
}

/* ----------------------------------------------
   CTA Banner
---------------------------------------------- */
.c-cta-banner {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: var(--grad-primary);
    border-radius: var(--border-radius-default);
    padding: 1.2rem;
    color: var(--color-white);
    margin-top: 8rem;
}

.c-cta-banner__figure {
    flex: 0 0 32%;
}

.c-cta-banner__img {
    width: 100%;
    border-radius: 3px;
}

.c-cta-banner__body {
    flex: 1;
    padding: 4rem;
}

.c-cta-banner__title {
    font-size: 2.8rem;
    line-height: var(--lh-ttl-default);
}

.c-cta-banner__desc {
    margin-top: 2rem;
    font-size: var(--fs-body);
    line-height: var(--lh-default);
}

.c-cta-banner__btns {
    display: flex;
    gap: 1rem;
    margin-top: 3.2rem;
}

.c-cta-banner__btn {
    flex: 1;
}

/* Responsive */

@media screen and (max-width: 1120px) {
    .c-cta-banner__figure {
        flex: 0 0 30%;
    }

    .c-cta-banner__body {
        padding: 2rem;
    }
}

@media screen and (max-width: 1023px) {
    .c-cta-banner {
        flex-direction: column;
        gap: 4rem;
    }

    .c-cta-banner__figure {
        flex: none;
        width: 100%;
    }

    .c-cta-banner__body {
        width: 100%;
        padding: 0 2rem 4rem;
    }
}

@media screen and (max-width: 768px) {
    .c-cta-banner {
        margin-top: 6rem;
        gap: 3rem;
    }

    .c-cta-banner__body {
        padding: 0 1rem 4rem;
    }

    .c-cta-banner__title {
        font-size: 2.2rem;
    }

    .c-cta-banner__desc {
        margin-top: 1.6rem;
        font-size: 1.4rem;
    }

    .c-cta-banner__btns {
        flex-direction: column;
        margin-top: 3rem;
    }

    .c-cta-banner__btn a {
        width: 100%;
    }
}

/* ----------------------------------------------
   Service Category (汎用サービスカテゴリ)
---------------------------------------------- */
.c-service-category {
    margin-top: 8rem;
}

.c-service-category__ttl {
    position: relative;
    font-family: var(--font-en-primary);
    font-size: 2.8rem;
    padding-left: 5rem;
    letter-spacing: -0.05em;
}

.c-service-category__ttl::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 4rem;
    height: 1px;
    background-color: var(--color-primary);
}

.c-service-category__sub {
    margin-top: 2rem;
    font-size: 1.3rem;
    letter-spacing: 0;
    color: var(--color-text-gray);
}

/* Card List (Web Creation) */
.c-service-card-list {
    margin-top: 5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.c-service-card {
    background-color: var(--color-white);
    display: block;
    transition: box-shadow 0.4s ease, transform 0.4s ease;
    padding: 1.2rem;
    border-radius: var(--border-radius-default);
    position: relative;
    color: inherit;
}

@media (hover: hover) {
    .c-service-card:hover {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }
}

.c-service-card__img {
    border-radius: 3px;
    overflow: hidden;
    transform: translateZ(0);
}

.c-service-card__img img {
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    will-change: transform;
    width: 100%;
    display: block;
}

.c-service-card__body {
    padding: 3.6rem 1.2rem 5rem 1.2rem;
}

.c-service-card__label {
    display: block;
    font-size: 1.2rem;
    font-family: var(--font-en-secondary);
}

.c-service-card__ttl {
    margin-top: 1.5rem;
    font-size: 2.2rem;
    line-height: var(--lh-ttl-default);
}

.c-service-card__text {
    margin-top: 3.6rem;
    font-size: 1.3rem;
    color: var(--color-text-gray);
    line-height: 1.6;
}

.c-service-card__icon {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
}

@media (hover: hover) {
    .c-service-card:hover .c-service-card__img img {
        transform: scale(1.04);
    }
    .c-service-card:hover .link-icon-bg::before {
        opacity: 0;
    }
}

/* Panel List (Marketing & Branding) */
.c-service-panel-list {
    margin-top: 5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 4rem;
}

.c-service-panel {
    padding: 2.8rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: opacity 0.3s ease;
    border-bottom: var(--border-default);
    gap: 2rem;
    color: inherit;
}

.c-service-panel:nth-of-type(1),
.c-service-panel:nth-of-type(2) {
    border-top: var(--border-default);
}

@media (hover: hover) {
    .c-service-panel:hover {
        opacity: 0.85;
    }
    .c-service-panel:hover .c-service-panel__body {
        transform: translateX(1rem);
    }
    .c-service-panel:hover .link-icon-bg::before {
        opacity: 0;
    }
}

.c-service-panel__body {
    flex: 1;
    transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    will-change: transform;
}

.c-service-panel__ttl {
    font-size: 2rem;
}

.c-service-panel__sub {
    margin-top: 0.8rem;
    font-size: 1.2rem;
    font-family: var(--font-en-secondary);
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

@media screen and (max-width: 768px) {
    .c-service-card-list {
        grid-template-columns: 1fr;
        margin-top: 4rem;
        gap: 1.6rem;
    }

    .c-service-panel-list {
        grid-template-columns: 1fr;
        margin-top: 4rem;
    }

    .c-service-category {
        margin-top: 4rem;
    }

    .c-service-category + .c-service-category {
        margin-top: 5rem;
    }

    .c-service-category__sub {
        margin-top: 1rem;
    }

    .c-service-card__body {
        padding: 3.2rem 1rem 5rem 1rem;
    }

    .c-service-card__label {
        font-size: 1.1rem;
    }

    .c-service-card__ttl {
        margin-top: 1.2rem;
        font-size: 2rem;
    }

    .c-service-card__text {
        margin-top: 2rem;
        font-size: 1.2rem;
    }

    .c-service-panel:nth-of-type(2) {
        border-top: none;
    }

    .c-service-panel {
        padding: 2rem 0;
    }

    .c-service-panel__ttl {
        font-size: 1.8rem;
    }

    .c-service-panel__sub {
        margin-top: 0.5rem;
        font-size: 1rem;
    }
}

/* ==============================================
Component: Nav Card List (ページ誘導ナビゲーションカード)
============================================== */
.c-nav-card-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6rem 2rem;
    margin-top: var(--section-margin);
}

.c-nav-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: var(--transition-default);
}

.c-nav-card__img {
    border-radius: var(--border-radius-default);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.c-nav-card__img img {
    transition: transform 0.4s ease;
    height: 100%;
}

@media (hover: hover) {
    .c-nav-card:hover .c-nav-card__img img {
        transform: scale(1.03);
    }
}

.c-nav-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: 3rem;
}

.c-nav-card__title {
    font-size: 2.4rem;
    line-height: var(--lh-ttl-default);
}

.c-nav-card__text {
    margin-top: 1.6rem;
    font-size: 1.4rem;
    color: var(--color-text-gray);
    line-height: var(--lh-default);
}

.c-nav-card__icon {
    margin-top: auto;
    padding-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .c-nav-card-list {
        gap: 6rem 3rem;
    }
}

@media screen and (max-width: 768px) {
    .c-nav-card-list {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .c-nav-card__title {
        font-size: 2rem;
    }

    .c-nav-card__text {
        margin-top: 1.2rem;
        font-size: 1.2rem;
    }
}

/* ==============================================
Component: Nav Card List (ページ誘導ナビゲーションカード) 拡張
============================================== */
.c-related-pages {
    background-color: var(--color-bg-secondary);
    margin-top: var(--section-margin);
    overflow: hidden;
}

.c-nav-card-list--col3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem 2.4rem;
    margin-top: 6rem;
}

.c-nav-card__body--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 2rem;
}

.c-nav-card__info {
    display: flex;
    flex-direction: column;
}

.c-nav-card__info .c-nav-card__title {
    font-size: 2rem;
}

.c-nav-card__en {
    margin-top: 1rem;
    font-family: var(--font-en-secondary);
    font-size: 1.2rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.05em;
}

.c-nav-card__body--horizontal .c-nav-card__icon {
    margin-top: 0;
    padding-top: 0;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .c-nav-card-list--col3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 5rem 3rem;
        margin-top: 5rem;
    }
}

@media screen and (max-width: 768px) {
    .c-nav-card-list--col3 {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}

/* ==============================================
Component: Flow Figure (フロー図解)
============================================== */
.c-flow-figure {
    margin-bottom: 6rem;
    text-align: center;
}

.c-flow-figure img {
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    .c-flow-figure {
        margin-bottom: 4rem;
    }
}

/* ==============================================
Component: Step List (ステップ手順リスト)
============================================== */
.c-step-list {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    list-style: none;
}

.c-step-list__title {
    background-color: var(--color-bg-secondary);
    font-size: 2rem;
    padding: 1.6rem;
    border-radius: var(--border-radius-default);
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
}

.c-step-list__num {
    flex-shrink: 0;
}

.c-step-list__label {
    flex: 1;
}

.c-step-list__text {
    margin-top: 2.4rem;
    font-size: var(--fs-body);
    line-height: var(--lh-default);
}

.c-step-list__img-wrap {
    margin-top: 5rem;
    border-radius: var(--border-radius-default);
    overflow: hidden;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .c-step-list {
        gap: 4rem;
    }

    .c-step-list__title {
        font-size: 1.6rem;
        padding: 1.2rem;
    }

    .c-step-list__text {
        font-size: 1.5rem;
    }

    .c-step-list__img-wrap {
        margin-top: 2.4rem;
    }
}

/* --- 補足・詳細ボックス --- */
.c-step-list__box {
    margin-top: 2.4rem;
    padding: 2.4rem;
    border: var(--border-default);
    border-radius: var(--border-radius-default);
    background-color: transparent;
}

.c-step-list__box-title {
    font-size: 1.8rem;
    line-height: var(--lh-ttl-default);
}

.c-step-list__box-list {
    margin-top: 1.6rem;
}

.c-step-list__box-item {
    position: relative;
    padding-left: 1.2em;
    font-size: 1.5rem;
    line-height: 1.4;
}

.c-step-list__box-item + .c-step-list__box-item {
    margin-top: 0.8rem;
}

.c-step-list__box-item::before {
    content: "";
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    top: 40%;
    left: 0;
    background-color: var(--color-primary);
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .c-step-list__box {
        margin-top: 2.4rem;
        padding: 2rem;
    }

    .c-step-list__box-list {
        margin-top: 1.2rem;
    }

    .c-step-list__box-title {
        font-size: 1.6rem;
    }

    .c-step-list__box-item {
        font-size: 1.4rem;
    }
}

/* ==============================================
Component: FAQ Accordion (よくある質問)
============================================== */
.c-faq-accordion {
    border-top: var(--border-default);
}

.c-faq__item {
    border-bottom: var(--border-default);
}

.c-faq__trigger {
    display: flex;
    align-items: baseline;
    position: relative;
    width: 100%;
    padding: 2.4rem 4rem 2.4rem 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: var(--transition-default);
    line-height: 1.6;
    color: var(--color-primary);
}

@media (hover: hover) {
    .c-faq__trigger:hover {
        opacity: 0.7;
    }
}

.c-faq__q-content {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5;
    flex: 1;
}

/* --- ＋・－アイコンの描画 --- */
.c-faq__icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.4rem;
    height: 1.4rem;
}

.c-faq__icon::before,
.c-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-primary);
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.c-faq__icon::after {
    transform: translateY(-50%) rotate(90deg);
}

.c-faq__item.is-open .c-faq__icon::after {
    transform: translateY(-50%) rotate(0deg);
}

.c-faq__a {
    display: none;
    overflow: hidden;
}

.c-faq__a-inner {
    padding-bottom: 4rem;
    padding-left: 0;
}

.c-faq__a-content p {
    font-size: 1.5rem;
    line-height: var(--lh-default);
}

.c-faq__trigger::before {
    content: "Q.";
    display: block;
    font-family: var(--font-en-primary);
    font-size: 2.2rem;
    color: var(--color-primary);
    margin-right: 1.6rem;
    line-height: 1;
    font-weight: 400;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .c-faq__trigger {
        padding: 2rem 3rem 2rem 0;
    }

    .c-faq__q-content {
        font-size: 1.6rem;
    }

    .c-faq__icon {
        width: 1.1rem;
        height: 1.1rem;
        right: 0;
    }

    .c-faq__a-inner {
        padding-bottom: 3rem;
    }

    .c-faq__trigger::before {
        font-size: 1.8rem;
        margin-right: 1.2rem;
    }
}

.service-faq__btn {
    margin-top: 6rem;
    display: flex;
    justify-content: flex-start;
}

.service-faq__btn .c-btn__link {
    max-width: 40rem;
}

@media screen and (max-width: 768px) {
    .service-faq__btn {
        margin-top: 4rem;
    }
}

/* ==============================================
Component: Definition List (汎用定義リスト・表組)
============================================== */
.c-def-list {
    border-top: var(--border-default);
    width: 100%;
}

/* dlタグの中にdivを挟むモダンな記述でFlexboxを有効にする */
.c-def-list__row {
    display: flex;
    padding: 3rem 0;
    border-bottom: var(--border-default);
}

.c-def-list__term {
    width: 24rem;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--color-primary);
    line-height: var(--lh-default);
    font-size: 1.5rem;
}

.c-def-list__desc {
    flex: 1;
    font-size: 1.5rem;
    line-height: 1.6;
}

.c-def-list__group + .c-def-list__group {
    margin-top: 2rem;
}

.c-def-list__group-ttl {
    display: block;
    font-weight: 500;
    margin-bottom: 0.4rem;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .c-def-list__term {
        width: 20rem;
    }
}

@media screen and (max-width: 768px) {
    .c-def-list__row {
        flex-direction: column;
        padding: 2.4rem 0;
        gap: 1rem;
    }

    .c-def-list__term {
        width: 100%;
        font-size: 1.4rem;
    }

    .c-def-list__group + .c-def-list__group {
        margin-top: 1.6rem;
    }
}

/* ==============================================
Component: Definition List (汎用定義リスト・表組) 拡張
============================================== */
/* --- 沿革用モディファイア（左側の幅を狭める） --- */
.c-def-list--history .c-def-list__term {
    width: 20rem;
}

@media screen and (max-width: 1023px) {
    .c-def-list--history .c-def-list__term {
        width: 16rem;
    }
}

@media screen and (max-width: 768px) {
    .c-def-list--history .c-def-list__term {
        width: 100%;
    }
}

/* ==============================================
Component: Member Card (人物紹介カード)
============================================== */
/* --- リストレイアウト（3カラムグリッド） --- */
.c-member-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8rem 2rem;
}

/* --- カード本体 --- */
.c-member-card {
    display: flex;
    flex-direction: column;
}

.c-member-card__img {
    border-radius: var(--border-radius-default);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.c-member-card__img img {
    height: 100%;
}

.c-member-card__body {
    margin-top: 2.4rem;
}

.c-member-card__position {
    display: block;
    font-size: 1.3rem;
    font-weight: 500;
}

.c-member-card__name {
    margin-top: 0.6rem;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: var(--lh-ttl-default);
}

.c-member-card__text {
    margin-top: 1.6rem;
    font-size: 1.4rem;
    line-height: 1.8;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .c-member-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 6rem 3rem;
    }
}

@media screen and (max-width: 768px) {
    .c-member-list {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .c-member-card__position {
        font-size: 1.2rem;
    }

    .c-member-card__text {
        font-size: 1.3rem;
    }
}

/* ==============================================
Component: Media Card (汎用：横型メディアカード)
============================================== */
.c-media-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6rem;
    padding: 6rem 0;
    text-decoration: none;
    color: inherit;
}

.c-media-card__img {
    width: 18%;
    border-radius: var(--border-radius-default);
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.c-media-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* --- 右側：テキストエリア --- */
.c-media-card__body {
    flex: 1;
    max-width: 80rem;
    display: flex;
    flex-direction: column;
    transition: var(--transition-default);
}

.c-media-card__title {
    font-size: 2.4rem;
    line-height: var(--lh-ttl-default);
}

.c-media-card__text {
    margin-top: 2rem;
    font-size: 1.5rem;
}

.c-media-card__action {
    margin-top: 3.2rem;
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    align-self: flex-start;
    transition: opacity 0.3s ease;
}

.c-media-card__action-text {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-primary);
}

.c-media-card__action-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.8rem;
    height: 2.8rem;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 2px;
    transition: transform 0.3s ease;
}

.c-media-card__action-icon svg {
    width: 1.2rem;
    height: auto;
}

/* --- ホバーアニメーション（カード全体が対象） --- */
@media (hover: hover) {
    .c-media-card:hover .c-media-card__img img {
        transform: scale(1.04);
    }

    .c-media-card:hover .c-media-card__body {
        opacity: 0.7;
    }
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .c-media-card {
        gap: 4rem;
        padding: 5rem 0;
    }
    .c-media-card__img {
        width: 18%;
    }
    .c-media-card__title {
        font-size: 2rem;
    }
}

@media screen and (max-width: 768px) {
    .c-media-card {
        flex-direction: column;
        align-items: stretch;
        gap: 2.8em;
        padding: 4rem 0;
    }
    .c-media-card__img {
        flex: none;
        width: 70%;
        align-self: flex-end;
    }
    .c-media-card__title {
        font-size: 1.8rem;
    }
    .c-media-card__text {
        margin-top: 1.2rem;
        line-height: 1.8;
    }
    .c-media-card__action {
        margin-top: 2.4rem;
        align-self: flex-end;
    }
}

/* ==============================================
Component: Pagination (汎用ページネーション)
============================================== */
.c-pagination {
    margin-top: 8rem;
    display: flex;
    justify-content: center;
}

/* WPが出力する ul.page-numbers のコンテナ */
.c-pagination ul.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-pagination li .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.6rem;
    height: 5rem;
    font-family: var(--font-en-secondary);
    font-size: 1.5rem;
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-default);
    transition: var(--transition-default);
    text-decoration: none;
}

/* リンク可能（aタグ）な数字のホバーアニメーション */
@media (hover: hover) {
    /* .prev と .next 以外のページ番号ホバー時 */
    .c-pagination li a.page-numbers:not(.prev):not(.next):hover {
        background-color: var(--color-primary);
        color: var(--color-white);
        border-color: var(--color-primary);
    }
}

/* 現在のページ (WPが付与する .current クラス) */
.c-pagination li .page-numbers.current {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* 省略記号 (...) (WPが付与する .dots クラス) */
.c-pagination li .page-numbers.dots {
    border: none;
    background-color: transparent;
    width: auto;
    padding: 0 0.4rem;
}

/* PREV / NEXT ボタン */
.c-pagination li .page-numbers.prev,
.c-pagination li .page-numbers.next {
    border: none;
    background-color: transparent;
    width: auto;
    padding: 0 1.2rem;
    font-size: 1.5rem;
}

@media (hover: hover) {
    .c-pagination li a.page-numbers.prev:hover,
    .c-pagination li a.page-numbers.next:hover {
        background-color: transparent;
        color: var(--color-primary);
        opacity: 0.6;
    }
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .c-pagination {
        margin-top: 5rem;
    }

    .c-pagination ul.page-numbers {
        gap: 0.5rem;
    }

    .c-pagination li .page-numbers {
        width: 3.4rem;
        height: 3.8rem;
        font-size: 1.4rem;
    }

    .c-pagination li .page-numbers.prev,
    .c-pagination li .page-numbers.next {
        padding: 0 1.8rem;
        font-size: 1.3rem;
    }
}

/* ==============================================
   Component: Entry Body (お知らせ/ブログ本文用リッチテキスト)
============================================== */
.c-entry-body h1 {
    font-size: 2.8rem;
    line-height: var(--lh-ttl-default);
    margin-top: 6rem;
    margin-bottom: 2.4rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.8em;
}

.c-entry-body h1:first-child {
    margin-top: 0;
}

.c-entry-body h2 {
    font-size: 2.6rem;
    line-height: var(--lh-ttl-default);
    padding: 0.5rem 0 0.5rem 1.6rem;
    border-left: 4px solid var(--color-primary);
    margin-top: 6rem;
    margin-bottom: 2.4rem;
}

.c-entry-body h3 {
    font-size: 2.2rem;
    line-height: var(--lh-ttl-default);
    background-color: var(--color-bg-secondary);
    padding: 1rem 1.6rem;
    border-radius: var(--border-radius-default);
    margin-top: 4rem;
    margin-bottom: 2.4rem;
}

.c-entry-body h4 {
    font-size: 2rem;
    line-height: var(--lh-ttl-default);
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--color-border);
    margin-top: 3rem;
    margin-bottom: 2.4rem;
}

.c-entry-body p {
    font-size: var(--fs-body);
    line-height: 2;
    margin-bottom: 1.6rem;
}

.c-entry-body p:last-child {
    margin-bottom: 0;
}

.c-entry-body a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--transition-default);
}

.c-entry-body img {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

@media (hover: hover) {
    .c-entry-body a:hover {
        opacity: 0.7;
    }
}

/* --- 本文内のリスト（箇条書き） --- */
.c-entry-body ul,
.c-entry-body ol {
    margin-top: 2.4rem;
    margin-bottom: 2.4rem;
    padding-left: 2em;
}

.c-entry-body ul {
    list-style-type: disc;
}

.c-entry-body ol {
    list-style-type: decimal;
}

.c-entry-body li {
    font-size: var(--fs-body);
    line-height: 1.8;
    margin-bottom: 0.5em;
}

.c-entry-body li:last-child {
    margin-bottom: 0;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .c-entry-body h2 {
        font-size: 2rem;
        margin-top: 4rem;
        margin-bottom: 2rem;
        padding: 0.5rem 0 0.5rem 1.2rem;
    }
    .c-entry-body h3 {
        font-size: 1.8rem;
        margin-top: 3rem;
        margin-bottom: 2rem;
        padding-left: 1.2rem;
    }
    .c-entry-body h4 {
        font-size: 1.6rem;
        margin-top: 3rem;
        margin-bottom: 2rem;
    }
    .c-entry-body h5 {
        font-size: 1.5rem;
        margin-top: 3rem;
        margin-bottom: 1.6rem;
    }
    .c-entry-body p {
        line-height: 1.8;
        margin-bottom: 1rem;
    }

    .c-entry-body img {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    .c-entry-body ul,
    .c-entry-body ol {
        margin-top: 2rem;
        margin-bottom: 2rem;
        padding-left: 1.5em;
    }
}

/* ==============================================
   Component: TOC (目次)
============================================== */
.c-toc {
    background-color: var(--color-bg-secondary);
    border-radius: var(--border-radius-default);
    padding: 4.2rem;
    margin: 4rem 0;
}

.c-toc__title {
    font-size: 1.5rem;
    color: var(--color-text-gray);
    font-weight: 500;
    margin-bottom: 2rem;
}

.c-entry-body .c-toc__list,
.c-toc__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.c-entry-body .c-toc__list li,
.c-toc__list li {
    position: relative;
    padding-left: 1.2em;
    margin: 0;
    line-height: 1.6;
}

.c-toc__list li::before {
    content: "";
    position: absolute;
    top: 0.8em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-primary);
    transform: translateY(-50%);
}

.c-toc__list a {
    font-size: 1.5rem;
    color: inherit;
    text-decoration: none;
    transition: var(--transition-default);
}

@media (hover: hover) {
    .c-toc__list a:hover {
        color: var(--color-primary);
        opacity: 0.7;
    }
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .c-toc {
        padding: 3rem;
        margin: 3.2rem 0;
    }

    .c-toc__title {
        margin-bottom: 1.6rem;
    }

    .c-entry-body .c-toc__list,
    .c-toc__list {
        gap: 0.8rem;
        margin: 0;
        padding: 0;
    }
}

/* ==============================================
   Component: Sidebar Widgets (サイドバーパーツ)
============================================== */
.c-widget__title {
    font-family: var(--font-en-primary);
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 2rem;
}

/* カテゴリリスト */
.c-widget-category {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.c-widget-category li {
    border-bottom: 1px solid var(--color-border);
}

.c-widget-category li:first-child {
    border-top: 1px solid var(--color-border);
}

.c-widget-category a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.6rem 0.8rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: inherit;
    text-decoration: none;
    transition: var(--transition-default);
}

.c-widget-category a svg {
    color: var(--color-text-gray);
    transition: var(--transition-default);
}

@media (hover: hover) {
    .c-widget-category a:hover {
        color: var(--color-primary);
        background-color: rgba(0, 0, 0, 0.02);
    }
    .c-widget-category a:hover svg {
        transform: translateX(3px);
        color: var(--color-primary);
    }
}

/* ==============================================
   Component: CTA Box (テキスト中央揃えバナー)
============================================== */
.c-cta-box {
    background: var(--grad-primary);
    border-radius: var(--border-radius-default);
    padding: 4.6rem;
    color: var(--color-white);
    text-align: center;
    margin-top: 7rem;
}

.c-cta-box__title {
    font-size: 2.8rem;
    line-height: var(--lh-ttl-default);
}

.c-cta-box__text {
    margin-top: 2rem;
    font-size: 1.4rem;
    line-height: 1.6;
}

.c-cta-box__btns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    margin-top: 3rem;
}

.c-cta-box__btn {
    flex: 1;
    max-width: 32rem;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .c-cta-box {
        padding: 4rem 3rem;
        margin-top: 5rem;
    }

    .c-cta-box__title {
        font-size: 2.2rem;
    }

    .c-cta-box__text {
        font-size: 1.4rem;
        margin-top: 1.6rem;
    }

    .c-cta-box__btns {
        flex-direction: column;
        gap: 1rem;
        margin-top: 3rem;
    }

    .c-cta-box__btn {
        max-width: 100%;
        width: 100%;
    }

    .c-cta-box__btn .c-btn__link {
        width: 100%;
    }
}

/* ==============================================
   Component: Author Box (執筆者プロフィール枠)
============================================== */
.c-author-box {
    margin-top: 7rem;
    padding: 3rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-default);
}

.c-author-box__title {
    font-size: 1.4rem;
    font-weight: 500;
}

.c-author-box__profile {
    margin-top: 1.6rem;
    display: flex;
    align-items: center;
    gap: 1.8rem;
}

.c-author-box__img {
    width: 6rem;
    height: 6rem;
    border-radius: var(--border-radius-default);
    flex-shrink: 0;
    overflow: hidden;
}

.c-author-box__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.c-author-box__info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.c-author-box__position {
    font-size: 1.1rem;
    color: var(--color-text-gray);
    font-weight: 500;
}

.c-author-box__name {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.4;
}

.c-author-box__text {
    font-size: 1.3rem;
    line-height: var(--lh-default);
    margin-top: 1.6rem;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .c-author-box {
        margin-top: 5rem;
        padding: 2.4rem;
    }

    .c-author-box__title {
        font-size: 1.6rem;
    }

    .c-author-box__profile {
        gap: 1.6rem;
    }

    .c-author-box__img {
        width: 8rem;
        height: 8rem;
    }

    .c-author-box__info {
        gap: 0.6rem;
    }

    .c-author-box__position {
        font-size: 1.2rem;
    }

    .c-author-box__name {
        font-size: 2rem;
    }

    .c-author-box__text {
        font-size: 1.4rem;
        line-height: 1.8;
    }
}

/* ==============================================
   Component: Sidebar Banner (サイドバー用バナー)
============================================== */

.c-sidebar-banner {
    display: block;
    background: var(--grad-primary);
    border-radius: var(--border-radius-default);
    padding: 2rem 2rem 3rem 2rem;
    color: var(--color-white);
    text-decoration: none;
    transition: var(--transition-default);
}

.c-sidebar-banner__img {
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
}

.c-sidebar-banner__img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.c-sidebar-banner__body {
    margin-top: 2.4rem;
    text-align: center;
}

.c-sidebar-banner__title {
    font-size: 2.2rem;
    line-height: var(--lh-ttl-default);
}

.c-sidebar-banner__text {
    margin-top: 0.8rem;
    font-size: 1.2rem;
    line-height: 1.6;
}

.c-sidebar-banner__btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.6rem;
    margin-top: 2.4rem;
    padding: 1.6rem 2rem;
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--color-white);
    border-radius: var(--border-radius-default);
    transition: var(--transition-default);
}

.c-sidebar-banner__btn-label {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.c-sidebar-banner__btn-ja {
    font-family: var(--font-ja);
    font-size: 1.4rem;
    font-weight: 500;
}

.c-sidebar-banner__btn-en {
    font-family: var(--font-en-secondary);
    font-size: 1.1rem;
    text-transform: uppercase;
}

/* --- ホバー連動アニメーション --- */
@media (hover: hover) {
    .c-sidebar-banner:hover .c-sidebar-banner__img img {
        transform: scale(1.05);
    }

    .c-sidebar-banner:hover .c-sidebar-banner__btn {
        background-color: var(--color-primary);
        color: var(--color-white);
    }
}

/* ==============================================
   Component: Sidebar Card (サイドバー用 カードバナー)
============================================== */

.c-sidebar-card {
    display: block;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-default);
    padding: 2rem 2rem 3rem 2rem;
    text-decoration: none;
    color: inherit;
    transition: var(--transition-default);
    position: relative;
}

.c-sidebar-card__img {
    border-radius: 3px;
    overflow: hidden;
}

.c-sidebar-card__img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.c-sidebar-card__body {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 2rem;
    gap: 2.4rem;
}

.c-sidebar-card__text-area {
    flex: 1;
}

.c-sidebar-card__en {
    display: block;
    font-family: var(--font-en-primary);
    font-size: 1.2rem;
}

.c-sidebar-card__ja {
    margin-top: 0.4rem;
    font-size: 2rem;
    line-height: var(--lh-ttl-default);
}

.c-sidebar-card__icon {
    flex-shrink: 0;
    position: absolute;
    bottom: 1.6rem;
    right: 1.6rem;
}

@media (hover: hover) {
    .c-sidebar-card:hover .c-sidebar-card__img img {
        transform: scale(1.05);
    }

    .c-sidebar-card:hover .link-icon-bg::before {
        opacity: 0;
    }
}

/* ==============================================
   Component: Download Card (資料ダウンロード専用カード)
============================================== */
.c-download-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6rem 2rem;
    margin-top: 6rem;
}

.c-download-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: var(--border-radius-default);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: var(--transition-default);
    height: 100%;
    padding: 1.6rem 1.6rem 4rem 1.6rem;
    position: relative;
}

/* --- ホバーアニメーション --- */
@media (hover: hover) {
    .c-download-card:hover {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    }

    .c-download-card:hover .c-download-card__img img {
        transform: scale(1.05);
    }
}

.c-download-card__img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 3px;
}

.c-download-card__img img {
    height: 100%;
    display: block;
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.c-download-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 3rem 1rem;
}

.c-download-card__title {
    font-size: 2.2rem;
    line-height: var(--lh-ttl-default);
}

.c-download-card__text {
    margin-top: 1.6rem;
    font-size: 1.4rem;
    line-height: 1.8;
}

.c-card__icon {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .c-download-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 5rem 2.4rem;
    }
}

@media screen and (max-width: 768px) {
    .c-download-list {
        grid-template-columns: 1fr;
        margin-top: 4rem;
        gap: 2rem;
    }

    .c-download-card__body {
        padding: 2.4rem 0.5rem;
    }

    .c-download-card__title {
        font-size: 2rem;
    }
}

/* ==============================================
   Page: Top (トップページ)
============================================== */
/* ----------------------------------------------
   Top MV
---------------------------------------------- */
.top-mv {
    height: 100svh;
    min-height: 100svh;
    position: relative;
    padding-top: 14rem;
    padding-bottom: 8rem;
    overflow: hidden;
}

/* Background Elements */
.top-mv__bg {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: -1;
    overflow: hidden;
}

.top-mv__mesh {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* Inner Content */
.top-mv__inner {
    position: relative;
    z-index: 2;
}

/* Main Copy */
.top-mv__copy {
    display: flex;
    gap: 2rem;
    align-items: end;
}

.top-mv__copy-main {
    flex: 3;
}

.top-mv__copy-sub {
    flex: 1;
}

.top-mv__copy-main p {
    color: var(--color-white);
    font-family: var(--font-en-primary);
    text-transform: uppercase;
    font-size: 11rem;
    letter-spacing: -0.05em;
    line-height: 0.9;
}

.top-mv__copy-main p:first-child {
    opacity: 0.2;
    mix-blend-mode: soft-light;
}

.top-mv__copy-main p:last-child {
    margin-left: 0.8em;
}

.top-mv__copy-sub p {
    color: var(--color-white);
    font-family: var(--font-en-secondary);
    font-size: 1rem;
    line-height: 1.4;
}

/* Body Content (Heading & Buttons) */
.top-mv__body {
    width: 30%;
    margin-top: 13rem;
    color: var(--color-white);
}

.top-mv__heading h2 {
    font-size: 2.8rem;
}

.top-mv__heading p {
    font-size: 1.5rem;
    line-height: var(--lh-ttl-default);
    margin-top: 2rem;
}

.top-mv__btn-list {
    margin-top: 4rem;
}

.top-mv__btn-item + .top-mv__btn-item {
    margin-top: 1rem;
}

/* Video Elements */
.top-mv__video-wrap {
    position: absolute;
    bottom: 8rem;
    right: 3vw;
    width: 30%;
    aspect-ratio: 3 / 2;
    z-index: 3;
    overflow: hidden;
    border-radius: var(--border-radius-default);
    will-change: width, height, bottom, right, border-radius;
}

.top-mv__video-inner {
    height: 100%;
    width: 100%;
}

.top-mv__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: auto !important;
}

@media screen and (min-width: 1024px) {
    .top-mv__sp-video {
        display: none;
    }
}

@media screen and (max-width: 1023px) {
    .top-mv {
        padding-top: 10rem;
        padding-bottom: 6rem;
        height: 100%;
    }

    .top-mv__copy {
        flex-direction: column;
        align-items: flex-start;
    }

    .top-mv__copy-main p {
        font-size: 5rem;
    }

    .top-mv__copy-main p:last-child {
        margin-left: 0;
    }

    .top-mv__body {
        width: 100%;
        margin-top: 3.2rem;
    }

    .top-mv__video-wrap.js-movie-container {
        display: none;
    }

    .top-mv__sp-video video {
        border-radius: var(--border-radius-default);
    }

    .top-mv__sp-video {
        margin-top: 5rem;
    }

    .top-mv__heading h2 {
        font-size: 2.2rem;
    }

    .top-mv__heading p {
        font-size: 1.3rem;
        margin-top: 1rem;
    }

    .top-mv__btn-list {
        margin-top: 3.2rem;
    }

    .mv-scroll-spacer {
        display: none;
    }

    .c-btn.top-mv__btn a {
        width: 100%;
    }
}

/* ----------------------------------------------
   Top About
---------------------------------------------- */
.top-about {
    margin-top: var(--section-margin);
}

.top-about__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4.6rem;
}

.top-about__body {
    flex: 1;
}

.top-about__main-copy {
    margin-top: 3rem;
    font-size: 2.8rem;
    line-height: var(--lh-ttl-default);
}

.top-about__text {
    margin-top: 3rem;
    font-size: 1.5rem;
}

.top-about__btn {
    margin-top: 5rem;
}

.top-about__btn .c-btn__link {
    max-width: 40rem;
}

.top-about__figure {
    flex: 1.5;
    display: flex;
    justify-content: center;
}

.top-about__canvas {
    max-width: 80rem;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    .top-about__content {
        flex-direction: column;
    }

    .top-about__main-copy {
        margin-top: 4rem;
        font-size: 2.4rem;
    }

    .top-about__text {
        margin-top: 2rem;
        font-size: 1.3rem;
    }

    .top-about__btn {
        margin-top: 3rem;
    }

    .top-about__btn .c-btn__link {
        max-width: none;
        width: fit-content;
    }
}

/* ----------------------------------------------
   Top Date
---------------------------------------------- */
.top-date {
    margin-top: var(--section-margin);
}

.top-date__content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 9rem;
    margin-top: 8rem;
}

.top-date__figure--pc {
    flex: 1.8;
}

.top-date__img {
    border-radius: var(--border-radius-default);
    max-width: 80rem;
}

.top-date__body {
    flex: 1;
}

.top-date__main-copy {
    font-size: 2.4rem;
    line-height: var(--lh-ttl-default);
}

.top-date__stats-list {
    margin-top: 4.2rem;
}

.top-date__stats-item {
    border-bottom: var(--border-default);
    padding-bottom: 2rem;
}

.top-date__stats-item + .top-date__stats-item {
    margin-top: 3rem;
}

.top-date__stats-label {
    display: block;
    font-size: 1.3rem;
    color: var(--color-text-gray);
}

.top-date__stats-value {
    margin-top: 1rem;
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
}

.top-date__stats-number {
    font-family: var(--font-en-secondary);
    font-size: 6rem;
    line-height: 1;
    letter-spacing: -0.07em;
}

.top-date__stats-unit {
    font-size: 1.4rem;
    font-weight: 500;
}

.top-date__btn {
    margin-top: 6rem;
}

.top-date__btn .c-btn__link {
    max-width: 40rem;
}

.top-date__figure--sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .top-date__content {
        gap: 5rem;
        margin-top: 4rem;
        flex-direction: column-reverse;
    }

    .top-date__body {
        flex: none;
        width: 100%;
    }

    .top-date__figure--pc {
        display: none;
    }

    .top-date__figure--sp {
        display: block;
        width: 100%;
        margin-top: 5rem;
    }

    .top-date__main-copy {
        font-size: 2rem;
    }

    .top-date__stats-list {
        margin-top: 4rem;
        display: flex;
        gap: 1.2rem;
        justify-content: space-between;
    }

    .top-date__stats-item + .top-date__stats-item {
        margin-top: 0;
    }

    .top-date__stats-item {
        flex: 1;
    }

    .top-date__stats-label {
        font-size: 1.2rem;
    }

    .top-date__stats-number {
        font-size: 4.8rem;
    }

    .top-date__stats-unit {
        font-size: 1.1rem;
    }

    .top-date__btn {
        margin-top: 4rem;
    }
}

/* ----------------------------------------------
   Top Service
---------------------------------------------- */
.top-service {
    margin-top: var(--section-margin);
    background-color: var(--color-bg-secondary);
}

.top-guide__link-icon {
    display: flex;
}

/* ----------------------------------------------
   Top Guide
---------------------------------------------- */
.top-guide.section-bg {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: var(--section-bg-padding);
}

.top-guide__content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8rem;
    margin-top: 8rem;
}

.top-guide__body {
    flex: 1;
}

.top-guide__label {
    display: block;
    font-size: 1.5rem;
    font-weight: 500;
}

.top-guide__main-copy {
    margin-top: 1.6rem;
    font-size: 2.8rem;
    line-height: var(--lh-ttl-default);
}

.top-guide__figure {
    margin-top: 10rem;
}

.top-guide__img {
    border-radius: var(--border-radius-default);
    width: 30%;
    min-width: 24rem;
}

.top-guide__nav {
    flex: 1.6;
}

.top-guide__item {
    border-top: var(--border-white);
}

.top-guide__item:last-child {
    border-bottom: var(--border-white);
}

.top-guide__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 3.6rem 0;
    color: var(--color-white);
    transition: var(--transition-default);
}

@media (hover: hover) {
    .top-guide__link:hover .top-guide__link-text {
        transform: translateX(1rem);
    }
}

.top-guide__link-text {
    font-size: 1.8rem;
    font-weight: 500;
    flex: 1;
    transition: 0.4s ease;
}

@media screen and (max-width: 768px) {
    .top-guide__content {
        margin-top: 4rem;
        flex-direction: column;
        gap: 4rem;
    }

    .top-guide__label {
        font-size: 1.3rem;
    }

    .top-guide__main-copy {
        margin-top: 1.2rem;
        font-size: 2.4rem;
    }

    .top-guide__figure {
        margin-top: 4rem;
        text-align: right;
    }

    .top-guide__img {
        display: inline-block;
        min-width: 20rem;
    }

    .top-guide__nav {
        flex: none;
        width: 100%;
    }

    .top-guide__link {
        padding: 2.4rem 0;
    }

    .top-guide__link-text {
        font-size: 1.5rem;
    }
}

/* ----------------------------------------------
   Top Works
---------------------------------------------- */
.top-works {
    margin-top: var(--section-margin);
}

.top-works .c-category {
    margin-top: 8rem;
}

.top-works__btn {
    margin-top: 8rem;
}

.top-works__btn .c-btn__link {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 768px) {
    .top-works__btn {
        margin-top: 4rem;
    }

    .top-works__btn .c-btn__link {
        margin-left: 0;
        margin-right: 0;
    }

    .top-works .c-category {
        margin-top: 5rem;
    }
}

/* ----------------------------------------------
   Top Company
---------------------------------------------- */
.top-company {
    margin-top: var(--section-margin);
    background: var(--grad-primary);
    color: var(--color-white);
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding: var(--section-bg-padding);
    overflow: hidden;
}

.top-company__canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

.top-company .container {
    position: relative;
    z-index: 1;
}

.top-company__inner .primary-heading__subttl {
    color: var(--color-white);
}

.top-company__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 8rem;
}

.top-company__item {
    display: block;
    color: var(--color-white);
    transition: var(--transition-default);
}

.top-company__item-img {
    border-radius: var(--border-radius-default);
    overflow: hidden;
}

.top-company__item-img img {
    transition: 0.3s ease;
}

@media (hover: hover) {
    .top-company__item:hover .top-company__item-img img {
        transform: scale(1.03);
    }
}

.top-company__item-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 2rem;
    gap: 2rem;
}

.top-company__item-info {
    flex: 1;
}

.top-company__item-ttl {
    font-size: 2rem;
}

.top-company__item-en {
    margin-top: 0.5rem;
    font-family: var(--font-en-secondary);
    font-size: 1.2rem;
}

@media screen and (max-width: 1023px) {
    .top-company__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 3.6rem 1.2rem;
        margin-top: 5rem;
    }
}

@media screen and (max-width: 768px) {
    .top-company__item-ttl {
        font-size: 1.6rem;
    }

    .top-company__item-en {
        font-size: 1rem;
    }

    .top-company__link-icon {
        display: none;
    }
}

/* ==============================================
   Page: Top (TOPページ特有の調整)
============================================== */
.top-news {
    margin-top: var(--section-margin);
}

.top-news__btn {
    margin-top: 6rem;
    display: flex;
    justify-content: flex-end;
}

.top-news__btn .c-btn__link {
    max-width: 40rem;
}

@media screen and (max-width: 768px) {
    .top-news__btn {
        margin-top: 4rem;
        justify-content: flex-start;
    }
}

/* ==============================================
   Page: Top (TOPページ特有のブログセクション)
============================================== */
.top-blog {
    margin-top: var(--section-margin);
    overflow: hidden;
}

.top-blog__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 8rem;
}

.top-blog__nav {
    flex: 1;
}

/* スライダー用矢印 */
.top-blog__arrows {
    display: flex;
    gap: 0.8rem;
}

.top-blog__arrow {
    width: 6rem;
    height: 3.6rem;
    border: var(--border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    transition: var(--transition-default);
    font-size: 2rem;
    border-radius: 3px;
    cursor: pointer;
}

.top-blog__arrow .icon-arrow {
    width: 1.8rem;
}

.top-blog__arrow--prev .icon-arrow {
    transform: rotate(0);
}

.top-blog__arrow:hover {
    border: 1px solid var(--color-primary);
}

/* スライダー外枠・位置調整 */
.top-blog__slider-outer {
    margin-top: 6rem;
    width: 100%;
}

.top-blog__slider-wrap {
    padding-left: 3vw;
    width: calc(100% - 3vw);
}

@media screen and (min-width: 1920px) {
    .top-blog__slider-wrap {
        padding-left: calc((100vw - var(--container-width)) / 2 + 3vw);
    }
}

.top-blog__swiper {
    overflow: visible !important;
}

/* 一覧へボタン */
.top-blog__btn {
    margin-top: 6rem;
    display: flex;
    justify-content: flex-end;
}

.top-blog__btn .c-btn__link {
    max-width: 40rem;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .top-blog__controls {
        display: none;
    }

    .top-blog__nav {
        flex: none;
        width: 100%;
        position: relative;
    }

    .top-blog__header {
        margin-top: 5rem;
    }

    .top-blog__slider-outer {
        margin-top: 4rem;
    }

    .top-blog__btn {
        margin-top: 4rem;
        justify-content: flex-start;
    }
}

/* ----------------------------------------------
   Top Recruit
---------------------------------------------- */
.top-recruit {
    margin-top: var(--section-margin);
}

.top-recruit__slider {
    margin-top: 8rem;
    width: 100%;
    overflow: hidden;
}

.top-recruit__slider-track {
    display: flex;
    width: max-content;
    animation: loop-scroll 40s linear infinite;
}

.top-recruit__list {
    display: flex;
}

.top-recruit__item {
    width: 36vw;
    aspect-ratio: 3 / 2;
    margin-right: 0.5rem;
}

.top-recruit__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-default);
}

.top-recruit__body {
    margin-top: 6rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
}

.top-recruit__content {
    flex: 1;
}

.top-recruit__copy {
    font-size: 2.8rem;
    line-height: var(--lh-ttl-default);
}

.top-recruit__text {
    margin-top: 2rem;
    font-size: 1.5rem;
    line-height: 1.8;
}

.top-recruit__btn .c-btn__link {
    max-width: 40rem;
}

.top-recruit__btn-wrap {
    flex: 0 0 40rem;
}

@keyframes loop-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 767px) {
    .top-recruit__slider {
        margin-top: 5rem;
    }

    .top-recruit__item {
        width: 90vw;
    }

    .top-recruit__body {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 4rem;
        gap: 4rem;
    }

    .top-recruit__content {
        flex: none;
        width: 100%;
    }

    .top-recruit__btn-wrap {
        flex: none;
    }
}

/* ==============================================
   Page: Lower (下層ページ)
============================================== */
/* ----------------------------------------------
   Page Header
---------------------------------------------- */
.page-header {
    padding-top: 18rem;
    background-color: var(--color-background);
}

.page-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6rem;
}

.page-header .page-header__inner {
    padding-bottom: 8rem;
    border-bottom: var(--border-default);
}

.page-header__content {
    flex: 1;
}

/* Breadcrumb */
.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    font-size: 1.2rem;
    color: var(--color-text-gray);
}

.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.breadcrumb__item:not(:last-child)::after {
    content: "—";
    display: inline-block;
}

.breadcrumb__item a {
    color: var(--color-text-gray);
    transition: var(--transition-default);
}

.breadcrumb__item a:hover {
    color: var(--color-primary);
}

/* Titles */
.page-header__ttl {
    margin-top: 8rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.page-header__ttl-en {
    font-size: 7rem;
    line-height: 1;
}

.page-header__ttl-ja {
    font-size: 1.3rem;
    color: var(--color-text-gray);
}

/* Buttons */
.page-header__btns {
    display: flex;
    gap: 1.6rem;
    margin-top: 7rem;
}

.page-header__btn {
    flex: 1;
    max-width: 28rem;
}

/* Figure (画像部分) */
.page-header__figure {
    flex: 0.6;
    max-width: 50rem;
}

.page-header__img {
    border-radius: var(--border-radius-default);
}

/* Responsive */
@media screen and (max-width: 1023px) {
    .page-header__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 5rem;
    }

    .page-header__figure {
        max-width: 100%;
        width: 100%;
    }

    .page-header__btn {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .page-header {
        padding-top: 8rem;
        border-bottom: none;
        padding-bottom: 0;
    }

    .page-header .page-header__inner {
        padding-bottom: 6rem;
        border-bottom: var(--border-default);
    }

    .page-header__btns {
        margin-top: 0;
    }

    .page-header__ttl {
        margin-top: 4rem;
    }

    .page-header__ttl-en {
        font-size: 4.6rem;
    }

    .page-header__ttl-ja {
        font-size: 1rem;
    }

    .page-header__btn {
        max-width: 100%;
    }

    .breadcrumb__list {
        font-size: 1rem;
    }
}

/* ----------------------------------------------
   Service Page Base
---------------------------------------------- */
.service-detail {
    margin-top: var(--section-margin);
}

.service-detail__body {
    margin-top: 8rem;
}

.service-detail__body {
    display: flex;
    align-items: flex-start;
    gap: 10rem;
}

.service-detail__figure {
    flex: 1;
    position: sticky;
    top: 12rem;
}

.service-detail__img {
    border-radius: var(--border-radius-default);
    width: 100%;
}

.service-detail__list {
    flex: 1.4;
    border-top: var(--border-default);
}

.service-detail__item {
    border-bottom: var(--border-default);
}

.service-detail__link {
    display: flex;
    position: relative;
    padding: 4rem 0;
    transition: var(--transition-default);
    gap: 2rem;
    align-items: center;
}

@media (hover: hover) {
    .service-detail__link:hover .service-detail__content {
        opacity: 0.8;
        transform: translateX(1rem);
    }
}

.service-detail__content {
    transition: 0.4s ease;
    flex: 1;
}

.service-detail__label {
    display: block;
    font-size: 1.3rem;
    color: var(--color-text-gray);
    line-height: 1.5;
}

.service-detail__title {
    font-size: 2.4rem;
    margin-top: 1rem;
    line-height: var(--lh-ttl-default);
}

.service-detail__desc {
    font-size: 1.3rem;
    line-height: 1.8;
    margin-top: 2.4rem;
}

.service-detail__icon {
    flex-shrink: 0;
}

@media screen and (max-width: 1023px) {
    .service-detail__body {
        flex-direction: column;
        gap: 4rem;
    }

    .service-detail__list {
        width: 100%;
    }

    .service-detail__figure {
        position: static;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .service-detail__img {
        width: 64%;
    }
}

@media screen and (max-width: 768px) {
    .service-detail__body {
        margin-top: 3rem;
    }

    .service-detail__link {
        padding: 3rem 0;
        flex-direction: column;
        align-items: flex-end;
    }

    .service-detail__content {
        padding-right: 0;
    }

    .service-detail__label {
        font-size: 1.2rem;
    }

    .service-detail__title {
        font-size: 2.2rem;
    }

    .service-detail__desc {
        font-size: 1.2rem;
    }
}

/* Service Detail: テキスト配置バリエーション */

.service-detail__title--top {
    margin-top: 0;
    font-size: 2rem;
}

.service-detail__subtitle {
    display: block;
    font-size: 1.1rem;
    font-family: var(--font-en-secondary);
    margin-top: 0.6rem;
    text-transform: uppercase;
}

.service-detail__link--alt .service-detail__desc {
    margin-top: 2rem;
}

@media screen and (max-width: 768px) {
    .service-detail__subtitle {
        font-size: 1rem;
    }
}

/* ==============================================
Service Concept (コンセプト・特徴エリア)
============================================== */
.service-concept {
    margin-top: var(--section-margin);
}

.service-concept__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8rem;
}

.service-concept__inner--reverse {
    flex-direction: row-reverse;
}

.service-concept__content {
    flex: 0.8;
    max-width: 50%;
}

.service-concept__title {
    font-size: 2.8rem;
    line-height: var(--lh-ttl-default);
}

.service-concept__text {
    margin-top: 3.2rem;
    font-size: var(--fs-body);
    line-height: var(--lh-default);
}

.service-concept__figure {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-concept__img {
    width: 100%;
    max-width: 70rem;
    height: auto;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .service-concept__inner {
        gap: 5rem;
    }
}

@media screen and (max-width: 768px) {
    .service-concept__inner,
    .service-concept__inner--reverse {
        flex-direction: column;
        gap: 4rem;
    }

    .service-concept__content {
        max-width: 100%;
        width: 100%;
    }

    .service-concept__title {
        font-size: 2.4rem;
    }

    .service-concept__text {
        margin-top: 2rem;
    }

    .service-concept__figure {
        width: 90%;
    }
}

/* ==============================================
Page: Philosophy (企業理念・ブランド)
============================================== */
.p-mission {
    margin-top: var(--section-margin);
}

.p-mission__content {
    margin-top: 6rem;
    margin-left: auto;
    max-width: 90rem;
}

.p-mission__catch {
    font-size: 2.8rem;
    line-height: 1.6;
    color: var(--color-primary);
    font-weight: 500;
}

.p-mission__text {
    font-size: var(--fs-body);
    line-height: 2;
    margin-top: 4rem;
}

.p-mission .primary-heading {
    padding-top: 0;
    border-top: none;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .p-mission__content {
        margin-top: 6rem;
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .p-mission__content {
        margin-top: 4rem;
    }

    .p-mission__catch {
        font-size: 2.2rem;
    }

    .p-mission__text {
        margin-top: 3rem;
        font-size: 1.4rem;
        line-height: 1.8;
    }
}

.p-vision,
.p-value,
.p-company-deck {
    margin-top: var(--section-margin);
}

.p-value__layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10rem;
    margin-top: 6rem;
}

/* --- PC: 左側 画像追従エリア --- */
.p-value__visual {
    flex: 1;
    position: sticky;
    top: 14rem;
}

.p-value__visual-inner {
    position: relative;
    width: 100%;
    max-width: 40rem;
    aspect-ratio: 4 / 5;
    border-radius: var(--border-radius-default);
    overflow: hidden;
}

.p-value__img-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.3);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
        transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.8s;
    z-index: 1;
}

.p-value__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-value__img-wrap.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 2;
    transition-delay: 0s, 0s, 0s;
}

.p-value__img-wrap:not(.is-active) {
    z-index: 1;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
        transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.8s 0.2s;
}

/* --- PC: 右側 テキストエリア --- */
.p-value__content {
    width: 100%;
    max-width: 90rem;
}

.p-value__item {
    padding: 1.2rem 0 6rem;
    border-top: var(--border-default);
}

.p-value__item:last-child {
    border-bottom: var(--border-default);
}

.p-value__num {
    display: block;
    font-family: var(--font-en-secondary);
    font-size: 1.4rem;
    color: var(--color-text-gray);
    line-height: 1;
}

.p-value__img-sp {
    display: none;
}

.p-value__title {
    font-size: 2.4rem;
    margin-top: 5rem;
    line-height: var(--lh-ttl-default);
    display: block;
}

.p-value__text {
    font-size: 1.5rem;
    line-height: 2;
    margin-top: 2rem;
    display: block;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .p-value__layout {
        display: block;
        margin-top: 4rem;
    }

    .p-value__visual {
        display: none;
    }

    .p-value__list {
        display: flex;
        align-items: end;
        flex-direction: column;
    }

    .p-value__item {
        padding: 5rem 0;
        width: 90%;
    }

    .p-value__content {
        padding-bottom: 0;
        max-width: 100%;
    }

    .p-value__item {
        padding: 1.2rem 0 4rem;
        display: flex;
        flex-direction: column;
    }

    .p-value__img-sp {
        display: block;
        margin-top: 2.4rem;
        border-radius: var(--border-radius-default);
        overflow: hidden;
        aspect-ratio: 1/1;
        width: 60%;
        align-self: flex-end;
    }

    .p-value__img-sp img {
        height: 100%;
    }
}

@media screen and (max-width: 768px) {
    .p-value__title {
        font-size: 2rem;
        margin-top: 2.4rem;
    }

    .p-value__text {
        font-size: 1.4rem;
        line-height: 1.8;
        margin-top: 1.6rem;
    }
}

/* ==============================================
Page: Company Profile (会社概要 - 会社概要)
============================================== */
.p-company-profile {
    margin-top: var(--section-margin);
}

.p-company-profile .primary-heading {
    padding-top: 0;
    border-top: none;
}

.p-company-profile__content {
    margin-top: 6rem;
    margin-left: auto;
    max-width: 90rem;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .p-company-profile__content {
        max-width: 100%; /* タブレット以下は横幅いっぱいに広げる */
        margin-top: 6rem;
    }
}

@media screen and (max-width: 768px) {
    .p-company-profile__content {
        margin-top: 4rem;
    }
}

/* ==============================================
Page: Access (アクセス)
============================================== */
.p-access {
    margin-top: var(--section-margin);
}

.p-access__list {
    margin-top: 6rem;
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

.p-access__item {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8rem;
}

/* --- 左側：テキストエリア --- */
.p-access__info {
    flex: 1;
}

.p-access__label-en {
    display: block;
    font-family: var(--font-en-secondary);
    font-size: 1.1rem;
    color: var(--color-text-gray);
    letter-spacing: -0.05em;
}

.p-access__title {
    margin-top: 0.6rem;
    font-size: 2rem;
    line-height: var(--lh-ttl-default);
}

.p-access__address {
    margin-top: 2.4rem;
    font-size: 1.4rem;
    line-height: 1.6;
}

.p-access__map-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.2rem;
    font-size: 1.4rem;
    color: var(--color-primary);
    transition: var(--transition-default);
    font-family: var(--font-en-secondary);
}

.p-access__map-link:hover {
    opacity: 0.8;
}

.p-access__map-link .icon-pin {
    width: 1.8rem;
    height: auto;
}

.p-access__map-link {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.p-access__tel {
    margin-top: 1.6rem;
    font-size: 1.4rem;
    line-height: 1.6;
    letter-spacing: 0;
}

.p-access__sub-title {
    margin-top: 2rem;
    font-size: 1.5rem;
}

.p-access__station {
    margin-top: 0.8rem;
    font-size: 1.4rem;
    line-height: 1.6;
}

/* --- 右側：MAPエリア --- */
.p-access__map {
    width: 90rem;
    border-radius: var(--border-radius-default);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: var(--color-border);
}

.p-access__map iframe {
    width: 100%;
    height: 100%;
    display: block;
    filter: grayscale(100%) contrast(0.9) brightness(1.05);
    transition: var(--transition-default);
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .p-access__item {
        flex-direction: column;
        gap: 5rem;
    }

    .p-access__info {
        width: 100%;
    }

    .p-access__map {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .p-access__list {
        margin-top: 5rem;
        gap: 5rem;
    }

    .p-access__item {
        flex-direction: column;
        gap: 3.6rem;
    }

    .p-access__info {
        width: 100%;
    }

    .p-access__title {
        font-size: 1.8rem;
    }

    .p-access__address {
        margin-top: 1.6rem;
    }

    .p-access__tel {
        margin-top: 1.4rem;
    }

    .p-access__address,
    .p-access__sub-title {
        font-size: 1.4rem;
    }
}

/* ==============================================
Page: Group Companies (グループ会社)
============================================== */
.p-group-companies {
    margin-top: var(--section-margin);
}

.p-group-companies__title {
    margin-top: 6rem;
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
    font-size: 2.4rem;
    line-height: var(--lh-ttl-default);
    color: var(--color-primary);
}

.p-group-companies__title-en {
    font-family: var(--font-en-secondary);
    font-size: 1.1rem;
    color: var(--color-text-gray);
    letter-spacing: -0.05em;
}

.p-group-companies__content {
    margin-top: 6rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8rem;
}

.p-group-companies__info {
    flex: 1;
}

.p-group-companies__logo {
    width: 15rem;
    overflow: hidden;
    border-radius: var(--border-radius-default);
}

.p-group-companies__text {
    margin-top: 3.8rem;
    font-size: 1.4rem;
    line-height: 1.8;
}

.p-group-companies__address {
    margin-top: 2.4rem;
    font-size: 1.4rem;
    line-height: 1.6;
}

.p-group-companies__map-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.2rem;
    font-size: 1.4rem;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--transition-default);
}

.p-group-companies__map-link:hover {
    opacity: 0.6;
}

.p-group-companies__map-link .icon-pin {
    width: 1.8rem;
    height: auto;
}

.p-group-companies__hp {
    margin-top: 0.5rem;
    font-size: 1.4rem;
}

.p-group-companies__hp a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.p-group-companies__hp a:hover {
    opacity: 0.6;
}

/* --- 右側：写真エリア --- */
.p-group-companies__figure {
    width: 90rem;
    border-radius: var(--border-radius-default);
    overflow: hidden;
}

.p-group-companies__figure img {
    height: auto;
    display: block;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .p-group-companies__content {
        flex-direction: column;
        margin-top: 3rem;
        gap: 5rem;
    }

    .p-group-companies__info {
        width: 100%;
    }

    .p-group-companies__figure {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .p-group-companies__content {
        gap: 4rem;
    }

    .p-group-companies__title {
        margin-top: 5rem;
        font-size: 2rem;
    }

    .p-group-companies__title-en {
        font-size: 1.1rem;
    }

    .p-group-companies__info {
        flex: none;
        width: 100%;
    }

    .p-group-companies__address {
        margin-top: 2rem;
    }

    .p-group-companies__logo {
        width: 14rem;
    }
}

/* --- 関連会社リスト --- */
.p-related {
    margin-top: 11rem;
}

.p-related__list {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6rem 4rem;
}

.p-related__item {
    border-top: var(--border-default);
    padding-top: 4rem;
}

.p-related__logo {
    width: 15rem;
    height: 15rem;
    border-radius: var(--border-radius-default);
    overflow: hidden;
}

.p-related__info {
    margin-top: 2.4rem;
}

.p-related__name {
    font-size: 1.6rem;
}

.p-related__address {
    margin-top: 1.2rem;
    font-size: 1.4rem;
    line-height: 1.4;
}

.p-related__hp {
    margin-top: 1.2rem;
    font-size: 1.4rem;
}

.p-related__hp a {
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--transition-default);
}

.p-related__hp a:hover {
    opacity: 0.8;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .p-related__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 5rem 3rem;
    }
}

@media screen and (max-width: 768px) {
    .p-related {
        margin-top: 5rem;
    }

    .p-related__list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .p-related__item {
        display: flex;
        align-items: flex-start;
        gap: 2.4rem;
        padding: 3.2rem 0;
    }

    .p-related__item:last-child {
        padding-bottom: 0;
    }

    .p-related__logo {
        width: 10rem;
        height: 10rem;
        flex-shrink: 0;
    }

    .p-related__info {
        margin-top: 0;
        flex: 1;
    }

    .p-related__name {
        font-size: 1.5rem;
    }

    .p-related__address {
        font-size: 1.3rem;
    }

    .p-related__hp {
        font-size: 1.3rem;
        margin-top: 0.8rem;
    }
}

/* ==============================================
Page: Message (代表メッセージ)
============================================== */
.p-message {
    margin-top: var(--section-margin);
}

.p-message__content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8rem;
}

/* --- 左側：写真エリア --- */
.p-message__figure {
    flex: 0 0 42%;
    max-width: 40rem;
    border-radius: var(--border-radius-default);
    overflow: hidden;
    aspect-ratio: 3 / 4;
}

.p-message__figure img {
    height: 100%;
    object-position: center top;
}

/* --- 右側：テキストエリア --- */
.p-message__body {
    flex: 1;
    max-width: 90rem;
    display: flex;
    flex-direction: column;
}

.p-message__catch {
    font-size: 3.2rem;
    line-height: 1.5;
}

.p-message__text {
    margin-top: 3.6rem;
    font-size: 1.5rem;
    line-height: 2;
}

.p-message__sign {
    margin-top: 3.6rem;
    align-self: flex-end;
    text-align: right;
}

.p-message__position {
    display: block;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-primary);
}

.p-message__name-img {
    margin-top: 1.6rem;
    width: 14rem;
    margin-left: auto;
}

.p-message__name-img img {
    width: 100%;
    height: auto;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .p-message__content {
        gap: 4rem;
    }

    .p-message__catch {
        font-size: 2.8rem;
    }

    .p-message__figure {
        flex: 0 0 40%;
    }
}

@media screen and (max-width: 768px) {
    .p-message__content {
        flex-direction: column;
        gap: 3.6rem;
    }

    .p-message__figure {
        flex: none;
        width: 80%;
        align-self: flex-end;
    }

    .p-message__catch {
        font-size: 2.4rem;
    }

    .p-message__text {
        font-size: 1.4rem;
        line-height: 1.8;
        margin-top: 2.4rem;
    }

    .p-message__sign {
        margin-top: 4rem;
    }

    .p-message__name-img {
        width: 12rem;
    }
}

/* ==============================================
Page: History (沿革)
============================================== */
.p-history {
    margin-top: var(--section-margin);
}

.p-history__content {
    margin-top: 6rem;
    margin-left: auto;
    max-width: 90rem;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .p-history__content {
        max-width: 100%;
        margin-top: 6rem;
    }
}

@media screen and (max-width: 768px) {
    .p-history__content {
        margin-top: 4rem;
    }
}

/* ==============================================
Page: Management (マネジメントチーム)
============================================== */
.p-management {
    padding-top: var(--section-margin);
}

/* ==============================================
Page: Concept (選ばれる理由 - 課題解決)
============================================== */
.p-problem {
    margin-top: var(--section-margin);
}

.p-problem__lead {
    font-size: 1.6rem;
    line-height: 2;
    text-align: left;
}

.p-problem .c-check-list {
    margin-top: 0;
}

.p-problem__box {
    margin-top: 8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-default);
    padding: 6rem 8rem;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.p-problem__box-header {
    flex: 0 0 40rem;
    border-right: 1px solid var(--color-border);
    padding-right: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.p-problem__box-title {
    font-size: 2.8rem;
    line-height: 1.5;
}

.p-problem__box-en {
    display: block;
    margin-top: 2.4rem;
    font-family: var(--font-en-secondary);
    font-size: 1.2rem;
    color: var(--color-text-gray);
    letter-spacing: -0.05em;
}

.p-problem__box-content {
    flex: 1;
    padding-left: 8rem;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .p-problem__box {
        padding: 5rem 4rem;
    }

    .p-problem__box-header {
        flex: 0 0 30rem;
        padding-right: 3rem;
    }

    .p-problem__box-content {
        padding-left: 6rem;
    }
}

@media screen and (max-width: 768px) {
    .p-problem__lead {
        font-size: 1.4rem;
        line-height: 1.8;
    }

    .p-problem__box {
        margin-top: 5rem;
        flex-direction: column;
        align-items: flex-start;
        padding: 3.6rem 2.4rem;
    }

    .p-problem__box-header {
        flex: none;
        width: 100%;
        border-right: none;
        padding-right: 0;
        margin-bottom: 2.8rem;
    }

    .p-problem__box-title {
        font-size: 2.4rem;
    }

    .p-problem__box-en {
        margin-top: 1.8rem;
    }

    .c-check-list__text {
        font-size: 1.5rem;
    }

    .p-problem__box-content {
        padding-left: 0;
        width: 100%;
    }

    .c-check-list__item {
        font-size: 1.2rem;
    }
}

/* ==============================================
Page: Concept (選ばれる理由 - リスト部分)
============================================== */
.p-reason.c-page-section {
    margin-top: var(--section-margin);
    padding-top: 0;
    border-top: none;
}

.p-reason__item {
    display: flex;
    align-items: flex-end;
    gap: 8rem;
    padding: 8rem 0;
    justify-content: space-between;
    border-top: 1px solid var(--color-border);
}

.p-reason__figure {
    flex: 0 0 50%;
    max-width: 40rem;
    border-radius: var(--border-radius-default);
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.p-reason__figure img {
    height: 100%;
}

.p-reason__body {
    width: 100%;
    max-width: 80rem;
}

.p-reason__num {
    display: block;
    font-family: var(--font-en-secondary);
    font-size: 1.4rem;
    color: var(--color-text-gray);
    letter-spacing: -0.05em;
}

.p-reason__title {
    margin-top: 4rem;
    font-size: 2.8rem;
    line-height: var(--lh-ttl-default);
}

.p-reason__text {
    margin-top: 2.8rem;
    font-size: 1.5rem;
    line-height: 2;
}

.p-reason__item:last-child {
    padding-bottom: 0;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .p-reason__item {
        gap: 5rem;
        padding: 6rem 0;
    }

    .p-reason__figure {
        flex: 0 0 42%;
    }

    .p-reason__title {
        font-size: 2.4rem;
    }
}

@media screen and (max-width: 768px) {
    .p-reason__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 5rem 0;
    }

    .p-reason__figure {
        flex: none;
        width: 60%;
        align-self: flex-end;
    }

    .p-reason__title {
        font-size: 2rem;
        margin-top: 3rem;
    }

    .p-reason__text {
        font-size: 1.5rem;
        line-height: 1.8;
        margin-top: 2rem;
    }
}

/* ==============================================
Page: Beginner (はじめての方へ)
============================================== */
.p-beginner {
    margin-top: var(--section-margin);
}

.p-beginner__lead {
    font-size: 2.4rem;
    font-weight: 500;
}

.p-beginner__list {
    border-top: 1px solid var(--color-border);
    margin-top: 8rem;
}

.p-beginner__item {
    border-bottom: 1px solid var(--color-border);
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .p-beginner__lead {
        font-size: 1.8rem;
        line-height: 1.6;
    }

    .p-beginner__list {
        margin-top: 5rem;
    }
}

/* ==============================================
   Page: Guide Detail (サイドバー・カード)
============================================== */
.layout-sidebar.p-guide-detail {
    margin-top: var(--section-margin);
}

/* --- サイドバー内リスト --- */
.p-guide-sidebar__header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1.6rem;
}

.p-guide-sidebar__title {
    font-size: 1.6rem;
    color: var(--color-text-gray);
}

.p-guide-sidebar__list {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    margin-top: 3.6rem;
}

/* --- サイドバー用ミニカード --- */
.p-guide-card {
    display: block;
    color: inherit;
}

.p-guide-card__img {
    border-radius: var(--border-radius-default);
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.p-guide-card__img img {
    transition: transform 0.4s ease;
}

.p-guide-card:hover .p-guide-card__img img {
    transform: scale(1.05);
}

.p-guide-card__title {
    margin-top: 1.2rem;
    font-size: 1.4rem;
    line-height: 1.5;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .layout-sidebar.p-guide-detail {
        margin-top: 5rem;
    }
    .layout-sidebar__nav-area.p-guide-sidebar {
        display: none;
    }
}

/* ==============================================
   Page: Works Detail (制作実績 詳細ヒーローエリア)
============================================== */
.p-works-hero {
    padding-top: 15rem;
}

.p-works-hero__inner {
    display: flex;
    justify-content: space-between;
    gap: 6rem;
}

.p-works-hero__content {
    flex: 1;
}

.p-works-hero__title-area {
    margin-top: 10rem;
}

.p-works-hero__client {
    display: block;
    font-size: 1.3rem;
    font-family: var(--font-en-secondary);
    color: var(--color-text-gray);
}

.p-works-hero__ttl {
    font-size: 3.8rem;
    line-height: var(--lh-ttl-default);
    margin-top: 2rem;
}

/* カスタムフィールド・メタ情報（タグとURL） */
.p-works-hero__meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 3rem;
}

.p-works-hero__tags {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.p-works-hero__link {
    font-size: 1.3rem;
    color: var(--color-text-gray);
    font-family: var(--font-en-secondary);
    transition: var(--transition-default);
}

@media (hover: hover) {
    .p-works-hero__link:hover {
        color: var(--color-primary);
    }
}

/* フルワイド画像エリア */
.p-works-hero__figure {
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    margin-top: 10rem;
}

.p-works-hero__img {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    display: block;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .p-works-hero__figure {
        margin-top: 6rem;
    }
}

@media screen and (max-width: 768px) {
    .p-works-hero {
        padding-top: 8rem;
    }

    .p-works-hero__title-area {
        margin-top: 4rem;
    }

    .p-works-hero__client {
        font-size: 1.2rem;
    }

    .p-works-hero__ttl {
        font-size: 2.4rem;
        margin-top: 2rem;
    }

    .p-works-hero__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 3rem;
        margin-top: 2.4rem;
    }

    .p-works-hero__link {
        font-size: 1.2rem;
    }

    .p-works-hero__figure {
        margin-top: 5rem;
    }

    .p-works-hero__img {
        height: 50vh;
    }
}

/* ==============================================
   Component: Entry Body (記事本文)
============================================== */
.p-works-body h2 {
    font-size: 2.8rem;
    line-height: var(--lh-ttl-default);
    margin-top: 5rem;
    margin-bottom: 3rem;
}

.p-works-body h2:first-child {
    margin-top: 0;
}

.p-works-body h3 {
    font-size: 2.4rem;
    line-height: var(--lh-ttl-default);
    background-color: var(--color-bg-secondary);
    padding: 1.2rem 1.6rem;
    border-radius: var(--border-radius-default);
    margin-top: 5rem;
    margin-bottom: 3rem;
}

.p-works-body p {
    font-size: var(--fs-body);
    line-height: 2;
}

@media screen and (max-width: 768px) {
    .p-works-body h2 {
        font-size: 2rem;
        margin-top: 4rem;
        margin-bottom: 2.4rem;
    }
    .p-works-body h3 {
        font-size: 1.8rem;
        padding: 1rem 1.2rem;
        margin-top: 4rem;
        margin-bottom: 2.4rem;
    }
}

/* ==============================================
   Component: Lists & Lines (汎用リスト・罫線)
============================================== */
/* 汎用ドットリスト */
.c-list-dot {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.c-list-dot__item {
    position: relative;
    padding-left: 1.4em;
    font-size: 1.5rem;
    line-height: 1.6;
}

.c-list-dot__item::before {
    content: "";
    position: absolute;
    top: 0.75em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-primary);
    transform: translateY(-50%);
}

/* 汎用区切り線 */
hr.c-hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 4rem 0;
    padding: 0;
}

@media screen and (max-width: 768px) {
    .c-list-dot__item {
        font-size: 1.4rem;
        line-height: 1.5;
    }
    hr.c-hr {
        margin: 3.2rem 0;
    }
}

/* ==============================================
   Page: Works Detail (制作実績 詳細コンテンツ)
============================================== */
.layout-sidebar.p-works-detail {
    margin-top: 12rem;
}

.p-works-detail .layout-sidebar__nav-area {
    width: 36rem;
}

/* --- 左側：会社概要（メタデータ） --- */
.p-works-meta__list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.p-works-meta__row {
    display: flex;
    align-items: baseline;
    gap: 2rem;
}

.p-works-meta__label {
    width: 8rem;
    flex-shrink: 0;
    font-family: var(--font-en-secondary);
    font-size: 1.4rem;
    color: var(--color-text-gray);
    text-transform: uppercase;
    line-height: 1.6;
    letter-spacing: var(--ls-heading-en);
}

.p-works-meta__value {
    flex: 1;
    font-size: 1.4rem;
    line-height: 1.6;
}

.p-works-meta__link {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-default);
    word-break: break-all;
}

@media (hover: hover) {
    .p-works-meta__link:hover {
        color: var(--color-primary);
        opacity: 0.7;
    }
}

/* --- 右側：実績専用コンテンツエリア --- */
.p-works-entry__h2 {
    font-size: 2rem;
    line-height: var(--lh-ttl-default);
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: 1.6rem;
}

.p-works-entry__h2:first-child {
    margin-top: 0;
}

.p-works-entry__text {
    font-size: 1.5rem;
    line-height: 2;
}

.p-works-entry__text:last-child {
    margin-bottom: 0;
}

.p-works-entry__hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 4rem 0;
}

/* ボックスエリア */
.p-works-entry__box-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.p-works-entry__box {
    background-color: var(--color-bg-secondary);
    border-radius: var(--border-radius-default);
    padding: 4rem;
}

.p-works-entry__box-title {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.p-works-entry__box .c-list-dot {
    gap: 0.8rem;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .p-works-entry__box-wrap {
        gap: 3rem;
    }
    .p-works-entry__box {
        padding: 3rem 2.4rem;
    }
}

@media screen and (max-width: 768px) {
    .layout-sidebar.p-works-detail {
        margin-top: 4rem;
    }

    .p-works-detail .layout-sidebar__inner {
        gap: 4rem;
    }

    .p-works-meta__label {
        width: 7rem;
        font-size: 1.3rem;
    }

    .p-works-meta__value {
        font-size: 1.3rem;
    }

    .p-works-meta__list {
        gap: 1.2rem;
    }

    .p-works-entry__h2 {
        font-size: 2rem;
    }

    .p-works-entry__text {
        line-height: 1.8;
        margin-bottom: 2rem;
    }

    .p-works-entry__box-wrap {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .p-works-entry__box {
        padding: 3rem;
    }
}

/* ==============================================
   Page: Works Detail (制作実績 詳細ギャラリー)
============================================== */
.p-works-gallery {
    margin-top: 12rem;
}

.p-works-gallery__inner {
    max-width: 140rem;
}

.p-works-gallery__list {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.p-works-gallery__item {
    width: 100%;
}

.p-works-gallery__item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-default);
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .p-works-gallery {
        margin-top: 4rem;
    }

    .p-works-gallery__list {
        gap: 2rem;
    }
}

/* ==============================================
   Page: Works Detail (デザイン・機能のポイント)
============================================== */
.p-works-point {
    margin-top: 12rem;
}

.p-works-point__inner {
    max-width: 90rem;
    margin: 0 auto;
}

.p-works-point__list {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.p-works-point__title {
    font-size: 2.4rem;
    line-height: var(--lh-ttl-default);
}

.p-works-point__text {
    margin-top: 2rem;
    font-size: 1.5rem;
    line-height: 2;
}

.p-works-point__text p {
    margin-bottom: 1em;
}

.p-works-point__text p:last-child {
    margin-bottom: 0;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .p-works-point {
        margin-top: 5rem;
    }

    .p-works-point__list {
        gap: 4rem;
    }

    .p-works-point__title {
        font-size: 2rem;
    }
}

/* ==============================================
   Page: Works Detail (デザイン画像＆クレジット)
============================================== */
.p-works-design {
    margin-top: 12rem;
}

.p-works-design__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10rem;
    max-width: 140rem;
}

/* --- 左側：デザイン画像リスト --- */
.p-works-design__main {
    flex: 1;
    min-width: 0;
}

.p-works-design__list {
    display: flex;
    flex-direction: column;
    gap: 4rem; /* 縦長画像同士の隙間 */
}

.p-works-design__item img {
    width: 100%;
    max-width: 120rem;
    margin: 0 auto;
    height: auto;
    display: block;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* --- 右側：クレジット（Sticky） --- */
.p-works-design__credit {
    width: 36rem;
    flex-shrink: 0;
    position: sticky;
    top: 14rem;
}

.p-works-credit__list {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.p-works-credit__row {
    display: flex;
    align-items: baseline;
    gap: 2rem;
}

.p-works-credit__label {
    width: 10rem;
    flex-shrink: 0;
    font-family: var(--font-en-secondary);
    font-size: 1.4rem;
    color: var(--color-text-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.6;
    letter-spacing: var(--ls-heading-en);
}

.p-works-credit__value {
    flex: 1;
    font-size: 1.4rem;
    line-height: 1.5;
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .p-works-design__inner {
        gap: 5rem;
    }
    .p-works-design__credit {
        width: 20rem;
    }
    .p-works-credit__label {
        width: 8rem;
    }
}

@media screen and (max-width: 768px) {
    .p-works-design {
        margin-top: 8rem;
    }

    .p-works-design__inner {
        flex-direction: column;
        gap: 5rem;
    }

    .p-works-design__main {
        width: 100%;
    }

    /* SP時は右側（クレジット）を追従解除し、画像の下に配置 */
    .p-works-design__credit {
        width: 100%;
        position: static;
    }

    .p-works-credit__row {
        gap: 3rem;
    }

    .p-works-credit__label {
        width: 9rem;
    }
}

.p-works-cta__inner {
    max-width: 140rem;
}

/* ==============================================
   Page: Works Detail (関連実績)
============================================== */
.p-works-related {
    margin-top: var(--section-margin);
}

/* 一覧へ戻るボタンの配置調整 */
.p-works-related__btn {
    margin-top: 8rem;
    display: flex;
    justify-content: center;
}

.p-works-related__btn .c-btn__link {
    max-width: 40rem;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .p-works-related .c-works-list {
        grid-template-columns: 1fr;
        gap: 5rem;
        margin-top: 5rem;
    }

    .p-works-related .c-works-card__client {
        font-size: 1.2rem;
    }

    .p-works-related .c-works-card__title {
        margin-top: 1rem;
        font-size: 1.5rem;
    }

    .p-works-related .c-works-card__tag-wrap {
        margin-top: 2rem;
    }

    .p-works-related__btn {
        margin-top: 5rem;
    }

    .p-works-related__btn .c-btn__link {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==============================================
   Page: FAQ (よくある質問 ページ専用調整)
============================================== */

.p-faq-section {
    scroll-margin-top: 14rem;
}

.p-faq-section + .p-faq-section {
    margin-top: 8rem;
}

.p-faq-section__title {
    font-size: 2.4rem;
    line-height: var(--lh-ttl-default);
    margin-bottom: 4rem;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .p-faq-section {
        scroll-margin-top: 10rem;
    }

    .p-faq-section + .p-faq-section {
        margin-top: 6rem;
    }

    .p-faq-section__title {
        font-size: 2rem;
        margin-bottom: 3.6rem;
    }
}

/* ==============================================
   Page: Works Archive (実績一覧)
============================================== */
.p-archive-works {
    margin-top: var(--section-margin);
}

/* ==============================================
   Page: News Archive (お知らせ一覧)
============================================== */
.p-archive-news {
    margin-top: var(--section-margin);
}

.p-archive-news__list {
    margin-top: 6rem;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .p-archive-news__list {
        margin-top: 4rem;
    }
}

/* ==============================================
   Page: Post Detail (お知らせ/ブログ 詳細)
============================================== */
.p-entry-hero {
    padding-top: 12rem;
}

.p-entry {
    margin-top: 8rem;
}

.p-entry__inner {
    max-width: 90rem;
    margin: 0 auto;
}

/* --- 記事ヘッダー --- */
.p-entry__header {
    margin-top: 4rem;
    margin-bottom: 6rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid var(--color-border);
}

.p-entry__meta {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.p-entry__date {
    font-family: var(--font-en-secondary);
    font-size: 1.4rem;
    color: var(--color-text-gray);
    letter-spacing: 0;
}

.p-entry__category {
    font-size: 1.1rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1.4;
    color: var(--color-primary);
}

.p-entry__title {
    font-size: 3.6rem;
    line-height: var(--lh-ttl-default);
    margin-top: 3rem;
}

/* --- 記事フッター（一覧へ戻るボタン） --- */
.p-entry__footer {
    margin-top: 7rem;
    display: flex;
    justify-content: center;
}

.p-entry__btn {
    width: 100%;
    max-width: 40rem;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .p-entry-hero {
        padding-top: 8rem;
    }

    .p-entry {
        margin-top: 4rem;
    }

    .p-entry__header {
        margin-bottom: 4rem;
        padding-bottom: 4rem;
    }

    .p-entry__meta {
        gap: 1.2rem;
    }

    .p-entry__date {
        font-size: 1.2rem;
    }

    .p-entry__category {
        font-size: 1rem;
    }

    .p-entry__title {
        font-size: 2.4rem;
        margin-top: 2.4rem;
    }

    .p-entry__footer {
        margin-top: 4rem;
    }

    .p-entry__btn {
        width: fit-content;
    }
}

/* ==============================================
   Page: Blog Archive (ブログ一覧)
============================================== */
.p-archive-blog {
    margin-top: var(--section-margin);
}

.p-archive-blog__list {
    margin-top: 6rem;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .p-archive-blog__list {
        margin-top: 4rem;
    }
}

/* ==============================================
   Page: Blog Hero (ブログ詳細 ヒーローエリア)
============================================== */
.p-blog-hero {
    padding-top: 12rem;
    padding-bottom: 8rem;
    border-bottom: 1px solid var(--color-border);
}

/* --- 上部メタ情報（BLOGラベル・カテゴリ） --- */
.p-blog-hero__meta-top {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-top: 6rem;
}

.p-blog-hero__label {
    font-family: var(--font-en-primary);
    font-size: 1.4rem;
    letter-spacing: var(--ls-heading-en);
}

.p-blog-hero__category {
    font-size: 1.2rem;
    padding: 0.4rem 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1.4;
    color: var(--color-primary);
}

/* --- 記事タイトル --- */
.p-blog-hero__title {
    font-size: 3.6rem;
    line-height: var(--lh-ttl-default);
    margin-top: 3rem;
}

/* --- 下部メタ情報（執筆者・日付） --- */
.p-blog-hero__bottom {
    margin-top: 4.6rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* 執筆者 */
.p-blog-hero__author {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.p-blog-hero__author-img {
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 50%;
    background-color: #d9d9d9;
    overflow: hidden;
    flex-shrink: 0;
}

.p-blog-hero__author-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-blog-hero__author-name {
    font-size: 1.4rem;
    font-weight: 500;
}

/* 日付 */
.p-blog-hero__dates {
    display: flex;
    gap: 1.6rem;
}

.p-blog-hero__date {
    font-family: var(--font-en-secondary);
    font-size: 1.2rem;
    color: var(--color-text-gray);
    letter-spacing: 0;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .p-blog-hero {
        padding-top: 8rem;
        padding-bottom: 4rem;
        border-bottom: none;
    }

    .p-blog-hero__meta-top {
        margin-top: 4rem;
        gap: 1.2rem;
    }

    .p-blog-hero__label {
        font-size: 1.4rem;
    }

    .p-blog-hero__category {
        font-size: 1.1rem;
        padding: 0.3rem 0.8rem;
    }

    .p-blog-hero__title {
        font-size: 2.4rem;
        margin-top: 2.4rem;
    }

    .p-blog-hero__bottom {
        margin-top: 2rem;
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 2rem;
    }

    .p-blog-hero__author-img {
        width: 4.8rem;
        height: 4.8rem;
    }

    .p-blog-hero__author-name {
        font-size: 1.3rem;
    }

    .p-blog-hero__dates {
        gap: 1.2rem;
    }

    .p-blog-hero__date {
        font-size: 1.1rem;
    }
}

/* ==============================================
   Page: Blog Detail Layout (3カラムレイアウト)
============================================== */
.p-blog-content {
    margin-top: var(--section-margin);
}

.p-blog-content__inner {
    display: flex;
    align-items: flex-start;
    gap: 8rem;
}

/* --- 左カラム：シェア --- */
.p-blog-share {
    width: 4.8rem;
    flex-shrink: 0;
    position: sticky;
    top: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
}

.p-blog-share__label {
    font-family: var(--font-en-secondary);
    font-size: 1.2rem;
    color: var(--color-text-gray);
    letter-spacing: 0.1em;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.p-blog-share__list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    list-style: none;
}

.p-blog-share__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    transition: var(--transition-default);
    border: none;
    cursor: pointer;
}

.p-blog-share__btn svg {
    width: 1.8rem;
    height: 1.8rem;
}

@media (hover: hover) {
    .p-blog-share__btn:hover {
        opacity: 0.7;
    }
}

/* --- 中央カラム：メイン --- */
.p-blog-main {
    flex: 1;
    min-width: 0;
}

.p-blog-main__inner {
    max-width: 90rem;
    margin: 0 auto;
}

.p-blog-eyecatch {
    margin-bottom: 6rem;
    border-radius: var(--border-radius-default);
    overflow: hidden;
}

.p-blog-eyecatch img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- 右カラム：サイドバー --- */
.p-blog-sidebar {
    width: 32rem;
    flex-shrink: 0;
    align-self: stretch;
    display: block;
}

.p-blog-sidebar__sticky {
    position: sticky;
    top: 12rem;
}

.p-blog-sidebar > * + * {
    margin-top: 4rem;
}

@media screen and (max-width: 1023px) {
    .p-blog-content__inner {
        flex-direction: column;
        gap: 5rem;
    }

    .p-blog-main__inner {
        max-width: 100%;
    }

    .p-blog-share,
    .p-blog-sidebar {
        width: 100%;
        position: static;
    }

    .p-blog-share {
        flex-direction: row;
        justify-content: flex-start;
        order: 3;
        padding-top: 3rem;
        border-top: 1px solid var(--color-border);
    }

    .p-blog-share__label {
        writing-mode: horizontal-tb;
        transform: none;
    }

    .p-blog-share__list {
        flex-direction: row;
    }

    .p-blog-main {
        width: 100%;
        order: 1;
    }

    .p-blog-sidebar {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .p-blog-content {
        margin-top: 0;
    }

    .p-blog-eyecatch {
        width: 100vw;
        margin: 0 calc(50% - 50vw) 4rem;
        border-radius: 0;
    }
}

/* ==============================================
   Page: Blog Related (関連記事)
============================================== */
.p-blog-related {
    margin-top: var(--section-margin);
}

.p-blog-related__list {
    margin-top: 6rem;
}

.p-blog-related__btn {
    margin-top: 8rem;
    display: flex;
    justify-content: center;
}

.p-blog-related__btn .c-btn__link {
    max-width: 40rem;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .p-blog-related__list {
        margin-top: 5rem;
    }

    .p-blog-related__btn {
        margin-top: 4rem;
    }
}

/* ==============================================
   Page: Privacy Policy (プライバシーポリシー)
============================================== */
.p-privacy {
    margin-top: var(--section-margin);
}

.p-privacy__day {
    margin-top: 3rem;
}

.p-privacy__inner {
    max-width: 90rem;
    margin: 0 auto;
}

/* ==============================================
   Page: 404 (Not Found)
============================================== */
.p-notfound {
    padding-top: 12rem;
}

.p-notfound__content {
    margin-top: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.p-notfound__number {
    font-family: var(--font-en-primary);
    font-size: 16rem;
    color: var(--color-primary);
    line-height: 1;
    letter-spacing: -0.02em;
}

.p-notfound__title {
    font-size: 2.8rem;
    line-height: var(--lh-ttl-default);
    margin-top: 3.2rem;
    font-weight: 500;
}

.p-notfound__text {
    font-size: var(--fs-body);
    margin-top: 3rem;
}

.p-notfound__btn {
    margin-top: 4rem;
    max-width: 32rem;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .p-notfound {
        padding-top: 8rem;
    }

    .p-notfound__content {
        margin-top: 5rem;
    }

    .p-notfound__number {
        font-size: 10rem;
    }

    .p-notfound__title {
        font-size: 2.2rem;
        margin-top: 2rem;
    }

    .p-notfound__text {
        font-size: 1.4rem;
        margin-top: 2rem;
        text-align: left;
    }

    .p-notfound__btn {
        margin-top: 3rem;
    }
}

/* ==============================================
   Layout: Simple Header / Footer (お問い合わせ等の簡易版)
============================================== */
.p-simple-header {
    padding: 4rem 4vw;
    background-color: var(--color-background);
}

.p-simple-header__logo img {
    width: 14rem;
    height: auto;
}

.p-simple-footer {
    background-color: var(--color-bg-secondary);
    padding: 3rem 4vw;
    margin-top: var(--section-margin);
}

.p-simple-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 140rem;
    margin: 0 auto;
}

.p-simple-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;
    font-size: 1.2rem;
}

.p-simple-footer__links a {
    color: var(--color-text-gray);
    transition: var(--transition-default);
}

.p-simple-footer__copy {
    font-family: var(--font-en-secondary);
    font-size: 1.2rem;
    color: var(--color-text-gray);
}

@media (hover: hover) {
    .p-simple-footer__links a:hover {
        color: var(--color-primary);
    }
}

@media screen and (max-width: 768px) {
    .p-simple-header {
        padding: 3rem 4vw;
    }
    .p-simple-header__logo img {
        width: 12rem;
    }
    .p-simple-footer {
        padding: 4rem 4vw;
        margin-top: 8rem;
    }
    .p-simple-footer__inner {
        flex-direction: column;
        gap: 3rem;
        align-items: flex-start;
    }
    .p-simple-footer__links {
        gap: 1.6rem;
        flex-direction: column;
    }
}

/* ==============================================
   Page: Contact (お問い合わせ)
============================================== */
.p-contact {
    margin-top: 16rem;
}

.p-contact__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8rem;
    max-width: 120rem;
    margin: 0 auto;
}

/* --- 左側：案内エリア --- */
.p-contact__info {
    flex: 1;
}

.p-contact__heading {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.p-contact__ttl-en {
    font-family: var(--font-en-primary);
    font-size: 7rem;
    line-height: 1;
    font-weight: 400;
    color: var(--color-primary);
    letter-spacing: var(--ls-heading-en);
}

.p-contact__ttl-ja {
    font-size: 1.3rem;
    color: var(--color-text-gray);
}

.p-contact__lead {
    margin-top: 5rem;
    font-size: 1.5rem;
}

.p-contact__faq-link {
    margin-top: 3rem;
}

.p-contact__faq-link > a {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.p-contact__faq-note {
    margin-top: 3rem;
    font-size: 1.3rem;
    line-height: 1.6;
}

.p-contact__faq-note a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.p-contact__support {
    margin-top: 5rem;
}

.p-contact__support-ttl {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 2rem;
}

.p-contact__support-members {
    display: flex;
    gap: 1.2rem;
}

.p-contact__support-img {
    flex: 1;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius-default);
    overflow: hidden;
}

.p-contact__support-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 右側：フォームエリア --- */
.p-contact__form-area {
    flex: 1.2;
    background-color: var(--color-bg-secondary);
    padding: 5rem 4rem;
    border-radius: var(--border-radius-default);
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .p-contact__form-area {
        width: 100%;
        padding: 5rem 4rem;
    }
}

@media screen and (max-width: 768px) {
    .p-contact {
        margin-top: 10rem;
    }

    .p-contact__inner {
        flex-direction: column;
        gap: 5rem;
    }

    .p-contact__info {
        position: static;
        width: 100%;
    }

    .p-contact__heading {
        gap: 0.5rem;
    }

    .p-contact__ttl-en {
        font-size: 4.6rem;
    }
    .p-contact__ttl-ja {
        font-size: 1.2rem;
    }

    .p-contact__lead {
        margin-top: 3.2rem;
        font-size: 1.4rem;
    }

    .p-contact__faq-link {
        margin-top: 2.4rem;
    }

    .p-contact__support {
        margin-top: 3rem;
    }

    .p-contact__support-ttl {
        font-size: 1.8rem;
    }

    .p-contact__form-area {
        padding: 3.6rem 2rem;
        width: 100%;
    }
    .p-contact__support-members {
        gap: 0.8rem;
    }
}

/* ==============================================
   Component: Form (汎用フォーム / Forminator対応)
============================================== */
/* 行のレイアウト (ForminatorのRow/Colにも対応) */
.c-form__row,
.c-form .forminator-row {
    display: flex;
    gap: 2rem;
    margin-bottom: 2.4rem;
}

.c-form__group,
.c-form .forminator-col {
    flex: 1;
    margin-bottom: 2.4rem;
}

.c-form__row .c-form__group,
.c-form .forminator-row .forminator-col {
    margin-bottom: 0;
}

/* ラベル */
.c-form__label,
.c-form .forminator-label {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.c-form__req,
.c-form .forminator-required {
    color: #d32f2f;
    font-size: 1.2rem;
    margin-left: 0.4rem;
    font-weight: normal;
}

.c-form__opt {
    color: var(--color-text-gray);
    font-size: 1.1rem;
    margin-left: 0.4rem;
    font-weight: normal;
}

/* 入力要素の共通スタイル */
.c-form__input,
.c-form__select,
.c-form__textarea,
.c-form .forminator-input,
.c-form .forminator-select,
.c-form .forminator-textarea {
    width: 100%;
    padding: 1.2rem;
    background-color: var(--color-white);
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    font-family: inherit;
    font-size: 1.6rem;
    color: var(--color-primary);
    appearance: none;
    outline: none;
}

/* フォーカス時のハイライト */
.c-form__input:focus,
.c-form__select:focus,
.c-form__textarea:focus,
.c-form .forminator-input:focus,
.c-form .forminator-select:focus,
.c-form .forminator-textarea:focus {
    border-color: #b0c4de;
    box-shadow: 0 0 0 3px rgba(25, 70, 130, 0.1);
}

/* プレースホルダー */
.c-form__input::placeholder,
.c-form__textarea::placeholder,
.c-form .forminator-input::placeholder,
.c-form .forminator-textarea::placeholder {
    color: #b5b5b5;
}

/* セレクトボックス特有のスタイル（矢印の追加） */
.c-form__select-wrap,
.c-form .forminator-select-wrapper {
    position: relative;
}

.c-form__select,
.c-form .forminator-select {
    padding-right: 4rem;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238b919a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.6rem center;
    background-size: 1.2rem;
    cursor: pointer;
}

/* テキストエリア */
.c-form__textarea,
.c-form .forminator-textarea {
    resize: vertical; /* 縦方向のみリサイズ許可 */
    min-height: 12rem;
}

/* 同意チェックボックス */
.c-form__consent,
.c-form .forminator-checkbox {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}

.c-form__checkbox-label,
.c-form .forminator-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    font-size: 1.4rem;
}

.c-form__checkbox-text a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 送信ボタン */
.c-form__submit,
.c-form .forminator-button-submit {
    margin-top: 4rem;
    text-align: center;
}

.c-form__submit-btn,
.c-form .forminator-button-submit {
    width: 100%;
    max-width: 32rem;
    margin: 0 auto;
    display: block;
    padding: 1.8rem 2rem;
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    font-family: var(--font-ja);
    font-size: 1.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-default);
}

@media (hover: hover) {
    .c-form__submit-btn:hover,
    .c-form .forminator-button-submit:hover {
        background-color: var(--color-primary);
        color: var(--color-white);
        border-color: var(--color-primary);
    }
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .c-form__row,
    .c-form .forminator-row {
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .c-form__group,
    .c-form .forminator-col {
        margin-bottom: 2rem;
    }

    .c-form__input,
    .c-form__select,
    .c-form__textarea,
    .c-form .forminator-input,
    .c-form .forminator-select,
    .c-form .forminator-textarea {
        font-size: 1.6rem;
    }

    .c-form__submit-btn,
    .c-form .forminator-button-submit {
        max-width: 100%;
    }
}

/* ==============================================
   Page: Form Page (提案・協業フォーム等の1カラムレイアウト)
============================================== */
.p-form-page {
    margin-top: 16rem;
}

.p-form-page__inner {
    max-width: 90rem;
    margin: 0 auto;
}

.p-form-page__header {
    text-align: left;
}

.p-form-page__title {
    font-size: 3.2rem;
    line-height: var(--lh-ttl-default);
    margin-bottom: 3.2rem;
}

.p-form-page__lead {
    font-size: 1.5rem;
}

.p-form-page__lead p + p {
    margin-top: 1em;
}

.p-form-page__lead a {
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--transition-default);
}

@media (hover: hover) {
    .p-form-page__lead a:hover {
        opacity: 0.7;
    }
}

.p-form-page__body {
    margin-top: 5rem;
    background-color: var(--color-bg-secondary);
    padding: 5rem;
    border-radius: var(--border-radius-default);
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .p-form-page {
        margin-top: 10rem;
    }

    .p-form-page__title {
        font-size: 2.4rem;
        margin-bottom: 2.4rem;
    }

    .p-form-page__lead {
        font-size: 1.4rem;
        line-height: 1.8;
    }

    .p-form-page__body {
        margin-top: 4rem;
        padding: 3.6rem 2rem;
    }
}

/* ==============================================
   Page: Download Archive (資料ダウンロード一覧)
============================================== */
.p-archive-download {
    margin-top: var(--section-margin);
}

.p-download-section + .p-download-section {
    margin-top: 13rem;
}

.p-archive-download__heading {
    padding-top: 0;
    border-top: none;
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .p-download-section + .p-download-section {
        margin-top: 8rem;
    }
}

/* ==============================================
   Page: Download Detail (資料ダウンロード 詳細ページ)
============================================== */
.p-download-detail {
    margin-top: 16rem;
}

.p-download-detail__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8rem;
    max-width: 120rem;
    margin: 0 auto;
}

.p-download-detail__info {
    flex: 1.2;
}

.p-download-detail__header {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.p-download-detail__title {
    font-size: 3.2rem;
    line-height: var(--lh-ttl-default);
}

.p-download-detail__label {
    font-family: var(--font-en-secondary);
    font-size: 1rem;
    letter-spacing: var(--ls-heading-en);
}

/* 画像ギャラリー */
.p-download-detail__gallery {
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.p-download-detail__gallery-main {
    width: 100%;
    border-radius: var(--border-radius-default);
    overflow: hidden;
}

.p-download-detail__gallery-main img {
    width: 100%;
    height: auto;
    display: block;
}

.p-download-detail__gallery-sub {
    display: flex;
    gap: 1.6rem;
}

.p-download-detail__gallery-sub-item {
    flex: 1;
    border-radius: var(--border-radius-default);
    overflow: hidden;
}

.p-download-detail__gallery-sub-item img {
    width: 100%;
    height: auto;
    display: block;
}

.p-download-detail__desc {
    margin-top: 4rem;
}

.p-download-detail__form-area {
    flex: 1;
    background-color: var(--color-bg-secondary);
    padding: 5rem 4rem;
    border-radius: var(--border-radius-default);
}

/* --- Responsive --- */
@media screen and (max-width: 1023px) {
    .p-download-detail__info {
        position: static;
        width: 100%;
    }
    .p-download-detail__form-area {
        width: 100%;
        padding: 5rem 4rem;
    }
}

@media screen and (max-width: 768px) {
    .p-download-detail__inner {
        flex-direction: column;
        gap: 5rem;
    }

    .p-download-detail {
        margin-top: 10rem;
    }

    .p-download-detail__info {
        position: static;
        width: 100%;
    }

    .p-download-detail__title {
        font-size: 2.8rem;
    }

    .p-download-detail__desc {
        margin-top: 3rem;
    }

    .p-download-detail__gallery {
        gap: 1rem;
        margin-top: 4rem;
    }

    .p-download-detail__gallery-sub {
        gap: 1rem;
    }

    .p-download-detail__form-area {
        padding: 3.6rem 2rem;
        width: 100%;
    }
}

/* ==============================================
   Page: Guide Detail (はじめての方へ 詳細コンテンツ専用)
============================================== */

/* --- 見出し・テキスト基本スタイル --- */
.p-guide-content__h2 {
    font-size: 2.6rem;
    line-height: var(--lh-ttl-default);
    padding: 0.5rem 0 0.5rem 1.6rem;
    border-left: 4px solid var(--color-primary);
    margin-top: 6rem;
    margin-bottom: 2.4rem;
    font-weight: 500;
}

.p-guide-content__h2:first-child {
    margin-top: 0;
}

.p-guide-content__h3 {
    font-size: 2rem;
    line-height: var(--lh-ttl-default);
    background-color: var(--color-bg-secondary);
    padding: 1.2rem 1.6rem;
    border-radius: var(--border-radius-default);
    margin-top: 4rem;
    margin-bottom: 2.4rem;
    font-weight: 500;
}

.p-guide-content__text {
    font-size: var(--fs-body);
    margin-bottom: 2.4rem;
}

.p-guide-content__text--margin {
    margin-top: 1em;
}

.p-guide-content__text:last-child {
    margin-bottom: 0;
}

.p-guide-content__img {
    height: auto;
    border-radius: var(--border-radius-default);
    margin-top: 4rem;
    margin-bottom: 3.2rem;
}

/* 数字付きリスト (制作の流れ) */
.p-guide-content__ol {
    list-style-type: decimal;
    padding-left: 2em;
    margin-top: 2.4rem;
    margin-bottom: 4rem;
}

.p-guide-content__ol li {
    font-size: var(--fs-body);
    margin-bottom: 0.5em;
    font-weight: 500;
}

/* --- 専用パーツ: 「こんな方に向いています」ボックス --- */
.p-guide-box {
    background-color: var(--color-bg-secondary);
    border-radius: var(--border-radius-default);
    padding: 3.6rem;
    margin: 5rem 0;
}

.p-guide-box__title {
    font-size: 2rem;
    font-weight: 500;
    line-height: var(--lh-ttl-default);
    margin-bottom: 2.4rem;
}

.p-guide-checklist {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.p-guide-checklist li {
    position: relative;
    padding-left: 2em;
    line-height: 1.6;
}

/* 青丸＋白チェックのSVGアイコン */
.p-guide-checklist li::before {
    content: "";
    position: absolute;
    top: 0.2em; /* テキストの頭に合わせる */
    left: 0;
    width: 1.8rem;
    height: 1.8rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%230f374b'/%3E%3Cpath d='M10.5 16.5l-4-4 1.41-1.41 2.59 2.59 7.09-7.09 1.41 1.41-8.5 8.5z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* --- 専用パーツ: ハイフンリスト --- */
.p-guide-main .c-step-list__box-item {
    font-size: 1.6rem;
}

.p-guide__btn {
    margin-top: 4rem;
    display: flex;
    justify-content: flex-start;
}

.p-guide__btn .c-btn__link {
    max-width: 40rem;
}

@media screen and (max-width: 768px) {
    .p-guide__btn {
        margin-top: 3rem;
    }
}

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .p-guide-content__h2 {
        font-size: 2rem;
        margin-top: 4rem;
        margin-bottom: 2rem;
        padding: 0.5rem 0 0.5rem 1.2rem;
    }

    .p-guide-content__h3 {
        font-size: 1.8rem;
        margin-top: 3rem;
        margin-bottom: 2rem;
        padding: 1.2rem;
    }

    .p-guide-content__text {
        margin-bottom: 2rem;
    }

    .p-guide-box {
        padding: 2.4rem;
        margin: 4rem 0;
    }

    .p-guide-box__title {
        font-size: 1.8rem;
    }

    .p-guide-content__ol,
    .p-guide-list-hyphen {
        margin-top: 2rem;
        margin-bottom: 3rem;
    }
}