@charset "UTF-8";
/* ============================================================
 * パーツ: コンセプト(文章)
 *   本文の色・文字サイズは設定で変えられる(--sec-text-color / --sec-text-size)
 *   本文の枠の背景は --sec-box-bg / --sec-box-image / --sec-box-pad(lib/theme.php の hp_sections_css)
 * ============================================================ */

.hp-concept {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--sec-box-pad, 0);
  font-size: var(--sec-text-size, 1.5rem);
  line-height: 2;
  text-align: center;
  color: var(--sec-text-color, inherit);
  /* 本文の枠(パーツの設定「本文の枠」を指定したときだけ枠になる) */
  background-color: var(--sec-box-bg, transparent);
  background-image: var(--sec-box-image, none);
  background-position: center;
  background-size: cover;
  border-radius: 1.2rem;
}

/* 左寄せ(情報の更新画面「コンセプトの入力」で選ぶ) */
.hp-concept--left {
  text-align: left;
}

@media (min-width: 900px) {
  .hp-concept {
    font-size: var(--sec-text-size, 1.6rem);
  }
}

/* ---------- スマホで10行より長いときは「続きを見る」(パーツの設定。hp.js が長さを見てボタンを出す) ---------- */
@media (max-width: 899px) {
  .hp-concept-fold:not(.is-open) .hp-concept {
    max-height: 20em;   /* 行の高さ 2 × 10行 */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent);
    mask-image: linear-gradient(to bottom, #000 75%, transparent);
  }
}

@media (min-width: 900px) {
  .hp-concept-fold__more {
    display: none;
  }
}