/* =============================================
           CSS Variables
           ============================================= */
      :root {
        /* Primary Colors - Blue */
        --color-blue-dark: #1e4c6d;
        --color-blue-medium: #2d6a8e;
        --color-blue-light: #4a90b8;

        /* Accent Colors */
        --color-accent-yellow: #ffd700;
        --color-accent-orange: #f77f00;

        /* Background Colors */
        --color-bg-white: #ffffff;
        --color-bg-light: #fef6ed;
        --color-bg-light-alt: #d0e8f0;
        --color-bg-gray: #ededed;

        /* Text Colors */
        --color-text-primary: #2a2a2a;
        --color-text-secondary: #475569;
        --color-text-muted: #94a3b8;

        /* Border Colors */
        --color-border-light: #b1b7be;
        --color-border-medium: #cbd5e1;

        /* Font */
        --font-jp: "Noto Sans JP", sans-serif;
        --font-en: "Sora", sans-serif;
        --font-number: "Bebas Neue", sans-serif;
      }

      /* =============================================
           Reset & Base
           ============================================= */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html {
        font-size: 16px;
        scroll-behavior: smooth;
      }

      body {
        font-family: var(--font-jp);
        background: var(--color-bg-white);
        color: var(--color-text-primary);
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
      }

      /* =============================================
           Header - ロゴ
           ============================================= */
      .site-header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        padding: 24px 40px;
        display: flex;
        justify-content: flex-start; /* PC: 左寄せ */
        align-items: center;
      }

      .header-logo-text-link {
        display: block;
        text-decoration: none;
        color: var(--color-text-primary);
        opacity: 1;
        transition: opacity 0.3s ease;
      }

      .header-logo-text-link:hover {
        opacity: 0.8;
      }

      .header-logo-text-wrapper {
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .header-logo-sub {
        font-size: 0.75rem; /* 12px */
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 2px;
        color: var(--color-text-primary);
        font-family: var(--font-jp);
      }

      .header-logo-main {
        font-size: 1.5rem; /* 24px */
        font-weight: 900;
        line-height: 1.1;
        color: var(--color-text-primary);
        letter-spacing: 0.02em;
        font-family: var(--font-jp);
        margin: 0;
      }

      @media (max-width: 1024px) {
        .site-header {
          justify-content: center; /* Tablet/SP: 中央寄せ */
          padding: 16px 20px;
        }

        .header-logo-text-wrapper {
          text-align: center;
          align-items: center;
        }

        .header-logo-sub {
          font-size: 0.7rem; /* 11px */
        }

        .header-logo-main {
          font-size: 1.25rem; /* 20px */
        }
      }

      /* =============================================
           Hero Section - ファーストビュー
           ============================================= */
      .hero {
        position: relative;
        /* min-height: 100vh; */
        overflow: hidden;
        padding-top: 0;
      }

      .hero-ribbon {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
        pointer-events: none;
      }

      .hero-ribbon svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .ribbon-path {
        opacity: 0.25;
        fill: none;
        stroke-linejoin: round;
        /* PC (Default) */
        transform: translate(1400px, 0) scale(-1, 1);
      }

      @media (max-width: 1024px) {
        .ribbon-path {
          /* Tablet/Mobile: Move down to overlap with image instead of text */
          transform: translate(292px, 231px) scale(1, 1);
        }
      }

      @media (max-width: 500px) {
        .ribbon-path {
          /* Mobile Small: Specific adjustment requested */
          transform: translate(710px, 160px) scale(1, 1);
        }
      }


      .hero-container {
        position: relative;
        z-index: 1;
        max-width: 1400px;
        margin: 0 auto;
        padding: 110px 40px 80px;
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        gap: 60px;
        align-items: center;
        min-height: calc(100vh - 80px);
      }

      .hero-content {
        position: relative;
      }

      .hero-subtitle {
        font-size: 1.125rem;
        font-weight: 500;
        color: var(--color-text-secondary);
        margin-bottom: 32px;
      }

      .br-xs {
        display: none;
      }

      .hero-title {
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 900;
        line-height: 1.35;
        margin-bottom: 24px;
        color: var(--color-text-primary);
        letter-spacing: -0.02em;
      }

      .hero-title .highlight {
        position: relative;
        display: inline;
      }

      .hero-title .highlight::after {
        content: "";
        position: absolute;
        bottom: 0.1em;
        left: 0;
        width: 100%;
        height: 0.3em;
        background: var(--color-accent-yellow);
        z-index: -1;
        border-radius: 2px;
      }

      .hero-title .accent {
        color: var(--color-accent-orange);
      }

      .hero-description {
        font-size: 1.125rem;
        color: var(--color-text-secondary);
        margin-bottom: 32px;
        line-height: 1.9;
      }

      .stats-wrapper {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 3.5rem !important;
      }

      .stats-image {
        max-width: 100%;
        height: auto;
        width: 500px;
        display: block;
      }

      .stats-row {
        display: flex;
        gap: 32px;
      }

      .stat-circle {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
      }

      .stats-row-sub .stat-circle::after {
        content: "";
        position: absolute;
        right: -16px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 60%;
        background: var(--color-border-light);
      }

      .stats-row-sub .stat-circle:last-child::after {
        display: none;
      }

      .stat-label {
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-text-primary);
        margin-bottom: 4px;
      }

      .stat-value-wrap {
        display: flex;
        align-items: baseline;
        gap: 4px;
      }

      .stat-number {
        font-family: var(--font-number);
        font-size: 3.5rem;
        font-weight: 400;
        color: var(--color-accent-orange);
        line-height: 1;
        letter-spacing: 0.02em;
      }

      .stat-unit {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--color-text-primary);
      }

      .stat-prefix {
        font-size: 1rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin-right: 4px;
      }

      .stat-suffix {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin-left: 4px;
      }

      .stat-desc {
        font-size: 1rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin-top: 4px;
      }

      @media (max-width: 768px) {
        .stat-prefix {
          font-size: 0.875rem;
        }
        .stat-suffix {
          font-size: 1rem;
        }
        .stat-desc {
          font-size: 0.875rem;
        }
      }

      .hero-cta {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        padding: 23px 46px;
        background: var(--color-accent-orange);
        color: #ffffff;
        font-size: 1.3rem;
        font-weight: 700;
        border-radius: 50px;
        text-decoration: none;
        transition: opacity 0.3s ease;
        box-shadow: 0 4px 20px rgba(247, 127, 0, 0.3);
        opacity: 1;
      }

      .hero-cta:hover {
        opacity: 0.8;
      }

      .hero-cta svg {
        width: 24px;
        height: 24px;
        transition: transform 0.3s ease;
      }

      .hero-cta:hover svg {
        transform: translateX(4px);
      }

      .hero-visual {
        position: relative;
      }

      .hero-image {
        width: 100%;
        aspect-ratio: 4/3;
        background: var(--color-bg-white);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
        
      }

      .slideshow-container {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1.5s ease-in-out;
        background: var(--color-bg-gray);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text-muted);
      }

      .slide.active {
        opacity: 1;
        z-index: 1;
      }

      .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .slide-indicators {
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 10;
      }

      .slide-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        border: 1px solid rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .slide-indicator.active {
        background: var(--color-accent-orange);
        transform: scale(1.2);
      }

      .slide-indicator:hover {
        background: rgba(255, 255, 255, 0.8);
      }

      /* =============================================
           Section 1: こんな悩みありませんか？
           ============================================= */
      .problems-section {
        background: #fff8f0;
        padding: 80px 40px 75px;
        position: relative;
      }

      /* .problems-divider {
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 80px solid transparent;
        border-right: 80px solid transparent;
        border-top: 40px solid var(--color-bg-gray);
        z-index: 10;
      } */

      .problems-title {
        text-align: center;
        font-size: 2.5rem;
        font-weight: 900;
        margin-bottom: 5rem;
        position: relative;
        display: block;
        width: 100%;
        letter-spacing: -0.02em;
      }

      .problems-title::before,
      .problems-title::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 60px;
        height: 3px;
        background: var(--color-accent-yellow);
      }

      .problems-title::before {
        margin-right: 16px;
      }

      .problems-title::after {
        margin-left: 16px;
      }

      .problems-title .problems-highlight {
        color: var(--color-accent-orange);
        display: inline;
        margin: 0;
        padding: 0;
      }

      .problems-container {
        max-width: 900px;
        margin: 0 auto;
      }

      /* カード型レイアウト（パターン1: 対話型） */
      .card-v1 {
        margin-bottom: 56px;
      }

      .card-v1 .problem-part {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 10px;
      }

      .card-v1 .problem-icon {
        width: 120px;
        height: 120px;
        flex-shrink: 0;
      }

      .card-v1 .problem-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .card-v1 .problem-bubble {
        flex: 1;
        background: #ededed;
        padding: 24px 28px;
        border-radius: 16px;
        position: relative;
      }

      .card-v1 .problem-bubble::before {
        content: "";
        position: absolute;
        left: -10px;
        top: 24px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #ededed;
      }

      .card-v1 .problem-text {
        font-size: 1.3rem;
        line-height: 1.8;
        margin: 0;
        color: var(--color-text-primary);
      }

      .card-v1 .answer-part {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        flex-direction: row-reverse;
      }

      .card-v1 .answer-icon {
        width: 120px;
        height: 120px;
        flex-shrink: 0;
      }

      .card-v1 .answer-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .card-v1 .answer-bubble {
        flex: 1;
        background: white;
        padding: 24px 28px;
        border-radius: 16px;
        border: 2px solid var(--color-accent-orange);
        position: relative;
      }

      .card-v1 .answer-bubble::after {
        content: "";
        position: absolute;
        right: -11px;
        top: 24px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid var(--color-accent-orange);
      }

      .card-v1 .answer-text {
        font-size: 1.3rem;
        line-height: 1.8;
        margin: 0;
        color: var(--color-text-primary);
      }

      .marker-yellow {
        background: linear-gradient(
          transparent 60%,
          rgba(255, 215, 0, 0.4) 60%
        );
        font-weight: 700;
      }

      .problems-cta {
        text-align: center;
        font-size: 2.8rem;
        font-weight: 900;
        color: var(--color-text-primary);
        padding: 5rem 0 10rem;
        position: relative;
        line-height: 1.4;
      }

      .problems-cta .cta-highlight {
        color: var(--color-accent-orange);
      }

      .problems-cta .br-sp {
        display: none;
      }

      .use-case-intro-title {
        text-align: center;
        font-size: 2.25rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin-bottom: 24px;
        padding-bottom: 12px;
        border-bottom: 3px solid var(--color-accent-yellow);
        display: inline-block;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: fit-content;
      }

      .use-case-intro-text {
        text-align: center;
        font-size: 1.2rem;
        color: var(--color-text-secondary);
        line-height: 1.8;
        max-width: 800px;
        margin: 0 auto 7rem;
      }

      /* =============================================
           Section 2: 活用シーン
           ============================================= */
      .use-case-section {
            background: #fff8f0;
        padding: 5rem 40px 10rem;
      }

      .use-case-title {
        text-align: center;
        font-size: 2.5rem;
        font-weight: 900;
        margin-bottom: 24px;
        color: var(--color-text-primary);
        display: inline-block;
        width: 100%;
        line-height: 1.5;
      }

      .use-case-title .highlight {
        color: var(--color-accent-orange);
      }

      .use-case-title .br-sp {
        display: none;
      }

      .use-case-subtitle {
        text-align: center;
        font-size: 1rem;
        color: var(--color-text-secondary);
        margin-bottom: 7rem;
        line-height: 1.8;
      }

      .use-case-category {
        margin-bottom: 10rem;
        @media (max-width: 500px) {
              margin-bottom: 6rem;
        }
      }

      .use-case-category:last-child {
        margin-bottom: 0;
      }

      .category-title {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin-bottom: 5rem;
        display: inline-block;
        width: 100%;
        position: relative;
      }

      .category-title::after {
        content: "";
        display: block;
        width: 60px;
        height: 3px;
        background: var(--color-accent-yellow);
        margin: 8px auto 0;
      }

      .use-case-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
        max-width: 1400px;
        margin: 0 auto;
      }

      .use-case-item {
        text-align: center;
        background: white;
        padding: 32px 24px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

    

      .use-case-icon {
        width: 64px;
        height: 64px;
        margin: 0 auto 16px;
        color: var(--color-accent-orange);
      }

      .use-case-icon svg {
        width: 100%;
        height: 100%;
      }

      .use-case-label {
        font-size: 0.9rem;
        color: var(--color-text-primary);
        font-weight: 500;
      }

      /* =============================================
           Section 2.5: 画像1枚から理想のノベルティを
           ============================================= */
      .image-novelty-section {
        padding: 8rem 40px;
      }

      .image-novelty-container {
        max-width: 800px;
        margin: 0 auto;
      }

      .image-novelty-title {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--color-text-primary);
        margin-bottom: 40px;
        display: inline-block;
        padding-bottom: 8px;
        border-bottom: 3px solid var(--color-accent-yellow);
      }

      .image-novelty-content p {
        font-size: 1.125rem;
        line-height: 2;
        color: var(--color-text-primary);
        margin-bottom: 28px;
      }

      .image-novelty-content p:last-child {
        margin-bottom: 0;
      }

      .image-novelty-content .highlight-text {
        color: var(--color-text-primary);
        font-weight: 700;
      }

      .image-novelty-content .underline {
        background: linear-gradient(
          transparent 60%,
          rgba(255, 215, 0, 0.4) 60%
        );
        font-weight: 700;
      }

      .image-novelty-content .strong-text {
        font-weight: 700;
        color: var(--color-text-primary);
        margin-bottom: 32px;
      }

      .image-novelty-picture {
        display: block;
        width: 100%;
        max-width: 1200px;
        margin-left: 50%;
        transform: translateX(-50%);
        padding-top: 3rem;
      }

      .image-novelty-img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
      }

      /* =============================================
           Section 3: 強み3選
           ============================================= */
      .strengths-section {
        background: transparent;
        padding: 80px 40px;
      }

      .strengths-header {
        text-align: center;
        margin-bottom: 60px;
      }

      .strengths-title {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--color-text-primary);
        margin-bottom: 8px;
        display: inline-block;
        padding-bottom: 8px;
        border-bottom: 3px solid var(--color-accent-yellow);
      }

      .strengths-subtitle {
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-text-primary);
        letter-spacing: 0.1em;
        display: inline-block;
        padding-bottom: 8px;
        border-bottom: 3px solid var(--color-accent-yellow);
      }

      .strength-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        max-width: 1400px;
        margin: 0 auto 60px;
      }

      .strength-item:last-child {
        margin-bottom: 0;
      }

      .strength-item:nth-child(even) {
        direction: rtl;
      }

      .strength-item:nth-child(even) > * {
        direction: ltr;
      }

      .strength-image {
        background: var(--color-bg-gray);
        border-radius: 12px;
        aspect-ratio: 4/3;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text-muted);
        font-size: 0.875rem;
        overflow: hidden;
      }

      .strength-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .strength-content {
        padding: 0 16px;
      }

      .strength-number {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--color-accent-orange);
        display: inline;
        margin-right: 8px;
      }

      .strength-heading {
        font-size: 1.5rem;
        font-weight: 900;
        color: var(--color-text-primary);
        display: inline;
        line-height: 1.4;
      }

      .strength-title-wrapper {
        padding-bottom: 16px;
        border-bottom: 2px dashed var(--color-text-primary);
        margin-bottom: 16px;
      }

      .strength-description {
        font-size: 1rem;
        color: var(--color-text-secondary);
        line-height: 1.8;
        margin-top: 16px;
      }

      /* =============================================
           Section 4: 流れ
           ============================================= */
      .flow-section {
        padding: 80px 40px;
      }

      .flow-header {
        text-align: center;
        margin-bottom: 35px;
      }

      .flow-title {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--color-text-primary);
        display: inline-block;
        padding-bottom: 8px;
        border-bottom: 3px solid var(--color-accent-yellow);
      }

      .flow-intro {
        font-size: 1rem;
        color: var(--color-text-secondary);
        margin-bottom: 48px;
        line-height: 1.8;
        text-align: center;
      }

      .stepbar {
        margin: 0 auto;
        max-width: 1200px;
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .step-item {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 32px;
        padding: 32px 0;
        border-bottom: 1px solid var(--color-border-light);
      }

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

      .step-number-box {
        background: var(--color-accent-orange);
        color: white;
        padding: 16px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        box-shadow: 0 2px 8px rgba(247, 127, 0, 0.25);
      }

      .step-number-box::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid var(--color-accent-orange);
      }

      .step-label {
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        margin-bottom: 4px;
      }

      .step-number {
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 1;
      }

      .step-content h3 {
        font-size: 1.65rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin: 0 0 12px 0;
      }

      .step-content p {
        font-size: 1.2rem;
        color: var(--color-text-secondary);
        line-height: 1.8;
        margin: 0;
      }

      /* =============================================
           Section 4.5: News
           ============================================= */
      .news-section {
        padding: 80px 40px 7rem;
        background: #fff8f0;
      }

      .news-header {
        text-align: center;
        margin-bottom: 48px;
      }

      .news-title {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--color-text-primary);
        margin-bottom: 12px;
        display: inline-block;
        padding-bottom: 8px;
        border-bottom: 3px solid var(--color-accent-yellow);
      }

      .news-list {
		  max-width: 1000px;
		margin: 0 auto;
        background: #f5f5f5;
        padding: 0;
        max-height: calc(100px * 3);
        overflow-y: scroll;
        border: solid 1px #b1b7be;
		  
      }

      .news-item {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 24px 32px;
        background: white;
        border-bottom: 1px solid #e0e0e0;
        text-decoration: none;
        transition: background 0.3s ease;
      }

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

      .news-item:hover {
        background: #f9f9f9;
      }

      .news-date {
        font-size: 1rem;
        color: var(--color-text-secondary);
        white-space: nowrap;
      }

      .news-title-text {
        font-size: 1.0625rem;
        color: var(--color-text-primary);
        line-height: 1.6;
        flex: 1;
        font-weight: 700;
      }

      .news-empty {
        text-align: center;
        padding: 60px 20px;
        font-size: 1rem;
        color: var(--color-text-muted);
      }

      /* Mobile layout for news items */
      @media (max-width: 768px) {
        .news-section {
          padding: 60px 24px 7rem;
        }

        .news-title {
          font-size: 1.75rem;
        }

        .news-item {
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
          padding: 20px 24px;
        }

        .news-date {
          font-size: 0.9375rem;
        }

        .news-title-text {
          font-size: 1rem;
        }
      }

      @media (max-width: 500px) {
        .news-section {
          padding: 48px 16px 3rem;
        }

        .news-title {
          font-size: 1.25rem;
        }

        .news-item {
          padding: 16px 20px;
        }

        .news-date {
          font-size: 0.875rem;
        }

        .news-title-text {
          font-size: 0.9375rem;
        }
      }

      /* =============================================
           Section 5: FAQ
           ============================================= */
      .faq-section {
        background: #fff8f0;
        padding: 80px 40px 8rem;
      }

      .faq-header {
        text-align: center;
        margin-bottom: 48px;
      }

      .faq-title {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--color-text-primary);
        margin-bottom: 12px;
        display: inline-block;
        padding-bottom: 8px;
        border-bottom: 3px solid var(--color-accent-yellow);
      }

      .faq-subtitle {
        font-size: 0.9375rem;
        color: var(--color-text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
      }

      .faq-subtitle::before,
      .faq-subtitle::after {
        content: "";
        width: 40px;
        height: 1px;
        background: var(--color-border-medium);
      }

      .faq-list {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .faq-item {
        background: var(--color-bg-white);
        border: 1px solid var(--color-border-light);
        border-radius: 8px;
        overflow: hidden;
      }

      .faq-question {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 20px 24px;
        cursor: pointer;
        border-bottom: 1px solid var(--color-border-light);
        transition: background 0.3s ease;
      }

     

      .faq-q-label {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        background: var(--color-text-primary);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        font-weight: 700;
      }

      .faq-q-text {
        flex: 1;
        font-size: 1rem;
        font-weight: 700;
        color: var(--color-text-primary);
      }

      .faq-toggle {
        color: var(--color-text-muted);
        font-size: 1.25rem;
        transition: transform 0.3s ease;
      }

      .faq-item.open .faq-toggle {
        transform: rotate(180deg);
      }

      .faq-answer {
        display: none;
        gap: 16px;
        padding: 20px 24px;
        background: var(--color-bg-white);
      }

      .faq-item.open .faq-answer {
        display: flex;
      }

      .faq-a-label {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        background: var(--color-accent-orange);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        font-weight: 700;
      }

      .faq-a-text {
        flex: 1;
        font-size: 0.9375rem;
        color: var(--color-text-primary);
        line-height: 1.8;
      }

      /* =============================================
           Section 6: お客様の声
           ============================================= */
      .voice-section {
        padding: 80px 40px;
        
      }

      .voice-header {
        text-align: center;
        margin-bottom: 36px;
      }

      .voice-title {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--color-text-primary);
        display: inline-block;
        padding-bottom: 8px;
        border-bottom: 3px solid var(--color-accent-yellow);
      }

      .voice-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 36px;
        max-width: 1100px;
        margin: 0 auto;
      }

      .voice-card {
        background: var(--color-bg-white);
        overflow: hidden;
      }

      .voice-image {
        background: #cbd5e1;
        aspect-ratio: 16/11;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text-muted);
        font-size: 0.875rem;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
      }

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

      .voice-image svg {
        width: 80px;
        height: 80px;
        opacity: 0.5;
      }

      .voice-content {
        padding: 15px 0 18px;
      }

      .voice-heading {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--color-text-primary);
      }

      .voice-item {
        font-size: 1.2rem;
        color: var(--color-text-secondary);
        margin-bottom: 12px;
        margin-top:12px;
      }

      .voice-text {
        font-size: 0.9375rem;
        color: var(--color-text-secondary);
        line-height: 1.8;
      }

      .voice-no-image {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-bg-gray);
        color: var(--color-text-muted);
        font-size: 0.875rem;
      }

      /* Voice More Button */
      .voice-more-button {
        text-align: center;
        margin-top: 36px;
      }

      .voice-more-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 16px 40px;
        background: var(--color-accent-orange);
        color: #ffffff;
        font-size: 1rem;
        font-weight: 700;
        border-radius: 50px;
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(247, 127, 0, 0.3);
      }

      .voice-more-link:hover {
        transform: translateY(-3px);
      }

      .voice-more-link svg {
        width: 20px;
        height: 20px;
        transition: transform 0.3s ease;
      }

      .voice-more-link:hover svg {
        transform: translateX(4px);
      }

      /* =============================================
           Voice Archive Page
           ============================================= */
      .voice-archive-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 120px 40px 80px;
      }

      .voice-archive-header {
        text-align: center;
        margin-bottom: 60px;
      }

      .voice-archive-title {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--color-text-primary);
        display: inline-block;
        border-bottom: 4px solid var(--color-accent-yellow);
        margin-bottom: 30px;
      }

      .voice-archive-subtitle {
        font-size: 1rem;
        color: var(--color-text-secondary);
        margin: 0;
      }

      .voice-archive-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 48px;
        max-width: 1100px;
        margin: 0 auto;
      }

      .voice-archive-back {
        text-align: center;
        margin-top: 60px;
      }

      .back-to-home {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 32px;
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-accent-orange);
        background: #ffffff;
        border: 2px solid var(--color-accent-orange);
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.3s ease;
      }

      .back-to-home svg {
        width: 20px;
        height: 20px;
        transition: transform 0.3s ease;
      }

      .back-to-home:hover {
        background: var(--color-accent-orange);
        color: #ffffff;
      }

      .back-to-home:hover svg {
        transform: translateX(-4px);
      }

      .voice-empty {
        grid-column: 1 / -1;
        text-align: center;
        padding: 60px 20px;
        font-size: 1rem;
        color: var(--color-text-muted);
      }

      /* Pagination */
      .voice-pagination {
        text-align: center;
        margin-top: 48px;
      }

      .voice-pagination .nav-links {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }

      .voice-pagination .page-numbers {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        height: 44px;
        padding: 0 12px;
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-text-primary);
        background: #ffffff;
        border: 1px solid var(--color-border-light);
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.3s ease;
      }

      .voice-pagination .page-numbers:hover {
        background: var(--color-bg-gray);
        border-color: var(--color-accent-orange);
      }

      .voice-pagination .page-numbers.current {
        background: var(--color-accent-orange);
        color: #ffffff;
        border-color: var(--color-accent-orange);
      }

      .voice-pagination .prev,
      .voice-pagination .next {
        font-size: 0.875rem;
      }

      /* =============================================
           Section 7: アドジャパンが選ばれる理由
           ============================================= */
      .reasons-section {
        padding: 9rem 40px;
      }

      .reasons-header {
        text-align: center;
        margin-bottom: 60px;
      }

      .reasons-title {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--color-text-primary);
        display: inline-block;
        padding-bottom: 12px;
        border-bottom: 4px solid var(--color-accent-yellow);
      }

      .reasons-list {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 32px;
      }

      .reason-item {
        display: flex;
        align-items: flex-start;
        gap: 24px;
        background: var(--color-bg-white);
        border-radius: 16px;
        padding: 32px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }

      .reason-number {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--color-accent-orange);
        line-height: 1;
        min-width: 70px;
        text-align: center;
      }

      .reason-content {
        flex: 1;
      }

      .reason-heading {
        font-size: 1.375rem;
        font-weight: 800;
        color: var(--color-text-primary);
        margin-bottom: 12px;
        line-height: 1.4;
      }

      .reason-text {
        font-size: 1rem;
        line-height: 1.8;
        margin: 0;
      }

      /* =============================================
           CTA Box Section (New Layout)
           ============================================= */
      .cta-box-section {
        padding: 80px 40px;
        background: var(--color-bg-gray);
      }

      .cta-box-wrapper {
        max-width: 1400px;
        margin: 0 auto;
      }

      .cta-box-title {
        font-size: 1.75rem;
        font-weight: 900;
        color: var(--color-text-primary);
        text-align: center;
        margin-bottom: 40px;
      }

      .cta-box-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }

      .cta-box-card {
        background: #ffffff;
        border-radius: 8px;
        padding: 32px;
        text-align: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      }

      .cta-box-card-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin-bottom: 8px;
      }

      .cta-box-card-sub {
        font-size: 0.9375rem;
        color: var(--color-text-secondary);
        margin-bottom: 24px;
      }

      .cta-box-btn {
        display: block;
        padding: 16px 24px;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        border-radius: 4px;
        transition: all 0.3s ease;
      }

      /* CHANGED: Orange for CTA box primary action */
      .cta-box-btn-primary {
        background: var(--color-accent-orange); /* Changed from blue-medium */
        color: #ffffff;
      }

      .cta-box-btn-primary:hover {
        opacity: 0.9;
        transform: translateY(-2px);
      }

      .cta-box-btn-outline {
        background: #ffffff;
        color: var(--color-accent-orange);
        border: 2px solid var(--color-accent-orange);
      }

      .cta-box-btn-outline:hover {
        background: #fff8f0;
        transform: translateY(-2px);
      }

      .cta-box-phone {
        font-family: var(--font-number);
        font-size: 1.5rem;
        letter-spacing: 0.05em;
      }

      /* =============================================
           Contact Form Section
           ============================================= */
      .form-section {
        background: var(--color-bg-light);
        padding: 80px 40px;
      }

      .form-section-title {
        font-size: 2rem;
        font-weight: 900;
        color: var(--color-text-primary);
        text-align: center;
        margin-bottom: 48px;
      }

      .form-container {
        max-width: 800px;
        margin: 0 auto;
        background: #ffffff;
        border: 1px solid var(--color-text-primary);
        border-radius: 4px;
        padding: 48px 60px;
      }

      .form-steps {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        margin-bottom: 24px;
      }

      .form-step-circle {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        font-weight: 700;
      }

      .form-step-circle.active {
        background: var(--color-text-primary);
        color: #ffffff;
      }

      .form-step-circle.inactive {
        background: #ffffff;
        color: var(--color-text-muted);
        border: 2px solid var(--color-border-medium);
      }

      .form-step-line {
        width: 40px;
        height: 2px;
        background: var(--color-border-medium);
      }

      .form-step-label {
        text-align: center;
        font-size: 1rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin-bottom: 32px;
      }

      .form-group {
        margin-bottom: 24px;
      }

      .form-label {
        display: block;
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin-bottom: 8px;
      }

      .form-label .required {
        color: #e53e3e;
        margin-left: 2px;
      }

      .form-input,
      .form-textarea {
        width: 100%;
        padding: 12px 16px;
        font-size: 1rem;
        font-family: var(--font-jp);
        border: 1px solid var(--color-border-medium);
        border-radius: 4px;
        background: #ffffff;
        transition: border-color 0.3s ease;
      }

      .form-input:focus,
      .form-textarea:focus {
        outline: none;
        border-color: var(--color-blue-medium);
      }

      .form-input::placeholder,
      .form-textarea::placeholder {
        color: var(--color-text-muted);
      }

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

      .form-submit {
        display: block;
        width: 100%;
        max-width: 280px;
        margin: 32px auto 0;
        padding: 16px 32px;
        background: var(--color-text-primary);
        color: #ffffff;
        font-size: 1rem;
        font-weight: 700;
        font-family: var(--font-jp);
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .form-submit:hover {
        opacity: 0.9;
        transform: translateY(-2px);
      }

      /* =============================================
           Company Info Section
           ============================================= */
      .company-section {
        padding: 80px 40px;
      }

      .company-title {
        font-size: 2rem;
        font-weight: 900;
        color: var(--color-text-primary);
        text-align: center;
        margin-bottom: 48px;
      }

      .company-table {
        max-width: 700px;
        margin: 0 auto;
      }

      .company-row {
        display: flex;
        border-bottom: 1px solid var(--color-border-light);
        padding: 20px 0;
      }

      .company-label {
        width: 120px;
        flex-shrink: 0;
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--color-text-primary);
      }

      .company-value {
        flex: 1;
        font-size: 0.9375rem;
        color: var(--color-text-primary);
        line-height: 1.8;
      }

      /* =============================================
           Footer
           ============================================= */
      .footer {
        background: var(--color-bg-light) !important;
        padding: 40px;
        padding-bottom: 100px;
        text-align: center;
      }

      .footer-text {
        color: var(--color-text-primary) !important;
        font-size: 0.875rem;
      }

      /* =============================================
           Single Post Page
           ============================================= */
      .single-post-container {
        max-width: 900px;
        margin: 0 auto;
        padding: 10rem 40px 7rem;
        background: var(--color-bg-white);
      }

      .single-post {
        background: #fff;
      }

      .single-post-header {
        margin-bottom: 40px;
        padding-bottom: 24px;
        border-bottom: 2px solid var(--color-border-light);
      }

      .single-post-meta {
        margin-bottom: 16px;
      }

      .single-post-date {
        display: inline-block;
        font-size: 0.9375rem;
        color: var(--color-text-muted);
        font-weight: 500;
      }

      .single-post-title {
        font-size: 2rem;
        font-weight: 900;
        color: var(--color-text-primary);
        line-height: 1.4;
        margin: 0;
      }

      .single-post-thumbnail {
        margin-bottom: 40px;
        border-radius: 12px;
        overflow: hidden;
      }

      .single-post-image {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
      }

      .single-post-content {
        font-size: 1.0625rem;
        line-height: 1.9;
        color: var(--color-text-secondary);
        margin-bottom: 60px;
      }

      .single-post-content p {
        margin-bottom: 1.5em;
      }

      .single-post-content h2 {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin: 2em 0 1em;
        padding-bottom: 0.5em;
        border-bottom: 2px solid var(--color-accent-yellow);
      }

      .single-post-content h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin: 1.8em 0 0.8em;
      }

      .single-post-content ul,
      .single-post-content ol {
        margin: 1.5em 0;
        padding-left: 2em;
      }

      .single-post-content li {
        margin-bottom: 0.5em;
      }

      .single-post-content img {
        max-width: 100%;
        height: auto;
        margin: 2em 0;
        border-radius: 8px;
      }

      .single-post-content a {
        color: var(--color-accent-orange);
        text-decoration: underline;
        transition: color 0.3s ease;
      }

      .single-post-content a:hover {
        color: #e67e22;
      }

      .single-post-footer {
        padding-top: 40px;
            display: block;
    text-align: center;
      }

      .back-to-news {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        font-size: 1rem;
        font-weight: 600;
        color: white;
        background: var(--color-accent-orange);
        border: 2px solid var(--color-accent-orange);
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.3s ease;
      }

      .back-to-news svg {
        width: 20px;
        height: 20px;
        stroke: white;
        transition: all 0.3s ease;
      }

      .back-to-news:hover {
        background: white;
        color: var(--color-accent-orange);
        border-color: var(--color-accent-orange);
      }

      .back-to-news:hover svg {
        stroke: var(--color-accent-orange);
        transform: translateX(-4px);
      }

      .no-post {
        text-align: center;
        padding: 80px 20px;
      }

      .no-post p {
        font-size: 1.125rem;
        color: var(--color-text-muted);
      }

      /* Mobile layout for single post header */
      @media (max-width: 768px) {
        .single-post-container {
          padding: 8rem 24px 5rem;
        }

        .single-post-header {
          display: flex;
          flex-direction: column;
        }

        .single-post-meta {
          order: 1;
          margin-bottom: 12px;
        }

        .single-post-title {
          order: 2;
          font-size: 1.5rem;
        }

        .single-post-content {
          font-size: 1rem;
        }
      }

      @media (max-width: 500px) {
        .single-post-container {
          padding: 7rem 16px 4rem;
        }

        .single-post-title {
          font-size: 1.25rem;
        }

        .single-post-date {
          font-size: 0.875rem;
        }
      }

      /* =============================================
           Fixed Bottom Buttons
           ============================================= */
      .fixed-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        padding: 12px 20px;
        display: flex;
        justify-content: center;
        gap: 16px;
      }

      .fixed-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 32px;
        font-size: 1rem;
        font-weight: 700;
        border-radius: 4px;
        text-decoration: none;
        transition: all 0.3s ease;
        min-width: 180px;
      }

      .fixed-btn svg {
        width: 20px;
        height: 20px;
      }

      .fixed-btn-outline {
        background: #ffffff;
        color: var(--color-accent-orange);
        border: 2px solid var(--color-accent-orange);
      }

      .fixed-btn-outline:hover {
        background: var(--color-accent-orange);
        color: #ffffff;
      }

      /* CHANGED: Orange for fixed bottom bar primary action */
      .fixed-btn-primary {
        background: var(--color-accent-orange); /* Changed from blue-medium */
        color: #ffffff;
        border: 2px solid var(--color-accent-orange); /* Changed from blue-medium */
      }

      .fixed-btn-primary:hover {
        opacity: 0.8;
      }

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

      @keyframes slideUp {
        from {
          transform: translateY(30px);
        }
        to {
          transform: translateY(0);
        }
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .hero-title {
        animation: fadeInUp 0.6s ease both 0.1s;
      }
      .hero-subtitle {
        animation: fadeInUp 0.6s ease both 0.2s;
      }
      .stats-wrapper {
        animation: fadeInUp 0.6s ease both 0.3s;
      }
      .hero-cta {
        animation: slideUp 0.6s ease both 0.4s;
      }
      .hero-visual {
        animation: fadeIn 0.8s ease both 0.2s;
      }

      /* =============================================
           PC Large - Font Size Enhancement
           ============================================= */
      @media (min-width: 1025px) {
        /* Section Titles */
        .problems-title,
        .use-case-title,
        .image-novelty-title,
        .strengths-title,
        .faq-title,
        .voice-title,
        .compare-title,
        .flow-title,
        .cta-title {
          font-size: 2.5rem;
        }

        /* Subtitles & Intro */
        .use-case-subtitle,
        .flow-intro {
          font-size: 1.35rem;
        }

        .use-case-intro-text {
          font-size: 1.4rem;
        }

        .use-case-intro-title {
          font-size: 2.8rem;
        }

        /* Category Titles & Headings */
        .category-title {
          font-size: 1.98rem;
        }

        .strength-heading {
          font-size: 1.95rem;
        }

        .stepbar .stepbarwrap .steptitle .step-title-text {
          font-size: 1.5rem;
        }

        /* Body Text */
        .problem-text,
        .image-novelty-content p,
        .strength-description,
        .stepbar .stepbarwrap .steptxt .txt,
        .faq-q-text {
          font-size: 1.35rem;
        }

        .faq-a-text,
        .voice-text {
          font-size: 1.05rem;
        }

        /* Labels & Small Text */
        .use-case-label {
          font-size: 1.5rem;
        }

        .voice-heading {
          font-size: 1.3rem;
        }

        .voice-item {
          font-size: 1.15rem;
        }

        /* CTA Box */
        .cta-box-card-title {
          font-size: 1.5rem;
        }
        
        .cta-box-card-sub {
          font-size: 1.125rem;
        }
        
        .cta-box-btn {
          font-size: 1.2rem;
        }

        /* Reasons Section - Large */
        .reasons-title {
          font-size: 2.75rem;
        }

        .reason-item {
          padding: 40px;
        }

        .reason-number {
          font-size: 3rem;
          min-width: 80px;
        }

        .reason-heading {
          font-size: 1.5rem;
        }

        .reason-text {
          font-size: 1.125rem;
        }

        /* Form & Company */
        .form-label,
        .company-label,
        .company-value {
          font-size: 1.125rem;
        }

        .form-input,
        .form-textarea,
        .form-step-label {
          font-size: 1.2rem;
        }
      }

      /* =============================================
           Responsive - Tablet
           ============================================= */
      @media (max-width: 1024px) {
        .hero-container {
          grid-template-columns: 1fr;
          gap: 40px;
          text-align: center;
        }

        .hero-content {
          order: 1;
        }

        .hero-visual {
          order: 2;
        }

        .stats-wrapper {
          align-items: center;
        }

        .stats-image {
          width: 100%;
          max-width: 500px;
        }

        .stats-row {
          justify-content: center;
        }

        .hero-cta {
          justify-content: center;
        }
      }

      @media (max-width: 768px) {
        .hero {
          padding-top: 0;
          /* padding-bottom: 80px; */
        }

        .hero-ribbon svg {
          width: 100%;
          height: 100%;
        }

        .hero-container {
          padding: 130px 20px 40px;
          min-height: auto;
          text-align: center;
        }

        .hero-title {
          font-size: 2rem;
        }

        .hero-subtitle {
          font-size: 0.9375rem;
          margin-bottom: 24px;
        }

        .stats-wrapper {
          align-items: center;
          margin-bottom: 24px;
        }

        .stats-image {
          width: 100%;
          max-width: 400px;
        }

        .stats-row {
          justify-content: center;
          gap: 24px;
        }

        .stat-label {
          font-size: 0.8125rem;
        }

        .stat-number {
          font-size: 3rem;
        }

        .stat-unit {
          font-size: 1rem;
        }

        .hero-cta {
          width: auto;
          justify-content: center;
          padding: 19px 38px;
          font-size: 1.2rem;
          margin-bottom: 32px;
        }

        .hero-visual {
          margin-bottom: 60px;
        }

        .slide-indicators {
          gap: 6px;
        }

        .slide-indicator {
          width: 8px;
          height: 8px;
        }

        .hero-divider {
          height: 50px;
        }

        .hero-divider::before {
          border-bottom-width: 50px;
        }

        .hero-image {
          border-radius: 15px;
        }

        /* Problems Section */
        .problems-section {
          padding: 60px 24px;
        }

        .problems-title {
          font-size: 1.75rem;
          flex-direction: column;
          gap: 8px;
        }

        .problems-title::before,
        .problems-title::after {
          width: 40px;
        }

        /* card-v1 タブレット対応 */
        .card-v1 {
          margin-bottom: 70px;
        }

        .card-v1 .problem-part {
          margin-bottom: 24px;
        }

        .card-v1 .problem-icon,
        .card-v1 .answer-icon {
          width: 80px;
          height: 80px;
        }

        .card-v1 .problem-part,
        .card-v1 .answer-part {
          gap: 16px;
        }

        .card-v1 .problem-bubble,
        .card-v1 .answer-bubble {
          padding: 20px 24px;
        }

        .card-v1 .problem-bubble::before {
          top: 20px;
        }

        .card-v1 .answer-bubble::after {
          top: 20px;
        }

        .problems-cta {
          font-size: 1.75rem;
          margin-bottom: 60px;
              padding: 4rem 0 4rem;
        }

        .problems-cta .br-sp {
          display: block;
        }

        /* Use Case Section */
        .use-case-section {
          padding: 60px 24px;
        }

        .use-case-intro-title {
          font-size: 1.8rem;
          margin-bottom: 20px;
        }

        .use-case-intro-text {
          font-size: 0.9375rem;
          margin-bottom: 60px;
        }

        .use-case-intro-text br {
          display: none;
        }

        .use-case-title {
          font-size: 1.75rem;
        }

        .use-case-title .br-sp {
          display: block;
        }

        .use-case-subtitle {
          font-size: 0.9375rem;
          margin-bottom: 40px;
        }

        .use-case-subtitle br {
          display: none;
        }

        .category-title {
          font-size: 1.35rem;
        }

        .use-case-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 24px;
        }

        .use-case-icon {
          width: 48px;
          height: 48px;
        }

        .use-case-label {
          font-size: 0.875rem;
        }

        /* Image Novelty Section */
        .image-novelty-section {
          padding: 60px 24px;
        }

        .image-novelty-picture {
          width: 100vw;
          max-width: none;
          margin-left: 50%;
          transform: translateX(-50%);
        }

        .image-novelty-title {
          font-size: 1.75rem;
          margin-bottom: 32px;
        }

        .image-novelty-content p {
          font-size: 1rem;
        }

        .image-novelty-content p br {
          display: none;
        }

        /* Strengths Section */
        .strengths-section {
          padding: 60px 24px;
        }

        .strengths-title {
          font-size: 1.75rem;
        }

        .strength-item {
          grid-template-columns: 1fr;
          gap: 24px;
        }

        .strength-item:nth-child(even) {
          direction: ltr;
        }

        .strength-number {
          font-size: 2rem;
        }

        .strength-heading {
          font-size: 1.25rem;
        }

        /* Flow Section */
        .flow-section {
          padding: 60px 24px;
        }

        .flow-title {
          font-size: 1.75rem;
        }

        .flow-intro {
          font-size: 0.9375rem;
          margin-bottom: 32px;
        }

        .step-item {
          grid-template-columns: 80px 1fr;
          gap: 24px;
          padding: 24px 0;
        }

        .step-number-box {
          padding: 12px;
        }

        .step-label {
          font-size: 0.825rem;
        }

        .step-number {
          font-size: 1.8rem;
        }

        .step-content h3 {
          font-size: 1.35rem;
          margin-bottom: 10px;
        }

        .step-content p {
          font-size: 1.125rem;
        }

        /* FAQ Section */
        .faq-section {
          padding: 60px 24px;
        }

        .faq-title {
          font-size: 1.75rem;
        }

        .faq-question {
          padding: 16px 20px;
        }

        .faq-q-label,
        .faq-a-label {
          width: 28px;
          height: 28px;
          font-size: 0.8125rem;
        }

        .faq-q-text {
          font-size: 0.9375rem;
        }

        .faq-answer {
          padding: 16px 20px;
        }

        /* Voice Section */
        .voice-section {
          padding: 60px 24px;
        }

        .voice-title {
          font-size: 1.75rem;
        }

        .voice-grid {
          grid-template-columns: 1fr;
          gap: 32px;
        }

        .voice-more-button {
          margin-top: 32px;
        }

        .voice-more-link {
          padding: 14px 32px;
          font-size: 0.9375rem;
        }

        /* Voice Archive */
        .voice-archive-container {
          padding: 100px 24px 60px;
        }

        .voice-archive-title {
          font-size: 1.75rem;
        }

        .voice-archive-grid {
          grid-template-columns: 1fr;
          gap: 32px;
        }

        /* Reasons Section */
        .reasons-section {
          padding: 7rem 24px;
        }

        .reasons-title {
          font-size: 1.75rem;
        }

        .reason-item {
          padding: 24px 20px;
          gap: 16px;
        }

        .reason-number {
          font-size: 2rem;
          min-width: 50px;
        }

        .reason-heading {
          font-size: 1.125rem;
        }

        .reason-text {
          font-size: 0.9375rem;
        }

        /* CTA Section */
        .cta-section {
          padding: 60px 24px;
        }

        .cta-title {
          font-size: 1.5rem;
        }

        .cta-description {
          font-size: 1rem;
        }

        .cta-button {
          padding: 16px 32px;
          font-size: 1rem;
        }

        /* Single Post */
        .single-post-container {
          padding: 7.5rem 24px 7rem;
        }

        .single-post-title {
          font-size: 1.75rem;
        }

        .single-post-content {
          font-size: 1rem;
        }

        .single-post-content h2 {
          font-size: 1.5rem;
        }

        .single-post-content h3 {
          font-size: 1.25rem;
        }
      }

      /* =============================================
           Responsive - Mobile
           ============================================= */
      @media (max-width: 500px) {
        .br-xs {
          display: block;
        }

        .hero-ribbon svg {
          width: 100%;
          height: 100%;
        }

        .hero-container {
          padding: 100px 16px 32px;
        }

        .hero-title {
          font-size: 2rem;
          line-height: 1.4;
        }

        .hero-subtitle {
          font-size: 1rem;
        }

        .stat-label {
          font-size: 1rem;
        }

        .stat-number {
          font-size: 3.25rem;
        }

        .stat-unit {
          font-size: 1.125rem;
        }

        .hero-visual {
          margin-bottom: 50px;
        }

        /* Problems Section */
        .problems-section {
          padding: 60px 16px 48px;
        }

        .problems-title {
          font-size: 1.375rem;
          margin-bottom: 51px;
        }

        .problems-title::before,
        .problems-title::after {
          width: 30px;
        }

        /* card-v1 スマホ対応 */
        .card-v1 {
          margin-bottom: 60px;
        }

        .card-v1 .problem-part {
          margin-bottom: 20px;
        }

        .card-v1 .problem-icon,
        .card-v1 .answer-icon {
          width: 88px;
          height: 80px;
        }

        .card-v1 .problem-part,
        .card-v1 .answer-part {
          gap: 10px;
        }

        .card-v1 .problem-bubble,
        .card-v1 .answer-bubble {
          padding: 14px 16px;
        }

        .card-v1 .problem-text,
        .card-v1 .answer-text {
          font-size: 0.95rem;
        }

        .card-v1 .problem-bubble::before {
          left: -7px;
          top: 14px;
          border-top: 8px solid transparent;
          border-bottom: 8px solid transparent;
          border-right: 8px solid #ededed;
        }

        .card-v1 .answer-bubble::after {
          right: -9px;
          top: 14px;
          border-top: 8px solid transparent;
          border-bottom: 8px solid transparent;
          border-left: 8px solid var(--color-accent-orange);
        }

        .problems-cta {
          font-size: 1.9rem;
          margin-bottom: 48px;
        }

        /* Use Case Section */
        .use-case-section {
          padding: 48px 16px;
        }

        .use-case-intro-title {
          font-size: 1.6rem;
          margin-bottom: 16px;
        }

        .use-case-intro-text {
          font-size: 0.95rem;
          margin-bottom: 48px;
          text-align: left;
        }

        .use-case-title {
          font-size: 1.25rem;
        }

        .use-case-subtitle {
          font-size: 0.875rem;
        }

        .category-title {
          font-size: 1.2rem;
          margin-bottom: 3rem;
        }

        .use-case-grid {
          gap: 20px;
        }

        .use-case-icon {
          width: 40px;
          height: 40px;
          margin-bottom: 12px;
        }

        .use-case-label {
          font-size: 0.85rem;
        }

        /* Image Novelty Section */
        .image-novelty-section {
          padding: 48px 16px;
        }

        .image-novelty-picture {
          width: 75vw;
          max-width: none;
          margin-left: 50%;
          transform: translateX(-50%);
        }

        .image-novelty-title {
          font-size: 1.3rem;
          margin-bottom: 24px;
        }

        .image-novelty-content p {
          font-size: 1rem;
          line-height: 1.9;
          margin-bottom: 20px;
        }

        /* Strengths Section */
        .strengths-section {
          padding: 6rem 16px 2rem;
        }

        .strengths-title {
          font-size: 1.5rem;
        }

        .strength-content {
          padding: 0;
        }

        .strength-number {
          font-size: 1.75rem;
        }

        .strength-heading {
          font-size: 1.125rem;
        }

        .strength-description {
          font-size: 0.9375rem;
        }

        /* Flow Section */
        .flow-section {
          padding: 48px 16px 5rem;
        }

        .flow-title {
          font-size: 1.25rem;
        }

        .flow-intro {
          font-size: 0.875rem;
          margin-bottom: 24px;
          text-align: left;
        }

        .step-item {
          grid-template-columns: 70px 1fr;
          gap: 16px;
          padding: 20px 0;
        }

        .step-number-box {
          padding: 10px;
        }

        .step-number-box::after {
          bottom: -7px;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-top: 8px solid var(--color-accent-orange);
        }

        .step-label {
          font-size: 0.75rem;
        }

        .step-number {
          font-size: 1.5rem;
        }

        .step-content h3 {
          font-size: 1.2rem;
          margin-bottom: 8px;
        }

        .step-content p {
          font-size: 1.05rem;
        }

        /* FAQ Section */
        .faq-section {
          padding: 5rem 16px ;
        }

        .faq-title {
          font-size: 1.25rem;
        }

        .faq-question {
          padding: 14px 16px;
          gap: 12px;
        }

        .faq-answer {
          padding: 14px 16px;
          gap: 12px;
        }

        .faq-a-text {
          font-size: 0.875rem;
        }

        /* Voice Section */
        .voice-section {
          padding: 48px 16px 6rem;
        }

        .voice-title {
          font-size: 1.25rem;
        }

        .voice-heading {
          font-size: 1rem;
        }

        .voice-item {
          font-size: 1rem;
        }

        .voice-text {
          font-size: 0.875rem;
        }

        .voice-more-button {
          margin-top: 24px;
        }

        .voice-more-link {
          padding: 12px 28px;
          font-size: 0.875rem;
        }

        /* Voice Archive */
        .voice-archive-container {
          padding: 130px 16px 48px;
        }

        .voice-archive-header {
          margin-bottom: 40px;
        }

        .voice-archive-title {
          padding-bottom:5px;
          font-size: 1.375rem;
        }

        .voice-archive-subtitle {
          font-size: 0.875rem;
        }

        .voice-archive-grid {
          gap: 24px;
        }

        .back-to-home {
          padding: 12px 24px;
          font-size: 0.875rem;
        }

        /* Reasons Section - Mobile */
        .reasons-section {
          padding: 6rem 16px;
        }

        .reasons-header {
          margin-bottom: 40px;
        }

        .reasons-title {
          font-size: 1.375rem;
        }

        .reasons-list {
          gap: 20px;
        }

        .reason-item {
          flex-direction: column;
          padding: 20px 16px;
          gap: 12px;
          border-left-width: 4px;
        }

        .reason-number {
          font-size: 1.75rem;
          min-width: auto;
          text-align: left;
        }

        .reason-heading {
          font-size: 1.0625rem;
        }

        .reason-text {
          font-size: 0.95rem;
          line-height: 1.7;
        }

        /* CTA Section */
        .cta-section {
          padding: 48px 16px;
        }

        .cta-title {
          font-size: 1.25rem;
        }

        .cta-description {
          font-size: 0.875rem;
        }

        /* Fixed Bottom Buttons - Mobile */
        .fixed-bottom-bar {
          padding: 10px 12px;
          gap: 8px;
        }

        .fixed-btn {
          flex: 1;
          padding: 12px 16px;
          font-size: 0.8rem;
          min-width: auto;
        }

        .fixed-btn svg {
          width: 18px;
          height: 18px;
        }

        /* CTA Box - Mobile */
        .cta-box-section {
          padding: 40px 16px;
        }

        .cta-box-wrapper {
          padding: 32px 20px;
        }

        .cta-box-title {
          font-size: 1.375rem;
          margin-bottom: 32px;
        }

        .cta-box-grid {
          grid-template-columns: 1fr;
          gap: 16px;
        }

        .cta-box-card {
          padding: 24px 20px;
        }

        .cta-box-card-title {
          font-size: 1.125rem;
        }

        .cta-box-card-sub {
          font-size: 0.875rem;
          margin-bottom: 20px;
        }

        .cta-box-btn {
          padding: 14px 20px;
          font-size: 0.9375rem;
        }

        .cta-box-phone {
          font-size: 1.25rem;
        }

        /* Form Section - Mobile */
        .form-section {
          padding: 60px 16px;
        }

        .form-section-title {
          font-size: 1.5rem;
          margin-bottom: 32px;
        }

        .form-container {
          padding: 32px 20px;
        }

        .form-step-label {
          font-size: 0.9375rem;
        }

        .form-submit {
          max-width: 100%;
        }

        /* Company Section - Mobile */
        .company-section {
          padding: 0px 16px 60px;
        }

        .company-title {
          font-size: 1.5rem;
          margin-bottom: 32px;
        }

        .company-row {
          flex-direction: column;
          gap: 8px;
          padding: 16px 0;
        }

        .company-label {
          width: 100%;
        }

        /* Single Post */
        .single-post-container {
          padding: 7rem 16px 7rem;
        }

        .single-post-title {
          font-size: 1.5rem;
        }

        .single-post-content {
          font-size: 0.9375rem;
        }

        .single-post-content h2 {
          font-size: 1.375rem;
        }

        .single-post-content h3 {
          font-size: 1.125rem;
        }

        .back-to-news {
          padding: 10px 20px;
          font-size: 0.9375rem;
        }
      }

      /* =============================================
           Contact Modal
           ============================================= */
      .contact-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
      }

      .contact-modal.active {
        opacity: 1;
        visibility: visible;
      }

      .contact-modal-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
      }

      .contact-modal-content {
        position: relative;
        background: #ffffff;
        border-radius: 16px;
        max-width: 560px;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 40px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        transform: translateY(20px);
        transition: transform 0.3s ease;
      }

      .contact-modal.active .contact-modal-content {
        transform: translateY(0);
      }

      .contact-modal-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
        border: none;
        background: var(--color-bg-gray);
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.3s ease;
      }

      .contact-modal-close:hover {
        background: #e0e0e0;
      }

      .contact-modal-close svg {
        width: 20px;
        height: 20px;
        color: var(--color-text-primary);
      }

      .contact-modal-header {
        text-align: center;
        margin-bottom: 32px;
      }

      .contact-modal-title {
        font-size: 1.75rem;
        font-weight: 900;
        color: var(--color-text-primary);
        margin-bottom: 8px;
      }

      .contact-modal-subtitle {
        font-size: 0.9375rem;
        color: var(--color-text-secondary);
        line-height: 1.6;
      }

      .contact-modal-body {
        width: 100%;
      }

      /* Contact Form 7 Styling */
      .contact-modal-body .wpcf7-form {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .contact-modal-body .wpcf7-form p {
        margin: 0;
      }

      .contact-modal-body .wpcf7-form label {
        display: block;
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin-bottom: 8px;
      }

      .contact-modal-body .wpcf7-form-control-wrap {
        display: block;
      }

      .contact-modal-body .wpcf7-form input[type="text"],
      .contact-modal-body .wpcf7-form input[type="email"],
      .contact-modal-body .wpcf7-form input[type="tel"],
      .contact-modal-body .wpcf7-form textarea {
        width: 100%;
        padding: 14px 16px;
        font-size: 1rem;
        font-family: var(--font-jp);
        border: 1px solid var(--color-border-medium);
        border-radius: 8px;
        background: #ffffff;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
      }

      .contact-modal-body .wpcf7-form input[type="text"]:focus,
      .contact-modal-body .wpcf7-form input[type="email"]:focus,
      .contact-modal-body .wpcf7-form input[type="tel"]:focus,
      .contact-modal-body .wpcf7-form textarea:focus {
        outline: none;
        border-color: var(--color-accent-orange);
        box-shadow: 0 0 0 3px rgba(247, 127, 0, 0.1);
      }

      .contact-modal-body .wpcf7-form textarea {
        min-height: 120px;
        resize: vertical;
      }

      .contact-modal-body .wpcf7-form input[type="submit"] {
        display: block;
        width: 100%;
        padding: 16px 32px;
        background: var(--color-accent-orange);
        color: #ffffff;
        font-size: 1.125rem;
        font-weight: 700;
        font-family: var(--font-jp);
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(247, 127, 0, 0.3);
        margin-top: 8px;
      }

      .contact-modal-body .wpcf7-form input[type="submit"]:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(247, 127, 0, 0.4);
      }

      .contact-modal-body .wpcf7-response-output {
        margin: 16px 0 0 !important;
        padding: 12px 16px !important;
        border-radius: 8px !important;
        font-size: 0.9375rem;
      }

      .contact-modal-body .wpcf7-not-valid-tip {
        color: #e53e3e;
        font-size: 0.8125rem;
        margin-top: 4px;
      }

      .contact-modal-body .wpcf7-spinner {
        margin: 0 auto;
        display: block;
      }

      /* Required mark styling */
      .contact-modal-body .required-mark {
        color: #e53e3e;
        font-size: 0.75rem;
        margin-left: 4px;
      }

      /* Mobile adjustments for modal */
      @media (max-width: 768px) {
        .contact-modal-content {
          padding: 32px 24px;
          width: 95%;
          max-height: 85vh;
        }

        .contact-modal-title {
          font-size: 1.5rem;
        }

        .contact-modal-subtitle {
          font-size: 0.875rem;
        }

        .contact-modal-body .wpcf7-form input[type="text"],
        .contact-modal-body .wpcf7-form input[type="email"],
        .contact-modal-body .wpcf7-form input[type="tel"],
        .contact-modal-body .wpcf7-form textarea {
          padding: 12px 14px;
          font-size: 16px;
        }

        .contact-modal-body .wpcf7-form input[type="submit"] {
          padding: 14px 24px;
          font-size: 1rem;
        }
      }

      @media (max-width: 500px) {
        .contact-modal-content {
          padding: 24px 20px;
          margin-bottom: 60px;
        }

        .contact-modal-close {
          top: 12px;
          right: 12px;
          width: 36px;
          height: 36px;
        }

        .contact-modal-title {
          font-size: 1.25rem;
        }

        .contact-modal-header {
          margin-bottom: 24px;
        }
      }

      /* Body scroll lock when modal is open */
      body.modal-open {
        overflow: hidden;
      }

      /* =============================================
           Contact Page (下層ページ)
           ============================================= */
      .contact-page {
        padding-top: 100px;
        padding-bottom: 80px;
        background: var(--color-bg-light);
        min-height: 100vh;
      }

      .contact-page-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
      }

      .contact-page-header {
        text-align: center;
        margin-bottom: 60px;
      }

      .contact-page-title {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--color-text-primary);
        margin-bottom: 30px;
        display: inline-block;
        border-bottom: 4px solid var(--color-accent-yellow);
      }

      .contact-page-subtitle {
        font-size: 1.125rem;
        color: var(--color-text-secondary);
        line-height: 1.8;
      }

      .contact-page-subtitle .br-pc {
        display: block;
      }

      .contact-page-content {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 48px;
        align-items: start;
      }

      /* Form Section */
      .contact-form-section {
        background: #ffffff;
        border-radius: 16px;
        padding: 48px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }

      .contact-form-header {
        margin-bottom: 32px;
      }

      .contact-form-title {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--color-text-primary);
        margin-bottom: 12px;
      }

      .contact-form-description {
        font-size: 0.9375rem;
        color: var(--color-text-secondary);
        line-height: 1.7;
      }

      .contact-form-wrapper .wpcf7-form {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .contact-form-wrapper .wpcf7-form p {
        margin: 0;
      }

      .contact-form-wrapper .wpcf7-form br {
        display: none;
      }

      .contact-form-wrapper .wpcf7-form label {
        display: block;
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin-bottom: 8px;
      }

      .contact-form-wrapper .wpcf7-form-control-wrap {
        display: block;
      }

      .contact-form-wrapper .wpcf7-form input[type="text"],
      .contact-form-wrapper .wpcf7-form input[type="email"],
      .contact-form-wrapper .wpcf7-form input[type="tel"],
      .contact-form-wrapper .wpcf7-form textarea {
        width: 100%;
        padding: 14px 16px;
        font-size: 1rem;
        font-family: var(--font-jp);
        border: 1px solid var(--color-border-medium);
        border-radius: 8px;
        background: #ffffff;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
      }

      .contact-form-wrapper .wpcf7-form input[type="text"]:focus,
      .contact-form-wrapper .wpcf7-form input[type="email"]:focus,
      .contact-form-wrapper .wpcf7-form input[type="tel"]:focus,
      .contact-form-wrapper .wpcf7-form textarea:focus {
        outline: none;
        border-color: var(--color-accent-orange);
        box-shadow: 0 0 0 3px rgba(247, 127, 0, 0.1);
      }

      .contact-form-wrapper .wpcf7-form textarea {
        min-height: 160px;
        resize: vertical;
      }

      .contact-form-wrapper .wpcf7-form select,
      .contact-modal-body .wpcf7-form select {
        width: 100%;
        padding: 14px 16px;
        font-size: 1rem;
        font-family: var(--font-jp);
        color: var(--color-text-primary);
        border: 1px solid var(--color-border-medium);
        border-radius: 8px;
        background: #ffffff;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        cursor: pointer;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
      }

      .contact-form-wrapper .wpcf7-form select:focus-visible,
      .contact-modal-body .wpcf7-form select:focus-visible {
        outline: none;
        border-color: var(--color-accent-orange);
        box-shadow: 0 0 0 3px rgba(247, 127, 0, 0.1);
      }

      .contact-form-wrapper .wpcf7-form input[type="submit"] {
        display: block;
        width: 100%;
        max-width: 320px;
        margin: 16px auto 0;
        padding: 18px 40px;
        background: var(--color-accent-orange);
        color: #ffffff;
        font-size: 1.125rem;
        font-weight: 700;
        font-family: var(--font-jp);
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(247, 127, 0, 0.3);
      }

      .contact-form-wrapper .wpcf7-form input[type="submit"]:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(247, 127, 0, 0.4);
      }

      .contact-form-wrapper .wpcf7-response-output {
        margin: 16px 0 0 !important;
        padding: 12px 16px !important;
        border-radius: 8px !important;
        font-size: 0.9375rem;
      }

      .contact-form-wrapper .wpcf7-not-valid-tip {
        color: #e53e3e;
        font-size: 0.8125rem;
        margin-top: 4px;
      }

      .contact-form-wrapper .wpcf7-spinner {
        margin: 0 auto;
        display: block;
      }

      .contact-form-wrapper .required-mark {
        color: #e53e3e;
        font-size: 1rem;
        font-weight: 700;
        margin-left: 6px;
        vertical-align: middle;
      }

      /* 確認画面（送信前） */
      #contact-form-step-input[aria-hidden="true"] {
        display: none;
      }

      .contact-confirm-wrap {
        display: none;
        padding: 0;
      }

      .contact-confirm-wrap[aria-hidden="false"] {
        display: block;
      }

      .contact-confirm-title {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--color-text-primary);
        margin-bottom: 8px;
      }

      .contact-confirm-description {
        font-size: 0.9375rem;
        color: var(--color-text-secondary);
        margin-bottom: 24px;
        line-height: 1.7;
      }

      .contact-confirm-list {
        position: relative;
        display: grid;
        gap: 0;
        margin: 0 0 32px;
        border: 1px solid #94a3b8;
        border-radius: 12px;
        overflow: hidden;
        background: #ffffff;
      }

            .contact-confirm-list dt {
        grid-column: 1;
        padding: 12px 16px;
        font-size: 0.8125rem;
        font-weight: 700;
        color: var(--color-text-secondary);
        background: #fef6ed;
        border-right: 1px solid #94a3b8;
        border-bottom: 1px solid #94a3b8;
      }

      .contact-confirm-list dd {
        grid-column: 2;
        margin: 0;
        padding: 12px 16px;
        font-size: 0.9375rem;
        color: var(--color-text-primary);
        background: #ffffff;
        border-bottom: 1px solid #94a3b8;
        white-space: pre-wrap;
        word-break: break-all;
      }

      .contact-confirm-list dd:last-of-type {
        border-bottom: none;
      }

      .contact-confirm-list .confirm-message {
        white-space: pre-wrap;
        line-height: 1.7;
      }

      @media (min-width: 768px) {
        .contact-confirm-list {
          grid-template-columns: 200px 1fr;
        }
        .contact-confirm-list dt {
          border-right: 1px solid #94a3b8;
          border-bottom: 1px solid #94a3b8;
        }
        .contact-confirm-list dd {
          border-bottom: 1px solid #94a3b8;
        }
        .contact-confirm-list dt:last-of-type,
        .contact-confirm-list dd:last-of-type {
          border-bottom: none;
        }
      }

      .contact-confirm-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        margin-top: 24px;
      }

      .contact-confirm-btn {
        display: inline-block;
        padding: 16px 32px;
        font-size: 1rem;
        font-weight: 700;
        font-family: var(--font-jp);
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid var(--color-border-medium);
        background: #fff;
        color: var(--color-text-primary);
        min-width: 160px;
      }

      .contact-confirm-btn-back:hover {
        background: var(--color-bg-light);
        border-color: var(--color-text-secondary);
      }

      .contact-confirm-btn-submit {
        background: var(--color-accent-orange);
        border-color: var(--color-accent-orange);
        color: #fff;
        box-shadow: 0 4px 15px rgba(247, 127, 0, 0.3);
      }

      .contact-confirm-btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(247, 127, 0, 0.4);
      }

      /* Info Section */
      .contact-info-section {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .contact-info-card {
        background: #ffffff;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        text-align: center;
      }

      .contact-info-title {
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin-bottom: 12px;
      }

      .contact-phone {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        text-decoration: none;
        color: var(--color-accent-orange);
        transition: opacity 0.3s ease;
      }

      .contact-phone:hover {
        opacity: 0.8;
      }

      .contact-phone svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
      }

      .contact-phone .phone-number {
        font-family: var(--font-number);
        font-size: 1.75rem;
        font-weight: 400;
        letter-spacing: 0.02em;
      }

      .contact-email {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        text-decoration: none;
        color: var(--color-text-primary);
        font-size: 1rem;
        transition: color 0.3s ease;
      }

      .contact-email:hover {
        color: var(--color-accent-orange);
      }

      .contact-email svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        color: var(--color-accent-orange);
      }

      .contact-ec-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        background: var(--color-accent-orange);
        color: #ffffff;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 700;
        border-radius: 8px;
        transition: all 0.3s ease;
      }

      .contact-ec-link:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(247, 127, 0, 0.3);
      }

      .contact-ec-link svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
      }

      .contact-ec-link .arrow-icon {
        margin-left: auto;
      }

      .contact-info-note {
        font-size: 0.8125rem;
        margin-top: 8px;
      }

      /* =============================================
           Thanks Page（送信完了）
           ============================================= */
      .thanks-page {
        padding-top: 100px;
        padding-bottom: 80px;
        background: var(--color-bg-light);
        min-height: 100vh;
        display: flex;
        align-items: center;
      }

      .thanks-page-container {
        max-width: 720px;
        margin: 0 auto;
        padding: 0 40px;
      }

      .thanks-page-inner {
        background: #ffffff;
        border-radius: 16px;
        padding: 56px 48px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        text-align: center;
      }

      .thanks-icon {
        width: 72px;
        height: 72px;
        margin: 0 auto 24px;
        color: var(--color-accent-green, #22c55e);
      }

      .thanks-icon svg {
        width: 100%;
        height: 100%;
      }

      .thanks-page-title {
        font-size: 1.75rem;
        font-weight: 900;
        color: var(--color-text-primary);
        margin-bottom: 20px;
      }

      .thanks-page-message {
        font-size: 1rem;
        color: var(--color-text-primary);
        line-height: 1.8;
        margin-bottom: 12px;
      }

      .thanks-page-note {
        font-size: 0.9375rem;
        color: var(--color-text-secondary);
        line-height: 1.8;
        margin-bottom: 40px;
      }

      .thanks-page-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
      }

      .thanks-btn {
        display: inline-block;
        padding: 16px 32px;
        font-size: 1rem;
        font-weight: 700;
        font-family: var(--font-jp);
        border-radius: 50px;
        text-decoration: none;
        transition: all 0.3s ease;
        min-width: 200px;
      }

      .thanks-btn-primary {
        background: var(--color-accent-orange);
        color: #fff;
        border: 2px solid var(--color-accent-orange);
        box-shadow: 0 4px 15px rgba(247, 127, 0, 0.3);
      }

      .thanks-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(247, 127, 0, 0.4);
      }

      .thanks-btn-outline {
        background: #fff;
        color: var(--color-text-primary);
        border: 2px solid var(--color-border-medium);
      }

      .thanks-btn-outline:hover {
        background: var(--color-bg-light);
        border-color: var(--color-text-secondary);
      }

      @media (max-width: 768px) {
        .thanks-page {
          padding-top: 80px;
          padding-bottom: 60px;
        }
        .thanks-page-container {
          padding: 0 24px;
        }
        .thanks-page-inner {
          padding: 40px 24px;
        }
        .thanks-page-title {
          font-size: 1.5rem;
        }
        .thanks-btn {
          width: 100%;
          min-width: 0;
        }
      }

      /* Contact Page Responsive */
      @media (max-width: 1024px) {
        .contact-page-content {
          grid-template-columns: 1fr;
          gap: 40px;
        }

        .contact-info-section {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }
      }

      @media (max-width: 768px) {
        .contact-page {
          padding-top: 80px;
          padding-bottom: 60px;
        }

        .contact-page-container {
          padding: 0 24px;
        }

        .contact-page-header {
          margin-bottom: 40px;
        }

        .contact-page-title {
          font-size: 2rem;
        }

        .contact-page-subtitle {
          font-size: 1rem;
        }

        .contact-page-subtitle .br-pc {
          display: none;
        }

        .contact-form-section {
          padding: 32px 24px;
        }

        .contact-form-title {
          font-size: 1.25rem;
        }

        .contact-info-section {
          grid-template-columns: 1fr;
        }

        .contact-form-wrapper .wpcf7-form input[type="text"],
        .contact-form-wrapper .wpcf7-form input[type="email"],
        .contact-form-wrapper .wpcf7-form input[type="tel"],
        .contact-form-wrapper .wpcf7-form textarea {
          padding: 12px 14px;
          font-size: 16px;
        }
      }

      @media (max-width: 500px) {
        .contact-page {
          padding-top: 130px;
          padding-bottom: 100px;
        }

        .contact-page-container {
          padding: 0 16px;
        }

        .contact-page-title {
          font-size: 1.5rem;
        }

        .contact-page-subtitle {
          font-size: 0.9375rem;
        }

        .contact-form-section {
          padding: 24px 20px;
        }

        .contact-form-header {
          margin-bottom: 24px;
        }

        .contact-form-title {
          font-size: 1.125rem;
        }

        .contact-form-description {
          font-size: 0.875rem;
        }

        .contact-form-wrapper .wpcf7-form input[type="submit"] {
          max-width: 100%;
          padding: 16px 32px;
          font-size: 1rem;
        }

        .contact-info-card {
          padding: 20px;
        }

        .contact-phone .phone-number {
          font-size: 1.5rem;
        }
      }

      /* =============================================
           Privacy Policy Page
           ============================================= */
      .privacy-page {
        padding-top: 100px;
        padding-bottom: 80px;
        background: var(--color-bg-white);
        min-height: 100vh;
      }

      .privacy-page-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 0 40px;
      }

      .privacy-page-header {
        text-align: center;
        margin-bottom: 48px;
      }

      .privacy-page-title {
        font-size: 2rem;
        font-weight: 900;
        color: var(--color-text-primary);
        display: inline-block;
        padding-bottom: 12px;
        border-bottom: 4px solid var(--color-accent-orange);
      }

      .privacy-page-content {
        background: #ffffff;
      }

      .privacy-intro {
        font-size: 1rem;
        color: var(--color-text-secondary);
        line-height: 1.8;
        margin-bottom: 40px;
      }

      .privacy-section {
        margin-bottom: 32px;
      }

      .privacy-section h2 {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--color-text-primary);
        margin-bottom: 12px;
        padding-left: 12px;
        border-left: 4px solid var(--color-accent-orange);
      }

      .privacy-section p {
        font-size: 0.9375rem;
        color: var(--color-text-secondary);
        line-height: 1.8;
        margin-bottom: 8px;
      }

      .privacy-section ul {
        margin: 12px 0;
        padding-left: 24px;
      }

      .privacy-section li {
        font-size: 0.9375rem;
        color: var(--color-text-secondary);
        line-height: 1.8;
        margin-bottom: 4px;
      }

      .privacy-contact {
        background: var(--color-bg-light);
        padding: 20px 24px;
        border-radius: 8px;
        margin-top: 12px;
      }

      .privacy-contact p {
        margin-bottom: 4px;
      }

      .privacy-date {
        font-size: 0.875rem;
        color: var(--color-text-muted);
        text-align: right;
        margin-top: 48px;
      }

      @media (max-width: 768px) {
        .privacy-page {
          padding-top: 80px;
          padding-bottom: 60px;
        }

        .privacy-page-container {
          padding: 0 24px;
        }

        .privacy-page-title {
          font-size: 1.5rem;
        }
      }

      @media (max-width: 500px) {
        .privacy-page {
          padding-top: 130px;
          padding-bottom: 100px;
        }

        .privacy-page-container {
          padding: 0 16px;
        }

        .privacy-page-title {
          font-size: 1.25rem;
        }

        .privacy-section h2 {
          font-size: 1rem;
        }
      }

      /* Privacy checkbox in form */
      .contact-form-wrapper .wpcf7-form .privacy-checkbox,
      .contact-modal-body .wpcf7-form .privacy-checkbox {
        margin-top: 8px;
      }

      .contact-form-wrapper .wpcf7-form .privacy-checkbox .wpcf7-list-item,
      .contact-modal-body .wpcf7-form .privacy-checkbox .wpcf7-list-item {
        margin: 0;
      }

      .contact-form-wrapper .wpcf7-form .privacy-checkbox .wpcf7-list-item label,
      .contact-modal-body .wpcf7-form .privacy-checkbox .wpcf7-list-item label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.9375rem;
        font-weight: 400;
        color: var(--color-text-secondary);
        margin-bottom: 0;
        line-height: 1;
        cursor: pointer;
      }

      .contact-form-wrapper .wpcf7-form .privacy-checkbox input[type="checkbox"],
      .contact-modal-body .wpcf7-form .privacy-checkbox input[type="checkbox"] {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        border: 2px solid var(--color-border-medium);
        border-radius: 4px;
        background: #ffffff;
        position: relative;
      }

      .contact-form-wrapper .wpcf7-form .privacy-checkbox input[type="checkbox"]:checked,
      .contact-modal-body .wpcf7-form .privacy-checkbox input[type="checkbox"]:checked {
        background: var(--color-accent-orange);
        border-color: var(--color-accent-orange);
      }

      .contact-form-wrapper .wpcf7-form .privacy-checkbox input[type="checkbox"]:checked::after,
      .contact-modal-body .wpcf7-form .privacy-checkbox input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        left: 5px;
        top: 1px;
        width: 6px;
        height: 10px;
        border: solid #ffffff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }

      .contact-form-wrapper .wpcf7-form .privacy-checkbox a,
      .contact-modal-body .wpcf7-form .privacy-checkbox a {
        color: var(--color-accent-orange);
        text-decoration: underline;
      }

      .contact-form-wrapper .wpcf7-form .privacy-checkbox a:hover,
      .contact-modal-body .wpcf7-form .privacy-checkbox a:hover {
        text-decoration: none;
      }