.clm-content-creation {
  h1, h2, h3, h4, h5, h6, b, em, strong {
    font-weight: bold;
  }
  ul, li {
    list-style: disc;
  }
  /* --------------------------------------------------
    ヘッダーエリア
  -------------------------------------------------- */
  .inner {
    position:relative;
    width:100%;
    height:100%;
    max-width: 1100px;
    margin:0 auto;
    padding:0 20px;
  }
  header {
    position:relative;
    width:100%;
    height:auto;
    padding:60px 0;
    /*background: linear-gradient(45deg, #EFEFEF, #E5E5E5);*/
    overflow:hidden;
    >.inner {
      display:flex;
      justify-content:space-between;
      flex-direction: row-reverse;
      align-items:center;
    }
    .catchcopy {
      display:inline-block;
    }
    h1 {
      margin:0;
      padding:0;
      font-size:36px;
      letter-spacing:0.1em;
      line-height:1.5;
      z-index:2;
    }
    .button.square {
      width:100%;
      max-width:360px;
      height:56px;
      border-radius:5px;
      border:none;
      margin-top:40px;
    }
    .__img {
      width:auto;
      height:340px;
    }
  }

  /* --------------------------------------------------
    Overview セクション（灰色背景）
  -------------------------------------------------- */
  .overview {
    background-color: #f5f8fa;
    padding: 80px 0;
  }

  .overview .inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .intro-text-area {
    text-align: center;
    margin-bottom: 0;
  }

  .intro-text-area h2 {
    font-size: 28px;
    color: #0056b3;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
  }

  .intro-text-area h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #0056b3;
  }

  .intro-lead-appeal {
    font-size: 18px;
    font-weight: normal;
    line-height: 1.9;
    color: #333;
    margin-bottom: 0;
    text-align: left;
    display: inline-block;
    max-width: 900px;
  }

  /* --------------------------------------------------
    Merit & Flow セクション
  -------------------------------------------------- */
  .merit-section {
    background-color: #fff;
    padding: 60px 0;
  }

  .section-header {
    text-align: center;
    margin-bottom: 40px;
  }

  .section-header h2 {
    font-size: 26px;
    color: #333;
  }

  /* フローチャート */
  .flow-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .flow-card {
    background: #fff;
    padding: 30px 20px;
    border-radius: 8px;
    width: 280px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-top: 4px solid #0056b3;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .flow-card:not(:last-child)::after {
    content: "▶";
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
    font-size: 20px;
  }

  .flow-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px auto;
    color: #0056b3;
  }

  .flow-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  .flow-card strong {
    display: block;
    font-size: 18px;
    margin-bottom: 10px;
    color: #0056b3;
  }

  .flow-duration {
    margin-top: 15pxw;
    padding-top: 15px;
    font-size: 13px;
    color: #555;
    font-weight: bold;
    background: #f4f4f4;
    width: 100%;
    padding: 8px 0;
    border-radius: 4px;
  }

  /* フローチャート下の注釈 */
  .flow-note {
    text-align: right;
    font-size: 13px;
    color: #666;
    margin-bottom: 60px;
    display: block;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 10px;
  }

  /* メリット強調カード */
  .merit-highlight-box {
    background-color: #f0f6fb;
    padding: 50px 30px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 80px;
  }

  .merit-highlight-title {
    font-size: 24px;
    color: #0056b3;
    margin-bottom: 40px;
    font-weight: bold;
  }

  /* 3つのカード */
  .merit-cards-container {
    display: flex;
    justify-content: center;
    gap: 20px; 
    flex-wrap: wrap;
  }

  .benefit-card {
    background: #fff;
    border-radius: 8px;
    padding: 40px 20px;
    flex: 1 1 calc(33.333% - 20px); /* 3カラム分の幅を指定 */
    min-width: 250px; 
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s;
  }

  /*.benefit-card:hover {
    transform: translateY(-5px);
  }*/

  .benefit-icon {
    width: 70px;
    height: 70px;
    background: #e6f0fa;
    color: #0056b3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
  }

  .benefit-icon svg {
    width: 35px;
    height: 35px;
    fill: currentColor;
  }

  .benefit-card h3 {
    font-size: 20px;
    color: #0056b3;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
  }

  .benefit-card p {
    font-size: 15px;
    text-align: left;
  }

  /* 機能紹介カード（Features） */
  .features-wrapper {
    margin-top: 60px;
  }

  /* コンテンツタイプ（横2列カード） */
  .content-types-container {
    display: flex;
    gap: 30px;
    margin-bottom: 60px;
  }

  .content-type-box {
    flex: 1;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .type-content {
    padding: 30px;
    flex: 1;
  }

  .type-title {
    font-size: 20px;
    color: #0056b3;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
  }

  .type-list {
    padding-left: 20px;
    margin: 0;
  }

  .type-list li {
    margin-bottom: 10px;
    font-size: 15px;
  }

  /* 個別の事例紹介リスト */
  .cases-row {
    display: flex;
    flex-direction: column; 
    gap: 40px; 
  }

  .case-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;
    overflow: hidden; 
  }

  /* 事例1（奇数番目）は右画像・左テキスト */
  .case-card:nth-child(odd) {
    flex-direction: row-reverse;
  }

  /* 事例2（偶数番目）は左画像・右テキスト */
  .case-card:nth-child(even) {
    flex-direction: row;
  }

  /* ★変更箇所：画像用ラッパーの幅を50%に変更 */
  .case-img-wrapper {
    width: 50%;
    background-color: #f5f8fa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box; 
  }

  /* 境界線の設定 */
  .case-card:nth-child(odd) .case-img-wrapper {
    border-left: 1px solid #eee;
  }
  .case-card:nth-child(even) .case-img-wrapper {
    border-right: 1px solid #eee;
  }

  /* ★変更箇所：画像のmax-heightを大きく変更 */
  .case-img-wrapper img {
    width: 100%;
    max-height: 400px;
    object-fit: contain; 
  }

  /* ★変更箇所：テキストコンテンツ用ラッパーの幅を50%に変更 */
  .case-content {
    width: 50%;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .feature-title {
    color: #0056b3;
    font-size: 22px;
    margin-bottom: 15px;
    border-bottom: 2px solid #0056b3;
    display: inline-block;
    padding-bottom: 5px;
  }

  .feature-list {
    padding-left: 20px;
    margin-top: 15px;
  }

  .feature-list li {
    margin-bottom: 8px;
  }

  /* --------------------------------------------------
    CTAセクション
  -------------------------------------------------- */
  .cta-section {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 50px 0;
  }

  .cta-btn {
    display: inline-block;
    background: #0056b3;
    color: #fff;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    font-size: 18px;
    margin-top: 20px;
    transition: background 0.3s;
  }

  .cta-btn:hover {
    background: #004494;
  }

  /* --------------------------------------------------
    モバイル対応
  -------------------------------------------------- */
  @media (max-width: 768px) {
    header .inner {
        flex-direction: column;
        text-align: center;
    }
    header .__img {
        width: 80%;
        margin-bottom: 20px;
    }
    header .catchcopy {
        width: 100%;
    }
    header .catchcopy h1 {
        font-size: 28px;
    }
    
    .intro-lead-appeal {
        font-size: 16px;
        text-align: left;
    }

    .flow-wrapper {
        flex-direction: column;
        align-items: center;
    }
    .flow-card {
        width: 100%;
        max-width: 300px;
    }
    .flow-card:not(:last-child)::after {
        display: none;
    }
    
    .flow-note {
        text-align: center;
        padding: 0 20px;
    }

    .benefit-card {
        width: 100%;
        max-width: none;
        flex-basis: auto; /* スマホでは縦並びに */
    }

    /* モバイル時のコンテンツタイプ（縦並び） */
    .content-types-container {
        flex-direction: column;
        gap: 20px;
    }

    /* モバイル時の事例レイアウト（すべて縦並び上画像・下テキストに戻す） */
    .case-card, .case-card:nth-child(odd), .case-card:nth-child(even) {
        flex-direction: column;
    }
    .case-img-wrapper, 
    .case-card:nth-child(odd) .case-img-wrapper, 
    .case-card:nth-child(even) .case-img-wrapper {
        width: 100%;
        height: auto; 
        min-height: 220px;
        border-right: none;
        border-left: none;
        border-bottom: 1px solid #eee;
        padding: 15px 20px;
    }
    .case-content {
        width: 100%;
        padding: 30px;
    }
  }

}