* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #ffffff;
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    overflow-x: hidden;
    background: transparent;
}

/* SP専用改行ユーティリティ */
.sp-only {
    display: none;
}

@media (max-width: 599px) {
    .sp-only {
        display: block;
    }
}

.container {
    width: 100%;
    max-width: 1200px;
    height: 800px;
    position: relative;
    overflow: visible;
    background: transparent;
    margin: 0 auto;
    padding-top: 60px;
}

@media (min-width: 768px) {
    .container {
        padding-top: 68px;
    }
}

/* Canvas Container - fixed to viewport, always follows scroll */
.canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

/* Enable pointer events on canvas only in 3D mode */
.canvas-container.interactive {
    pointer-events: auto;
}

/* FV ホバーツールチップ（plate_graphic.svg） */
.fv-hover-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    transform: translate(0, -50%);
}

.fv-hover-tooltip.is-visible {
    opacity: 1;
}

.fv-hover-tooltip img {
    display: block;
    width: auto;
    height: 49px; /* plate_graphic.svg基準（viewBox 167.1×41.1 / width:200px時の高さに統一） */
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18));
}

/* Toggle Button - inside FV container (height 800px) */
.toggle-button {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 50;
    background: none;
    border: none;
    cursor: pointer;
}

@media (max-width: 599px) {
    .toggle-button {
        bottom: 116px;
    }
}

.toggle-button img {
    width: auto;
    height: auto;
    display: block;
    transition: transform 0.3s;
}

.toggle-button:hover img {
    transform: scale(1.1);
}

@media (min-width: 768px) {
    .toggle-button {
        bottom: -6px;
        right: 24px;
    }
}

/* Main Content */
.main-content {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    z-index: 40;
    max-width: 340px;
}

@media (max-width: 599px) {
    .main-content {
        top: calc(50% - 50px);
    }
}

@media (max-width: 599px) {
    .main-content {
        top: calc(50% - 50px);
    }
}

@media (min-width: 640px) {
    .main-content {
        max-width: 400px;
    }
}

@media (min-width: 768px) {
    .main-content {
        left: 32px;
        max-width: 500px;
    }
}

.main-title {
    color: #1a1a1a;
    line-height: 1.2;
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 400;
    margin-bottom: 40px;
    font-size: 40px;
    margin-top: 30px;
}

@media (min-width: 640px) {
    .main-title {
        margin-bottom: 80px;
    }
}

@media (min-width: 768px) {
    .main-title {
        margin-bottom: 120px;
    }
}

.large-text {
    font-size: 70px;
    font-weight: 500;
}

@media (min-width: 768px) {
    .large-text {
        font-size: 93px;
    }
}

.mobile-break {
    display: block;
}

@media (min-width: 768px) {
    .mobile-break {
        display: none;
    }
}

.desktop-break {
    display: none;
}

@media (min-width: 640px) {
    .desktop-break {
        display: block;
    }
}

.sub-title {
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 12px;
    font-family: 'M PLUS 1', sans-serif;
    font-size: 28px;
}

@media (min-width: 768px) {
    .sub-title {
        font-size: 45px;
    }
}

.description {
    color: #374151;
    line-height: 1.6;
    margin-bottom: 32px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    max-width: 340px;
}

@media (min-width: 640px) {
    .description {
        font-size: clamp(14px, 2.2vw, 18px);
        max-width: 350px;
    }
}

@media (min-width: 768px) {
    .description {
        margin-bottom: 40px;
        font-size: 18px;
        max-width: 450px;
    }
}

/* Cards Container */
.cards-container {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    pointer-events: none;
}

.cards-container.active {
    display: flex;
}

@media (min-width: 1024px) {
    .cards-container {
        padding-right: 32px;
    }
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: 100%;
    position: relative;
    z-index: 100;
    padding-left: 5px;
    padding-right: 5px;
}

@media (min-width: 640px) {
    .cards-grid {
        max-width: 578px;
        padding-left: 0;
        padding-right: 0;
    }
}

.card {
    position: relative;
    cursor: pointer;
    pointer-events: auto;
    aspect-ratio: 1;
    opacity: 0;
    transform: scale(0.8);
    animation: cardAppear 0.5s forwards;
}

@keyframes cardAppear {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.card-inner {
    width: 100%;
    height: 100%;
    border: 2.5px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 17px;
    transition: background-color 0.3s;
    background-color: rgba(255, 255, 255, 1);
}

@media (min-width: 640px) {
    .card-inner {
        background-color: rgba(255, 255, 255, 0.75);
    }
}

.card-label {
    font-weight: 400;
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0 12px;
    color: #374151;
    font-size: 16px;
    white-space: pre-line;
    line-height: 1.2;
}

.card-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: 0.6;
}

/* =====================
   SERVICE SECTION
   ===================== */

.service-section {
    position: relative;
    background: transparent;
    padding: 60px 20px 230px;
}

/* Service background image */
.service-bg-image {
    position: absolute;
    top: 0;
    left: -60px;
    width: 480px;
    height: auto;
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
}

@media (min-width: 768px) {
    .service-bg-image {
        width: 600px;
        top: 0;
        left: -80px;
    }
}

@media (min-width: 1024px) {
    .service-bg-image {
        width: 680px;
    }
}

.service-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Header */
.service-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 48px;
}

@media (min-width: 768px) {
    .service-header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 40px;
    }
}

.service-header__left {
    flex: 1;
    padding: 28px 32px;
}

.service-label {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    color: #3a6ea8;
    margin-bottom: 60px;
    letter-spacing: 0.05em;
}

.service-title {
    font-family: 'M PLUS 1', sans-serif;
    font-size: 46px;
    font-weight: 500;
    color: #1e4a7a;
    display: inline-block;
    padding-bottom: 2px;
}

@media (min-width: 768px) {
    .service-title {
        font-size: 60px;
    }
}

.service-subtitle {
    font-family: 'M PLUS 1', sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.5;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .service-subtitle {
        font-size: 40px;
    }
}

.service-desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #444;
    line-height: 1.8;
}

.service-desc-br {
    display: block;
}

@media (max-width: 599px) {
    .service-desc br {
        display: none;
    }
}

@media (min-width: 768px) {
    .service-desc {
        font-size: 20px;
    }

    .service-desc-br {
        display: none;
    }
}

.service-header__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.service-keyword {
    font-family: 'M PLUS 1', sans-serif;
    font-size: 40px;
    font-weight: 400;
    color: rgba(15, 46, 139, 0.7);
    letter-spacing: 0.15em;
    white-space: nowrap;
    user-select: none;
}

@media (min-width: 768px) {
    .service-keyword {
        font-size: 60px;
    }
}

/* Cards grid */
.service-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    justify-content: center;
    place-items: center;
}

@media (min-width: 600px) {
    .service-cards {
        grid-template-columns: repeat(2, 360px);
        gap: 16px;
        justify-content: center;
    }
}

@media (min-width: 900px) {
    .service-cards {
        grid-template-columns: repeat(3, minmax(0, 320px));
        gap: 60px;
        justify-content: center;
    }
}

/* 9th card: 蜈ｨ繧ｵ繧､繧ｺ縺ｧ莉悶�繧ｫ繝ｼ繝峨→蜷悟ｹ� */
.service-card--single {
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
}

/* Individual card */
.service-card {
    background-color: #2a5fa8;
    border-radius: 8px;
    padding: 20px 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    width: 360px;
    max-width: 360px;
    height: 300px;
    /* Scroll fade initial state */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.25s ease;
}

/* PC繧ｵ繧､繧ｺ縺ｧ縺ｯmax-width: 320px */
@media (min-width: 900px) {
    .service-card {
        width: 320px;
        max-width: 320px;
    }
}

/* 繧ｹ繝槭���1蛻暦ｼ峨〒縺ｯ繧ｫ繝ｼ繝峨ｒ逕ｻ髱｢蟷�↓蜷医ｏ縺帙※繧ｻ繝ｳ繧ｿ繝ｪ繝ｳ繧ｰ */
@media (max-width: 599px) {
    .service-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .service-header__left {
        padding-left: 0;
        padding-right: 0;
    }

    .service-cards {
        place-items: unset;
        justify-items: center;
    }
    .service-card {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        height: 260px;
    }
}

.service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(30, 74, 122, 0.25);
}

/* When visible (added by JS) */
.service-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.service-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.service-card__title {
    font-family: 'M PLUS 1', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #dcff00;
    line-height: 1.3;
}

.service-card__num {
    font-family: 'M PLUS 1', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
    margin-left: 12px;
}

.service-card__body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.75;
    flex: 1;
}

.service-card__link {
    font-family: 'M PLUS 1', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    text-align: right;
    display: block;
    transition: color 0.2s;
}

.service-card__link:hover {
    color: #ffffff;
}

/* =====================
   NEW CARD DESIGN (BOXデザインイメージ)
   ===================== */

/* カード全体：上段ヘッダー＋横線＋下段コンテンツの2段構成 */
.service-card--new {
    padding: 0;
    overflow: visible;   /* 01 SVGがはみ出せるよう visible に */
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: #3a8fd6;
    border-radius: 20px;
    position: relative;  /* SVGの絶対配置基準 */
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.25s ease, background-color 0.35s ease;
}

/* ヘッダーエリア（タイトルのみ） */
.service-card--new .service-card__header {
    position: relative;
    padding: 16px 24px 16px;  /* 上下を同一値に統一 */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 4;          /* SVG(z-index:3)より前面に出してタイトルを優先表示 */
}

/* タイトル（黄緑色） */
.service-card--new .service-card__title {
    font-family: 'M PLUS 1', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #dcff00;
    line-height: 1.3;
    position: relative;
    z-index: 4;
    white-space: nowrap; /* 1行表示 */
}

/* SVG番号：右上に絶対配置（2/3サイズ） */
.service-card__num-svg {
    position: absolute;
    top: -33px;
    right: -1px;
    width: 142px;
    height: auto;
    opacity: 1;
    filter: none;
    user-select: none;
    pointer-events: none;
    z-index: 3;
    transition: filter 0.35s ease;
}

/* 横区切り線 */
.service-card__divider {
    width: 100%;
    height: 1.5px;
    background-color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
}

/* コンテンツエリア（本文＋三角装飾） */
.service-card--new .service-card__content {
    position: relative;
    flex: 1;
    padding: 16px 24px 10px;
    overflow: hidden;
}

/* 本文テキスト */
.service-card--new .service-card__body {
    position: relative;
    z-index: 2;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.75;
}

@media (max-width: 599px) {
    .service-card__body,
    .service-card--new .service-card__body {
        font-size: 16px;
    }
}

@media (max-width: 599px) {
    .service-card__body,
    .service-card--new .service-card__body {
        font-size: 16px;
    }
}

@media (max-width: 599px) {
    .service-card__body,
    .service-card--new .service-card__body {
        font-size: 16px;
    }
}

@media (max-width: 599px) {
    .service-card__body,
    .service-card--new .service-card__body {
        font-size: 16px;
    }
}

/* view more リンク */
.service-card--new .service-card__link {
    padding: 10px 20px 14px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    text-align: right;
    display: block;
    font-family: 'M PLUS 1', sans-serif;
    text-decoration: none;
    transition: color 0.2s;
    flex-shrink: 0;
}

.service-card--new .service-card__link:hover {
    color: #ffffff;
}

/* ホバー時のエフェクト */
.service-card--new:hover {
    background-color: #333333;
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(30, 74, 122, 0.3);
}

/* ホバー時：右上の数字SVGを黒(#000000)に変更 */
.service-card--new:hover .service-card__num-svg {
    filter: brightness(0);
}

/* =====================
   NEWS SECTION
   ===================== */

.news-section-wrap {
    width: 100%;
    overflow-x: clip;
    overflow-y: visible;
    position: relative;
    z-index: 0;
    isolation: isolate;
}

/* セクション本体：背景とコンテンツを同グリッドセルに重ねる */
.news-section {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 200px auto 0;
    /* bgとinnerを同セルに重ねてbgがinnerの高さに追従する */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

/* ---- 背景3分割 ---- */
.news-bg {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    z-index: 0;
    /* innerと同じセルを占有 */
    align-self: stretch;
}

.news-bg-slice {
    width: 100%;
    flex-shrink: 0;
}

/*
 * 上段：上半円
 * 高さ = 幅 × 50%
 */
.news-bg-slice--top {
    position: relative;
    padding-bottom: 50%;
    overflow: hidden;
}
.news-bg-slice--top::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(230, 255, 230, 0.9);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* 中段：flex:1 でbgコンテナ内の残り高さを埋める */
.news-bg-slice--mid {
    flex: 1;
    background: rgba(230, 255, 230, 0.9);
}

/*
 * 下段：下半円
 */
.news-bg-slice--bot {
    position: relative;
    padding-bottom: 50%;
    overflow: hidden;
}
.news-bg-slice--bot::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(230, 255, 230, 0.9);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

/* ---- コンテンツラッパー（背景と同グリッドセルに重ねる） ---- */
.news-inner {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 1;
    /* max-width:800px でセンタリング */
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    /* 上下は半円の湾曲内に収まる余白 */
    padding-top: 120px;
    padding-bottom: 120px;
    box-sizing: border-box;
}

/* Header */
.news-header {
    display: flex;
    justify-content: center;
    padding: 0 40px 32px;
    width: 100%;
}

.news-title-img {
    width: clamp(168px, 30vw, 336px);
    height: auto;
    pointer-events: none;
    user-select: none;
}

/* News List */
.news-list {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.news-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    border-top: 1px solid #aaa;
}

.news-item:last-child {
    border-bottom: 1px solid #aaa;
}

.news-date {
    font-family: 'M PLUS 1', sans-serif;
    font-size: clamp(12px, 1.2vw, 16px);
    font-weight: 500;
    color: #1d2a00;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 80px;
    letter-spacing: 0.03em;
}

.news-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'M PLUS 1', sans-serif;
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 4px;
    padding: 4px 12px;
    min-width: 100px;
    height: 32px;
    letter-spacing: 0.05em;
}

.news-tag--teal   { background-color: #00b1a8; }
.news-tag--purple { background-color: #736fb8; }
.news-tag--pink   { background-color: #ff86ae; }

.news-text {
    font-family: 'M PLUS 1', sans-serif;
    font-size: clamp(13px, 1.3vw, 18px);
    font-weight: 400;
    color: #1d2a00;
    margin: 0;
    line-height: 1.5;
    flex: 1;
}

/* Footer */
.news-footer-area {
    padding: 28px 40px 0;
    max-width: 1400px;
    margin: 0 auto;
}

.news-footer-inner {
    display: flex;
    justify-content: center;
}

.news-viewmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'M PLUS 1', sans-serif;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 500;
    color: #1d2a00;
    background-color: #fff;
    border-radius: 100px;
    padding: 10px 28px;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.news-viewmore:hover {
    background-color: #1a1a1a;
    color: #ffffff;
}

/* Mobile overrides */
@media (max-width: 599px) {
    .news-section-wrap {
        overflow-x: clip;
        overflow-y: visible;
    }

    .news-section {
        width: 750px;
        max-width: none;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin: 64px 0 0;
    }

    .news-inner {
        padding-top: 80px;
        /* MAILMAGがmargin-top:-300pxで被さる分＋余白を確保してコンテンツが隠れないようにする */
        padding-bottom: 340px;
        max-width: 680px;
    }

    .news-header {
        padding: 0 16px 20px;
        justify-content: center;
    }

    .news-list {
        padding: 0 16px;
        text-align: center;
    }

    .news-item {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px 0;
        justify-content: center;
    }

    .news-date {
        min-width: auto;
    }

    .news-text {
        width: 100%;
        flex: none;
        font-size: 13px;
        text-align: center;
    }

    .news-footer-area {
        padding: 20px 16px 0;
        text-align: center;
    }

    .news-viewmore {
        font-size: 14px;
        padding: 9px 22px;
    }

    .news-title-img {
        width: clamp(235px, 42vw, 470px);
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .news-header {
        padding: 0 28px 24px;
    }

    .news-list {
        padding: 0 28px;
    }

    .news-footer-area {
        padding: 24px 28px 0;
    }

    .news-item {
        gap: 8px;
    }
}

/* =====================
   MAILMAGAZINE SECTION
   ===================== */

/*
 * 背景SVG（1920×884.9）を 上段・中段・下段 の3スライスに分割。
 *
 *   上段 .mailmag-bg-slice--top  : viewBox y 0   〜 295   → aspect 1920:295  = 15.36%
 *   中段 .mailmag-bg-slice--mid  : viewBox y 295 〜 590   → aspect 1920:295  = 15.36%  ← コンテンツに合わせ縦伸び
 *   下段 .mailmag-bg-slice--bot  : viewBox y 590 〜 884.9 → aspect 1920:294.9 = 15.36%
 *
 * 各スライスの高さ = 幅 × (295 / 1920) ≒ 15.36%
 * セクション全体はフレックスカラムで3段を縦に並べ、
 * 中段の min-height をコンテンツ量に合わせることで
 * ブラウザ幅が狭くなっても全コンテンツが背景内に収まる。
 */

/* ---- Section wrapper ---- */
.mailmag-section {
    position: relative;
    width: 100%;
    margin-top: clamp(-220px, -40vw, -480px);
    padding: 0;
    overflow: visible;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

/* ---- 背景コンテナ（3スライスを縦に積む） ---- */
.mailmag-bg {
    /* position:absolute で背景として配置 */
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    z-index: 0;
}

/* 各スライス共通 */
.mailmag-bg-slice {
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    /* 高さ = 幅 × (295 / 1920) をアスペクト比で指定 */
    /* padding-bottom トリックで幅に比例した高さを確保 */
}

.mailmag-bg-slice svg {
    display: block;
    width: 100%;
    /* height は viewBox のアスペクト比で自動決定 */
}

/*
 * 上段・下段は固定高さ（SVGアスペクト比に従う）
 * 中段だけ flex:1 で伸縮させ、コンテンツ量に追従させる
 */
.mailmag-bg-slice--top {
    /* SVG height = width × 295/1920 ≒ 15.36vw */
}

.mailmag-bg-slice--mid {
    flex: 1;      /* コンテンツに合わせて縦に伸びる */
    min-height: 15.36vw;  /* 最低でも1スライス分の高さを確保 */
    position: relative;
}

.mailmag-bg-slice--mid svg {
    /* 中段は flex で伸びた分だけ縦に引き伸ばす */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mailmag-bg-slice--bot {
    /* 下段固定 */
}

/* ---- コンテンツラッパー（背景の上に重ねる） ---- */
.mailmag-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* padding-top = 上段スライス高さ（15.36vw）の85% ≒ 13vw でタイトルを中段上部に配置 */
    /* padding-bottom = 下段スライス高さの80% ≒ 12vw */
    padding: 13vw clamp(20px, 4vw, 60px) 12vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
}

/* ---- Title ---- */
.mailmag-title-wrap {
    position: relative;
    width: 100%;
    margin-bottom: clamp(20px, 2.5vw, 40px);
    min-height: clamp(100px, 14vw, 200px);
    display: flex;
    align-items: flex-end;
}

/* イラスト：左端・背景レイヤー */
.mailmag-title-illust {
    position: absolute;
    left: 0;
    bottom: 0;
    width: clamp(180px, 28vw, 440px);
    height: auto;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* タイトルテキストブロック：スライダー右端に揃える */
.mailmag-title-text {
    margin-left: auto;
    text-align: right;
    z-index: 1;
}

.mailmag-title-main {
    font-family: 'M PLUS 1', sans-serif;
    font-size: clamp(36px, 6vw, 88px);
    font-weight: 800;
    color: #d15b60;
    letter-spacing: 0.02em;
    line-height: 1.05;
    display: block;
    margin-right: 1em;
}

/* /BLOG 行：margin-right をリセットして右端に揃える */
.mailmag-title-main--blog {
    margin-right: 0;
    position: relative;
    top: -0.2em;
}

.mailmag-title-kana {
    font-family: 'M PLUS 1', sans-serif;
    font-size: clamp(11px, 1.2vw, 16px);
    font-weight: 500;
    color: #d15b60;
    letter-spacing: 0.2em;
    margin-top: 4px;
    margin-bottom: 2px;
    margin-right: 1em;
    opacity: 0.75;
    text-align: left;
}

/* =============================================
   カードスライダー
   =============================================
   .mailmag-slider-outer  : overflow:hidden でクリップ
     .mailmag-track        : translateX で動くレール
       .mailmag-card × n   : カード（追加はHTMLへの追記だけでOK）
   ============================================= */

.mailmag-slider-outer {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: grab;
}

.mailmag-slider-outer:active {
    cursor: grabbing;
}

/* スクロールトラック */
.mailmag-track {
    display: flex;
    gap: clamp(12px, 1.6vw, 24px);
    will-change: transform;
}

/* ---- カード ---- */
.mailmag-card {
    flex: 0 0 clamp(280px, 32vw, 400px);
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    transition: box-shadow 0.2s, transform 0.2s;
    user-select: none;
}

.mailmag-card:hover {
    box-shadow: 0 6px 24px rgba(209, 91, 96, 0.18);
    transform: translateY(-3px);
}

.mailmag-card-inner {
    border: 3px solid #ffe9b0;
    border-radius: 6px;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.mailmag-card-thumb {
    flex: 0 0 110px;
    overflow: hidden;
}

.mailmag-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mailmag-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(10px, 1.2vw, 16px) clamp(10px, 1.2vw, 16px);
    gap: 6px;
}

.mailmag-card-vol {
    font-family: 'M PLUS 1', sans-serif;
    font-size: clamp(10px, 0.9vw, 12px);
    font-weight: 700;
    color: #d15b60;
    letter-spacing: 0.05em;
}

.mailmag-card-subject {
    font-family: 'M PLUS 1', sans-serif;
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 700;
    color: #333;
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.mailmag-card-link {
    font-family: 'M PLUS 1', sans-serif;
    font-size: clamp(10px, 0.85vw, 12px);
    color: #d15b60;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.03em;
    align-self: flex-start;
}

.mailmag-card-link:hover {
    text-decoration: underline;
}

/* ---- Dots ---- */
.mailmag-dots {
    display: flex;
    gap: 9px;
    justify-content: center;
    margin-top: 18px;
    flex-wrap: wrap;
    width: 100%;
}

.mailmag-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.25s, transform 0.25s;
}

.mailmag-dot--active {
    background: #d15b60;
    transform: scale(1.25);
}

/* ---- Mobile (〜599px) ---- */
@media (max-width: 599px) {
    .mailmag-section {
        margin-top: -300px;
    }

    .mailmag-bg-slice--mid {
        min-height: 115px;
    }

    .mailmag-inner {
        padding: 54px 16px 44px;
    }

    .mailmag-card {
        flex: 0 0 240px;
    }

    .mailmag-title-wrap {
        min-height: clamp(80px, 28vw, 160px);
    }

    .mailmag-title-illust {
        width: clamp(120px, 42vw, 220px);
    }

    .mailmag-title-text {
        margin-right: 4px;
    }

    .mailmag-title-main {
        font-size: clamp(28px, 8.5vw, 36px);
    }
}

/* ---- Tablet (600px〜1023px) ---- */
@media (min-width: 600px) and (max-width: 1023px) {
    .mailmag-section {
        margin-top: clamp(-220px, -40vw, -400px);
    }

    .mailmag-inner {
        padding: 13vw clamp(20px, 3vw, 40px) 12vw;
    }
}

/* =====================
   WORKS SECTION
   ===================== */

.works-section {
    position: relative;
    background-color: #c3e34e;
    width: 100%;
    overflow: hidden;
    padding-top: 70px;
    padding-bottom: 70px;
    border-radius: 70px;
}

/* Header */
.works-header {
    display: flex;
    justify-content: center;
    padding: 0 40px 24px;
    width: 100%;
}

.works-header-group {
    position: relative;
    max-width: 1400px;
    width: 100%;
}

.works-illust {
    width: clamp(120px, 22vw, 400px);
    height: auto;
    pointer-events: none;
    user-select: none;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* Layered WORKS title — PC: illust と title-img を横並び */
.works-title-stack {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    flex-shrink: 0;
    width: 100%;
    gap: 20px;
}

/* PC: illust は左側 */
.works-title-stack > .works-illust {
    order: 1;
    align-self: flex-end;
}

/* PC: line-works は右側、残り幅を使う */
.works-title-stack > .works-title-img {
    order: 3;
    flex: 1;
    min-width: 0;
}

.works-title-bottom {
    display: flex;
    align-items: baseline;
    gap: 12px;
    position: absolute;
    bottom: 0;
    left: clamp(90px, 16.5vw, 300px); /* illust右端に40〜100px重なる */
    right: auto;
    z-index: 2;
}

.works-title-label {
    font-family: 'M PLUS 1', sans-serif;
    font-size: clamp(13px, 1.6vw, 20px);
    font-weight: 500;
    color: #35854b;
    white-space: nowrap;
    letter-spacing: 0.05em;
    user-select: none;
    line-height: 1;
}

.works-title-img {
    width: 640px;
    height: auto;
    display: block;
    user-select: none;
    pointer-events: none;
}

.works-title-solid {
    font-family: 'M PLUS 1', sans-serif;
    font-size: clamp(42px, 8vw, 129px);
    font-weight: 600;
    color: #35854b;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
}

/* Slider rows */
.works-slider-wrap {
    overflow: hidden;
    width: 100%;
}

.works-slider-wrap--second {
    margin-top: 12px;
}

.works-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

/* Item size: mobile → tablet → PC */
.works-item {
    flex-shrink: 0;
    width: 220px;
    height: 220px;
    border-radius: 20px;
    overflow: hidden;
    margin-right: 12px;
}

@media (min-width: 600px) {
    .works-item {
        width: 300px;
        height: 300px;
        margin-right: 14px;
    }
}

@media (min-width: 1024px) {
    .works-item {
        width: 400px;
        height: 400px;
        margin-right: 16px;
    }
}

.works-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Keyframes — right scroll: track moves left→right (items appear from left) */
@keyframes worksScrollRight {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0%); }
}

/* Keyframes — left scroll: track moves right→left (items appear from right) */
@keyframes worksScrollLeft {
    from { transform: translateX(0%); }
    to   { transform: translateX(-50%); }
}

/* Mobile durations: 10 items × (220+12)px = 2320px → ~29s @80px/s */
.works-track--right {
    animation: worksScrollRight 29s linear infinite;
}
.works-track--left {
    animation: worksScrollLeft 29s linear infinite;
}

/* Tablet: 10 × (300+14) = 3140px → ~39s */
@media (min-width: 600px) {
    .works-track--right { animation-duration: 39s; }
    .works-track--left  { animation-duration: 39s; }
}

/* PC: 10 × (400+16) = 4160px → ~52s */
@media (min-width: 1024px) {
    .works-track--right { animation-duration: 52s; }
    .works-track--left  { animation-duration: 52s; }
}

/* Footer */
.works-footer-area {
    padding: 32px 40px 0;
    max-width: 1920px;
    margin: 0 auto;
}

.works-footer-inner {
    display: flex;
    justify-content: flex-end;
}

.works-viewmore {
    display: inline-flex;
    align-items: center;
    background-color: #ffffff;
    color: #1a1a1a;
    font-family: 'M PLUS 1', sans-serif;
    font-size: 18px;
    font-weight: 500;
    padding: 12px 30px;
    border-radius: 9999px;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: background-color 0.3s, color 0.3s;
}

.works-viewmore::after {
    content: ' ▶';
    font-size: 11px;
    margin-left: 6px;
}

.works-viewmore:hover {
    background-color: #1a1a1a;
    color: #ffffff;
}

/* Mobile overrides */
@media (max-width: 599px) {
    .works-section {
        padding-top: 32px;
        padding-bottom: 44px;
        border-radius: 35px; /* 半分の丸み */
    }

    /* SERVICE → WORKS スペース：230px の 2/3 ≒ 153px */
    .service-section {
        padding-bottom: 153px;
    }

    .works-header {
        padding: 0 0 37px;
    }

    /* 重ねレイアウト用コンテナ */
    .works-header-group {
        position: relative;
    }

    /* works-title-stack：line-works.png の実寸でコンテナ高さを確保し、他2要素をabsoluteで重ねる */
    .works-title-stack {
        display: block;
        position: relative;
        width: 100%;
    }

    /* ③ 最背面：line-works.png ― 全幅・通常フローでコンテナ高さを決定 */
    .works-title-img {
        display: block;
        width: 75%;
        box-sizing: border-box;
        padding-left: 5px;
        padding-right: 5px;
        height: auto;
        position: relative;
        z-index: 1;
        margin-left: auto;
        margin-right: 0;
    }

    /* ② illust_works.png ― テキストと下揃え */
    .works-illust {
        display: block;
        position: absolute;
        bottom: 0;
        top: auto;
        left: 0;
        transform: none;
        width: clamp(67px, 24vw, 120px);
        height: auto;
        z-index: 8;
        padding-left: 0;
    }

    /* ① 最前面：制作実績 WORKS テキスト ― illustの右端に「制」がかかる位置 */
    .works-title-bottom {
        position: absolute;
        bottom: 0;
        top: auto;
        left: calc(clamp(67px, 24vw, 120px) * 0.75);
        right: 0;
        transform: none;
        z-index: 10;
        display: flex;
        align-items: baseline;
        gap: 10px;
        justify-content: flex-start;
        padding: 0;
        margin-bottom: 0;
    }

    .works-title-label {
        font-size: clamp(13px, 4vw, 18px);
    }

    .works-title-solid {
        font-size: clamp(32px, 10vw, 56px);
    }

    .works-footer-area {
        padding: 20px 16px 0;
    }

    .works-viewmore {
        font-size: 15px;
        padding: 10px 22px;
    }

    .works-slider-wrap--second {
        margin-top: 8px;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .works-header {
        padding: 0 28px 20px;
    }

    .works-footer-area {
        padding: 24px 28px 0;
    }
}
/* ============================================================
 * NEWS Section – Scroll Animation (PC only, min-width: 600px)
 * 順序: 1. 正円スケールイン  2. タイトル  3. リスト
 * ============================================================ */
@media (min-width: 600px) {

  .news-anim-circle {
    transform: scale(0);
    transform-origin: center center;
  }

  .news-anim-title {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .news-anim-list {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .news-anim-title.is-visible,
  .news-anim-list.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================
   OFFICE SECTION
   office.svg（1920×2177.7）をベースに再構築。
   背景：ライトブルー地（カラー） + グレーブロブ×2 + 白ブロブカード（office_bg.svg / 1枚絵をstretchで追従）
   .office-bg-wrap を grid 1セルにして .office-bg と .office-inner を重ね、
   背景が常にコンテンツの高さに追従する（NEWSセクションと同じ手法）。
   ===================== */

.office-section {
    position: relative;
    width: 100%;
    padding: 0 20px 0;
    background-color: rgba(236, 243, 248, 0.7); /* 一番下の背景ベタ：不透明度70% */
}

.office-bg-wrap {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

/* ---- 背景（グレーブロブ×2 + 白ブロブカード）---- */
.office-bg {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    position: relative;
    z-index: 0;
    pointer-events: none;
}

.office-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
}

/* ---- コンテンツラッパー（背景と同グリッドセルに重ねる）---- */
.office-inner {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 1;
    padding: clamp(48px, 8vw, 96px) clamp(20px, 4vw, 24px) clamp(64px, 11vw, 130px);
}

/* ---- Header：猫イラスト＋OFFICEロゴ＋会社概要 ---- */
.office-header {
    position: relative;
    width: clamp(160px, 18vw, 218px);
    aspect-ratio: 348.4 / 169.7;
    margin: 0 0 clamp(20px, 3vw, 32px) clamp(0px, 6vw, 80px);
}

.office-header__cat {
    position: absolute;
    left: 0;
    top: 0;
    width: 61.2%;
    height: auto;
    display: block;
    pointer-events: none;
    user-select: none;
}

.office-header__text {
    position: absolute;
    left: 28.4%;
    top: 42.9%;
    white-space: nowrap;
}

.office-wordmark {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3.6vw, 43px);
    color: #174f78;
    line-height: 1;
    letter-spacing: 0.01em;
}

.office-subtitle {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 1.3vw, 16px);
    color: #174f78;
    letter-spacing: 0.1em;
    margin-top: clamp(4px, 0.8vw, 8px);
}

/* ---- 見出し：About Us / Access ---- */
.office-heading {
    font-family: 'M PLUS 1', sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 2.3vw, 28px);
    color: #333;
    text-align: center;
    letter-spacing: 0.02em;
    margin: 0 0 clamp(28px, 4vw, 48px);
}

.office-heading--access {
    margin-top: clamp(48px, 7vw, 90px);
}

/* ---- 会社概要テーブル ---- */
.office-table {
    width: 100%;
    max-width: 625px;
    margin: 0 auto;
}

.office-row {
    display: flex;
    align-items: baseline;
    gap: clamp(16px, 3vw, 40px);
    padding: clamp(13px, 1.8vw, 18px) 0;
    border-top: 1px solid #ddd;
}

.office-row:first-child {
    border-top: none;
}

.office-row__label {
    flex: 0 0 clamp(78px, 17vw, 160px);
    text-align: right;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(13px, 1.4vw, 16px);
    font-weight: 400;
    color: #333;
}

.office-row__value {
    flex: 1;
    min-width: 0;
    text-align: left;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(13px, 1.4vw, 16px);
    font-weight: 400;
    color: #333;
    line-height: 1.8;
    margin: 0;
}

.office-row__value--multi span {
    display: block;
}

/* ---- Access：地図（Google Mapsの実地図をiframeで埋め込み） ---- */
.office-map {
    width: 100%;
    max-width: 625px;
    aspect-ratio: 720 / 380;
    margin: 0 auto;
    border: 1px solid #ddd;
    overflow: hidden;
}

.office-map iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.office-map-address {
    width: 100%;
    max-width: 625px;
    margin: clamp(10px, 1.5vw, 14px) auto 0;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(12px, 1.2vw, 14px);
    color: #333;
}

/* ---- Mobile：テーブルを縦積みに ---- */
@media (max-width: 599px) {
    /* モバイルは縦に細長くなり過ぎてブロブが歪むため、
       角丸の白カードに切り替える（グレーのブロブは省略） */
    .office-bg-img {
        display: none;
    }

    .office-bg-wrap {
        display: block;
    }

    .office-inner {
        background-color: #fff;
        border-radius: 32px;
        padding: 48px 20px 64px;
    }

    .office-header {
        margin-left: 0;
    }

    .office-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 14px 0;
    }

    .office-row__label {
        flex: none;
        text-align: left;
        font-weight: 600;
        color: #174f78;
    }

    .office-row__value {
        text-align: left;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .office-header {
        margin-left: clamp(0px, 3vw, 40px);
    }
}

/* ============================================================
   Consulting Page
   全セレクタを .consulting-page 配下にスコープして
   index.html の既存スタイルと競合しないようにしています
   ============================================================ */

/* ─── ページ基本 ─── */
.consulting-page { padding-top: 68px; }
@media (max-width: 767px) { .consulting-page { padding-top: 60px; } }

/* ─── FVセクション ─── */
.consulting-page .fv-section {
    position: relative;
    width: 100%;
    background: #fff;
    overflow: hidden;
}

/* ─── 写真キャンバス ─── */
.consulting-page .fv-canvas {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: calc(1015 / 1200 * 100%);
    overflow: visible;
}

/* 白台形+黒背景 */
.consulting-page .fv-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%201015%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%221200%22%20height%3D%221015%22%20fill%3D%22black%22/%3E%3Cpolygon%20points%3D%220%2C0%20344%2C0%201014%2C620%201200%2C620%201200%2C1015%200%2C1015%22%20fill%3D%22white%22/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

/* ─── 写真・帯（全パーツ % 配置）─── */
.consulting-page .fv-canvas .parts1,
.consulting-page .fv-canvas .parts2,
.consulting-page .fv-canvas .parts3,
.consulting-page .fv-canvas .parts4,
.consulting-page .fv-canvas .parts5,
.consulting-page .fv-canvas .parts6,
.consulting-page .fv-canvas .parts7,
.consulting-page .fv-canvas .parts8 {
    position: absolute;
    z-index: 2;
}

.consulting-page .fv-canvas .parts1 { left:  0.0000%; top: 57.094%; width:  5.833%; height: 26.601%; }
.consulting-page .fv-canvas .parts2 { left:  7.9046%; top: 39.606%; width: 17.917%; height: 53.990%; }
.consulting-page .fv-canvas .parts3 { left: 27.8931%; top: 50.739%; width:  2.750%; height: 49.261%; }
.consulting-page .fv-canvas .parts4 { left: 32.7147%; top: 25.714%; width: 19.750%; height: 45.222%; }
.consulting-page .fv-canvas .parts5 { left: 54.5363%; top: 14.286%; width:  8.333%; height: 61.084%; }
.consulting-page .fv-canvas .parts6 { left: 64.9409%; top: -8.867%; width: 16.333%; height: 69.951%; }
.consulting-page .fv-canvas .parts7 { left: 83.3454%; top:  8.867%; width: 10.583%; height: 29.261%; }
.consulting-page .fv-canvas .parts8 { left: 96.0000%; top: -6.108%; width:  4.000%; height: 25.714%; }
.consulting-page .fv-canvas img { display: block; width: 100%; height: 100%; }

/* ─── 見出しテキスト ─── */
.consulting-page .fv-text {
    position: absolute;
    left: calc(max(0px, (100% - 1200px) / 2) + 32px);
    top: 10.837%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.consulting-page .fv-text-consulting {
    font-family: 'Roboto', sans-serif;
    font-size: 4.47vw;
    font-weight: 400;
    color: #333;
    letter-spacing: 0em;
    line-height: 1;
    margin: 0;
    margin-right: 1em;
    white-space: nowrap;
}
.consulting-page .fv-text-dx {
    font-family: 'Playfair Display', serif;
    font-size: 10.22vw;
    font-weight: 400;
    color: #333;
    line-height: 1;
    margin-top: 0.5vw;
    margin-left: 1em;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.consulting-page .fv-text-dx .tilde {
    font-family: 'Playfair Display', serif;
    font-size: 70px;
    font-weight: 400;
    vertical-align: 0.1em;
    display: inline-block;
    transform: translateY(-10px);
}
@media (min-width: 1200px) {
    .consulting-page .fv-text-consulting { font-size: 54px; }
    .consulting-page .fv-text-dx         { font-size: 123px; margin-top: 6px; }
}

/* ─── ボタン + 本文 ─── */
.consulting-page .fv-lower {
    position: absolute;
    top: 67%;
    left: 0;
    width: 100%;
    z-index: 5;
}
.consulting-page .fv-lower-inner {
    position: relative;
    width: 100%;
}
.consulting-page .fv-btn-wrap {
    padding-left: calc(703 / 1200 * 100%);
    padding-bottom: 0;
}
.consulting-page .fv-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #333;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 400;
    border-radius: 100px;
    padding: 13px 16px 13px 20px;
    text-decoration: none;
    letter-spacing: 0.12em;
    white-space: nowrap;
    width: 184px;
    justify-content: space-between;
    transition: opacity 0.3s;
}
.consulting-page .fv-btn:hover { opacity: 0.75; }

@media (min-width: 600px) {
    .consulting-page .fv-btn {
        width: 221px;
        padding: 16px 19px 16px 24px;
        gap: 12px;
        font-size: 17px;
    }
    .consulting-page .fv-btn-arrow {
        width: 31px;
        height: 31px;
    }
    .consulting-page .fv-btn-arrow svg {
        width: 12px;
        height: 12px;
    }
}
.consulting-page .fv-btn-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    flex-shrink: 0;
}
.consulting-page .fv-btn-arrow svg {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.consulting-page .fv-body-text {
    font-family: 'Noto Serif JP', serif;
    font-size: 28px;
    font-weight: 400;
    color: #333;
    line-height: 1.87;
    letter-spacing: 0.02em;
    padding: 0 0 60px calc(337 / 1200 * 100%);
    margin: 80px 0 0;
    text-align: center;
}

@media (max-width: 1199px) {
    .consulting-page .fv-lower {
        position: static;
        width: 100%;
        background: #fff;
        padding: 32px 24px 48px;
    }
    .consulting-page .fv-btn-wrap {
        padding-left: 0;
        padding-bottom: 0;
        display: flex;
        justify-content: center;
    }
    .consulting-page .fv-body-text {
        padding: 0;
        margin-top: 80px;
        font-size: 28px;
        text-align: center;
    }
}

@media (max-width: 599px) {
    .consulting-page .fv-text { top: calc(10.837% - 35px); left: 2px; }
    .consulting-page .fv-text-consulting { font-size: 5.37vw; }
    .consulting-page .fv-text-dx { font-size: 50px; margin-top: 5px; }
    .consulting-page .fv-text-dx .tilde { font-size: 35px; transform: translateY(-2px); }
    .consulting-page .fv-lower { padding: 24px 20px 40px; }
    .consulting-page .fv-btn {
        width: calc(100% - 80px);
        max-width: 190px;
        font-size: 15px;
        padding: 11px 14px 11px 18px;
        gap: 8px;
    }
    .consulting-page .fv-btn-arrow {
        width: 22px;
        height: 22px;
    }
    .consulting-page .fv-btn-arrow svg {
        width: 9px;
        height: 9px;
    }
    .consulting-page .fv-body-text {
        margin-top: 80px;
        font-size: 18px;
        line-height: 2;
    }
}

/* ─── FV パーツ スライドアニメーション ─── */
.consulting-page .fv-canvas .parts1,
.consulting-page .fv-canvas .parts2,
.consulting-page .fv-canvas .parts3,
.consulting-page .fv-canvas .parts4,
.consulting-page .fv-canvas .parts5,
.consulting-page .fv-canvas .parts6,
.consulting-page .fv-canvas .parts7,
.consulting-page .fv-canvas .parts8 {
    opacity: 0;
}

.consulting-page .fv-canvas .parts1,
.consulting-page .fv-canvas .parts3,
.consulting-page .fv-canvas .parts5,
.consulting-page .fv-canvas .parts7 {
    transform: translateY(60px);
}

.consulting-page .fv-canvas .parts2,
.consulting-page .fv-canvas .parts4,
.consulting-page .fv-canvas .parts6,
.consulting-page .fv-canvas .parts8 {
    transform: translateY(-60px);
}

@keyframes cns-fv-slide-up {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes cns-fv-slide-down {
    to { opacity: 1; transform: translateY(0); }
}

.consulting-page .fv-canvas.is-visible .parts1,
.consulting-page .fv-canvas.is-visible .parts3,
.consulting-page .fv-canvas.is-visible .parts5,
.consulting-page .fv-canvas.is-visible .parts7 {
    animation: cns-fv-slide-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.consulting-page .fv-canvas.is-visible .parts2,
.consulting-page .fv-canvas.is-visible .parts4,
.consulting-page .fv-canvas.is-visible .parts6,
.consulting-page .fv-canvas.is-visible .parts8 {
    animation: cns-fv-slide-down 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.consulting-page .fv-canvas.is-visible .parts1 { animation-delay: 0.10s; }
.consulting-page .fv-canvas.is-visible .parts2 { animation-delay: 0.00s; }
.consulting-page .fv-canvas.is-visible .parts3 { animation-delay: 0.25s; }
.consulting-page .fv-canvas.is-visible .parts4 { animation-delay: 0.15s; }
.consulting-page .fv-canvas.is-visible .parts5 { animation-delay: 0.35s; }
.consulting-page .fv-canvas.is-visible .parts6 { animation-delay: 0.05s; }
.consulting-page .fv-canvas.is-visible .parts7 { animation-delay: 0.20s; }
.consulting-page .fv-canvas.is-visible .parts8 { animation-delay: 0.30s; }

@media (prefers-reduced-motion: reduce) {
    .consulting-page .fv-canvas .parts1,
    .consulting-page .fv-canvas .parts2,
    .consulting-page .fv-canvas .parts3,
    .consulting-page .fv-canvas .parts4,
    .consulting-page .fv-canvas .parts5,
    .consulting-page .fv-canvas .parts6,
    .consulting-page .fv-canvas .parts7,
    .consulting-page .fv-canvas .parts8 {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ─── World Map Section ─── */
.consulting-page .worldmap-section {
    width: 100%;
    background: #fff;
    padding: 60px 0;
}
.consulting-page .worldmap-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}
.consulting-page .worldmap-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 55.56%;
    --hex-w: 80px;
}
.consulting-page .worldmap-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}
.consulting-page .worldmap-dx {
    font-family: 'Noto Serif JP', serif;
    font-size: calc(var(--hex-w) * 0.40);
    font-weight: 400;
    color: #222;
    line-height: 1;
    margin: 0 0 0.15em;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.consulting-page .worldmap-sub {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: calc(var(--hex-w) * 0.075);
    font-weight: 400;
    color: #555;
    letter-spacing: 0.12em;
    white-space: nowrap;
    margin: 0;
    line-height: 1;
}
@media (max-width: 767px) {
    .consulting-page .worldmap-section { padding: 40px 0; }
    .consulting-page .worldmap-inner   { padding: 0 16px; }
}
@media (max-width: 599px) {
    .consulting-page .worldmap-section { padding: 32px 0; }
    .consulting-page .worldmap-inner   { padding: 0; }
}

/* ─── 特徴セクション ─── */
.consulting-page .feature-section {
    width: 100%;
    background: #fff;
    padding: 80px 0 100px;
}
.consulting-page .feature-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0 60px;
    align-items: start;
    min-height: 420px;
    position: relative;
    overflow: hidden;
}
.consulting-page .feature-left {
    position: relative;
    padding-top: 20px;
    z-index: 2;
}
.consulting-page .feature-icon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 2;
    margin-left: -20px;
}
.consulting-page .feature-icon {
    width: 110px;
    height: auto;
    display: block;
}
.consulting-page .feature-label {
    font-family: 'Noto Serif JP', serif;
    font-size: 22px;
    font-weight: 400;
    color: #333;
    letter-spacing: 0.2em;
    margin: 0;
    line-height: 1;
}
.consulting-page .feature-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    z-index: 1;
}
.consulting-page .feature-right {
    padding-top: 40px;
    padding-bottom: 40px;
    position: relative;
    z-index: 2;
}
.consulting-page .feature-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #333;
    line-height: 2.2;
    letter-spacing: 0.02em;
    margin: 0 0 2em;
}
.consulting-page .feature-text:last-child {
    margin-bottom: 0;
}

@media (min-width: 600px) and (max-width: 990px) {
    .consulting-page .feature-inner {
        grid-template-columns: 200px 1fr;
        gap: 0 40px;
        padding: 0 32px;
    }
    .consulting-page .feature-icon { width: 90px; }
    .consulting-page .feature-label { font-size: 20px; }
    .consulting-page .feature-text { font-size: 16px; }
    /* アイコン・ラベルが feature-line の斜め線に重なるため、その分左へ寄せる */
    .consulting-page .feature-icon-wrap { margin-left: -75px; }
}

@media (max-width: 599px) {
    .consulting-page .feature-section { padding: 60px 0 70px; }
    .consulting-page .feature-inner {
        grid-template-columns: 1fr;
        gap: 40px 0;
        padding: 0 24px;
        min-height: auto;
    }
    .consulting-page .feature-left {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
        padding-top: 0;
    }
    .consulting-page .feature-icon-wrap {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        margin-left: 0;
    }
    .consulting-page .feature-icon { width: 60px; }
    .consulting-page .feature-label { font-size: 20px; }
    .consulting-page .feature-line { display: none; }
    .consulting-page .feature-right { padding-top: 0; padding-bottom: 0; }
    .consulting-page .feature-text { font-size: 15px; line-height: 2; margin-bottom: 1.5em; }
}

.consulting-page .feature-section + .feature-section {
    padding-top: 60px;
}
@media (max-width: 900px) {
    .consulting-page .feature-section + .feature-section { padding-top: 48px; }
}
@media (max-width: 599px) {
    .consulting-page .feature-section + .feature-section { padding-top: 40px; }
}