/* ==========================================================================
       1. RESET & VARIABLES (モダンリセット & 変数設定)
       ========================================================================== */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      /* コニカミノルタ公式カラー & 詰めデザイン再現カラー */
      --color-km-blue: #0062C2;       /* コニカミノルタディープブルー */
      --color-km-sky: #7EAEB6;        /* 資料ダウンロード（スカイブルー） */
      --color-text-main: #000000;     /* より引き締まった黒 */
      --color-text-sub: #333333;      /* サブテキスト */
      --color-bubble-gray: #E5E3DF;   /* ゲスト吹き出し用 */
      --color-bubble-blue: #C1E5F4;   /* スタッフ吹き出し用 */
      
      --font-family: 'Noto Sans JP', sans-serif;
      --transition-fast: 0.25s ease;
      --shadow-premium: 0 12px 32px rgba(0, 98, 194, 0.08);
      --shadow-card: 0 15px 35px rgba(0, 0, 0, 0.05);
    }

    body {
      font-family: var(--font-family);
      color: var(--color-text-main);
      background-color: #FFFFFF;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    ul, ol {
      list-style: none;
    }

    /* ==========================================================================
       2. LAYOUT CONTAINER (共通コンテナ)
       ========================================================================== */
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ==========================================================================
       3. KM OFFICIAL HEADER (コニカミノルタ公式ヘッダー)
       ========================================================================== */
    .km-header {
      background-color: #FFFFFF;
      border-bottom: 1px solid #EAEAEA;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .km-header__top-bar {
      border-bottom: 1px solid #F0F0F0;
      padding: 8px 0;
      font-size: 11px;
      color: #666666;
    }
    .km-header__top-bar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .km-header__top-bar-left {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: bold;
    }
    .km-symbol {
      width: 16px;
      height: 16px;
    }
    .km-header__top-bar-right {
      display: flex;
      gap: 16px;
    }
    .km-header__top-bar-right a:hover {
      color: var(--color-km-blue);
    }

    .km-header__main {
      padding: 16px 0;
    }
    .km-header__main .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .km-header__logo {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .km-header__logo-km {
      font-size: 14px;
      font-weight: 900;
      color: var(--color-km-blue);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .km-header__logo-kotobal {
      height: 28px;
      border-left: 1px solid #CCC;
      padding-left: 12px;
      display: flex;
      align-items: center;
    }
    .logo-badge {
      font-weight: 900;
      font-size: 18px;
      letter-spacing: 0.05em;
      color: #333333;
    }
    .logo-badge span {
      color: var(--color-km-blue);
    }

    .km-header__actions {
      display: flex;
      align-items: center;
      gap: 24px;
    }
    .km-header__phone {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
    .km-header__phone-label {
      font-size: 10px;
      color: #666666;
    }
    .km-header__phone-num {
      font-size: 18px;
      font-weight: 900;
    }
    .km-header__btn-group {
      display: flex;
      gap: 12px;
    }
    
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 900;
      padding: 12px 24px;
      border-radius: 4px;
      transition: background-color var(--transition-fast), transform var(--transition-fast);
      white-space: nowrap;
      text-decoration: none;
    }
    .btn--coral {
      color: #FFFFFF;
    }
    .btn--coral:hover {
      background-color: #E2725B;
    }
    .btn--sky {
      background-color: var(--color-km-sky);
      color: #FFFFFF;
    }
    .btn--sky:hover {
      background-color: #2481D7;
    }

    .km-header__nav {
      background-color: #FFFFFF;
      border-top: 1px solid #F0F0F0;
      padding: 12px 0;
    }
    .km-header__nav-list {
      display: flex;
      justify-content: center;
      gap: 40px;
      font-size: 13px;
      font-weight: 500;
    }
    .km-header__nav-item a {
      color: var(--color-text-main);
      position: relative;
      padding-bottom: 4px;
    }
    .km-header__nav-item a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background-color: var(--color-km-blue);
      transition: width var(--transition-fast);
    }
    .km-header__nav-item a:hover::after {
      width: 100%;
    }

    /* ==========================================================================
       4. BREADCRUMBS (ブレッドクラム)
       ========================================================================== */
    .breadcrumbs {
      background-color: #FFFFFF;
      padding: 16px 0;
      font-size: 11px;
      color: #666666;
    }
    .breadcrumbs__list {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .breadcrumbs__item::after {
      content: '>';
      margin-left: 8px;
      color: #CCC;
    }
    .breadcrumbs__item:last-child::after {
      display: none;
    }
    .breadcrumbs__item a:hover {
      color: var(--color-km-blue);
      text-decoration: underline;
    }

    /* ==========================================================================
       5. HERO FIRST VIEW SECTION (メインファーストビュー - image_cfe7a1.jpg準拠)
       ========================================================================== */
    .hero {
      position: relative;
      background-color: #FFFFFF;
      padding: 40px 0 0 0; /* 下部はネイビー帯と連結するため0 */
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('img/bg-texcya.png');
      background-size: cover;
      background-position: center;
      z-index: 0;
      opacity: 0.5;
    }

    /* 右側にホテルスタッフ実写写真を配置するレイヤー */
    .hero__bg-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 52%;
    height: 100%;
    background-image: url(/wp-content/themes/kotobal_theme/img/ai-tel/main-mv.jpg);
    background-size: auto 730px;
    background-repeat: no-repeat;
    background-position: -250px top;
    z-index: 1;
    }

    .hero .container {
      position: relative;
      z-index: 2;
    }

    .hero__grid {
      display: grid;
      grid-template-columns: 1.15fr 1.35fr; /* デザイン案に準拠したアライメント */
      gap: 20px;
      align-items: flex-start;
    }

    /* --- 左カラム：詰めデザインに準拠した詳細テキスト --- */
    .hero__left {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding-right: 16px;
      padding-bottom: 40px;
      position: relative;
      z-index: 1;
    }

    /* 工事不要・ホテル向け統合バッジ */
    .hero__badge-container {
      display: flex;
      align-items: flex-end; 
      gap: 16px;
      background-color: transparent;
      border: none;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
      align-self: flex-start;
    }
    .hero__badge-icon-box {
      width: 64px;
      height: 64px;
      background-color: var(--color-km-blue); 
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .hero__badge-icon-box svg {
      width: 32px;
      height: 32px;
      color: #FFFFFF; 
    }
    .hero__badge-text-box {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      flex-grow: 1;
      border-bottom: 3.5px solid var(--color-km-blue); 
      padding-bottom: 4px;
    }
    .hero__badge-sub {
      font-size: 15px;
      font-weight: 900;
      color: #000000;
      line-height: 1.2;
      margin-bottom: 3px;
      letter-spacing: -0.01em;
    }
    .hero__badge-sub .em {
      color: #0062C2;
      font-size: 20px;
          font-weight: bold;
    }
    .hero__badge-main {
      font-size: 30px;
      font-weight: 900;
      color: var(--color-km-blue);
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    /* メインコピー */
    .hero__title {
      max-width: 470px;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 12px 0;
      text-align: left;
    }
    .hero__title-sub {
      font-size: 39px;
      font-weight: 900;
      color: #000000;
      line-height: 1.25;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }
    .hero__title-main {
      font-size: 57px;
      font-weight: 900;
      color: var(--color-km-blue);
      line-height: 1.15;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }

    /* 不安共感吹き出し全体のラッパー (左丸型アイコン ＋ 左しっぽ付きチャット吹き出し) */
    .hero__balloon-container-gray {
      display: flex;
      align-items: center;
      gap: 16px;
      width: 100%;
      margin-top: 4px;
    }
    .hero__balloon-icon-circle {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: #FFFFFF;
      border: 1px solid #e5e3df;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
      flex-shrink: 0;
    }
    .hero__balloon-icon-circle.blue-border {
      border-color: #0062C2;
    }
    .hero__balloon-bubble-gray {
      background-color: #E5E3DF;
      border-radius: 12px;
      padding: 14px 20px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: relative;
      flex-grow: 1;
    }
    .hero__balloon-bubble-gray::before {
      content: '';
      position: absolute;
      left: -9px;
      top: calc(50% - 8px);
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      z-index: 1;
    }
    .hero__balloon-bubble-gray::after {
      content: '';
      position: absolute;
      left: -7.5px;
      top: calc(50% - 8px);
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-right: 9px solid #E5E3DF;
      z-index: 2;
    }
    .hero__balloon-gray-text-top,
    .hero__balloon-gray-text-bottom {
      font-size: 14px;
      font-weight: 900;
      line-height: 1.4;
      color: #000000;
      letter-spacing: -0.01em;
    }

    /* 解決・通訳吹き出し全体のラッパー (ブルー右しっぽ吹き出し ＋ 右丸型アイコン) */
    .hero__balloon-container-blue {
      display: flex;
      align-items: center;
      gap: 16px;
      width: 100%;
      margin-top: 4px;
    }
    .hero__balloon-bubble-blue {
      background-color: #C1E5F4;
      border-radius: 12px;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      position: relative;
      flex-grow: 1;
    }
    .hero__balloon-bubble-blue::before {
      content: '';
      position: absolute;
      right: -9px;
      top: calc(50% - 8px);
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      z-index: 1;
    }
    .hero__balloon-bubble-blue::after {
      content: '';
      position: absolute;
      right: -7.5px;
      top: calc(50% - 8px);
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 9px solid #C1E5F4;
      z-index: 2;
    }
    .hero__balloon-blue-text {
      font-size: 24px;
      font-weight: 950;
      color: var(--color-km-blue);
      letter-spacing: -0.01em;
      line-height: 1.2;
    }

    /* 3連メリットカード (デザイン案の白カード化) */
    .hero__cards-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 12px;
    }
    .hero__card-item {
      background-color: #FFFFFF;
      border: 1px solid #e5e3df;
      border-radius: 8px;
      padding: 14px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }
    .hero__sp-img {
      display: none;
    }
    .hero__card-icon {
      color: var(--color-km-blue);
      display: flex;
      align-items: center;
    }
    .hero__card-text {
      font-size: 18px;
      font-weight: 900;
      color: var(--color-text-main);
      line-height: 1.4;
    }

    /* 右カラム：空スペースにして背景実写写真を活かす */
    .hero__right {
      height: 480px; /* デスクトップ用プレースホルダー */
    }

    /* --- 下部：フル幅コニカミノルタブルー太帯（さらにディスプレイ連携＋CTA） --- */
    .hero__bottom-band {
      background-color: #f7fafd;
      color: #FFFFFF;
      padding: 20px 0 50px;
      position: relative;
      z-index: 3;
    }
    .hero__display-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .hero__display-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    .hero__display-badge {
      background-color: var(--color-km-blue);
      color: #FFFFFF;
      font-size: 18px;
      font-weight: 900;
      padding: 3px 12px;
      border-radius: 50px;
    }
    .hero__display-title {
      font-size: 23px;
      font-weight: 900;
          color: #000;
      letter-spacing: 0.05em;
    }

    .hero__display-pics-link {
      display: block;
      text-decoration: none;
      cursor: pointer;
    }
    .hero__display-pics-link:hover .hero__display-item-box img {
      opacity: 0.85;
      transition: opacity 0.2s ease;
    }
    .hero__display-cta-inner {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
          background: linear-gradient(to right, #006FDE 0%, #8BC5FF 100%);
              margin: 0 auto;
    width: 450px;
      color: #FFFFFF;
      font-size: 15px;
      font-weight: 700;
      padding: 14px 36px;
      border-radius: 4px;
      letter-spacing: 0.05em;
    }
    .hero__display-cta-inner svg {
      flex-shrink: 0;
    }

    /* 接客イメージ＋の並列表示 */
    .hero__display-pics {
      display: grid;
      grid-template-columns: 1fr 40px 1fr;
      align-items: center;
      gap: 12px;
      width: 100%;
      max-width: 1000px;
      background-color: #e5e3df;
      border-radius: 10px;
      padding: 10px;
    }
    .hero__display-item {
      border-radius: 6px;
      overflow: hidden;
    }
    .hero__display-item-label {
      background-color: #000;
      color: #FFFFFF;
      font-size: 18px;
      font-weight: 900;
      padding: 10px 14px;
      text-align: center;
      letter-spacing: 0.04em;
    }
    .hero__display-item-box {
      overflow: hidden;
      height: 130px;
      background-color: rgba(255, 255, 255, 0.05);
    }
    .hero__display-item-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .hero__display-plus {
text-align: center;
    font-size: 43px;
    font-weight: 900;
    color: #000;
    }

    /* 並列CTAボタン領域 */
    .hero__cta-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 58px;
    width: 100%;
    height: 95px;
    max-width: 1000px;
    margin-top: 12px;
    }
    .hero__cta-group .btn {
      padding: 16px 24px;
          font-size: 24px;
      font-weight: 900;
      border-radius: 6px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }

    /* ==========================================================================
       5b. CASE STUDY SECTION (導入事例：ANAホリデイ・イン東京ベイ様)
       ========================================================================== */
    .case-study {
      padding: 100px 0;
      background-color: #FFFFFF;
      position: relative;
    }
    
    /* 非対称なミントブルーの背景色ブロック */
    .case-study__bg-stripe {
      position: absolute;
      top: 15%;
      left: 0;
      width: 55%;
      height: 75%;
      background-color: #e5e3df;
      z-index: 1;
      pointer-events: none;
    }

    /* 特大英字背景 */
    .case-study__bg-text {
      position: absolute;
      top: 40px;
      right: 5%;
      font-size: 110px;
      font-weight: 900;
      color: rgba(0, 98, 194, 0.03); /* 超低彩度ネイビー */
      line-height: 1;
      pointer-events: none;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      z-index: 2;
    }

    .case-study .container {
      position: relative;
      z-index: 3;
    }

    .case-study__meta {
      font-size: 14px;
      font-weight: 900;
      color: var(--color-km-sky);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-bottom: 12px;
    }
    .case-study__title {
      font-size: 32px;
      font-weight: 900;
      color: var(--color-km-blue);
      line-height: 1.3;
      margin-bottom: 40px;
    }

    /* 左右非対称な写真＋カードレイアウト */
    .case-study__interactive-layout {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      align-items: center;
      gap: 0; 
      margin-bottom: 56px;
      position: relative;
    }

    /* 左側の画像領域 */
    .case-study__image-placeholder {
      width: 100%;
      height: 480px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 16px 36px rgba(0,0,0,0.12);
      z-index: 4;
      position: relative;
    }
    .case-study__image-placeholder img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }

    /* 右側の上質な重なりホワイトカード (洋フォント比率・デザイン指定の完全適用) */
    .case-study__content-card {
      background-color: #FFFFFF;
      border-radius: 8px;
      padding: 40px;
      box-shadow: var(--shadow-card);
      border: 1px solid rgba(0, 0, 0, 0.03);
      margin-left: -60px; /* 左側の画像領域と美しくオーバーラップ */
      z-index: 5;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .case-study__card-tag {
      font-size: 13px;
      font-weight: 900;
          color: var(--color-km-blue);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      display: block;
    }
    .case-study__card-title {
      font-size: 24px; /* ユーザー指定：24px に変更 */
      font-weight: 900; /* ユーザー指定：900 に変更 */
      color: var(--color-text-main);
      line-height: 1.8; /* ユーザー指定：1.8 に変更 */
    }
    .case-study__card-lead {
      font-size: 16px; /* ユーザー指定：16px に変更 */
      line-height: 1.8; /* ユーザー指定：1.8 に変更 */
      color: var(--color-text-sub);
    }

    /* ホワイトカード内に美しく配置された「ISSUE」「PURPOSE」「VALUE」の3連横並びグリッド */
    .case-study__inline-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 8px;
      border-top: 1px dashed #e5e3df;
      padding-top: 16px;
    }
    .case-study__inline-item {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background-color: #f7fafd;
      border-radius: 6px;
      padding: 16px 12px;
      border-top: 3.5px solid var(--color-km-blue); /* すべてコニカミノルタブルーへ統一 */
    }
    
    /* バッジ色をコニカミノルタブルー系統に統一 */
    .case-study__inline-badge {
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 2px 8px;
      border-radius: 4px;
      align-self: flex-start;
      background-color: #C1E5F4; 
      color: var(--color-km-blue); 
    }

    .case-study__inline-content {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .case-study__inline-label {
      font-size: 18px; /* ユーザー指定：18px に変更 */
      line-height: 1.3; /* ユーザー指定：1.3 に変更 */
      font-weight: 900;
      color: #000;
    }
    .case-study__inline-text {
      font-size: 14px; /* 親要素スケールに調和する14px */
      line-height: 1.6; 
      color: var(--color-text-sub);
    }

    /* お客様の声：image_c2d650.png の2カラム（左テキスト ⇄ 右プレースホルダー＆署名）の完全マージ再現 */
    .case-study__quote {
      background-color: #fff;
      border-radius: 8px;
      border: 1px solid var(--color-km-blue);
      padding: 32px 40px;
          align-items: center;
      grid-template-columns: 1.4fr 1fr;
      gap: 32px;
      position: relative;
      z-index: 4;
    }
    .case-study__quote-icon {
      font-size: 48px;
      font-family: serif;
      color: var(--color-km-blue);
      position: absolute;
      top: 32px;
      left: 24px;
      line-height: 1;
    }
.case-study__quote-text {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.8;
    padding: 0 0 30px 0;
    color: var(--color-km-blue);
    position: relative;
    z-index: 2;
}
    .case-study__quote-right {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
    }
    .case-study__quote-img-placeholder {
      background-color: #FFFFFF;
      border: 1px solid #e5e3df;
      border-radius: 4px;
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 900;
      color: #000;
    }
    .case-study__quote-author {
      text-align: center;
      font-size: 12px;
      font-weight: 900;
      color: #000;
    }

    /* ==========================================================================
       5c. PROBLEM SECTION (お悩み共感セクション：image_ce12e4.png ＆ image_6d46be.png 準拠)
       ========================================================================== */
    .problem-section {
      background-image: url(/wp-content/themes/kotobal_theme/img/ai-tel/problem-bg-white.png);
      background-size: cover;
      background-position: center right;
      padding: 80px 0 0;
      position: relative;
    }
    .problem-section::before {
      content: '';
      position: absolute;
      inset: 0;

      z-index: 0;
    }

    .problem-section__bg-text {
      display: none;
    }

    .problem-layout {
      position: relative;
      z-index: 2;
      max-width: 720px;
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .problem-header {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .problem-left__tag {
      background-color: #FFFFFF;
      color: #000000;
      font-size: 11px;
      font-weight: 900;
      padding: 4px 10px;
      border-radius: 3px;
      align-self: flex-start;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .problem-left__title {
      font-size: 32px;
      font-weight: 900;
      color: #FFFFFF;
      line-height: 1.45;
      letter-spacing: -0.01em;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    }

    .problem-cards-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .problem-card-item {
      background-color: rgba(255, 255, 255, 0.88);
      padding: 16px 14px;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .problem-card__badge {
      display: none;
    }
    .problem-card__title-row {
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }
    .problem-card__icon {
      color: var(--color-km-blue);
      display: flex;
      flex-shrink: 0;
      margin-top: 5px;
    }
    .problem-card__title {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.6;
    color: #000000;
    }
    .problem-card__desc {
      font-size: 12px;
      line-height: 1.65;
      color: #333333;
      padding-left: 26px;
    }


    /* 1200pxコンテナ幅の最下部に美しく配置される、独立したホワイト帯バナー (image_c32d40.png 融合完全再現) */
    .problem-bottom-banner {
      margin: 48px 0 0;
      padding: 0 0 48px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 28px;
      position: relative;
      z-index: 4;
    }
    .problem-bottom-banner__arrow {
      display: none;
    }
    .problem-bottom-banner__text {
      font-size: 28px;
      font-weight: 900;
      line-height: 1.7;
      color: #FFFFFF;
      letter-spacing: 0.03em;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    }
    .problem-bottom-banner__triangle {
    width: 160px;
    position: absolute;
    top: 115px;
    height: 90px;
    background-color: #666460;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    }

    /* ==========================================================================
       5d. SOLUTION SECTION (解決策詳細：image_d0eaaa.jpg 完全オマージュ)
       ========================================================================== */
    .solution-section {
      padding: 100px 0;
      background-color: #FFFFFF;
      border-bottom: 1px solid #e5e3df;
      position: relative;
    }
    .solution-section__bg-text {
      position: absolute;
      top: 40px;
      right: 5%;
      font-size: 110px;
      font-weight: 900;
      color: rgba(0, 98, 194, 0.03);
      line-height: 1;
      pointer-events: none;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      z-index: 1;
    }
    .solution-section__header {
      margin-bottom: 56px;
      position: relative;
      z-index: 2;
    }
    .solution-section__meta {
      font-size: 14px;
      font-weight: 900;
      color: var(--color-km-sky);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-bottom: 12px;
    }
    .solution-section__title {
      font-size: 32px;
      font-weight: 900;
      color: var(--color-km-blue);
      line-height: 1.3;
      margin-bottom: 16px;
    }
    .solution-section__subtitle {
      font-size: 18px;
      font-weight: 900;
      color: var(--color-text-main);
      line-height: 1.4;
    }

    /* 4つの解決ステップ（2x2グリッド・image_d0eaaa.jpgの精密再現） */
    .solution-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 32px;
      row-gap: 0;
      position: relative;
      z-index: 2;
    }
    .sol-card {
      background-color: #FFFFFF;
      border: 1px solid #e5e3df;
      border-radius: 8px;
      padding: 32px;
      position: relative;
      z-index: 2;
      box-shadow: 0 10px 30px rgba(0, 98, 194, 0.08);
      transition: box-shadow var(--transition-fast);
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    /* 上段カード：中央画像に下からかぶる */
    .solution-grid > .sol-card:nth-child(-n+2) {
      margin-bottom: 0px;
    }
    /* 下段カード：中央画像に上からかぶる */
    .solution-grid > .sol-card:nth-child(n+4) {
      margin-top: 22px;
    }
    .sol-card:hover {
      box-shadow: 0 15px 35px rgba(0, 98, 194, 0.06);
    }

    /* 中央：全幅解説図 */
    .sol-center-diagram {
      grid-column: 1 / -1;
      border-radius: 12px;
      overflow: hidden;
      width: 65%;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }
    .sol-sp-diagram {
      display: none;
    }
    .sol-center-diagram img {
      width: 100%;
      height: auto;
      display: block;
    }
    
    /* 左上を綺麗に飾るタブ型バッジ */
    .sol-card__badge {
      position: absolute;
      top: -16px;
      left: 32px;
      background-color: #826fb0;
      color: #FFFFFF;
      font-size: 12px;
      font-weight: 900;
      padding: 6px 16px;
      border-radius: 4px;
      box-shadow: 0 4px 10px rgba(0, 98, 194, 0.2);
    }
    .sol-card__badge--sky {
      background-color: var(--color-km-sky);
      box-shadow: 0 4px 10px rgba(126, 174, 182, 0.2);
    }
    .sol-card__badge--blue {
      background-color: var(--color-km-blue);
      box-shadow: 0 4px 10px rgba(0, 98, 194, 0.2);
    }
    .sol-card__badge--coral {
      background-color: #c0167b;
      box-shadow: 0 4px 10px rgba(243, 132, 108, 0.2);
    }

    /* 内部の画像・テキスト左右レイアウト */
    .sol-card__body {
      display: grid;
      grid-template-columns: 140px 1fr;
      gap: 24px;
      align-items: center;
      margin-top: 8px;
    }

    /* 左側の美しい真円切り抜きイラストコンテナ */
    .sol-card__image-circle {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background-color: #f7fafd;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 3px solid #e5e3df;
      box-shadow: inset 0 2px 8px rgba(0,0,0,0.05);
      flex-shrink: 0;
    }
    .sol-card__image-circle svg {
      color: var(--color-km-sky);
    }
    .sol-card__image-circle--blue svg {
      color: var(--color-km-blue);
    }
    .sol-card__image-circle--coral svg {
      color: #c0167b;
    }
    .sol-card__image-circle--purple svg {
      color: #826fb0;
    }

    /* 右側のコンテンツ */
    .sol-card__content {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    /* 敷かれた淡いカラーマーカー帯見出し */
    .sol-card__title-box {
      background-color: #826fb0;
      padding: 6px 12px;
      border-radius: 4px;
      align-self: flex-start;
    }
    .sol-card__title-box--sky {
      background-color: var(--color-km-sky);
    }
    .sol-card__title-box--blue {
      background-color: var(--color-km-blue)
    }
    .sol-card__title-box--coral {
      background-color: #c0167b;
    }

    .sol-card__title {
          font-size: 18px;
    line-height: 1.3;
      font-weight: 900;
      color: #fff;
    }
    .sol-card__desc {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-sub);
    }

    /* 円形チェックマークの3行チェックリスト */
    .sol-card__list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      border-top: 1px dashed #e5e3df;
      padding-top: 12px;
    }
    .sol-card__item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 900;
      color: var(--color-text-main);
    }
    .sol-card__check-circle {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: rgba(0, 98, 194, 0.1);
      color: var(--color-km-blue);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 10px;
      font-weight: 900;
    }


    /* ==========================================================================
       5e. BENEFIT SECTION (立場別の導入効果セクション - PDF5ページ目 ＆ image_c2c444.png ＆ image_c2b93d.png)
       ========================================================================== */
    .benefit-section {
      padding: 100px 0;
      background-color: #f7fafd; /* 明暗リズム */
      border-bottom: 1px solid #e5e3df;
      position: relative;
    }
    .benefit-section__bg-text {
      position: absolute;
      top: 40px;
      left: 5%;
      font-size: 110px;
      font-weight: 900;
      color: rgba(0, 98, 194, 0.03);
      line-height: 1;
      pointer-events: none;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      z-index: 1;
    }
    .benefit-header {
      margin-bottom: 56px;
      position: relative;
      z-index: 2;
    }
    .benefit-header__meta {
      font-size: 14px;
      font-weight: 900;
      color: var(--color-km-sky);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-bottom: 12px;
    }
    .benefit-header__title {
      font-size: 28px;
      font-weight: 900;
      color: var(--color-km-blue);
      line-height: 1.4;
      margin-bottom: 16px;
    }
    .benefit-header__subtitle {
      font-size: 18px;
    font-weight: 900;
    line-height: 1.8;
      color: var(--color-text-sub);
    }

    /* 3つの立場グリッドカード (D-7 カタログ準拠) */
    .benefit-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      position: relative;
      z-index: 2;
      margin-bottom: 56px;
    }
    .benefit-card {
      background-color: #FFFFFF;
      border: 1px solid #e5e3df;
      border-radius: 8px;
      padding: 32px 24px;
      box-shadow: 0 10px 30px rgba(0, 98, 194, 0.02);
      transition: box-shadow var(--transition-fast);
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .benefit-card:hover {
      box-shadow: var(--shadow-card);
    }
    .benefit-card__top {
      display: flex;
      align-items: center;
      gap: 16px;
      border-bottom: 2px solid #e5e3df;
      padding-bottom: 16px;
    }
    .benefit-card__icon-box {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .benefit-card__icon-box--blue {
      background-color: #f7fafd;
      color: #009eb7;
    }
    .benefit-card__icon-box--coral {
      background-color: #f7fafd;
      color: #cea100;
    }
    .benefit-card__icon-box--green {
      background-color: #f7fafd;
      color: #a39890;
    }
    .benefit-card__header-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .benefit-card__num {
      font-size: 11px;
      font-weight: 900;
      color: var(--color-km-sky);
      letter-spacing: 0.05em;
    }
    .benefit-card__label {
      font-size: 17px;
    line-height: 1.3;
    font-weight: 900;
      color: var(--color-text-main);
    }

    /* benefit-card 内のイラスト真円コンテナ */
    .benefit-card__image-circle {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background-color: #e5e3df;
      border: 2px solid #e5e3df;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 8px auto;
      flex-shrink: 0;
    }
    .benefit-card__image-circle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .benefit-card__mid {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .benefit-card__title {
      font-size: 17px;
    font-weight: 900;
    line-height: 1.7;
      color: #009eb7;
    }
    .benefit-card__title--coral {
      color: #cea100;
    }
    .benefit-card__title--green {
      color: #a39890;
    }
    .benefit-card__lead {
      font-size: 14px;
    line-height: 1.6;
      color: var(--color-text-sub);
    }
    /* リスト要素 */
    .benefit-card__list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      border-top: 1px dashed #e5e3df;
      padding-top: 16px;
    }
    .benefit-card__item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.4;
      color: var(--color-text-main);
    }
    .benefit-card__check {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: rgba(0, 98, 194, 0.05);
      color: #009eb7;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 10px;
      font-weight: 900;
    }
    .benefit-card__check--coral {
      background-color: #f7fafd;
      color: #cea100;
    }
    .benefit-card__check--green {
      background-color: #f7fafd;
      color: #a39890;
    }

    /* benefit-summary の新デザイン仕様 (image_c2b93d.png 完全再現仕様) */
    .benefit-summary-new {
      background-color: #fff; 
      border: 1px solid var(--color-km-blue);; 
      border-radius: 12px;
      padding: 24px 32px;
      display: flex;
      align-items: center;
      gap: 32px;
      width: 100%;
      box-shadow: 0 10px 25px rgba(0, 98, 194, 0.03);
    }
    
    .benefit-summary-left {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }
    .benefit-summary-hotel-icon {
      width: 56px;
      height: 56px;
      background-color: #FFFFFF;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(0, 98, 194, 0.05);
      flex-shrink: 0;
    }
    .benefit-summary-text {
      font-size: 20px;
    font-weight: 900;
      color: #333333;
      line-height: 1.5;
    }
    .benefit-summary-text .highlight {
      color: var(--color-km-blue);
      font-weight: 900;
    }
    
    .benefit-summary-divider {
      width: 1px;
      height: 60px;
      border-left: 1px dotted var(--color-km-sky); 
      flex-shrink: 0;
    }
    
    .benefit-summary-right {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-grow: 1;
      gap: 16px;
    }
    .benefit-summary-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      flex: 1;
    }
    .benefit-summary-item-icon {
      width: 44px;
      height: 44px;
      background-color: #FFFFFF;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(0, 98, 194, 0.05);
      color: var(--color-km-blue);
    }
    .benefit-summary-item-txt {
      font-size: 14px;
      font-weight: 900;
      color: #333333;
      line-height: 1.4;
      white-space: nowrap;
    }
    
    .benefit-summary-sub-divider {
      width: 1px;
      height: 40px;
      background-color: #e5e3df; 
    }

    /* ==========================================================================
       6. CTA BAND (紺色太帯CTA)
       ========================================================================== */
    .cta-band {
      background-color: var(--color-km-blue);
      padding: 56px 0;
    }
    .cta-band__border-box {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 24px;
      border: 1.5px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      padding: 40px 48px;
    }
    .cta-band__border-box .btn {
      gap: 8px;
    }

    /* ==========================================================================
       7. OFFICIAL FOOTER
       ========================================================================== */
    .km-footer {
      background-color: #fff;
      color: rgba(255, 255, 255, 0.7);
      padding: 64px 0 0;
    }
    .km-footer__grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
      padding-bottom: 48px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .km-footer__brand {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .km-footer__logo-text {
      font-size: 22px;
      font-weight: 900;
      color: #FFFFFF;
      letter-spacing: 0.1em;
    }
    .km-footer__logo-desc {
      font-size: 13px;
      line-height: 1.8;
      color: rgba(255, 255, 255, 0.55);
    }
    .km-footer__nav-title {
      font-size: 13px;
      font-weight: 900;
      color: #FFFFFF;
      margin-bottom: 16px;
      letter-spacing: 0.05em;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
    .km-footer__nav-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .km-footer__nav-list li a {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.55);
      transition: color var(--transition-fast);
    }
    .km-footer__nav-list li a:hover {
      color: #FFFFFF;
    }
    .km-footer__bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 0;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.35);
    }
    .km-footer__bottom-links {
      display: flex;
      gap: 24px;
    }
    .km-footer__bottom-links a {
      color: rgba(255, 255, 255, 0.35);
      transition: color var(--transition-fast);
    }
    .km-footer__bottom-links a:hover {
      color: rgba(255, 255, 255, 0.7);
    }

    @media screen and (min-width: 768px) {
    .ktbl-floating-bnr {
        width: 230px;
        height: auto;
        bottom: 8rem;
        right: 0;
        padding: 0;
        box-sizing: content-box;
    }
    .ktbl-floating-bnr a {
        color: white;
        text-decoration: none;
        display: block;
        background: transparent;
        border-radius: 0;
        margin-bottom: 0;
    }
    .ktbl-floating-bnr-sp {
        display: none;
    }
    /* floating banner inner parts */
    .ktbl-bnr__inner {
        background-color: #0D2340;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    }
    .ktbl-bnr__inner hr {
      width: 120px;
    display: block;
    margin: 12px auto 5px;
    }
    .ktbl-bnr__inner_border {
    border: 2px solid #FFF;
    margin: 5px;
    border-radius: 8px;
    }
    .ktbl-bnr__header {
        padding: 14px 14px 10px;
        text-align: center;
    }
    .ktbl-bnr__new {
        display: inline-block;
font-size: 20px;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 1.3;
        margin: 3px 0 0;
        letter-spacing: 0.1em;
    }
    .ktbl-bnr__title {
font-size: 20px;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 1.3;
        margin: 3px 0 0;
        letter-spacing: 0.1em;
    }
    .ktbl-bnr__bubble {
        background-color: #FFFFFF;
        border-radius: 8px;
        margin: 0 10px 15px 10px;
        padding: 9px 10px;
        font-size: 13px;
        font-weight: bold;
        color: #0d2340;
        text-align: center;
        line-height: 1.65;
        position: relative;
    }
    .ktbl-bnr__sub {
        font-size: 11px;
        color: #FFFFFF;
        text-align: center;
        padding: 8px 10px 10px;
        letter-spacing: 0.02em;
        opacity: 0.9;
    }
    .ktbl-bnr__cta {
        background-color: #fe6323;
        color: #FFFFFF;
        font-size: 11px;
        font-weight: 700;
        padding: 8px 8px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        letter-spacing: 0.03em;
        line-height: 1.4;
        margin: 0 10px 10px;
        border-radius: 12px;
    }
    .ktbl-bnr__arrow {
        font-size: 18px;
        font-weight: 900;
        flex-shrink: 0;
    }
}

.ktbl-floating-bnr, .ktbl-floating-bnr-sp {
        position: fixed;
        z-index: 50;
        color: white;
        padding: 0;
        border-radius: 8px;
        text-align: center;
        display: none;
    }
    /* ==========================================================================
       9. RESPONSIVE DESIGN (レスポンシブ設計)
       ========================================================================== */
    @media screen and (max-width: 767px) {
      .hero__grid {
        grid-template-columns: 1fr;
        gap: 0;
      }
      .km-header__nav {
        display: none;
      }
      .problem-layout {
        gap: 24px;
      }
      .problem-cards-grid {
        grid-template-columns: 1fr;
      }
      .problem-left__title {
        font-size: 21px;
      }
      .case-study__interactive-layout {
        grid-template-columns: 1fr;
      }
      .case-study__content-card {
        margin-left: 0;
        margin-top: -30px;
        padding: 32px 24px;
      }
      .case-study__image-placeholder {
        height: 230px;
      }
      .case-study__inline-list {
        grid-template-columns: 1fr;
      }
      .solution-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .solution-grid > .sol-card:nth-child(-n+2),
      .solution-grid > .sol-card:nth-child(n+4) {
        margin-bottom: 0;
        margin-top: 0;
      }
      .sol-center-diagram {
        display: none;
      }
      .sol-sp-diagram {
        display: block;
        width: 70%;
        margin: 0 auto;
      }
      .sol-sp-diagram img {
        width: 100%;
        height: auto;
        display: block;
      }
      .benefit-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .benefit-summary-new {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 13px 15px;
      }
      .benefit-summary-left {
        justify-content: center;
      }
      .benefit-summary-divider {
        width: 100%;
        height: 1px;
        border-left: none;
        border-top: 1px dotted var(--color-km-sky);
      }
      .benefit-summary-right {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
      }
      .benefit-summary-item {
        flex-direction: row;
        text-align: left;
        gap: 16px;
      }
      .benefit-summary-item-icon {
        flex-shrink: 0;
      }
      .benefit-summary-item-txt {
        white-space: normal;
        font-size: 18px;
      }
      .benefit-summary-text {
    font-size: 21px;
    font-weight: 900;
    color: #333333;
    line-height: 1.5;
            letter-spacing: -0.04em;
}
      .benefit-summary-sub-divider {
        display: none;
      }
      .hero__cta-group {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .hero__display-container {
        align-items: stretch;
      }
      .hero__display-cta-inner {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
      }
      .hero__display-pics {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        max-width: none;
      }
      .hero__display-plus {
        display: none;
      }
      .hero__bg-right {
        display: none;
      }
      .hero__sp-img {
        display: block;
        width: 100%;
        height: 200px;
        background-image: url(/wp-content/themes/kotobal_theme/img/ai-tel/gemini_img01.png);
        background-size: cover;
        background-position: center top;
        border-radius: 8px;
      }

      .case-study__bg-text,
      .problem-section__bg-text,
      .solution-section__bg-text,
      .benefit-section__bg-text {
        position: static;
        font-size: 48px;
        text-align: center;
        margin-bottom: 8px;
      }
      .problem-section__bg-text {
        color: #f7fafd;
      }

      .hero__badge-container {
        gap: 10px;
        align-items: center;
        width: 100%;
      }
      .hero__badge-icon-box {
        width: 34px;
        height: 34px;
        border-radius: 8px;
      }
      .hero__badge-icon-box svg {
        width: 24px;
        height: 24px;
      }
      .hero__badge-text-box {
        border-bottom-width: 2.5px;
        padding-bottom: 2px;
      }
      .hero__badge-sub {
        font-size: 11px;
      }
      .hero__badge-main {
        font-size: 21px;
      }
      .km-header__phone,
      .km-header__top-bar-right,
      .km-header__logo-km {
        display: none;
      }
      .km-header__main {
        padding: 12px 0;
      }
      .hero__right {
    height: auto;
}
      .hero {
        padding: 0 0 32px 0;
      }
      .hero__title {
        max-width: 100%;
        margin: 0;
      }
      .hero__title-sub {
        font-size: 26px;
        white-space: normal;
      }
      .hero__title-main {
        font-size: 38px;
        white-space: normal;
      }
      .hero__balloon-container-gray {
        gap: 8px;
      }
      .hero__balloon-icon-circle {
        width: 28px;
        height: 28px;
      }
      .hero__balloon-icon-circle svg {
        width: 14px;
        height: 14px;
      }
      .hero__balloon-bubble-gray {
        padding: 10px 8px;
      }
      .hero__balloon-bubble-gray::before,
      .hero__balloon-bubble-gray::after {
        top: calc(50% - 6px);
      }
      .hero__balloon-container-blue {
        gap: 8px;
      }
      .hero__balloon-bubble-blue {
                padding: 10px 8px;
      }
      .hero__balloon-bubble-blue::before,
      .hero__balloon-bubble-blue::after {
        top: calc(50% - 6px);
      }
      .hero__balloon-blue-text {
        font-size: 18px;
      }
      .hero__cards-row {
        grid-template-columns: repeat(3, 1fr);
      }
      .cta-band__border-box {
        flex-direction: column;
        gap: 12px;
      }
      .cta-band__border-box .btn {
        width: 100%;
      }
      .km-footer__grid {
        grid-template-columns: 1fr;
      }
      .km-footer__bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
      }
      .sol-card {
        padding: 20px 16px 16px;
        gap: 10px;
      }
      .sol-card__badge {
        top: -12px;
        left: 16px;
        font-size: 11px;
        padding: 4px 12px;
      }
      .sol-card__body {
        display: block;
        margin-top: 4px;
      }
      .sol-card__image-circle {
        display: none;
      }
      .sol-card__content {
        width: 100%;
      }
      .sol-card__title-box {
        align-self: unset;
        margin-bottom: 8px;
      }
      .sol-card__title {
        font-size: 15px;
      }
      .sol-card__desc {
        font-size: 13px;
        line-height: 1.6;
      }
      .benefit-summary__grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
.sol-card__content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.sol-card__badge--blue {
    background-color: var(--color-km-blue);
    box-shadow: unset;
}
.sol-card__badge--sky {
    background-color: var(--color-km-sky);
    box-shadow: unset;
}
.sol-card__badge--coral {
    background-color: #c0167b;
    box-shadow: unset;
}
.sol-card__badge {
    box-shadow:unset;
}
      .container {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}
.hero__left {
    padding-right: 0;
}
.hero__badge-sub .em {
    color: #0062C2;
    font-size: 13px;
    font-weight: bold;
}
.hero__card-text {
    font-size: 13px;
    font-weight: 900;
    color: var(--color-text-main);
    line-height: 1.4;
}
.hero__cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-top: 12px;
}
.hero__card-item {
    background-color: #FFFFFF;
    border: 1px solid #e5e3df;
    border-radius: 8px;
    padding: 8px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.hero__left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-right: 0;
    padding-bottom: 30px;
    position: relative;
    z-index: 1;
}
.hero__display-title {
    font-size: 21px;
    font-weight: 900;
    color: #000;
    letter-spacing: 0.05em;
}
.hero__display-badge {
    background-color: var(--color-km-blue);
    color: #FFFFFF;
    font-size: 18px;
    line-height: 24px;
    padding: 10px 12px;
    border-radius: 50px;
}
.hero__display-item-label {
    background-color: #000;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 900;
    padding: 10px 14px;
    text-align: center;
    letter-spacing: 0.04em;
}
.hero__bottom-band {
    background-color: #f7fafd;
    color: #FFFFFF;
    padding: 20px 0 20px;
    position: relative;
    z-index: 3;
}
.case-study__title {
    font-size: 21px;
    font-weight: 900;
    color: var(--color-km-blue);
    line-height: 1.3;
    margin-bottom: 15px;
}
.case-study__card-title {
    font-size: 18px;
    font-weight: 900;
    color: var(--color-text-main);
    line-height: 1.8;
}
.case-study__card-lead {
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-text-sub);
}
.case-study__quote-text {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.8;
    padding: 0 0 30px 0;
    color: var(--color-km-blue);
    position: relative;
    z-index: 2;
}
.case-study {
    padding: 20px 0;
    background-color: #FFFFFF;
    position: relative;
}
.problem-bottom-banner__text {
    font-size: 21px;
    font-weight: 900;
    line-height: 1.7;
    color: #FFFFFF;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.problem-bottom-banner__triangle {
    width: 105px;
    position: absolute;
    top: 132px;
    height: 52px;
    background-color: #666460;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.solution-section__title {
    font-size: 21px;
    font-weight: 900;
    color: var(--color-km-blue);
    line-height: 1.3;
    margin-bottom: 16px;
}
.solution-section__subtitle {
    font-size: 16px;
    font-weight: 900;
    color: var(--color-text-main);
    line-height: 1.4;
}
.benefit-header__title {
    font-size: 21px;
    font-weight: 900;
    color: var(--color-km-blue);
    line-height: 1.4;
    margin-bottom: 16px;
}
.benefit-header__subtitle {
    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;
    color: var(--color-text-sub);
}
.benefit-card {
    background-color: #FFFFFF;
    border: 1px solid #e5e3df;
    border-radius: 8px;
    padding: 13px 15px;
    box-shadow: 0 10px 30px rgba(0, 98, 194, 0.02);
    transition: box-shadow var(--transition-fast);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.benefit-card__label {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 900;
    color: var(--color-text-main);
}
.benefit-card__title {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.7;
    color: #009eb7;
}
.benefit-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid #e5e3df;
    padding-bottom: 16px;
}
.benefit-card__icon-box {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
    .km-header img, .km-footer img {
width: 100%;
    }
    .ktbl-floating-bnr {
        display: none;
    }
    .ktbl-floating-bnr-sp {
        display: block;
    }
        .ktbl-floating-bnr-sp {
        width: 78%;
        height: auto;
        padding: 10px 10px 0;
        bottom: 0;
        left: 0;
        border-radius: 0;
        background: #001a43;
    }
    .ktbl-floating-bnr a, .ktbl-floating-bnr-sp a {
        color: white;
        text-decoration: none;
        font-weight: bold;
    }
    .ktbl-bnr__inner_border {
      background: #00394d;
    }
    .ktbl-bnr__header {
      display: inline-flex;
    font-size: 13px;
    font-weight: bold;
    }
    .ktbl-bnr__bubble {
      font-size: 10px;
    }
        .ktbl-bnr__cta {
        background-color: #fe6323;
        width: 180px;
        color: #FFFFFF;
        font-size: 10px;
        font-weight: 700;
        padding: 4px 8px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        letter-spacing: 0.03em;
        line-height: 1.4;
        margin: 5px auto 10px;
        border-radius: 12px;
    }
    }

    .header, footer {
text-align:center;
    }