/* ======================================= 
   ファイル名: concept-section.css
   ======================================= */

/* -----------------------------
   セクション全体
----------------------------- */
.concept-intro-section {
  text-align: center;
  padding: 80px 20px; /* 上下余白を少し広げてゆとりを持たせました */
  background-color: #f9f9f9;
  font-family: "Yu Mincho", "游明朝体", serif;
  line-height: 1.8; /* 全体的に読みやすく行間を少し広げました */
}

/* -----------------------------
   ロゴ
----------------------------- */
.concept-logo img {
  max-width: 180px;
  height: auto;
  margin: 0 auto 40px; /* 下の文字との間隔を少し広げてロゴを際立たせました */
  display: block;
}

/* -----------------------------
   テキスト全体
----------------------------- */
.concept-text {
  max-width: 850px; /* テキスト量が増えたため、最大幅を少し広げて調整 */
  margin: 0 auto;
}

/* -----------------------------
   テキスト装飾
----------------------------- */
.concept-highlight {
  color: #000;
  font-weight: bold;
  font-size: 22px; /* 少しだけ大きくしてキャッチコピーとしての存在感を強化 */
  margin-bottom: 30px;
  line-height: 1.6;
}

/* 特定のテキストのみ青を適用するクラス */
.text-blue {
  color: #12458f;
}

/* 重要：単語の途中で改行させず、読ませたいフレーズをまとめる設定 */
.text-blue {
  display: inline-block; /* フレーズがバラバラに改行されるのを防ぎます */
}

/* -----------------------------
   説明文部分
----------------------------- */
.concept-description {
  font-size: 15px; /* 14pxから15pxへ。可読性を向上させました */
  line-height: 2.0; /* 複数行にわたるため、行間を広めにとって高級感を演出 */
  color: #000;
  margin-bottom: 0;
}

/* -----------------------------
   レスポンシブ調整（スマホ対応）
----------------------------- */
@media (max-width: 768px) {
  .concept-intro-section {
    padding: 60px 20px;
  }
  .concept-highlight {
    font-size: 19px; /* スマホで大きすぎないよう調整 */
    line-height: 1.5;
  }
  .concept-description {
    font-size: 14px;
    line-height: 1.8;
  }
  .concept-logo img {
    max-width: 140px;
    margin-bottom: 30px;
  }
  /* スマホではinline-blockを解除して自然な改行に戻す */
  .text-blue {
    display: inline;
  }
}