/* catch-image-box.css */

.catch-image-box {
  height: 100px; 	/* 100px 高さがなければ画像も表示されません */
  /* background-image: url('img/icons/icon1_png/lglp_cs01.png'); ←不要 */
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  margin: 20px auto;
  transition: background-image 1s ease-in-out;}

.catch-image-box {
  height: 120px;
  /* background-image: url('img/icons/icon1_png/lglp_cs01.png'); ←不要 */
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  margin: 10px auto;}

.catchphrase-below {
  text-align: center;
  font-size: 18px;		/* 20px */
  font-weight: bold;
  color: #006666;
  margin-top: 10px;
  font-family: 'メイリオ', sans-serif;}

.catch-image-box {
  position: relative; /* ここがポイント：親にrelativeを指定 */
  height: 160px;
  /* background-image: url('img/icons/icon1_png/lglp_cs01.png'); ←不要 */
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  margin: 10px auto;
  transition: background-image 1s ease-in-out;}

.catch-image-box {
  position: relative;
  height: 160px;		// 160px
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  margin: 10px auto;
  transition: background-image 1s ease-in-out;}

/* ====================================================================
左上	top: 10px; left: 10px;
右上	top: 10px; right: 10px; left: auto;
中央下	bottom: 10px; left: 50%; transform: translateX(-50%);
真ん中中央	top: 50%; left: 50%; transform: translate(-50%, -50%);
======================================================================= */

/* キャッチフレーズを画像内の好きな位置に置けるように */

.catchphrase {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: linear-gradient(to right, #009999, #66cccc);
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  border: 1px solid #006666;
  background-color: rgba(0, 0, 0, 0.25);
  text-shadow: 1px 1px 3px black;
  font-family: "メイリオ", sans-serif;
  width: fit-content;	  	/* ← 必要に応じてここを変更 */

width: max-content;	/* 短文でも長文でも自然に表示され、画面幅に収まりやすくなる */
max-width: 90%;		/* おすすめ設定（中央配置＋最大90%に広がる）*/
text-align: center;}

/* =================================================
.catchphrase {width: 100%; text-align: center;} // ① 横幅を親ボックスいっぱいに広げたい場合 中央揃えするならこれも必要
.catchphrase {width: 300px;}			// ② 横幅を固定サイズにしたい場合（例：300px）
.catchphrase {max-width: 90%;}			// ③ 最大幅を制限したい場合（横幅は広がるけど最大限を制限）
==================================================== */

/* body {background-color: yellow;} */